Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

I am stuck on these three questions. From what I have input I am unsure of where I am going wrong:

Question 1: You should have a video or iframe element with an id of video.

Question 2: Your #video should have a src attribute.

Question 3:You should have a form element with an id of form.

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://your-logo-image-url.jpg" alt="Logo">
        <nav id="nav-bar">
            <a href="#section1" class="nav-link">Section 1</a>
            <a href="#section2" class="nav-link">Section 2</a>
            <a href="#section3" class="nav-link">Section 3</a>
        </nav>
    </header>

    <section id="section1">
        <!-- Content for section 1 -->
    </section>

    <section id="section2">
        <!-- Content for section 2 -->
    </section>

    <section id="section3">
        <!-- Content for section 3 -->
    </section>

    <section id="video">
        <!-- Replace the source and type attributes with your actual video information -->
        <video id="video" width="100%" height="auto" controls>
            <source src="https://your-video-url.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </section>

    <section id="form">
        <form id="form" action="https://www.freecodecamp.com/email-submit" method="POST">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="Enter your email" required>
            <input type="submit" id="submit" value="Submit">
        </form>
    </section>

    <footer>
        <!-- Footer content -->
    </footer>

    <script>
        // JavaScript logic if needed
    </script>

</body>

</html>

/* file: styles.css */
#nav-bar {
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #f1f1f1; /* Adjust the background color as needed */
            padding: 10px;
        }

        .nav-link {
            text-decoration: none;
            color: #333;
        }

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Playing a YouTube Video in HTML

3

you cannot have more than one element with the same id in an HTML document

4

Hello @paulsantoleri !

Though I noticed the section id and header id are the same in some instances, it does not appear to have any effect in this project. Normally, id should only be used once, and be unique.

For the video problem, there are often videos on youtube, or one of the free sites, that will allow you to choose to embed the video or iframe.
I believe I used You Tube and chose
“Share” Embed, copied that code and
used it in my project.
It is important to note that all the
necessary code (with the exception of the id) are already included in
the embed code.
The size can be adjusted within the code to accommodate the project.

Example only of embedded code:

<iframe id="video"  width="560" height="315" src="https://www.youtube.com/embed/53igmq2ntKg?si=qkA9FWAJvULW8cwB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Note the width and height can be adjusted within the code without problem.

I hope this helps you some.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.