-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
387 lines (364 loc) · 22.3 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
<!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" />
<title>Frontend Mentor | Clipboard landing page</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./css/tailwind.css" />
</head>
<body class="min-h-full font-bai-jamjuree">
<!-- Header -->
<header
class="flex flex-col items-center bg-[url('/images/bg-header-mobile.png')] bg-cover bg-no-repeat py-32 px-8 md:bg-[url('/images/bg-header-desktop.png')]"
>
<div class="text-center md:max-w-[41.5rem]">
<!-- Logo -->
<svg
class="mx-auto"
width="125"
height="125"
xmlns="http://www.w3.org/2000/svg"
aria-label="Clipboard logo"
>
<g stroke="#26BBA4" stroke-width="10" fill="none" fill-rule="evenodd" aria-hidden="true">
<circle cx="62.5" cy="62.5" r="57.5" />
<path
d="M85.481 85.481c-12.692 12.692-33.27 12.692-45.962 0s-12.692-33.27 0-45.962 33.27-12.692 45.962 0"
stroke-linecap="round"
/>
</g>
</svg>
<h1
class="mt-16 text-[2rem] font-semibold leading-tight text-blue-darkgrayish sm:text-4xl md:text-[2.6rem]"
>
A history of everything you copy
</h1>
<p class="mt-5 text-blue-grayish sm:text-lg sm:font-semibold">
Clipboard allows you to track and organize everything you copy. Instantly access your clipboard on
all you devices.
</p>
<!-- Call for action -->
<div class="mt-12 w-full space-y-7 text-center sm:space-x-4">
<a
href="#"
class="group relative block w-full rounded-full bg-cyan py-3 text-center text-lg font-semibold text-white shadow-xl shadow-cyan/40 hover:bg-[hsl(171_45%_55%)] sm:inline-block sm:w-56"
>
<span
aria-hidden="true"
class="absolute left-0 -bottom-1 -z-10 h-full w-full rounded-full bg-[hsl(171_66%_30%)] group-hover:bg-[hsl(171_20%_55%)]"
></span>
Download for iOS
</a>
<a
href="#"
class="group relative block w-full rounded-full bg-blue-light py-3 text-center text-lg font-semibold text-white shadow-xl shadow-blue-light/50 hover:bg-[hsl(233_75%_70%)] sm:inline-block sm:w-56"
>
<span
aria-hidden="true"
class="absolute left-0 -bottom-1 -z-10 h-full w-full rounded-full bg-[hsl(233_66%_35%)] group-hover:bg-[hsl(233_50%_60%)]"
></span>
Download for Mac
</a>
</div>
</div>
</header>
<!-- Main -->
<main class="px-8">
<!-- First section -->
<section>
<div class="mx-auto space-y-5 text-center md:max-w-[41rem]">
<h2
class="text-[1.725rem] font-semibold leading-tight text-blue-darkgrayish sm:text-[2rem] md:text-[2.125rem]"
>
Keep track of your snippets
</h2>
<p class="text-blue-grayish sm:text-lg">
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="mt-24 flex flex-col gap-16 md:-ml-20 md:h-[35rem] md:flex-row md:items-center md:gap-28 lg:pr-48"
>
<img
src="images/image-computer.png"
alt=""
class="block w-full md:h-full md:basis-3/5"
width="752"
height="572"
loading="lazy"
decoding="async"
/>
<div class="mx-auto max-w-[21rem] space-y-16">
<div class="space-y-3 text-center md:text-left">
<h3 class="text-2xl font-semibold leading-tight text-blue-darkgrayish">Quick Search</h3>
<p class="text-blue-grayish sm:text-lg md:text-base">
Easily search your snippets by content, category, web address, application and more.
</p>
</div>
<div class="space-y-3 text-center md:text-left">
<h3 class="text-2xl font-semibold leading-tight text-blue-darkgrayish">iCloud Sync</h3>
<p class="text-blue-grayish sm:text-lg md:text-base">
Instantly saves and syncs snippets across all your devices.
</p>
</div>
<div class="space-y-3 text-center md:text-left">
<h3 class="text-2xl font-semibold leading-tight text-blue-darkgrayish">Complete History</h3>
<p class="text-blue-grayish sm:text-lg md:text-base">
Remove any snippets from the first moment you started using the app.
</p>
</div>
</div>
</div>
</section>
<!-- Second section -->
<section class="mt-44 md:mt-36">
<div class="space-y-5 text-center md:mx-auto md:max-w-[41.5rem]">
<h2
class="text-[1.725rem] font-semibold leading-tight text-blue-darkgrayish sm:text-[2rem] md:text-[2.125rem]"
>
Access Clipboard anywhere
</h2>
<p class="text-blue-grayish sm:text-lg">
Whether you're on the go, or at your computer, you can access all your Clipboard snippets in a
few simple clicks.
</p>
</div>
<img
src="images/image-devices.png"
alt=""
class="mt-24 block md:mx-auto md:mt-20"
width="905"
height="575"
loading="lazy"
decoding="async"
/>
</section>
<!-- Third section -->
<section class="mt-32 text-center md:mt-14">
<h2
class="text-[1.725rem] font-semibold leading-tight text-blue-darkgrayish sm:text-[2rem] md:text-[2.125rem]"
>
Supercharge your workflow
</h2>
<p class="mt-5 text-blue-grayish sm:text-lg">We've got the tools to boost your productivity.</p>
<div class="mt-24 flex flex-col gap-16 md:mx-auto md:flex-row md:justify-center md:gap-7">
<div class="flex-1 text-center lg:grow-0 lg:basis-[19rem]">
<!-- Icon blacklist -->
<svg
class="mx-auto"
width="50"
height="44"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<g fill="#9EABB2" fill-rule="nonzero">
<path
d="M11.07 0C8.353 0 6.14 2.192 6.14 4.876l-.179 25.278 2.69.02.179-25.289c0-1.21 1.005-2.196 2.24-2.196h27.027V0H11.071z"
/>
<path
d="M38.097 0a5.115 5.115 0 00-5.11 5.11v28.37c0 2.052-1.668 3.72-3.72 3.72a3.725 3.725 0 01-3.72-3.72V30.21c0-.743-.601-1.345-1.344-1.345H1.345C.602 28.864 0 29.466 0 30.21v3.272a6.417 6.417 0 006.41 6.409V37.2a3.724 3.724 0 01-3.72-3.72v-1.927h20.168v1.928a6.417 6.417 0 006.41 6.409 6.417 6.417 0 006.409-6.41V12.46h6.185c.743 0 1.345-.602 1.345-1.345V5.11A5.115 5.115 0 0038.097 0zm2.42 9.77h-4.84V5.11a2.423 2.423 0 012.42-2.42 2.423 2.423 0 012.42 2.42v4.66z"
/>
<path
d="M6.14 37.201h22.813v2.689H6.14zM19.99 7.485h-6.947a1.345 1.345 0 100 2.69h6.947a1.345 1.345 0 100-2.69zM28.057 12.863H13.043a1.345 1.345 0 100 2.69h15.014a1.345 1.345 0 100-2.69zM28.057 18.242H13.043a1.345 1.345 0 100 2.69h15.014a1.344 1.344 0 100-2.69zM28.057 23.62H13.043a1.345 1.345 0 100 2.69h15.014a1.345 1.345 0 100-2.69z"
/>
</g>
</svg>
<h3 class="mt-10 text-[1.3rem] font-semibold leading-tight text-blue-darkgrayish lg:text-2xl">
Create blacklist
</h3>
<p class="mt-5 text-blue-grayish sm:text-lg md:text-base">
Ensure sensitive information never makes its way to your clipboard by excluding certain
sources.
</p>
</div>
<div class="flex-1 text-center lg:grow-0 lg:basis-[19rem]">
<!-- Icon text -->
<svg
class="mx-auto"
width="50"
height="44"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M17.872 14.736a235.39 235.39 0 012.192 5.744c.746 2.027 1.536 4.24 2.368 6.64h-5.344a44.4 44.4 0 00-.784-2.368c-.288-.81-.57-1.632-.848-2.432h-8.64c-.278.8-.56 1.621-.848 2.432a44.4 44.4 0 00-.784 2.368H0a371.54 371.54 0 012.368-6.644 233.104 233.104 0 012.192-5.748 206.71 206.71 0 012.112-5.112c.693-1.61 1.413-3.136 2.16-4.736H13.6c.725 1.6 1.44 3.125 2.144 4.736.704 1.61 1.413 3.328 2.128 5.12zM7.968 18.32h6.303c-.34-.96-.671-1.878-.991-2.752a94.407 94.407 0 00-.912-2.4c-.288-.725-.539-1.365-.752-1.92-.214-.555-.384-.992-.512-1.313-.107.32-.267.758-.48 1.313a1241.872 1241.872 0 00-1.648 4.32c-.331.874-.667 1.792-1.008 2.752zM35.04 3.2h-3.2v25.6h3.2V32h-9.6v-3.2h3.2V3.2h-3.2V0h9.6v3.2z"
fill="#9EABB2"
fill-rule="nonzero"
/>
</svg>
<h3 class="mt-10 text-[1.3rem] font-semibold leading-tight text-blue-darkgrayish lg:text-2xl">
Plain text snippets
</h3>
<p class="mt-5 text-blue-grayish sm:text-lg md:text-base">
Remove unwanted formatting from copied text for a consistent look.
</p>
</div>
<div class="flex-1 text-center lg:grow-0 lg:basis-[19rem]">
<!-- Icon preview -->
<svg
class="mx-auto"
width="50"
height="44"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M49.059 14.072c-2.585-4.227-6.06-7.623-10.424-10.188C34.27 1.318 29.66.035 24.806.035c-4.854 0-9.464 1.283-13.829 3.849C6.612 6.449 3.137 9.845.554 14.072c-.37.646-.554 1.283-.554 1.91 0 .628.185 1.265.554 1.91 2.583 4.227 6.058 7.624 10.423 10.189 4.365 2.565 8.975 3.847 13.83 3.847 4.853 0 9.463-1.277 13.828-3.833 4.365-2.557 7.84-5.957 10.424-10.202.369-.646.553-1.283.553-1.91 0-.628-.184-1.265-.553-1.911zM18.867 6.5c1.652-1.652 3.631-2.478 5.939-2.478.369 0 .683.13.941.388.258.258.388.572.388.941 0 .37-.13.683-.387.941a1.28 1.28 0 01-.942.388c-1.587 0-2.944.563-4.07 1.689-1.126 1.126-1.688 2.482-1.688 4.07 0 .369-.13.683-.388.941a1.28 1.28 0 01-.941.388c-.37 0-.683-.13-.942-.388a1.282 1.282 0 01-.388-.942c0-2.306.827-4.286 2.478-5.938zm17.969 18.522c-3.701 2.242-7.71 3.364-12.03 3.364-4.319 0-8.329-1.121-12.03-3.364-3.7-2.243-6.777-5.256-9.232-9.04 2.805-4.356 6.321-7.614 10.548-9.773a12.099 12.099 0 00-1.689 6.23c0 3.414 1.214 6.334 3.64 8.762 2.428 2.427 5.349 3.64 8.763 3.64 3.415 0 6.335-1.213 8.762-3.64 2.428-2.427 3.641-5.348 3.641-8.763 0-2.233-.563-4.31-1.689-6.229 4.227 2.16 7.743 5.418 10.548 9.773-2.454 3.784-5.532 6.797-9.232 9.04z"
fill="#9EABB2"
fill-rule="nonzero"
/>
</svg>
<h3 class="mt-10 text-[1.3rem] font-semibold leading-tight text-blue-darkgrayish lg:text-2xl">
Sneak preview
</h3>
<p class="mt-5 text-blue-grayish sm:text-lg md:text-base">
Quick preview of all snippets on your Clipboard for easy access.
</p>
</div>
</div>
</section>
<!-- Partners -->
<section class="md:mt-30 mt-44">
<h2 class="sr-only">Partners</h2>
<div class="flex flex-col items-center gap-16 sm:flex-row sm:flex-wrap sm:justify-center">
<img
src="images/logo-google.png"
alt="Google"
width="165"
height="49"
loading="lazy"
decoding="async"
/>
<img src="images/logo-ibm.png" alt="IBM" width="139" height="51" loading="lazy" decoding="async" />
<img
src="images/logo-microsoft.png"
alt="Microsoft"
width="161"
height="35"
loading="lazy"
decoding="async"
/>
<img src="images/logo-hp.png" alt="HP" width="135" height="56" loading="lazy" decoding="async" />
<img
src="images/logo-vector-graphics.png"
alt="Vector Graphics"
width="125"
height="30"
loading="lazy"
decoding="async"
/>
</div>
</section>
<!-- Call to action -->
<section class="mt-36">
<div class="space-y-5 text-center md:mx-auto md:max-w-[41rem]">
<h2
class="text-[1.725rem] font-semibold leading-tight text-blue-darkgrayish sm:text-[2rem] md:text-[2.125rem]"
>
Clipboard for iOS and Mac OS
</h2>
<p class="text-blue-grayish sm:text-lg">
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>
<div class="mt-12 w-full space-y-7 text-center sm:space-x-4 md:mt-5">
<a
href="#"
class="group relative block w-full rounded-full bg-cyan py-3 text-center text-lg font-semibold text-white shadow-xl shadow-cyan/40 hover:bg-[hsl(171_45%_55%)] sm:inline-block sm:w-56"
>
<span
aria-hidden="true"
class="absolute left-0 -bottom-1 -z-10 h-full w-full rounded-full bg-[hsl(171_66%_30%)] group-hover:bg-[hsl(171_20%_55%)]"
></span>
Download for iOS
</a>
<a
href="#"
class="group relative block w-full rounded-full bg-blue-light py-3 text-center text-lg font-semibold text-white shadow-xl shadow-blue-light/50 hover:bg-[hsl(233_75%_70%)] sm:inline-block sm:w-56"
>
<span
aria-hidden="true"
class="absolute left-0 -bottom-1 -z-10 h-full w-full rounded-full bg-[hsl(233_66%_35%)] group-hover:bg-[hsl(233_50%_60%)]"
></span>
Download for Mac
</a>
</div>
</section>
</main>
<!-- Footer -->
<footer class="mt-44 bg-blue-grayish/10 md:mt-36">
<div
class="flex flex-col items-center gap-12 py-14 md:flex-row md:justify-between md:gap-14 md:py-10 md:px-8 lg:mx-auto lg:max-w-[67rem] lg:gap-24"
>
<!-- Logo -->
<img
class="h-16 w-16"
src="images/logo.svg"
alt="Clipboard Logo"
width="64"
height="64"
loading="lazy"
decoding="async"
/>
<!-- Useful links -->
<nav class="text-center text-lg text-blue-darkgrayish md:text-left md:text-base lg:text-lg">
<ul class="grid grid-flow-row gap-5 md:grid-cols-3 md:gap-x-8 lg:gap-x-12">
<li class="hover:text-cyan"><a href="#">FAQs</a></li>
<li class="hover:text-cyan md:row-start-2"><a href="#">Contact Us</a></li>
<li class="hover:text-cyan"><a href="#">Privacy Policy</a></li>
<li class="hover:text-cyan md:row-start-2"><a href="#">Press Kit</a></li>
<li class="hover:text-cyan"><a href="#">Install Guide</a></li>
</ul>
</nav>
<!-- Social links -->
<div class="flex gap-8 md:ml-auto">
<a href="#" aria-label="Our Facebook page" class="group">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<path
class="group-hover:fill-cyan"
d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"
fill="#4C545C"
fill-rule="nonzero"
/>
</svg>
</a>
<a href="#" aria-label="Our Twitter page" class="group">
<svg width="24" height="20" xmlns="http://www.w3.org/2000/svg">
<path
class="group-hover:fill-cyan"
d="M24 2.557a9.83 9.83 0 01-2.828.775A4.932 4.932 0 0023.337.608a9.864 9.864 0 01-3.127 1.195A4.916 4.916 0 0016.616.248c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 1.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 17.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 2.557z"
fill="#4C545C"
fill-rule="nonzero"
/>
</svg>
</a>
<a href="#" aria-label="Our Instagram page" class="group">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<path
class="group-hover:fill-cyan"
d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"
fill="#4C545C"
fill-rule="nonzero"
/>
</svg>
</a>
</div>
</div>
<p class="mb-2 text-center text-base text-blue-darkgrayish">
Challenge by
<a class="text-cyan" href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by
<a class="text-cyan" href="https://github.com/sissokho" target="_blank">Mouhamadou Moustapha SISSOKHO</a
>.
</p>
</footer>
</body>
</html>