Skip to content

Instantly share code, notes, and snippets.

@sorie

sorie/index.html

Created January 15, 2019 01:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sorie/90af74c32955e8440bf3ea5590724b6b to your computer and use it in GitHub Desktop.
Save sorie/90af74c32955e8440bf3ea5590724b6b to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/tonaqab
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
#columns {
column-width: 250px;
}
#columns figure {
display: inline-block;
border: 1px solid rgba(0,0,0,0.2);
margin: 0;
margin-bottom: 15px;
padding: 10px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
#columns figure img {
width: 100%;
}
#columns figure figcaption {
border-top: 1px solid rgba(0,0,0,0.2);
padding: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="columns">
<figure>
<img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/cinderella.jpg">
<figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>
</figure>
<figure>
<img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/rapunzel.jpg">
<figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>
</figure>
<figure>
<img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/belle.jpg">
<figcaption>Belle, based on 1770’s French court fashion</figcaption>
</figure>
<figure>
<img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/mulan_2.jpg">
<figcaption>Mulan, based on the Ming Dynasty period</figcaption>
</figure>
<figure>
<img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/sleeping-beauty.jpg">
<figcaption>Sleeping Beauty, based on European fashions in 1485</figcaption>
</figure>
<figure>
<img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/pocahontas_2.jpg">
<figcaption>Pocahontas based on 17th century Powhatan costume</figcaption>
</figure>
<figure>
<img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/snow-white.jpg">
<figcaption>Snow White, based on 16th century German fashion</figcaption>
</figure>
<figure>
<img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ariel.jpg">
<figcaption>Ariel wearing an evening gown of the 1890’s</figcaption>
</figure>
<figure>
<img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/tiana.jpg">
<figcaption>Tiana wearing the <i>robe de style</i> of the 1920’s</figcaption>
</figure>
<small>Art &copy; <a href="http://clairehummel.com">Claire Hummel</a></small>
</div>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="columns">
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/cinderella.jpg">
<figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>
</figure>
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/rapunzel.jpg">
<figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>
</figure>
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/belle.jpg">
<figcaption>Belle, based on 1770’s French court fashion</figcaption>
</figure>
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/mulan_2.jpg">
<figcaption>Mulan, based on the Ming Dynasty period</figcaption>
</figure>
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/sleeping-beauty.jpg">
<figcaption>Sleeping Beauty, based on European fashions in 1485</figcaption>
</figure>
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/pocahontas_2.jpg">
<figcaption>Pocahontas based on 17th century Powhatan costume</figcaption>
</figure>
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/snow-white.jpg">
<figcaption>Snow White, based on 16th century German fashion</figcaption>
</figure>
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ariel.jpg">
<figcaption>Ariel wearing an evening gown of the 1890’s</figcaption>
</figure>
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/tiana.jpg">
<figcaption>Tiana wearing the <i>robe de style</i> of the 1920’s</figcaption>
</figure>
<small>Art &copy; <a href="//clairehummel.com">Claire Hummel</a></small>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">#columns {
column-width: 250px;
}
#columns figure {
display: inline-block;
border: 1px solid rgba(0,0,0,0.2);
margin: 0;
margin-bottom: 15px;
padding: 10px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
#columns figure img {
width: 100%;
}
#columns figure figcaption {
border-top: 1px solid rgba(0,0,0,0.2);
padding: 10px;
margin-top: 10px;
}</script>
</body>
</html>
Raw
jsbin.tonaqab.css
#columns {
column-width: 250px;
}
#columns figure {
display: inline-block;
border: 1px solid rgba(0,0,0,0.2);
margin: 0;
margin-bottom: 15px;
padding: 10px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
#columns figure img {
width: 100%;
}
#columns figure figcaption {
border-top: 1px solid rgba(0,0,0,0.2);
padding: 10px;
margin-top: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment