**Tell us what’s happening:**I think l have completed my certification task but l don’t know what is wrong with the tester .It is not recognizing my code for the last 3 tests as explained below ;
a. l have styled my #nav-bar so that it appears at the top but the tester is not recognizing that
b. it is not recognizing that l have at least one media query
c.it is not recognizing that l have used css flexbox at least one
Your code so far
MY HTML CODE;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Magazine</title>
<link
href="stylesheet"
rel="stylesheet"/>
</head>
<body>
<header id="header">
<img id="header-img" src='"https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"'>
<nav id="nav-bar">
<ul>
<li ><a class="nav-link"href="#home">PREMIUM</a></li>
<li ><a class="nav-link" href="#about">FAST</a></li>
<li ><a class="nav-link"href="#services">QUALITY</a></li>
</ul>
</nav>
</header>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id='email' type='email' name="email" placeholder="tadiwa@gmail.com"></input>
<input id="submit" type="submit"></input>
</form>
<h2 id="home" class="h">Premium</h2>
<a href="https://www.facebook.com/freecodecamp/">
<i class="fab fa-facebook-f"></i>
</a>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchaselearn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.</p>
<h2 id="about" class="h" >Fast</h2>
<a href="https://twitter.com/freecodecamp/">
<i class="fab fa-twitter"></i>
</a>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied</p>
<h2 id="services" class="h">Quality</h2>
<a href="https://instagram.com/freecodecamp">
<i class="fab fa-instagram"></i>
</a>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
<video id="video" src='forrest_gump.ogg'>
</video>
<label class="label" for="freeform"></label>
<br>
<textarea id="freeform" name="freeform" rows="4" cols="50">
TENOR TROMBONE
$600
Lorem ipsum.
Lorem ipsum.
Lorem ipsum dolor.
Lorem ipsum.
</textarea></label>
<label class="label" for="freeform"></label>
<br>
<textarea id="freeform" name="freeform" rows="4" cols="50">
BASS TROMBONE
$900
Lorem ipsum.
Lorem ipsum.
Lorem ipsum dolor.
Lorem ipsum.
</textarea></label>
<label for="freeform">
<br>
<textarea id="freeform" name="freeform" rows="4" cols="50">
VALVE TROMBONE
$1200
Plays similar to a Trumpet
Great for Jazz Bands
Lorem ipsum dolor.
Lorem ipsum.
</textarea></label>
</body>
</html>
MY CSS CODE;
@media (max-width: 868px) {
/* Add your styles for smaller screens here */
}
/* Styles for larger screens */
.some-class {
width: 40%;
}
/* Styles for smaller screens */
@media (max-width: 768px) {
.some-class {
width: 100%;
}
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
#header {
background-color: #333;
color: #fff;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;}
#header-img {
height: 50px;
}
#nav-bar ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.nav-link {
color: #fff;
text-decoration: none;
padding: 10px;
transition: background-color 0.3s ease;
}
.nav-link:hover {
background-color: #555;
}
form input[type="email"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}
#form input[type="submit"] {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
border-radius:}
#video{
width: 100%;
height: auto;}
@media (max-width: 868px) {
/* Add your styles for smaller screens here */
}
/* Styles for larger screens */
.some-class {
width: 40%;
}
/* Styles for smaller screens */
@media (max-width: 768px) {
.some-class {
width: 100%;
}
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
#header {
background-color: #333;
color: #fff;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;}
#header-img {
height: 50px;
}
#nav-bar ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.nav-link {
color: #fff;
text-decoration: none;
padding: 10px;
transition: background-color 0.3s ease;
}
.nav-link:hover {
background-color: #555;
}
form input[type="email"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}
#form input[type="submit"] {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
border-radius:}
#video{
width: 100%;
height :auto;}
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 ``` line above and the ``` 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/111.0.0.0 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge:
