{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-blocks-tables" %}
{% set title = "Table Designs" %}

{% include "html/assets/include/nunjucks/partials/head.njk" %}
{% include "html/assets/include/nunjucks/partials/core-fonts.njk" %}
{% include "html/assets/include/nunjucks/partials/core-css.njk" %}
{% include "html/assets/include/nunjucks/partials/core-icons.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %}
<link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/jquery-ui/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hamburgers/hamburgers.min.css">

{% include "html/assets/include/nunjucks/partials/css/css-showcode.njk" %}

{% include "html/assets/include/nunjucks/partials/css/css-unify.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
</head>

<body class="u-body--header-side-push-left u-body--header-side-opened u-has-sidebar-navigation g-overflow-x-hidden">
  <main>
    {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/sidebars/sidebar-shortcode-nav.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/page-title/shortcode-page-title/shortcode-page-title-block.njk" %}

    <section>
      <!-- Table #01 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Table
              <span class="g-color-primary g-ml-5">#01</span>
            </h2>
          </div>

          <div id="shortcode1">
            <div class="shortcode-html">
              <!--Basic Table-->
              <div class="table-responsive">
                <table class="table table-bordered u-table--v2">
                  <thead class="text-uppercase g-letter-spacing-1">
                    <tr>
                      <th class="g-font-weight-300 g-color-black">Product Name</th>
                      <th class="g-font-weight-300 g-color-black g-min-width-200">Product Description</th>
                      <th class="g-font-weight-300 g-color-black g-min-width-200">Locations</th>
                      <th class="g-font-weight-300 g-color-black">Status</th>
                      <th class="g-font-weight-300 g-color-black">Contacts</th>
                    </tr>
                  </thead>

                  <tbody>
                    <tr>
                      <td class="align-middle text-nowrap">
                        <h4 class="h6 g-mb-2">Lenovo Group</h4>
                        <div class="js-rating g-font-size-12 g-color-primary" data-rating="3.5"></div>
                      </td>
                      <td class="align-middle">Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl.</td>
                      <td class="align-middle">
                        <div class="d-flex">
                          <i class="icon-location-pin g-font-size-18 g-color-gray-dark-v5 g-pos-rel g-top-5 g-mr-7"></i>
                          <span>389ZA2 DeClaudine, CA, USA</span>
                        </div>
                      </td>
                      <td class="align-middle">
                        <a class="btn btn-block u-btn-primary g-rounded-50 g-py-5" href="#">
                          <i class="fa fa-arrows-v g-mr-5"></i>
                          Middle
                        </a>
                      </td>
                      <td class="align-middle text-nowrap">
                        <span class="d-block g-mb-5">
                          <i class="icon-phone g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          +1 4768 97655
                        </span>
                        <span class="d-block">
                          <i class="icon-envelope g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          contact@lenovo.com
                        </span>
                      </td>
                    </tr>

                    <tr>
                      <td class="align-middle text-nowrap">
                        <h4 class="h6 g-mb-2">Samsung Electronics</h4>
                        <div class="js-rating g-font-size-12 g-color-primary" data-rating="4.5"></div>
                      </td>
                      <td class="align-middle">In consectetur adipiscing hac habitasse platea dictumst, curabitur hendrerit.</td>
                      <td class="align-middle">
                        <div class="d-flex">
                          <i class="icon-location-pin g-font-size-18 g-color-gray-dark-v5 g-pos-rel g-top-5 g-mr-7"></i>
                          <span>738AD Lorena Spur, London, UK</span>
                        </div>
                      </td>
                      <td class="align-middle">
                        <a class="btn btn-block u-btn-pink g-rounded-50 g-py-5" href="#">
                          <i class="fa fa-level-up g-mr-5"></i>
                          High
                        </a>
                      </td>
                      <td class="align-middle text-nowrap">
                        <span class="d-block g-mb-5">
                          <i class="icon-phone g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          +44 7689 7655
                        </span>
                        <span class="d-block">
                          <i class="icon-envelope g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          users@samsung.com
                        </span>
                      </td>
                    </tr>

                    <tr>
                      <td class="align-middle text-nowrap">
                        <h4 class="h6 g-mb-2">Sony Corp.</h4>
                        <div class="js-rating g-font-size-12 g-color-primary" data-rating="2"></div>
                      </td>
                      <td class="align-middle">To a general advertiser outdoor advertising is worthy of consideration..</td>
                      <td class="align-middle">
                        <div class="d-flex">
                          <i class="icon-location-pin g-font-size-18 g-color-gray-dark-v5 g-pos-rel g-top-5 g-mr-7"></i>
                          <span>044C1 Port Dickson, BC, Canada</span>
                        </div>
                      </td>
                      <td class="align-middle">
                        <a class="btn btn-block u-btn-cyan g-rounded-50 g-py-5" href="#">
                          <i class="fa fa-sort-amount-desc g-mr-5"></i>
                          Deep
                        </a>
                      </td>
                      <td class="align-middle text-nowrap">
                        <span class="d-block g-mb-5">
                          <i class="icon-phone g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          +1 0739 3644
                        </span>
                        <span class="d-block">
                          <i class="icon-envelope g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          clients@sony.com
                        </span>
                      </td>
                    </tr>

                    <tr>
                      <td class="align-middle text-nowrap">
                        <h4 class="h6 g-mb-2">Apple Inc.</h4>
                        <div class="js-rating g-font-size-12 g-color-primary" data-rating="5"></div>
                      </td>
                      <td>Create a list with all possible keywords that fit to your product, service or business..</td>
                      <td class="align-middle">
                        <div class="d-flex">
                          <i class="icon-location-pin g-font-size-18 g-color-gray-dark-v5 g-pos-rel g-top-5 g-mr-7"></i>
                          <span>07W2 Donell Lodge, NY, USA</span>
                        </div>
                      </td>
                      <td class="align-middle">
                        <a class="btn btn-block u-btn-purple g-rounded-50 g-py-5" href="#">
                          <i class="fa fa-level-down g-mr-5"></i>
                          Down
                        </a>
                      </td>
                      <td class="align-middle text-nowrap">
                        <span class="d-block g-mb-5">
                          <i class="icon-phone g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          +1 6589-96451
                        </span>
                        <span class="d-block">
                          <i class="icon-envelope g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          mail@appple.com
                        </span>
                      </td>
                    </tr>

                    <tr>
                      <td class="align-middle text-nowrap">
                        <h4 class="h6 g-mb-2">Dell Corporation</h4>
                        <div class="js-rating g-font-size-12 g-color-primary" data-rating="4"></div>
                      </td>
                      <td class="align-middle">Consectetur ulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl.</td>
                      <td class="align-middle">
                        <div class="d-flex">
                          <i class="icon-location-pin g-font-size-18 g-color-gray-dark-v5 g-pos-rel g-top-5 g-mr-7"></i>
                          <span>1A9WA4 Wanderben, Berlin, Germany</span>
                        </div>
                      </td>
                      <td class="align-middle">
                        <a class="btn btn-block u-btn-deeporange g-rounded-50 g-py-5" href="#">
                          <i class="fa fa-bolt g-mr-5"></i>
                          Stabile
                        </a>
                      </td>
                      <td class="align-middle text-nowrap">
                        <span class="d-block g-mb-5">
                          <i class="icon-phone g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          +49 3868 4792
                        </span>
                        <span class="d-block">
                          <i class="icon-envelope g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          clients@dell.com
                        </span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--End Basic Table-->
            </div>

            <div class="shortcode-scripts">
              <!-- JS Unify -->
              <script type="text/plain" src="{{ root }}assets/js/components/hs.rating.js"></script>

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // Rating
                  $.HSCore.components.HSRating.init($('.js-rating'), {
                    spacing: 2
                  });
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode1" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Table #01 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Table #02 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Table
              <span class="g-color-primary g-ml-5">#02</span>
            </h2>
          </div>

          <div id="shortcode2">
            <div class="shortcode-html">
              <!--Basic Table-->
              <div class="table-responsive">
                <table class="table table-bordered u-table--v2">
                  <thead class="text-uppercase g-letter-spacing-1">
                    <tr>
                      <th class="g-font-weight-300 g-color-black">Companies</th>
                      <th class="g-font-weight-300 g-color-black g-min-width-200">Product Description</th>
                      <th class="g-font-weight-300 g-color-black g-min-width-130">Status</th>
                      <th class="g-font-weight-300 g-color-black">Contacts</th>
                      <th class="g-font-weight-300 g-color-black">Rating</th>
                      <th class="g-font-weight-300 g-color-black g-min-width-200">Locations</th>
                    </tr>
                  </thead>

                  <tbody>
                    <tr>
                      <td class="align-middle text-nowrap text-center">
                        <img class="g-brd-around g-brd-gray-light-v4 g-pa-2 g-width-50 g-height-50 rounded-circle" src="{{ root }}assets/img-temp/100x100/img3.jpg" data-toggle="tooltip" data-placement="top" data-original-title="Pixeel Ltd" alt="Image Description">
                      </td>
                      <td class="align-middle">Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl.</td>
                      <td class="align-middle">
                        <div class="progress rounded-0 u-progress g-mb-20">
                          <div class="progress-bar u-progress-bar--lg g-bg-cyan" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                      </td>
                      <td class="align-middle text-nowrap">
                        <span class="d-block g-mb-5">
                          <i class="icon-phone g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          +1 4768 97655
                        </span>
                        <span class="d-block">
                          <i class="icon-envelope g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          contact@lenovo.com
                        </span>
                      </td>
                      <td class="align-middle">
                        <div class="js-rating g-font-size-121 g-color-primary" data-rating="4" data-spacing="3"></div>
                      </td>
                      <td class="align-middle">
                        <div class="d-flex">
                          <i class="icon-location-pin g-font-size-18 g-color-gray-dark-v5 g-pos-rel g-top-5 g-mr-7"></i>
                          <span>389ZA2 DeClaudine, CA, USA</span>
                        </div>
                      </td>
                    </tr>

                    <tr>
                      <td class="align-middle text-nowrap text-center">
                        <img class="g-brd-around g-brd-gray-light-v4 g-pa-2 g-width-50 g-height-50 rounded-circle" src="{{ root }}assets/img-temp/100x100/img1.jpg" data-toggle="tooltip" data-placement="top" data-original-title="Htmlstream" alt="Image Description">
                      </td>
                      <td class="align-middle">In consectetur adipiscing hac habitasse platea dictumst, curabitur hendrerit.</td>
                      <td class="align-middle">
                        <div class="progress rounded-0 u-progress g-mb-20">
                          <div class="progress-bar u-progress-bar--lg g-bg-pink" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                      </td>
                      <td class="align-middle text-nowrap">
                        <span class="d-block g-mb-5">
                          <i class="icon-phone g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          +44 7689 7655
                        </span>
                        <span class="d-block">
                          <i class="icon-envelope g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          users@samsung.com
                        </span>
                      </td>
                      <td class="align-middle">
                        <div class="js-rating g-color-primary" data-rating="4.5" data-spacing="3"></div>
                      </td>
                      <td class="align-middle">
                        <div class="d-flex">
                          <i class="icon-location-pin g-font-size-18 g-color-gray-dark-v5 g-pos-rel g-top-5 g-mr-7"></i>
                          <span>738AD Lorena Spur, London, UK</span>
                        </div>
                      </td>
                    </tr>

                    <tr>
                      <td class="align-middle text-nowrap text-center">
                        <img class="g-brd-around g-brd-gray-light-v4 g-pa-2 g-width-50 g-height-50 rounded-circle" src="{{ root }}assets/img-temp/100x100/img4.jpg" data-toggle="tooltip" data-placement="top" data-original-title="Starbucks" alt="Image Description">
                      </td>
                      <td class="align-middle">To a general advertiser outdoor advertising is worthy of consideration..</td>
                      <td class="align-middle">
                        <div class="progress rounded-0 u-progress g-mb-20">
                          <div class="progress-bar u-progress-bar--lg g-bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                      </td>
                      <td class="align-middle text-nowrap">
                        <span class="d-block g-mb-5">
                          <i class="icon-phone g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          +1 0739 3644
                        </span>
                        <span class="d-block">
                          <i class="icon-envelope g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          clients@sony.com
                        </span>
                      </td>
                      <td class="align-middle">
                        <div class="js-rating g-color-primary" data-rating="2.5" data-spacing="3"></div>
                      </td>
                      <td class="align-middle">
                        <div class="d-flex">
                          <i class="icon-location-pin g-font-size-18 g-color-gray-dark-v5 g-pos-rel g-top-5 g-mr-7"></i>
                          <span>044C1 Port Dickson, BC, Canada</span>
                        </div>
                      </td>
                    </tr>

                    <tr>
                      <td class="align-middle text-nowrap text-center">
                        <img class="g-brd-around g-brd-gray-light-v4 g-pa-2 g-width-50 g-height-50 rounded-circle" src="{{ root }}assets/img-temp/100x100/img2.jpg" data-toggle="tooltip" data-placement="top" data-original-title="Wrapbootstrap" alt="Image Description">
                      </td>
                      <td>Create a list with all possible keywords that fit to your product, service or business..</td>
                      <td class="align-middle">
                        <div class="progress rounded-0 u-progress g-mb-20">
                          <div class="progress-bar u-progress-bar--lg g-bg-purple" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                      </td>
                      <td class="align-middle text-nowrap">
                        <span class="d-block g-mb-5">
                          <i class="icon-phone g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          +1 6589-96451
                        </span>
                        <span class="d-block">
                          <i class="icon-envelope g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          mail@appple.com
                        </span>
                      </td>
                      <td class="align-middle">
                        <div class="js-rating g-color-primary" data-rating="5" data-spacing="3"></div>
                      </td>
                      <td class="align-middle">
                        <div class="d-flex">
                          <i class="icon-location-pin g-font-size-18 g-color-gray-dark-v5 g-pos-rel g-top-5 g-mr-7"></i>
                          <span>07W2 Donell Lodge, NY, USA</span>
                        </div>
                      </td>
                    </tr>

                    <tr>
                      <td class="align-middle text-nowrap text-center">
                        <img class="g-brd-around g-brd-gray-light-v4 g-pa-2 g-width-50 g-height-50 rounded-circle" src="{{ root }}assets/img-temp/100x100/img5.jpg" data-toggle="tooltip" data-placement="top" data-original-title="Pinterest" alt="Image Description">
                      </td>
                      <td class="align-middle">Ulla consectetur ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl.</td>
                      <td class="align-middle">
                        <div class="progress rounded-0 u-progress g-mb-20">
                          <div class="progress-bar u-progress-bar--lg g-bg-yellow" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                      </td>
                      <td class="align-middle text-nowrap">
                        <span class="d-block g-mb-5">
                          <i class="icon-phone g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          +49 3868 4792
                        </span>
                        <span class="d-block">
                          <i class="icon-envelope g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          sayhi@pinterest.com
                        </span>
                      </td>
                      <td class="align-middle">
                        <div class="js-rating g-font-size-121 g-color-primary" data-rating="3.5" data-spacing="3"></div>
                      </td>
                      <td class="align-middle">
                        <div class="d-flex">
                          <i class="icon-location-pin g-font-size-18 g-color-gray-dark-v5 g-pos-rel g-top-5 g-mr-7"></i>
                          <span>1A9WA4 Wanderben, Berlin, Germany</span>
                        </div>
                      </td>
                    </tr>

                  </tbody>
                </table>
              </div>
              <!--End Basic Table-->
            </div>

            <div class="shortcode-scripts">
              <!-- JS Unify -->
              <script type="text/plain" src="{{ root }}assets/js/components/hs.rating.js"></script>

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // initialization of rating
                  $.HSCore.components.HSRating.init($('.js-rating'), {
                    spacing: 2
                  });
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode2" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Table #02 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Table #03 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Table
              <span class="g-color-primary g-ml-5">#03</span>
            </h2>
          </div>

          <div id="shortcode3">
            <div class="shortcode-html">
              <!--Basic Table-->
              <div class="table-responsive">
                <table class="table table-bordered u-table--v2">
                  <thead class="text-uppercase g-letter-spacing-1">
                    <tr>
                      <th class="g-font-weight-300 g-color-black">Users</th>
                      <th class="g-font-weight-300 g-color-black g-min-width-200">About Folks</th>
                      <th class="g-font-weight-300 g-color-black">Stats</th>
                      <th class="g-font-weight-300 g-color-black">Contacts</th>
                      <th class="g-font-weight-300 g-color-black text-nowrap">Work Rate</th>
                      <th class="g-font-weight-300 g-color-black">Actions</th>
                    </tr>
                  </thead>

                  <tbody>
                    <tr>
                      <td class="align-middle text-nowrap">
                        <div class="media">
                          <img class="d-flex g-width-40 g-height-40 rounded-circle g-mr-10" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                          <div class="media-body align-self-center">
                            <h5 class="h6 align-self-center g-font-weight-600 g-color-purple mb-0">John Doe</h5>
                            <span class="g-font-size-12">Marketing</span>
                          </div>
                        </div>
                      </td>
                      <td class="align-middle">Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl.</td>
                      <td class="align-middle text-center">
                        <span class="js-peity-chart"
                              data-peity-type="bar"
                              data-fill='["rgba(99, 99, 255, .3)", "rgba(255, 99, 132, .8)", "rgba(54, 162, 235, .6)"]'
                              data-max="10"
                        >5,3,9,6,5,9,7,3,5,2
                        </span>
                      </td>
                      <td class="align-middle text-nowrap">
                        <span class="d-block g-mb-5">
                          <i class="icon-phone g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          +1 4768 97655
                        </span>
                        <span class="d-block">
                          <i class="icon-envelope g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          contact@lenovo.com
                        </span>
                      </td>
                      <td class="align-middle text-center">
                        <span class="u-label g-bg-purple g-rounded-20 g-px-10">$25 / hr</span>
                      </td>
                      <td class="align-middle text-nowrap text-center">
                        <a class="g-color-gray-dark-v5 g-text-underline--none--hover g-pa-5" href="#" data-toggle="tooltip" data-placement="top" data-original-title="Edit">
                          <i class="icon-pencil g-font-size-18 g-mr-7"></i>
                        </a>
                        <a class="g-color-gray-dark-v5 g-text-underline--none--hover g-pa-5" href="#" data-toggle="tooltip" data-placement="top" data-original-title="Delete">
                          <i class="icon-trash g-font-size-18 g-mr-7"></i>
                        </a>
                        <a class="g-color-gray-dark-v5 g-text-underline--none--hover g-pa-5" href="#" data-toggle="tooltip" data-placement="top" data-original-title="Print">
                          <i class="icon-printer g-font-size-18 g-mr-7"></i>
                        </a>
                      </td>
                    </tr>

                    <tr>
                      <td class="align-middle text-nowrap">
                        <div class="media">
                          <img class="d-flex g-width-40 g-height-40 rounded-circle g-mr-10" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                          <div class="media-body align-self-center">
                            <h5 class="h6 align-self-center g-font-weight-600 g-color-teal mb-0">Alberta Watson</h5>
                            <span class="g-font-size-12">UX Design</span>
                          </div>
                        </div>
                      </td>
                      <td class="align-middle">In consectetur adipiscing hac habitasse platea dictumst, curabitur hendrerit.</td>
                      <td class="align-middle text-center">
                        <span class="js-peity-chart"
                              data-peity-type="donut"
                              data-fill='["rgba(99, 99, 255, .5)", "rgba(255, 99, 132, .5)", "rgba(54, 162, 235, .5)"]'
                              data-max="10"
                        >3/5
                        </span>
                      </td>
                      <td class="align-middle text-nowrap">
                        <span class="d-block g-mb-5">
                          <i class="icon-phone g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          +44 7689 7655
                        </span>
                        <span class="d-block">
                          <i class="icon-envelope g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          users@samsung.com
                        </span>
                      </td>
                      <td class="align-middle text-center">
                        <span class="u-label g-bg-teal g-rounded-20 g-px-10">$32 / hr</span>
                      </td>
                      <td class="align-middle text-nowrap text-center">
                        <a class="g-color-gray-dark-v5 g-text-underline--none--hover g-pa-5" href="#" data-toggle="tooltip" data-placement="top" data-original-title="Edit">
                          <i class="icon-pencil g-font-size-18 g-mr-7"></i>
                        </a>
                        <a class="g-color-gray-dark-v5 g-text-underline--none--hover g-pa-5" href="#" data-toggle="tooltip" data-placement="top" data-original-title="Delete">
                          <i class="icon-trash g-font-size-18 g-mr-7"></i>
                        </a>
                        <a class="g-color-gray-dark-v5 g-text-underline--none--hover g-pa-5" href="#" data-toggle="tooltip" data-placement="top" data-original-title="Print">
                          <i class="icon-printer g-font-size-18 g-mr-7"></i>
                        </a>
                      </td>
                    </tr>

                    <tr>
                      <td class="align-middle text-nowrap">
                        <div class="media">
                          <img class="d-flex g-width-40 g-height-40 rounded-circle g-mr-10" src="{{ root }}assets/img-temp/100x100/img17.jpg" alt="Image Description">
                          <div class="media-body align-self-center">
                            <h5 class="h6 align-self-center g-font-weight-600 g-color-pink mb-0">David Lee</h5>
                            <span class="g-font-size-12">Angular JS</span>
                          </div>
                        </div>
                      </td>
                      <td class="align-middle">To a general advertiser outdoor advertising is worthy of consideration..</td>
                      <td class="align-middle text-center">
                        <span class="js-peity-chart"
                              data-peity-type="line"
                              data-fill='["rgba(99,99, 255, .1)"]'
                              data-stroke="rgba(99,99, 255, .5)"
                              data-max="10"
                        >5,3,9,6,5,9,7,3,5,2
                        </span>
                      </td>
                      <td class="align-middle text-nowrap">
                        <span class="d-block g-mb-5">
                          <i class="icon-phone g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          +1 0739 3644
                        </span>
                        <span class="d-block">
                          <i class="icon-envelope g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          clients@sony.com
                        </span>
                      </td>
                      <td class="align-middle text-center">
                        <span class="u-label g-bg-pink g-rounded-20 g-px-10">$28 / hr</span>
                      </td>
                      <td class="align-middle text-nowrap text-center">
                        <a class="g-color-gray-dark-v5 g-text-underline--none--hover g-pa-5" href="#" data-toggle="tooltip" data-placement="top" data-original-title="Edit">
                          <i class="icon-pencil g-font-size-18 g-mr-7"></i>
                        </a>
                        <a class="g-color-gray-dark-v5 g-text-underline--none--hover g-pa-5" href="#" data-toggle="tooltip" data-placement="top" data-original-title="Delete">
                          <i class="icon-trash g-font-size-18 g-mr-7"></i>
                        </a>
                        <a class="g-color-gray-dark-v5 g-text-underline--none--hover g-pa-5" href="#" data-toggle="tooltip" data-placement="top" data-original-title="Print">
                          <i class="icon-printer g-font-size-18 g-mr-7"></i>
                        </a>
                      </td>
                    </tr>

                    <tr>
                      <td class="align-middle text-nowrap">
                        <div class="media">
                          <img class="d-flex g-width-40 g-height-40 rounded-circle g-mr-10" src="{{ root }}assets/img-temp/100x100/img14.jpg" alt="Image Description">
                          <div class="media-body align-self-center">
                            <h5 class="h6 align-self-center g-font-weight-600 g-color-cyan mb-0">James Coolman</h5>
                            <span class="g-font-size-12">Ruby on Rails</span>
                          </div>
                        </div>
                      </td>
                      <td>Create a list with all possible keywords that fit to your product, service or business..</td>
                      <td class="align-middle text-center">
                        <span class="js-peity-chart"
                              data-peity-type="pie"
                              data-fill='["rgba(99, 99, 255, .5)", "rgba(255, 99, 132, .5)", "rgba(54, 162, 235, .6)"]'
                              data-max="10"
                        >2/5
                        </span>
                      </td>
                      <td class="align-middle text-nowrap">
                        <span class="d-block g-mb-5">
                          <i class="icon-phone g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          +1 6589-96451
                        </span>
                        <span class="d-block">
                          <i class="icon-envelope g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          mail@appple.com
                        </span>
                      </td>
                      <td class="align-middle text-center">
                        <span class="u-label g-bg-cyan g-rounded-20 g-px-10">$35 / hr</span>
                      </td>
                      <td class="align-middle text-nowrap text-center">
                        <a class="g-color-gray-dark-v5 g-text-underline--none--hover g-pa-5" href="#" data-toggle="tooltip" data-placement="top" data-original-title="Edit">
                          <i class="icon-pencil g-font-size-18 g-mr-7"></i>
                        </a>
                        <a class="g-color-gray-dark-v5 g-text-underline--none--hover g-pa-5" href="#" data-toggle="tooltip" data-placement="top" data-original-title="Delete">
                          <i class="icon-trash g-font-size-18 g-mr-7"></i>
                        </a>
                        <a class="g-color-gray-dark-v5 g-text-underline--none--hover g-pa-5" href="#" data-toggle="tooltip" data-placement="top" data-original-title="Print">
                          <i class="icon-printer g-font-size-18 g-mr-7"></i>
                        </a>
                      </td>
                    </tr>

                    <tr>
                      <td class="align-middle text-nowrap">
                        <div class="media">
                          <img class="d-flex g-width-40 g-height-40 rounded-circle g-mr-10" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image Description">
                          <div class="media-body align-self-center">
                            <h5 class="h6 align-self-center g-font-weight-600 g-color-green mb-0">Kate Oliver</h5>
                            <span class="g-font-size-12">Marketing</span>
                          </div>
                        </div>
                      </td>
                      <td class="align-middle">Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl.</td>
                      <td class="align-middle text-center">
                        <span class="js-peity-chart"
                              data-peity-type="bar"
                              data-fill='["rgba(99, 99, 255, .3)", "rgba(255, 99, 132, .8)", "rgba(54, 162, 235, .6)"]'
                              data-max="10"
                        >5,3,9,6,5,9,7,3,5,2
                        </span>
                      </td>
                      <td class="align-middle text-nowrap">
                        <span class="d-block g-mb-5">
                          <i class="icon-phone g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          +1 4768 97655
                        </span>
                        <span class="d-block">
                          <i class="icon-envelope g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          contact@lenovo.com
                        </span>
                      </td>
                      <td class="align-middle text-center">
                        <span class="u-label g-bg-green g-rounded-20 g-px-10">$27 / hr</span>
                      </td>
                      <td class="align-middle text-nowrap text-center">
                        <a class="g-color-gray-dark-v5 g-text-underline--none--hover g-pa-5" href="#" data-toggle="tooltip" data-placement="top" data-original-title="Edit">
                          <i class="icon-pencil g-font-size-18 g-mr-7"></i>
                        </a>
                        <a class="g-color-gray-dark-v5 g-text-underline--none--hover g-pa-5" href="#" data-toggle="tooltip" data-placement="top" data-original-title="Delete">
                          <i class="icon-trash g-font-size-18 g-mr-7"></i>
                        </a>
                        <a class="g-color-gray-dark-v5 g-text-underline--none--hover g-pa-5" href="#" data-toggle="tooltip" data-placement="top" data-original-title="Print">
                          <i class="icon-printer g-font-size-18 g-mr-7"></i>
                        </a>
                      </td>
                    </tr>

                    <tr>
                      <td class="align-middle text-nowrap">
                        <div class="media">
                          <img class="d-flex g-width-40 g-height-40 rounded-circle g-mr-10" src="{{ root }}assets/img-temp/100x100/img6.jpg" alt="Image Description">
                          <div class="media-body align-self-center">
                            <h5 class="h6 align-self-center g-font-weight-600 g-color-lightred mb-0">Julia Bray</h5>
                            <span class="g-font-size-12">Management</span>
                          </div>
                        </div>
                      </td>
                      <td class="align-middle">In consectetur adipiscing hac habitasse platea dictumst, curabitur hendrerit.</td>
                      <td class="align-middle text-center">
                        <span class="js-peity-chart"
                              data-peity-type="donut"
                              data-fill='["rgba(99, 99, 255, .5)", "rgba(255, 99, 132, .5)", "rgba(54, 162, 235, .5)"]'
                              data-max="10">3/9
                        </span>
                      </td>
                      <td class="align-middle text-nowrap">
                        <span class="d-block g-mb-5">
                          <i class="icon-phone g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          +44 7689 7655
                        </span>
                        <span class="d-block">
                          <i class="icon-envelope g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          users@samsung.com
                        </span>
                      </td>
                      <td class="align-middle text-center">
                        <span class="u-label g-bg-lightred g-rounded-20 g-px-10">$32 / hr</span>
                      </td>
                      <td class="align-middle text-nowrap text-center">
                        <a class="g-color-gray-dark-v5 g-text-underline--none--hover g-pa-5" href="#" data-toggle="tooltip" data-placement="top" data-original-title="Edit">
                          <i class="icon-pencil g-font-size-18 g-mr-7"></i>
                        </a>
                        <a class="g-color-gray-dark-v5 g-text-underline--none--hover g-pa-5" href="#" data-toggle="tooltip" data-placement="top" data-original-title="Delete">
                          <i class="icon-trash g-font-size-18 g-mr-7"></i>
                        </a>
                        <a class="g-color-gray-dark-v5 g-text-underline--none--hover g-pa-5" href="#" data-toggle="tooltip" data-placement="top" data-original-title="Print">
                          <i class="icon-printer g-font-size-18 g-mr-7"></i>
                        </a>
                      </td>
                    </tr>

                    <tr>
                      <td class="align-middle text-nowrap">
                        <div class="media">
                          <img class="d-flex g-width-40 g-height-40 rounded-circle g-mr-10" src="{{ root }}assets/img-temp/100x100/img16.jpg" alt="Image Description">
                          <div class="media-body align-self-center">
                            <h5 class="h6 align-self-center g-font-weight-600 g-color-darkpurple mb-0">Amanda Low</h5>
                            <span class="g-font-size-12">UI Design</span>
                          </div>
                        </div>
                      </td>
                      <td class="align-middle">To a general advertiser outdoor advertising is worthy of consideration..</td>
                      <td class="align-middle text-center">
                        <span class="js-peity-chart"
                              data-peity-type="line"
                              data-fill='["rgba(99,99, 255, .1)"]'
                              data-stroke="rgba(99,99, 255, .5)"
                              data-max="10"
                        >9,6,5,9,5,3,7,3,5,9
                        </span>
                      </td>
                      <td class="align-middle text-nowrap">
                        <span class="d-block g-mb-5">
                          <i class="icon-phone g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          +1 0739 3644
                        </span>
                        <span class="d-block">
                          <i class="icon-envelope g-font-size-16 g-color-gray-dark-v5 g-pos-rel g-top-2 g-mr-5"></i>
                          clients@sony.com
                        </span>
                      </td>
                      <td class="align-middle text-center">
                        <span class="u-label g-bg-darkpurple g-rounded-20 g-px-10">$33 / hr</span>
                      </td>
                      <td class="align-middle text-nowrap text-center">
                        <a class="g-color-gray-dark-v5 g-text-underline--none--hover g-pa-5" href="#" data-toggle="tooltip" data-placement="top" data-original-title="Edit">
                          <i class="icon-pencil g-font-size-18 g-mr-7"></i>
                        </a>
                        <a class="g-color-gray-dark-v5 g-text-underline--none--hover g-pa-5" href="#" data-toggle="tooltip" data-placement="top" data-original-title="Delete">
                          <i class="icon-trash g-font-size-18 g-mr-7"></i>
                        </a>
                        <a class="g-color-gray-dark-v5 g-text-underline--none--hover g-pa-5" href="#" data-toggle="tooltip" data-placement="top" data-original-title="Print">
                          <i class="icon-printer g-font-size-18 g-mr-7"></i>
                        </a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--End Basic Table-->
            </div>

            <div class="shortcode-scripts">
              <!-- JS Implementing Plugins -->
              <script type="text/plain" src="{{ root }}assets/vendor/jquery.peity.min.js"></script>

              <!-- JS Unify -->
              <script type="text/plain" src="{{ root }}assets/js/components/hs.chart.js"></script>

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // initialization of peity charts
                  $.HSCore.components.HSChart.peity.init($('.js-peity-chart'));
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode3" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Table #03 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Table #04 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Table
              <span class="g-color-primary g-ml-5">#04</span>
            </h2>
          </div>

          <div id="shortcode4">
            <div class="shortcode-html">
              <!-- Table Schedule -->
              <div class="table-responsive">
                <table class="table table-bordered table-hover u-table--v2 text-center text-uppercase g-col-border-side-0">
                  <thead>
                    <tr class="g-bg-primary g-color-white g-col-border-top-0">
                      <th class="g-brd-white-opacity-0_1"></th>
                      <th class="g-brd-white-opacity-0_1">Monday</th>
                      <th class="g-brd-white-opacity-0_1">Tuesday</th>
                      <th class="g-brd-white-opacity-0_1">Wednesday</th>
                      <th class="g-brd-white-opacity-0_1">Thursday</th>
                      <th class="g-brd-white-opacity-0_1">Friday</th>
                      <th class="g-brd-white-opacity-0_1">Saturday</th>
                      <th class="g-brd-white-opacity-0_1">Sunday</th>
                    </tr>
                  </thead>

                  <tbody class="g-font-size-12 g-color-black-opacity-0_6 g-font-weight-600">
                    <tr>
                      <th class="g-color-black-opacity-0_8" scope="row">Yoga</th>
                      <td>07:00 - 08:00</td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                      <td>15:00 - 17:00</td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                      <td>09:00 - 11:00</td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                    </tr>
                    <tr>
                      <th class="g-color-black-opacity-0_8" scope="row">Pilates</th>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                      <td>08:00 - 10:00</td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                      <td>13:00 - 15:00</td>
                      <td>10:00 - 12:00</td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                    </tr>
                    <tr>
                      <th class="g-color-black-opacity-0_8" scope="row">Crossfit</th>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                      <td>07:00 - 08:00</td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                      <td>17:00 - 18:30</td>
                      <td>11:00 - 13:00</td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                      <td>11:00 - 13:00</td>
                    </tr>
                    <tr>
                      <th class="g-color-black-opacity-0_8" scope="row">Cardio</th>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                      <td>07:00 - 08:00</td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                      <td>15:00 - 17:00</td>
                      <td>09:00 - 11:00</td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                    </tr>
                    <tr>
                      <th class="g-color-black-opacity-0_8" scope="row">Zumba</th>
                      <td>06:00 - 09:00</td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                      <td>11:00 - 14:00</td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                      <td>07:00 - 08:00</td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                      <td>09:00 - 12:00</td>
                    </tr>
                    <tr>
                      <th class="g-color-black-opacity-0_8" scope="row">Boxing</th>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                      <td>07:00 - 08:00</td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                      <td>15:00 - 17:00</td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                      <td>09:00 - 11:00</td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                    </tr>
                    <tr>
                      <th class="g-color-black-opacity-0_8" scope="row">Straching</th>
                      <td>11:00 - 14:00</td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                      <td>16:00 - 19:00</td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                      <td>10:00 - 12:00</td>
                      <td>
                        <i class="fa fa-minus"></i>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!-- End Table Schedule -->
            </div>
          </div>

          {% set contentTarget = "#shortcode4" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Table #04 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Table #05 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Table
              <span class="g-color-primary g-ml-5">#05</span>
            </h2>
          </div>

          <div id="shortcode5">
            <div class="shortcode-html">
              <!-- Table Schedule -->
              <div class="table-responsive">
                <table class="table table-bordered table-hover table-dark u-table--v2 text-center text-uppercase g-col-border-side-0">
                  <thead>
                    <tr class="g-bg-primary g-col-border-top-0">
                      <th class="g-brd-white-opacity-0_1"></th>
                      <th class="g-brd-white-opacity-0_1">Monday</th>
                      <th class="g-brd-white-opacity-0_1">Tuesday</th>
                      <th class="g-brd-white-opacity-0_1">Wednesday</th>
                      <th class="g-brd-white-opacity-0_1">Thursday</th>
                      <th class="g-brd-white-opacity-0_1">Friday</th>
                      <th class="g-brd-white-opacity-0_1">Saturday</th>
                      <th class="g-brd-white-opacity-0_1">Sunday</th>
                    </tr>
                  </thead>

                  <tbody class="g-font-size-12 g-color-white-opacity-0_5 g-font-weight-600">
                    <tr>
                      <th class="g-brd-white-opacity-0_1 g-color-white-opacity-0_8" scope="row">Yoga</th>
                      <td class="g-brd-white-opacity-0_1">07:00 - 08:00</td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                      <td class="g-brd-white-opacity-0_1">15:00 - 17:00</td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                      <td class="g-brd-white-opacity-0_1">09:00 - 11:00</td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                    </tr>
                    <tr>
                      <th class="g-brd-white-opacity-0_1 g-color-white-opacity-0_8" scope="row">Pilates</th>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                      <td class="g-brd-white-opacity-0_1">08:00 - 10:00</td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                      <td class="g-brd-white-opacity-0_1">13:00 - 15:00</td>
                      <td class="g-brd-white-opacity-0_1">10:00 - 12:00</td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                    </tr>
                    <tr>
                      <th class="g-brd-white-opacity-0_1 g-color-white-opacity-0_8" scope="row">Crossfit</th>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                      <td class="g-brd-white-opacity-0_1">07:00 - 08:00</td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                      <td class="g-brd-white-opacity-0_1">17:00 - 18:30</td>
                      <td class="g-brd-white-opacity-0_1">11:00 - 13:00</td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                      <td class="g-brd-white-opacity-0_1">11:00 - 13:00</td>
                    </tr>
                    <tr>
                      <th class="g-brd-white-opacity-0_1 g-color-white-opacity-0_8" scope="row">Cardio</th>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                      <td class="g-brd-white-opacity-0_1">07:00 - 08:00</td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                      <td class="g-brd-white-opacity-0_1">15:00 - 17:00</td>
                      <td class="g-brd-white-opacity-0_1">09:00 - 11:00</td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                    </tr>
                    <tr>
                      <th class="g-brd-white-opacity-0_1 g-color-white-opacity-0_8" scope="row">Zumba</th>
                      <td class="g-brd-white-opacity-0_1">06:00 - 09:00</td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                      <td class="g-brd-white-opacity-0_1">11:00 - 14:00</td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                      <td class="g-brd-white-opacity-0_1">07:00 - 08:00</td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                      <td class="g-brd-white-opacity-0_1">09:00 - 12:00</td>
                    </tr>
                    <tr>
                      <th class="g-brd-white-opacity-0_1 g-color-white-opacity-0_8" scope="row">Boxing</th>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                      <td class="g-brd-white-opacity-0_1">07:00 - 08:00</td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                      <td class="g-brd-white-opacity-0_1">15:00 - 17:00</td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                      <td class="g-brd-white-opacity-0_1">09:00 - 11:00</td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                    </tr>
                    <tr>
                      <th class="g-brd-white-opacity-0_1 g-color-white-opacity-0_8" scope="row">Straching</th>
                      <td class="g-brd-white-opacity-0_1">11:00 - 14:00</td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                      <td class="g-brd-white-opacity-0_1">16:00 - 19:00</td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                      <td class="g-brd-white-opacity-0_1">10:00 - 12:00</td>
                      <td class="g-brd-white-opacity-0_1">
                        <i class="fa fa-minus"></i>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!-- End Table Schedule -->
            </div>
          </div>

          {% set contentTarget = "#shortcode5" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Table #05 -->
    </section>

    {% include "html/assets/include/nunjucks/partials/blocks/cta/cta-main.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}
  </main>

  {% include "html/assets/include/nunjucks/partials/blocks/modals/modal-markup.njk" %}

  {% include "html/assets/include/nunjucks/partials/core-js.njk" %}

  <!-- JS Implementing Plugins -->
  <script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
  {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %}
  <script src="{{ root }}assets/vendor/jquery.peity.min.js"></script>

  {% include "html/assets/include/nunjucks/partials/js/js-jquery-ui-core.njk" %}

  <!-- jQuery UI Helpers -->
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/menu.js"></script>
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/mouse.js"></script>

  <!-- jQuery UI Widgets -->
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/autocomplete.js"></script>

  <!-- JS Unify -->
  <script src="{{ root }}assets/js/hs.core.js"></script>

  <script src="{{ root }}assets/js/components/hs.header.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.hamburgers.js"></script>
  <script src="{{ root }}assets/js/components/hs.header-side.js"></script>

  <script src="{{ root }}assets/js/components/hs.rating.js"></script>
  <script src="{{ root }}assets/js/components/hs.chart.js"></script>

  <script src="{{ root }}assets/js/components/hs.autocomplete-local-search.js"></script>
  <script src="{{ root }}assets/style-switcher/vendor/cookiejs/jquery.cookie.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.shortcode-filter.js"></script>

  <script src="{{ root }}assets/js/components/hs.go-to.js"></script>

  {% include "html/assets/include/nunjucks/partials/js/js-show-code.njk" %}

  <!-- JS Custom -->
  <script src="{{ root }}assets/js/custom.js"></script>

  <!-- JS Plugins Init. -->
  <script>
    $(document).on('ready', function () {
      // initialization of go to
      $.HSCore.components.HSGoTo.init('.js-go-to');

      // initialization of rating
      $.HSCore.components.HSRating.init($('.js-rating'), {
        spacing: 2
      });

      // initialization of peity charts
      $.HSCore.components.HSChart.peity.init($('.js-peity-chart'));
    });

    $(window).on('load', function () {
      // initialization of header
      $.HSCore.components.HSHeader.init($('#js-header'));
      $.HSCore.helpers.HSHamburgers.init('.hamburger');
      $.HSCore.components.HSHeaderSide.init($('#sideNav'));

      // initialization of autocomplet
      $.HSCore.components.HSLocalSearchAutocomplete.init('#u-sidebar-navigation__search-autocomplete');

      // initialization of HSMegaMenu component
      $('.js-mega-menu').HSMegaMenu({
        event: 'hover',
        pageContainer: $('.container'),
        breakpoint: 991
      });
    });
  </script>
</body>
</html>
