Membuat Desain Login Admin HTML5 dan CSS3 Keren

Membuat Tampilan Login Admin Keren

Kali ini zlearn.id akan berbagi source kode dan tutorial mengenai  bagaimana caranya membuat template login admin yang keren dan unik. Berbicara mengenai admin pastinya tak lepas dengan yang namanya sign in / log-in atau masuk. Login sendiri berguna untuk mengamankan sebuah situs dan seperti pintu masuk dengan username dan password sebagai kunci  untuk kita masuk.

Berdasarkan diatas dapat kita ambil kesimpulan bahwa login itu seperti pintu atau gerbang. jadi jika sebuah rumah dapat terkesan dari gerbangnya apakah sebuah rumah itu menarik atau tidak. nah sama halnya dengan sebuah situs yang dapat di nilai atau memiliki kesan dari halaman loginnya.

jadi kesimpulannya tampilan login itu mencerminkan dari sebuah situ maka dari itu kita mesti membuat tampilan admin yang simple, menarik, responsive dan enak dipandang ketika kita ingin memasuki laman login admin. maka dari itu  blog zlearn berbagi tutorial dan source kode nih mengenai caranya membuat desain/tampilan login admin yang simple, ui riendly dan enak digunakan . nah dalam pembuatan tampilan login admin  ini zlearn menggunkan framework bootsrap, html5, css3 dan javascript untuk pembuatan tampilannya:

yang mau lihat tangkap layar dari template/desain login admin di bawah ini:
http://www.zlearn.id/2017/07/membuat-desain-login-admin-html5-css3.html
fitur fitur yang dimiliki yaitu sbagai berikut:
  • Fast Loading
  • Menngunakan bootsrap 3.0
  • Responsive di semua device
  • Tampilan simple tapi elegant
baik bagi yang mau download source kodenya dapat di download di akhir postingan Membuat Desain Login Admin HTML5 dan CSS3 Keren

pertama yang harus and lakukan silahkan buatlah sebuah file denga nama index.html
kemudan ketikan kode berikut di text editor anda dan kemudian simpan


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Administrator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />  
  
<script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="../css/bootsrap.css">
<script  href="js/jquery.min.js"></script>

<style type="text/css">
    body{
        background-image: url(images/admin.jpg);
    }
    
.btn {
    position: relative;
    width: 100%;
    padding: 20px;
    border-radius: 6px;
    border: 0;
    background: #150206;
    font-size: 1.2em;
    color: #fff;
    text-shadow: 1px 1px 0px rgba(0,0,0,.1);
    box-shadow: 0px 3px 0px #45b0ff;
}
h1.admin{
    text-align: center;
    color: black;
}
</style>
</head>
<body>
<div class="form">
<form action="proses_login.php" method="POST" >

<h1 class="admin"><span class="glyphicon glyphicon-user"></span> |Administrator| </h1>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="username" name="username">
            </div>
            <div class="form-group">
                 <input type="password" class="form-control" placeholder="Password" name="password">
            </div>
<div class="form-group">
              <button class="btn btn-warning btn-lg btn-block" button-type="button">Log-In</button>
            </div>  


</div>
</form>
</div>
</body>
</html>

 Setelah simpan dan jalankan di browsur anda pastikan and sudah memiliki kompone bootsrap
bagi yang mau download source kodenya dapat di donwload disini beserta gambar dan file bootrapnya lengkap.




Untuk password zip yaitu : zlearn.id
 sekian tutorial programing dari zlearn semoga dapat bermanfaat dan membantu para pembaca sekalian terus kunjungi zlearn.id untuk tutorial dan informasi menarik lainnya. silahkan berapresiasi dengan menuliskan komentar anda di kolom komentar dan silahkan share dan bagikan postingan dari zlaern ini terimkkasih telah membaca   postingan Membuat Desain Login Admin HTML5 dan CSS3 Keren



Share this

Related Posts

Previous
Next Post »

Berita Unik

loading...