CSS : Membuat Tampilan Login dengan CSS

Assallamuallaikum kawan kawan ,.
Kali ini saya akan berbagi sedikit ilmu tentang cara membuat tampilan Login dengan CSS dan HTML. Kali ini saya menggunakan CSS external , yaitu CSS yang berada berbeda file dengan file html nya HTML.

PENGERTIAN
Login juga biasa disebut sebagai log in, log on, logon, signon, sign on, signin, sign in) adalah proses untuk mengakses komputer dengan memasukkan identitas dari akun pengguna dan kata sandi guna mendapatkan hak akses menggunakan sumber daya komputer.

ALAT & BAHAN :

PC / Laptop
Sublime Text / Text editor lainya
Browser

LANGKAH KERJA
Pada pembuatan tampilan login kali ini saya membuat dua file yaitu file html dan CSS untuk tampilan loginnya .
Pertama tama kita buat file CSS nya terlebih dahulu dan mulai mengcoding tampilan dari login. Di bawah ini saya beri contoh tampilan file CSS yang saya buat :

body {
    background:url(background.jpg);
    width: 100%;
    height: 100%;
}

h2 {
    font-family: raleway;
    text-align: center;
    font-size: 30px
}

#login {
    max-width: 320px;
    margin: 100px auto;
    background :#F5F5F5;
    box-shadow: 0 0 10px #aaa
}

#login h3 {
    text-align: center;
    font-family: raleway;
    padding:20px 10px;
    background-color: #3CB371;
    color: white;
}

#login footer {
    text-align: center;
    font-family: raleway;
    padding:20px 10px;
    background-color: #3CB371;
    color: white;
}

fieldset {
    margin: 0;
    border: none;
}

form {
    padding: 0%;
    margin-top: 0%;
    padding: 15px;
}

input[type="text"] , input [type="email"] {
    width: 235px;
    padding: 1em;
    margin-top: 1em;
    color: #888;
}

input[type="text"]:focus {
    color: #3CB371;
    border: 2px solid #3CB371;
}

input[type="password"] {
    width: 235px;
    padding: 1em;
    margin-top: 1em;
    color: #888;
}

input[type="password"]:focus {
    color: #3CB371;
    border: 2px solid #3CB371;
}

input[type="submit"] {
    font-family: raleway;
    font-size: 14px;
    width:100%;
    padding: 1.1em;
    margin: 1.5em 0;
    color: #888;
    background-color: #708090;
    border:none;
    color: #eee;
    border-bottom: 4px solid transparent ;
}

input[type="submit"]:hover {
    background-color: #2F4F4F ;
}

a {
    text-decoration: none;
    color: white;
}

Setelah selesai membuat file CSS nya, selanjutnya buat file html untuk memanggil CSS dan memeri isi dari tampilan login.
Di bawah ini adalah contoh file html yang saya buat :

<!DOCTYPE html>
<html>
<head>
    <title>Login SMK N 2 Karanganyar</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2><font color="#20B2AA"> BELAJAR MEMBUAT TAMPILAN LOGIN DENGAN CSS </font></h2>
<div id="login">
<h3>Login</h3>
<fieldset>
    <form >
        <input type="text" name="username" placeholder="Username">
        <input type="password" name="password" placeholder="Password">
        <input type="submit" name="submit" value="Login">
    <div class="border-p"> </div>
    </form>
</fieldset>
<footer><a href="#">Belum punya account ?</a> </footer>
</div>
</body>
</html>

Setelah selesai membuat kedua file , lalu simpan di dalam satu folder yang sama.

Setelah jadi satu folder lalu jalanke file html nya.

Itu tadi adalah contoh dari tampilan login saya buat. Sekian dari saya kawan kawan semoga bermanfaat ya , Terima Kasih