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 el aula

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

:root{/*Variables CSS*/
    --negro:#000000;
    --blanco:#F6F6F6;
    --celeste:#22D4FD;
    --azul:#192cd5;

    --Montserrat: "Montserrat", sans-serif;
    --Krona: "Krona One", sans-serif;
}
/*16px = 1rem*/
* {
    padding: 0; /* Elimina todo el padding (relleno interno) de todos los elementos de la página */
    margin:0; /* Elimina todo el margen (espacio externo) de todos los elementos de la página */
}

body{
    box-sizing: border-box; 
    background-color: var(--negro); 
    color: var(--blanco);
}
.header{
    padding: 2% 0% 0% 10%;
}
.header_menu {
    display: flex;
    gap: 80px; 
}
.header_menu_link {
    font-family: var(--Montserrat); 
    font-size: 1.5rem; 
    font-weight: 400; 
    color: var(--celeste);
    text-decoration: none; 
}

.presentacion {
    padding: 4% 10%;
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 82px;
}
.presentacion_contenido {
    width: 50%;
    display: flex; 
    flex-direction: column; 
    gap: 40px; 
}
.presentacion_contenido_titulo{
    font-size: 2.25rem;
    font-family: var(--Krona); 
}
.titulo-destaque {
    color: var(--celeste); ;
}
.presentacion_contenido_texto{
    font-size: 1.5rem; 
    font-family: var(--Montserrat); 
}
.presentacion_enlaces {
    display: flex; 
    justify-content: space-between; 
    flex-direction: column; 
    align-items: center;
    gap: 32px; 
}
.presentacion_link {
    width: 50%; 
    text-align: center;
    padding: 21.5px 0; 
    border-radius: 8px; 
    font-family: var(--Montserrat); 
    font-size: 24px; 
    font-weight: 600; 
    text-decoration: none; 
    color: var(--blanco);
    border: 2px solid var(--celeste); 
    display: flex;
    justify-content: center;
    gap: 10px;
}
.presentacion_link:hover{
    background-color: var(--negro);
    padding: 4%;
    border: 2px solid var(--azul);
}

.presentacion_enlace_subtitulo {
    font-family: var(--Krona); 
    font-size: 24px;
    font-weight: 400;
}
.footer{
    background-color: var(--celeste);
    padding: 24px;
    color: #000000;
    text-align: center;
    font-family: var(--Montserrat);
    font-size: 1.5rem;
    font-weight: 400;
}

.imagen{
    width: 50%;
}
1 respuesta

¡Hola! ¿Cómo estás?

Gracias por tu aporte en el foro. Su contribución es esencial para el crecimiento de nuestra comunidad en Alura.

Sigue así y no dudes en volver al foro si tienes alguna pregunta o dificultad.

Abrazos y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!