Creating a Responsive Login Form & Registration form

Hello friend, I hope you are doing great. Today you will learn how to create an Responsive Login Registration Form using HTML CSS and Javascript. The interesting thing about this form is that when the user enters When you click on signup, it automatically changes to the same form. And when you open it on any device, it automatically adjusts.

Basic Style

Shape : The shape of this box is a slightly rounded rectangle, giving it a soft and modern look.
Color : This button uses Multi backgroun color .

Output

/*Style the box items */
   * {
   padding: 0 ;
   margin: 0 ;
   box-sizing: border-box ;
   font-family: sans-serif ;
    }
   body {
   backgroun-color: #6433f9 ;
   height: 100vh ;
   display: grid ;
   justify-content: center ;
   align-items: center ;
    }
   .container {
   position :relative ;
   width :355px ;
   height :355px ;
   animation :spin 1.5s infinite ;
   }
   .container div:nth-child(1) {
   height :75px ;
   width :75px ;
   top :100px ;
   left :100px ;
   position :absolute ;
   box-shadow :0px 0px 3px #f7d000 ;
   border-radius :50% ;
   animation :move 1.5s infinite ;
   }
   .container div:nth-child(2) {
   height :46px ;
   width :46px ;
   top :106px ;
   right :111px ;
   position :absolute ;
   box-shadow :0px 0px 3px #f7d000 ;
   border-radius :50% ;
   animation :move2 1.5s infinite ;
   }
   .container div:nth-child(3) {
   height :76px ;
   position :absolute ;
   width :76px ;
   bottom :103px ;
   right :103px ;
   position :absolute ;
   box-shadow :0px 0px 3px #f7d000 ;
   border-radius :50% ;
   animation :move3 1.5s infinite ;
   }
   .container div:nth-child(4) {
   height :45px ;
   position :absolute ;
   width :45px ;
   bottom :103px ;
   left :110px ;
   position :absolute ;
   box-shadow :0px 0px 3px #f7d000 ;
   border-radius :50% ;
   animation :move4 1.5s infinite ;
   }

Creating a Responsive Login Form & Registration form

Basic Style

Output

Other

BrodSchool

Usefull link

Quick Link