-
Notifications
You must be signed in to change notification settings - Fork 23
/
Copy pathindex.html
195 lines (174 loc) · 7.06 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
---
customers:
- image_path: /img/home/customers/psg.png
company: PSG
- image_path: /img/home/customers/c.png
company: C
- image_path: /img/home/customers/punchlane.png
company: Punchlane
- image_path: /img/home/customers/glace.png
company: Glace
- image_path: /img/home/customers/azores.png
company: Azores
- image_path: /img/home/customers/festningen.png
company: Festningen
- image_path: /img/home/customers/union.png
company: Union
layout: default
title: Build websites in HTML or Jekyll. Have your non-technical team update inline
---
<header style="overflow: visible;">
<div class="container">
<h2 style="padding: 0 0 20px 0; font-size: 36px">
<span style="font-size: 1.5em">Build websites in <strong>HTML</strong> or <strong>Jekyll</strong></span> <br>
have your non-technical team update inline
</h2>
<div class="fake-browser-ui framer">
<div class="frame">
<span></span>
<span></span>
<span></span>
</div>
<div class="proportional-iframe">
<div class="proportional-iframe-wrapper">
<img class="ratio" src="/img/16x10.gif" alt="ratio image"/>
<iframe width="700" height="438" src="//www.youtube.com/embed/AjXGwPSaW7c?rel=0&controls=0&showinfo=0&autoplay=1&loop=1&modestbranding&playlist=AjXGwPSaW7c" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div><a href="https://app.cloudcannon.com/users/sign_up" class="btn sign-up">Start Free Today</a></div>
</div>
</header>
<section class="why_use_cloudcannon">
<div class="container">
<div class="thirds">
<img src="/img/home/hammer.png" alt="build fast" />
<h3> Build Faster </h3>
<p> Build websites using HTML or Jekyll. Have control and flexibility over your source code.</p>
</div>
<div class="thirds">
<img src="/img/home/editing.png" alt="Editing" />
<h3> Easy Editing </h3>
<p> Your non-technical team make updates directly on the page without the help of developers. </p>
</div>
<div class="thirds">
<img src="/img/home/fast.png" alt="Quick" />
<h3> Insanely Quick </h3>
<p> All websites are static which makes them extremely fast, secure and scalable to millions of visitors. </p>
</div>
</div>
</section>
<section class="lp alternate">
<div class="container">
<h2 class="center-text" style="margin: 20px 0 90px 0;">How CloudCannon Works</h2>
<div class="text">
<h3 class="editable"><span class="step-number">1</span> Upload your site files</h3>
<p class="editable">Upload your static or Jekyll website files to CloudCannon in the browser. If your files are on GitHub, Dropbox or FTP, we can pull and keep them in sync for you.</p>
</div>
<div class="image">
<div class="fake-browser-ui" style="overflow: visible;">
<div class="frame">
<span></span>
<span></span>
<span></span>
</div>
<img src="/img/home/filebrowser_2.png" width="550" alt="Uploading to a site" />
<img src="/img/home/filebrowser-badge.png" class="big-badge" alt="Add your files with Upload, GitHub or Dropbox" />
</div>
</div>
</div>
</section>
<section class="lp alternate">
<div class="container">
<div class="text">
<h3 class="editable"><span class="step-number">2</span> Live!</h3>
<p class="editable">See your site live on the web. Your website is hosted by CloudCannon or any other hosting service such as GitHub Pages.</p>
</div>
<div class="image">
<div class="fake-browser-ui">
<div class="frame">
<span></span>
<span></span>
<span></span>
</div>
<div class="slideshow">
{% for customer in page.customers %}
<img src="{{customer.image_path}}" class="slide
{% if forloop.first %}
visible
{% endif %}
" width="550px" height="344px" alt="{{customer.company}}" />
{% endfor %}
</div>
</div>
</div>
</div>
</section>
<section class="lp alternate">
<div class="container">
<div class="text">
<h3 class="editable"><span class="step-number">3</span> Set Editable Elements</h3>
<p class="editable">Add <code>class="editable"</code> to elements in the HTML to control which elements can be updated inline.</p>
<p class="editable">Your non-technical team make updates directly on the page, what they see is what they get.</p>
</div>
<div class="image">
<div class="fake-browser-ui framer" style="margin: 60px 0;">
<div class="frame">
<span></span>
<span></span>
<span></span>
</div>
<div class="proportional-iframe">
<div class="proportional-iframe-wrapper">
<img class="ratio" src="http://placehold.it/110x53"/>
<iframe width="550" height="265" src="//www.youtube.com/embed/FOYDMD1jA-0?rel=0&controls=0&showinfo=0&autoplay=1&loop=1&modestbranding&playlist=FOYDMD1jA-0" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bright-section pushing-boundaries">
<div class="container">
<div class="text">
<h2>Pushing the boundaries of static</h2>
<p>Blogging, updatable photo galleries and documentation websites are possible on static websites with CloudCannon's Jekyll Integration</p>
<div><a href="#" data-video-id="jlAtW1AyZA4" class="btn small-btn">Watch Overview Video</a></div>
</div>
<div class="image">
<img src="/img/home/cloudcannon_and_jekyll.png" class="first" width="683" alt="CloudCannon and Jekyll" style="margin: 50px 0 0 0;" />
</div>
</div>
</section>
<section class="testimonials">
<div class="container">
<div class="thirds">
<img src="/img/stefan.jpeg" class="editable" width="150" height="150">
<p class="editable"><strong>Stefan Kohler</strong> <small>assetsforjira.com</small></p>
<p><em>“Nowadays everything is offered as a service, so a static website with HTML and a bit of JavaScript is all you need.”</em></p>
</div>
<div class="thirds">
<img src="/img/kimslawson.png" class="editable" width="150" height="150">
<p class="editable"><strong>Kim Slawson</strong> <small>Freelancer</small></p>
<p><em>“I used to waste a lot of time configuring WordPress and Site Avenger. Now I get to meaningful design and development faster. My workflow is lightning-quick.”</em></p>
</div>
<div class="thirds">
<img src="/img/sean.jpg" class="editable" width="150" height="150">
<p class="editable"><strong>Sean Robertson</strong> <small>Freelancer</small></p>
<p><em>“I can focus on creating better content and UX and allow CloudCannon to do the rest.”</em></p>
</div>
</div>
</section>
<section class="centered bright-section">
<div class="container">
<h3>Get your website online and updatable faster than ever</h3>
<div><a href="https://app.cloudcannon.com/users/sign_up" class="btn sign-up">Start Free Today</a></div>
</div>
</section>
<div class="coverage-banner">
<img src="/img/coverage/tc.png" alt="TechCrunch" />
<img src="/img/coverage/yahoo_news.png" alt="Yahoo News" />
<img src="/img/coverage/tnw.png" alt="The Next Web"/>
<img src="/img/coverage/tuts.png" alt="Tuts+"/>
<img src="/img/coverage/appstorm.png" alt="Appstorm"/>
</div>