WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Loading Animation with Background Image
616
byby.createsite
Open In Editor
Publish Your Code
Recommended
15 March 2024
Animated CSS Input
18 August 2024
Interactive Title Animation
28 July 2025
HTML Message Bubble with SVG Design
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) */