Can somebody help me with this 1 step i am missing.
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 ).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header id='header'>
<img id='header-img' src=''></img>
</head>
<div id='page-wrapper'>
</div>
<nav id='nav-bar'>
<ul>
<li>
<a class='nav-link' href='#Bio'>Bio</a>
</li>
<li>
<a class='nav-link' href='#What to know'>What to know</a>
</li>
<li>
<a class='nav-link' href='#Pricing'>Pricing</a>
</li>
</ul>
</nav>
</header>
<section id='hero'>
<h2>The best football coaching service</h2>
<form id='form' action='https://www.freecodecamp.com/email-submit'>
<input name='email' id='email' type='email' placeholder='Enter your email address' required>
<input id='submit' type='submit' value='Get started' class='btn'>
</form>
</section>
<div class='container'>
<section id='features'>
<div class='grid'>
<div class='icon'>
<i class="fa fa-book">
</i>
</div>
<div class='desc'>
<h2>Learn from experienced coaches</h2>
<p>Our coaches have years of experience working with kids of all ages and providing insightful training</p>
</div>
</div>
<div class='grid'>
<div class='icon'>
<i class="fa fa-soccer-ball-o"></i>
</div>
<div>
</div>
<div class='desc'>
<h2>Brush up on your football technique</h2>
<p>It is essential that kids learn the basics and that is what we focus on as they have all the fundamentals in place</p>
</div>
</div>
<div class='grid'>
<div class='icon'>
<i class="fa fa-volume-control-phone"></i>
</div>
<div class='desc'>
<h2>Quality support and service</h2>
<p>We will provide our exper service after sessions through regular reports and updates through our progress chart</p>
</div>
</div>
</section>
<section id='training example'>
<iframe id='video' height='315' src='https://www.youtube.com/watch?v=H5SMtN6Qa6w&pp=ygURZm9vdGJhbGwgdHJhaW5pbmc%3D' frameborder='0' allowfullscreen>
</iframe>
</section>
<section id='pricing'>
<div class='product' id='1 session'></div>
<h2>1 session</h2>
<ol>
</ol>
<li>£30 per hour</li>
<li>basic training</li>
<li>ballwork</li>
<button class='btn'>Select</button>
<div class='product' id='4 sessions'></div>
<h2>4 sessions</h2>
<ol>
</ol>
<li>£25 per hour</li>
<li>basic training</li>
<li>ballwork</li>
<li>Notes sent at the end of session</li>
<li>Phone call discussions</li>
<button class='btn'>Select</button>
<div class='product' id='10 sessions'></div>
<h2>10 sessions</h2>
<ol>
</ol>
<li>£25 per hour</li>
<li>basic training</li>
<li>ballwork</li>
<li>Notes sent at the end of session</li>
<li>Phone call discussions</li>
<li>Fitness work
</li>
<li>
Nutrition Guide
</li>
<button class='btn'>Select</button>
</section>
<footer>
<ul>
<li><a href="#footer">Privacy</a></li>
<li><a href="#footer">Terms</a></li>
<li><a href="#footer">Contact</a></li>
</ul>
<span>Copyright Football Coaching</span>
</footer>
</div>
</div>
</body>
</html>
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Challenge Information:
Product Landing Page - Build a Product Landing Page
I don’t see an element with the id of Bio, so this link is not going to work.
Well, ids can’t have spaces in them, so this one can’t be right.
I don’t see an element with the id of Pricing, so this link isn’t going to work. I do see an element with the id of pricing, so I’m guessing this is what you wanted to point to.
thanks that worked, i just want to fix the navigation as it isn’t fixed when scrolling down. I have added code for it but i might be missing something.
Whenever you want help, you will need to paste your updated code in here so we can see what you have done and test it for ourselves. Please use the following method to paste your code in here. Be sure to paste both your HTML and CSS.
To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.
You only pasted your HTML in here. The three remaining tests that are passing all have to do with your CSS. So you’ll need to paste that in here as well.