Product Landing Page - Build a Product Landing Page - 6yuBu9vM_t7k1jWRYZq7t

Tell us what’s happening:

ejecuto las pruebas pero me dice Siempre #nav-bar debe estar en la parte superior de la ventana gráfica. y esta en la parte de arriba de la ventana grafica alguien me puede ayudar en este tema que estoy haciendo mal o que estoy omitiendo?

Your code so far

Add your HTML

<html>
  <head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<title></title>
<link rel="stylesheet" type="text" 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+Flex:opsz,wght@8..144,500&family=Tai+Heritage+Pro:wght@700&display=swap" rel="stylesheet">
 <link rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
      crossorigin="anonymous"
    />
  </head>
  <body>
<!-- header contiene imagen, lista de navegacion y form -->
 <div class="page-wrapper">
  
   <header id="header">
      <nav id="nav-bar">
      <ul class="ulnav">
      <li>
        <a class="nav-link"href="#Features">Features</a>
      </li>
      <li>
        <a class="nav-link"href="#How_It_Works">How It Works</a>
      </li>
      <li>
        <a class="nav-link"href="#pricing">pricing</a>
      </li>     
      </nav>
     </ul>
    <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" loading="lazy" />
    <form id="form" action="https://www.freecodecamp.com/email-submit">
    <h2>Obras maestras hechas a mano y hechas en casa</h2>
    <input type="email" id="email" placeholder="email" name="email" method="POST" required />
      <input type="name" id="name" placeholder="Nombre Completo" name="name" method="POST" required />
      <input type="number" id="telephone" placeholder="Numero Telefonico" name="phone" method="POST" required/>
      <input type="submit" id="submit" />
    </form>  
     </header>
     <!--seccion de informacion acerca de los productos -->
      <section class="materiales">
      <ul class="ulli">
        <li id="Features">
          <i class="fa fa-3x fa-fire"></i>
          <h3>Materiales de primera calidad</h3>
          <p>Nuestros trombones utilizan el latón más brillante que se obtiene localmente. Esto aumentará la longevidad de su compra.</p>
        </li>
        <li id="How_It_Works">
          <i class="fa fa-3x fa-truck"></i>
          <h3>Envío rápido</h3>
          <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>
        </li>
        <li id="pricing">
         <i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
          <h3>Seguro de calidad</h3>
          <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>
        </li>
      </ul>
    </section>
    <!--seccion de video -->
  <div class="videox">
    <video width="400px" id="video" src="https://www.youtube.com/watch?v=qX_g5OGiUAI" controls autoplay="autoplay" >Glimpse of us</video>
    </div>
    <!--seccion de productos -->
  <section class="products">
    <div class="prdct3">
      <h2 class="hh">TROMBÓN TENOR</h2>
      <h3>$600</h3>
      <p class="pp">Lorem ipsum.
Lorem ipsum.
Lorem ipsum dolor.
Lorem ipsum.</p>
      <button class="btn">SELECCIONE</button>
    </div>
     <div class="prdct1">
       <H2 class="hh">TROMBÓN BAJO</H2>
      <h3>$900</h3>
      <p class="pp">Lorem ipsum.
Lorem ipsum.
Lorem ipsum
 dolor.
Lorem ipsum.</p>
      <button class="btn1">SELECCIONE</button>
    </div>
     <div class="prdct2">
       <H2 class="hh">TROMBÓN DE VÁLVULAS</H2>
      <h3>$1200</h3>
      <p class="pp">Toca similar a una trompeta.
Ideal para bandas de jazz.
Lorem ipsum dolor.
Lorem ipsum.</p>
      <button class="btn2" >SELECCIONE</button>
    </div>
  </section>
  <!--pie de pagina -->
  <footer>
    <ul class="lilis">
      <li class="lili">
        <a class="aaa1" href="#">Privacy</a>
      </li>
      <li class="lili">
        <a class="aaa1" href="#">Terms</a>
      </li>
      <li class="lili">
        <a class="aaa1" href="#">Contact</a>
      </li>
    </ul>
    <span>Copyright 2016, Original Trombones</span>

  </footer>
  </body>
</html>

Add your CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#page-wrapper {
  display: flex;
  max-width: 580px;
}

#nav-bar {
  width: 50%;
  margin-left: auto;
}

