My Product Landing Page should use at least one media query and Your Product Landing Page should use CSS Flexbox at least once

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <title> Landing Page</title>
  <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <style>
      #header{
        display:flex;  
      }


    @media (max-width:300px){
      #footer{color:green;
    }}

    ul {
  width: 10vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around; 
}
    ul.al {
      list-style-type:none;
      display:flex;
      right:opx;

      
    }
    

@media (max-width: 650px) {
#header-img {
  margin-top: 15px;
  width: 100%;
  position: relative;
}
   
    #nav-bar{
      display:flex;
      flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 50px;
  position:fixed;
  top:0px;
      
    }
      </style>
    <header id="header">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" id="header-img" alt="header-image">
<nav id="nav-bar">
<ul style="list-style-type: none">
  <li><a href="#features" class="nav-link"> Features </a></li>
   <li><a href="#how-it-works" class="nav-link"> How It Works </a></li>
    <li><a href="#pricing" class="nav-link">Pricing</a></li>
  </ul>
</nav>
      </header>
      <section>
        <form action="https://www.freecodecamp.com/email-submit" id="form">
          <label>Handcrafted, home-made masterpieces </label> <br> <br>
          <input type="email" placeholder="Enter your email address" name="email" id="email" > <br> <br>
          <input id="submit" type="submit">GET STARTED</input>
          </form>
          <section>
<div id="features"></div>

<div id="how-it-works">
<video src="https://youtu.be/y8Yv4pnO7qc" id="video"> </div>

<div id="pricing">
<div>
  <h5>TENOR TROMBONE<h5>
    <h4>$600</h4>
    <p>Lorem ipsum.
Lorem ipsum.
Lorem ipsum dolor.
Lorem ipsum.</p>
<button>Select</button>
</div>

<div>
  <h5>BASS TROMBONE</h5>
  <h4>$900</h4>
  <p>Lorem ipsum.
Lorem ipsum.
Lorem ipsum dolor.
Lorem ipsum</p>
<button>Select</button>
</div>

<div>
  <h5>VALVE TROMBONE</h5>
  <h4>$1200</h4>
  <p>Plays similar to a Trumpet
Great for Jazz Bands
Lorem ipsum dolor.
Lorem ipsum.</p>
<button>Select</button>
</div>
</div>
        </section>

        <footer>
          <ul class="al">
            <li style="margin-right:10px">Privacy</li>
            <li style="margin-right:10px">Terms</li>
            <li style="margin-right:10px">Contact</li>
            </ul>
            <p>Copyright 2016, Original Trombones</p>
        </footer>
    <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/102.0.5005.124 Safari/537.36 Edg/102.0.1245.44

Challenge: Build a Product Landing Page

Link to the challenge:

2

HI @seal3 !

Welcome to the forum!

You shouldn’t be using style tags here

Get rid of your style tags.
Move all of your css to the css file they gave you.

This line of code here:

Connects your stylesheet to your html document.

When you fix that issue, then it will pass

3

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