<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 ----------> <div class="content d-flex align-items-center justify-content-center"> <div class="container rounded" style="overflow: hidden;"> <div class="h1 fw-bold text-center mt-2">BBBootstrap </div> <div class="h3 text-center pt-2">With Great Outcomes!</div> <div class="fs-5 text-center pb-3 mb-3">Our patrons have gotten offers from awesome companies.</div> <div class="rollers position-relative overflow-hidden"> <div class="wrapper"> <div class="items-container roll-LL"> <div class="item"> <img src="https://www.freepnglogos.com/uploads/original-microsoft-logo-28.png" alt="" class="company"> </div> <div class="item"> <img src="https://www.freepnglogos.com/uploads/facebook-logo-15.jpg" alt="" class="company"> </div> <div class="item"> <img src="https://www.freepnglogos.com/uploads/google-logo-new-history-png-9.png" alt="" class="company"> </div> <div class="item"> <img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" alt="" class="company"> </div> <div class="item"> <img src="https://www.freepnglogos.com/uploads/logo-tokopedia-png/tokopedia-apa-itu-startup-pengertian-cara-memulai-dan-1.png" alt="" class="company"> </div> <div class="item"> <img src="https://www.freepnglogos.com/uploads/amazon-png-logo-vector/woodland-gardening-amazon-png-logo-vector-8.png" alt="" class="company"> </div> </div> <div class="items-container roll-RL"> <div class="item"> <img src="https://www.freepnglogos.com/uploads/original-microsoft-logo-28.png" alt="" class="company"> </div> <div class="item"> <img src="https://www.freepnglogos.com/uploads/facebook-logo-15.jpg" alt="" class="company"> </div> <div class="item"> <img src="https://www.freepnglogos.com/uploads/google-logo-new-history-png-9.png" alt="" class="company"> </div> <div class="item"> <img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" alt="" class="company"> </div> <div class="item"> <img src="https://www.freepnglogos.com/uploads/logo-tokopedia-png/tokopedia-apa-itu-startup-pengertian-cara-memulai-dan-1.png" alt="" class="company"> </div> <div class="item"> <img src="https://www.freepnglogos.com/uploads/amazon-png-logo-vector/woodland-gardening-amazon-png-logo-vector-8.png" alt="" class="company"> </div> </div> </div> <div class="wrapper"> <div class="items-container reverse-roll-LL"> <div class="item"> <img src="https://www.freepnglogos.com/uploads/at-t-logo/brand-new-emblem-at-t-png-logo-6.png" alt="" class="company"> </div> <div class="item"> <img src="https://www.freepnglogos.com/uploads/sprint-png-logo/brand-sprint-png-logo-11.png" alt="" class="company"> </div> <div class="item"> <img src="https://www.freepnglogos.com/uploads/linkedin-logo-transparent-png-16.png" alt="" class="company"> </div> <div class="item"> <img src="https://www.freepnglogos.com/uploads/nokia-brand-logos-12.png" alt="" class="company"> </div> <div class="item"> <img src="https://www.freepnglogos.com/uploads/flipkart-logo-png/flipkart-logo-transparent-vector-3.png" alt="" class="company"> </div> <div class="item"> <img src="https://www.freepnglogos.com/uploads/cisco-png-logo/world-cisco-png-logo-12.png" alt="" class="company"> </div> </div> <div class="items-container reverse-roll-RL"> <div class="item"> <img src="https://www.freepnglogos.com/uploads/at-t-logo/brand-new-emblem-at-t-png-logo-6.png" alt="" class="company"> </div> <div class="item"> <img src="https://www.freepnglogos.com/uploads/sprint-png-logo/brand-sprint-png-logo-11.png" alt="" class="company"> </div> <div class="item"> <img src="https://www.freepnglogos.com/uploads/linkedin-logo-transparent-png-16.png" alt="" class="company"> </div> <div class="item"> <img src="https://www.freepnglogos.com/uploads/nokia-brand-logos-12.png" alt="" class="company"> </div> <div class="item"> <img src="https://www.freepnglogos.com/uploads/flipkart-logo-png/flipkart-logo-transparent-vector-3.png" alt="" class="company"> </div> <div class="item"> <img src="https://www.freepnglogos.com/uploads/cisco-png-logo/world-cisco-png-logo-12.png" alt="" class="company"> </div> </div> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif } .content { width: 100vw; min-height: 100vh } .content .container { padding-top: 30px; padding-bottom: 20px; box-shadow: 2px 15px 20px #1f1f1f10, -2px -8px 20px #1f1f1f1a } .container .rollers { flex: 0 0 230px } .container .start-roller { left: 0; top: 0; background-image: linear-gradient(to right, white 30%, #ffffff00) } .container .start-roller, .container .end-roller { height: 100%; width: 40px; position: absolute; z-index: 1 } .container .end-roller { right: 0; top: 0; background-image: linear-gradient(to left, white 30%, rgba(255, 255, 255, 0)) } .container .rollers .wrapper { position: relative; width: 1400px; height: 100px; margin: 0 0 20px 0; flex: 0 0 auto } .container .rollers .wrapper .items-container { display: flex; align-items: center; position: absolute; width: 100%; height: 100%; animation-duration: 30s; animation-iteration-count: infinite; animation-timing-function: linear } .container .rollers .wrapper .items-container.roll-LL { animation-name: roll } .container .rollers .wrapper .items-container.roll-RL { animation-name: roll-reverse; left: 100% } .container .rollers .wrapper .items-container.reverse-roll-LL { animation-name: roll-clockwise; left: -100% } .container .rollers .wrapper .items-container.reverse-roll-RL { animation-name: roll-reverse-clockwise; left: 100% } @keyframes roll { 0% { left: 0% } 100% { left: -100% } } @keyframes roll-reverse { 0% { left: 100% } 100% { left: 0% } } @keyframes roll-clockwise { 0% { left: -100% } 100% { left: 0% } } @keyframes roll-reverse-clockwise { 0% { left: 0% } 100% { left: 100% } } .container .rollers .wrapper .items-container .item { flex: 1 1 200px; min-width: 0; margin: 20px } .container .rollers .wrapper .items-container .item .company { filter: grayscale(100%); opacity: 0.2; width: 100%; object-fit: contain } .container .rollers .wrapper .items-container .item .company:hover { filter: grayscale(0%); opacity: 1; cursor: pointer } .container img { vertical-align: middle } @media (max-width: 575.5px) { .content { padding: 20px } .content .container { padding: 20px } .h3 { font-size: calc(1.1rem + .6vw) } .fs-5 { font-size: 0.9rem !important } .container .rollers .wrapper .items-container .item .company { opacity: 0.4 } }