M-binary
Tu cherches à donner une touche professionnelle à ton portfolio ou à ton site personnel ? La carte de profil est un excellent moyen de présenter ton identité, ton rôle, tes compétences et tes réseaux sociaux de manière concise et visuelle.
Dans cet article, tu trouveras le modèle complet d'une carte de profil moderne, responsive, esthétique et fonctionnelle. Elle utilise HTML, CSS et JavaScript pour afficher une présentation fluide et interactive, que tu peux facilement personnaliser.
Code HTML (structure de la carte)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Carte de Profil - Mukaz Josue</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="profile-card">
<div class="badge">
<i class="fas fa-award"></i>
</div>
<div class="avatar">
<img src="https://i.pravatar.cc/150?img=12" alt="Avatar">
</div>
<h2>Kathryn Murphy</h2>
<p class="bio">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>
<p class="subscribers"><strong>1534</strong> Subscribers</p>
<div class="tags">
<span>Fashion</span>
<span>Photography</span>
</div>
<button id="followBtn">Follow</button>
<div class="socials">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
<footer>
<small>Créé par Mukaz Josue - <a href="https://m-binary.com" target="_blank">m-binary.com</a> | M-corp</small>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>
Code CSS (design, couleurs et responsive)
Réalisé par Mukaz Josue | m-binary.com | M-corp
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #c8e100;
font-family: 'Segoe UI', sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 1rem;
}
.profile-card {
background: #2c2c2c;
color: white;
border-radius: 20px;
padding: 25px;
width: 100%;
max-width: 350px;
text-align: center;
box-shadow: 0 10px 25px rgba(0,0,0,0.4);
position: relative;
}
.badge {
position: absolute;
top: 20px;
right: 20px;
background: #1e1e1e;
padding: 10px;
border-radius: 50%;
box-shadow: 4px 4px 10px #1a1a1a, -4px -4px 10px #333;
}
.badge i {
color: gold;
font-size: 1.2rem;
}
.avatar {
width: 100px;
height: 100px;
margin: 0 auto 15px;
border-radius: 50%;
border: 4px solid #c8e100;
overflow: hidden;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
h2 {
font-size: 1.4rem;
margin-bottom: 10px;
}
.bio {
font-size: 0.9rem;
color: #ccc;
margin-bottom: 10px;
}
.subscribers {
font-size: 0.95rem;
margin-bottom: 15px;
color: #ccc;
}
.tags {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.tags span {
padding: 6px 12px;
font-size: 0.8rem;
background: #1f1f1f;
border-radius: 20px;
color: #ddd;
}
#followBtn {
background: #c8e100;
border: none;
color: #000;
padding: 10px 25px;
border-radius: 25px;
font-weight: bold;
font-size: 0.95rem;
cursor: pointer;
margin-bottom: 20px;
transition: 0.3s;
}
#followBtn:hover {
background: #b6cc00;
}
.socials {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 15px;
}
.socials a {
color: #c8e100;
font-size: 1.2rem;
transition: 0.2s;
}
.socials a:hover {
color: #ffffff;
}
footer {
font-size: 0.7rem;
color: #aaa;
}
footer a {
color: #c8e100;
text-decoration: none;
}
@media (max-width: 400px) {
.tags {
gap: 6px;
}
#followBtn {
width: 100%;
}
}
Code JavaScript (interactions dynamiques)
// Réalisé par Mukaz Josue | m-binary.com | M-corp
const followBtn = document.getElementById("followBtn");
followBtn.addEventListener("click", () => {
followBtn.textContent = followBtn.textContent === "Follow" ? "Following ✔" : "Follow";
});
Fonctionnalités incluses
• 🪪 Affichage du nom, poste et description
• 👤 Photo de profil intégrée avec design arrondi ou carré
• 📱 Icônes de réseaux sociaux cliquables (Twitter, LinkedIn, Instagram…)
• ⚙️ Responsive : s’adapte parfaitement aux écrans mobiles
• 💡 Possibilité d’ajouter un bouton "Contacter" ou "Télécharger le CV"
💬 Ce composant est idéal pour :
• Ton portfolio de développeur ou designer
• Une page "À propos de moi"
• Un bloc membre d’équipe dans un projet web
📦 Copie/colle les codes ci-dessus pour l’intégrer dans ton propre projet. Tu peux modifier les couleurs, les icônes, ou même ajouter des effets de survol plus poussés avec JavaScript ou CSS avancé
Merci d’avoir visité notre site et d’avoir pris le temps de lire cet article. N’oublie pas de consulter nos autres ressources HTML/CSS & JavaScript pour continuer à améliorer ton interface. Bonne création !