Animated Login Form Using HTML CSS JS WITH Source code

By -

 Animated Login Form Using HTML CSS JS WITH Source code


youtube link-   CLICK HERE













HTML CODE
Index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>login animated page </title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
    />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
    <!-- gaurav tripathi -->
  </head>
  <body>
    <!-- SVG Image Start  -->
    <div class="container">
      <div class="ear ear--left"></div>
      <div class="ear ear--right"></div>
      <div class="face">
        <div class="eyes">
          <div class="eye eye--left">
            <div class="glow"></div>
          </div>
          <div class="eye eye--right">
            <div class="glow"></div>
          </div>
        </div>
        <div class="nose">
          <svg width="38.161" height="22.03">
            <path
              d="M2.017 10.987Q-.563 7.513.157 4.754C.877 1.994 2.976.135 6.164.093 16.4-.04 22.293-.022 32.048.093c3.501.042 5.48 2.081 6.02 4.661q.54 2.579-2.051 6.233-8.612 10.979-16.664 11.043-8.053.063-17.336-11.043z"
              fill="#243946"
            ></path>
          </svg>
          <div class="glow"></div>
        </div>
        <div class="mouth">
          <svg class="smile" viewBox="-2 -2 84 23" width="84" height="23">
            <path
              d="M0 0c3.76 9.279 9.69 18.98 26.712 19.238 17.022.258 10.72.258 28 0S75.959 9.182 79.987.161"
              fill="none"
              stroke-width="3"
              stroke-linecap="square"
              stroke-miterlimit="3"
            ></path>
          </svg>
          <div class="mouth-hole"></div>
          <div class="tongue breath">
            <div class="tongue-top"></div>
            <div class="line"></div>
            <div class="median"></div>
          </div>
        </div>
      </div>
      <div class="tengah">
        <div class="hands">
          <div class="hand hand--left">
            <div class="finger">
              <div class="bone"></div>
              <div class="nail"></div>
            </div>
            <div class="finger">
              <div class="bone"></div>
              <div class="nail"></div>
            </div>
            <div class="finger">
              <div class="bone"></div>
              <div class="nail"></div>
            </div>
          </div>
          <div class="hand hand--right">
            <div class="finger">
              <div class="bone"></div>
              <div class="nail"></div>
            </div>
            <div class="finger">
              <div class="bone"></div>
              <div class="nail"></div>
            </div>
            <div class="finger">
              <div class="bone"></div>
              <div class="nail"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- SVG Image End -->

      <!-- Form Start -->
      <div class="tengah">
        <div class="login">
          <label>
            <div class="fas fa-user"></div>
            <input
              class="username"
              type="text"
              autocomplete="on"
              placeholder="Username"
            />
          </label>
          <label>
            <div class="fas fa-lock"></div>
            <input
              class="password"
              type="password"
              autocomplete="off"
              placeholder="password"
            />
            <button class="password-button">show</button>
          </label>
          <button class="login-button">sign in</button>
        </div>
      </div>

      <!-- Form End -->

      <!-- Footer Start  -->
     
    </div>
    <!-- Footer End -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
  </body>
</html>













