Nox
131 lines
3.4 KiB
HTML
131 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { width: 600px; height: 900px; overflow: hidden; }
|
|
|
|
.affiche {
|
|
width: 600px; height: 900px;
|
|
background: linear-gradient(160deg, #c0392b 0%, #96281b 100%);
|
|
display: flex; flex-direction: column;
|
|
align-items: center;
|
|
font-family: 'Arial Black', 'Helvetica Neue', sans-serif;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Bandes déco */
|
|
.bande { width: 100%; height: 12px; background: #f1c40f; flex-shrink: 0; }
|
|
|
|
/* Cercles déco fond */
|
|
.cercle {
|
|
position: absolute; border-radius: 50%;
|
|
background: rgba(255,255,255,0.04);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
width: 100%; background: #7b241c;
|
|
padding: 14px 0;
|
|
text-align: center; flex-shrink: 0;
|
|
}
|
|
.header span {
|
|
font-size: 15px; letter-spacing: 8px; font-weight: 900;
|
|
color: #f1c40f; text-transform: uppercase;
|
|
}
|
|
|
|
/* Corps central */
|
|
.body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 30px; }
|
|
|
|
/* -50% */
|
|
.pct {
|
|
font-size: 195px; font-weight: 900; color: #fff;
|
|
line-height: 0.9; letter-spacing: -6px;
|
|
text-shadow: 0 6px 30px rgba(0,0,0,0.35), 0 2px 0 rgba(0,0,0,0.3);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.soldes-label {
|
|
font-size: 46px; font-weight: 900; color: #f1c40f;
|
|
letter-spacing: 12px; text-transform: uppercase;
|
|
text-shadow: 0 3px 10px rgba(0,0,0,0.3);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.sep { width: 420px; height: 3px; background: linear-gradient(90deg, transparent, #f1c40f, transparent); margin: 18px 0; }
|
|
|
|
.subtitle {
|
|
font-size: 17px; letter-spacing: 3px; font-weight: 700;
|
|
color: rgba(255,255,255,0.85); text-transform: uppercase;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
/* Badge */
|
|
.badge {
|
|
background: #f1c40f;
|
|
border-radius: 50px;
|
|
padding: 14px 40px;
|
|
margin-bottom: 28px;
|
|
}
|
|
.badge span {
|
|
font-size: 20px; font-weight: 900; color: #7b241c;
|
|
letter-spacing: 2px; text-transform: uppercase;
|
|
}
|
|
|
|
/* Dates */
|
|
.dates {
|
|
font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.6);
|
|
letter-spacing: 2px; margin-bottom: 28px;
|
|
}
|
|
|
|
/* Emojis */
|
|
.shoes { font-size: 64px; line-height: 1; margin-bottom: 24px; }
|
|
|
|
/* Footer */
|
|
.footer {
|
|
width: 100%; background: rgba(0,0,0,0.2);
|
|
padding: 14px;
|
|
text-align: center; flex-shrink: 0;
|
|
}
|
|
.footer span {
|
|
font-size: 13px; letter-spacing: 4px; color: #f8c471;
|
|
font-weight: 400; text-transform: uppercase;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="affiche">
|
|
|
|
<!-- Cercles décoratifs fond -->
|
|
<div class="cercle" style="width:350px;height:350px;bottom:-60px;right:-80px;"></div>
|
|
<div class="cercle" style="width:200px;height:200px;top:80px;left:-60px;"></div>
|
|
<div class="cercle" style="width:120px;height:120px;top:200px;right:30px;"></div>
|
|
|
|
<div class="bande"></div>
|
|
|
|
<div class="header">
|
|
<span>✦ Collection Printemps 2026 ✦</span>
|
|
</div>
|
|
|
|
<div class="body">
|
|
<div class="soldes-label">Soldes</div>
|
|
<div class="pct">-50%</div>
|
|
<div class="sep"></div>
|
|
<div class="subtitle">Sur toutes nos chaussures</div>
|
|
<div class="badge"><span>⚡ Offre limitée ⚡</span></div>
|
|
<div class="dates">Du 1er au 31 mars 2026</div>
|
|
<div class="shoes">👟 👠 👞</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<span>www.votre-boutique.fr</span>
|
|
</div>
|
|
|
|
<div class="bande"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|