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

Lo que hicimos en el aula

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

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

@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;
    height: 100vh;
    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;
}
1 respuesta
por Brenda Souza
| 4883.2k xp | 17616 posts
Instructor Scuba

Hola Thais, espero que estés bien

Parece que estás trabajando en un proyecto donde necesitas ajustar algunos estilos CSS y HTML para una página web. Basándome en el contexto de tu pregunta, aquí te dejo algunos pasos que podrían ayudarte a resolver las tareas que tienes:

  1. Agregar un subtítulo: Asegúrate de que en tu archivo index.html hayas añadido un subtítulo usando la etiqueta <h2>. Debería verse algo así dentro de la div que contiene los enlaces:

    <div class="presentacion__enlaces">
    <h2 class="presentacion__enlaces__subtitulo">Accede a mis redes:</h2>
    <!-- Aquí van tus enlaces -->
</div>

  2. Cambiar la disposición de los elementos con Flexbox: En tu archivo style.css, ya tienes configurado flex-direction: column; en la clase .presentacion__enlaces, lo que debería alinear los elementos verticalmente. Asegúrate de que esta propiedad está correctamente aplicada.

  3. Ajustar la alineación y el espaciado: También parece que ya has añadido align-items: center; y gap: 32px; en la clase .presentacion__enlaces, lo cual debería centrar y espaciar los elementos adecuadamente.

  4. Crear una clase para el subtítulo: Ya has creado la clase .presentacion__enlaces__subtitulo en tu CSS y parece que has aplicado los estilos necesarios como la fuente 'Krona One', el tamaño de fuente y el peso correcto.

  5. Modificar el estilo de los botones: Según el código CSS que compartiste, ya has configurado los estilos para los enlaces con la clase .presentacion__enlaces__link. Asegúrate de que los estilos coincidan con lo que se requiere: color de texto blanco, borde cian, y un border-radius de 8px.

Si sigues estos pasos y revisas que cada parte está correctamente implementada en tus archivos HTML y CSS, deberías ver los cambios reflejados en tu página. Espero que esto te sea de ayuda y puedas avanzar con tu proyecto.

¡Espero haber ayudado y buenos estudios!