CARA MUDAH BUAT LAYOUT FORM LOGIN DENGAN HTML & CSS

-

 

Membuat Layout Login Dengan Html & CSS 

Di sini saya menggunakan program "Visual Studio 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 (FormLogin)


2. Buka program VS CODE, pilih Fle > Open Folder > cari folder "FormLogin'


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

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>Membuat Form Login</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>
        <p>
          Belum punya akun?
          <a href="daftar.html">Daftar di sini</a>
        </p>
      </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("background.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: 5px 0;
    border: none;
    background-color: #2979ff;
    font-size: 18px;
    color: #fafafa;
  }
 
  .container form p {
    width: 100%;
    padding: 5px 0;
    border: none;
    font-size: 18px;
    color: #ffffff;
  }
 
  .container form a {
    width: 100%;
    padding: 5px 0;
    border: none;
    font-size: 18px;
    color: #2979ff;
  }
 

5. Dan tampilannya akan seperti ini:


6. Selanjutnya buat file baru untuk form register, buat file baru dengan nama "daftar.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" />
    <title>Register</title>
    <link rel="stylesheet" href="style2.css" />
  </head>
  <body>
    <div class="container">
      <h1>Daftar</h1>
      <form>
        <label>NIM</label><br />
        <input type="text" /><br />
        <label>Nama Mahasiswa</label><br />
        <input type="text" /><br />
        <label>Agama</label><br />
        <select>
          <option>Islam</option>
          <option>Kristen</option>
          <option>Katolik</option>
          <option>Budha</option>
          <option>Hindu</option>
          <option>Konghucu</option></select
        ><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:

body {
    height: 100vh;
    background-image: url("bg.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
 
  * {
    margin: 0;
    padding: 0;
    outline: 0;
    font-family: "Open Sans", sans-serif;
  }
 
  .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 {
    margin-top: 8px;
    width: 100%;
    padding: 4px 0;
    border: none;
    background-color: #2979ff;
    font-size: 15px;
    color: #fafafa;
  }

8.Maka tampilannya akan seperti ini:



Download bahan : Disini

Komentar

Posting Komentar

Postingan populer dari blog ini

Getting Started with NumPy - Jupyter Notebook

-
Gambar
Getting Started with NumPy Pendahuluan tentang NumPy: Apa itu NumPy? NumPy singkatan dari Numerical Python, merupakan library kuat untuk operasi numerik di Python. Memberikan dukungan untuk array dan matriks multi-dimensi besar, bersama dengan fungsi matematika untuk operasi pada elemen-elemen tersebut. Mengapa NumPy? Operasi array yang efisien: Array NumPy lebih efisien dibandingkan dengan daftar Python tradisional untuk operasi numerik. Broadcasting: NumPy memungkinkan operasi pada array dengan bentuk dan ukuran yang berbeda, membuat kode menjadi ringkas dan mudah dibaca. Fungsi matematika: NumPy menyediakan berbagai fungsi matematika untuk manipulasi dan perhitungan array 1. Pengenalan NumPy Tugas 1 Buatlah sebuah vektor dengan nama vektor_tes  dari sebuah list [1, 2, 3] Buatlah sebuah matriks dengan nama matriks_tes dengan list [[1, 2, 3], [2, 4, 8], [3, 9, 27]] Tuliskan Kode kamu di bawah ini 2. Array Shape Tugas 2  Tunjukan bentuk dari vektor_tes dan matriks_tes  Tu...
Baca selengkapnya

MongoDB : Basis Data Dokumen Terkemuka

-
Gambar
  MongoDB adalah sistem basis data dokumen yang sangat populer yang dirancang untuk mengatasi kebutuhan data modern. Dalam artikel ini, kita akan mengenal MongoDB, mengapa Anda mungkin ingin menggunakannya, serta langkah-langkah dasar untuk menginstal dan memulai menggunakan MongoDB. Definisi MongoDB MongoDB adalah sebuah basis data NoSQL (tidak hanya SQL) yang dirancang untuk menyimpan, mengelola, dan mengambil data dalam format dokumen yang fleksibel. Dokumen MongoDB adalah struktur data yang menyerupai JSON (JavaScript Object Notation) dan memungkinkan penyimpanan data yang kompleks dengan skema yang dapat berubah-ubah. Mengapa Menggunakan MongoDB? Ada beberapa alasan mengapa Anda mungkin ingin menggunakan MongoDB: 1.  Fleksibilitas Skema : MongoDB memungkinkan Anda untuk menyimpan data dengan skema yang dapat berubah-ubah, sehingga Anda dapat menyesuaikannya dengan kebutuhan aplikasi Anda. 2.  Skalabilitas : MongoDB dirancang untuk mengatasi beban kerja yang besar da...
Baca selengkapnya

Script Sederhana PHP Menghitung Diskon | Tutorial

-
Gambar
STRUKTUR KONTROL     Pada zaman sekarang aplikasi sudah ada di mana-mana dan digunakan untuk membantu pekerjaan manusia. Salah satunya adalah bahasa pemrograman PHP. Ini adalah program berbasis web dan dapat digunakan untuk membuat aplikasi berbasis web dan desktop juga. Aplikasi yang menggunakan PHP kini telah membuat terobosan ke banyak bidang.  Contoh : Pendidikan, Kesehatan, Bisnis, dan Bidang Lainnya. Dalam contoh kasus kami, itu bisa menjadi area bisnis. Realita lingkungan kita adalah bahwa diskon sangat terkait dengan penjualan. Cara Menghitung Diskon di PHP : Sebelum memulai pastikan sudah memiliki, VS Code & XAMPP jika belum, bisa mendonwload dahulu  https://code.visualstudio.com/download  &  https://www.apachefriends.org/download.html . 1. Buka dan download bahan.php pada link berikut:  LinkPHP .  Ekstract file yang sudah didownload pada folder xampp > htdocs 2. Buka VS Code, dan lakukan open folder (skontrol). 3. Si...
Baca selengkapnya