Build a Product Landing Page 2

**Good day Coders, Please help. I’m tyring to link Each .nav-link element to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer )

  1. my code should put #nav-bar always be at the top of the viewport?
    **

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

<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>


</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="">Privacy</li>
<li><a href="">Terms</li> 
<li><a href="">Contacts</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;
}
   **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:

  1. You have to move the sticky position to the header otherwise the nav is just sticky inside the header (which you can test to see by giving the header a bunch of height).

position - CSS: Cascading Style Sheets | MDN

sticky

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

  1. Your href values are not the same as the id values on the sections they are supposed to link to, and you are missing the hash # for the href values as well.

@lasjorg thank your assistance, please check solution no.2; href values are the same with id values and i put # to my href values, yet my code is still not working?

Post your updated code.


To format the code you can use the “preformatted text” tool in the editor (</>) to add backticks around text.

1 Like