Bootstrap
Card
Profil
Abonnement
Html
Variante Bootstrap de carte de profil utilisateur avec plan d'abonnement et aperçu rapide des infos.
<!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>Aperçu Rapide - Profil & Abonnement | AngularForAll</title>
<!-- Bootstrap 4 & Font Awesome -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/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: #f8f9fc;
padding: 30px;
font-family: 'Inter', sans-serif;
color: #333;
}
/* Style général des cartes */
.compact-info-card {
border: none;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
height: 100%;
display: flex;
flex-direction: column;
background: #fff;
overflow: hidden; /* Pour les bords arrondis */
}
.compact-info-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.card-header-compact {
background-color: #fcfcfd;
border-bottom: 1px solid #e9ecef;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
}
.card-header-compact h3 {
font-size: 1rem;
font-weight: 700;
color: #4e73df;
margin: 0;
flex-grow: 1; /* Prend l'espace disponible */
}
.card-icon {
font-size: 1.2rem;
margin-right: 10px;
color: #6c757d;
}
.card-body-compact {
padding: 1.25rem;
flex-grow: 1;
}
.card-footer-compact {
padding: 0.75rem 1.25rem;
background-color: #fcfcfd;
border-top: 1px solid #e9ecef;
text-align: right;
border-radius: 0 0 12px 12px;
}
/* Contenu spécifique */
.profile-sm-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
object-fit: cover;
margin-right: 10px;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.main-info {
font-size: 1.1rem;
font-weight: 700;
color: #343a40;
margin-bottom: 5px;
}
.secondary-info {
font-size: 0.85rem;
color: #6c757d;
margin-bottom: 3px;
}
.status-badge-sm {
font-size: 0.75rem;
font-weight: 600;
padding: 0.3em 0.6em;
border-radius: 0.5rem;
display: inline-flex;
align-items: center;
}
.status-active {
background-color: #d4edda;
color: #28a745;
}
.status-pending {
background-color: #fff3cd;
color: #ffc107;
}
.status-expired {
background-color: #f8d7da;
color: #dc3545;
}
.btn-view-details {
font-size: 0.8rem;
padding: 6px 12px;
border-radius: 6px;
background-color: #4e73df;
color: #fff;
border: none;
transition: background-color 0.2s;
}
.btn-view-details:hover {
background-color: #2e59d9;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!-- CARD: Mon compte -->
<div class="col-lg-4 col-md-6 mb-4">
<div class="compact-info-card">
<div class="card-header-compact">
<i class="card-icon fas fa-user-circle"></i>
<h3>Mon compte</h3>
</div>
<div class="card-body-compact d-flex align-items-center">
<img src="public/avatar.png" class="profile-sm-avatar" alt="Avatar Utilisateur" />
<div>
<div class="main-info">Jean Dupont</div>
<div class="secondary-info">Administrateur - Gestionnaire</div>
<div class="secondary-info text-muted">ID: #USR-001</div>
</div>
</div>
<div class="card-footer-compact">
<a href="#" class="btn btn-view-details">
Profil
<i class="fas fa-arrow-right ml-1"></i>
</a>
</div>
</div>
</div>
<!-- CARD: Ma structure -->
<div class="col-lg-4 col-md-6 mb-4">
<div class="compact-info-card">
<div class="card-header-compact">
<i class="card-icon fas fa-building" style="color: #20c997"></i>
<h3>Ma structure</h3>
</div>
<div class="card-body-compact">
<div class="main-info">Tech Innov SARL</div>
<div class="secondary-info">Entreprise - IT & Logiciels</div>
<div class="secondary-info text-muted">ID: #STR-005</div>
</div>
<div class="card-footer-compact">
<a href="#" class="btn btn-view-details">
Structure
<i class="fas fa-arrow-right ml-1"></i>
</a>
</div>
</div>
</div>
<!-- CARD: Mon abonnement -->
<div class="col-lg-4 col-md-12 mb-4">
<div class="compact-info-card">
<div class="card-header-compact">
<i class="card-icon fas fa-star" style="color: #f6c23e"></i>
<h3>Mon abonnement</h3>
</div>
<div class="card-body-compact">
<div class="main-info">Pack Premium Pro</div>
<div class="secondary-info">
Statut:
<span class="status-badge-sm status-active">Actif</span>
</div>
<div class="secondary-info">Renouvellement: 12/08/2024</div>
<div class="secondary-info text-muted">ID: #SUB-A3B4</div>
</div>
<div class="card-footer-compact">
<a href="#" class="btn btn-view-details">
Abonnement
<i class="fas fa-arrow-right ml-1"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>