<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heelyess Tahiri - Contact</title>
<style>
/* Reset rapide */
* { margin:0; padding:0; box-sizing:border-box; font-family:sans-serif; }
body {
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:#f9f9f9;
color:#111;
}
.card {
text-align:center;
padding:2rem;
max-width:360px;
width:90%;
background:#fff;
border-radius:16px;
box-shadow:0 8px 24px rgba(0,0,0,0.1);
}
.profile-pic {
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
margin:0 auto 1rem;
border:3px solid #4CAF50;
}
h1 {
font-size:1.5rem;
margin-bottom:0.25rem;
}
p.role {
font-size:1rem;
color:#555;
margin-bottom:1rem;
}
.contact-info {
display:flex;
flex-direction:column;
gap:0.5rem;
margin-bottom:1.5rem;
font-size:0.95rem;
}
.contact-info a {
text-decoration:none;
color:#4CAF50;
}
.btn {
display:inline-block;
background:#4CAF50;
color:#fff;
text-decoration:none;
padding:0.75rem 1.5rem;
border-radius:8px;
font-weight:600;
transition:0.3s;
}
.btn:hover {
background:#43a047;
}
@media (max-width:400px) {
.card { padding:1.5rem; }
.profile-pic { width:100px; height:100px; }
}
</style>
</head>
<body>
<div class="card">
<!-- Photo de profil -->
<img src="photo.jpg" alt="Heelyess Tahiri" class="profile-pic">
<!-- Nom / prénom -->
<h1>Heelyess Tahiri</h1>
<p class="role">Étudiant en physique</p>
<!-- Infos contact -->
<div class="contact-info">
<a href="tel:+33644138065">📞 +33 6 44 13 80 65</a>
<a href="mailto:contact@heelyess.com">✉ contact@heelyess.com</a>
</div>
<!-- Bouton vCard -->
<a href="contact.vcf" class="btn" download>Ajouter au contact</a>
</div>
</body>
</html>