Tell us what’s happening:
I got almost everything correct except these 3 last topics:
–>Your #nav-bar should always be at the top of the viewport<–
–>Your Product Landing Page should use at least one media query<–
–>Your Product Landing Page should use CSS Flexbox at least once<–
What else do i have to put/remove in this code ? I do not know where is my mistake. If anyone would help, i’ll be thankfull
/* file: index.html */
<header id='header'>
<div class='logo'>
<img id='header-img' src=''>
<svg viewBox="0 0 342 35" xmlns="http://www.w3.org/2000/svg"><path d="M0 .1a9.7 9.7 0 007 7h11l.5.1v27.6h6.8V7.3L26 7h11a9.8 9.8 0 007-7H0zm238.6 0h-6.8v34.8H263a9.7 9.7 0 006-6.8h-30.3V0zm-52.3 6.8c3.6-1 6.6-3.8 7.4-6.9l-38.1.1v20.6h31.1v7.2h-24.4a13.6 13.6 0 00-8.7 7h39.9v-21h-31.2v-7h24zm116.2 28h6.7v-14h24.6v14h6.7v-21h-38zM85.3 7h26a9.6 9.6 0 007.1-7H78.3a9.6 9.6 0 007 7zm0 13.8h26a9.6 9.6 0 007.1-7H78.3a9.6 9.6 0 007 7zm0 14.1h26a9.6 9.6 0 007.1-7H78.3a9.6 9.6 0 007 7zM308.5 7h26a9.6 9.6 0 007-7h-40a9.6 9.6 0 007 7z" fill="currentColor"></path></svg>
</div>
<nav id='nav-bar'>
<ul>
<li><a class='nav-link' href='#models'>Model S</a></li>
<li><a class='nav-link' href='#model3'>Model 3</a></li>
<li><a class='nav-link' href='#modely'>Model Y</a></li>
<li><a class='nav-link' href='#modelx'>Model X</a></li>
</ul>
</nav>
</header>
<form id='form' action='https://www.freecodecamp.com/email-submit'>
<p>Enter your email adress to receive more information about Tesla</p>
<input id='email' type='email' placeholder='Email' name='email'/>
<input id='submit' type='submit'/>
</form>
<section id='models'>
<iframe id='video' src="https://www.youtube.com/embed/9AhqDiARQMQ" title="Essentials | Model S" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section id='model3'>
<iframe src="https://www.youtube.com/embed/Q4VGQPk2Dl8" title="Tesla Unveils Model 3" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section id='modely'>
<iframe src="https://www.youtube.com/embed/Tb_Wn6K0uVs" title="Model Y Unveil" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section id='modelx'>
<iframe src="https://www.youtube.com/embed/JFOOo3hEjw8" title="Essentials | Model X" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
/* file: styles.css */
body{
font-family: 'Roboto Condensed', sans-serif;
padding: 0 10px;
}
header{
position: sticky;
top: 0;
display: flex;
justify-content: space-between; /*Element goes to the top, in the middle*/
}
@media(max-width: 768px0){
header{
flex-direction: column;
}
}
svg{
width: 300px;
}
ul{
display: flex;
list-style: none /*Tira os pontos da lista*/
}
a{
color: black;
text-decoration: none; /*Remove a parte sublinhada*/
margin-right: 10px;
}
form{
text-align: center;
margin-bottom: 20px;
}
input{
padding: 10px;
border-radius: 10px;
}
section{
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /*16:9 Aspect ratio (divide 9 by 16 = 0,5625*/
margin-bottom: 20px;
}
iframe{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
Challenge: Responsive Web Design Projects - Build a Product Landing Page
Link to the challenge: