WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Carte à secouer
1805
Andev.web
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
22 May 2025
Jeu d'évasion
19 May 2025
tombereau
30 August 2024
Diaporama de parallaxe
HTML
Copy
Andev Web
SUBSCRIBE
JOIN US
Andev Web
Get fresh void to your inbox every week.
Sign up
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap'); body { height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; font-family: 'Poppins', sans-serif; } .card { width: 320px; padding: 30px; background: #fff; border: 8px solid #000; box-shadow: 15px 15px 0 #000; transform: rotate(-2deg); transition: all 0.3s ease; position: relative; overflow: hidden; } .card:active { animation: shake 0.5s ease-in-out; } .card:hover { transform: rotate(0deg) scale(1.02); box-shadow: 20px 20px 0 #000; } .banner { position: absolute; top: 3px; right: -95px; background: #000; color: #fff; padding: 15px; width: 350px; text-align: center; transform: rotate(45deg); font-weight: bold; font-size: 18px; letter-spacing: 2px; overflow: hidden; transition: background 0.5s ease; } .banner-text { display: inline-block; transition: opacity 0.5s ease, transform 0.5s ease; width: 100%; position: absolute; left: 13%; top: 50%; transform: translateY(-50%); } .banner:hover .banner-text:first-child { opacity: 0; transform: translateY(-100%); } .banner:hover .banner-text:last-child { opacity: 1; transform: translateY(-40%); } .banner-text:last-child { opacity: 0; transform: translateY(60%); } .banner:hover { background: red; } .card__title { font-size: 24px; font-weight: 700; color: #000; text-transform: uppercase; margin-bottom: 10px; display: block; border-bottom: 2px solid #000; width: 50%; } .card__subtitle { font-size: 16px; line-height: 1.4; color: #333; margin-bottom: 20px; padding-bottom: 10px; } .card__form { display: flex; flex-direction: column; gap: 20px; } .card__form input { padding: 12px; border: 4px solid #000; font-size: 16px; transition: all 0.3s ease; background-color: #fff; } .card__form input:focus { outline: none; transform: scale(1.05); } .sign-up { border: 4px solid #000; background: #000; color: #fff; padding: 12px; font-size: 18px; font-weight: bold; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; } .sign-up:hover { background: #fff; color: #000; transform: translateY(-5px); box-shadow: 0 5px 0 #000; } .sign-up:active { animation: shake 0.5s ease-in-out; transform: translateY(0); box-shadow: none; } @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */