Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

can someone please help me with this? I find it difficult

  1. You should have a video or iframe element with an id of video.
    And
    2.Your #video should have a src attribute.
    please help

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 src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Logo" id="header-img">
    <nav id="nav-bar">
      <ul>
        <li><a href="#features" class="nav-link">Features</a></li>
        <li><a href="#pricing" class="nav-link">Pricing</a></li>
        <li><a href="#contact" class="nav-link">Contact</a></li>
      </ul>
    </nav>
  </header>

</section>
  <section id="features">
    <!-- Features content here -->
  </section>

  <section id="pricing">
    <!-- Pricing content here -->
  </section>

  <section id="contact">
    <form id="form" action="https://www.freecodecamp.com/email-submit" method="POST">
      <label for="email">Enter your email:</label>
      <input type="email" id="email" name="email" placeholder="Your email" required>
      <input type="submit" id="submit" value="Submit">
    </form>
  </section>
<section id="video">
  <video controls id="product-video" width="100%" height="auto" poster="https://via.placeholder.com/1280x720">
    <source src="https://youtu.be/y8Yv4pnO7qc.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</section>
  <footer>
    <!-- Footer content here -->
  </footer>

  <script src="script.js"></script> <!-- If you have any JavaScript -->
</body>
</html>


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

body {
  font-family: Arial, sans-serif;
  background-color: #f7f7f7;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#header-img {
  width: 100px; /* Adjust as needed */
}

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

nav li {
  margin-right: 20px;
}

.nav-link {
  text-decoration: none;
  color: #fff;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #ffd700; /* Change to desired hover color */
}

section {
  padding: 50px 0;
}

form {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

label {
  display: block;
  margin-bottom: 10px;
}

input[type="email"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
}

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

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36 OPR/96.0.0.0

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Hi @chidex002

Your id attribute is in the section element.
Try placing it in the video element.

Happy coding

3

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