ADSENSE HERE!
Assalamuialaikum wr. wb
nahh untuk kemaren mimin sudah janji ingin membagikan template tentang form login, Okee langsung saja contoh FORM Loginnya seperti ini
Nahh untuk pertama kali yang kalian buat itu adalah Membuat Folder yang Judulnya "Form Login".
Nihh saya kasih codingnya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Membuat form login sederhana</title>
<!-- CSS -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/form-elements.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<!-- Top content -->
<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 text">
<h1><strong>SILAHKAN LOGIN</strong> dibawah ini</h1>
<div class="description">
<p>
Santai, Jangan Goyang
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<div class="form-top">
<div class="form-top-left">
<h3>Login terlebih dahulu</h3>
<p>Masukkan username dan password anda untuk login:</p>
</div>
<div class="form-top-right">
<i class="fa fa-key"></i>
</div>
</div>
<div class="form-bottom">
<form role="form" action="" method="post" class="login-form">
<div class="form-group">
<label class="sr-only" for="form-username">Username</label>
<input type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form-username">
</div>
<div class="form-group">
<label class="sr-only" for="form-password">Password</label>
<input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password">
</div>
<button type="submit" class="btn">Sign in!</button>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 social-login">
<h3>bisa melalui :</h3>
<div class="social-login-buttons">
<a class="btn btn-link-1 btn-link-1-facebook" href="#">
<i class="fa fa-facebook"></i> Facebook
</a>
<a class="btn btn-link-1 btn-link-1-twitter" href="#">
<i class="fa fa-twitter"></i> Twitter
</a>
<a class="btn btn-link-1 btn-link-1-google-plus" href="#">
<i class="fa fa-google-plus"></i> Google Plus
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
<script src="assets/js/scripts.js"></script>
<!--[if lt IE 10]>
<script src="assets/js/placeholder.js"></script>
<![endif]-->
</body>
</html>
Nahh untuk itu kita save terlebih dahulu dengan nama Index.html didalam folder tadi yang berjudul "Form Login"
Sekarang Kita lanjut ke CSS nya aja
body {
background: #f8f8f8;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
color: #888;
line-height: 30px;
text-align: center;
}
strong { font-weight: 500; }
a, a:hover, a:focus {
color: #4aaf51;
text-decoration: none;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
h1, h2 {
margin-top: 10px;
font-size: 38px;
font-weight: 100;
color: #555;
line-height: 50px;
}
h3 {
font-size: 22px;
font-weight: 300;
color: #555;
line-height: 30px;
}
.no-margin-top h3 { margin-top: 0; }
img { max-width: 100%; }
::-moz-selection { background: #4aaf51; color: #fff; text-shadow: none; }
::selection { background: #4aaf51; color: #fff; text-shadow: none; }
.container {
padding-bottom: 60px;
background: #f8f8f8;
}
.section-container {
margin: 0 auto;
}
.section-description {
margin-top: 60px;
padding-bottom: 10px;
}
.section-description.no-margin-top { margin-top: 0; }
.section-description p {
margin-top: 20px;
padding: 0 120px;
}
.top {
margin: 0 auto;
padding: 40px 0 50px 0;
}
.top .divider-1 span {
background: rgba(255, 255, 255, 0.8);
}
.top h1 {
margin-top: 40px;
padding-left: 15px;
padding-right: 15px;
}
.top p {
margin-top: 20px;
padding-left: 15px;
padding-right: 15px;
}
.layouts {
border-top: 1px solid #ddd;
}
.layout-box {
padding: 30px 20px 20px 20px;
}
.layout-box h3 {
padding: 10px 0;
}
.layout-box p {
margin-top: 20px;
margin-bottom: 0;
}
.layout-box img {
border: 5px solid #eee;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
.layout-box a:hover img { border-color: #ddd; }
.footer {
padding-top: 30px;
padding-bottom: 30px;
border-top: 1px solid #ddd;
}
@media (min-width: 768px) and (max-width: 991px) {
.section-description p { padding: 0; }
}
@media (max-width: 767px) {
.section-description p { padding: 0; }
}
@media (max-width: 415px) {
h1, h2 { font-size: 32px; }
}
Nahh untuk itu kita save terlebih dahulu dengan nama Style.Css didalam folder tadi yang berjudul "Form Login"
Gimana?? Dicoba aja dlu yaa semoga bermanfaat. Dan Itu baru Desain Form Login doang belom beserta PHP. Sok Jika ingin ditambahkan PHPnya bisa anda tambahkan sendiri didalam codingan tersebut
ADSENSE HERE!
No comments:
Post a Comment
Silahkan Masukkan komentar anda disini,