-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
271 lines (263 loc) · 14.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="src/output.css">
</head>
<body class="font-Poppins">
<!--Header-->
<header>
<nav class="container flex items-center py-4 mt-4 sm:mt-12">
<div class="py-1"><img src="./img/logo-bookmark.svg" alt=""></div>
<ul class="hidden sm:flex flex-1 justify-end items-center gap-12 text-bookmark-blue uppercase text-xs ">
<li class="cursor-pointer hover:text-bookmark-grey">Features</li>
<li class="cursor-pointer hover:text-bookmark-grey">Pricing</li>
<li class="cursor-pointer hover:text-bookmark-grey">Contact</li>
<button type="button" class="bg-bookmark-red text-white px-7 py-3 rounded-md uppercase">login</button>
</ul>
<div class="flex sm:hidden justify-end flex-1">
<i class="text-2xl fa-solid fa-bars"></i></div>
</nav>
</header>
<main>
<!--Hero section-->
<section class="relative">
<div class="container flex flex-col-reverse lg:flex-row gap-12 mt-14 lg:mt-28">
<!--content-->
<div class="flex flex-1 flex-col items-center lg:items-start">
<h2 class="text-bookmark-blue text-3xl md:text-4 lg:text-5xl text-center lg:text-left mb-6">A simple
bookmark</h2>
<p class="text-bookmark-grey text-lg text-center lg:text-left mb-6">A clean and simple interface to
organize your website. Open a new browser tab and see your sites load immediately. Try it for
free.
</p>
<div class="flex justify-center flex-wrap gap-6">
<button class="btn btn-purple hover:bg-bookmark-white hover:text-black">Get it on
Chrome</button>
<button class="btn btn-white hover:bg-bookmark-purple hover:text-white">Get it on
Firefox</button>
</div>
</div>
<!--image-->
<div class="flex justify-center flex-1 mb:10 md:mb:16 lg:mb:0 z-10">
<img class="w-5/6 h-5/6 sm:h-3/4 md:w-full md:h-full" src="./img/hero-bg.png" alt=""></div>
</div>
<!--rounded rectangle-->
<div
class="hidden md:block overflow:hidden bg-bookmark-purple rounded-l-full h-80 w-2/4 absolute top-32 right-0 lg:-bottom-28 lg:-right-26">
</div>
</section>
<!--Features-->
<section class="bg-bookmark-white py-20 mt-20 lg:mt-60">
<!--heading-->
<div class="sm:w-3/4 lg:w-5/12 mx-auto px-2">
<h1 class="text-3xl text-center text-bookmark-blue">Features</h1>
<p class="text-center text-bookmark-grey mt-4">
Our aim is to make it easy for you to access your websites. Your bookmarks synchronize with your
devices
so you can access them on the go.
</p>
</div>
<!-- Feature #1 -->
<div class="relative mt-20 lg:mt-24">
<div class="container flex flex-col lg:flex-row items-center justify-center gap-x-24">
<!-- Image -->
<div class="flex flex-1 justify-center z-10 mb-10 lg:mb-0">
<img class="w-5/6 h-5/6 sm:w-3/4 sm:h-3/4 md:w-full md:h-full"
src="./img/illustration-features-tab-1.svg" alt="">
</div>
<!-- Content -->
<div class="flex flex-1 flex-col items-center lg:items-start ">
<h1 class="text-3xl text-bookmark-blue">Bookmark in one click</h1>
<p class="text-bookmark-grey my-4 text-center lg:text-left sm:w-3/4 lg:w-full">
Organize your bookmarks however you like. Our simple drag and drop interface gives you
complete
control over how you manage your favorite sites</p>
<button class="btn btn-purple hover:bg-bookmark-white hover:text-black">More info</button>
</div>
</div>
<!--rounded rectangle-->
<div
class="hidden lg:block overflow:hidden bg-bookmark-purple rounded-r-full h-80 w-2/4 absolute -bottom-24 -left-36">
</div>
</div>
<!-- Feature #2 -->
<div class="relative mt-20 lg:mt-52">
<div class="container flex flex-col lg:flex-row-reverse items-center justify-center gap-x-24">
<!-- Image -->
<div class="flex flex-1 justify-center z-10 mb-10 lg:mb-0">
<img class="w-5/6 h-5/6 sm:w-3/4 sm:h-3/4 md:w-full md:h-full"
src="./img/illustration-features-tab-2.svg" alt="">
</div>
<!-- Content -->
<div class="flex flex-1 flex-col items-center lg:items-start ">
<h1 class="text-3xl text-bookmark-blue">Intelligent Search</h1>
<p class="text-bookmark-grey my-4 text-center lg:text-left sm:w-3/4 lg:w-full">
Our powerful search feature will help you find saved sites in no time at all. No need to
crawl
through all of your bookmarks. </p>
<button class="btn btn-purple hover:bg-bookmark-white hover:text-black">More info</button>
</div>
</div>
<!--rounded rectangle-->
<div
class="hidden lg:block overflow:hidden bg-bookmark-purple rounded-l-full h-80 w-2/4 absolute -bottom-24 -right-36">
</div>
</div>
<!-- Feature #3 -->
<div class="relative mt-20 lg:mt-52">
<div class="container flex flex-col lg:flex-row items-center justify-center gap-x-24">
<!-- Image -->
<div class="flex flex-1 justify-center z-10 mb-10 lg:mb-0">
<img class="w-5/6 h-5/6 sm:w-3/4 sm:h-3/4 md:w-full md:h-full"
src="./img/illustration-features-tab-3.svg" alt="">
</div>
<!-- Content -->
<div class="flex flex-1 flex-col items-center lg:items-start ">
<h1 class="text-3xl text-bookmark-blue">Share your bookmarks</h1>
<p class="text-bookmark-grey my-4 text-center lg:text-left sm:w-3/4 lg:w-full">
Easily share your bookmarks and collections with others. Create a shareable link that you
can
share with a click of a button.</p>
<button class="btn btn-purple hover:bg-bookmark-white hover:text-black">More info</button>
</div>
</div>
<!--rounded rectangle-->
<div
class="hidden lg:block overflow:hidden bg-bookmark-purple rounded-r-full h-80 w-2/4 absolute -bottom-24 -left-36">
</div>
</div>
</section>
<!-- Download -->
<section class="py-20 mt-20">
<!--heading-->
<div class="sm:w-3/4 lg:w-5/12 mx-auto px-2">
<h1 class="text-3xl text-center text-bookmark-blue">Download the extension</h1>
<p class="text-center text-bookmark-grey mt-4">
We've got more browser in the pipeline. Please let us know if you have got a favourite you would
like to
priotize.
</p>
</div>
<!-- Cards -->
<div class="container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16 max-w-screen-lg mt-16">
<!-- card 1 -->
<div class="flex flex-col rounded-md shadow-md lg:mb-16">
<div class="p-6 flex flex-col items-center">
<img src="./img/logo-chrome.svg" alt="">
<h3 class="mt-5 mb-2 text-bookmark-blue text-lg">Add to Chrome</h3>
<p class="mb-2 text-bookmark-grey font-light">Minimum version 62</p>
</div>
<hr class="border-b border-bookmark-white">
<div class="flex p-6">
<button type="button" class="flex-1 btn btn-purple hover:bg-bookmark-white hover:text-black">Add
&
Install
Extension</button>
</div>
</div>
<!-- card 2 -->
<div class="flex flex-col rounded-md shadow-md lg:my-8 ">
<div class="p-6 flex flex-col items-center">
<img src="./img/logo-firefox.svg" alt="">
<h3 class="mt-5 mb-2 text-bookmark-blue text-lg">Add to Firefox</h3>
<p class="mb-2 text-bookmark-grey font-light">Minimum version 62</p>
</div>
<hr class="border-b border-bookmark-white">
<div class="flex p-6">
<button type="button" class="flex-1 btn btn-purple hover:bg-bookmark-white hover:text-black">Add
&
Install
Extension</button>
</div>
</div><!-- card 3 -->
<div class="flex flex-col rounded-md shadow-md lg:mt-16">
<div class="p-6 flex flex-col items-center">
<img src="./img/logo-opera.svg" alt="">
<h3 class="mt-5 mb-2 text-bookmark-blue text-lg">Add to Opera</h3>
<p class="mb-2 text-bookmark-grey font-light">Minimum version 62</p>
</div>
<hr class="border-b border-bookmark-white">
<div class="flex p-6">
<button type="button" class="flex-1 btn btn-purple hover:bg-bookmark-white hover:text-black">Add
&
Install
Extension</button>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section class="bg-bookmark-white py-20">
<div class="container">
<!--heading-->
<div class="sm:w-3/4 lg:w-5/12 mx-auto px-2">
<h1 class="text-3xl text-center text-bookmark-blue">Frequently Asked Questions</h1>
<p class="text-center text-bookmark-grey mt-4">
Here are some of our FAQs. If you have any other questions to ask please contact us.
</p>
</div>
<!-- FAQ Items -->
<div class="flex flex-col sm:w-3/4 lg:w-5/12 mt-12 mx-auto">
<div class="flex items-center border-b py-4">
<span class="flex-1">What is a Bookmark?</span>
<i class="text-bookmark-purple fas fa-chevron-down"></i>
</div>
<div class="flex items-center border-b py-4">
<span class="flex-1">How can I request a new browser?</span>
<i class="text-bookmark-purple fas fa-chevron-down"></i>
</div>
<div class="flex items-center border-b py-4">
<span class="flex-1">Is there a mobile app?</span>
<i class="text-bookmark-purple fas fa-chevron-down"></i>
</div>
<div class="flex items-center border-b py-4">
<span class="flex-1">What about other Chromium browser?</span>
<i class="text-bookmark-purple fas fa-chevron-down"></i>
</div>
<button type="button"
class="mt-12 flex self-center btn btn-purple hover:bg-bookmark-white hover:text-black">More
Info</button>
</div>
</div>
</div>
</section>
<!-- Contact us -->
<section class="bg-bookmark-purple text-white py-20">
<div class="container">
<div class="sm:w-3/4 lg:w-2/4 mx-auto">
<p class="font-light uppercase text-center mb-8">35,000 already joined</p>
<h1 class="text-3xl text-center">Stay up-to date with what we're doing</h1>
<div class="flex flex-col sm:flex-row gap-6 mt-8">
<input type="text" class="focus:outline-none flex-1 px-2 py-3 rounded-md text-black"
placeholder="Enter your email address">
<button class="btn bg-bookmark-red hover:bg-bookmark-white hover:text-black">More info</button>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-bookmark-blue py-8">
<div class="container flex flex-col md:flex-row items-center">
<div class="flex flex-1 flex-wrap items-center justify-center md:justify-start gap-12">
<img src="./img/logo-bookmark-white.png" alt="">
<ul class="flex text-white uppercase gap-12 text-xs">
<li class="cursor-pointer hover:text-bookmark-grey">Features</li>
<li class="cursor-pointer hover:text-bookmark-grey">Pricing</li>
<li class="cursor-pointer hover:text-bookmark-grey">Contact</li>
</ul>
</div>
<div class="flex gap-10 mt-12 md:mt-0">
<li><i class="fab fa-twitter text-white text-2xl"></i></li>
<li><i class="fab fa-facebook-square text-white text-2xl"></i></li>
</div>
</div>
</footer>
</body>
</html>