HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Light Cool Colored Boxes</title> </head> <body> <h1>Welcome!</h1> <p>This is a live preview editor.</p> <p>You can edit the <code>html</code>, <code>css</code>, and even add <code>javascript</code>!</p> <div class="box-container"> <div class="box box1">Box 1</div> <div class="box box2">Box 2</div> <div class="box box3">Box 3</div> </div> </body> </html>
CSS
body { margin: 0; height: 100vh; background-color: #f0f0f0; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: "poppins", sans-serif; } h1 { color: #313131; margin: 6px 0px; } p { font-size: 16px; margin: 6px 0px; } code { background: #e9e9e9 !important; padding: 2px 6px !important; border-radius: 4px !important; font-size: 90%; color: #d63384; } .demo-box { background: #ffffff; border: 2px solid #313131; padding: 1rem; max-width: 400px; border-radius: 12px; border: 2px solid black !important; box-shadow: 2px 2px black; } .box-container { display: flex; gap: 24px; margin-top: 12px; } .box { width: 140px; height: 140px; border-radius: 20px; display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: 600; color: #333; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .box1 { background-color: lightblue; } .box2 { background-color: lightgreen; } .box3 { background-color: coral; } .box:hover { transform: translateY(-6px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12); }
JS
Preview