wboykinm/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Go check this s*** out. Seriously, run don't walk.

  
## 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>
	<!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>