How to create a beautiful login form

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

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;
}
}