1#@!#!123s

��JFIF�� 1#@!#!123s
: / home2 / ctsnewco / public_html / dps_kalinga /
Filename : dance.php
back
<?php
$pageTitle = "Dance, Music And Art Room";
$table = "dance";
$title = "Dance, Music And Art Room | Delhi Public School Kalinga";
$desc = "Delhi Public School Kalinga Dance, Music And Art Room";
require_once('header.php'); ?>
 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick-theme.css" />

<!-- Add jQuery and Slick Slider JS -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.min.js"></script>

<style>
.pd-top-60 {
    padding-top: 60px;
    padding-bottom: 4px;
}

@media(max-width:768px){
    .education_btn_row{
            margin-top:24px;
        }
        .menuu{
            padding-left:0px;
        }
        .education_row{
            margin-top:29px;
        }
       
}
.slick-dots li.slick button:before{
    font-size:7px;
}
.slick-dots li{
    margin:0px;
}
.slick-dots li.slick-active button{
    background-color:white;
}
.slick-dots li button:hover{
    background-color:white;
}
.slick-dots li.slick-active button:before{
    color:green;
}
.slick-dots li.slick-hover button:before{
    color:green;
}
    .slick-prev, .slick-next {
        background-color: transparent;
        border: none;
        color: #1c6e46;
        font-size: 20px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
    }
    .slick-prev:before, .slick-next:before{
        color: transparent !important;
    }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
    color: #c50011;
    outline: none;
    background: transparent;
}
    .slick-prev {
        left: -25px; /* Adjust position as needed */
    }

    .slick-next {
        right: -25px; /* Adjust position as needed */
    }

    .image-slider img {
        height: 220px;
        width: 100%; /* Ensures the image spans the full width of the slider */
        object-fit: cover;
    }

    .education-card {
        border: none;
        margin-bottom: 15px;
        background-color: transparent;
        box-shadow: 0px 0px 20px 3px #dedcdc;
        height: auto;
    }

   
    .card-title {
        color: #008546;
        text-transform:uppercase;
    }

    .card-text:last-child {
        margin-bottom: 0;
        color: #000;
    }
.tab_red{
    background-color:#C50011;
}
.tab_red:hover a{
    color:white;
}
 .menu-container {
    position: sticky;
    top: 20px; /* Adjust based on header height */
    left: 0;
    width: 100%;
    background: #fff; /* Optional: Adds a background color */
    padding: 10px;
    z-index: 100;
}

.content-container {
    max-height: 100vh; /* Adjust based on your design */
    overflow-y: auto;
    padding-right: 15px;
}
</style>
<style>
    @media screen and (min-width: 1550px){
        .breadcrumb-area{
            margin-top: 58px;
        }
    }
   
</style>

<!-- page title start -->
<div class="breadcrumb-area bg-black bg-relative">
    <div class="banner-bg-imgs" style="background-image: url('./assets/img/about/inner-banner-27.jpg');"></div>
    <div class="black-overlay"></div> <!-- Add this line -->
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-7 col-lg-8">
                <div class="breadcrumb-inner text-center wow slideInUp">
                    <h2 class="page-title"><?= $pageTitle; ?></h2>
                    <ul class="page-list">
                        <li><a href="index.php">Home</a></li>
                        <li>Facilities</li>
                        <li><?= $pageTitle; ?></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- page title end -->
<!-- about area start -->
<div class="service-area pd-top-60 ">
    <div class="service-area bg-relative ">
        <img class="shape-left-top top_image_bounce" src="assets/img/shape/3.png" alt="img">
        <img class="shape-right-top top_image_bounce" src="assets/img/shape/4.webp" alt="img">
        <div class="container">
            <div class="row education_btn_row">

                <div class="col-md-12 align-self-center">
    <div class="section-title px-lg-5 mb-0 ">
        
        
        
        
         <div class="row">
            <div class="col-lg-3">
                <div class="menu-container">
            <ul class="menuu">
            <li><a href="education-facilities.php"><button class="btn_tab ">Educational Facility</button></a></li>
            <li><a href="amphitheater.php"><button class="btn_tab mt-2">Amphitheatre</button></a></li>
            <li><a href="avhall.php"><button class="btn_tab mt-2">AV Room</button></a></li>
            <li><a href="acclass.php"><button class="btn_tab mt-2">AC Class Room</button></a></li>
            <li><a href="dance.php"><button class="btn_tab mt-2 tab_red">Dance , Music & Art Room</button></a></li>
            <li><a href="swimming-pool.php"><button class="btn_tab mt-2">Sports Activities</button></a></li>
            <li><a href="park-playground.php"><button class="btn_tab mt-2">Park & Playground</button></a></li>
            <li><a href="transport.php"><button class="btn_tab mt-2">Transport</button></a></li>
            <li><a href="health.php"><button class="btn_tab mt-2">Health & Wellbeing</button></a></li>
            <li><a href="cafeteria.php"><button class="btn_tab mt-2">Cafeteria</button></a></li>
            <li><a href="school-tour.php"><button class="btn_tab mt-2 ">School Tour</button></a></li>
            </ul>
            </div>
            </div>
            <div class="col-lg-9 content-container">
                <div class="row justify-content-center align-items-center education_row">
                    
                    <?php
                    $lern_count = 2;
                    $table_images = $table."_images";
                    $stm_sql = mysqli_query($conn,"select id,heading,content from $table where status = '1' order by priority asc");
                    while($res_stm = mysqli_fetch_array($stm_sql)) {
                        $cat_id = $res_stm['id'];
                    ?>
                    <div class="col-lg-12">
                        <div class="card card-body education-card">
                            <div class="image-slider">
                                
                                <?php
                                $stm_sql2 = mysqli_query($conn,"select * from $table_images where cat_id = '$cat_id' order by priority asc");
                                while($res_stm2 = mysqli_fetch_array($stm_sql2)) {
                                ?>
                                <div>
                                    <img src="upload/<?= $res_stm2['url'] ?>" alt="Classroom Image 1" class="img-fluid">
                                </div>
                                <?php } ?>
        
                                
                            </div>
                            <h4 class="card-title" style="padding-top: 10px"><?= $res_stm['heading'] ?></h4>
                            <p class="card-text"><?= $res_stm['content'] ?></p>
                        </div>
                    </div>
                       
                    <?php
                        $lern_count++;
                    } ?>
                </div>
            </div>
           
        </div>
        
        
        
        
       
    </div>
</div>

            </div>
        </div>
    </div>

</div>
<!-- about area end -->


<?php require_once('footer.php'); ?>
    <script>
        // Initialize WOW.js
        var wow = new WOW({
            boxClass: 'wow', // Class name for the elements to animate
            animateClass: 'animated', // Class name for animation
            offset: 0, // Offset (in pixels) from the bottom of the viewport to trigger the animation
            mobile: true, // Enable animations on mobile devices
            live: true // Live mode (re-initialize on DOM changes)
        });
        wow.init();
    </script>
     <script type="text/javascript">
    $(document).ready(function(){
        $('.image-slider').slick({
            autoplay: false, // Disable automatic sliding
            dots: true,    // Disable pagination dots
            arrows: false,   // Enable navigation arrows
            infinite: true, // Infinite loop for slides
            slidesToShow: 1, // Show one slide at a time
            slidesToScroll: 1, // Scroll one slide at a time
            speed: 500,     // Transition speed
            cssEase: 'linear', // Smooth transition
            prevArrow: '<button type="button" class="slick-prev">&#10094;</button>', // Custom arrow
            nextArrow: '<button type="button" class="slick-next">&#10095;</button>'  // Custom arrow
        });
    });
</script>