02. Home Page - Content Type

Component: Home Page - Content Type

Features:

Choose between sliders and hero
Show/Hide functionality to retain work
Dozens of components

Notes:

Full width. Multiple home pages for full width, left sidebar menu navigation, video backgrounds...

Watch Short Video

page--node--home-page.html.twig


 {{ include('@hcann_subtheme/includes/header.html.twig') }}
      <div role="main" class="main">

            {% block content %}

              {{ page.content }}

            {% endblock %}

      </div><!--close main-->
{{ include('@hcann_subtheme/includes/footer.html.twig') }}

node--home-page.html.twig


 {{ attach_library('hcann_subtheme/revo-slider') }}

{% if ( node.field_slider_visibilty.value == "show_revo" ) %}

      {{ content.field_revo_slider }}

{% elseif ( node.field_slider_visibilty.value == "show_owl" ) %}

      {{ content.field_home_page_slider }}

{% elseif ( node.field_slider_visibilty.value == "show_hero" ) %}

      {{ content.field_home_hero_image }}

{% endif %}

<div class="container">

      {{ content.field_home_page_bundle }}

</div> <!--close outer conatiner-->

header.html.twig


 <header id="header" data-plugin-options="{'stickyEnabled': true, 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyStartAt': 148, 'stickySetTop': '-148px', 'stickyChangeLogo': true}">

  <div class="header-body border-color-primary border-top-0 box-shadow-none">

    <div class="header-top header-top-default border-bottom-0 border-top-0">

      <div class="container">

        <div class="header-row py-0 my-0">

          <div class="header-column justify-content-start">

            <div class="header-row">

              <nav class="header-nav-top">

                {{ page.top_header }}

              </nav>

            </div>

          </div>

          <div class="header-column justify-content-end">

            <div class="header-row">

              {{ page.top_header_social }}

            </div>

          </div>

        </div>

      </div>

    </div>

    <div class="header-container container z-index-2">

      <div class="header-row py-2">

        <div class="header-column">

          <div class="header-row">

            <div class="header-logo header-logo-sticky-change">

										<a href="{{ front_page }}">

											<img class="header-logo-sticky opacity-0" alt="LOGO" width="100" height="48" data-sticky-height="30" data-sticky-width="62" data-sticky-top="85" src="/themes/custom/hcann_subtheme/assets/img/logos/logo-w.png">

											<img class="header-logo-non-sticky opacity-0" alt="LOGO" width="150" height="62" src="/themes/custom/hcann_subtheme/assets/img/logos/logo-b.png">

										</a>

									</div>

          </div>

        </div>

        <div class="header-column justify-content-end">

          <div class="header-row">

            {{ page.header_right }}

          </div>

        </div>

      </div>

    </div>

    <div class="header-nav-bar bg-primary" style="background: #ffffff;" data-sticky-header-style="{'minResolution': 991}" data-sticky-header-style-active="{'background-color': 'transparent'}" data-sticky-header-style-deactive="{'background-color': '#ffffff'}">

      <div class="container">

        <div class="header-row">

          <div class="header-column">

            <div class="header-row justify-content-end">

              <div class="header-nav header-nav-force-light-text justify-content-center py-0 py-lg-0" data-sticky-header-style="{'minResolution': 991}" data-sticky-header-style-active="{'margin-left': '135px'}" data-sticky-header-style-deactive="{'margin-left': '0'}">

              <div class="header-nav-main header-nav-main-effect-1 header-nav-main-sub-effect-1">

              <nav class="collapse">

                    {{ page.primary_menu }}

                </nav>

                </div>

                <button class="btn header-btn-collapse-nav my-2" data-bs-toggle="collapse" data-bs-target=".header-nav-main nav">

                  MENU <i class="fas fa-bars"></i>

                </button>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</header>

footer.html.twig


 <footer id="footer" class="footer-texts-more-lighten">

        <div class="container">

          <div class="row py-4 my-5">

           {{ page.footer_first }}

           {{ page.footer_second }}

           {{ page.footer_third }}

           {{ page.footer_fourth }}

          </div>

        </div>

        <div class="container">

          <div class="footer-copyright footer-copyright-style-2 pt-4 pb-5">

            <div class="row">

              <div class="col-12 text-center">

                 {{ page.footer_fifth }}

              </div>

            </div>

          </div>

        </div>

      </footer>

Portfolio - Components

Component: Home Page - Content Type

Watch Short Video