- The navbar should always be at the top of the viewport
Hi everyone, I’ve tried everything I can and just can’t seem to figure this one out. Everything looks great in the preview but the website won’t accept my code, as it supposedly does not satisfy this user story.
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cats</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<div class="header-container">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#video">Watch Video</a></li>
<li><a class="nav-link" href="#form">Subscribe</a></li>
<li><a class="nav-link" href="#gallery">Gallery</a></li>
</ul>
<img src="https://assets.rebelmouse.io/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpbWFnZSI6Imh0dHBzOi8vYXNzZXRzLnJibC5tcy8yOTM4MDYyMS9vcmlnaW4uanBnIiwiZXhwaXJlc19hdCI6MTc5MzM5NTczMX0.KFaNafngQMATALueZtr5hrmF9e9G5Dv281kiGXpbUYg/img.jpg?width=800&quality=85" id="header-img" alt="Logo: Ginger Tabby Kitten">
</nav>
</div>
</header>
<section>
<h2>Our Kitties in Action</h2>
<video id="video" controls width="600">
<source src="https://www.example.com/kitten-video.mp4" type="video/mp4">
</video>
</section>
<section>
<h2>Subscribe for Updates</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<input type="submit" id="submit" value="Submit">
</form>
</section>
<section id="gallery">
<h2>Gallery</h2>
<div class="gallery-container">
<img src="https://www.natureplprints.com/p/729/blue-eyed-tabby-white-siberian-cross-kitten-15336697.jpg.webp" alt="White and Grey Kitten">
<img src="https://2020.fve.org/cms/wp-content/uploads/kitten-680-680x906.png" alt="Tabby Kitten">
</div>
</section>
</body>
</html>
My CSS:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
#header {
background: #f4f4f4;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
#nav-bar {
position: fixed !important;
top: 0;
left: 0;
right:0;
bottom:1;
width: 100%;
background: #f4f4f4;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
#header-img {
max-width: 100px;
}
/* Video */
section h2 {
text-align: center;
margin-top: 20px;
}
#video {
display: block;
margin: 0 auto;
}
/* Form */
form {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 400px;
margin: 20px auto;
}
form label {
font-size: 1rem;
}
input[type="email"],
input[type="submit"] {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
input[type="submit"] {
background-color: #0073e6;
color: white;
font-weight: bold;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #005bb5;
}
/* Gallery */
.gallery-container {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
padding: 20px;
}
.gallery-container img {
max-width: 300px;
height: auto;
border: 2px solid #ddd;
border-radius: 5px;
}
@media (max-width: 768px) {
.header-container {
flex-direction: column;
align-items: center;
}
}
#nav-bar ul {
flex-direction: column;
align-items: center;
margin:0;
}