Want to impress your visitors with a cute login form that reacts when typing a password?
In this tutorial, we’ll create a Panda Login Form that closes its eyes when the user types in the password — using just HTML, CSS, and JavaScript.
Let’s build something fun and interactive! 🐼✨
✅ Features of This Panda Login Form
🐼 Cute panda face built with only HTML & CSS (no images)
👁️ Eyes close automatically when typing the password
📱 Fully responsive design
💻 Beginner-friendly and easy to understand
🎨 A fun way to improve UI/UX skills
🎨 Demo
👉 Video Tutorial: Watch
💾 Source Code
You can copy and paste the full source code below into your own project or test it in CodePen/JSFiddle.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Panda Form</title>
<!-- css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form>
<label for="username">Username:</label>
<input type="text" id="username" placeholder="Username here..">
<label for="password">Password:</label>
<input type="password" id="password" placeholder="Password here..">
<button>Login</button>
</form>
<div class="ear-1"></div>
<div class="ear-r"></div>
<div class="panda-face">
<div class="blush-1"></div>
<div class="blush-r"></div>
<div class="eye-1">
<div class="eyeball-1"></div>
</div>
<div class="eye-r">
<div class="eyeball-r"></div>
</div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
<div class="hand-1"></div>
<div class="hand-r"></div>
<div class="paw-1"></div>
<div class="paw-r"></div>
</div>
<!-- script -->
<script src="script.js"></script>
</body>
</html>
CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
background-color: #c9184a;
}
.container{
height: 31.25em;
width: 31.25em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
form{
width: 23.75em;
height: 18.75em;
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
top: calc(50% + 3.1em);
left: 50%;
padding: 0 3.1em;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 0.5em;
}
form label{
display: block;
margin-bottom: 0.2em;
font-weight: 600;
color: #2e0d30;
}
form input{
font-size: 0.95em;
font-weight: 400;
color: #3f3554;
padding: 0.3em;
border: none;
outline: none;
border-bottom: 0.12em solid #3f3554;
}
form input:focus{
border-color: #c9184a;
}
form input:not(:last-child){
margin-bottom: 0.9em;
}
form button{
font-size: 0.95em;
padding: 0.8em 0;
border-radius: 2em;
border: none;
outline: none;
background-color: #c9184a;
color: #fff;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.15em;
margin-top: 0.8em;
}
.panda-face{
height: 7.5em;
width: 8.4em;
background-color: #ffffff;
border: 0.18em solid #2e0d30;
border-radius: 7.5em 7.5em 5.62em 5.62em;
position: absolute;
top: 2em;
margin: auto;
left: 0;
right: 0;
}
.ear-1,
.ear-r{
background-color: #3f3554;
height: 2.5em;
width: 2.81em;
border: 0.18em solid #2e0d30;
border-radius: 2.5em 2.5em 0 0;
top: 1.75em;
position: absolute;
}
.ear-1{
transform: rotate(-38deg);
left: 10.75em;
}
.ear-r{
transform: rotate(38deg);
right: 10.75em;
}
.blush-1,
.blush-r{
background-color: #ff8bb1;
height: 1em;
width: 1.37em;
border-radius: 50%;
position: absolute;
top: 4em;
}
.blush-1{
transform: rotate(25deg);
left: 1em;
}
.blush-r{
transform: rotate(-25deg);
right: 1em;
}
.eye-1,
.eye-r{
background-color: #3f3554;
height: 2.18em;
width: 2em;
border-radius: 2em;
position: absolute;
top: 2.18em;
}
.eye-1{
left: 1.37em;
transform: rotate(-20deg);
}
.eye-r{
right: 1.37em;
transform: rotate(20deg);
}
.eyeball-1,
.eyeball-r{
height: 0.6em;
width: 0.6em;
background-color: #ffffff;
border-radius: 50%;
position: absolute;
left: 0.6em;
top: 0.6em;
transition: 1s all;
}
.eyeball-1{
transform: rotate(20deg);
}
.eyeball-r{
transform: rotate(-20deg);
}
.nose{
height: 1em;
width: 1em;
background-color: #3f3554;
position: absolute;
top: 4.37em;
margin: auto;
left: 0;
right: 0;
border-radius: 1.2em 0 0 0.25em;
transform: rotate(45deg);
}
.nose::before{
content: '';
position: absolute;
background-color: #3f3554;
height: 0.6em;
width: 0.1em;
transform: rotate(-45deg);
top: 0.75em;
left: 1em;
}
.mouth,
.mouth::before{
height: 0.75em;
width: 0.93em;
background-color: transparent;
position: absolute;
border-radius: 50%;
box-shadow: 0 0.18em #3f3554;
}
.mouth{
top: 5.31em;
left: 3.12em;
}
.mouth::before{
content: '';
position: absolute;
left: 0.87em;
}
.hand-1,
.hand-r{
background-color: #3f3554;
height: 2.81em;
width: 2.5em;
border: 0.18em solid #2e0d30;
border-radius: 0.6em 0.6em 2.18em 2.18em;
transition: 1s all;
position: absolute;
top: 8.4em;
}
.hand-1{
left: 7.5em;
}
.hand-r{
right: 7.5em;
}
.paw-1,
.paw-r{
background-color: #3f3554;
height: 3.12em;
width: 3.12em;
border: 0.18em solid #2e0d30;
border-radius: 2.5em 2.5em 1.2em 1.2em;
position: absolute;
top: 26.56em;
}
.paw-1{
left: 10em;
}
.paw-r{
right: 10em;
}
.paw-1::before,
.paw-r::before{
position: absolute;
content: '';
background-color: #ffffff;
height: 1.37em;
width: 1.75em;
top: 1.12em;
left: 0.55em;
border-radius: 1.56em 1.56em 0.6em 0.6em;
}
.paw-1::after,
.paw-r::after{
position: absolute;
content: '';
background-color: #ffffff;
height: 0.5em;
width: 0.5em;
border-radius: 50%;
top: 0.31em;
left: 1.12em;
box-shadow: 0.87em 0.37em #ffffff, -0.87em 0.37em #ffffff;
}
@media screen and (max-width: 500px){
.container{
font-size: 14px;
}
}
JavaScript:
let usernameRef = document.getElementById("username");
let passwordRef = document.getElementById("password");
let eyeL = document.querySelector(".eyeball-1");
let eyeR = document.querySelector(".eyeball-r");
let handL = document.querySelector(".hand-1");
let handR = document.querySelector(".hand-r");
let normalEyeStyle = () => {
eyeL.style.cssText = `
left: 0.6em;
top: 0.6em;
`;
eyeR.style.cssText = `
right: 0.6em;
top: 0.6em;
`;
};
let normalHandStyle = () => {
handL.style.cssText = `
height: 2.81em;
top: 8.4em;
left: 7.5em;
transform: rotate(0deg);
`;
handR.style.cssText = `
height: 2.81em;
top: 8.4em;
right: 7.5em;
transform: rotate(0deg);
`;
}
//when clicked on username input
usernameRef.addEventListener("focus", () => {
eyeL.style.cssText = `
left: 0.75em;
top: 1.12em;
`;
eyeR.style.cssText = `
right: 0.75em;
top: 1.12em;
`;
normalHandStyle();
});
//when clicked on password input
passwordRef.addEventListener("focus", () => {
handL.style.cssText = `
height: 6.56em;
top: 3.87em;
left: 11.75em;
transform: rotate(-155deg);
`;
handR.style.cssText = `
height: 6.56em;
top: 3.87em;
right: 11.75em;
transform: rotate(155deg);
`;
normalEyeStyle();
});
//when clicked outside username and password input
document.addEventListener("click", (e) => {
let clickedElem = e.target;
if (clickedElem != usernameRef && clickedElem != passwordRef){
normalEyeStyle();
normalHandStyle;
}
});
🧠 How It Works
When the password field is focused, JavaScript adds a style that "closes" the panda’s eyes. When the field is blurred, the eyes open again — giving a playful and cute animation effect.
💡 Why This Project Is Great
This kind of project helps you:
Practice DOM manipulationGet creative with CSS art
Add micro-interactions to improve UX
Make your login pages stand out!
📌 Final Thoughts
If you’re just starting with frontend development, this is a perfect mini-project to explore your creativity.
You can also customize it — maybe add dark mode, form validation, or more animations!
.png)
0 Comments