Skip to content

Instantly share code, notes, and snippets.

@Clinsmann

Clinsmann/index.html

Last active December 10, 2019 12:28
Show Gist options
  • Save Clinsmann/84f4dcb35a4d53341766d49c222c7552 to your computer and use it in GitHub Desktop.
Save Clinsmann/84f4dcb35a4d53341766d49c222c7552 to your computer and use it in GitHub Desktop.
Download ZIP
masonry layout
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
<link rel='stylesheet' href="./css/masonry-layout.css" />
<title>Masonry Layout</title>
</head>
<body>
<div class="container">
<h1 class='welcome'>Masonry layout with pure css</h1>
</div>
<div class="container masonry-bricks-container">
<img src="./img/feet-1840619_640-min.jpg" alt="image">
<img src="./img/feet-965688_640-min.jpg" alt="image">
<img src="./img/footwear-1837170_640-min.jpg" alt="image">
<img src="./img/gold-4284582_640-min.jpg" alt="image">
<img src="./img/golden-4284599_640-min.jpg" alt="image">
<img src="./img/hijab-3064633_640-min.jpg" alt="image">
<img src="./img/stones-167089_640-min.jpg" alt="image">
<img src="./img/suit-2619784_640-min.jpg" alt="image">
<img src="./img/time-3091031_640-min.jpg" alt="image">
<img src="./img/accessory-219353_640-min.jpg" alt="image">
<img src="./img/adidas-2554690_640-min.jpg" alt="image">
<img src="./img/apple-watch-1694985_640-min.jpg" alt="image">
<img src="./img/background-4654702_640-min.jpg" alt="image">
<img src="./img/bracelet-1434941_640-min.jpg" alt="image">
<img src="./img/fashion-1284496_640-min.jpg" alt="image">
<img src="./img/people-2583613_640-min.jpg" alt="image">
<img src="./img/people-2595862_640-min.jpg" alt="image">
<img src="./img/shoes-3850175_640-min.jpg" alt="image">
<img src="./img/shoes-584850_640-min.jpg" alt="image">
<img src="./img/smart-watch-821559_640-min.jpg" alt="image">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment