-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
263 lines (241 loc) · 14.6 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
<!doctype html>
<html class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Unlock Your Future By Learning English">
<link rel="icon" type="image/png" href="./src/assets/img/logo-main.png">
<link href="./src/assets/css/style.css" rel="stylesheet">
<title>Talkify - Home</title>
</head>
<body class="overflow-x-hidden">
<header class="relative flex flex-wrap w-full py-4 text-sm bg-white sm:justify-start sm:flex-nowrap">
<nav class="max-w-[85rem] w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between" aria-label="Global">
<div class="flex items-center justify-between">
<a class="flex-none text-xl font-semibold" href="#">
<img src="/src/assets/img/logo-main.png" alt="Logo" class="w-20">
</a>
<div class="sm:hidden">
<button type="button" class="inline-flex items-center justify-center p-2 text-gray-800 bg-white border border-gray-200 rounded-lg shadow-sm hs-collapse-toggle gap-x-2 hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none" data-hs-collapse="#navbar-with-mega-menu" aria-controls="navbar-with-mega-menu" aria-label="Toggle navigation">
<svg class="flex-shrink-0 hs-collapse-open:hidden size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
<svg class="flex-shrink-0 hidden hs-collapse-open:block size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</div>
</div>
<div id="navbar-with-mega-menu" class="hidden overflow-hidden transition-all duration-300 hs-collapse basis-full grow sm:block">
<div class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:ps-5">
<a class="font-semibold text-primary" href="/index.html">Home</a>
<a class="font-semibold text-gray-600 hover:text-gray-400" href="/about.html">About us</a>
<div class="hs-dropdown [--strategy:static] sm:[--strategy:fixed] [--adaptive:none] ">
<button id="hs-mega-menu-basic-dr" type="button" class="flex items-center w-full font-semibold text-gray-600 hover:text-gray-400 ">
Courses
<svg class="flex-shrink-0 ms-1 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] sm:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 sm:w-48 z-10 bg-white sm:shadow-md rounded-lg p-2 sm: before:absolute top-full sm:border before:-top-5 before:start-0 before:w-full before:h-5 hidden">
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-primatext-primary" href="/courses/listening/listening-practice-1.html">
Listening
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-primatext-primary" href="/courses/writing/reading-practice-1.html">
Writing
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-primatext-primary" href="/courses/reading/reading-practice-1.html">
Reading
</a>
</div>
</div>
<a class="font-semibold text-gray-600 hover:text-gray-400" href="/contact.html">Contact us</a>
</div>
</div>
</nav>
</header>
<main>
<section class="w-11/12 h-screen mx-auto mt-10 md:w-10/12 md:mt-0">
<div class="flex items-center justify-between">
<div class="relative basis-full md:basis-6/12">
<h1 class="text-6xl font-bold">Unlock Your <span class="text-primary"> Future </span> <br>
By <span class="text-primary">Learning</span> English</h1>
<p class="my-10 text-xl tracking-wider text-secodary">English unlocks doors to global opportunities. Master it to connect, succeed, and shape your future with confidence</p>
<div class="z-20 flex gap-3">
<a href="#courses" class="inline-block px-10 py-4 font-semibold text-white rounded-lg shadow-lg cursor-pointer bg-primary">Get Started</a>
<a href="/courses/reading/reading-practice-1.html" class="inline-block px-10 py-4 font-semibold rounded-lg shadow-lg cursor-pointer text-primary bg-primary/10">Learn Now</a>
</div>
<div class="flex gap-10 mt-10">
<div class="flex items-center gap-3">
<img src="/src/assets/img/icon-speak.png" alt="" class="w-10">
<span class="text-xs text-secodary md:text-md">Public Speaking</span>
</div>
<div class="flex items-center gap-3">
<img src="/src/assets/img/icon-bag.png" alt="" class="w-8">
<span class="text-xs text-secodary md:text-md">Career-Oriented</span>
</div>
<div class="flex items-center gap-3">
<img src="/src/assets/img/icon-idea.svg" alt="" class="w-10">
<span class="text-xs text-secodary md:text-md">Creative Thinking</span>
</div>
</div>
<div class="absolute -left-36 -top-24 -z-10">
<img src="/src/assets/img/pattern-1.png" alt="" class="w-6/12">
</div>
</div>
<div class="relative hidden md:basis-6/12 md:block">
<img src="/src/assets/img/model.png" alt="Image Model" class="w-full">
<div class="absolute flex gap-4 p-5 bg-white border-2 shadow-xl animate-bounce top-44 rounded-2xl border-primary/40">
<img src="/src/assets/img/icon-video-courses.png" alt="" class="w-16">
<div class="">
<div class="text-3xl font-bold">2K+</div>
<div class="font-light text-secodary">Video Courses</div>
</div>
</div>
<div class="absolute right-0 flex gap-4 p-5 bg-white border-2 shadow-xl animate-pulse border-primary/40 bottom-20 rounded-2xl">
<img src="/src/assets/img/icon-tutors.png" alt="" class="w-16">
<div class="">
<div class="font-light text-secodary">Tutors</div>
<div class="text-3xl font-bold">250+ </div>
</div>
</div>
<img src="/src/assets/img/pattern-2.png" alt="" class="absolute w-8/12 -bottom-52 -z-20 -right-36">
</div>
</div>
</section>
<section class="w-11/12 mx-auto mb-32 -mt-32 md:w-10/12 md:-mt-0" id="courses">
<header class="mb-10">
<p class="font-semibold text-primary">Explore Programs</p>
<h2 class="text-3xl font-semibold md:text-4xl">Our Most Popular Class</h2>
<p class="text-secodary">Let's join our famous class, the knowledge provided will definitely be useful for you.</p>
</header>
<div class="grid grid-cols-1 gap-5 md:grid-cols-3">
<a href="/courses/reading/reading-practice-1.html" class="block p-5 bg-white shadow-xl rounded-xl group">
<div class="h-56 overflow-hidden rounded-lg">
<img src="/src/assets/img/speaking.jpg" class="object-cover w-full h-full transition-all duration-700 group-hover:scale-110" alt="">
</div>
<div class="mt-5">
<p class="font-semibold text-primary">Reading</p>
<h3 class="text-2xl font-semibold">Exclusive Content Access</h3>
<p class="mt-3 text-secodary">Get exclusive content access for 1 weeks at the price of just Rp 8.000. Limited time offer, don't miss out!</p>
</div>
<div class="flex items-center justify-between mt-5">
<div class="flex gap-3 ratings">
<div class="text-yellow-500 icon">
<iconify-icon icon="icon-park-solid:star"></iconify-icon>
<iconify-icon icon="icon-park-solid:star"></iconify-icon>
<iconify-icon icon="icon-park-solid:star"></iconify-icon>
<iconify-icon icon="tabler:star-half-filled"></iconify-icon>
<iconify-icon icon="icon-park-outline:star"></iconify-icon>
</div>
<span class="text-secodary">(12.567)</span>
</div>
<div>
<h3 class="text-2xl font-bold text-primary">Rp. 8.000</h3>
</div>
</div>
</a>
<a href="/courses/listening/listening-practice-1.html" class="block p-5 bg-white shadow-2xl group rounded-xl">
<div class="h-56 overflow-hidden rounded-lg">
<img src="/src/assets/img/listening.jpg" class="object-cover w-full h-full transition-all duration-700 group-hover:scale-110" alt="">
</div>
<div class="mt-5">
<p class="font-semibold text-primary">Listening</p>
<h3 class="text-2xl font-semibold">Content + Chat Access</h3>
<p class="mt-3 text-secodary">Enjoy content and chat access for 1 week, every day from 18:00 to 22:00, 1 hour/day, capacity 6 people.</p>
</div>
<div class="flex items-center justify-between mt-5">
<div class="flex gap-3 ratings">
<div class="text-yellow-500 icon">
<iconify-icon icon="icon-park-solid:star"></iconify-icon>
<iconify-icon icon="icon-park-solid:star"></iconify-icon>
<iconify-icon icon="icon-park-solid:star"></iconify-icon>
<iconify-icon icon="tabler:star-half-filled"></iconify-icon>
<iconify-icon icon="icon-park-outline:star"></iconify-icon>
</div>
<span class="text-secodary">(16,325)</span>
</div>
<div>
<h3 class="text-2xl font-bold text-primary">Rp. 15.000</h3>
</div>
</div>
</a>
<a href="" class="block p-5 bg-white shadow-2xl rounded-xl group">
<div class="h-56 overflow-hidden rounded-lg">
<img src="/src/assets/img/writing.jpg" class="object-cover w-full h-full transition-all duration-700 group-hover:scale-110" alt="">
</div>
<div class="mt-5">
<p class="font-semibold text-primary">Writing</p>
<h3 class="text-2xl font-semibold">Content + Chat Access + Zoom Meeting</h3>
<p class="mt-3 text-secodary">Sessions are held Saturdays and Sundays, from 10:00 to 15:00, each lasting 30 minutes.</p>
</div>
<div class="flex items-center justify-between mt-5">
<div class="flex gap-3 ratings">
<div class="text-yellow-500 icon">
<iconify-icon icon="icon-park-solid:star"></iconify-icon>
<iconify-icon icon="icon-park-solid:star"></iconify-icon>
<iconify-icon icon="icon-park-solid:star"></iconify-icon>
<iconify-icon icon="tabler:star-half-filled"></iconify-icon>
<iconify-icon icon="icon-park-outline:star"></iconify-icon>
</div>
<span class="text-secodary">(9,345)</span>
</div>
<div>
<h3 class="text-2xl font-bold text-primary">Rp. 35.000</h3>
</div>
</div>
</a>
</div>
</section>
</main>
<footer class="py-20 bg-blue-dark">
<div class="w-10/12 mx-auto">
<div class="grid grid-cols-1 md:grid-cols-5">
<div class="col-span-2 mb-10 md:mb-0">
<img src="/src/assets/img/logo-second.png" alt="" class="w-32">
<div class="mt-5 font-light text-lighty">Top learning experiences that create more <br> talent in the world.</div>
</div>
<div class="mb-10 md:mb-0">
<h4 class="font-semibold text-gray-500">Product</h4>
<a href="/" class="block mt-2 text-lighty">Overview</a>
<a href="" class="block mt-2 text-lighty">Features</a>
<a href="" class="block mt-2 text-lighty">Tutorials</a>
</div>
<div class="">
<h4 class="font-semibold text-gray-500">Company</h4>
<a href="" class="block mt-2 text-lighty">About us</a>
<a href="" class="block mt-2 text-lighty">Contact us</a>
</div>
<div class="">
<h4 class="font-semibold text-gray-500">Social Media</h4>
<a href="https://www.instagram.com/talkify.official?igsh=NHVwcXRtMjVtZDcw" class="block mt-2 text-lighty">Instagram</a>
<a href="https://youtube.com/@talkifyofficial?si=C2nv_FJYCuSLICIa" class="block mt-2 text-lighty">Youtube</a>
<a href="https://www.tiktok.com/@talkify.official?_t=8n8aZP0yBk1&_r=1" class="block mt-2 text-lighty">Tiktok</a>
<a href="https://t.me/talkify_official" class="block mt-2 text-lighty">Telegram</a>
</div>
</div>
<div class="justify-between block mt-10 text-center md:flex md:text-left">
<div class="font-extralight text-lighty">
© 2024 Talkify. All rights reserved.
</div>
<div class="block gap-3 mt-5 text-center md:mt-0 md:flex md:text-right">
<a href="https://www.instagram.com/talkify.official?igsh=NHVwcXRtMjVtZDcw" class="text-2xl">
<iconify-icon icon="mdi:instagram" class="text-gray-400"></iconify-icon>
</a>
<a href="https://youtube.com/@talkifyofficial?si=C2nv_FJYCuSLICIa" class="text-2xl">
<iconify-icon icon="iconoir:youtube" class="text-gray-400"></iconify-icon>
</a>
<a href="https://www.tiktok.com/@talkify.official?_t=8n8aZP0yBk1&_r=1" class="text-2xl">
<iconify-icon icon="ic:baseline-tiktok" class="text-gray-400"></iconify-icon>
</a>
<a href="https://t.me/talkify_official" class="text-2xl">
<iconify-icon icon="ic:baseline-telegram" class="text-gray-400"></iconify-icon>
</a>
</div>
</div>
</div>
</footer>
<!-- Preline -->
<!-- <script src="./node_modules/preline/dist/preline.js"></script> -->
<script src="./src/assets/js/preline.js"></script>
<!-- Iconify -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/iconify-icon.min.js"></script>
<script>
window.HSStaticMethods.autoInit();
</script>
</body>
</html>