-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
251 lines (210 loc) · 8.89 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
<!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="stylesheet" href="./dist/style.css">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Clipboard landing page</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body class="font-Bai">
<!-- component -->
<header>
<div class=" flex flex-col items-center justify-center w-full bg-cover md:bg-contain md:bg-no-repeat "
style=" background-image:url('./images/bg-header-desktop.png') ">
<div class=" pt-32 md:pt-36 ">
<img src="./images/logo.svg" alt="c logo" class=" mb-8 mx-auto">
<div class="text-center ">
<h1 class=" text-Nuetural text-5xl font-bold text-center max-w-4xl mx-auto mb-8">A history of everything you
copy</h1>
<p class="text-Nuetural2 text-xl max-w-4xl mx-auto mb-12 lg:px-16">Clipboard allows you to
track and organize everything you copy. Instantly access your clipboard on all your devices.
</p>
</div>
<div class="flex flex-col md:flex-row items-center justify-center gap-4 px-5 md:w-7/12 pb-24 md:mx-auto">
<button class="bg-Primarycyan text-white text-lg w-full rounded-full py-2 px-4"> Download for iOS</button>
<button class="bg-Primaryblue text-white text-lg w-full rounded-full py-2 px-4"> Download for Mac</button>
</div>
</div>
</div>
</header>
<!-- computer secreen section -->
<section>
<div class=" flex flex-col justify-center items-center pt-32 md:pt-11 w-full mx-auto">
<h1 class="text-Nuetural my-4 pb-4 text-4xl font-bold mx-auto ">
Keep track of your snippets
</h1>
<p class="text-Nuetural2 max-w-4xl text-center text-xl mb-12 lg:px-16 mx-auto">
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="flex flex-row my-8 flex-wrap md:flex-nowrap md:gap-24">
<div><img src="./images/image-computer.png" alt="computer" class="w-full h-full"></div>
<div class="flex flex-col justify-start md:pt-12 max-w-sm">
<h1 class="text-Nuetural my-2 pb-2 text-left text-2xl font-bold ">
Quick Search</h1>
<p class="text-Nuetural2 text-lg mb-12 ">
Easily search your snippets by content, category, web address, application, and more.
</p>
<h1 class="text-Nuetural my-2 pb-2 text-2xl font-bold ">
iCloud Sync</h1>
<p class="text-Nuetural2 text-lg mb-12 ">
Instantly saves and syncs snippets across all your devices.
</p>
<h1 class="text-Nuetural text-2xl font-bold ">
Complete History
</h1>
<p class="text-Nuetural2 text-lg mb-12 ">
Retrieve any snippets from the first moment you started using the app.
</p>
</div>
</div>
</section>
<!-- devices section -->
<section>
<div class="flex flex-col justify-center items-center pt-32 md:pt-11 w-full mx-auto">
<h1 class="text-Nuetural my-4 pb-4 text-4xl font-bold mx-auto ">
Access Clipboard anywhere
</h1>
<p class="text-Nuetural2 max-w-4xl text-center text-xl mb-12 lg:px-16 mx-auto">
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="">
</div>
</section>
<!-- supercharge section -->
<section>
<div class="flex flex-col justify-center items-center pt-32 md:pt-11 mx-auto">
<div class="text-center w-full">
<h1 class="text-Nuetural my-4 pb-4 text-4xl font-bold mx-auto ">
Supercharge your workflow
</h1>
<p class="text-Nuetural2 max-w-4xl text-center text-xl mb-12 lg:px-16 mx-auto">
We’ve got the tools to boost your productivity.
</p>
</div>
<div class="mx-auto">
<div class="flex flex-row justify-center xl:justify-between items-center py-12 mx-auto flex-wrap">
<div class="flex flex-col justify-center items-center max-w-sm text-center ">
<img src="./images/icon-blacklist.svg" alt="blacklist" class="my-12">
<h1 class="text-Nuetural text-2xl font-bold p-4">
Create blacklists
</h1>
<p class="text-Nuetural2 text-lg p-4">
Ensure sensitive information never makes its way to your clipboard by excluding certain sources.
</p>
</div>
<div class="flex flex-col justify-center items-center max-w-sm text-center ">
<img src="./images/icon-text.svg" alt="snippit" class="my-9">
<h1 class="text-Nuetural text-2xl font-bold p-4 ">
Plain text snippets
</h1>
<p class="text-Nuetural2 text-lg p-4">
Remove unwanted formatting from copied text for a consistent look.
</p>
</div>
<div class="flex flex-col justify-center items-center max-w-md text-center ">
<img src=" ./images/icon-preview.svg" alt="preview" class="my-9">
<h1 class="text-Nuetural text-2xl font-bold p-4 ">
Sneak preview
</h1>
<p class="text-Nuetural2 text-lg p-4">
Quick preview of all snippets on your Clipboard for easy access.
</p>
</div>
</div>
<div class="flex flex-row justify-center md:justify-between items-center flex-wrap py-12 mx-auto">
<div>
<img src=" ./images/logo-google.png" alt="google">
</div>
<div>
<img src="./images/logo-ibm.png
" alt="IBM">
</div>
<div>
<img src="./images/logo-microsoft.png" alt="microsoft">
</div>
<div>
<img src="./images/logo-hp.png" alt="Hewlette">
</div>
<div>
<img src="./images/logo-vector-graphics.png" alt="vector">
</div>
</div>
</div>
</div>
</section>
<!-- ios mac os -->
<section>
<div class="flex flex-col justify-center items-center pt-32 md:pt-11 w-full mx-auto">
<h1 class="text-Nuetural my-4 pb-4 text-4xl font-bold mx-auto ">
Clipboard for iOS and Mac OS
</h1>
<p class="text-Nuetural2 max-w-4xl text-center text-xl mb-12 lg:px-16 mx-auto">
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="flex flex-col md:flex-row items-center justify-center gap-4 px-5 md:w-7/12 pb-24 md:mx-auto">
<button class="bg-Primarycyan text-white text-lg rounded-full py-2 px-4"> Download for iOS</button>
<button class="bg-Primaryblue text-white text-lg rounded-full py-2 px-4"> Download for Mac</button>
</div>
</div>
</section>
<footer>
<div
class=" bg-gray-100 text-Nuetural w-full flex md:flex-row justify-center items-start mx-auto flex-wrap lg:py-12 pr-4">
<div
class="lg:pl-40 flex md:flex-row items-start justify-center md:justify-start gap-28 w-4/5 flex-wrap lg:flex-nowrap pb-12">
<div class=" flex justify-end items-center ">
<img src="./images/logo.svg" alt="logo" class="h-14 w-14">
</div>
<div class="flex flex-col justify-center text-center items-center">
<p class="pb-8">
FAQs
</p>
<p>
Contact Us
</p>
</div>
<div class="flex flex-col justify-center items-center text-center">
<p class="pb-8">
Privacy Policy
</p>
<p>
Press Kit
</p>
</div>
<div class="flex flex-col justify-center items-center text-center">
<p>
Install Guide
</p>
</div>
</div>
<div class="flex md:flex-row gap-6 ">
<a href="#"><img src="./images/icon-facebook.svg" alt="facebook"></a>
<a href="#"> <img src="./images/icon-twitter.svg" alt="twitter"></a>
<a href="#"> <img src="./images/icon-instagram.svg" alt="instagram"> </a>
</div>
</div>
<p class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Zeyna Baaj</a>.
</p>
</footer>
</body>
</html>