Prueba vcard
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VCard - Cristopher Aguilera</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Importa la fuente 'Inter' de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
/* Definición de variables CSS para colores y sombras */
:root {
--primary-blue: #1D7Dbe;
--primary-green: #c5d939;
--dark-bg: #1a1c23;
--card-bg: #FFFFFF;
--text-dark: #2B2D35;
--text-light: #555;
--shadow-light: rgba(0, 0, 0, 0.1);
--shadow-dark: rgba(0, 0, 0, 0.6);
}
/* Estilos generales del cuerpo de la página */
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, var(--dark-bg) 0%, #000 100%);
color: var(--text-dark);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
/* Estilos del contenedor principal de la tarjeta (VCard) */
.vcard-container {
width: 380px;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 25px 50px -12px var(--shadow-dark);
transition: transform 0.3s ease, box-shadow 0.3s ease;
background-color: var(--card-bg);
}
/* Efecto al pasar el cursor sobre el contenedor */
.vcard-container:hover {
transform: translateY(-5px);
box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.8);
}
/* Sección del encabezado de la tarjeta */
.header-section {
background: linear-gradient(to right, var(--primary-blue) 0%, #1768a3 100%);
padding: 25px 0 80px 0;
position: relative;
text-align: center;
}
/* Estilos para el logo de la compañía en la esquina superior derecha */
.company-logo {
position: absolute;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background: var(--card-bg);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: var(--primary-blue);
box-shadow: 0 4px 6px var(--shadow-light);
}
/* Estilos de la imagen de perfil - SIN MARCO NI BORDES */
.profile-image {
width: 170px;
height: 170px;
object-fit: cover;
border-radius: 50%;
position: absolute;
bottom: -80px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
/* Sección del contenido principal de la tarjeta */
.content-section {
background-color: var(--card-bg);
padding: 90px 25px 25px 25px;
position: relative;
}
/* Elemento decorativo en la esquina superior izquierda */
.corner-element {
position: absolute;
top: 15px;
left: 15px;
width: 30px;
height: 30px;
border-top: 2px solid var(--primary-green);
border-left: 2px solid var(--primary-green);
}
/* Estilos para los botones de contacto circulares */
.contact-button {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid var(--text-dark);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--card-bg);
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
color: var(--text-dark);
}
/* Efecto al pasar el cursor sobre los botones de contacto */
.contact-button:hover {
transform: translateY(-3px) scale(1.05);
background-color: var(--primary-blue);
color: white;
border-color: var(--primary-blue);
box-shadow: 0 8px 15px rgba(29, 125, 190, 0.3);
}
/* Estilos para el botón de acción principal ("Guardar contacto") */
.action-button {
background: linear-gradient(to right, var(--primary-blue) 0%, #1768a3 100%);
color: white;
border-radius: 12px;
padding: 12px 24px;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
display: block;
width: 100%;
text-align: center;
box-shadow: 0 4px 6px rgba(43, 45, 53, 0.2);
}
/* Efecto al pasar el cursor sobre el botón de acción */
.action-button:hover {
background: linear-gradient(to right, var(--primary-green) 0%, #add32c 100%);
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(197, 217, 57, 0.4);
}
/* Estilos para cada elemento de información (teléfono, correo, etc.) */
.info-item {
display: flex;
align-items: center;
margin-bottom: 15px;
padding: 10px;
border-radius: 10px;
transition: background-color 0.2s;
color: var(--text-dark);
}
/* Efecto de fondo al pasar el cursor sobre un elemento de información */
.info-item:hover {
background-color: #f8f9fa;
}
/* Estilos para la línea divisoria */
.divider {
height: 1px;
background: linear-gradient(to right, transparent 0%, #E8E8E8 50%, transparent 100%);
margin: 20px 0;
}
/* Sección del código QR */
.qr-section {
background-color: #f8f9fa;
border-radius: 12px;
padding: 15px;
text-align: center;
position: relative;
}
/* Overlay para QR expandible */
.qr-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.98);
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 20;
padding: 25px;
}
.qr-overlay.active {
opacity: 1;
visibility: visible;
}
.qr-overlay img {
width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
transition: transform 0.3s ease;
max-width: 100%;
}
/* Estilos para el recuadro corporativo con el nombre de la empresa */
.corporate-highlight {
background: linear-gradient(to right, rgba(29, 125, 190, 0.1) 0%, rgba(197, 217, 57, 0.1) 100%);
border-left: 4px solid var(--primary-green);
padding: 12px 15px;
border-radius: 0 8px 8px 0;
margin: 20px 0;
color: var(--text-dark);
}
/* Clases de utilidad para colores basados en variables CSS */
.text-primary-blue { color: var(--primary-blue); }
.bg-primary-blue { background-color: var(--primary-blue); }
.border-primary-blue { border-color: var(--primary-blue); }
.text-primary-green { color: var(--primary-green); }
.bg-primary-green { background-color: var(--primary-green); }
.border-primary-green { border-color: var(--primary-green); }
</style>
</head>
<body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1>
<div class="vcard-container">
<div class="header-section">
<div class="company-logo">
<i class="fas fa-microscope"></i>
</div>
<img src="https://newpath.cl/wp-content/uploads/FPcris.png" alt="Profile" class="profile-image">
</div>
<div class="content-section">
<div class="corner-element"></div>
<h1 class="text-2xl font-bold text-center mb-1">Cristopher Aguilera</h1>
<p class="text-lg text-center text-gray-600 mb-2">Técnico en Informática</p>
<div class="corporate-highlight">
<div class="flex items-center justify-center">
<i class="fas fa-building text-primary-blue mr-2"></i>
<p class="font-semibold">Newpath Chile</p>
</div>
<p class="text-sm text-center text-gray-600 mt-1">Industria de Anatomía Patológica</p>
</div>
<!-- CÍRCULOS DE ACCESO RÁPIDO REDUCIDOS (sin guardar contacto) -->
<div class="flex justify-center space-x-4 mb-6">
<a href="tel:+56942452724" class="contact-button">
<i class="fa-solid fa-phone text-lg"></i>
</a>
<a href="https://wa.me/56942452724?text=Hola, vengo de tu vCard" class="contact-button">
<i class="fa-brands fa-whatsapp text-xl"></i>
</a>
<a href="mailto:cristopher.aguilera@newpath.cl" class="contact-button">
<i class="fa-solid fa-envelope text-xl"></i>
</a>
<a href="https://www.linkedin.com/company/newpath-chile?originalSubdomain=cl" class="contact-button">
<i class="fa-brands fa-linkedin text-xl"></i>
</a>
</div>
<div class="space-y-3 mb-6">
<div class="info-item">
<i class="fa-solid fa-phone w-5 mr-3 text-primary-blue"></i>
<span>+56 942452724</span>
</div>
<div class="info-item">
<i class="fa-solid fa-envelope w-5 mr-3 text-primary-blue"></i>
<span>cristopher.aguilera@newpath.cl</span>
</div>
<div class="info-item">
<i class="fa-solid fa-location-dot w-5 mr-3 text-primary-blue"></i>
<a href="https://www.google.com/maps/search/?api=1&query=Patria%20Vieja%20%23418%2C%20Recoleta%2C%20Santiago" target="_blank" class="text-gray-600 hover:text-primary-blue">
<span>Patria Vieja #418, Recoleta, Santiago</span>
</a>
</div>
<div class="info-item">
<i class="fa-brands fa-linkedin w-5 mr-3 text-primary-blue"></i>
<span>/in/Newpath Chile</span>
</div>
</div>
<div class="divider"></div>
<!-- QR EXPANDIBLE -->
<div class="qr-section mb-6">
<img id="qr-image" src="https://newpath.cl/wp-content/uploads/qr_contacto.png" alt="QR Code para guardar contacto" class="mx-auto mb-2 w-36 cursor-pointer">
<p class="text-xs text-gray-500">Toca el código para ampliar</p>
<div id="qr-overlay" class="qr-overlay">
<img src="https://newpath.cl/wp-content/uploads/qr_contacto.png" alt="QR ampliado" />
</div>
</div>
<!-- BOTÓN FINAL CAMBIADO A "GUARDAR CONTACTO" -->
<a href="https://newpath.cl/wp-content/uploads/contacto.vcf" class="action-button" download="Cristopher_Aguilera.vcf">
<i class="fas fa-address-card mr-2"></i> Guardar contacto
</a>
</div>
</div>
<!-- SCRIPT PARA QR EXPANDIBLE -->
<script>
const qrImg = document.getElementById('qr-image');
const qrOverlay = document.getElementById('qr-overlay');
qrImg.addEventListener('click', () => qrOverlay.classList.add('active'));
qrOverlay.addEventListener('click', e => {
if (e.target === qrOverlay) qrOverlay.classList.remove('active');
});
</script>
</body>
</html>
