Product Landing Page - Build a Product Landing Page

Tell us what’s happening:

  • Siempre #nav-bar debe 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&amp;controls=0&amp;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:

HI @Sujka !

You have not linked your css to your html document.

Please reread the direction here on how to do that to get to the tests to pass
Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS