Skip to content

Commit 6e823a2

Browse files
Fluffy728Fluffy728
authored
Update index.html
1 parent d35e8bc commit 6e823a2

File tree

1 file changed

+176
-0
lines changed

1 file changed

+176
-0
lines changed

‎index.html

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,3 +51,179 @@
5151
<body>
5252
Coming Soon</body>
5353
</html>
54+
55+
<style>body {
56+
overflow-x: hidden;
57+
font-family: Sans-Serif;
58+
margin: 0;
59+
}
60+
61+
.menu-container {
62+
position: relative;
63+
display: flex;
64+
align-items: center;
65+
margin-bottom: 20px;
66+
background: #c04d4d;
67+
color: #ffffff;
68+
padding: 20px;
69+
z-index: 1;
70+
-webkit-user-select: none;
71+
user-select: none;
72+
box-sizing: border-box;
73+
}
74+
75+
.menu-logo {
76+
line-height: 0;
77+
margin: 0 20px;
78+
}
79+
80+
.menu-logo img {
81+
max-height: 40px;
82+
max-width: 100px;
83+
flex-shrink: 0;
84+
}
85+
86+
.menu-container a {
87+
text-decoration: none;
88+
color: #c04d4d;
89+
transition: color 0.3s ease;
90+
}
91+
92+
.menu-container a:hover {
93+
color: #50e3c2;
94+
}
95+
96+
.menu-container input {
97+
display: block;
98+
width: 35px;
99+
height: 25px;
100+
margin: 0;
101+
position: absolute;
102+
cursor: pointer;
103+
opacity: 0; /* hide this */
104+
z-index: 2; /* and place it over the hamburger */
105+
-webkit-touch-callout: none;
106+
}
107+
108+
/* Burger menu */
109+
.menu-container span {
110+
display: block;
111+
width: 33px;
112+
height: 4px;
113+
margin-bottom: 5px;
114+
position: relative;
115+
background: #ffffff;
116+
border-radius: 3px;
117+
z-index: 1;
118+
transform-origin: 4px 0px;
119+
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
120+
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
121+
opacity 0.55s ease;
122+
}
123+
124+
.menu-container span:first-child {
125+
transform-origin: 0% 0%;
126+
}
127+
128+
.menu-container span:nth-child(3) {
129+
transform-origin: 0% 100%;
130+
}
131+
132+
.menu-container input:checked ~ span {
133+
opacity: 1;
134+
transform: rotate(45deg) translate(3px,-1px);
135+
background: #c04d4d;
136+
}
137+
138+
.menu-container input:checked ~ span:nth-child(4) {
139+
opacity: 0;
140+
transform: rotate(0deg) scale(0.2, 0.2);
141+
}
142+
143+
.menu-container input:checked ~ span:nth-child(3) {
144+
transform: rotate(-45deg) translate(-5px,11px);
145+
}
146+
147+
.menu ul {
148+
list-style: none;
149+
}
150+
151+
.menu li {
152+
padding: 10px 0;
153+
font-size: 22px;
154+
}
155+
156+
/* mobile styles */
157+
@media only screen and (max-width: 767px) {
158+
.menu-container {
159+
flex-direction: column;
160+
align-items: flex-end;
161+
}
162+
163+
.menu-logo {
164+
position: absolute;
165+
left: 0;
166+
top: 50%;
167+
transform: translateY(-50%);
168+
}
169+
170+
.menu-logo img {
171+
max-height: 30px;
172+
}
173+
174+
.menu {
175+
position: absolute;
176+
box-sizing: border-box;
177+
width: 300px;
178+
right: -300px;
179+
top: 0;
180+
margin: -20px;
181+
padding: 75px 50px 50px;
182+
background: #ffffff;
183+
-webkit-font-smoothing: antialiased;
184+
/* to stop flickering of text in safari */
185+
transform-origin: 0% 0%;
186+
transform: translateX(0%);
187+
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
188+
}
189+
190+
.menu-container input:checked ~ .menu {
191+
transform: translateX(-100%);
192+
}
193+
}
194+
195+
/* desktop styles */
196+
@media only screen and (min-width: 768px) {
197+
.menu-container {
198+
width: 100%;
199+
}
200+
201+
.menu-container a {
202+
color: #ffffff;
203+
}
204+
205+
.menu-container input {
206+
display: none;
207+
}
208+
209+
/* Burger menu */
210+
.menu-container span {
211+
display: none;
212+
}
213+
214+
.menu {
215+
position: relative;
216+
width: 100%;
217+
display: flex;
218+
justify-content: space-between;
219+
}
220+
221+
.menu ul {
222+
display: flex;
223+
padding: 0;
224+
}
225+
226+
.menu li {
227+
padding: 0 20px;
228+
}
229+
}</style>

0 commit comments

Comments
 (0)