How to create a beautiful login form

Login Page || Here we will show you beautiful login page and customize media queries

Use a “form” element to process the input. Then add inputs with matching labels for each field.

Add the required CSS to design the login page try to keep the design as simple as possible.

 

Before we start creating the login page with the CSS, first we need the HTML which will include the buttons, links, fields, and the basic layout.

After the completion of the HTML, we now need to begin the CSS part of the design. use the below CSS code to get the beautiful login page.

The below code will guide you the detailed information about how to design and which property is used for which design to create.

HTML

<div class="container">
<div class="top-abo">
<div class="row" style="display:flex">
<div class="col-xs-12 col-sm-6" style="margin-top:auto;margin-bottom:auto;">
<div class="row">
<div class="csuite-cs">
<h3>Company Logo</h3>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="row">
<div class="displaybox-bd ">
<div class="main-heading1">
<h1>Welcome</h1>
<span class="second-heading2"> Log into your account</span>
</div>
<div class="textbox-bt">
<div class="col-sm-12">
<input type="text" id="email" class="tbb-1" name="email" placeholder="Email">
</div>
<div class="col-sm-12">
<input type="text" id="pwd" class="tbb-1" name="password" placeholder="Password">
</div>
<div class="col-sm-12">
<i>  <a href="#" class="pwd-forgot blue-text mb-5">Forgot your password?</a></i>
</div>
<div class="login-lg col-sm-12"><a href="company-info-and-account-settings.html"><input type="submit" class="ss-cc font-sb" value="Log In"></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

CSS

.top-abo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
min-width: 1000px;
box-shadow: 2px 2px 20px 0px rgba(217,217,217,1);
}
.csuite-cs {
width: 100%;
}
.csuite-cs h1 {
font-family: Gilroy-Bold;
font-size: 3rem;
}
.displaybox-bd {
border-radius: 5px;
background-color: #f6f6f6;
padding: 40px;
float: right;
min-width: 500px;
}
.main-heading1 {
text-align: center;
line-height: 20%;
font-family: sans-serif;
}
.second-heading2 {
color: #bbbaba;
font-size: 12px;
}
.textbox-bt {
margin-top: 50px;
}

.tbb-1 {
width: 100%;
padding: 12px;
border: none;
box-sizing: border-box;
margin-top: 20px;
margin-bottom: 16px;
resize: vertical;
}
.ss-cc {
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
font-size: 18px;
background-color: #1a3667;
color: #fff;
}
.pwd-forgot {
text-decoration: none;
float: right;
font-size: 13px;
letter-spacing: 0.4px;
font-style: normal;
color: #757aff;
}

Media Queries – RWD

@media all and (max-width:1000px){
.top-abo{min-width:600px;}
.displaybox-bd{min-width:auto;}
}
@media all and (max-width:800px){
.top-abo {
min-width: auto;
position: relative;
top: auto;
left: auto;
transform: inherit;
text-align: center;
background: #fafafa;
}
.displaybox-bd {
min-width: auto;
width: 100%;
border-radius: 5px; 
padding: 40px;
float: none;
}
}