css code 
save as-    Style.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;500;600;700&display=swap");
* {
  box-sizing: border-box;
  text-transform: capitalize;
  font-family: "Poppins", sans-serif;
}
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.container {
  position: relative;
  top: 50%;
  left: 50%;
  display: inline-block;
  width: 100vw;
  height: 100vh;
  border-radius: 3px;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background-image: linear-gradient(to top right, #e98408, #c85ff9);
}

.container .ear {
  position: absolute;
  top: -110px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #c48e19;
}
.container .ear.ear--left {
  left: 78px;
}
.container .ear.ear--right {
  right: 89px;
}
.container .face {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  height: 150px;
  margin: 80px auto 10px;
  --rotate-head: 0deg;
  transform: rotate(var(--rotate-head));
  transition: transform 0.2s;
  transform-origin: center 20px;
}
.container .eye {
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #d41a42;
}
.container .eye.eye--left {
  margin-right: 40px;
}
.container .eye.eye--right {
  margin-left: 40px;
}
.container .eye .glow {
  position: relative;
  top: 3px;
  right: -12px;
  width: 12px;
  height: 6px;
  border-radius: 50%;
  background-color: #e4dbdb;
  transform: rotate(38deg);
}
.container .nose {
  position: relative;
  top: 30px;
  transform: scale(1.1);
}
.container .nose .glow {
  position: absolute;
  top: 3px;
  left: 32%;
  width: 15px;
  height: 8px;
  border-radius: 50%;
  background-color: #646863;
}
.container .mouth {
  position: relative;
  margin-top: 45px;
}
.container svg.smile {
  position: absolute;
  left: -28px;
  top: -19px;
  transform: scaleX(1.1);
  stroke: #c52238;
}
.container .mouth-hole {
  position: absolute;
  top: 0;
  left: -50%;
  width: 60px;
  height: 15px;
  border-radius: 50%/100% 100% 0% 0;
  transform: rotate(180deg);
  background-color: #c59e33;
  z-index: -1;
}
.container .tongue {
  position: relative;
  top: 5px;
  width: 30px;
  height: 20px;
  background-color: #a11d3a;
  transform-origin: top;
  transform: rotateX(60deg);
}
.container .tongue.breath {
  -webkit-animation: breath 0.3s infinite linear;
  animation: breath 0.3s infinite linear;
}
.container .tongue-top {
  position: absolute;
  bottom: -15px;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: #dd2029;
}
.container .line {
  position: absolute;
  top: 0;
  width: 30px;
  height: 5px;
  background-color: #851010;
}
.container .median {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 25px;
  border-radius: 5px;
  background-color: #a31717;
}
.container .hands {
  position: relative;
}
.container .hands .hand {
  position: absolute;
  top: -3px;
  display: flex;
  transition: transform 0.5s ease-in-out;
  z-index: 1;
}
.container .hands .hand--left {
  left: -85px;
}
.container .hands .hand--left.hide {
  transform: translate(2px, -155px) rotate(-160deg);
}
.container .hands .hand--left.peek {
  transform: translate(0px, -120px) rotate(-160deg);
}
.container .hands .hand--right {
  left: 30px;
}
.container .hands .hand--right.hide {
  transform: translate(-6px, -155px) rotate(160deg);
}
.container .hands .hand--right.peek {
  transform: translate(-4px, -120px) rotate(160deg);
}
.container .hands .finger {
  position: relative;
  z-index: 0;
}
.container .hands .finger .bone {
  width: 20px;
  height: 20px;
  border: 2px solid #f33b0d;
  border-bottom: none;
  border-top: none;
  background-color: #862525;
}
.container .hands .finger .nail {
  position: absolute;
  left: 0;
  top: 10px;
  width: 20px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #c72a2a;
  background-color: #4d2929;
  z-index: -1;
}
.container .hands .finger:nth-child(1),
.container .hands .finger:nth-child(3) {
  left: 4px;
  z-index: 1;
}
.container .hands .finger:nth-child(1) .bone,
.container .hands .finger:nth-child(3) .bone {
  height: 10px;
}
.container .hands .finger:nth-child(3) {
  left: -4px;
}
.container .hands .finger:nth-child(2) {
  top: -5px;
  z-index: 2;
}
.container .hands .finger:nth-child(1) .nail,
.container .hands .finger:nth-child(3) .nail {
  top: 0px;
}
.container .tengah {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.container .login {
  position: relative;
  display: flex;
  flex-direction: column;
}
.container .login label {
  position: relative;
  /* padding: 0 20px; */
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  /* font-size: 1rem; */
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #d4d4ce;
  background-clip: padding-box;
  border: 1px solid #444c55;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 10px;
  margin: 1px;
}
.container .login label .fas {
  position: absolute;
  top: 32%;
  left: 25px;
  /* color: #bbb; */
  font-size: 1.2rem;
}
.container .login label .fas:before {
  position: relative;
  left: 1px;
}
.container .login input,
.container .login .login-button {
  /* width: 100%; */
  height: 35px;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
}
/* .container .fa-user {
  font-size: 1.3rem;
} */
.container .login input {
  padding: 0 50px 0 0px;
  margin: 5px 0;
  box-shadow: none;
  outline: none;
}
.container .login input::-moz-placeholder {
  color: #b9afaf;
}
.container .login input:-ms-input-placeholder {
  color: #524141;
}
.container .login input::placeholder {
  color: #b99b9b;
}
.container .login input.password {
  padding: 0 90px 0 40px;
}
.container .login .password-button {
  position: absolute;
  top: 15px;
  right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 27px;
  border-radius: 10px;
  border: none;
  outline: none;
  background-color: #dce1e4;
  color: #683939;
}
.container .login .password-button:active {
  transform: scale(0.95);
}
.container .login .login-button {
  width: 100%;
  margin: 20px 0px 0px;
  align-items: center;
  outline: none;
  background-color: #e6c3c4;
  color: #791016;
  transition: transform 0.1s;
}
.container .login .login-button:active {
  transform: scale(0.95);
}
.container .login .login-button:hover {
  background-color: #a0a79d;
}

.container .footer {
  text-align: center;
  margin-top: 15px;
  font-size: 1rem;
  font-family: "Poppins", sans-serif;
}
.container .footer .footer-a {
  color: #243946;
  text-decoration: none;

  transition: all 0.2s ease-in-out 0.1s;
}
.container .footer .footer-a:hover {
  color: #3ab315;
}

@-webkit-keyframes breath {
  0%,
  100% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(60deg);
  }
}
@keyframes breath {
  0%,
  100% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(60deg);
  }
}
