.ulnav {
  width: 300px;
  display: flex;
  margin-left: 90;
  margin-top: 15px;
}

a {
  text-decoration: none;
  margin: 15px;
  margin-top: 20px;
}

.linav {
  list-style: none;
  margin-top: -25px;
  width: 450px;
  height: 40px;
  border-radius: 10px;
}

#form {
  width: 500px;
  margin: auto;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

input {
  margin: 5px auto;
  align-items: center;
  width: 250px;
  text-align: center;
  border-radius: 10px;
}

#submit {
  width: 70px;
  display: block;
  text-align: center;
  margin: 10px auto;
}

h2 {
  width: 100%;
  margin: auto;
  margin-bottom: 20px;
  margin-top: 20px;
}

#header-img {
  width: 250px;
  margin-top: -15px;
}

.ulli {
  display: flex;
  width: 450px;
  margin: auto;
  flex-direction: column;
}

#Features {
  background-color: #dfdfe2;
  list-style: none;
  margin-top: 25px;
  border-radius: 10px;
  padding: 10px;
}

i {
  width: 300px;
  margin-left: 20px;
  margin-bottom: -200;
  margin-top: 30px;
  color: orange;
}

h3 {
  width: 330px;
  margin-left: auto;
  margin-bottom: 15px;
}

p {
  width: 300px;
  margin-left: auto;
}

#video {
  margin-right: 200px;
  margin-top: 50px;
  justify-content: center;
  position: absolute;
}

#How_It_Works {
  background-color: #dfdfe2;
  margin-top: 25px;
  border-radius: 10px;
  padding: 10px;
  width: 450px;
  height: 150px;
}

#pricing {
  list-style: none;
  margin-top: 25px;
  border-radius: 10px;
  padding: 10px;
  background-color: #dfdfe2;
  width: 450px;
  height: 150px;
}

li {
  list-style: none;
}

.videox {
  display: flex;
  width: 450px;
  margin: auto;
  flex-direction: column;
}

.products {
  display: flex;
  width: 580px;
  flex-direction: row;
  margin: auto;
  margin-top: 300px;
}

.prdct1 {
  width: 150px;
  background-color: #dfdfe2;
  height: 250px;
  margin: auto;
  padding: 10px;
  border-radius: 10px;
}

.prdct2 {
  width: 180px;
  background-color: #dfdfe2;
  height: 250px;
  margin: auto;
  padding: 10px;
  border-radius: 10px;
}

.prdct3 {
  margin: auto;
  background-color: #dfdfe2;
  height: 250px;
  width: 150px;
  padding: 10px;
  border-radius: 10px;
  padding-top: 0;
}

.pp {
  width: 150px;
  justify-content: center;
  padding: 2px;
}

button {
  margin-bottom: auto;
}

.hh {
  font-size: 14px;
}

footer {
  display: flex;
  margin-top: 20px;
  background-color: #dfdfe2;
}

.lili {
  margin-top: 15px;
  margin-bottom: 10px;
}

.aaa1 {
  margin-top: 70px;
  color: black;
}

span {
  margin: auto;
}

.lilis {
  margin: auto;
  flex-direction: disc;
}

.aaa1:hover {
  color: orange;
}

.btn {
  margin-left: 20px;
  margin-top: 65px;
  border-radius: 5px;
  padding: 2px;
  border-style: none;
}

.btn1 {
  margin-left: 20px;
  margin-top: 55px;
  border-radius: 5px;
  padding: 2px;
  border-style: none;
}

.btn2 {
  margin-left: 33px;
  margin-top: 5px;
  border-radius: 5px;
  border-style: none;
  padding: 2px;
}

.btn:hover {
  background: orange;
  color: white;
}

.btn1:hover {
  background: orange;
  color: white;
}

.btn2:hover {
  background: orange;
  color: white;
}

a:hover {
  color: orange;
}

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:

We would need to see both your HTML and CSS in order to help you. You could put it in codepen and send us the link or paste it in here. To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

As said, we need to see your code. Edit your post and copy-paste your code where it was indicated it should go.


Did you make the navbar fixed or sticky?

Ya lo hice, podrías ayudarme por favor.

Validate your HTML.

You have to use CSS to fix the header/nav to the top of the page. It should stay at the top of the page when the page is scrolled.

Look at the two properties I mentioned and read the MDN article on position.


This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.