Skip to content

Commit 96857d1

Browse files
glitchycatstudiosglitchycatstudios
committed
finnished menu
1 parent 28edd7c commit 96857d1

4 files changed

Lines changed: 188 additions & 5 deletions

File tree

‎bh/bh.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="/styles/style.css">
7+
<link rel="icon" href="https://glitchycatstudios.github.io/favicon.ico" type="image/x-icon">
8+
<title>Support</title>
9+
</head>
10+
<body>
11+
<big>
12+
<nav>
13+
<ul>
14+
<li><img src="/styles/img/Logo GCS groter.png"></li>
15+
<li><a href="/index.html"><button>Home</button></a></li>
16+
<li><a><button class="active">Blooket Hacker</button></a></li>
17+
<li><a href="/cotm/cotm.html"><button>Cat of the moment</button></a></li>
18+
<li><a href="glitchycatstudios.github.io"><button>To Main Website</button></a></li>
19+
</ul>
20+
</nav>
21+
</big>
22+
<img class="smallimg" src="/styles/img/Logo GCS groter.png">
23+
<div class="burger-menu" onclick="toggleMenu()">
24+
&#9776;
25+
</div>
26+
<small id="small-menu">
27+
<nav>
28+
<ul>
29+
<li><a href="/index.html"><button>Home</button></a></li>
30+
<li><a><button class="active">Blooket Hacker</button></a></li>
31+
<li><a href="/cotm/cotm.html"><button>Cat of the moment</button></a></li>
32+
<li><a href="glitchycatstudios.github.io"><button>To Main Website</button></a></li>
33+
</ul>
34+
</nav>
35+
</small>
36+
<script>
37+
function toggleMenu() {
38+
var menu = document.getElementById("small-menu");
39+
if (menu.style.display === "block") {
40+
menu.style.display = "none";
41+
} else {
42+
menu.style.display = "block";
43+
}
44+
}
45+
</script>
46+
</body>
47+
</html>

‎cotm/cotm.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="/styles/style.css">
7+
<link rel="icon" href="https://glitchycatstudios.github.io/favicon.ico" type="image/x-icon">
8+
<title>Support</title>
9+
</head>
10+
<body>
11+
<big>
12+
<nav>
13+
<ul>
14+
<li><img src="/styles/img/Logo GCS groter.png"></li>
15+
<li><a href="/index.html"><button>Home</button></a></li>
16+
<li><a href="/bh/bh.html"><button>Blooket Hacker</button></a></li>
17+
<li><a><button class="active">Cat of the moment</button></a></li>
18+
<li><a href="glitchycatstudios.github.io"><button>To Main Website</button></a></li>
19+
</ul>
20+
</nav>
21+
</big>
22+
<img class="smallimg" src="/styles/img/Logo GCS groter.png">
23+
<div class="burger-menu" onclick="toggleMenu()">
24+
&#9776;
25+
</div>
26+
<small id="small-menu">
27+
<nav>
28+
<ul>
29+
<li><a href="/index.html"><button>Home</button></a></li>
30+
<li><a href="/bh/bh.html"><button>Blooket Hacker</button></a></li>
31+
<li><a><button class="active">Cat of the moment</button></a></li>
32+
<li><a href="glitchycatstudios.github.io"><button>To Main Website</button></a></li>
33+
</ul>
34+
</nav>
35+
</small>
36+
<script>
37+
function toggleMenu() {
38+
var menu = document.getElementById("small-menu");
39+
if (menu.style.display === "block") {
40+
menu.style.display = "none";
41+
} else {
42+
menu.style.display = "block";
43+
}
44+
}
45+
</script>
46+
</body>
47+
</html>

