Bootstrap
Card
Profil
Professionnel
Html
Template Bootstrap de carte profil professionnel avec compétences, expérience et liens sociaux.
<!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 Professionnel | 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: #007bff;
--secondary-color: #6c757d;
--gradient-start: #667eea;
--gradient-end: #764ba2;
}
body {
background-color: #f4f7f6;
font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
}
.professional-profile-card {
border: none;
border-radius: 15px;
box-shadow:
0 15px 35px rgba(50, 50, 93, 0.1),
0 5px 15px rgba(0, 0, 0, 0.07);
overflow: hidden;
transition: all 0.3s ease;
}
.profile-header {
background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
color: white;
padding: 30px 20px;
text-align: center;
position: relative;
}
.profile-image-container {
position: relative;
display: flex;
justify-content: center;
margin-bottom: 15px;
}
.profile-image {
width: 150px;
height: 150px;
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, 0.2);
object-fit: cover;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.profile-status {
position: absolute;
bottom: 0;
right: 50%;
transform: translateX(50%);
}
.profile-name {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 10px;
}
.profile-type {
font-size: 1rem;
opacity: 0.8;
margin-bottom: 10px;
}
.profile-details {
background-color: white;
padding: 25px;
}
.profile-detail-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #f1f3f5;
}
.profile-detail-item:last-child {
border-bottom: none;
}
.detail-label {
color: #6c757d;
font-weight: 500;
font-size: 0.9rem;
}
.detail-value {
color: #2c3e50;
font-weight: 600;
text-align: right;
font-size: 0.95rem;
}
.status-badge {
padding: 5px 12px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
}
.status-active {
background-color: rgba(40, 167, 69, 0.1);
color: #28a745;
}
.status-inactive {
background-color: rgba(220, 53, 69, 0.1);
color: #dc3545;
}
.profile-actions {
background-color: #f8f9fa;
padding: 15px;
text-align: center;
}
.btn-profile-action {
margin: 0 10px;
border-radius: 25px;
padding: 10px 20px;
font-weight: 600;
}
@media (max-width: 768px) {
.professional-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="card professional-profile-card">
<div class="profile-header">
<div class="profile-image-container">
<img src="public/avatar.png" alt="Profile Image" class="profile-image" />
<div class="profile-status">
<span class="status-badge status-active">Actif</span>
</div>
</div>
<div class="profile-name">Jean-Marc Dupont</div>
<div class="profile-type">Directeur Technique</div>
</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">jm.dupont@entreprise.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">Stratégie Digitale</span>
</div>
<div class="profile-detail-item">
<span class="detail-label">Société</span>
<span class="detail-value">TechInnovate 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-PRO</span>
</div>
</div>
<div class="profile-actions">
<button class="btn btn-primary btn-profile-action">
<i class="fas fa-edit mr-2"></i>
Modifier
</button>
<button class="btn btn-outline-secondary btn-profile-action">
<i class="fas fa-print mr-2"></i>
Imprimer
</button>
</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>