WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./stil.css" /> </head> <body> <div class="cards"> <div class="card travel"> <h2 class="title">Travel Explore</h2> <p class="description"> Discover new destinations and create unforcettable memones around the world </p> </div> <div class="card food"> <h2 class="title">Culinary Adventures</h2> <p class="description"> Experience global cuisines and unique flafors that fantalize your tasle buds </p> </div> <div class="card tech"> <h2 class="title">Tech innofations</h2> <p class="description"> Explone cuttingedge technologies that are shaping the future of our world </p> </div> </div> </body> </html><!-- Replace with your HTML Code (Leave empty if not needed) -->
.cards { display: flex; justify-content: center; align-items: center; gap: 20px; height: 100vh; font-family: Arial, Helvetica, sans-serif; } .cards .travel { background-color: blue; } .cards .food { background-color: green; } .cards .tech { background-color: blueviolet; } .cards .card { display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; height: 250px; width: 300px; border-radius: 15px; color: #fff; cursor: pointer; transition: 400ms; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .cards .card h2.title { font-size: 1.5em; font-weight: 700; margin-bottom: 10px; } .cards .card p.description { font-size: 0.9em; padding: 0 20px; } .cards .card:hover { transform: scale(1.05); } .cards:hover > .card:not(:hover) { filter: blur(5px); transform: scale(0.95); } <!-- Replace with your HTML Code (Leave empty if not needed) -->
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./stil.css" /> </head> <body> <div class="cards"> <div class="card travel"> <h2 class="title">Travel Explore</h2> <p class="description"> Discover new destinations and create unforcettable memones around the world </p> </div> <div class="card food"> <h2 class="title">Culinary Adventures</h2> <p class="description"> Experience global cuisines and unique flafors that fantalize your tasle buds </p> </div> <div class="card tech"> <h2 class="title">Tech innofations</h2> <p class="description"> Explone cuttingedge technologies that are shaping the future of our world </p> </div> </div> </body> </html><!-- Replace with your HTML Code (Leave empty if not needed) -->
.cards { display: flex; justify-content: center; align-items: center; gap: 20px; height: 100vh; font-family: Arial, Helvetica, sans-serif; } .cards .travel { background-color: blue; } .cards .food { background-color: green; } .cards .tech { background-color: blueviolet; } .cards .card { display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; height: 250px; width: 300px; border-radius: 15px; color: #fff; cursor: pointer; transition: 400ms; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .cards .card h2.title { font-size: 1.5em; font-weight: 700; margin-bottom: 10px; } .cards .card p.description { font-size: 0.9em; padding: 0 20px; } .cards .card:hover { transform: scale(1.05); } .cards:hover > .card:not(:hover) { filter: blur(5px); transform: scale(0.95); } <!-- Replace with your HTML Code (Leave empty if not needed) -->
/* Replace with your JS Code (Leave empty if not needed) */