Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
i have completed my certificate task and it seams the tester is broken as it is not recognizing any of my media querys but they are defiantly included

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Product Landing Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header id="header">
      <img id="header-img" src="https://via.placeholder.com/150" 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>
    
    <section id="features">
      <h2>Features</h2>
      <p>Some information about the features of the product.</p>
    </section>
    
    <section id="pricing">
      <h2>Pricing</h2>
      <p>Some information about the pricing of the product.</p>
    </section>
    
    <section id="video-container">
      <h2>Product Video</h2>
      <video id="video" src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video>
    </section>
    
    <section id="contact">
      <h2>Contact Us</h2>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <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>
  </body>
</html>


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

#header {
  background-color: #333;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

#header-img {
  height: 50px;
}

#nav-bar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

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

.nav-link:hover {
  background-color: #555;
}

#features,
#pricing,
#video-container,
#contact {
  padding: 50px;
}

#video {
  width: 100%;
  height: auto;
}

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

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

#form input[type="submit"] {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 
@media (max-width: 768px) {
  /* Add your styles for smaller screens here */
}
/* Styles for larger screens */
.some-class {
  width: 50%;
}

/* Styles for smaller screens */
@media (max-width: 768px) {
  .some-class {
    width: 100%;
  }
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

It is there, but you just havent closed the style. Take a look at this, see the issue? You have no closing } before you do the media style
image

3

You messit up here…