Tell us what’s happening:
I have 1 thing left, and i cant get it right.
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 ).
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width.initial-scale=1.0">
<title>Product landing page</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<header id="header">
<img id="header-img" src="https://victoriavynn.com/img/its_me_victoria_vynn.png" alt="video" height="30"/>
<nav id="nav-bar" ><a class="nav-link" href="#colors" >Colors</a>
<a class="nav-link" href="#video" >News</div>
<a class="nav-link" href="#pricing" value="#footer">Pricing</a></nav>
</header>
<h1>VictoriaVynn</h1>
<h2>The beginning</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" type="email" placeholder="Enter your email address" name="email">
</input><input id="submit" type="submit" action="https://www.freecodecamp.com/email-submit" value="Subscribe"></input>
<video id="video" width="560" height="315"src="https://victoriavynn.com/video/newsletter_v2.mp4"></video>
</form>
<section>
<ul>
<li><b>inspirations</b>
<div>Discover the most interesting nail art and stay up to date with news and trends.</div>
</li>
<li><b>Pure</b>
<a src="https://victoriavynn.com/uploads/pictogram1.png"></a>
<div>The Pure Creamy Hybrid system comprises creamy hybrid polishes of excellent coverage and durability. It’s a formula with a high safety index, free of an irritating smell and removable with cosmetic alcohol. The short and flat brush, designed especially for the Pure line of products, facilitates even application. The system allows you to create ultra-thin hybrid manicures.</div>
</li>
<li><b>Gelpolish</b>
<a src="https://victoriavynn.com/en/product/gel-polish-001-flawless-white/187.html"></a> <div>The Gel Polish system comprises classic, durable hybrid polishes cured in UV and LED lamps. The system contains bases and tops of different properties, durability and finish.</div>
</li>
</ul
</section>
</body>
<footer id="footer">Privacy
Terms
Contact
</footer>
</html>
/* file: styles.css */
*{
margin: 10;
padding: 0;
}
body{
text-align: center;
background-color: rgb(170, 164, 165);
}
header {
position: fixed;
background-color: rgb(231, 223, 223);
right: 0;
left:0;
margin-top: -1.5em;
}
#header-img{
float: left;
}
#email, #submit{
text-align: center;
margin: auto;
}
#submit{
background-color: yellow;
border: none;
cursor: pointer;
}
#nav-bar{
float: right;
word-spacing: 17;
}
video{
max-height: 100px;
margin: auto;
display: block;
}
h1{
text-align: center;
padding: 5%;
font-size: 50px
}
h2{
padding-bottom: 5%;
}
li{
border: dotted;
display: inline-flex;
padding: 10px;
margin-top: 5px;
}
footer{
font-size: 17px;
font-weight: 500;
background-color: grijs;
word-spacing: 10;
background-color: rgb(231, 223, 223);
bottom: 0px;
right: 0;
}
@media screen and (min-width: 800px) {
main {
width: 760px;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge: