Cute Puppy Login Form Design Using HTML and CSS

In today’s digital world, web design plays an important role in capturing user’s attention and providing them an enjoyable experience. In this post, we explore the art of creating a Cute Puppy Login Form Design Using HTML and CSS. So, are you ready to revolutionize your website’s first impression?

Key Features:

Using straightforward HTML and CSS
Completely responsive
Eye-catchy color
Modern looking
Premium feel
Animated and funny animations

Journey of web development simplicity with our tutorial on Cute Puppy Login Form Design Using HTML and CSS. There are complete source code available. You can copy the code also download it as well.

SOURCE CODE:

HTML:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- coded by : cybercript.in --> 
  <meta charset="UTF-8">
  <title>Login Page - Cyber Cript</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/4.7.0/css/font-awesome.min.css'>
  <link rel="stylesheet" href="css/style.css">

</head>

<body>
  <!-- partial:index.partial.html -->
  <div class="center">
    <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>
  <!-- coded by : cybercript.in --> 

    <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>
  <!-- coded by : cybercript.in --> 

    <div class="login">
      <label>
        <div class="fa fa-phone"></div>
        <input class="username" type="text" autocomplete="on" placeholder="Username" />
      </label>
      <label>
        <div class="fa fa-commenting"></div>
        <input class="password" type="password" autocomplete="off" placeholder="Password" />
        <button class="password-button">Show</button>
      </label>
      <button class="login-button">Login</button>
    </div>
    <div class="social-buttons">
      <div class="social">
        <div class="fa fa-wechat"></div>
      </div>
      <div class="social">
        <div class="fa fa-weibo"></div>
      </div>
      <div class="social">
        <div class="fa fa-paw"></div>
      </div>
    </div>

  <!-- coded by : cybercript.in --> 

    <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
    <script src="js/script.js"></script>

</body>

</html>
  <!-- coded by : cybercript.in -->

CSS:

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* // <!-- coded by : cybercript.in -->  */

html,
body {
  height: 100%;
  width: 100%;
}

body {
  width: 100vw;
  height: 100vh;
  background-color: rgb(7, 1, 26);
  overflow: hidden;
  font-size: 12px;
}

.inspiration {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  font-family: 'Gill Sans', sans-serif;
  font-size: 12px;
  color: #969696;
}

.inspiration img {
  width: 60px;
}

/* // <!-- coded by : cybercript.in -->  */

.center {
  position: relative;
  top: 50%;
  left: 50%;
  display: inline-block;
  width: 275px;
  height: 490px;
  border-radius: 3px;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background-image: linear-gradient(to top right, rgb(0 168 255), rgb(249 95 230));
}

@media screen and (max-height: 500px) {
  .center {
    transition: transform 0.5s;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

/* // <!-- coded by : cybercript.in -->  */

.center .ear {
  position: absolute;
  top: -110px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: rgb(50 22 22);
}

.center .ear.ear--left {
  left: -135px;
}

.center .ear.ear--right {
  right: -135px;
}

.center .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;
}

/* // <!-- coded by : cybercript.in -->  */

.center .eye {
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #243946;
}

.center .eye.eye--left {
  margin-right: 40px;
}

.center .eye.eye--right {
  margin-left: 40px;
}

.center .eye .glow {
  position: relative;
  top: 3px;
  right: -12px;
  width: 12px;
  height: 6px;
  border-radius: 50%;
  background-color: #fff;
  transform: rotate(38deg);
}

/* // <!-- coded by : cybercript.in -->  */

.center .nose {
  position: relative;
  top: 30px;
  transform: scale(1.1);
}

.center .nose .glow {
  position: absolute;
  top: 3px;
  left: 32%;
  width: 15px;
  height: 8px;
  border-radius: 50%;
  background-color: #476375;
}

.center .mouth {
  position: relative;
  margin-top: 45px;
}

.center svg.smile {
  position: absolute;
  left: -28px;
  top: -19px;
  transform: scaleX(1.1);
  stroke: #243946;
}

/* // <!-- coded by : cybercript.in -->  */

.center .mouth-hole {
  position: absolute;
  top: 0;
  left: -50%;
  width: 60px;
  height: 15px;
  border-radius: 50%/100% 100% 0% 0;
  transform: rotate(180deg);
  background-color: #243946;
  z-index: -1;
}

.center .tongue {
  position: relative;
  top: 5px;
  width: 30px;
  height: 20px;
  background-color: #ffd7dd;
  transform-origin: top;
  transform: rotateX(60deg);
}

.center .tongue.breath {
  -webkit-animation: breath 0.3s infinite linear;
  animation: breath 0.3s infinite linear;
}

/* // <!-- coded by : cybercript.in -->  */

.center .tongue-top {
  position: absolute;
  bottom: -15px;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: #ffd7dd;
}

.center .line {
  position: absolute;
  top: 0;
  width: 30px;
  height: 5px;
  background-color: #fcb7bf;
}

.center .median {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 25px;
  border-radius: 5px;
  background-color: #fcb7bf;
}

/* // <!-- coded by : cybercript.in -->  */

.center .hands {
  position: relative;
}

JAVASCRIPT:

JavaScript

// <!-- coded by : cybercript.in --> 

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');
});
// <!-- coded by : cybercript.in --> 

passwordInput.addEventListener('blur', event => {
  document.querySelectorAll('.hand').forEach(hand => {
    hand.classList.remove('hide');
    hand.classList.remove('peek');
  });
  document.querySelector('.tongue').classList.add('breath');
});
// <!-- coded by : cybercript.in --> 

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));
// <!-- coded by : cybercript.in --> 

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');
    });
  }
});
// <!-- coded by : cybercript.in -->

An Animated Hero Section with HTML, CSS and JS

Dive into the world of web development of creativity as we explore the art of creating an Animated Hero…

Download Source Code:

4 KB

Conclusion:

And there you go – Cute Puppy Login Form Design Using HTML and CSS. You can modify the styles, extend them with new features, or use them in your projects to provide stylish visuals for the users. With a blend of sleek aesthetics and technical prowess, your projects can make a lasting impression. Start your journey into the web dev.

Post Views: 117

Finite number of lines code and infinite possibilities

Programmer, Arpan Bera