Skip to content

Commit ee0870c

Browse files
mcgdjmcgdj
authored
Update index.html
Bugfixes related to Issue #2
1 parent c9a7a0c commit ee0870c

1 file changed

Lines changed: 110 additions & 227 deletions

File tree

‎index.html‎

Lines changed: 110 additions & 227 deletions
Original file line numberDiff line numberDiff line change
@@ -1,233 +1,116 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>Coding Hut Website.</title>
5-
6-
<nav class="menu-container">
7-
<!-- burger menu -->
8-
<input type="checkbox" aria-label="Toggle menu" />
9-
<span></span>
10-
<span></span>
11-
<span></span>
12-
13-
<!-- logo -->
14-
<a href="scratch-coding-hut.github.io" class="menu-logo">
15-
<img src="https://i.postimg.cc/6qgPbyGH/temp-Image-BJ164c.avif" alt="My Awesome Website"/>
16-
</a>
17-
18-
<!-- menu items -->
19-
<div class="menu">
20-
<ul>
21-
<li>
22-
<a href="https://scratch-coding-hut.github.io">
23-
Home
24-
</a>
25-
</li>
26-
<li>
27-
<a href="https://scratch-coding-hut.github.io/about">
28-
About
29-
</a>
30-
</li>
31-
<li>
32-
<a href="https://scratch.mit.edu/discuss/topic/652178/">
33-
Scratch Forum Post
34-
</a>
35-
</li>
36-
<li>
37-
<a href="https://scratch-coding-hut.github.io/sitemaplinks">
38-
More...
39-
</a>
40-
</li>
41-
</ul>
42-
<ul>
43-
<li>
44-
<a href="https://scratch-coding-hut.github.io/account">
45-
My Account
46-
</a>
47-
</li>
48-
</ul>
49-
</div>
50-
</nav>
4+
<title>Coding Hut Website</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+
13+
.menu-container {
14+
position: relative;
15+
display: flex;
16+
align-items: center;
17+
justify-content: space-between;
18+
background: #c04d4d;
19+
padding: 20px;
20+
z-index: 1;
21+
user-select: none;
22+
box-sizing: border-box;
23+
}
24+
25+
.menu-logo img {
26+
max-height: 40px;
27+
max-width: 100px;
28+
flex-shrink: 0;
29+
}
30+
31+
.menu-container a {
32+
text-decoration: none;
33+
color: #ffffff; /* Changed for visibility */
34+
transition: color 0.3s ease;
35+
}
36+
37+
.menu-container a:hover {
38+
color: #50e3c2;
39+
}
40+
41+
.menu ul {
42+
list-style: none;
43+
display: flex;
44+
padding: 0;
45+
margin: 0;
46+
}
47+
48+
.menu li {
49+
padding: 0 20px;
50+
font-size: 22px;
51+
}
52+
53+
/* Mobile Styles */
54+
@media only screen and (max-width: 767px) {
55+
.menu-container {
56+
flex-direction: column;
57+
align-items: flex-start;
58+
}
59+
60+
.menu-logo {
61+
margin-bottom: 10px;
62+
}
63+
64+
.menu {
65+
width: 100%;
66+
display: flex;
67+
flex-direction: column;
68+
}
69+
70+
.menu ul {
71+
flex-direction: column;
72+
width: 100%;
73+
}
74+
75+
.menu li {
76+
padding: 10px 0;
77+
text-align: center;
78+
}
79+
}
80+
81+
/* Desktop Styles */
82+
@media only screen and (min-width: 768px) {
83+
.menu {
84+
display: flex;
85+
justify-content: space-between;
86+
width: 100%;
87+
}
88+
}
89+
</style>
5190
</head>
5291
<body>
53-
<h1><center><b>Coding Hut</b></center></h1>
54-
<h2>Welcome to the offical Coding Hut website.</h2>
55-
56-
Remember that Coding Hut was founded by @MyScratchedAccount on the Dec. 27, 2022</body>
92+
<nav class="menu-container">
93+
<!-- Logo -->
94+
<a href="https://scratch-coding-hut.github.io" class="menu-logo">
95+
<img src="https://i.postimg.cc/6qgPbyGH/temp-Image-BJ164c.avif" alt="Coding Hut Logo"/>
96+
</a>
97+
98+
<!-- Menu Items -->
99+
<div class="menu">
100+
<ul>
101+
<li><a href="https://scratch-coding-hut.github.io">Home</a></li>
102+
<li><a href="https://scratch-coding-hut.github.io/about">About</a></li>
103+
<li><a href="https://scratch.mit.edu/discuss/topic/652178/">Scratch Forum</a></li>
104+
<li><a href="https://scratch-coding-hut.github.io/sitemaplinks">More...</a></li>
105+
</ul>
106+
<ul>
107+
<li><a href="https://scratch-coding-hut.github.io/account">My Account</a></li>
108+
</ul>
109+
</div>
110+
</nav>
111+
112+
<h1 style="text-align:center;"><b>Coding Hut</b></h1>
113+
<h2 style="text-align:center;">Welcome to the official Coding Hut website.</h2>
114+
<p style="text-align:center;">Remember that Coding Hut was founded by @MyScratchedAccount on Dec. 27, 2022</p>
115+
</body>
57116
</html>
58-
59-
<style>body {
60-
overflow-x: hidden;
61-
font-family: Sans-Serif;
62-
margin: 0;
63-
}
64-
65-
.menu-container {
66-
position: relative;
67-
display: flex;
68-
align-items: center;
69-
margin-bottom: 20px;
70-
background: #c04d4d;
71-
color: #ffffff;
72-
padding: 20px;
73-
z-index: 1;
74-
-webkit-user-select: none;
75-
user-select: none;
76-
box-sizing: border-box;
77-
}
78-
79-
.menu-logo {
80-
line-height: 0;
81-
margin: 0 20px;
82-
}
83-
84-
.menu-logo img {
85-
max-height: 40px;
86-
max-width: 100px;
87-
flex-shrink: 0;
88-
}
89-
90-
.menu-container a {
91-
text-decoration: none;
92-
color: #c04d4d;
93-
transition: color 0.3s ease;
94-
}
95-
96-
.menu-container a:hover {
97-
color: #50e3c2;
98-
}
99-
100-
.menu-container input {
101-
display: block;
102-
width: 35px;
103-
height: 25px;
104-
margin: 0;
105-
position: absolute;
106-
cursor: pointer;
107-
opacity: 0; /* hide this */
108-
z-index: 2; /* and place it over the hamburger */
109-
-webkit-touch-callout: none;
110-
}
111-
112-
/* Burger menu */
113-
.menu-container span {
114-
display: block;
115-
width: 33px;
116-
height: 4px;
117-
margin-bottom: 5px;
118-
position: relative;
119-
background: #ffffff;
120-
border-radius: 3px;
121-
z-index: 1;
122-
transform-origin: 4px 0px;
123-
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
124-
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
125-
opacity 0.55s ease;
126-
}
127-
128-
.menu-container span:first-child {
129-
transform-origin: 0% 0%;
130-
}
131-
132-
.menu-container span:nth-child(3) {
133-
transform-origin: 0% 100%;
134-
}
135-
136-
.menu-container input:checked ~ span {
137-
opacity: 1;
138-
transform: rotate(45deg) translate(3px,-1px);
139-
background: #c04d4d;
140-
}
141-
142-
.menu-container input:checked ~ span:nth-child(4) {
143-
opacity: 0;
144-
transform: rotate(0deg) scale(0.2, 0.2);
145-
}
146-
147-
.menu-container input:checked ~ span:nth-child(3) {
148-
transform: rotate(-45deg) translate(-5px,11px);
149-
}
150-
151-
.menu ul {
152-
list-style: none;
153-
}
154-
155-
.menu li {
156-
padding: 10px 0;
157-
font-size: 22px;
158-
}
159-
160-
/* mobile styles */
161-
@media only screen and (max-width: 767px) {
162-
.menu-container {
163-
flex-direction: column;
164-
align-items: flex-end;
165-
}
166-
167-
.menu-logo {
168-
position: absolute;
169-
left: 0;
170-
top: 50%;
171-
transform: translateY(-50%);
172-
}
173-
174-
.menu-logo img {
175-
max-height: 30px;
176-
}
177-
178-
.menu {
179-
position: absolute;
180-
box-sizing: border-box;
181-
width: 300px;
182-
right: -300px;
183-
top: 0;
184-
margin: -20px;
185-
padding: 75px 50px 50px;
186-
background: #ffffff;
187-
-webkit-font-smoothing: antialiased;
188-
/* to stop flickering of text in safari */
189-
transform-origin: 0% 0%;
190-
transform: translateX(0%);
191-
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
192-
}
193-
194-
.menu-container input:checked ~ .menu {
195-
transform: translateX(-100%);
196-
}
197-
}
198-
199-
/* desktop styles */
200-
@media only screen and (min-width: 768px) {
201-
.menu-container {
202-
width: 100%;
203-
}
204-
205-
.menu-container a {
206-
color: #ffffff;
207-
}
208-
209-
.menu-container input {
210-
display: none;
211-
}
212-
213-
/* Burger menu */
214-
.menu-container span {
215-
display: none;
216-
}
217-
218-
.menu {
219-
position: relative;
220-
width: 100%;
221-
display: flex;
222-
justify-content: space-between;
223-
}
224-
225-
.menu ul {
226-
display: flex;
227-
padding: 0;
228-
}
229-
230-
.menu li {
231-
padding: 0 20px;
232-
}
233-
}</style>

0 commit comments

Comments
 (0)