Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

directions say: You should have a video or iframe element with an id of video.
Your #video should have a src attribute. and that is my code, I asked chat gpt for help as well and I can’t figure it out.

Product Video

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="Logo">
    <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>

  <main>
    <section id="features">
      <h2>Features</h2>
      <!-- Feature details -->
    </section>

    <section id="pricing">
      <h2>Pricing</h2>
      <!-- Pricing plans -->
    </section>
    <section id="video">
  <h2>Product Video</h2>

  <iframe id="video" src="https://www.youtube.com/embed/VIDEO_ID"    frameborder="0" allowfullscreen></iframe>
</section>
 

    <section id="contact">
      <h2>Contact Us</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>
  </main>

  <script src="script.js"></script> <!-- Optional: Include JavaScript file -->
</body>
</html>

/* file: styles.css */
body {
  font-family: 'Arial', sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: #fff;
  padding: 1rem;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

header img {
  height: 50px; /* Adjust height as needed */
}

nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav li {
  margin: 0 10px;
}

nav a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
  transition: all 0.3s ease;
}

nav a:hover {
  background-color: #555;
}

main {
  padding-top: 100px; /* Ensure content is below the fixed header */
}

section {
  padding: 2rem;
  background-color: #fff;
  margin: 20px 0;
}

form {
  display: flex;
  justify-content: center;
  align-items: center;
}

input[type="email"] {
  padding: 10px;
  margin-right: 10px;
  width: 300px;
}

input[type="submit"] {
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}

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

/* Media Queries */
@media only screen and (max-width: 768px) {
  /* Adjust layout for smaller screens */
  header img {
    height: 40px;
  }

  nav ul {
    flex-direction: column;
  }

  nav li {
    margin: 10px 0;
  }
}

@media only screen and (max-width: 600px) {
  /* Adjust layout for even smaller screens */
  input[type="email"] {
    width: 100%;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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 can’t have two elements with he same id.