Product Landing Page - Build a Product Landing Page

HTML-CSS
1

I don’t understand why my code isn’t accepted. I still have pending “Your Product Landing Page should use at least one media query.” but I already use one.

<!-- 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>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida, elit eget ultricies cursus, nulla odio ullamcorper mauris, ut cursus leo nisi vel tortor.</p>
        </section>
        <section id="pricing">
            <h2>Pricing</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida, elit eget ultricies cursus, nulla odio ullamcorper mauris, ut cursus leo nisi vel tortor.</p>
        </section>
        <section id="contact">
            <h2>Contact Us</h2>
            <form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" placeholder="Enter your email address" required>
                <input type="submit" id="submit" value="Submit">
            </form>
        </section>
        <section>
            <h2>Product Video</h2>
            <div>
                <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Product Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </section>
    </main>
</body>
</html>

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

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

#header img {
    height: 50px;
    margin: 10px 20px;
}

#nav-bar {
    margin: 20px;
}

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

#nav-bar li {
    margin: 0 10px;
}

#nav-bar a {
    color: #fff;
    text-decoration: none;
}

/* Sections styles */
section {
    padding: 30px;


@media only screen and (max-width: 600px) {


  #header img {
      height: 30px;
  }
  
  #nav-bar {
      margin: 10px;
  }
  
  #nav-bar li {
      margin: 0 5px;
  }
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

You are missing a } here

1 Like
3

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