<li class="pi-draggable active" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-4">
        <div class="container">
            <div class="row">
                <div class="col-6 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-bubble-light.svg"> </div>
                <div class="col-6 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-bubble-dark.svg"> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-5 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-moon.svg"> </div>
                <div class="p-3 col-md-4 col-6"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-moon.svg"> </div>
                <div class="p-3 col-md-3 col-6"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-moon.svg"> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5">
        <div class="container">
            <div class="row">
                <div class="text-center mx-auto col-md-12">
                    <h1>Countless indescribable forms</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-bubble-light.svg"> </div>
                <div class="col-md-4 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-moon.svg"> </div>
                <div class="col-md-4 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-bubble-dark.svg"> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-6 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-1.svg"> </div>
                <div class="col-md-3 col-6 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-2.svg"> </div>
                <div class="col-md-3 col-6 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-3.svg"> </div>
                <div class="col-md-3 col-6 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-4.svg"> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-1">
        <div class="container-fluid">
            <div class="row">
                <div class="col-6 col-md-3 p-0"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-moon.svg"> </div>
                <div class="col-6 col-md-3 p-0"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-bubble-dark.svg"> </div>
                <div class="col-6 col-md-3 p-0"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-moon.svg"> </div>
                <div class="col-6 col-md-3 p-0"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-bubble-light.svg"> </div>
                <div class="col-6 col-md-3 p-0"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-bubble-dark.svg"> </div>
                <div class="col-6 col-md-3 p-0"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-moon.svg"> </div>
                <div class="col-6 col-md-3 p-0"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-bubble-light.svg"> </div>
                <div class="col-6 col-md-3 p-0"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-moon.svg"> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="pt-5">
        <div class="container-fluid">
            <div class="row">
                <div class="text-center mx-auto col-md-12">
                    <h1 class="mb-4">I throw myself down among the tall grass</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-6 col-md-4 col-lg-2 p-0"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-bubble-light.svg"> </div>
                <div class="col-6 col-md-4 col-lg-2 p-0"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-moon.svg"> </div>
                <div class="col-6 col-md-4 col-lg-2 p-0"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-bubble-light.svg"> </div>
                <div class="col-6 col-md-4 col-lg-2 p-0"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-bubble-dark.svg"> </div>
                <div class="col-6 col-md-4 col-lg-2 p-0"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-moon.svg"> </div>
                <div class="col-6 col-md-4 col-lg-2 p-0"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-bubble-light.svg"> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5">
        <div class="container">
            <div class="row">
                <div class="text-center mx-auto col-lg-8 col-10">
                    <h1 class="mb-3">Carousel</h1>
                    <div id="carousel1" class="carousel slide carousel-fade" data-ride="carousel" data-interval="5000">
                        <div class="carousel-inner">
                            <div class="carousel-item active"> <img class="d-block w-100" src="<?php echo SITE_PATH; ?>assets/images/cover-moon.svg"> </div>
                            <div class="carousel-item"> <img class="d-block w-100" src="<?php echo SITE_PATH; ?>assets/images/cover-bubble-light.svg"> </div>
                            <div class="carousel-item"> <img class="d-block w-100" src="<?php echo SITE_PATH; ?>assets/images/cover-bubble-dark.svg"> </div>
                        </div>
                        <ol class="carousel-indicators">
                            <li data-target="#carousel1" data-slide-to="0" class="active"> </li>
                            <li data-target="#carousel1" data-slide-to="1"> </li>
                            <li data-target="#carousel1" data-slide-to="2"> </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 p-md-5 p-3 d-flex flex-column justify-content-center">
                    <h1>A thousand sliders</h1>
                    <p class="mb-0">A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
                </div>
                <div class="col-lg-4 p-3">
                    <div id="carousel2" class="carousel slide" data-ride="carousel" data-interval="5000">
                        <div class="carousel-inner">
                            <div class="carousel-item active"> <img class="d-block w-100" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-1.svg"> </div>
                            <div class="carousel-item"> <img class="d-block w-100" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-2.svg"> </div>
                            <div class="carousel-item"> <img class="d-block w-100" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-3.svg"> </div>
                            <div class="carousel-item"> <img class="d-block w-100" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-4.svg"> </div>
                        </div> 
                        <a class="carousel-control-prev" href="#carousel2" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span></a>
                        <a class="carousel-control-next" href="#carousel2" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5">
        <div class="container">
            <div class="row">
                <div class="text-center mx-auto col-md-12">
                    <h1>A thousand unknown plants</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-bubble-light.svg"> </div>
                <div class="col-md-6 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-bubble-dark.svg"> </div>
            </div>
            <div class="row">
                <div class="col-md-12 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-moon.svg"> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5">
        <div class="container">
            <div class="row">
                <div class="text-center mx-auto col-md-8">
                    <h1 class="mb-3">I enjoy with my whole heart</h1>
                    <p class="lead">I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world.</p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-3 col-md-6 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-1.svg"> </div>
                <div class="col-lg-3 col-md-6 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-2.svg"> </div>
                <div class="col-lg-3 col-md-6 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-3.svg"> </div>
                <div class="col-lg-3 col-md-6 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-4.svg"> </div>
                <div class="col-lg-3 col-md-6 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-3.svg"> </div>
                <div class="col-lg-3 col-md-6 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-4.svg"> </div>
                <div class="col-lg-3 col-md-6 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-1.svg"> </div>
                <div class="col-lg-3 col-md-6 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-2.svg"> </div>
                <div class="col-lg-3 col-md-6 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-2.svg"> </div>
                <div class="col-lg-3 col-md-6 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-1.svg"> </div>
                <div class="col-lg-3 col-md-6 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-4.svg"> </div>
                <div class="col-lg-3 col-md-6 p-3"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-3.svg"> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-1">
        <div class="container-fluid">
            <div class="row">
                <div class="p-0 col-12"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-bubble-light.svg"> </div>
            </div>
        </div>
    </div>
</li>
