Skip to content

Commit d38ec8d

Browse files
Fluffy728Fluffy728
authored
Update about.html
1 parent 9f5a1e3 commit d38ec8d

File tree

1 file changed

+234
-1
lines changed

1 file changed

+234
-1
lines changed

‎about.html

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

0 commit comments

Comments
 (0)