Bootstrap
Profil
Structure
Layout
Html
Template Bootstrap de profil avec structure claire : en-tête, informations principales et sections détaillées.
<!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 & Structure | 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: #f4f7f9;
font-family:
'Segoe UI',
system-ui,
-apple-system,
sans-serif;
padding: 40px 0;
}
/* Card Styling */
.info-card {
border: none;
border-radius: 16px;
background: #fff;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.05);
}
/* Réactivité & Accessibilité (Focus) */
.info-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
.info-card:focus-within {
outline: 2px solid #4e73df;
outline-offset: 4px;
}
/* Icon Wrapper */
.icon-circle {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
margin-bottom: 1.25rem;
}
/* Content Styling */
.card-category {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #6c757d;
margin-bottom: 0.5rem;
}
.card-main-text {
font-size: 1.25rem;
font-weight: 800;
color: #1a1f36;
margin-bottom: 1rem;
}
/* Badge Custom */
.status-pill {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 50rem;
font-size: 0.8rem;
font-weight: 600;
}
.pill-success {
background: #e6fffa;
color: #047857;
}
.pill-info {
background: #eef2ff;
color: #4338ca;
}
.pill-primary {
background: #eff6ff;
color: #1d4ed8;
}
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!-- CARD 1: MON COMPTE -->
<div class="col-md-4 mb-4">
<article class="card info-card shadow-sm p-4" aria-labelledby="title-account">
<div class="icon-circle bg-light text-primary">
<i class="fas fa-user-circle" aria-hidden="true"></i>
</div>
<h2 id="title-account" class="card-category">Mon Compte</h2>
<div class="card-main-text">Jean-Baptiste Dupont</div>
<div>
<span class="status-pill pill-success">
<span class="dot bg-success"></span>
Compte Vérifié
</span>
</div>
</article>
</div>
<!-- CARD 2: MA STRUCTURE -->
<div class="col-md-4 mb-4">
<article class="card info-card shadow-sm p-4" aria-labelledby="title-structure">
<div class="icon-circle bg-light text-info">
<i class="fas fa-building" aria-hidden="true"></i>
</div>
<h2 id="title-structure" class="card-category">Ma Structure</h2>
<div class="card-main-text">Tech Innovate SARL</div>
<div>
<span class="status-pill pill-info">
<i class="fas fa-tag mr-2" style="font-size: 10px"></i>
Entité Juridique PME
</span>
</div>
</article>
</div>
<!-- CARD 3: MON ABONNEMENT -->
<div class="col-md-4 mb-4">
<article class="card info-card shadow-sm p-4" aria-labelledby="title-sub">
<div class="icon-circle bg-light text-warning">
<i class="fas fa-crown" aria-hidden="true"></i>
</div>
<h2 id="title-sub" class="card-category">Mon Abonnement</h2>
<div class="card-main-text">Pack Business Plus</div>
<div>
<span class="status-pill pill-primary">
<i class="fas fa-sync-alt mr-2" style="font-size: 10px"></i>
Renouvellement Actif
</span>
</div>
</article>
</div>
</div>
</div>
</body>
</html>