Skip to content

Commit b3240c6

Browse files
NSSTUDIO-htmlNSSTUDIO-html
authored
Create LEVELS.html
Signed-off-by: NSSTUDIO-html <rockingshooters7@gmail.com>
1 parent 0f4e8f6 commit b3240c6

File tree

1 file changed

+103
-0
lines changed

1 file changed

+103
-0
lines changed

‎LEVELS.html‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Levels</title>
5+
<style>
6+
body{
7+
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlKHzcUIsUJQsZEaBKtW9uATahSYHoPOuv-FfcIqft0JKmxxUBp3dSKyg&s=10');
8+
text-align: center;
9+
color:white;
10+
font-family: times;
11+
}
12+
div {
13+
font-family: times;
14+
display: box;
15+
justify-content: center;
16+
align-items: center;
17+
min-height: 15vh;
18+
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6Hqi5b27IUhXDB5alhJzXWkAnle8X8D65vHl1bsCsqZKtGWq-rY1chHw&s=10');
19+
20+
}
21+
22+
.container {
23+
display: box;
24+
grid-template-columns: repeat(1, 5fr);
25+
grid-gap: 1px;
26+
}
27+
28+
button:hover {
29+
background-color: gray; /* Darker Green on Hover */
30+
}
31+
32+
button:active {
33+
background-color: red; /* Darker Green on Click */
34+
border-color:white;
35+
transform: translateY(4px); /* Slight downward shift on click */
36+
}
37+
.level-button {
38+
padding: 15px;
39+
text-align: center;
40+
border: 5px solid;
41+
border-radius: 5px;
42+
border-color: darkred;
43+
background-color: transparent;
44+
color: white;
45+
cursor: pointer;
46+
}
47+
</style>
48+
</head>
49+
<body>
50+
51+
<h1>Levels</h1>
52+
53+
54+
<div class="container">
55+
<button class="level-button">1</button>
56+
<button class="level-button">2</button>
57+
<button class="level-button">3</button>
58+
<button class="level-button">4</button>
59+
<button class="level-button">5</button>
60+
</div>
61+
62+
<div class="container">
63+
<button class="level-button">6</button>
64+
<button class="level-button">7</button>
65+
<button class="level-button">8</button>
66+
<button class="level-button">9</button>
67+
<button class="level-button">10</button>
68+
</div>
69+
70+
<div class="container">
71+
<button class="level-button">11</button>
72+
<button class="level-button">12</button>
73+
<button class="level-button">13</button>
74+
<button class="level-button">14</button>
75+
<button class="level-button">15</button>
76+
</div>
77+
78+
<div class="container">
79+
<button class="level-button">16</button>
80+
<button class="level-button">17</button>
81+
<button class="level-button">18</button>
82+
<button class="level-button">19</button>
83+
<button class="level-button">20</button>
84+
</div>
85+
86+
<div class="container">
87+
<button class="level-button">21</button>
88+
<button class="level-button">22</button>
89+
<button class="level-button">23</button>
90+
<button class="level-button">24</button>
91+
<button class="level-button">25</button>
92+
</div>
93+
94+
<div class="container">
95+
<button class="level-button">26</button>
96+
<button class="level-button">27</button>
97+
<button class="level-button">28</button>
98+
<button class="level-button">29</button>
99+
<button class="level-button">30</button>
100+
</div>
101+
102+
</body>
103+
</html>

0 commit comments

Comments
 (0)