Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Haga lo que hicimos en aula : Navegando entre paginas

Adjunto código con modificaciones solicitadas :

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sobre mí</title>
    <link rel="stylesheet" href="./style/style.css">
</head>
<body>
    <header class="header">
        <nav class="header__menu">
            <a class="header__menu__link" href="index.html">Home</a>
            <a class="header__menu__link" href="about.html">Sobre mí</a>
        </nav>
    </header>
    <main class="presentacion">
        <section class="presentacion__contenido">
            <h1 class="presentacion__contenido__titulo">Sobre mí</h1>
            <p class="presentacion__contenido__texto">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium 
                voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 
                cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, 
                id est laborum et dolorum fuga.</p>
            <p class="presentacion__contenido__texto">Et harum quidem rerum facilis est et expedita distinctio. 
                Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat 
                facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
                 Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates
                  repudiandae sint et molestiae non recusandae. 
                  Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias 
                  consequatur aut perferendis doloribus asperiores ipsum delis forum birol parela maxime infena. 
                  Excepteur sint occaecat cupidatat non.
            </p>
        </section>
        <img src="./assets/Imagem.png" alt="Foto de Ana García desarrolando un proyecto">
    </main>
    <footer>
        <p class="footer">Desarrollado por Gino Luján</p>
    </footer>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');


* {
    padding: 0;
    margin:0;
}

body{
    box-sizing: border-box;
    background-color: #000000;
    color: #F6F6F6;
}

.header{
    padding: 2% 0% 0% 15%;
}

.header__menu{
    display: flex;
    gap: 80px;
}

.header__menu__link{
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #22D4FD;
    text-decoration: none;
}

.presentacion {
    padding: 6% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.presentacion__contenido{
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.presentacion__contenido__titulo{
    font-size: 36px;
    font-family: 'Krona One', sans-serif;
}

.titulo-destaque {
    color: #22D4FD; ;
}

.presentacion__contenido__texto{
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
}

.presentacion__enlaces{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.presentacion__enlaces__subtitulo{
    font-family: 'Krona One', sans-serif;
    font-weight: 400;
    font-size: 24px;
}

.presentacion__enlaces__link{
      /* background-color: #22D4FD; */
      border: 2px solid #22D4FD;
      width: 378px;
      text-align: center;
      border-radius: 8px;
      font-size: 24px;
      font-weight: 600;
      padding: 21.5px 0;
      text-decoration: none;
      color: #F6F6F6;
      font-family: 'Montserrat', sans-serif;
      display: flex;
      justify-content: center;
      gap: 10px;
}

.presentacion__enlaces__link:hover{
    background-color: #272727;
}

.footer{
    background-color: #22D4FD;
    padding: 24px;
    color: #000000;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 400;
}
1 respuesta

Hola Gino, espero que estés bien

Gracias por compartir tu código. Parece que estás trabajando en un proyecto para crear una página "Sobre mí" y asegurarte de que la navegación entre las páginas funcione correctamente. Vamos a revisar algunos puntos clave para asegurarnos de que todo esté funcionando como se espera:

  1. Navegación entre páginas: Asegúrate de que tienes dos archivos HTML: index.html y about.html. En el código que compartiste, ya tienes los enlaces configurados en el menú de navegación dentro del <header>. Verifica que el archivo about.html también esté en la misma carpeta que index.html para que los enlaces funcionen correctamente.

  2. Ruta del archivo CSS: Noté que mencionaste que el archivo CSS está en la carpeta style. Asegúrate de que tanto en index.html como en about.html, la ruta del archivo CSS esté correctamente especificada. Por ejemplo, si tu archivo CSS está en una carpeta llamada style, la ruta en la etiqueta <link> debería ser href="./style/style.css".

  3. Verificación de estilos: Después de hacer cualquier cambio en las rutas o en el CSS, siempre es una buena idea recargar la página en el navegador para ver si los estilos se aplican correctamente. Si los estilos no se ven bien, revisa la consola del navegador para ver si hay errores de carga.

  4. Estructura de la página "Sobre mí": Asegúrate de que el archivo about.html tenga la misma estructura básica que index.html, con el <header> y <footer> copiados y un <main> donde puedas colocar el contenido específico de la página "Sobre mí".

Si después de estos pasos sigues teniendo problemas, revisa las rutas de tus archivos y asegúrate de que todos los nombres de archivo y carpetas estén correctos y consistentes.

Espero haber ayudado y buenos estudios!