Créer une carte de profil moderne en HTML et CSS (responsive et réutilisable)

Les cartes de profil sont devenues un élément central du web moderne. On les retrouve aussi bien sur les portfolios de développeurs que sur les pages “Notre équipe”, les fiches auteur ou les présentations de collaborateurs. Bien conçues, elles permettent de présenter une personne de manière claire, élégante et professionnelle, sans surcharger la page.

Dans cet article, nous allons créer pas à pas une carte de profil moderne en HTML et CSS, avec un rendu propre, lisible et entièrement responsive.
Aucun framework ne sera utilisé : chaque étape est expliquée de manière progressive afin que le composant soit facile à comprendre, à modifier et à réutiliser dans différents projets web.

Aperçu de ce que nous allons construire

Le composant final prendra la forme suivante :

une carte blanche centrée sur la page,
une photo de profil ronde avec une bordure discrète,
un nom clairement identifiable,
un rôle ou une spécialité mis en valeur par la couleur,
une courte description,
des liens vers les réseaux professionnels,
et un léger effet au survol pour améliorer l’expérience utilisateur.

Structure HTML de la carte de profil

Avant de travailler sur le style, il est essentiel de poser une structure HTML claire et sémantique.
Chaque partie de la carte a un rôle précis :

le conteneur principal (.profile-card),
la zone de l’image,
le contenu textuel,
les liens vers les réseaux sociaux.

Voici la structure HTML complète :

&lt;p class="profile-bio">
  Courte description présentant le profil, les compétences principales
  et le type de projets réalisés.
&lt;/p>

&lt;div class="profile-socials">
  &lt;a href="#" aria-label="Profil GitHub">GH&lt;/a>
  &lt;a href="#" aria-label="Profil LinkedIn">IN&lt;/a>
  &lt;a href="#" aria-label="Profil Twitter/X">X&lt;/a>
&lt;/div>

Explication des différentes sections

Image de profil
L’image est placée dans un conteneur dédié afin de pouvoir gérer facilement l’arrondi et le centrage via CSS. L’attribut alt est indispensable pour l’accessibilité.
Nom et rôle
Le nom est affiché dans un titre (h2) afin de conserver une hiérarchie logique. Le rôle est séparé dans un paragraphe, ce qui permet de le styliser indépendamment.
Bio
La description doit rester concise. Elle sert à donner du contexte sans alourdir la lecture.
Réseaux sociaux
Les liens sont volontairement simples. Les attributs aria-label permettent de rendre ces liens compréhensibles pour les lecteurs d’écran.

Styliser la carte avec CSS

L’objectif du CSS est de produire un rendu :

moderne et professionnel,
lisible sur tous les écrans,
agréable à utiliser, sans effets excessifs.

body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #f4f4f7;
min-height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
padding: 24px;
box-sizing: border-box;
}

.profile-card {
background: #ffffff;
max-width: 360px;
width: 100%;
padding: 24px 24px 20px;
border-radius: 18px;
box-shadow:
0 10px 30px rgba(15, 23, 42, 0.10),
0 4px 10px rgba(15, 23, 42, 0.05);
text-align: center;
transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}

.profile-card:hover {
transform: translateY(-4px);
box-shadow:
0 14px 40px rgba(15, 23, 42, 0.16),
0 6px 16px rgba(15, 23, 42, 0.08);
}

.profile-image {
width: 104px;
height: 104px;
margin: 0 auto 16px;
border-radius: 50%;
overflow: hidden;
border: 3px solid #e5e7eb;
}

.profile-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.profile-name {
font-size: 1.4rem;
margin: 4px 0;
color: #111827;
}

.profile-role {
font-size: 0.95rem;
color: #6366f1;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 10px;
}

.profile-bio {
font-size: 0.95rem;
line-height: 1.5;
color: #4b5563;
margin-bottom: 18px;
}

.profile-socials {
display: flex;
justify-content: center;
gap: 10px;
}

.profile-socials a {
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid #e5e7eb;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 0.8rem;
font-weight: 600;
color: #4b5563;
background: #f9fafb;
text-decoration: none;
transition: background 0.16s ease, color 0.16s ease, transform 0.12s ease;
}

.profile-socials a:hover {
background: #6366f1;
color: #ffffff;
transform: translateY(-1px);
}

Propriétés importantes à retenir

border-radius : crée l’aspect arrondi (carte et image).
box-shadow : apporte de la profondeur sans surcharge visuelle.
transition : améliore la fluidité des interactions.
object-fit: cover : garantit un affichage correct des images.

Rendre la carte responsive

La carte est déjà flexible grâce à max-width et width: 100%.
Pour améliorer le confort sur les petits écrans, on peut affiner certains éléments via une media query :

@media (max-width: 480px) {
body {
padding: 16px;
align-items: flex-start;
}

.profile-card {
padding: 18px 16px;
}

.profile-name {
font-size: 1.25rem;
}

.profile-bio {
font-size: 0.92rem;
}
}

Cette carte constitue une base solide que tu peux adapter facilement :