<li class="pi-draggable active" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-3">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <p class="mb-0">© 2021 PHP GrapesJS. All rights reserved</p>
                </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-12 text-center d-md-flex justify-content-between align-items-center">
                    <ul class="nav d-flex justify-content-center">
                        <li class="nav-item"> <a class="nav-link active" href="#">Home</a> </li>
                        <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li>
                        <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
                        <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
                    </ul>
                    <p class="mb-0 py-1">© 2021 PHP GrapesJS. All rights reserved</p>
                </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-12 text-center d-md-flex justify-content-between align-items-center">
                    <ul class="nav d-flex justify-content-center">
                        <li class="nav-item"> <a class="nav-link active" href="#">Home</a> </li>
                        <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li>
                        <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
                        <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
                    </ul> <a class="btn btn-primary" href="#">Contact us</a> </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-12 text-center d-md-flex align-items-center"> <i class="d-block fa fa-stop-circle fa-2x mr-md-5 text-primary"></i>
                    <ul class="nav mx-md-auto d-flex justify-content-center">
                        <li class="nav-item"> <a class="nav-link active" href="#">Home</a> </li>
                        <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li>
                        <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
                        <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
                    </ul>
                    <div class="row">
                        <div class="col-md-12 d-flex align-items-center justify-content-md-between justify-content-center my-2"> <a href="#">
                                <i class="d-block fa fa-facebook-official text-muted fa-lg mx-2"></i>
                            </a> <a href="#">
                                <i class="d-block fa fa-instagram text-muted fa-lg mx-2"></i>
                            </a> <a href="#">
                                <i class="d-block fa fa-twitter text-muted fa-lg ml-2"></i>
                            </a> </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 text-center">
                    <p class="mt-2 mb-0">© 2021 PHP GrapesJS. All rights reserved</p>
                </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-lg-3 col-6 p-3">
                    <h5> <b>Main</b> </h5>
                    <ul class="list-unstyled">
                        <li> <a href="#">Home</a> </li>
                        <li> <a href="#">Features</a> </li>
                        <li> <a href="#">Pricing</a> </li>
                    </ul>
                </div>
                <div class="col-lg-3 col-6 p-3">
                    <h5> <b>Others</b> </h5>
                    <ul class="list-unstyled">
                        <li> <a href="#">FAQ</a> </li>
                        <li> <a href="#">Resources</a> </li>
                        <li> <a href="#">Career</a> </li>
                    </ul>
                </div>
                <div class="col-lg-3 col-md-6 p-3">
                    <h5> <b>About</b> </h5>
                    <p class="mb-0"> I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls.</p>
                </div>
                <div class="col-lg-3 col-md-6 p-3">
                    <h5> <b>Follow us</b> </h5>
                    <div class="row">
                        <div class="col-md-12 d-flex align-items-center justify-content-between my-2"> <a href="#">
                                <i class="d-block fa fa-facebook-official text-muted fa-lg mr-2"></i>
                            </a> <a href="#">
                                <i class="d-block fa fa-instagram text-muted fa-lg mx-2"></i>
                            </a> <a href="#">
                                <i class="d-block fa fa-google-plus-official text-muted fa-lg mx-2"></i>
                            </a> <a href="#">
                                <i class="d-block fa fa-pinterest-p text-muted fa-lg mx-2"></i>
                            </a> <a href="#">
                                <i class="d-block fa fa-reddit text-muted fa-lg mx-2"></i>
                            </a> <a href="#">
                                <i class="d-block fa fa-twitter text-muted fa-lg ml-2"></i>
                            </a> </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 text-center">
                    <p class="mb-0 mt-2">© 2021 PHP GrapesJS. All rights reserved</p>
                </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-lg-4 col-6 p-3"> <i class="d-block fa fa-circle-o fa-5x text-primary"></i> </div>
                <div class="col-lg-4 col-6 p-3">
                    <p> <a href="https://goo.gl/maps/AUq7b9W7yYJ2" target="_blank"> Fake street, 100
                            <br>NYC - 20179, USA</a> </p>
                    <p> <a href="tel:+246 - 542 550 5462">+1 - 256 845 87 86</a> </p>
                    <p class="mb-0"> <a href="mailto:info@PHP GrapesJS.com">info@PHP GrapesJS.com</a> </p>
                </div>
                <div class="col-md-4 p-3">
                    <h5> <b>About</b> </h5>
                    <p class="mb-0"> 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.</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 text-center">
                    <p class="mb-0 mt-2">© 2021 PHP GrapesJS. All rights reserved</p>
                </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-12 text-center d-md-flex align-items-center">
                    <ul class="nav d-flex justify-content-center">
                        <li class="nav-item"> <a class="nav-link active" href="#">Home</a> </li>
                        <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li>
                        <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
                    </ul> <i class="d-block fa fa-stop-circle fa-3x mx-auto text-primary"></i>
                    <p class="mb-0 py-1">©2018 PHP GrapesJS All rights reserved</p>
                </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-12 text-center"> <i class="d-block fa fa-stop-circle mb-3 text-muted fa-3x"></i>
                    <p> <a href="https://goo.gl/maps/AUq7b9W7yYJ2" target="_blank"> Fake street, 100
                            <br>NYC - 20179, USA</a> </p>
                    <p> <a href="tel:+246 - 542 550 5462">+1 - 256 845 87 86</a> </p>
                    <p class="mb-0"> <a href="mailto:info@PHP GrapesJS.com">info@PHP GrapesJS.com</a> </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 d-flex align-items-center justify-content-center my-3"> <a href="#">
                        <i class="d-block fa fa-facebook-official text-muted fa-lg mr-2"></i>
                    </a> <a href="#">
                        <i class="d-block fa fa-instagram text-muted fa-lg mx-2"></i>
                    </a> <a href="#">
                        <i class="d-block fa fa-google-plus-official text-muted fa-lg mx-2"></i>
                    </a> <a href="#">
                        <i class="d-block fa fa-pinterest-p text-muted fa-lg mx-2"></i>
                    </a> <a href="#">
                        <i class="d-block fa fa-reddit text-muted fa-lg mx-2"></i>
                    </a> <a href="#">
                        <i class="d-block fa fa-twitter text-muted fa-lg ml-2"></i>
                    </a> </div>
            </div>
            <div class="row">
                <div class="col-md-12 text-center">
                    <p class="mb-0">© 2021 PHP GrapesJS. All rights reserved</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-md-9">
                    <p class="lead">Sign up to our newsletter for the latest news</p>
                    <form class="form-inline">
                        <div class="form-group"> <input type="email" class="form-control" placeholder="Your e-mail here"> </div> <button type="submit" class="btn btn-primary ml-3">Subscribe</button> </form>
                </div>
                <div class="col-4 col-md-1 align-self-center"> <a href="#">
                        <i class="fa fa-fw fa-facebook text-muted fa-2x"></i>
                    </a> </div>
                <div class="col-4 col-md-1 align-self-center"> <a href="#">
                        <i class="fa fa-fw fa-twitter text-muted fa-2x"></i>
                    </a> </div>
                <div class="col-4 col-md-1 align-self-center"> <a href="#">
                        <i class="fa fa-fw fa-instagram text-muted fa-2x"></i>
                    </a> </div>
            </div>
            <div class="row">
                <div class="col-md-12 mt-3 text-center">
                    <p>© Copyright 2018 PHP GrapesJS - All rights reserved.</p>
                </div>
            </div>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-1">
        <div class="container">
            <div class="row">
                <div class="p-4 col-md-3">
                    <h2 class="mb-4">PHP GrapesJS</h2>
                    <p>A company for whatever you may need, from website prototyping to publishing</p>
                </div>
                <div class="p-4 col-md-3">
                    <h2 class="mb-4">Mapsite</h2>
                    <ul class="list-unstyled"> <a href="#" class="text-dark">Home</a> <br> <a href="#" class="text-dark">About us</a> <br> <a href="#" class="text-dark">Our services</a> <br> <a href="#" class="text-dark">Stories</a> </ul>
                </div>
                <div class="p-4 col-md-3">
                    <h2 class="mb-4">Contact</h2>
                    <p> <a href="#" class="text-dark">
                            <i class="fa d-inline mr-3 text-muted fa-phone"></i>+246 - 542 550 5462</a> </p>
                    <p> <a href="#" class="text-dark">
                            <i class="fa d-inline mr-3 text-muted fa-envelope-o"></i>info@PHP GrapesJS.com</a> </p>
                    <p> <a href="#" class="text-dark">
                            <i class="fa d-inline mr-3 fa-map-marker text-muted"></i>365 Park Street, NY</a> </p>
                </div>
                <div class="p-4 col-md-3">
                    <h2 class="mb-4">Subscribe</h2>
                    <form>
                        <fieldset class="form-group"> <label for="exampleInputEmail1">Get our newsletter</label> <input type="email" class="form-control" placeholder="Enter email"> </fieldset> <button type="submit" class="btn btn-outline-dark">Submit</button> </form>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 mt-3">
                    <p class="text-center">© Copyright 2018 PHP GrapesJS - All rights reserved. </p>
                </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-md-6 text-center align-self-center p-4">
                    <p class="mb-5"> <strong>PHP GrapesJS Inc.</strong> <br>795 Folsom Ave, Suite 600 <br>San Francisco, CA 94107 <br> <abbr title="Phone">P:</abbr> (123) 456-7890 </p>
                    <div class="row">
                        <div class="col-md-12 d-flex align-items-center justify-content-around"> <a href="#">
                                <i class="d-block fa fa-facebook-official text-light fa-lg mx-2"></i>
                            </a> <a href="#">
                                <i class="d-block fa fa-instagram text-light fa-lg mx-2"></i>
                            </a> <a href="#">
                                <i class="d-block fa fa-google-plus-official text-light fa-lg mx-2"></i>
                            </a> <a href="#">
                                <i class="d-block fa fa-pinterest-p text-light fa-lg mx-2"></i>
                            </a> <a href="#">
                                <i class="d-block fa fa-reddit text-light fa-lg mx-2"></i>
                            </a> <a href="#">
                                <i class="d-block fa fa-twitter text-light fa-lg ml-2"></i>
                            </a> </div>
                    </div>
                </div>
                <div class="col-md-6 p-0"> <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>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <footer class="footer-area footer-one">
        <div class="footer-widget">
            <div class="container">
                <div class="row">
                    <div class="col-xl-6 col-lg-4 col-sm-12">
                        <div class="f-about">
                            <div class="footer-logo">
                                <a href="javascript:void(0)">
                                    <img src="<?php echo SITE_PATH; ?>assets/images/footer/logo.svg" alt="Logo" />
                                </a>
                            </div>
                            <p class="text">
                                Lorem Ipsum is simply dummy text of the printing and
                                typesetting industry.
                            </p>
                        </div>
                        <div class="footer-app-store">
                            <h5 class="download-title">Download Our App Now!</h5>
                            <ul>
                                <li>
                                    <a href="javascript:void(0)">
                                        <img
                                            src="<?php echo SITE_PATH; ?>assets/images/footer/app-store.svg"
                                            alt="app"
                                            />
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">
                                        <img
                                            src="<?php echo SITE_PATH; ?>assets/images/footer/play-store.svg"
                                            alt="play"
                                            />
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-2 col-sm-4">
                        <div class="footer-link">
                            <h6 class="footer-title">Company</h6>
                            <ul>
                                <li><a href="javascript:void(0)">About</a></li>
                                <li><a href="javascript:void(0)">Contact</a></li>
                                <li><a href="javascript:void(0)">Marketing</a></li>
                                <li><a href="javascript:void(0)">Awards</a></li>
                            </ul>
                        </div>
                        <!-- footer link -->
                    </div>
                    <div class="col-xl-2 col-lg-3 col-sm-4">
                        <div class="footer-link">
                            <h6 class="footer-title">Services</h6>
                            <ul>
                                <li><a href="javascript:void(0)">Products</a></li>
                                <li><a href="javascript:void(0)">Business</a></li>
                                <li><a href="javascript:void(0)">Developer</a></li>
                                <li><a href="javascript:void(0)">Insights</a></li>
                            </ul>
                        </div>
                        <!-- footer link -->
                    </div>
                    <div class="col-xl-2 col-lg-3 col-sm-4">
                        <!-- Start Footer Contact -->
                        <div class="footer-contact">
                            <h6 class="footer-title">Help & Suuport</h6>
                            <ul>
                                <li>
                                    <i class="lni lni-map-marker"></i> Madison Street, NewYork,
                                    USA
                                </li>
                                <li><i class="lni lni-phone-set"></i> +88 556 88545</li>
                                <li><i class="lni lni-envelope"></i> support@uideck.com</li>
                            </ul>
                        </div>
                        <!-- End Footer Contact -->
                    </div>
                </div>
                <!-- row -->
            </div>
            <!-- container -->
        </div>
        <!-- footer widget -->

        <div class="footer-copyright">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div
                            class="
                            copyright
                            text-center
                            d-md-flex
                            justify-content-between
                            align-items-center
                            "
                            >
                            <p class="text">Copyright © 2021 PHP GrapesJS. All Rights Reserved</p>
                            <ul class="social">
                                <li>
                                    <a href="javascript:void(0)">
                                        <i class="lni lni-facebook-filled"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">
                                        <i class="lni lni-twitter-original"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">
                                        <i class="lni lni-instagram-filled"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"
                                       ><i class="lni lni-linkedin-original"></i
                                        ></a>
                                </li>
                            </ul>
                        </div>
                        <!-- copyright -->
                    </div>
                </div>
                <!-- row -->
            </div>
            <!-- container -->
        </div>
        <!-- footer copyright -->
    </footer>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <footer class="footer-area footer-two">
        <div class="footer-widget">
            <div class="container">
                <div class="row">
                    <div class="col-xl-6 col-lg-4 col-sm-12">
                        <div class="f-about">
                            <div class="footer-logo">
                                <a href="javascript:void(0)">
                                    <img src="<?php echo SITE_PATH; ?>assets/images/footer/logo.svg" alt="Logo" />
                                </a>
                            </div>
                            <p class="text">
                                Lorem Ipsum is simply dummy text of the printing and
                                typesetting industry.
                            </p>
                            <ul class="social">
                                <li>
                                    <a href="javascript:void(0)">
                                        <i class="lni lni-facebook-filled"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">
                                        <i class="lni lni-twitter-original"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">
                                        <i class="lni lni-instagram-filled"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">
                                        <i class="lni lni-linkedin-original"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-2 col-sm-4">
                        <div class="footer-link">
                            <h6 class="footer-title">Company</h6>
                            <ul>
                                <li><a href="javascript:void(0)">About</a></li>
                                <li><a href="javascript:void(0)">Contact</a></li>
                                <li><a href="javascript:void(0)">Marketing</a></li>
                            </ul>
                        </div>
                        <!-- footer link -->
                    </div>
                    <div class="col-xl-2 col-lg-3 col-sm-4">
                        <div class="footer-link">
                            <h6 class="footer-title">Services</h6>
                            <ul>
                                <li><a href="javascript:void(0)">Products</a></li>
                                <li><a href="javascript:void(0)">Business</a></li>
                                <li><a href="javascript:void(0)">Developer</a></li>
                            </ul>
                        </div>
                        <!-- footer link -->
                    </div>
                    <div class="col-xl-2 col-lg-3 col-sm-4">
                        <div class="footer-link">
                            <h6 class="footer-title">Help & Suuport</h6>
                            <ul>
                                <li><a href="javascript:void(0)">Support Center</a></li>
                                <li><a href="javascript:void(0)">FAQ</a></li>
                                <li><a href="javascript:void(0)">Terms & Conditions</a></li>
                            </ul>
                        </div>
                        <!-- footer link -->
                    </div>
                </div>
                <!-- row -->
            </div>
            <!-- container -->
        </div>
        <!-- footer widget -->

        <div class="footer-copyright">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="copyright text-center">
                            <p class="text">Copyright © 2021 PHP GrapesJS. All Rights Reserved</p>
                        </div>
                        <!-- copyright -->
                    </div>
                </div>
                <!-- row -->
            </div>
            <!-- container -->
        </div>
        <!-- footer copyright -->
    </footer>
</li>
