TUTORIAL MEMBUAT FORM LOGIN RESPONSIVE

Halo Teman Teman, Kesempatan kali ini Saya akan membahas/membuatkan tutorial Bagaimana Caranya Membuat Form Login yang Responsive.

Sebelumnya, mari kita kenalan dulu dengan Responsive, responsive disini bahwa Form Login yang kita buat itu sangat UI Friendly (User Interface Friendly) Maksudnya tampilan ini sangat-sangat friendly untuk para penikmatnya... Karena Form Login disini akan sangat friendly dengan device manapun, mau itu PC 15', Lappy 10' , Smartphone 5', Smartphone 4'. Misal tidak friendly, maka form tersebut akan acak-acakan saat dibuka oleh device seperti Smartphone.

Nah ini dia hasil nya dan sudah Friendly

Gimana? keren kan tampilannya untuk Form Sederhana

Nah berikut source code/codingan yang sudah jadinya..

Lalu save script ini menjadi index.php

Berikut file script selanjutnya

* {

    padding: 0px;

    margin: 0px;

    font-family: arial;

}

#login {

    width: 100%;

    height: 100vh;

    background-image: url("img/bg.jpg");

    background-size: cover;

    background-repeat: no-repeat;

    position: absolute;

}

.center {

    width: 350px;

    height: auto;

    margin: 0 auto;

    margin-top: 100px;

    background-color: #f0f0f0;

    box-shadow: 2px 2px 16px 0px #757575;

    padding: 40px;

}

.center h2 {

    font-size: 40px;

    text-align: center;

    color: #757575;

    padding-bottom: 40px;

}

.f1 {

    width: 100%;

}

.itpw {

    width: 92%;

    padding: 13px 10px;

    margin: 5px 0px;

    background-color: #dbdbdb;

    border: 3px solid #dbdbdb;

    color: #757575;

    transition: all 0.7s;

}

.its {

    width: 99.7%;

    font-size: 19px;

    color: #f5f5f5;

    padding: 12px;

    margin: 5px 0;

    background-color: #004d40;

    border: none;

    transition: all 0.4s;

}

.itpw:focus {

    border-bottom: 3px solid blue;

    color: blue;

}

.its:hover, .its:focus {

    opacity: 0.7;

    cursor: pointer;

}

.center p {

    margin: 20px 0;

    text-align: center;

    font-size: 14px;

}

.center p a {

    color: #757575;

}

@media screen and (min-width:1500px) {

    

    .center {

        widows: 350px;

    }

}

@media screen and (min-width:900px) {

    #login {

        background-size: 100% 100%;

    }

    

    .its {

        width: 100%;

}

    

    .itpw {

        font-size: 14px;

        width: 90%;

        padding: 13px 3%;

    }

    

    .center {

        width: 230px;

    }

    

    .center p {

        font-size: 12px;

    }

    

}

@media screen and (max-width:350px) {

    .center {

        padding: 20px;

        width: 75%;

    }

}

Lalu save script ini menjadi style.php

Berikut file script selanjutnya

Lalu save script ini menjadi logout.php

Lalu save .
Sekarang coba buka XAMPP anda, ohiya file 3 tadi silahkan simpan dalam folder C:/XAMPP/htdocs/(FOLDER ANDA)
Lalu jalankan XAMPP -> buka browser -> masuk ke alamat Localhost/FOLDERANDA

Terima Kasih Telah Berkunjung ^_^