Product Landing Page - Troubles

** I cant seem to pass these 2 tests:

  1. Your Product Landing Page should use at least one media query

2.Your Product Landing Page should use CSS Flexbox at least once.

I used CSS Flexbox and also media query. I dont know what the problem might be. I need your help please.

Here is a link to my codepen:

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://kit.fontawesome.com/38b17d94e0.js" crossorigin="anonymous"></script>

    <title>Product Language Page</title>
  </head>
  <body>
    <div class="page-wrapper">
 
    <header id="header">
      
      <nav class="navigation-bar" id="nav-bar">
        <img id="header-img"class="logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLEmIBhZ1QmV-mTXuJJ33gEMTuZkv9nYkdh3TZrQWF9YfcVn-HjJzbOeKIumOhcBEe5KE&usqp=CAU">
        <a class="nav-link" href="#header">Home</a>
        <a class="nav-link" href="#features">Services</a>
        <a class="nav-link" href="#video">About</a>
        <a class="nav-link" href="#pricing">Pricing</a>
        <a class="nav-link" href="#form">Apply</a>
    </nav>
    </header>


  <div class="container">
    <section class="about">
    <img id="study" src="https://miro.medium.com/max/1000/1*0_lexK6paPtwHCJGGAiZtA.jpeg" alt="Flags image"width="70%" >
    <h1 id="title">Get fluent in german with Language Deutsch</h1>
<p class="about-p">About Language Deutsch</p>
  </section>

  <section id="features">
    <div class="centre">
    <div class="grid">
      <div class="icon">       <i class="fa fa-3x fa-fire"></i></div>
      <div class="desc">
        <h2>Language diversity</h2>
        <p class="description">
          Our language courses are very complex and you can choose which langiage you want to learn 
        </p>
      </div>
    </div>
    <div class="grid">
      <div class="icon"> <i class="fa fa-3x fa-fire"></i></div>
      <div class="desc">
        <h2>From beginner to advanced</h2>
        <p class="description">
          We make sure you choose the right course for you and we help you in the selection process. 
          You can start as a complete beginner or you can choose the intermediate or the advanced level as well.
        </p>
      </div>
    </div>
    <div class="grid">
      <div class="icon">
        <i class="fa fa-3x fa-fire"></i>
      </div>
      <div class="desc">
        <h2>Quality Assurance</h2>
        <p class="description">
          For every course you take we will make sure you recieve a certification at the end of the course. The certification is free and can be requested any time after the course is finished.
      </div>
    </div>
  </div>
  </section>

<section class="youtube">
  <h2>Take a look at our youtube channel</h2>
  <iframe  id= "video" width="800" height="450" src="https://www.youtube.com/embed/xg60VxyK-9I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>

<section id="pricing">
  <h1>Pricing Lists</h1>

      <div class="flex-container">
        <div class="card">
         
          <h2>Beginner</h2>
           
          <p class="price">400$</p>
       
          <ul >
            <li> 20 Video Lessons</li>
          <li> 10 Audio podcast</li>
        <li> 15 Weekly Challenges </li>
          </ul>
          <p><button class="btn">Select</button></p>
          </div>
          <div class="card">
       
            <h2>Intermediate</h2>
           
            <p class="price">600$</p>
           
            <ul >
              <li> 25 Video Lessons</li>
            <li> 15 Audio podcast</li>
          <li> 18 Weekly Challenges </li>
            </ul>
            <p><button class="btn">Select</button></p>
          </div>
        
          <div class="card">
           
            <h2>Advance</h2>
           
            <p class="price">900$</p>
           
            <ul >
              <li> 30 Video Lessons</li>
            <li> 25 Audio podcast</li>
          <li> 25 Weekly Challenges </li>
            </ul>
            <p><button class="btn">Select</button></p>
          </div>
          </div>
          
      </div>
    </section>

    <section class="apply">
      <h2 class="apply-now">Apply now</h2>
      <form id="form"action="https://www.freecodecamp.com/email-submit">
        <label name="email" for="">Email</label>
                <input id="email" name="email" type="email" placeholder="Add your email here" required>
                <label for=""></label>
                <input id="submit" type="submit"> 
              </form>
    </section>

   
      
    </div>
  </div>
  </div>
  <footer>
    <a class="footer-link" href="https://www.linkedin.com/">LinkedIn</a>
  <a class="footer-link" href="https://twitter.com/">Twitter</a>
  <a class="footer-link" href="https://nostalgic-bohr-d86916.netlify.app/ ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge: Build a Product Landing Page

Link to the challenge:

The new Responsive Web Design curriculum content has been released.

FAQ:

  1. Can I complete the old content?
  • Yes. The old content is still available, and has been moved to the bottom of the curriculum map and renamed to Responsive Web Design Legacy
  1. What will happen to my progress?
  • Nothing. Your past progress will still be available in the Responsive Web Design Legacy curricula
  1. Can I claim the old certificate?
  • The certifications are exactly the same. All you need to claim a certificate is to complete the 5 Certification Projects which are identical for both the Responsive Web Design and Responsive Web Design Legacy curricula
  1. Should I stop doing the legacy content, and just start over with the new content?
  • This is entirely up to you. Majority of the topics are the same - just taught in a different way. (See Project-Based Curricula)
  1. How do I use the new editor?
  • The new editor is as close to an external text editor as we wanted to get it. If the files for the challenge have been enabled, you can access the index.html and styles.css tabs which you should use for the respective code.
  • Two main differences between this editor and other online editors:
    • You need to link your styles.css file to your HTML (just like you would in real web-development), by adding the following line to the head of your HTML:
<link href="styles.css" />
    • You are encouraged to include the DOCTYPE, html, head and body tags for each project.

I dont really get what you mean, I copied my html code here. But how can I solve the problem so that the 2 tests will work?

Have you tried changing the href to “styles.css”? Codepen automatically links the css for you.

Oh yes, apparently that was the problem. Thank you so much!!!