Skip to content

Commit 994a645

Browse files
alanzagialanzagi
committed
done
1 parent 6426fed commit 994a645

File tree

2 files changed

+72
-41
lines changed

2 files changed

+72
-41
lines changed

‎index.html

+63-18
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@
99
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
1010
<link rel="stylesheet" href="css/style.css" />
1111
</head>
12-
<body>
12+
<body class="bg-slate-100">
1313
<!-- Start Nav -->
1414
<nav class="fixed top-0 w-full bg-gray-900 bg-gray-900 border-gray-200 z-50">
1515
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
16-
<a href="https://instagram.com/alanzagi" class="flex items-center space-x-3 rtl:space-x-reverse">
17-
<span class="self-center text-2xl font-semibold whitespace-nowrap text-white">ALANxCODE</span>
16+
<a href="https://instagram.com/alanzagi" class="flex items-center space-x-3 rtl:space-x-reverse" target="_blank">
17+
<span class="self-center text-2xl font-semibold whitespace-nowrap text-white"><span class="text-purple-700">A</span>LAN<span class="text-purple-700">x</span><span class="text-purple-700">C</span>ODE</span>
1818
</a>
1919
<div class="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
2020
<button
@@ -48,16 +48,16 @@
4848
<div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-cta">
4949
<ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-200 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 bg-gray-900 md:bg-transparent">
5050
<li>
51-
<a href="#" class="block py-2 px-3 md:p-0 text-white rounded hover:bg-purple-700 md:hover:bg-transparent md:hover:text-purple-700" aria-current="page">Home</a>
51+
<a href="#home" class="block py-2 px-3 md:p-0 text-white rounded hover:bg-purple-700 md:hover:bg-transparent md:hover:text-purple-700" aria-current="page">Home</a>
5252
</li>
5353
<li>
54-
<a href="#" class="block py-2 px-3 md:p-0 text-white rounded hover:bg-purple-700 md:hover:bg-transparent md:hover:text-purple-700">About</a>
54+
<a href="#about" class="block py-2 px-3 md:p-0 text-white rounded hover:bg-purple-700 md:hover:bg-transparent md:hover:text-purple-700">About</a>
5555
</li>
5656
<li>
57-
<a href="#" class="block py-2 px-3 md:p-0 text-white rounded hover:bg-purple-700 md:hover:bg-transparent md:hover:text-purple-700">Services</a>
57+
<a href="#portfolio" class="block py-2 px-3 md:p-0 text-white rounded hover:bg-purple-700 md:hover:bg-transparent md:hover:text-purple-700">Portfolio</a>
5858
</li>
5959
<li>
60-
<a href="#" class="block py-2 px-3 md:p-0 text-white rounded hover:bg-purple-700 md:hover:bg-transparent md:hover:text-purple-700">Contact</a>
60+
<a href="#contact" class="block py-2 px-3 md:p-0 text-white rounded hover:bg-purple-700 md:hover:bg-transparent md:hover:text-purple-700">Contact</a>
6161
</li>
6262
</ul>
6363
</div>
@@ -85,11 +85,17 @@ <h3 class="text-xl font-semibold text-white">Masukkan Pesan Anda</h3>
8585
<form class="space-y-4" action="#">
8686
<div>
8787
<label for="message-input" class="block mb-2 text-sm font-medium text-white">Pesan:</label>
88-
<input type="text" name="text" id="message-input" class="border text-sm rounded-lg focus:ring-purple-500 focus:border-purple-500 block w-full p-2.5 bg-gray-600 border-purple-500 placeholder-purple-400 text-white" required />
88+
<input
89+
type="text"
90+
name="message-input"
91+
id="message-input"
92+
class="border text-sm rounded-lg focus:ring-purple-500 focus:border-purple-500 block w-full p-2.5 bg-gray-600 border-purple-500 placeholder-purple-400 text-white"
93+
required
94+
/>
8995
</div>
9096
<button
9197
id="message-submit-button"
92-
type="submit"
98+
type="button"
9399
class="w-full text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-purple-600 hover:bg-purple-700 focus:ring-purple-800 flex items-center justify-center gap-2"
94100
>
95101
Kirim
@@ -105,7 +111,7 @@ <h3 class="text-xl font-semibold text-white">Masukkan Pesan Anda</h3>
105111
<!-- End Modal -->
106112

