"login screen"
Bootstrap 4.1.1 Snippet by Shivamsemisetia

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="en"> <body> <section class="h-100 gradient-form" style="background-color: #eee;"> <div class="container-fluid h-100 p-0"> <div class="row d-flex justify-content-center align-items-center h-100"> <div class="col-xl-12"> <div class="card rounded-3 text-black"> <div class="row g-0"> <div class="col-lg-6"> <div class="card-body p-md-5 mx-md-4"> <div class="text-center"> <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/lotus.webp" style="width: 185px;" alt="logo"> <h4 class="mt-1 mb-5 pb-1">We are The Lotus Team</h4> </div> <form> <p>Please login to your account</p> <div class="form-outline mb-4"> <input type="email" id="form2Example11" class="form-control" placeholder="Phone number or email address" /> <label class="form-label" for="form2Example11">Username</label> </div> <div class="form-outline mb-4"> <input type="password" id="form2Example22" class="form-control" /> <label class="form-label" for="form2Example22">Password</label> </div> <div class="text-center pt-1 mb-5 pb-1"> <button class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" type="button">Log in</button> <a class="text-muted" href="#!">Forgot password?</a> </div> <div class="d-flex align-items-center justify-content-center pb-4"> <p class="mb-0 me-2">Don't have an account?</p> <button type="button" class="btn btn-outline-danger">Create new</button> </div> </form> </div> </div> <div class="col-lg-6 d-flex align-items-center gradient-custom-2"> <div class="text-white px-3 py-4 p-md-5 mx-md-4"> <h4 class="mb-4">We are more than just a company</h4> <p class="small mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </div> </div> </div> </div> </div> </section> <style> .gradient-custom-2 { /* fallback for old browsers */ background: #fccb90; /* Chrome 10-25, Safari 5.1-6 */ background: -webkit-linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background: linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593); } @media (min-width: 768px) { .gradient-form { height: 100vh !important; } } @media (min-width: 769px) { .gradient-custom-2 { border-top-right-radius: .3rem; border-bottom-right-radius: .3rem; } } </style> </body> </html>

Questions / Comments: