Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

Your Product Landing Page should use at least one media query.
Failed:25. Your Product Landing Page should use CSS Flexbox at least once.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
    <title>Product Landing Page</title>
    <link rel="stylesheet" href="styles.css">
      <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
            }
      #header {
        position: fixed;
        top: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #333;
        color: white;
        padding: 10px 20px;
              }
        #header img {
          height: 40px;
            }
        #nav-bar {
          display: flex;
          gap: 15px;
        }
        #nav-bar a {
          color: white;
          text-decoration: none;
          }
        main {
          margin-top: 80px;
          padding: 20px;
        }
        section {
          margin-bottom: 50px;
        }
        form {
          display: flex;
          flex-direction: column;
          max-width: 300px;
              }
        input {
          margin: 5px 0;
          padding: 10px;
            }
            
        @media (max-width: 600px) {
        #nav-bar {
          flex-direction: column;
          gap: 10px;
          }
      }
      </style>
<body>
  <header id="header">
    <img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="Logo">
    <nav id="nav-bar">
    <a class="nav-link" href="#features">Features</a>
    <a class="nav-link" href="#video-section">Demo</a>
    <a class="nav-link" href="#pricing">Pricing</a>
    </nav>
    </header>
  <main>
    <section id="features">
      <h2>Features</h2>
        <p>Our product is lightweight, fast, and reliable.</p>
      </section>

      <section id="video-section">
        <h2>Watch Demo</h2>
        <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Demo Video" allowfullscreen>
        </iframe>
        </section>
   <section id="signup">
      <h2>Sign Up</h2>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input id="email" type="email" name="email" placeholder="Enter your email" required>
      <input id="submit" type="submit" value="Get Started">
      </form>
      </section>
      </main>
      </body>
      </html> 

/* file: styles.css */

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Hi @trisha.reddykonda and welcome to our community!

You link to an external css stylesheet in your HTML document but then you put all your css in a style tag within the HTML, instead of putting it in the external stylesheet.