mirror of
https://github.com/twinpath/voucher-itpln.git
synced 2026-01-26 21:31:52 +07:00
506 lines
24 KiB
HTML
506 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta property="og:title" content="Kode Voucher ITPLN - Gunakan Sekarang !!!" />
|
|
<meta name="description" content="Dapatkan potongan biaya formulir pendaftaran mahasiswa baru ITPLN sebesar Rp. 50.000 , dengan memasukkan kode voucher “3ND4Y”. Gunakan Voucher!.
|
|
">
|
|
<meta property="og:description"
|
|
content="Dapatkan potongan biaya formulir pendaftaran mahasiswa baru ITPLN sebesar Rp. 50.000 , dengan memasukkan kode voucher “3ND4Y”. Gunakan Voucher!.">
|
|
<title>Kode Voucher ITPLN - Gunakan Sekarang !!!</title>
|
|
<!-- Tailwind -->
|
|
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
|
|
<!-- Alpine -->
|
|
<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
|
|
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine-ie11.min.js" defer></script>
|
|
<!-- AOS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
|
|
<!-- Custom style -->
|
|
<link rel="stylesheet" href="css/skilline.css" />
|
|
<!-- Poppins font -->
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<!-- Favicons -->
|
|
<link rel="apple-touch-icon" sizes="180x180" href="https://dyzulk.me/dist/img/favicon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="https://dyzulk.me/dist/img/favicon.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="https://dyzulk.me/dist/img/favicon.png">
|
|
<!-- Fontawesome -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dyzcdn/fas@main/css/all.css" type="text/css">
|
|
<!-- Clipboard.js -->
|
|
<style>
|
|
.clip-button {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<!-- Include Clipboard.js -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
|
|
</head>
|
|
|
|
<body class="antialiased">
|
|
<!-- navbar -->
|
|
<div x-data="{ open: false }" class="w-full text-gray-700 bg-cream">
|
|
<div class="flex flex-col max-w-screen-xl px-8 mx-auto md:items-center md:justify-between md:flex-row">
|
|
<div class="flex flex-row items-center justify-between py-6">
|
|
<div class="relative md:mt-8">
|
|
<a href="#"
|
|
class="text-lg relative z-50 font-bold tracking-widest text-gray-900 rounded-lg focus:outline-none focus:shadow-outline">VOUCHER
|
|
ITPLN</a>
|
|
<svg class="h-11 z-40 absolute -top-2 -left-3" viewBox="0 0 79 79" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M35.2574 2.24264C37.6005 -0.100501 41.3995 -0.100505 43.7426 2.24264L76.7574 35.2574C79.1005 37.6005 79.1005 41.3995 76.7574 43.7426L43.7426 76.7574C41.3995 79.1005 37.6005 79.1005 35.2574 76.7574L2.24264 43.7426C-0.100501 41.3995 -0.100505 37.6005 2.24264 35.2574L35.2574 2.24264Z"
|
|
fill="#65DAFF" />
|
|
</svg>
|
|
</div>
|
|
<button class="rounded-lg md:hidden focus:outline-none focus:shadow-outline" @click="open = !open">
|
|
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
|
|
<path x-show="!open" fill-rule="evenodd"
|
|
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
|
|
clip-rule="evenodd"></path>
|
|
<path x-show="open" fill-rule="evenodd"
|
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
clip-rule="evenodd"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<nav :class="{ 'transform md:transform-none': !open, 'h-full': open }"
|
|
class="h-0 md:h-auto flex flex-col flex-grow md:items-center pb-4 md:pb-0 md:flex md:justify-end md:flex-row origin-top duration-300 scale-y-0">
|
|
<a class="px-10 py-3 mt-2 text-sm text-center bg-yellow-500 text-white rounded-full md:mt-8 md:ml-4 ud-menu-scroll"
|
|
href="#caraMenggunakan">Gunakan sekarang</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<div class="bg-cream">
|
|
<div class="max-w-screen-xl px-8 mx-auto flex flex-col lg:flex-row items-start">
|
|
<!--Left Col-->
|
|
<div
|
|
class="flex flex-col w-full lg:w-6/12 justify-center lg:pt-24 items-start text-center lg:text-left mb-5 md:mb-0">
|
|
<h1 data-aos="fade-right" data-aos-once="true"
|
|
class="my-4 text-5xl font-bold leading-tight text-darken">
|
|
Daftar di <span class="text-yellow-500">ITPLN</span> Dapat Potongan Biaya
|
|
</h1>
|
|
<p data-aos="fade-down" data-aos-once="true" data-aos-delay="300" class="leading-normal text-2xl mb-8">
|
|
Dapatkan potongan biaya formulir pendaftaran mahasiswa baru ITPLN sebesar Rp. 50.000 , dengan
|
|
memasukkan kode voucher “3ND4Y”.</p>
|
|
<div data-aos="fade-up" data-aos-once="true" data-aos-delay="700"
|
|
class="w-full md:flex items-center justify-center lg:justify-start md:space-x-5">
|
|
<button href="#caraMenggunakan"
|
|
class="ud-menu-scroll lg:mx-0 bg-yellow-500 text-white text-xl font-bold rounded-full py-4 px-9 focus:outline-none transform transition hover:scale-110 duration-300 ease-in-out">
|
|
Gunakan Kode Voucher
|
|
</button>
|
|
<div
|
|
class="flex items-center justify-center space-x-3 mt-5 md:mt-0 focus:outline-none transform transition hover:scale-110 duration-300 ease-in-out">
|
|
<button class="ud-menu-scroll bg-white w-14 h-14 rounded-full flex items-center justify-center">
|
|
<svg class="w-5 h-5 ml-2" viewBox="0 0 24 28" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M22.5751 12.8097C23.2212 13.1983 23.2212 14.135 22.5751 14.5236L1.51538 27.1891C0.848878 27.5899 5.91205e-07 27.1099 6.25202e-07 26.3321L1.73245e-06 1.00123C1.76645e-06 0.223477 0.848877 -0.256572 1.51538 0.14427L22.5751 12.8097Z"
|
|
fill="#23BDEE" />
|
|
</svg>
|
|
</button>
|
|
<span class="cursor-pointer">Cara Klaim Voucher</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Right Col-->
|
|
<div class="w-full lg:w-6/12 lg:-mt-10 relative" id="girl">
|
|
<img data-aos="fade-up" data-aos-once="true" class="w-10/12 mx-auto 2xl:-mb-20" src="img/girl.png" />
|
|
<!-- calendar -->
|
|
<div data-aos="fade-up" data-aos-delay="300" data-aos-once="true"
|
|
class="absolute top-20 -left-6 sm:top-32 sm:left-10 md:top-40 md:left-16 lg:-left-0 lg:top-52 floating-4">
|
|
<img class="bg-white bg-opacity-80 rounded-lg h-12 sm:h-16" src="img/calendar.svg">
|
|
</div>
|
|
<!-- red -->
|
|
<div data-aos="fade-up" data-aos-delay="400" data-aos-once="true"
|
|
class="absolute top-20 right-10 sm:right-24 sm:top-28 md:top-36 md:right-32 lg:top-32 lg:right-16 floating">
|
|
<svg class="h-16 sm:h-24" viewBox="0 0 149 149" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g filter="url(#filter0_d)">
|
|
<rect x="40" y="32" width="69" height="69" rx="14" fill="#F3627C" />
|
|
</g>
|
|
<rect x="51.35" y="44.075" width="47.3" height="44.85" rx="8" fill="white" />
|
|
<path d="M74.5 54.425V78.575" stroke="#F25471" stroke-width="4" stroke-linecap="round" />
|
|
<path d="M65.875 58.7375L65.875 78.575" stroke="#F25471" stroke-width="4"
|
|
stroke-linecap="round" />
|
|
<path d="M83.125 63.9125V78.575" stroke="#F25471" stroke-width="4" stroke-linecap="round" />
|
|
<defs>
|
|
<filter id="filter0_d" x="0" y="0" width="149" height="149" filterUnits="userSpaceOnUse"
|
|
color-interpolation-filters="sRGB">
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
|
<feColorMatrix in="SourceAlpha" type="matrix"
|
|
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
|
|
<feOffset dy="8" />
|
|
<feGaussianBlur stdDeviation="20" />
|
|
<feColorMatrix type="matrix"
|
|
values="0 0 0 0 0.825 0 0 0 0 0.300438 0 0 0 0 0.396718 0 0 0 0.26 0" />
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
|
|
</filter>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
<!-- ux class -->
|
|
<div data-aos="fade-up" data-aos-delay="500" data-aos-once="true"
|
|
class="absolute bottom-14 -left-4 sm:left-2 sm:bottom-20 lg:bottom-24 lg:-left-4 floating">
|
|
<img class="bg-white bg-opacity-80 rounded-lg h-20 sm:h-28" src="img/ux-class.svg" alt="">
|
|
</div>
|
|
<!-- congrats -->
|
|
<div data-aos="fade-up" data-aos-delay="600" data-aos-once="true"
|
|
class="absolute bottom-20 md:bottom-48 lg:bottom-52 -right-6 lg:right-8 floating-4">
|
|
<img class="bg-white bg-opacity-80 rounded-lg h-12 sm:h-16" src="img/congrat.svg" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-white -mt-14 sm:-mt-24 lg:-mt-36 z-40 relative">
|
|
<svg class="xl:h-40 xl:w-full" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"
|
|
preserveAspectRatio="none">
|
|
<path d="M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z"
|
|
fill="currentColor"></path>
|
|
</svg>
|
|
<div class="bg-white w-full h-20 -mt-px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- step by step layout -->
|
|
<div class="container px-4 lg:px-8 mx-auto max-w-screen-xl text-gray-700 overflow-x-hidden">
|
|
|
|
|
|
|
|
</div>
|
|
<!-- .step by step layout -->
|
|
|
|
<!-- container -->
|
|
<div class="container px-4 lg:px-8 mx-auto max-w-screen-xl text-gray-700 overflow-x-hidden">
|
|
|
|
<!-- trusted by -->
|
|
<div class="max-w-4xl mx-auto">
|
|
<hr class="mt-24 border-t-2 border-gray-400 my-4">
|
|
<div class="grid grid-cols-3 lg:grid-cols-6 gap-4 justify-items-center">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- All-In-One Cloud Software. -->
|
|
<div data-aos="flip-up" class="max-w-xl mx-auto text-center mt-24">
|
|
</div>
|
|
<!-- card -->
|
|
<div class="grid md:grid-cols-3 gap-14 md:gap-5 mt-20">
|
|
<div data-aos="fade-up" class="bg-white shadow-xl p-6 text-center rounded-xl">
|
|
<div style="background: #5B72EE;"
|
|
class="rounded-full w-16 h-16 flex items-center justify-center text-white mx-auto shadow-lg transform -translate-y-12">
|
|
<!-- -->
|
|
<i class="fas fa-calendar-alt fa-2x"></i>
|
|
</div>
|
|
<h1 class="font-medium text-xl mb-3 lg:px-14 text-darken">20 Mar 23 - 16 Apr 23</h1>
|
|
<p class="px-4 text-gray-500">Pendafaran PMB Mandiri ITPLN 2023</p>
|
|
</div>
|
|
<div data-aos="fade-up" data-aos-delay="150" class="bg-white shadow-xl p-6 text-center rounded-xl">
|
|
<div style="background: #F48C06;"
|
|
class="rounded-full w-16 h-16 flex items-center justify-center text-white mx-auto shadow-lg transform -translate-y-12">
|
|
<!-- -->
|
|
<i class="fas fa-clock fa-2x"></i>
|
|
</div>
|
|
<h1 class="font-medium text-xl mb-3 lg:px-14 text-darken">14 Agustus 2023</h1>
|
|
<p class="px-4 text-gray-500">Deadline Pendaftaran</p>
|
|
</div>
|
|
<div data-aos="fade-up" data-aos-delay="150" class="bg-white shadow-xl p-6 text-center rounded-xl">
|
|
<div style="background: #29B9E7;"
|
|
class="rounded-full w-16 h-16 flex items-center justify-center text-white mx-auto shadow-lg transform -translate-y-12">
|
|
<!-- -->
|
|
<i class="fas fa-ticket-alt fa-2x"></i>
|
|
</div>
|
|
<h1 class="font-medium text-xl mb-3 lg:px-14 text-darken">Kode Voucher</h1>
|
|
<p class="px-4 text-gray-500">3ND4Y</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- lorem -->
|
|
<div class="mt-28">
|
|
<div data-aos="flip-down" class="text-center max-w-screen-md mx-auto">
|
|
<h1 class="text-3xl font-bold mb-4">Selamat Datang Calon <span
|
|
class="text-yellow-500">#KsatriaPetir</span></h1>
|
|
<p class="text-gray-500">Semua mahasiswa Institut Teknologi PLN akan dipanggil sebagai Ksatriapetir.
|
|
Institut Teknologi PLN merupakan perguruan tinggi yang fokus dibidang energi, teknologi yang
|
|
berwawasan lingkungan untuk pembangunan yang berkelanjutan.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="mt-10 border-t-2 border-gray-400 my-4"> <!-- tebal -->
|
|
<div class="mt-24">
|
|
<div data-aos="flip-down" class="text-center max-w-screen-md mx-auto">
|
|
<h1 id="caraMenggunakan" data-aos="flip-down" class="text-3xl font-bold mb-4">Langkah - Langkah</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- step by step 1 -->
|
|
<hr class="mt-10 border-gray-300 my-4"> <!-- tipis -->
|
|
<div class="mt-10 flex flex-col-reverse md:flex-row items-start md:space-x-10">
|
|
<div data-aos="fade-left" class="flex gap-4 justify-center">
|
|
<div class="w-1/3">
|
|
<h6 class="text-gray-600 text-sm font-medium mb-1">01.</h6>
|
|
<h4 class="text-xl font-semibold mb-2">Buat Akun Pendaftaran</h4>
|
|
<p class="text-gray-500">Buat akun pendaftaran di <a href="https://infopmb.itpln.ac.id/daftar/"
|
|
target="_blank" rel="noopener" class="text-yellow-500">infopmb.itpln.ac.id</a></p>
|
|
</div>
|
|
<div class="w-1/3">
|
|
<h6 class="text-gray-600 text-sm font-medium mb-1">02.</h6>
|
|
<h4 class="text-xl font-semibold mb-2">Lengkapi Biodata</h4>
|
|
<p class="text-gray-500">Melengkapi biodata dimulai dari Data Pribadi, Alamat dan Pas Foto.
|
|
Melengkapui data Asal Sekolah
|
|
dan
|
|
juga melengkapi data Orang Tua</p>
|
|
</div>
|
|
<div class="w-1/3">
|
|
<h6 class="text-gray-600 text-sm font-medium mb-1">03.</h6>
|
|
<h4 class="text-xl font-semibold mb-2">Pilih Gelombang & Jurusan</h4>
|
|
<p class="text-gray-500">Memilih gelombang pendaftaran mahasiswa baru ITPLN yang tersedia atau yang
|
|
diinginkan selanjutnya
|
|
kamu pilih jurusan yang kamu inginkan</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- step by step 2 -->
|
|
<hr class="mt-10 border-gray-300 my-4"> <!-- tipis -->
|
|
<div class="mt-10 flex flex-col-reverse md:flex-row items-start md:space-x-10">
|
|
<div data-aos="fade-left" class="flex gap-4 justify-center">
|
|
<div class="w-1/3">
|
|
<h6 class="text-gray-600 text-sm font-medium mb-1">04.</h6>
|
|
<h4 class="text-xl font-semibold mb-2">Pilih Pembayaran</h4>
|
|
<p class="text-gray-500">Memilih metode pembayaran Tunai atau Cicilan</p>
|
|
</div>
|
|
<div class="w-1/3">
|
|
<h6 class="text-gray-600 text-sm font-medium mb-1">05.</h6>
|
|
<h4 class="text-xl font-semibold mb-2">Masukan Kode Voucher</h4>
|
|
<p class="text-gray-500">Masukan kode 3ND4Y sebelum melakukan Pembayaran Formulir</p>
|
|
</div>
|
|
<div class="w-1/3">
|
|
<h6 class="text-gray-600 text-sm font-medium mb-1">06.</h6>
|
|
<h4 class="text-xl font-semibold mb-2">Salin Kode Voucher</h4>
|
|
|
|
<div class="flex items-center mb-3">
|
|
<!-- The text field -->
|
|
<input type="text" class="border border-yellow-500 rounded-lg px-4 py-2 focus:outline-none"
|
|
value="3ND4Y" aria-label="Recipient's username" aria-describedby="copyText" id="copyText"
|
|
readonly>
|
|
<!-- The button used to copy the text -->
|
|
<button
|
|
class="lg:bg-yellow-500 text-white px-3 py-2 rounded-lg ml-2 flex items-center space-x-2 focus:outline-none transform transition hover:scale-110 duration-300 ease-in-out"
|
|
type="button" id="copyBtn">
|
|
<i class="far fa-copy"></i>
|
|
<span>Copy</span>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- step by step 3 -->
|
|
<hr class="mt-10 border-gray-300 my-4"> <!-- tipis -->
|
|
<div class="mt-10 flex flex-col-reverse md:flex-row items-start md:space-x-10">
|
|
<div data-aos="fade-left" class="flex gap-4 justify-center">
|
|
<div class="w-1/3">
|
|
<h6 class="text-gray-600 text-sm font-medium mb-1">07.</h6>
|
|
<h4 class="text-xl font-semibold mb-2">Paste Kode Voucher "3ND4Y"</h4>
|
|
<p class="text-gray-500">Paste voucher pada kolom Masukan Voucher</p>
|
|
</div>
|
|
<div class="w-1/3">
|
|
<h6 class="text-gray-600 text-sm font-medium mb-1">08.</h6>
|
|
<h4 class="text-xl font-semibold mb-2">Lakukan Pembayaran</h4>
|
|
<p class="text-gray-500">Pilih metode pembayaran yang diinginkan</p>
|
|
</div>
|
|
<div class="w-1/3">
|
|
<h6 class="text-gray-600 text-sm font-medium mb-1">09.</h6>
|
|
<h4 class="text-xl font-semibold mb-2">Selamat!</h4>
|
|
<p class="text-gray-500">Kamu telah berhasil mendapatkan potongan biaya formulir</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- tambahan1 -->
|
|
<hr class="mt-10 border-gray-300 my-4"> <!-- tipis -->
|
|
<div class="mt-10 table w-full">
|
|
<div class="table-row-group">
|
|
<div data-aos="flip-down" class="table-row">
|
|
<div class="table-cell">
|
|
<h1 class="text-3xl font-bold mb-4">Ya, saya ingin menjadi bagian dari KsatriaPetir!<br />Daftar
|
|
sekarang.
|
|
</h1>
|
|
</div>
|
|
<div class="table-cell">
|
|
<button href="https://infopmb.itpln.ac.id/daftar/"
|
|
class="lg:mx-0 bg-yellow-500 text-white text-lg font-bold rounded-full py-4 px-9 focus:outline-none transform transition hover:scale-110 duration-300 ease-in-out">
|
|
Daftar sekarang
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- tambahan1 -->
|
|
<hr class="mt-10 border-gray-300 my-4"> <!-- tipis -->
|
|
|
|
<div class="mt-28">
|
|
<div data-aos="flip-down" class="text-center max-w-screen-md mx-auto">
|
|
<h1 class="text-4xl font-bold mb-4">Informasi Voucher</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-10 table w-full">
|
|
<div class="table-row-group">
|
|
<div data-aos="flip-down" class="table-row">
|
|
<div class="table-cell">
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold mb-4">Informasi Umum</h3>
|
|
</div>
|
|
</div>
|
|
<div class="table-cell">
|
|
<div class="mb-8 ml-6">
|
|
<ul class="list-disc ml-6">
|
|
<li>Dapatkan potongan biaya formulir pendaftaran mahasiswa baru ITPLN.</li>
|
|
<li>Potongan harga sebesar Rp. 50.000.</li>
|
|
<li>Bisa digunakan untuk semua program studi di ITPLN.</li>
|
|
<li>Bisa digunakan pada setiap Gelombang Pendaftaran Mahasiswa Baru ITPLN Tahun
|
|
2023/2024.
|
|
</li>
|
|
<li>Gunakan untuk pendaftaran gelombang PMB ITPLN 2023.</li>
|
|
<li>Kode voucher tertera merupakan program afiliasi oleh kampus untuk mahasiswa.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div data-aos="flip-down" class="table-row">
|
|
<div class="table-cell">
|
|
<div class="mb-8 mr-6">
|
|
<h3 class="text-lg font-semibold mb-4">Cara Menggunakan</h3>
|
|
</div>
|
|
</div>
|
|
<div class="table-cell">
|
|
<div class="mb-8 ml-6">
|
|
<ul class="list-disc ml-6">
|
|
<li>Daftarkan akunmu di Portal Infopmb ITPLN.</li>
|
|
<li>Lengkapi biodatamu, termasuk Biodata Pribadi, Alamat, Pas Foto, Data Sekolah, Data
|
|
Orang
|
|
Tua, dan Berkas Syarat Pendaftaran.</li>
|
|
<li>Menuju pemilihan gelombang pendaftaran atau klik secara manual pada menu Pilih
|
|
Gelombang.</li>
|
|
<li>Klik Daftar pada gelombang yang tersedia (contoh: PMB Mandiri ITPLN 2023).</li>
|
|
<li>Pilih jurusan yang diinginkan (misalnya, S1 Informatika atau S1 Teknik Elektro).
|
|
</li>
|
|
<li>Sebelum mengklik Pilih Pembayaran, masukkan Kode Voucher "3ND4Y" pada box "Punya
|
|
kode
|
|
voucher?"</li>
|
|
<li>Selamat! Anda mendapatkan potongan biaya Formulir sebesar Rp. 50.000.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tools For Teachers And Learners -->
|
|
<div class="flex flex-col md:flex-row items-center md:space-x-10 mt-16">
|
|
<div data-aos="fade-right" class="md:w-1/2 lg:pl-14">
|
|
<h1 class="text-darken font-semibold text-3xl lg:pr-56"><span class="text-yellow-500">Contact</span> Us
|
|
</h1>
|
|
<div class="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
|
|
<form action="#" class="space-y-8">
|
|
<div>
|
|
<label for="email"
|
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your
|
|
email</label>
|
|
<input type="email" id="email"
|
|
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
|
|
placeholder="name@flowbite.com" required>
|
|
</div>
|
|
<div>
|
|
<label for="subject"
|
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Subject</label>
|
|
<input type="text" id="subject"
|
|
class="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
|
|
placeholder="Let us know how we can help you" required>
|
|
</div>
|
|
<div class="sm:col-span-2">
|
|
<label for="message"
|
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Your
|
|
message</label>
|
|
<textarea id="message" rows="6"
|
|
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
|
placeholder="Leave a comment..."></textarea>
|
|
</div>
|
|
<button type="submit"
|
|
class="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-yellow-500 sm:w-fit hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Send
|
|
message</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<img data-aos="fade-left" class="md:w-1/2" src="img/girl-with-books.png">
|
|
</div>
|
|
|
|
</div>
|
|
<!-- .container -->
|
|
|
|
<footer class="mt-32" style="background-color: rgba(37, 38, 65, 1);">
|
|
<div class="max-w-lg mx-auto">
|
|
<div class="flex py-12 justify-center text-white items-center px-20 sm:px-36">
|
|
<div class="relative">
|
|
<h1 class="font-bold text-xl pr-5 relative z-50">#KsatriaPetir</h1>
|
|
<svg class="w-11 h-11 absolute -top-2 -left-3 z-40" viewBox="0 0 79 79" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M35.9645 2.94975C37.9171 0.997129 41.0829 0.997127 43.0355 2.94975L76.0502 35.9645C78.0029 37.9171 78.0029 41.0829 76.0503 43.0355L43.0355 76.0502C41.0829 78.0029 37.9171 78.0029 35.9645 76.0503L2.94975 43.0355C0.997129 41.0829 0.997127 37.9171 2.94975 35.9645L35.9645 2.94975Z"
|
|
stroke="#26C1F2" stroke-width="2" />
|
|
</svg>
|
|
</div>
|
|
<span class="border-l border-gray-500 text-sm pl-5 py-2 font-semibold">Kode Voucher ITPLN</span>
|
|
</div>
|
|
<div class="text-center pb-16 pt-5">
|
|
<label class="text-gray-300 font-semibold">Subscribe to get our Newsletter</label>
|
|
<div
|
|
class="px-5 sm:px-0 flex flex-col sm:flex-row sm:space-x-3 space-y-3 sm:space-y-0 justify-center mt-3">
|
|
<input type="email" placeholder="Your Email"
|
|
class="rounded-full py-2 pl-5 bg-transparent border border-gray-400">
|
|
<button type="submit"
|
|
class="text-white w-40 sm:w-auto mx-auto sm:mx-0 font-semibold px-5 py-2 rounded-full"
|
|
style="background: linear-gradient(105.5deg, #545AE7 19.57%, #393FCF 78.85%);">Subscribe</button>
|
|
</div>
|
|
</div>
|
|
<div class="text-center text-white">
|
|
<p class="my-3 text-gray-400 text-sm">© 2022 Dyzulk Developer </p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- AOS init -->
|
|
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
|
|
<script>
|
|
AOS.init();
|
|
</script>
|
|
|
|
<!-- SweetAlert2 -->
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
|
|
|
|
<!-- Clipboard -->
|
|
<script>
|
|
const copyBtn = document.getElementById('copyBtn')
|
|
const copyText = document.getElementById('copyText')
|
|
|
|
copyBtn.onclick = () => {
|
|
copyText.select(); // Selects the text inside the input
|
|
document.execCommand('copy'); // Simply copies the selected text to clipboard
|
|
Swal.fire({ //displays a pop up with sweetalert
|
|
icon: 'success',
|
|
title: 'Text copied to clipboard',
|
|
showConfirmButton: false,
|
|
timer: 1000
|
|
});
|
|
}
|
|
</script>
|
|
<script src="ud-menu-scroll.js"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|