-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (87 loc) · 4.31 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
---
layout: main
title: With Phil - Coming Soon
description: Donate cashlessly with confidence to those sleeping rough.
---
<script>
function gifbg() {
var imgCount = 4;
var randomCount = (Math.floor(Math.random() * imgCount));
var images = [
'background: linear-gradient(-30deg, rgba(119,0,255,0.6) 0%, rgba(84,107,254,0.6) 35%, rgba(60,172,255,0.6) 72%, rgba(129,216,255,0.6) 100%, rgba(130,217,255,0.6) 100%), url(/images/pages/hero-1.jpg);background-position: center;background-size: cover;',
'background: linear-gradient(-30deg, rgba(119,0,255,0.6) 0%, rgba(84,107,254,0.6) 35%, rgba(60,172,255,0.6) 72%, rgba(129,216,255,0.6) 100%, rgba(130,217,255,0.6) 100%), url(/images/pages/hero-2.jpg);background-position: center;background-size: cover;',
'background: linear-gradient(-30deg, rgba(119,0,255,0.4) 0%, rgba(84,107,254,0.4) 35%, rgba(60,172,255,0.4) 72%, rgba(129,216,255,0.4) 100%, rgba(130,217,255,0.4) 100%), url(/images/pages/hero-3.jpg);background-position: center;background-size: cover;',
'background: url(/images/pages/hero-4.jpg);background-position: center;background-size: cover;'];
document.getElementById('banner').setAttribute("style", images[randomCount] );
}
$(document).ready(function(){
gifbg();
});
</script>
<div class="page-content">
<div id="banner" class="hero-banner home">
<div class="row align-middle align-center">
<div class="large-10 medium-10 small-12 columns">
<div class="row align-middle">
<div class="large-9 medium-9 small-12 columns">
<!-- <h1>Help homeless people<br>
<span class="typer" id="main" data-words="raise money. ,pay bills. ,find help. ,find employment. ,buy food." data-colors="white" data-delay="100" data-deleteDelay="2000"></span>
</h1> -->
<h1>Help the Homeless, <br> With Phil</h1>
</div>
<div class="large-7 medium-7 small-12 columns">
<h4>Cashless donations from the comfort of your phone.</h4>
<div class="buttons hide-for-mob">
<a class="button pink-fill signup" type="button">SIGN ME UP!</a>
<a class="button white scroll readmore" type="button">READ MORE</a>
</div>
<div class="buttons show-for-mob">
<a class="button white readmore" type="button">READ MORE</a>
<a class="button pink-fill signup" type="button">SIGN ME UP!</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="main-body">
<div class="row align-center" id="readmore">
<div class="large-10 medium-10 small-12 columns">
<div class="row">
<div class="large-4 medium-4 small-12 columns hide-for-small-only">
<img style="position: relative;top: 50%;transform: translateY(-50%);"src="/images/pages/app.png" alt="Image"></img>
</div>
<div class="large-8 medium-8 small-12 columns">
<div class="row banner">
<div class="large-12 medium-12 small-12 columns">
<h2>Local Discovery</h2>
<p>Discover people in need while walking around your city with your phone.</p>
</div>
</div>
<div class="row banner">
<div class="large-12 medium-12 small-12 columns">
<h2>Discover Their Story</h2>
<p>Learn about people's lives, backstories and future hopes, so you know who you're donating to.</p>
</div>
</div>
<div class="row banner">
<div class="large-12 medium-12 small-12 columns">
<h2>Cashless Donations</h2>
<p>100% of your donations get to the people in need. Donations are redeemable at selected retailers and partners.</p>
</div>
</div>
<!-- <div class="row banner">
<div class="large-12 medium-12 small-12 columns">
<h2>Raise awareness of homelessness</h2>
<p>Share your gifting on social media and get your friends to help the homeless With Phil.</p>
<div class="text-center medium-text-left">
<a href="/how-it-works" class="button">LEARN MORE</a>
</div>
</div>
</div> -->
</div>
</div>
</div>
</div>
</div>
</div>