Product Landing Page - Build a Product Landing Page

HTML-CSS
1

  • You should have a video or iframe element with an id of video.

  • Failed:Your #video should have a src attribute.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Product Landing Page</title>
</head>
<body>
    <header id="header">
        <img id="header-img" src="https://images.everydayhealth.com/images/what-are-natural-skin-care-products-alt-1440x810.jpg" alt="Product Image">
        <h1>Skincare Products</h1>
        <nav id="nav-bar">
            <ul>
                <li><a class="nav-link" href="#features">Features</a></li>
                <li><a class="nav-link" href="#pricing">Pricing</a></li>
                <li><a class="nav-link" href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <section id="features">
        <!-- Your feature section content here -->
        <h2>Features</h2>
        <!-- Add your features content here -->
    </section>
    
    <section id="pricing">
        <!-- Your pricing section content here -->
        <h2>Pricing</h2>
        <!-- Add your pricing content here -->
    </section>
    
    <section id="contact">
        <h2>Contact Us</h2>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
            <label for="email">Subscribe for Updates:</label>
            <input type="email" id="email" name="email" placeholder="Enter your email" required>
            <input type="submit" id="submit" value="Submit">
        </form>
    </section>
    
    <section id="video">
        <!-- Embedded product video -->
        <video width="560" height="315" controls>
            "<iframe width="560" height="315" src="https://www.youtube.com/embed/H08BdQhJ9wQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>" type="video/mp4">
            
        </video>
    </section>
    
    <footer>
        <!-- Your footer content here -->
        <p>&copy; 2023 Skincare Products</p>
    </footer>
</body>
</html>
2

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

You have a few issues

The test says to use a video or iframe element.
Not both.

You will need to choose only one of those elements.

The video or iframe element should have an id of video.
Not the section element.

hope that helps

1 Like