-
Notifications
You must be signed in to change notification settings - Fork 14
/
mario.html
86 lines (81 loc) · 7.85 KB
/
mario.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mario</title>
<style>
body {
background-color: #52acff;
}
.pixel {
position: absolute;
top: 30%;
left: calc((100% - 5px)/2);
height: 10px;
width: 10px;
background: #212121;
box-shadow: -10px 0 #212121, 10px 0 #212121, 20px 0 #212121, 30px 0 #52acff, 40px 0 #212121, 50px 0 #212121, 60px 0 #212121,
/*2*/
-30px 10px #212121, -20px 10px #212121, -10px 10px #C60300, 0 10px #C60300, 10px 10px #C60300, 20px 10px #212121, 30px 10px #212121, 40px 10px #F4CEB2, 50px 10px #F4CEB2, 60px 10px #F4CEB2, 70px 10px #212121,
/*3*/
-40px 20px #212121, -30px 20px #C60300, -20px 20px #C60300, -10px 20px #C60300, 0 20px #C60300, 10px 20px #C60300, 20px 20px #C60300, 30px 20px #212121, 40px 20px #F4CEB2, 50px 20px #F4CEB2, 60px 20px #F4CEB2, 70px 20px #212121,
/*4*/
-50px 30px #212121, -40px 30px #C60300, -30px 30px #C60300, -20px 30px #C60300, -10px 30px #212121, 0px 30px #212121, 10px 30px #212121, 20px 30px #212121, 30px 30px #212121, 40px 30px #212121, 50px 30px #F4CEB2, 60px 30px #F4CEB2, 70px 30px #212121,
/*5*/
-60px 40px #212121, -50px 40px #C60300, -40px 40px #C60300, -30px 40px #C60300, -20px 40px #212121, -10px 40px #212121, 0px 40px #212121, 10px 40px #212121, 20px 40px #212121, 30px 40px #212121, 40px 40px #212121, 50px 40px #212121, 60px 40px #F4CEB2, 70px 40px #212121,
/*6*/
-60px 50px #212121, -50px 50px #C60300, -40px 50px #212121, -30px 50px #212121, -20px 50px #F4CEB2, -10px 50px #F4CEB2, 0 50px #F4CEB2, 10px 50px #F4CEB2, 20px 50px #F4CEB2, 30px 50px #F4CEB2, 40px 50px #F4CEB2, 50px 50px #212121, 60px 50px #212121,
/*7*/
-70px 60px #212121, -60px 60px #212121, -50px 60px #212121, -40px 60px #212121, -30px 60px #F4CEB2, -20px 60px #F4CEB2, -10px 60px #F4CEB2, 0 60px #212121, 10px 60px #F4CEB2, 20px 60px #212121, 30px 60px #F4CEB2, 40px 60px #212121, 50px 60px #C60300, 60px 60px #C60300, 70px 60px #212121,
/*8*/
-70px 70px #212121, -60px 70px #F4CEB2, -50px 70px #212121, -40px 70px #212121, -30px 70px #F4CEB2, -20px 70px #F4CEB2, -10px 70px #F4CEB2, 0 70px #212121, 10px 70px #F4CEB2, 20px 70px #212121, 30px 70px #F4CEB2, 40px 70px #212121, 50px 70px #C60300, 60px 70px #C60300, 70px 70px #212121,
/*9*/
-80px 80px #212121, -70px 80px #F4CEB2, -60px 80px #F4CEB2, -50px 80px #212121, -40px 80px #212121, -30px 80px #212121, -20px 80px #F4CEB2, -10px 80px #F4CEB2, 0 80px #F4CEB2, 10px 80px #F4CEB2, 20px 80px #F4CEB2, 30px 80px #F4CEB2, 40px 80px #F4CEB2, 50px 80px #212121, 60px 80px #C60300, 70px 80px #212121,
/*10*/
-80px 90px #212121, -70px 90px #F4CEB2, -60px 90px #F4CEB2, -50px 90px #F4CEB2, -40px 90px #212121, -30px 90px #F4CEB2, -20px 90px #F4CEB2, -10px 90px #212121, 0 90px #F4CEB2, 10px 90px #F4CEB2, 20px 90px #F4CEB2, 30px 90px #F4CEB2, 40px 90px #F4CEB2, 50px 90px #212121, 60px 90px #C60300, 70px 90px #212121,
/*11*/
-70px 100px #212121, -60px 100px #F4CEB2, -50px 100px #F4CEB2, -40px 100px #F4CEB2, -30px 100px #F4CEB2, -20px 100px #212121, -10px 100px #212121, 0 100px #212121, 10px 100px #212121, 20px 100px #F4CEB2, 30px 100px #F4CEB2, 40px 100px #212121, 50px 100px #212121, 60px 100px #212121,
/*12*/
-60px 110px #212121, -50px 110px #212121, -40px 110px #F4CEB2, -30px 110px #F4CEB2, -20px 110px #F4CEB2, -10px 110px #F4CEB2, 0 110px #212121, 10px 110px #212121, 20px 110px #212121, 30px 110px #212121, 40px 110px #212121, 50px 110px #C60300, 60px 110px #212121,
/*13*/
-50px 120px #212121, -40px 120px #212121, -30px 120px #212121, -20px 120px #F4CEB2, -10px 120px #F4CEB2, 0 120px #F4CEB2, 10px 120px #F4CEB2, 20px 120px #F4CEB2, 30px 120px #212121, 40px 120px #C60300, 50px 120px #C60300, 60px 120px #212121,
/*14*/
-60px 130px #212121, -50px 130px #C60300, -40px 130px #C60300, -30px 130px #C60300, -20px 130px #212121, -10px 130px #212121, 0 130px #212121, 10px 130px #212121, 20px 130px #212121, 30px 130px #212121, 40px 130px #C60300, 50px 130px #212121,
/*15*/
-70px 140px #212121, -60px 140px #C60300, -50px 140px #C60300, -40px 140px #C60300, -30px 140px #C60300, -20px 140px #C60300, -10px 140px #212121, 0 140px #212121, 10px 140px #C60300, 20px 140px #C60300, 30px 140px #212121, 40px 140px #212121,
/*16*/
-80px 150px #212121, -70px 150px #C60300, -60px 150px #C60300, -50px 150px #C60300, -40px 150px #212121, -30px 150px #212121, -20px 150px #212121, -10px 150px #C60300, 0 150px #212121, 10px 150px #C60300, 20px 150px #C60300, 30px 150px #C60300, 40px 150px #212121, 50px 150px #212121,
/*17*/
-80px 160px #212121, -70px 160px #C60300, -60px 160px #C60300, -50px 160px #212121, -40px 160px #F4CEB2, -30px 160px #F4CEB2, -20px 160px #F4CEB2, -10px 160px #212121, 0 160px #212121, 10px 160px #212121, 20px 160px #C60300, 30px 160px #C60300, 40px 160px #C60300, 50px 160px #212121,
/*18*/
-80px 170px #212121, -70px 170px #C60300, -60px 170px #212121, -50px 170px #F4CEB2, -40px 170px #F4CEB2, -30px 170px #F4CEB2, -20px 170px #F4CEB2, -10px 170px #F4CEB2, 0 170px #212121, 10px 170px #212121, 20px 170px #212121, 30px 170px #C60300, 40px 170px #C60300, 50px 170px #212121, 60px 170px #212121,
/*19*/
-70px 180px #212121, -60px 180px #212121, -50px 180px #F4CEB2, -40px 180px #F4CEB2, -30px 180px #F4CEB2, -20px 180px #F4CEB2, -10px 180px #F4CEB2, 0 180px #212121, 10px 180px #ffff31, 20px 180px #ffff31, 30px 180px #212121, 40px 180px #212121, 50px 180px #ffff31, 60px 180px #212121,
/*20*/
-60px 190px #212121, -50px 190px #212121, -40px 190px #F4CEB2, -30px 190px #F4CEB2, -20px 190px #F4CEB2, -10px 190px #212121, 0 190px #212121, 10px 190px #ffff31, 20px 190px #ffff31, 30px 190px #212121, 40px 190px #212121, 50px 190px #5E402E, 60px 190px #5E402E, 70px 190px #212121,
/*21*/
-70px 200px #212121, -60px 200px #5E402E, -50px 200px #5E402E, -40px 200px #212121, -30px 200px #212121, -20px 200px #212121, -10px 200px #212121, 0 200px #212121, 10px 200px #212121, 20px 200px #212121, 30px 200px #212121, 40px 200px #5E402E, 50px 200px #5E402E, 60px 200px #5E402E, 70px 200px #212121,
/*22*/
-80px 210px #212121, -70px 210px #5E402E, -60px 210px #5E402E, -50px 210px #212121, -40px 210px #212121, -30px 210px #212121, -20px 210px #212121, -10px 210px #212121, 0 210px #212121, 10px 210px #212121, 20px 210px #212121, 30px 210px #212121, 40px 210px #5E402E, 50px 210px #5E402E, 60px 210px #5E402E, 70px 210px #212121,
/*23*/
-80px 220px #212121, -70px 220px #5E402E, -60px 220px #5E402E, -50px 220px #212121, -40px 220px #212121, -30px 220px #212121, -20px 220px #212121, -10px 220px #212121, 0 220px #212121, 10px 220px #212121, 20px 220px #212121, 30px 220px #212121, 40px 220px #5E402E, 50px 220px #5E402E, 60px 220px #5E402E, 70px 220px #212121,
/*24*/
-80px 230px #212121, -70px 230px #5E402E, -60px 230px #5E402E, -50px 230px #212121, -40px 230px #212121, -30px 230px #212121, -20px 230px #212121, -10px 230px #52acff, 0 230px #52acff, 10px 230px #52acff, 20px 230px #52acff, 30px 230px #212121, 40px 230px #5E402E, 50px 230px #5E402E, 60px 230px #212121, 70px 230px #212121,
/*25*/
-80px 240px #212121, -70px 240px #5E402E, -60px 240px #5E402E, -50px 240px #212121, -40px 240px #212121, -30px 240px #52acff, -20px 240px #52acff, -10px 240px #52acff, 0 240px #52acff, 10px 240px #52acff, 20px 240px #52acff, 30px 240px #52acff, 40px 240px #212121, 50px 240px #212121, 60px 240px #212121,
/*26*/
-70px 250px #212121, -60px 250px #212121;
}
.footer {
position: fixed;
bottom: 0;
right: 1%;
}
</style>
</head>
<body>
<div class="pixel"></div>
</body>
</html>