** I cant seem to pass these 2 tests:
- 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: