-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
165 lines (154 loc) · 7.72 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
<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<title>Art4Education</title>
<meta name="description" content="Art4Education is a student-driven, not for profit initiative to sponsor the education of underprivileged children by using our art and talents to raise and aggregate funds.">
<meta name="keywords" content="A4E Art4Edu Art4Educ Art4Education student-driven nonprofit not for profit underprivileged children art talent funds">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/media/images/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" href="assets/img/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="assets/img/favicon-16x16.png" sizes="16x16">
<link rel="shortcut icon" href="assets/img/favicon.ico">
<meta name="theme-color" content="#1abc9c">
<!-- Styles -->
<link rel="stylesheet" href="assets/css/grid.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header id="masthead">
<div class="container">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#">Events</a></li>
<li><a href="#contribute">Contribute</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="mobile-toggle">
<a href="#" class="menu-button">Menu</a>
</div>
</div>
</header>
<section id="hero">
<div class="container">
<div class="row">
<div class="eight columns">
<h1 class="heading">We are <span class="green">Art4Education</span>.</h1>
<h2 class="subhead">Art4Education is a student-driven, not for profit initiative to sponsor the education of underprivileged children by using our art and talents to raise and aggregate funds.</h2>
<div class="buttons">
<a class="button cta" href="#about">Learn more</a>
<a class="button ghost" href="#contribute">Help organise an event</a>
</div>
</div>
<div class="four columns events">
<h2 class="subhead">Events</h2>
<div class="event-card">
<h3 class="event-name">A4E Youth Fest</h3>
<p class="dates">15th July 2016</p>
<p class="view"><a href="https://www.facebook.com/events/1025025874218640/">View event →</a></p>
</div>
<div class="event-card">
<h3 class="event-name">Cycle Through History</h3>
<p class="dates">27th June 2016</p>
<p class="view"><a href="https://www.facebook.com/events/1590397237877427/">View event →</a></p>
</div>
<p class="view"><a href="https://www.facebook.com/a4edu/events/">See more</a></p>
</div>
</div>
</div>
</section>
<section id="about" class="grey">
<div class="container">
<h1 class="heading">About Us</h1>
<div class="row">
<div class="six columns">
<p class="text">
A4E was conceptualised as a donation aggregator, an easy way for first-time donors to contribute to social causes. We accept donations in exchange for services or artwork. We then donate the aggregated amount to SOS Children's Villages India.
</p>
<p>
Our model provides donors with something tangible in return for their donation. This helps donors recall their contribution and renews a desire in them to be instrumental in uplifting the society. We channel students' talents for social welfare thus providing means to students who can't donate money to play their part in the community in their own special way.
</p>
<p>
We are at present supporting the living and education costs of three orphan girls at <a href="https://www.soschildrensvillages.in/">SOS Children Village Bawana</a> and have got much enthusiastic support for our past exhibitions as well as our cycle tours in various parts of Delhi.
</p>
<div class="buttons">
<a class="button cta" href="https://www.facebook.com/a4edu/photos/">See gallery</a>
</div>
</div>
<div class="six columns">
<div class="img-block">
<img src="assets/img/2.png" alt="A4E Youth Fest at CSOI" />
<p class="caption">A4E Youth Fest at CSOI</p>
</div>
</div>
</div>
</div>
</section>
<section id="contribute">
<div class="container">
<h1 class="heading">Contribute</h1>
<div class="row">
<div class="six columns">
<p class="text">Student volunteers are an integral part of the success of Art4Education. There are a number of ways to volunteer at A4E, either by participating in one of our various events or working behind-the-scenes on special projects!</p>
<div class="buttons">
<a class="button cta" href="https://goo.gl/forms/6c5GSZmLP6aw5lh02">Volunteer</a>
<a class="button ghost" href="mailto:[email protected]?Subject=Partnership%20Request">Partner with us</a>
</div>
</div>
<div class="six columns">
<div class="img-block">
<img src="assets/img/1.png" width="100%" alt="A4E Youth Fest at CSOI" />
<p class="caption">A4E Youth Fest at CSOI</p>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="grey">
<div class="container">
<h1 class="heading">Contact Us</h1>
<div class="row">
<div class="six columns">
<p class="text">Art4Education is based out of New Delhi, India.</p>
<p class="text">
<span class="contact-link">Email: <a href="mailto:[email protected]">[email protected]</a></span>
<span class="contact-link">Phone: <a href="#">+91 9871990852</a></span>
<span class="contact-link">Facebook: <a href="https://www.facebook.com/a4edu/">@a4edu</a></span>
<span class="contact-link">Twitter: <a href="https://twitter.com/art4educ">@art4educ</a></span>
<span class="contact-link">Instagram: <a href="https://www.instagram.com/art4edu/">@art4edu</a></span>
</p>
<div class="buttons">
<a class="button cta" href="mailto:[email protected]">Send a message</a>
<a class="button ghost" href="mailto:[email protected]">Fix a meeting</a>
</div>
</div>
<div class="six columns">
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d224346.61367892797!2d77.06890040488427!3d28.5272181447305!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd5b347eb62d%3A0x52c2b7494e204dce!2sNew+Delhi%2C+Delhi!5e0!3m2!1sen!2sin!4v1491002916093" width="600" height="350" frameborder="0" style="border:0" scrolling="no" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="twelve columns">
<span class="text">© Art4Education 2017</span>
<span class="text fl-right"><a href="http://madewithlove.org.in/">Made with <span style="color:red;">❤</span> in India</a></span>
</div>
</div>
</div>
</footer>
<script>
document.querySelector('.menu-button').addEventListener('click', function(){
this.style.display = "none";
document.querySelector('header nav').style.display = "block";
});
</script>
</body>
</html>