Bootstrap
Card
Profil
Utilisateur
Html
Template Bootstrap de carte profil utilisateur avec avatar, nom, rôle et informations de contact.
<!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 Utilisateur | 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>
:root {
--primary-color: #6a11cb;
--secondary-color: #2575fc;
--text-dark: #2c3e50;
--text-muted: #7f8c8d;
--bg-light: #f4f6f9;
}
body {
background-color: var(--bg-light);
font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
}
.profile-card {
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
overflow: hidden;
transition: all 0.3s ease;
}
.profile-header {
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
color: white;
padding: 20px;
text-align: center;
position: relative;
}
.profile-image {
width: 120px;
height: 120px;
border-radius: 50%;
border: 4px solid white;
object-fit: cover;
margin-bottom: 15px;
}
.profile-name {
font-weight: 700;
font-size: 1.2rem;
margin-bottom: 5px;
}
.profile-type {
font-size: 0.9rem;
opacity: 0.8;
margin-bottom: 15px;
}
.profile-details {
padding: 20px;
}
.profile-detail-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #f1f3f5;
}
.profile-detail-item:last-child {
border-bottom: none;
}
.detail-label {
color: var(--text-muted);
font-size: 0.85rem;
}
.detail-value {
color: var(--text-dark);
font-weight: 600;
text-align: right;
}
.status-badge {
padding: 5px 10px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
}
.status-active {
background-color: rgba(40, 167, 69, 0.1);
color: #28a745;
}
.status-inactive {
background-color: rgba(220, 53, 69, 0.1);
color: #dc3545;
}
@media (max-width: 768px) {
.profile-card {
margin: 15px;
}
}
</style>
</head>
<body>
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-md-6 col-lg-4">
<div class="profile-card">
<div class="profile-header">
<img src="public/avatar.png" alt="Profile Image" class="profile-image" />
<div class="profile-name">Jean Dupont</div>
<div class="profile-type">Utilisateur Senior</div>
<span class="status-badge status-active">Actif</span>
</div>
<div class="profile-details">
<div class="profile-detail-item">
<span class="detail-label">Civilité</span>
<span class="detail-value">M.</span>
</div>
<div class="profile-detail-item">
<span class="detail-label">Email</span>
<span class="detail-value">jean.dupont@example.com</span>
</div>
<div class="profile-detail-item">
<span class="detail-label">Téléphone</span>
<span class="detail-value">+33 6 12 34 56 78</span>
</div>
<div class="profile-detail-item">
<span class="detail-label">Rôle</span>
<span class="detail-value">Responsable IT</span>
</div>
<div class="profile-detail-item">
<span class="detail-label">Responsabilités</span>
<span class="detail-value">Gestion Technique</span>
</div>
<div class="profile-detail-item">
<span class="detail-label">Société</span>
<span class="detail-value">TechCorp Solutions</span>
</div>
<div class="profile-detail-item">
<span class="detail-label">Date de Création</span>
<span class="detail-value">2023-06-15</span>
</div>
<div class="profile-detail-item">
<span class="detail-label">Code Utilisateur</span>
<span class="detail-value">USR-8842</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>