MEMBUAT LAYOUT LOGIN DENGAN HTML & CSS

-

 Membuat Layout Login Dengan Html & CSS


Di sini saya menggunakan program VS CODE untuk melakukan coding, pastikan juga untuk sudah menginstal XAMPP.


1. Pembuatan folder.


Pertama lakukan pembuatan folder dengan judul form_login pada folder xampp: Local Disk(C:) > XAMPP > htdocs > new folder



2. Buka program VS CODE, pilih Fle > Open Folder > cari folder form_login




Untuk file gambar, pastikan satu folder dengan file-file yang akan di pakai, atau jadi satu di dalam file form_login.

3. Buat file baru dengan nama "index.html"

Maka isi seperti ini:

<!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.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <h1>Login</h1>
      <form>
        <label>Username</label><br />
        <input type="text" /><br />
        <label>Password</label><br />
        <input type="password" /><br />
        <button>Log in</button>
        <button>
          <a href="register.html">Daftar di sini</a>
        </button>
      </form>
    </div>
  </body>
</html>

4. Selanjutnya buat juga buat file "style.css"

Isi seperti berikut:

* {
  margin: 0;
  padding: 0;
  outline: 0;
  font-family: "Open Sans", sans-serif;
}
body {
  height: 100vh;
  background-image: url("pengadaan-buku-perpustakaan-1024x682.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 25px;
  width: 300px;
  background-color: rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.container h1 {
  text-align: left;
  color: #fafafa;
  margin-bottom: 30px;
  text-transform: uppercase;
  border-bottom: 4px solid #2979ff;
}
.container label {
  text-align: left;
  color: #90caf9;
}


.container form input {
  width: calc(100% - 20px);
  padding: 8px 10px;
  margin-bottom: 15px;
  border: none;
  background-color: transparent;
  border-bottom: 2px solid #2979ff;
  color: #fff;
  font-size: 20px;
}


.container form button {
  width: 100%;
  padding: 6px 0;
  border: none;
  background-color: #2979ff;
  font-size: 18px;
  color: #fafafa;

}

5. Dan tampilannya akan seperti ini.




6. Selanjutnya buat file baru untuk form register, buat file baru dengan nama "register.html"

dan isi sebagai berikut:

<!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="style2.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <h1>Register</h1>
      <form>
        <label>NIM</label><br />
        <input type="text" /><br />
        <label>Nama Mahasiswa</label><br />
        <input type="text" /><br />
        <label>Tanggal Lahir</label><br />
        <input type="date" /><br />
        <label>Jenis Kelamin</label><br />
        <input type="radio" id="Laki-laki" name="gender" value="Laki-laki" />
        <label label for="Laki-laki">Laki-laki</label><br />
        <input type="radio" id="Perempuan" name="gender" value="perempuan" />
        <label label for="Perempuan">Perempuan</label><br />
        <label>Prodi</label><br />
        <select>
          <option>Bisnis Digital</option>
          <option>Multimedia</option>
          <option>Keamanan Cyber</option></select
        ><br />
        <label>Alamat</label><br />
        <input type="text" /><br />
        <button>
          <a href="index.html">Register</a>
        </button>
      </form>
    </div>
  </body>

</html>



7. Selanjutnya buat juga buat file "style2.css" supaya membedakan dengan file sebelumnya bisa ditambahkan angka "2".

Isi seperti berikut:

* {
  margin: 0;
  padding: 0;
  outline: 0;
  font-family: "Open Sans", sans-serif;
}


body {
  height: 100vh;
  background-image: url("pengadaan-buku-perpustakaan-1024x682.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 25px;
  width: 300px;
  background-color: rgba(59, 47, 47, 0.7);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.container h1 {
  text-align: left;
  color: #fafafa;
  margin-bottom: 30px;
  text-transform: uppercase;
  border-bottom: 4px solid #005eff;
}
.container label {
  text-align: left;
  color: #74c0ff;
}


.container form button {
  width: 100%;
  margin-top: 6px;
  padding: 6px 0;
  border: none;
  background-color: #2979ff;
  font-size: 18px;

  color: #fafafa;

8.Maka tampilannya akan seperti ini:







Komentar

Posting Komentar

Postingan populer dari blog ini

LOCAL/REMOTE FILE INCLUSION

-
Gambar
 LOCAL/REMOTE FILE INCLUSION DEMO 1: SERANGAN LFI  • Buat sebuah folder di C:\xampp\htdocs\ bernama lfi.  •Di dalam folder lfi, buat file bernama index.php dengan isi sebagai berikut: <?php // index.php $page = isset ( $_GET [ 'page' ]) ? $_GET [ 'page' ] : 'home.php' ; include ( $page ); • Buat file home.php di folder yang sama dengan isi: <?php echo "Welcome to the home page!" ;  • Buka browser dan akses http://localhost/lfi/index.php. •Untuk membaca file di sistem Windows, kita bisa mencoba membaca file C:\xampp\htdocs\lfi\home.php dengan mengubah parameter URL:  http://localhost/lfi/index.php?page=C:/xampp/htdocs/lfi/home.php  •Coba akses file sensitif seperti konfigurasi Apache:  http://localhost/lfi/index.php?page=C:/xampp/apache/conf/httpd.conf DEMO 2: SERANGAN RFI  • Buat folder di C:\xampp\htdocs\ bernama uploads.  •Buat file upload.php di C:\xampp\htdocs\lfi\ dengan isi sebagai berikut:  <?php if ( $_SERVER [ 'R...
Baca selengkapnya

OSINT

-
  OSINT Open Source Intelligence (OSINT) adalah proses pengumpulan dan analisis informasi yang tersedia  untuk umum dari berbagai sumber terbuka untuk tujuan intelijen. OSINT menggunakan informasi  yang dapat diakses oleh publik dan secara sah, seperti situs web, media sosial, laporan publik, basis  data, dan publikasi lainnya. OSINT digunakan oleh berbagai pihak, termasuk perusahaan,  pemerintah, penegak hukum, dan profesional keamanan siber untuk mengumpulkan informasi yang  relevan dan berharga. Sumber-Sumber OSINT Sumber-sumber OSINT dapat dikategorikan menjadi beberapa jenis, antara lain: 1. Sumber Media:  - Situs berita, artikel, jurnal, dan laporan media. 2. Sumber Internet:  - Situs web perusahaan, blog, forum, dan komunitas online. 3. Media Sosial:  - Platform seperti Facebook, Twitter, LinkedIn, Instagram, dan lainnya. 4. Sumber Pemerintah:  - Laporan publik, data sensus, basis data paten, dan dokumen hukum. 5. Sumber Akademik:...
Baca selengkapnya

CROSS SITE REQUEST FORGERY

-
Gambar
  CROSS SITE REQUEST FORGERY Apa Itu Cross-Site Request Forgery (CSRF)? Cross-Site Request Forgery (CSRF) adalah salah satu jenis serangan pada aplikasi web di mana penyerang mengeksploitasi identitas pengguna untuk mengirimkan permintaan yang tidak sah ke server aplikasi. CSRF sering kali berhasil karena aplikasi web tidak memverifikasi keaslian permintaan yang datang dari pengguna yang telah diautentikasi. Cara Kerja CSRF Pengguna Login : Pengguna login ke situs web A dan mendapatkan cookie sesi yang sah. Penyerang Membuat Permintaan Berbahaya : Penyerang membuat halaman web berbahaya atau email yang mengandung permintaan berbahaya ke situs web A. Pengguna Mengunjungi Halaman Berbahaya : Pengguna mengunjungi halaman berbahaya tersebut atau membuka email yang mengandung permintaan berbahaya. Permintaan Tidak Sah Dikirim : Karena pengguna sudah login ke situs web A, permintaan berbahaya tersebut dikirim ke server dengan menggunakan cookie sesi pengguna, sehingga permintaan tersebut...
Baca selengkapnya