The responsive login form is one of the web design which will help you to increase your knowledge about web development and web design.
In this article, I am going to tell you how you can easily create a Responsive Login Form using only HTML and CSS programming languages.
Hello friends I am Santanu Jana a web designer. I will help you to know and learn from my five years of experience how to create a professional and responsive login form using only HTML and CSS programming language. Here I give you an example of a login. I created this login form using a very simple programming language. Which will help you learn and know.
Create A Login Form Using HTML and CSS only
The login form is a gateway to access your own account on the web site. Which you have to enter with the help of a user ID and password. And the login form is used at this entrance. Where you or your user will log in to the account with his user ID and password. So the login form needs to be beautiful, professional, and responsive which will attract the attention of your users.
The login form given here is not just a login form, it is a sign-in form which means your user can log in and create an account.
In case of login, user ID and password will be input here and the user will input his new username and password and confirm the password to create the account. All in all, this is a great login form that will help you increase your programming knowledge a lot.
Some information about this login form
💗 Only common HTML and CSS programming languages are used to create this login form.
💙 The login form created here is completely professional and responsive.
💚 It is written very simply with the HTML and CSS code used here to make it and reach you easily.
💛 There are two options in this login form i.e. user can log in here and create an account.
💖 In the case of login, there is a place to the input user ID and password and then below there is a login button where the user can log in by clicking.
💜 To create a new account, click on the signup button next to it, the account creation option will open.
💘 Here the user will also get the option of username and password to create a new account and by clicking on the Create Account button below, a new account will be created.
💕 Also below are Google, Linkin, Microsoft, etc. 'media platforms for sharing on social media.
You can watch the live demo of this login form by clicking on the demo option above. In addition, if you want to download the necessary codes in this login form, you can download these codes completely for free by clicking the download button. You can easily copy the following codes and use them for your project or website.
Make This Login Form Using HTML and CSS
If you want to try this code yourself, you can. That is why I have given the source code below. First of all, you create an HTML file (rename.html) and a CSS file (rename.css). Then you put the HTML code in the HTML file and the CSS code in the CSS file. Be sure to link the HTML and cis code to each other (<link rel="stylesheet" href="sidebar.css">).
I would request you to download the codes by clicking on the download button above, but you will get more benefits. I have added some comments in the code of reasons. If you want to use your project by copying these codes, you can delete the comments contained in this code. If not, there is no problem.These comments do not change your programming in any way.
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="form-modal">
<div class="form-toggle">
<button id="login-toggle" onclick="toggleLogin()">log in</button>
<button id="signup-toggle" onclick="toggleSignup()">sign up</button>
</div>
<!--<div class="input">
<div class="title"> USERNAME</div>
<input class="text" type="text" placeholder=""/>
</div>-->
<div id="login-form">
<form>
<input type="text" placeholder="Enter email or username"/>
<input type="password" placeholder="Enter password"/>
<button type="button" class="btn login">login</button>
<p><a href="javascript:void(0)">Forgotten account</a></p>
<hr/>
<!--<div class="input">
<div class="title"> USERNAME</div>
<input class="text" type="text" placeholder=""/>
</div>-->
<button type="button" class="btn -box-sd-effect"> <i class="fa fa-google fa-lg" aria-hidden="true"></i> sign in with google</button>
<button type="button" class="btn -box-sd-effect"> <i class="fa fa-linkedin fa-lg" aria-hidden="true"></i> sign in with linkedin</button>
<button type="button" class="btn -box-sd-effect"> <i class="fa fa-windows fa-lg" aria-hidden="true"></i> sign in with microsoft</button>
</form>
</div>
<!--<div class="input">
<div class="title"> USERNAME</div>
<input class="text" type="text" placeholder=""/>
</div>-->
<div id="signup-form">
<form>
<input type="email" placeholder="Enter your email"/>
<input type="text" placeholder="Choose username"/>
<input type="password" placeholder="Create password"/>
<button type="button" class="btn signup">create account</button>
<p>Clicking <strong>create account</strong> means that you are agree to our <a href="javascript:void(0)">terms of services</a>.</p>
<hr/>
<!--<div class="input">
<div class="title"> USERNAME</div>
<input class="text" type="text" placeholder=""/>
</div>-->
<button type="button" class="btn -box-sd-effect"> <i class="fa fa-google fa-lg" aria-hidden="true"></i> sign up with google</button>
<button type="button" class="btn -box-sd-effect"> <i class="fa fa-linkedin fa-lg" aria-hidden="true"></i> sign up with linkedin</button>
<button type="button" class="btn -box-sd-effect"> <i class="fa fa-windows fa-lg" aria-hidden="true"></i> sign up with microsoft</button>
</form>
</div>
<!--<div class="input">
<div class="title"> USERNAME</div>
<input class="text" type="text" placeholder=""/>
</div>-->
</div>
<script>
function toggleSignup(){
document.getElementById("login-toggle").style.backgroundColor="#fff";
document.getElementById("login-toggle").style.color="#222";
/*transform: translate(-50%, -50%);
width: 25rem;
padding: 2.5rem;*/
document.getElementById("signup-toggle").style.backgroundColor="#57b846";
document.getElementById("signup-toggle").style.color="#fff";
document.getElementById("login-form").style.display="none";
document.getElementById("signup-form").style.display="block";
}
/*transform: translate(-50%, -50%);
width: 25rem;
padding: 2.5rem;*/
function toggleLogin(){
document.getElementById("login-toggle").style.backgroundColor="#57B846";
document.getElementById("login-toggle").style.color="#fff";
document.getElementById("signup-toggle").style.backgroundColor="#fff";
document.getElementById("signup-toggle").style.color="#222";
/*transform: translate(-50%, -50%);
width: 25rem;
padding: 2.5rem;*/
document.getElementById("signup-form").style.display="none";
document.getElementById("login-form").style.display="block";
}
/*transform: translate(-50%, -50%);
width: 25rem;
padding: 2.5rem;*/
</script>
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.
@import url('https://fonts.googleapis.com/css?family=Montserrat|Quicksand');
*{
font-family: 'quicksand',Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
body{
background:#fff;
}
/*border-bottom: 0.065rem solid #fff;
outline: none;*/
.form-modal{
position:relative;
width:450px;
height:auto;
margin-top:4em;
left:50%;
transform:translateX(-50%);
background:#fff;
/*border-bottom: 0.065rem solid #fff;
outline: none;*/
border-top-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
box-shadow:0 3px 20px 0px rgba(0, 0, 0, 0.1)
}
/*transform: translate(-50%, -50%);
width: 25rem;
padding: 2.5rem;*/
.form-modal button{
cursor: pointer;
position: relative;
text-transform: capitalize;
font-size:1em;
z-index: 2;
outline: none;
background:#fff;
transition:0.2s;
}
/*border-bottom: 0.065rem solid #fff;
outline: none;*/
.form-modal .btn{
border-radius: 20px;
border:none;
font-weight: bold;
font-size:1.2em;
padding:0.8em 1em 0.8em 1em!important;
transition:0.5s;
/*transform: translate(-50%, -50%);
width: 25rem;
padding: 2.5rem;*/
border:1px solid #ebebeb;
margin-bottom:0.5em;
margin-top:0.5em;
}
.form-modal .login , .form-modal .signup{
background:#57b846;
color:#fff;
}
/*border-bottom: 0.065rem solid #fff;
outline: none;*/
.form-modal .login:hover , .form-modal .signup:hover{
background:#222;
}
.form-toggle{
position: relative;
width:100%;
height:auto;
}
/*border-bottom: 0.065rem solid #fff;
outline: none;*/
.form-toggle button{
width:50%;
float:left;
padding:1.5em;
margin-bottom:1.5em;
border:none;
transition: 0.2s;
font-size:1.1em;
font-weight: bold;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}
/*border-bottom: 0.065rem solid #fff;
outline: none;*/
.form-toggle button:nth-child(1){
border-bottom-right-radius: 20px;
}
.form-toggle button:nth-child(2){
border-bottom-left-radius: 20px;
}
#login-toggle{
background:#57b846;
color:#ffff;
}/*border-bottom: 0.065rem solid #fff;
outline: none;*/
.form-modal form{
position: relative;
width:90%;
height:auto;
left:50%;
transform:translateX(-50%);
} /*transform: translate(-50%, -50%);
width: 25rem;
padding: 2.5rem;*/
#login-form , #signup-form{
position:relative;
width:100%;
height:auto;
padding-bottom:1em;
}
/*border-bottom: 0.065rem solid #fff;
outline: none;*/
#signup-form{
display: none;
}
#login-form button , #signup-form button{
width:100%;
margin-top:0.5em;
padding:0.6em;
}
/*transform: translate(-50%, -50%);
width: 25rem;
padding: 2.5rem;*/
.form-modal input{
position: relative;
width:100%;
font-size:1em;
padding:1.2em 1.7em 1.2em 1.7em;
margin-top:0.6em;
margin-bottom:0.6em;
border-radius: 20px;
border:none;
/*border-bottom: 0.065rem solid #fff;
outline: none;*/
background:#ebebeb;
outline:none;
font-weight: bold;
transition:0.4s;
}
.form-modal input:focus , .form-modal input:active{
transform:scaleX(1.02);
}
.form-modal input::-webkit-input-placeholder{
color:#222;
}
/*border-bottom: 0.065rem solid #fff;
outline: none;*/
.form-modal p{
font-size:16px;
font-weight: bold;
}
/*transform: translate(-50%, -50%);
width: 25rem;
padding: 2.5rem;*/
.form-modal p a{
color:#57b846;
text-decoration: none;
transition:0.2s;
}
.form-modal p a:hover{
color:#222;
}
/*border-bottom: 0.065rem solid #fff;
outline: none;*/
.form-modal i {
position: absolute;
left:10%;
top:50%;
transform:translateX(-10%) translateY(-50%);
}
.fa-google{
color:#dd4b39;
}
.fa-linkedin{
color:#3b5998;
}
/*transform: translate(-50%, -50%);
width: 25rem;
padding: 2.5rem;*/
.fa-windows{
color:#0072c6;
}
.-box-sd-effect:hover{
box-shadow: 0 4px 8px hsla(210,2%,84%,.2);
}
/*border-bottom: 0.065rem solid #fff;
outline: none;*/
@media only screen and (max-width:500px){
.form-modal{
width:100%;
}
}
@media only screen and (max-width:400px){
i{
display: none!important;
}
}/*border-bottom: 0.065rem solid #fff;
outline: none;*/
Hopefully, from here you can easily learn and learn how to create this professional login and account creation form using HTML and CSS programming languages. For your convenience, the code is given above and you can also download the code and use it in your project by clicking on the download button.
If you encounter any problems while creating this professional login form, you can let me know in the comments. I will help you as much as possible.
![Make Racing Car Game [Using JavaScript Code Only]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjrVmbtoZxLonUlDyWpFe9gEe9Z1b2zrrfm4i5dwOqw2YQ41SElTjXTvhWSxHTwMQBmWmFMoKTSxUtGc3hAjOh6T-8jMXBlvbXOnaGHq8RP74rRlg4mPR4EuER3Yhb5My-reWpoARLnS8/w680/Make+Racing+Car+Game+%255BUsing+JavaScript+Code+Only%255D.jpg)
