Run ❯
Get your
own
website
❯
Run Code
Ctrl+Alt+R
Change Orientation
Ctrl+Alt+O
Change Theme
Ctrl+Alt+D
Go to Spaces
Ctrl+Alt+P
HTML
CSS
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css" type="text/css"> </head> <body> <section class="grid"> <article class="card" tabindex="0">Design tokens</article> <article class="card" tabindex="0">Accessibility audit</article> <article class="card" tabindex="0">Team workflows</article> </section> </body> </html>
.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: clamp(24px, 6vw, 80px); } .card { padding: 32px; border-radius: 24px; background: linear-gradient(145deg, #1e293b, #0f172a); color: #fff; transform: perspective(700px) rotateX(0deg) rotateY(0deg); transition: transform 220ms ease, box-shadow 220ms ease; } .card:hover, .card:focus-visible { transform: perspective(700px) rotateX(6deg) rotateY(-6deg) translateY(-6px); box-shadow: 0 24px 40px rgba(15, 23, 42, 0.35); }
