{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-blocks-icons-app" %}
{% set title = "Icon Blocks App" %}

{% 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/icon-material/material-icons.css">
<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>
      <!-- Icon Blocks v1 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-80">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#1</span>
            </h2>
          </div>

          <div id="shortcode1">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-4 g-mb-60">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v21 g-brd-around--md g-brd-gray-light-v4 text-center g-px-30 g-pb-20">
                    <span class="u-icon-v3 g-color-white g-bg-orange-lineargradient g-pull-50x-up rounded-circle">
                      <i class="icon-education-087 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-color-black g-mb-10">Elegant Design</h3>
                    <p class="g-color-gray-dark-v4 g-mb-20">Curabitur ut augue at mi eleifend lobortis. Ut tincidunt lacinia nisi pharetra.</p>
                    <a class="g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Read More</a>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-60">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v21 g-brd-around--md g-brd-gray-light-v4 text-center g-px-30 g-pb-20">
                    <span class="u-icon-v3 g-color-white g-bg-orange-lineargradient g-pull-50x-up rounded-circle">
                      <i class="icon-finance-009 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-color-black g-mb-10">Fully Responsive</h3>
                    <p class="g-color-gray-dark-v4 g-mb-20">Curabitur ut augue at mi eleifend lobortis. Ut tincidunt lacinia nisi pharetra.</p>
                    <a class="g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Read More</a>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-60">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v21 g-brd-around--md g-brd-gray-light-v4 text-center g-px-30 g-pb-20">
                    <span class="u-icon-v3 g-color-white g-bg-orange-lineargradient g-pull-50x-up rounded-circle">
                      <i class="icon-finance-256 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-color-black g-mb-10">Friendly Support</h3>
                    <p class="g-color-gray-dark-v4 g-mb-20">Curabitur ut augue at mi eleifend lobortis. Ut tincidunt lacinia nisi pharetra.</p>
                    <a class="g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Read More</a>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

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

      <!-- Icon Blocks v2 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-80">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#2</span>
            </h2>
          </div>

          <div id="shortcode2">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-4 g-mb-60">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v19 g-bg-white text-center g-rounded-5 g-px-30 g-pb-30">
                    <span class="u-icon-v3 g-bg-primary g-color-white g-pull-50x-up g-rounded-5 g-mb-5">
                      <i class="icon-education-087 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-color-black g-mb-10">Elegant Design</h3>
                    <p class="g-color-gray-dark-v4 g-mb-20">Curabitur ut augue at mi eleifend lobortis. Ut tincidunt lacinia nisi pharetra.</p>
                    <a class="g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Read More</a>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-60">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v19 g-bg-white text-center g-rounded-5 g-px-30 g-pb-30">
                    <span class="u-icon-v3 g-bg-primary g-color-white g-pull-50x-up g-rounded-5 g-mb-5">
                      <i class="icon-finance-009 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-color-black g-mb-10">Fully Responsive</h3>
                    <p class="g-color-gray-dark-v4 g-mb-20">Curabitur ut augue at mi eleifend lobortis. Ut tincidunt lacinia nisi pharetra.</p>
                    <a class="g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Read More</a>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-60">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v19 g-bg-white text-center g-rounded-5 g-px-30 g-pb-30">
                    <span class="u-icon-v3 g-bg-primary g-color-white g-pull-50x-up g-rounded-5 g-mb-5">
                      <i class="icon-finance-256 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-color-black g-mb-10">Friendly Support</h3>
                    <p class="g-color-gray-dark-v4 g-mb-20">Curabitur ut augue at mi eleifend lobortis. Ut tincidunt lacinia nisi pharetra.</p>
                    <a class="g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Read More</a>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

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

      <!-- Icon Blocks v3 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-80">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#3</span>
            </h2>
          </div>

          <div id="shortcode3">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-4 g-mb-60">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v22 g-bg-secondary text-center g-px-30 g-pb-30">
                    <span class="u-icon-v3 u-icon-size--lg g-bg-primary g-color-white g-pull-50x-up rounded-circle g-mb-5">
                      <i class="icon-education-087 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-color-black g-mb-10">Elegant Design</h3>
                    <p class="g-color-gray-dark-v4 g-mb-20">Curabitur ut augue at mi eleifend lobortis. Ut tincidunt lacinia nisi pharetra.</p>
                    <a class="g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Read More</a>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-60">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v22 g-bg-secondary text-center g-px-30 g-pb-30">
                    <span class="u-icon-v3 u-icon-size--lg g-bg-primary g-color-white g-pull-50x-up rounded-circle g-mb-5">
                      <i class="icon-finance-009 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-color-black g-mb-10">Fully Responsive</h3>
                    <p class="g-color-gray-dark-v4 g-mb-20">Curabitur ut augue at mi eleifend lobortis. Ut tincidunt lacinia nisi pharetra.</p>
                    <a class="g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Read More</a>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-60">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v22 g-bg-secondary text-center g-px-30 g-pb-30">
                    <span class="u-icon-v3 u-icon-size--lg g-bg-primary g-color-white g-pull-50x-up rounded-circle g-mb-5">
                      <i class="icon-finance-256 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-color-black g-mb-10">Friendly Support</h3>
                    <p class="g-color-gray-dark-v4 g-mb-20">Curabitur ut augue at mi eleifend lobortis. Ut tincidunt lacinia nisi pharetra.</p>
                    <a class="g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Read More</a>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

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

      <!-- Icon Blocks v4 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#4</span>
            </h2>
          </div>

          <div id="shortcode4">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-6 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v19 g-bg-white g-pa-30">
                    <div class="media g-mb-15">
                      <div class="d-flex mr-4">
                        <span class="g-color-gray-dark-v4 g-font-size-26">
                          <i class="icon-education-087 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body">
                        <h3 class="h5 g-color-black mb-20">Creative ideas</h3>
                        <div class="g-width-30 g-brd-bottom g-brd-gray-dark-v5 g-my-15"></div>
                        <p class="g-color-gray-dark-v4 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                      </div>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-6 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v19 g-bg-white g-pa-30">
                    <div class="media g-mb-15">
                      <div class="d-flex mr-4">
                        <span class="g-color-gray-dark-v4 g-font-size-26">
                          <i class="icon-education-035 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body">
                        <h3 class="h5 g-color-black mb-20">Excellent features</h3>
                        <div class="g-width-30 g-brd-bottom g-brd-gray-dark-v5 g-my-15"></div>
                        <p class="g-color-gray-dark-v4 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                      </div>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->

              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-6 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v19 g-bg-white g-pa-30">
                    <div class="media g-mb-15">
                      <div class="d-flex mr-4">
                        <span class="g-color-gray-dark-v4 g-font-size-26">
                          <i class="icon-education-141 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body">
                        <h3 class="h5 g-color-black mb-20">Fully responsive</h3>
                        <div class="g-width-30 g-brd-bottom g-brd-gray-dark-v5 g-my-15"></div>
                        <p class="g-color-gray-dark-v4 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                      </div>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-6 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v19 g-bg-white g-pa-30">
                    <div class="media g-mb-15">
                      <div class="d-flex mr-4">
                        <span class="g-color-gray-dark-v4 g-font-size-26">
                          <i class="icon-finance-256 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body">
                        <h3 class="h5 g-color-black mb-20">Clean code</h3>
                        <div class="g-width-30 g-brd-bottom g-brd-gray-dark-v5 g-my-15"></div>
                        <p class="g-color-gray-dark-v4 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                      </div>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

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

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

          <div id="shortcode5">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v22 g-bg-secondary rounded g-pa-30">
                    <span class="d-block g-color-primary g-font-size-40 g-mb-10">
                      <i class="icon-education-087 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-color-black mb-20">Creative ideas</h3>
                    <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v22 g-bg-secondary rounded g-pa-30">
                    <span class="d-block g-color-primary g-font-size-40 g-mb-10">
                      <i class="icon-education-035 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-color-black mb-20">Excellent features</h3>
                    <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v22 g-bg-secondary rounded g-pa-30">
                    <span class="d-block g-color-primary g-font-size-40 g-mb-10">
                      <i class="icon-education-141 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-color-black mb-20">Fully responsive</h3>
                    <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->

              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v22 g-bg-secondary rounded g-pa-30">
                    <span class="d-block g-color-primary g-font-size-40 g-mb-10">
                      <i class="icon-finance-256 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-color-black mb-20">Clean code</h3>
                    <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v22 g-bg-secondary rounded g-pa-30">
                    <span class="d-block g-color-primary g-font-size-40 g-mb-10">
                      <i class="icon-science-020 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-color-black mb-20">Extensive documentation</h3>
                    <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v22 g-bg-secondary rounded g-pa-30">
                    <span class="d-block g-color-primary g-font-size-40 g-mb-10">
                      <i class="icon-finance-009 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-color-black mb-20">Modern design</h3>
                    <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

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

      <!-- Icon Blocks v6 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#6</span>
            </h2>
          </div>

          <div id="shortcode6">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v19 g-bg-white text-center rounded g-pa-40">
                    <span class="u-icon-v1 u-icon-size--lg g-color-primary g-mb-15">
                      <i class="icon-education-087 u-line-icon-pro"></i>
                    </span>
                    <h4 class="h5 g-color-black g-mb-10">Creative ideas</h4>
                    <p class="g-color-gray-dark-v4 mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v19 g-bg-white text-center rounded g-pa-40">
                    <span class="u-icon-v1 u-icon-size--lg g-color-primary g-mb-15">
                      <i class="icon-education-035 u-line-icon-pro"></i>
                    </span>
                    <h4 class="h5 g-color-black g-mb-10">Excellent features</h4>
                    <p class="g-color-gray-dark-v4 mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v19 g-bg-white text-center rounded g-pa-40">
                    <span class="u-icon-v1 u-icon-size--lg g-color-primary g-mb-15">
                      <i class="icon-education-141 u-line-icon-pro"></i>
                    </span>
                    <h4 class="h5 g-color-black g-mb-10">Fully responsive</h4>
                    <p class="g-color-gray-dark-v4 mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->

              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v19 g-bg-white text-center rounded g-pa-40">
                    <span class="u-icon-v1 u-icon-size--lg g-color-primary g-mb-15">
                      <i class="icon-finance-256 u-line-icon-pro"></i>
                    </span>
                    <h4 class="h5 g-color-black g-mb-10">Clean code</h4>
                    <p class="g-color-gray-dark-v4 mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v19 g-bg-white text-center rounded g-pa-40">
                    <span class="u-icon-v1 u-icon-size--lg g-color-primary g-mb-15">
                      <i class="icon-science-020 u-line-icon-pro"></i>
                    </span>
                    <h4 class="h5 g-color-black g-mb-10">Extensive documentation</h4>
                    <p class="g-color-gray-dark-v4 mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v19 g-bg-white text-center rounded g-pa-40">
                    <span class="u-icon-v1 u-icon-size--lg g-color-primary g-mb-15">
                      <i class="icon-finance-009 u-line-icon-pro"></i>
                    </span>
                    <h4 class="h5 g-color-black g-mb-10">Modern design</h4>
                    <p class="g-color-gray-dark-v4 mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

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

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

          <div id="shortcode7">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row justify-content-center">
                <div class="col-lg-6">
                  <div class="row">
                    <div class="col-sm g-brd-bottom--sm g-brd-gray-light-v4 g-pa-30-15">
                      <!-- Icon Blocks -->
                      <div class="text-center">
                        <span class="u-icon-v1 u-icon-size--2xl g-color-primary g-mb-15">
                          <i class="icon-real-estate-027 u-line-icon-pro"></i>
                        </span>
                        <h4 class="h6 g-font-weight-700 g-mb-3">Address</h4>
                        <span>New York, United States</span>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>

                    <div class="col-sm g-brd-bottom--sm g-brd-left--sm g-brd-gray-light-v4 g-pa-30-15">
                      <!-- Icon Blocks -->
                      <div class="text-center">
                        <span class="u-icon-v1 u-icon-size--2xl g-color-primary g-mb-15">
                          <i class="icon-communication-062 u-line-icon-pro"></i>
                        </span>
                        <h4 class="h6 g-font-weight-700 g-mb-3">Phone Number</h4>
                        <span>+48 555 2566 112</span>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-sm g-pa-30-15">
                      <!-- Icon Blocks -->
                      <div class="text-center">
                        <span class="u-icon-v1 u-icon-size--2xl g-color-primary g-mb-15">
                          <i class="icon-electronics-005 u-line-icon-pro"></i>
                        </span>
                        <h4 class="h6 g-font-weight-700 g-mb-3">Email</h4>
                        <span>info@unify.com</span>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>

                    <div class="col-sm g-brd-left--sm g-brd-gray-light-v4 g-pa-30-15">
                      <!-- Icon Blocks -->
                      <div class="text-center">
                        <span class="u-icon-v1 u-icon-size--2xl g-color-primary g-mb-15">
                          <i class="icon-finance-027 u-line-icon-pro"></i>
                        </span>
                        <h4 class="h6 g-font-weight-700 g-mb-3">Toll free</h4>
                        <span>+402 5897 660</span>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

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

      <!-- Icon Blocks v8 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#8</span>
            </h2>
          </div>

          <div id="shortcode8">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v19 g-bg-white rounded g-pa-20">
                    <div class="media">
                      <div class="d-flex align-self-center mr-3">
                        <span class="u-icon-v3 g-bg-lightred g-color-white g-rounded-50x">
                          <i class="icon-communication-062 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body align-self-center">
                        <p class="mb-0">
                          <span class="g-font-weight-700">Albert Heller</span>
                          has sent you email.
                        </p>
                        <div class="g-color-gray-dark-v4 g-font-size-12">2 minutes ago</div>
                      </div>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v19 g-bg-white rounded g-pa-20">
                    <div class="media">
                      <div class="d-flex align-self-center mr-3">
                        <span class="u-icon-v3 g-bg-blue g-color-white g-rounded-50x">
                          <i class="icon-finance-009 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body align-self-center">
                        <p class="mb-0">
                          <span class="g-font-weight-700">Income</span>
                          You have earned $10.
                        </p>
                        <div class="g-color-gray-dark-v4 g-font-size-12">5 minutes ago</div>
                      </div>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v19 g-bg-white rounded g-pa-20">
                    <div class="media">
                      <div class="d-flex align-self-center mr-3">
                        <span class="u-icon-v3 g-bg-orange g-color-white g-rounded-50x">
                          <i class="icon-education-087 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body align-self-center">
                        <p class="mb-0">
                          <span class="g-font-weight-700">Invitation</span>
                          has sent you invitation.
                        </p>
                        <div class="g-color-gray-dark-v4 g-font-size-12">12 hours ago</div>
                      </div>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->

              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v19 g-bg-white rounded g-pa-20">
                    <div class="media">
                      <div class="d-flex align-self-center mr-3">
                        <span class="u-icon-v3 g-bg-primary g-color-white g-rounded-50x">
                          <i class="icon-finance-256 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body align-self-center">
                        <p class="mb-0">
                          <span class="g-font-weight-700">Chart</span>
                          Your statistics has been updated.
                        </p>
                        <div class="g-color-gray-dark-v4 g-font-size-12">1 hour ago</div>
                      </div>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v19 g-bg-white rounded g-pa-20">
                    <div class="media">
                      <div class="d-flex align-self-center mr-3">
                        <span class="u-icon-v3 g-bg-pink g-color-white g-rounded-50x">
                          <i class="icon-education-141 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body align-self-center">
                        <p class="mb-0">
                          <span class="g-font-weight-700">Successfull</span>
                          You have set notification.
                        </p>
                        <div class="g-color-gray-dark-v4 g-font-size-12">45 minutes ago</div>
                      </div>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v19 g-bg-white rounded g-pa-20">
                    <div class="media">
                      <div class="d-flex align-self-center mr-3">
                        <span class="u-icon-v3 g-bg-bluegray g-color-white g-rounded-50x">
                          <i class="icon-electronics-005 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body align-self-center">
                        <p class="mb-0">
                          <span class="g-font-weight-700">Changed</span>
                          Your number has been updated.
                        </p>
                        <div class="g-color-gray-dark-v4 g-font-size-12">3 weeks ago</div>
                      </div>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

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

      <!-- Icon Blocks v9 -->
      <section class="g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Icon Blocks
            <span class="g-color-primary g-ml-5">#9</span>
          </h2>
        </div>

        <div id="shortcode9">
          <div class="shortcode-html">
            <div class="g-bg-img-hero" style="background-image: url({{ root }}assets/include/svg/svg-bg3.svg);">
              <div class="container g-py-100">
                <div class="card-group d-block d-md-flex g-mx-minus-4">
                  <div class="card g-brd-none g-mx-4 g-mb-8">
                    <!-- Links -->
                    <div class="card-body u-shadow-v38 g-bg-white rounded g-pa-40">
                      <span class="u-icon-v3 u-shadow-v31 g-color-black g-bg-secondary rounded-circle mb-4">
                        <i class="icon-finance-245 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h4">Money</h3>
                      <p class="g-color-text-light-v1">University fees and costs, and financial support such as scholarships, bursaries and research funding.</p>
                      <a class="u-link-v5 g-color-black--hover g-font-size-default" href="#">Learn More<i class="g-font-size-13 ml-2 material-icons">arrow_forward</i></a>
                    </div>
                    <!-- End Links -->
                  </div>

                  <div class="card g-brd-none g-mx-4 g-mb-8">
                    <!-- Links -->
                    <div class="card-body u-shadow-v38 g-bg-white rounded g-pa-40">
                      <span class="u-icon-v3 u-shadow-v31 g-color-black g-bg-secondary rounded-circle mb-4">
                        <i class="icon-education-039 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h4">Your Studies</h3>
                      <p class="g-color-text-light-v1">Enrolment and course planning, timetables, exams and assessments, honours and higher degree by research.</p>
                      <a class="u-link-v5 g-color-black--hover g-font-size-default" href="#">Learn More<i class="g-font-size-13 ml-2 material-icons">arrow_forward</i></a>
                    </div>
                    <!-- End Links -->
                  </div>

                  <div class="card g-brd-none g-mx-4 g-mb-8">
                    <!-- Links -->
                    <div class="card-body u-shadow-v38 g-bg-white rounded g-pa-40">
                      <span class="u-icon-v3 u-shadow-v31 g-color-black g-bg-secondary rounded-circle mb-4">
                        <i class="icon-education-055 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h4">New Students</h3>
                      <p class="g-color-text-light-v1">Essential information and resources to help get you started at Sydney.</p>
                      <a class="u-link-v5 g-color-black--hover g-font-size-default" href="#">Learn More<i class="g-font-size-13 ml-2 material-icons">arrow_forward</i></a>
                    </div>
                    <!-- End Links -->
                  </div>
                </div>

                <div class="card-group d-block d-md-flex g-mx-minus-4">
                  <div class="card g-brd-none g-mx-4 g-mb-8">
                    <!-- Links -->
                    <div class="card-body u-shadow-v38 g-bg-white rounded g-pa-40">
                      <span class="u-icon-v3 u-shadow-v31 g-color-black g-bg-secondary rounded-circle mb-4">
                        <i class="icon-communication-058 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h4">Support</h3>
                      <p class="g-color-text-light-v1">Health, wellbeing and support services, mentoring, and clubs and societies.</p>
                      <a class="u-link-v5 g-color-black--hover g-font-size-default" href="#">Learn More<i class="g-font-size-13 ml-2 material-icons">arrow_forward</i></a>
                    </div>
                    <!-- End Links -->
                  </div>

                  <div class="card g-brd-none g-mx-4 g-mb-8">
                    <!-- Links -->
                    <div class="card-body u-shadow-v38 g-bg-white rounded g-pa-40">
                      <span class="u-icon-v3 u-shadow-v31 g-color-black g-bg-secondary rounded-circle mb-4">
                        <i class="icon-education-103 u-line-icon-pro-v3"></i>
                      </span>
                      <h3 class="h4">Student IT and Online Learning</h3>
                      <p class="g-color-text-light-v1">Log in to University systems, find computers and access wi-fi, get the most out of online learning (LMS), help.</p>
                      <a class="u-link-v5 g-color-black--hover g-font-size-default" href="#">Learn More<i class="g-font-size-13 ml-2 material-icons">arrow_forward</i></a>
                    </div>
                    <!-- End Links -->
                  </div>

                  <div class="card g-brd-none g-mx-4 g-mb-8">
                    <!-- Links -->
                    <div class="card-body u-shadow-v38 g-bg-white rounded g-pa-40">
                      <span class="u-icon-v3 u-shadow-v31 g-color-black g-bg-secondary rounded-circle mb-4">
                        <i class="icon-communication-040 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h4">Administration</h3>
                      <p class="g-color-text-light-v1">Update your personal details, obtain an academic transcript, check key dates, learn about graduation, make a complaint or raise a concern.</p>
                      <a class="u-link-v5 g-color-black--hover g-font-size-default" href="#">Learn More<i class="g-font-size-13 ml-2 material-icons">arrow_forward</i></a>
                    </div>
                    <!-- End Links -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="container">
          {% set contentTarget = "#shortcode9" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v9 -->

      <!-- Icon Blocks v10 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#10</span>
            </h2>
          </div>

          <div id="shortcode10">
            <div class="shortcode-html">
              <div class="g-pt-100 g-pb-70">
                <div class="row justify-content-center">
                  <div class="col-4 col-md g-mb-30">
                    <!-- Faculty Links -->
                    <div class="u-block-hover text-center">
                      <span class="u-icon-v2 g-z-index-minus-1 u-icon-size--lg u-shadow-v35 g-brd-5 g-brd-white g-color-white--hover g-bg-secondary g-bg-black--hover rounded-circle mb-2">
                        <i class="icon-finance-067 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h4 g-color-primary--hover">My page</h3>
                      <a class="u-link-v2" href="#"></a>
                    </div>
                    <!-- End Faculty Links -->
                  </div>

                  <div class="col-4 col-md g-mb-30">
                    <!-- Faculty Links -->
                    <div class="u-block-hover text-center">
                      <span class="u-icon-v2 g-z-index-minus-1 u-icon-size--lg u-shadow-v35 g-brd-5 g-brd-white g-color-white--hover g-bg-secondary g-bg-black--hover rounded-circle mb-2">
                        <i class="icon-finance-170 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h4 g-color-primary--hover">Email</h3>
                      <a class="u-link-v2" href="#"></a>
                    </div>
                    <!-- End Faculty Links -->
                  </div>

                  <div class="col-4 col-md g-mb-30">
                    <!-- Faculty Links -->
                    <div class="u-block-hover text-center">
                      <span class="u-icon-v2 g-z-index-minus-1 u-icon-size--lg u-shadow-v35 g-brd-5 g-brd-white g-color-white--hover g-bg-secondary g-bg-black--hover rounded-circle mb-2">
                        <i class="icon-finance-020 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h4 g-color-primary--hover">Banner</h3>
                      <a class="u-link-v2" href="#"></a>
                    </div>
                    <!-- End Faculty Links -->
                  </div>

                  <div class="col-4 col-md g-mb-30">
                    <!-- Faculty Links -->
                    <div class="u-block-hover text-center">
                      <span class="u-icon-v2 g-z-index-minus-1 u-icon-size--lg u-shadow-v35 g-brd-5 g-brd-white g-color-white--hover g-bg-secondary g-bg-black--hover rounded-circle mb-2">
                        <i class="icon-finance-076 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h4 g-color-primary--hover">Course spaces</h3>
                      <a class="u-link-v2" href="#"></a>
                    </div>
                    <!-- End Faculty Links -->
                  </div>

                  <div class="col-4 col-md g-mb-30">
                    <!-- Faculty Links -->
                    <div class="u-block-hover text-center">
                      <span class="u-icon-v2 g-z-index-minus-1 u-icon-size--lg u-shadow-v35 g-brd-5 g-brd-white g-color-white--hover g-bg-secondary g-bg-black--hover rounded-circle mb-2">
                        <i class="icon-finance-257 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h4 g-color-primary--hover">FAST</h3>
                      <a class="u-link-v2" href="#"></a>
                    </div>
                    <!-- End Faculty Links -->
                  </div>
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode10" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v10 -->
    </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/appear.js"></script>
  <script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
  {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %}

  {% 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.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');
    });

    $(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 plugin
      $('.js-mega-menu').HSMegaMenu({
        event: 'hover',
        pageContainer: $('.container'),
        breakpoint: 991
      });
    });
  </script>
</body>
</html>
