Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

09 Desafío: personalizando el proyecto con hover

Referente al curso HTML y CSS: header, footer y variables CSS, en el capítulo Creando iconos clicables y actividad Desafío: personalizando el proyecto con hover

por Diego Andres Acosta Acuña
| 37.5k xp | 36 posts
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
* {
    padding: 0;
    margin:0;
}

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

.titulo-destaque {
    color: #22D4FD; ;
}

.presentacion {
    display: flex;
    align-items: center;
    margin: 10% 15%;
    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;
}
.prensentacion__enlace__subtitulo{
font-family: 'krona One', sans serif;
font-size: 24px;
font-weight:  400px;
}
.presentacion__enlace{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 32px; 
}
.presentaion__enlace_links{
    width: 378px;
    text-align: center;
    padding: 21.5px 0 ;
    border-radius: 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 600px;
    text-decoration:none;
    color: #F6F6F6;
    border:2px solid #22D4FD;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.presentaion__enlace_links:hover{
background-color: #272722;
}

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

1 respuesta
por Brenda Souza
| 5098.2k xp | 18409 posts
Instructor Scuba

Hola Diego, espero que estés bien

Parece que ya has comenzado a implementar el efecto hover en tus enlaces. Veo que al pasar el cursor sobre los enlaces, el fondo cambia de color. Aquí tienes algunas ideas adicionales para personalizar aún más tu proyecto usando el hover:

  1. Cambiar el color del texto:

    .presentaion__enlace_links:hover {
    background-color: #272722;
    color: #22D4FD; /* Cambia el color del texto al pasar el cursor */
}

  2. Agregar una sombra:

    .presentaion__enlace_links:hover {
    background-color: #272722;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Añade una sombra */
}

  3. Aumentar el tamaño del texto:

    .presentaion__enlace_links:hover {
    background-color: #272722;
    font-size: 26px; /* Aumenta el tamaño del texto */
}

  4. Animación de transición suave: Asegúrate de que los cambios sean suaves añadiendo una transición:

    .presentaion__enlace_links {
    transition: all 0.3s ease;
}

Prueba estas sugerencias y ajusta los valores según tu preferencia. ¡Diviértete personalizando tu proyecto!

Espero haber ayudado y buenos estudios!