‎index.html‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,23 @@
1212
<nav>
1313
<ul>
1414
<li><img src="styles/img/Logo GCS groter.png"></li>
15-
<li><a href=""><button class="bigactive">Home</button></a></li>
15+
<li><a><button class="active">Home</button></a></li>
1616
<li><a href="bh/bh.html"><button>Blooket Hacker</button></a></li>
1717
<li><a href="cotm/cotm.html"><button>Cat of the moment</button></a></li>
1818
<li><a href="glitchycatstudios.github.io"><button>To Main Website</button></a></li>
1919
</ul>
2020
</nav>
2121
</big>
22+
<img class="smallimg" src="styles/img/Logo GCS groter.png">
2223
<div class="burger-menu" onclick="toggleMenu()">
2324
&#9776;
2425
</div>
2526
<small id="small-menu">
2627
<nav>
2728
<ul>
28-
<li><img src="styles/img/Logo GCS groter.png"></li>
29-
<li><a href="index.html"><button>Home</button></a></li>
30-
<li><a href="bh.html"><button>Blooket Hacker</button></a></li>
31-
<li><a href="cotm.html"><button>Cat of the moment</button></a></li>
29+
<li><a><button class="active">Home</button></a></li>
30+
<li><a href="bh/bh.html"><button>Blooket Hacker</button></a></li>
31+
<li><a href="cotm/cotm.html"><button>Cat of the moment</button></a></li>
3232
<li><a href="glitchycatstudios.github.io"><button>To Main Website</button></a></li>
3333
</ul>
3434
</nav>
@@ -43,5 +43,16 @@
4343
}
4444
}
4545
</script>
46+
<div class="container">
47+
<h1>Support</h1>
48+
</div>
49+
<div class="container1">
50+
<h1>blooket Hacker support</h1>
51+
<a href="bh/bh.html"><button>To Blooket Hacker Support -></button></a>
52+
</div>
53+
<div class="container2">
54+
<h1>Cat of the moment support.</h1>
55+
<a href="cotm/cotm.html"><button>To Cat of the moment support -></button></a>
56+
</div>
4657
</body>
4758
</html>

‎styles/style.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
body{
2+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
3+
}
14
big{
25
visibility: visible;
36
}
@@ -35,6 +38,11 @@ big nav ul li a button{
3538
big nav ul li a button:hover{
3639
border-color: rgb(196, 31, 234);
3740
}
41+
.active{
42+
background-color: rgb(234, 237, 14);
43+
color: black;
44+
border-color: black;
45+
}
3846
big nav ul li img{
3947
border-radius: 10px;
4048
left: 10px;
@@ -43,6 +51,7 @@ big nav ul li img{
4351
vertical-align: middle;
4452
}
4553
.burger-menu {
54+
visibility: collapse;
4655
display: none;
4756
font-size: 30px;
4857
cursor: pointer;
@@ -55,15 +64,84 @@ big nav ul li img{
5564
small{
5665
visibility: collapse;
5766
}
67+
.smallimg{
68+
visibility: collapse;
69+
height: 100px;
70+
width: 100px;
71+
border-radius: 15px;
72+
position: absolute;
73+
top: -4px;
74+
left: 50%;
75+
transform: translateX(-50%);
76+
}
77+
small nav{
78+
background-color: rgb(121, 115, 115);
79+
color: white;
80+
padding: 10px;
81+
border-radius: 15px;
82+
text-align: center;
83+
margin-top: 10px;
84+
}
85+
small nav ul{
86+
padding: 0;
87+
margin: 0;
88+
list-style: none;
89+
display: flex;
90+
justify-content: center;
91+
align-items: center;
92+
}
93+
small nav ul li{
94+
margin: 0 10px;
95+
}
96+
small nav ul li a{
97+
display: inline-block;
98+
}
99+
small nav ul li a button{
100+
color: white;
101+
background-color: rgb(100, 97, 97);
102+
width: 100px;
103+
height: 50px;
104+
border-style: solid;
105+
border-radius: 15px;
106+
border-color: rgb(255, 255, 255);
107+
margin: auto;
108+
}
109+
small nav ul li a button:hover{
110+
border-color: rgb(196, 31, 234);
111+
}
112+
.container{
113+
justify-self: center;
114+
display: flex;
115+
justify-content: center;
116+
align-items: center;
117+
flex-direction: column;
118+
height: 100px;
119+
width: 50%;
120+
border-radius: 15px;
121+
background-color: rgb(121, 115, 115);
122+
margin: auto;
123+
}
124+
.container a button{
125+
color: white;
126+
background-color: rgb(100, 97, 97);
127+
height: 50px;
128+
border-style: solid;
129+
border-radius: 15px;
130+
border-color: rgb(255, 255, 255);
131+
}
58132
@media screen and (max-width: 700px){
59133
big{
60134
visibility: collapse;
61135
}
62136
.burger-menu {
137+
visibility: visible;
63138
display: block;
64139
}
65140
small{
66141
visibility: visible;
67142
display: none;
68143
}
144+
.smallimg{
145+
visibility: visible;
146+
}
69147
}

0 commit comments

Comments
 (0)