Skip to content

Instantly share code, notes, and snippets.

@katherineschultz

katherineschultz/jsbin.OxIpELe.css

Created October 9, 2013 02:46
Show Gist options
  • Save katherineschultz/6895388 to your computer and use it in GitHub Desktop.
Save katherineschultz/6895388 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.OxIpELe.css
h1 {
border: 1px solid black;
padding: 15px;
}
.gender-container {
float:right;
width: 456px;
border: 1px solid black;
text-align: center;
margin: 5px;
}
.footer {
clear: both;
border: 1px solid black;
padding: 5px;
}
.picture-frame {
float:right;
border: 1px solid white;
width: 200px;
padding: 10px;
text-align: center;
margin: 3px;
}
.tsl-logo {
float:right;
}
Raw
jsbin.OxIpELe.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<h1>Front-end Yearbook <img class="tsl-logo" height="50px" src="http://www.starterleague.com/assets/new-sl-logo.png" alt=""></h1>
<div class="gender-container">
<h2>Girls</h2>
<div class="picture-frame">
<img src="http://portal.starterleague.com/media/W1siZiIsIjIwMTMvMDgvMDQvMTcvNDEvNDAvMjA5L2NhaXR5X21vcmFuLmpwZyJdLFsicCIsInRodW1iIiwiMjAweDIwMCMiXV0/caity-moran.jpg" alt="">
Caity Moran
</div>
<div class="picture-frame">
<img src="http://portal.starterleague.com/media/W1siZiIsIjIwMTMvMDkvMzAvMjMvMjMvNDMvMjkzL0VsaXphYmV0aF9IYXJncmVhdmVzLmpwZyJdLFsicCIsInRodW1iIiwiMjAweDIwMCMiXV0/Elizabeth%20Hargreaves.jpg" alt="">
Elizabeth Hargreaves
</div>
<div class="picture-frame">
<img src="http://portal.starterleague.com/media/W1siZiIsIjIwMTMvMDkvMzAvMjMvMTMvMTkvNzIxL0hlYXRoZXJfTWVpZXIuanBnIl0sWyJwIiwidGh1bWIiLCIyMDB4MjAwIyJdXQ/Heather%20Meier.jpg" alt="">
Heather Meier
</div>
<div class="picture-frame">
<img src="http://portal.starterleague.com/media/W1siZiIsIjIwMTMvMTAvMDMvMTUvNTcvMzIvMTM4L0phY2x5bl9WYW5TbG90ZW4uanBnIl0sWyJwIiwidGh1bWIiLCIyMDB4MjAwIyJdXQ/Jaclyn%20VanSloten.jpg" alt="">
Jaclyn VanSloten
</div>
<div class="picture-frame">
<img src="http://portal.starterleague.com/media/W1siZiIsIjIwMTMvMDkvMzAvMjMvMTMvMzUvMjU0L0plYW5fWmhhbmcuanBnIl0sWyJwIiwidGh1bWIiLCIyMDB4MjAwIyJdXQ/Jean%20Zhang.jpg" alt="">
Jean Zhang
</div>
<div class="picture-frame">
<img src="http://portal.starterleague.com/media/W1siZiIsIjIwMTMvMDkvMzAvMjMvMTMvNTgvODQwL0plc3NpY2FfQWRhbXMuanBnIl0sWyJwIiwidGh1bWIiLCIyMDB4MjAwIyJdXQ/Jessica%20Adams.jpg" alt="">
Jessica Adams
</div>
<div class="picture-frame">
<img src="http://portal.starterleague.com/media/W1siZiIsIjIwMTMvMDkvMzAvMjMvMTQvNDgvMTY2L0thdGhlcmluZV9TY2h1bHR6LmpwZyJdLFsicCIsInRodW1iIiwiMjAweDIwMCMiXV0/Katherine%20Schultz.jpg" alt="">
Katherine Schultz
</div>
<div class="picture-frame">
<img src="http://portal.starterleague.com/media/W1siZiIsIjIwMTMvMDkvMzAvMjMvMTUvMjQvOTYwL0tlcnJ5X1ZpdGFsaS5qcGciXSxbInAiLCJ0aHVtYiIsIjIwMHgyMDAjIl1d/Kerry%20Vitali.jpg" alt="">
Kerry Vitali
</div>
<div class="picture-frame">
<img height="200" src="http://portal.starterleague.com/assets/flag-avatar-ef670ff1874105fd059861d7e1c3b179.png" alt="">
Kristin Heinikoff
</div>
<div class="picture-frame">
<img height="200" src="http://portal.starterleague.com/assets/flag-avatar-ef670ff1874105fd059861d7e1c3b179.png" alt="">
Maryellen Wheatley
</div>
</div>
<div class="gender-container">
<h2>Boys</h2>
<div class="picture-frame">
<img src="http://portal.starterleague.com/media/W1siZiIsIjIwMTMvMTAvMDIvMTQvMzEvMjQvMjY5L0FydGh1cl9Nb3J0ZWdhLmpwZyJdLFsicCIsInRodW1iIiwiMjAweDIwMCMiXV0/Arthur%20Mortega.jpg" alt="">
Arthur Mortega
</div>
<div class="picture-frame">
<img src="http://portal.starterleague.com/media/W1siZiIsIjIwMTMvMDYvMjgvMTgvNTYvMTUvNjc5L0JsYWtlX0Nyb255bi5qcGciXSxbInAiLCJ0aHVtYiIsIjIwMHgyMDAjIl1d/Blake%20Cronyn.jpg" alt="">
Blake Cronyn
</div>
<div class="picture-frame">
<img src="http://portal.starterleague.com/media/W1siZiIsIjIwMTMvMTAvMDMvMTUvNTcvMTAvNDA4L0NhbWVyb25fSGVwYnVybi5qcGciXSxbInAiLCJ0aHVtYiIsIjIwMHgyMDAjIl1d/Cameron%20Hepburn.jpg" alt="">
Cameron Hepburn
</div>
<div class="picture-frame">
<img src="http://portal.starterleague.com/media/W1siZiIsIjIwMTMvMDkvMzAvMjMvMTMvMDMvMjQ4L0VyaWNfQnJvaG1hbi5qcGciXSxbInAiLCJ0aHVtYiIsIjIwMHgyMDAjIl1d/Eric%20Brohman.jpg" alt="">
Eric Brohman
</div>
<div class="picture-frame">
<img src="http://portal.starterleague.com/media/W1siZiIsIjIwMTMvMDkvMzAvMjMvMTQvMTMvNTE5L0pvc2VwaF9GYXJydWdnaW8uanBnIl0sWyJwIiwidGh1bWIiLCIyMDB4MjAwIyJdXQ/Joseph%20Farruggio.jpg" alt="">
Joseph Farruggio
</div>
<div class="picture-frame">
<img src="http://portal.starterleague.com/media/W1siZiIsIjIwMTMvMDkvMzAvMjMvMjYvMjcvMTcyL01hcmtfTWFuYWxheXNheS5qcGciXSxbInAiLCJ0aHVtYiIsIjIwMHgyMDAjIl1d/Mark%20Manalaysay.jpg" alt="">
Mark Manalaysay
</div>
<div class="picture-frame">
<img src="http://portal.starterleague.com/media/W1siZiIsIjIwMTMvMDkvMzAvMjMvMTYvMDkvNjE4L01pY2hhZWxfUm9iaW4uanBnIl0sWyJwIiwidGh1bWIiLCIyMDB4MjAwIyJdXQ/Michael%20Robin.jpg" alt="">
Michael Robin
</div>
<div class="picture-frame">
<img src="http://portal.starterleague.com/media/W1siZiIsIjIwMTMvMDkvMzAvMjMvMTYvMjcvNy9QaGlsbGlwX0JhdHRhLmpwZyJdLFsicCIsInRodW1iIiwiMjAweDIwMCMiXV0/Phillip%20Batta.jpg" alt="">
Phillip Batta
</div>
<div class="picture-frame">
<img src="http://portal.starterleague.com/media/W1siZiIsIjIwMTMvMDkvMzAvMjMvMjEvMTgvMjczL1NoYXduX0JhdGVtYW4uanBnIl0sWyJwIiwidGh1bWIiLCIyMDB4MjAwIyJdXQ/Shawn%20Bateman.jpg" alt="">
Shawn Bateman
</div>
</div>
<div class="clear"></div>
<div class="footer">Copyright yadda yadda yadda</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment