Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Membuat Tampilan Login Seperti Gmail Dengan Bootstrap
Software Engineering Enthusiast | Blogger | Creator of RubyPedia.com
23 Mei 2018

Gmail menyedikan kapasitas penyimpanan sebanyak lebih dari 7538 megabyte dan terus bertambah. Jumlah ini lebih dari jumlah yang disediakan situs lain. seperti Yahoo! dan Hotmail. Hal ini berarti para pengguna dapat menyimpan sampai ribuan surat elektronik. Sampai saat ini, gmail merupakan email dengan kapasitas terbanyak.

Bootstrap sebuah framework css yang dapat digunakan untuk mempermudah membangun tampilan web. Bootstrap pertama kali di kembangkan pada pertangahan 2010 di Twitter oleh Mark Otto dan Jacob Thornton.

Nah tanpa disadari sebelum kita menggunakan aplikasi Gmail ternyata kita harus melakukan autentikasi atau login ke akun Google kita, nah pada tutorial kali ini kita bersama-sama akan belajar bagaimana membuat tampilan login Gmail menggunakan Bootstrap.

Langsung saja, buatlah sebuah folder baru di htdocs (jika menggunakan xampp) dan beri nama misalkan login-gmail, dalam folder tersebut buatlah 2 buah file yaitu :

  • index.html
  • style.css

NOTE : dalam praktek kali ini kita menggunakan resources Bootstrap dari internet menggunakan CDN, untuk temen-temen yang ingin bisa menggunakan dengan offline bisa mendownload Botstrapnya di getbootstrap.com

Oke, selenjutnya buka file index.html dan masukkan kode berikut ini:

<!DOCTYPE html>
<html>
<head>
    <title>Sign to Google Account</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container" style="margin-top: 100px">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-md-offset-4">
            <h1 class="text-center login-title">Sign in to continue to gmail</h1>
            <div class="account-wall">
                <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
                    alt="">
                <form class="form-signin">
                <input type="text" class="form-control" placeholder="Email" required autofocus>
                <input type="password" class="form-control" placeholder="Password" required>
                <button class="btn btn-lg btn-primary btn-block" type="submit">
                    Sign in</button>
                <label class="checkbox pull-left">
                    <input type="checkbox" value="remember-me">
                    Remember me
                </label>
                <a href="#" class="pull-right need-help">Need help? </a><span class="clearfix"></span>
                </form>
            </div>
            <a href="#" class="text-center new-account">Create an account </a>
        </div>
    </div>
</div>
</body>
</html>

Simpanlah file index.html tersebut, selanjutnya buka dan masukkan kode berikut ini kedalam style.css, berikut source codenya:

.form-signin
{
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}
.form-signin .form-signin-heading, .form-signin .checkbox
{
    margin-bottom: 10px;
}
.form-signin .checkbox
{
    font-weight: normal;
}
.form-signin .form-control
{
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.form-signin .form-control:focus
{
    z-index: 2;
}
.form-signin input[type="text"]
{
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.form-signin input[type="password"]
{
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.account-wall
{
    margin-top: 20px;
    padding: 40px 0px 20px 0px;
    background-color: #f7f7f7;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login-title
{
    color: #555;
    font-size: 18px;
    font-weight: 400;
    display: block;
}
.profile-img
{
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    display: block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.need-help
{
    margin-top: 10px;
}
.new-account
{
    display: block;
    margin-top: 10px;
}

Simpan file style.css dan coba kalian jalankan dengan mengetikan di address bar browser http://localhost/login-gmail, maka kalian akan melihat tampilanya kurang lebih seperti berikut ini:

Blog ini telah dibaca sebanyak 789 kali
Bootstrap HTML5 CSS3 Login Gmail Style Gmail

Sekilas Tentang Penulis

Fika Ridaul Maulayya
Software Engineering Enthusiast | Blogger | Creator of RubyPedia.com

KOMENTAR

blog comments powered by Disqus