Help. The test script does’t dedects the media querry and flexbox.
HTML:
<head>
<link rel="stylesheet" href="C:\Users\Administrator\Documents\VS Code files\FCCLandPage\stylesheet.css" type="text/css">
</head>
<!--
freecodecamp test script
-->
<div id="fcccheckbox">
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</div>
<div id="PageWrapper">
<header id="header">
<div id="container"><img id="header-img" src="http://is.am/4m8e" alt="PageLogo"></div>
<nav id="nav-bar">
<a class="nav-link" href="#History">History</a>
<a class="nav-link" href="#Types">Types</a>
<a class="nav-link" href="#Price">Price</a>
</nav></header>
<section id="History"><h1 >History</h1>
<p id="Text">guitar, plucked stringed musical instrument that probably originated in Spain early in the 16th century, deriving from the guitarra latina, a late-medieval instrument with a waisted body and four strings. The early guitar was narrower and deeper than the modern guitar, with a less pronounced waist. It was closely related to the vihuela, the guitar-shaped instrument played in Spain in place of the lute.</p>
</section>
<div class="container">
<div class="child"> <img class="child" src="http://is.am/4n68" alt="Fender" ></div>
<div class="child"> <img class="child" src="http://is.am/4n69" alt="Gibson"></div>
<div class="child"> <img class="child" src="http://is.am/4n6a" alt="Slash"> </div>
</div>
<div id="gap"></div>
<iframe id="video" width="771" height="578" src="https://www.youtube.com/embed/b3oi174RAiI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<section id="Types"><h1>Types</h1>
<p id="Text">Classical Guitars
The classical guitar, also known as the Spanish guitar, was originally made to play classical or flamenco music but they are now used to play whichever type of music the player desires.
Classical guitars tend to feature nylon strings which are easier on fingers and produce a mellower sound than steel strings. Classical guitars are often available in a variety of sizes (find out what size guitar you need here) making them a great option for young players. The sound they produce, the often cheaper price, and the variety in sizes available has made the classical guitar the most popular for beginners.
Acoustic Guitar
The acoustic guitar is similar to the classical guitar but instead of nylon strings it is typically made with steel strings that produce a much louder sound. There are a number of different types of acoustic guitar that you can play including the dreadnought and twelve string guitars.
Electro-Acoustic Guitar
The electro-acoustic guitar is basically the same as an acoustic guitar but with the option to amplify the sound by plugging into amplifiers. Electro-acoustic guitars are also popular for use with recording equipment and sound effect pedals.
Electric Guitar
Electric guitars differ from other types of guitar because they produce a sound by converting the vibration of the strings into electric signals. Meaning that unlike the other guitar types you cannot just pick up an electric guitar and play it. You will need to plug the electric guitar into an amplifier to get a sound.
Bass Guitar
The bass guitar is designed to produce a much lower tone than the other guitars. Most modern bass guitars are electric and feature four strings, though some bass guitars do have five or six stings. </p>
</section>
<section id="Price"><h1>Price</h1><p id="Text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid, consequuntur? Dignissimos totam aliquid dolor magnam. Praesentium culpa iure recusandae similique aliquam repudiandae consequuntur quod, vero, illo deserunt dolor? Doloribus, vero.</p></section>
<form id="form" action=" https://www.freecodecamp.com/email-submit">
<input type="email" name="email" id="email" placeholder="email" required></input>
<input type="submit" value="submit" id="submit"></input>
</form>
</div>
CSS:
body{
background-color: rgb(255, 255, 255);
}
#header{
margin-top: 30px;
}
div{
width: fit-content;
}
li{
font-size: 133%;
margin-right: 2cm;
}
#gap{
height: 2cm;
}
.container{
display: flex;
}
@media (max-width: 800px) {
.container {
display: flex;
flex-direction: column;
}
}
#nav-bar{
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
left: 55;
top: 10; /* Position the navbar at the top of the page */
overflow: hidden;
}
.child{
width: 300px;
height: 300px;
background-color: aquamarine;
margin-left: 30px;
left: 45%;
}
.child:hover{
width: 310px;
height: 310px;
background-color: blueviolet;
color: white;
}
#nav-bar a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
background-color: rgb(12, 3, 65);
}
#nav-bar a:hover {
background: rgb(0, 0, 0);
color: rgb(186, 55, 238);
}
#header-img{
margin-top: 40px;
}
#History{
padding-top: 50px;
}
#Types{
padding-top: 50px;
}
#Text{
font-size: 35px;
}
#form{
background-color: darkviolet;
color: darkblue;
width: fit-content;
font-size: 30px;
justify-content:center;
}
#email{
font-size: 30px;
}
#submit{
font-size: 30px;
justify-content:center;
background-color: orange;
}
#submit:hover{
background-color: rgb(27, 206, 66);
}