-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
404 lines (311 loc) · 18.8 KB
/
index.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
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Girlscript - Bilaspur</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,700,700i&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- Vendor CSS Files -->
<link href="vendor/animate.css/animate.min.css" rel="stylesheet">
<link href="vendor/aos/aos.css" rel="stylesheet">
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<link href="vendor/remixicon/remixicon.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="css/style.css" rel="stylesheet">
<!-- =======================================================
* Template Name: Moderna - v4.0.1
* Template URL: https://bootstrapmade.com/free-bootstrap-template-corporate-moderna/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="fixed-top d-flex align-items-center header-transparent">
<div class="container d-flex justify-content-between align-items-center">
<div class="logo">
<!--<h1 class="text-light"><a href="index.html"><span>GIRLSCRIPT</span></a></h1>-->
<!-- Uncomment below if you prefer to use an image logo -->
<a href="index.html"><img src="img/logo.png" alt="" class="img-fluid"></a>
</div>
<nav id="navbar" class="navbar">
<ul>
<li><a class="active " href="index.html">Home</a></li>
<li><a href="#aboutus">About</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#blogs">Blog</a></li>
<li><a href="#feedbacks">Feedbacks</a></li>
<li><a href="#faqs">FAQs</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
</div>
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex justify-cntent-center align-items-center">
<div id="heroCarousel" class="container carousel carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">
<!-- Slide 1 -->
<div class="carousel-item active">
<div class="carousel-container">
<h2 class="animate__animated animate__fadeInDown">Welcome to <span>Girlscript</span></h2>
<p class="animate__animated animate__fadeInUp">Ut velit est quam dolor ad a aliquid qui aliquid. Sequi ea ut et est quaerat sequi nihil ut aliquam. Occaecati alias dolorem mollitia ut. Similique ea voluptatem. Esse doloremque accusamus repellendus deleniti vel. Minus et tempore modi architecto.</p>
</div>
</div>
</div>
</section><!-- End Hero -->
<main id="main">
<!-- =======About Us Section ======= -->
<section class="why-us section-bg" data-aos="fade-up" date-aos-delay="200" id="aboutus">
<div class="container">
<div class="row">
<div class="col-lg-6 video-box">
<img src="img/about.png" class="img-fluid" alt="">
</div>
<div class="col-lg-6 d-flex flex-column justify-content-center p-5">
<div class="icon-box">
<div class="icon"><i class="bx bx-error-circle"></i></div>
<h4 class="title"><a href="">About Us</a></h4>
<p class="description">GirlScript Bilaspur is a chapter of Girlscript India foundation, which is a section-8 non-profit company registered under government of India on the 2nd of June,2017. </p>
<p class="description">It is a city organization that is helping technology-challenged people learn and understand tech and its benefits. Some might find that technology is not their cup of tea, but here at Girlscript Bilaspur we believe that technology is by everybody, for everybody. </p>
<p class="description">On June 4 GirlScript Bilaspur was established and our chapter leaders got selected </p>
</div>
</div>
</div>
</div>
</section><!-- EndAbout Us Section -->
<!-- ======= Events Section ======= -->
<section id="events" class="section-spacer workshops-section" >
<div class="container">
<div class="section-title">
<h2>Events</h2>
</div>
<div class="tab-content">
<div class="tab-pane active" id="upcoming" role="tabpanel" aria-labelledby="upcoming">
<div class="row">
<div class="col-md-4 offset-md-4 col-12 ">
<div class="card event-card wow fadeInUp">
<img alt="Event one poster" class="card-img-top" src="img/events/p11.jpeg">
<div class="card-body">
<h5 class="card-title">Blog Writing</h5>
<table>
<tr>
<td width="15%" class="text-blue"><i class="far fa-calendar-alt"></i></td>
<td>04<sup>th</sup> April 2021</td>
</tr>
<tr>
<td class="text-red"><i class="fas fa-map-marker-alt"></i></td>
<td>Virtual Meet</td>
</tr>
<tr>
<td class="text-green"><i class="far fa-clock"></i></td>
<td>11:00 A.M. - 01:00 P.M.</td>
</tr>
</table>
<a href="https://bit.ly/gsbsp_8" class="get-started-btn">Apply Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section-title" style="margin-top: 20px;">
<h5>You can have a look at our Past Events here</h5>
<a href="past-events.html" class="get-started-btn">Past Events</a>
</div>
</section>
<!-- End Events Section -->
<!-- ======= Blogs Section ======= -->
<section id="blogs" class="more-services" >
<div class="container">
<div class="section-title" data-aos="fade-up">
<h2>Blogs</h2>
</div>
<div class="row">
<div class="col-md-6 d-flex align-items-stretch">
<div class="card" style='background-image: url("img/more-services-1.jpg");' data-aos="fade-up" data-aos-delay="100">
<div class="card-body">
<h5 class="card-title"><a href="">Lobira Duno</a></h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor ut labore et dolore magna aliqua.</p>
<div class="read-more"><a href="inner_blog.html"><i class="bi bi-arrow-right"></i> Read More</a></div>
</div>
</div>
</div>
<div class="col-md-6 d-flex align-items-stretch mt-4 mt-md-0">
<div class="card" style='background-image: url("img/more-services-2.jpg");' data-aos="fade-up" data-aos-delay="200">
<div class="card-body">
<h5 class="card-title"><a href="">Limere Radses</a></h5>
<p class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem doloremque laudantium, totam rem.</p>
<div class="read-more"><a href="inner_blog.html"><i class="bi bi-arrow-right"></i> Read More</a></div>
</div>
</div>
</div>
<div class="col-md-6 d-flex align-items-stretch mt-4">
<div class="card" style='background-image: url("img/more-services-3.jpg");' data-aos="fade-up" data-aos-delay="100">
<div class="card-body">
<h5 class="card-title"><a href="">Nive Lodo</a></h5>
<p class="card-text">Nemo enim ipsam voluptatem quia voluptas sit aut odit aut fugit, sed quia magni dolores.</p>
<div class="read-more"><a href="inner_blog.html"><i class="bi bi-arrow-right"></i> Read More</a></div>
</div>
</div>
</div>
<div class="col-md-6 d-flex align-items-stretch mt-4">
<div class="card" style='background-image: url("img/more-services-4.jpg");' data-aos="fade-up" data-aos-delay="200">
<div class="card-body">
<h5 class="card-title"><a href="">Pale Treda</a></h5>
<p class="card-text">Nostrum eum sed et autem dolorum perspiciatis. Magni porro quisquam laudantium voluptatem.</p>
<div class="read-more"><a href="inner_blog.html"><i class="bi bi-arrow-right"></i> Read More</a></div>
</div>
</div>
</div>
</div>
</div>
</section><!-- End Blogs Section -->
<!-- ======= Feedbacks Section ======= -->
<section id="feedbacks" class="services" >
<div class="container">
<div class="section-title" data-aos="fade-up">
<h2>Feedbacks</h2>
<p>What are our people have to say about us</p>
</div>
<div class="row">
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
<div class="icon-box" data-aos="fade-up" data-aos-delay="100">
<div class="icon"><i><img src="img/testimonials/testimonials-1.jpg" class="testimonial-img" alt="" style="border-radius: 50%; height: 60px; width: 60px;"></i></div>
<h4 class="title"><a href="">Lorem Ipsum</a></h4>
<p class="description">Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus sint placeat nihil nisi, eum minima tempore! Et laboriosam voluptatibus voluptatem! Ducimus accusantium quae ex esse! Voluptatem molestiae commodi expedita?</p>
</div>
</div>
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
<div class="icon-box" data-aos="fade-up" data-aos-delay="200">
<div class="icon"><i><img src="img/testimonials/testimonials-1.jpg" class="testimonial-img" alt="" style="border-radius: 50%; height: 60px; width: 60px;"></i></div>
<h4 class="title"><a href="">Sed ut perspiciatis</a></h4>
<p class="description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto voluptas eligendi magnam libero accusamus alias dolorum. Provident, esse obcaecati! Necessitatibus dolor ipsa animi, iure non aut itaque. Accusantium, modi tempora.</p>
</div>
</div>
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
<div class="icon-box" data-aos="fade-up" data-aos-delay="300">
<div class="icon"><i><img src="img/testimonials/testimonials-1.jpg" class="testimonial-img" alt="" style="border-radius: 50%; height: 60px; width: 60px;"></i></div>
<h4 class="title"><a href="">Magni Dolores</a></h4>
<p class="description">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati odit exercitationem, ipsa nostrum, veniam mollitia quas quidem aliquid aspernatur atque impedit. Eveniet, sunt blanditiis velit odio amet exercitationem hic deleniti!</p>
</div>
</div>
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
<div class="icon-box" data-aos="fade-up" data-aos-delay="400">
<div class="icon"><i><img src="img/testimonials/testimonials-1.jpg" class="testimonial-img" alt="" style="border-radius: 50%; height: 60px; width: 60px;"></i></div>
<h4 class="title"><a href="">Nemo Enim</a></h4>
<p class="description">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nulla dignissimos incidunt maxime, est, rerum assumenda iusto beatae unde exercitationem impedit, ipsam natus. Nulla minus, laboriosam voluptates recusandae fugiat explicabo!</p>
</div>
</div>
</div>
</div>
</section><!-- End feedbacks Section -->
<!-- ======= F.A.Q Section ======= -->
<section id="faqs" class="faq">
<div class="container">
<div class="section-title" data-aos="fade-up">
<h2>Frequently Asked Questions</h2>
</div>
<div class="row faq-item d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100">
<div class="col-lg-5">
<i class="ri-question-line"></i>
<h4>Why is it called Girlscript?</h4>
</div>
<div class="col-lg-7">
<p>
Girlscript believes in making people and technology work together. This is only possible if everyone has equal participation. But, in the field of technology there are not many girls. Therefore, Girlscript believes in equal participation of females in the field of technology, hence the name Girlscript.
</p>
</div>
</div><!-- End F.A.Q Item-->
<div class="row faq-item d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="200">
<div class="col-lg-5">
<i class="ri-question-line"></i>
<h4>What is the need of such an organisation in India?</h4>
</div>
<div class="col-lg-7">
<p>
We need such organizations because programming because programming and coding are not only about certificates and swags. It is about using technology for the betterment of the society.
</p>
</div>
</div><!-- End F.A.Q Item-->
<div class="row faq-item d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="300">
<div class="col-lg-5">
<i class="ri-question-line"></i>
<h4>Is Girlscript only for girls?</h4>
</div>
<div class="col-lg-7">
<p>
NO. We do have certain reservations for girls but its not entirely for girls.
</p>
</div>
</div><!-- End F.A.Q Item-->
<div class="row faq-item d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="400">
<div class="col-lg-5">
<i class="ri-question-line"></i>
<h4>Who should I contact in case of support?</h4>
</div>
<div class="col-lg-7">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel ad laborum expedita. Nostrum iure atque enim quisquam minima distinctio omnis, consequatur aliquam suscipit, quidem, esse aspernatur! Libero, excepturi animi repellendus porro impedit nihil in doloremque a quaerat enim voluptatum, perspiciatis, quas dignissimos maxime ut cum reiciendis eius dolorum voluptatem aliquam!
</p>
</div>
</div><!-- End F.A.Q Item-->
</div>
</section><!-- End F.A.Q Section -->
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="500">
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 footer-links">
<h4>Useful Links</h4>
<ul>
<li><i class="bx bx-chevron-right"></i> <a href="#index.html">Home</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#aboutus">About us</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#events">Events</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#blogs">Blogs</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#feedbacks">Feedbacks</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 footer-contact">
<h4>Contact Us</h4>
<p>
<strong>Email:</strong> girlscriptbilaspur@gmail.com<br>
</p>
</div>
<div class="col-lg-3 col-md-6 footer-info">
<h3>About Girlscript</h3>
<p>It is a city organization that is helping technology-challenged people learn and understand tech and its benefits.</p>
<div class="social-links mt-3">
<a href="https://twitter.com/gs_bsp" class="twitter"><i class="bx bxl-twitter"></i></a>
<a href="https://www.instagram.com/girlscript_bsp/" class="instagram"><i class="bx bxl-instagram"></i></a>
<a href="https://www.linkedin.com/in/girlscript-bilaspur-5957431ab/" class="linkedin"><i class="bx bxl-linkedin"></i></a>
</div>
</div>
</div>
</div>
</div>
</footer><!-- End Footer -->
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Vendor JS Files -->
<script src="vendor/aos/aos.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/glightbox/js/glightbox.min.js"></script>
<script src="vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="vendor/php-email-form/validate.js"></script>
<script src="vendor/purecounter/purecounter.js"></script>
<script src="vendor/swiper/swiper-bundle.min.js"></script>
<script src="vendor/waypoints/noframework.waypoints.js"></script>
<!-- Template Main JS File -->
<script src="js/main.js"></script>
</body>
</html>