-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (138 loc) · 6.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
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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Guilherme Gonçalves de Souza">
<meta name="description" content="Desafio Clipboard landing page do Front-end Mentor.">
<meta name="keywords" content="HTML,CSS, Landing Page, Front-end Mentor">
<link rel="shortcut icon" href="./assets/images/favicon-32x32.png">
<link rel="stylesheet" href="./assets/css/style.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:wght@400;600&display=swap" rel="stylesheet">
<title>Clipboard landing page</title>
</head>
<body>
</body>
<div class="background-body"></div>
<div class="container">
<header>
<img src="./assets/images/logo.svg" alt="Logo">
<h1>A history of everything you copy</h1>
<p>Clipboard allows you to track and organize everything you copy.
Instantly access your clipboard on all your devices.
</p>
<div class="buttons">
<a href="#" class="ios">Download for iOS</a>
<a href="#" class="mac">Download for Mac</a>
</div>
</header>
<main>
<section class="info">
<div class="content">
<h2>Keep track of your snippets</h2>
<p>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="infos">
<div class="left">
<img src="./assets/images/image-computer.png" alt="Image computer">
</div>
<div class="right">
<article>
<h3>Quick Search</h3>
<p>Easily search your snippets by content, category, web
address, application, and more.
</p>
</article>
<article>
<h3>iCloud Sync</h3>
<p>Instantly saves and syncs snippets across all your
devices.
</p>
</article>
<article>
<h3>Complete History</h3>
<p>Retrieve any snippets from the first moment
you started using the app.
</p>
</article>
</div>
</div>
</section>
<section class="devices">
<h2>Access Clipboard Anywhere</h2>
<p>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="./assets/images/image-devices.png" alt="Image device">
</section>
<section class="functionalitie">
<h2>Supercharge your workflow</h2>
<p>We´ve got the tools to boost your productivity.</p>
<div class="functionalities">
<div class="func">
<img src="./assets/images/icon-blacklist.svg" alt="Icon create blacklists">
<h3>Create blacklists</h3>
<p>Ensure sensitive information never makes
its way to your clipboard by excluding certain sources.
</p>
</div>
<div class="func">
<img src="./assets/images/icon-text.svg" alt="Icon texts snippets">
<h3>Plain text snippets</h3>
<p>Remove unwanted formatting from copied text for a consistent look.
</p>
</div>
<div class="func">
<img src="./assets/images/icon-preview.svg" alt="Icon Sneak preview">
<h3>Sneak preview</h3>
<p>Quick preview of all snippets on your Clipboard for easy access.
</p>
</div>
</div>
</section>
<div class="partnerCompanies">
<img src="./assets/images/logo-google.png" alt="partner Google">
<img src="./assets/images/logo-ibm.png" alt="partner IBM">
<img src="./assets/images/logo-microsoft.png" alt="partner Microsoft">
<img src="./assets/images/logo-hp.png" alt="partner HP">
<img src="./assets/images/logo-vector-graphics.png" alt="partner Vector Graphics">
</div>
<section class="download">
<h2>Clipboard for iOS and Mac OS</h2>
<p>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="buttons">
<a href="#" class="ios">Download for iOS</a>
<a href="#" class="mac">Download for Mac</a>
</div>
</section>
</main>
</div>
<footer>
<img src="./assets/images/logo.svg" alt="Logo">
<div class="links">
<nav>
<ul>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Press Kit</a></li>
<li><a href="#">Install Guide</a></li>
</ul>
</nav>
</div>
<div class="socials">
<img src="./assets/images/icon-facebook.svg" alt="Follow us Facebook">
<img src="./assets/images/icon-twitter.svg" alt="Follow us Twitter">
<img src="./assets/images/icon-instagram.svg" alt="Follow us Instagram">
</div>
</footer>
</html>