Skip to content

Commit 4e6ce1e

Browse files
mdazfar2mdazfar2
authored
Merge pull request #344 from shreyash3087/add/abouts-page
Feat: Added Responsive Abouts Page
2 parents ef6a57d + 1d8ec7b commit 4e6ce1e

6 files changed

Lines changed: 412 additions & 3 deletions

File tree

‎website2.0/abouts.css‎

Lines changed: 307 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,307 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
2+
3+
body {
4+
margin: 0;
5+
font-family: "Arial", sans-serif;
6+
background: linear-gradient(180deg, #fdd86c 8.1%, #ff7d1f 100%);
7+
overflow-x: hidden;
8+
}
9+
.hamburger div {
10+
width: 25px;
11+
height: 3px;
12+
background-color: #333;
13+
margin: 4px;
14+
transition: 0.4s;
15+
}
16+
17+
.isDisplay {
18+
display: none;
19+
}
20+
.active {
21+
animation: animate forwards ease-in 0.2s;
22+
list-style: none;
23+
display: flex;
24+
gap: 20px;
25+
padding: 10px 20px;
26+
background-color: #fdd76b;
27+
flex-direction: column;
28+
align-items: center;
29+
text-decoration: none;
30+
width: 100%;
31+
}
32+
.nav-links1 {
33+
height: 0px;
34+
overflow: hidden;
35+
display: flex;
36+
position: relative;
37+
top: 30px;
38+
flex-direction: column;
39+
justify-content: space-around;
40+
}
41+
@keyframes animate {
42+
from {
43+
height: 0px;
44+
}
45+
to {
46+
height: 270px;
47+
}
48+
}
49+
.hamburger {
50+
display: none;
51+
}
52+
header {
53+
width: 100%;
54+
position: relative;
55+
top: 0;
56+
background-color: transparent;
57+
padding: 10px 0;
58+
}
59+
60+
nav {
61+
display: flex;
62+
justify-content: space-between !important;
63+
flex-wrap: wrap;
64+
justify-content: center;
65+
position: relative;
66+
align-items: center;
67+
width: 90%;
68+
margin: 0 auto;
69+
}
70+
71+
.logo img {
72+
position: relative;
73+
width: 89px;
74+
height: 89px;
75+
top: 10px;
76+
gap: 0px;
77+
opacity: 0px;
78+
}
79+
80+
.nav-links {
81+
list-style: none;
82+
display: flex;
83+
gap: 50px;
84+
margin: 25px;
85+
padding: 10px 20px;
86+
background-color: #fdd86c;
87+
border-radius: 25px;
88+
flex-wrap: wrap;
89+
justify-content: center;
90+
box-shadow: 0 4px 6px #ff7d1f;
91+
}
92+
93+
.nav-links li a {
94+
text-decoration: none;
95+
color: #000;
96+
padding: 10px 15px;
97+
font-size: x-large;
98+
}
99+
.nav-actions {
100+
display: flex;
101+
align-items: center;
102+
gap: 10px;
103+
}
104+
105+
.sponsor-btn {
106+
background: none;
107+
border: none;
108+
cursor: pointer;
109+
font-size: 18px;
110+
}
111+
a {
112+
text-decoration: none;
113+
}
114+
115+
.sponsor-btn {
116+
background-color: whitesmoke;
117+
border: none;
118+
border-radius: 25px;
119+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
120+
color: #000000;
121+
font-size: 24px;
122+
cursor: pointer;
123+
display: flex;
124+
align-items: center;
125+
justify-content: center;
126+
gap: 7px;
127+
transition: transform 0.1s ease;
128+
width: 150px;
129+
padding: 7px 7px;
130+
font-family: cursive;
131+
margin-right: 7px;
132+
}
133+
.sponsor-btn:active {
134+
transform: translateY(1px);
135+
}
136+
#heart {
137+
color: red;
138+
}
139+
.main {
140+
display: flex;
141+
flex-direction: column;
142+
justify-content: center;
143+
align-items: center;
144+
margin-bottom: 2rem;
145+
}
146+
.about_title {
147+
text-align: center;
148+
font-size: 48px !important;
149+
color: black;
150+
font-family: "Poppins", sans-serif;
151+
font-weight: 500;
152+
}
153+
.video {
154+
display: flex;
155+
justify-content: center;
156+
align-items: center;
157+
margin: 2rem 0rem;
158+
width: 100%;
159+
}
160+
161+
.video iframe {
162+
width: 80%;
163+
height: 620px;
164+
border-radius: 30px;
165+
border: none;
166+
}
167+
.start {
168+
width: 80%;
169+
display: flex;
170+
flex-direction: row-reverse;
171+
flex-wrap: wrap;
172+
height: auto;
173+
overflow-x: hidden;
174+
}
175+
.end {
176+
width: 80%;
177+
display: flex;
178+
flex-direction: row;
179+
height: auto;
180+
overflow-x: hidden;
181+
}
182+
.start .img-container {
183+
width: 50%;
184+
display: flex;
185+
justify-content: center;
186+
align-items: center;
187+
}
188+
.end .img-container {
189+
width: 50%;
190+
display: flex;
191+
justify-content: center;
192+
align-items: center;
193+
}
194+
.text-container {
195+
width: 50%;
196+
display: flex;
197+
flex-direction: column;
198+
justify-content: center;
199+
}
200+
.text-title {
201+
font-family: "Poppins", sans-serif;
202+
font-weight: 400;
203+
}
204+
.text-desc {
205+
font-size: larger;
206+
text-align: justify;
207+
}
208+
.end .text-title {
209+
text-align: center;
210+
}
211+
212+
.about_logo{
213+
width: 180px;
214+
transition: transform 0.5s ease;
215+
margin-right: 15px;
216+
}
217+
.mission {
218+
width: 300px;
219+
transition: transform 0.5s ease;
220+
}
221+
.benefit{
222+
width: 400px;
223+
transition: transform 0.5s ease;
224+
}
225+
.img-container img:hover {
226+
transform: scale(0.9);
227+
}
228+
229+
@media only screen and (max-width: 987px) {
230+
.nav-links {
231+
display: none !important;
232+
}
233+
.hamburger {
234+
display: block !important;
235+
}
236+
.nav-links1 li a {
237+
text-decoration: none;
238+
color: #000;
239+
padding: 10px 15px;
240+
font-size: x-large;
241+
}
242+
}
243+
244+
@media only screen and (max-width: 790px) {
245+
nav {
246+
gap: 10%;
247+
}
248+
}
249+
250+
@media only screen and (max-width: 329px) {
251+
.hamburger {
252+
width: 100% !important;
253+
}
254+
.hamburger div {
255+
position: relative;
256+
left: 80%;
257+
}
258+
nav {
259+
flex-direction: column-reverse;
260+
}
261+
.isDisplay {
262+
display: block;
263+
}
264+
.nav-actions {
265+
display: none !important;
266+
}
267+
.sponsor-btn {
268+
font-size: 16px !important;
269+
width: 114px !important;
270+
height: 46px !important;
271+
}
272+
}
273+
@media only screen and (max-width: 300px) {
274+
nav {
275+
gap: 2% !important;
276+
}
277+
}
278+
@media only screen and (max-width: 409px) {
279+
nav {
280+
gap: 5% !important;
281+
}
282+
.logo img {
283+
width: 60px !important;
284+
height: 60px !important;
285+
}
286+
}
287+
288+
@media only screen and (max-width: 769px) {
289+
.end {
290+
flex-direction: column;
291+
}
292+
.start {
293+
flex-direction: column;
294+
}
295+
.img-container {
296+
width: 100% !important;
297+
}
298+
.start .img-container {
299+
justify-content: center;
300+
}
301+
.end .img-container {
302+
justify-content: center;
303+
}
304+
.text-container {
305+
width: 100% !important;
306+
}
307+
}

0 commit comments

Comments
 (0)