Proyectos de diseño web responsivo - Construye una página de inicio de producto

Español HTML-CSS
1

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:

2

Buenas!
Si tu #nav-bar siempre debe estar en la parte superior del viewport significa que al ‘scrollear’ hacia abajo jamas deberia de perderse de vista. En otras palabras, siempre deberias ser capaz de ver la barra de navegacion de tu pagina web, siendo su posicion fija arriba del todo.
¿Te recuerda a alguna propiedad de CSS?

2 Likes