Hey folks, let’s dive into today’s coding adventure! We’re going to create a friendly Panda Login Form using just HTML, CSS, and JavaScript. No need for anything complex – just some straightforward coding to add a touch of charm to your projects.
In this tutorial, we’re not just building a login form; we’re incorporating a lovable panda theme with the help of JavaScript. Whether you’re a coding pro or just starting out, this is a great opportunity to boost your skills and add a bit of fun to your web creations.
Why pandas, you ask? Well, who can resist the adorable charm of these furry creatures? So, let’s explore HTML for structure, CSS for styling, and JavaScript to bring our panda-themed login form to life.
Join me on this laid-back coding journey into the world of Panda Login Forms. We’ll play with HTML, CSS, and JavaScript to create something not only functional but also irresistibly cute.
Ready to add a touch of whimsy to your projects? Let’s embark on our Panda Login Form adventure – the HTML, CSS, and JavaScript way!
HTML :
The given code is an HTML document that creates a login form with a panda theme. It consists of a container with a form that includes input fields for username and password, as well as a login button. The form is styled with CSS to resemble a panda face, with ears, eyes, nose, mouth, and paws. JavaScript is included to handle any script-related functionality.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Panda Login Form</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<form>
<label for="username">Enter your username</label>
<input type="text" id="username" placeholder="Username" />
<label for="password">Enter your password</label>
<input type="password" id="password" placeholder="Password" />
<button>Login</button>
</form>
<div class="ear-l"></div>
<div class="ear-r"></div>
<div class="panda-face">
<div class="blush-l"></div>
<div class="blush-r"></div>
<div class="eye-l">
<div class="eyeball-l"></div>
</div>
<div class="eye-r">
<div class="eyeball-r"></div>
</div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
<div class="hand-l"></div>
<div class="hand-r"></div>
<div class="paw-l"></div>
<div class="paw-r"></div>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
CSS :
The provided code is CSS code that defines the styling for a web page. It includes various CSS selectors and properties to control the appearance of different elements on the page.
The code sets the font family to “Poppins” and applies a background color of #8e70e6 to the body element. It also defines a container element with a fixed height and width, positioned in the center of the page. Inside the container, there is a form element with a specific width, height, and background color. The form contains labels, inputs, and a button, each with their own styles.
Additionally, there is a panda face illustration created using CSS. It includes elements for the ears, blush, eyes, nose, mouth, hands, and paws. Each element has its own styles to create the desired appearance.
The code also includes a media query that applies a smaller font size to the container when the screen width is less than 500px.
Overall, the code defines the layout and styling for a form with a panda face illustration. The Poppins font is used throughout the design.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #8e70e6;
}
.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;
border-bottom: 0.12em solid #3f3554;
outline: none;
}
form input:focus {
border-color: #71c418;
}
form input::placeholder {
color: #b4b5b3;
}
form input:not(:last-child) {
margin-bottom: 0.9em;
}
form button {
font-size: 0.95em;
padding: 0.8em 0;
width: 18.6em;
border-radius: 4px;
border: none;
outline: none;
background-color: #c41857;
color: #fff;
text-transform: uppercase;
font-weight: 600;
cursor: pointer;
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-l,
.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-l {
transform: rotate(-38deg);
left: 10.75em;
}
.ear-r {
transform: rotate(38deg);
right: 10.75em;
}
.blush-l,
.blush-r {
background-color: #ff8bb1;
height: 1em;
width: 1.37em;
border-radius: 50%;
position: absolute;
top: 4em;
}
.blush-l {
transform: rotate(25deg);
left: 1em;
}
.blush-r {
transform: rotate(-25deg);
right: 1em;
}
.eye-l,
.eye-r {
background-color: #3f3554;
height: 2.18em;
width: 2em;
border-radius: 2em;
position: absolute;
top: 2.18em;
}
.eye-l {
left: 1.37em;
transform: rotate(-20deg);
}
.eye-r {
right: 1.37em;
transform: rotate(20deg);
}
.eyeball-l,
.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-l {
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-l,
.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-l {
left: 7.5em;
}
.hand-r {
right: 7.5em;
}
.paw-l,
.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-l {
left: 10em;
}
.paw-r {
right: 10em;
}
.paw-l: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-l: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:
The provided code is a JavaScript snippet that adds event listeners to the username and password input fields. When the username input field is clicked, the position of the eyeballs in the panda face changes. When the password input field is clicked, the position of the hands in the panda face changes. If the user clicks outside of the input fields, the positions of the eyeballs and hands return to their normal state.
let usernameRef = document.getElementById("username");
let passwordRef = document.getElementById("password");
let eyeL = document.querySelector(".eyeball-l");
let eyeR = document.querySelector(".eyeball-r");
let handL = document.querySelector(".hand-l");
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();
}
});
We’ve successfully crafted a Panda Login Form using HTML, CSS, and JavaScript. Great job, everyone! 🐼✨ Happy coding!
Facing challenges in your project? No problem! The source code is available for you. Simply hit Download and begin your coding journey. May your coding be filled with joy!
1 Comment
Pingback: 15 Free Login & Registration Form Projects in HTML CSS & JS | Frontend Project | Coding Stella