Hello,
I’ve been trying to figure out what the problem is with my Product Landing Page. All but one of the criteria are passing. I am failing the nav-link buttons focusing on different section portion but I feel like my nav-links are working just fine. Any thoughts?
==================================HTML
<!DOCTYPE html>
<html>
<html lang="en">
<meta charset="utf-8">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Product Landing Page</title>
</head>
<body>
<header id="header">
<div id="brand">
<img src="waterLogo1.png" id="header-img">
<h3>ReFresh Water</h3>
</div>
<nav id="nav-bar">
<div class="nav-link"><a href="#textspot">Features</a></div>
<div class="nav-link"><a href="#video">Video</a></div>
<div class="nav-link"><a href="#form">Sign Up</a></div>
</nav>
</header>
<div id="jumbo">
<h1>Pure water is possible</h1>
</div>
<div id="textspot"></div>
<div id="blurb">
<p>How clean is the water you drink? At ReFresh Water, we believe nothing is more important that your health, and your health starts with what you put into your body. Our patented ReFresh technology assures the water you put in will come out pure down to the micron. We do all the work for you so that you can rest assured that you only take in what you want to and nothing more.</p>
</div>
<div class="teaser">
<a href="#video"><strong>See it in Action</strong></a>
</div>
<iframe id="video" width="500" height="300" src="https://www.youtube.com/embed/Og87nNRvldM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<p id="subtitle"><strong>Get Started</strong></p>
<div class="left">
<label for="name">Name:</label>
</div>
<div class="right">
<input id="name" type="text" name="name" placeholder="Enter your name">
</div>
<div class="left">
<label for="email">Email:</label>
</div>
<div class="right">
<input id="email" type="email" name="email" placeholder="Enter your email">
</div>
<div>
<input type="submit" name="submit" id="submit" value="Submit">
</div>
</form>
</body>
</html>
=====================================CSS
body{
background-color: cornflowerblue;
margin: auto;
text-align: center;
font-family: 'Lato', sans-serif;
}
/*Navbar*/
#header {
display: flex;
position: fixed;
align-items: center;
justify-content:space-between;
top: 0px;
z-index: 1;
width: 100%;
height: 50px;
margin: 0;
padding: 0;
background-color: whitesmoke;
}
#brand {
display: flex;
margin-left: 10px;
padding-left: 3px;
padding-right: 3px;
text-shadow: 0px 4px 3px rgba(0,0,0,0.2),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
#nav-bar {
display: flex;
}
.nav-link {
font-size: 1.5em;
text-align: center;
margin: 0 10px 0 10px;
padding: 0 5px 0 5px;
}
.nav-link > a:link {
text-decoration: none;
color: darkgrey;
}
.nav-link > a:visited {
color: slategrey;
}
#jumbo {
font-size: 1.5em;
margin-top: 10%;
text-shadow: 0px 4px 3px rgba(0,0,0,0.2),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
#blurb {
font-size: 1.5em;
line-height: 200%;
text-align: justify;
width: 45%;
margin: auto;
margin-top: 5%;
margin-bottom: 5%;
text-shadow: 0px 4px 3px rgba(0,0,0,0.2),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
.teaser {
background: linear-gradient(180deg, gold 60%, #d8b601 100%);
font-size: 1.15em;
margin: auto;
padding-top: 12px;
width: 150px;
height: 33px;
border: 1px solid gold;
box-shadow: 1px 1px 1px khaki;
border-radius: 4px;
margin-bottom: 10%;
text-shadow: 0px 4px 3px rgba(0,0,0,0.2),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
.teaser > a {
color: black;
}
.teaser > a:link {
text-decoration: none
}
iframe{
border: 1px solid black;
margin-bottom: 6%;
}
#subtitle {
font-size: 1.5em;
margin-bottom: 3%;
margin-top: 5px;
}
#form {
margin: auto;
background-color: lightgrey;
width: 415px;
padding: 10px;
margin-bottom: 50px;
border-radius: 7px;
}
.left{
display: inline-block;
text-align: right;
width:26%;
padding: 5px;
margin: 5 0px;
}
.right{
display: inline-block;
width:40%;
text-align: left;
padding:5px;
}
#submit {
margin-top: 20px;
margin-bottom: 10px;
width: 88px;
height: 26px;
border: 2px solid slategrey;
border-radius: 4px;
}
@media (max-width: 400px) {
#header {
flex-direction: column;
margin-bottom: 20px;
height: 200px;
}
#nav-bar {
flex-direction: column;
margin-bottom: 20px;
}
#jumbo {
margin-top: 70%;
}
}