Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

1.You should have a video or iframe element with an id of video.
2.Your #video should have a src attribute.
Why they don’t pass?9my code below)

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="#video">Video</a></li>
        <li><a class="nav-link" href="#pricing">Pricing</a></li>
      </ul>
    </nav>
  </header>

  <section id="features" class="main-section">
    <h2>Product Features</h2>
    <p>Discover the amazing features of our product.</p>
    <!-- Feature descriptions, images, etc. -->
  </section>

  <section id="video" class="main-section">
    <h2>Product Video</h2>
    <div class="video-container">
      <!-- Replace the src attribute with your actual video URL -->
      <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/your-video-id" frameborder="0" allowfullscreen></iframe>
    </div>
  </section>

  <section id="pricing" class="main-section">
    <h2>Pricing Plans</h2>
    <p>Choose the plan that suits your needs.</p>
    <!-- Pricing details and subscription options -->
  </section>

  <footer id="footer">
    <form id="form" action="https://www.freecodecamp.com/email-submit" method="get">
      <label for="email">Get updates about our product:</label>
      <input type="email" id="email" name="email" placeholder="Enter your email" required>
      <input type="submit" id="submit" value="Submit">
    </form>
  </footer>

  <script src="script.js"></script>
</body>
</html>


/* file: styles.css */
/* General styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Header styles */
#header {
  background-color: #333;
  color: #fff;
  padding: 10px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

#nav-bar ul {
  list-style-type: none;
  display: flex;
  justify-content: flex-end;
}

#nav-bar ul li {
  margin-right: 20px;
}

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

.nav-link:hover {
  color: #ff6347; /* Change to your preferred hover color */
}

/* Main section styles */
.main-section {
  padding: 50px 20px;
}

/* Video section styles */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio for responsive video */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Form styles */
#form {
  text-align: center;
  padding: 20px;
}

#email {
  padding: 10px;
  width: 250px;
  margin: 10px;
}

#submit {
  padding: 10px 20px;
  background-color: #ff6347;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#submit:hover {
  background-color: #333;
}

/* Responsive design using media queries */
@media (max-width: 768px) {
  #nav-bar ul {
    justify-content: center;
  }

  #header-img {
    width: 80px;
  }

  .main-section {
    padding: 30px 10px;
  }

  #email {
    width: 80%;
    max-width: 300px;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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

Your video id should only be on a single element, the video. An id should be unique.

1 Like