Cuéntanos qué está pasando:
Tengo este problema
Tu #nav-bar siempre debe estar en la parte superior del viewport.
mi código hasta el momento
<!-- file: index.html -->
<link rel="stylesheet" href="styles.css">
<body>
<header id="header">
<div id="logo">
<img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Apple-logo.png/640px-Apple-logo.png">
</div>
<nav id="nav-bar">
<ul>
<a class="nav-link" href="#video">Inicio</a>
<a class="nav-link" href="#info">Info</a>
<a class="nav-link" href="#Formulario">Mas</a>
</ul>
</nav>
</header>
<section>
<h1>14 Pro</h1>
<div id="fondo">
<video id="video" muted autoplay >
<source src="https://www.apple.com/105/media/br/iphone-14-pro/2022/a3e991f3-071e-454c-b714-1b2319bb97a8/anim/hero/large.mp4" type="video/mp4">
</div>
</section>
<div id="info">
<h2>Una forma nueva y mágica de interactuar con tu iPhone. Una nueva funcionalidad de seguridad diseñada para salvar vidas. Y una innovadora cámara de 48 MP que logra un nivel de detalle deslumbrante. Todo gracias a la potencia del ultrarrápido chip A16 Bionic.</h2>
</div>
<div id="Formulario">
<h3>Para Recibir Mas Informacion Ingresa Tu email</h3>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<div id="inputs">
<label ><input id="email" type="email" name="email" placeholder=" Tu Email"</input></label>
<label><input id="submit" type="submit" value="OK"></input></label>
</div>
</form>
</div>
</body>
/* file: styles.css */
*{
font-family: sans-serif;
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
body{
background-color: #000000
}
header{
display:flex;
height: 70px;
justify-content:space-between;
align-items: center;
background-color: #000000
}
.nav-link{
text-decoration: none;
color: rgb(170,170,170);
}
.nav-link:hover{
color:white;
}
#nav-bar{
padding-right: 50px;
}
#logo{
display:flex;
align-items: center;
}
#header-img{
height: 50px;
}
#fondo{
width: auto;
min-width: 320px;
margin: auto;
display:flex;
justify-content: center;
}
h1{
text-align:center;
color: rgb(190,89,219);
font-size: 100px
}
#info{
text-align:center;
color: rgb(190,89,219);
max-width:600px;
margin: 0 auto;
font-size: 30px;
padding-top: 100px
}
#video-apple{
display: flex;
justify-content: center;
}
#video{
width: 110vw;
min-width: 320px;
margin: auto;
}
#Formulario{
display:flex;
flex-direction:column;
align-items: center;
padding-top: 100px
}
h3{
color: rgb(190,89,219);
}
#submit{
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgb(190,89,219)
}
#submit:hover{
background-color:purple
}
#email{
background-color: rgb(190,89,219);
border-radius: 20px;
height: 30px;
margin: 10px;
}
::placeholder { color: black; }
#inputs{
display:flex;
flex-direction:column;
align-items: center;
}
Información de tu navegador:
El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
Desafío: Proyectos de diseño web responsivo - Construye una página de inicio de producto
Enlaza al desafío: