Dans ce tutoriel, tu vas créer une carte de profil en HTML et CSS, moderne, responsive et réutilisable : photo ronde, nom, rôle, courte bio, compétences sous forme de badges et boutons d’action. Aucun framework : juste du HTML sémantique et du CSS propre, idéal pour un portfolio ou une page « Notre équipe ».

Niveau : débutantDurée : ~30 minHTML · CSSDémo en direct

Les cartes de profil sont devenues un élément central du web moderne, et savoir créer une carte de profil en HTML et CSS est une compétence très utile. 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 la carte de profil en HTML et CSS

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.
Photo de profil de LM-Code Sarah

LM-Code Sarah

Développeur Web

Je conçois des interfaces web modernes, accessibles et performantes, avec une attention particulière portée à la clarté et à l’expérience utilisateur.

HTML CSS Responsive UI
Portfolio Contact

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 :

<div class="profile-card">

  <div class="profile-header">
    <div class="profile-avatar">
      <img src="https://lm-code.be/wp-content/uploads/2025/01/cropped-lm-code-2.png" alt="Photo de profil de LM-Code Sarah">
    </div>

    <div class="profile-identity">
      <p class="profile-name">LM-Code Sarah</p>
      <p class="profile-role">Développeur Web</p>
    </div>
  </div>

  <p class="profile-bio">
    Je conçois des interfaces web modernes, accessibles et performantes, avec une attention particulière portée à la clarté et à l’expérience utilisateur.
  </p>

  <div class="profile-tags">
    <span class="tag">HTML</span>
    <span class="tag">CSS</span>
    <span class="tag">Responsive</span>
    <span class="tag">UI</span>
  </div>

  <div class="profile-actions">
    <a href="https://lm-code.be" class="btn btn-primary" aria-label="Voir le portfolio">Portfolio</a>
    <a href="https://lm-code.be" class="btn btn-ghost" aria-label="Contacter la personne">Contact</a>
  </div>

  <nav class="profile-socials">
    <a href="https://lm-code.be" class="social" aria-label="Profil GitHub">GH</a>
    <a href="https://lm-code.be" class="social" aria-label="Profil LinkedIn">IN</a>
    <a href="https://lm-code.be" class="social" aria-label="Profil Twitter/X">X</a>
  </nav>

</div>
index.html

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 de profil en HTML et 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);
}
style.css

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 de profil en HTML et CSS 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;
}
}
style.css

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

  • modifier les couleurs pour respecter une charte graphique,
  • remplacer les textes par des contenus réels,
  • intégrer des icônes SVG ou Font Awesome si nécessaire,
  • dupliquer le composant pour afficher plusieurs profils.

Il suffit de copier le bloc HTML et d’ajuster les contenus : aucune logique complexe n’est nécessaire.

Accessibilité de ta carte de profil en HTML et CSS

Quelques points essentiels à respecter :

  • utiliser un attribut alt descriptif pour l’image,
  • ajouter des aria-label explicites sur les liens,
  • conserver un contraste suffisant entre le texte et le fond,
  • éviter des tailles de texte trop petites, surtout sur mobile.

Ces bonnes pratiques améliorent à la fois l’accessibilité et la qualité globale du site.

Aller plus loin

FAQ : questions fréquentes

Faut-il Bootstrap pour créer cette carte de profil ?

Non, la carte de profil en HTML et CSS est réalisée sans aucun framework. Elle est donc légère et facile à intégrer dans n’importe quel site.

Comment afficher plusieurs cartes de profil ?

Duplique le bloc .profile-card dans un conteneur, puis utilise display: grid avec grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) pour une grille responsive.

Comment rendre la photo parfaitement ronde ?

Donne à l’image une largeur et une hauteur identiques, ajoute border-radius: 50% et object-fit: cover pour éviter toute déformation.

Puis-je utiliser cette carte dans WordPress ?

Oui : colle le HTML dans un bloc HTML personnalisé et le CSS dans Apparence > Personnaliser > CSS additionnel.

Bravo, ta carte de profil en HTML et CSS est prête à être réutilisée dans tous tes projets ! Une question ou une variante à partager ? Laisse un commentaire.

Tags:

Comments

No comments yet. Why don’t you start the discussion?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *