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

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 Estudiante
| 31.1k xp | 23 posts

Imagen:

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

HTML y CSS:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio de Edward Ovares</title>
    <style>
        /* Contenedor de la sección */
        .presentacion {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 50px;
            background-color: #f5f5f5;
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
            text-align: center;
            max-width: 600px;
            margin: 50px auto;
        }

        /* Nombre elegante */
        .mi-nombre {
            font-family: 'Georgia', serif;
            font-size: 2.5em;
            color: #2c3e50;
            margin-bottom: 15px;
            transition: all 0.4s ease;
        }

        /* Hover en el nombre */
        .mi-nombre:hover {
            color: #2980b9;
            transform: scale(1.1);
            letter-spacing: 2px;
            cursor: default;
        }

        /* Descripción */
        .descripcion {
            font-size: 1.2em;
            color: #34495e;
            margin-bottom: 25px;
        }

        /* Enlace de LinkedIn */
        .mi-red {
            font-size: 1em;
            color: #2c3e50;
            text-decoration: none;
            border: 2px solid #2c3e50;
            padding: 10px 20px;
            border-radius: 8px;
            transition: all 0.4s ease;
        }

        /* Hover en enlace */
        .mi-red:hover {
            color: #ffffff;
            background-color: #2c3e50;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            transform: translateY(-3px);
        }
    </style>
</head>
<body>
    <section class="presentacion">
        <h1 class="mi-nombre">Edward Ovares</h1>
        <p class="descripcion">Soy desarrollador web, apasionado por crear experiencias limpias y funcionales.</p>
        <a href="https://linkedin.com/in/tu-perfil" class="mi-red" target="_blank">Conecta conmigo en LinkedIn</a>
    </section>
</body>
</html>
1 respuesta
por Brenda Souza
| 6077.4k xp | 22224 posts
Instructor

¡Hola Estudiante, espero que estés bien!

Parece que ya has hecho un gran trabajo personalizando el hover para el nombre y el enlace de LinkedIn. Si quieres seguir explorando, aquí tienes algunas ideas adicionales para personalizar el proyecto con hover:

  1. Descripción con Hover:
    Puedes añadir un efecto hover a la descripción para que cambie de color o se desplace ligeramente.

    .descripcion:hover {
    color: #2980b9;
    transform: translateY(-5px);
    transition: all 0.4s ease;
}

  2. Animación de Fondo:
    Agrega una animación al fondo de la sección cuando se pase el cursor.

    .presentacion:hover {
    background-color: #e0e0e0;
    transition: background-color 0.4s ease;
}

  3. Sombra en el Texto:
    Añade una sombra al texto del nombre para darle más profundidad al pasar el cursor.

    .mi-nombre:hover {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

Experimenta con estas ideas y ajusta los valores a tu gusto para encontrar el estilo que más te guste. ¡Espero que te diviertas personalizando tu proyecto!

Espero haber ayudado y buenos estudios!