✅ Paso 1: Estructura en HTML
Construyes la estructura básica de la card: imagen, nombre, descripción y botones. Todo dentro de un contenedor principal.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Card de Presentación</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card">
<img src="Logo.jpg" alt="Antonio Flores" class="avatar">
<h1>Tu Nombre</h1>
<p class="desc">Diseñador UX/UI</p>
<div class="links">
<a href="https://linkedin.com/tuperfil" target="_blank">LinkedIn</a>
<a href="https://ginstagram.com/tuperfil" target="_blank">Instagram</a>
</div>
</div>
</body>
</html>
Tip: Usa una imagen cuadrada como “foto.jpg” para mejores resultados visuales.
✅ Paso 2: Estilo general en CSS
Estilizas la card: fondo blanco, sombras suaves, borde redondeado, tipografía centrada y una estética limpia y moderna.
body {
background-color: #e0e0e0;
font-family: 'Segoe UI', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.card {
background: #fff;
border-radius: 16px;
padding: 30px;
max-width: 320px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
text-align: center;
}
Tip: Usa max-width para que la card sea responsiva y no se estire demasiado.
🖼️ Paso 3: Dale vida al contenido
Aplicas estilo a la imagen, el nombre, la descripción y los botones de enlace.
.avatar {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
margin-bottom: 16px;
}
h1 {
font-size: 22px;
margin: 8px 0;
}
.desc {
color: #666;
font-size: 14px;
margin-bottom: 20px;
}
.links a:nth-child(1) {
display: inline-block;
margin: 0 10px;
padding: 8px 16px;
background-color: #0B65C2;
color: white;
text-decoration: none;
border-radius: 8px;
transition: background-color 0.3s ease;
}
.links a:nth-child(2) {
display: inline-block;
margin: 0 10px;
padding: 8px 16px;
background-color: #232323;
color: white;
text-decoration: none;
border-radius: 8px;
transition: background-color 0.3s ease;
}
.links a:hover{
background-color: #004182;
}
Tip: Usa object-fit: cover para que la imagen se recorte de forma estética en el círculo.
🚀 Paso 4: Visualiza y ajusta
Abres el archivo .html en tu navegador y ves la card centrada en pantalla. Pasa el mouse por los enlaces para ver el efecto hover.
