{# Settings #} {% set root = "../../" %} {% set mainNavActive_1 = "shortcodes" %} {% set sidebarNavActive_1 = "shortcode-blocks-hero-blocks" %} {% set title = "Hero Blocks" %} {% 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" %} {% 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" %}
{% 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" %}

Hero blocks #01

BG color, BG gradient

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode1-1" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode1-2" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode1-3" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode1-4" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode1-5" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Hero blocks #02

BG image, BG pattern

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode2-1" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode2-2" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode2-3" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode2-4" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Hero blocks #03

Colored Overlay

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode3-1" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode3-2" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode3-3" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Hero blocks #04

Patterned Overlay

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode4-1" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode4-2" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode4-3" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode4-4" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Hero blocks #05

Patterned & Colored/gradiented Overlay

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode5-1" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode5-2" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode5-3" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode5-4" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Hero blocks #06

BG image parallax + video parallax

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode6-1" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode6-2" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Hero blocks #07

BG video: Youtube, Vimeo, HTML5

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode7-1" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode7-2" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode7-3" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Hero blocks #07

Animated content

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode8-1" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Content block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.

Iamge Description
{% set SCExtendedClasses = "container" %} {% set contentTarget = "#shortcode8-2" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.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" %}
{% include "html/assets/include/nunjucks/partials/blocks/modals/modal-markup.njk" %} {% include "html/assets/include/nunjucks/partials/core-js.njk" %} {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %} {% include "html/assets/include/nunjucks/partials/js/js-jquery-ui-core.njk" %} {% include "html/assets/include/nunjucks/partials/js/js-show-code.njk" %}