Bootstrap
Profil
Image
Galerie
Html
Carte Bootstrap de profil utilisateur enrichie avec galerie d'images, statistiques et interactions.
<!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>Profil avec Images | 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;
font-family: 'Segoe UI', sans-serif;
padding: 50px 0;
}
.custom-card {
border: none;
border-radius: 20px;
overflow: hidden;
background: #fff;
transition: all 0.3s ease;
height: 100%;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.custom-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}
/* Image Container */
.card-img-container {
height: 160px;
overflow: hidden;
position: relative;
}
.card-img-top {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.custom-card:hover .card-img-top {
transform: scale(1.1);
}
/* Content */
.card-body {
padding: 1.5rem;
}
.card-category {
font-size: 0.7rem;
text-transform: uppercase;
font-weight: 800;
color: #4e73df;
letter-spacing: 1.5px;
margin-bottom: 8px;
display: block;
}
.card-main-title {
font-size: 1.2rem;
font-weight: 700;
color: #2d3436;
margin-bottom: 15px;
}
/* Badge d'état */
.badge-state {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 10px;
font-size: 0.75rem;
font-weight: 700;
background: #f8f9fa;
}
.state-active {
color: #27ae60;
background: #eafaf1;
}
.state-type {
color: #8e44ad;
background: #f5eef8;
}
.state-sub {
color: #f39c12;
background: #fef9e7;
}
/* Accessibilité Focus */
.custom-card:focus-within {
outline: 3px solid #4e73df;
outline-offset: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!-- CARD 1: MON COMPTE -->
<div class="col-md-4 mb-4">
<article class="custom-card shadow-sm" aria-labelledby="acc-title">
<div class="card-img-container">
<img
src="public/mosquee.jpeg"
class="card-img-top"
alt="Photo de profil de l'utilisateur"
/>
</div>
<div class="card-body">
<span class="card-category">Gestion Profil</span>
<h2 id="acc-title" class="card-main-title">Jean-Michel Durand</h2>
<div class="badge-state state-active">
<i class="fas fa-check-circle mr-2"></i>
Compte Actif
</div>
</div>
</article>
</div>
<!-- CARD 2: MA STRUCTURE -->
<div class="col-md-4 mb-4">
<article class="custom-card shadow-sm" aria-labelledby="struct-title">
<div class="card-img-container">
<img src="public/mosquee.jpeg" class="card-img-top" alt="Bureaux de l'entreprise" />
</div>
<div class="card-body">
<span class="card-category">Organisation</span>
<h2 id="struct-title" class="card-main-title">Global Tech Solutions</h2>
<div class="badge-state state-type">
<i class="fas fa-building mr-2"></i>
SAS au capital de 50k€
</div>
</div>
</article>
</div>
<!-- CARD 3: MON ABONNEMENT -->
<div class="col-md-4 mb-4">
<article class="custom-card shadow-sm" aria-labelledby="sub-title">
<div class="card-img-container">
<img src="public/mosquee.jpeg" class="card-img-top" alt="Représentation du pack premium" />
</div>
<div class="card-body">
<span class="card-category">Services</span>
<h2 id="sub-title" class="card-main-title">Pack Premium Pro</h2>
<div class="badge-state state-sub">
<i class="fas fa-gem mr-2"></i>
Renouvellement : 12/2024
</div>
</div>
</article>
</div>
</div>
</div>
</body>
</html>