Bootstrap
Bootstrap5
Banniere
300X300
Ui
Html
Variante Bootstrap 5 de bannière 300x300 avec design épuré, boutons d'action et effets hover.
<!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>Bootstrap5 Banniere 300 300 02 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f0f2f5;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* ========== BANNIÈRE ========== */
.banner {
width: 300px;
height: 300px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 30px 20px;
text-align: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
cursor: pointer;
transition: transform 0.3s ease;
}
.banner:hover {
transform: scale(1.02);
}
/* Background animé */
.banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #667eea, #764ba2, #667eea);
background-size: 200% 200%;
animation: gradientShift 8s ease infinite;
z-index: 0;
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Contenu relatif */
.banner-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
}
/* Icône animée */
.banner-icon {
font-size: 3rem;
color: white;
animation: float 3s ease-in-out infinite;
margin-bottom: 15px;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
}
/* Titre */
.banner-title {
color: white;
font-size: 0.9rem;
font-weight: 700;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: 1px;
animation: slideInDown 0.8s ease;
margin: 10px 0;
}
@keyframes slideInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Texte principal */
.banner-text {
color: rgba(255, 255, 255, 0.95);
font-size: 1.05rem;
font-weight: 600;
line-height: 1.5;
animation: fadeInUp 0.8s ease 0.2s both;
margin: 10px 0;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Bouton animé */
.banner-btn {
background: rgba(255, 255, 255, 0.2);
border: 2px solid white;
color: white;
padding: 8px 20px;
border-radius: 25px;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
animation: fadeInUp 0.8s ease 0.4s both;
position: relative;
overflow: hidden;
display: inline-block;
}
.banner-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
transition: left 0.3s ease;
z-index: -1;
}
.banner-btn:hover::before {
left: 100%;
}
.banner-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Particules animées */
.particle {
position: absolute;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.particle-1 {
width: 60px;
height: 60px;
top: -30px;
right: -30px;
animation: pulse 4s ease-in-out infinite;
}
.particle-2 {
width: 40px;
height: 40px;
bottom: -20px;
left: -20px;
animation: pulse 5s ease-in-out infinite 1s;
}
@keyframes pulse {
0%, 100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.2);
}
}
/* Cercles décoratifs */
.banner-circle {
position: absolute;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
z-index: 0;
animation: rotate 20s linear infinite;
}
.circle-1 {
width: 150px;
height: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-2 {
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: rotate 25s linear infinite reverse;
}
@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* Ligne animée */
.banner-line {
position: absolute;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
z-index: 0;
animation: slideRight 3s ease-in-out infinite;
}
.line-1 {
width: 80px;
top: 40%;
left: -80px;
}
.line-2 {
width: 80px;
bottom: 40%;
right: -80px;
animation: slideLeft 3s ease-in-out infinite;
}
@keyframes slideRight {
0%, 100% {
left: -80px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@keyframes slideLeft {
0%, 100% {
right: -80px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
right: 100%;
opacity: 0;
}
}
/* Responsive */
@media (max-width: 768px) {
body {
padding: 20px;
}
.banner {
width: 280px;
height: 280px;
padding: 25px 15px;
}
.banner-icon {
font-size: 2.5rem;
}
.banner-title {
font-size: 0.8rem;
}
.banner-text {
font-size: 0.95rem;
}
}
</style>
</head>
<body>
<!-- BANNIÈRE PRO ANIMÉE -->
<div class="banner">
<!-- Cercles décoratifs -->
<div class="banner-circle circle-1"></div>
<div class="banner-circle circle-2"></div>
<!-- Particules -->
<div class="particle particle-1"></div>
<div class="particle particle-2"></div>
<!-- Lignes animées -->
<div class="banner-line line-1"></div>
<div class="banner-line line-2"></div>
<!-- Contenu -->
<div class="banner-content">
<!-- Icône -->
<div class="banner-icon">
<i class="bi bi-rocket-takeoff"></i>
</div>
<!-- Titre -->
<div class="banner-title">
Transformation Digitale
</div>
<!-- Texte Principal -->
<div class="banner-text">
La transformation digitale au cœur de votre métier.
</div>
<!-- Bouton -->
<a href="#" class="banner-btn">
<i class="bi bi-arrow-right me-2"></i>Découvrir
</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur