"card list"
Bootstrap 4.1.1 Snippet by evarevirus

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" /> <title>CodePen - Css Only Carousel</title> <style> @import url("https://fonts.googleapis.com/css?family=Muli:400,700&display=swap"); body { margin: 0; height: calc(100vh - 8em); font-family: "Muli", sans-serif; background-color: #f9f9f9; } h1 { text-align: center; margin: 1.5em; } img { width: 35%; border-radius: 50%; } .container { width: 100%; overflow: hidden; position: relative; } .items { display: flex; align-items: center; width: fit-content; animation: carouselAnim 50s infinite alternate linear; } .entry { display: flex; align-items: center; flex-direction: column; position: relative; width: 300px; background: #fff; margin: 1em; padding: 0.5em; border-radius: 10px; box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.5); } @media only screen and (max-width: 768px) { .items { animation: carouselAnim 35s infinite alternate linear; } @keyframes carouselAnim { from { transform: translate(0, 0); } to { transform: translate(calc(-100% + (2 * 300px))); } } } .entry p { text-align: center; padding: 1em; } .name { font-weight: bold; } @keyframes carouselAnim { from { transform: translate(0, 0); } to { transform: translate(calc(-100% + (5 * 300px))); } } .container .faders { width: 100%; position: absolute; height: 100%; } .faders .right, .faders .left { background: linear-gradient( to right, rgba(245, 245, 245, 1) 0%, rgba(255, 255, 255, 0) 100% ); width: 15%; height: 100%; position: absolute; z-index: 200; } .right { right: 0; background: linear-gradient( to left, rgba(245, 245, 245, 1) 0%, rgba(255, 255, 255, 0) 100% ); } </style> <script> window.console = window.console || function(t) {}; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no"> <h1>Our amazing people</h1> <div class="container"> <div class="faders"> <div class="left"></div> <div class="right"></div> </div> <div class="items"> <div class="entry"> <p class="name">John Doe</p> <img src=https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Smiling person" /> <p class="quote">"Man, I think this app freaking rocks and stuff. Dude."</p> </div> <div class="entry"> <p class="name">John Doe</p> <img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Smiling person" /> <p class="quote">"Man, I think this app freaking rocks and stuff. Dude."</p> </div> <div class="entry"> <p class="name">John Doe</p> <img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Smiling person" /> <p class="quote">"Man, I think this app freaking rocks and stuff. Dude."</p> </div> <div class="entry"> <p class="name">John Doe</p> <img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Smiling person" /> <p class="quote">"Man, I think this app freaking rocks and stuff. Dude."</p> </div> <div class="entry"> <p class="name">John Doe</p> <img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Smiling person" /> <p class="quote">"Man, I think this app freaking rocks and stuff. Dude."</p> </div> <div class="entry"> <p class="name">John Doe</p> <img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Smiling person" /> <p class="quote">"Man, I think this app freaking rocks and stuff. Dude."</p> </div> <div class="entry"> <p class="name">John Doe</p> <img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Smiling person" /> <p class="quote">"Man, I think this app freaking rocks and stuff. Dude."</p> </div> <div class="entry"> <p class="name">John Doe</p> <img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Smiling person" /> <p class="quote">"Man, I think this app freaking rocks and stuff. Dude."</p> </div> </div> </div> </body> </html>

Related: See More


Questions / Comments:

Why there are gap at left corner? How to make it full?

asymi34 () - 4 years ago - Reply 0