-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
314 lines (281 loc) · 19.4 KB
/
Copy pathindex.html
File metadata and controls
314 lines (281 loc) · 19.4 KB
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
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!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">
<title>bluvard ink</title>
<link rel="apple-touch-icon" sizes="180x180" href="src/favicon_package_v0.16/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="src/favicon_package_v0.16/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="src/favicon_package_v0.16/favicon-16x16.png">
<!-- <link rel="manifest" href="favicon_package_v0.16/site.webmanifest"> -->
<link rel="mask-icon" href="src/favicon_package_v0.16/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link href="src/css/tailwind.css" rel="stylesheet">
<link href="src/css/style.css" rel="stylesheet">
<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=Oleo+Script:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Kumar+One&family=Kumar+One+Outline&display=swap" rel="stylesheet">
</head>
<body>
<main class="text-gray-500 lg:font-semibold lg:leading-8">
<section class="section-1 lg:pt-16 pt-5">
<!--nav begins-->
<div class="container">
<nav class="flex flex-col justify-between items-center lg:flex-row">
<div class="flex flex-row justify-between flex-wrap w-full items-center">
<div class="logo">
<img src="./assets/logo.svg" alt="logo" title="bluvard ink" class="logo">
</div>
<div class="p-4 lg:hidden" id="burger">
<img src="./assets/nav-dropdown.svg">
</div>
</div>
<div class="hidden bg-blue-600 lg:bg-transparent text-white w-full lg:block absolute top-20 lg:static text-center font-semibold" id="menu">
<ul class="lg:flex lg:justify-end lg:text-xs lg:text-black">
<li class="lg:w-24 focus:bg-blue-700 lg:flex lg:flex-col lg:items-center"><a href="#" class="lg:block lg:px-4 lg:pt-4 lg:pb-1 lg:text-blue-600 block px-6 py-8">HOME</a><div class="lg:bg-blue-600 lg:w-1 lg:h-1 lg:rounded"></div></li>
<li class="lg:w-24"><a href="#" class="lg:block lg:px-4 lg:py-4 block px-6 py-8">ABOUT</a></li>
<li class="lg:w-24"><a href="#" class="lg:block lg:px-4 lg:py-4 block px-6 py-8">BLOG</a></li>
<li class="lg:w-48 lg:bg-blue-600 lg:rounded-2xl lg:rounded-bl-none lg:ml-12 bg-blue-500"><a href="https://form.jotform.com/212514618058555" class="lg:block lg:px-4 lg:py-4 lg:text-white block px-6 py-8">JOIN THE WAITING LIST</a></li>
</ul>
</div>
</nav>
</div>
<!--nav ends-->
<!--hero begins-->
<div class="container">
<div id="hero-div" class="flex flex-col justify-center">
<h1 id="hero-txt" class="font-bold text-center text-black mt-20 mb-10 text-xl uppercase sm:text-4xl lg:text-6xl"><span class="lg:6xl">learning together</span> <br> just got <span class="text-blue-600">easier</span><span><img src="./assets/bi_chat-left-quote-fill.svg" alt="qoute" class="inline quote ml-2 mb-5 lg:mb-16"></span></h1>
<div id="hero-img" class="lg:hidden"><img src="./assets/hero-image-mobile.png" alt="hero image"></div>
<div id="hero-img" class="lg-hero-image lg:px-28"><img src="./assets/hero-image-lg.svg" alt="hero image"></div>
</div>
</div>
<!--hero ends-->
<!--mail sub begins-->
<div class="mail-sub-div my-24 text-center lg:items-center lg:w-full lg:my-2">
<div class="container lg:flex lg:flex-col lg:items-center lg:px-20">
<div class="my-10 break-words lg:w-2/3">
Get into a world of borderless education where learning meets networking.
In a digital peer-to-peer safe learning space connecting students from different institutions with similar academic interests for learning.
</div>
<div class="bg-white m12 h-auto px-3 py-4 flex justify-between m-5 rounded-2xl box-shadow-blue-fade break-words lg:w-2/3 lg:px-6">
<span class="text-xs flex items-center text-gray-500">Let's have your email. Get notified!</span>
<a href="https://form.jotform.com/212514618058555" id="sbmt-btn" class="bg-blue-600 text-white font-semibold uppercase py-3 px-6 rounded-2xl rounded-bl-none">submit</a>
</div>
</div>
</div>
<!--mail sub ends-->
<!--feature begins-->
<div id="motiv-feature-connect-div" class="lg:pt-28">
<div class="container">
<div class="text-center mt-20 lg:pb-20">
<div id="motiv" class="my-9 text-left lg:flex">
<div id="motiv-txt" class="lg:w-1/2 lg:order-last lg:pt-14">
<h3 class="mfc-sec-heading">Working together towards a common goal</h3>
<span class="mfc-heading">Our Motivation</span>
<p class="mb-16 lg:break-words">
The Ink App supports diverse groups of young people studying in different universities across the world through a platform that allows them to connect and cross-learn. This is because the possibilities of what young people can achieve are endless with the right resources and network
</p>
</div>
<div id="motiv-img" class="w-full lg:w-1/2 lg:mr-16">
<img src="./assets/team-image.png" alt="team" title="team" class="">
</div>
</div>
<!--core features begins-->
<div id="feature" class="feature mt-32 lg:mt-52 lg:flex lg:text-left">
<div class="lg:pr-14 lg:pt-12 lg:w-2/5">
<div id="ft-div-1">
<h3 class="mfc-sec-heading">Why choose Ink ?</h3>
<h4 class="mfc-heading">Our Features</h4>
<p class="">
The Ink app is redefining learning through Mutual connection across borders.
</p>
</div>
</div>
<div id="ft-div-2" class="lg:flex lg:flex-wrap lg:w-4/5">
<div class="ft-list lg:w-1/2 lg:pr-10">
<div class="flex justify-center w-full mb-3 lg:justify-start">
<img src="./assets/feature-hat-icon.svg" alt="icon-hat">
</div>
<h4 class="ft-heading">Borderless Learning</h4>
<span class="">The Ink app is the bridge connecting students across the globe</span>
</div>
<div class="ft-list lg:w-1/2 lg:pr-10">
<div class="flex justify-center w-full mb-3 lg:justify-start">
<img src="./assets/feature-user-icon.svg" alt="icon-user">
</div>
<h4 class="ft-heading">Collaborative Teaching</h4>
<span class="">We provide a platform to partner, share and collaborate with other educators and learners</span>
</div>
<div class="ft-list lg:w-1/2 lg:pr-10">
<div class="flex justify-center w-full mb-3 lg:justify-start">
<img src="./assets/feature-knowledge-icon.svg" alt="icon-knowledge-feature">
</div>
<h4 class="ft-heading">P2P Knowledge Sharing</h4>
<span class="">We leverage the power of human interaction to foster peer-to-peer learning</span>
</div>
<div class="ft-list lg:w-1/2 lg:pr-10">
<div class="flex justify-center w-full mb-3 lg:justify-start">
<img src="./assets/feature-headset-icon.svg" alt="icon-headset">
</div>
<h4 class="ft-heading">Study Channels</h4>
<span class="">With the Ink app, get an opportunity to create distraction-free study groups with your friends</span>
</div>
<div class="ft-list lg:w-1/2 lg:pr-10">
<div>
<div class="flex justify-end w-full mb-3 lg:justify-start">
<img src="./assets/feature-vid-icon.svg" alt="icon-video">
<img src="./assets/feature-tag-coming-soon.svg" alt="coming soon" class="mx-3 coming-soon">
</div>
</div>
<h4 class="ft-heading">Live Video Tutorials</h4>
<span class="">Go live with us - watch, learn and bring the classroom home to you</span>
</div>
<div class="ft-list lg:w-1/2 lg:pr-10">
<div class="flex justify-end w-full mb-3 lg:justify-start">
<img src="./assets/feature-mic-icon.svg" alt="icon-microphone">
<img src="./assets/feature-tag-coming-soon.svg" alt="coming soon" class="mx-3 coming-soon">
</div>
<h4 class="ft-heading">Audio Classes</h4>
<span class="">The Ink app allows inclusion for auditory learners, opt for audio classes - if that's your preference</span>
</div>
</div>
</div>
</div>
<!--core features ends-->
</div>
<div class="mid-section-2 lg:mt-44 lg:mb-0">
<div class="container">
<div>
<h3 class="mfc-sec-heading">Borderless Learning</h3>
<h2 class="mfc-h text-black text-lg font-black lg:text-3xl lg:mb-5">Connecting People</h2>
</div>
</div>
<div class="map h-60 lg:h-auto lg:py-1">
<div class="container flex row justify-evenly items-center lg:items-end lg:justify-between lg:relative">
<div class="ppl-connect-img lg:w-1/3">
<img src="./assets/people-connected-img-Group 36.png" alt="connected people">
</div>
<div class="dwnld-div relative -top-10 sm:-top-16">
<div class="">
<h3 class="mfc-sec-heading">Coming Soon :</h3>
<span class="text-white uppercase font-bold lg:font-black">Download on</span>
<div class="stores lg:flex lg:justify-around">
<img src="./assets/appstore-Group 53.svg" alt="appstore" class="my-2 lg:mr-3">
<img src="./assets/google-play-Group 83.svg" alt="playstore" class="my-2">
</div>
</div>
</div>
<div class="app-img-div w-40 relative -top-16 left-6 sm:w-44 lg:w-96 lg:pb-40 lg:-left-0 lg:px-14 lg:flex lg:justify-center">
<img src="./assets/iPhone 12 - homeiphone-12.png" alt="app-image" class="lg:w-80 lg:absolute lg:-top-96">
</div>
</div>
</div>
</div>
</div>
<!--feature ends-->
</section>
<section class="mid-section-3 pt-72 pb-44 lg:pt-96 lg:pb-64">
<div class="container">
<div class="flex items-center lg:items-center sm:items-center">
<div class="w-1/2 relative -left-6 sm:-left-9 lg:-left-32 lg:w-1/2">
<img src="./assets/girl-student-Mask Group.png" alt="student">
</div>
<div class="w-1/2">
<h3 class="mfc-sec-heading">What We Hope to Achieve</h3>
<h4 class="learn-any text-l sm:text-xl font-extrabold mb-2 leading-6 text-black lg:text-3xl">Learn <span class="text-blue-600">anywhere</span> , with <span class="text-blue-600">anyone</span></h4>
<p class="txt-decsrip-1 lg:mb-12">
One way we believe we can make this happen is through our mantra, at its core is the connection of people and exchange of ideas. We want to see to it that you can learn anywhere, with anyone
</p>
<p class="txt-descrip-2 lg:mb-24">
The Ink app will Launch with these targets at the fore of our activities, which is to reach :
</p>
<div class="mantra-2">
<div class="metrics-div flex flex-row justify-between">
<div class="">
<h2 class="text-2xl lg:text-3xl font-black text-blue-600 metric">10K+</h2>
<span class="metrics-txt font-bold">Students</span>
</div>
<div class="">
<h2 class="text-2xl lg:text-3xl font-black text-blue-600 metric">2K+</h2>
<span class="metrics-txt font-bold">Topics</span>
</div>
<div class="">
<h2 class="text-2xl lg:text-3xl font-black text-blue-600 metric">100+</h2>
<span class="metrics-txt font-bold">Countries</span>
</div>
</div>
</div>
</div>
</div>
<div class="my-16 mantra-1 lg:hidden">
<div class="metrics-div flex flex-row justify-between">
<div class="">
<h2 class="text-2xl font-black text-blue-600 metric">10K+</h2>
<span class="metrics-txt font-bold">Students</span>
</div>
<div class="">
<h2 class="text-2xl font-black text-blue-600 metric">2K+</h2>
<span class="metrics-txt font-bold">Topics</span>
</div>
<div class="">
<h2 class="text-2xl font-black text-blue-600 metric">100+</h2>
<span class="metrics-txt font-bold">Countries</span>
</div>
</div>
</div>
</div>
<!--cta button begins-->
<div class="lg:flex lg:justify-center lg:my-44">
<div class="cta-div text-white flex flex-col items-center justify-between py-16 bg-blue-600 p-5 lg:w-4/5 lg:rounded-3xl">
<h1 class="cta-txt text-center text-xl font-black lg:text-4xl">Be the First to know when we launch</h1>
<a href="https://form.jotform.com/212514618058555" class="bg-white px-6 py-3 mt-6 rounded-2xl rounded-bl-none text-blue-600 font-bold">Join the waiting list</a>
</div>
</div>
<!--cta button ends-->
</section>
<section class="footer map text-white py-8 lg:pt-12 lg:pb-28">
<div class="container">
<div class="py-6 lg:flex lg:justify-between">
<div class="lg:w-1/3">
<div class="logo">
<img src="./assets/logo.svg" alt="logo" title="bluvard ink" class="logo">
</div>
<div class="my-4 mb-10">
Get into a world of borderless education where learning meets networking.
</div>
</div>
<div class="my-7">
<span class="footer-heading">COMPANY</span>
<ul>
<li class="py-2"><a href="#">HOME</a></li>
<li class="py-2"><a href="#">ABOUT</a></li>
<li class="py-2"><a href="#">BLOG</a></li>
<li class="py-2"><a href="mailto:bluvardink@gmail.com?subject=I am interested in BLuvard ink">CAREERS</a></li>
</ul>
</div>
<div class="my-7">
<span class="footer-heading">CONTACT</span>
<ul>
<li class="py-2"><a href="mailto:bluvardink@gmail.com">EMAIL : bluvardink@gmail.com</a></li>
<li class="py-2"><a href="tel:+2348167968280">PHONE : 081-INK-0000</a></li>
</ul>
</div>
<div class="my-7">
<span class="footer-heading">SOCIAL</span>
<ul class="flex flex-row py-3">
<li class="mr-6"><a href="#"><img src="./assets/facebook.svg" alt="facebook" title="facebook" class="lg:w-5 w-5"></a></li>
<li class="mr-6"><a href="https://mobile.twitter.com/BluvardInk
"><img src="./assets/twitter.svg" alt="twitter" title="twitter" class="lg:w-5 w-5"></a></li>
<li class="mr-6"><a href="https://www.instagram.com/bluvardink_ng/"><img src="./assets/instagram.svg" alt="instagram" title="instagram" class="lg:w-5 w-5"></a></li>
</ul>
</div>
</div>
</div>
</section>
</main>
<script src="index.js"></script>
</body>
</html>