Skip to content

Commit 116a0bd

Browse files
naaji-navasnaaji-navas
committed
fina commit
1 parent 74e51cf commit 116a0bd

8 files changed

Lines changed: 297 additions & 191 deletions

File tree

‎assets/style.css‎

Lines changed: 164 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -1,226 +1,225 @@
1-
*{
2-
margin: 0;
3-
padding: 0;
4-
outline: 0;
5-
box-sizing: border-box;
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
outline: 0;
5+
box-sizing: border-box;
66
}
77

8-
a{
9-
text-decoration: none;
10-
color: inherit;
8+
a {
9+
text-decoration: none;
10+
color: inherit;
1111
}
12-
body{
13-
width: 100%;
14-
height: 100%;
15-
font-family: 'Roboto', sans-serif;;
12+
body {
13+
width: 100%;
14+
height: 100%;
15+
font-family: "Roboto", sans-serif;
1616
}
1717

18-
.top_header{
19-
display: flex;
20-
flex-direction: row;
21-
justify-content: space-between;
22-
background-color: #2e3786;
23-
padding: 1rem;
18+
.top_header {
19+
display: flex;
20+
flex-direction: row;
21+
justify-content: space-between;
22+
background-color: #2e3786;
23+
padding: 1rem;
2424
}
2525

26-
.top_header i{
27-
font-size: 1rem;
28-
color: white;
26+
.top_header i {
27+
font-size: 1rem;
28+
color: white;
2929
}
3030

31-
.main_nav{
32-
display: flex;
33-
flex-direction: row;
34-
justify-content: space-around;
35-
background-color: #00c699;
36-
color: #101757;
37-
margin-bottom: 1rem;
38-
}
39-
40-
.main_nav a{
41-
display: block;
42-
text-align: center;
43-
text-decoration: none;
44-
width: 100%;
45-
display: flex;
46-
flex-direction: column;
47-
align-items: center;
48-
row-gap: .3rem;
49-
padding: 1rem 0;
31+
.main_nav {
32+
display: flex;
33+
flex-direction: row;
34+
justify-content: space-around;
35+
background-color: #00c699;
36+
color: #101757;
37+
margin-bottom: 1rem;
5038
}
5139

52-
.active {
53-
background-color: #00c699;
54-
font-size: 1.2rem;
55-
color: white;
40+
.main_nav a {
41+
display: block;
42+
text-align: center;
43+
text-decoration: none;
44+
width: 100%;
45+
display: flex;
46+
flex-direction: column;
47+
align-items: center;
48+
row-gap: 0.3rem;
49+
padding: 1rem 0;
5650
}
5751

58-
.main_nav i{
59-
font-size: 1.5rem;
52+
.active {
53+
background-color: #00c699;
54+
font-size: 1.2rem;
55+
color: white;
6056
}
6157

62-
.game_opt{
63-
display: flex;
64-
justify-content: space-around;
65-
width: 90%;
66-
margin: auto;
67-
background-color: #2e3786;
68-
color: white;
69-
margin-top: 1rem auto;
70-
border-radius: 12px;
58+
.main_nav i {
59+
font-size: 1.5rem;
60+
}
7161

72-
62+
.game_opt {
63+
display: flex;
64+
justify-content: space-around;
65+
width: 90%;
66+
margin: auto;
67+
background-color: #2e3786;
68+
color: white;
69+
margin-top: 1rem auto;
70+
border-radius: 12px;
7371
}
7472

75-
.game_opt div{
76-
width: 100%;
77-
padding: .8rem 0;
78-
text-align: center;
73+
.game_opt div {
74+
width: 100%;
75+
padding: 0.8rem 0;
76+
text-align: center;
7977
}
8078

81-
.opt_active{
82-
background-color: #00c699;
83-
border-radius: 5px;
79+
.opt_active {
80+
background-color: #00c699;
81+
border-radius: 5px;
8482
}
8583

86-
.contest_card{
87-
88-
width: 90%;
89-
display: flex;
90-
margin: 1.5rem auto;
91-
flex-direction: column;
92-
align-items: center;
93-
row-gap: 1rem;
94-
border-radius: 50px;
95-
padding: 2.5rem 0;
96-
border-radius: 38px;
97-
background: #ffffff;
98-
box-shadow: 12px 12px 24px #d3d3d3,
99-
-12px -12px 24px #ededed;
84+
.contest_card {
85+
width: 90%;
86+
display: flex;
87+
margin: 1.5rem auto;
88+
flex-direction: column;
89+
align-items: center;
90+
row-gap: 1rem;
91+
border-radius: 50px;
92+
padding: 2.5rem 0;
93+
border-radius: 38px;
94+
background: #ffffff;
95+
box-shadow: 12px 12px 24px #d3d3d3, -12px -12px 24px #ededed;
10096
}
10197

102-
.contest_card p{
103-
font-size: .8rem;
98+
.contest_card p {
99+
font-size: 0.8rem;
104100
}
105-
.contest_header{
106-
display: flex;
107-
flex-direction: row;
101+
.contest_header {
102+
display: flex;
103+
flex-direction: row;
108104
}
109-
.trophy{
110-
display: flex;
111-
flex-direction: column;
112-
align-items: center;
105+
.trophy {
106+
display: flex;
107+
flex-direction: column;
108+
align-items: center;
113109
}
114110

115-
.trophy i{
116-
font-size: 3rem;
117-
color: #0a104e;
111+
.trophy i {
112+
font-size: 3rem;
113+
color: #0a104e;
118114
}
119-
.progress_bar{
120-
height: 3px;
121-
width: 90%;
122-
background-color: #2e3786;
123-
border-radius: 5px;
115+
.progress_bar {
116+
height: 3px;
117+
width: 90%;
118+
background-color: #2e3786;
119+
border-radius: 5px;
124120
}
125121

126-
.bar{
127-
background-color: #00c699;
128-
height: 100%;
129-
border-radius: 5px;
130-
width: 80%;
122+
.bar {
123+
background-color: #00c699;
124+
height: 100%;
125+
border-radius: 5px;
126+
width: 80%;
131127
}
132128

133-
.stat{
134-
width: 90%;
135-
display: flex;
136-
justify-content: space-between;
129+
.stat {
130+
width: 90%;
131+
display: flex;
132+
justify-content: space-between;
137133
}
138134

139-
.stat i{
140-
color: #101757;
135+
.stat i {
136+
color: #101757;
141137
}
142138

143-
.foot_nav{
144-
145-
border-radius: 1rem 1rem 0 0;
146-
position: absolute;
147-
bottom: 0;
139+
.timeline{
140+
width: 90%;
148141
display: flex;
149-
width: 100%;
150-
justify-content: space-around;
151-
background: #00c699;
152-
padding: .9rem 0;
153-
color: #02062c;
154-
position: fixed;
142+
flex-direction: column;
143+
align-items: center;
144+
row-gap: 1rem;
145+
}
146+
.foot_nav {
147+
border-radius: 1rem 1rem 0 0;
148+
position: absolute;
149+
bottom: 0;
150+
display: flex;
151+
width: 100%;
152+
justify-content: space-around;
153+
background: #00c699;
154+
padding: 0.9rem 0;
155+
color: #02062c;
156+
position: fixed;
155157
}
156158

157-
.footer_icon a{
158-
display: flex;
159-
text-decoration: none;
160-
flex-direction: column-reverse;
161-
align-items: center;
162-
font-size: .63rem;
163-
row-gap: .3rem;
159+
.footer_icon a {
160+
display: flex;
161+
text-decoration: none;
162+
flex-direction: column-reverse;
163+
align-items: center;
164+
font-size: 0.63rem;
165+
row-gap: 0.3rem;
164166
}
165167

166-
.footer_icon i{
167-
font-size: 1.2rem;
168+
.footer_icon i {
169+
font-size: 1.2rem;
168170
}
169171

170-
.active-foot{
171-
color: #ffffff;
172-
font-weight: 500;
172+
.active-foot {
173+
color: #ffffff;
174+
font-weight: 500;
173175
}
174176

175-
.blog_card{
176-
margin: auto;
177-
margin: 1.5rem auto;
178-
width: 90%;
179-
display: flex;
180-
flex-direction: row;
181-
column-gap: 1rem;
177+
.blog_card {
178+
margin: auto;
179+
margin: 1.5rem auto;
180+
width: 100%;
181+
display: flex;
182+
flex-direction: row;
183+
column-gap: 1rem;
182184

183-
border-radius: 10px;
184-
padding: 1rem;
185-
background: #ffffff;
186-
box-shadow: 12px 12px 24px #d3d3d3,
187-
-12px -12px 24px #ededed;
185+
border-radius: 10px;
186+
padding: 1rem;
187+
background: #ffffff;
188+
box-shadow: 12px 12px 24px #d3d3d3, -12px -12px 24px #ededed;
188189
}
189190

190-
.blog_card:nth-child(even)
191-
{
192-
flex-direction: row-reverse;
193-
}
194191

195-
.blog_card img{
196-
width: 100%;
197-
height: 100%;
198-
border-radius: 20px;
192+
.blog_card img {
193+
width: 100%;
194+
height: 100%;
195+
border-radius: 20px;
199196
}
200197

201-
.blog_left{
202-
width: 50%;
203-
198+
.blog_left {
199+
width: 50%;
204200
}
205-
.blog_content{
206-
width: 50%;
207-
display: flex;
208-
flex-direction: column;
209-
row-gap: .5rem;
210-
justify-content: center;
211-
201+
.blog_content {
202+
width: 50%;
203+
display: flex;
204+
flex-direction: column;
205+
row-gap: 0.5rem;
206+
justify-content: center;
212207
}
213208

214-
.port_heading{
215-
216-
margin: 1rem;
209+
.port_heading {
210+
margin: 1rem;
217211
}
218212

219-
.my_inv{
220-
margin: 1rem;
213+
.my_inv {
214+
margin: 1rem;
221215
}
222216

217+
#league_growth {
218+
margin-bottom: 6rem;
219+
}
223220

224-
#league_growth{
225-
margin-bottom: 6rem;
221+
@media only screen and (min-width: 600px) {
222+
.image11 {
223+
visibility: hidden;
224+
}
226225
}

0 commit comments

Comments
 (0)