Responsive Login Form - Download Source code

Blogger Leb
October 24, 2020
0

Responsive Login Form - Download Source code

All you need to create an awesome animated and responsive login form is a completely accurate and simple code and the right guide to learn. With this guide and professional code, I am going to show you step-by-step how to create a Responsive Login Form using only html5 and css3 languages.

I am Santanu Jana a web designer. I will teach you with my last five years of experience how to create a Responsive Login Form. There are many types of login forms such as transparent login form, animated login form, responsive login form, etc. The most useful of these is the Responsive Login Form for a website. Because in the case of the website, it needs to look beautiful for all kinds of devices. So that users using all kinds of devices can easily use the login form of the website. The login form I have shown here is a very simple and responsive login form.

How To Create Responsive Login Form Using HTML and CSS

   It's not just a login form, it means you have the option to log in and create an account. In other words, if a user does not have an account, you can create a new account from here. If he has an account, he can easily login. That means it can do both, so it's a great professional and responsive login form. This login form will definitely help you to increase your HTML and CSS programming knowledge a lot.


Some special information about this login form

👉The login form is a complete professional form that uses only HTML, CSS, and a small amount of JavaScript programming language.

👉 This is a multi-login form which means any user can create an account here and log in to the account.

👉 To create an account, first of all, the user can create an account by clicking on the account creation option below and inputting the name and email address.

👉 To login to the account, you can log in by clicking on the login button at the bottom of this login form and inputting the user ID and password. 

👉This means that there are two opportunities in this login form. This login form is completely professional which will help you to increase the level of your programming knowledge a lot. A complete guide and help you learn how to create a professional login form.

How this login form was created

If you want to add it to your website or blog, you can do so very easily. For that, first of all, you have to copy the HTML code below and paste it into the body tag (<body> Add Code </body>) of your website.

 Then you copy the CSS code and paste it into the head tag (<head><style> Add code</style></head>) of your website or project. Then copy the JavaScript code below and paste it into your project's head tag using the script tag (<head><script> Add code</script></head>).

 If you want to make it separately or learn to make it, you should follow the steps below


Method 1

First of all, you have to create an HTML file. To create this file, you need to open Notepad and save the file without typing anything. When saving, you will rename it as you like and save it by adding dot HTML (rename.html) to it. This way you can create an HTML file.

<!DOCTYPE html>
<html>
<head>
<style>
 ADD CSS Code
</style>
</head>
<body>
 
   Add HTML Code

  <script>
    ADD javaScript Code
  </script>
</body>
</html> 

Then you copy the following structure key and paste it into your HTML file.


HTML TAGS (<body> Add Code </body>)

This code is an HTML code (rename.html). Put this code in the head tags of your project and also in the head tags in the HTML file.


 
<div class="container">
  <input type="radio" name="tab" id="signin" checked="checked"/>
  <input type="radio" name="tab" id="register"/>
  <div class="pages">
    <div class="page">
       <!--<div class="input">
        <div class="title"> USERNAME</div>
        <input class="text" type="text" placeholder=""/>
      </div>-->
      <div class="input">
        <div class="title"> USERNAME</div>
        <input class="text" type="text" placeholder=""/>
      </div>
      <div class="input">
        <div class="title"> PASSWORD</div>
        <input class="text" type="password" placeholder=""/>
      </div>
      <div class="input">
        <input type="submit" value="ENTER"/>
      </div>
    </div>
    <!--<div class="input">
        <div class="title"> USERNAME</div>
        <input class="text" type="text" placeholder=""/>
      </div>-->
    <div class="page signup">
      <div class="input">
        <div class="title"> NAME</div>
        <input class="text" type="text" placeholder=""/>
      </div>
      <div class="input">
        <div class="title">EMAIL</div>
        <input class="text" type="password" placeholder=""/>
      </div>
      <div class="input">
        <input type="submit" value="SIGN ME UP!"/>
      </div>
    </div>
  </div>
   <!--<div class="input">
        <div class="title"> USERNAME</div>
        <input class="text" type="text" placeholder=""/>
      </div>-->
  <div class="tabs">
    <label class="tab" for="signin">
      <div class="text">Sign In</div>
    </label>
    <label class="tab" for="register">
      <div class="text">Register</div>
    </label>
  </div>
