Care : 082234468488
<div class="accordion-item bg-light radius-5 shadow mb-10 w-100">
<div class="accordion-header bg-primary hover-light p-15">
<span class="accordion-title txt-body">
Lorem ipsum dolor sit amet ?
</span>
<svg class="accordion-icon active" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div class="accordion-content active">
<p class="accordion-text text-body m-0 p-15">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit
1 Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit
2 Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit
3 Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination my-pagination"></div>
<div class="swiper-button-prev my-prev">❮</div>
<div class="swiper-button-next my-next">❯</div>
</div>
<script>
const mySwipe1 = document.querySelector(".mySwiper");
if (mySwipe1) {
let swiper = new Swiper(".mySwiper", {
spaceBetween: 10,
slidesPerView: 3,
loop: true,
freeMode: false,
centerMode: false,
autoplay: 3000,
pagination: {
el: '.my-pagination',
dynamicBullets: 5,
},
navigation: {
nextEl: ".my-next",
prevEl: ".my-prev",
},
});
}
</script>
<div class="popup-overlay">
<div id="myPopup1" class="container-popup bg-light radius-5 shadow w-700px">
<div class="popup-header bg-primary radius-top-5 p-20">
<div>Menu Popup</div>
<div class="popup-close" onclick="closePopup('myPopup1')">×</div>
</div>
<div class="popup-content radius-bottom-5 p-20">
<p class="p-0 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tristique consequat laoreet.
</p>
</div>
</div>
</div>
<button onclick="openPopup()" class="btn btn-md btn-primary radius-5 shadow bounce hover-bounce">
Click to Pop Me
</button>
<script>
function openPopup() {
runPopMe('myPopup1', {
scrollable: true,
closeOutside: true
});
}
</script>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tristique consequat laoreet. Vestibulum ut lorem at magna porta mollis sit amet quis nulla. Aenean at aliquam risus, dapibus pulvinar justo. Morbi nulla augue, pulvinar et elementum vitae, interdum eget justo. Duis tincidunt lectus id consectetur vestibulum. Nunc dolor sem, euismod eget metus ut, laoreet varius odio. Vivamus lacinia felis vitae cursus venenatis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tristique consequat laoreet. Vestibulum ut lorem at magna porta mollis sit amet quis nulla. Aenean at aliquam risus, dapibus pulvinar justo. Morbi nulla augue, pulvinar et elementum vitae, interdum eget justo. Duis tincidunt lectus id consectetur vestibulum. Nunc dolor sem, euismod eget metus ut, laoreet varius odio. Vivamus lacinia felis vitae cursus venenatis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tristique consequat laoreet. Vestibulum ut lorem at magna porta mollis sit amet quis nulla.
<a href="#" target="_blank" class="chat-wa bounce hover-bounce">
<img src="_dummy/img/icons/wa.webp" alt="chat">
</a>
<a id="totop" href="#" target="_blank" class="back-to-top bounce hover-bounce">
<img src="_dummy/img/icons/totop.webp" alt="back to top">
</a>
<div class="card-1 card-content bg-light radius-5 shadow zoom hover-light">
<a class="d-inline-block w-100" href="#">
<img class="w-100 radius-top-5" src="_dummy/assets/img/image1.webp" alt="Product">
<div class="p-20 p-md-15 p-sm-10">
<h3 class="card-title p-0 m-0">The product title will appear perfectly here and this long content to clamp</h3>
<div class="mt-10 mt-sm-5">
<span class="card-price p-0 m-0">Rp 200.000</span>
</div>
<div class="mt-10 mt-sm-5">
<div class="star" data-rating="3.5" style="--rate:3.5"></div>
<div class="count-star">(24)</div>
</div>
</div>
</a>
</div>
<div class="card-2 card-content bg-light radius-5 shadow zoom hover-light">
<a class="d-inline-block w-100" href="#">
<img class="w-100 radius-top-5" src="_dummy/assets/img/image1.webp" alt="Product">
<div class="p-20 p-md-15 p-sm-10">
<h3 class="card-title p-0 m-0">The article title will appear perfectly here and this long content to clamp </h3>
<div class="mt-10 mt-sm-5">
<p class="excerpt m-0 text-body text-light">
Mauris enim augue, dignissim porta sodales nec, iaculis eget lorem. Vivamus vel finibus sem ...
</p>
</div>
<div class="mt-10 mt-sm-5 mt-20 text-body">
Read more
</div>
</div>
</a>
</div>
