Recent Posts

    Kuis PWEB A - Form Registrasi

    Baca Juga

     Nama : Abd. Wahid

    NRP : 5025201039

    Kelask : PWEB A (2022)

    Repository : Repository

    Website : Website





    Source Code :


    <!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">
    <link rel="stylesheet" href="style/style.css">
    <title>Quiz 1</title>
    </head>
    <body>
    <main class="container">
    <div class="form">
    <h1 class="form-title">Formulir Registrasi</h1>
    <h2 class="form-subheader"><b>PESERTA</b></h2>
    <div class="form-container">
    <form action="">
    <div class="row input-row">
    <p class="label">Nama Lengkap & Gelar</p>
    <p class="colon">:</p>
    <input class="input" type="text">
    </div>
    <div class="row input-row">
    <p class="label">Asal Instansi / Kota</p>
    <p class="colon">:</p>
    <input class="input" type="text">
    </div>
    <div class="row input-row">
    <p class="label">Alamat</p>
    <p class="colon">:</p>
    <input class="input" type="text">
    </div>
    <div class="row input-row">
    <p class="label">Kode Pos</p>
    <p class="colon">:</p>
    <input class="input" type="text">
    </div>
    <div class="row input-row">
    <p class="label">Provinsi</p>
    <p class="colon">:</p>
    <input class="input" type="text">
    </div>
    <div class="row input-row">
    <p class="label">Telpon / Handphone</p>
    <p class="colon">:</p>
    <input class="input" type="text">
    </div>
    <div class="row input-row">
    <p class="label">Email</p>
    <p class="colon">:</p>
    <input class="input" type="text">
    </div>
    <div class="row input-row">
    <p class="label">Sponsor</p>
    <p class="colon">:</p>
    <input class="input" type="text">
    </div>
    <div class="row input-row">
    <p class="label">- Nama Perusahaan</p>
    <p class="colon">:</p>
    <input class="input" type="text">
    </div>
    <div class="row input-row">
    <p class="label">- Alamat Perusahaan</p>
    <p class="colon">:</p>
    <input class="input" type="text">
    </div>
    <div class="row input-row">
    <p class="label">- Nama Kontak Personal</p>
    <p class="colon">:</p>
    <input class="input" type="text">
    </div>
    <div class="row input-row">
    <p class="label">- Telp. Personal</p>
    <p class="colon">:</p>
    <input class="input" type="text">
    </div>
    <div class="row input-row">
    <p class="label">- Email Perusahaan</p>
    <p class="colon">:</p>
    <input class="input" type="text">
    </div>
    <div class="row-bottom input-row-bottom">
    <p class="label">Kontribusi peserta Rp. 2.500.000, -(Dua Juta Lima Ratus Ribu Rupiah) belum termasuk penginapan dan akomodasi</p>
    <br>
    <p class="colon">:</p>
    <input class="input" type="text">
    </div>
    <p>
    Konformasi Kepesertaan :
    <br>
    * Sebelum 15 Januari
    </p>
    <div class="row-bottom input-row-bottom">
    <p class="label">Konfirmasi Kepesertaan</p>
    <p class="colon">:</p>
    <input class="input-bottom" type="text">
    </div>
    <div class="col">
    <p>
    Konfirmasi Kepesertaan:
    <ul>
    <li> Sebelum 15 Januari 2012 : Rp.2.500.000,-</li>
    <li> Sesudah 15 Januari 2012 : Rp.2.750.000,-</li>
    <li> On Site&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: Rp.3.000.000,-</li>
    </ul>
    </p>
    </div>
    <div class="col">
    <p>
    Pembatalan pendaftaran :
    <br>
    * sebelum H-5 uang dikembalikan 50%
    <br>
    * sesudah H-5 uang tidak dikembalikan
    </p>
    </div>
    <p>
    Akomodasi Penginapan peserta,harga kamar kelas standar berkisar antara Rp. 250.000 - Rp. 300.000
    </p>
    <p>
    Pendaftaran via transfer Bank ke :
    </p>
    <p>
    Nama Bank : Bank BCA KCU Cirebon
    </p>
    <p>
    No Rekening : 1341015478
    </p>
    <p>
    Atas Nama : Junaedi S.Kep
    </p>
    </form>
    </div>
    </div>
    </main>
    <script src="js/script.js"></script>
    </body>
    </html>
    view raw form - index hosted with ❤ by GitHub

    .container {
    padding: 10px 10px;
    display: flex;
    justify-content: space-between;
    align-items: space-between;
    flex-direction: column;
    }
    .form {
    width: 70%;
    border: 5px solid gray;
    border-radius: 26px;
    display: flex;
    justify-content: center;
    align-items: center ;
    margin: auto;
    flex-direction: column;
    }
    .form-subheader {
    text-align: start;
    }
    .form-container {
    width: 100%;
    margin-top: 20px;
    padding: 20px 20px;
    box-sizing: border-box;
    }
    .row {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 30px 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "label label colon input input input input input";
    column-gap: 10px;
    }
    .row-input {
    width: 100%;
    display: flex;
    padding-top: 20px;
    }
    .row-bottom {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 30px 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "label-bottom";
    column-gap: 10px;
    }
    .label {
    grid-area: label;
    }
    .colon {
    grid-area: colon;
    }
    .input-row {
    margin-top: 0.2px;
    display: grid;
    }
    .input-row-bottom {
    width: 100%;
    display: flex;
    }
    .input {
    grid-area: input;
    display: flex;
    align-items: center;
    }
    input.input {
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 2px solid black;
    border-style: dotted;
    }
    input.input-bottom {
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;
    }
    .text-italic {
    font-style: italic;
    }
    .letter-time {
    width: 100%;
    text-align: left;
    }
    view raw form - css hosted with ❤ by GitHub

    document.querySelectorAll('.lomba').forEach((item) => {
    item.addEventListener('click', (event) => {
    event.target.style.border = "2px solid green";
    event.target.style.padding = "2px 2px";
    event.target.style.borderRadius = "9999px"
    })
    })
    view raw form - js hosted with ❤ by GitHub

    Artikel Terkait

    Belum ada Komentar untuk "Kuis PWEB A - Form Registrasi"

    Posting Komentar

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel