-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
245 lines (220 loc) · 8.61 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
<!DOCTYPE html>
<html lang="en">
<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" />
<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=Rubik:wght@400;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/style.css" />
<title>Bookmark website</title>
</head>
<body class="overflow-x-hidden w-screen">
<nav class="container mx-auto p-6 relative">
<div class="flex items-center justify-between m-6 space-x-16">
<div class="z-20">
<img src="./images/logo-bookmark.svg" alt="">
</div>
<div class="hidden text-lg capitalize items-center text-grayishBlue md:flex space-x-10">
<a href="#features" class="tracking-widest hover:text-softRed">
features
</a>
<a href="#download" class="tracking-widest hover:text-softRed">
Downloads
</a>
<a href="#faq" class="tracking-widest hover:text-softRed">
FAQ
</a>
<a href="#login" class="text-white bg-softRed rounded-lg px-8 py-2 duration-200
hover:text-softRed uppercase shadow-xl hover:bg-white">
Login
</a>
</div>
</div>
</nav>
<section class="flex flex-col lg:flex-row-reverse mx-auto container lg:mb-0 p-4" id="hero">
<div class="relative mx-auto lg:mx-0 lg:mb-0">
<img
src="images/illustration-hero.svg"
alt=""
class="z-10 lg:top-10
overflow-x-visible lg:right-0 lg:"
/>
</div>
<div class="flex flex-col">
<div class="flex flex-col space-y-10 lg:w-3/5 lg:mt-16 ">
<h2>
a simple bookmark manager
</h2>
<p class="mt-0 lg:mx-0">
a clean and simple interface to keep your favorite websites organized.
open a new tab and see your sites load insatantly. try it for free
</p>
</div>
<div class="flex flex-row sapce-x-10 max-w-2xl mx-auto items-center lg:items-left
lg:max-w-2xl mt-1 lg:mx-0">
<a href="#chrome" class="font-bold text-center bg-softBlue text-white
p-4 rounded-xl shadow-xl hover:opacity-80 duration-200">
Get It On chrome
</a>
<a href="#fire" class=" text-softBlue border
m-4 border-softBlue bg-white font-bold
p-4 shadow-xl rounded-xl my-2 text-center lg:mx-4
hover:bg-slate-300 duration-200">
Get It On Firefox
</a>
</div>
</div>
</section>
<section id="features" class="mb-16 flex flex-col items-center mt-16 lg:mt-32">
<h2 class="capitalize font-semibold text-4xl ">
features
</h2>
<p class="container py-0 mx-auto font-light lg:text-center lg:max-w-2xl">
our aim is to make it quick and easy for you to
access your favorite websites. your bookmarks sync between
your devices so that you can access them on the go
</p>
</section>
<section class="flex flex-col justify-center
lg:border-0 lg:border-b-2 lg:flex-row items-center">
<a href="" class="text-black font-light
border-0 border-b-4 pb-4 lg:border-b-2
border-b-softRed capitalize tracking-normal hover:text-softRed">
simple bookmarking
</a>
<a href="" class="text-black font-light
border-0 border-b-2 lg:pb-4 p-6 lg:border-b-2 lg:mb-6
capitalize tracking-normal hover:text-softRed">
speedy searching
</a>
<a href="" class="text-black font-light
border-0 border-b-2 lg:pb-4 p-6 lg:border-b-2 lg:mb-6
capitalize tracking-normal hover:text-softRed">
easy sharing
</a>
</section>
<section class="flex flex-col lg:flex-row mx-auto container lg:max-w-6xl lg:mb-0 p-4">
<div class="relative mx-auto lg:mx-4 lg:mr-4
pt-4 border-softRed mb-32 border-0 border-t-4 lg:mb-0">
<img
src="images/illustration-features-tab-1.svg"
alt=""
class="z-10 lg:top-10
overflow-x-visible lg:right-0 lg:max-w-2xl"
/>
</div>
<div class="flex flex-col items-center space-y-10 lg:w-3/5 lg:mt-16">
<h2 class="text-2xl">
bookmark in one click
</h2>
<p class="mt-0 text-lg max-w-md font-light lg:text-center lg:mx-0">
organize your bookmarks however you like. our simple drag and drop
interface gives you complete control over hoe to manage your favorite sites.
</p>
<a href="" class="border border-softBlue bg-softBlue
rounded-xl text-white text-center px-4 py-2 font-bold">
More Info
</a>
</div>
</section>
<section>
<div class="container mx-auto">
<h1 class="text-2xl text-center font-bold mt-32 mb-8">
Download the extension
</h1>
<p class="mx-auto max-w-md font-light mb-32 lg:text-center ">
we've got more browsers in pipeline. Please do let us know if
you've got a favorite you'd like us to prioritize.
</p>
</div>
</section>
<section id="download" class="py-16">
<div class=" relative flex flex-col w-full lg:flex-row lg:items-center py-6 space-y-4 text-center ">
<div class="shadow-lg mx-auto flex flex-col mb-6 items-center max-w-xl">
<img src="./images/logo-chrome.svg" alt="" class="p-2 w-24">
<h1 class="text-2xl text-center font-bold mt-8 mb-4">
Add to Chrome
</h1>
<p class="mx-auto max-w-md font-light mb-4 lg:text-center ">
Minimum Version 62
</p>
<!-- <img src="/images/bg-dots.svg" class="h-2 max-w-lg mb-4" alt=""> -->
<a href="" class="border border-softBlue bg-softBlue
rounded-xl text-white text-center mb-4 px-4 py-2 font-bold" >
Add and Install Extension
</a>
</div>
<div class="shadow-lg flex mx-auto flex-col items-center max-w-xl">
<img src="./images/logo-firefox.svg" alt="" class="p-2 w-24">
<h1 class="text-2xl text-center font-bold mt-8 mb-4">
Add to firefox
</h1>
<p class="mx-auto max-w-md font-light mb-4 lg:text-center ">
Minimum Version 62
</p>
<!-- <img src="/images/bg-dots.svg" class="h-2 max-w-lg mb-4" alt=""> -->
<a href="#firefox" class="border border-softBlue bg-softBlue
rounded-xl text-white text-center mb-4 px-4 py-2 font-bold" >
Add and Install Extension
</a>
</div>
<div class="shadow-lg flex mx-auto flex-col items-center mb-6 max-w-xl">
<img src="./images/logo-opera.svg" alt="" class="p-2 w-24">
<h1 class="text-2xl text-center font-bold mt-8 mb-4">
Add to Opera
</h1>
<p class="mx-auto max-w-md font-light mb-4 lg:text-center ">
Minimum Version 62
</p>
<!-- <img src="/images/bg-dots.svg" class="h-2 max-w-lg mb-4" alt=""> -->
<a href="#opera" class="border border-softBlue bg-softBlue
rounded-xl text-white text-center mb-4 px-4 py-2 font-bold" >
Add and Install Extension
</a>
</div>
</div>
</section>
<section id="footer" >
<div class="bg-blue-700 text-white text-center">
<h1 class="text-xl pt-32 pb-16">
35,000+ already joined
</h1>
<h1 class="text-3xl font-bold px-4 pb-8">
Stay up-to-date with what we're doing
</h1>
<div class="flex flex-col items-center">
<input placeholder="Enter Your email" class="p-4 border-0 outline-0 text-center rounded-lg text-black" type="text">
<a href="#login" class="text-white bg-softRed rounded-lg px-8 py-2 duration-200
hover:text-softRed uppercase shadow-xl mt-4 mb-32 hover:bg-white">
Login
</a>
</div>
</div>
</section>
<section>
<div class=" flex flex-col lg:flex-row py-16 items-center bg-veryDarkBlue text-white text-center">
<img src="./images/logo-bookmark-footer.svg" alt="">
<div class="lg:ml-4 flex flex-col mx-auto lg:flex-row p-8 text-lg capitalize items-center text-grayishBlue ">
<a href="#features" class="tracking-widest p-8 text-center hover:text-softRed">
features
</a>
<a href="#download" class="tracking-widest p-8 text-center hover:text-softRed">
Downloads
</a>
<a href="#faq" class="p-8 tracking-widest hover:text-softRed">
FAQ
</a>
</div>
<div class="flex flex-row lg:mr-8">
<img class="p-4 hover:bg-softRed" src="./images/icon-facebook.svg" alt="">
<img class="p-4 hover:bg-softRed" src="./images/icon-twitter.svg" alt="">
</div>
</div>
</section>
</body>
</html>