Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

It keeps failing for steps 11-13 and step 21 and I’ve corrected it not sure why its still failing.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Headphones Product Landing Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <header id="header">
        <img id="header-img" src="https://via.placeholder.com/150" alt="Headphones Logo">
        <nav id="nav-bar">
            <a href="#product" class="nav-link">Product</a>
            <a href="#video" class="nav-link">Watch Video</a>
            <a href="#form" class="nav-link">Subscribe</a>
        </nav>
    </header>
  
    <section id="product">
        <h2>Best Headphones for You</h2>
        <p>Experience the ultimate sound quality and comfort with our new headphones. Perfect for music lovers and audiophiles.</p>
    </section>

  
    <section id="video">
        <h2>Watch Our Product Video</h2>
        
    <video id="video" width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Product Video" frameborder="0" allowfullscreen></video>
    </section>

    
    <section id="form">
        <h2>Subscribe for Updates</h2>
        
    <form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
            <input type="email" id="email" name="email" placeholder="Enter your email address" required>
            <input type="submit" id="submit" value="Subscribe">
    </form>
    </section>

</body>
</html>

/* file: styles.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #333;
    color: white;
    position: sticky;
    top: 0;
    z-index: 1000;
}

#header-img {
    width: 50px;
    height: auto;
}

#nav-bar {
    display: flex;
    gap: 20px;
}

.nav-link {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.nav-link:hover {
    text-decoration: underline;
}

#product {
    padding: 50px 20px;
    text-align: center;
}

#product h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

#product p {
    font-size: 1.2em;
    color: #555;
}


#video {
    padding: 50px 20px;
    text-align: center;
}

#video h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

#video video {
    width: 80%;
    max-width: 600px;
}

#form {
    padding: 50px 20px;
    text-align: center;
    background-color: #f4f4f4;
}

#form h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

#form input[type="email"] {
    padding: 10px;
    width: 80%;
    max-width: 400px;
    margin-bottom: 20px;
    font-size: 1em;
    border: 2px solid #ccc;
    border-radius: 5px;
}

#form input[type="submit"] {
    padding: 10px 20px;
    font-size: 1.2em;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#form input[type="submit"]:hover {
    background-color: #555;
}

@media (max-width: 768px) {
    #header {
        flex-direction: column;
        text-align: center;
    }

    #nav-bar {
        flex-direction: column;
        gap: 10px;
    }

    #product h2 {
        font-size: 2em;
    }

    #product p {
        font-size: 1em;
    }

    #video video {
        width: 90%;
    }

    #form input[type="email"] {
        width: 90%;
    }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

your issue for 11-13

similar issue for 21

3

I have that section so where is the problem?

4

and is the section that needs the id?