<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html class=""><head>
<head>
<title> Material UI login form - Kvcodes</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans|PT+Sans|Roboto|Roboto+Slab|Titillium+Web" rel="stylesheet">
<style class="cp-pen-styles">* { box-sizing:border-box; }
body {
font-family: 'PT Sans', sans-serif;
/*font-family: 'Open Sans', sans-serif;
font-family: 'Lato', sans-serif;
font-family: 'PT Sans', sans-serif;
font-family: 'Roboto Slab', serif;
font-family: 'Titillium Web', sans-serif;*/
background: #ebebeb;
-webkit-font-smoothing: antialiased;
}
hgroup { text-align:center; margin-top: 3em; opacity: 0.7; padding: 30px; background: #f94699;}
h1, h3 { font-weight: 300; }
h1 { color: #fff; }
form { padding: 30px; padding-top: 60px; background: #fff;}
.powered{ padding: 10px; margin-top: -16px; line-height: 25px; background: #f94699;}
.powered a { color: #ddd; text-decoration: none;}
.powered a:hover { font-style:italic;}
.group { position: relative; margin-bottom: 45px; }
input { font-size: 18px; padding: 10px 10px 10px 5px; -webkit-appearance: none; display: block; background: transparent; color: #03a9f4; width: 100%; border: none; border-radius: 0; border-bottom: 1px solid #ddd;}
input:focus { outline: none; }
/* Label */
label { color: #999; font-size: 18px; font-weight: normal; position: absolute; pointer-events: none; left: 5px; top: 10px; -webkit-transition:all 0.2s ease; transition: all 0.2s ease;}
/* active */
input:focus ~ label, input.used ~ label { top: -20px; -webkit-transform: scale(.75); transform: scale(.75); left: -2px; color: #4a89dc;}
/* Underline */
.bar { position: relative; display: block; width: 100%;}
.bar:before, .bar:after { content: ''; height: 2px; width: 0; bottom: 1px; position: absolute; background: #4a89dc; -webkit-transition:all 0.2s ease; transition: all 0.2s ease;}
.bar:before { left: 50%; }
.bar:after { right: 50%; }
/* active */
input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; }
/* Highlight */
.highlight { position: absolute; height: 60%; width: 100px; top: 25%; left: 0; pointer-events: none; opacity: 0.5;}
/* active */
input:focus ~ .highlight { -webkit-animation: inputHighlighter 0.3s ease; animation: inputHighlighter 0.3s ease;}
/* Animations */
@-webkit-keyframes inputHighlighter {
from { background: #4a89dc; }
to { width: 0; background: transparent; }
}
@keyframes inputHighlighter {
from { background: #4a89dc; }
to { width: 0; background: transparent; }
}
div.background{ position: fixed; width: 100%; z-index: -1; height: 100%; right: -10%;}
div.background2 { position: fixed; width: 100%; z-index: -1; height: 100%; left: 6%;}
div.background:before { content: ''; position: absolute; top: 0; right: 0; width: 80%; height: 70%; /* opacity: 0.8; */ background-color: #ff0077; border-bottom: 30px solid #e6016c; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: skewX(30deg); -ms-transform: skewX(30deg); transform: skewY(30deg); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-shadow: 0px 0px 20px #89898a;}
div.background2:before { content: ''; position: absolute; bottom: 0; left: 0; width: 50%; height: 100%; background-color: #ff0077; border-right: 50px solid #e6016c; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: skewX(60deg); -ms-transform: skewX(60deg); transform: skewX(60deg); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-shadow: 0px 0px 20px #89898a;}
html, body{ background-size:cover; margin:0;padding:0; height:100%;}
.buttonui { position: relative; padding: 8px 45px; line-height: 30px; overflow: hidden; border-width: 0; outline: none; border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); background-color: #ff0077; color: #ecf0f1; transition: background-color .3s;}
.buttonui:before { content: ""; position: absolute; top: 50%; left: 50%; display: block; width: 0; padding-top: 0; border-radius: 100%; background-color: rgba(236, 240, 241, .3); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.buttonui span { padding: 12px 24px; font-size:16px;}
.loginForm { width: 420px; margin: 0 auto; z-index: 99; display: block; margin-top: 5%; background: transparent; border-radius: .25em .25em .4em .4em; text-align: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); color: #fff;}
/* Ripples container */
.ripples { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: transparent;}
.ripplesCircle { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.25);}
.ripples.is-active .ripplesCircle { -webkit-animation: ripples .4s ease-in; animation: ripples .4s ease-in;}
/* Ripples animation */
@-webkit-keyframes ripples {
0% { opacity: 0; }
25% { opacity: 1; }
100% {
width: 200%;
padding-bottom: 200%;
opacity: 0;
}
}
@keyframes ripples {
0% { opacity: 0; }
25% { opacity: 1; }
100% {
width: 200%;
padding-bottom: 200%;
opacity: 0;
}
}
@media screen and (max-width: 860px){
div.background{ margin-top: -10%; }
}
@media screen and (max-width: 560px){
div.background{ margin-top: -50%; }
}
@media screen and (max-width: 460px){
.loginForm{ width: 100%; max-width: 420px; }
div.background{ margin-top: -60%; }
div.background2{ margin-top: -10%; }
div.background2:before{ width: 80%; }
form, .powered { opacity: 0.8; }
}
@media screen and (max-width: 380px){
div.background{ margin-top: -80%; }
div.background2{ margin-top: -10%; }
div.background2:before{ width: 100%; }
}
</style></head><body>
<div class="background"></div>
<div class="background2"></div>
<div class="loginForm">
<hgroup>
<h1>Kvcodes Login</h1>
</hgroup>
<form>
<div class="group">
<input type="email" class="used"><span class="highlight"></span><span class="bar"></span>
<label>Username</label>
</div>
<div class="group">
<input type="password"><span class="highlight"></span><span class="bar"></span>
<label>Password</label>
</div>
<button type="button" class="buttonui "> <span> Subscribe </span>
<div class="ripples buttonRipples"><span class="ripplesCircle"></span></div>
</button>
</form>
<div class="powered">
Powered by <a href="http://www.kvcodes.com"> Kvcodes </a>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>$(window, document, undefined).ready(function() {
$('input').blur(function() {
var $this = $(this);
if ($this.val())
$this.addClass('used');
else
$this.removeClass('used');
});
var $ripples = $('.ripples');
$ripples.on('click.Ripples', function(e) {
var $this = $(this);
var $offset = $this.parent().offset();
var $circle = $this.find('.ripplesCircle');
var x = e.pageX - $offset.left;
var y = e.pageY - $offset.top;
$circle.css({
top: y + 'px',
left: x + 'px'
});
$this.addClass('is-active');
});
$ripples.on('animationend webkitAnimationEnd mozAnimationEnd oanimationend MSAnimationEnd', function(e) {
$(this).removeClass('is-active');
});
});
</script>
</body></html>
