Creating an Adorable Panda-Themed Login Form Using HTML, CSS, and JavaScript
 |
| Form Panda Login |
If you're looking to add a touch of whimsy to your website's login page, why not consider a charming panda-themed login form? With a delightful panda face and playful animations, this form will surely bring a smile to your users' faces while they interact with your site. In this tutorial, we'll guide you through the process of creating this endearing login form using HTML, CSS, and JavaScript.
HTML Structure:
Let's start by setting up the HTML structure for our panda-themed login form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Panda Login Form</title>
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="panda">
<!-- Panda face elements -->
</div>
<form>
<!-- Login form elements -->
</form>
</body>
</html>
CSS Styling:Now, let's add the CSS styles to create the adorable panda-themed login 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;}
}
JavaScript Interaction:Finally, let's implement the JavaScript interactions to enhance the form's functionality.
$('#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 );
});
Conclusion:By following this tutorial, you've learned how to create a playful panda-themed login form using HTML, CSS, and JavaScript. The form features interactive elements like moving eyes and a dynamic animation that makes it engaging and delightful for users to interact with. This cute and creative login form is a fantastic way to inject some personality into your website while maintaining usability and functionality. Customize the colors, animations, and interactions to match your site's theme, and make sure to have fun along the way!