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"/>
<meta name="viewport" content="width=device-width, initial-sacle=1.0"/>
<link rel="stylesheet" href="styles.css">
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
crossorigin="anonymous"</link>
</head>
<body>
<header id="header">
<img id="header-img" src="https://e7.pngegg.com/pngimages/577/126/png-clipart-saxophone-music-painting-art-silhouette-saxophone-white-mammal-thumbnail.png">
<nav id="nav-bar">
<ul>
<li><a href="#features" class="nav-link">Features</a></li>
<li><a href="#how-it-works" class="nav-link">How It Works</a></li>
<li><a href="#pricing" class="nav-link" >Pricing</a></li>
</ul>
</nav>
</header>
<div>
<h1>Handcrafted, home-made masterpieces</h1>
<form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
<input id="email"type="email" name="email" placeholder="Enter your email address"/>
<input id="submit" type="submit" value="GET STARTED">
</form action="" >
</div>
<section id="features">
<div class="grid">
<i class="fa fa-3x fa-truck"></i>
<article><h1>Premium Materials</h1>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p></article>
</div>
<div class="grid">
<i class="fa fa-3x fa-fire"></i>
<article><h1>Fast Shipping</h1>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p></article>
</div>
<div class="grid">
<i class="fa fa-3x fa-battery-full"></i>
<article><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></article>
</div>
</section>
<section id="how-it-works">
<iframe id="video"
width="420" height="315" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0"
</iframe>
</section>
<section id="pricing">
<div class="product" id="tenor">
<div class="level">Bass Trombone</div>
<h2>$600</h2>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum. dolor</li>
<li>Lorem ipsum.</li>
</ol>
<button class="btn">select</button>
</div>
<div class="product" id="bass">
<div class="level">Bass Trombone</div>
<h2>$900</h2>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum. dolor</li>
<li>Lorem ipsum.</li>
</ol>
<button class="btn">Select</button>
</div>
<div class="product" id="valve">
<div class="level">Valve Trombone</div>
<h2>$1200</h2>
<ol>
<li>Plays similar to a Trumpet</li>
<li>Great for Jazz Bands</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="btn">Select</button>
</div>
</section>
<footer>
</footer>
</body>
</html>```