<li class="pi-draggable active" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-center text-primary h-100 align-items-center d-flex" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(<?php echo SITE_PATH; ?>assets/images/cover-bubble-dark.svg);  background-position: center center, center center;  background-size: cover, cover;  background-repeat: repeat, repeat;">
        <div class="container py-5">
            <div class="row">
                <div class="mx-auto col-lg-8 col-md-10">
                    <h1 class="display-3 mb-4">A wonderful serenity</h1>
                    <p class="lead mb-5">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.</p> 
                    <a href="#" class="btn btn-lg btn-primary mx-1">Take me there</a> <a class="btn btn-lg mx-1 btn-outline-primary" href="#">Let's Go</a> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-center" style="background-image: url('<?php echo SITE_PATH; ?>assets/images/cover-bubble-dark.svg');background-size:cover;">
        <div class="container">
            <div class="row">
                <div class="bg-white p-5 mx-auto col-md-8 col-10">
                    <h3 class="display-3">I feel the charm</h3>
                    <p class="mb-3 lead">Of existence in this spot</p>
                    <p class="mb-4">Which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p> <a class="btn btn-outline-primary" href="#">Read more</a> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-center align-items-center d-flex" style="background-image: linear-gradient(to left bottom, rgba(189, 195, 199, .75), rgba(44, 62, 80, .75)); background-size: 100%;">
        <div class="container py-5">
            <div class="row">
                <div class="col-md-8 mx-auto"> <i class="d-block fa fa-stop-circle mb-3 text-muted fa-5x"></i>
                    <h1 class="display-3 mb-4">O my friend</h1>
                    <p class="lead mb-5">Heaven and earth seem to dwell in my soul and absorb its power, like the form of a beloved mistress, then I often think with longing, Oh, would I could describe these conceptions, could impress upon paper all that is living.</p> 
                    <a class="btn btn-lg mx-1 btn-outline-dark" href="#">Do</a> <a href="#" class="btn btn-lg btn-primary mx-1">Something</a> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-center text-white" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(<?php echo SITE_PATH; ?>assets/images/cover-bubble-dark.svg);  background-position: center center, center center;  background-size: cover, cover;  background-repeat: repeat, repeat;">
        <div class="container">
            <div class="row">
                <div class="col-md-8 mx-auto">
                    <h1 class="mb-3">I enjoy with my whole heart</h1>
                    <p class="lead mb-0">I am alone, and feel the charm of existence in this spot.</p> <a class="btn btn-link m-3" href="#">Read more</a> <a class="btn btn-primary m-3" href="#">Buy now</a> 
                    <img class="img-fluid d-block mx-auto" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-tablet.svg" width="750"> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-center text-white" style="position: relative; overflow: hidden;"> <video autoplay="" loop="" muted="" plays-inline="" style="position: absolute; right: 0; top: 0; min-width:100%; z-index: -100;">
            <source src="<?php echo SITE_PATH; ?>assets/images/video-placeholder.mp4" type="video/mp4"> </video>
        <div class="container py-5">
            <div class="row">
                <div class="col-lg-8 col-md-10 mx-auto">
                    <h1 class="mb-4 display-3">Video</h1>
                    <p class="lead mb-5">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>
                    <a href="#" class="btn btn-lg btn-primary mx-1">Your call to action</a> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5" style="background-image: url(&quot;<?php echo SITE_PATH; ?>assets/images/cover-stripes.svg&quot;); background-position: right bottom; background-size: cover;">
        <div class="container">
            <div class="row">
                <div class="p-5 bg-white ml-auto col-md-5 border">
                    <h1>O my friend</h1>
                    <p class="mb-3">Would I could describe these conceptions, could impress upon paper all that is living so full and warm within me, that it might be the mirror of my soul, as my soul is the mirror of the infinite.</p> <a class="btn btn-primary" href="#">Take me there</a>          </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-center text-md-right pi-draggable" style="background-image: url(<?php echo SITE_PATH; ?>assets/images/cover-bubble-dark.svg);	background-position: right bottom;	background-size: cover;	background-repeat: repeat; background-attachment: fixed;">
        <div class="container">
            <div class="row">
                <div class="p-5 mx-auto mx-md-0 ml-md-auto col-10 col-md-9">
                    <h3 class="display-3">I feel the charm</h3>
                    <p class="mb-3 lead">Of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
                    <form class="form-inline d-flex justify-content-end">
                        <div class="input-group"> <input type="email" class="form-control" placeholder="Your email" id="formcover1">
                            <div class="input-group-append"> <button class="btn btn-primary" type="button">Subscribe</button> </div>
                        </div>
                    </form>
                </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="px-5 col-md-8 text-center mx-auto">
                    <h3 class="text-primary display-4"> <b>PHP GrapesJS</b> </h3>
                    <h2 class="my-3">I am so happy, my dear friend.</h2>
                    <p class="mb-3">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 among the stalks, and grow familiar with the countless
                        indescribable.</p> <a href="#" class="btn btn-primary">Download</a>
                    <p class="mt-2"> <small>Currently v2.0.3</small> </p>
                </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 bg-light">
        <div class="container">
            <div class="row">
                <div class="p-5 col-md-7 d-flex flex-column justify-content-center">
                    <h3 class="display-4 mb-3">Heaven and earth</h3>
                    <p class="mb-4 lead">Seem to dwell in my soul and absorb its power, like the form of a beloved mistress, then I often think with longing, Oh, would I could describe these conceptions.</p>
                </div>
                <div class="p-5 col-md-5">
                    <h3 class="mb-3">Reserve a spot</h3>
                    <form>
                        <div class="form-group"> <label>Name</label> <input class="form-control" placeholder="Type here"> </div>
                        <div class="form-group"> <label>Time</label> <input type="time" class="form-control" placeholder="13"> </div>
                        <div class="form-group"> <label>People</label> <input type="number" class="form-control" placeholder="2"> </div> <button type="submit" class="btn mt-4 btn-block btn-outline-dark p-2"><b>Reserve a table</b></button> </form>
                </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-white" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(<?php echo SITE_PATH; ?>assets/images/cover-bubble-dark.svg);  background-position: center center, center center;  background-size: cover, cover;  background-repeat: repeat, repeat;">
        <div class="container">
            <div class="row">
                <div class="col-lg-5 p-0">
                    <div class="embed-responsive embed-responsive-4by3"> <video src="<?php echo SITE_PATH; ?>assets/images/video-placeholder.mp4" class="embed-responsive-item" type="video/mp4" controls="controls">
                            Your browser does not support HTML5 video.
                        </video> </div>
                </div>
                <div class="p-5 col-lg-7 d-flex flex-column justify-content-center">
                    <h3 class="display-4 mb-3">The lovely valley</h3>
                    <p class="lead mb-0">Teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;
                        and, as I lie close to the earth.</p>
                </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 align-items-center d-flex pi-draggable">
        <div class="container py-5">
            <div class="row">
                <div class="col-md-8 px-md-5">
                    <h1 class="display-3 mb-4">O my friend</h1>
                    <p class="lead mb-4">Heaven and earth seem to dwell in my soul and absorb its power, like the form of a beloved mistress, then I often think with longing, Oh, would I could describe these conceptions, could impress upon paper all that is living.</p> <a href="#"
                                                                                                                                                                                                        class="btn btn-lg btn-primary">Do something</a> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="pt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mr-auto order-2 order-md-1"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-mobile.svg"> </div>
                <div class="px-md-5 p-3 d-flex flex-column align-items-start justify-content-center col-md-7 order-1 order-md-2"> <i class="d-block fa fa-stop-circle fa-4x mb-3 text-muted"></i>
                    <h1> Indescribable forms</h1>
                    <p class="mb-3 lead">And yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface.</p>
                    <div class="row text-muted">
                        <div class="col-12 p-2"> <i class="d-inline fa fa-apple fa-3x"></i> <i class="d-inline fa fa-android fa-3x mx-4"></i> <i class="d-inline fa fa-windows fa-3x"></i> </div>
                    </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="px-md-5 p-3 col-md-6 d-flex flex-column align-items-start justify-content-center">
                    <h1>A wonderful serenity</h1>
                    <p class="mb-3 lead">Has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                    <p class="mb-2">Choose an option</p>
                    <div class="row">
                        <div class="col-md-12"> <i class="fa fa-stop-circle fa-3x mr-3 text-muted d-inline"></i> <i class="fa fa-circle-o fa-3x mx-3 text-muted d-inline"></i> <i class="fa fa-stop-circle-o fa-3x mx-3 text-muted d-inline"></i> <i class="fa fa-circle fa-3x ml-3 text-muted d-inline"></i>              </div>
                    </div>
                </div>
                <div class="col-md-6"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-tablet.svg"> </div>
            </div>
        </div>
    </div>
</li>
