-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
206 lines (195 loc) · 8.54 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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Ruda:wght@500&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/index.css">
<title>Balika - Home</title>
</head>
<body>
<!-- navbar section -->
<div id="nav-placeholder"></div>
<!-- homepage banner image with buttons -->
<div class="banner-wrapper container-fluid p-0">
<div class="banner-writeup-wrapper">
<h1 class="text-white font-weight-bold text-center banner-header px-3">Every girl deserves to be in school</h1>
<p class="text-white text-center px-5 balika-writeup">
Project Balika aims to achieve higher enrollment, attendance, and retention of young girls from low-income urban
schools in India
</p>
<div class="d-flex flex-row justify-content-between button-divider">
<a href="story.html">
<button class="btn btn-teal mx-2 px-5 py-2">Learn More</button>
</a>
<a href="mentor.html">
<button class="btn btn-white-border mx-2 mentor-btn">Become a Mentor</button>
</a>
</div>
</div>
</div>
<!-- Statistics -->
<div class="container-fluid stats-section">
<div class="row align-items-center">
<div class="col-md-3 my-4">
<div class="stats-card">
<img class="multi-icon" src="assets/icons/Girl-multi-mil-Stats.png" class="stats-logo" alt="">
<div class="stats-writeup">
47 million Indian youths drop out by Grade 10
</div>
</div>
</div>
<div class="col-md-3 my-4">
<div class="stats-card">
<img class="three-multi-icon" src="assets/icons/Girl-3mil-stats.png" class="stats-logo" alt="">
<div class="stats-writeup">
3.7 million girls are out of school
</div>
</div>
</div>
<div class="col-md-3 my-4">
<div class="stats-card">
<div class="stats-box">
<svg>
<circle cx="70" cy="70" r="70"> </circle>
<circle cx="70" cy="70" r="70"> </circle>
</svg>
<div class="percent-num">
<h2> 57<span>%</span></h2>
</div>
</div>
<div class="stats-writeup">
of girls in India drop out of school by grade 11
</div>
</div>
</div>
<div class="col-md-3 my-4">
<div class="stats-card">
<div class="stats-box">
<svg>
<circle cx="70" cy="70" r="70"> </circle>
<circle cx="70" cy="70" r="70"> </circle>
</svg>
<div class="percent-num">
<h2> 65<span> %</span></h2>
</div>
</div>
<div class="stats-writeup">
of adolescent girls who drop out of school do so to work at home
</div>
</div>
</div>
</div>
</div>
<!-- Fighting for section -->
<div class="container my-5">
<h2 class="card-blue-heading text-center">What we're fighting for</h2>
<p class="text-center my-5 px-2">
At Balika, we are focused on re-enrolment into the school system, retention of girls in schools, and leadership
development of girls.
<!-- Our work spans three broad categories.
<a style="color: #086177;" class="font-weight-bold" href="initiatives.html">View our impact</a> -->
</p>
<div class="card-deck">
<div class="card">
<img class="card-img-top" style="max-width: 400px" src="assets/pix/home/scholarship.jpg" alt="">
<div class="card-body">
<h5 class="card-title card-blue-heading text-center text-capitalize font-weight-bold">Scholarships for girls
</h5>
<hr />
<p class="card-text card-text-greyed text-center">Balika works closely with corporate and individual sponsors
to increase enrolment of girls in schools through fundraising. Girls who face a drop-out risk can apply for
a scholarship to have their entire education paid for. The Balika community volunteers identify girls from
at-risk communities who face significant challenges and re-enrol them into the school system. Till date,
Balika has brought back over 80 girls to school. </p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="assets/pix/home/leadership.jpg" alt="">
<div class="card-body">
<h5 class="card-title card-blue-heading text-center text-capitalize font-weight-bold">Leadership Development
</h5>
<hr />
<p class="card-text card-text-greyed text-center">Students across schools enrol in Balika projects every year.
Under the guidance of Balika volunteers, students use the design thinking model to ideate and implement
solutions to the most pressing issues in their communities relating to women.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="assets/pix/home/improv_learning.jpg" alt="">
<div class="card-body">
<h5 class="card-title card-blue-heading text-center text-capitalize font-weight-bold">Improved Learning
Outcomes</h5>
<hr />
<p class="card-text card-text-greyed text-center">For students currently enrolled in schools, Balika works to
improve educational outcomes through learning support, access to technology, and teacher training. If you
would like to volunteer in a Balika classroom.
</p>
</div>
</div>
</div>
</div>
<!-- our story section -->
<div class="row no-gutters">
<div class="col-xs-12 col-md-8 d-none d-lg-block">
<img src="assets/pix/fighting_1.jpg" class="story-pic" alt="Story picture">
</div>
<div class="p-5 col-xs-12 col-md-4 py-4 story-wrapper d-flex flex-column justify-content-center align-items-center">
<h1 class="text-center">Our Mission, Our Story</h1>
<p class="text-center px-2">
Through education, skill-building, and community empowerment we address barriers that keep girls away from
school. We provide financial resources, training, and leadership development to affordable private schools in
urban slums of India.
</p>
<a href="initiatives.html">
<button class="btn learn-more-btn">Learn More</button>
</a>
</div>
</div>
<!-- get involved section -->
<div class="row no-gutters d-flex flex-row">
<!-- <div class="col-xs-12 col-md-6">
<img class="get-involved-img" src="assets/pix/movement.jpg" alt="Get involved image">
</div> -->
<div class="col-xs-12 col-md-12 d-flex flex-column align-items-center justify-content-center py-5">
<h2 class="text-center balika-blue">Join our movement</h2>
<p class="text-center balika-blue">
Learn more about how you can get involved!
</p>
<div class="d-flex flex-row justify-content-between align-items-center">
<!-- <input type="email" class="form-control flex-2 mx-2" placeholder="Email"> -->
<a href="mentor.html">
<button class="btn subscribe-btn bg-balika-lightblue text-white flex-1 mx-2">Become a mentor</button>
</a>
<a href="donate.html">
<button class="btn subscribe-btn text-balika-lightblue flex-1 mx-2">Sponsor a Balika</button>
</a>
</div>
</div>
</div>
<!-- footer section -->
<div id="footer-placeholder"></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<script>
$(function () {
$('#nav-placeholder').load('snippets/navbar.html');
});
$(function () {
$('#footer-placeholder').load('snippets/footer.html');
});
</script>
</body>
</html>