Flat Login Form CSS3 by Andy Tran
Desainer menggunakan pendekatan yang berbeda untuk membuat proses login sederhana dan nyaman. Hari ini kami telah mengumpulkan beberapa formulir masuk gratis yang dibuat dengan HTML dan CSS. Kami telah memilih formulir Login terbaik yang menggunakan praktik UI / UX terbaru. Semua formulir masuk ini gratis untuk digunakan dalam proyek Anda. Kami yakin ini akan menghemat waktu untuk Proyek Anda berikutnya.
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Flat Login Form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="info">
<h1>Flat Login Form</h1><span>Made with <i class="fa fa-heart"></i> by <a href="http://andytran.me">Andy Tran</a></span>
</div>
</div>
<div class="form">
<div class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/hat.svg"/></div>
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? <a href="#">Sign In</a></p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? <a href="#">Create an account</a></p>
</form>
</div>
<video id="video" autoplay="autoplay" loop="loop" poster="polina.jpg">
<source src="http://andytran.me/A%20peaceful%20nature%20timelapse%20video.mp4" type="video/mp4"/>
</video>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
style.css
/* Form */
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 300px;
margin: 0 auto 100px;
padding: 30px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
text-align: center;
}
.form .thumbnail {
background: #EF3B3A;
width: 150px;
height: 150px;
margin: 0 auto 30px;
padding: 50px 30px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.form .thumbnail img {
display: block;
width: 100%;
}
.form input {
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 14px;
}
.form button {
outline: 0;
background: #EF3B3A;
width: 100%;
border: 0;
padding: 15px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #EF3B3A;
text-decoration: none;
}
.form .register-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before, .container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
/* END Form */
/* Demo Purposes */
body {
background: #ccc;
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body:before {
content: "";
position: fixed;
top: 0;
left: 0;
display: block;
background: rgba(255, 255, 255, 0.8);
width: 100%;
height: 100%;
}
#video {
z-index: -99;
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
index.js
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});Sekian share kali ini semoga apa yang kami share di atas bermafaat bagi anda semu, Salam blogger.