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>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="register.html">register</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("login-img.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,.7);

    box-shadow: 0 0 10px rgba(255,255,255,.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;

    }

 

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("register.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

Getting Started with NumPy

Gambar
Getting Started With Numpy   Apa itu NumPy? NumPy (Numerical Python) adalah perpustakaan yang kuat di Python untuk operasi numerik dan matematika. Ini memberikan dukungan untuk array dan matriks multidimensi yang besar, bersama dengan kumpulan fungsi matematika untuk mengoperasikan elemen-elemen ini. NumPy memiliki beberapa keunggulan yang membuatnya menjadi pilihan populer untuk komputasi numerik di lingkungan Python. Beberapa alasan utama mengapa NumPy sering digunakan termasuk: Kinerja yang Tinggi: NumPy menyediakan array N-dimensi yang dioptimalkan untuk kinerja tinggi. Operasi-operasi di dalam NumPy diimplementasikan dalam C dan Fortran, sehingga dapat memanfaatkan kecepatan eksekusi dari bahasa-bahasa tersebut. Hal ini membuat NumPy lebih cepat daripada jika Anda menggunakan loop Python biasa untuk melakukan operasi serupa. Array N-dimensi: NumPy memberikan dukungan untuk array N-dimensi yang memungkinkan Anda dengan mudah bekerja dengan data multidimensional, seperti matri...
Baca selengkapnya

DICTIONARIES & FRECUENCY TABLES

Gambar
  Dictionaries dan Frecuency Tables 1- Storing Data Store the data in the table above using two different lists. Assign the list ['4+', '9+', '12+', '17+'] to a variable named content_ratings. Assign the list [4433, 987, 1155, 622] to a variable named numbers. Store the data in the table above using a list of lists. Assign the list [['4+', '9+', '12+', '17+'], [4433, 987, 1155, 622]] to a variable named content_rating_numbers. 2- Dictionaries Map content ratings to their corresponding numbers by recreating the dictionary above: {'4+': 4433, '9+': 987, '12+': 1155, '17+': 622}. Assign the dictionary to a variable named content_ratings. Print content_ratings and examine the output carefully. Has the order we used to create the dictionary been preserved? In other words, is the output identical to {'4+': 4433, '9+': 987, '12+': 1155, '17+': 622}? We'll discuss...
Baca selengkapnya

membuat Script variabel dan operator

Gambar
MEMBUAT VARIABEL DAN OPERASI ARITMATIKA MELALUI PHP    Variabel dan Operator Langkah -langkah : Buat file di visual code, lalu masukkan Script di bawah ini : 1.Buat script untuk menjumlahkan angka berikut: 198, 134, 76. Gunakan juga statemen teks untuk menampilkan hasilnya! <! 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 > Penjumlahan </ title > </ head > < body >   <?php     $angka_pertama = 198 ;     $angka_kedua = 134 ;     $angka_ketiga = 76 ;     $jumlah = $angka_pertama + $angka_kedua + $angka_ketiga ;     $teks = 'ketiga variabel bila dijumlah menjadi: ' ;         echo ( $teks . $jumlah );   ? > </ body > ...
Baca selengkapnya