-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
361 lines (324 loc) · 17.1 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
<!DOCTYPE html>
<html lang="en">
<!--HEAD-->
<head>
<link href="./resources/css/normalize.css" type="text/css" rel="stylesheet">
<link href="./resources/css/style.css" type="text/css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="./resources/images/favicon.jpg">
<title>Nonprofit Website Design - Elevation</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<!--MODAL, BUILT BY CAMPER-->
<div id="modal" class="modal">
<span class="fa fa-times fa-3x" tabindex="0"></span>
<p>This is an educational clone of <a href="https://elevationweb.org" target="_blank" rel="noopener noreferrer">elevationweb.org</a>.</p>
<p><a href="https://github.com/chingu-voyage3/toucans-06">Toucans 6</a>, a team of students from the Chingu Cohorts, cloned this site in order to learn how to work together as a team to complete a web development project.</p>
<p><a href="blog.html">Read our blog post for more information.</a></p>
<a href="https://github.com/chingu-voyage3/toucans-06"><span class="fa fa-github fa-5x"></span><br>GitHub Repo</a>
</div>
<!--HEADER, BUILT BY CAMPER-->
<header>
<div class="header-media">
<!--video-->
<video autoplay muted loop>
</video>
</div>
<!--secondary header-->
<div class="secondary-header">
<h1>Nonprofit Website Design Agency</h1>
<h2>Questions? Call us at 800-475-4590</h2>
</div>
<!--primary header-->
<div class="primary-header">
<div class="primary-header-container">
<div class="modal-ribbon" tabindex="0">Cloned</div>
<div class="logo-content">
<img class="logo" src="./resources/images/logo.png" alt="ElevationWeb">
</div>
<div class="button-content">
<a class="button contact-us" href="#">Contact Us</a>
<a class="button one-match" href="#">1For1 Match</a>
<span class="fa fa-search search"></span>
<a class="menu" href="#">Menu</a>
<a class="menu-bars" href="#"><span class="fa fa-bars fa-2x"></span></a>
</div>
</div>
</div>
<!--BANNER, BUILT BY CAMPER-->
<div class="banner">
<h2>We Specialize in Nonprofit Web Design</h2>
<p>High-quality, customized <span>websites for nonprofits</span></p>
<a class="button quote" href="#">Get a quote</a>
<a class="button rfp" href="#">Submit an RFP</a>
<div class="to-blog">
<a href="#blog" onClick="scrollToBlog(); return false;">
<span class="fa fa-chevron-down" aria-hidden="true"></span>
</a>
</div>
</div>
<!--CLIENTS, BUILT BY CAMPER-->
<div class="clients">
</div>
</header>
<!--BODY, BUILT BY CMOORE-->
<!--SECTION ONE BLOG CONTENT-->
<main>
<section id="blog" class="blog">
<div class="container">
<div class="row section-top">
<h2>From Our Blog</h2>
<a href="#">Read more blog posts</a>
</div>
<!--BLOG POST 1-->
<div class="wrapper">
<div class="blog-holder">
<div class="content-blog">
<a href="#">
<img class="blog-img" src= "./resources/images/banner-new-years.jpg" alt="New Year 2018">
</a>
<div class="content-text">
<h3> <a href="#">7 New Year’s Resolutions Every Nonprofit Should Have </a> </h3>
<p>We tend to think of New Year’s resolutions on a personal level like going to the gym more or spending more time with family. Well this year we invite you not only to set those personal goals, but also to make some New Year’s resolutions for your nonprofit! We’ve come up with 7 ideas that every nonprofit should consider adding to their list of resolutions in 2018! </p>
[...]
</div>
<div class="date-comments">
<p>Jan 02, 2018 by Emma Wolfe</p>
</div>
</div>
</div>
<!--BLOG POST 2-->
<div class="blog-holder">
<div class="content-blog">
<a href="#">
<img class="blog-img" src="./resources/images/banner.6-to-do-list.jpg" alt="To Do List">
</a>
<div class="content-text">
<h3><a href="#">Managing a Multigenerational Workplace</a></h3>
<p>It is no secret that the explosion of technology has changed the business world. It is hard for nonprofits to keep up, especially when working with limited resources. It can feel, because of the incredible work that nonprofits do, that investing in technology is unnecessary and donors will flock regardless. However, in 2018, not investing is no longer an option and the modern nonprofit needs to reallocate its resources to account for this change. In order to make the evolution easier, we have compiled 6 things that you should consider putting on your to-do list for 2018.</p>
[...]
</div>
<div class="date-comments">
<p>Jan 02, 2018 by Emma Wolfe</p>
</div>
</div>
</div>
</div>
<!--Text Widget-->
<div class="widget-wrapper"> <!--row-->
<div class="text-widget"> <!--first column-->
<div class="info"> <!--first column contents-->
<h3> How to Increase Your Online Donations
<span>Guide</span> </h3>
<a href="#" class="widget-button">Download Now</a>
</div>
</div>
<div class="guide"> <!--second column-->
<div class="dialouge"> <!--second column contents-->
<p> Access a complete guide on how to improve online donations for nonprofits.</p>
</div>
<img src="./resources/images/guide.png" alt="Guide Improve Online Donations">
</div>
<div class="graphic"> <!--Third column-->
<img src="./resources/images/graphic.png" alt="Increase Donations">
</div>
</div>
<!--Arrow-->
<div class="arrow">
<i class="fa fa-angle-down">
</i>
</div>
</div>
</section>
<!--SECTION 2 WHAT WE DO-->
<section class="b" id="what">
<div class="what-container">
<div class="textwidget">
<div class="section-top">
<h2>What we do</h2>
<p>We build high-quality <strong>websites for nonprofits.</strong> But it doesn't stop there. We believe in elevation nonprofits to do more by giving them the <a href="#"> best <strong>nonprofit website designs</strong> </a>so they can spark even greater change. How will your nonprofit take it to the next level?</p>
</div>
<!--SERVICES BREAKDOWN-->
<div class="services-wrapper">
<div class="nonprofit"> <!--First column-->
<a href="javascript:void(0)">
<div class="content-services">
<div class="title">
<h3>Nonprofit Website Design</h3>
</div>
<div class="content-service-icon icon-website">
</div>
<div class="content">
<p>The best <strong>nonprofit website designs</strong> are not only aesthetically beautiful, they also effectively communicate a nonprofit’s mission and its objectives with innovative and creative design. </p>
</div>
</div>
</a>
</div>
<div class="graphic-design"> <!--second column-->
<a href="javascript:void(0)">
<div class="content-services">
<div class="title">
<h3>Graphic Design</h3>
</div>
<div class="content-service-icon icon-graphic">
</div>
<div class="content">
<p>Accompany your <strong>nonprofit website</strong> with exceptional graphic design. We’ll help you develop your nonprofit’s brand identity so your nonprofit can continue building strong, reliable relationships. </p>
</div>
</div>
</a>
</div>
<div class="search-market"><!--Third column-->
<a href="javascript:void(0)">
<div class="content-services">
<div class="title">
<h3>Search Marketing</h3>
</div>
<div class="content-service-icon icon-search">
</div>
<div class="content">
<p>Optimize your <strong>nonprofit’s website</strong> so web users and search engines can explore and interact with your meaningful cause. </p>
</div>
</div>
</a>
</div>
<div class="copywriting"> <!--Fourth column-->
<a href="javascript:void(0)">
<div class="content-services">
<div class="title">
<h3>Copywriting</h3>
</div>
<div class="content-service-icon icon-security">
</div>
<div class="content">
<p>Excellent <strong>nonprofit website design</strong> should be accompanied by equally great content. We’ll tell your story through powerful words so you can effectively communicate your nonprofit and its mission. </p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<section class="testimonials">
<h2>Every client is a partner</h2>
<a class="testimonial-link" href="#">View more client testimonials</a>
<div class="highlighted-testimonial">
<img class="quote-icon" src="./resources/images/quote.png" alt="">
<blockquote>
Creating a website is not a quick and easy task. It can be challenging for a nonprofit with small team and limited resources but <span class="quote-standout">my experience with Elevation made it much simpler!</span> I appreciated the team's organization and direction. <span class="quote-standout">I always felt like I knew what was happening next and what I needed to get done.</span> The team was responsive and able to translate what we were looking for. I love our new site, it truly represents the professionalism and uniqueness of our social enterprise Pedal Revolution. Many thanks to Elevation!
</blockquote>
<div class="quote-author-section">
<img class="quote-author-image" src="./resources/images/nancy-gallegos.jpg" alt="">
<div class="quote-author-details">
<p class="quote-author">Nancy Gallegos</p>
<p class="quote-author-title focus-box">Business Development Manager</p>
<p class="quote-author-company">Pedal Revolution</p>
</div>
</div>
</div>
<div class="case-study YMCA">
<h3 class="case-study-name">YMCA - Canandaigua</h3>
<img class="case-study-image" src="./resources/images/ymca.png" alt="">
<a class="case-study-url focus-box" href="#">www.canadaigua-ymca.org</a>
<p class="case-study-description">
YMCA Canandaigua is an organization that works to strengthen the community in Canandaigua, New York by offering a variety of Y programs to all regardless of age, income or background. We partnered with them to <span class="case-study-standout">design a nonprofit website</span> to serve as a resource for those who live in Canandaigua. For an organization that relies heavily on their <span class="case-study-standout">nonprofit website</span>, we built them an easy-to-maintain and customized website that comes with, customized <a href="#">graphic design</a>, high-quality security systems, and a <a href="#">SEO-compatible</a> site.
</p>
</div>
<div class="case-study alzheimer">
<h3 class="case-study-name">Alzheimer's Foundation of America</h3>
<img class="case-study-image" src="./resources/images/pedal.png" alt="">
<a class="case-study-url focus-box" href="#">alzfdn.org</a>
<p class="case-study-description">
We partnered with the Alzheimer’s Foundation of America to design a <span class="case-study-standout">nonprofit website</span> to educate and provide resources to those living with dementia and their families. The website is <a href="#">search engine optimized</a> and incorporates nonprofit web development features such as an interactive <a href="#">graphic design</a> that supports and engages their community.
</p>
</div>
</section>
</main>
<!--FOOTER BUILT BY SHALINI-->
<footer>
<div class="fcontainer">
<div class="footer-header clearfloat">
<div class="footer-logo col-block">
<img src="./resources/images/logo.png" alt="ELEVATION">
</div>
<div class="footer-buttons col-block">
<div class="float-right footer-buttons-wrapper">
<a class="button quote" href="#">GET A QUOTE</a>
<a class="button contact-us" href="#">CONTACT US</a>
<a class="button one-match" href="#">1 FOR 1 MATCH</a>
</div>
</div>
</div>
<div class="footer-sections clearfloat">
<div class="footer-aboutus-section col-block">
<h2 class="section-header"><a href="#">About Us</a></h2>
<ul class="footer-list-item-anchor">
<li><a href="#">Why Elevation</a></li>
<li><a href="#">Our Process</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</div>
<div class="footer-oursolutions-section col-block">
<h2 class="section-header"><a href="#">Our Solutions</a></h2>
<ul class="footer-list-item-anchor">
<li><a href="#">Nonprofit Website Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Ongoing Support</a></li>
<li><a href="#">Search Marketing</a></li>
<li><a href="#">Copywriting</a></li>
<li><a href="#">Email Outreach</a></li>
</ul>
</div>
<div class="footer-ourwork-section col-block">
<h2 class="section-header"><a href="#">Our work</a></h2>
<ul class="footer-list-item-anchor">
<li><a href="#">Before & After</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
</div>
<div class="footer-moreinfo-section col-block">
<h2 class="section-header"><a href="#">Moreinfo</a></h2>
<ul class="footer-list-item-anchor">
<li><a href="#">Blog</a></li>
<li><a href="#">Nonprofit Web Design</a></li>
<li><a href="#">Nonprofit Web Development</a></li>
</ul>
</div>
<address class="col-block">
<div class="section-header">Connect with us</div>
<ul class="footer-list-item-anchor">
<li><span class="connect-phone">800-475-4590</span></li>
<li><a href="#"><span class="fa fa-envelope-o"></span> info@elevationweb.org</a></li>
<li><a href="#"><span class="fa fa-check"></span> 1 for 1 match</a></li>
<li><a href="#"><span class="fa fa-play-circle-o"></span> Request a proposal</a></li>
</ul>
<div class="social">
<a href="#">Follow us on <span class="twitter"> Twitter </span></a><br>
<a href="#">Like us on <span class="fb"> Facebook</span></a>
</div>
</address>
</div>
<div class="footer-copyright">
<a class="copyright" href="#">
<span>Copyright 2017, Elevation Group, LLC. All rights reserved.</span>
</a><br/>
<a href="#">info@elevationweb.org</a> <span> | </span>
<a href="#">Home</a> <span> | </span>
<a href="#">Privacy Policy</a> <span> | </span>
<a href="#">Sitemap</a> <span> | </span><br />
<address><a href="#">100 M St SE #600 Washington, DC 20003</a></address>
</div>
</div>
</footer>
<!-- jquery -->
<script type="text/javascript" src="./resources/js/jquery-3.2.1.min.js"></script>
<!-- JavaScript -->
<script src="./resources/js/main.js"></script>
<!-- Polyfill for smooth scrolling behavior-->
<script src="./resources/js/smoothscroll.min.js"></script>
</body>
</html>