107113
<!-- Start Main -->
108-
<main class="relative h-screen background">
114+
<main class="relative h-screen background" id="home">
109115
<span></span>
110116
<span></span>
111117
<span></span>
@@ -175,7 +181,7 @@ <h1 class="text-4xl font-bold tracking-tight text-white sm:text-6xl" data-aos="f
175181
<!-- End Main -->
176182

177183
<!-- Start About Me -->
178-
<div class="font-sans antialiased text-gray-900 leading-normal tracking-wider bg-cover">
184+
<div class="font-sans antialiased text-gray-900 leading-normal tracking-wider bg-cover lg:bg-slate-100" id="about">
179185
<div class="max-w-4xl flex items-center h-auto lg:h-screen flex-wrap mx-auto my-32 lg:my-0">
180186
<!--Main Col-->
181187
<div id="profile" class="w-full lg:w-3/5 rounded-lg lg:rounded-l-lg lg:rounded-r-none shadow-2xl bg-white opacity-100 mx-6 lg:mx-0">
@@ -210,8 +216,8 @@ <h1 class="text-3xl font-bold pt-8 lg:pt-0">Alan "Zagi"</h1>
210216
Singkawang, Indonesia
211217
</p>
212218
<p class="pt-8 text-sm">
213-
Saya bersekolah di SMK Negeri 3 Singkawang dengan menekuni jurusan <a href="instagram.com/famousclass_xi_pplg" target="_blank" class="font-bold">Pengembangan Perangkat Lunak & Gim (PPLG)</a> dengan pengalaman 2+ tahun dalam
214-
membuat dan mengembangkan <i>website</i>. Hingga sekarang saya telah membuat puluhan <i>websites</i> dengan berbagai tema dan fungsi yang berbeda-beda.
219+
Saya bersekolah di SMK Negeri 3 Singkawang studi jurusan <a href="instagram.com/famousclass_xi_pplg" target="_blank" class="font-bold">Pengembangan Perangkat Lunak & Gim (PPLG)</a> dengan pengalaman 2+ tahun dalam membuat dan
220+
mengembangkan <i>website</i>. Hingga sekarang saya telah membuat puluhan <i>websites</i> dengan berbagai tema dan fungsi yang berbeda-beda.
215221
</p>
216222

217223
<div class="pt-12 pb-8">
@@ -268,7 +274,7 @@ <h1 class="text-3xl font-bold pt-8 lg:pt-0">Alan "Zagi"</h1>
268274
<!-- End About Me -->
269275

270276
<!-- Start Portfolio -->
271-
<div class="bg-gray-900 py-24 sm:py-32">
277+
<div class="bg-gray-900 py-24 sm:py-32" id="portfolio">
272278
<div class="mx-auto max-w-7xl px-6 lg:px-8">
273279
<div class="mx-auto max-w-2xl sm:text-center">
274280
<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Portfolio</h2>
@@ -312,7 +318,7 @@ <h4 class="flex-none text-sm font-semibold leading-6 text-purple-600"></h4>
312318
</div>
313319
<div class="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
314320
<div class="rounded-2xl bg-gray-50 text-center ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center h-full">
315-
<img src="img/alan.jpg" alt="" class="h-full w-full object-cover rounded-2xl" />
321+
<img src="" alt="Web1" class="h-full w-full object-cover rounded-2xl" />
316322
</div>
317323
</div>
318324
</div>
@@ -356,7 +362,7 @@ <h4 class="flex-none text-sm font-semibold leading-6 text-purple-600"></h4>
356362
</div>
357363
<div class="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
358364
<div class="rounded-2xl bg-gray-50 text-center ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center h-full">
359-
<img src="img/alan.jpg" alt="" class="h-full w-full object-cover rounded-2xl" />
365+
<img src="" alt="Web2" class="h-full w-full object-cover rounded-2xl" />
360366
</div>
361367
</div>
362368
</div>
@@ -400,16 +406,55 @@ <h4 class="flex-none text-sm font-semibold leading-6 text-purple-600"></h4>
400406
</div>
401407
<div class="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
402408
<div class="rounded-2xl bg-gray-50 text-center ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center h-full">
403-
<img src="img/alan.jpg" alt="" class="h-full w-full object-cover rounded-2xl" />
409+
<img src="" alt="Web3" class="h-full w-full object-cover rounded-2xl" />
404410
</div>
405411
</div>
406412
</div>
407413
<!-- End Card 3 -->
408414
</div>
409415
</div>
410-
411416
<!-- End Portfolio -->
412417

