Imagen:
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>