</div>


Below is the HTML code. This code replaces the "add Html code" in the structure above with the HTML code below.

Hopefully, you have been able to add HTML codes to your project in HTML files.

Method 2

After adding the HTML code to your project, now you add the CSS code.

 Now you create a CSS file. To create a CSS file, open Notepad, and save it completely blank. When saving you rename to your liking then add dot CSS (rename.css) and save. Then copy and paste the CSS codes into your file.

CSS CODE (<head><style> Add code</style></head>)

This code is a CSS code (rename.css). You enter this code in the style tags in the head tags of your project. Also, you put in the style tags in the CSS file.

html, body {
  padding: 0px;
  margin: 0px;
  background: #F8F2ED;
  font-family: 'Raleway', sans-serif;
  color: #FFF;
  height: 100%;
}/*border-bottom: 0.065rem solid #fff;
  outline: none;*/

.container {
  min-height: 300px;
  max-width: 250px;
  margin: 40px auto;
  background: #FFF;
  border-radius: 2px;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  display: -webkit-box;
  display: flex;
  /*border-bottom: 0.065rem solid #fff;
  outline: none;*/
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  overflow: hidden;
  -webkit-animation: hi 0.5s;
          animation: hi 0.5s;
            /*background-color: #03a9f4;
  padding: 0.625rem 1.25rem;*/
  -webkit-transform: translateZ(0px);
}
.container * {
  box-sizing: border-box;
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.pages {
  -webkit-box-flex: 1;
          flex: 1;
  white-space: nowrap;
  position: relative;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  display: -webkit-box;
  display: flex;
}  /*background-color: #03a9f4;
  padding: 0.625rem 1.25rem;*/
.pages .page {
  min-width: 100%;
  padding: 20px 15px;
  padding-top: 0px;
  /*border-bottom: 0.065rem solid #fff;
  outline: none;*/
  background: -webkit-gradient(linear, right top, left top, from(#955DFF), to(#6FAAFF));
  background: linear-gradient(to left, #955DFF, #6FAAFF);
}
.pages .page:nth-of-type(1) .input {
  -webkit-transform: translateX(-100%) scale(0.5);
          transform: translateX(-100%) scale(0.5);
}
.pages .page:nth-of-type(2) .input {
  -webkit-transform: translateX(100%) scale(0.5);
          transform: translateX(100%) scale(0.5);
}  /*background-color: #03a9f4;
  padding: 0.625rem 1.25rem;*/
.pages .page .input {
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
  /*border-bottom: 0.065rem solid #fff;
  outline: none;*/
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.pages .page.signup {
  background: -webkit-gradient(linear, right top, left top, from(#6FAAFF), to(#955DFF));
  background: linear-gradient(to left, #6FAAFF, #955DFF);
}
.pages .page .title {
  margin-bottom: 10px;
  font-size: 14px;
  position: relative;
  line-height: 14px;
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.pages .page .title i {
  vertical-align: text-bottom;
  font-size: 19px;
}
.pages .page .input {
  margin-top: 20px;
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.pages .page input.text {
  background: #F6F7F9;
  border: none;
  border-radius: 4px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0px 10px;
  color: rgba(0, 0, 0, 0.5);
  outline: none;
}
.pages .page input[type=submit] {
  background: rgba(0, 0, 0, 0.5);
  color: #F6F7F9;
  height: 40px;
  line-height: 40px;
  width: 100%;
  /*border-bottom: 0.065rem solid #fff;
  outline: none;*/
  border: none;
  border-radius: 4px;
  font-weight: 600;
}

.tabs {
  max-height: 50px;
  height: 50px;
  display: -webkit-box;
  display: flex;
  /*border-bottom: 0.065rem solid #fff;
  outline: none;*/
  background: #FFF;
}
.tabs .tab {
  -webkit-box-flex: 1;
          flex: 1;
  color: #5D708A;
  text-align: center;
  line-height: 50px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}  /*background-color: #03a9f4;
  padding: 0.625rem 1.25rem;*/
.tabs .tab .text {
  font-size: 14px;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
input[type=radio] {
  display: none;
}

input[type=radio]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) {
  box-shadow: inset -3px 2px 5px rgba(0, 0, 0, 0.25);
  color: #3F4C7F;
}
input[type=radio]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) .text {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
input[type=radio]:nth-of-type(1):checked ~ .pages {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
input[type=radio]:nth-of-type(1):checked ~ .pages .page:nth-of-type(1) .input {
  opacity: 1;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
input[type=radio]:nth-of-type(1):checked ~ .pages .page:nth-of-type(1) .input:nth-child(1) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
input[type=radio]:nth-of-type(1):checked ~ .pages .page:nth-of-type(1) .input:nth-child(2) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
input[type=radio]:nth-of-type(1):checked ~ .pages .page:nth-of-type(1) .input:nth-child(3) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}  /*background-color: #03a9f4;
  padding: 0.625rem 1.25rem;*/
input[type=radio]:nth-of-type(1):checked ~ .pages .page:nth-of-type(1) .input:nth-child(4) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
input[type=radio]:nth-of-type(1):checked ~ .pages .page:nth-of-type(1) .input:nth-child(5) {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/

input[type=radio]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) {
  box-shadow: inset 3px 2px 5px rgba(0, 0, 0, 0.25);
  color: #3F4C7F;
}
input[type=radio]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) .text {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
input[type=radio]:nth-of-type(2):checked ~ .pages {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}  /*background-color: #03a9f4;
  padding: 0.625rem 1.25rem;*/
input[type=radio]:nth-of-type(2):checked ~ .pages .page:nth-of-type(2) .input {
  opacity: 1;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
input[type=radio]:nth-of-type(2):checked ~ .pages .page:nth-of-type(2) .input:nth-child(1) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
input[type=radio]:nth-of-type(2):checked ~ .pages .page:nth-of-type(2) .input:nth-child(2) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}  /*background-color: #03a9f4;
  padding: 0.625rem 1.25rem;*/
input[type=radio]:nth-of-type(2):checked ~ .pages .page:nth-of-type(2) .input:nth-child(3) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
input[type=radio]:nth-of-type(2):checked ~ .pages .page:nth-of-type(2) .input:nth-child(4) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
input[type=radio]:nth-of-type(2):checked ~ .pages .page:nth-of-type(2) .input:nth-child(5) {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
  /*background-color: #03a9f4;
  padding: 0.625rem 1.25rem;*/
@-webkit-keyframes hi {
  from {
    -webkit-transform: translateY(50%) scale(0, 0);
            transform: translateY(50%) scale(0, 0);
    opacity: 0;
  }
}

@keyframes hi {
  from {
    /*border-bottom: 0.065rem solid #fff;
  outline: none;*/
    -webkit-transform: translateY(50%) scale(0, 0);
            transform: translateY(50%) scale(0, 0);
    opacity: 0;
  }
}


Method 3

After adding the CSS code you add the following JavaScript code to your project. To do this, open the HTML file you created. Copy and paste the following complete code below your HTML code. To paste, copy, and paste the following code in the structure above where "add javascript code" is written.

JAVA-SCRIPT CODE (<head><script> Add code</script></head>)

This code is a CSS code (rename.css). You enter this code in the style tags in the head tags of your project. Also, you put in the style tags in the CSS file.

var signin = document.querySelector('#signin')
var register = document.querySelector('#register')
setTimeout(function(){ register.checked = true}, 1000)
setTimeout(function(){ signin.checked = true}, 2000)

If you follow the above three methods, your project will be completed. Then you open that HTML file in Google Chrome or any other browser. You will easily see this login form.

Hope you didn't have any problems following the above procedure. If you have any problems, please let me know in the comments. I will totally help you to create this login form. Special thanks to you for reading this article to the end.

❤Sharing is caring❤



Tags
Share to other apps

You may like these posts

Show more

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Post a Comment (0)
To Top