Membuat form login snow background dengan html css

Selamat datang kembali sobat staykoding. Kalau kemarin kita sudah membahas tutorial cara membuat search box keren dengan html css. Pada kesempatan kali ini kita akan belajar membuat login form snow background dengan html css.

perlu kita ketahui kalau login form merupakan suatu hal yang biasanya wajib ada pada sebuah website yang memiliki sistem login untuk menampung akun-akun yang digunakan sebagai sistem keamanan dari website itu sendiri.

Nah di artikel saya kali ini, saya akan membuat sebuah desain form login keren dengan html css. desain dari form login tersebut seperti ini:

login form snow background dengan html css

bagaiaman nih sobat? tertarik cara membuatnya. Berikut tutorialnya!

Tutorial membuat form login snow background html css

1. seperti biasa siapkan text editor kesukaan sobat baik itu visual studio code, sublime text ataupun yang lainnya.

2. buat sebuah folder di direktori sobat dan didalam folder tersebut, buat struktur folder dan file seperti dibawah ini

3. kemudian download bahan-bahan yang akan kita gunakan untuk projek kita kali ini dibawah ini

Download Aset

aset ini merupakan file gambar dan css serta javascript dari fontawesome

4. setelah itu tempatkan aset yang telah didownload tadi ke dalam folder projek yang kita buat tadi. Maka struktur folder keseluruhan seperti dibawah ini.

5. kemudian ketik pada index.html dengan kode html yang telah saya buat dibawah ini.

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Form Login Snow Style</title>    <link rel="stylesheet" href="css/all.min.css">    <link rel="stylesheet" href="css/style.css"></head><body>        <div class="login">        <div class="kotak-login">            <div class="title">                <h1>Login Form</h1>            </div>            <center>Silahkan Login</center>            <div class="form-login">                <form>                    <label>Username</label>                    <input type="text" autocomplete="off">                    <label>Password</label>                    <input type="password" autocomplete="off">                    <button type="submit" ><i class="fa fa-sign-in-alt"></i> Masuk</button>                </form>            </div>        </div>    </div><script type="text/javascript" src="js/all.min.js"></script></body></html>

6. selanjutnya pada file style.css yang ada di folder css. buat kodingan dengan kode css dibawah ini.

* {    margin: 0;    padding: 0;    box-sizing: border-box;}body {    background: url(../img/bg.jpg);    background-size: cover;    background-position: center;    background-repeat: no-repeat;}/*Style Login Form*/.login {    width: 100%;    height: 100vh;    box-sizing: border-box;    display: flex;    justify-content: center;    align-items: center;}.kotak-login {    background-color: #eef0f2;    box-shadow: 2px 3px 10px rgba(10, 10, 10, .5);    padding: 40px;    height: 400px;    width: 300px;    border-radius: 10px;    display: flex;    flex-direction: column;}.title {    text-align: center;    color: #1c1c1c;    font-size: 0.8em;}center {    transform: translateY(15px);}.kotak-login .form-login form {    margin-top: 30px;}.kotak-login .form-login form label {    color: #1c1c1c;    margin: 50px 0;}.kotak-login .form-login form input {    height: 30px;    border: 1px solid #1c1c1c;    outline: none;    border-radius: 5px;    width: 100%;}.kotak-login .form-login form button[type='submit'] {    width: 70px;    height: 40px;    border:none;    outline: none;    background: #1c1c1c;    color: #ededed;    margin: 10px;    border-radius: 5px;    position: relative;    left: 30%;}

6. Selesai sudah, selanjutnya tinggl dijalankan pada browser sobat dan lihat hasilnya.

semoga artikel kali ini tentang membuat login form snow background dengan html css bermanfaat ya sobat. see you dan terima kasih sudah berkunjung di blog staykoding.