-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathindex.html
221 lines (202 loc) · 8.29 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
---
layout: default
---
<!-- Hero -->
<section class="bg-light">
<div class="content content--wide">
<div class="media media--wide">
<!-- Video -->
<div class="media-img">
<a href="#" class="button-video" data-video-id="G7pCcE3vm5k">
<img src="/img/video.png">
<div class="play-button"></div>
<div class="callout">
<p class="callout-text">
<span class="zeta">It’s pretty</span>
<strong class="delta semibold">Simple</strong>
</p>
</div>
</a>
</div> <!-- end media-img -->
<!-- Blurb -->
<div class="media-bd">
<div class="blurb w-355 center">
<h1 class="huge overloud mt-0">
<span class="block ml-n5">netlify</span>
<small class="alpha highlight block">Builds, deploys & hosts your static site or app</small>
</h1>
<p>
<a href="https://app.netlify.com" class="button button--large">
<svg class="button-icon" width="68" height="68">
<use xlink:href="#icon-arrow" />
</svg>
<span class="button-label">START HERE</span>
</a>
</p>
<p class="small-2 overloud text-right">Basic packages <strong class="highlight">free forever</strong> – no credit card required</p>
</div>
</div> <!-- end media-bd -->
</div><!-- end media -->
</div><!-- end content -->
</section>
<!-- end Hero -->
<!-- Pull Quote -->
<section class="bg-white muted text-center bb bb--large">
<div class="content">
<!-- Section with video button for smaller devices -->
<a href="#" class="button-video mt-60 mb-50 center show-med">
<img src="/img/video.png">
<div class="callout">
<p class="callout-text">
<span class="zeta">It’s pretty</span>
<strong class="delta semibold">Simple</strong>
</p>
</div>
</a>
<p class="pullquote delta thin p--wide mt-40 mb-40">Made for web developers <strong class="highlight">Netlify</strong> is the default entry point to the world of static</p>
</div><!-- end content -->
</section>
<!-- end Pull Quote-->
<!-- Products -->
<section class="bg-dark-cover inverse bb bb--large">
<div class="content">
<div class="l-container mt-115 mb-100 ml-n10">
<!-- Callout -->
<div class="l-third optional">
<div class="callout callout--large mt-70 ml-n20">
<p class="callout-text"><span class="beta">Choose between</span></p>
</div>
</div><!-- end -third -->
<!-- Full Monty -->
<div class="l-third l-half-med">
<section class="blurb">
<header class="blurb-hd">
<div class="media media--bleed">
<div class="media-img">
<svg width="108" height="108">
<use xlink:href="#icon-polyhedron" />
</svg>
</div>
<div class="media-bd">
<h1 class="beta bold w-0 mt-25 mb-20">Full Monty</h1>
</div>
</div>
</header>
<div class="blurb-bd">
<p class="zeta">Builds, deploys, configuration, hosting and maintenance rolled into one</p>
<p class="small">Let netlify automate your whole static workflow. With our automation software, you simply login, choose your favourite static site generator and press Start. Your site is then automatically built & deployed. When you push to Github / Bitbucket, your site updates.</p>
<p class="cta">
<a href="https://app.netlify.com" class="button">
<svg class="button-icon" width="50" height="50">
<use xlink:href="#icon-arrow" />
</svg>
<span class="button-label">Get started now</span>
</a>
</p>
</div>
</section>
</div><!-- end l-third -->
<!-- Hosting only -->
<div class="l-third l-half-med">
<section class="blurb">
<header class="blurb-hd">
<div class="media media--bleed">
<div class="media-img">
<svg width="108" height="108">
<use xlink:href="#icon-cube" />
</svg>
</div>
<div class="media-bd">
<h1 class="beta bold w-0 mt-25 mb-20">Hosting only</h1>
</div>
</div>
</header>
<div class="blurb-bd">
<p class="zeta">The market’s most fully-featured static site CDN hosting</p>
<p class="small">To really get the full potential of your static site it’s a must to place it on a CDN. One that does proper cache invalidation as well. Netlify provides the fastest, most full-featured CDN hosting solution on the market. Try us out. We guarantee you won’t be disappointed.</p>
<p class="cta">
<a href="https://app.netlify.com" class="button">
<svg class="button-icon" width="50" height="50">
<use xlink:href="#icon-arrow" />
</svg>
<span class="button-label">Get started now</span>
</a>
</p>
</div>
</section>
</div><!-- end l-third -->
</div><!-- end l-container -->
</div><!-- end content -->
</section>
</div><!-- end fullscreen -->
<!-- Newsletter, Testimonials and Client Logos -->
<section class="bg-light-muted muted text-center bb bb--large">
<div class="content content--narrow">
<!-- Newsletter -->
<section class="bb bb--muted mt-90 mb-40">
<header>
<h1 class="alpha mb-30">Sign up for our newsletter and stay tuned on all that’s static</h1>
<p class="zeta p--wide">Sign up for our awesome newsletter, if you want to hear about exciting things happening in the world of static websites, and of new Netlify features that are around the corner.</p>
</header>
{% include newsletter-form.html %}
<p class="x-small mt-30 mb-30 p--full-w">We send out aprox. twice a month. Go ahead, we won’t give away your address or anything, and each email is handwritten (on a keyboard).</p>
</section>
{% include testimonials.html %}
</div><!-- end content -->
</section>
<!-- Blog and Social Links -->
<section class="bg-dark-muted-cover inverse bb bb--large">
<div class="content">
<!-- Blog -->
<section>
<header class="text-center mt-90 mb-50">
<h1 class="kilo highlight mb-35">Visit our static blog</h1>
<p class="zeta muted p--wide">See the blog for tons of articles, tips, tricks and opinions on all that is related to static web-tech.</p>
</header>
<div class="l-container">
{% for post in site.posts | limit:3 %}
<div class="l-third">
<article class="blurb">
<header class="blurb-hd">
<div class="media">
<div class="media-img optional">
<img src="{{post.thumbnail}}" width="80">
</div>
<div class="media-bd">
<h1 class="blurb-title">
<a href="{{post.url}}" class="light">{% if post.short_title %}{{post.short_title}}{% else %}{{post.title}}{% endif %}</a>
</h1>
<p class="blurb-meta"><a href="{{post.url}}" class="link">by {{post.author}}</a></p>
</div>
</div>
</header>
<div class="blurb-bd">
<p class="small muted">{{post.description}}</p>
</div>
</article>
</div>
{% endfor %}
</div>
</section>
<!-- Social links -->
<section class="text-center mt-30 mb-80">
<h1 class="gamma highlight inline-block v-middle mr-40">Socialize @</h1>
<p class="inline-block v-middle">
{% for link in site.social-links %}
<a href="{{link[1]}}" class="icon-link--round icon-link--{{link[0]}}">
<svg width="36" height="36" class="icon-{{link[0]}}--round">
<use xlink:href="#icon-{{link[0]}}-round">
</svg>
</a>
{% endfor %}
</p>
</section>
</div><!-- end content-->
</section>
<!-- Pricing -->
<section class="bg-light-muted-2 muted text-center">
<div class="content">
<h1 class="tera mt-120">Pricing</h1>
{% include plans.html %}
</div>
</section>