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

Haciendo lo que hicimos en el aula

Referente al curso HTML y CSS: header, footer y variables CSS, en el capítulo Creando el header y el footer y actividad Haga lo que hicimos en aula

por Thais Violini
| 34.4k xp | 29 posts
Intérprete de servicios médicos

HTML

<!DOCTYPE html>
<html lang="es-mx">
<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 class="header">
        <nav class="header__menu">
            <a class="header__menu__link">Homa</a>
            <a class="header__menu__link">Sobre mi</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"> 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://www.instagram.com/">
                <img src="./assets/instagram.png">
                Instagram</a>
            <a class="presentacion__enlaces__link" href="https://github.com/">
                <img src="./assets/github.png">
                Github</a>
        </section>
        </div>
        <img src="Imagen2.png" alt="Imagen del Ana estudiando">
    </main>
    <footer class="footer">
        <p>Desarrollado por Thais Violini</p>
    </footer>
           
</body>
</html>

CSS

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


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


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

.presentacion {
    display: flex;
    align-items: center;
    margin: 15% 10%;
    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;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

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

.presentacion__enlaces__link {
    width: 378px;
    text-align: center;
    padding: 21.5px 0;
    border-radius: 8px;
    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;
}

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

.footer {
    background-color: #22d4fd;
    padding: 24px;
    color: #000000;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
}
1 respuesta
por Brenda Souza
| 4883.2k xp | 17616 posts
Instructor Scuba

Hola Thais, espero que estés bien

¡Gracias por compartir tu código! Parece que estás trabajando en un proyecto de portafolio y necesitas ajustar algunos elementos según las instrucciones de la clase. Aquí tienes algunas sugerencias para abordar cada uno de los puntos mencionados:

  1. Personalizando el pie de página: Parece que ya has configurado correctamente el pie de página con un fondo azul claro (#22D4FD), texto negro, y el uso de la fuente 'Montserrat' con tamaño 24px y peso 400. El padding de 24px también está implementado. ¡Bien hecho!

  2. Ajustando el espaciado interno de la presentación: Para cambiar de margin a padding en la clase .presentacion, puedes modificar el CSS de la siguiente manera:

    .presentacion {
    display: flex;
    align-items: center;
    padding: 5% 10%; /* Comienza con 5% y ajusta según sea necesario */
    justify-content: space-between;
}

    Esto debería proporcionar un espaciado interno más equilibrado.

  3. Eliminando el height para adaptar el diseño: No veo que tengas la propiedad height: 100vh en tu código CSS actual, lo cual es bueno, ya que esto puede causar problemas de diseño. Si en algún momento decides agregarlo, recuerda comentarlo para evitar esos problemas.

  4. Estilizando el encabezado con CSS: Para estilizar el encabezado y alinear los enlaces horizontalmente, puedes agregar lo siguiente a tu CSS:

    .header__menu {
    display: flex;
    justify-content: center; /* O space-around para más espaciado */
    background-color: #000; /* Ajusta según el diseño deseado */
    padding: 10px 0;
}

.header__menu__link {
    font-size: 18px;
    color: #F6F6F6;
    text-decoration: none;
    margin: 0 15px;
    transition: color 0.3s;
}

.header__menu__link:hover {
    color: #22d4fd;
}

    Esto debería darle un aspecto moderno y atractivo al encabezado.

  5. Ajustando el espaciado interno de los enlaces: Ya he incluido un margen en los enlaces del encabezado en el punto anterior, lo que debería ayudar a mejorar el espaciado y la legibilidad.

Espero que estas sugerencias te sean útiles y te ayuden a avanzar en tu proyecto. ¡Bons estudios!