-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
56 lines (50 loc) · 3.39 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<link rel="stylesheet" href="./assets//css/style.css">
<title>Fylo data storage</title>
</head>
<body>
<main class="main">
<div class="fylo-options">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="135" height="40"><path fill="#FFF" fill-rule="evenodd" d="M0 12.593v.1L22.823 23.28l22.903-10.624v-.027L22.823 2.006 0 12.593zm8.228.05l14.595-6.77 14.597 6.77-14.597 6.77-14.595-6.77zm14.595 14.75L0 16.962v3.857l22.823 10.453 22.903-10.488v-3.858L22.823 27.392zm0 7.822L0 24.785v3.858l22.823 10.454 22.903-10.49V24.75L22.823 35.215zM129.796 20.17a6.604 6.604 0 00-1.752-4.533 5.888 5.888 0 00-1.897-1.36 5.554 5.554 0 00-2.313-.49c-.819 0-1.59.164-2.313.49a5.886 5.886 0 00-1.897 1.36 6.605 6.605 0 00-1.753 4.533 6.604 6.604 0 001.753 4.533 5.886 5.886 0 001.897 1.36c.723.326 1.494.49 2.313.49.82 0 1.59-.164 2.313-.49a5.888 5.888 0 001.897-1.36 6.603 6.603 0 001.753-4.533zm5.204 0c0 1.571-.29 3.028-.867 4.37a10.654 10.654 0 01-2.385 3.48 11.348 11.348 0 01-3.56 2.322 11.19 11.19 0 01-4.354.852c-1.542 0-2.987-.284-4.336-.852a11.241 11.241 0 01-3.541-2.34 10.86 10.86 0 01-2.385-3.499c-.578-1.341-.868-2.786-.868-4.333 0-1.523.296-2.956.886-4.297a11.322 11.322 0 012.403-3.518 11.087 11.087 0 013.541-2.357 10.966 10.966 0 014.3-.852c1.542 0 2.993.284 4.354.852a11.347 11.347 0 013.56 2.321 10.605 10.605 0 012.385 3.5c.578 1.353.867 2.804.867 4.35zM110.898 30.54c-.41.193-.874.35-1.392.471a7.05 7.05 0 01-1.608.182c-.77 0-1.511-.103-2.222-.308a4.864 4.864 0 01-1.86-.998c-.53-.459-.952-1.057-1.266-1.795-.313-.737-.47-1.625-.47-2.665V.552h5.313v23.97c0 .87.174 1.468.523 1.794.35.327.765.49 1.247.49.602 0 1.18-.181 1.735-.544v4.28zM99.732 9.654l-9.395 24.912c-.699 1.862-1.614 3.203-2.747 4.025-1.132.822-2.481 1.233-4.047 1.233a6.426 6.426 0 01-1.626-.217l-1.734-4.86c.409.194.83.345 1.264.454.434.109.843.163 1.229.163.819 0 1.566-.187 2.24-.562.675-.375 1.193-1.07 1.554-2.085l.723-2.103-8.058-20.96h5.673l4.806 13.49 4.517-13.49h5.6zM77.87 6.499H64.283v6.745h13.406v4.569H64.283V30.65H58.79V1.676h19.08v4.823z"/></svg>
</div>
<div class="option-icons">
<div>
<i class="fas fa-file"></i>
</div>
<div>
<i class="fas fa-folder"></i>
</div>
<div>
<i class="fas fa-cloud-upload-alt"></i>
</div>
</div>
</div>
<div class="info">
<p>You’ve used <strong>815 GB</strong> of your storage</p>
<div class="storage-info">
<div class="progress">
<span class="bar-progress"></span>
</div>
<div class="legend">
<span class="start">0 GB</span>
<span class="start">1000 GB</span>
</div>
</div>
<div class="spotlight">
<span>185</span> GB Left
</div>
</div>
</main>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="https://twitter.com/ldantas_s" target="_blank">Luciano Dantas</a>.
</div>
</body>
</html>