<li class="pi-draggable active" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-center" 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="mx-auto col-md-6">
                    <h1>Get in the loop</h1>
                    <p class="mb-4">A wonderful serenity has taken possession of my entire soul</p>
                    <form class="form-inline d-flex justify-content-center">
                        <div class="input-group"> <input type="email" class="form-control" placeholder="Your email" id="form1">
                            <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="ml-auto col-lg-7 text-center text-lg-left">
                    <h1>A wonderful serenity</h1>
                    <p class="mb-0">I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot.</p>
                </div>
                <div class="col-lg-4 d-flex justify-content-center align-items-center p-3">
                    <form class="form-inline mb-0">
                        <div class="input-group"> <input type="email" class="form-control" placeholder="Your email" id="form2">
                            <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 text-center">
        <div class="container">
            <div class="row">
                <div class="mx-auto col-lg-6">
                    <h1> I enjoy with my whole heart</h1>
                    <p class="mb-4">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.</p>
                    <form class="form-inline d-flex justify-content-center">
                        <div class="input-group"> <input type="email" class="form-control form-control-lg" placeholder="Your email" id="form3">
                            <div class="input-group-append"> <button class="btn btn-primary" type="button">Subscribe</button> </div>
                        </div>
                    </form>
                    <p class="small">We'll never share your mail with anyone.</p>
                </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-6 order-2 order-lg-1 p-0"> <img class="img-fluid d-block" src="<?php echo SITE_PATH; ?>assets/images/cover-moon.svg"> </div>
                <div class="px-5 col-lg-6 d-flex flex-column align-items-start justify-content-center order-1 order-lg-2">
                    <h1>Then, my friend</h1>
                    <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.</p>
                    <form class="form-inline d-flex justify-content-center mb-4">
                        <div class="input-group"> <input type="email" class="form-control" placeholder="Your email" id="form5">
                            <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 text-center" 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="bg-white p-4 col-10 mx-auto mx-md-0 col-lg-6">
                    <h1>I am so happy</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.</p>
                    <form class="form-inline d-flex justify-content-center">
                        <div class="input-group"> <input type="email" class="form-control" placeholder="Your email" id="form6">
                            <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 text-center">
        <div class="container">
            <div class="row">
                <div class="mx-auto col-lg-8">
                    <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.</p>
                    <form class="form-inline d-flex justify-content-around">
                        <div class="mb-3"> <input type="email" class="form-control" id="form7" placeholder="Your email"> </div>
                        <div class="mb-3"> <input type="password" class="form-control" id="form8" placeholder="Password"> </div> <button type="submit" class="btn btn-primary">Confirm identity</button> </form>
                </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 class="mb-4">Log in</h1>
                    <form>
                        <div class="mb-3"> <input type="email" class="form-control" placeholder="Enter email" id="form9"> </div>
                        <div class="form-group mb-3"> <input type="password" class="form-control" placeholder="Password" id="form10"> <small class="form-text text-muted text-right">
                                <a href="#"> Recover password</a>
                            </small> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>
                </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-lg-6">
                    <h1>I am so happy, my dear</h1>
                    <p class="mb-3">So absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
                    <form>
                        <div class="mb-3"> <input type="email" class="form-control" placeholder="Enter email" id="form11"> </div>
                        <div class="mb-3"> <input type="password" class="form-control" placeholder="Password" id="form12"> <small class="form-text text-muted text-right">
                                <a href="#"> Forgot your password?</a>
                            </small> </div> 
                        <button type="submit" class="btn btn-primary">Submit</button> 
                    </form>
                </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5 text-center bg-dark text-white">
        <div class="container">
            <div class="row">
                <div class="p-5 col-lg-6 col-10 mx-auto border">
                    <h1 class="mb-4">I hear the buzz </h1>
                    <form>
                        <div class="mb-3"> <input type="text" class="form-control" placeholder="Name" id="form13"> </div>
                        <div class="mb-3"> <input type="email" class="form-control" placeholder="Email" id="form14"> </div>
                        <div class="mb-3"> <input type="password" class="form-control" placeholder="Password" id="form15"> <small class="form-text text-muted text-right">
                                <a href="#"> Already have an account?</a>
                            </small> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>
                </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-6 col-10">
                    <h1>O my friend</h1>
                    <p class="mb-3">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>
                    <form class="text-left">
                        <div class="mb-3"> <label for="form16">Your Name</label> <input type="text" class="form-control" id="form16" placeholder="Johann W. Goethe"> </div>
                        <div class="mb-3"> <label for="form17">Your Company</label> <input type="text" class="form-control" id="form17" placeholder="Werther Inc."> </div>
                        <div class="mb-3"> <label for="form18">Your email</label> <input type="email" class="form-control" id="form18" placeholder="j.goethe@werther.com"> </div>
                        <div class="form-row">
                            <div class="form-group col-md-6"> <label for="form19">Password</label> <input type="password" class="form-control" id="form19" placeholder="••••"> </div>
                            <div class="form-group col-md-6"> <label for="form20">Confirm Password</label> <input type="password" class="form-control" id="form20" placeholder="••••"> </div>
                        </div>
                        <div class="mb-3">
                            <div class="form-check"> <input class="form-check-input" type="checkbox" id="form21" value="on"> <label class="form-check-label" for="form21"> I Agree with
                                    <a href="#">Term and Conditions</a> of the service </label> </div>
                        </div> <button type="submit" class="btn btn-primary">Sign in</button> 
                    </form>
                </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 col-md-10 p-4">
                    <h1 class="text-light">I am so happy</h1>
                    <p class="mb-4 lead text-light">When, while the lovely valley teems with vapour around me.</p>
                    <form>
                        <div class="form-row">
                            <div class="form-group col-md-4"> <input type="text" class="form-control" id="form22" placeholder="Your Name*"> </div>
                            <div class="form-group col-md-4"> <input type="email" class="form-control" id="form23" placeholder="Email*"> </div>
                            <div class="form-group col-md-4"> <input type="number" class="form-control" id="form24" placeholder="Phone"> </div>
                        </div>
                        <div class="mb-3"> <input type="text" class="form-control" id="form25" placeholder="Subject"> </div>
                        <div class="mb-3"> <textarea class="form-control" id="form26" rows="3" placeholder="Your message"></textarea> </div> 
                        <button type="submit" class="btn btn-primary">Send</button> 
                    </form>
                </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-3 text-center">
        <div class="container">
            <div class="row">
                <div class="mx-auto p-4 col-lg-7">
                    <h1 class="mb-4">I feel that I never was</h1>
                    <form>
                        <div class="form-row">
                            <div class="form-group col-md-6"> <input type="text" class="form-control" id="form27" placeholder="Name"> </div>
                            <div class="form-group col-md-6"> <input type="email" class="form-control" id="form28" placeholder="Email"> </div>
                        </div>
                        <div class="mb-3"> <input type="text" class="form-control" id="form29" placeholder="Subject"> </div>
                        <div class="mb-3"> <textarea class="form-control" id="form30" rows="3" placeholder="Your message"></textarea> </div> 
                        <button type="submit" class="btn btn-primary">Send</button> 
                    </form>
                </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-3 text-center" 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="mx-auto p-4 col-md-7">
                    <h1 class="mb-4">I am so happy</h1>
                    <form>
                        <div class="mb-3"> <input type="email" class="form-control" id="form33" placeholder="Your Email"> </div>
                        <div class="mb-3"> <input type="text" class="form-control" id="form34" placeholder="Subject"> </div>
                        <div class="mb-3"> <textarea class="form-control" id="form35" rows="3" placeholder="Your message"></textarea> </div> 
                        <button type="submit" class="btn btn-outline-primary btn-block">Send</button> 
                    </form>
                </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="pb-5">
        <div class="container-fluid p-0"> <iframe width="100%" height="300" src="https://maps.google.com/maps?hl=en&amp;q=New%20York&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed" scrolling="no" frameborder="0"></iframe> </div>
        <div class="container">
            <div class="row">
                <div class="mx-auto p-4 col-md-6">
                    <h2 class="mb-4">I feel that I never was</h2>
                    <p>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. <br> <br>I am so happy, my dear friend, so absorbed
                        in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
                    <p class="mb-0 lead"> <a href="#">info@hello.com</a> </p>
                </div>
                <div class="mx-auto p-4 col-md-6">
                    <h2 class="mb-4">A greater artist</h2>
                    <form>
                        <div class="mb-3"> <input type="email" class="form-control" id="form31" placeholder="Email"> </div>
                        <div class="mb-3"> <textarea class="form-control" id="form32" rows="3" placeholder="Your message"></textarea> </div>
                        <button type="submit" class="btn btn-primary">Send</button> 
                    </form>
                </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-3">
        <div class="container">
            <div class="row">
                <div class="col-md-8 p-4">
                    <h1>A wonderful serenity</h1>
                    <p>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>
                </div>
            </div>
            <div class="row">
                <div class="col-md-5 p-4">
                    <h3>O my friend</h3>
                    <p>I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth.</p>
                    <p class="lead mt-3"> <b>Support</b> </p>
                    <p> <a href="#">+1 234 567 89</a> </p>
                    <p> <a href="#">support@hello.com</a> </p>
                    <p class="lead mt-3"> <b>Sales</b> </p>
                    <p> <a href="#">+1 234 567 89</a> </p>
                    <p> <a href="#">sales@hello.com</a> </p>
                    <p class="lead mt-3"> <b>General</b> </p>
                    <p> <a href="#">info@hello.com</a> </p>
                </div>
                <div class="col-md-7 p-4">
                    <h3 class="mb-3">I am so happy</h3>
                    <form>
                        <div class="form-row">
                            <div class="form-group col-md-6"> <input type="text" class="form-control" id="form36" placeholder="First Name"> </div>
                            <div class="form-group col-md-6"> <input type="text" class="form-control" id="form37" placeholder="Last Name"> </div>
                        </div>
                        <div class="mb-3"> <input type="text" class="form-control" id="form38" placeholder="Company"> </div>
                        <div class="mb-3"> <input type="email" class="form-control" id="form39" placeholder="Email"> </div>
                        <div class="form-row">
                            <div class="form-group col-md-6"> <input type="number" class="form-control" id="form40" placeholder="Phone (optional)"> </div>
                            <div class="form-group col-md-6"> <input type="text" class="form-control" id="form41" placeholder="Country"> </div>
                        </div>
                        <div class="mb-3"> <input type="text" class="form-control" id="form42" placeholder="Subject"> </div>
                        <div class="mb-3"> <textarea class="form-control" id="form43" rows="3" placeholder="Your message"></textarea> </div> 
                        <button type="submit" class="btn btn-primary">Send</button> 
                    </form>
                </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="mx-auto text-center col-lg-6">
                    <h1 class="mb-3">I sink under</h1>
                    <p class="lead mb-4">I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence.</p>
                </div>
            </div>
            <div class="row">
                <div class="p-0 order-2 order-md-1 col-lg-6"> <iframe width="100%" height="350" src="https://maps.google.com/maps?hl=en&amp;q=New%20York&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed" scrolling="no" frameborder="0"></iframe> </div>
                <div class="px-4 order-1 order-md-2 col-lg-6">
                    <h2 class="mb-4">A greater artist</h2>
                    <form>
                        <div class="mb-3"> <input type="text" class="form-control" id="form44" placeholder="Name"> </div>
                        <div class="mb-3"> <input type="email" class="form-control" id="form45" placeholder="Email"> </div>
                        <div class="mb-3"> <textarea class="form-control" id="form46" rows="3" placeholder="Your message"></textarea> </div> <button type="submit" class="btn btn-primary">Send</button> </form>
                </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <form class="row g-3">
        <div class="col-md-6">
            <label for="inputEmail4" class="form-label">Email</label>
            <input type="email" class="form-control" id="inputEmail4">
        </div>
        <div class="col-md-6">
            <label for="inputPassword4" class="form-label">Password</label>
            <input type="password" class="form-control" id="inputPassword4">
        </div>
        <div class="col-12">
            <label for="inputAddress" class="form-label">Address</label>
            <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
        </div>
        <div class="col-12">
            <label for="inputAddress2" class="form-label">Address 2</label>
            <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
        </div>
        <div class="col-md-6">
            <label for="inputCity" class="form-label">City</label>
            <input type="text" class="form-control" id="inputCity">
        </div>
        <div class="col-md-4">
            <label for="inputState" class="form-label">State</label>
            <select id="inputState" class="form-select">
                <option selected>Choose...</option>
                <option>...</option>
            </select>
        </div>
        <div class="col-md-2">
            <label for="inputZip" class="form-label">Zip</label>
            <input type="text" class="form-control" id="inputZip">
        </div>
        <div class="col-12">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="gridCheck">
                <label class="form-check-label" for="gridCheck">
                    Check me out
                </label>
            </div>
        </div>
        <div class="col-12">
            <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
    </form>
</li>
