**
Hello ,
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
) —
— i was being told that my code always have this Problem .i dunt know how to solve it , Hope someone can help me, thank you.
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
/>
<style>
main{
display:flex;
flex-direction: column;
}
header {
position: fixed;
width: 100%;
background-color: hsl(45, 50%, 90%);
display: flex;
grid-template-columns: 300px 1fr;
z-index: 1;
top: 0;
left: 0;
padding-top: 5px;
}
body {background-color: hsl(21, 45%, 60%);
font-family: "Raleway", Helvetica, sans-serif;}
#nav-bar {
grid-column: 3;
align-self: center;
justify-self: right;
display: flex;
margin-right: 5px;
}
#video {
margin: auto;
max-width: 100%;
margin-top: 20px;
margin-bottom: 10px;
}
@keyframes background-color {
100% {
background-color: hsl(45, 70%, 65%);
}
}
@media(max-width: 640px) {
main {
font-size: 85%;
}
}
</style>
<main>
div id="page-wrapper">
<header id="header">
<div class="logo">
<img
id="header-img"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
alt="original trombones logo" />
</div>
<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>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input type="email" id="email" name="email" placeholder="enter your email" required</input>
<input type="submit" id="submit" name="submit"</input>
</form>
<iframe id="video" iframe width="280" height="240" src=https://www.youtube.com/embed/y8Yv4pnO7qc frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" ></iframe>
</div>
</main>
<footer>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Contact</a></li>
</ul>
<span>Copyright 2016, Original Trombones</span>
</footer>
/* file: styles.css */
**Your browser information:**
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.2 Safari/605.1.15
Challenge: Build a Product Landing Page
Link to the challenge: