Ticker

10/recent/ticker-posts

Ad Code

Responsive Advertisement

Buat Form Login Facebook

H4nk Februari 06, 2020

Siapa yang tidak tahu facebook pada sekarang ini ? yah media sosial yang cukup populer di zaman sekarang ini. Pada tutorial kali ini kita akan membuat halaman login mirip facebook.

 Source codenya seperti berikut :
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style type="text/css">
    @font-face {
        font-family: font;
        src: url(FACEBOLF.OTF);
    }
    body{
        background-color: #165ABF;    
        font-family: fong;    
    }
    h1{
        color:white;
        text-align: center;
        margin-top: 100px;
    }
    .username{
        background-color: white;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        width: 100%;
        margin: auto;
        height: 40px;
    }
    input{
        outline: none;
        margin-left: 10px;
        background: none;
        border: none;
        width: 100%;
        height: 100%;
    }
    .password{
border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        background-color: white;:10px;
        border-top: solid #ddd 1px;
        width:100%;
        margin:auto;
        height:40px;
    }
    .btn-login{
        margin-top: 10px;
        background: none;
        border:none;
        border-radius 5px;
        background-color: white;10px;
        width:100%;
        height:50px;
        color:black;
        background-color:#f4f4f4;
        opacity:0.6;
    }
    a{
        color:white;
        text-decoration:none;
    }
    .back{
        text-align: center;
    }
    .footer{
        position:fixed;
        margin-top:130px;
        color:white;
        text-align: center;
        width:100%
    }
    </style>
</head>
<body>
    <h1> Facebook </h1>
    <div class="username">
        <input type="text" placeholder="Email or phune Number">
    </div>
    <div class="password">
        <input type="password" placeholder="Password">
    </div>
    <button class="btn-login">Log In</button><br>
    <p class="back"><a href="#">Back</a></p>
    <div class="footer"><a href="#">Sign Up For Facebook</a></div>
</body>
</html>

Cukup simpel bukan, Berikut adalah penjelasannya :

    <meta name='viewport' content='width=device-width, initial-scale=1'>

Fungsi dari script diatas adalah agar tampilan menyesuaikan layar.
Source Code HTMLnya adalah :

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <h1> Facebook </h1>
    <div class="username">
        <input type="text" placeholder="Email or phune Number">
    </div>
    <div class="password">
        <input type="password" placeholder="Password">
    </div>
    <button class="btn-login">Log In</button><br>
    <p class="back"><a href="#">Back</a></p>
    <div class="footer"><a href="#">Sign Up For Facebook</a></div>
</body>
</html>

Untuk code CSS saya membuatkannya dalam 1 halaman, sebenarnya bisa kita bikin file css dengan nama style.css. untuk code cssnya sebagai berikut :
<style type="text/css">
    @font-face {
        font-family: font;
        src: url(FACEBOLF.OTF);
    }
    body{
        background-color: #165ABF;    
        font-family: fong;    
    }
    h1{
        color:white;
        text-align: center;
        margin-top: 100px;
    }
    .username{
        background-color: white;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        width: 100%;
        margin: auto;
        height: 40px;
    }
    input{
        outline: none;
        margin-left: 10px;
        background: none;
        border: none;
        width: 100%;
        height: 100%;
    }
    .password{
border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        background-color: white;:10px;
        border-top: solid #ddd 1px;
        width:100%;
        margin:auto;
        height:40px;
    }
    .btn-login{
        margin-top: 10px;
        background: none;
        border:none;
        border-radius 5px;
        background-color: white;10px;
        width:100%;
        height:50px;
        color:black;
        background-color:#f4f4f4;
        opacity:0.6;
    }
    a{
        color:white;
        text-decoration:none;
    }
    .back{
        text-align: center;
    }
    .footer{
        position:fixed;
        margin-top:130px;
        color:white;
        text-align: center;
        width:100%
    }
    </style>

Pada code css saya menambahkan sebuah font facebolf.otf yang mana dapat didownload di sini : Download

Untuk Semua file dapat didownload di sini : DOWNLOAD

Untuk Tampilan seperti berikut ini :

VIDEO

H4nk

Diposting oleh H4nk

Posting Komentar

0 Komentar

Berikan Komentar yang bermanfaat dan sehat.