Bootstrap
Bootstrap5
Banniere
730X300
Header
Html
Template Bootstrap 5 de bannière grand format 730x300 pixels pour headers et sections principales.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bannière · Formation personnalisée</title>
<!-- Bootstrap 5 + Icons -->
<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>
/* Bannière personnalisée 730x300 — responsive */
.custom-banner {
position: relative;
width: 100%;
max-width: 730px; /* largeur exacte demandée */
height: 300px; /* hauteur fixe */
margin: 0 auto;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 30px -8px rgba(0, 0, 0, 0.25);
background-color: #0b1e2e; /* fallback */
}
/* image d'arrière-plan (fond) */
.banner-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
/* overlay sombre pour lisibilité du texte */
.banner-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(95deg, rgba(10, 30, 50, 0.75) 0%, rgba(20, 50, 80, 0.5) 70%);
z-index: 1;
}
/* contenu de la bannière (logo + texte) */
.banner-content {
position: relative;
z-index: 3;
height: 100%;
display: flex;
align-items: center;
padding: 0 2rem;
}
/* logo stylisé (icône + texte logo) */
.banner-logo {
display: flex;
align-items: center;
gap: 10px;
margin-right: 25px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 8px 18px 8px 14px;
border-radius: 60px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.logo-icon {
font-size: 2.6rem;
color: #FFD966;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.logo-text {
font-weight: 700;
font-size: 1.6rem;
letter-spacing: -0.02em;
color: white;
line-height: 1.2;
}
.logo-text span {
font-weight: 300;
color: #FFD966;
}
/* bloc texte principal */
.banner-text {
flex: 1;
}
.main-headline {
font-weight: 800;
font-size: 1.9rem;
line-height: 1.2;
color: white;
text-shadow: 0 4px 12px rgba(0,0,0,0.3);
margin-bottom: 6px;
}
.sub-line {
font-size: 1.2rem;
font-weight: 500;
color: #f0e6d2;
text-shadow: 0 2px 6px rgba(0,0,0,0.4);
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.badge-web {
background: #FFD966;
color: #0a1e2c;
font-weight: 700;
padding: 5px 16px;
border-radius: 40px;
font-size: 1rem;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* responsive : s'adapte en dessous de 730px */
@media (max-width: 730px) {
.custom-banner {
max-width: 100%;
height: auto;
aspect-ratio: 730 / 300;
border-radius: 18px;
}
.banner-content {
padding: 0 1.2rem;
}
.banner-logo {
padding: 6px 14px 6px 10px;
margin-right: 12px;
}
.logo-icon {
font-size: 2rem;
}
.logo-text {
font-size: 1.3rem;
}
.main-headline {
font-size: 1.4rem;
}
.sub-line {
font-size: 1rem;
}
}
@media (max-width: 500px) {
.banner-content {
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 12px;
}
.main-headline {
font-size: 1.3rem;
}
.badge-web {
font-size: 0.85rem;
padding: 4px 12px;
}
}
/* petite adaptation si l'image de fond ne charge pas (fallback dégradé) */
.custom-banner:after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 20% 30%, #1e3a5f, #0a1620);
z-index: 0;
}
/* pour que le contenu passe au-dessus du fallback */
.banner-bg, .banner-overlay, .banner-content {
z-index: 2;
}
.banner-bg {
z-index: 1;
}
/* overlay toujours au-dessus de l'image */
.banner-overlay {
z-index: 2;
}
.banner-content {
z-index: 4;
}
/* corriger l'ordre */
.custom-banner:after {
z-index: 0;
}
.banner-bg {
z-index: 1;
}
.banner-overlay {
z-index: 2;
}
.banner-content {
z-index: 5;
}
</style>
</head>
<body style="background: #eef2f5; display: flex; align-items: center; min-height: 100vh; margin: 0; padding: 20px;">
<!-- BANNIÈRE 730x300 – responsive, avec image de fond, logo et texte -->
<div class="custom-banner">
<!-- image d'arrière-plan (Unsplash / placeholder cohérent "formation web") -->
<img class="banner-bg"
src="https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
alt="formation web background"
onerror="this.style.display='none'"> <!-- en cas d'erreur réseau, le fallback radial reste visible -->
<!-- overlay pour contraste -->
<div class="banner-overlay"></div>
<!-- contenu superposé -->
<div class="banner-content">
<!-- logo avec icône + nom -->
<div class="banner-logo">
<i class="bi bi-code-slash logo-icon"></i>
<div class="logo-text">Web<span>Academy</span></div>
</div>
<!-- texte principal -->
<div class="banner-text">
<div class="main-headline">
Formation personnalisée
</div>
<div class="sub-line">
<span class="badge-web">
<i class="bi bi-laptop me-1"></i>100% WEB
</span>
<span style="font-weight: 600; letter-spacing: 0.3px;">
<i class="bi bi-code-square me-1"></i>100% PRATIQUE
</span>
<span style="margin-left: auto; font-size: 0.95rem; opacity: 0.9;">
<i class="bi bi-arrow-right-circle-fill me-1"></i>dès maintenant
</span>
</div>
<!-- petit sous-texte optionnel -->
<div style="color: rgba(255,255,240,0.9); font-size: 0.9rem; margin-top: 8px; display: flex; gap: 20px;">
<span><i class="bi bi-check-circle-fill text-warning me-1"></i>Projets réels</span>
<span><i class="bi bi-person-video3 me-1"></i>Coach dédié</span>
</div>
</div>
</div>
</div>
<!-- Légende: la bannière est responsive et utilise Bootstrap 5 + CSS personnalisé -->
<div class="text-center mt-4 text-secondary" style="max-width:730px; margin-inline: auto;">
<i class="bi bi-arrow-left-right"></i> Bannière 730x300 · image de fond · logo + texte · 100% responsive
</div>
<!-- Bootstrap JS (optionnel pour les interactions, mais pas requis) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>