WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animation de sphère CSS avec effets de survol
504
ByBy.inc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
11 March 2024
Générateur de QRCode
12 July 2025
animation de voiture
19 May 2025
menu de la barre de navigation
HTML
Copy
CSS
Copy
*{ margin: 0; padding: 0; box-sizing: border-box; body{ background: rgb(251, 247, 247); overflow-x: hidden; } } .band{ color: white; background-color: blueviolet; height: 30px ; } .band h1{ padding: 10px; font: 1em sans-serif; text-align: center; } .logo{ font-family: sans-serif; font-size: large; text-align: center; padding: 30px; } nav{ height: 80px; background-color: rgb(251, 251, 251) } .hero{ height: 400px; background-color: white; display: flex; } .hero .container{ display: flex; height: 98%; width: 100%; } .container img{ width: 100%; } .content{ align-items: center; display: flex; flex-direction: column; color: white; font-family: sans-serif; font-size: 40px; margin-top: -200px; } .content button{ height: 40px; width: 150px; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; background-color: white; color: black; border:none; border-radius: 3px; } .title{ display: flex; flex-direction: column; align-items: center; margin-top:130px; } .title h1{ font-family: sans-serif; font-size: 25px; margin-bottom: 50px; } .product{ background-color: rgb(255, 255, 255); border-radius: 10px; height: 320px; width: 200px; flex-direction: column; display: flex; } .product img{ height: 200px; } .product button{ height: 50px; width: 200px; background-color: rgb(51, 47, 47); color: #ffffff; border: none; } .product h2{ margin-top: 20px; color: rgb(0, 0, 0); font-family: sans-serif; font-size: 15px; margin-bottom: 20px; text-align: center; } .product p{ font-family: sans-serif; font-size: 15px; position: relative; color: rgb(0, 0, 0); left: 160px; } .product-container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 20px; } .product { margin: 10px; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */