I am currently attempting the Product Landing Page, and have the code all written. I am passing all of the test, save for “Your #nav-bar should always be at the top of the viewport.” However, as far as I can tell, in the preview my nav bar already does this.
CSS:
body {background-color:lightblue;}
#header{text-align:center;}
#nav-bar{background-color:lightblue;position:fixed; top:0; width:100%;
left:0;
text-align:center;
font-weight:bold;}
.nav-link{font-family:"courier new"; font-size:25px;}
.chunk{text-align:center;}
#video{border:10px solid slategrey; border-radius:20px 10px 20px 10px;}
#flex-container{display:flex; flex-direction:row; justify-content:space-around;
gap:15px; }
@media (max-width: 600px) {
#flex-container{flex-direction:column;
place-items:center;
gap:15px; }
}
.ref-box{width:250px; height:150px; background-color:blue; font: bold 20px "courier new"; color:white; padding: 5px; border-radius: 20px 10px 20px 10px; }
#form{background-color:lightgrey; width:25%; margin:auto; padding:10px; border-radius: 20px 10px 20px 10px;}
.smalltext {font-size:12px;}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Magazine</title>
<link
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<br><header id="header"><h1><img src="https://i.imgur.com/Qjl6lNm.png" alt="Senor Cardgage Mortgage" id="header-img"></h1><header><br>
<nav id="nav-bar">
<a href="#homelawn" class="nav-link">Home Lawn</a> |
<a href="#refinance" class="nav-link">Re-financin'</a> |
<a href="#percent" class="nav-link">Percent Signs</a>
</nav>
</h1>
<section class="chunk" id="homelawn">
<h2>Home Lawn</h2>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/ToJlOND8TfU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br>
</section>
<section class="chunk" id="refinance">
<h2>Refinancin'</h2><br>
<div id="flex-container">
<div id="option1" class="ref-box">Fancy talkin' experts! <br>
<p class="smalltext">Experts may not be hushpush-leopold</p> </div>
<div id="option2" class="ref-box">Chik-Fil-A!
<p class="smalltext">Chik-Fil-A must be purchased separately</p></div>
<div id="option3" class="ref-box">Leg up on the pile!
<p class="smalltext">Sever your leg please, it's the greatest day</p></div>
</div>
</section><br>
<section class="chunk" id="percent">
<h2>Percent Signs!</h2>
<form action="https://www.freecodecamp.com/email-submit" id="form" class="chunk">
<label for="email" id="email-label">Sign up for our newsledger todays:</label>
<input type="email" id="email" name="email" required placeholder="example@email.com"><br>
<input type="submit" form="survey-form" value="Submidge Fern" id="submit">
</form>
</body>
</html>