yzziizzy
/
Urchinator


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
							<!DOCTYPE HTML>

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Just Jerky</title>
	<link href="justjerky.css" type="text/css" rel="stylesheet" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<style>
	* {
		margin: 0;
		border: 0;
		padding: 0;
		}
		
	body {
		width: 1000px;
		height: 500px;
		position: relative;
		}
		
	.loadscreen {
		width: 1000px;
		display: block;
		margin: 0 auto;
		}
		
	.shading1 {
		width: 450px;
		height: 500px;
		background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
		position: absolute;
		top: 0;
		left: 0;
		}
		
	.shading2 {
		width: 350px;
		height: 500px;
		background: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0));
		position: absolute;
		right: 0;
		top: 0;
		}	

	.instructions {
		width: 300px;
		position: absolute;
		top: 200px;
		left: 50%;
		text-align: center;
		font-size: 20px;
		font-family: sans-serif;
		color: rgb(92, 30, 10);
		margin-left: -155px;
		}
	
	.instructions > h2 {
		font-size: 19pt;
		}
		
	.loading {
		font-family: sans-serif;
		position: absolute;
		top: 430px;
		left: 50%;
		font-size: 20px;
		margin-left: -30px;
		}
		
	.loadbar {
		width: 250px;
		height: 15px;
		border: 2px solid white;
		background-color: white;
		position: absolute;
		top: 460px;
		left: 50%;
		margin-left: -125px;
		border-radius: 4px;
		}
		
	.progress {
		width: 160px;
		height: 100%;
		background-color: blue;
		}
	</style>
</head>

<body>
<img class="loadscreen" src="Loading-Screen.jpg" />
<div class="shading1"> </div>
<div class="shading2"> </div>
<div class="instructions"><h2>How to Play:</h2>Eat the sea urchins before they eat the kelp. Use the arrow keys to move. Return to the surface and press space repeatedly to eat an urchin.</div>
<div class="loading">Loading</div>
<div class="loadbar"><div class="progress"></div></div>
</body>

</html>