-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
208 lines (182 loc) · 10.8 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
<!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="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600&display=swap" rel="stylesheet" />
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<link rel="stylesheet" href="css/style.css" />
<title>Frontend Mentor | Clipboard landing page</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<!-- <style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style> -->
</head>
<body>
<header class="header">
<div class="header__spacing spacing">
<img src="./images/logo.svg" alt="Logo" />
<h1 class="header__title heading-1">
A history of everything you copy
</h1>
<p class="paragraph-1">
Clipboard allows you to track and organize everything you copy.
Instantly access your clipboard on all your devices.
</p>
<div class="header__buttons">
<button class="btn btn--primary">Download for iOS</button>
<button class="btn btn--secondary">Download for Mac</button>
</div>
</div>
</header>
<main class="container">
<section class="keep separator-1">
<div class="spacing separator-2">
<h2 class="heading-2 separator-3">Keep track of your snippets</h2>
<p class="paragraph-1">
Clipboard instantly stores any item you copy in the cloud, meaning
you can access your snippets immediately on all your devices. Our
Mac and iOS apps will help you organize everything.
</p>
</div>
<div class="keep__container">
<div class="keep__img"></div>
<div class="keep__characteristics">
<div class="keep__characteristic">
<h3 class="heading-3 separator-4">Quick Search</h3>
<p class="paragraph-2">
Easily search your snippets by content, category, web address,
application, and more.
</p>
</div>
<div class="keep__characteristic">
<h3 class="heading-3 separator-4">iCloud Sync</h3>
<p class="paragraph-2">
Instantly saves and syncs snippets across all your devices.
</p>
</div>
<div class="keep__characteristic">
<h3 class="heading-3 separator-4">Complete History</h3>
<p class="paragraph-2">
Retrieve any snippets from the first moment you started using
the app.
</p>
</div>
</div>
</div>
</section>
<section class="access separator-1">
<div class="spacing">
<h2 class="heading-2 separator-3">Access Clipboard anywhere</h2>
<p class="paragraph-1 separator-1">
Whether you’re on the go, or at your computer, you can access all
your Clipboard snippets in a few simple clicks.
</p>
<img src="./images/image-devices.png" alt="Devices" class="access__img" />
</div>
</section>
<section class="supercharge separator-1">
<div class="spacing separator-2">
<h2 class="heading-2 separator-3">Supercharge your workflow</h2>
<p class="paragraph-1">
We’ve got the tools to boost your productivity.
</p>
</div>
<div class="supercharge__workflows">
<div class="supercharge__workflow">
<img class="supercharge__icon" src="./images/icon-blacklist.svg" alt="Create blacklists" />
<h3 class="heading-3">Create blacklists</h3>
<p class="paragraph-2">
Ensure sensitive information never makes its way to your clipboard
by excluding certain sources.
</p>
</div>
<div class="supercharge__workflow">
<img class="supercharge__icon" src="./images/icon-text.svg" alt="Plain text snippets" />
<h3 class="heading-3">Plain text snippets</h3>
<p class="paragraph-2">
Remove unwanted formatting from copied text for a consistent look.
</p>
</div>
<div class="supercharge__workflow">
<img class="supercharge__icon" src="./images/icon-preview.svg" alt="Sneak preview" />
<h3 class="heading-3">Sneak preview</h3>
<p class="paragraph-2">
Quick preview of all snippets on your Clipboard for easy access.
</p>
</div>
</div>
</section>
<div class="companies separator-1">
<img src="./images/logo-google.png" alt="Logo Google" class="companies__img" />
<img src="./images/logo-ibm.png" alt="Logo IMB" class="companies__img" />
<img src="./images/logo-microsoft.png" alt="Logo Microsoft" class="companies__img" />
<img src="./images/logo-hp.png" alt="Logo HP" class="companies__img" />
<img src="./images/logo-vector-graphics.png" alt="Logo VG" class="companies__img" />
</div>
<section class="clipboard separator-1">
<div class="spacing">
<h2 class="heading-2 separator-3">Clipboard for iOS and Mac OS</h2>
<p class="paragraph-1 separator-2">
Available for free on the App Store. Download for Mac or iOS, sync
with iCloud and you’re ready to start adding to your clipboard.
</p>
<div class="clipboard__buttons">
<button class="btn btn--primary">Download for iOS</button>
<button class="btn btn--secondary">Download for Mac</button>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__container">
<img class="footer__logo" src="./images/logo.svg" alt="Logo" />
<div class="footer__links">
<a href="#" class="link">FAQs</a>
<a href="#" class="link">Contact Us</a>
<a href="#" class="link">Privacy Policy</a>
<a href="#" class="link">Press Kit</a>
<a href="#" class="link">Install Guide</a>
</div>
<div class="footer__socials">
<div class="footer__social">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M20 3H4C3.447 3 3 3.448 3 4V20C3 20.552 3.447 21 4 21H12.615V14.04H10.277V11.315H12.615V9.315C12.615 6.99 14.035 5.723 16.115 5.723C16.814 5.721 17.514 5.757 18.21 5.83V8.25H16.775C15.647 8.25 15.427 8.788 15.427 9.575V11.31H18.124L17.774 14.035H15.426V21H20C20.553 21 21 20.552 21 20V4C21 3.448 20.553 3 20 3Z"
fill="black" />
</svg>
</div>
<div class="footer__social">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M19.633 7.99704C19.646 8.17204 19.646 8.34604 19.646 8.52004C19.646 13.845 15.593 19.981 8.186 19.981C5.904 19.981 3.784 19.32 2 18.172C2.324 18.209 2.636 18.222 2.973 18.222C4.856 18.222 6.589 17.586 7.974 16.501C6.203 16.464 4.719 15.304 4.207 13.708C4.456 13.745 4.706 13.77 4.968 13.77C5.329 13.77 5.692 13.72 6.029 13.633C4.182 13.259 2.799 11.638 2.799 9.68004V9.63004C3.336 9.92904 3.959 10.116 4.619 10.141C3.534 9.41904 2.823 8.18404 2.823 6.78704C2.823 6.03904 3.022 5.35304 3.371 4.75504C5.354 7.19804 8.335 8.79504 11.677 8.97004C11.615 8.67004 11.577 8.35904 11.577 8.04704C11.577 5.82704 13.373 4.01904 15.605 4.01904C16.765 4.01904 17.812 4.50504 18.548 5.29104C19.458 5.11604 20.33 4.77904 21.104 4.31804C20.805 5.25304 20.168 6.03904 19.333 6.53804C20.144 6.45004 20.93 6.22604 21.652 5.91404C21.104 6.71204 20.419 7.42304 19.633 7.99704Z"
fill="black" />
</svg>
</div>
<div class="footer__social">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.999 7.37695C9.44498 7.37695 7.37598 9.44695 7.37598 12C7.37598 14.554 9.44498 16.624 11.999 16.624C14.551 16.624 16.622 14.554 16.622 12C16.622 9.44695 14.551 7.37695 11.999 7.37695ZM11.999 15.004C10.34 15.004 8.99498 13.659 8.99498 12.001C8.99498 10.342 10.34 8.99795 11.999 8.99795C13.658 8.99795 15.001 10.342 15.001 12.001C15.001 13.659 13.658 15.004 11.999 15.004Z"
fill="black" />
<path
d="M16.806 8.28491C17.4014 8.28491 17.884 7.80227 17.884 7.20691C17.884 6.61154 17.4014 6.12891 16.806 6.12891C16.2107 6.12891 15.728 6.61154 15.728 7.20691C15.728 7.80227 16.2107 8.28491 16.806 8.28491Z"
fill="black" />
<path
d="M20.533 6.11088C20.064 4.90188 19.109 3.94588 17.9 3.47888C17.201 3.21588 16.462 3.07488 15.714 3.05888C14.751 3.01688 14.446 3.00488 12.004 3.00488C9.56195 3.00488 9.24895 3.00488 8.29395 3.05888C7.54795 3.07388 6.80895 3.21488 6.10995 3.47888C4.89995 3.94588 3.94495 4.90188 3.47695 6.11088C3.21395 6.81088 3.07295 7.54888 3.05795 8.29688C3.01495 9.25888 3.00195 9.56388 3.00195 12.0069C3.00195 14.4489 3.00195 14.7599 3.05795 15.7169C3.07295 16.4649 3.21395 17.2029 3.47695 17.9039C3.94595 19.1119 4.90095 20.0679 6.11095 20.5359C6.80695 20.8079 7.54595 20.9619 8.29595 20.9859C9.25895 21.0279 9.56395 21.0409 12.006 21.0409C14.448 21.0409 14.761 21.0409 15.716 20.9859C16.463 20.9709 17.202 20.8289 17.902 20.5669C19.111 20.0979 20.066 19.1429 20.535 17.9339C20.798 17.2339 20.939 16.4959 20.954 15.7479C20.997 14.7859 21.01 14.4809 21.01 12.0379C21.01 9.59488 21.01 9.28488 20.954 8.32788C20.941 7.56988 20.801 6.81888 20.533 6.11088ZM19.315 15.6429C19.308 16.2189 19.204 16.7899 19.004 17.3309C18.699 18.1179 18.078 18.7399 17.292 19.0419C16.757 19.2409 16.193 19.3449 15.622 19.3529C14.672 19.3969 14.404 19.4079 11.968 19.4079C9.52995 19.4079 9.28095 19.4079 8.31295 19.3529C7.74395 19.3459 7.17795 19.2409 6.64395 19.0419C5.85495 18.7409 5.22995 18.1189 4.92495 17.3309C4.72895 16.7969 4.62295 16.2319 4.61395 15.6619C4.57095 14.7119 4.56095 14.4439 4.56095 12.0079C4.56095 9.57088 4.56095 9.32188 4.61395 8.35288C4.62095 7.77688 4.72495 7.20688 4.92495 6.66588C5.22995 5.87688 5.85495 5.25588 6.64395 4.95388C7.17795 4.75588 7.74395 4.65088 8.31295 4.64288C9.26395 4.59988 9.53095 4.58788 11.968 4.58788C14.405 4.58788 14.655 4.58788 15.622 4.64288C16.193 4.64988 16.757 4.75488 17.292 4.95388C18.078 5.25688 18.699 5.87888 19.004 6.66588C19.2 7.19988 19.306 7.76488 19.315 8.33488C19.358 9.28588 19.369 9.55288 19.369 11.9899C19.369 14.4259 19.369 14.6879 19.326 15.6439H19.315V15.6429Z"
fill="black" />
</svg>
</div>
</div>
</div>
<div class="footer__attribution">
Challenge by
<a class="footer__ref" href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by
<a class="footer__ref" href="https://github.com/JesusAtao96" target="_blank">Jesús Alejandro Atao</a>.
</div>
</footer>
</body>
</html>