<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 ----------> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <section class="wrapper"> <div class="container-fluid"> <div class="row"> <div class="col-lg-4 h-100vh bg-white px-4 d-flex align-items-center"> <div class="mx-5"> <form action="#"> <div class="input-group mb-4"> <input type="text" class="form-control form-search" placeholder="Search for..."> <div class="input-group-append"> <button class="btn btn-outline-danger btn-search" type="button" id="button-addon2"> <i class="fa fa-search"></i> </button> </div> </div> </form> <div class="text-center"> <a href="#"> <img width="50" class="rounded-circle" src="http://mundomega.com/image/principal.png"> </a> <div class="mb-5"> <a href="#"> <div class="h2 text-danger">BOOTLOGIN</div> </a> <h1 class="h7">It is a long established fact that a reader will be distracted by the readable.</h1> </div> </div> <div class="my-5"> <div class="h6 text-center mb-4">We are more than 5987.99 users Register or access with your social networks</div> <button type="button" class="btn btn-outline-primary btn-block">Login or register Facebook</button> <button type="button" class="btn btn-outline-danger btn-block">Login or register Google</button> <button type="button" class="btn btn-outline-info btn-block">Login or register Twitter</button> </div> <footer> <p class="text-center text-muted h8">© 2018 <a href="#">www.bootlogin.com</a>. All rights reserved.</p> </footer> </div> </div> <div class="col-lg-8 h-100vh d-flex align-items-center"> <div class="mx-auto w-300"> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <a href="#"> <h2 class="h6">Symfony3 Course - Master the most complete PHP framework</h2> <img class="d-block w-100" src="https://picsum.photos/200/300?image=0" alt="First slide"> </a> </div> <div class="carousel-item"> <a href="#"> <h2 class="h6">JavaScript Modern Definitive Guide Build +10 Projects - Full free Dwonload</h2> <img class="d-block w-100" src="https://picsum.photos/200/300?image=1" alt="Second slide"> </a> </div> <div class="carousel-item"> <a href="#"> <h2 class="h6">It is a long established fact that a reader will be distracted by the readable.</h2> <img class="d-block w-100" src="https://picsum.photos/200/300?image=2" alt="Third slide"> </a> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> </div> </div> </section>

body { height: calc(100vh - 0rem); } .wrapper { height: calc(100vh - 0rem); background-color: #e8e8e8; } a, a:hover{ color: #E91E63; text-decoration: none } .h-100vh { height: calc(100vh - 0rem); } .h7{ font-size: 0.87rem; font-weight: 400; } .h8{ font-size: 0.78rem; font-weight: 400; } .mx-6{ margin-left: 4rem; margin-right: 4rem; } .carousel-control-prev, .carousel-control-next{ height: 3rem; width: 3rem; border-radius: 50%; background-color:#f1427d; margin-top: auto; margin-bottom: auto } .form-search, .btn-search, .form-search:placeholder-shown{ background-color: #ffecf2; border-color: #ffdbde; } .form-search::placeholder{ color: #f89ca5 } .form-search:focus{ color: #dc3545; } @media (min-width: 768px) { .w-300{ max-width: 33rem; padding: 6rem 0; background-color: #ffffff } .w-300 img{ object-fit: cover; height: 12.7rem; } .w-300 .carousel-item{ padding: 0 4rem; } }

(function ($) { $('.carousel').carousel({ interval: false }) })(jQuery)