**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 )
-
my code should put
#nav-baralways 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:
