<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://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Roboto&display=swap" rel="stylesheet"> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="https://jssors8.azureedge.net/demos/image-slider/img/faded-monaco-scenery-evening-dark-picjumbo-com-image.jpg" alt="First slide"> <div class="carousel-caption"> <h3>This Is Demo Content Slider One</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p> <button type="button" class="btn btn-outline-light text-light">Explore More</button> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://jssors8.azureedge.net/demos/image-slider/img/faded-monaco-scenery-evening-dark-picjumbo-com-image.jpg" alt="Second slide"> <div class="carousel-caption"> <h3>This Is Demo Content Slider Two</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p> <button type="button" class="btn btn-outline-light text-light">Explore More</button> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://jssors8.azureedge.net/demos/image-slider/img/faded-monaco-scenery-evening-dark-picjumbo-com-image.jpg" alt="Third slide"> <div class="carousel-caption"> <h3>This Is Demo Content Slider Three</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p> <button type="button" class="btn btn-outline-light text-light">Explore More</button> </div> </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> <!--navigation bar starts--> <nav class="navbar navbar-expand-md navbar-expand-sm bg-light navbar-light sticky-top"> <!-- Brand --> <a class="navbar-brand" href="#"> <b>Your Company Logo</b></a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Company Details</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Company Item Details</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact Us</a> </li> </ul> </div> </nav> <!--navigation bar ends--> <br> <br> <br> <section> <div class="container"> <div class="row"> <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <img class="card-img-top" src="https://aeei.co.za/wp-content/uploads/2014/05/placeholder-blue1.png" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <img class="card-img-top" src="https://aeei.co.za/wp-content/uploads/2014/05/placeholder-blue1.png" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <img class="card-img-top" src="https://aeei.co.za/wp-content/uploads/2014/05/placeholder-blue1.png" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> </section> <br> <br> <br> <section> <div class="container"> <div class="row"> <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <img class="card-img-top" src="https://aeei.co.za/wp-content/uploads/2014/05/placeholder-blue1.png" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <img class="card-img-top" src="https://aeei.co.za/wp-content/uploads/2014/05/placeholder-blue1.png" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <img class="card-img-top" src="https://aeei.co.za/wp-content/uploads/2014/05/placeholder-blue1.png" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> </section> <br> <br> <br> <section id="back"> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <img src="https://www.compport.com/wp-content/uploads/motopress-slider/import/demo-slider-bg2-1024x240.jpg" alt="demo-imge" class="w-100"> </div> </div> </div> </section> <section id="button"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <h3 class="text-center text-white">You Can Explore More Here</h3> <p class="text-center text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p> <button type="button" class="btn btn-light text-dark mx-auto d-block">Click Here For More</button> </div> </div> </div> </section> <br> <br> <br> <br> <br> <section> <div class="container"> <h3 class="text-center">Top Features</h3> <br> <div class="row"> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3"> <!--card starts--> <div class="card"> <div class="card-body"> <p><span><img src="https://image.flaticon.com/icons/svg/90/90560.svg" alt="demo-icon" class="demo-icon"></span>What is Lorem Ipsum</p> </div> </div> <!--card ends--> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3"> <!--card starts--> <div class="card"> <div class="card-body"> <p><span><img src="https://image.flaticon.com/icons/svg/90/90560.svg" alt="demo-icon" class="demo-icon"></span>What is Lorem Ipsum</p> </div> </div> <!--card ends--> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3"> <!--card starts--> <div class="card"> <div class="card-body"> <p><span><img src="https://image.flaticon.com/icons/svg/90/90560.svg" alt="demo-icon" class="demo-icon"></span>What is Lorem Ipsum</p> </div> </div> <!--card ends--> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3"> <!--card starts--> <div class="card"> <div class="card-body"> <p><span><img src="https://image.flaticon.com/icons/svg/90/90560.svg" alt="demo-icon" class="demo-icon"></span>What is Lorem Ipsum</p> </div> </div> <!--card ends--> </div> </div> </div> </section> <br> <section> <div class="container"> <div class="row"> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3"> <!--card starts--> <div class="card"> <div class="card-body"> <p><span><img src="https://image.flaticon.com/icons/svg/90/90560.svg" alt="demo-icon" class="demo-icon"></span>What is Lorem Ipsum</p> </div> </div> <!--card ends--> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3"> <!--card starts--> <div class="card"> <div class="card-body"> <p><span><img src="https://image.flaticon.com/icons/svg/90/90560.svg" alt="demo-icon" class="demo-icon"></span>What is Lorem Ipsum</p> </div> </div> <!--card ends--> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3"> <!--card starts--> <div class="card"> <div class="card-body"> <p><span><img src="https://image.flaticon.com/icons/svg/90/90560.svg" alt="demo-icon" class="demo-icon"></span>What is Lorem Ipsum</p> </div> </div> <!--card ends--> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3"> <!--card starts--> <div class="card"> <div class="card-body"> <p><span><img src="https://image.flaticon.com/icons/svg/90/90560.svg" alt="demo-icon" class="demo-icon"></span>What is Lorem Ipsum</p> </div> </div> <!--card ends--> </div> </div> </div> </section> <br> <br> <div class="jumbotron text-center" style="margin-bottom:0"> <p>Footer</p> </div>

.carousel-caption h3 { font-size: 50px; color: #ffffff; font-family: 'Poppins', sans-serif;} .carousel-control-next, .carousel-control-prev { top: 15pc; width: 5%; background-color: #ffffff82; height: 15%;} .row-class { margin-right: -29px !important; margin-left: -29px !important;} .carousel-caption { top: 35%;} #button { margin-top: -12.8pc;} .carousel-indicators li { width: 7px; margin-top: -70px;} .carousel-indicators .active { opacity: 1; height: 20px;} img.demo-icon { width: 32px; padding-right: 7px;}