<li class="pi-draggable active" draggable="true" ondragstart="return dragStart(event)">
    <div class="py-5">
        <div class="container">
            <div class="row">
                <div class="text-center col-md-12">
                    <h1>Our offers</h1>
                </div>
            </div>
            <div class="row d-flex justify-content-center text-center ">
                <div class="p-3 col-lg-3 col-md-4">
                    <div class="card border-0">
                        <div class="card-body p-4"> <i class="d-block fa fa-stop-circle mb-2 text-muted fa-4x"></i>
                            <h2 class="mt-3"> <b>Start</b> </h2>
                            <h4 class="my-3"> <b>$1</b> <sub>/month</sub> </h4>
                            <ul class="list-unstyled mt-4">
                                <li class="mb-1">One</li>
                                <li class="mb-1">Two</li>
                                <li class="mb-1">Three</li>
                            </ul> <a class="btn mt-3 btn-primary" href="#">Let's Go</a> </div>
                    </div>
                </div>
                <div class="p-3 col-lg-3 col-md-4">
                    <div class="card border-0">
                        <div class="card-body p-4"> <i class="d-block fa fa-circle mb-2 text-muted fa-4x"></i>
                            <h2 class="mt-3"> <b>Grow</b> </h2>
                            <h4 class="my-3" contenteditable="true"> <b>$2</b> <sub>/month</sub> </h4>
                            <ul class="list-unstyled mt-4">
                                <li class="mb-1">Four</li>
                                <li class="mb-1">Five</li>
                                <li class="mb-1">Six</li>
                            </ul> <a class="btn mt-3 btn-primary" href="#">Start now</a> </div>
                    </div>
                </div>
                <div class="p-3 col-lg-3 col-md-4">
                    <div class="card border-0">
                        <div class="card-body p-4"> <i class="d-block fa fa-stop-circle-o mb-2 text-muted fa-4x"></i>
                            <h2 class="mt-3"> <b>Scale</b> </h2>
                            <h4 class="my-3"> <b>$3</b> <sub>/month</sub> </h4>
                            <ul class="list-unstyled mt-4">
                                <li class="mb-1">Seven</li>
                                <li class="mb-1">Eight</li>
                                <li class="mb-1">Nine</li>
                            </ul> <a class="btn mt-3 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">
        <div class="container">
            <div class="row">
                <div class="text-center col-md-12">
                    <h1>Choose your plan</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-6 p-3">
                    <div class="card bg-light">
                        <div class="card-body p-4">
                            <div class="row">
                                <div class="col-8">
                                    <h3 class="mb-0">Start</h3>
                                </div>
                                <div class="col-4 text-right">
                                    <h2 class="mb-0"> <b>$0</b> </h2>
                                </div>
                            </div>
                            <p class="my-3">A wonderful serenity has taken possession of my entire soul.</p>
                            <ul class="pl-3">
                                <li>One</li>
                                <li>Two</li>
                                <li>Three</li>
                            </ul> <a class="btn btn-primary mt-3" href="#">Get started</a> </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 p-3">
                    <div class="card bg-light">
                        <div class="card-body p-4">
                            <div class="row">
                                <div class="col-8">
                                    <h3 class="mb-0">Hobby</h3>
                                </div>
                                <div class="col-4 text-right">
                                    <h2 class="mb-0"> <b>$9</b> </h2>
                                </div>
                            </div>
                            <p class="my-3">I sink under the weight of the splendour of these visions!</p>
                            <ul class="pl-3">
                                <li>Four</li>
                                <li>Five</li>
                                <li>Six</li>
                            </ul> <a class="btn btn-primary mt-3" href="#">Get started</a> </div>
                    </div>
                </div>
                <div class="col-lg-4 p-3">
                    <div class="card bg-light">
                        <div class="card-body p-4">
                            <div class="row">
                                <div class="col-8">
                                    <h3 class="mb-0">Pro</h3>
                                </div>
                                <div class="col-4 text-right">
                                    <h2 class="mb-0"> <b>$18</b> </h2>
                                </div>
                            </div>
                            <p class="my-3">I feel the presence of the Almighty, who formed us in his own image.</p>
                            <ul class="pl-3">
                                <li>Seven</li>
                                <li>Eight</li>
                                <li>Nine</li>
                            </ul> <a class="btn btn-primary mt-3" href="#">Get started</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 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="text-center mx-auto col-md-12">
                    <h1 class="text-light">Pricing</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 p-3">
                    <div class="card text-center text-dark">
                        <div class="card-body p-4">
                            <h3>One</h3>
                            <p class="my-3">Among the tall grass by the trickling stream; and, as I lie close to the earth.</p>
                            <h2> <b>99$</b> </h2> <a class="btn btn-primary mt-3" href="#">Buy</a> </div>
                    </div>
                </div>
                <div class="col-md-4 p-3">
                    <div class="card text-center text-dark">
                        <div class="card-body p-4">
                            <h3>More</h3>
                            <p class="my-3">I am alone, and feel the charm of existence in this spot.</p>
                            <h2> <b>899$</b> </h2> <a class="btn btn-primary mt-3" href="#">Buy</a> </div>
                    </div>
                </div>
                <div class="col-md-4 p-3">
                    <div class="card text-center text-dark">
                        <div class="card-body p-4">
                            <h3>Tons</h3>
                            <p class="my-3">The breath of that universal love which bears and sustains us.</p>
                            <h2> <b>2499$</b> </h2> <a class="btn btn-primary mt-3" href="#">Buy</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="text-center mx-auto col-md-12">
                    <h1 class="mb-4">A plan for everyone</h1>
                </div>
            </div>
            <div class="row d-flex justify-content-around">
                <div class="col-lg-3 p-4 py-5 bg-light d-flex flex-column mb-3">
                    <h3 class="pb-3 border-bottom">Small</h3>
                    <h3> <b>$3.30</b> </h3>
                    <p class="pb-3 border-bottom">When I hear the buzz of the little world among the stalks!</p>
                    <ul class="text-lg-right list-unstyled">
                        <li class="mb-1">One</li>
                        <li class="mb-1">Two</li>
                        <li class="mb-1">Three</li>
                    </ul> <a class="btn btn-primary mt-auto btn-block" href="#">Start now</a> </div>
                <div class="col-lg-3 px-4  py-5 bg-light d-flex flex-column mb-3">
                    <h3 class="pb-3 border-bottom">Medium</h3>
                    <h3> <b>$6.60</b> </h3>
                    <p class="pb-3 border-bottom">God! O my friend -- but it is too much for my strength.</p>
                    <ul class="text-lg-right list-unstyled">
                        <li class="mb-1">One</li>
                        <li class="mb-1">Two</li>
                        <li class="mb-1">Three</li>
                        <li class="mb-1">Four</li>
                        <li class="mb-1">FIve</li>
                    </ul> <a class="btn btn-primary mt-auto btn-block" href="#">Start now</a> </div>
                <div class="col-lg-3 px-4  py-5 bg-light d-flex flex-column mb-3">
                    <h3 class="pb-3 border-bottom">Big</h3>
                    <h3> <b>$9.90</b> </h3>
                    <p class="pb-3 border-bottom">When, while the lovely valley teems with vapour around me.</p>
                    <ul class="text-lg-right list-unstyled">
                        <li class="mb-1">One</li>
                        <li class="mb-1">Two</li>
                        <li class="mb-1">Three</li>
                        <li class="mb-1">Four</li>
                        <li class="mb-1">Five</li>
                        <li class="mb-1">Six</li>
                        <li class="mb-1">Seven</li>
                    </ul> <a class="btn btn-primary mt-auto btn-block" href="#">Start now</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="col-md-4 p-0 py-2">
                    <div class="card border-0 rounded-0">
                        <div class="card-body p-4">
                            <h3>Start</h3>
                            <h2 class="my-3"> <b>$2</b> <sub>/month</sub> </h2>
                            <ul class="text-left">
                                <li>One</li>
                                <li>Two</li>
                                <li>Three</li>
                            </ul> <a class="btn btn-outline-primary mt-3" href="#">Start now</a> </div>
                    </div>
                </div>
                <div class="col-md-4 p-0">
                    <div class="card py-2">
                        <div class="card-body p-4">
                            <h3>Walk</h3>
                            <h2 class="my-3"> <b>$11</b> <sub>/month</sub> </h2>
                            <ul class="text-left">
                                <li>Four</li>
                                <li>Five</li>
                                <li>Six</li>
                            </ul> <a class="btn btn-primary mt-3" href="#">Start now</a> </div>
                    </div>
                </div>
                <div class="col-md-4 p-0 py-2">
                    <div class="card border-0 rounded-0">
                        <div class="card-body p-4">
                            <h3>Run</h3>
                            <h2 class="my-3"> <b>$37</b> <sub>/month</sub> </h2>
                            <ul class="text-left">
                                <li>Seven</li>
                                <li>Eight</li>
                                <li>Nine</li>
                            </ul> <a class="btn btn-outline-primary mt-3" href="#">Start now</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="text-center mx-auto col-md-12">
                    <h1>Our plans</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 p-3">
                    <div class="card bg-dark text-center text-light">
                        <div class="card-body p-4">
                            <h3>Start</h3>
                            <h2 class="my-3"> <b>$0 / month</b> </h2>
                            <p>A wonderful serenity has taken possession of my entire soul.</p>
                            <ul class="text-left">
                                <li>One</li>
                                <li>Two</li>
                                <li>Three</li>
                            </ul> <a class="btn btn-primary mt-3" href="#">Start now</a> </div>
                    </div>
                </div>
                <div class="col-lg-4 p-3">
                    <div class="card bg-dark text-center text-light">
                        <div class="card-body p-4">
                            <h3>Pro</h3>
                            <h2 class="my-3"> <b>$99 / month</b> </h2>
                            <p>I sink under the weight of the splendour of these visions!</p>
                            <ul class="text-left">
                                <li>Four</li>
                                <li>Five</li>
                                <li>Six</li>
                            </ul> <a class="btn btn-primary mt-3" href="#">Start now</a> </div>
                    </div>
                </div>
                <div class="col-lg-4 p-3">
                    <div class="card bg-dark text-center text-light">
                        <div class="card-body p-4">
                            <h3>Ultimate</h3>
                            <h2 class="my-3"> <b>$254 / month</b> </h2>
                            <p>I feel the presence of the Almighty, who formed us in his own image.</p>
                            <ul class="text-left">
                                <li>Seven</li>
                                <li>Eight</li>
                                <li>Nine</li>
                            </ul> <a class="btn btn-primary mt-3" href="#">Start now</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: 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="text-center mx-auto col-md-12">
                    <h1>Our plans</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 p-3">
                    <div class="card text-center">
                        <div class="card-header p-3">
                            <h3>Hobby</h3>
                            <h2> <b>$0 / month</b> </h2>
                        </div>
                        <div class="card-body p-3"> <i class="d-block fa fa-stop-circle mb-2 text-muted fa-3x"></i>
                            <p>I should be incapable of drawing a single stroke at the present moment.</p>
                            <ul class="list-unstyled my-3">
                                <li class="mb-1">One</li>
                                <li class="mb-1">Two</li>
                                <li class="mb-1">Three</li>
                            </ul> <a class="btn btn-primary" href="#">Start</a> </div>
                    </div>
                </div>
                <div class="col-lg-4 p-3">
                    <div class="card text-center">
                        <div class="card-header p-3">
                            <h3>Startup</h3>
                            <h2> <b>$9 / month</b> </h2>
                        </div>
                        <div class="card-body p-3"> <i class="d-block fa fa-circle-o mb-2 text-muted fa-3x"></i>
                            <p>I throw myself down among the tall grass by the trickling stream.</p>
                            <ul class="list-unstyled my-3">
                                <li class="mb-1">Four</li>
                                <li class="mb-1">Five</li>
                                <li class="mb-1">Six</li>
                            </ul> <a class="btn btn-primary" href="#">Download</a> </div>
                    </div>
                </div>
                <div class="col-lg-4 p-3">
                    <div class="card text-center">
                        <div class="card-header p-3">
                            <h3>Business</h3>
                            <h2> <b>$22 / month</b> </h2>
                        </div>
                        <div class="card-body p-3"> <i class="d-block fa fa-stop-circle-o mb-2 text-muted fa-3x"></i>
                            <p>I hear the buzz of the little world among the stalks, and grow familiar.</p>
                            <ul class="list-unstyled my-3">
                                <li class="mb-1">Seven</li>
                                <li class="mb-1">Eight</li>
                                <li class="mb-1">Nine</li>
                            </ul> <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">
        <div class="container">
            <div class="row">
                <div class="text-center mx-auto col-md-12">
                    <h1>Choose your plan</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-3 col-md-6 p-3">
                    <div class="card bg-light text-center">
                        <div class="card-body p-4">
                            <h3>I</h3>
                            <h2> <b>19$</b> </h2> <a class="btn btn-link" href="#">Get started</a>
                            <hr>
                            <ul class="list-unstyled my-3">
                                <li class="mb-1">One</li>
                                <li class="mb-1">Two</li>
                                <li class="mb-1">Three</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 p-3">
                    <div class="card bg-light text-center">
                        <div class="card-body p-4">
                            <h3>II</h3>
                            <h2> <b>49$</b> </h2> <a class="btn btn-primary" href="#">Get started</a>
                            <hr>
                            <ul class="list-unstyled my-3">
                                <li class="mb-1">Four</li>
                                <li class="mb-1">Five</li>
                                <li class="mb-1">Six</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 p-3">
                    <div class="card bg-light text-center">
                        <div class="card-body p-4">
                            <h3>III</h3>
                            <h2> <b>99$</b> </h2> <a class="btn btn-link" href="#">Get started</a>
                            <hr>
                            <ul class="list-unstyled my-3">
                                <li class="mb-1">Seven</li>
                                <li class="mb-1">Eight</li>
                                <li class="mb-1">Nine</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 p-3">
                    <div class="card bg-light text-center">
                        <div class="card-body p-4">
                            <h3>IV</h3>
                            <h2> <b>159$</b> </h2> <a class="btn btn-link" href="#">Get started</a>
                            <hr>
                            <ul class="list-unstyled my-3">
                                <li class="mb-1">Ten</li>
                                <li class="mb-1">Eleven</li>
                                <li class="mb-1">Twelve</li>
                            </ul>
                        </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="text-center mx-auto col-md-12">
                    <h1>Pick a pricing</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 p-3">
                    <div class="card text-center">
                        <div class="card-body p-4">
                            <h5> <b>Solo</b> </h5>
                            <p>1 project</p>
                            <h2 class="my-3"> <b>$10</b> <sub>/month</sub> </h2>
                            <p class="my-3">A wonderful serenity has taken possession of my entire soul.</p>
                            <hr>
                            <ul class="list-unstyled my-3">
                                <li class="mb-1">One</li>
                                <li class="mb-1">Two</li>
                                <li class="mb-1">Three</li>
                            </ul> <a class="btn mt-3 btn-light" href="#">Buy</a> </div>
                    </div>
                </div>
                <div class="col-lg-4 p-3">
                    <div class="card text-center">
                        <div class="card-body p-4">
                            <h5> <b>Team</b> </h5>
                            <p>2-15 projects</p>
                            <h2 class="my-3"> <b>$69</b> <sub>/month</sub> </h2>
                            <p class="my-3">I throw myself down among the tall grass by the trickling stream.</p>
                            <hr>
                            <ul class="list-unstyled my-3">
                                <li class="mb-1">Four</li>
                                <li class="mb-1">Five</li>
                                <li class="mb-1">Six</li>
                            </ul> <a class="btn btn-primary mt-3" href="#">Start now</a> </div>
                    </div>
                </div>
                <div class="col-lg-4 p-3">
                    <div class="card text-center">
                        <div class="card-body p-4">
                            <h5> <b>Agencies</b> </h5>
                            <p>16+ projects</p>
                            <h2 class="my-3"> <b>$149</b>&nbsp; <sub>/month</sub> </h2>
                            <p class="my-3">God! O my friend -- but it is too much for my strength.</p>
                            <hr>
                            <ul class="list-unstyled my-3">
                                <li class="mb-1">Seven</li>
                                <li class="mb-1">Eight</li>
                                <li class="mb-1">Nine</li>
                            </ul> <a class="btn mt-3 btn-dark" href="#">Pick this</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">
                    <table class="table text-center">
                        <thead>
                            <tr>
                                <th>&nbsp;</th>
                                <th class="text-center">
                                    <h3> Standard </h3>
                                    <h2> <b>15$</b> </h2> <a class="btn btn-link" href="#">Start now</a> </th>
                                <th class="text-center">
                                    <h3> Pro </h3>
                                    <h2> <b>49$</b> </h2> <a class="btn btn-primary" href="#">Start now</a> </th>
                                <th class="text-center">
                                    <h3> Ultimate </h3>
                                    <h2> <b>99$</b> </h2> <a class="btn btn-link" href="#">Contact us</a> </th>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td>Small business and startups</td>
                                <td>Growing activities</td>
                                <td>Big firms and companies</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>One</td>
                                <td> <i class="fa fa-check fa-lg text-muted"></i> </td>
                                <td> <i class="fa fa-check fa-lg text-muted"></i> </td>
                                <td> <i class="fa fa-check fa-lg text-muted"></i> </td>
                            </tr>
                            <tr>
                                <td>Two</td>
                                <td> <i class="fa fa-check fa-lg text-muted"></i> </td>
                                <td> <i class="fa fa-check fa-lg text-muted"></i> </td>
                                <td> <i class="fa fa-check fa-lg text-muted"></i> </td>
                            </tr>
                            <tr>
                                <td>Three</td>
                                <td></td>
                                <td> <i class="fa fa-check fa-lg text-muted"></i> </td>
                                <td> <i class="fa fa-check fa-lg text-muted"></i> </td>
                            </tr>
                            <tr>
                                <td>Four</td>
                                <td></td>
                                <td> <i class="fa fa-check fa-lg text-muted"></i> </td>
                                <td> <i class="fa fa-check fa-lg text-muted"></i> </td>
                            </tr>
                            <tr>
                                <td>Five</td>
                                <td></td>
                                <td></td>
                                <td> <i class="fa fa-check fa-lg text-muted"></i> </td>
                            </tr>
                            <tr>
                                <td>Six</td>
                                <td></td>
                                <td></td>
                                <td> <i class="fa fa-check fa-lg text-muted"></i> </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</li>
