<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="http://static.crazycafe.net/crazycafe/inkist/assets/css/bootstrap.min.css" rel="stylesheet"> <div class="app-logo-area wow fadeInUp"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="app-logo"> <ul> <li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo1.png" alt=""></li> <li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo2.png" alt=""></li> <li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo7.png" alt=""></li> <li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo3.png" alt=""></li> <li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo4.png" alt=""></li> <li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo8.png" alt=""></li> <li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo5.png" alt=""></li> <li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo9.png" alt=""></li> <li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo6.png" alt=""></li> <li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo10.png" alt=""></li> <li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo11.png" alt=""></li> <li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo12.png" alt=""></li> <li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo13.png" alt=""></li> </ul> </div> </div> </div> </div> </div>

*{background: #071349;} .app-logo-area { padding-top: 70px; padding-bottom: 270px; } .app-logo li { display: inline-block; background: #07144a; box-shadow: 0px 0px 68px 20px #0a3261; border-radius: 100px; text-align: center; cursor: pointer; -webkit-transition: .4s; transition: .4s; } .app-logo li:nth-child(3) { height: 172px; width: 172px; line-height: 172px; } .app-logo li:nth-child(5), .app-logo li:nth-child(1), .app-logo li:nth-child(2) { height: 150px; width: 150px; line-height: 150px; } .app-logo li:nth-child(6), .app-logo li:nth-child(7), .app-logo li:nth-child(10), .app-logo li:nth-child(11), .app-logo li:nth-child(13), .app-logo li:nth-child(8) { height: 95px; width: 95px; line-height: 95px; } .app-logo li:nth-child(9), .app-logo li:nth-child(12), .app-logo li:nth-child(4) { height: 125px; width: 125px; line-height: 125px; } .app-logo li:nth-child(1) { margin-left: 80px; margin-right: 80px; -webkit-transform: translateY(20px); transform: translateY(20px); } .app-logo li:nth-child(1):hover { -webkit-transform: translateY(20px)scale(1.2); transform: translateY(20px)scale(1.2); } .app-logo li:nth-child(3) { -webkit-transform: translateY(90px); transform: translateY(90px); margin-right: 30px; } .app-logo li:nth-child(3):hover { -webkit-transform: translateY(90px)scale(1.2); transform: translateY(90px)scale(1.2); } .app-logo li:nth-child(5) { margin-left: 40px; margin-right: 15px; } .app-logo li:nth-child(5):hover, .app-logo li:nth-child(4):hover, .app-logo li:nth-child(2):hover, .app-logo li:nth-child(7):hover { -webkit-transform: scale(1.2); transform: scale(1.2); } .app-logo li:nth-child(6) { -webkit-transform: translateY(70px); transform: translateY(70px); } .app-logo li:nth-child(6):hover { -webkit-transform: translateY(70px)scale(1.2); transform: translateY(70px)scale(1.2); } .app-logo li:nth-child(8) { -webkit-transform: translateY(109px); transform: translateY(109px); } .app-logo li:nth-child(8):hover { -webkit-transform: translateY(109px)scale(1.2); transform: translateY(109px)scale(1.2); } .app-logo li:nth-child(9) { -webkit-transform: translateY(25px)translateX(40px); transform: translateY(25px)translateX(40px); } .app-logo li:nth-child(9):hover { -webkit-transform: translateY(25px)translateX(40px)scale(1.2); transform: translateY(25px)translateX(40px)scale(1.2); } .app-logo li:nth-child(10) { -webkit-transform: translateY(140px)translateX(80px); transform: translateY(140px)translateX(80px); } .app-logo li:nth-child(10):hover { -webkit-transform: translateY(140px)translateX(80px)scale(1.2); transform: translateY(140px)translateX(80px)scale(1.2); } .app-logo li:nth-child(11) { -webkit-transform: translateY(88px)translateX(170px); transform: translateY(88px)translateX(170px); } .app-logo li:nth-child(11):hover { -webkit-transform: translateY(88px)translateX(170px)scale(1.2); transform: translateY(88px)translateX(170px)scale(1.2); } .app-logo li:nth-child(12) { -webkit-transform: translateX(270px)translateY(30px); transform: translateX(270px)translateY(30px); } .app-logo li:nth-child(12):hover { -webkit-transform: translateX(270px)translateY(30px)scale(1.2); transform: translateX(270px)translateY(30px)scale(1.2); } .app-logo li:nth-child(13) { -webkit-transform: translateX(330px)translateY(75px); transform: translateX(330px)translateY(75px); } .app-logo li:nth-child(13):hover { -webkit-transform: translateX(330px)translateY(75px)scale(1.2); transform: translateX(330px)translateY(75px)scale(1.2); }