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

Desafío: HOVER | Lenin

Este seria el hover que eh venido aplicando pero con algunas correciónes.

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

body {
    height: 100vh;
    box-sizing: border-box;
    background-color: #000000;
    color: #F6F6F6;
}

.titulo-destaque {
    color: orange; ;
}

strong {
    color: orange;
}

.presentacion {
    margin: 10% 18% ;
    display: flex;
    align-items: center;
    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;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.presentacion__enlaces__subtitulo{
    font-family: 'Krona One', sans-serif;
    font-weight: 400;
    font-size: 24px;
}

.presentacion__enlaces__link{
    border: 2px solid orange;
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #F6F6F6;
    font-family: 'Montserrat', sans-serif;
}

a {    
    font-family: 'Montserrat', sans-serif;
    border-radius: 16px;
    padding: 21.5px 0;
    width:280px;
    text-align: center;
    margin: 10px;
    color: rgb(0, 0, 0);
    /*Este codigo de aqui abajo lo que hace es eliminar 
    el subrayado de los enlaces*/
    text-decoration: none;    
    /*Este codigo es solo para añadir sombras*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /*este mide el tiempo entre cada transición*/
    transition: transform 0.5s ease;
}

/*Esta rregla solo se aplica cuando el cursor 
pasa por ensima*/

a:hover{
    color: orange;
    background-color: aliceblue;    
/*este hace que crezca*/
    transform: scale(1.05);
}

img{
    border-radius: 15px;
    margin-top: 50px;
    margin-bottom: 25px;
    width: 370px;   
}

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

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

1 respuesta

Hola Lenin, espero que estés bien.

Gracias por tu aporte, esperamos que disfrutes mucho del contenido del curso y que esto te ayude a llegar lejos.

Mucho éxito en todo lo que te propongas y si tienes alguna duda aquí estaremos para apoyarte.

Te recomiendo que puedes interactuar con el resto de nuestros compañero por nuestro Discord.

En virtud de que en Discord el alcance es mayor, la interacción es inmediata y llega a más compañeros y el foro solo quedaría para esclarecer cualquier duda que puedas tener sobre el contenido de los cursos.

De esa manera si tienes algún comentario, opinión, recomendación o algún consejo o si quiere compartir los desafíos sea por el Discord, con certeza por ahí llegará a más personas.

¡Un saludo!

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