Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

Guys please help me fix these:

  1. Each .nav-link element should have an href attribute.
  2. Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer ).

Below are my lines of code.

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Your Title Here</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<header id="header">
  <img id="header-img" src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fnovibonjovi.github.io%2Fproduct-landing-page%2F&psig=AOvVaw2b8G68B3g4GSLdFmY-x77t&ust=1700001412372000&source=images&cd=vfe&ved=0CBIQjRxqFwoTCKCz5_SEwoIDFQAAAAAdAAAAABAE" alt="trombones">
  <nav id="nav-bar">
    <ul>
      <li class="nav-link"><a href="#features">Features</a></li>
      <li class="nav-link"><a href="#how_it_works">How It Works</a></li>
      <li class="nav-link"><a href="#pricing">Pricing</a></li>
    </ul>
  </nav>
</header>
<h3>Handcrafted, home-made masterpieces</h3>

<form id="form" method="POST" action="https://www.freecodecamp.com/email-submit">
  <input id="email" placeholder="Enter your email address" type="email" name="email">
  <input id="submit" type="submit">
</form>

<section id="features">
 
<h3>Premium Materials</h3>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
<h3>Fast Shipping</h3>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
<h3>Quality Assurance</h3>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of</p>
</section>
<video id="video" src="https://youtu.be/y8Yv4pnO7qc"></video>
<section id="how_it_works">
  
</section>

<section id="pricing">
 
</section>

</body>
</html>


/* file: styles.css */

  @media only screen and (max-width: 550px) {
    #header {
      width: 100%;
      display: flex;
    }
  }

  #header {
    display: flex;
    position: fixed;
    width: 100%; 
  }
  ul{
list-style-type: none;
  }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Hello @owuorodila !

Move the anchor ><a to behind the <li so the class nav-link is part of the anchor.
It is necessary to move both the closing anchor and opening as I have it here to have it work for the nav-link problem.

Keep up the good progress.
Happy coding!

1 Like
3
  • “href” elements are not “directly” on “nav-link”, simply move that “class name” to anchor elements directly

address that change and it should be okay, happy coding :slight_smile:

1 Like
4

thank you so much finally it worked

1 Like
5

you solved my problem

1 Like
6

Thank you for letting me know the suggestion helped you move on to the next step @owuorodila !

Keep up the good progress!

Happy coding!

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.