Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

LO QUE APRENDIMOS EN EL AULA VIRTUAL

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

:root { --color-primario:#000000; --color-secundario:#F6F6F6; --color-terciario: #22D4FD;/ESTO ES UNA VARIABLE CSS para color/ --color-cuarto: #272727; --fuente-monserrat: "Montserrat", sans-serif; --fuente-Krona: "Krona One", sans-serif;/ESTO ES UNA VARIABLE CSS fuente (fon-family)/

}

*{ 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-monserrat); font-size: 1.5rem; font-weight: 600px; color: var(--color-terciario); text-decoration: none;

}

.presentación { display:flex; align-items: center; padding: 6% 15%; justify-content: space-between; gap: 82px; } .presentación__contenido{ width: 50%; display: flex; flex-direction: column; gap: 40px;

} .presentación__contenido__titulo { font-size: 2.25rem; font-family: var(--fuente-Krona); } .titulo-destaque{ color: var(--color-terciario); }

.presentación__contenido__texto { font-family: var(--fuente-monserrat); font-size: 1.5rem; } .presentacion__enlaces { display:flex; justify-content: space-between; flex-direction: column; align-items: center; gap: 32px; } .presentacion__enlaces__subtitulo { font-family: var(--fuente-Krona); font-size: 1.5rem; font-weight: 400; } .presentacion__enlaces__link { width: 50%;

text-align: center;
padding:21.5px 0;
border-radius: 8px;
font-family: var(--fuente-monserrat);
font-size: 1.5rem;
font-weight: 600px;
text-decoration:none ;
color:var(--color-secundario);
border: 2px solid var(--color-terciario);
display:flex;
justify-content: center; 
gap: 10px;

} .presentacion__enlaces__link:hover { background-color: var(--color-cuarto); } .presentacion__imagen { width: 50%; } .footer{ background-color: var(--color-terciario); padding: 23.64px; text-align: center; color: var(--color-primario); font-family: var(--fuente-monserrat); font-size: 1.5rem; font-weight: 400; } .presentacion__contenido__lista { font-size: 1.5rem; font-weight: 400; }

@media (max-width:1200px ){ .header { padding: 10% } .header__menu{ justify-content:center; } .presentación{ flex-direction:column-reverse; /sitio web se ajuste automáticamente a la pantalla/ padding: 5% } .presentación__contenido { width: auto; } }

1 respuesta

Hola Wilian, espero que estés bien

Gracias por compartir tu ejercício práctico con nosotros! Tu contribución es fundamental para el crecimiento de nuestra comunidad en Alura. Sigue comprometido y no dudes en regresar al foro en caso que tengas alguna duda o dificultad.

¡Abrazos y buenos estudios!

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