-
Notifications
You must be signed in to change notification settings - Fork 0
/
About.html
354 lines (324 loc) · 13.7 KB
/
About.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About Us - XYZ Foundation India</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
/>
<link rel="shortcut icon" href="Images/favicon.ico" type="image/x-icon" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
color: #333;
}
section {
max-width: 900px;
margin: 2em auto;
padding: 2em;
background-color: #E6F5FF;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
h3 {
color: #004080;
}
h2 {
color: #004080;
border-bottom: 2px solid #004080;
padding-bottom: 0.5em;
margin-bottom: 1em;
}
ul {
list-style-position: outside;
}
li p {
line-height: 1.6;
margin-bottom: 1em;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top" style="box-shadow: 0 0 9px rgba(0, 0, 0, 0.2);">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"
><img src="Images/CSFI_logo.png" alt="logo" height="40vw"
/></a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul
class="navbar-nav me-auto mb-2 mb-lg-0 m-auto "
style="font-weight: 500"
>
<li class="nav-item">
<a class="nav-link active" href="About.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Education.html">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Events.html">Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Achievement.html">Achievement</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Student_Corner.html">Student Corner</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Project.html">Projects</a>
</li>
</ul>
<button type="button" class="btn btn-primary rounded-pill">
<a class="nav-link" style="font-weight: 500" href="Contact_Us.html">Contact Us</a>
</button>
</div>
</div>
</nav>
<section>
<h2>Welcome to Xyz Foundation India</h2>
<ul style="padding: 0 1em">
<li>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident sequi laudantium magnam in aperiam culpa soluta, quasi similique iusto deserunt iure beatae consequatur odit, assumenda incidunt tempore est pariatur suscipit.
</p>
</li>
<li>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, amet esse earum adipisci nobis laborum consequatur facere aliquam incidunt. Iusto eum distinctio adipisci modi cum culpa repellendus repudiandae? Unde, non voluptatum harum inventore ea animi.
</p>
</li>
<li>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam eius voluptatum officia tenetur natus est quia unde iusto expedita accusantium odio iure minus saepe nobis dolore, voluptates, voluptatibus maiores ut et quibusdam consequatur velit delectus. Reiciendis ex quasi in incidunt.
</p>
</li>
</ul>
<div style="margin-top: 2em;">
<h2>Our Journey</h2>
<ul style="padding: 0 1em">
<li>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt ipsum placeat eveniet velit, ipsa officiis quam maiores commodi sunt, harum recusandae laborum illo repellendus magnam earum autem! Laudantium, consequuntur vitae incidunt molestias tempora saepe quis consectetur fuga maiores aliquid recusandae?
</p>
</li>
<li>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium illo magni necessitatibus commodi error temporibus iure, doloremque nam earum eum sint nisi maiores at obcaecati quis exercitationem facilis amet, nemo facere et laborum quae reprehenderit? Sequi voluptatum rem quam quos laboriosam eum, doloremque ducimus corrupti distinctio recusandae veritatis corporis molestias?
</p>
</li>
<li>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione exercitationem saepe impedit quibusdam aut pariatur eius possimus tenetur eveniet, delectus repellendus incidunt, illo ducimus id perspiciatis totam dolorem nesciunt eligendi? Ex nobis deserunt consequatur ipsum dolore, ea corporis hic sit doloremque vitae, esse voluptatem voluptate consequuntur temporibus libero ipsa? Nisi amet sunt cum vel tenetur ipsum reprehenderit iste sed exercitationem?
</p>
</li>
</ul>
</div>
<div class="initiative" style="margin-top: 2em;">
<h2>Our Initiatives</h2>
<ul style="padding: 0 1em">
<li>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo blanditiis non quibusdam veniam aperiam dolore! Lorem, ipsum dolor:
</p>
</li>
<ol>
<li>
<p><strong>Initiative 1:</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit commodi, quis saepe optio magnam aut eius quidem vel officia libero.
</p>
<p>
Beneficiary - 370+ Students
</p>
<p>
No. Of work area - 6
</p>
</li>
<li>
<p><strong>Initiative 2:</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi ut atque accusantium, voluptatum sint distinctio rem ipsam, saepe animi dolor eius obcaecati minima natus reiciendis?
</p>
<p>75+ Schools /Areas benefited by educational material </p>
</li>
<li><p>
<strong>Initiative 3:</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa similique quos architecto veritatis, earum quasi dicta corporis sequi sit hic corrupti consequuntur reprehenderit, molestiae delectus? Porro, dolorum, quo harum, magni ipsa rerum tempore dicta optio et error nulla temporibus iure.
<p>
35+ People connected as a Shikshamitra
</p>
</p>
</li>
<li>
<p>
<strong>Initiative 4:</strong> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Pariatur, veritatis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, dolore facilis labore exercitationem suscipit commodi, ea fugiat possimus necessitatibus vel ipsum nobis? Tempora accusamus tempore dolorem architecto blanditiis repellat enim fuga dolores optio, in quibusdam!
</p>
<ol>
<li style="list-style-type: lower-roman;">
<p>
<strong>Task 1 : </strong>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic necessitatibus id a! Reiciendis eum expedita voluptatum maiores adipisci suscipit neque?
</p>
</li>
<li style="list-style-type: lower-roman;">
<p>
<strong>Task 2 : </strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem natus recusandae qui, eligendi vero voluptas, dolorum corrupti dicta, perspiciatis provident sit? Voluptates, officia quas. Optio provident quas nostrum vitae praesentium.
</p>
</li>
<li style="list-style-type: lower-roman;">
<p>
<strong>Task 3 : </strong> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat pariatur earum neque. Consequuntur facilis modi ipsam totam aliquam repudiandae iste, obcaecati voluptas vero cumque libero quo ipsum at incidunt distinctio ipsa doloribus maxime laborum error?
</p>
</ol>
</li>
</ol>
</div>
<div class="join-us" style="margin-top: 2em;">
<h2>Join Us in Our Mission</h2>
<ul style="padding: 0 1em">
<li>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti enim autem beatae culpa nam. Magni consequatur voluptate aliquid corrupti velit nostrum fugiat modi quod mollitia ipsum iusto, quis, facilis magnam et explicabo! Minus qui rerum, blanditiis et animi aperiam modi vitae tempore iste ipsa, ut nemo id? Porro, impedit a.
</p>
</li>
<li>
<p>
Thank you for visiting Xyz Foundation India. Together, we are shaping India's
future.
</p>
</li>
</ul>
</div>
</section>
<div
class="img"
style="
background-image: url(Images/footer_bg.jpg);
min-height: 470px;
display: flex;
justify-content: center;
align-items: center;
"
>
<div
class="card mb-3"
style="
max-width: 640px;
background-color: rgb(23, 23, 23);
color: white;
border: 1px solid white;
"
>
<div class="row g-0">
<div class="col-md-6">
<div class="card-body">
<h5 class="card-title" style="font-size: 25px; font-weight: 600">
About us
</h5>
<hr style="margin: 1em 0;">
<a class="navbar-brand" href="#"
><img src="Images/CSFI_logo.png" alt="logo" height="40vw"
/></a>
<p class="card-text">
aliquam delectus! Pariatur accusantium deleniti vero.text below
as a natural lead-in to additional content. This content is a
little bit longer.
</p>
<p class="card-text">
<a
href="https://www.facebook.com"
><img
style="margin-right: 10px; margin-top: 10px"
src="Images/facebook.png"
alt="facebook"
height="37px"
/></a>
<a href="https://www.twitter.com"
><img
style="margin-right: 10px; margin-top: 10px"
src="Images/twitter.png"
alt="twitter"
height="37px"
/></a>
<a
href="https://www.linkedin.com"
><img
style="margin-right: 10px; margin-top: 10px"
src="Images/linkedin.png"
alt="linkedin"
height="37px"
/></a>
<a
href="https://www.instagram.com"
><img
style="margin-right: 10px; margin-top: 10px"
src="Images/instagram.png"
alt="instagram"
height="37px"
/></a>
<a href="https://www.youtube.com"
><img
style="margin-right: 10px; margin-top: 10px"
src="Images/youtube.png"
alt="youtube"
height="37px"
/></a>
</p>
</div>
</div>
<div class="col-md-6">
<div class="card-body">
<h5 class="card-title" style="font-size: 25px; font-weight: 600">
Quick Links
</h5>
<hr style="margin: 1em 0;">
<ul
class="navbar-nav me-auto mb-2 mb-lg-0 m-auto"
style="font-weight: 500"
>
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Education.html">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Events.html">Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Achievement.html">Achievement</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Student_Corner.html"
>Student Corner</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="Project.html">Projects</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"
></script>
</body>
</html>