-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
370 lines (341 loc) · 32.1 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
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
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
<!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>My Portfolio</title>
<link href="dist/output.css" rel="stylesheet">
</head>
<body>
<!-- Header Start -->
<header class="bg-transparent absolute top-0 left-0 w-full flex items-center z-10">
<div class="container">
<div class="flex items-center justify-between relative">
<div class="px-4">
<a href="#home" class="font-bold text-lg text-primary block py-6">reskiabbas</a>
</div>
<div class="flex items-center px-4">
<button id="hamburger" name="hamburger" type="button" class="block absolute right-4 lg:hidden">
<span class="hamburger-line transition duration-300 ease-in-out origin-top-left"></span>
<span class="hamburger-line transition duration-300 ease-in-out"></span>
<span class="hamburger-line transition duration-300 ease-in-out origin-bottom-left "></span>
</button>
<nav id="nav-menu" class="hidden absolute py-5 bg-white shadow-lg rounded-lg max-w-[250px] w-full right-4 top-full lg:block lg:static lg:bg-transparent lg:max-w-full lg:shadow-none lg:rounded-none">
<ul class="block lg:flex">
<li class="group">
<a href="#home" class="text-base text-dark py-2 mx-8 flex group-hover:text-primary">Home</a>
</li>
<li class="group">
<a href="#about" class="text-base text-dark py-2 mx-8 flex group-hover:text-primary">About</a>
</li>
<li class="group">
<a href="#portfolio" class="text-base text-dark py-2 mx-8 flex group-hover:text-primary ">Portfolio</a>
</li>
<li class="group">
<a href="#clients" class="text-base text-dark py-2 mx-8 flex group-hover:text-primary">Clients</a>
</li>
<li class="group">
<a href="#blog" class="text-base text-dark py-2 mx-8 flex group-hover:text-primary">Blog</a>
</li>
<li class="group">
<a href="#contact" class="text-base text-dark py-2 mx-8 flex group-hover:text-primary">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- Header End -->
<!-- Hero section Start -->
<section id="home" class="pt-36" >
<div class="container">
<div class="flex flex-wrap" >
<div class="w-full self-center px-4 lg:w-1/2">
<h1 class="text-base font-semibold text-primary md:text-xl " >Halo Semua, Saya<span class="block font-bold text-dark text-4xl mt-1 lg:text-5xl" >Reski Abbas, S.Kom</span></h1>
<h2 class="font-medium text-secondary text-lg mt-1 mb-5 lg:text-2xl" >Fullstack Developer</h2>
<p class="font-medium text-secondary mb-10 leading-relaxed " >Halaman ini adalah website yang berisi tentang data pribadi saya. <span class="text-dark font-bold" >Terima Kasih!</span></p>
<a href="https://api.whatsapp.com/send?phone=6282195157186&text=%D8%A7%D9%84%D8%B3%D9%8E%D9%91%D9%84%D8%A7%D9%8E%D9%85%D9%8F%20%D8%B9%D9%8E%D9%84%D9%8E%D9%8A%D9%92%D9%83%D9%8F%D9%85%D9%92%20%D9%88%D9%8E%D8%B1%D9%8E%D8%AD%D9%92%D9%85%D9%8E%D8%A9%D9%8F%20%D8%A7%D9%84%D9%84%D9%87%D9%90%20%D9%88%D9%8E%D8%A8%D9%8E%D8%B1%D9%8E%D9%83%D9%8E%D8%A7%D8%AA%D9%8F%D9%87%D9%8F"
class="text-base font-semibold text-white bg-primary py-3 px-8 rounded-full hover:shadow-lg hover:opacity-80 duration-300 ease-in-out" >Hubungi Saya</a>
</div>
<div class="w-full self-end px-4 lg:w-1/2">
<div class="relative mt-10 lg:mt-0 lg:right-0">
<img src="dist/img/reskiabs2.png" alt="Reski Abbas, S.Kom" class="max-w-full mx-auto">
<span class="absolute -bottom-20 left-1/2 -z-10 -translate-x-1/2 md:scale-125 lg:-bottom-12">
<svg viewBox="0 0 200 200" height="500px" width="500px" xmlns="http://www.w3.org/2000/svg">
<path fill="#06b6d4" d="M52,-54.3C65.5,-38.4,73.4,-19.2,72.4,-0.9C71.5,17.3,61.8,34.7,48.2,45.8C34.7,56.9,17.3,61.8,-1.1,62.9C-19.5,64,-39.1,61.3,-53.1,50.2C-67.1,39.1,-75.6,19.5,-74,1.6C-72.4,-16.3,-60.7,-32.7,-46.7,-48.5C-32.7,-64.3,-16.3,-79.6,1.4,-81.1C19.2,-82.5,38.4,-70.1,52,-54.3Z" transform="translate(100 100)" />
</svg>
</span>
</div>
</div>
</div>
</div>
</section>
<!-- Hero section End -->
<!-- About section start -->
<section id="about" class="pt-36 pb-32" >
<div class="container">
<div class="flex flex-wrap">
<div class="w-full px-4 mb-10 lg:w-1/2 ">
<h4 class="font-bold uppercase text-primary text-lg mb-3" >About</h4>
<h2 class="font-bold text-dark text-3xl mb-5 max-w-md lg:text-4xl lg:text-4xl">Yuk, berkenalan dengan saya!</h2>
<p class="font-medium text-base text-secondary max-w-xl lg:text-lg">Lulusan Teknik Informatika dengan predikat Cumlaude.
Seorang yang cekatan,
sigap, dapat diandalkan,
mampu bekerja dalam tim serta dapat berkomunikasi dengan baik.</p>
</div>
<div class="w-full px-4 lg:w-1/2">
<h3 class="font-semibold text-dark text-2xl mb-4 lg:text-3xl lg:pt-10">Social Media</h3>
<p class="font-medium text-base text-secondary max-w-xl mb-6 lg:text-lg">Saya aktif berkomunikasi lewat beberapa sosial media, mari berteman dan saling bertukar cerita serta pengalaman.</p>
<div class="flex items-center">
<!-- instagram -->
<a class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-primary hover:bg-primary hover:text-white" href="https://instagram.com/reskiabs_" target="_blank">
<svg class="fill-current" role="img" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>
</a>
<!-- facebook -->
<a class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-primary hover:bg-primary hover:text-white" href="https://web.facebook.com/reski.khaliank/" target="_blank">
<svg class="fill-current" role="img" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</a>
<!-- WhatsApp -->
<a class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-primary hover:bg-primary hover:text-white" href="https://web.whatsapp.com/" target="_blank">
<svg class="fill-current" role="img" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>WhatsApp</title><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
</a>
<!-- Telegram -->
<a class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-primary hover:bg-primary hover:text-white" href="https://telegram.com/reskiabs" target="_blank">
<svg class="fill-current" role="img" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Telegram</title><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- About section end -->
<!-- Portfolio section start -->
<section id="portfolio" class="pt-36 pb-16 bg-slate-100">
<div class="container">
<div class="w-full px-4">
<div class="max-w-xl mx-auto text-center mb-16">
<h4 class="font-semibold text-xl lg:text-2xl text-primary mb-2">Portfolio</h4>
<h2 class="font-bold text-dark text-3xl mb-4 sm:text-4xl lg:text-5xl">Project terbaru</h2>
<p class="font-medium text-md text-secondary md:text-lg">Berikut adalah beberapa Project yang saya buat baru baru ini dengan menggunakan teknologi yang saya kuasai yaitu bahasa Javascript baik disisi Frontend maupun Backend dengan menggunakan berbagai framework.</p>
</div>
</div>
<div class="w-full px-4 flex flex-wrap justify-center xl:w-10/12 xl:mx-auto">
<!-- xl:w-10/12 xl:mx-auto -->
<div class="mb-14 p-4 md:w-1/2">
<div class="rounded-md shadow-md overflow-hidden">
<img src="dist/img/portfolio/1.png" class="w-full" alt="CRUD Voucher Game">
</div>
<h3 class="font-semibold text-xl text-dark mt-5 mb-3">CRUD Voucher Game</h3>
<p class="font-medium text-base text-secondary">Membuat website CRUD data Voucher game menggunakan NodeJs, Express, dan mongoDB sebagai database yang lengkap dengan sistem Authorization</p>
</div>
<div class="mb-14 p-4 md:w-1/2">
<div class="rounded-md shadow-md overflow-hidden">
<img src="dist/img/portfolio/2.png" class="w-full" alt="E-Commerce Top Up Voucher Game">
</div>
<h3 class="font-semibold text-xl text-dark mt-5 mb-3">E-Commerce Top Up Voucher Game</h3>
<p class="font-medium text-base text-secondary">Membuat website pembelian voucher game dengan menggunakan NextJs typescript disisi frontend dan NodeJs Express disisi backend, website ini dilengkapi dengan sistem security Time Based One Time Password (TOTP).</p>
</div>
<div class="mb-14 p-4 md:w-1/2">
<div class="rounded-md shadow-md overflow-hidden">
<img src="dist/img/portfolio/3.png" class="w-full" alt="Dashboard Data Pegawai">
</div>
<h3 class="font-semibold text-xl text-dark mt-5 mb-3">Dashboard Data Pegawai</h3>
<p class="font-medium text-base text-secondary">Membuat website atau dashboard data pegawai pensiun dengan menggunakan ReactJs disisi frontend dan NodeJs Express disisi backend, serta MySql sebagai database. website ini dilengkapi dengan fitur pagination dan search yang memudahkan untuk mencari data yang banyak.</p>
</div>
</div>
</div>
</section>
<!-- Portfolio section end -->
<!-- Client Section Start -->
<section id="clients" class="pt-36 pb-32 bg-slate-700" >
<div class="container">
<div class="w-full px-4">
<div class="mx-auto text-center mb-16">
<h4 class="font-semibold text-xl lg:text-2xl text-primary mb-2">Clients</h4>
<h2 class="font-bold text-white text-3xl mb-4 sm:text-4xl lg:text-5xl">Yang pernah bekerja sama</h2>
<p class="font-medium text-md text-secondary md:text-lg">Saya pernah bekerja sama dengan perusahaan yang ada dibawah ini dengan mengerjakan project website maupun aplikasi.</p>
</div>
</div>
<div class="w-full px-4">
<div class="flex flex-wrap items-center justify-center">
<a href="#" class="max-w-[120px] mx-4 py-4 grayscale opacity-60 transition duration-500 hover:grayscale-0 hover:opacity-100 lg:mx-6 xl:mx-8">
<img src="dist/img/icons/Google.svg" alt="Google">
</a>
<a href="#" class="max-w-[120px] mx-4 py-4 grayscale opacity-60 transition duration-500 hover:grayscale-0 hover:opacity-100 lg:mx-6 xl:mx-8">
<img src="dist/img/icons/Gojek.svg" alt="KPU">
</a>
<a href="#" class="max-w-[120px] mx-4 py-4 grayscale opacity-60 transition duration-500 hover:grayscale-0 hover:opacity-100 lg:mx-6 xl:mx-8">
<img src="dist/img/icons/Facebook.svg" alt="Gojek">
</a>
<a href="#" class="max-w-[120px] mx-4 py-4 grayscale opacity-60 transition duration-500 hover:grayscale-0 hover:opacity-100 lg:mx-6 xl:mx-8">
<img src="dist/img/icons/Tokopedia.svg" alt="Shopee">
</a>
</div>
</div>
</div>
</section>
<!-- Client Section End -->
<!-- Blog Section Start -->
<section id="blog" class="pt-36 pb-32 bg-slate-100">
<div class="container">
<div class="w-full px-4">
<div class="max-w-xl mx-auto text-center mb-16">
<h4 class="font-semibold text-xl lg:text-2xl text-primary mb-2">Blog</h4>
<h2 class="font-bold text-dark text-3xl mb-4 sm:text-4xl lg:text-5xl">Tulisan Terkini</h2>
<p class="font-medium text-md text-secondary md:text-lg">Pengalaman saya dalam belajar, serta kegiatan sehari-hari yang bermanfaat saya tuangkan dalam sebuah tulisan.</p>
</div>
<div class="flex flex-wrap justify-center">
<div class="w-full px-4 lg:w-1/2 xl:w-1/3">
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-10">
<img src="https://source.unsplash.com/360x200?programming" alt="programming" class="w-full">
<div class="py-8 px-6">
<h3>
<a href="https://www.unpas.ac.id/10-tips-belajar-programming-bagi-pemula-ala-sandhika-galih/" class="block mb-3 font-semibold text-xl text-dark hover:text-primary truncate" >Tips Belajar Programming</a>
</h3>
<!-- <p>Sandhika Galih</p> -->
<p class="font-medium text-secondary text-base mb-6">Di masa pandemi, teknologi memiliki peran vital dalam memenuhi kebutuhan masyarakat, hingga tak sedikit dari mereka yang tertarik untuk belajar IT atau pemrograman.</p>
<a href="https://www.unpas.ac.id/10-tips-belajar-programming-bagi-pemula-ala-sandhika-galih/" class="font-medium text-sm text-white bg-primary py-2 px-4 rounded-lg hover:opacity-80">Baca Selengkapnya</a>
</div>
</div>
</div>
<div class="w-full px-4 lg:w-1/2 xl:w-1/3">
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-10">
<img src="https://source.unsplash.com/360x200?sport" alt="programming" class="w-full">
<div class="py-8 px-6">
<h3>
<a href="https://www.djkn.kemenkeu.go.id/kanwil-rsk/baca-artikel/15192/5-Tips-Menjaga-Kesehatan-Tubuh.html" class="block mb-3 font-semibold text-xl text-dark hover:text-primary truncate">Menjaga badan agar tetap sehat</a>
</h3>
<!-- <p>Sandhika Galih</p> -->
<p class="font-medium text-secondary text-base mb-6">Menjalankan pola hidup sehat adalah dasar dari menjaga tubuh tetap fit. Apalagi sampai saat ini dunia masih berjuang melawan virus corona.</p>
<a href="https://www.djkn.kemenkeu.go.id/kanwil-rsk/baca-artikel/15192/5-Tips-Menjaga-Kesehatan-Tubuh.html" class="font-medium text-sm text-white bg-primary py-2 px-4 rounded-lg hover:opacity-80">Baca Selengkapnya</a>
</div>
</div>
</div>
<div class="w-full px-4 lg:w-1/2 xl:w-1/3">
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-10">
<img src="https://source.unsplash.com/360x200?mindset" alt="programming" class="w-full">
<div class="py-8 px-6">
<h3>
<a href="https://glints.com/id/lowongan/cara-mengembangkan-growth-mindset/#.Y0TvvuxBy3I" class="block mb-3 font-semibold text-xl text-dark hover:text-primary truncate" >Growth Mindset</a>
</h3>
<!-- <p>Sandhika Galih</p> -->
<p class="font-medium text-secondary text-base mb-6">Sesuai dengan namanya, seseorang yang memiliki growth mindset selalu ingin mempelajari hal baru demi meningkatkan kemampuan yang dimiliki.</p>
<a href="https://glints.com/id/lowongan/cara-mengembangkan-growth-mindset/#.Y0TvvuxBy3I" class="font-medium text-sm text-white bg-primary py-2 px-4 rounded-lg hover:opacity-80">Baca Selengkapnya</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Blog Section End -->
<!-- Contact Section Start -->
<section id="contact" class="pt-36 pb-32">
<div class="container">
<div class="w-full px-4">
<div class="max-w-xl mx-auto text-center mb-16">
<h4 class="font-semibold text-xl lg:text-2xl text-primary mb-2">Contact</h4>
<h2 class="font-bold text-dark text-3xl mb-4 sm:text-4xl lg:text-5xl">Hubungi Kami</h2>
<p class="font-medium text-md text-secondary md:text-lg">Anda dapat mengirimkan pesan kepada saya melalui form dibawah ini.</p>
</div>
</div>
<form>
<div class="w-full lg:w-2/3 lg:mx-auto">
<div class="w-full px-4 mb-8">
<label for="name" class="text-base font-bold text-primary">Nama</label>
<input class="w-full bg-slate-200 text-dark p-3 rounded-md focus:outline-none focus:ring-primary focus:ring-1 focus:border-primary" type="text" id="name" placeholder="Text input">
</div>
<div class="w-full px-4 mb-8">
<label for="email" class="text-base font-bold text-primary">Email</label>
<input class="w-full bg-slate-200 text-dark p-3 rounded-md focus:outline-none focus:ring-primary focus:ring-1 focus:border-primary" type="text" id="email" placeholder="Text input">
</div>
<div class="w-full px-4 mb-8">
<label for="message" class="text-base font-bold text-primary">Pesan</label>
<textarea class="w-full bg-slate-200 text-dark p-3 rounded-md focus:outline-none focus:ring-primary focus:ring-1 focus:border-primary h-32" type="Text" id="message" placeholder="Text input"></textarea>
</div>
<div class="w-full px-4">
<button class="text-base font-semibold text-white bg-primary py-3 px-8 rounded-full w-full hover:opacity-80 hover:shadow-lg transition duration-300">Kirim</button>
</div>
</div>
</form>
</div>
</section>
<!-- Contact Section End -->
<!-- Footer Start -->
<footer class="bg-dark pt-24 pb-12">
<div class="container">
<div class="flex flex-wrap">
<div class="w-full px-4 mb-12 text-slate-300 font-medium md:w-1/3">
<h2 class="font-bold text-4xl text-white mb-5">Reski Abbas</h2>
<h3 class="font-bold text-2xl mb-5">Hubungi Kami</h3>
<p>[email protected]</p>
<p>Perum. Griya Puspita Sari Blok B6/No.8</p>
<p>Jl. Toddopuli X, Manggala, Makassar</p>
</div>
<div class="w-full px-4 mb-12 md:w-1/3">
<h3 class="font-semibold text-xl text-white mb-5">Kategori Tulisan</h3>
<ul class="text-slate-300">
<li>
<a href="#" class="inline-block text-base hover:text-primary mb-3">Programming</a>
</li>
<li>
<a href="#" class="inline-block text-base hover:text-primary mb-3">Kesehatan</a>
</li>
<li>
<a href="#" class="inline-block text-base hover:text-primary mb-3">Mindset</a>
</li>
</ul>
</div>
<div class="w-full px-4 mb-12 md:w-1/3">
<h3 class="font-semibold text-xl text-white mb-5">Tautan</h3>
<ul class="text-slate-300">
<li>
<a href="#home" class="inline-block text-base hover:text-primary mb-3">Home</a>
</li>
<li>
<a href="#about" class="inline-block text-base hover:text-primary mb-3">About</a>
</li>
<li>
<a href="#portfolio" class="inline-block text-base hover:text-primary mb-3">Portfolio</a>
</li>
<li>
<a href="#clients" class="inline-block text-base hover:text-primary mb-3">Clients</a>
</li>
<li>
<a href="#blog" class="inline-block text-base hover:text-primary mb-3">Blog</a>
</li>
<li>
<a href="#contact" class="inline-block text-base hover:text-primary mb-3">Contact</a>
</li>
</ul>
</div>
</div>
<div class="w-full pt-10 border-t border-slate-700">
<div class="flex items-center justify-center mb-5">
<!-- instagram -->
<a class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-primary hover:bg-primary hover:text-white" href="https://instagram.com/reskiabs_" target="_blank">
<svg class="fill-current text-slate-300" role="img" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>
</a>
<!-- facebook -->
<a class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-primary hover:bg-primary hover:text-white" href="https://web.facebook.com/reski.khaliank/" target="_blank">
<svg class="fill-current text-slate-300" role="img" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</a>
<!-- WhatsApp -->
<a class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-primary hover:bg-primary hover:text-white" href="https://web.whatsapp.com/" target="_blank">
<svg class="fill-current text-slate-300" role="img" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>WhatsApp</title><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
</a>
<!-- Telegram -->
<a class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-primary hover:bg-primary hover:text-white" href="https://telegram.com/reskiabs" target="_blank">
<svg class="fill-current text-slate-300" role="img" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Telegram</title><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>
</a>
</div>
<p class="font-medium text-xs text-slate-500 text-center">Dibuat dengan <span class="text-pink-500">♥</span> <a href="https://instagram.com/reskiabs_" target="_blank" class="text-primary font-semibold">Reski Abbas</a>, menggunakan <a href="https://tailwindcss.com/" target="_blank" class="text-sky-500 font-semibold">Tailwind CSS</a></p>
</div>
</div>
</footer>
<!-- Footer End -->
<script src="dist/js/script.js"></script>
</body>
</html>