-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
182 lines (168 loc) · 8.75 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
<!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, shrink-to-fit=no">
<title>Silly Utility</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<!-- Custom Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<style>
header {
position:relative;
width:100%;
min-height:auto;
overflow-y:hidden;
background:url(/assets/images/bg-pattern.png),linear-gradient(to left,#8e44ad,#e74c3c);
color:#fff;
font-family:Catamaran,Helvetica,Arial,sans-serif;font-weight:200;letter-spacing:1px;
padding: 3em 0;
}
section{padding:5em 0}
section.feature{padding:150px 0;position:relative}
.bg-one{color:white;background:#f1c40f;background:-webkit-linear-gradient(#f1c40f,#e7842d);background:linear-gradient(#f1c40f,#e7842d)}
.bg-two{color:white;background:#3498db;background:-webkit-linear-gradient(#3498db,#2980b9);background:linear-gradient(#3498db,#2980b9)}
section.features .section-heading{margin-bottom:100px}
section.features .section-heading h2{margin-top:0}
section.features .section-heading p{margin-bottom:0}
section.features .device-container,section.features .feature-item{max-width:300px;margin:0 auto}
section.features .device-container{margin-bottom:100px}
section.cta{position:relative;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;-o-background-size:cover;background-position:center;background-image:url(bg-cta.jpg);padding:250px 0}
ul.list-social li a{display:inline-block;height:80px;width:80px;line-height:80px;font-size:40px;border-radius:100%;color:#fff}
ul.list-social li.social-twitter a{background-color:#1da1f2}
ul.list-social li.social-twitter a:hover{background-color:#0d95e8}
ul.list-social li.social-facebook a{background-color:#3b5998}
ul.list-social li.social-facebook a:hover{background-color:#344e86}
</style>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-lg-7 align-self-center justify-content-center">
<h1 class="display-3">Compare Utility Bills With Neighbors.</h1>
<form action="all-bills.html" method="get" class="form-inline">
<div class="input-group">
<input type="text" pattern="\d*" class="form-control form-control-lg" name="zipcode" placeholder="ZIP Code">
<button class="btn btn-lg btn-primary" type="sumbit">Go!</button>
</div>
</form>
</div>
<div class="col-lg-5">
<img src="/assets/images/compare.png" class="img-fluid" alt="Comcast" style="max-height:350px">
</div>
</div>
</div>
</header>
<section id="one" class="feature bg-one text-center">
<h2 class="display-4">You're a Comcast customer for 33 years.</h2>
<p class="lead">But someone else on your block gets better service for less money.</p>
<div class="badges">
<i class="fa fa-television fa-5x" aria-hidden="true"></i>
<i class="fa fa-globe fa-5x" aria-hidden="true"></i>
<i class="fa fa-phone fa-5x" aria-hidden="true"></i>
</div>
</section>
<section id="two" class="feature bg-two text-center">
<h2>Renegotiate your utility bills by learning what your neighbors pay.</h2>
<p>Everybody on your block probably pays different prices for their internet / TV and phone service. Also, the utility companies have a strong upper hand when talking with you:</p>
<div class="badges">
<i class="fa fa-money fa-5x" aria-hidden="true"></i><br>
<i class="fa fa-magnet fa-5x" aria-hidden="true"></i>
</div>
<ul>
<li>They know how much you pay, and everyone else pays</li>
<li>They write the legislation that prevents you from starting a competing company</li>
<li>They make agreements with other utilities to ensure only one or a few companies operate in your zip code</li>
<li>They advertise one price on TV and then charge a completely different price on the bill</li>
</ul>
<p>We are a civic project to fix this problem by empowering consumers to make better decisions.</p>
<div class="badges">
<i class="text-info fa fa-magic fa-5x" aria-hidden="true"></i><br>
</div>
<ul>
<li>See what your neighbors pay</li>
<li>Call your utility company to renegotiate your rate</li>
<li>Use the money you save to go on vacation</li>
</ul>
</section>
<section id="features" class="features text-center">
<h2 class="display-4">Renegotiate your bill.</h2>
<p class="lead text-muted">See what your neighbors pay, and call to ask for the same deal.</p>
<hr class="m-5">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="/assets/images/alert.png" class="img-fluid" alt="Review Comcast XFINITY bill">
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-6 text-center">
<i class="icon-screen-smartphone text-primary"></i>
<h3>Philly <i class="text-danger fa fa-heart" aria-hidden="true"></i></h3>
<p class="taext-muted">Works in Philadelphia, PA and surrounding neighborhoods.</p>
</div>
<div class="col-md-6 text-center">
<i class="icon-camera text-primary"></i>
<h3>It's free</h3>
<p class="text-muted">We do not charge money for this service.</p>
</div>
</div>
<div class="row">
<div class="col-md-6 text-center">
<i class="icon-lock-open text-primary"></i>
<h3>Contribute</h3>
<p class="text-muted">Send us your utility bill to compare. Use a smartphone with Snapchat or any computer to redact in seconds.</p>
</div>
<div class="col-md-6 text-center">
<i class="icon-present text-primary"></i>
<h3>You redact</h3>
<p class="text-muted">You remove account numbers, names and part of your address BEFORE sending us your bill. We also review and delete anything you missed before publishing.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="one" class="feature bg-one text-center" style="background:#fdcc52;background:-webkit-linear-gradient(#fdcc52,#fdc539);background:linear-gradient(#fdcc52,#fdc539)">
<div class="container">
<h2 class="display-4"><i style="color:red" class="fa fa-plane" aria-hidden="true"></i> Use the money to go on vacation or something.</h2>
<h2 class="display-4"><i style="color:red" class="fa fa-heart" aria-hidden="true"></i> Tell everyone you know.</h2>
<ul class="list-inline list-social">
<li class="list-inline-item social-twitter">
<a target="_blank" href="https://twitter.com/intent/tweet?text=I'm%20renegotiating%20my%20utility%20plans,%20thanks%20#sillyutility"><i class="fa fa-twitter"></i></a>
</li>
<li class="list-inline-item social-facebook">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://sillyutility.net"><i class="fa fa-facebook"></i></a>
</li>
</ul>
</div>
</section>
<footer>
<div class="container text-center py-4">
<p>Made by <a href="https://phor.net/">William Entriken</a> because most utilities suck.</p>
<p>Mail your <strong>redacted</strong> utility bill to: volunteers<span>@</span>sillyutility.net.</p>
<p>Privacy policy: we publish what you give us, that's the point.</p>
</div>
</footer>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-52764-24"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-52764-24');
</script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
$.getJSON("https://freegeoip.net/json/",function(result){
$('input').val(result.zip_code)
});
</script>
</body>
</html>