Here's an example of a Responsive Login form created using Html & pure CSS.






1. Create an HTML file and include a basic structure with a head and body tag. You can use the following code as a starting point and Add the CSS files to your HTML document.




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Login form using Html and CSS</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
</body>
</html>


2. Inside the body tag, create a div element with a class of "login-container".





<div class="login-container">
<div class="container">
<h1>Login Form</h1>
<div class="head">
<a href="#" class="login hover_btn">Login</a>
<a href="#" class="signup">SignUp</a>
</div>
<input type="email" class="email" placeholder="Email Adress">
<input type="password" class="pass" placeholder="Pasword">
<div class="forget">
<a href="#" class="fgpass">Forgot Password</a>
</div>
<a href="#" class="login-button hover_btn">Login</a>
<div class="sin_up">
<p class="member">Not A Member?</p>
<a href="#" class="sign-now">SignUp Now</a>
</div>
</div>
</div>



3. Create a CSS file and style your Login form to make it look nice. You can use the following code as a starting point:






body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.login-container{
height: 100vh;
background: #a7c5e1;
display: flex;
justify-content: center;
align-items: center;
}

.container{
width: 330px;
height: 400px;
border-radius: 8px;
background-color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0 4px 6px #0004;
}

input{
padding: 10px 36px;
margin: 5px;
width: 210px;
outline-color: #0084ff;
}

