Website header design with sign up

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