"login overlay"
Bootstrap 4.1.1 Snippet by prabuanan

<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 ----------> <!-- login start --> <section class="login-block"> <div class="container"> <div class="row"> <div class="col-md-4 login-sec"> <h2 class="text-center">Login Now</h2> <form class="login100-form validate-form"> <div class="wrap-input100 validate-input"> <span class="label-input100">Username</span> <input class="input100" type="text" name="username" placeholder="Type your username"> <span class="focus-input100"></span> </div> <div class="wrap-input100 validate-input"> <span class="label-input100">Password</span> <input class="input100" type="password" name="pass" placeholder="Type your password"> <span class="focus-input100 password"></span> </div> <div class="text-right p-t-8 p-b-31"> <a href="#"> Forgot password? </a> </div> <div class="container-login100-form-btn"> <div class="wrap-login100-form-btn"> <button class="btn btn-primary"> Login </button> </div> </div> <div class="txt1 text-center p-t-54 p-b-20"> <span> Or Sign Up Using </span> </div> <div class="flex-c-m"> <a href="#" class="login100-social-item bg1"> <i class="fa fa-facebook"></i> </a> <a href="#" class="login100-social-item bg3"> <i class="fa fa-google"></i> </a> </div> </form> <div class="copy-text">Created with <i class="fa fa-heart"></i> by <a href="http://grafreez.com">OOTOO.com</a> </div> </div> <div class="col-md-8 banner-sec"> <div class="signup__overlay"></div> <div class="banner"> <div id="demo" class="carousel slide carousel-fade" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> </ol> <div class="carousel-inner"> <div class="carousel-item"> <h1>GROW with Technology</h1> </div> <div class="carousel-item"> <h1>DISCOVER GROWTH</h1> </div> <div class="carousel-item active"> <h1>GROWTH FOR GOOD</h1> </div> <div class="carousel-item"> <h1>GROW with smartness</h1> </div> <div class="carousel-item"> <h1>GROW Digitally</h1> </div> </div> </div> </div> </div> </div> </div> </section> <!-- login end -->
.signup__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* background-color: rgba(0, 0, 0, 0.76); */ background-color: rgba(0, 0, 0, 0.33); } .banner-sec { // background: url(https://static.pexels.com/photos/33972/pexels-photo.jpg) no-repeat left bottom; // background-size: cover; // min-height: 500px; // border-radius: 0 10px 10px 0; // padding: 0; } .login-block { width: 100%; } .carousel-fade .carousel-item { opacity: 0; transition-duration: .6s; transition-property: opacity; } .carousel-indicators { bottom: -41px; } .carousel-indicators li { background-color: #000; } .carousel-fade .carousel-item.active, .carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right { opacity: 1; } .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right { opacity: 0; } .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item.active, .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-prev { transform: translateX(0); transform: translate3d(0, 0, 0); } .container { -webkit-box-shadow: 0 0.1875rem 1.5rem rgba(0, 0, 0, 0.2); box-shadow: 0 0.1875rem 1.5rem rgba(0, 0, 0, 0.2); border-radius: 0.375rem; margin-bottom: 5%; } .carousel-inner { border-radius: 0 10px 10px 0; } .carousel-caption { text-align: left; left: 5%; } .login-sec { padding: 50px 30px; position: relative; } .login-sec .copy-text { position: absolute; width: 80%; bottom: 20px; font-size: 13px; text-align: center; } .login-sec .copy-text i { color: $vilotecolor; } .login-sec .copy-text a { color: $vilotecolor; } .login-sec h2 { margin-bottom: 30px; font-weight: 800; font-size: 30px; color: $vilotecolor; } .login-sec h2:after { content: " "; width: 100px; height: 5px; background: $vilotecolor; display: block; margin-top: 8px; border-radius: 3px; margin-left: auto; margin-right: auto } .banner-text { width: 70%; position: absolute; bottom: 40px; padding-left: 20px; } .banner-text h2 { color: #fff; font-weight: 600; } .banner-text h2:after { content: " "; width: 100px; height: 5px; background: #FFF; display: block; margin-top: 20px; border-radius: 3px; } .banner-text p { color: #fff; } /* login start */ .container-login100-form-btn { margin: 0 auto; display: block; text-align: center; padding-top: 8%; padding-bottom: 5%; } .login100-form { width: 100%; } .validate-input { position: relative; } .wrap-input100 { width: 100%; position: relative; border-bottom: 2px solid #d9d9d9; margin-bottom: 10%; } .label-input100 { font-size: 14px; color: #333333; line-height: 1.5; padding-left: 7px; } textarea:focus, input:focus { border-color: transparent !important; } .input100:focus+.focus-input100::before { width: 100%; } .input100 { font-size: 12px; color: #333333; line-height: 1.2; display: block; width: 100%; height: 30px; background: transparent; padding: 0 7px 0 43px; } .focus-input100 { position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } .focus-input100::before { content: ""; display: block; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #7f7f7f; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .focus-input100::after { font-family: "FontAwesome"; content: "\f007"; color: #adadad; font-size: 22px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; position: absolute; height: calc(100% - 20px); bottom: 0; left: 0; padding-left: 13px; padding-top: 3px; } .focus-input100.password::after { font-family: "FontAwesome"; content: "\f023"; color: #adadad; font-size: 22px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; position: absolute; height: calc(100% - 20px); bottom: 0; left: 0; padding-left: 13px; padding-top: 3px; } input { outline: none; border: none; } .flex-c-m { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; -ms-align-items: center; align-items: center; } .login100-social-item { font-size: 12px; color: #fff; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; border-radius: 50%; margin: 5px; } .bg1 { background-color: #3b5998; } .bg3 { background-color: #ea4335; }

Related: See More


Questions / Comments: