Responsive Web Design Projects - Build a Product Lanfing Page | When I click a .nav-link button in thr nav element, I am taken to the corresponding section of the landing page.```via

HTML-CSS
1

I am trying to complete a project namely Responsive Web Design Project - Build a Product Landing Page

In the user story #5 I have tried the following steps:

  • Making a List of element inside nav bar(id = “nav-link”)
    and accessing the elements (that i made inside main tag) via a href.
   <nav id="nav-bar">
     
     <ul>
       <li><a href="#features" class="nav-link">Features</a></li>
       <li><a href="#howitworks" class="nav-link">How It Works</a></li>
       <li><a href="#pricing" class="nav-link">Pricing</a></li>
     </ul>
     
   </nav> 
 </header>
 
 <main>
   <section id="feauters">
     <h1>Premium Materials</h1>
     <p>Our rombstones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
   </section>
   <section id="howitworks">
     <h1>Fast Shipping</h1>
     <p>We make sure you receive your trombstone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
   </section>
   <section id="pricing">
     <h1>Quality Assurance</h1>
     <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument</p>
   </section>
 </main>
  • Accessing the sections via a href with section inside the nav section.
  <nav id="nav-bar">
   
   <a href="#features" class="nav-link">Features</a>
   <a href="#howitworks" class="nav-link">How It Works</a>
   <a href="#pricing" class="nav-link">Pricing</a>
   
   <section id="feauters">
     <h1>Premium Materials</h1>
     <p>Our rombstones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
   </section>
   <section id="howitworks">
     <h1>Fast Shipping</h1>
     <p>We make sure you receive your trombstone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
   </section>
   <section id="pricing">
     <h1>Quality Assurance</h1>
     <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument</p>
   </section>
   
 </nav>

But none of them seems to pass the relevant user story i.e. User story#6.

Here is my full code:

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<!-- 

Hello Camper!

For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding! 

- The freeCodeCamp Team 

-->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <header id="header">
   <img src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" id="header-img"></img>
   <nav id="nav-bar">
     
     <ul>
       <li><a href="#features" class="nav-link">Features</a></li>
       <li><a href="#howitworks" class="nav-link">How It Works</a></li>
       <li><a href="#pricing" class="nav-link">Pricing</a></li>
     </ul>
     
   </nav> 
 </header>
 
 <main>
   <section id="feauters">
     <h1>Premium Materials</h1>
     <p>Our rombstones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
   </section>
   <section id="howitworks">
     <h1>Fast Shipping</h1>
     <p>We make sure you receive your trombstone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
   </section>
   <section id="pricing">
     <h1>Quality Assurance</h1>
     <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument</p>
   </section>
 </main>
</body>
</html>

Can anybody suggest something?

2

would you be so kind to post this into codepen?

3

typos, the bane of our existence

1 Like
4

Thanks for the solution. I hope this typo shall not be repeated.