JAVASCRIPT CODE

SAVE AS script.js

/* GAURAV TRIPATHI */

let usernameInput = document.querySelector(".username");
let passwordInput = document.querySelector(".password");
let showPasswordButton = document.querySelector(".password-button");
let face = document.querySelector(".face");

passwordInput.addEventListener("focus", (event) => {
  document.querySelectorAll(".hand").forEach((hand) => {
    hand.classList.add("hide");
  });
  document.querySelector(".tongue").classList.remove("breath");
});

passwordInput.addEventListener("blur", (event) => {
  document.querySelectorAll(".hand").forEach((hand) => {
    hand.classList.remove("hide");
    hand.classList.remove("peek");
  });
  document.querySelector(".tongue").classList.add("breath");
});

usernameInput.addEventListener("focus", (event) => {
  let length = Math.min(usernameInput.value.length - 16, 19);
  document.querySelectorAll(".hand").forEach((hand) => {
    hand.classList.remove("hide");
    hand.classList.remove("peek");
  });

  face.style.setProperty("--rotate-head", `${-length}deg`);
});

usernameInput.addEventListener("blur", (event) => {
  face.style.setProperty("--rotate-head", "0deg");
});

usernameInput.addEventListener(
  "input",
  _.throttle((event) => {
    let length = Math.min(event.target.value.length - 16, 19);

    face.style.setProperty("--rotate-head", `${-length}deg`);
  }, 100)
);

showPasswordButton.addEventListener("click", (event) => {
  if (passwordInput.type === "text") {
    passwordInput.type = "password";
    document.querySelectorAll(".hand").forEach((hand) => {
      hand.classList.remove("peek");
      hand.classList.add("hide");
    });
  } else {
    passwordInput.type = "text";
    document.querySelectorAll(".hand").forEach((hand) => {
      hand.classList.remove("hide");
      hand.classList.add("peek");
    });
  }
});

Comments

Post a Comment

Popular posts from this blog

Trading Live Advance Chart Source code HTML CSS & JS

By -
Image
   Trading Live Advance Chart Source code HTML CSS & JS SOURCE CODE html source code  save as---Index.html <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > TRADING live </ title > </ head > < link rel = "stylesheet" href = "style.css" >   <!-- Gaurav tripathi --> < body >     <!-- TradingView Widget BEGIN --> <!-- TradingView Widget BEGIN --> < div class = "tradingview-widget-container" >     < div id = "tradingview_1dcca" ></ div >     < div class = "tradingview-widget-copyright" > < a href = "https://www.tradingview.com/" rel = "noopener nofollow&qu
Read more

How to show live Cryptocurrency Price In your website Using HTML CSS, AND JavaScript

By -
Image
  How to show live Cryptocurrency Price In your website Using HTML CSS, AND JavaScript source code html code  save as Index.html <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Live Crypto currency Price </ title >     </ head > < body >   <!-- TradingView Widget BEGIN --> < div class = "tradingview-widget-container" >   < div class = "tradingview-widget-container__widget" > </ div >   < div class = "tradingview-widget-copyright" > < a href = "https://www.tradingview.com/" rel = "noopener nofollow" target = "_blank" > < span class = "blue-text" > Track all
Read more

Learn Python 2024 by gaurav tripathi

By -
Image
Project Learn Python By Gaurav Tripathi Python 2024 Crash course is a beginners to advance course free of cost. It covers all the basics and advanced topics in indiamoon youtube. Subcribe Python Crash Course: Part 1 Why Python and How to Learn by Gaurav Tripathi, 2024 full course Learn Python Crash Course: Part 2 Setting Up Your Python Environment | Python Learn by Gaurav Tripathi
Read more