Bootstrap 5
Template
Card Info
Detail
Connexion
Dashboard
Carte info connexion optimisée pour la visualisation et l'interaction. Design moderne et responsive.
<!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>Card Info Connexion Bootstrap 5 2026 04220332 | AngularForAll</title>
<!-- Bootstrap 5 + icônes Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
/* Style épuré Google : fond gris très clair, carte blanche, coins arrondis */
body {
background-color: #f1f3f4;
font-family: 'Google Sans', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
margin: 0;
padding: 0;
display: flex;
align-items: center;
min-height: 100vh;
}
.email-wrapper {
max-width: 680px;
margin: 32px auto;
width: 100%;
padding-left: 16px;
padding-right: 16px;
}
/* Carte principale : exactement comme une fiche Google (Gmail, Drive, etc.) */
.google-card {
background-color: #ffffff;
border-radius: 28px;
box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.05), 0 4px 12px 0 rgba(60, 64, 67, 0.08);
padding: 28px 32px 32px 32px;
border: 1px solid #e8eaed;
transition: box-shadow 0.2s ease;
}
/* En-tête Google-like : logo et texte */
.google-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
}
.google-logo {
display: flex;
align-items: center;
justify-content: center;
background: #1a73e8; /* bleu Google */
width: 36px;
height: 36px;
border-radius: 50%;
color: white;
font-size: 20px;
font-weight: 400;
}
.google-header-text {
font-size: 22px;
font-weight: 450;
color: #202124;
letter-spacing: -0.2px;
}
.google-header-text span {
font-weight: 300;
color: #5f6368;
}
/* Titre de section style Google */
.greeting {
font-size: 28px;
font-weight: 450;
color: #202124;
margin-bottom: 8px;
letter-spacing: -0.3px;
}
.sub-greeting {
color: #5f6368;
font-size: 15px;
font-weight: 400;
margin-bottom: 28px;
border-bottom: 1px solid #e8eaed;
padding-bottom: 20px;
}
/* Style des blocs d'information (comme dans les emails Google) */
.info-line {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 24px;
color: #202124;
}
.info-icon {
min-width: 40px;
height: 40px;
background: #e8f0fe;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #1a73e8;
font-size: 20px;
}
.info-content {
font-size: 15px;
line-height: 1.5;
}
.info-content strong {
font-weight: 500;
color: #202124;
}
.info-content .muted {
color: #5f6368;
}
/* Bouton principal (bleu Google) */
.btn-google {
background-color: #1a73e8;
border: none;
border-radius: 24px;
padding: 12px 28px;
font-weight: 500;
font-size: 15px;
color: white;
letter-spacing: 0.2px;
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.1), 0 1px 3px 1px rgba(60, 64, 67, 0.1);
transition: background 0.2s, box-shadow 0.2s;
display: inline-block;
text-decoration: none;
}
.btn-google:hover {
background-color: #1669d6;
box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.2), 0 4px 8px 3px rgba(60, 64, 67, 0.1);
color: white;
}
.btn-google i {
margin-right: 8px;
font-size: 16px;
}
.btn-outline-google {
background: transparent;
border: 1px solid #dadce0;
border-radius: 24px;
padding: 10px 24px;
font-weight: 500;
font-size: 14px;
color: #1a73e8;
transition: background 0.2s;
display: inline-block;
text-decoration: none;
}
.btn-outline-google:hover {
background-color: #f6f9fe;
border-color: #1a73e8;
color: #1a73e8;
}
/* Footer style Google */
.google-footer {
margin-top: 32px;
padding-top: 20px;
border-top: 1px solid #e8eaed;
font-size: 13px;
color: #5f6368;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.footer-links a {
color: #5f6368;
text-decoration: none;
margin-right: 20px;
font-weight: 450;
transition: color 0.15s;
}
.footer-links a:hover {
color: #202124;
text-decoration: underline;
}
.google-copyright i {
font-size: 12px;
margin-right: 4px;
}
/* Alertes / info subtile */
.security-note {
background-color: #f8f9fa;
border-radius: 16px;
padding: 16px 20px;
margin: 24px 0 8px;
font-size: 14px;
color: #3c4043;
border-left: 4px solid #1a73e8;
}
/* pour les emails sur mobile */
@media (max-width: 576px) {
.email-wrapper {
margin: 16px auto;
padding-left: 12px;
padding-right: 12px;
}
.google-card {
padding: 20px 18px 24px;
border-radius: 24px;
}
.greeting {
font-size: 24px;
}
.btn-google {
width: 100%;
text-align: center;
}
.footer-links a {
margin-right: 14px;
font-size: 12px;
}
}
/* Utilitaires */
.text-google-blue { color: #1a73e8; }
.bg-google-light { background-color: #f8f9fa; }
</style>
</head>
<body>
<div class="email-wrapper">
<!-- Carte principale évoquant une notification Google (Gmail / Compte Google) -->
<div class="google-card">
<!-- En-tête : logo façon "G" + Google -->
<div class="google-header">
<div class="google-logo">
<i class="bi bi-google"></i>
</div>
<div class="google-header-text">
Google <span>· Compte</span>
</div>
</div>
<!-- Message d'accueil style Google -->
<h1 class="greeting">Bonjour Thomas,</h1>
<div class="sub-greeting">
<i class="bi bi-check-circle-fill text-google-blue me-1" style="font-size: 14px;"></i>
Activité récente · Votre compte est protégé
</div>
<!-- Bloc d'information : nouvel appareil (comme un email de sécurité Google) -->
<div class="info-line">
<div class="info-icon">
<i class="bi bi-laptop"></i>
</div>
<div class="info-content">
<strong>Nouvelle connexion détectée</strong><br>
<span class="muted">Windows · Paris, France · il y a 15 minutes</span>
</div>
</div>
<!-- Bloc : stockage Drive (rappel visuel) -->
<div class="info-line">
<div class="info-icon">
<i class="bi bi-cloud-check"></i>
</div>
<div class="info-content">
<strong>Espace de stockage</strong><br>
<span class="muted">12,4 Go utilisés sur 15 Go ·</span>
<a href="#" style="color:#1a73e8; text-decoration: none; font-weight: 500;">Gérer le stockage</a>
</div>
</div>
<!-- Section message : comme un résumé Google One ou rappel -->
<div class="security-note d-flex align-items-start gap-3">
<i class="bi bi-shield-shaded fs-4" style="color: #1a73e8;"></i>
<div>
<strong style="font-size: 15px;">Vérification de sécurité recommandée</strong><br>
<span style="font-size: 14px;">Nous avons remarqué une activité récente. Vérifiez que c'est bien vous.</span>
</div>
</div>
<!-- Boutons d'action (style Material / Google) -->
<div class="d-flex flex-wrap gap-3 mt-4 align-items-center">
<a href="#" class="btn-google">
<i class="bi bi-shield-check"></i> Vérifier l'activité
</a>
<a href="#" class="btn-outline-google">
<i class="bi bi-question-circle"></i> Ce n'était pas moi
</a>
</div>
<!-- Petit séparateur + texte secondaire (comme dans les emails Google) -->
<div style="margin-top: 28px; color: #5f6368; font-size: 14px;">
<i class="bi bi-clock-history me-1"></i>
Vous pouvez également consulter vos <a href="#" style="color:#1a73e8; text-decoration: none;">appareils connectés</a>
et <a href="#" style="color:#1a73e8; text-decoration: none;">modifier votre mot de passe</a>.
</div>
<!-- Footer style Google : liens utiles + copyright -->
<div class="google-footer">
<div class="footer-links">
<a href="#"><i class="bi bi-google me-1"></i>Compte</a>
<a href="#">Confidentialité</a>
<a href="#">Conditions</a>
<a href="#">Aide</a>
</div>
<div class="google-copyright">
<i class="bi bi-google"></i> Google LLC · 1600 Amphitheatre Parkway
</div>
</div>
<!-- Mention de sécurité discrète (comme sur les vrais emails) -->
<div class="mt-3 text-muted" style="font-size: 12px;">
<i class="bi bi-envelope me-1"></i> Cet e-mail a été envoyé depuis une adresse de notification uniquement.
<a href="#" style="color:#1a73e8; text-decoration: none;">Ne pas répondre</a>.
</div>
</div>
<!-- Un second bloc (optionnel) pour montrer la flexibilité : style "Google Photos" ou "Drive" -->
<div class="google-card mt-4">
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
<div style="background: #34a853; width: 32px; height: 32px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white;">
<i class="bi bi-image"></i>
</div>
<span style="font-weight: 500; font-size: 18px; color: #202124;">Google Photos</span>
<span style="margin-left: auto; background: #e8f0fe; color: #1a73e8; padding: 4px 12px; border-radius: 40px; font-size: 13px; font-weight: 500;">Nouveau souvenir</span>
</div>
<p style="color: #3c4043; font-size: 15px; margin-bottom: 16px;">
<i class="bi bi-calendar-heart me-1" style="color:#ea4335;"></i>
Il y a 2 ans · <strong>Week-end à Annecy</strong> · 24 photos
</p>
<div class="d-flex gap-2">
<span class="badge bg-light text-dark p-2 px-3 rounded-pill"><i class="bi bi-eye me-1"></i> Voir les souvenirs</span>
<span class="badge bg-light text-dark p-2 px-3 rounded-pill"><i class="bi bi-download"></i> Enregistrer</span>
</div>
<div class="mt-3" style="font-size: 13px; color: #5f6368;">
<i class="bi bi-info-circle"></i> Géré par votre compte Google
</div>
</div>
<!-- petit texte de bas de page façon email Google -->
<div style="text-align: center; margin-top: 24px; font-size: 12px; color: #5f6368;">
<i class="bi bi-lock-fill me-1"></i>
Cet e-mail vous est envoyé dans le cadre de votre compte Google.
<a href="#" style="color:#1a73e8; text-decoration: none;">Se désabonner</a> des alertes.
</div>
</div>
<!-- Bootstrap JS (optionnel, juste pour les interactions éventuelles) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur