Gerak Bareng

Sedekah Air

$(document).ready(function () { try { $("#expandable_ds29f71pr").owlCarousel({ loop:false, margin:5, responsiveClass:true, responsive:{ 0:{ items:1, nav:true }, 600:{ items:3, nav:true }, 1000:{ items:5, nav:true, loop:false } }, autoWidth:true }); } catch(err) { console.log(err.message); } $(".custom-carousel .item").click(function () { $(".custom-carousel .item").not($(this)).removeClass("active"); $(this).toggleClass("active"); }); }); .expandable-section .owl-theme.custom-carousel .owl-dots { display: none; } .expandable-section .owl-theme .owl-nav{ margin-top: -30px; text-align: center; -webkit-tap-highlight-color: transparent; position: absolute; left: 47%; } .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev { padding: 5px 15px !important; } /******* Middle section CSS Start ******/ /* -------- Landing page ------- */ .expandable-section { padding:0px; } .expandable-section .owl-stage { margin: 15px 0; display: flex; display: -webkit-flex; } .expandable-section .item { margin: 0 10px 60px; width: 240px; height: 340px; display: flex; display: -webkit-flex; align-items: flex-end; -webkit-align-items: flex-end; background: #343434 no-repeat center center / cover; border-radius: 16px; overflow: hidden; position: relative; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; cursor: pointer; padding-bottom: 10px; } .expandable-section .item.active { width: 360px; box-shadow: 12px 40px 40px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 12px 40px 40px rgba(0, 0, 0, 0.25); } .expandable-section .item:after { content: ""; display: block; position: absolute; height: 100%; width: 100%; left: 0; top: 0; background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); } .expandable-section .item-desc { padding: 0 24px 12px; color: #fff; position: relative; z-index: 1; overflow: hidden; transform: translateY(calc(100% - 95px)); -webkit-transform: translateY(calc(100% - 95px)); transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; } .expandable-section .item-desc h3 { color: #fff !important; font-size: 18px; line-height: 1.3; } .expandable-section .item.active .item-desc h3 { line-height: 1.3; } .expandable-section .item.active .item-desc { transform: none; -webkit-transform: none; } .expandable-section .item-desc p, .expandable-section .item-desc .btn_donasi { opacity: 0; -webkit-transform: translateY(32px); transform: translateY(32px); transition: all 0.4s ease-in-out 0.2s; -webkit-transition: all 0.4s ease-in-out 0.2s; font-size: 13px; } .expandable-section .item.active .item-desc p, .expandable-section .item.active .item-desc .btn_donasi { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); font-size: 13px; } .expandable-section .item.active .item-desc p { margin-bottom: 10px; } .expandable-section .owl-theme.custom-carousel .owl-dots { margin-top: -20px; position: relative; z-index: 5; } /******** Middle section CSS End *******/ /***** responsive css Start ******/ @media (min-width: 992px) and (max-width: 1199px) { /* -------- Landing page ------- */ .expandable-section { padding: 50px 30px; } .expandable-section .item { margin: 0 12px 60px; width: 260px; height: 360px; } .expandable-section .item.active { width: 400px; } .expandable-section .item-desc { transform: translateY(calc(100% - 86px)); -webkit-transform: translateY(calc(100% - 86px)); } } @media (min-width: 768px) and (max-width: 991px) { /* -------- Landing page ------- */ .expandable-section { padding: 50px 30px 40px; } .expandable-section .item { margin: 0 12px 60px; width: 240px; height: 330px; } .expandable-section .item.active { width: 360px; } .expandable-section .item-desc { transform: translateY(calc(100% - 82px)); -webkit-transform: translateY(calc(100% - 82px)); } } @media (max-width: 767px) { .expandable-section .owl-theme .owl-nav { left: 40%; } .expandable-section .item-desc h3 { font-size: 18px; line-height: 1.2 !important; margin-bottom: 12px; } .expandable-section .item.active .item-desc p { font-size: 12px; line-height: 1.3; } /* -------- Landing page ------- */ .expandable-section { padding: 30px 15px 20px; } .expandable-section .item { margin: 0 10px 40px; width: 200px; height: 280px; } .expandable-section .item.active { width: 270px; box-shadow: 6px 10px 10px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 6px 10px 10px rgba(0, 0, 0, 0.25); } .expandable-section .item-desc { padding: 0 14px 5px; transform: translateY(calc(100% - 82px)); -webkit-transform: translateY(calc(100% - 82px)); } }