Table of Contents
Hello, Build a Panda Login Form in HTML5 & CSS3 We are going to know the vibrancy. There are many interesting facts in this article. Let’s move on to the articles
Build a Panda Login Form in HTML5 & CSS3
<div class="panda">
<div class="ear"></div>
<div class="face">
<div class="eye-shade"></div>
<div class="eye-white">
<div class="eye-ball"></div>
</div>
<div class="eye-shade rgt"></div>
<div class="eye-white rgt">
<div class="eye-ball"></div>
</div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
<div class="body"> </div>
<div class="foot">
<div class="finger"></div>
</div>
<div class="foot rgt">
<div class="finger"></div>
</div>
</div>
<form>
<div class="hand"></div>
<div class="hand rgt"></div>
<h1>Panda Login</h1>
<div class="form-group">
<input required="required" class="form-control"/>
<label class="form-label">Username </label>
</div>
<div class="form-group">
<input id="password" type="password" required="required" class="form-control"/>
<label class="form-label">Password</label>
<p class="alert">Invalid Credentials..!!</p>
<button class="btn">Login </button>
</div>
</form>@import "compass";
@import url(https://fonts.googleapis.com/css?family=Dancing+Script|Roboto);
*, *:after, *:before{
@include box-sizing(border-box);
}
$primary : #FF4081;
body{
background: $primary/ 1.25;
text-align: center;
font-family: 'Roboto', sans-serif;
}
.panda{
position: relative;
width: 200px;
margin: 50px auto;
}
.face{
width: 200px;
height: 200px;
background: #fff;
@include border-radius(100%);
margin: 50px auto;
@include box-shadow(0 10px 15px rgba(0,0,0,.15));
z-index: 50;
position: relative;
}
.ear{
position: absolute;
width: 80px;
height: 80px;
background: #000;
z-index: 5;
border:10px solid #fff;
left: -15px;
top: -15px;
@include border-radius(100%);
&:after{
content: '';
@extend .ear;
left: 125px;
}
}
.eye-shade{
background: #000;
width: 50px;
height: 80px;
margin: 10px;
position: absolute;
top: 35px;
left: 25px;
@include rotate(220deg);
@include border-radius(25px / 20px 30px 35px 40px);
&.rgt{
@include rotate(140deg);
left: 105px;
}
}
.eye-white{
position: absolute;
width: 30px;
height: 30px;
@include border-radius(100%);
background: #fff;
z-index: 500;
left: 40px;
top: 80px;
overflow: hidden;
&.rgt{
right: 40px;
left: auto;
}
}
.eye-ball{
position: absolute;
width: 0px;
height: 0px;
left: 20px;
top: 20px;
max-width: 10px;
max-height: 10px;
@include transition(.1s);
&:after{
content: '';
background: #000;
position: absolute;
@include border-radius(100%);
right: 0;
bottom: 0px;
width: 20px;
height: 20px;
}
}
.nose{
position: absolute;
height: 20px;
width: 35px;
bottom: 40px;
left: 0;
right: 0;
margin: auto;
@include border-radius(50px 20px/ 30px 15px);
@include rotate(15deg);
background: #000;
}
.body{
background: #fff;
position: absolute;
top: 200px;
left: -20px;
@include border-radius(100px 100px 100px 100px / 126px 126px 96px 96px);
width: 250px;
height: 282px;
@include box-shadow(0 5px 10px rgba(0,0,0,.3));
}
.hand{
width: 40px;
height: 30px;
@include border-radius(50px);
@include box-shadow(0 2px 3px rgba(0,0,0,.15));
background: #000;
margin: 5px;
position: absolute;
top: 70px;
left: -25px;
&:after, &:before{
content: '';
@extend .hand;
left: -5px;
top: 11px;
}
&:before{
top: 26px;
}
&.rgt{
left: auto;
right: -25px;
&:after, &:before{
left: auto;
right: -5px;
}
}
}
.foot{
top: 360px;
left: -80px;
position: absolute;
background: #000;
z-index: 1400;
@include box-shadow(0 5px 5px rgba(0,0,0,.2));
@include border-radius(40px 40px 39px 40px / 26px 26px 63px 63px);
width: 82px;
height: 120px;
&:after{
content: '';
width: 55px;
height: 65px;
background: #222;
@include border-radius(100%);
position: absolute;
bottom: 10px;
left: 0;
right: 0;
margin: auto;
}
.finger{
position: absolute;
width: 25px;
height: 35px;
background: #222;
@include border-radius(100%);
top: 10px;
right: 5px;
&:after, &:before{
content: '';
@extend .finger;
right: 30px;
width: 20px;
top: 0;
}
&:before{
right: 55px;
top: 5px;
}
}
&.rgt{
left: auto;
right: -80px;
.finger{
left: 5px;
right: auto;
&:after{
left: 30px;
right: auto;
}
&:before{
left: 55px;
right: auto;
}
}
}
}
form{
display: none;
max-width: 400px;
padding: 20px 40px;
background: #fff;
height: 300px;
margin: auto;
display: block;
@include box-shadow(0 10px 15px rgba(0,0,0,.15));
@include transition(.3s);
position: relative;
@include translateY(-100px);
z-index: 500;
border:1px solid #eee;
&.up{
@include translateY(-180px);
}
}
h1{
color: $primary;
font-family: 'Dancing Script', cursive;
}
.btn{
background: #fff;
padding: 5px;
width: 150px;
height: 35px;
border:1px solid $primary;
margin-top: 25px;
cursor: pointer;
@include transition(.3s);
@include box-shadow(0 50px $primary inset);
color: #fff;
&:hover{
@include box-shadow(0 0 $primary inset);
color: $primary;
}
&:focus{
outline: none;
}
}
.form-group{
position: relative;
font-size: 15px;
color: #666;
&+&{
margin-top: 30px;
}
.form-label{
position: absolute;
z-index: 1;
left: 0;
top: 5px;
@include transition(.3s);
}
.form-control{
width: 100%;
position: relative;
z-index: 3;
height: 35px;
background: none;
border:none;
padding: 5px 0;
@include transition(.3s);
border-bottom: 1px solid #777;
color: #555;
&:invalid{outline: none;}
&:focus , &:valid{
outline: none;
@include box-shadow(0 1px $primary);
border-color:$primary;
+ .form-label{
font-size: 12px;
color: $primary;
@include translateY(-15px);
}
}
}
}
.alert{
position: absolute;
color: #f00;
font-size: 16px;
right: -180px;
top: -300px;
z-index: 200;
padding: 30px 25px;
background: #fff;
@include box-shadow(0 3px 5px rgba(0,0,0,.2));
@include border-radius(50%);
opacity: 0;
@include scale(0);
@include transition(.4s .6s linear);
&:after, &:before{
content: '';
position: absolute;
width: 25px;
height: 25px;
background: #fff;
left: -19px;
bottom: -8px;
@include box-shadow(0 2px 5px rgba(0,0,0,.2));
@include border-radius(50%);
}
&:before{
width: 15px;
height: 15px;
left: -35px;
bottom: -25px;
}
}
.wrong-entry {
@include animation( wrong-log 0.3s);
.alert{
opacity: 1;
@include scale(1);
}
}
@include keyframes (eye-blink) {
to { height: 30px;}
}
@include keyframes (wrong-log) {
0%, 100% { left: 0px;}
20% , 60%{left: 20px;}
40% , 80%{left: -20px;}
}$('#password').focusin(function(){
$('form').addClass('up')
});
$('#password').focusout(function(){
$('form').removeClass('up')
});
// Panda Eye move
$(document).on( "mousemove", function( event ) {
var dw = $(document).width() / 15;
var dh = $(document).height() / 15;
var x = event.pageX/ dw;
var y = event.pageY/ dh;
$('.eye-ball').css({
width : x,
height : y
});
});
// validation
$('.btn').click(function(){
$('form').addClass('wrong-entry');
setTimeout(function(){
$('form').removeClass('wrong-entry');
},3000 );
});Read Also: Vue.js Add or Remove Line Breaks From Text Online Tool in Browser Using HTML5 CSS3 and Javascript
Final Words
We hope that you and your doubts have been resolved through the article Build a Panda Login Form in HTML5 & CSS3. And if you have any doubts let us know via the comment box. We cater to your doubts. And if you liked this article, we ask you to share it with your friends.
