"Registration Form"
Bootstrap 4.1.1 Snippet by Rihana

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="banner6 py-5"> <!-- Row --> <div class="row"> <div class="container"> <div class="col-lg-6 align-justify-center pr-4 pl-0 contact-form"> <div class=""> <h2 class="mb-3 font-weight-light">Get Register For Free</h2> <h6 class="subtitle font-weight-normal">Lorem ipsum dolor sit amet, adipiscing.</h6> <form class="mt-3"> <div class="row"> <div class="col-lg-12"> <div class="form-group"> <input class="form-control" type="text" placeholder="full name"> </div> </div> <div class="col-lg-12"> <div class="form-group"> <input class="form-control" type="email" placeholder="email address"> </div> </div> <div class="col-lg-6"> <div class="form-group"> <input class="form-control" type="password" placeholder="password"> </div> </div> <div class="col-lg-6"> <div class="form-group"> <input class="form-control" type="password" placeholder="confirm password"> </div> </div> <div class="col-lg-12"> <button type="submit" class="btn btn-md btn-block btn-danger-gradiant text-white border-0"><span> Create Account</span></button> <!-- --> </div> </div> </form> <div class="row"> <div class="col-lg-12 text-center mt-4"> <h6 class="font-weight-normal">Signup with Social Accounts</h6> <div class="row"> <div class="col-lg-6 col-md-6"> <a href="#" class="btn btn-block bg-facebook text-white mt-3">Facebook</a> </div> <div class="col-lg-6 col-md-6"> <a href="#" class="btn btn-block bg-twitter text-white mt-3">Twitter</a> </div> </div> </div> <div class="col-lg-12 text-center mt-4"> Already have an account? <a href="#" class="text-danger">Sign In</a> </div> <div class="col-lg-12 text-center mt-4"> Designed and Developed by <a href="https://www.wrappixel.com/" class="text-danger">WrapPixel</a> </div> </div> </div> </div> </div> <div class="col-lg-6 right-image pl-3" style="background-image:url(https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/form/3.jpg);"> </div> </div> </div>
@import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500); .banner6 { font-family: "Montserrat", sans-serif; color: #8d97ad; font-weight: 300; overflow: hidden; position: relative; } .banner6 h1, .banner6 h2, .banner6 h3, .banner6 h4, .banner6 h5, .banner6 h6 { color: #3e4555; } .banner6 .subtitle { color: #8d97ad; line-height: 24px; } .banner6 a { text-decoration: none; } .banner6 .btn-danger-gradiant { background: #ff4d7e; background: -webkit-linear-gradient(legacy-direction(to right), #ff4d7e 0%, #ff6a5b 100%); background: -webkit-gradient(linear, left top, right top, from(#ff4d7e), to(#ff6a5b)); background: -webkit-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%); background: -o-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%); background: linear-gradient(to right, #ff4d7e 0%, #ff6a5b 100%); } .banner6 .btn-danger-gradiant:hover { background: #ff6a5b; background: -webkit-linear-gradient(legacy-direction(to right), #ff6a5b 0%, #ff4d7e 100%); background: -webkit-gradient(linear, left top, right top, from(#ff6a5b), to(#ff4d7e)); background: -webkit-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%); background: -o-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%); background: linear-gradient(to right, #ff6a5b 0%, #ff4d7e 100%); } .banner6 .btn-md { padding: 15px 45px; font-size: 16px; } .banner6 .bg-facebook { background-color: #3b5a9a; } .banner6 .bg-twitter { background-color: #56adf2; } .banner6 .text-danger { color: #ff4d7e !important; } .banner6 .right-image { background-position: center bottom; background-size: cover; background-repeat: no-repeat; position: absolute; right: 0; bottom: 0; top: 0; } @media (max-width: 1023px) { .banner6 .contact-form { padding-left: 0; padding-right: 0; } } @media (max-width: 767px) { .banner6 .contact-form { padding-left: 15px; padding-right: 15px; } } @media (max-width: 1023px) { .banner6 .right-image { position: relative; bottom: -95px; } }

Related: See More


Questions / Comments: