38 lines
1.6 KiB
HTML
38 lines
1.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<link rel="stylesheet" href="style.css">
|
||
|
|
<title>Animated Grid Boxes</title>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<h1>Animated Grid Boxes</h1>
|
||
|
|
<p>Code from https://fireship.io/lessons/three-responsive-css-grid-layouts/ + change based on comment that
|
||
|
|
simplifies the css down to one rule, but puts some of the info into the html to mark each div with variables
|
||
|
|
for the animiation delay (--i) and the name of the box's grid space (--g)</p>
|
||
|
|
</header>
|
||
|
|
<main>
|
||
|
|
<section class="animated-grid">
|
||
|
|
<div style="--i: 1; --g: a;" class="card">a</div>
|
||
|
|
<div style="--i: 2; --g: b;" class="card">b</div>
|
||
|
|
<div style="--i: 3; --g: c;" class="card">c</div>
|
||
|
|
<div style="--i: 4; --g: d;" class="card">d</div>
|
||
|
|
<div style="--i: 5; --g: e;" class="card">e</div>
|
||
|
|
<div style="--i: 6; --g: f;" class="card">f</div>
|
||
|
|
<div style="--i: 7; --g: g;" class="card">g</div>
|
||
|
|
<div style="--i: 8; --g: h;" class="card">h</div>
|
||
|
|
<div style="--i: 9; --g: i;" class="card">i</div>
|
||
|
|
<div style="--i: 10; --g: j;" class="card">j</div>
|
||
|
|
<div style="--i: 11; --g: k;" class="card">k</div>
|
||
|
|
<div style="--i: 12; --g: l;" class="card">l</div>
|
||
|
|
<div style="--i: 13; --g: 🌟;" class="card">main</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|