<header>
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-md-5 col-lg-4 col-xl-3">
<div class="register-form">
<a href="index.html" class="logo">Tolmatol</a>
<h2 class="text-white">Find My Friends</h2>
<div class="line-divider"></div>
<div class="form-wrapper">
<p class="signup-text">Signup now and meet awesome people around the world</p>
<form action="#">
<fieldset class="form-group">
<input type="text" class="form-control" id="example-name" placeholder="Enter name">
</fieldset>
<fieldset class="form-group">
<input type="email" class="form-control" id="example-email" placeholder="Enter email">
</fieldset>
<fieldset class="form-group">
<input type="password" class="form-control" id="example-password" placeholder="Enter a password">
</fieldset>
</form>
<p>By signning up you agree to the terms</p>
<button class="btn-warning btn">Register Now</button>
</div>
<a href="#">Already have an account?</a>
</div>
</div>
</div>
</div>
</div>
</header>
header { background:url(https://images.pexels.com/photos/2647973/pexels-photo-2647973.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260); height: 100vh; background-size: cover; background-position: center; }
.register-form{
background: linear-gradient(to bottom, rgba(43,57,144,.8), rgba(39,170,225,1) 65%);
position: absolute;
width: 340px;
min-height: 600px;
top: 0;
padding: 40px 30px;
text-align: center;
color: #fff;
z-index: 1000;
}
.register-form:after{
content: "";
border-color: #27aae1 transparent transparent;
border-style: solid;
border-width: 40px 170px 0;
bottom: -40px;
height: 0;
left: 0;
position: absolute;
width: 0;
}
a.logo {
font-family: 'Agency FB', sans-serif;
/* text-transform: uppercase; */
font-size: 2.5em;
font-weight: 700;
}
.register-form h2{
font-family:'Agency FB', sans-serif;
margin: 20px 0 20px;
}
.register-form .line-divider{
background: none;
height: 1px;
border-top: 1px solid rgba(255, 255, 255, .20);
width: 180px;
margin: auto;
margin-bottom: 10px;
}
.register-form .form-wrapper{
padding: 20px 20px 0;
border: 1px solid rgba(255, 255, 255, .2);
border-top: none;
margin-bottom: 30px;
}
.register-form .form-wrapper .signup-text{
font-size: 15px;
}
.register-form .form-wrapper .form-group{
margin-bottom: 10px;
width: 100%;
}
.register-form .form-wrapper .form-group .form-control{
border: none;
box-shadow: none;
border-radius: 17px;
padding-left: 20px;
}
.register-form .form-wrapper button{
position: relative;
top: 20px;
border-radius: 17px;
}
.register-form a{
color: #fff;
}
.register-form img.form-shadow{
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 100%;
}