Product Landing Page - Build a Product Landing Page

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">
    <meta charset='UFC-8'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css"</link>
    <script src="" crossorigin="anonymous"></script>

    <div id="slime">
    <header id="header">
    <div class="logo">
    <img id="header-img" src="" 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>

        <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 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="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

<section id="price">
  <div class="flex-container">
  <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>

   <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>

   <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>

 <form id="form" action="">
   <label for="email">Enter Email Address</label>
   <input id="email" type="email" name="email" placeholder="">

   <label for="submit">Submit</label>
   <input id="submit" type="submit"></input>
/* 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/ Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

  • this “html” passes for me
  • try disabling any browser extension such as “dark theme” or try a different browser

happy coding :slight_smile:

It doesn’t pass for me.

  1. The div element with the logo class has to close </div> after the img element.

  2. You have syntax errors, e.g. the link element and for your media query.