<!DOCTYPE html>
<html>
<head>
<title>Kevin's CSS Game Level 1</title>
<style>
body{
background-color:grey;
}
div.webPanel{
max-width:600px;
padding:10px;
margin:15px 15px;
background-color:lightgrey;
border: 1px solid black;
border-radius: 5px;
box-shadow: 10px 10px rgba(0,0,0,0.5);
}
/* ===== level ===== */
div.ggg{
display:inline-block;
position:relative;
background-color:black;
width:300px;
height:300px;
border: 3px solid darkgrey;
}
.ooo{
position:absolute;
width:100%;
height:100%;
background-color:white;
border-radius:50%;
visibility:hidden;/* hidden */
}
.ooo:hover >.ooo{
visibility:visible;
}
.oooStart{
visibility:visible;
background-color:palegoldenrod;
width:15%;
height:15%;
left:30%;
top:10%;
}
.ooo1{transform:translate(-50%,50%);}
.ooo2{transform:translate(-40%,50%);}
.ooo3{transform:translate(-30%,60%);}
.ooo4{transform:translate(-20%,70%);}
.ooo5{transform:translate(20%,70%);}
.ooo6{transform:translate(40%,70%);}
.ooo7{transform:translate(70%,50%);}
.ooo8{transform:translate(80%,10%);}
.ooo9{transform:translate(80%,-10%);}
.ooo10{transform:translate(70%,-50%);}
.ooo11{transform:translate(20%,-80%);}
.ooo12{transform:translate(-20%,-80%);}
.ooo13{transform:translate(-80%,-20%);}
.ooo14{transform:translate(0%,-80%);}
.ooo15{transform:translate(50%,-70%);}
.oooEnd{
background-color:palegreen;
left:70%;
top:-50%;
}
</style>
</head>
<body>
<center>
<div class="webPanel">
<h2>CSS Game</h2>
<p>Here's a game I made with CSS. The goal is to reach the end of the white path with your mouse pointer. But don't stray into the black area, or you'll have to start over!</p>
<center>
<h2>Level 1</h2>
<div class="ggg">
<div class="ooo oooStart">
<div class="ooo ooo1">
<div class="ooo ooo2">
<div class="ooo ooo3">
<div class="ooo ooo4">
<div class="ooo ooo5">
<div class="ooo ooo6">
<div class="ooo ooo7">
<div class="ooo ooo8">
<div class="ooo ooo9">
<div class="ooo ooo10">
<div class="ooo ooo11">
<div class="ooo ooo12">
<div class="ooo ooo13">
<div class="ooo ooo14">
<div class="ooo ooo15">
<a class="ooo oooEnd" href="css_game_Level2.html">
</a></div></div></div></div>
</div></div></div></div></div>
</div></div></div></div></div>
</div></div>
</div>
</center>
</div>
</center>
</body>
</html>