-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
214 lines (178 loc) · 7.25 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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport:" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Save, share and collaborate | blocbox</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,400i,700,700i|Open+Sans:300,300i,400,400i,700,700i" rel="stylesheet" type="text/css">
<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<!-- Hero -->
<header>
<nav class="container">
<div class="one-half">
<a href="index.html" class="site-logo"><img src="images/site-logo.png" alt="blocbox" /></a>
</div>
<div class="one-half">
<ul>
<li><a href="signin.html">Sign In</a></li>
<li class="btn-outline"><a href="signup.html">Sign Up</a></li>
</ul>
</div>
</nav>
<div class="container hero">
<h1 class="animated fadeIn">Save, share and collaborate</h1>
<p>blocbox lets you collect and sort information.
<br>Create simple notes, store images, and add links.</p>
<a href="signup.html" class="btn">Start Your Free Trial!</a>
<br><br><img src="images/dashboard.png" alt="blocbox" />
</div>
</header>
<main role="main">
<!-- Benefits -->
<section class="benefits">
<ul class="container">
<li class="one-third">
<i class="fa fa-file-o"></i>
<h2>Create notes</h2>
<p>Using Markdown, you can create simple text-based documents to save and share. You can collaborate with others to write and edit content.</p>
</li>
<li class="one-third">
<i class="fa fa-picture-o"></i>
<h2>Save images</h2>
<p>Are there images you find interesting enough to save? Now you have a way to organize and store those within blocbox.</p>
</li>
<li class="one-third">
<i class="fa fa-link"></i>
<h2>Add links</h2>
<p>Forget bookmarking sites in your browser. With blocbox, you can add links, group them and view them from any computer.</p>
</li>
</ul>
</section>
<!-- Pricing -->
<section class="pricing">
<div class="container">
<h2>How much does blocbox cost?</h2>
<p>We have many options to fit your needs. It's free to try for 30 days*, and you can always change your plan once you signed up. <br></br>Here are the different features of each plan:</p>
</div>
<ul class="container">
<!-- Free -->
<li class="one-third">
<div class="box">
<h3>Casual</h3>
<h4>Free</h4>
<ul>
<li>Up to 5 boxes</li>
<li>Up to 10 collaborators</li>
<li><strong>2GB</strong> of storage</li>
</ul>
<a href="signup.html" class="btn">Start Your Free Trial!</a>
</div>
</li>
<!-- Professional -->
<li class="one-third">
<div class="box middle">
<h3>Professional</h3>
<h4><span>$</span>5 <span class="month">/month</span></h4>
<ul>
<li>Unlimited boxes</li>
<li>Up to 20 collaborators</li>
<li><strong>5GB</strong> of storage</li>
<li>Real-time collaboration</li>
</ul>
<a href="signup.html" class="btn">Start Your Free Trial!</a>
</div>
</li>
<!-- Expert -->
<li class="one-third">
<div class="box">
<h3>Expert</h3>
<h4><span>$</span>10 <span class="month">/month</span></h4>
<ul>
<li>Unlimited boxes</li>
<li>Unlimited collaborators</li>
<li><strong>Unlimited</strong> of storage</li>
<li>Real-time collaboration</li>
</ul>
<a href="signup.html" class="btn">Start Your Free Trial!</a>
</div>
</li>
</ul>
<!-- *Fine Print -->
<div class="container">
<p class="small">*We will not collect your credit card information until your 30-day trial has ended.</p>
</div>
</section>
<!-- Testimonials -->
<section class="testimonials">
<div class="container">
<h2>Who uses blocbox?</h2>
<p>blocbox has more than 100,000 satisfied users storing and collaborating with teams across the world. </p> <p>Here's what a few have to say:</p>
</div>
<ul class="container">
<li class="one-fourth">
<blockquote>"blocbox has made it easier to find and keep things I love. I can share with other designers on my team and create new categories with awesome stuff. And creating simple text documents couldn't be easier."</blockquote>
<img src="https://d3iw72m71ie81c.cloudfront.net/8912fe22-7970-4e15-a3a1-abef9f2fb4b5" width="80" height="80" alt="avatar" />
<p class="name"><strong>Stella B.</strong><br>Freelance Designer, WA</p>
</li>
<li class="one-fourth">
<p class="staggered">
<blockquote>"blocbox has made it easier to find and keep things I love. I can share with other designers on my team and create new categories with awesome stuff. And creating simple text documents couldn't be easier."</blockquote>
<img src="https://d3iw72m71ie81c.cloudfront.net/male-74.jpg" width="80" height="80" alt="avatar" />
<p class="name"><strong>Brad H.</strong><br>Freelance Designer, NY</p>
</p>
</li>
<li class="one-fourth">
<blockquote>"blocbox has made it easier to find and keep things I love. I can share with other designers on my team and create new categories with awesome stuff. And creating simple text documents couldn't be easier."</blockquote>
<img src="https://d3iw72m71ie81c.cloudfront.net/female-22.jpg" width="80" height="80" alt="avatar" />
<p class="name"><strong>Monica M.</strong><br>Freelance Designer, VA</p>
</li>
<li class="one-fourth">
<p class="staggered">
<blockquote>"blocbox has made it easier to find and keep things I love. I can share with other designers on my team and create new categories with awesome stuff. And creating simple text documents couldn't be easier."</blockquote>
<img src="https://d3iw72m71ie81c.cloudfront.net/dc506abf-7317-43f5-8415-ef3705b8f480-subarna.jpeg" width="80" height="80" alt="avatar" />
<p class="name"><strong>Nick M.</strong><br>Freelance Designer, MI</p>
</p>
</li>
</ul>
</section>
<!-- Second Call to Action -->
<section class="confidence">
<div class="container">
<h2>Storage that gives you confidence to think outside the box.</h2>
<ul class="middle container">
<p>Join the fast growing network of <strong>blocbox</strong> users today!</p>
<a href="signup.html" class="btn">Start Your Free Trial!</a>
</ul>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<div class="container footer-nav-block">
<div class="left-footer-block one-third">
<p class="copyright-block">© 2015. <strong>blocbox</strong> - All Rights Reserved.</p>
</div>
<nav class="link-block middle-footer-block one-third">
<ul>
<li><a href="">Terms /</a></li>
<li><a href="">Privacy Policy /</a></li>
<li><a href="">Contact Us /</a></li>
<li><a href="">About Us /</a></li>
<li><a href="">Twitter</a></li>
</ul>
</nav>
<div class="right-footer-block one-third">
<img class="logo" src="images/site-logo.png" alt="blocbox" />
</div>
</div>
</footer>
</body>
</html>