Bootstrap
Bootstrap5
Banniere
730X150
Promo
Html
Template Bootstrap 5 de bannière horizontale 730x150 pour sections secondaires et publicités adaptées.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bannière animée · Formation 100% pratique</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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(145deg, #f0f4f8 0%, #d9e2ec 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
/* Bannière principale 730x150 */
.banner {
position: relative;
width: 100%;
max-width: 730px;
height: 150px;
margin: 0 auto;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 30px -8px rgba(0, 20, 40, 0.3);
transition: box-shadow 0.3s ease;
}
.banner:hover {
box-shadow: 0 20px 35px -6px rgba(0, 30, 60, 0.4);
}
/* image d'arrière-plan */
.banner-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
/* overlay sombre pour lisibilité */
.banner-overlay {
position: absolute;
inset: 0;
background: linear-gradient(105deg, rgba(10, 30, 45, 0.8) 0%, rgba(30, 60, 90, 0.5) 80%);
z-index: 1;
backdrop-filter: blur(0.5px);
}
/* contenu (logo + texte) */
.banner-content {
position: relative;
z-index: 5;
height: 100%;
display: flex;
align-items: center;
padding: 0 24px;
}
/* Bloc logo */
.logo-wrapper {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 8px 20px 8px 16px;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.25);
margin-right: 22px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transition: transform 0.2s;
}
.logo-wrapper:hover {
transform: scale(1.02);
background: rgba(255, 255, 255, 0.15);
}
.logo-icon {
font-size: 2.3rem;
color: #FFD966;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}
.logo-text {
font-weight: 700;
font-size: 1.5rem;
letter-spacing: -0.01em;
color: white;
line-height: 1.2;
}
.logo-text span {
font-weight: 300;
color: #FFD966;
}
/* zone de texte animée */
.text-block {
flex: 1;
}
/* ANIMATION DU TEXTE PRINCIPAL */
.animated-headline {
font-weight: 800;
font-size: 1.9rem;
line-height: 1.2;
color: white;
text-shadow: 0 4px 14px rgba(0,0,0,0.4);
margin-bottom: 4px;
animation: slideFadeIn 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
opacity: 0;
transform: translateX(-12px);
}
@keyframes slideFadeIn {
0% { opacity: 0; transform: translateX(-18px); }
100% { opacity: 1; transform: translateX(0); }
}
/* sous-ligne avec badges et animations */
.sub-line {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
animation: fadeUp 0.8s 0.15s ease-out forwards;
opacity: 0;
transform: translateY(6px);
}
@keyframes fadeUp {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
.badge-web {
background: #FFD966;
color: #0a1e2c;
font-weight: 700;
padding: 5px 18px;
border-radius: 40px;
font-size: 1.05rem;
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
transition: all 0.2s;
animation: pulseGlow 2.2s infinite ease-in-out;
}
.badge-web i {
margin-right: 5px;
}
/* animation légère pour le badge "100% WEB" */
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 4px 10px rgba(255, 220, 100, 0.3); }
50% { box-shadow: 0 6px 16px rgba(255, 220, 100, 0.6); }
}
.pratique-text {
font-weight: 600;
font-size: 1.2rem;
color: #f8f4e6;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
display: flex;
align-items: center;
gap: 6px;
animation: softBounce 1.8s infinite;
}
@keyframes softBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
.cta-link {
margin-left: auto;
color: rgba(255,255,245,0.9);
font-weight: 500;
font-size: 1rem;
background: rgba(0,0,0,0.15);
padding: 6px 14px;
border-radius: 40px;
backdrop-filter: blur(4px);
transition: 0.2s;
text-decoration: none;
border: 1px solid rgba(255,255,200,0.2);
animation: fadeInRight 0.7s 0.3s both;
}
.cta-link:hover {
background: #FFD966;
color: #0a1e2c;
border-color: #FFD966;
}
@keyframes fadeInRight {
0% { opacity: 0; transform: translateX(15px); }
100% { opacity: 1; transform: translateX(0); }
}
/* micro-animation continue pour l'icône du logo */
.logo-icon {
animation: softSpin 5s infinite;
}
@keyframes softSpin {
0%, 20% { transform: rotate(0deg); }
25% { transform: rotate(6deg); }
30% { transform: rotate(-4deg); }
35% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
/* RESPONSIVE : hauteur 150px fixe, adaptation texte */
@media (max-width: 700px) {
.banner {
max-width: 100%;
height: auto;
aspect-ratio: 730 / 150;
}
.banner-content {
padding: 0 16px;
}
.logo-wrapper {
padding: 5px 14px 5px 12px;
margin-right: 14px;
}
.logo-icon {
font-size: 1.9rem;
}
.logo-text {
font-size: 1.2rem;
}
.animated-headline {
font-size: 1.4rem;
}
.badge-web {
font-size: 0.9rem;
padding: 4px 12px;
}
.pratique-text {
font-size: 1rem;
}
.cta-link {
font-size: 0.85rem;
padding: 4px 10px;
}
}
@media (max-width: 520px) {
.banner-content {
flex-wrap: wrap;
align-content: center;
gap: 8px;
}
.logo-wrapper {
margin-right: 0;
}
.animated-headline {
font-size: 1.3rem;
}
.sub-line {
gap: 8px;
}
.cta-link {
margin-left: 0;
}
}
/* fallback au cas où l'image ne charge pas */
.banner::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 40%, #1a3a55, #0b1a28);
z-index: 0;
}
.banner-bg, .banner-overlay, .banner-content {
z-index: 2;
}
.banner-bg {
z-index: 1;
}
.banner-overlay {
z-index: 2;
}
.banner-content {
z-index: 6;
}
</style>
</head>
<body>
<!-- BANNIÈRE 730x150 · animation texte · image fond · logo -->
<div class="banner">
<!-- image de fond (formation web / coworking) -->
<img class="banner-bg"
src="https://images.pexels.com/photos/3184292/pexels-photo-3184292.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
alt="formation web pratique"
onerror="this.style.opacity='0.3'; this.src='https://images.pexels.com/photos/1181271/pexels-photo-1181271.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2';">
<div class="banner-overlay"></div>
<div class="banner-content">
<!-- LOGO avec icône animée -->
<div class="logo-wrapper">
<i class="bi bi-code-slash logo-icon"></i>
<div class="logo-text">Web<span>Master</span></div>
</div>
<!-- BLOC TEXTE ANIMÉ -->
<div class="text-block">
<div class="animated-headline">
Formation personnalisée
</div>
<div class="sub-line">
<span class="badge-web">
<i class="bi bi-laptop"></i> 100% WEB
</span>
<span class="pratique-text">
<i class="bi bi-code-square"></i> 100% PRATIQUE
</span>
<!-- petit call to action discret (animé aussi) -->
<a href="#" class="cta-link">
<i class="bi bi-arrow-right-circle"></i> Je m'inscris
</a>
</div>
</div>
</div>
</div>
<!-- info légère (responsive, animation) -->
<div style="max-width:730px; margin: 20px auto 0; color: #1e3a5f; font-weight: 500; text-align: center; font-size:0.95rem;">
<i class="bi bi-emoji-sunglasses"></i> Bannière 730x150 · animation texte · image fond + logo · Bootstrap 5 ready
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>