-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
200 lines (196 loc) · 7.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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wunderbucket</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="header container">
<figure class="logo">
<a href="#">
<img src="images/icon-white.svg" class="icon" alt="Wunderbucket">
<img src="images/wunderbucket-type.svg" class="text" alt="Wunderbucket">
</a>
</figure>
<nav>
<ul class="menu">
<li><a href="" class="features">Getting Started</a></li>
<li><a href="" class="download">Download</a></li>
</ul>
</nav>
</header>
<div class="hero-wrapper container">
<figure class="hero">
<img src="images/hero.png" alt="hero">
</figure>
<div class="hero-intro .wrapper-inside">
<h1><span>Turn local folders into global websites</span></h1>
<p>
For designers & developers who want fast,
secure websites without command lines, or configs.
It’s like if Dropbox had a cute little static hosting service baby.
</p>
<nav class="hero-nav">
<a href="#download" class="download-big">
<img src="images/apple-logo.svg" alt="apple-logo">
Download for Mac
</a>
<a href="#video" class="video">
<img src="images/play.svg" alt="play">
See how it works
</a>
</nav>
</div>
</div>
<!-- <div class="container"> -->
<div class="features-wrapper features container .wrapper-inside">
<p>
Here's some of the highlights of the features you get when you build sites with Wunderbucket.
</p>
<div class="feature cloud-hosted">
<figure>
<img src="images/cloud-hosted.png" alt="cloud-hosted">
</figure>
<aside>
<h3>Cloud Hosted</h3>
<p>
All your content is hosted on Amazon's Cloud.
This is the infrastructure that powers the world's biggest websites,
not a server running out of a garage. You're in good hands.
</p>
</aside>
</div>
<div class="feature instant-publish">
<figure>
<img src="images/instant-publish.png" alt="instant-publish">
</figure>
<aside>
<h3>Instant Publish</h3>
<p>
When you're done making changes in a local folder, just click "publish" and it's live.
No branch, merge, build, deploy just to fix a typo or change a font.
It lets you quickly iterate, and tinker. It works how you work.
</p>
</aside>
</div>
<div class="feature edit-anywhere">
<figure>
<img src="images/edit-anywhere.png" alt="edit-anywhere">
</figure>
<aside>
<h3>Edit Anywhere</h3>
<p>
Sync your site's code to multiple computers.
Allow your teammates to made edits and publish sites from multiple desktops.
</p>
</aside>
</div>
<div class="feature smart-localhost">
<figure>
<img src="images/smart-localhost.png" alt="smart-localhost">
</figure>
<aside>
<h3>Smart Localhost</h3>
<p>
When you add a folder to Wunderbucket, you get a localhost server that will reload the page any time you change your source code.
You'll never need to hit refresh again.
</p>
</aside>
</div>
<div class="feature mac-native">
<figure>
<img src="images/mac-native.png" alt="mac-native">
</figure>
<aside>
<h3>Mac native</h3>
<p>
A totally different take on static hosting, Wunderbucket is deeply integrated in the macOS experience. It makes publishing static content a completely natural part of your normal Mac workflow.
</p>
</aside>
</div>
<div class="feature any-editor">
<figure>
<img src="images/any-editor.png" alt="any-editor">
</figure>
<aside>
<h3>Works with any editor</h3>
<p>
Use your favorite code editor to build your web sites: Nova, Coda, Espresso, Visual Studio Code, BBEdit, TextWangler, etc.
Because Wunderbucket natively integrates with the macOS Finder it works with all of them.
</p>
</aside>
</div>
<div class="feature custom-domains">
<figure>
<img src="images/custom-domains.png" alt="custom-domains">
</figure>
<aside>
<h3>Use your own domain</h3>
<p>
All Wunderbucket sites support custom domains with minimal configuration. It only takes minutes to get your site running off of your own domain.
</p>
</aside>
</div>
<div class="feature global-cdn">
<figure>
<img src="images/global-cdn.png" alt="global-cdn">
</figure>
<aside>
<h3>Global CDN</h3>
<p>
Your sites will load super fast on any device from any location when they're published over our global content distribution network.
</p>
</aside>
</div>
<div class="feature free-ssl">
<figure>
<img src="images/free-ssl.png" alt="free-ssl">
</figure>
<aside>
<h3>Free SSL</h3>
<p>
All of your pages and assets will be served over https. You won't have to worry about purchasing or renewing your SSL certificate.
</p>
</aside>
</div>
<div class="partners">
<div class="partner">
<h3>DNS by CloudFlare</h3>
<p>
Wunderbucket is partnering with CloudFlare to deliver bulletproof DNS resolution and protection to your site. Every site on Wunderbucket gets a unique zone. All you need to do is point your domain and we handle the rest.
</p>
</div>
<div class="partner">
<h3>Cloud by AWS</h3>
<p>
With Wunderbucket, your sites will be hosted on the AWS Cloud: The world's fastest and most reliable hosting platform.
</p>
</div>
</div>
<div class="cta">
<a href="#download" class="download-big">
<img src="images/apple-logo.svg" alt="apple-logo">
Download for Mac
</a>
</div>
</div>
</div>
<footer class="footer container" >
<p>
© 2020
<a href="#">Smmall Inc.</a>
</p>
<nav>
<a href="#">About</a>
<a href="#">Blog</a>
<a href="#">Docs</a>
<a href="https://status.wunderbucket.io/49572-Wunderbucket">System Status</a>
<a href="#">Contact</a>
</nav>
</footer>
</body>
</html>