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: