-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
465 lines (433 loc) · 24.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="style/main.css">
<title>Dropbox</title>
</head>
<body>
<header>
<nav>
<div class="left-nav">
<a href="#">
<div class="logo">
<span style="background-color: #0061fe;" class="logo-icon">
<svg width="30" height="25" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.70076 0.320312L0.478516 4.91332L7.70076 9.50633L14.9242 4.91332L22.1465 9.50633L29.3687 4.91332L22.1465 0.320312L14.9242 4.91332L7.70076 0.320312Z" fill="#F7F5F2"></path><path d="M7.70076 18.6925L0.478516 14.0994L7.70076 9.50633L14.9242 14.0994L7.70076 18.6925Z" fill="#F7F5F2"></path><path d="M14.9242 14.0994L22.1465 9.50633L29.3687 14.0994L22.1465 18.6925L14.9242 14.0994Z" fill="#F7F5F2"></path><path d="M14.9242 24.8164L7.70077 20.2234L14.9242 15.6304L22.1465 20.2234L14.9242 24.8164Z" fill="#F7F5F2"></path></svg>
</span>
<span class="logo-word">
<svg width="93" height="22" viewBox="0 0 93 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M79.0027 17.1956L83.8346 10.6951L79.3777 4.55302H83.1948L85.7762 8.38529L88.3798 4.55302H92.1748L87.6517 10.6731L92.4175 17.1956H88.6666L85.7321 13.0709L82.8859 17.1956H79.0027Z" fill="#1E1919"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M66.8534 11.1269C66.8534 15.2995 69.1327 17.5177 73.1703 17.5177C76.9474 17.5177 79.5089 15.2995 79.5089 11.1269V10.7755C79.5089 6.55884 76.904 4.23092 73.1703 4.23092C69.5234 4.23092 66.8534 6.51492 66.8534 10.7755V11.1269ZM76.2184 11.1278C76.2184 13.4426 75.0645 14.6993 73.1702 14.6993C71.2978 14.6993 70.1438 13.4206 70.1438 11.1278V10.8192C70.1438 8.35003 71.3631 7.04932 73.192 7.04932C75.0427 7.04932 76.2184 8.43822 76.2184 10.8192V11.1278Z" fill="#1E1919"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M55.8155 14.8834C56.5002 16.5079 57.8695 17.5177 59.9678 17.5177C63.2144 17.5177 65.3347 15.1468 65.3347 10.932V10.5588C65.3347 6.34398 63.0819 4.25851 60.0561 4.23656C58.0462 4.23656 56.6327 5.1366 55.926 6.78302V0.285156H52.6793V17.1884H55.5505L55.8155 14.8834ZM62.0443 10.9622C62.0443 13.4682 60.8862 14.6993 58.9851 14.6993C57.1715 14.6993 55.9697 13.3363 55.9697 10.9622V10.6984C55.9697 8.52216 57.2152 7.04932 59.0288 7.04932C60.7769 7.04932 62.0443 8.32431 62.0443 10.6545V10.9622Z" fill="#1E1919"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M38.252 4.56791V21.544H41.493V15.1865C42.1765 16.6635 43.5215 17.5672 45.5499 17.5672C48.5484 17.5672 50.9075 15.3849 50.9075 11.1967V10.844C50.9075 6.56753 48.7909 4.23092 45.5499 4.23092C43.4553 4.23092 42.0442 5.31105 41.3608 6.94227L41.03 4.56791H38.252ZM47.6171 11.1161C47.6171 13.4463 46.4152 14.6993 44.536 14.6993C42.7224 14.6993 41.5424 13.2924 41.5424 11.0502V10.8083C41.5424 8.45621 42.7661 7.04932 44.6016 7.04932C46.3278 7.04932 47.6171 8.30233 47.6171 10.8303V11.1161Z" fill="#1E1919"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M23.8248 11.1269C23.8248 15.2995 26.1258 17.5177 30.1634 17.5177C33.9405 17.5177 36.4802 15.2995 36.4802 11.1269V10.7755C36.4802 6.55884 33.897 4.23092 30.1634 4.23092C26.5165 4.23092 23.8248 6.51492 23.8248 10.7755V11.1269ZM33.1898 11.1278C33.1898 13.4426 32.0141 14.6993 30.1416 14.6993C28.2692 14.6993 27.1152 13.4206 27.1152 11.1278V10.8192C27.1152 8.35003 28.3345 7.04932 30.1634 7.04932C32.0141 7.04932 33.1898 8.43822 33.1898 10.8192V11.1278Z" fill="#1E1919"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M14.9659 17.1956H18.2854V11.3877C18.2854 8.70383 18.9493 7.75786 21.6934 7.75786H23.0654V4.39197H22.2466C19.8788 4.39197 18.5731 5.42593 18.0641 7.44987L17.6436 4.55228H14.9659V17.1956Z" fill="#1E1919"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M0.285583 1.57357V17.1956H6.31261C10.2386 17.1956 13.1942 14.9151 13.1942 9.87184V8.7974C13.1942 3.77605 10.0622 1.57357 6.22439 1.57357H0.285583ZM3.57601 4.39197H6.08687C8.35455 4.39197 9.90375 5.82472 9.90375 8.97678V9.79235C9.90375 12.9444 8.39945 14.3772 6.19913 14.3772H3.57601V4.39197Z" fill="#1E1919"></path></svg>
</span>
</div>
</a>
<ul>
<li>Why Dropbox?</li>
<li>Features</li>
<li>Plans & pricing</li>
</ul>
</div>
<div class="right-nav">
<ul>
<li>Support</li>
<li>Contact sales</li>
<a href=""><li>Sign in</li></a>
</ul>
<a href=""><li class="primary-btn">Get started<span style="width:24px;display: inline-block;"></span><i class="fas fa-arrow-right"></i></li></a>
</div>
</nav>
</header>
<main>
<section class="section1">
<div class="section1-left">
<div>
<h1>Keep life organized and work moving—all in one place</h1>
<a href=""><span>Find the plan for you</span><i class="fas fa-arrow-right"></i></a>
</div>
<div class="section1-left-feature">
<p>
Dropbox gives you secure access to all your files. Collaborate with friends, family, and coworkers from any device.
</p>
</div>
</div>
<div class="section1-right">
<div class="section1-right-img1">
<img src="images/pisces_rebrand_hero-vfldFcE21.jpg" width="auto" height="550px">
</div>
<div class="section1-right-img2">
<img src="images/pisces_rebrand_hero_animation-vflyzdfbq.gif" width="100%" height="100%">
</div>
</div>
</section>
<section class="section2">
<div class="section2-wrapper">
<div class="features-card">
<div class="features-card-img">
<img src="images/syncing-vfl5qmpJE.svg" height="64px" widht="64px">
</div>
<h2>Store and sync</h2>
<p>Keep all your files securely stored, up to date, and accessible from any device.</p>
</div>
<div class="features-card">
<div class="features-card-img">
<img src="images/share-vfllC7nq_.svg" height="64px" widht="64px">
</div>
<h2>Share</h2>
<p>Quickly send any file—big or small—to anyone, even if they don’t have a Dropbox account.</p>
</div>
<div class="features-card">
<div class="features-card-img">
<img src="images/shield-vflEXMD4H.svg" height="64px" widht="64px">
</div>
<h2>Stay secure</h2>
<p>Keep your files private with multiple layers of protection from the service trusted by millions.</p>
</div>
<div class="features-card">
<div class="features-card-img">
<img src="images/comment-vflqWafTI.svg" height="64px" widht="64px">
</div>
<h2>Collaborate</h2>
<p>Manage tasks, track file updates, and stay in sync with your teams and clients.</p>
</div>
</div>
</section>
<section class="section3">
<div class="section3-heading">
<h2>What can Dropbox help you do?</h2>
</div>
<p class="section3-para">Dropbox brings everything—traditional files, cloud content, and web shortcuts—together in one place.</p>
</section>
<section class="section4">
<div class="section4-left">
<div class="section4-inner-box">
<div class="section-inner-box-wrapper" onclick=openBox(hiddenBox1,1)>
<div class="section4-inner-box-heading">
<h4>Streamline remote work</h4>
<i class="fas fa-minus" id="sign1"></i>
</div>
<div class="section4-inner-box-para" id="hiddenBox1">
<p>Dropbox centralizes your team’s content and tools—whether you’re working across the globe or from your couches.</p>
<a href="#">
<span>Learn more</span>
</a>
</div>
</div>
</div>
<div class="section4-inner-box">
<div class="section-inner-box-wrapper" onclick=openBox(hiddenBox2,2)>
<div class="section4-inner-box-heading">
<h4>Keep your family organized</h4>
<i class="fas fa-plus" id="sign2"></i>
</div>
<div class="section4-inner-box-para hidden" id="hiddenBox2">
<p>With Dropbox Family, everyone in your household can safely store and share photos, videos, and important files in a single place.</p>
<a href="#">
<span>Learn more</span>
</a>
</div>
</div>
</div>
<div class="section4-inner-box">
<div class="section-inner-box-wrapper" onclick=openBox(hiddenBox3,3)>
<div class="section4-inner-box-heading">
<h4>Send and track documents</h4>
<i class="fas fa-plus" id="sign3"></i>
</div>
<div class="section4-inner-box-para hidden" id="hiddenBox3">
<p>Gain insights into page-by-page performance of your most critical documents, and control access with passcodes, email verification, approved viewer lists, and expiration dates.</p>
<a href="#">
<span>Learn more</span>
</a>
</div>
</div>
</div>
<div class="section4-inner-box">
<div class="section-inner-box-wrapper" onclick=openBox(hiddenBox4,4)>
<div class="section4-inner-box-heading">
<h4>Deliver completed projects</h4>
<i class="fas fa-plus" id="sign4"></i>
</div>
<div class="section4-inner-box-para hidden" id="hiddenBox4">
<p>Wrap up projects by easily and securely sending final files or large collections of files, complete with password protection, expiration dates, and delivery confirmation.</p>
<a href="#">
<span>Learn more</span>
</a>
</div>
</div>
</div>
<div class="section4-inner-box">
<div class="section-inner-box-wrapper" onclick=openBox(hiddenBox5,5)>
<div class="section4-inner-box-heading">
<h4>Store and sync your passwords</h4>
<i class="fas fa-plus" id="sign5"></i>
</div>
<div class="section4-inner-box-para hidden" id="hiddenBox5">
<p>Easily sign in to websites and apps with Dropbox Passwords. Automatic syncing to all your devices allows you to access your passwords anywhere.</p>
<a href="#">
<span>Learn more</span>
</a>
</div>
</div>
</div>
<div class="section4-inner-box">
<div class="section-inner-box-wrapper" onclick=openBox(hiddenBox6,6)>
<div class="section4-inner-box-heading">
<h4>Recover lost work</h4>
<i class="fas fa-plus" id="sign6"></i>
</div>
<div class="section4-inner-box-para hidden" id="hiddenBox6">
<p>Get peace of mind knowing that when work is lost, deleted, or accidentally edited, file recovery and version history make restoring it a cinch.</p>
<a href="#">
<span>Learn more</span>
</a>
</div>
</div>
</div>
<div class="section4-inner-box">
<div class="section-inner-box-wrapper" onclick=openBox(hiddenBox7,7)>
<div class="section4-inner-box-heading">
<h4>Manage your team with confidence</h4>
<i class="fas fa-plus" id="sign7"></i>
</div>
<div class="section4-inner-box-para hidden" id="hiddenBox7">
<p>Get visibility into your team’s content, permissions, and activity—so you can stay compliant and keep your company data secure.</p>
<a href="#">
<span>Learn more</span>
</a>
</div>
</div>
</div>
<div class="section4-inner-box">
<div class="section-inner-box-wrapper section-inner-box-wrapper-last">
<div class="section4-inner-box-heading" onclick=openBox(hiddenBox8,8)>
<h4>Simplify electronic signatures</h4>
<i class="fas fa-plus" id="sign8"></i>
</div>
<div class="section4-inner-box-para hidden" id="hiddenBox8">
<p>Take the pain out of managing legal documents by signing and storing them in one convenient, organized place.</p>
<a href="#">
<span>Learn more</span>
</a>
</div>
</div>
</div>
</div>
<div class="section4-right">
<div class="section4-right-wrapper">
<img src="images/use_case_remote_work-vflZmvhFl.png" height="auto" width="100%">
</div>
</div>
</section>
<section class="section5">
<div class="section3-heading">
<h2>How will you use Dropbox?</h2>
</div>
</section>
<section class="section6">
<div class="section6-wrapper">
<div class="section6-card">
<div class="card-img">
<div class="card-img-wrapper">
<img src="images/business_segmentation-vflWkgvVJ.png">
</div>
</div>
<div class="card-desc">
<h3>For work</h3>
<p>Work efficiently with teammates and clients, stay in sync on projects, and keep company data safe—all in one place.</p>
<a href="#">Get Dropbox for work</a>
</div>
</div>
<div class="section6-card">
<div class="card-img">
<div class="card-img-wrapper">
<img src="images/individual_segmentation-vfl3Kdbtk.png">
</div>
</div>
<div class="card-desc">
<h3>For personal use</h3>
<p>Keep everything that’s important to you and your family shareable and safe in one place. Back up files in the cloud, share photos and videos, and more.</p>
<a href="#">Get Dropbox for personal use</a>
</div>
</div>
</div>
</section>
<section class="section3 section7">
<div class="section3-heading section7-heading">
<h2>Get more out of Dropbox by connecting with the tools you love</h2>
<a href="#">Learn more about partner integrations</a>
</div>
</section>
<section class="section8">
<div class="section8-wrapper">
<div class="section8-card">
<div class="section8-card-img">
<img src="images/[email protected]" height="64px" width="64px">
</div>
<div class="section8-card-desc">
<p>Enhance remote collaboration with Zoom instant meetings and video recordings.</p>
</div>
</div>
<div class="section8-card">
<div class="section8-card-img">
<img src="images/slack-vflFiSnnH.png" height="64px" width="64px">
</div>
<div class="section8-card-desc">
<p>Bring Slack conversations and Dropbox content together to keep teams in sync.</p>
</div>
</div>
<div class="section8-card">
<div class="section8-card-img">
<img src="images/adobe-vflp_kDbN.png" height="64px" width="64px">
</div>
<div class="section8-card-desc">
<p>Easily and securely send files to clients and vendors from within Adobe Photoshop.</p>
</div>
</div>
<div class="section8-card">
<div class="section8-card-img">
<img src="images/office-vfl5CA_Ct.png" height="64px" width="64px">
</div>
<div class="section8-card-desc">
<p>Easily access, edit, and share Office docs online in Dropbox.</p>
</div>
</div>
</div>
<div class="section8-wrapper">
<div class="section8-card">
<div class="section8-card-img">
<img src="images/google-vflmLc5Ew.png" height="64px" width="64px">
</div>
<div class="section8-card-desc">
<p>Create, edit, and share Google Docs, Sheets, and Slides in Dropbox.</p>
</div>
</div>
<div class="section8-card">
<div class="section8-card-img">
<img src="images/trello-vflbRRGGc.png" height="64px" width="64px">
</div>
<div class="section8-card-desc">
<p>Collaborate on team projects in Trello with Dropbox content.</p>
</div>
</div>
<div class="section8-card">
<div class="section8-card-img">
<img src="images/canvas-vfl5h3icj.png" height="64px" width="64px">
</div>
<div class="section8-card-desc">
<p>Upload course files or assignments straight from Dropbox to Canvas.</p>
</div>
</div>
<div class="section8-card">
<div class="section8-card-img">
<img src="images/asana-vflg0U89v.png" height="64px" width="64px">
</div>
<div class="section8-card-desc">
<p>Track all of your team’s work with Asana while keeping Dropbox content alongside.</p>
</div>
</div>
</div>
</section>
<section class="section9 section5">
<div class="section9-heading section3-heading">
<h2>Trusted by over 600 million users and 500,000 teams</h2>
<a href="#">View more customer stories</a>
</div>
</section>
<section class="section10">
<div class="section10-left">
<img src="images/quote_personal-vflAiN62C.jpg">
</div>
<div class="section10-right">
<div class="section10-right-left">
<div>
<p class="quote">Dropbox lets me keep my important documents and photos safe from being lost, and I know I can access them whenever I need to, on any of my devices.</p>
<p class="quoteAuthor">Ray P.</p>
</div>
</div>
<div class="section10-right-right">
<div>
<img src="images/[email protected]" height="720px" width="auto">
</div>
</div>
</div>
</section>
<section class="section11">
<div class="section11-wrapper">
<div>
<h2>Get organized. Get working. Get Dropbox.</h2>
</div>
<span><a href="#">Explore plans</a></span>
</div>
</section>
</main>
<footer>
<div class="footer-wrapper">
<ul>
<li>
<div>Dropbox</div>
<ul>
<li><a href="#">Desktop app</a></li>
<li><a href="#">Mobile apps</a></li>
<li><a href="#">Plans</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Advance access</a></li>
</ul>
</li>
<li>
<div>Products</div>
<ul>
<li><a href="#">Plus</a></li>
<li><a href="#">Family</a></li>
<li><a href="#">Professional</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Enterprise</a></li>
<li><a href="#">HelloSign</a></li>
</ul>
</li>
<li>
<div>Company</div>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Investor relations</a></li>
<li><a href="#">Blog</a></li>
</ul>
</li>
<li>
<div>Support</div>
<ul>
<li><a href="#">Help center</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Cookie policy</a></li>
<li><a href="#">Manage cookies</a></li>
<li><a href="#">Privacy & terms</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</li>
<li>
<div>Community</div>
<ul>
<li><a href="#">Developers</a></li>
<li><a href="#">Referrals</a></li>
<li><a href="#">Forum</a></li>
</ul>
</li>
</ul>
</div>
<div class="sub-footer">
<div class="sub-footer-wrapper">
<div class="subfooter-line"></div>
<span class="lang">
<span><i class="fas fa-globe-europe"></i></span>
<span class="lang-content">English (United States)</span>
<span class="lang-arrow"><i class="fas fa-caret-up"></i></span>
</span>
</div>
</div>
</footer>
<script src="js/main.js" type="text/javascript"></script>
</body>
</html>