A single selection from http://a.singlediv.com/ by Lynn Fisher by wboykinm

index.html

<!DOCTYPE html>
<html>
<head>

  <style>
  /* GROUNDWORK */
  @media (max-width: 500px) {
  }
  .entry {
  text-align: center;
  min-height: 400px;
  position: relative;
  }
  .entry div {
  position: absolute;
  left: 50%;
  top: 50%;
  }
  .entry div:before,
  .entry div:after {
  display: block;
  content: '';
  position: absolute;
  }
  @media (max-width: 400px) {
  .entry div:not(.no-scale) {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  }
  .cf:before,
  .cf:after {
  content: " ";
  display: table;
  }
  .cf:after {
  clear: both;
  }
  @media all and (min-width: 960px) {
  .entry {
    float: left;
    width: 50%;
  }
  .entry.wide {
    width: 100%;
  }
  }

  /* HERE'S THE GOOD STUFF */
  #cassette {
  background: #ccc;
  }

  #cassette div {
  width: 180px;
  height: 120px;
  margin-left: -90px;
  margin-top: -60px;
  border-radius: 5px;
  background-image: linear-gradient(to right,#444 10px,transparent 10px),linear-gradient(to left,#444 10px,transparent 10px),linear-gradient(135deg,#444 20px,transparent 20px),linear-gradient(-135deg,#444 20px,transparent 20px),linear-gradient(to bottom,transparent 35px,#B58000 35px,#B58000 43px,#593067 43px,#593067 51px,#FDF7C8 51px,#FDF7C8 59px,#A2902E 59px,#A2902E 67px,#2A1E28 67px,#2A1E28 75px,transparent 75px),linear-gradient(to bottom,transparent 10px,#f7f7f7 10px,#f7f7f7 85px,transparent 85px),linear-gradient(to top,transparent 26px,#444 26px),linear-gradient(105deg,#444 70px,#333 70px,#333 73px,transparent 73px),linear-gradient(-105deg,#444 70px,#333 70px,#333 73px,transparent 73px),linear-gradient(to top,#444 24px,#777 24px,#777 26px,#444 26px);
  box-shadow: -4px -4px 2px rgba(0,0,0,0.2);
  }

  #cassette div:before {
  width: 90px;
  height: 26px;
  margin-left: -45px;
  left: 50%;
  top: 41px;
  background-color: #ccc;
  background-image: linear-gradient(to bottom,#444 5px,transparent 5px),linear-gradient(to top,#444 5px,transparent 5px),linear-gradient(to right,#444 30px,transparent 30px),linear-gradient(to left,#444 30px,transparent 30px),radial-gradient(circle at 10px 12px,#a0522d 32px,transparent 32px);
  border-radius: 30px;
  }

  #cassette div:after {
  width: 5px;
  height: 5px;
  background: #999;
  border-radius: 50%;
  box-shadow: 165px 0 0 #999,0 104px 0 #999,165px 104px 0 #999,55px 101px 0 1px #222,68px 98px 0 1px #222,98px 98px 0 1px #222,110px 101px 0 1px #222,51px 38px 0 #444,114px 38px 0 #444,44px 46px 0 #444,58px 46px 0 #444,107px 46px 0 #444,121px 46px 0 #444,51px 53px 0 #444,114px 53px 0 #444,51px 46px 0 6px #ccc,114px 46px 0 6px #ccc;
  left: 5px;
  top: 5px;
  }
  </style>
  <title></title>
</head>
<body class="cf">
  <div class="entry wide" id="cassette">
    <div></div>
  </div>
</body>
</html>