-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
196 lines (188 loc) · 5.69 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="cli.css">
<link rel="stylesheet" href="normalize.css" />
<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:ital,wght@0,200;0,300;0,400;0,500;1,200;1,300;1,400&display=swap"
rel="stylesheet">
<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>
<div class="header">
<div class="imge">
<img src="logo.svg" alt="">
</div>
</div>
<div class="title">
<div class="countainer">
<div class="text">
<h1>A history of everything you copy
</h1>
<p>clipboard allows you to track and organize every thing you copy.
instantly access your clipboard all your devices
</p>
</div>
<div class="buttons">
<input type="button" value="download for ios" />
<input type="button" class="purp" value="download for mac" />
</div>
</div>
<div class="title-two">
<div class="countainer">
<div class="text">
<h1>Keep track of your snippets</h1>
<p> Clipboard instantly stores any item you can 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>
</div>
<!-- start landing -->
<div class="landing">
<div class="om">
<div class="imge">
<img src="image-computer.png" alt="">
</div>
<div class="rows">
<div class="row">
<h3>Quick search</h3>
<p>Easily search your snippets by content, category, web address,
application,and more.</p>
</div>
<div class="row">
<h3>icloud sync</h3>
<p>Instanty saves and syncs snippets acroos all your devices.</p>
</div>
<div class="row">
<h3>
Complete History</h3>
<p>Retrieve any snippets from the moment you sterted using the app.</p>
</div>
</div>
</div>
</div>
<!-- end landing -->
<!-- start access-section -->
<div class="accsess-section">
<div class="countainer">
<div class="text">
<h1>Access clipbaord anywhere</h1>
<p>Whether you're on the go, at your computer, you can access all your
clipboard
snippets in afew simple clicks.
</p>
</div>
<div class="imege">
<img src="image-devices.png" alt="">
</div>
<div class="text">
<h1>Supercharge your workflow</h1>
<p>We've gpt the tools to boost your productivity</p>
</div>
</div>
</div>
<!-- end access-section -->
<!-- start prefixs-section -->
<div class="prefixs">
<div class="countainer">
<div class="row">
<img src="icon-blacklist.svg" alt="">
<h3>Creat blacklist</h3>
<p>Ensure sensitive information never makes its
way to your clipboard excluding certian
sources.</p>
</div>
<div class="row">
<img src="icon-text.svg" alt="">
<h3>
Plain text snippets</h3>
<p>Remove unwanted formatting from copied text
foraconsistent look.</p>
</div>
<div class="row">
<img src="icon-preview.svg" alt="">
<h3>
Sneak preview</h3>
<p>Quick preview of an snippets on your clipboard
for easy access</p>
</div>
</div>
</div>
<!-- end prefixs-section -->
<!-- start inc-section -->
<div class="inc-section">
<div class="countainer">
<div class="logo">
<img src="logo-google.png" alt="">
</div>
<div class="logo">
<img src="logo-ibm.png" alt="">
</div>
<div class="logo">
<img src="logo-microsoft.png" alt="">
</div>
<div class="logo">
<img src="logo-hp.png" alt="">
</div>
<div class="logo">
<img src="logo-vector-graphics.png" alt="">
</div>
</div>
</div>
<!-- end inc-section -->
<!-- start end title -->
<div class="end-title">
<div class="countainer">
<div class="text">
<h1>Clipboard for iOS and mac Os
</h1>
<p>Avliable for free on the App Store. Download for mac or iOS, sync iCloud and
you're readyto start adding to yuor clipboard.
</p>
</div>
<div class="buttons">
<input type="button" value="download for ios" />
<input type="button" class="def" value="download for mac" />
</div>
</div>
</div>
<!-- end end title -->
<!-- start footer -->
<div class="footer">
<div class="countainer">
<div class="icon">
<img src="logo.svg" alt="">
</div>
<div class="adress">
<span>FAQs</span>
<span>Contact Us</span>
<span>Privacy Policy</span>
<span>Press Kit</span>
<span>Install Guide</span>
</div>
<div class="social">
<img src="icon-facebook.svg" alt="">
<img src="icon-twitter.svg" alt="">
<img src="icon-instagram.svg" alt="">
</div>
</div>
</div>
<!--end footer -->
</body>
</html>