Skip to content

Commit 9f4ba97

Browse files
miguelmohrmiguelmohr
authored
init
1 parent c9acd17 commit 9f4ba97

File tree

9 files changed

+805
-0
lines changed

9 files changed

+805
-0
lines changed

‎JavaDiscord/assets/LogoRedWhite.png‎

17.7 KB
Loading

‎JavaDiscord/css/queries.css‎

Lines changed: 328 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,328 @@
1+
/* Homepage */
2+
3+
@media only screen and (max-width: 1650px){
4+
header {
5+
margin-top: 245px;
6+
}
7+
8+
.container {
9+
max-width: 1240px;
10+
margin: 0 auto;
11+
display: flex;
12+
align-items: center;
13+
}
14+
15+
.left-box h1 {
16+
font-size: 160px;
17+
font-family: "Uni Sans", sans-serif;
18+
color: white;
19+
}
20+
21+
.right-box p {
22+
font-size: 45px;
23+
font-weight: 500;
24+
color: white;
25+
}
26+
27+
.button a {
28+
color: white;
29+
text-decoration: none;
30+
background-color: #FF212D;
31+
padding: 20px 35px;
32+
font-size: 26px;
33+
font-family: "Uni Sans", sans-serif;
34+
border: none;
35+
border-radius: 35px;
36+
display: inline-block;
37+
margin-top: 20px;
38+
}
39+
40+
.button a:hover {
41+
background-color: #fa454e;
42+
}
43+
}
44+
45+
@media only screen and (max-width: 1345px){
46+
header {
47+
margin-top: 280px;
48+
padding: 0px 40px 140px 40px;
49+
}
50+
51+
.container {
52+
max-width: 1240px;
53+
margin: 0 auto;
54+
display: flex;
55+
align-items: center;
56+
}
57+
58+
.left-box h1 {
59+
font-size: 150px;
60+
font-family: "Uni Sans", sans-serif;
61+
color: white;
62+
}
63+
64+
.right-box p {
65+
font-size: 42.5px;
66+
font-weight: 500;
67+
color: white;
68+
}
69+
70+
.button a {
71+
color: white;
72+
text-decoration: none;
73+
background-color: #FF212D;
74+
padding: 20px 35px;
75+
font-size: 26px;
76+
font-family: "Uni Sans", sans-serif;
77+
border: none;
78+
border-radius: 35px;
79+
display: inline-block;
80+
margin-top: 20px;
81+
}
82+
83+
.button a:hover {
84+
background-color: #fa454e;
85+
}
86+
}
87+
88+
@media only screen and (max-width: 1240px){
89+
header {
90+
margin-top: 350px;
91+
}
92+
93+
.container {
94+
max-width: 1240px;
95+
margin: 0 auto;
96+
display: flex;
97+
align-items: center;
98+
}
99+
100+
.left-box h1 {
101+
font-size: 120px;
102+
font-family: "Uni Sans", sans-serif;
103+
color: white;
104+
}
105+
106+
.right-box p {
107+
font-size: 40px;
108+
font-weight: 500;
109+
color: white;
110+
}
111+
112+
.button a {
113+
color: white;
114+
text-decoration: none;
115+
background-color: #FF212D;
116+
padding: 20px 35px;
117+
font-size: 26px;
118+
font-family: "Uni Sans", sans-serif;
119+
border: none;
120+
border-radius: 35px;
121+
display: inline-block;
122+
margin-top: 20px;
123+
}
124+
125+
.button a:hover {
126+
background-color: #fa454e;
127+
}
128+
}
129+
130+
@media only screen and (max-width: 1000px){
131+
header {
132+
margin-top: 350px;
133+
padding-bottom: 200px;
134+
}
135+
136+
.container {
137+
max-width: 1240px;
138+
margin: 0 auto;
139+
display: flex;
140+
align-items: center;
141+
}
142+
143+
.left-box h1 {
144+
font-size: 110px;
145+
font-family: "Uni Sans", sans-serif;
146+
color: white;
147+
}
148+
149+
.right-box p {
150+
font-size: 30px;
151+
font-weight: 500;
152+
color: white;
153+
}
154+
155+
.button a {
156+
color: white;
157+
text-decoration: none;
158+
background-color: #FF212D;
159+
padding: 15px 35px;
160+
font-size: 26px;
161+
font-family: "Uni Sans", sans-serif;
162+
border: none;
163+
border-radius: 35px;
164+
display: inline-block;
165+
margin-top: 20px;
166+
}
167+
168+
.button a:hover {
169+
background-color: #fa454e;
170+
}
171+
}
172+
173+
@media only screen and (max-width: 768px){
174+
.nav-ul {
175+
display: none;
176+
flex-direction: column;
177+
width: 100%;
178+
}
179+
180+
.nav-ul.show {
181+
display: flex;
182+
}
183+
184+
nav.bottom-shadow-effect {
185+
box-shadow: 0px 7px 17px 5px rgba(2,50,74,1);
186+
}
187+
188+
nav {
189+
transition: all .5s ease;
190+
}
191+
192+
.hamburger {
193+
display: block;
194+
}
195+
196+
/* PAGE */
197+
198+
header {
199+
margin-top: 150px;
200+
padding-bottom: 120px;
201+
}
202+
203+
.container {
204+
max-width: 768px;
205+
margin: 0 auto;
206+
display: flex;
207+
align-items: center;
208+
flex-direction: column;
209+
}
210+
211+
.left-box h1 {
212+
font-size: 100px;
213+
font-family: "Uni Sans", sans-serif;
214+
color: white;
215+
}
216+
217+
.right-box {
218+
padding-right: 50px;
219+
}
220+
221+
.right-box p {
222+
margin-top: 52px;
223+
font-size: 24px;
224+
font-weight: 500;
225+
color: white;
226+
}
227+
228+
.button a {
229+
color: white;
230+
text-decoration: none;
231+
background-color: #FF212D;
232+
padding: 15px 35px;
233+
font-size: 26px;
234+
font-family: "Uni Sans", sans-serif;
235+
border: none;
236+
border-radius: 35px;
237+
display: inline-block;
238+
margin-top: 20px;
239+
}
240+
241+
.button a:hover {
242+
background-color: #fa454e;
243+
}
244+
245+
.copyright p{
246+
padding-left: 25px;
247+
padding-right: 25px;
248+
}
249+
}
250+
251+
@media only screen and (max-width: 480px){
252+
header {
253+
margin-top: 150px;
254+
padding-bottom: 105px;
255+
}
256+
257+
.container {
258+
max-width: 768px;
259+
margin: 0 auto;
260+
display: flex;
261+
align-items: center;
262+
flex-direction: column;
263+
}
264+
265+
.left-box h1 {
266+
font-size: 80px;
267+
font-family: "Uni Sans", sans-serif;
268+
color: white;
269+
}
270+
271+
.right-box {
272+
padding-left: 14px;
273+
}
274+
275+
.right-box p {
276+
margin-top: 40px;
277+
font-size: 25px;
278+
font-weight: 500;
279+
color: white;
280+
}
281+
282+
.button a {
283+
color: white;
284+
text-decoration: none;
285+
background-color: #FF212D;
286+
padding: 15px 35px;
287+
font-size: 26px;
288+
font-family: "Uni Sans", sans-serif;
289+
border: none;
290+
border-radius: 35px;
291+
display: inline-block;
292+
margin-top: 20px;
293+
}
294+
295+
.button a:hover {
296+
background-color: #fa454e;
297+
}
298+
}
299+
300+
@media only screen and (max-width: 414px) {
301+
302+
.right-box{
303+
padding-left: 35px;
304+
}
305+
}
306+
307+
@media only screen and (max-width: 375px) {
308+
309+
.right-box{
310+
padding-left: 16px;
311+
}
312+
}
313+
314+
/* Rules page */
315+
316+
@media only screen and (max-width: 950px) {
317+
.title {
318+
font-size: 80px;
319+
}
320+
}
321+
322+
@media only screen and (max-width: 570px) {
323+
.title {
324+
font-size: 60px;
325+
padding: 0 20px;
326+
}
327+
}
328+

0 commit comments

Comments
 (0)