Glowing Inputs Login & Signup Form Create This Source Code

Ticker

10/recent/ticker-posts

Glowing Inputs Login & Signup Form Create This Source Code

AK Creative 6/11/2021 04:53:00 PM

HTML Code 


<!DOCTYPE html>

<html lang="en" dir="ltr">

   <head>

      <meta charset="utf-8">

      <title>Glowing Inputs Login & Signup Form</title>

      <link rel="stylesheet" href="style.css">

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>

   </head>

   <body>

      <div class="signup-form">

         <div class="text">

            Signup

         </div>

         <form>

            <div class="field">

               <div class="fas fa-envelope"></div>

               <input type="text" placeholder="Email or Phone">

            </div>

            <div class="field">

               <div class="fas fa-key"></div>

               <input type="password" placeholder="Password">

            </div>

<div class="field">

               <div class="fas fa-key">

   </div>

               <input type="confirm password" placeholder="Confirm Password">

            </div>

            <button>Signup</button>

<div class="sign-form">

<div class="link">

               Already member?

               <a href="#">Login</a>

            </div>

</div></form>

</div>

</br>

<div class="Login-form">

         <div class="text">

            Login

         </div>

         <form>

            <div class="field">

               <div class="fas fa-envelope"></div>

               <input type="text" placeholder="Email or Phone">

            </div>

            <div class="field">

               <div class="fas fa-lock"></div>

               <input type="password" placeholder="Password">

            </div>

            <button>Login</button>

            <div class="link">

               Not a member?

               <a href="#">Signup now</a>

            </div>

         </form>

      </div>

   </body>

</html>


CSS Code


@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

*{

  margin: 0;

  padding: 0;

  font-family: 'century';

}

body{

  display: flex;

  height: 100vh;

  text-align: center;

  align-items: center;

  justify-content: center;

  background: linear-gradient(55deg,#eeaeca,#a58bd7,#6bb87f,#cf986e,#97abd2);

}

.login-form{

  position: relative;

  width: 370px;

  height: auto;

  background: #e9dce2;

  padding: 50px 45px 60px;

  box-sizing: border-box;

  border: 1px solid red;

  border-radius: 5px;

  box-shadow: inset 0 0 1px #272727;

}

.text{

  font-size: 35px;

  color: #b5de1a;

  font-weight: 600;

  letter-spacing: 2px;

  text-decoration: underline;

}

form{

  margin-top: 20px;

}

form .field{

  margin-top: 20px;

  display: flex;

}

.field .fas{

  height: 50px;

  width: 60px;

  color: #00c0c0;

  font-size: 25px;

  line-height: 50px;

  border: 1px solid #444;

  border-right: 5px;

  border-radius: 5px 0 0 5px;

  background: linear-gradient(#111,#222);

}

.field input,form button{

  height: 50px;

  width: 100%;

  outline: none;

  font-size: 19px;

  color: #ff00ff;

  padding: 0 15px;

  border-radius: 0 5px 5px 0;

  border: 1px solid #444;

  caret-color: #f39933;

  background: linear-gradient(#333,#222);

}

input:focus{

  color: #ff0000;

  box-shadow: 0 0 5px rgba(255,0,0,.2),

              inset 0 0 5px rgba(255,0,0,.1);

  background: linear-gradient(#333933,#222922);

  animation: glow .6s ease-out infinite alternate;

}

@keyframes glow {

   0%{

    border-color: #ff0000;

    box-shadow: 0 0 5px rgba(255,0,0,.2),

                inset 0 0 5px rgba(0,0,0,.1);

  }

   100%{

    border-color: #6f6;

    box-shadow: 0 0 20px rgba(255,0,0,.6),

                inset 0 0 10px rgba(255,0,0,.4);

  }

}

button{

  margin-top: 30px;

  border-radius: 5px!important;

  font-weight: 800;

  letter-spacing: 1px;

  cursor: pointer;


}

button:hover{

  color: #ff0000;

  border: 1px solid #339933;

  box-shadow: 0 0 5px rgba(255,0,0,.3),

              0 0 10px rgba(255,0,0,.2),

              0 0 15px rgba(255,0,0,.1),

              0 2px 0 black;

}

.link{

  margin-top: 20px;

  color: #ff25d0;

  font-size: 22px;

}

.link a{

  color: #0f42e8;

  text-decoration: none;

}

.link a:hover{

  text-decoration: underline;

}


OUTPUT SCREEN





Tags:

Post a Comment

14 Comments