-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathoverflow.html
793 lines (732 loc) · 39.2 KB
/
overflow.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
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Overflow Offering | NewSpring.cc</title>
<!-- jQuery -->
<script src="https://newspring.cc/Scripts/Bundles/RockJQueryLatest?v=04Na70l5xG-Ak3mWoqN6rMOm3L9-p3kgT_NPfUoJxck1"></script>
<!-- Bootstrap -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<!-- Typekit -->
<link rel="stylesheet" href="https://use.typekit.net/bcm6gqj.css" />
<!-- FontAwesome -->
<script src="https://kit.fontawesome.com/3e0f7fab68.js" crossorigin="anonymous"></script>
<!-- AOS -->
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" />
<script src="./Themes/new/Scripts/dynamic-aos-min.js"></script>
<script src="./Themes/new/Scripts/accordions-min.js"></script>
<!-- Swiper.js -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<!-- SmoothScroll -->
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15/dist/smooth-scroll.polyfills.min.js"></script>
<link rel="stylesheet" href="./Themes/new/Styles/bootstrap.css" />
<link rel="stylesheet" href="./Themes/new/Styles/theme.css" />
<!-- PureCounter -->
<script src="./Themes/new/Scripts/counter.js"></script>
</head>
<body>
<section class="bring-forward p-0 w-100 bg-white d-grid grid-cols-2 justify-content-between align-content-center shadow-md" style="z-index: 100">
<div class="d-grid align-content-center">
<a href="/" class="px-4 mb-0">
<img src="./Themes/new/Assets/SVG/logo.svg" alt="NewSpring Church Logo" style="width: 160px; max-width: 160px" />
</a>
</div>
<div class="overflow-hidden text-right">
<a href="#" class="d-inline-block no-underline p-4 text-gray-darker border-solid border-l border-gray-lighter">
<i class="fa-light fa-lg fa-bars"></i>
</a>
<span class="hidden-xs hidden-sm">
<a href="#" class="d-inline-block no-underline p-4 text-gray-darker border-solid border-l border-gray-lighter">
<i class="fa-light fa-lg fa-location-dot"></i>
</a>
<a href="#" class="d-inline-block no-underline p-4 text-gray-darker border-solid border-l border-gray-lighter">
<i class="fa-light fa-lg fa-magnifying-glass"></i>
</a>
</span>
<a href="#" class="d-inline-block no-underline p-4 text-gray-darker border-solid border-l border-gray-lighter">
<i class="fa-light fa-lg fa-circle-user"></i>
</a>
</div>
</section>
<div id="content">
<style>
:root {
--overflow-blue: #3a64af;
--overflow-blue-light: #a9c2e6;
--overflow-blue-dark: #1d3362;
--overflow-kraft: #bb9260;
}
.bg-blue {
background-color: var(--overflow-blue);
}
.bg-blue-light {
background-color: var(--overflow-blue-light);
}
.bg-blue-dark {
background-color: var(--overflow-blue-dark);
}
.bg-kraft {
background-color: var(--overflow-kraft);
}
.btn.bg-blue:hover,
.btn.bg-blue:focus {
background-color: var(--overflow-blue);
}
.btn.bg-blue-light:hover,
.btn.bg-blue-light:focus {
background-color: var(--overflow-blue-light);
}
.btn.bg-blue-dark:hover,
.btn.bg-blue-dark:focus {
background-color: var(--overflow-blue-dark);
}
.btn.bg-kraft:hover,
.btn.bg-kraft:focus {
background-color: var(--overflow-kraft);
}
.text-blue {
color: var(--overflow-blue);
}
.text-blue-light {
color: var(--overflow-blue-light);
}
.text-blue-dark {
color: var(--overflow-blue-dark);
}
.text-kraft {
color: var(--overflow-kraft);
}
.fill-blue {
fill: var(--overflow-blue);
}
.fill-blue-light {
fill: var(--overflow-blue-light);
}
.fill-blue-dark {
fill: var(--overflow-blue-dark);
}
.fill-kraft {
fill: var(--overflow-kraft);
}
.swiper-pagination-bullet-active {
background-color: var(--overflow-blue) !important;
}
#content a:not(.btn) {
color: var(--overflow-blue);
}
#content input::placeholder {
color: #ccc;
}
</style>
<section class="bg-blue position-relative text-white d-flex justify-content-center align-content-center text-center overflow-hidden">
<div
class="fullscreen background-cover background-top grayscale o-20"
style="background-image: url('./Themes/new/Assets/Images/overflow_aikenariel_2x1.jpg')"></div>
<div class="fullscreen o-60" style="background: rgb(0, 0, 0); background: linear-gradient(0deg, #000 0%, transparent 70%)"></div>
<div class="bring-forward text-constrained" style="height: max-content !important">
<h1 class="display-3">
<span data-aos="fade-in">God</span>
<span data-aos="fade-in" data-aos-duration="1000" data-aos-delay="50">has</span>
<span data-aos="fade-in" data-aos-duration="1000" data-aos-delay="100">proven</span>
<span data-aos="fade-in" data-aos-duration="1000" data-aos-delay="150">Himself</span>
<span data-aos="fade-in" data-aos-duration="1000" data-aos-delay="200">faithful</span>
<span data-aos="fade-in" data-aos-duration="1000" data-aos-delay="250">to</span>
<span data-aos="fade-in" data-aos-duration="1000" data-aos-delay="300">us</span>
<span data-aos="fade-in" data-aos-duration="1000" data-aos-delay="350">— year</span>
<span data-aos="fade-in" data-aos-duration="1000" data-aos-delay="400">after</span>
<span data-aos="fade-in" data-aos-duration="1000" data-aos-delay="450">year.</span>
</h1>
<p>
We want every NewSpring campus to be a physical place where heaven meets earth, community flourishes, and Jesus is glorified. The Overflow Offering
isn’t just a yearly event — it’s an opportunity to trust God with an investment to see lives changed in Aiken, SC.
</p>
<p class="mb-0"><a href="#give" data-scroll class="btn btn-primary bg-blue drop-shadow">Give Now</a></p>
</div>
</section>
<section id="story" class="px-0 pb-0">
<div class="px-6">
<div class="page-constrained mx-auto text-center mb-6">
<p class="pretitle o-50">The Overflow Story</p>
<h2 class="display-2 px-md-4 my-6 text-blue-dark">
<span data-aos="fade-in">God</span>
<span data-aos="fade-in" data-aos-duration="1000" data-aos-delay="150" class="text-blue">always</span>
<span data-aos="fade-in" data-aos-duration="1000" data-aos-delay="300" class="text-blue">provides</span>
<span data-aos="fade-in" data-aos-duration="1000" data-aos-delay="450">for</span>
<span data-aos="fade-in" data-aos-duration="1000" data-aos-delay="600">us.</span>
</h2>
</div>
<div class="text-constrained mx-auto text-center">
<p>
For the past several years, we wanted to build an intentional season where we focused on building His kingdom in South Carolina. That’s what led
us to start the annual rhythm of the Overflow Offering. We wanted to be able to expand wisely without adding debt!
</p>
</div>
<div id="timeline" class="page-constrained mx-auto timeline my-6 my-md-8 px-1 px-sm-6">
<div class="timeline--item d-grid grid-cols-1 grid-cols-md-2 align-items-center">
<div class="py-6 py-md-6 pl-5 pl-sm-6 pl-md-0 pr-md-6 pr-lg-7 text-md-right">
<div data-aos="fade-up">
<h3 class="h5 mb-1 text-blue"><span class="display-3 text-blue-dark">2017-2019</span><br />Our City, Our State, and Our World</h3>
<p class="mb-0">
We were able to give $5.3M to local and global churches and mission partners. Not only that, but we were able to invest in NewSpring
campuses across the state and establish NewSpring Greenville (formerly NewSpring Eastlan) in their permanent home!
</p>
</div>
</div>
</div>
<div class="timeline--item d-grid grid-cols-1 grid-cols-md-2 align-items-center">
<div class="py-6 py-md-6 pl-5 pl-sm-6 pl-md-6 pl-lg-7 col-start-md-2">
<div data-aos="fade-up">
<h3 class="h5 mb-1 text-blue"><span class="display-3 text-blue-dark">2020</span><br />Bluffton Campus</h3>
<p class="mb-0">
We were able to purchase and renovate a facility for NewSpring Bluffton, formerly known as the Hilton Head Campus. They went from meeting on
Sunday nights at New Life Church to moving into their own permanent home in July 2021!
</p>
</div>
</div>
</div>
<div class="timeline--item d-grid grid-cols-1 grid-cols-md-2 align-items-center">
<div class="py-6 py-md-6 pl-5 pl-sm-6 pl-md-0 pr-md-6 pr-lg-7 text-md-right">
<div data-aos="fade-up">
<h3 class="h5 mb-1 text-blue"><span class="display-3 text-blue-dark">2021</span><br />Aiken Land</h3>
<p class="mb-0">
NewSpring Aiken continues to outgrow their space rapidly; what a great problem to have! We needed room to grow. Thanks to our generous
church, we were able to purchase land for Aiken’s permanent facility.
</p>
</div>
</div>
</div>
<div class="timeline--item d-grid grid-cols-1 grid-cols-md-2 align-items-center">
<div class="py-6 py-md-6 pl-5 pl-sm-6 pl-md-6 pl-lg-7 col-start-md-2">
<div data-aos="fade-up">
<h3 class="h5 mb-1 text-blue"><span class="display-3 text-blue-dark">2022</span><br />Eliminate Debt Balance</h3>
<p class="mb-0">
In 2017, our leadership team made a decision not to accrue new debt. Within six years, we paid off $45M! Now that NewSpring Church is
officially debt free, we are free to listen to God’s voice and obey without debt as an obstacle.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="pt-7 pb-8 pb-md-9 position-relative text-center">
<div class="text-constrained mx-auto px-6 bring-forward" data-aos="fade-up">
<h3 class="h5 text-blue mb-5"><span class="display-2 text-blue-dark">2023</span><br />Build Aiken Campus</h3>
<p class="lead text-gray-darker">
Because of your generosity, we were able to purchase the land for the new Aiken Campus in 2021. But Aiken's story isn't done yet!
</p>
<p>
<a href="#give" class="btn btn-primary bg-blue" data-scroll>Give Now</a>
</p>
</div>
<div
class="fullscreen o-100"
style="background: rgb(255, 255, 255); background: linear-gradient(0deg, var(--overflow-blue-light) 0%, transparent 60%); top: -550px"></div>
</div>
</section>
<section id="stories" class="bg-blue-light px-0 pt-0 overflow-hidden">
<div class="px-5 text-constrained mx-auto text-center mb-6">
<p class="pretitle text-blue">The Aiken Story</p>
<h2 class="text-white display-3">
<span data-aos="fade-in">We</span>
<span data-aos="fade-in" data-aos-duration="1000" data-aos-delay="100">want</span>
<span data-aos="fade-in" data-aos-duration="1000" data-aos-delay="200">NewSpring</span>
<span data-aos="fade-in" data-aos-duration="1000" data-aos-delay="300">Aiken</span>
<span data-aos="fade-in" data-aos-duration="1000" data-aos-delay="400">to</span>
<span data-aos="fade-in" data-aos-duration="1000" data-aos-delay="500">point</span>
<span data-aos="fade-in" data-aos-duration="1000" data-aos-delay="600">people</span>
<span data-aos="fade-in" data-aos-duration="1000" data-aos-delay="700">to</span>
<span data-aos="fade-in" data-aos-duration="1000" data-aos-delay="800">Jesus.</span>
</h2>
<p>
Our hope is that our buildings would be spaces where the local communities surrounding them can gather to worship, grow, and connect with each
other. That’s why
<a href="/2030.html">we want every NewSpring campus to exist in a permanent home by 2030.</a>
<!-- HIDDEN UNTIL WE GET THE VIDEO -->
<span class="hidden">Check out the video below to learn more about these buildings’ intentional design.</span>
</p>
<pre>[[ 3D Video Embed / Still Render ]]</pre>
</div>
<div class="px-5 text-constrained mx-auto text-center mb-6">
<p>
In 2021, because of our church’s radical generosity, we were able to purchase the land for the Aiken Campus facility. This year, the Overflow
Offering focuses on breaking ground and development of NewSpring Aiken’s facility.
</p>
</div>
<!-- NEWS SWIPER -->
<div class="hidden text-center mt-6 mt-md-7">
<!-- Slider main container -->
<div id="campus-facilities-swiper" class="swiper-container my-5 mt-md-6 text-left" data-aos="fade-up">
<!-- Additional required wrapper -->
<div class="swiper-wrapper mb-6">
<!-- Slides -->
<div class="swiper-slide">
<a
href="#"
class="d-block text-decoration-none position-relative bg-black text-white px-4 pt-10 pb-5 px-md-5 pb-md-5 rounded-lg overflow-hidden"
data-aos="fade-up">
<div
class="fullscreen background-cover background-bottom"
style="
background-image: url('https://images.unsplash.com/photo-1517089152318-42ec560349c0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2874&q=80');
"></div>
<div class="fullscreen o-100" style="background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.9) 100%)"></div>
<div class="bring-forward text-constrained mx-auto">
<h3 class="h5 mb-0">Aiken Development Update</h3>
</div>
</a>
</div>
<div class="swiper-slide">
<a
href="#"
class="d-block text-decoration-none position-relative bg-black text-white px-4 pt-10 pb-5 px-md-5 pb-md-5 rounded-lg overflow-hidden"
data-aos="fade-up">
<div
class="fullscreen background-cover background-bottom"
style="
background-image: url('https://images.unsplash.com/photo-1517089152318-42ec560349c0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2874&q=80');
"></div>
<div class="fullscreen o-100" style="background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.9) 100%)"></div>
<div class="bring-forward text-constrained mx-auto">
<h3 class="h5 mb-0">Aiken Development Update</h3>
</div>
</a>
</div>
<div class="swiper-slide">
<a
href="#"
class="d-block text-decoration-none position-relative bg-black text-white px-4 pt-10 pb-5 px-md-5 pb-md-5 rounded-lg overflow-hidden"
data-aos="fade-up">
<div
class="fullscreen background-cover background-bottom"
style="
background-image: url('https://images.unsplash.com/photo-1517089152318-42ec560349c0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2874&q=80');
"></div>
<div class="fullscreen o-100" style="background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.9) 100%)"></div>
<div class="bring-forward text-constrained mx-auto">
<h3 class="h5 mb-0">Aiken Development Update</h3>
</div>
</a>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<p><a href="#" class="btn btn-primary bg-blue">See More Updates</a></p>
</div>
<div class="px-5 px-md-8 page-constrained mx-auto text-center my-8 my-md-9">
<h3 class="text-white display-3">
We can’t wait to hear more stories of life change from Aiken; stories like
<a href="#storyone" class="text-decoration-none" data-scroll>Cody's</a>,
<a href="#storytwo" class="text-decoration-none" data-scroll>Laura and Roy's</a>, and
<a href="#storythree" class="text-decoration-none" data-scroll>Janiya's</a>.
</h3>
<p class="hidden">
<a href="#give" class="btn btn-primary bg-blue mb-2 mb-sm-0" data-scroll>Give Now</a>
</p>
</div>
<!-- STORIES -->
<div class="d-grid grid-cols-1 gap-y-6 gap-y-md-9 mb-6 mb-md-8">
<div id="storyone" class="d-grid grid-cols-12 gap-y-4 gap-y-sm-6 gap-x-md-6 gap-x-xl-7">
<div class="ratio-square col-span-11 col-span-md-5 col-span-lg-5 col-span-xl-4" data-aos="fade-right">
<div
class="position-relative ratio-square rounded-2x rounded-l-0 background-cover background-center"
style="background-image: url('/Themes/new/Assets/Images/overflow_stories_cody.gif'); box-shadow: 20px 20px 0px var(--overflow-blue)"></div>
</div>
<div class="col-span-12 col-span-md-7 col-span-lg-6 col-span-xl-6 d-flex align-items-center" data-aos="fade-left">
<div class="p-4 p-md-6 py-md-0">
<h3 class="text-white">
“Being part of the Aiken Campus taught me that doing life and ministry closely with people — who ultimately become family — is
everything.”
</h3>
<p>
After graduating from Fuse in Aiken, Cody moved to Anderson, SC, to attend Anderson University and immersed himself in the youth and young
adult community in the upstate. Cody now serves Fuse campuses all across the state as a member of our Fuse Support Team!
</p>
<p class="mb-0 text-blue-dark">
<span class="h4 italic font-serif font-bold text-blue tracking-tight">Cody Boynton</span><br />Former Aiken Fuse Student
</p>
</div>
</div>
</div>
<div id="storytwo" class="d-grid grid-cols-12 gap-y-4 gap-y-sm-6 gap-x-md-6 gap-x-xl-7 rtl">
<div class="position-relative ratio-square col-span-11 col-span-md-5 col-span-lg-5 col-span-xl-4" data-aos="fade-left">
<div
class="ratio-square rounded-2x rounded-r-0 background-cover background-center"
style="
background-image: url('https://s3.amazonaws.com/ns.images/newspring/overflowoffering/2023/overflow_stories_becks.gif');
box-shadow: 20px 20px 0px var(--overflow-blue);
"></div>
</div>
<div class="col-span-12 col-span-md-7 col-span-lg-6 col-span-xl-6 d-flex align-items-center ltr" data-aos="fade-right">
<div class="p-4 p-md-6 py-md-0">
<h3 class="text-white">
“On our first Sunday, we turned to our daughter and said, ‘We don’t know how you feel — but this is our church forever!’”
</h3>
<p>
Roy and Laura have been a part of NewSpring for many years. In 2021, Roy went through a major health event and was in and out of the hospital
for a long time. Through all of the ups and downs, Roy and Laura felt so supported by the church. Their home group took care of them and met
every need they had; all they had to do was ask. Since then, Roy made a truly miraculous recovery!
</p>
<p class="mb-0 text-blue-dark">
<span class="h4 italic font-serif font-bold text-blue tracking-tight">Roy and Laura Beck</span><br />Aiken Volunteers
</p>
</div>
</div>
</div>
<div id="storythree" class="d-grid grid-cols-12 gap-y-4 gap-y-sm-6 gap-x-md-6 gap-x-xl-7">
<div class="position-relative ratio-square col-span-11 col-span-md-5 col-span-lg-5 col-span-xl-4" data-aos="fade-right">
<div
class="ratio-square rounded-2x rounded-l-0 background-cover background-center"
style="
background-image: url('https://s3.amazonaws.com/ns.images/newspring/overflowoffering/2023/overflow_stories_janiya_long.gif');
box-shadow: 20px 20px 0px var(--overflow-blue);
"></div>
</div>
<div class="col-span-12 col-span-md-7 col-span-lg-6 col-span-xl-6 d-flex align-items-center" data-aos="fade-left">
<div class="p-4 p-md-6 py-md-0">
<h3 class="text-white">“NewSpring has become like another home for me!”</h3>
<p>
Janiya is a ninth-grader who started coming to Fuse Student Ministry last year. She fell in love with it and keeps bringing tons of her
friends back to Fuse on Wednesday nights! Janiya has an amazing heart for others and just began to serve in KidSpring on Sundays! Her joy is
infectious, and now, her family attends church with her, too.
</p>
<p class="mb-0 text-blue-dark">
<span class="h4 italic font-serif font-bold text-blue tracking-tight">Janiya Jackson</span><br />Aiken Fuse Student
</p>
</div>
</div>
</div>
</div>
<div class="px-5 px-md-8 page-constrained mx-auto text-center">
<p>
<a href="#give" class="btn btn-primary bg-blue mb-2 mb-sm-0" data-scroll>Give Now</a>
</p>
</div>
</section>
<section id="offering" class="bg-white">
<div class="text-constrained mx-auto text-center">
<h2 class="display-3 text-blue-dark">What is an offering?</h2>
<p>
You may have heard people say “we bring our tithes and offerings” before. Why say both? What is the difference? The word tithe means “a tenth.” The
principle of tithing is found in Scripture even before the law was given by God to the Israelites.
</p>
<p>
We believe the Bible is clear that tithing is a way that believers can show they trust God to provide and are grateful. An offering is anything
beyond that 10%. It’s something we give in response to what God has done and is doing.
</p>
<script src="https://fast.wistia.com/embed/medias/skqxx3cwhf.jsonp" async></script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_responsive_padding my-6 rounded-xl overflow-hidden" data-aos="fade-up" style="padding: 56.25% 0 0 0; position: relative">
<div class="wistia_responsive_wrapper" style="height: 100%; left: 0; position: absolute; top: 0; width: 100%">
<span
class="wistia_embed wistia_async_skqxx3cwhf popover=true popoverAnimateThumbnail=false videoFoam=true playerColor=a9c2e6"
style="display: inline-block; height: 100%; position: relative; width: 100%"
> </span
>
</div>
</div>
<p><a href="#give" data-scroll class="btn btn-primary bg-blue">Give Now</a></p>
<p>Learn more about <a href="/give" class="text-blue">how and why we give.</a></p>
</div>
</section>
<section id="give" class="position-relative bg-blue text-white">
<div class="text-constrained mx-auto text-center">
<div data-aos="fade-up">
<h2 class="display-3 mb-5">Give Now</h2>
<input type="text" class="h4 px-5 p-3 w-100 w-sm-75 mb-5 border-0 rounded-full text-gray-darker text-center" placeholder="Enter an amount" />
<p><a href="/give/now" class="btn btn-primary bg-blue-dark">Give Now</a></p>
</div>
<div class="d-grid grid-cols-12 gap-x-5 mt-6 text-left">
<div class="col-span-12" data-aos="fade-up">
<h3 class="h5 text-blue-light">Total Given</h3>
<h4 class="display-2">
$<span data-purecounter-start="0" data-purecounter-end="338992.81" data-purecounter-decimals="2" class="purecounter"> 0 </span>
</h4>
</div>
<div class="col-span-6" data-aos="fade-up">
<h3 class="h5 text-blue-light">Unique Givers</h3>
<h4 class="display-3">
<span data-purecounter-start="0" data-purecounter-end="225" class="purecounter"> 0 </span>
</h4>
</div>
<div class="col-span-6" data-aos="fade-up">
<h3 class="h5 text-blue-light">Days Left</h3>
<h4 class="display-3">
<span data-purecounter-start="0" data-purecounter-end="121" class="purecounter"> 0 </span>
</h4>
</div>
</div>
</div>
</section>
<section id="report" class="bg-gray-darker text-white">
<div class="page-constrained mx-auto">
<div class="text-center mb-7 mb-md-8">
<p class="pretitle">Year in Review</p>
<h2 class="display-2">Annual Report</h2>
<p class="italic text-kraft">All numbers rounded to the nearest ten thousand.</p>
</div>
<div class="d-grid grid-cols-1 grid-cols-md-2 gap-7 mb-7 py-2 pb-md-5">
<div>
<h3 class="h2 font-black text-white mb-5">2022 Income</h3>
<div data-aos="fade-up">
<h4 class="h5 text-kraft mb-0">General Tithes & Offerings</h4>
<p class="h5 tracking-tighter mb-5">$41.85m <span class="text-gray o-70">91%</span></p>
</div>
<div data-aos="fade-up">
<h4 class="h5 text-kraft mb-0">Overflow Fund</h4>
<p class="h5 tracking-tighter mb-5">$3.48m <span class="text-gray o-70">7.5%</span></p>
</div>
<div data-aos="fade-up">
<h4 class="h5 text-kraft mb-0">The Gauntlet Fund</h4>
<p class="h5 tracking-tighter mb-5">$0.70m <span class="text-gray o-70">1.5%</span></p>
</div>
</div>
<div>
<h3 class="h2 font-black text-white mb-5">2022 Expenses</h3>
<div data-aos="fade-up">
<h4 class="h5 text-kraft mb-0">Next Generation</h4>
<p class="h5 tracking-tighter mb-5">$10.52m <span class="text-gray o-70">23.73%</span></p>
</div>
<div data-aos="fade-up">
<h4 class="h5 text-kraft mb-0">Gatherings, Events, & Facilities</h4>
<p class="h5 tracking-tighter mb-5">$18.54m <span class="text-gray o-70">41.81%</span></p>
</div>
<div data-aos="fade-up">
<h4 class="h5 text-kraft mb-0">Discipleship, Outreach, & Missions</h4>
<p class="mb-2 italic">Of this, over $4.48m was given to local and global mission partners!</p>
<p class="h5 tracking-tighter">$7.52m <span class="text-gray o-70">16.96%</span></p>
</div>
<div data-aos="fade-up">
<h4 class="h5 text-kraft mb-0">Support Operational Expenses</h4>
<p class="h5 tracking-tighter mb-5">$7.76m <span class="text-gray o-70">17.5%</span></p>
</div>
</div>
</div>
<div class="text-center">
<p>
For further questions, please contact us at
<a href="/workflows/800?Recipient=finance%40newspring.cc&ReturnUrl=https%3A%2F%2Fnewspring.cc%2Fpage%2F14127">[email protected]</a> —
we'd love to help!
</p>
<p>
<a href="#give" class="btn btn-primary bg-blue mb-2 mb-sm-0" data-scroll>Give Now</a>
</p>
</div>
<div id="accordion" class="hidden d-grid grid-cols-1 gap-3">
<div data-aos="fade-up">
<div
class="d-flex cursor-pointer"
data-toggle="collapse"
data-parent="#accordion"
href="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne">
<h3 class="h5 text-blue-dark">Deserunt sint cillum elit consectetur esse?</h3>
<i class="text-blue-dark fa-light fa-lg fa-minus ml-5 mt-1"></i>
</div>
<div id="collapseOne" class="collapse text-blue-dark" role="tabpanel" aria-labelledby="headingOne">
<p>
Ea amet ut cillum anim veniam occaecat proident veniam velit eiusmod occaecat incididunt ullamco. Pariatur ut occaecat cupidatat voluptate
occaecat ullamco non veniam ut labore esse sunt ipsum. Cillum dolore consectetur Lorem ipsum sint exercitation. Proident incididunt ea fugiat
id qui mollit id in mollit.
</p>
</div>
</div>
<div data-aos="fade-up">
<div
class="d-flex cursor-pointer"
data-toggle="collapse"
data-parent="#accordion"
href="#collapseTwo"
aria-expanded="true"
aria-controls="collapseTwo">
<h3 class="h5 text-blue-dark">Deserunt aliquip proident occaecat mollit culpa?</h3>
<i class="text-blue-dark fa-light fa-lg fa-plus ml-5 mt-1"></i>
</div>
<div id="collapseTwo" class="collapse in text-blue-dark" role="tabpanel" aria-labelledby="headingOne">
<p>
Pariatur adipisicing sit enim consequat aute eu in consectetur. Irure duis Lorem dolor deserunt ut laborum laboris aliquip. Ullamco proident
aliquip incididunt et incididunt velit laboris enim ipsum cupidatat veniam. Tempor in consequat ut nisi officia in enim reprehenderit nostrud
ut pariatur ea. Amet nostrud enim irure quis dolor reprehenderit.
</p>
</div>
</div>
<div data-aos="fade-up">
<div
class="d-flex cursor-pointer"
data-toggle="collapse"
data-parent="#accordion"
href="#collapseThree"
aria-expanded="true"
aria-controls="collapseThree">
<h3 class="h5 text-blue-dark">Sit ut nulla laborum ipsum nostrud ullamco anim?</h3>
<i class="text-blue-dark fa-light fa-lg fa-plus ml-5 mt-1"></i>
</div>
<div id="collapseThree" class="collapse in text-blue-dark" role="tabpanel" aria-labelledby="headingOne">
<p>
Aliquip duis cillum do aliqua mollit. Qui anim laboris consequat consequat pariatur velit sunt ex voluptate ex nostrud voluptate nisi. Ut aute
magna ullamco mollit labore ut officia aliquip id dolor non. Voluptate nostrud laboris aliquip nulla ea ullamco aute. Culpa duis sit amet enim
dolor veniam cillum pariatur incididunt nulla eiusmod non aliqua aute.
</p>
</div>
</div>
<div data-aos="fade-up">
<div
class="d-flex cursor-pointer"
data-toggle="collapse"
data-parent="#accordion"
href="#collapseFour"
aria-expanded="true"
aria-controls="collapseFour">
<h3 class="h5 text-blue-dark">Ea dolore est cupidatat irure est culpa?</h3>
<i class="text-blue-dark fa-light fa-lg fa-plus ml-5 mt-1"></i>
</div>
<div id="collapseFour" class="collapse in text-blue-dark" role="tabpanel" aria-labelledby="headingOne">
<p>
Reprehenderit ex quis pariatur ipsum fugiat. Ea ullamco nulla laborum tempor culpa aute nisi veniam. Amet excepteur eu amet ex. Est labore
culpa adipisicing minim et irure. Laborum aute nulla laborum adipisicing commodo tempor laborum adipisicing mollit velit proident.
</p>
</div>
</div>
</div>
</div>
</section>
<section id="questions" class="bg-white text-center">
<div class="text-constrained mx-auto">
<h2>Still have questions?</h2>
<p>We’d love to answer any questions you might have.</p>
<p class="mb-0"><a href="/workflows/152" class="btn btn-primary bg-blue">Contact Us</a></p>
</div>
</section>
<script>
let isMobile = false;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
isMobile = true;
}
var swiper = new Swiper(".swiper-container", {
slidesPerView: 1.15,
spaceBetween: 15,
breakpoints: {
667: {
slidesPerView: 1.15,
spaceBetween: 15,
},
768: {
slidesPerView: 1.7,
spaceBetween: 15,
},
1024: {
slidesPerView: 2.6,
spaceBetween: 15,
},
1400: {
slidesPerView: 2.9,
spaceBetween: 15,
},
2300: {
slidesPerView: 3.7,
spaceBetween: 15,
},
},
speed: 200,
loop: false,
cssMode: isMobile,
centeredSlides: true,
roundLengths: true,
grabCursor: true,
resistanceRatio: 0.3,
keyboard: {
enabled: true,
onlyInViewport: false,
},
pagination: {
el: ".swiper-pagination",
dynamicBullets: true,
},
});
$(document).ready(function () {
swiper.update();
new PureCounter({
// Setting that can't' be overriden on pre-element
selector: ".purecounter", // HTML query selector for spesific element
// Settings that can be overridden on per-element basis, by `data-purecounter-*` attributes:
start: 0, // Starting number [uint]
end: 100, // End number [uint]
duration: 0.3, // The time in seconds for the animation to complete [seconds]
delay: 1, // The delay between each iteration (the default of 10 will produce 100 fps) [miliseconds]
once: true, // Counting at once or recount when the element in view [boolean]
pulse: false, // Repeat count for certain time [boolean:false|seconds]
decimals: 0, // How many decimal places to show. [uint]
legacy: true, // If this is true it will use the scroll event listener on browsers
filesizing: false, // This will enable/disable File Size format [boolean]
currency: false, // This will enable/disable Currency format. Use it for set the symbol too [boolean|char|string]
formater: "us-US", // Number toLocaleString locale/formater, by default is "en-US" [string|boolean:false]
separator: true, // This will enable/disable comma separator for thousands. Use it for set the symbol too [boolean|char|string]
});
});
</script>
</div>
<footer class="bg-gray-dark text-white px-4 py-7 px-md-7 py-md-8 text-center">
<div class="d-flex flex-column flex-md-row flex-wrap justify-content-between align-content-center">
<div data-aos="fade-up" class="w-100 w-md-auto height-max-content text-md-left">
<img src="./Themes/new/Assets/SVG/mark.svg" alt="NewSpring Church Logo" class="mb-3" style="width: 40px; max-width: 40px" />
<h6 class="font-black text-uppercase">NewSpring Church</h6>
<p>PO Box 1407<br />Anderson, SC 29622<br /><a href="#">(864) 965-9990</a></p>
<p class="font-sans font-medium">
<small
><a href="https://www.rockrms.com" class="text-white text-hover-white text-decoration-none" target="_blank"
>Built on
<span class="position-relative fa-layers fa-lg fa-fw" style="top: 3px">
<i class="fa-solid fa-circle" style="color: white" aria-hidden="true"></i>
<i class="fa-inverse fa-brands fa-rockrms" style="color: #ee7725; transform: scale(1.1)" data-fa-transform="shrink-6" aria-hidden="true"></i>
</span>
Rock RMS</a
></small
>
</p>
<p class="font-sans font-medium text-uppercase text-gray mb-0"><small>© 2023 NewSpring Church</small></p>
</div>
<div data-aos="fade-up" class="height-max-content text-md-right">
<ul class="list-unstyled font-sans font-medium">
<li><a href="#" class="text-decoration-none">Privacy Policy</a></li>
<li><a href="#" class="text-decoration-none">Terms of Use</a></li>
<li><a href="#" class="text-decoration-none">Reprinting & Reposting</a></li>
</ul>
<ul class="list-inline">
<li>
<a href="#" class="text-white">
<i class="fa-brands fa-xl fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" class="text-white">
<i class="fa-brands fa-xl fa-twitter"></i>
</a>
</li>
<li>
<a href="#" class="text-white">
<i class="fa-brands fa-xl fa-instagram"></i>
</a>
</li>
<li>
<a href="#" class="text-white">
<i class="fa-brands fa-xl fa-youtube"></i>
</a>
</li>
</ul>
</div>
</div>
</footer>
<script>
var scroll = new SmoothScroll("a[data-scroll]");
$(".collapse").collapse();
</script>
</body>
</html>