Build a product landing page 3

Good day coders, please help. my code should link 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 )
Describe your issue in detail here.

   **Your code so far**
/* file: index.html */
<html>
<link rel="stylesheet" href="styles.css">

<div class="main">
<header id= "header"> 
<img id="header-img" src="https://www.google.co.za/url?sa=i&url=https%3A%2F%2Fsashares.co.za%2Fnasdaq-forex-brokers%2F&psig=AOvVaw2lMNrV_Am0uq4DJU5h0xDY&ust=1654376453638000&source=images&cd=vfe&ved=0CAwQjRxqFwoTCLi999qWkvgCFQAAAAAdAAAAABAD" alt="header-img">


<nav id= "nav-bar">
 <ul>
<li><a class="nav-link" href="#Features">Features</a></li>
<li><a class="nav-link" href="#How it works">How it works</a></li>
<li><a class="nav-link" href="#Pricing">Pricing</a></li>
   </ul>
</nav>
</header>

<div class=" subscribers">
 <h2>Full Stack Smart Money Concept</h2>
<form action= "https://www.freecodecamp.com/email-submit" id="form">
<input id="email" type="email" name="email" placeholder="Entre Your email address" alt="email">
<input id="submit" type="submit" value="Get Stated">

</form>
</div>

<section id="featured" class= "container">
 <div class="featured-wrapper">
 <div class="featured-icon"> 
 <div class="fire">  
</div>
<div class="featured-text">
 <h3>Smart money Blue Print Course </h3> 
 <p> Gain Access to our Smart Money Concept course and learn <br> how we achieve plus 1:10 Risk Reward as a minimum     </p>
</div> 
</div>

<div class="featured-wrapper">
 <div class="featured-icon"> 
 <div class="fire">  
</div>
<div class="featured-text">
 <h3>Kick start your Trading Career the right way.
   <br>
   <br>
   These course is Suitable for all experiece levels including absolute beginners.  </h3> 
   
</div> 
</div>
 <div class="featured-wrapper">
 <div class="featured-icon"> 
 <div class="fire">  
</div>
<div class="featured-text">
 <h3>First LEARN...then remove 'L' Dumb Money Can Become Smart Money </h3> 

</div> 
</div>
 </section>

<form id= "form">
<iframe id="video"
<iframe width="670" height="377" src="https://www.youtube.com/embed/qA-Qli3roTM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</iframe>
</form>    

<section id="pricing">
 <div class=" Course Pricing">
 <div class="pricing-Box">
<h4> PACKAGE 1 </h4>
<p class="Price">R3500 </p> 
<p> Access to Full Course</p>
<p>Access to Telegram Private Group</p>
<p>12 Months Mentorship </p>
<p>One On One Session Per Week </p>

</div>  
 
<div class=" Course Pricing">
 <div class="pricing-Box">
<h4> PACKAGE 2 </h4>
<p class="Price">R2000 </p> 
<p> Access to Full Course</p>
<p>Access to Telegram Private Group</p>

</div>
 <div class=" Course Pricing">
 <div class="pricing-Box">
<h4> PACKAGE 3 </h4>
<p class="Price">R1000 </p> 
<p>Access to Full Course</p>
<p>One On One Session Per Week for 2 Months </p>
</div>     

</div>
</section>

<footer>
<div class="footer-nav">
<ul>
<li><a href="#Features">Features</a></li>
<li><a href="#How it works">How it works</a></li> 
<li><a href="#Pricing">Pricing</a></li> 
</ul>
</div>
<div class="footer-copyright">
<p>Copyright 2016, Original Trombones</p>
</div>
</footer>
</html>
/* file: styles.css */
body{
 background-color:silver;
}
#featured-wrapper{
display:flex;
align-text:center;
margin-top:20px;
}

#nav-bar{
 background-color: white;
 align-text:top;

position: -webkit-sticky; /* Safari */
 position: sticky;
 top: 0;
 
 border: 2px solid black;
}

@media screen and (max-width: 650px) {
 .featured-wrapper:colomn;
}

header{
 
position: -webkit-sticky; /* Safari */
 position: sticky;
 top: 0;
}
   **Your browser information:**

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

Challenge: Build a Product Landing Page

Link to the challenge:

hi, you should edit your li elements like example below, and add section elements for each section, or part of the page, then give each section element the corresponding id. for example feature.

<li><a href="#features">Features</a></li>
<li><a href="#how-it-works">How it works</a></li> 
<li><a href="#pricing">Pricing</a></li> 


<section id="features">

</section>


<section id="how-it-works">

</section>


<section id="pricing">

</section>

hope it helps.!

2 Likes

@massih My code is working, thank you.

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