Eyes on: product landing page

I am having trouble spotting my issue with my links not working properly.

I am also having trouble with my CSS I finally got it away from a jumbled mess but its spacing is odd in my “Durham section” and none of my images/video are displaying which is a real pain. (Kind of figuring it’s my file path, which is something I seem to struggle with if anyone knows a good reference I’d appreciate the help.) Please let me know if you can spot my issues I figure it’s something simple and I am just failing to spot it.

https://codepen.io/graysara/pen/ExYZPKY

  1. You have herf and not href on the last three links.

  2. Try using this iframe for the video.

<iframe width="560" height="315" src="https://www.youtube.com/embed/tROD8wlw_l8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Note: it has some inline styles you might want to put in the CSS instead, search for responsive video to see some examples.

  1. What is the layout you want for the “Durham section”? IF you just want to center it you can add justify-content: center;.

I’m guessing you worked on this locally and that is why your file paths are like they are. But for img elements, you should be using an image format like .jpg or .png and not .pdf files.

Thank you for your input and help, lasjorg. I forgot about the image file type and my video is now working like a charm. I still have a good deal of work to apply but it’s getting closer. Thanks again.

Happy to help.

You still need to fix your links though. Just in case I didn’t explain it well, I will try again.

You have this:

<a class="nav-link" herf="#works">works</a>

It should be this:

<a class="nav-link" href="#works">works</a>

The attribute should be href, not herf. You need to change that on the last three nav links.

BTW. Codepen can check your code for you. Press the down arrow to the right of the HTML code box and select “Analyze HTML” from the menu. You can do the same for the CSS.