✅ 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><htmllang="es"><head><metacharset="UTF-8"><title>Mi Card de Presentación</title><linkrel="stylesheet"href="styles.css"></head><body><divclass="card"><imgsrc="Logo.jpg"alt="Antonio Flores"class="avatar"><h1>Tu Nombre</h1><pclass="desc">Diseñador UX/UI</p><divclass="links"><ahref="https://linkedin.com/tuperfil"target="_blank">LinkedIn</a><ahref="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: 08px24pxrgba(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: 8px0;
}
.desc {
color: #666;
font-size: 14px;
margin-bottom: 20px;
}
.linksa:nth-child(1) {
display: inline-block;
margin: 010px;
padding: 8px16px;
background-color: #0B65C2;
color: white;
text-decoration: none;
border-radius: 8px;
transition: background-color 0.3s ease;
}
.linksa:nth-child(2) {
display: inline-block;
margin: 010px;
padding: 8px16px;
background-color: #232323;
color: white;
text-decoration: none;
border-radius: 8px;
transition: background-color 0.3s ease;
}
.linksa: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.
