{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-base-dropcaps" %}
{% set title = "Dropcaps" %}

{% 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-base.njk" %}

    <section>
      <!-- Basic Dropcaps -->
      <section class="g-py-100">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Basic Dropcaps</h2>
            </div>
            <div class="g-line-height-2 g-pl-90">
              <p>Add a class
                <code>u-dropcap</code> to make basic dropcaps. The margin spacing might be any but for the all dropcaps examples the following margin spacing classes are used
                <code>g-mr-20</code> and <code>g-mb-10</code></p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Default Dropcaps -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Default dropcaps</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode1">
                <div class="shortcode-html">
                  <p>
                    <span class="u-dropcap g-mr-20 g-mb-10">D</span>
                    established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.
                  </p>
                </div>
              </div>

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

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

          <!-- Default Dropcaps -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Default dropcaps with primary color</h3>
              <p>Just add an additional class <code>g-color-primary</code> to make primary color.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode2">
                <div class="shortcode-html">
                  <p>
                    <span class="u-dropcap g-color-primary g-mr-20 g-mb-10">D</span>
                    established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.
                  </p>
                </div>
              </div>

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

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

      <!-- Basic Dropcaps -->
      <section class="g-py-50">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Underlined Dropcaps</h2>
            </div>
            <div class="g-line-height-2 g-pl-90">
              <p>Add a class
                <code>u-dropcap-underline</code> to make basic dropcaps. The margin spacing might be any but for the all dropcaps examples the following margin spacing classes are used
                <code>g-mr-20</code> and <code>g-mb-10</code></p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Default Dropcaps -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Underlined dropcaps</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode3">
                <div class="shortcode-html">
                  <p>
                    <span class="u-dropcap-underline g-mr-20 g-mb-10">D</span>
                    established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.
                  </p>
                </div>
              </div>

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

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

          <!-- Default Dropcaps -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Underlined dropcaps with primary color</h3>
              <p>Just add an additional class <code>g-color-primary</code> to make primary color.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode4">
                <div class="shortcode-html">
                  <p>
                    <span class="u-dropcap-underline g-color-primary g-mr-20 g-mb-10">D</span>
                    established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.
                  </p>
                </div>
              </div>

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

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

      <!-- Background Colored Dropcaps -->
      <section class="g-py-50">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Background Colored Dropcaps</h2>
            </div>
            <div class="g-line-height-2 g-pl-90">
              <p>Add a class
                <code>u-dropcap-bg</code> to make background colored dropcaps. The margin spacing might be any but for the all dropcaps examples the following margin spacing classes are used
                <code>g-mr-20</code> and <code>g-mb-10</code></p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Dark Background Dropcaps -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Dark background</h3>
              <p>Add a class <code>g-bg-gray-dark-v1</code> to make dark background and use
                <code>g-color-white</code> class to make light text.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode5">
                <div class="shortcode-html">
                  <p>
                    <span class="u-dropcap-bg g-bg-gray-dark-v1 g-color-white g-mr-20 g-mb-10">D</span>
                    established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.
                  </p>
                </div>
              </div>

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

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

          <!-- Primary Background Dropcaps -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Primary background</h3>
              <p>Add a class <code>g-bg-primary</code> to make primary background and use
                <code>g-color-white</code> class to make light text.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode6">
                <div class="shortcode-html">
                  <p>
                    <span class="u-dropcap-bg g-bg-primary g-color-white g-mr-20 g-mb-10">D</span>
                    established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.
                  </p>
                </div>
              </div>

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

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

          <!-- Gradient Background Dropcaps -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Gradient background</h3>
              <p>Add a class <code>g-bg-darkgray-radialgradient-circle</code> to make gradient background and use
                <code>g-color-white</code> class to make light text.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode7">
                <div class="shortcode-html">
                  <p>
                    <span class="u-dropcap-bg g-bg-darkgray-radialgradient-circle g-color-white g-mr-20 g-mb-10">D</span>
                    established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.
                  </p>
                </div>
              </div>

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

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

      <!-- Rounded Dropcaps -->
      <section class="g-py-50">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Rounded Dropcaps</h2>
            </div>
            <div class="g-line-height-2 g-pl-90">
              <p>Add a class
                <code>u-dropcap-bg</code> to make background colored dropcaps. Also, you should include an additional class
                <code>g-rounded-10</code> to make rounded dropcaps. The margin spacing might be any but for the all dropcaps examples the following margin spacing classes are used
                <code>g-mr-20</code> and <code>g-mb-10</code></p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Dark Background Dropcaps -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Dark background</h3>
              <p>Add a class <code>g-bg-gray-dark-v1</code> to make dark background and use
                <code>g-color-white</code> class to make light text.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode8">
                <div class="shortcode-html">
                  <p>
                    <span class="u-dropcap-bg g-bg-gray-dark-v1 g-color-white g-rounded-10 g-mr-20 g-mb-10">D</span>
                    established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.
                  </p>
                </div>
              </div>

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

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

          <!-- Primary Background Dropcaps -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Primary background</h3>
              <p>Add a class <code>g-bg-primary</code> to make primary background and use
                <code>g-color-white</code> class to make light text.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode9">
                <div class="shortcode-html">
                  <p>
                    <span class="u-dropcap-bg g-bg-primary g-color-white g-rounded-10 g-mr-20 g-mb-10">D</span>
                    established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.
                  </p>
                </div>
              </div>

              {% set contentTarget = "#shortcode9" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Primary Background Dropcaps -->

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

          <!-- Gradient Background Dropcaps -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Gradient background</h3>
              <p>Add a class <code>g-bg-darkgray-radialgradient-circle</code> to make gradient background and use
                <code>g-color-white</code> class to make light text. Please note, you may use any gradient colors.
              </p>
            </div>
            <div class="col-md-9">
              <div id="shortcode10">
                <div class="shortcode-html">
                  <p>
                    <span class="u-dropcap-bg g-bg-darkgray-radialgradient-circle g-color-white g-rounded-10 g-mr-20 g-mb-10">D</span>
                    established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.
                  </p>
                </div>
              </div>

              {% set contentTarget = "#shortcode10" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Gradient Background Dropcaps -->
        </div>
      </section>
      <!-- End Rounded Dropcaps -->

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

      <!-- Circle Dropcaps -->
      <section class="g-py-50">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Circle Dropcaps</h2>
            </div>
            <div class="g-line-height-2 g-pl-90">
              <p>Add a class
                <code>u-dropcap-bg</code> to make background colored dropcaps. Also, you should include an additional class
                <code>rounded-circle</code> to make circle dropcaps. The margin spacing might be any but for the all dropcaps examples the following margin spacing classes are used
                <code>g-mr-20</code> and <code>g-mb-10</code></p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Dark Background Dropcaps -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Dark background</h3>
              <p>Add a class <code>g-bg-gray-dark-v1</code> to make dark background and use
                <code>g-color-white</code> class to make light text.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode11">
                <div class="shortcode-html">
                  <p>
                    <span class="u-dropcap-bg g-bg-gray-dark-v1 g-color-white rounded-circle g-mr-20 g-mb-10">D</span>
                    established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.
                  </p>
                </div>
              </div>

              {% set contentTarget = "#shortcode11" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Dark Background Dropcaps -->

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

          <!-- Primary Background Dropcaps -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Primary background</h3>
              <p>Add a class <code>g-bg-primary</code> to make primary background and use
                <code>g-color-white</code> class to make light text.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode12">
                <div class="shortcode-html">
                  <p>
                    <span class="u-dropcap-bg g-bg-primary g-color-white rounded-circle g-mr-20 g-mb-10">D</span>
                    established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.
                  </p>
                </div>
              </div>

              {% set contentTarget = "#shortcode12" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Primary Background Dropcaps -->

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

          <!-- Gradient Background Dropcaps -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Gradient background</h3>
              <p>Add a class <code>g-bg-darkgray-radialgradient-circle</code> to make gradient background and use
                <code>g-color-white</code> class to make light text. Please note, you may use any gradient colors.
              </p>
            </div>
            <div class="col-md-9">
              <div id="shortcode13">
                <div class="shortcode-html">
                  <p>
                    <span class="u-dropcap-bg g-bg-darkgray-radialgradient-circle g-color-white rounded-circle g-mr-20 g-mb-10">D</span>
                    established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.
                  </p>
                </div>
              </div>

              {% set contentTarget = "#shortcode13" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Gradient Background Dropcaps -->
        </div>
      </section>
      <!-- End Circle Dropcaps -->

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

      <!-- Bordered Dropcaps -->
      <section class="g-py-50">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Border Rounded Dropcaps</h2>
            </div>
            <div class="g-line-height-2 g-pl-90">
              <p>Add a class
                <code>u-dropcap-bordered</code> to make bordered dropcaps. The margin spacing might be any but for the all dropcaps examples the following margin spacing classes are used
                <code>g-mr-20</code> and <code>g-mb-10</code></p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Default Bordered Dropcaps -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Default color</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode14">
                <div class="shortcode-html">
                  <p>
                    <span class="u-dropcap-bordered g-mr-20 g-mb-10">D</span>
                    established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.
                  </p>
                </div>
              </div>

              {% set contentTarget = "#shortcode14" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default Bordered Dropcaps -->

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

          <!-- Primary Bordered Dropcaps -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Primary color</h3>
              <p>Use <code>g-color-primary</code> class to make primary color.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode15">
                <div class="shortcode-html">
                  <p>
                    <span class="u-dropcap-bordered g-color-primary g-mr-20 g-mb-10">D</span>
                    established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.
                  </p>
                </div>
              </div>

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

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

      <!-- Border Rounded Dropcaps -->
      <section class="g-py-50">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Bordered Dropcaps</h2>
            </div>
            <div class="g-line-height-2 g-pl-90">
              <p>Add a class
                <code>u-dropcap-bordered</code> to make bordered dropcaps. Also, you should include an additional class
                <code>g-rounded-10</code> to make rounded dropcaps. The margin spacing might be any but for the all dropcaps examples the following margin spacing classes are used
                <code>g-mr-20</code> and <code>g-mb-10</code></p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Default Border Rounded Dropcaps -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Default color</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode16">
                <div class="shortcode-html">
                  <p>
                    <span class="u-dropcap-bordered g-rounded-10 g-mr-20 g-mb-10">D</span>
                    established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.
                  </p>
                </div>
              </div>

              {% set contentTarget = "#shortcode16" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default Border Rounded Dropcaps -->

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

          <!-- Primary Border Rounded Dropcaps -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Primary color</h3>
              <p>Use <code>g-color-primary</code> class to make primary color.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode17">
                <div class="shortcode-html">
                  <p>
                    <span class="u-dropcap-bordered g-rounded-10 g-color-primary g-mr-20 g-mb-10">D</span>
                    established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.
                  </p>
                </div>
              </div>

              {% set contentTarget = "#shortcode17" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Primary Border Rounded Dropcaps -->
        </div>
      </section>
      <!-- End Border Rounded Dropcaps -->

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

      <!-- Border Circle Dropcaps -->
      <section class="g-pt-50 g-pb-100">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Bordered Circle Dropcaps</h2>
            </div>
            <div class="g-line-height-2 g-pl-90">
              <p>Add a class
                <code>u-dropcap-bordered</code> to make bordered dropcaps. Also, you should include an additional class
                <code>rounded-circle</code> to make rounded dropcaps. The margin spacing might be any but for the all dropcaps examples the following margin spacing classes are used
                <code>g-mr-20</code> and <code>g-mb-10</code></p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Default Border Circle Dropcaps -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Default color</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode18">
                <div class="shortcode-html">
                  <p>
                    <span class="u-dropcap-bordered rounded-circle g-mr-20 g-mb-10">D</span>
                    established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.
                  </p>
                </div>
              </div>

              {% set contentTarget = "#shortcode18" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default Border Circle Dropcaps -->

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

          <!-- Primary Border Circle Dropcaps -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Primary color</h3>
              <p>Use <code>g-color-primary</code> class to make primary color.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode19">
                <div class="shortcode-html">
                  <p>
                    <span class="u-dropcap-bordered g-color-primary rounded-circle g-mr-20 g-mb-10">D</span>
                    established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.
                  </p>
                </div>
              </div>

              {% set contentTarget = "#shortcode19" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Primary Border Circle Dropcaps -->
        </div>
      </section>
      <!-- End Border Rounded Dropcaps -->
    </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" %}

  {% 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>
