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

CSS
Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

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

:root {
--color-primario: #5F5D9C;
--color-secundario: #6196A6;
--color-terciario: #A4CE95;
--color-hover: #272727;
--fuente-montserrat: "Montserrat", sans-serif;
--fuente-krona: "Krona One", sans-serif;
}

{
padding: 0;
margin: 0;
}

body {
background-color: var(--color-primario);
color: var(--color-secundario);
box-sizing: border-box;
}

.header {
padding: 2% 0% 0% 15%;
}

.header__menu {
display: flex;
gap: 80px;
}

.header__menu__link {
font-family: var(--fuente-montserrat);
font-size: 24px;
font-weight: 600;
color: var(--color-terciario);
text-decoration: none;
}

.presentacion {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6% 15%;

}

.presentacion__contenido {
width: 615px;
display: flex;
flex-direction: column;
gap: 40px;
}

.presentacion__contenido__titulo {
font-size: 36px;
font-family: var(--fuente-krona);

}

.titulo-destacado {
color: var(--color-terciario);
}

.presentacion__contenido__texto {
font-size: 24px;
font-family: var(--fuente-montserrat);

}

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

.presentacion__enlaces_link {
width: 378px;
text-align: center;
padding: 21.5px 0;
border-radius: 8px;

font-family: var(--fuente-montserrat);
font-size: 24px;
font-weight: 600;
text-decoration: none;
color: var(--color-secundario);
border: 2px solid var(--color-terciario);
display: flex;
justify-content: center;
gap: 10px;

}

.presentacion__enlaces__subtitulo {
font-size: 24px;
font-family: var(--fuente-krona);
font-weight: 400;
}

.presentacion__enlaces_link:hover {
background-color: var(--color-hover);
}

.footer {

background-color: var(--color-terciario);
padding: 24px;
color: var(--color-primario);
text-align: center;
font-family: var(--fuente-montserrat);
font-size: 24px;
font-weight: 400;

}

¡Hola Estudiante, espero que estés bien!

Parece que estás trabajando en personalizar tu proyecto con variables CSS. La idea es que experimentes con diferentes paletas de colores para ver cómo cambian el aspecto de tu página. Aquí tienes algunos pasos que podrías seguir:

Explora Paletas de Colores: Visita sitios como Color Hunt o la Rueda de Colores de Adobe para encontrar paletas que te gusten.

Actualiza las Variables CSS: Cambia los valores de las variables en :root con los nuevos colores que elijas. Por ejemplo:

:root {
    --color-primario: #nuevoColor1;
    --color-secundario: #nuevoColor2;
    --color-terciario: #nuevoColor3;
    --color-hover: #nuevoColor4;
}

Utiliza el Atajo Ctrl + D: Si necesitas cambiar un color específico en todo tu CSS, selecciona el color y usa Ctrl + D para seleccionar todas las ocurrencias y cambiarlas simultáneamente.
Experimenta con Fuentes y Tamaños: Además de los colores, puedes crear variables para el tamaño y el peso de las fuentes si deseas más personalización.
Prueba y Ajusta: Guarda los cambios y revisa cómo se ve tu página. No dudes en ajustar los colores y otros estilos hasta que estés satisfecho con el resultado.

Espero que esto te ayude a avanzar en tu proyecto. ¡Bons estudios!