.head{
margin-top: 20px;
margin-bottom: 30px;
}
.login{
padding: 12px 46px;
text-decoration: none;
background: linear-gradient(to right,#2be2cd, #0297b8);
color: white;
}

.pass{
margin-bottom: 10px;
}
.signup{
padding: 10px 46px;
text-decoration: none;
color: #0297b8;
border: 2px solid #0297b8;
}

.fgpass{
display: block;
text-decoration: none;
color: #001c80;
margin: 10px 0 0;
}

.login-button{
padding: 10px 120px;
text-decoration: none;
background: linear-gradient(to right,#2be2cd, #0297b8);
color: white;
border-radius: 5px;
margin-top: 15px;
margin-bottom: 15px;
}

.sin_up{
display: flex;
align-items: center;
}

.member{
margin-right: 5px;
}

.sign-now{
text-decoration: none;
color: #001c80;
}





4. Save the file and open it in a web browser to see your Login form.





Html Code



<!DOCTYPE html>
<html lang="en">
<head>
<title>Login Page Using Html and Css</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-container">
<div class="container">
<h1>Login Form</h1>
<div class="head">
<a href="#" class="login hover_btn">Login</a>
<a href="#" class="signup">SignUp</a>
</div>
<input type="email" class="email" placeholder="Email Adress">
<input type="password" class="pass" placeholder="Pasword">
<div class="forget">
<a href="#" class="fgpass">Forgot Password</a>
</div>
<a href="#" class="login-button hover_btn">Login</a>
<div class="sin_up">
<p class="member">Not A Member?</p>
<a href="#" class="sign-now">SignUp Now</a>
</div>
</div>
</div>
</body>
</html>





Css Code




body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.login-container{
height: 100vh;
background: #a7c5e1;
display: flex;
justify-content: center;
align-items: center;
}

.container{
width: 330px;
height: 400px;
border-radius: 8px;
background-color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0 4px 6px #0004;
}

input{
padding: 10px 36px;
margin: 5px;
width: 210px;
outline-color: #0084ff;
}

.head{
margin-top: 20px;
margin-bottom: 30px;
}
.login{
padding: 12px 46px;
text-decoration: none;
background: linear-gradient(to right,#2be2cd, #0297b8);
color: white;
}

.pass{
margin-bottom: 10px;
}
.signup{
padding: 10px 46px;
text-decoration: none;
color: #0297b8;
border: 2px solid #0297b8;
}

.fgpass{
display: block;
text-decoration: none;
color: #001c80;
margin: 10px 0 0;
}

.login-button{
padding: 10px 120px;
text-decoration: none;
background: linear-gradient(to right,#2be2cd, #0297b8);
color: white;
border-radius: 5px;
margin-top: 15px;
margin-bottom: 15px;
}

.sin_up{
display: flex;
align-items: center;
}

.member{
margin-right: 5px;
}

.sign-now{
text-decoration: none;
color: #001c80;
}



login form css,login form css design,cool login form css,simple login form css,login and registration form in html and css,responsive login form html css,responsive login form html css & javascript,how to make login form in html and css,how to create login form in html and css,login and registration form in html css & javascript,transparent login form html css,login form css html,login form css and html,css animated login form,login form html css and javascript,login form using html css and bootstrap,login form using html css and php,login page html css angular,login page html css and js,login page html css asmr,login page html css and php,login form in html and css responsive,animated login form css,login form in html and css,simple login form in html and css,animated login form using html and css,responsive login and registration form in html css & javascript,animated login and registration form in html css & javascript,login form html css bootstrap,login page html css background image,login page html css bangla,beautiful login form html css,basic login form html css,best login form using html and css,login form in html and css bootstrap,login form by using html and css,amazing transparent login form just by using html & css,login page html css code with harry,login page html css code,create login form html css,how to create simple login form using html and css,login form in html and css visual studio code,create popup login form using html css & javascript,how to create transparent login form using html and css,login form in html and css with source code,create responsive login form using html and css,responsive login form html css with source code,login page html css django,css neumorphism login form design tutorial,dropdown login form html css,responsive login form html css with database,css login form design,login form in html and css and javascript with database,membuat form login html dan css,simple login form in html and css with database,cara membuat form login dengan html dan css,ui design - login form using html & css,admin dashboard with login form 2022 html css & javascript,login page html css easy tutorial,login page html css easy,login page html css firebase,login page html css flexbox,login page html css flask,login page html css for website,facebook login form html css,css for login form,complete login register forgot password form with html and css,awesome login form create html & css transparent login form,google login form html css,glassmorphism login form using html and css,glassmorphism login form tutorial in html & css,animated glassmorphism login form using html & css,animated glassmorphism parallax login form using html & css,login form html css php,login form html css responsive,login page html css tamil,login page html css php mysql,login page html css js,login page html css responsive,login page html css in visual studio,login page html css javascript php,login page html css with backend,login page html css with source code,how to style login form css,animated login form html css,login form in css,login page html css in hindi,login page html css in tamil,login page html css in telugu,login page html css in visual studio code,login form in html css and javascript,how to create login form in css,how to make login form in css,login form in html and css php,login form validation in html css & javascript,popup login form in html css,login form html css javascript,login page html css javascript with backend,login page html css javascript firebase,login form validation html css & javascript,login page html css javascript bootstrap,login page html css javascript in hindi,login page html css javascript responsive,login page html css jquery,login page html css javascript telugu,login page html css javascript animation,login & registration form using html & css & js,login form validation using html css & javascript,responsive animated login form using html & css & javascript,form login html css keren,next level animated login form using html & css only,login page html css mysql,login page html css malayalam,make login form html css,modern login form html css,modal login form html css,modal login form html css js,login form in html and css with mysql,how to make login and registration form using html css,neumorphism login form html & css,login form in html and css using notepad,login and registration form in html and css node js,login form html css only,login page html css only,login page html css online tutorial,login form using html & css only,transparent login form - html & css only,animated login form using only html & css,login form using only html & css,login page html css python,responsive login form html css php,responsive login form html css javascript php,login and registration form in html and css php,php css login form,popup login form design in html & css,login form using css,login and registration html css,login register page html,login page css react,login page tailwind css react,login page html css react js,login and register form css,tailwind css login form react,responsive login form html css bootstrap,login register form html css php,responsive login form html css & javascript with validation,responsive login and registration form html css,simple login and registration form in html and css,login page styling css,login page html css source code,login page html css simple,login page html css spring boot,login page html css step by step,login form in html and css simple,stylish login form css,styling login form css,html css login signup form,responsive login and signup form in html css & javascript,simple login form using html and css,toggle login and signup form using html css and javascript,login form tailwind css,login page html css tutorial,login page html css telugu,login form in html and css tutorial,login form in html and css telugu,animated login form html css tamil,how to create popup login form using html and css,login form using html css and javascript,login form using tailwind css,login form using html css js,login form using html and css,create login form using html and css,how to make a login form using html and css,login page html css vscode,login and registration form in html and css with validation,login form with css,login page html css with database,login page html css with animation,login page html css with validation,login page html css with explanation,login page html css with image,login page html css with logo,login page html css with icon,login page html css with php,php login form with css,login & signup form with html css & javascript,login form with html and css,html make login page,how to create a html login page,html css login register,how to create a login page in webflow,css login and register form,login and signup form html css,easy login form html,html login register page,css html login page,login form design css,login form bootstrap,login form coding lab,login register page html css,login and register css