Skip to content

Commit 111fdd8

Browse files
Fluffy728Fluffy728
authored
Update list.html
1 parent 3b4d835 commit 111fdd8

File tree

1 file changed

+142
-0
lines changed

1 file changed

+142
-0
lines changed

‎Reviews/list.html‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,143 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Reviews | Coding Hut</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<style>
7+
body {
8+
overflow-x: hidden;
9+
font-family: Sans-Serif;
10+
margin: 0;
11+
}
12+
<link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet'>
13+
<style>
14+
body {
15+
font-family: 'Comfortaa';font-size: 22px;
16+
}
117

18+
.menu-container {
19+
position: relative;
20+
display: flex;
21+
align-items: center;
22+
justify-content: space-between;
23+
background: #c04d4d;
24+
padding: 20px;
25+
z-index: 1;
26+
user-select: none;
27+
box-sizing: border-box;
28+
}
29+
30+
.menu-logo img {
31+
max-height: 40px;
32+
max-width: 100px;
33+
flex-shrink: 0;
34+
}
35+
36+
.menu-container a {
37+
text-decoration: none;
38+
color: #ffffff;
39+
transition: color 0.3s ease;
40+
}
41+
42+
.menu-container a:hover {
43+
color: #50e3c2;
44+
}
45+
46+
.menu ul {
47+
list-style: none;
48+
display: flex;
49+
padding: 0;
50+
margin: 0;
51+
}
52+
53+
.menu li {
54+
padding: 0 20px;
55+
font-size: 22px;
56+
}
57+
58+
/* Mobile Styles */
59+
@media only screen and (max-width: 767px) {
60+
.menu-container {
61+
flex-direction: column;
62+
align-items: flex-start;
63+
}
64+
65+
.menu-logo {
66+
margin-bottom: 10px;
67+
}
68+
69+
.menu {
70+
display: none;
71+
width: 100%;
72+
flex-direction: column;
73+
}
74+
75+
.menu ul {
76+
flex-direction: column;
77+
width: 100%;
78+
}
79+
80+
.menu li {
81+
padding: 10px 0;
82+
text-align: center;
83+
}
84+
85+
/* Menu button */
86+
.hamburger {
87+
display: block;
88+
font-size: 30px;
89+
cursor: pointer;
90+
}
91+
}
92+
93+
/* Desktop Styles */
94+
@media only screen and (min-width: 768px) {
95+
.menu {
96+
display: flex;
97+
justify-content: space-between;
98+
width: 100%;
99+
}
100+
101+
.hamburger {
102+
display: none;
103+
}
104+
}
105+
</style>
106+
</head>
107+
<body>
108+
<nav class="menu-container">
109+
<!-- Logo -->
110+
<a href="https://scratch-coding-hut.github.io" class="menu-logo">
111+
<img src="https://i.postimg.cc/6qgPbyGH/temp-Image-BJ164c.avif" alt="Coding Hut Logo"/>
112+
</a>
113+
114+
<!-- Menu for Mobile -->
115+
<span class="hamburger" onclick="toggleMenu()">&#9776;</span>
116+
117+
<!-- Menu Items -->
118+
<div class="menu">
119+
<ul>
120+
<li><a href="https://scratch-coding-hut.github.io">Home</a></li>
121+
<li><a href="https://scratch-coding-hut.github.io/about">About</a></li>
122+
<li><a href="https://scratch.mit.edu/discuss/topic/652178/">Scratch Forum</a></li>
123+
<li><a href="https://scratch-coding-hut.github.io/Wiki/sitemaplinks">Wiki | FAQ | More Links</a></li>
124+
</ul>
125+
<ul>
126+
<li><a href="https://scratch-coding-hut.github.io/messages">Messages</a></li>
127+
<li><a href="https://scratch-coding-hut.github.io/account">My Account</a></li>
128+
</ul>
129+
</div>
130+
</nav>
131+
132+
<h1 style="text-align:center;"><b>Coding Hut</b></h1>
133+
<h2 style="text-align:center;">Reviews</h2>
134+
<p style="text-align:center;">Here are some reviews from our customers.</p>
135+
136+
<script>
137+
function toggleMenu() {
138+
var menu = document.querySelector('.menu');
139+
menu.style.display = menu.style.display === 'flex' ? 'none' : 'flex';
140+
}
141+
</script>
142+
</body>
143+
</html>

0 commit comments

Comments
 (0)