Tell us what’s happening:
warn:
1.Each .nav-link element should have an href attribute.
2.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’ve added a href element for each .nav-link and linked each .nav-link element to the corresponding element on the landing page.
Your code so far
<!-- file: index.html -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>test</title>
</head>
<body>
<header id="header">
<div id="logo">
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
alt="logo">
</div>
<nav id="nav-bar">
<div class="nav-link"><a href="#login">Log in</a></div>
<div class="nav-link"><a href="#register">register</a></div>
<div class="nav-link"><a href="#visitor">visitor</a></div>
</nav>
</header>
<div id="main">
<div id="login">
<h2>This is a login information</h2>
<form id="forma">
<ul>
<li>
<label>account</label>
<input required>
</li>
<li>
<label>password</label>
<input required>
</li>
</ul>
<input class="button" type="submit" value="login">
</form>
</div>
<div id="register">
<h2>This is a registered information</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<ul class="registerul">
<li>
<label>name</label>
<input required>
</li>
<li>
<label>account</label>
<input required>
</li>
<li>
<label>password</label>
<input required>
</li>
<li>
<label for="email">email</label>
<input type="email" id="email" required placeholder="xx@xx.xx" name="email">
</li>
</ul>
<input id="submit" type="submit" value="register" action="https://www.freecodecamp.com/email-submit">
</form>
<h3>Video display:</h3>
<iframe id="video" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0"></iframe>
</div>
<div id="visitor">
<h2>This is a tourist information</h2>
</div>
</div>
</body>
</html>
/* file: styles.css */
*{
margin:0;
padding:0;
}
html{
min-width:270px;
}
#header{
display:flex;
position:fixed;
width:100%;
background:green;
top:0;
}
#logo{
width:100%;
}
.nav-link{
background:white;
}
#nav-bar{
justify-content:space-evenly;
display:flex;
align-items:center;
background:red;
width:75%;
min-width:270px;
}
#header-img{
width:300px;
margin-left:10px;
}
#main{
background-color:orange;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
height:300%;
}
h2::before{
content:"";
height:58.88px;
display:block;
}
#login{
background:pink;
width:100%;
height:100%;
display:flex;
align-items:center;
flex-direction:column;
justify-content:space-evenly;
}
#register{
background:blue;
width:100%;
display:flex;
align-items:center;
flex-direction:column;
height:100%;
justify-content:space-evenly;
}
#visiter{
background:rgb(200,200,200);
width:100%;
display:flex;
align-items:center;
flex-direction:column;
height:100%;
justify-content:space-evenly;
}
#video{
width:560px;
height:315px;
border:0;
}
ul{
list-style:none;
}
label{
display:block
}
#submit{
width:80px;
margin:auto;
display:block;
}
@media(max-width:768px){
#header{
display:flex;
flex-direction:column;
}
#nav-bar{
width:100%;
}
#header-img{
margin:auto;
display:block;
}
}
@media(max-width:560px){
#video{
width:460px;
}
#header-img{
width:270px;
}
}
@media(max-width:460px){
#video{
width:270px;
}
}
/* User Editable Region */
/* User Editable Region */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36
Challenge Information:
Product Landing Page - Build a Product Landing Page