Tell us what’s happening:
No matter what I do, steps #9 & #10 are not passing. I have written multiple versions of the entire project at this point trying to figure it out. I’ve also run it through an HTML validator which didn’t point out any issues with the nav bar. I don’t know what to do.
Your code so far
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Product Landing Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header
class="header"
id="header">
<img
id="header-img"
class="header-img"
src="https://www.svgrepo.com/show/445116/eye-open-solid.svg"
height="100"
alt="logo image of an eye">
<!--end of header-->
<!-- nav bar beginning -->
<div class="nav">
<nav
id="nav-bar"
class="navbar">
<ul>
<li class="nav-link">
<a class="active" href="#sec1">Home</a>
</li>
<li class="nav-link">
<a href="#sec2">Sample</a>
</li>
<li class="nav-link">
<a href="#sec3">Inquiry</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- nav bar end -->
<section id="sec1" class="section1">
<h1 id="title">
People Watching DVDs
</h1>
<p id="description"> Our "People Watching" DVDs are perfect for the people-watcher who simply hates leaving the house. Now, you can people watch from the comfort of your own home, without having to interact with anyone!
</p>
</section>
<section id="sec2" class="section2">
<h2>Try a free sample:</h2>
<fieldset class="vid-field">
<iframe height="320" width="420" id="video" src="https://www.youtube.com/watch?v=GpcaJQ40q1Y&list=PLw1GDxO7G8onYy8ZgVx_QughDa9VGfjMn" class="video">
</iframe>
<p>Witness approximately two minutes of our revolutionary people watching footage. Never before seen... until now!</p>
</fieldset>
</section>
<!--end of video-->
<section id="sec3" class="section3">
<h2 class="invisible">inquire</h2>
<fieldset class="fs1">
<legend>Inquire here:</legend>
<p>Would you like to order our premium People Watching DVDs? Fill out this inquiry form to be put on our waiting list.</p>
<form
id="form"
class="form"
action="https://www.freecodecamp.com/email-submit">
<fieldset class="fs1a">
<legend>Your name:</legend>
<input
type="name"
id="name"
placeholder="Ex. John Doe">
</fieldset>
<fieldset class="fs1b">
<legend>Your e-mail:</legend>
<input
type="email"
id="email"
name="email"
placeholder="Enter your e-mail address"
pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$">
</fieldset>
<fieldset class="fs1c">
<legend>Describe your inquiry:</legend>
<input
type="textarea"
id="comments"
placeholder="Your inquiry here...">
</fieldset>
<fieldset class="fs1d">
<input
id="submit"
type="submit"
formaction="https://www.freecodecamp.com/email-submit">
</fieldset>
</form>
</fieldset>
</section>
<!--end of form-->
</body>
</html> -->
/* :root {
--grayscale1: #111111;
--grayscale2: #333333;
--grayscale3: #555555;
--grayscale4: #777777;
--grayscale5: #999999;
--color1: #3D365C;
--color2: #7C4585;
--color3: #C95792;
--color4: #F8B55F;
--font1: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Header */
header {
position: fixed;
width: 100%;
top: 0;
background: linear-gradient(
var(--color1),
var(--color2),
var(--color3),
var(--color4),
transparent
);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
font-family: var(--font1);
}
/* Navbar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: white;
border: 1px solid transparent;
border-radius: 60%;
}
/* main page */
h1 {
font-family: var(--font1);
font-size: 3rem;
text-align: center;
margin: 12px auto;
}
p {
font-family: var(--font1);
}
legend {
font-family: var(--font1);
color: var(--grayscale1);
font-weight: bold;
}
.section1 {
margin: 100px 0 0 0;
padding: 0 2rem 2rem 2rem;
}
.section2, .section3 {
margin: 0;
padding: 0 2rem 2rem 2rem;
}
.section2 {
display: flex;
flex-direction: column;
align-items: center;
}
.vid-field {
padding: 20px;
align-items: center;
text-align: center;
}
iframe {
margin: 20px;
}
/* form section */
.section3 {
align-items: center;
background: linear-gradient(
transparent,
var(--color4),
var(--color3),
var(--color2),
var(--color1)
)
}
fieldset {
border: none;
}
form {
align-items: center;
}
.invisible {
display: none;
}
.fs1 {
padding: 10px;
text-align: center;
}
.fs1a {
margin-top: 20px;
}
.fs1a, .fs1b, .fs1c, .fs1d {
padding: 10px;
text-align: center;
border: 1px solid transparent;
}
footer {
padding: 10px;
background: linear-gradient(
var(--color1) 15%,
var(--grayscale1)
);
color: var(--grayscale5);
}
.space-here {
width: 100%;
height: 20px;
}
/* media queries */
@media screen and (max-width: 500px) {
li a {
font-size: 10px;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
}
@media screen and (min-width: 601px, max-width: 6000px) {
} */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 OPR/118.0.0.0
Challenge Information:
Product Landing Page - Build a Product Landing Page