Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

why is it saying i should put an <iframe> element and ive already put it in my code and also the src element is needed and all of them are in the code

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">
    <title>Product Landing Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <header id="header">
        <img id="header-img" src="logo.png" alt="Product Logo">
        <nav id="nav-bar">
            <ul>
                <li><a class="nav-link" href="#features">Features</a></li>
                <li><a class="nav-link" href="#about">About</a></li>
                <li><a class="nav-link" href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <section id="features">
        <h2>Product Features</h2>
        <p>Highlight what makes your product unique.</p>
    </section>

    <section id="about">
        <h2>About Us</h2>
        <p>Tell your visitors why your product exists.</p>
    </section>

    <section id="video">
    <h2>Product Demo</h2>
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/YOUR_VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</section>

    <section id="contact">
        <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" required>
            <input type="submit" id="submit" value="Subscribe">
        </form>
    </section>

</body>
</html>

/* file: styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
}

#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    position: fixed;
    width: 100%;
    background-color: #f8f8f8;
}

#nav-bar ul {
    list-style: none;
    display: flex;
}

.nav-link {
    margin: 0 15px;
    text-decoration: none;
    font-weight: bold;
}

#features, #about, #video, #contact {
    padding: 50px;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#email {
    padding: 8px;
    margin-bottom: 10px;
}

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

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Your issue is that you have two elements with the same id attribute. An id attribute should only ever be applied to a single element within a document. You’ll need to change the value/type of the attribute on the section element above, to pass the failing tests.

1 Like