Product Landing Page - Build a Product Landing Page

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.
    2.Your #video should have a src attribute.
    please help

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <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">
  <header id="header">
    <img src="" alt="Logo" id="header-img">
    <nav id="nav-bar">
        <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>

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

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

  <section id="contact">
    <form id="form" action="" 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">
<section id="video">
  <video controls id="product-video" width="100%" height="auto" poster="">
    <source src="" type="video/mp4">
    Your browser does not support the video tag.
    <!-- Footer content here -->

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

/* 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/ Safari/537.36 OPR/

Challenge Information:

Product Landing Page - Build a Product Landing Page

Hi @chidex002

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

Happy coding