Login Form How to Create responsive Login form

 Responsive Login Form Using Only HTML & CSS

How to Create responsive Login form

Today In This Post You Will Learn How To Create An Responsive Login Form With Using Only Html & CSS. Earlier I Have Shared A Post On How To Create A Responsive Chat Box Design And Now I’m Going To Create A Responsive Login Form.
A Login Form Is A Collection Of Credentials Used To Validate A User. Most Often, These Consist Of A Username And Password. The Login Form Is Used By Websites, Computer Applications, And Mobile Apps. A Floating Label Is A Text That Appears Inside The Input Field. When The User Interacted With The Input, The Label “floats” Above And Making Room For The User To Input A Value.
In This Post(Responsive Login Form), On The Webpage, There Is A Login Form With Two Input Fields – Email Or Username And Password. When You Focus On The Input Field, The Text Of The Input Color Change. If You’re Feeling Difficult To Understand What I Am Saying You Can View And Download Code File From Here. Hope You Like Our Efforts.

If You Like This Login TemplateAnd Want To Get Source Codes. You Can Easily Get The Source Codes Of This Post. To Get The Source Codes You Just Need To Scroll Down And Click On The Codes. Notification Will Show On Your Screen And Code Copied Successfully. You Can Use This Login Form In Your Html Pages, Websites, And Projects.

HTML

      <!DOCTYPE html>
<html>
<head>
<title>Login Form Vudaily</title>
</head>
<body>
<div class="form_body">
<img src="avatar1.png">
<p class="text">User Login</p>
<form class="login_form">
<input type="text" name="" placeholder="Email or Username"><br>
<input type="password" name="" placeholder="Password"><br>
<button>Login</button>
</form>

</div>

</body>
</html>

CSS

      <style>
body{
    top: 0;
left: 0;
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
font-family: arial;
background: linear-gradient(to right, rgba(0, 40, 70, 0.9), rgb(0 0 0 / 85%));
}
.info {
float: left;
color: white;
padding-top: 30px;
}
.form_body{
position: absolute;
left: 50%;
top: 50%;
height: 390px;
width: 400px;
transform: translate(-50%, -50%);
background: linear-gradient(to right, rgba(0, 40, 70, 0.9), rgb(0 0 0 / 85%));
border-radius: 10px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
border: 1px solid #2980b9;
}
.form_body img{
height: 120px;
width: 120px;
position: relative;
left: 33%;
margin-top: -67px;	
}
.form_body .text{
font-size: 30px;
font-weight: 600;
color: orange;
margin-left: 120px;
margin-top: -5px;
padding-bottom: 5px;
border-bottom: 2px solid;
border-radius: 3px;
width: 160px;
}
.form_body input{
height: 40px;
width: 75%;
margin-left: 45px;
padding-left: 10px;	
color: white;
border: none;
border: 1px solid white;
border-radius: 2px;
outline: none;
font-family: verdana;
background: transparent;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
font-size: 15px;
}
.form_body input:hover{
transition: .5s;
    border: 1px solid #2980b9;
    color: #3498db;
}
.form_body input[type="password"]{
margin-top: 30px;
}
::placeholder{
font-size: 16px;	
color: white;
}
.form_body button{
margin-top: 40px;
margin-left: 45px;
height: 40px;
    width: 78.5%;
    color: #b9c4c6;
    font-size: 22px;
    background: transparent;
    border: none;
    border-radius: 2px;
    outline: none;
    border: 2px solid #2980b9;
    cursor: pointer;	
}
.form_body button:hover{
transition: .5s;
color: #d5dbdd;
    border: 2px solid #3498db;
background: linear-gradient(#34495e, #2c3e50);
}
</style>

Related Posts

10 Best chrome Extensions For Web Developers In 2021

Best Google Chrome Extensions For Web Developers Everybody knows Google Chrome is that the hottest web browser within the globe and rightfully so. With a whopping 66…

Responsive Contact Us Form Using HTML CSS

 Responsive Contact Us Form Using HTML CSS  In This Post, You’ll Learn How To Create A Responsive Contact Us Form Using Only Html & CSS. Earlier I…

Animated Login SignUp Form | HTML Forms

 Animated Login & Register Form Today in this post you’ll learn how to create a Multi-Step Login and Register Form with using HTML CSS & JavaScript. Earlier…

Working Digital Calculator using HTML CSS & jQuery

Greetings Everyone, Today in this blog post you’ll learn how to build a Digital Calculator using HTML CSS & jQuery. Previously I have shared a Working Analog…

Working Analog Clock using HTML CSS & Javascript | Neumorphsim UI Design

Greetings everyone, Today in this post you’ll learn how to Build A Working and animated  Analog Clock using HTML CSS, and Javascript. Before this, We have shared…

Website Preloader using HTML and CSS

Amazing Preloader Using HTML And CSS Hello Everyone, Today In This Post You Learn How To Create An Animated Preloader Using Html CSS. Earlier I Have Shared…

Leave a Reply

Your email address will not be published. Required fields are marked *