44 lines
1.5 KiB
HTML
44 lines
1.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" >
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>CodePen - Grid Collage Layout</title>
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
||
|
|
<link rel="stylesheet" href="./style.css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- partial:index.partial.html -->
|
||
|
|
<main>
|
||
|
|
<ul>
|
||
|
|
<li style="--x1: 2; --x2: 6; --y1: 1; --y2: 4;">
|
||
|
|
<img src="https://picsum.photos/600/600?random=1" alt="">
|
||
|
|
</li>
|
||
|
|
<li style="--x1: 6; --x2: 8; --y1: 2; --y2: 4;">
|
||
|
|
<img src="https://picsum.photos/600/600?random=2" alt="">
|
||
|
|
</li>
|
||
|
|
<li style="--x1: 1; --x2: 4; --y1: 4; --y2: 7;">
|
||
|
|
<img src="https://picsum.photos/600/600?random=3" alt="">
|
||
|
|
</li>
|
||
|
|
<li style="--x1: 4; --x2: 7; --y1: 4; --y2: 7;">
|
||
|
|
<img src="https://picsum.photos/600/600?random=4" alt="">
|
||
|
|
</li>
|
||
|
|
<li style="--x1: 7; --x2: 9; --y1: 4; --y2: 6;">
|
||
|
|
<img src="https://picsum.photos/600/600?random=5" alt="">
|
||
|
|
</li>
|
||
|
|
<li style="--x1: 2; --x2: 4; --y1: 7; --y2: 9;">
|
||
|
|
<img src="https://picsum.photos/600/600?random=7" alt="">
|
||
|
|
</li>
|
||
|
|
<li style="--x1: 4; --x2: 7; --y1: 7; --y2: 10;">
|
||
|
|
<img src="https://picsum.photos/600/600?random=8" alt="">
|
||
|
|
</li>
|
||
|
|
<li style="--x1: 7; --x2: 10; --y1: 6; --y2: 9;">
|
||
|
|
<img src="https://picsum.photos/600/600?random=9" alt="">
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</main>
|
||
|
|
<!-- partial -->
|
||
|
|
<script src='https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js'></script>
|
||
|
|
</body>
|
||
|
|
</html>
|