generated from StartBootstrap/startbootstrap-landing-page
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
312 lines (288 loc) · 16.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>FireFlix - Watch TV-shows and movies</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://sellfy.com/js/api_buttons.js"></script>
<!-- Custom styles for this template -->
<link href="css/landing-page.min.css" rel="stylesheet">
<link rel="icon"
type="image/png"
href="img/favicon.ico">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-dark bg-black static-top">
<a class="navbar-brand" href="#"><img src="img/fireflix.png" alt="logo"/></a>
<a class="btn btn-danger" href="https://app.fireflix.stream">Sign In</a>
</nav>
<!-- Masthead -->
<header class="masthead text-white text-center">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h1 class="mb-5">Unlimited movies and TV shows.<br/> half the price.</h1>
</div>
<div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
<form>
<div class="form-row">
<div class="col-12 col-md-12 mb-2 mb-md-0">
<button class="sellfy-buy-button sellfy-buy-button-custom btn btn-block btn-lg btn-danger" id="4yrt" href="https://sellfy.com/p/4yrt/">Join Free for a Month</button>
</div>
</div>
</form>
</div>
</div>
</div>
</header>
<!-- Icons Grid -->
<section class="features-icons bg-black text-center">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-film m-auto text-light"></i>
</div>
<h3 class="text-light">More Shows and Films</h3>
<p class="lead mb-0 text-light">Way more content than other streaming services!</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="m-auto text-light" viewBox="0 0 980 984" style="width: 75%; height: 75%;vertical-align: middle;fill: currentColor;overflow: hidden;">
<path d="M735.1 1.8c-1.1 2-4.2 18.8-6.8 36.7-2.5 17-2.5 63.1-.1 76 4.7 24.5 12.7 43.6 24.9 59.1 5.6 7.1 20.4 23.7 37.2 41.9 15 16.2 21.1 24.4 28.2 37.7 5.6 10.6 5.6 10.8 2.8 9.5-1.6-.6-27.1-13.6-56.8-28.8-77.3-39.6-109.8-55.7-111.5-55.1-5.7 1.8-235.3 101-539.3 233.1C17 453.9 0 461.8 0 464.7c0 1.7 10.4 26 65 152.3 135.5 312.9 159.1 366.1 163.1 366.8 2 .4 31.6-12.2 204.9-87.3 314.6-136.3 446-193.9 447.6-196 4.1-5.6 99.4-344.2 99.4-353.3 0-2.2-5.2-5.1-51.3-28.7l-30.5-15.7-2.2-10.7c-12.2-59.4-25.1-83.6-70.5-131.6-22.4-23.7-28.4-32-33-45.9-6.2-18.9-5.7-49.7 1.7-90.9 1.1-6.5 1.8-12 1.6-12.2-.6-.6-55.9-11.5-58.1-11.5-.9 0-2.1.8-2.6 1.8zM686.8 265c75.1 37.7 141.2 72.6 141.2 74.4 0 .7-2.8 5.9-6.1 11.6-6.5 10.9-18.9 24.9-28.2 31.7l-4.8 3.6-10-4.7c-23.4-11.1-40-13.9-58.7-10-29.2 6-52.2 26.7-62.3 56.2-3.2 9.3-3.3 10.3-3.4 25.2 0 16.7.8 21.1 6.6 33.7 7 15.8 21.7 31.9 35.7 39.1 42.2 22 91.8 6.3 113.7-35.8 6.2-12.2 8.5-21.1 9.2-36l.6-12.5 9.5-7.5c21.3-16.9 38-36 51.2-59 2.4-4.1 4.4-7.7 4.6-7.9.1-.1 4.8 2.1 10.4 5l10.1 5.3-.6 4c-2.5 15.1-43.6 163-67.9 244.1-9.5 31.8-8.7 30-13.7 32.6-2.3 1.1-65.7 28.8-140.8 61.4C525.2 788 274.5 896.9 265 901c-3.6 1.6-6.8 2.6-7.1 2.2-1.2-1.2-169.8-390.6-175-404-.8-2-.2-2.6 8.1-6.7 28.4-14.3 196.8-88.2 467-205.1 47.6-20.6 87.9-38.1 89.5-38.9 1.7-.7 3.1-1.4 3.3-1.4.1-.1 16.3 8 36 17.9z"/>
<path d="M436.3 423.2c-11.1 5.1-15.3 7.5-15.3 8.8 0 4.3-26.4 276-30.6 313.9-1.5 13.9-2.1 23.8-1.6 24.3 1.2 1.2 9.5-1.7 22.7-7.6 9.1-4.1 10.1-4.8 10.8-7.8.4-1.8 5.2-49.9 10.8-106.8 5.5-56.9 12.9-132 16.4-166.9 3.6-34.9 6.2-63.8 5.9-64.2-1-1.7-4-.7-19.1 6.3zM288.8 490c-24.4 3.8-50.9 23.1-61.3 44.5-8.8 18.2-9.6 45.5-2 68.2 5.9 17.6 13 29.7 24.4 41.7 15.8 16.4 33.1 24 55.1 23.9 43.2-.1 76.2-31 78.7-73.8.7-12.6-.8-23-5.1-36.1-8.8-26.1-22.6-46.4-38.8-56.7-14.6-9.4-35.3-14.1-51-11.7zm12 42.9c4.7 2.4 13.9 12 18.7 19.6 5.3 8.2 11.1 21 14.2 31.3 3.5 11.9 3.8 25.7.5 31.9-4.2 7.9-11.4 12.6-19.7 12.6-13.7.2-27.6-13.4-38.1-37.3-14-31.8-10.5-53.6 9.6-60.1 3.6-1.2 10.4-.3 14.8 2zM523.3 519.1c-15.2 2.5-34.9 14.5-45.9 27.8-11.6 13.9-17.4 30.6-17.4 49.8 0 39.4 22.5 77.3 55.2 92.8 11.4 5.5 25.6 6.9 44.8 4.4 15.8-1.9 24.9-6.5 38.6-19.2 10.4-9.8 17.5-20.2 21-31 2.4-7.2 2.8-10.3 3.2-24.7.5-19.5-1-27.6-8.3-45-6.1-14.4-13.1-24.7-24-35.6-7.6-7.6-10.6-9.9-18.6-13.8-6.9-3.5-11.4-5-16.4-5.6-8.6-1.1-25.2-1.1-32.2.1zm18.5 41.5c12.1 6 24.1 25.6 31.4 51.1 1.7 5.9 2.2 10.5 2.3 18.9 0 10.3-.2 11.3-2.6 15-5.9 8.9-19.4 12.5-28.9 7.6-18.6-9.7-34.9-41.7-35.3-69.3-.2-9 0-9.9 2.8-14.5 6.6-10.7 19.2-14.3 30.3-8.8z"/>
</svg>
</div>
<h3 class="text-light">Half the price!</h3>
<p class="lead mb-0 text-light">Way cheaper than other streaming services!</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-fire m-auto text-light"></i>
</div>
<h3 class="text-light">Daily content</h3>
<p class="lead mb-0 text-light">A new show or movie every day!</p>
</div>
</div>
</div>
</div>
</section>
<!-- Image Showcases -->
<section class="showcase">
<div class="container-fluid p-0 bg-dark">
<div class="row no-gutters">
<div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image: url('img/bg-showcase-1.jpg');"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text text-light">
<h2>Loads of content</h2>
<p class="lead mb-0">Due to smart deals, FireFlix has way more content than Netflix, Disney+, Hulu, CBS and other streaming sites. In fact: FireFlix has many movies and shows from them!</p>
</div>
</div>
<div class="row no-gutters">
<div class="col-lg-6 text-white showcase-img" style="background-image: url('img/bg-showcase-2.jpg'); background-position: -3em;;"></div>
<div class="col-lg-6 my-auto showcase-text text-light">
<h2>One low price</h2>
<p class="lead mb-0">FireFlix is available at one low price, everything included! Say goodbye to confusing subscriptions and juggling with multiple streaming services to find that one movie.</p>
</div>
</div>
<div class="row no-gutters">
<div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image: url('img/bg-showcase-3.jpg');"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text text-light">
<h2>Daily dose of entertainment</h2>
<p class="lead mb-0">We add new movies and series every day! Yes, you heard it right: every day! This way you'll never run out of stuff to watch.</p>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section class="accordion-section clearfix bg-black">
<div class="container faqdiv">
<h2 class="faqHeader text-light">Frequently Asked Questions </h2>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading p-3 mb-3 bg-dark" role="tab" id="heading0">
<h3 class="panel-title">
<a class="collapsed text-light font-weight-normal" role="button" title="" data-toggle="collapse" data-parent="#accordion" href="#collapse0" aria-expanded="true" aria-controls="collapse0">
What is FireFlix?
</a>
</h3>
</div>
<div id="collapse0" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading0">
<div class="panel-body px-3 mb-4 text-light">
<p>FireFlix is a streaming service that offers a wide variety of award-winning TV shows, movies, anime, documentaries, and more on thousands of internet-connected devices. </p>
<p>You can watch as much as you want, whenever you want without a single commercial – all for one low monthly price. There's always something new to discover and new TV shows and movies are added every day! </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading p-3 mb-3 bg-dark" role="tab" id="heading1">
<h3 class="panel-title">
<a class="collapsed text-light font-weight-normal" role="button" title="" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
How much does FireFlix cost?
</a>
</h3>
</div>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body px-3 mb-4 text-light">
<p>Watch FireFlix on your smartphone, tablet, laptop or computer. All for one fixed monthly fee of $4,99. No extra costs, no contracts.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading p-3 mb-3 bg-dark" role="tab" id="heading2">
<h3 class="panel-title">
<a class="collapsed text-light font-weight-normal" role="button" title="" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="true" aria-controls="collapse2">
How do I cancel?
</a>
</h3>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body px-3 mb-4 text-light">
<p>FireFlix is flexible. There are no pesky contracts and no commitments. You can easily cancel your account online in two clicks. There are no cancellation fees – start or stop your account anytime.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading p-3 mb-3 bg-dark" role="tab" id="heading3">
<h3 class="panel-title">
<a class="collapsed text-light font-weight-normal" role="button" title="" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="true" aria-controls="collapse3">
What can I watch on FireFlix?
</a>
</h3>
</div>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
<div class="panel-body px-3 mb-4 text-light">
<p>FireFlix has an extensive library of feature films, documentaries, TV shows, anime, award-winning Netflix originals, and more. Watch as much as you want, anytime you want. Join free for 30 days to see everything FireFlix has to offer.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading p-3 mb-3 bg-dark" role="tab" id="heading4">
<h3 class="panel-title">
<a class="collapsed text-light font-weight-normal" role="button" title="" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="true" aria-controls="collapse4">
How does the free trial work?
</a>
</h3>
</div>
<div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
<div class="panel-body px-3 mb-4 text-light">
<p>Try us free for 30 days! If you enjoy your FireFlix trial, do nothing and your membership will automatically continue for as long as you choose to remain a member. Cancel anytime before your trial ends and you won’t be charged. There’s no complicated contract, no cancellation fees, and no commitment. Cancel online anytime, 24 hours a day.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section class="call-to-action text-white text-center">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h2 class="mb-4">Ready to get started? Sign up now!</h2>
</div>
<div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
<form>
<div class="form-row">
<div class="col-12 col-md-12 mb-2 mb-md-0">
<button class="sellfy-buy-button sellfy-buy-button-custom btn btn-block btn-lg btn-danger" id="4yrt" href="https://sellfy.com/p/4yrt/">Try for free!</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer bg-black">
<div class="container">
<div class="row">
<div class="col-lg-6 h-100 text-center text-lg-left my-auto">
<li class="list-inline-item">
<a href="" class="text-secondary" data-toggle="modal" data-target="#ContactModal">Contact</a>
<div class="modal fade" id="ContactModal" tabindex="-1" role="dialog" aria-labelledby="ContactModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content bg-dark">
<div class="modal-header">
<h5 class="modal-title text-light" id="ContactModalLabel">Contact</h5>
<button type="button" class="close text-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group text-light">
<label for="user-name" class="col-form-label">Your name:</label>
<input type="text" class="form-control bg-secondary text-light" id="user-name">
</div>
<div class="form-group text-light">
<label for="user-email" class="col-form-label">Your e-mail:</label>
<input type="mail" class="form-control bg-secondary text-light" id="user-email">
</div>
<div class="form-group text-light">
<label for="message-text" class="col-form-label">Describe your problem in detail:</label>
<textarea class="form-control bg-secondary text-light" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Send message</button>
</div>
</div>
</div>
</div>
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
<a class="text-secondary" href="terms.html">Terms of Use</a>
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
<a class="text-secondary" href="privacy.html">Privacy Policy</a>
</li>
</ul>
<p class="text-muted small mb-4 mb-lg-0">© FireFlix 2020. All Rights Reserved.</p>
</div>
<div class="col-lg-6 h-100 text-center text-lg-right my-auto">
<ul class="list-inline mb-0">
<li class="list-inline-item mr-3">
<a href="#">
<i class="fab fa-facebook fa-2x fa-fw text-secondary"></i>
</a>
</li>
<li class="list-inline-item mr-3">
<a href="#">
<i class="fab fa-twitter-square fa-2x fa-fw text-secondary"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fab fa-instagram fa-2x fa-fw text-secondary"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>