Dicci cosa sta succedendo
Sono riuscita a passare tutti i test tranne questi:
-
L’elemento
#nav-bardovrebbe sempre essere in cima al viewport. -
Attendi :La pagina dovrebbe avere almeno un media query.
-
Attendi :La tua pagina dovrebbe usare CSS Flexbox almeno una volta.
Non so davvero più cosa fare!
Il tuo codice fino ad ora
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<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="var(--tds-icon--fill, #171a20)"></path></svg>
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#model3">Model 3</a></li>
<li><a class="nav-link" href="#models">Model S</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 address for a chance to win a Tesla!</p>
<input id="email" type="email" placeholder="Email" name="email"/>
<input id="submit" type="submit" />
</form>
<section id="model3">
<iframe id="video" src="https://www.youtube.com/embed/Q4VGQPk2Dl8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section id="models">
<iframe src="https://www.youtube.com/embed/Ujp3q_aryRA" title="YouTube video player" 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="YouTube video player" 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/mURbzh9t0_0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
</body>
</html>
/* file: styles.css */
body {
font-family: 'Roboto', sans-serif;
padding: 0 10px;
}
header {
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
}
@media (max-width: 768px) {
header {
flex-direction: column;
}
}
svg {
width: 300px;
}
ul {
display: flex;
list-style: none;
}
a {
color: black;
text-decoration: none;
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%;
}
Informazioni del tuo browser:
Lo user agent è: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36
Sfida: Landing page di un prodotto - Costruisci la landing page per un prodotto
Link alla sfida: