<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row forms-container"> <div class="col-md-4 mt-5"> <div class="formbackground"> <div class="skew-up-background"></div> <h1 class="text-center white-text mt-2">Login Form</h1> <form> <div class="form-group mt-4"> <label class="white-text" for="email_id">Email address</label> <input type="email" class="form-control" id="email_id" placeholder="Enter valid email address"> </div> <div class="form-group mt-4"> <label class="white-text" for="password">Password</label> <input type="password" class="form-control" id="password" placeholder="Please provide password"> </div> <div class="text-center mt-5"> <button type="submit" class="btn formsubmitbtn">Submit</button> </div> </form> </div> </div> <hr/> <div class="col-md-4 mt-5"> <div class="formbackground green-text"> <div class="skew-down-background"></div> <h4 class="text-center mt-2">Register Form</h4> <form> <div class="form-group mt-4"> <label class="green-text" for="email_id">Email address</label> <input type="email" class="form-control" id="email_id" placeholder="Enter valid email address"> </div> <div class="form-group mt-4"> <label class="green-text" for="password">Password</label> <input type="password" class="form-control" id="password" placeholder="Please provide password"> </div> <div class="form-group mt-4"> <label class="green-text" for="password">Confirm Password</label> <input type="password" class="form-control" id="confirm password" placeholder="Please retype password"> </div> <div class="text-center mt-4"> <button type="submit" class="btn formsubmitbtn">Submit</button> </div> </form> </div> </div> </div> </div>

.forms-container{ justify-content: center; } .formbackground{ box-shadow: 0px 8px 12px 2px rgb(0,0,0,0.24); padding: 2em; height: 450px; background-color: #ffffff; overflow: hidden; position: relative; z-index: 0; } .white-text{ color: #fff; } .green-text{ color: #27d8ac; } hr{ border: none; border-left: 1px solid hsla(200, 10%, 50%,100); height: 100vh; width: 1px; margin-inline-start: 1em; margin-inline-end: 1em; } @media only screen and (max-width: 500px){ hr{ display: none; } } .skew-up-background{ background: #00B285; height: 250px; position: absolute; top: 0; left: 0; right: 0; transform: skewY(-10deg); transform-origin: top left; z-index: -1; } .skew-down-background{ background: #00B285; height: 250px; position: absolute; /* top: 96px; */ left: 0; right: 0; bottom: 0; transform: skewY(-10deg); transform-origin: top right; z-index: -1; } .formbackground input{ background-color: #27d8ac; box-shadow: 0 5px 15px 2px rgb(65, 90, 82); border: 1px solid #27d8ac; border-radius: 2em; } .formbackground input:hover , .formbackground input:focus{ background-color: #27d8ac; box-shadow: 0 5px 15px 2px rgb(65, 90, 82); border: 1px solid #27d8ac; outline: none; } .formsubmitbtn{ background-color: #27d8ac; box-shadow: 0 5px 15px 2px rgb(65, 90, 82); border: 1px solid #27d8ac; border-radius: 2em; padding-left: 2em; padding-right: 2em; color: #fff; } .formsubmitbtn:hover, .formsubmitbtn:focus{ background-color: #fff; box-shadow: 0 5px 15px 2px rgb(65, 90, 82); border: 1px solid #27d8ac; color: #27d8ac; }