**I have used flexbox properties and 2 media queries . Still I fail those tests
" * Failed:Your Product Landing Page should use at least one media query.
- Failed:Your Product Landing Page should use CSS Flexbox at least once."**
HTML code
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<header id="header">
<nav id="nav-bar">
<a href="#features" class="nav-link">Features</a>
<a href="#howitworks" class="nav-link">How it works</a>
<a href="#pricing" class="nav-link">Pricing</a>
</nav>
<img src="https://www.shutterstock.com/shutterstock/photos/2145447065/display_1500/stock-vector-trumpet-line-icon-linear-style-sign-for-mobile-concept-and-web-design-trumpet-music-instrument-2145447065.jpg" id="header-img" />
<span>Music is Fire</span>
</header>
<video controls id="video" src="https://youtube.com/shorts/ty8UZhI53Y0?si=RmvTxmXm-OPYTvpK" type="video/webm"></video>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label>Email:</label>
<input type="email" id="email" name="email" placeholder="asdfgfd@gmail.com" required \>
<input id="submit" type="submit"><button>Submit</button>
</form>
<div class="cont1" id="features">
<h2>Features</h2>
<p>Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element's id. e.g. #footer).Objective: Build an app that is functionally similar to https://product-landing-page.freecodecamp.rocks
User Stories:
Your product landing page should have a header element with a corresponding id="header"
You can see an image within the header element with a corresponding id="header-img" (A logo would make a good image here)
Within the #header element, you can see a nav element with a corresponding id="nav-bar"
You can see at least three clickable elements inside the nav element, each with the class nav-link
When you click a .nav-link button in the nav element, you are taken to the corresponding section of the landing page</p>
</div>
<div class="cont2" id="howitworks">
<h2>How it Works</h2>
<p>Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element's id. e.g. #footer).
the corresponding section of the landing page
You can watch an embedded product video with id="video"
Your landing page has a form element with a corresponding id="form"
Within the form, there is an input field with id="email" where you can enter an email address
The #email input field should have placeholder text to let users know what the field is for
The #email input field uses HTML5 validation to confirm that the entered text is an email address
Within the form, there is a submit input with a corresponding id="submit"
When you click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit)
The navbar should always be at the top of the viewport
</p>
</div>
<div class="cont3" id="pricing">
<h2>Pricing</h2>
<p>Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element's id. e.g. #footer).The navbar should always be at the top of the viewport
Your product landing page should have at least one media query
Your product landing page should utilize CSS flexbox at least once
Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS</p>
</div>
</body>
</html>```
CSS code
```header{
position: fixed;
margin:0;
}
#header-img{
height:5%;
width:5%;
margin-top:-100%;
}
form{
margin-bottom:0;
}
html{
background-color:rgb(217, 36, 36);
}
span{
font-family:Georgia, serif;
font-weight:bold;
display:inline;
margin-left:2%;
font-size:50px;
}
#nav-bar{
display:flex;
justify-content:flex-end;
gap:20px;
font-size:20px;
}
a{
color:black;
text-decoration:none;
box-shadow: 0 3px 10px white;
}
@media screen and (min-width: 600px) {
html{
/* Apply some styles
*/
background-color:rgb(98, 255, 0);
}
}
@media screen and (min-width: 1000px) {
html{
/* Apply some styles
*/
background-color:rgb(25, 204, 192);
}
}
#video{
margin-top:10%;
margin-left:40%;
}```
**Your browser information:**
User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 Edg/116.0.1938.76</code>
**Challenge:** Product Landing Page - Build a Product Landing Page
**Link to the challenge:**
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-product-landing-page-project/build-a-product-landing-page