<!--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 ❤️ Ⓒ 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
}