Tell us what’s happening:
Hello
When i text the in my code editor it seems like my code pass and all be good, but when i copy / paste all my code on FreeCodeCamp, it seems like the step of Media Query and CSS flexbox are not good, but if you see my CSS, you will see the 2. Can you help me please ?
Your code so far
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.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width , initial-scale=1.0">
<link rel="stylesheet" href="styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<title>My Landing Page</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
header {
position: fixed;
top: 0px;
width: 100%;
height: 19px;
padding: 25px 0px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: black;
opacity: 0.7;
}
@media (max-width: 500px) {
body {
flex-wrap: wrap;
}
}
body {
font-family: 'Roboto', sans-serif;
color: white;
background-color: black;
line-height: 1.4;
width: 100%
}
.stretch {
width: 97%;
height: 97%;
}
h1, h2, h3 {
font-size: 24px;
line-height: 32px;
letter-spacing: 3px;
color: white;
}
a {
color: white;
font-size: 14px;
line-height: 20px;
letter-spacing: normal;
}
a:hover {
text-decoration: underline;
}
#Assistance {
display: flex;
justify-content: space-between;
margin-left: 32px;
}
#Shop {
display: flex;
justify-content: space-between;
margin-left: 32px;
}
#Compte {
display: flex;
justify-content: space-between;
margin-left: 32px;
}
#Menu {
display: flex;
justify-content: space-between;
margin-left: 32px;
}
main {
display: flex;
flex-direction: column;
justify-content: center;
}
.features-img {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#background {
position: absolute;
z-index: -1;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.paragraphe {
text-align: center;
width: 1240px;
}
.paragraphe .gauche {
display: inline-block;
max-width: 360px;
vertical-align: top;
}
.paragraphe .droite {
display: inline-block;
max-width: 880px;
}
@media screen and (max-width: 600px) {
.paragraphe .gauche, .paragraphe .droite {
max-width: 100%;
}
}
iframe {
width: 1240px;
height: 620px;
align-items: center;
}
form {
width: 322px;
height: ;
}
form input {
width: 298px;
height: 40px;
padding: 0 20px;
margin-top: 8px;
font-size: 14px;
line-height: 20px;
text-align: start;
letter-spacing: normal;
box-shadow: rgb(183, 65, 52) 0px 0px 0px 1px inset;
border-radius: 20px;
background-color: white;
}
footer {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#footer {
background-color: black;
width: ;
height: ;
top: 1000px;
}
.submit {
font-size:12px;
line-height: 14.4px;
text-align: center;
letter-spacing: normal;
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 2px inset;
border-radius: 20px;
}
.submit:hover{
background-color: transparent;
color: #ffffff;
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 2px inset;
}
</style>
</head>
<body>
<!-- premiere image -->
<div id="background"></div>
<img src="https://tesla-cdn.thron.com/delivery/public/image/tesla/0f22af4d-15e0-452d-ba66-1359490b4a0b/bvlatuR/std/2880x1800/Cybertruck-Hero-Desktop" class="stretch" alt="Tesla Cybertruck">
<header id="header">
<img
id="header-img"
src="https://www.freepnglogos.com/uploads/tesla-logo-text-png-7.png"
alt="Tesla Logo"
width="120"
/>
<!-- Ma barre de navigation -->
<nav class="nav-bar" id="nav-bar">
<h1>
<a class="nav-link" href="#Features">Features</a>
<a class="nav-link" href="#Shop">Shop</a>
<a class="nav-link" href="#Compte">Compte</a>
<a class="nav-link" href="#Menu">Menu</a>
</h1>
</nav>
</header>
<main>
<p class="marque">Cybertruck</p>
<p class="accroche">Plus polyvalent qu'un pick-up et plus performant qu'une voiture de sport.</p>
<section id="Features">
<div class="container">
<img src="https://www.tesla.com/xNVh4yUEc3B9/02_Desktop.jpg" class="features-img" alt="car image 1"
width="1240" height="620">
</div>
<div class="paragraphe">
<h3>EXOSQUELETTE</h3>
<p class="droite">Le Cybertruck est construit avec une coque extérieure conçue pour offrir une durabilité et une protection des passagers optimales. Partant d'un exosquelette presque impénétrable, chaque composant est conçu pour offrir une résistance et une endurance accrues, qu'il s'agisse de la couche structurelle en acier inoxydable 30X laminé à froid et ultrarobuste ou du verre blindé Tesla.</p>
</div>
<div class="container">
<img src="https://www.tesla.com/xNVh4yUEc3B9/03_Desktop.jpg" class="features-img" alt="car image 2"
width="1240" height="620">
</div>
<div class="paragraphe">
<p class="gauche">ACIER INOXYDABLE 30X LAMINÉ À FROID ET ULTRAROBUSTE</p>
<p class="droite">S'il existait quelque chose de mieux, nous l'utiliserions. Éliminez les bosses, les dommages et la corrosion à long terme grâce à un exosquelette monochrome lissé qui recouvre l'extérieur du véhicule et offre une protection maximale pour vous et vos passagers.</p>
</div>
<div class="container">
<img src="https://www.tesla.com/xNVh4yUEc3B9/04_Desktop.jpg" class="features-img" alt="car image 3"
width="1240" height="620">
</div>
<div class="paragraphe">
<p class="gauche">VERRE BLINDÉ TESLA</p>
<p class="droite">Le composite verre-polymère ultrarésistant absorbe et redéfinit la force d'impact pour améliorer les performances et limiter les dommages.</p>
</div>
</section>
<div></div>
<section id="Shop"><h1></h1>
</section>
<section id="Compte"><h1></h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</section>
<section id="Menu">
<div class="center-element">
<iframe
id="video"
src="https://www.tesla.com/xNVh4yUEc3B9/performance_video_desktop.mp4"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<h3>PERFORMANCE ET EFFICACITE</h3>
<p class="droite">Vous entrez dans une nouvelle dimension en matière de robustesse, de vitesse et de polyvalence. Le puissant groupe motopropulseur et le centre de gravité bas procurent un contrôle de motricité et un couple exceptionnels, pour une accélération de 0 à 60 mph en seulement 2,9 secondes et une autonomie allant jusqu'à 500 miles.</p>
</div>
</section>
</main>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div>
<button class="carousel" role="tablist" aria-selected="false" aria-hidden="true">
<strong>STOCKAGE SÉCURISÉ</strong><br><br>
Un espace suffisant pour votre caisse à outils, vos pneus et votre Cyberquad. Bénéficiez d'un espace de stockage verrouillable de 100 pieds cubes à l'extérieur, comprenant l'espace sous-benne, le coffre avant et les montants centraux de la benne.
</button>
<button class="carousel" role="tablist" aria-selected="false" aria-hidden="true">
<strong>ROBUSTESSE</strong><br><br>
Avec une force motrice quasi inépuisable et une capacité de remorquage de plus de 14 000 livres, le Cybertruck peut facilement intervenir dans presque toutes les situations extrêmes.
</button>
<button class="carousel" role="tablist" aria-selected="false" aria-hidden="true">
<strong>SUSPENSION PNEUMATIQUE ADAPTATIVE</strong><br><br>
Soulevez et abaissez la suspension de quatre pouces dans n'importe quelle direction pour accéder facilement au Cybertruck ou à l'espace de stockage, tandis que les fonctions de correction automatique du niveau s'adaptent à toutes les situations et vous aident dans tous vos travaux.
</button>
<button class="carousel" role="tablist" aria-selected="false" aria-hidden="true">
<strong>INTÉRIEUR MODULABLE</strong><br><br>
Six sièges confortables grâce à un espace de rangement supplémentaire sous les sièges de la deuxième rangée. Équipé d'un écran tactile avancé de 17 pouces et d'une toute nouvelle interface utilisateur personnalisée.
</button>
<button class="carousel" role="tablist" aria-selected="false" aria-hidden="true">
<strong>EXCELLENTE CAPACITÉ D'ADAPTATION</strong><br><br>
Robuste et raffiné, le Cybertruck est totalement adaptable à vos besoins. Préparez-vous à vivre une expérience unique grâce à son design pratique et polyvalent, comprenant une alimentation électrique et une arrivée d'air comprimée dans la benne.
</button>
</div>
<footer>
<div id="footer" align>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input
id="text"
type="text"
name="text"
placeholder="Have a question ?"
class="text" required>
<br>
<input
id="email"
type="email"
name="email"
placeholder="What email would you like to be responded to ?"
class="email" required>
<br>
<input
id="submit"
type="submit"
value="Envoyer"
class="submit">
</form>
</div>
</footer>
</body>
</html>
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.115 Safari/537.36
Challenge: Build a Product Landing Page
Link to the challenge: