sundowndev
/
Detank
mirror of https://github.com/sundowndev/Detank.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

de_tank v2

master
orphevs 2017-12-09 00:44:51 +01:00
parent bbac68a1ea
commit 0d954a188b
3 changed files with 252 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
assets/css/style.css
View File

@ -3,6 +3,7 @@ body{
padding: 0;
font-family: sans-serif;
background: #232323;
user-select: none;
}
.header{
@ -17,57 +18,32 @@ body{
color: #fff;
}
.container{
max-width: 1140px;
margin: auto;
}
.map{
width: 1170px;
height: 460px;
border: solid 3px #000;
text-align: center;
background: url(../img/bg_sand.png) repeat;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
display: inline-block;
padding-top: 7px;
padding-bottom: 3px;
}
.tank1{
height: 36px;
width: 70px;
background: url(../img/tank_green.png) no-repeat;
position: absolute;
border: solid 1px red;
.line{
display: inline-block;
}
.tank2{
height: 36px;
width: 70px;
background: url(../img/tank_orange.png) no-repeat;
position: absolute;
left: 50px;
top: 100px;
display: none;
}
.bullet{
height: 6px;
width: 6px;
background: #fff;
position: absolute;
left: 70px;
top: 15px;
}
.directionLeft{
transform: rotate(180deg);
}
.directionRight{
transform: rotate(0deg);
}
.directionUp{
transform: rotate(-90deg);
}
.directionDown{
transform: rotate(90deg);
.col{
height: 50px;
width: 50px;
border: solid 0px #000;
display: inline-block;
}
.line-3 > .col-12{
background: url(../img/tank_bg.png) no-repeat;
background-position: 0px 0px;
}

BIN
assets/img/tank_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

239
index.html
View File

@ -1,20 +1,241 @@
<html>
<head>
<meta charset="UTF-8">
<title>de_tank</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<section class="header">
<h1>de_tank</h1>
</section>
<section class="map">
<div class="tank1">
<div class="bullet"></div>
<section class="header">
<h1>de_tank</h1>
</section>
<div class="container">
<section class="map">
<div class="line line-1">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-2">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-3">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-4">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-5">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-6">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-7">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-8">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-9">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-10">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
</section>
</div>
<div class="tank2"></div>
</section>
</body>
<script src="assets/js/script.js"></script>
</html>
</html>