Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Footer y header

Referente al curso HTML y CSS: header, footer y variables CSS

por Justin Uriel Vega Flores
| 26.3k xp | 53 posts
<!DOCTYPE html>
<html lang="es-cl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav class="header__menu">
            <a class="header__menu__link">home</a>
            <a class="header__menu__link">Sobre mi</a>
        </nav>
    </header>
    <main class="presentación">
        <section class="presentación__contenido">
        <h1 class="presentación__contenido__título">Eleve tu negocio digital a otro nivel <strong class="título-destaque">con un Front-end de calidad!</strong></h1>
        <p class="presentación__contenido__texto">¡Hola! Soy Ana García, desarrolladora Front-end con especialización en React, HTML y CSS. 
            Ayudo a pequeños negocios y diseñadores a llevar a cabo buenas ideas. ¿Hablamos?
        </p>
        <div class="presentación_enlaces">
            <h2 class="presentación_enlaces_sub">Accede a mis redes:</h2>
            <a class="presentación_enlaces_link" href="https://www.instagram.com">
                <img src="./assets/instagram.png">
                Instagram</a>
            <a class="presentación_enlaces_link" href="https://www.github.com">
                <img src="./assets/github.png">
                Github</a>
        </div>
        </section>
        <img src="Imagem.png" alt="Imagen de Ana García trabajando">
    </main>
    <footer class="footer">
        <P>Justin</P>
    </footer>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

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

}

.título-destaque{
    color: #22D4FD;
}

.presentación{
    display: flex;
    align-items: center;
    margin: 3% 10%;
    justify-content: space-between;
}

.presentación__contenido{
    width: 915px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.presentación__contenido__título{

    font-size: 36px;
    font-family: "Krona One", sans-serif;
}

.presentación__contenido__texto{
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
}

.presentación_enlaces{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 16px;;
}

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

.presentación_enlaces_link {
    width: 378px;
    text-align: center;
    padding: 21.5px 0;
    border-radius: 1px;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
    color: #F6F6F6;
    border: 2px solid #22D4FD;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.presentación_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
por Brenda Souza
| 4883.2k xp | 17616 posts
Instructor Scuba

Hola Justin, espero que estés bien

Tu código HTML y CSS parece estar bien estructurado. Sin embargo, si estás enfrentando algún problema específico con el footer o el header, aquí hay algunas cosas que podrías revisar o considerar:

  1. Verificar la Visualización: Asegúrate de que el archivo style.css esté correctamente vinculado y que no haya errores en la consola del navegador que puedan estar afectando la carga de estilos.

  2. Espaciado y Posicionamiento: Si el footer o el header no están posicionados como esperas, puedes ajustar sus márgenes o padding en el CSS. Por ejemplo, si deseas que el footer esté siempre al final de la página, puedes considerar usar position: fixed; junto con bottom: 0; para mantenerlo en la parte inferior de la ventana.

  3. Responsividad: Dado que estás utilizando flexbox para la disposición, asegúrate de que los elementos dentro del header y footer se comporten como esperas en diferentes tamaños de pantalla. Puedes usar media queries para ajustar el diseño en dispositivos más pequeños.

  4. Enlaces en el Header: Actualmente, los enlaces en el header no tienen href, lo que significa que no son clicables. Si deseas que sean enlaces funcionales, asegúrate de agregar un atributo href a cada uno.

  5. Consistencia de Estilos: Si deseas que el header tenga un estilo similar al footer, puedes aplicar estilos similares en el CSS, como un fondo de color o un ajuste de fuente.

Aquí tienes un ejemplo de cómo podrías ajustar el header para que tenga un fondo y se vea más consistente con el footer:

header {
    background-color: #22D4FD;
    padding: 24px;
    color: #000000;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 400;
}

Espero que estos consejos te sean útiles para ajustar tu diseño. ¡Espero haber ayudado y buenos estudios!