CSSCSS · Lesson 16Project: Build a Neon Card GridCombine grid, variables, shadows and transitions.Video tutorialTrack course · freeCodeCampCSS Full Course — Zero to Hero Speed0.75x1x1.25x1.5x2x Skip introWatch 00:00 Watch on YouTube More on this topic Transcript & captions .txt2/200:00Project: Build a Neon Card Grid. Combine grid, variables, shadows and transitions.00:05Try it yourself — edit the sample and run it in the browser.Try it yourself Copy Reset Run<style> :root{--bg:#0b1020;--accent:#22d3ee} *{box-sizing:border-box} body{margin:0;padding:24px;background:var(--bg);color:#e2e8f0;font-family:system-ui} .grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} .card{padding:18px;border:1px solid #ffffff22;border-radius:14px; background:linear-gradient(160deg,#ffffff10,#ffffff02); transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s} .card:hover{transform:translateY(-6px);box-shadow:0 0 28px rgba(34,211,238,.35);border-color:var(--accent)} h3{margin:0 0 6px;color:var(--accent)} </style> <div class="grid"> <div class="card"><h3>Speed</h3><p>Edit the tokens above.</p></div> <div class="card"><h3>Style</h3><p>Add a fourth card.</p></div> <div class="card"><h3>Scale</h3><p>Resize the preview.</p></div> </div>Mark as complete PreviousModern CSSTrack completeBack to CSS index