This content originally appeared on DEV Community and was authored by freelancer soyel
Hello readers, today in this vdieo we will learn how to create Responsive login form using HTML and CSS. You easily create this login form using HTML & CSS by follow these tutorials and steps. You will build this awesome login form design by just following this video tutorial or these steps which i given bellow. In addition, common HTML and CSS programming codes have been used. It is designed in a completely modern way.
Some information about this login form
This Login form design, which uses beautiful colors & image has gained the best of beauty. On this design, there is show on full web page. there are left side two images and right side login form with avator icon.
You can copy the codes from the given boxes or download the code files from the given link but I recommend you to download the source code files instead of copying codes. Click here to download code files
HTML CODE:
<img class="wave" src="https://i.postimg.cc/sDG8zyXM/wave.png">
<div class="container">
<div class="img">
<img src="https://svgshare.com/i/JcM.svg">
</div>
<div class="login-content">
<form action="index.html">
<img src="https://svgshare.com/i/Jcf.svg">
<h2 class="title">Welcome</h2>
<div class="input-div one">
<div class="i">
<i class="fas fa-user"></i>
</div>
<div class="div">
<h5>Username</h5>
<input type="text" class="input">
</div>
</div>
<div class="input-div pass">
<div class="i">
<i class="fas fa-lock"></i>
</div>
<div class="div">
<h5>Password</h5>
<input type="password" class="input">
</div>
</div>
<a href="#">Forgot Password?</a>
<input type="submit" class="btn" value="Login">
</form>
</div>
</div>
CSS CODE:
body {
font-family: "Poppins", sans-serif;
overflow: hidden;
}
.wave {
position: fixed;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
}
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 7rem;
padding: 0 2rem;
}
.img {
display: flex;
justify-content: flex-end;
align-items: center;
}
.login-content {
display: flex;
justify-content: flex-start;
align-items: center;
text-align: center;
}
.img img {
width: 500px;
}
form {
width: 360px;
}
.login-content img {
height: 100px;
}
.login-content h2 {
margin: 15px 0;
color: #333;
text-transform: uppercase;
font-size: 2.9rem;
}
.login-content .input-div {
position: relative;
display: grid;
grid-template-columns: 7% 93%;
margin: 25px 0;
padding: 5px 0;
border-bottom: 2px solid #d9d9d9;
}
.login-content .input-div.one {
margin-top: 0;
}
.i {
color: #d9d9d9;
display: flex;
justify-content: center;
align-items: center;
}
.i i {
transition: 0.3s;
}
.input-div > div {
position: relative;
height: 45px;
}
.input-div > div > h5 {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 18px;
transition: 0.3s;
}
.input-div:before,
.input-div:after {
content: "";
position: absolute;
bottom: -2px;
width: 0%;
height: 2px;
background-color: #38d39f;
transition: 0.4s;
}
.input-div:before {
right: 50%;
}
.input-div:after {
left: 50%;
}
.input-div.focus:before,
.input-div.focus:after {
width: 50%;
}
.input-div.focus > div > h5 {
top: -5px;
font-size: 15px;
}
.input-div.focus > .i > i {
color: #38d39f;
}
.input-div > div > input {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background: none;
padding: 0.5rem 0.7rem;
font-size: 1.2rem;
color: #555;
font-family: "poppins", sans-serif;
}
.input-div.pass {
margin-bottom: 4px;
}
a {
display: block;
text-align: right;
text-decoration: none;
color: #999;
font-size: 0.9rem;
transition: 0.3s;
}
a:hover {
color: #38d39f;
}
.btn {
display: block;
width: 100%;
height: 50px;
border-radius: 25px;
outline: none;
border: none;
background-image: linear-gradient(to right, #32be8f, #38d39f, #32be8f);
background-size: 200%;
font-size: 1.2rem;
color: #fff;
font-family: "Poppins", sans-serif;
text-transform: uppercase;
margin: 1rem 0;
cursor: pointer;
transition: 0.5s;
}
.btn:hover {
background-position: right;
}
@media screen and (max-width: 1050px) {
.container {
grid-gap: 5rem;
}
}
@media screen and (max-width: 1000px) {
form {
width: 290px;
}
.login-content h2 {
font-size: 2.4rem;
margin: 8px 0;
}
.img img {
width: 400px;
}
}
@media screen and (max-width: 900px) {
.container {
grid-template-columns: 1fr;
}
.img {
display: none;
}
.wave {
display: none;
}
.login-content {
justify-content: center;
}
This content originally appeared on DEV Community and was authored by freelancer soyel
freelancer soyel | Sciencx (2021-07-13T01:56:32+00:00) Responsive Login Form Create using HTML & CSS. Retrieved from https://www.scien.cx/2021/07/13/responsive-login-form-create-using-html-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.