WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
A Code by jrj332790
243
jrj332790
Open In Editor
Publish Your Code
Recommended
6 February 2025
A Code by nathphr816
29 November 2024
A Code by efficientapp58
26 April 2025
A Code by lebronpaulsuarezz
HTML
Copy
Andev Web
Username:
Password:
Login
CSS
Copy
*{ padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #f4c531; } .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: #f4c531; } form input:not(:last-child) { margin-bottom: 0.9em; } form button { font-size: 0.95em; padding: 0.8em 0; border-radius: 2em; border: none; cursor: pointer; outline: none; background-color: #f4c531; color: #2e0d30; text-transform: uppercase; font-weight: 600; letter-spacing: 0.15em; margin-top: 0.8em; transition: 0.5s ; } .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; } }
JS
Copy
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(); } });