-
Notifications
You must be signed in to change notification settings - Fork 21
/
index.html
534 lines (504 loc) · 39.4 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simplest Start-up Starter</title>
<meta name="description" content="Simplest Start-up Starter is the most simple template for a landing page. However, it is strongly focused on everything that a good landing page
should achieve : speed, responsiveness, conversion friendly.">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<link rel="stylesheet" href="/all.css">
<link rel="canonical" href="/simplest-startup-starter/">
<link rel="alternate" type="application/rss+xml" title="Simplest Start-up Starter" href="/simplest-startup-starter/feed.xml">
</head>
<body>
<header class="site-header">
</header>
<div class="page-content">
<div class="page-content-container">
<div class="home">
<!--
MENU SECTION
-->
<section class="menu-section ">
<div class="menu-section-container">
<div class="menu-section-container-hamburger">
<div class="menu-section-hamburger">
<div id="nav-toggle" href="#"><span></span></div>
</div>
</div>
<nav class="menu-section-container-nav bigger h2-like">
<div class="nav-item menu-nav-item" data-target="explanation-section"><strong>Motivation</strong></div>
<div class="nav-item menu-nav-item" data-target="howitworks-section"><strong>How it works</strong></div>
<div class="nav-item menu-nav-item" data-target="faq-section"><strong>Faq</strong></div>
<div class="nav-item menu-nav-item" data-target="features-section"><strong>Features</strong></div>
<div class="nav-item menu-nav-item" data-target="twitter-section"><strong>Build trust</strong></div>
<div class="nav-item menu-nav-item" data-target="pricing-section"><strong>Pricing</strong></div>
<div class="nav-item menu-nav-item" data-target="contact-section"><strong>Join</strong></div>
</nav>
</div>
</section>
<!--
HERO SECTION
-->
<section class="hero-section ">
<div class="wrapper w960p flex-container flex-container-v">
<h1 class="xlbiggest flex-item-center txtcenter">Simplest start-up starter</h1>
<p class="biggest flex-item-center h2-like txtcenter">Bare bones HTML landing page template</p>
<p class="biggest flex-item-center h2-like txtcenter">focused on engagement and conversion</p>
<p class="biggest flex-item-center h2-like txtcenter"></p>
<div class="flex-item-center">
<div class="mtxl w150p"></div>
<button class="button-primary txtcenter main-cta" onclick="$.scrollTo('.contact-section', {duration:500})">Join mailing list</button>
<div class="txtcenter mtm cpointer secondary-cta">
<a class="h4-like" href="https://github.com/bdavidxyz/simplest-startup-starter">Download on GitHub</a>
</div>
</div>
</div>
</section>
<!--
EXPLANATION SECTION
-->
<section class="explanation-section mtxlp ">
<div class="wrapper w960p flex-container flex-container-v">
<div class="separator w10"></div>
<h1 class="xbiggest flex-item-center txtcenter mtxl">Motivation</h1>
<p class="flex-item-center h3-like txtcenter mts"> If you want to try a business idea, you will need a landing page.</p>
<p class="flex-item-center h3-like txtcenter mts"> </p>
<p class="flex-item-center h3-like txtcenter mts"> Existing templates are more beautiful than this one, but they are way <strong>harder to extend</strong>, they have <strong>poor readability</strong>, are <strong>not free</strong> for commercial use, <strong>load slowly</strong>, have <strong>unoptimized conversion rate</strong>, and are often <strong>tied to backend</strong> technologies like Wordpress.</p>
<p class="flex-item-center h3-like txtcenter mts"> </p>
<p class="flex-item-center h3-like txtcenter mts"> Not this simple template. </p>
<div class="flex-item-center">
<a class=" button flex-item-center mtxl" href="https://github.com/bdavidxyz/simplest-startup-starter"> View it on GitHub</a>
</div>
</div>
</section>
<!--
HOWITWORKS SECTION
-->
<section class="howitworks-section mtxlp">
<div class="wrapper w960p flex-container flex-container-v">
<div class="separator w10"></div>
<h1 class="xbiggest flex-item-center txtcenter mtxl">How it works</h1>
<p class="flex-item-center h3-like txtcenter mts">You will need very basic technical skills to make it works.</p>
<p class="flex-item-center h3-like txtcenter mts">The template is a one-pager with plain HTML • CSS • JS.</p>
<div class="grid has-gutter-xl mtxl">
<div class="txtcenter">
<div>
<strong class="h3-like">1</strong>
</div>
<div class="big">Subscribe to crisp.im, google analytics, and formspree. They have a nice free tier.</div>
</div>
<div class="txtcenter">
<div class="mtm is-hidden tiny-visible"></div>
<div>
<strong class="h3-like">2</strong>
</div>
<div class="big">Go to the GitHub repository and follow instructions of the README.md file. </div>
</div>
<div class="txtcenter">
<div class="mtm is-hidden tiny-visible"></div>
<div>
<strong class="h3-like">3</strong>
</div>
<div class="big">Focus on copywriting, then start to interact and collect mail from visitors.</div>
</div>
</div>
</div>
</section>
<!--
FEATURES SECTION
-->
<section class="features-section mtxl">
<div class="wrapper w960p flex-container flex-container-v">
<div class="separator w10"></div>
<h1 class="xbiggest flex-item-center txtcenter mtxl">Features</h1>
<p class="flex-item-center h3-like txtcenter mts"> It's a classic amongst landing page sections : the section that list the features that your service provides</p>
<div class="features-container mtxl">
<div class="grid-2 has-gutter">
<div class="Media mbl">
<svg class="Media-figure" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490" width="50px" height="50px" xml:space="preserve">
<g>
<path d="M432.05,373.8c-14.8,0-28.3,5.4-38.4,14.8l-74.1-78.1c15.5-17.5,24.8-40.4,24.8-66c0-54.7-44.7-99.4-99.4-99.4 c-5,0-10.5,0.4-15.5,1.2c0,0,18.2-68.3,18.2-68.7c20.2-1.6,35.7-18.2,35.7-38.8c0-21.4-17.5-38.8-38.8-38.8s-38.1,17.9-38.1,39.2 c0,15.5,9.3,28.7,22.1,34.9v0.4l-21.3,78.4c-13.2,5.5-25,13.7-34.6,23.7l-72.6-78c10.1-10.5,16.3-24.5,16.3-40.4 c0-31.8-26-57.9-57.9-57.9s-57.9,26-57.9,57.9c0,31.8,26,57.9,57.9,57.9c8.8,0,17.7-2.3,25-5.7l77.1,82.6 c-9.3,15.1-14.7,33-14.7,52.4c0,22.4,7.7,43.3,20,59.9c0,0-53,53.4-53.4,53.4c-11.6-7.8-25.2-12.4-40.4-12.4 c-39.6,0.4-71.4,32.2-71.4,71.8s31.8,71.4,71.4,71.4s71.4-31.8,71.4-71.4c0-17.5-6.2-33.4-16.7-45.8l52.4-52.4 c17.5,15.5,40.4,24.8,65.6,24.8c22.5,0,43.1-7.4,59.7-20.1c0,0,75.8,79.6,76.2,79.9c-4.7,8.2-7,17.5-7,27.6 c0,31.8,26,57.9,57.9,57.9s57.9-26,57.9-57.9S463.85,373.8,432.05,373.8z" fill="#555"/>
</g>
</svg>
<div class="Media-body big prm"><strong>Beginner friendly.</strong> There is one version with only plain CSS and JavaScript, and one version for more experienced developers that make the template easier to extend.</div>
</div>
<div class="Media mbl">
<svg class="Media-figure" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490" width="50px" height="50px" xml:space="preserve">
<g>
<path d="M432.05,373.8c-14.8,0-28.3,5.4-38.4,14.8l-74.1-78.1c15.5-17.5,24.8-40.4,24.8-66c0-54.7-44.7-99.4-99.4-99.4 c-5,0-10.5,0.4-15.5,1.2c0,0,18.2-68.3,18.2-68.7c20.2-1.6,35.7-18.2,35.7-38.8c0-21.4-17.5-38.8-38.8-38.8s-38.1,17.9-38.1,39.2 c0,15.5,9.3,28.7,22.1,34.9v0.4l-21.3,78.4c-13.2,5.5-25,13.7-34.6,23.7l-72.6-78c10.1-10.5,16.3-24.5,16.3-40.4 c0-31.8-26-57.9-57.9-57.9s-57.9,26-57.9,57.9c0,31.8,26,57.9,57.9,57.9c8.8,0,17.7-2.3,25-5.7l77.1,82.6 c-9.3,15.1-14.7,33-14.7,52.4c0,22.4,7.7,43.3,20,59.9c0,0-53,53.4-53.4,53.4c-11.6-7.8-25.2-12.4-40.4-12.4 c-39.6,0.4-71.4,32.2-71.4,71.8s31.8,71.4,71.4,71.4s71.4-31.8,71.4-71.4c0-17.5-6.2-33.4-16.7-45.8l52.4-52.4 c17.5,15.5,40.4,24.8,65.6,24.8c22.5,0,43.1-7.4,59.7-20.1c0,0,75.8,79.6,76.2,79.9c-4.7,8.2-7,17.5-7,27.6 c0,31.8,26,57.9,57.9,57.9s57.9-26,57.9-57.9S463.85,373.8,432.05,373.8z" fill="#555"/>
</g>
</svg>
<div class="Media-body big prm"><strong>As much help as needed.</strong> Step-by-step docs so that you'll never walk alone. This is my main open-source project, so I will actively maintain the project and reply to every request.</div>
</div>
</div>
<div class="grid-2 has-gutter">
<div class="Media mbl">
<svg class="Media-figure" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490" width="50px" height="50px" xml:space="preserve">
<g>
<path d="M432.05,373.8c-14.8,0-28.3,5.4-38.4,14.8l-74.1-78.1c15.5-17.5,24.8-40.4,24.8-66c0-54.7-44.7-99.4-99.4-99.4 c-5,0-10.5,0.4-15.5,1.2c0,0,18.2-68.3,18.2-68.7c20.2-1.6,35.7-18.2,35.7-38.8c0-21.4-17.5-38.8-38.8-38.8s-38.1,17.9-38.1,39.2 c0,15.5,9.3,28.7,22.1,34.9v0.4l-21.3,78.4c-13.2,5.5-25,13.7-34.6,23.7l-72.6-78c10.1-10.5,16.3-24.5,16.3-40.4 c0-31.8-26-57.9-57.9-57.9s-57.9,26-57.9,57.9c0,31.8,26,57.9,57.9,57.9c8.8,0,17.7-2.3,25-5.7l77.1,82.6 c-9.3,15.1-14.7,33-14.7,52.4c0,22.4,7.7,43.3,20,59.9c0,0-53,53.4-53.4,53.4c-11.6-7.8-25.2-12.4-40.4-12.4 c-39.6,0.4-71.4,32.2-71.4,71.8s31.8,71.4,71.4,71.4s71.4-31.8,71.4-71.4c0-17.5-6.2-33.4-16.7-45.8l52.4-52.4 c17.5,15.5,40.4,24.8,65.6,24.8c22.5,0,43.1-7.4,59.7-20.1c0,0,75.8,79.6,76.2,79.9c-4.7,8.2-7,17.5-7,27.6 c0,31.8,26,57.9,57.9,57.9s57.9-26,57.9-57.9S463.85,373.8,432.05,373.8z" fill="#555"/>
</g>
</svg>
<div class="Media-body big prm"><strong>Free hosting.</strong> The tool come with a command to deploy your landing page on GitHub pages, which offers free hosting. Not mandatory though.</div>
</div>
<div class="Media mbl">
<svg class="Media-figure" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490" width="50px" height="50px" xml:space="preserve">
<g>
<path d="M432.05,373.8c-14.8,0-28.3,5.4-38.4,14.8l-74.1-78.1c15.5-17.5,24.8-40.4,24.8-66c0-54.7-44.7-99.4-99.4-99.4 c-5,0-10.5,0.4-15.5,1.2c0,0,18.2-68.3,18.2-68.7c20.2-1.6,35.7-18.2,35.7-38.8c0-21.4-17.5-38.8-38.8-38.8s-38.1,17.9-38.1,39.2 c0,15.5,9.3,28.7,22.1,34.9v0.4l-21.3,78.4c-13.2,5.5-25,13.7-34.6,23.7l-72.6-78c10.1-10.5,16.3-24.5,16.3-40.4 c0-31.8-26-57.9-57.9-57.9s-57.9,26-57.9,57.9c0,31.8,26,57.9,57.9,57.9c8.8,0,17.7-2.3,25-5.7l77.1,82.6 c-9.3,15.1-14.7,33-14.7,52.4c0,22.4,7.7,43.3,20,59.9c0,0-53,53.4-53.4,53.4c-11.6-7.8-25.2-12.4-40.4-12.4 c-39.6,0.4-71.4,32.2-71.4,71.8s31.8,71.4,71.4,71.4s71.4-31.8,71.4-71.4c0-17.5-6.2-33.4-16.7-45.8l52.4-52.4 c17.5,15.5,40.4,24.8,65.6,24.8c22.5,0,43.1-7.4,59.7-20.1c0,0,75.8,79.6,76.2,79.9c-4.7,8.2-7,17.5-7,27.6 c0,31.8,26,57.9,57.9,57.9s57.9-26,57.9-57.9S463.85,373.8,432.05,373.8z" fill="#555"/>
</g>
</svg>
<div class="Media-body big prm"><strong>Mobile friendly.</strong> Everybody abusingly say to be "responsive". Not here. Each section is carefully designed to work well on every device, without weird image or bad alignement.</div>
</div>
</div>
<div class="grid-2 has-gutter">
<div class="Media mbl">
<svg class="Media-figure" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490" width="50px" height="50px" xml:space="preserve">
<g>
<path d="M432.05,373.8c-14.8,0-28.3,5.4-38.4,14.8l-74.1-78.1c15.5-17.5,24.8-40.4,24.8-66c0-54.7-44.7-99.4-99.4-99.4 c-5,0-10.5,0.4-15.5,1.2c0,0,18.2-68.3,18.2-68.7c20.2-1.6,35.7-18.2,35.7-38.8c0-21.4-17.5-38.8-38.8-38.8s-38.1,17.9-38.1,39.2 c0,15.5,9.3,28.7,22.1,34.9v0.4l-21.3,78.4c-13.2,5.5-25,13.7-34.6,23.7l-72.6-78c10.1-10.5,16.3-24.5,16.3-40.4 c0-31.8-26-57.9-57.9-57.9s-57.9,26-57.9,57.9c0,31.8,26,57.9,57.9,57.9c8.8,0,17.7-2.3,25-5.7l77.1,82.6 c-9.3,15.1-14.7,33-14.7,52.4c0,22.4,7.7,43.3,20,59.9c0,0-53,53.4-53.4,53.4c-11.6-7.8-25.2-12.4-40.4-12.4 c-39.6,0.4-71.4,32.2-71.4,71.8s31.8,71.4,71.4,71.4s71.4-31.8,71.4-71.4c0-17.5-6.2-33.4-16.7-45.8l52.4-52.4 c17.5,15.5,40.4,24.8,65.6,24.8c22.5,0,43.1-7.4,59.7-20.1c0,0,75.8,79.6,76.2,79.9c-4.7,8.2-7,17.5-7,27.6 c0,31.8,26,57.9,57.9,57.9s57.9-26,57.9-57.9S463.85,373.8,432.05,373.8z" fill="#555"/>
</g>
</svg>
<div class="Media-body big prm"><strong>Avoid technology lock.</strong> The generated webpage is only made of web front-end technologies : HTML5, CSS3, JS. You may use (but are not locked into) any back-end technology.</div>
</div>
<div class="Media mbl">
<svg class="Media-figure" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490" width="50px" height="50px" xml:space="preserve">
<g>
<path d="M432.05,373.8c-14.8,0-28.3,5.4-38.4,14.8l-74.1-78.1c15.5-17.5,24.8-40.4,24.8-66c0-54.7-44.7-99.4-99.4-99.4 c-5,0-10.5,0.4-15.5,1.2c0,0,18.2-68.3,18.2-68.7c20.2-1.6,35.7-18.2,35.7-38.8c0-21.4-17.5-38.8-38.8-38.8s-38.1,17.9-38.1,39.2 c0,15.5,9.3,28.7,22.1,34.9v0.4l-21.3,78.4c-13.2,5.5-25,13.7-34.6,23.7l-72.6-78c10.1-10.5,16.3-24.5,16.3-40.4 c0-31.8-26-57.9-57.9-57.9s-57.9,26-57.9,57.9c0,31.8,26,57.9,57.9,57.9c8.8,0,17.7-2.3,25-5.7l77.1,82.6 c-9.3,15.1-14.7,33-14.7,52.4c0,22.4,7.7,43.3,20,59.9c0,0-53,53.4-53.4,53.4c-11.6-7.8-25.2-12.4-40.4-12.4 c-39.6,0.4-71.4,32.2-71.4,71.8s31.8,71.4,71.4,71.4s71.4-31.8,71.4-71.4c0-17.5-6.2-33.4-16.7-45.8l52.4-52.4 c17.5,15.5,40.4,24.8,65.6,24.8c22.5,0,43.1-7.4,59.7-20.1c0,0,75.8,79.6,76.2,79.9c-4.7,8.2-7,17.5-7,27.6 c0,31.8,26,57.9,57.9,57.9s57.9-26,57.9-57.9S463.85,373.8,432.05,373.8z" fill="#555"/>
</g>
</svg>
<div class="Media-body big prm"><strong>Avoid optimization headache.</strong> Font weight, speed of rendering... and many more attentions to technical details so that you won't have to spend time on landing page optimization.</div>
</div>
</div>
<div class="grid-2 has-gutter">
<div class="Media mbl">
<svg class="Media-figure" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490" width="50px" height="50px" xml:space="preserve">
<g>
<path d="M432.05,373.8c-14.8,0-28.3,5.4-38.4,14.8l-74.1-78.1c15.5-17.5,24.8-40.4,24.8-66c0-54.7-44.7-99.4-99.4-99.4 c-5,0-10.5,0.4-15.5,1.2c0,0,18.2-68.3,18.2-68.7c20.2-1.6,35.7-18.2,35.7-38.8c0-21.4-17.5-38.8-38.8-38.8s-38.1,17.9-38.1,39.2 c0,15.5,9.3,28.7,22.1,34.9v0.4l-21.3,78.4c-13.2,5.5-25,13.7-34.6,23.7l-72.6-78c10.1-10.5,16.3-24.5,16.3-40.4 c0-31.8-26-57.9-57.9-57.9s-57.9,26-57.9,57.9c0,31.8,26,57.9,57.9,57.9c8.8,0,17.7-2.3,25-5.7l77.1,82.6 c-9.3,15.1-14.7,33-14.7,52.4c0,22.4,7.7,43.3,20,59.9c0,0-53,53.4-53.4,53.4c-11.6-7.8-25.2-12.4-40.4-12.4 c-39.6,0.4-71.4,32.2-71.4,71.8s31.8,71.4,71.4,71.4s71.4-31.8,71.4-71.4c0-17.5-6.2-33.4-16.7-45.8l52.4-52.4 c17.5,15.5,40.4,24.8,65.6,24.8c22.5,0,43.1-7.4,59.7-20.1c0,0,75.8,79.6,76.2,79.9c-4.7,8.2-7,17.5-7,27.6 c0,31.8,26,57.9,57.9,57.9s57.9-26,57.9-57.9S463.85,373.8,432.05,373.8z" fill="#555"/>
</g>
</svg>
<div class="Media-body big prm"><strong>Flat 3rd-party integration.</strong> This is a consequence of both open-source and no-tech-lock : you can integrate 3rd party tool at no cost.</div>
</div>
<div class="Media mbl">
<svg class="Media-figure" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490" width="50px" height="50px" xml:space="preserve">
<g>
<path d="M432.05,373.8c-14.8,0-28.3,5.4-38.4,14.8l-74.1-78.1c15.5-17.5,24.8-40.4,24.8-66c0-54.7-44.7-99.4-99.4-99.4 c-5,0-10.5,0.4-15.5,1.2c0,0,18.2-68.3,18.2-68.7c20.2-1.6,35.7-18.2,35.7-38.8c0-21.4-17.5-38.8-38.8-38.8s-38.1,17.9-38.1,39.2 c0,15.5,9.3,28.7,22.1,34.9v0.4l-21.3,78.4c-13.2,5.5-25,13.7-34.6,23.7l-72.6-78c10.1-10.5,16.3-24.5,16.3-40.4 c0-31.8-26-57.9-57.9-57.9s-57.9,26-57.9,57.9c0,31.8,26,57.9,57.9,57.9c8.8,0,17.7-2.3,25-5.7l77.1,82.6 c-9.3,15.1-14.7,33-14.7,52.4c0,22.4,7.7,43.3,20,59.9c0,0-53,53.4-53.4,53.4c-11.6-7.8-25.2-12.4-40.4-12.4 c-39.6,0.4-71.4,32.2-71.4,71.8s31.8,71.4,71.4,71.4s71.4-31.8,71.4-71.4c0-17.5-6.2-33.4-16.7-45.8l52.4-52.4 c17.5,15.5,40.4,24.8,65.6,24.8c22.5,0,43.1-7.4,59.7-20.1c0,0,75.8,79.6,76.2,79.9c-4.7,8.2-7,17.5-7,27.6 c0,31.8,26,57.9,57.9,57.9s57.9-26,57.9-57.9S463.85,373.8,432.05,373.8z" fill="#555"/>
</g>
</svg>
<div class="Media-body big prm"><strong>Free without hidden cost.</strong> Open-source project, without any company behind it. Created on free time as a leisure. Free to use and abuse under MIT license.</div>
</div>
</div>
</div>
</div>
</section>
<!--
FAQ SECTION
-->
<section class="faq-section mtxlp">
<div class="wrapper w960p flex-container flex-container-v">
<div class="separator w10"></div>
<h1 class="xbiggest flex-item-center txtcenter mtxl">FAQ</h1>
<p class="flex-item-center h3-like txtcenter mts"> Frequently asked questions</p>
<div class="faq-masonry mtxl">
<div class="faq-masonry-item mbl txtcenter">
<div class="faq-question h4-like">
<strong>Why do you release it ?</strong>
</div>
<div class="faq-answer big">
It is a side project. I needed this kind of template some time ago, which didn't exist.
</div>
</div>
<div class="faq-masonry-item mbl txtcenter">
<div class="faq-question h4-like">
<strong>Why is it free ?</strong>
</div>
<div class="faq-answer big">
Free is a big part of the value of the product. I wanted a completly frictionless template, both technically and commercially. Anyone can now start a business idea.
</div>
</div>
<div class="faq-masonry-item mbl txtcenter">
<div class="faq-question h4-like">
<strong>When should it be used ?</strong>
</div>
<div class="faq-answer big">
When you want to launch a landing page the same day you thought about it.
</div>
</div>
<div class="faq-masonry-item mbl txtcenter">
<div class="faq-question h4-like">
<strong>Do I need technical skills ?</strong>
</div>
<div class="faq-answer big">
Yes, but not much. Minimal requirement is to know very little basis of HTML, CSS and JS. Or at least, you're not afraid of them.
</div>
</div>
<div class="faq-masonry-item mbl txtcenter">
<div class="faq-question h4-like">
<strong>Why are there no images ?</strong>
</div>
<div class="faq-answer big">
They reduce load time and are subject to debate. In a first version of a landing page you should focus on copywriting.
</div>
</div>
<div class="faq-masonry-item mbl txtcenter">
<div class="faq-question h4-like">
<strong>Where can I report a bug ?</strong>
</div>
<div class="faq-answer big">
You can use <a href="https://github.com/bdavidxyz/simplest-startup-starter/issues">GitHub issues</a> or <a href="mailto:[email protected]">email me</a>.
</div>
</div>
</div>
</div>
</section>
<!--
TWITTER SECTION
-->
<section class="twitter-section mtxl">
<div class="wrapper w960p flex-container flex-container-v">
<div class="separator w10"></div>
<h1 class="xbiggest flex-item-center txtcenter mtxl">Build trust</h1>
<p class="flex-item-center h3-like txtcenter mts"> You can quote some relevant tweets, as long as you respect Twitter's rules.</p>
<div class="twitter-container mtxl">
<div class="grid-2 has-gutter">
<div class="mbm">
<div class="twitter-tweet " data-lang="en">
<div class="j-poster">
<div class="j-poster-header">
<div class="j-poster-name big">@bdavidxyz - 25 Jan 2017</div>
<svg class="j-poster-icon" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg3626" viewBox="0 0 300.00006 244.18703" height="24px" width="30px">
<g transform="translate(-539.17946,-568.85777)" id="layer1">
<path id="path3611" style="fill:#bababa;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 633.89823,812.04479 c 112.46038,0 173.95627,-93.16765 173.95627,-173.95625 0,-2.64628 -0.0539,-5.28062 -0.1726,-7.90305 11.93799,-8.63016 22.31446,-19.39999 30.49762,-31.65984 -10.95459,4.86937 -22.74358,8.14741 -35.11071,9.62551 12.62341,-7.56929 22.31446,-19.54304 26.88583,-33.81739 -11.81284,7.00307 -24.89517,12.09297 -38.82383,14.84055 -11.15723,-11.88436 -27.04079,-19.31655 -44.62892,-19.31655 -33.76374,0 -61.14426,27.38052 -61.14426,61.13233 0,4.79784 0.5364,9.46458 1.58538,13.94057 -50.81546,-2.55686 -95.87353,-26.88582 -126.02546,-63.87991 -5.25082,9.03545 -8.27852,19.53111 -8.27852,30.73006 0,21.21186 10.79366,39.93837 27.20766,50.89296 -10.03077,-0.30992 -19.45363,-3.06348 -27.69044,-7.64676 -0.009,0.25652 -0.009,0.50661 -0.009,0.78077 0,29.60957 21.07478,54.3319 49.0513,59.93435 -5.13757,1.40062 -10.54335,2.15158 -16.12196,2.15158 -3.93364,0 -7.76596,-0.38716 -11.49099,-1.1026 7.78383,24.2932 30.35457,41.97073 57.11525,42.46543 -20.92578,16.40207 -47.28712,26.17062 -75.93712,26.17062 -4.92898,0 -9.79834,-0.28036 -14.58427,-0.84634 27.05868,17.34379 59.18936,27.46396 93.72193,27.46396" />
</g>
</svg>
</div>
<p class="j-poster-tweet big" class="" lang="en" dir="ltr">
Currently building a free HTML landing page template. Hope you will like it :)
</p>
<div class="j-poster-footer big">
</div>
</div>
</div>
</div>
<div class="mbm">
<div class="twitter-tweet " data-lang="en">
<div class="j-poster">
<div class="j-poster-header">
<div class="j-poster-name big">@bdavidxyz - 25 Jan 2017</div>
<svg class="j-poster-icon" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg3626" viewBox="0 0 300.00006 244.18703" height="24px" width="30px">
<g transform="translate(-539.17946,-568.85777)" id="layer1">
<path id="path3611" style="fill:#bababa;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 633.89823,812.04479 c 112.46038,0 173.95627,-93.16765 173.95627,-173.95625 0,-2.64628 -0.0539,-5.28062 -0.1726,-7.90305 11.93799,-8.63016 22.31446,-19.39999 30.49762,-31.65984 -10.95459,4.86937 -22.74358,8.14741 -35.11071,9.62551 12.62341,-7.56929 22.31446,-19.54304 26.88583,-33.81739 -11.81284,7.00307 -24.89517,12.09297 -38.82383,14.84055 -11.15723,-11.88436 -27.04079,-19.31655 -44.62892,-19.31655 -33.76374,0 -61.14426,27.38052 -61.14426,61.13233 0,4.79784 0.5364,9.46458 1.58538,13.94057 -50.81546,-2.55686 -95.87353,-26.88582 -126.02546,-63.87991 -5.25082,9.03545 -8.27852,19.53111 -8.27852,30.73006 0,21.21186 10.79366,39.93837 27.20766,50.89296 -10.03077,-0.30992 -19.45363,-3.06348 -27.69044,-7.64676 -0.009,0.25652 -0.009,0.50661 -0.009,0.78077 0,29.60957 21.07478,54.3319 49.0513,59.93435 -5.13757,1.40062 -10.54335,2.15158 -16.12196,2.15158 -3.93364,0 -7.76596,-0.38716 -11.49099,-1.1026 7.78383,24.2932 30.35457,41.97073 57.11525,42.46543 -20.92578,16.40207 -47.28712,26.17062 -75.93712,26.17062 -4.92898,0 -9.79834,-0.28036 -14.58427,-0.84634 27.05868,17.34379 59.18936,27.46396 93.72193,27.46396" />
</g>
</svg>
</div>
<p class="j-poster-tweet big" class="" lang="en" dir="ltr">
Currently building a free HTML landing page template. Hope you will like it :)
</p>
<div class="j-poster-footer big">
</div>
</div>
</div>
</div>
</div>
<div class="grid-2 has-gutter">
<div class="mbm">
<div class="twitter-tweet " data-lang="en">
<div class="j-poster">
<div class="j-poster-header">
<div class="j-poster-name big">@bdavidxyz - 25 Jan 2017</div>
<svg class="j-poster-icon" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg3626" viewBox="0 0 300.00006 244.18703" height="24px" width="30px">
<g transform="translate(-539.17946,-568.85777)" id="layer1">
<path id="path3611" style="fill:#bababa;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 633.89823,812.04479 c 112.46038,0 173.95627,-93.16765 173.95627,-173.95625 0,-2.64628 -0.0539,-5.28062 -0.1726,-7.90305 11.93799,-8.63016 22.31446,-19.39999 30.49762,-31.65984 -10.95459,4.86937 -22.74358,8.14741 -35.11071,9.62551 12.62341,-7.56929 22.31446,-19.54304 26.88583,-33.81739 -11.81284,7.00307 -24.89517,12.09297 -38.82383,14.84055 -11.15723,-11.88436 -27.04079,-19.31655 -44.62892,-19.31655 -33.76374,0 -61.14426,27.38052 -61.14426,61.13233 0,4.79784 0.5364,9.46458 1.58538,13.94057 -50.81546,-2.55686 -95.87353,-26.88582 -126.02546,-63.87991 -5.25082,9.03545 -8.27852,19.53111 -8.27852,30.73006 0,21.21186 10.79366,39.93837 27.20766,50.89296 -10.03077,-0.30992 -19.45363,-3.06348 -27.69044,-7.64676 -0.009,0.25652 -0.009,0.50661 -0.009,0.78077 0,29.60957 21.07478,54.3319 49.0513,59.93435 -5.13757,1.40062 -10.54335,2.15158 -16.12196,2.15158 -3.93364,0 -7.76596,-0.38716 -11.49099,-1.1026 7.78383,24.2932 30.35457,41.97073 57.11525,42.46543 -20.92578,16.40207 -47.28712,26.17062 -75.93712,26.17062 -4.92898,0 -9.79834,-0.28036 -14.58427,-0.84634 27.05868,17.34379 59.18936,27.46396 93.72193,27.46396" />
</g>
</svg>
</div>
<p class="j-poster-tweet big" class="" lang="en" dir="ltr">
Currently building a free HTML landing page template. Hope you will like it :)
</p>
<div class="j-poster-footer big">
</div>
</div>
</div>
</div>
<div class="mbm">
<div class="twitter-tweet " data-lang="en">
<div class="j-poster">
<div class="j-poster-header">
<div class="j-poster-name big">@bdavidxyz - 25 Jan 2017</div>
<svg class="j-poster-icon" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg3626" viewBox="0 0 300.00006 244.18703" height="24px" width="30px">
<g transform="translate(-539.17946,-568.85777)" id="layer1">
<path id="path3611" style="fill:#bababa;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 633.89823,812.04479 c 112.46038,0 173.95627,-93.16765 173.95627,-173.95625 0,-2.64628 -0.0539,-5.28062 -0.1726,-7.90305 11.93799,-8.63016 22.31446,-19.39999 30.49762,-31.65984 -10.95459,4.86937 -22.74358,8.14741 -35.11071,9.62551 12.62341,-7.56929 22.31446,-19.54304 26.88583,-33.81739 -11.81284,7.00307 -24.89517,12.09297 -38.82383,14.84055 -11.15723,-11.88436 -27.04079,-19.31655 -44.62892,-19.31655 -33.76374,0 -61.14426,27.38052 -61.14426,61.13233 0,4.79784 0.5364,9.46458 1.58538,13.94057 -50.81546,-2.55686 -95.87353,-26.88582 -126.02546,-63.87991 -5.25082,9.03545 -8.27852,19.53111 -8.27852,30.73006 0,21.21186 10.79366,39.93837 27.20766,50.89296 -10.03077,-0.30992 -19.45363,-3.06348 -27.69044,-7.64676 -0.009,0.25652 -0.009,0.50661 -0.009,0.78077 0,29.60957 21.07478,54.3319 49.0513,59.93435 -5.13757,1.40062 -10.54335,2.15158 -16.12196,2.15158 -3.93364,0 -7.76596,-0.38716 -11.49099,-1.1026 7.78383,24.2932 30.35457,41.97073 57.11525,42.46543 -20.92578,16.40207 -47.28712,26.17062 -75.93712,26.17062 -4.92898,0 -9.79834,-0.28036 -14.58427,-0.84634 27.05868,17.34379 59.18936,27.46396 93.72193,27.46396" />
</g>
</svg>
</div>
<p class="j-poster-tweet big" class="" lang="en" dir="ltr">
Currently building a free HTML landing page template. Hope you will like it :)
</p>
<div class="j-poster-footer big">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--
PRICING SECTION
-->
<section class="pricing-section mtxl" id="pricing-section">
<div class="wrapper w960p flex-container flex-container-v">
<div class="separator w10"></div>
<h1 class="xbiggest flex-item-center txtcenter mtxl">Pricing tables</h1>
<p class="flex-item-center h3-like txtcenter mts"> This page is free to use under MIT license. But you may want your visitor to pay at some point. Links should go straight to a payment page.</p>
<div class="pricing-container mtxl">
<div class="grid-3 has-gutter-xl">
<div>
<div>
<div class="pricing-title">Plan A</div>
</div>
<div>
<div class="pricing-actual">100€ per month</div>
</div>
<div>
<div class="pricing-why h4-like">This is why you should choose this.</div>
</div>
<div>
<div class="pricing-feature">Feature 1</div>
</div>
<div>
<div class="pricing-feature">Feature 2</div>
</div>
<div>
<div class="pricing-feature">Feature 3</div>
</div>
<div>
<div class="pricing-feature">Feature 4</div>
</div>
<div>
<div class="pricing-feature pricing-feature-plan">
<a class="plan plan-a button" target="blank">select a</a>
</div>
</div>
</div>
<div>
<div>
<div class="mtl is-hidden tiny-visible"></div>
<div class="pricing-title">Plan B</div>
</div>
<div>
<div class="pricing-actual">150€ per month</div>
</div>
<div>
<div class="pricing-why h4-like">This is why you should choose this.</div>
</div>
<div>
<div class="pricing-feature">Feature 1</div>
</div>
<div>
<div class="pricing-feature">Feature 2</div>
</div>
<div>
<div class="pricing-feature">Feature 3</div>
</div>
<div>
<div class="pricing-feature">Feature 4</div>
</div>
<div>
<div class="pricing-feature pricing-feature-plan">
<a class="plan plan-b button" target="blank">select b</a>
</div>
</div>
</div>
<div>
<div>
<div class="mtl is-hidden tiny-visible"></div>
<div class="pricing-title">Plan C</div>
</div>
<div>
<div class="pricing-actual">210€ per month</div>
</div>
<div>
<div class="pricing-why h4-like">This is why you should choose this.</div>
</div>
<div>
<div class="pricing-feature">Feature 1</div>
</div>
<div>
<div class="pricing-feature">Feature 2</div>
</div>
<div>
<div class="pricing-feature">Feature 3</div>
</div>
<div>
<div class="pricing-feature">Feature 4</div>
</div>
<div>
<div class="pricing-feature pricing-feature-plan">
<a class="plan plan-c button" target="blank">select c</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--
PRICING SECTION
-->
<section class="contact-section mtxl">
<div class="wrapper w960p flex-container flex-container-v">
<div class="separator w10"></div>
<h1 class="xbiggest flex-item-center txtcenter mtxl">Let's keep in touch</h1>
<p class="flex-item-center h3-like txtcenter mts">If you like the template, join the mailing list to be noticed about updates.</p>
<p class="flex-item-center h3-like txtcenter mts">Zero spam of course, unsubscribe any time.</p>
<div class="contact-container mtxl">
<div class="first-page-email">
<div class="first-page-email-content">
<div class="first-page-email__input-container">
<form class="load-email__form" id="contact-form">
<div class="load-email__form-item">
<input class="load-email-enter" placeholder="Enter your email :)" type="email">
<input class="load-email-enter-fake" placeholder="Enter your stuff :)" type="text" style="display:none;">
</div>
<div class="load-email__form-item txtcenter">
<button type="submit" class="load-email-button button-primary" >Join the party</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!--
FOOTER SECTION
-->
<footer class="footer-section mtxl">
<div class="wrapper w960p flex-container flex-container-v txtcenter">
<div class="h5-like ptl pbl">
<span class="footer-nav-item" data-target="hero-section">Home</span> •
<span class="footer-nav-item" data-target="explanation-section">Motivation</span> •
<span class="footer-nav-item" data-target="howitworks-section">How it works</span> •
<span class="footer-nav-item" data-target="features-section">Features</span> •
<span class="footer-nav-item" data-target="faq-section">Faq</span> •
<span class="footer-nav-item" data-target="twitter-section">Build trust</span> •
<span class="footer-nav-item" data-target="pricing-section">Price</span> •
<span class="footer-nav-item" data-target="contact-section">Contact</span>
</div>
<div class="h5-like pbs">
© David Boureau • 2017 • <a href="mailto:[email protected]">[email protected]</a>
</div>
<div class="h5-like pbl">
Theme by <a href="https://github.com/bdavidxyz/simplest-startup-starter">Simplest Startup Starter</a>
</div>
</div>
</footer>
</div>
</div>
</div>
<script type="text/javascript" src="/custom-var.js"></script>
<script type="text/javascript" src="/vendor.min.js"></script>
<script type="text/javascript" src="/custom.js"></script>
</body>
</html>