<!--Important link source from https://bbbootstrap.com/snippets/footer-client-testimonial-and-download-app-buttons-37196039-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container-fluid mt-5 pt-5 ">
    <div class="row justify-content-center row-1">
        <div class="col-lg-5 col-md-7 col-sm-9 ">
            <p><b>STILL NOT CONVINCED? SO TAKE LOOK WHAT PEOPLE SAID IN THE MEDIA </b></p>
            <div id="carouselExampleIndicators" class="carousel slide d-flex" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item">
                        <div class="card border-0 ">
                            <div class="card-body text-center ">
                                <div class="row">
                                    <div class="col">
                                        <h5 class="card-text bold text-center">"I believe that one defines oneself by reinvention. To not be like your parents. To not be like your friends. To be yourself. To cut yourself out of stone." </h5>
                                        <h6 class="mt-5"><b>Business Insider</b></h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item active">
                        <div class="card border-0 ">
                            <div class="card-body text-center ">
                                <div class="row">
                                    <div class="col">
                                        <h5 class="card-text bold text-center">"I believe that one defines oneself by reinvention. To not be like your parents. To not be like your friends. To be yourself. To cut yourself out of stone." </h5>
                                        <h6 class="mt-5"><b>Business Insider</b></h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="card border-0 ">
                            <div class="card-body text-center ">
                                <div class="row">
                                    <div class="col">
                                        <h5 class="card-text bold text-center">"I believe that one defines oneself by reinvention. To not be like your parents. To not be like your friends. To be yourself. To cut yourself out of stone." </h5>
                                        <h6 class="mt-5"><b>Business Insider</b></h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="ml-xl-5 ml-md-4 ml-3 ">
        <div class="row justify-content-end">
            <div class=" col-12">
                <div class="row pt-5">
                    <div class="col-xl-4 col-12 mr-auto">
                        <div class="media flex-sm-row flex-column "> <img class="align-self-center img-fluid mobile-img " src="https://i.imgur.com/unD7BGU.png">
                            <div class="media-body">
                                <h4 class="mb-4 bonify">b<span><i class="fa fa-firefox text-light" aria-hidden="true"></i></span>nify</h4>
                                <h5 class="description-img"><b>We make all the count for you count for us.</b></h5><img src="https://cdn.shopify.com/s/files/1/1177/9056/files/1432-tuev-toxproof.jpg?2860823755569098971" class="img-fluid logo">
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-8 col-lg-12 col-md-12 col-sm-12 my-auto ">
                        <div class="row justify-content-around">
                            <div class="col-md-3 col-12 mt-md-0 mt-3">
                                <ul class="list-unstyled text-muted">
                                    <li>Conditions</li>
                                    <li>Privacy</li>
                                    <li>Imprint</li>
                                    <li>Press</li>
                                    <li>COntact</li>
                                    <li>Jobs</li>
                                </ul>
                            </div>
                            <div class="col-md-3 col-12 mt-md-0 mt-3">
                                <ul class="list-unstyled text-muted">
                                    <li>Conditions</li>
                                    <li>Privacy</li>
                                    <li>Imprint</li>
                                    <li>Press</li>
                                    <li>COntact</li>
                                    <li>Jobs</li>
                                </ul>
                            </div>
                            <div class="col-md-3 col-12 mt-md-0 mt-3">
                                <ul class="list-unstyled text-muted">
                                    <li>Credit</li>
                                    <li>Bonitatsausktit</li>
                                    <li>Experience</li>
                                    <li>Tenet info</li>
                                    <li>SCHUFA SCORE</li>
                                </ul>
                            </div>
                            <div class="col-md-auto col-12">
                                <ul class="list-unstyled text-muted">
                                    <li>
                                    <li>Donwload App</li>
                                    <li><img src="https://i.imgur.com/iU0M5wp.png" class="img-fluid app-img" width="100"></li>
                                    <li><img src="https://i.imgur.com/M6ccl7k.png" class="img-fluid app-img" width="100"></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-4 bottom-row justify-content-between">
                    <div class="col-auto ml-2 "><small>Made with ❤️ &#9400; bonify Inc 2019</small></div>
                    <div class="col-sm-auto mr-sm-4 my-auto pt-sm-0 pt-3 ">
                        <p><span><i class="fa fa-instagram" aria-hidden="true"></i></span> <span><i class="fa fa-twitter" aria-hidden="true"></i></span> <span><i class="fa fa-facebook" aria-hidden="true"></i></span> <span><i class="fa fa-linkedin" aria-hidden="true"></i></span> </p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>
 @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

 body {
     font-family: 'Muli', sans-serif;
     height: 100% !important;
     background-color: #fff !important;
     padding-bottom: 0 !important;
     margin-bottom: 0 !important;
     color: #000 !
 }

 .row-1 p {
     font-size: calc(12px + (14 - 12) * ((100vw - 360px) / (1600 - 360))) !important;
     text-align: center;
     color: #2CB8FE
 }

 h5 {
     font-size: calc(16px + (22 - 16) * ((100vw - 360px) / (1600 - 360))) !important
 }

 li {
     margin-top: 8px;
     margin-bottom: 8px;
     cursor: pointer
 }

 .carousel-indicators li {
     cursor: pointer;
     border-radius: 50% !important;
     width: 10px;
     height: 10px;
     opacity: 0.5;
     margin: -30px 15px 0px 15px !important;
     color: #333;
     background-color: #333 !important;
     top: 50px !important;
     position: relative
 }

 .carousel-inner {
     border-radius: 15px !important
 }

 .card {
     color: #383431 !important;
     background-color: #FFFFFF !important
 }

 .bonify {
     font-weight: 600;
     letter-spacing: 2px !important;
     cursor: pointer
 }

 .bottom-row {
     color: #aaaaaa
 }

 i {
     font-size: 25px !important;
     margin-left: calc(15px + (24 - 20) * ((100vw - 360px) / (1600 - 360))) !important;
     cursor: pointer
 }

 .fa-firefox {
     font-size: 19px !important;
     color: #000 !important;
     margin: 0 !important;
     cursor: pointer
 }

 .description-img {
     color: #2CB8FE;
     cursor: pointer
 }

 .logo {
     height: calc(70px + (100 - 70) * ((100vw - 360px) / (1600 - 360))) !important;
     width: calc(90px + (134 - 90) * ((100vw - 360px) / (1600 - 360))) !important
 }

 .mobile-img {
     width: calc(200px + (234 - 200) * ((100vw - 360px) / (1600 - 360))) !important;
     height: calc(200px + (234 - 200) * ((100vw - 360px) / (1600 - 360))) !important
 }

 li {
     font-size: calc(15px + (18 - 15) * ((100vw - 360px) / (1600 - 360))) !important
 }

 .row-1 {
     margin-bottom: calc(100px + (150 - 100) * ((100vw - 360px) / (1600 - 360))) !important
 }

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js