{# Settings #}
{% set root = "../../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-blocks-promo" %}
{% set title = "Promo Blocks 44" %}

{% 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" %}
<link rel="stylesheet" href="{{ root }}assets/vendor/slick-carousel/slick/slick.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">
<link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">

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

<body>
  <main>
    {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %}

    <!-- Promo Block -->
    <div class="g-bg-img-hero" style="background-image: url({{ root }}assets/include/svg/svg-bg3.svg);">
      <div class="container g-py-100 g-py-150--lg">
        <div class="row align-items-lg-center">
          <div class="col-lg-6 g-mb-70 g-mb-150--sm g-mb-50--lg">
            <div class="g-pr-15--lg">
              <!-- Promo Block Info -->
              <div class="mb-5">
                <h1 class="g-color-black g-font-size-45 mb-3">Represent Our Graduates</h1>
                <p>We're proud of our incredible community of more than 320,000 alumni and more than 57,000 donors worldwide. Their global impact is immense – from mentoring students to showing their generous support for life-changing research.</p>
              </div>
              <a class="btn u-shadow-v33 g-color-white g-bg-primary g-bg-black--hover g-rounded-30 g-px-25 g-py-13 mr-2" href="#">Make a Nomination</a>
              <a class="js-go-to btn u-shadow-v32 g-color-primary g-color-white--hover g-bg-white g-bg-black--hover g-rounded-30 g-px-25 g-py-13 ml-2" href="#" data-target="#content">Explore More</a>
              <!-- End Promo Block Info -->
            </div>
          </div>

          <div class="col-lg-6 g-mb-50">
            <div class="g-max-width-550 g-pos-rel g-pl-15--lg mx-auto">
              <!-- Promo Block Images -->
              <div class="u-shadow-v36 g-max-width-300--sm g-pos-rel g-z-index-2 g-mb-20 g-mb-0--sm">
                <img class="img-fluid g-brd-around g-brd-4 g-brd-white rounded" src="{{ root }}assets/img-temp/600x350/img11.jpg" alt="Image Description">
              </div>

              <div class="u-shadow-v36 g-max-width-300--sm g-pos-abs--sm g-top-minus-70 g-left-130 g-z-index-1 g-mb-20 g-mb-0--sm">
                <img class="img-fluid g-brd-around g-brd-4 g-brd-white rounded" src="{{ root }}assets/img-temp/600x350/img12.jpg" alt="Image Description">
              </div>

              <div class="u-shadow-v36 g-max-width-300--sm g-pos-abs--sm g-top-65 g-right-0">
                <img class="img-fluid g-brd-around g-brd-4 g-brd-white rounded" src="{{ root }}assets/img-temp/600x350/img13.jpg" alt="Image Description">
              </div>
              <!-- End Promo Block Images -->

              <!-- SVG Square #1 -->
              <svg class="g-hidden-xs-down g-width-25 g-height-45 g-pos-abs g-bottom-minus-40 g-left-0 g-z-index-2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                   viewBox="0 0 45.9 52.9" enable-background="new 0 0 45.9 52.9" xml:space="preserve">
                <polygon fill="#7cd1d8" stroke="#FFFFFF" stroke-width="0.4" stroke-miterlimit="10" points="45.8,39.5 23.1,52.8 0.2,39.7
                  0.1,13.4 22.9,0.1 45.7,13.2 "/>
                <polyline fill="#7cd1d8" stroke="#FFFFFF" stroke-width="0.4" stroke-miterlimit="10" points="0.1,13.5 23.1,26.4 23.1,52.8 "/>
                <line fill="#7cd1d8" stroke="#FFFFFF" stroke-width="0.4" stroke-miterlimit="10" x1="45.5" y1="13.2" x2="23" y2="26.5"/>
              </svg>
              <!-- End SVG Square #1 -->

              <!-- SVG Square #3 -->
              <svg class="g-hidden-xs-down g-width-60 g-height-80 g-pos-abs g-top-minus-40 g-right-0 g-z-index-2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                   viewBox="0 0 52.8 47.5" enable-background="new 0 0 52.8 47.5" xml:space="preserve">
                <polygon fill="#FFFFFF" stroke="#7cd1d8" stroke-width="0.25" stroke-miterlimit="10" points="14.8,47.3 0.1,25.5 11.8,1.9 38,0.1
                  52.7,22 41,45.6 "/>
                <polyline fill="#FFFFFF" stroke="#7cd1d8" stroke-width="0.25" stroke-miterlimit="10" points="37.9,0.1 26.5,23.8 0.2,25.5 "/>
                <line fill="#FFFFFF" stroke="#7cd1d8" stroke-width="0.25" stroke-miterlimit="10" x1="41" y1="45.4" x2="26.4" y2="23.7"/>
              </svg>
              <!-- End SVG Square #3 -->

              <!-- SVG Square #4 -->
              <svg class="g-hidden-xs-down g-width-50 g-height-20 g-pos-abs g-top-minus-120 g-right-100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                   viewBox="0 0 73.5 20" enable-background="new 0 0 73.5 20" xml:space="preserve">
                <g>
                  <path fill="none" stroke="#9a69cb" stroke-width="3" stroke-miterlimit="10" d="M0,1c9.2,0,9.2,18,18.4,18c9.2,0,9.2-18,18.4-18
                    c9.2,0,9.2,18,18.4,18S64.3,1,73.5,1"/>
                </g>
              </svg>
              <!-- End SVG Square #4 -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Promo Block -->

    {% include "html/assets/include/nunjucks/partials/blocks/content/content-demo-1.njk" %}

    {% 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/core-js.njk" %}

  <!-- JS Implementing Plugins -->
  <script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
  <script src="{{ root }}assets/vendor/masonry/dist/masonry.pkgd.min.js"></script>
  <script src="{{ root }}assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
  <script src="{{ root }}assets/vendor/slick-carousel/slick/slick.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.carousel.js"></script>
  <script src="{{ root }}assets/js/components/hs.slider.js"></script>

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

      // initialization of masonry
      $('.masonry-grid').imagesLoaded().then(function () {
        $('.masonry-grid').masonry({
          columnWidth: '.masonry-grid-sizer',
          itemSelector: '.masonry-grid-item',
          percentPosition: true
        });
      });
    });

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

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