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

Membuat Tampilan Login Seperti Yahoo!
Software Engineering Enthusiast | Blogger | Creator of RubyPedia.com
23 Mei 2018

Yahoo! Inc. adalah sebuah perusahaan Internet multinasional yang berpusat di Sunnyvale, California, Amerika Serikat. Perusahaan ini terkenal karena portal webnya, serta mesin pencari (Yahoo! Search).

Pada tutorial kali ini kita akan belajar sama-sama cara membuat tampilan login ke akun yahoo dengan menggunakan bootstrap, pada tutorial sebelumnya kita sudah membahas bagaimana cara membuat tampilan login seperti gmail, kalian bisa melihatnya ditutorial berikut ini:


Membuat Tampilan Login Seperti Gmail Dengan Bootstrap


Langsung saja, pertama buatlah sebuah direktori / folder baru di htdocs (jika menggunakan xampp) misalkan namanya login-yahoo, didalam folder tersebut buatlah 2 buah file, yaitu:

  • index.html
  • style.css

Buka file index.html dan masukkan kode berikut ini:

<!DOCTYPE html>
<html>
<head>
    <title>Login Yahoo</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: 80px">
    <div class="row">
        <div class="col-md-3 col-md-offset-4">
            <div class="account-box">
                <div class="logo ">
                    <img src="https://s.yimg.com/rz/d/yahoo_id-ID_f_p_bestfit_2x.png" alt="" style="width: 100px" />
                </div>
                <form class="form-signin" action="#">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Email" required autofocus />
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" placeholder="Password" required />
                </div>
                <div class="form-group">
                <label class="checkbox" style="margin-left: 20px">
                    <input type="checkbox" value="remember-me" />
                    Keep me signed in
                </label>
                </div>
                <button class="btn btn-lg btn-block purple-bg" type="submit">
                    Sign in</button>
                </form>
                <a class="forgotLnk" href="http://www.jquery2dotnet.com">I can't access my account</a>
                <div class="or-box">
                    <span class="or">OR</span>
                    <div class="row">
                        <div class="col-md-6 row-block">
                            <a href="http://www.jquery2dotnet.com" class="btn btn-facebook btn-block">Facebook</a>
                        </div>
                        <div class="col-md-6 row-block">
                            <a href="http://www.jquery2dotnet.com" class="btn btn-google btn-block">Google</a>
                        </div>
                    </div>
                </div>
                <div class="or-box row-block">
                    <div class="row">
                        <div class="col-md-12 row-block">
                            <a href="http://www.jquery2dotnet.com" class="btn btn-primary btn-block">Create New Account</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Simpan file index.html diatas, kemudian buka dan masukkan kode berikut ini kedalam file style.css, berikut kodenya:

.account-box
{
    border: 2px solid rgba(153, 153, 153, 0.75);
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
    -o-border-radius: 2px;
    z-index: 3;
    font-size: 13px !important;
    font-family: "Helvetica Neue" ,Helvetica,Arial,sans-serif;
    background-color: #ffffff;
    padding: 20px;
}

.logo
{
    width: 138px;
    height: 30px;
    text-align: center;
    margin: 10px 0px 27px 40px;
    background-position: 0px -4px;
    position: relative;
}

.forgotLnk
{
    margin-top: 10px;
    display: block;
}

.purple-bg
{
    background-color: #6E329D;
    color: #fff;
}
.or-box
{
    position: relative;
    border-top: 1px solid #dfdfdf;
    padding-top: 20px;
    margin-top:20px;
}
.or
{
    color: #666666;
    background-color: #ffffff;
    position: absolute;
    text-align: center;
    top: -8px;
    width: 40px;
    left: 90px;
}
.account-box .btn:hover
{
    color: #fff;
}
.btn-facebook
{
    background-color: #3F639E;
    color: #fff;
    font-weight:bold;
}
.btn-google
{
    background-color: #454545;
    color: #fff;
    font-weight:bold;
}

Simpan file style.css dan coba jalankan project kita, dengan mengetikkan di address bar browser http://localhost/login-yahoo, maka kurang lebih tampilanya akan seperti berikut ini:


Referensi : https://bootsnipp.com/snippets/featured/yahoo-login-style


Blog ini telah dibaca sebanyak 450 kali
Bootstrap CSS3 HTML5 Login Login Style Yahoo Style Login Yahoo

Sekilas Tentang Penulis

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

KOMENTAR

blog comments powered by Disqus