Tell us what’s happening:
-
Siempre
#nav-bardebe estar en la parte superior de la ventana gráfica. -
esperando :La página de destino de su producto debe usar al menos una consulta de medios.
-
esperando :Su página de destino del producto debe usar CSS Flexbox al menos una vez.
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<title></title>
</head>
<header id="header">
<div class="logo">
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="logo original de trombones">
</div>
<nav class="nav-bar" id="nav-bar">
<div class="informacion">
<a class="nav-link" href="#container">Caracteristicas</a>
<a class="nav-link" href="#video">Como funciona</a>
<a class="nav-link" href="#precio">Precios</a>
</div>
</nav>
</header>
<body>
<h2>Obras maestras hechas a mano y hechas en casa</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input name="email" id="email" type="email" placeholder="Ingrese su dirección de correo electrónico" required>
<input id="submit" type="submit" value="Empezar" class="btn">
</label>
</form>
<div class="container" id="container">
<div>
<div class="icono">
<i class="fa fa-3x fa-fire"></i>
</div>
<div>
<h2>Materiales de primera calidad</h2>
<p>Nuestros trombones utilizan el latón más brillante que se obtiene localmente. Esto aumentará la longevidad de su compra.</p>
</div>
</div>
<div>
<div class="icono">
<i class="fa fa-3x fa-truck"></i>
</div>
<div>
<h2>Envío rápido</h2>
<p>Nos aseguramos de que recibas tu trombón tan pronto como hayamos terminado de fabricarlo. También proporcionamos devoluciones gratuitas si no está satisfecho.</p>
</div>
</div>
<div>
<div class="icono">
<i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
</div>
<div>
<h2>Seguro de calidad</h2>
<p>Por cada compra que realices, nos aseguraremos de que no haya daños o fallas y revisaremos y probaremos el tono de tu instrumento.</p>
</div>
</div>
</div>
<iframe id="video" height="315" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen=""></iframe>
<section class="precio" id="precio">
<div>
</div>
</setion>
</body>
/* file: styles.css */
header{
position: fixed;
top:0;
min-height: 75px;
padding: 0px 20px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #eee;
}
#nav-bar{
position: fixed;
top:0;
}
nav{
font-weight: 400;
display:block;
}
*{
margin: 0;
padding: 0;
box-sizing: box-border;
}
.container{
flex-direction:column;
}
iframe{
width: 200px;
height: 200px;
margin: 10px;
}
.informacio{
width: 35vw;
display: flex;
flex-direction: row;
justify-content: space-around;
}
@media screen and(max-widht:800px){
iframe{
width: 100px;
}
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge: