Skip to content

Commit afd88b2

Browse files
MoonTM-GITMoonTM-GIT
committed
Started Remake - Moved some files & added navbar
1 parent b7145fa commit afd88b2

File tree

9 files changed

+300
-934
lines changed

9 files changed

+300
-934
lines changed

assets/LogoBlue_NoBG.png renamed to assets/ServerLogo.png

File renamed without changes.

‎assets/sample.png‎

9.85 KB
Loading

‎css/global.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@import url('https://rsms.me/inter/inter.css');
2+
@font-face {
3+
src: url(../fonts/Uni\ Sans\ Heavy.otf);
4+
font-family: "Uni Sans";
5+
}
6+
@font-face {
7+
font-family: "Inter";
8+
src: url('https://rsms.me/inter/inter.css');
9+
}
10+
11+
12+
* {
13+
margin: 0;
14+
padding: 0;
15+
}
16+
17+
body {
18+
background-color: #011E2F;
19+
}

‎css/navbar.css‎

Lines changed: 254 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,254 @@
1+
nav {
2+
display: flex;
3+
margin: 0 15px;
4+
align-items: left;
5+
padding: 5px;
6+
flex-wrap: wrap;
7+
}
8+
9+
nav img {
10+
width: 125px;
11+
}
12+
13+
.nav-ul {
14+
display: flex;
15+
align-items: center;
16+
list-style-type: none;
17+
}
18+
19+
.nav-ul li a {
20+
color: white;
21+
padding: 10px 30px;
22+
text-decoration: underline solid transparent;
23+
transition: text-decoration 0.4s ease;
24+
font-family: "Inter", sans-serif;
25+
font-size: 30px;
26+
font-weight: 600;
27+
}
28+
29+
.nav-ul li a:hover {
30+
text-decoration: underline solid currentColor;
31+
}
32+
33+
.navbar {
34+
top: 0;
35+
right: 0;
36+
left: 0;
37+
background: #011E2F;
38+
}
39+
40+
.active-link {
41+
color: #ff212d !important;
42+
}
43+
44+
.nav-right {
45+
font-size: 16px;
46+
display: flex;
47+
margin-left: auto;
48+
}
49+
50+
.hamburger {
51+
align-self: center;
52+
margin-left: auto;
53+
margin-right: 2%;
54+
background: transparent;
55+
color: white;
56+
font-size: 40px;
57+
border: none;
58+
cursor: pointer;
59+
display: none;
60+
}
61+
62+
.hamburger:focus {
63+
outline: none;
64+
}
65+
66+
.join-btn {
67+
align-self: center;
68+
display: flex;
69+
align-items: center;
70+
margin-right: 20px;
71+
margin-left: 40px;
72+
padding: 12px 60px;
73+
color: white;
74+
font-size: 30px;
75+
font-family: "Uni Sans", sans-serif;
76+
text-decoration: none;
77+
78+
background-color: #FF212D;
79+
border-radius: 28px;
80+
}
81+
82+
.join-btn:hover {
83+
transition: background-color 0.5s ease;
84+
background-color: #fa3e48;
85+
}
86+
87+
.social-btn {
88+
align-self: center;
89+
margin-left: 40px;
90+
color:white;
91+
}
92+
93+
.social-btn:hover {
94+
transition: font-size 0.2s ease;
95+
font-size: 17px;
96+
}
97+
98+
/* --------------------- */
99+
/* NAVBAR RESPONSIVENESS */
100+
/* --------------------- */
101+
102+
103+
@media only screen and (max-width: 1600px) {
104+
nav img {
105+
width: 105px;
106+
}
107+
108+
.nav-ul li a {
109+
padding: 10px 26px;
110+
font-size: 28px;
111+
}
112+
113+
.nav-right {
114+
font-size: 14px;
115+
}
116+
117+
.social-btn {
118+
margin-left: 32px;
119+
}
120+
121+
.social-btn:hover {
122+
transition: font-size 0.2s ease;
123+
font-size: 15px;
124+
}
125+
126+
.join-btn {
127+
font-size: 28px;
128+
padding: 10px 50px;
129+
margin-left: 32px;
130+
}
131+
}
132+
133+
@media only screen and (max-width: 1250px) {
134+
nav img {
135+
width: 95px;
136+
}
137+
138+
.nav-ul li a {
139+
padding: 10px 22px;
140+
font-size: 26px;
141+
}
142+
143+
.nav-right {
144+
font-size: 12px;
145+
}
146+
147+
.social-btn {
148+
margin-left: 26px;
149+
}
150+
151+
.social-btn:hover {
152+
transition: font-size 0.2s ease;
153+
font-size: 13px;
154+
}
155+
156+
.join-btn {
157+
font-size: 26px;
158+
padding: 8px 40px;
159+
margin-left: 26px;
160+
}
161+
}
162+
163+
@media only screen and (max-width: 1020px) {
164+
nav img {
165+
width: 85px;
166+
}
167+
168+
.nav-ul li a {
169+
padding: 10px 18px;
170+
font-size: 24px;
171+
172+
}
173+
174+
.nav-right {
175+
font-size: 10px;
176+
}
177+
178+
.social-btn {
179+
margin-left: 20px;
180+
}
181+
182+
.social-btn:hover {
183+
transition: font-size 0.2s ease;
184+
font-size: 11px;
185+
}
186+
187+
.join-btn {
188+
font-size: 24px;
189+
padding: 6px 30px;
190+
margin-left: 20px;
191+
}
192+
}
193+
194+
@media only screen and (max-width: 940px) {
195+
nav img {
196+
width: 75px;
197+
}
198+
199+
.nav-ul li a {
200+
padding: 10px 14px;
201+
font-size: 22px;
202+
}
203+
204+
.nav-right {
205+
font-size: 8px;
206+
}
207+
208+
.social-btn {
209+
margin-left: 14px;
210+
}
211+
212+
.social-btn:hover {
213+
transition: font-size 0.2s ease;
214+
font-size: 9px;
215+
}
216+
217+
.join-btn {
218+
font-size: 22px;
219+
padding: 4px 28px;
220+
margin-left: 14px;
221+
}
222+
}
223+
224+
@media only screen and (max-width: 750px) {
225+
nav {
226+
transition: all .5s ease;
227+
}
228+
229+
nav img {
230+
width: 65px;
231+
}
232+
233+
.nav-ul {
234+
display: none;
235+
flex-direction: column;
236+
width: 100%;
237+
}
238+
239+
.nav-ul li {
240+
margin-bottom: 7px;
241+
}
242+
243+
.nav-ul.show {
244+
display: flex;
245+
}
246+
247+
.hamburger {
248+
display: block;
249+
}
250+
251+
.nav-right {
252+
display:none
253+
}
254+
}

0 commit comments

Comments
 (0)