Haga lo que hicimos en aula | HTML y CSS: header, footer y variables CSS | Alura Latam

2
respuestas

por Micaela Gonzalez

| 26.8k xp | 29 posts

Personalizando el pie de página de tu sitio web

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Sitio Web</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Mi Sitio Web</h1>
        <nav>
            <a href="#home">Home</a>
            <a href="#sobre-mi">Sobre mí</a>
        </nav>
    </header>
    <main class="presentacion">
        <section class="presentacion__contenido">
            <h1 class="presentacion__contenido__titulo">
                Eleve tu negocio digital a otro nivel
                <strong class="titulo-destaque">con un Front-end de calidad!</strong>
            </h1>
            <p class="presentacion__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="presentacion__enlaces">
                <h2 class="presentacion__enlaces__subtitulo">Accede a mis redes:</h2>
                <a class="presentacion__enlaces__link" href="https://github.com/">
                    <img src="./assets/github.png" alt="Icono de Github">
                    GitHub
                </a>
                <a class="presentacion__enlaces__link" href="https://linkedin.com/">
                    <img src="./assets/linkedin.png" alt="Icono de LinkedIn">
                    LinkedIn
                </a>
                <a class="presentacion__enlaces__link" href="https://twitch.tv/">
                    <img src="./assets/twitch.png" alt="Icono de Twitch">
                    Twitch
                </a>
            </div>
        </section>
        <img src="assets/Imagem.png" alt="Foto de Ana García desarrollando un proyecto">
    </main>
    <footer>
        <p>© 2023 Mi Página. Todos los derechos reservados.</p>
        <a href="#politica">Política de privacidad</a>
    </footer>
</body>
</html>

2 respuestas

por Micaela Gonzalez

| 26.8k xp | 29 posts

hace 2 semanas

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

* {
    padding: 0;
    margin: 0;
}

body {
    /* height: 100vh; */ /* Comenta esta línea */
    box-sizing: border-box;
    background-color: #000000;
    color: #F6F6F6;
}

header {
    background-color: #333;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header nav {
    display: flex;
    gap: 20px;
}

header nav a {
    color: #F6F6F6;
    text-decoration: none;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    padding: 12px 24px;
    transition: color 0.3s ease;
}

header nav a:hover {
    color: #22D4FD;
}

.presentacion {
    padding: 5%;
    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;
}

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

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

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

.presentacion__enlaces__link {
    color: #F6F6F6;
    border: 2px solid #22D4FD;
    width: 378px;
    border-radius: 8px;
    background-color: transparent;
    text-align: center;
    padding: 16px 0;
    text-decoration: none;
    font-size: 24px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s ease;
}

.presentacion__enlaces__link:hover {
    background-color: #22D4FD;
    color: #000000;
    text-decoration: underline;
    transform: scale(1.05);
}

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

por Brenda Souza

| 4883.2k xp | 17616 posts

Instructor Scuba

hace 2 semanas

Hola Micaela, espero que estés bien

Para personalizar el pie de página de tu sitio web según las indicaciones de la actividad, necesitarás realizar algunos cambios en tu archivo CSS. Aquí te dejo un ejemplo de cómo podrías hacerlo:

Abre tu archivo style.css.
Agrega o modifica el estilo del footer de la siguiente manera:

footer {
    background-color: #22D4FD; /* Fondo azul claro */
    color: #000000; /* Texto en negro */
    text-align: center; /* Texto centrado */
    font-family: 'Montserrat', sans-serif; /* Fuente Montserrat */
    font-size: 24px; /* Tamaño de fuente */
    font-weight: 400; /* Peso de la fuente */
    padding: 24px; /* Espaciado interno */
}

Este código aplicará los estilos necesarios para que el pie de página cumpla con las especificaciones dadas en la actividad. Asegúrate de que tu archivo style.css esté correctamente vinculado a tu HTML para que los cambios se reflejen.

Espero que esta guía te sea útil y que logres personalizar tu pie de página como se espera. ¡Bons estudios!