Bootstrap
Dashboard
Profil
Avatar
Html
Interface Bootstrap de tableau de bord avec profils avatars multiples, stats et navigation latérale.
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dashboard Profil Avatars Amélioré | AngularForAll</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<style>
body {
background-color: #f0f2f5; /* Un arrière-plan légèrement plus doux */
font-family: 'Inter', sans-serif; /* Une police plus moderne si disponible, sinon Segoe UI */
padding: 40px 0;
color: #333;
}
.profile-card {
border: none;
border-radius: 12px; /* Coins un peu plus arrondis */
background: #fff;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transition plus douce */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Ombre plus douce et plus présente */
height: 100%;
display: flex; /* Assure que le contenu est bien aligné */
align-items: center; /* Centre verticalement le contenu */
padding: 1.25rem; /* Padding interne ajusté */
}
/* Réactivité au survol */
.profile-card:hover {
transform: translateY(-7px); /* Effet de soulèvement plus prononcé */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* Ombre plus intense au survol */
}
/* Style de l'Avatar / Image */
.avatar-container {
width: 55px; /* Taille légèrement réduite */
height: 55px;
min-width: 55px;
border-radius: 50%;
overflow: hidden;
border: 2px solid #e0e0e0; /* Bordure plus subtile */
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08); /* Ombre plus discrète */
margin-right: 15px; /* Espacement à droite */
flex-shrink: 0; /* Empêche l'avatar de rétrécir */
}
.avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Contenu textuel */
.card-content {
flex-grow: 1; /* Permet au contenu de prendre l'espace restant */
}
.card-category {
font-size: 0.7rem; /* Garde la taille petite pour la catégorie */
text-transform: uppercase;
font-weight: 600; /* Moins gras que 700, plus moderne */
color: #9297a7; /* Couleur légèrement plus foncée pour la catégorie */
letter-spacing: 0.7px; /* Espacement des lettres ajusté */
margin-bottom: 3px; /* Espacement ajusté */
}
.card-main-name {
font-size: 1.05rem; /* Légèrement plus grand pour le nom principal */
font-weight: 700;
color: #343a40; /* Couleur de texte plus sombre et contrastée */
margin-bottom: 6px; /* Espacement ajusté */
line-height: 1.3; /* Hauteur de ligne pour une meilleure lisibilité */
}
/* Badges d'état */
.status-indicator {
font-size: 0.78rem; /* Taille légèrement augmentée pour la lisibilité */
font-weight: 600;
display: inline-flex;
align-items: center;
color: #6c757d; /* Couleur de texte par défaut pour le statut */
}
.dot {
height: 7px; /* Taille du point ajustée */
width: 7px;
border-radius: 50%;
display: inline-block;
margin-right: 7px;
flex-shrink: 0; /* Empêche le point de rétrécir */
}
/* Couleurs des indicateurs de statut */
.status-indicator.text-success .dot {
background-color: #28a745;
}
.status-indicator.text-info .dot {
background-color: #17a2b8;
}
.status-indicator.text-warning .dot {
background-color: #ffc107;
}
/* Accessibilité focus */
.profile-card:focus-within {
outline: 3px solid #6c757d; /* Couleur et épaisseur de l'outline */
outline-offset: 5px; /* Décalage pour ne pas masquer le coin */
border-radius: 12px; /* Assure que l'outline suit la forme */
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!-- CARD 1: MON COMPTE -->
<div class="col-lg-4 col-md-6 mb-4">
<article class="profile-card" aria-labelledby="acc-name">
<div class="avatar-container">
<img src="public/avatar.png" class="avatar-img" alt="Avatar de Jean-Baptiste" />
</div>
<div class="card-content">
<div class="card-category">Mon Compte</div>
<div id="acc-name" class="card-main-name">Jean-Baptiste Dupont</div>
<div class="status-indicator text-success">
<span class="dot"></span>
Profil Vérifié
</div>
</div>
</article>
</div>
<!-- CARD 2: MA STRUCTURE -->
<div class="col-lg-4 col-md-6 mb-4">
<article class="profile-card" aria-labelledby="struct-name">
<div class="avatar-container">
<img src="public/logo.png" class="avatar-img" alt="Logo de l'entreprise" />
</div>
<div class="card-content">
<div class="card-category">Ma Structure</div>
<div id="struct-name" class="card-main-name">Tech Innovate SARL</div>
<div class="status-indicator text-info">
<span class="dot"></span>
Entité : PME
</div>
</div>
</article>
</div>
<!-- CARD 3: MON ABONNEMENT -->
<div class="col-lg-4 col-md-12 mb-4">
<article class="profile-card" aria-labelledby="sub-name">
<div class="avatar-container">
<img src="public/logo.png" class="avatar-img" alt="Icône abonnement" />
</div>
<div class="card-content">
<div class="card-category">Mon Abonnement</div>
<div id="sub-name" class="card-main-name">Premium Gold Pack</div>
<div class="status-indicator text-warning">
<span class="dot"></span>
État : Actif
</div>
</div>
</article>
</div>
</div>
</div>
</body>
</html>