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 aula

@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", sans-serif;

}

*{ padding: 0; margin:0; }

body{ background-color: var(--color-primario); color:var(--color-secundario); font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-size: 36px; /text-align:center;/ /* height: 100vh;*/ box-sizing: border-box;

.texto-en-caja{
    background-color: rgb(9, 63, 82);
    pading: 15px 30px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0,0,0,3);   
}
}
span{
    color: #22D4FD;
    border: 10px solid #26f10c;
    padding: 10px;

}

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

/espacio desde el obrde superior hasta el primer texto/ .header{ padding: 2% 0% 0% 15%; } .header__menu{ display: flex; gap:80px; /gap: 20px;/ } .header__menu__link{ /gap:20px;/ font-family:var(--fuente-montserrat); font-size: 1.5rem; font-weight: 600; padding:10px; background-color: #22D4FD; border: solid black; border-width: 2px; text-decoration: none; color: var(--color-secundario) } .header__menu__link:hover{

transition: transform 1s ease;
background-color: #28464d;
color: #22D4FD;
transform: scale(1.5px);
cursor:pointer;
border: dashed beige;

}

.presentacion{ display:flex; align-items: center; padding: 5% 15%; 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(--fuente-krona); }

.presentacion__contenido__texto{ font-size: 1.5rem; font-family:var(--fuente-montserrat); }

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

.miimagen{ width:50%; }

.presentacion__enlaces__link{ width: 50%; background-color:var(--color-primario); text-align: center; padding: 21.5px 0; border-radius: 8px; font-family:var(--fuente-montserrat); font-size: 1.5rem; font-weight: 600; text-decoration: none; color:var(--color-secundario); border: 5px solid var(--color-terciario); display: flex; justify-content: center; gap:10px; transition: transform 1s ease; cursor: pointer; }

.presentacion__enlaces__link:hover{ background-color:var(--color-hover); transform: scale(1.1); }

.presentacion__enlaces__link:active{ transform: scale(0.5); color: red; }

.presentacion__enlaces__subtitulos{ font-family:var(--fuente-krona); font-size:1.5rem; font-weight: 400; }

.footer{ font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; text-align: center; background-color:var(--color-terciario); color:salmon; border: 5px solid rgb(0, 0, 0); font-size: 40px; padding: 1.5rem; font-family: var(--fuente-montserrat); font-size: 1.5rem; font-weight: 400; }

@media(max-width:1200px){

.header{padding:10px;}
.header__menu{justify-content: center;}
.presentacion{flex-direction: column-reverse;}

}

1 respuesta

Hola Arturo, 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!