Proyectos de diseño web responsivo - Construye una página portafolio personal

Español HTML-CSS
1

Cuéntanos qué está pasando:
Tengo un problema el cual me sale con que el navbar siempre tiene que estar en la parte superior de viewport, pero aqui nose que hacer, alguien podria por favor ayudarme con esto? ):
Tu código hasta el momento

<!-- file: index.html -->
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
  </head>
  <body>
    <nav id='navbar'>
      <ul>
        <li><a href='#'>Sobre mi</a></li>
        <li><a href='#'>Proyectos</a></li>
        <li><a href='#'>Contacto</a></li>
      </ul>
    </nav>
    <section id='welcome-section'>
      <h1>Bienvenid@ :D</h1>
    </section>
    <section id='projects'>
      <a href='#' class='project-tile' target='_blank'>Mira mis proyecto :D</a>
      <div class='proyectos'>
        <div class='proyecto pry1'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
        <div class='proyecto pry2'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
        <div class='proyecto pry3'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
    </div>
    </section>
    <section id='contact_link'>
      <a id='profile-link' href='#' target='_blank'>Facebook</a>
      <a id='profile-link' href='#' target='_blank'>Whatsapp</a>
      <a id='profile-link' href='#' target='_blank'>Instagram</a>
      <a id='profile-link' href='#' target='_blank'>Linkedin</a>
    </section>
  </body>
</html>

/* file: styles.css */
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital@1&family=Ubuntu:ital@1&display=swap');

*{
  padding: 0;
  margin: 0;
  font-family: 'Rubik';
}
body{
  background: #F0E9D2;
}

#navbar{
  background: #F0E9D2;
  text-align: right;
}

ul{
  list-style: none;
  padding: 0.3em 3em 0.3em 0;
}

li{
  display: inline-block;
  padding: 0.5em;
}

li > a{
  text-decoration: none;
  color: #181D31;
  font-size: 20px;
}

li > a:hover{
  color: darkblue;
}

#welcome-section{
  display:grid;
  background: #678983;
  height: 95%;
}

#welcome-section > h1{
  display: grid;
  place-content: center;
  font-size: 200px;
  color: #E6DDC4;
}

#projects{
  display: grid;
  background: #F0E9D2;
}

.project-tile{
  display: grid;
  justify-self: center;
  font-size: 40px;
  text-decoration: none;
  color: #678983;
  margin: 0.2em;
}

.proyectos{
  display: grid;
  grid-template-columns: repeat(3, 15%);
  gap: 10em;
  grid-auto-rows: minmax(100px, auto);
  place-content: center;
}

.proyecto{
  display: grid;
  background: #E6DDC4;
  padding: 1em;
  margin: 1em;
  border-radius: 12px;
}

#contact_link{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  background: #181D31;
  margin-top: 1em;
}

#profile-link{
  color: #E6DDC4;
  text-decoration: none;
  font-size: 40px;
  padding: 0.2em;
}

@media (min-width: 50px){
  color:black;
}

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 Edg/108.0.1462.54

Desafío: Proyectos de diseño web responsivo - Construye una página portafolio personal

Enlaza al desafío:

2

Buenas, antes de abrir un nuevo post siempre verifica que tu pregunta no haya sido resuelta en algun otro post anterior!

En este caso,
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?

1 Like
3

Muchas gracias, si me sirvió

4

Hola a todos, gracias por el apoyo y las respuestas a venir. Estoy construyendo el portafolio de los ejercicios pasados, Lo que no tengo es el Link de cada uno de mis proyectos realizados. Como consigo este link? estos estan siendo grabados en FCC o debo de bajar mis archivos y subirlos a alguna plataforma como GITHUB para que la pagina los pueda importar de alli? no se si me explique bien.