418+
<!-- Start Contact -->
419+
<section class="bg-slate-100 text-gray-900" id="contact">
420+
<div class="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
421+
<h2 class="mb-4 text-4xl tracking-tight font-extrabold text-center">Contact Me</h2>
422+
<p class="mb-8 lg:mb-16 font-light text-center text-gray-900 sm:text-xl">Butuh jasa/konsultasi seputar pembuatan <i>website</i>? kamu dapat mengisi form dibawah ini untuk dapat menghubungi saya.</p>
423+
<form action="#" class="space-y-8" id="contact-form">
424+
<div>
425+
<label for="name-input" class="block mb-2 text-sm font-medium">Nama</label>
426+
<input
427+
type="text"
428+
id="name-input"
429+
class="shadow-sm bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-purple-500 focus:border-purple-500 block w-full p-2.5 placeholder-gray-400"
430+
placeholder="Ketikkan nama lengkapmu disini.."
431+
required
432+
/>
433+
</div>
434+
<div>
435+
<label for="message-input2" class="block mb-2 text-sm font-medium">Pesan</label>
436+
<textarea
437+
id="message-input2"
438+
rows="6"
439+
class="block p-2.5 w-full text-sm text-white bg-gray-800 rounded-lg shadow-sm border border-gray-700 focus:ring-purple-500 focus:border-purple-500 placeholder-gray-400"
440+
placeholder="Ketikkan pesanmu disini.."
441+
></textarea>
442+
</div>
443+
<button id="message-submit-button2" type="button" class="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-purple-300">Kirim Pesan</button>
444+
</form>
445+
</div>
446+
</section>
447+
<!-- End Contact -->
448+
449+
<!-- Start Footer -->
450+
<footer class="bg-gray-900 text-white rounded-lg shadow m-4">
451+
<div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
452+
<span class="text-sm text-gray-400 sm:text-center"> © 2024 <a href="https://instagram.com/alanzagi" class="hover:underline text-purple-300"> ALANxCODE </a>. All Rights Reserved. </span>
453+
</div>
454+
</footer>
455+
456+
<!-- End Footer -->
457+
413458
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.4.1/dist/flowbite.min.js"></script>
414459
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js"></script>
415460
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

‎js/script.js

+9-23
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,18 @@
11
// Fungsi untuk mengambil apapun data yang diinputkan di Pesan Whatsapp
22
document.getElementById("message-submit-button").addEventListener("click", function () {
3-
const inputText = document.getElementById("message-input").value;
3+
const inputText = document.getElementById("message-input").value.trim(); // Menghapus spasi tambahan
44
const whatsappUrl = `https://wa.me/6281521550913?text=${encodeURIComponent(inputText)}`;
55
window.open(whatsappUrl, "_blank");
66
});
77

8-
//Init tooltips
9-
tippy(".link", {
10-
placement: "bottom",
11-
});
8+
document.getElementById("message-submit-button2").addEventListener("click", function () {
9+
// Mengambil data dari input dan textarea
10+
const nameInput = document.getElementById("name-input").value.trim();
11+
const messageInput = document.getElementById("message-input2").value.trim();
1212

13-
//Toggle mode
14-
const toggle = document.querySelector(".js-change-theme");
15-
const body = document.querySelector("body");
16-
const profile = document.getElementById("profile");
13+
// Membuat URL WhatsApp
14+
const whatsappUrl = `https://wa.me/6281521550913?text=${encodeURIComponent("Halo, Nama saya " + nameInput + " dan tujuan saya adalah " + messageInput)}`;
1715

18-
toggle.addEventListener("click", () => {
19-
if (body.classList.contains("text-gray-900")) {
20-
toggle.innerHTML = "☀️";
21-
body.classList.remove("text-gray-900");
22-
body.classList.add("text-gray-100");
23-
profile.classList.remove("bg-white");
24-
profile.classList.add("bg-gray-900");
25-
} else {
26-
toggle.innerHTML = "🌙";
27-
body.classList.remove("text-gray-100");
28-
body.classList.add("text-gray-900");
29-
profile.classList.remove("bg-gray-900");
30-
profile.classList.add("bg-white");
31-
}
16+
// Membuka URL di tab baru
17+
window.open(whatsappUrl, "_blank");
3218
});

0 commit comments

Comments
 (0)