Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

Failed:You should have a video or iframe element with an id of video.
Failed:Your #video should have a src attribute. i could not solve this problem what should i do

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="https://via.placeholder.com/150" alt="Logo">
        <nav id="nav-bar">
            <ul>
                <li><a class="nav-link" href="#features">Features</a></li>
                <li><a class="nav-link" href="#video">Video</a></li>
                <li><a class="nav-link" href="#signup">Sign Up</a></li>
            </ul>
        </nav>
    </header>

    <section id="features">
        <h2>Product Features</h2>
        <!-- Content for features section -->
    </section>

    <section id="video">
        <h2>Product Video</h2>
        <div class="video-container">
            <iframe id="video" src="https://www.youtube.com/embed/JEwOy5Fm1yw"></iframe>
        </div>
    </section>

    <section id="signup">
        <h2>Sign Up</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="Submit">
        </form>
    </section>

    <!-- Other sections and content as needed -->

    <script src="scripts.js"></script>
</body>
</html>




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

/* Basic styling for header */
#header {
    background-color: #333;
    color: #fff;
    padding: 10px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000; /* Ensure nav bar is above other content */
}

#header-img {
    height: 50px; /* Adjust height as needed */
    display: block; /* Ensure it behaves as a block element */
}

#nav-bar {
    margin-left: auto; /* Pushes nav bar to the right */
}

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

#nav-bar ul li {
    margin: 0 10px;
}

.nav-link {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    transition: background-color 0.3s ease;
}

.nav-link:hover {
    background-color: #555;
}

/* Styling for sections */
section {
    padding: 50px 20px;
    margin-top: 80px; /* Ensure content below header */
}

/* Styling for video */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Maintain aspect ratio (16:9) */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Media query for responsive design */
@media (max-width: 768px) {
    #header-img {
        height: 40px;
    }
    #nav-bar ul {
        flex-direction: column;
    }
    #nav-bar ul li {
        margin: 10px 0;
    }
    section {
        padding: 30px 10px;
    }
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

you cannot have duplicate ids ‘video’ in two elements as that is invalid html and also confusing for the test. Remove the first id video in the section so that there is only one element (either a video or iframe) that has this id

1 Like