Membuat Desain Login Colorfull Web HTML5 dan CSS3


http://www.zlearn.id/2017/07/membuat-desain-login-colorfull-web.html

Login merupakan sebuah form yang berfungsi untuk kiata memasuki sebuah situs, komputer maupun sesuatu yang bersifat  mengandung data data sensisitif. Dengaan meamsukan Userame dan Passoword. Nah dari uraian di atas sebuah situs  entah itu  situis sosial media, admin, blog, email dan sebagainya pasti memerlukan hak akses untuk masuk menggunkan proses login.

Nah pada kesmpatan ini zlearn mau berbagi nih tutorial dan source kode mengenai Membuat Desain Login Colorfull Web HTML5 dan CSS3. Nah desain login yang unik dan menarik pasti membuat user atau pengguna jadi betah untuk login. Kenapa karena logi seperti pintu gerbang yang mencerminkan dari sebuah situs. Nah kali ini zlearn  mau membagikan source kode login yang unik, menarik dan penuh warna berikut tutorial dan source kodenya dapa di download di akhir postingan ini:

Nah pertama buat sebuah file dengan nama index.html Berikut scriptnya:

<!DOCTYPE html>
<html>
<head>
<title>Login My Student zlearn.id</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Tab Login Form widget template Responsive, Login form web template,Flat Pricing tables,Flat Drop downs  Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--web-fonts-->
<link href='//fonts.googleapis.com/css?family=Signika:400,300,600,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
<!--//web-fonts-->
<!--js-->
<script src="js/jquery.min.js"></script>
<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#horizontalTab").easyResponsiveTabs({
type: 'default', //Types: default, vertical, accordion           
width: 'auto', //auto or any width like 600px
fit: true   // 100% fit in a container
});
});
  </script>
<!--//js-->
<style type="text/css">
h1 {
    font-size: 3em;
    text-align: center;
    color: #FFFFFF;
    font-family: 'Righteous', cursive;
}

.login-bottom ul li a {
    display: block;
    width: 35px;
    height: 30px;
    text-align: center;
    background-color: #04B6EF;
}

.submit input[type="submit"] {
    font-size: 13px;
    color: #EEF5F7;
    background: #1CC4D0;
    border: 2px solid #FCFFFD;
    outline: none;
    cursor: pointer;
    padding: 6px 13px;
}

.resp-tab-active {
    text-shadow: none;
    color: #00C0FF;
}

.login-right input[type="text"], .login-right input[type="password"] {
    outline: none;
    font-size: 1em;
    color: #cecfd3;
    padding: 19px 30px 10px 10px;
    margin: 0;
    width: 89.87%;
    border: none;
    border-bottom: 2px solid #4395E2;
    -webkit-appearance: none;
}
</style>


</head>
<body>
<!-- main -->
<div class="main">
<h1>Silahkan Log-In !!!</h1>
<div class="login-form">
<div class="login-left">
<div class="logo">
<img src="images/avtar.png" alt=""/>
<h2>Welcome </h2>
<p>Jalani Hidup Dengan Disiplin</p>
</div>
<div class="social-icons">
<ul>
<li><a href="#"><img src="images/i1.png" alt=""/></a></li>
<li><a href="#" class="twt"><img src="images/i2.png" alt=""/></a></li>
<li><a href="#" class="ggl"><img src="images/i3.png" alt=""/></a></li>
</ul>
</div>
</div>
<div class="login-right">
<div class="sap_tabs">
<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
<ul class="resp-tabs-list">
<li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><span>Login</span></li>

<div class="clear"> </div>
</ul>    
<div class="resp-tabs-container">
<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
<div class="login-top">
<form action="proses_login.php" method="POST">
<input type="text" class="email" placeholder="username" name="username" required=""/>
<input type="password" class="password" placeholder="Password" placeholder="Password" name="password" required=""/>

<div class="login-text">
<ul>
<li><label><input type="checkbox" value="Remember-Me" /> Ingat Saya?</label></li>
<li><a href="siswa/login.php" ><img src="images/siswa.png">  Login Siswa</a></li>
</div>
<div class="login-bottom login-bottom1">
<div class="submit">

<input type="submit" value="LOGIN"/>
</form>
</div>
<ul>
<li><p>Kunjungi Kami</p></li>
<li><a href="#"><img src="images/i1.png" alt=""/></a></li>
<li><a href="#" class="twt"><img src="images/i2.png" alt=""/></a></li>
<li><a href="#" class="ggl"><img src="images/i3.png" alt=""/></a></li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">

</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
</div>

</body>
</html>

Kemudian Simpan dan untuk mencari bacgrounnya anda dapat keyword flat desain background  dan untuk iconnya dapat mencari dengan keyword icon student dan pastikan anda sudah mempunyai komponen seperti jquery dan bootraps anda dapat mendownload di situs remsi bootsrap.

  Dan bila anda gak pingin repot repot anda dapat mendownload source kode Login Colorfull Web HTML5 dan CSS3 silahkan download di tautan di bawah ini:

Baca Juga:
Tutorial Membuat Gallery Web Keren dan Source Kode
Membuat Desain Login Colorfull Web HTML5 dan CSS3
Kumpulan Source Kode Programing Gratis
Kumpulan Tips dan Trik Blogging
Kumpulan Tutorial Web Desain
Membuat tampilan login admin simple elegan

Download


dan jika compresan zip nya di passoword = zlearn.id
Terimaksih silahkan kunjungi terus zlearn.id untuk informasi web desain programing dan tutorial menarik lainnya dan silahkan share postingan ini dan bila da pertanyaan silahkan tuliskan koentar anda di kolom yang sudah tersedia. Happy Programin.

Share this

Related Posts

Previous
Next Post »

2 komentar

komentar
17 Agustus 2017 05.09 delete

Ok Makasih Gan Saputra Jangan Bosen . Kunjungi Blog zlearn.id terus.... Makasih gan telah berkunjung.

Reply
avatar

Berita Unik

loading...