<li class="pi-draggable active" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-center">
        <div class="container">
            <div class="row">
                <div class="col-md-8 mx-auto">
                    <p class="mb-3">"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 class="btn btn-primary" href="#">Act now!</a> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-center">
        <div class="container">
            <div class="row">
                <div class="mx-auto col-md-5">
                    <p class="mb-3"> <b>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees.</b> </p> <a class="btn btn-primary" href="#">Do something</a> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-center">
        <div class="container">
            <div class="row">
                <div class="mx-auto col-lg-5 col-md-7 col-10">
                    <h1>O my friend</h1>
                    <p class="mb-3">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-primary" href="#">Act now</a> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-center">
        <div class="container">
            <div class="row">
                <div class="mx-auto col-md-12">
                    <h1 class="mb-4">I feel the charm of existence in this spot.</h1> <a class="btn btn-outline-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">
        <div class="container">
            <div class="row">
                <div class="col-md-9 p-3">
                    <h1 class="mb-0">Call your visitors to act. Now</h1>
                </div>
                <div class="col-md-3 align-items-center d-flex justify-content-center p-3"> <a class="btn btn-primary btn-lg" href="#">Get your license</a> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-center">
        <div class="container">
            <div class="row">
                <div class="align-items-center d-flex justify-content-center col-md-3 p-3 order-2 order-md-1"> <a class="btn btn-primary btn-lg" href="#">Do something
                        <b>bold</b>
                    </a> </div>
                <div class="col-md-9 p-3 order-1 order-md-2">
                    <h1 class="mb-0">Do not procrastinate. Act</h1>
                </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-center">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="mb-3">We <i class="fa fa-fw fa-heart d-inline text-danger"></i> new friends</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-12"> <a href="#" class="text-muted">
                        <i class="fa fa-fw fa-facebook fa-2x mx-3"></i>
                    </a> <a href="#" class="text-muted">
                        <i class="fa fa-fw fa-twitter fa-2x mx-3"></i>
                    </a> <a href="#" class="text-muted">
                        <i class="fa fa-fw fa-2x fa-google-plus mx-3"></i>
                    </a> <a href="#" class="text-muted">
                        <i class="fa fa-fw fa-instagram fa-2x mx-3"></i>
                    </a> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-center">
        <div class="container">
            <div class="row">
                <div class="mx-auto col-md-4">
                    <p class="mb-3 lead">Follow us</p>
                    <div class="row">
                        <div class="col-md-12 d-flex align-items-center justify-content-between"> <a href="#">
                                <i class="d-block fa fa-twitter text-muted fa-2x"></i>
                            </a> <a href="#">
                                <i class="d-block fa fa-google-plus-official text-muted fa-2x"></i>
                            </a> <a href="#">
                                <i class="d-block fa fa-instagram text-muted fa-2x"></i>
                            </a> <a href="#">
                                <i class="d-block fa fa-pinterest-p text-muted fa-2x"></i>
                            </a> <a href="#">
                                <i class="d-block fa fa-reddit text-muted fa-2x"></i>
                            </a> <a href="#">
                                <i class="d-block fa fa-facebook-official text-muted fa-2x"></i>
                            </a> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5" style="background-image: linear-gradient(to left bottom, rgba(189, 195, 199, .75), rgba(44, 62, 80, .75));	background-size: 100%;">
        <div class="container">
            <div class="row">
                <div class="my-3 col-lg-8">
                    <h1 class="text-center text-lg-left text-white">Spread the love&nbsp;</h1>
                </div>
                <div class="text-center align-self-center col-lg-4"> <a href="#">
                        <i class="fa fa-fw fa-facebook text-white mx-3 fa-3x"></i>
                    </a> <a href="#">
                        <i class="fa fa-fw fa-twitter fa-3x text-white mx-3"></i>
                    </a> <a href="#">
                        <i class="fa fa-fw fa-instagram fa-3x text-white mx-3"></i>
                    </a> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-center">
        <div class="container-fluid">
            <div class="row">
                <div class="py-5 col-md-3 col-6" style="background-color:#3b5998"> <a href="#">
                        <i class="fa fa-fw fa-facebook fa-3x text-white"></i>
                    </a> </div>
                <div class="py-5 col-md-3 col-6" style="background-color:#00b2ff"> <a href="#">
                        <i class="fa fa-fw fa-twitter fa-3x text-white"></i>
                    </a> </div>
                <div class="py-5 col-md-3 col-6" style="background-color:#C92228"> <a href="#">
                        <i class="fa fa-fw fa-3x text-white fa-pinterest"></i>
                    </a> </div>
                <div class="py-5 col-md-3 col-6" style="background-color:#4c68d7"> <a href="#">
                        <i class="fa fa-fw fa-instagram fa-3x text-white"></i>
                    </a> </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-12">
                    <h1>O my friend</h1>
                    <p class="mb-4">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.
                        I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
                    <div class="row">
                        <div class="col-md-3 order-3 order-md-1"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-1.svg"> </div>
                        <div class="col-md-6 col-8 d-flex flex-column justify-content-center p-3 order-1 order-md-2">
                            <h3>Mere tranquil existence</h3>
                            <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
                        </div>
                        <div class="col-md-2 col-4 d-flex flex-column align-items-center justify-content-center order-2 order-md-2 p-3"> <a class="btn btn-outline-primary mb-3" href="#">Read more</a> <a class="btn btn-primary mb-3" href="#">Main action</a> <a class="btn btn-link" href="#">Link</a> </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="col-md-12">
                    <h1 class="text-center">Do not wait. Act</h1>
                    <p class="mb-4 text-center lead">I am alone, and feel the charm of existence in this spot.</p>
                    <div class="row">
                        <div class="p-3 col-md-8">
                            <h3>Main feature here </h3>
                            <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 forms of the insects and flies</p> <a class="btn btn-primary mb-3" href="#">Call to action</a> </div>
                        <div class="col-md-4 col-lg-3 offset-lg-1"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-2.svg"> </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="col-md-12">
                    <div class="row">
                        <div class="col-md-4 col-lg-3 order-2 order-md-1 p-0"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-3.svg"> </div>
                        <div class="d-flex flex-column justify-content-center p-3 col-md-8 offset-lg-1 align-items-start order-1 order-md-2">
                            <h3>A wonderful serenity</h3>
                            <p class="mb-3">I should be incapable of drawing a single stroke at the present moment; 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
                                of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary.</p> <a class="btn btn-primary" href="#">Let's GO</a> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-center">
        <div class="container">
            <div class="row">
                <div class="mx-auto col-lg-10">
                    <h1>Choose your way</h1>
                    <div class="row">
                        <div class="col-md-6 px-5 mt-3"> <i class="d-block fa fa-stop-circle fa-4x mb-3 text-muted"></i>
                            <h4>Option #1</h4>
                            <p class="mb-3">I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p> <a class="btn btn-outline-primary" href="#">First call to action</a> </div>
                        <div class="col-md-6 px-5 mt-3">
                            <i class="d-block fa fa-stop-circle-o fa-4x mb-3 text-muted"></i>
                            <h4>Option #2</h4>
                            <p class="mb-3">A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p> <a class="btn btn-primary" href="#">Second call to action</a> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-center">
        <div class="container">
            <div class="row">
                <div class="mx-auto col-lg-10">
                    <h1>Then, my friend</h1>
                    <p class="mb-3 mx-auto w-75 lead">I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth.</p> <a class="btn btn-primary" href="#">Let's GO</a>
                    <div class="row">
                        <div class="col-md-3 mt-4 px-4 col-6"> <i class="d-block fa fa-stop-circle fa-4x mb-3 text-muted"></i>
                            <h5> <b>Option #1</b> </h5>
                            <p class="mb-3">I should be incapable of drawing a single stroke.</p>
                        </div>
                        <div class="col-md-3 mt-4 px-4 col-6"> <i class="d-block fa fa-stop-circle-o fa-4x mb-3 text-muted"></i>
                            <h5> <b>Option #2</b> </h5>
                            <p class="mb-3">A wonderful serenity has taken possession.</p>
                        </div>
                        <div class="col-md-3 mt-4 px-4 col-6"> <i class="d-block fa fa-circle-o fa-4x mb-3 text-muted"></i>
                            <h5> <b>Option #3</b> </h5>
                            <p class="mb-3">Like these sweet mornings of spring.</p>
                        </div>
                        <div class="col-md-3 mt-4 px-4 col-6"> <i class="d-block fa fa-circle fa-4x mb-3 text-muted"></i>
                            <h5> <b>Option #4</b> </h5>
                            <p class="mb-3">I enjoy with my whole heart.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-center">
        <div class="container">
            <div class="row">
                <div class="mx-auto col-lg-8 col-md-10">
                    <h1>A wonderful serenity</h1>
                    <p class="mb-3 mx-auto w-75">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.</p> <a class="btn btn-outline-primary" href="#">
                        <b>Take me there</b>
                    </a>
                    <p class="mt-4 lead">Our happy customers</p>
                    <div class="row text-muted">
                        <div class="col-md-2 col-4 p-2"> <i class="d-block fa fa-angellist fa-3x"></i> </div>
                        <div class="col-md-2 col-4 p-2"> <i class="d-block fa fa-cc-visa fa-3x"></i> </div>
                        <div class="col-md-2 col-4 p-2"> <i class="d-block fa fa-empire fa-3x"></i> </div>
                        <div class="col-md-2 col-4 p-2"> <i class="d-block fa fa-paypal fa-3x"></i> </div>
                        <div class="col-md-2 col-4 p-2"> <i class="d-block fa fa-rebel fa-3x"></i> </div>
                        <div class="col-md-2 col-4 p-2"> <i class="d-block fa fa-first-order 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 col-md-8">
                    <h1 class="mb-4 text-primary"> <b>O my friend</b> </h1>
                    <h3> <b>The trickling stream</b> </h3>
                    <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 forms of the insects and flies</p> <a class="btn btn-primary mb-3" href="#">Download</a> </div>
                <div class="col-md-4"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-mobile.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-6 order-2 order-md-1"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/img-placeholder-tablet.svg"> </div>
                <div class="px-md-5 col-md-6 d-flex flex-column align-items-start justify-content-center order-1 order-md-2">
                    <h1>I feel the charm</h1>
                    <p class="mb-3">I should be incapable of drawing a single stroke at the present moment; 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 of the
                        impenetrable foliage of my trees.</p> <a class="btn btn-primary mb-3" 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 bg-primary">
        <a href="#" class="text-white">
            <div class="container-fluid py-5">
                <div class="row">
                    <div class="mx-auto col-md-12">
                        <h1> <b>O my friend
                                <i class="d-inline fa fa-sun-o text-warning"></i>&nbsp;this is one big button!</b> </h1>
                    </div>
                </div>
            </div>
        </a>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-center text-white" style="background-image: url('<?php echo SITE_PATH; ?>assets/images/cover-moon.svg');background-size:cover;background-position:center top;">
        <div class="container">
            <div class="row">
                <div class="mx-auto p-4 col-md-7">
                    <h1 class="mb-4">I feel the charm of existence in this spot.</h1> <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-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="mx-auto p-4 col-md-5"> <i class="d-block fa fa-stop-circle fa-4x mb-3"></i>
                    <h1>A wonderful serenity</h1>
                    <p class="mb-4">I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p> <a class="btn btn-primary" href="#">Act now</a> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5" style="background-image: url('<?php echo SITE_PATH; ?>assets/images/cover-stripes.svg'); background-position:left center; background-size: cover;">
        <div class="container">
            <div class="row">
                <div class="p-5 col-md-8">
                    <h1>Your call to action</h1>
                    <p class="mb-3">I should be incapable of drawing a single stroke at the present moment; 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 of the
                        impenetrable foliage of my trees.</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" 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="mx-auto col-md-6 col-10 bg-white p-5">
                    <h1>Do not procrastinate. Act</h1>
                    <p class="mb-3">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-primary" href="#">Act now</a> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="pt-5" 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: 100%, 100%;  background-repeat: repeat, repeat;">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-10 bg-white p-5 mx-auto mx-md-0 text-dark">
                    <h1>A wonderful serenity</h1>
                    <p class="mb-3">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.</p> <a class="btn btn-primary" href="#">Red more</a> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-center bg-primary">
        <div class="container">
            <div class="row">
                <div class="col-md-8 text-center text-md-left">
                    <h1>Call your visitors to act. Now</h1>
                    <p>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.</p>
                </div>
                <div class="d-flex col-md-4 align-items-center justify-content-center" style=""> <a class="btn btn-primary btn-lg my-4" href="#">Do something</a> </div>
            </div>
            <div class="row">
                <div class="col-md-12 p-0"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-bubble-light.svg" width="1500"> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5" style="background-image: url('<?php echo SITE_PATH; ?>assets/images/cover-stripes.svg');  background-size: cover;background-position:center bottom;">
        <div class="container">
            <div class="row">
                <div class="p-5 col-lg-8 col-md-10">
                    <h1>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence.</h1>
                    <p class="mb-3">I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems..</p> <a class="btn btn-primary" href="#">Act now</a> </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="pt-5 pb-5 pb-md-0 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: 100%, 100%;  background-repeat: repeat, repeat;">
        <div class="container">
            <div class="row">
                <div class="ml-auto bg-white text-dark p-5 col-lg-6 col-md-8">
                    <h1>It is time to act</h1>
                    <p class="mb-3">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-primary" href="#">Call to action</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-light.svg');background-size:cover;">
        <div class="container">
            <div class="row">
                <div class="col-10 bg-white p-5 mx-auto mx-md-0 col-lg-6 col-md-8">
                    <h1>A wonderful serenity</h1>
                    <p class="mb-3">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.</p> <a class="btn btn-primary" href="#">Red more</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 border col-lg-5 col-md-8">
                    <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>
