Testimonial Section Doesn't Show in WebPage Cyberpanel

General
1

i would like to ask you a question about Webpage View in Cyberpanel, so i tried to host my django project to Cyberpanel hosting service, after a few configurations was made, the index.html is loaded nice with the content, but when i scroll to the bottom of the page, there is a missing secion in testimonial, which is it only show the title but not the carousel content that i made, i am pretty confused because i just start using Cyberpanel recently, and also whe i tried to inspect the page it looks like this :

image
image1790×884 83.8 KB

here is my testimonial section html :

 <!-- Testimoni -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
                <h1 class="text-uppercase">Apa yang mereka pikirkan?</h1>
            </div>
            <div class="owl-carousel testimonial-carousel wow fadeInUp" data-wow-delay="0.1s">
                <div class="testimonial-item text-center" data-dot="<img class='img-fluid' src='{% static 'img/LIA.png' %}' alt=''>">
                    <h4 class="text-uppercase">Lia</h4>
                    <p class="text-danger">Customer Langganan</p>
                    <span class="fs-5">Glory Salon adalah tempat yang luar biasa! Pelayanan yang diberikan sangat profesional dan hasilnya selalu memuaskan. Saya sangat senang dengan perawatan rambut dan wajah yang mereka tawarkan. Saya merasa lebih percaya diri setelah perawatan di sini. Sangat direkomendasikan!</span>
                </div>
                <div class="testimonial-item text-center" data-dot="<img class='img-fluid' src='{% static 'img/AGUS.png' %}' alt=''>">
                    <h4 class="text-uppercase">Agus</h4>
                    <p class="text-danger">Customer Langganan</p>
                    <span class="fs-5">Glory Salon benar-benar mengerti kebutuhan pelanggan mereka. Staf yang ramah dan berpengalaman membuat pengalaman saya selalu menyenangkan. Terima kasih, Glory Salon!</span>
                </div>
                <div class="testimonial-item text-center" data-dot="<img class='img-fluid' src='{% static 'img/CANTIKA.png' %}' alt=''>">
                    <h4 class="text-uppercase">Cantika</h4>
                    <p class="text-danger">Customer Langganan</p>
                    <span class="fs-5">Saya sudah mencoba beberapa salon, tapi Glory Salon adalah yang terbaik. Mereka menawarkan berbagai pilihan perawatan dengan harga yang terjangkau. Selain itu, atmosfernya sangat nyaman dan bersih. Saya selalu puas dengan hasil perawatan di sini. Glory Salon memang pilihan yang tepat!</span>
                </div>
            </div>
        </div>
    </div>
    <!-- Testimoni -->

Here is the CSS :

/*** Testimonial ***/
.testimonial-carousel { 
    max-width: 700px;
    margin: 0 auto;
}

.testimonial-carousel .owl-dots {
    margin-top: 35px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-carousel .owl-dots .owl-dot {
    width: 60px;
    height: 60px;
    margin: 0 5px;
    padding: 10px;
    background: var(--secondary);
    transition: .5s;
}

.testimonial-carousel .owl-dots .owl-dot.active {
    width: 100px;
    height: 100px;
}

.testimonial-carousel .owl-dots .owl-dot img {
    opacity: .1;
    transition: .5s;
}

.testimonial-carousel .owl-dots .owl-dot.active img {
    opacity: 1;
}

i tried something with gemini AI and ChatGPT but the result didn’t meet my expectations, i expect that it should have been showed in there the testimonial section