Tell us what’s happening:
Describe your issue in detail here.
need help with …
Your #nav-bar should always be at the top of the viewport.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='UFC-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css"</link>
<script src="https://kit.fontawesome.com/82d2f059f4.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="slime">
<header id="header">
<div class="logo">
<img id="header-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTY6cWNIViiQpwiDUZtqFIF6fyrLvoKz2QIVp8C98xhwiMi7CZcyVYkPeNV_JAYzDkd0M&usqp=CAU" alt="slime queen" loading="lazy"></img>
<nav class="navbar" id="nav-bar">
<a class="nav-link" href="#product">Product</a>
<a class="nav-link" href="#what-to-expect">What to Expect</a>
<a class="nav-link" href="#price">Price</a>
</nav>
</header>
<body>
<section id="product">
<h1><i class="fa-light fa-icicles fa-2xl" style="color: #1060ea;"></i>Theraputic Slime</h1>
<p>It doesn't matter how unique you feel your needs might be we can meet them. We have sticky slime, strechy slime and crunchy, yes I said cruchy slime. Do you like your slime to smell good or even look good? We can do that too. Just choose your prefered scent and decoration.</p>
</section>
<section id="what-to-expect">
<h2><i class="fa-sharp fa-solid fa-block-question fa-2xl" style="color: #0d5de7;"></i>What to expect</h2>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/NZiM0_4-j1k?si=8kH9EUbqj1EJzgO8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</section>
<section id="price">
<div class="flex-container">
<div>
<h3>Type of Slime</h3>
<p>$15 per 8oz</p>
<input type="checkbox" id="sticky-slime" name="sticky-slime" value="slime1">
<label for="sticky-slime">Sticky Slime</label><br>
<input type="checkbox" id="stretchy-slime" name="stretchy-slime" value="slime2">
<label for="stretchy-slime">Stretchy Slime</label><br>
<input type="checkbox" id="crunchy-slime" name="crunchy-slime" value="slime3">
<label for="crunchy-slime">Crunchy Slime</label><br></div>
<div>
<h3>Scents</h3>
<p>$15 per 8oz</p>
<input type="checkbox" id="Floral" name="Floral" value="scent1">
<label for="Floral">Floral</label><br>
<input type="checkbox" id="sweet" name="sweet" value="scent2">
<label for="sweet">Sweet</label><br>
<input type="checkbox" id="natural" name="natural" value="scent3">
<label for="natural">Natural</label><br></div>
<div>
<h3>Decoration</h3>
<p>$15 per 8oz</p>
<input type="checkbox" id="pops" name="pops" value="dec1">
<label for="pops">Pops</label><br>
<input type="checkbox" id="snaps" name="snaps" value="dec2">
<label for="snaps">Snaps</label><br>
<input type="checkbox" id="crackles" name="crackles" value="dec3">
<label for="crackles">Crackles</label><br></div>
</div>
</section>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label for="email">Enter Email Address</label>
<input id="email" type="email" name="email" placeholder="leasure2023@yoho.com">
</input>
<br></br>
<label for="submit">Submit</label>
<input id="submit" type="submit"></input>
</form>
</body>
/* file: styles.css */
img{width: 75px;
margin-top: 30px;
}
#nav-bar{overflow: hidden;
position: fixed;
top: 0;
right: 0;
width: 100%;
display: block;
}
nav a{display: inline;
justify-content: between;}
.flex-container{display: flex;
background-color: white;}
.flex-container>div{background-color: lightblue;
margin: 10px;
padding: 20px;}
@media (max-width: 800px)
.product {
max-width: 300px;
width: 100%;
margin: 0 auto;
margin-bottom: 10px;}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge:
