Skip to content

Instantly share code, notes, and snippets.

@mattborn

mattborn/index.html

Created December 30, 2016 21:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mattborn/b200af7d3d92d64a3b3048f72e75dd18 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mattborn/b200af7d3d92d64a3b3048f72e75dd18 to your computer and use it in GitHub Desktop.
Download ZIP
Adaptive Flexbox for Sid
Raw
index.html
<!doctype html>
<html>
<head>
<title>Adaptive Flexbox for Sid</title>
<style>
body { margin: 5%; }
img { max-width: 100%; }
.Album-Details {
display: flex;
flex-wrap: wrap;
padding: 5%;
}
.Album,
.Details {
flex: 1 0 400px;
}
</style>
</head>
<body>
<div class="Album-Details">
<div class="Album">
<img src="//placebear.com/1500/1500">
</div>
<div class="Details">
<div>1</div>
<div>Album Title</div>
<div>Album Description</div>
<div><a href="#">Spotify</a> <a href="#">iTunes</a></div>
</div>
</div>
<div class="Album-Details">
<div class="Album">
<img src="//placebear.com/1500/1500">
</div>
<div class="Details">
<div>1</div>
<div>Album Title</div>
<div>Album Description</div>
<div><a href="#">Spotify</a> <a href="#">iTunes</a></div>
</div>
</div>
<div class="Album-Details">
<div class="Album">
<img src="//placebear.com/1500/1500">
</div>
<div class="Details">
<div>1</div>
<div>Album Title</div>
<div>Album Description</div>
<div><a href="#">Spotify</a> <a href="#">iTunes</a></div>
</div>
</div>
<div class="Album-Details">
<div class="Album">
<img src="//placebear.com/1500/1500">
</div>
<div class="Details">
<div>1</div>
<div>Album Title</div>
<div>Album Description</div>
<div><a href="#">Spotify</a> <a href="#">iTunes</a></div>
</div>
</div>
<div class="Album-Details">
<div class="Album">
<img src="//placebear.com/1500/1500">
</div>
<div class="Details">
<div>1</div>
<div>Album Title</div>
<div>Album Description</div>
<div><a href="#">Spotify</a> <a href="#">iTunes</a></div>
</div>
</div>
<div class="Album-Details">
<div class="Album">
<img src="//placebear.com/1500/1500">
</div>
<div class="Details">
<div>1</div>
<div>Album Title</div>
<div>Album Description</div>
<div><a href="#">Spotify</a> <a href="#">iTunes</a></div>
</div>
</div>
<div class="Album-Details">
<div class="Album">
<img src="//placebear.com/1500/1500">
</div>
<div class="Details">
<div>1</div>
<div>Album Title</div>
<div>Album Description</div>
<div><a href="#">Spotify</a> <a href="#">iTunes</a></div>
</div>
</div>
<div class="Album-Details">
<div class="Album">
<img src="//placebear.com/1500/1500">
</div>
<div class="Details">
<div>1</div>
<div>Album Title</div>
<div>Album Description</div>
<div><a href="#">Spotify</a> <a href="#">iTunes</a></div>
</div>
</div>
<div class="Album-Details">
<div class="Album">
<img src="//placebear.com/1500/1500">
</div>
<div class="Details">
<div>1</div>
<div>Album Title</div>
<div>Album Description</div>
<div><a href="#">Spotify</a> <a href="#">iTunes</a></div>
</div>
</div>
<div class="Album-Details">
<div class="Album">
<img src="//placebear.com/1500/1500">
</div>
<div class="Details">
<div>1</div>
<div>Album Title</div>
<div>Album Description</div>
<div><a href="#">Spotify</a> <a href="#">iTunes</a></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment