GENIUX

Intro Sections

The Intro Section is the first of our Content Blocks avaiable inside the content area.

Go to (Geniux/blocks/index.html) to see all the Intro Sections demo examples.

The first content section that Geniux use inside the content area is the Intro section.

<!-- ======================================================
===                  START CONTENT AREA                 ===
======================================================= -->


<!--

PUT HERE THE INTRO SECTION LIKE AS FIRST CONTENT SECTION

-->


<!-- =====================================================
===                / END CONTENT AREA                  ===
====================================================== -->

NOTE: The Intro Section has an id="intro" that is the reference id assigned to our "scroll-to" bouncing arrow button at the bottom of the hero section.

<!-- ==========================
===       START HERO        ===
=========================== -->

<div class="hero jarallax">
  <img class="jarallax-img" src="assets/images/demo-img/hero-bg.jpg" alt="Image">
  <!-- Overlay -->
  <div class="overlay blue--7"></div>
  <!-- Start hero caption -->
  <div class="hero-caption">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
           <h1 class="text-uppercase">Welcome to Geniux</h1>
          <hr class="hr-small hr-color">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod<br>tempor incididunt ut labore et dolore magna.</p>
          <div class="hero-btn m-t-30">
            <a href="#" class="gnx-btn btn-border-white btn-rounded hidden-xs" role="button">Learn More</a>
            <a href="#" class="gnx-btn btn-border-white btn-rounded hidden-xs" role="button">Purchase Now</a>
          </div>
        </div>
      </div> <!--/ .row -->
    </div> <!--/ .container -->
  </div> <!--/ .slider-caption -->
  <!-- Scroll-to bouncing arrow -->
  <div id="scroll-1" class="single-page-nav hidden-sm hidden-xs">
    <a data-scroll href="#intro" class="arrow bounce"></a>
  </div>
</div>

<!-- ===========================
===/        END HERO         ===
============================ -->

This will do the magic, the single-page-nav plugin will scroll nicely the page to the intro section.

<!-- ======================================================
===                  START CONTENT AREA                 ===
======================================================= -->

<!-- Start Intro #1-->
<section id="intro">
  <div class="container">
    <div class="row text-center">
      <div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1">
        <h2>Create your new website with <span>Geniux</span>, powerful &amp; smartly coded, build fast with pre-designed content blocks.</h2>
        <hr class="hr-small hr-color m-t-25 m-b-55">
        <div class="col-md-4 col-sm-4">
          <div class="feat-wrapper">
            <div class="feat-icon icon-sm">
              <span><i class="icon-laptop" aria-hidden="true"></i></span>
            </div>
            <div class="feat-description">
              <div class="feat-title">
                <h4 class="f-w-400">Block Based</h4>
              </div>
              <p>New and modern pre-designed blocks, start to create your new website today with Geniux!</p>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-4">
          <div class="feat-wrapper">
            <div class="feat-icon icon-sm">
              <span><i class="icon-adjustments" aria-hidden="true"></i></span>
            </div>
            <div class="feat-description">
              <div class="feat-title">
                <h4 class="f-w-400">Create Easily</h4>
              </div>
              <p>Build new and awesome pages using Geniux, just copy and paste your preferred block.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-4">
          <div class="feat-wrapper">
            <div class="feat-icon icon-sm">
              <span><i class="icon-briefcase f-w-500" aria-hidden="true"></i></span>
            </div>
            <div class="feat-description">
              <div class="feat-title">
                <h4 class="f-w-400">Unlimited Layouts</h4>
              </div>
              <p>Mix pre-designed content blocks to create your web pages, no code knowledge required.</p>
            </div>
          </div>
        </div>
      </div>
    </div><!-- /.row -->
  </div><!-- /.container -->
</section>
<!--/ End Intro #1-->


<!-- =====================================================
===                / END CONTENT AREA                  ===
====================================================== -->

Is important to use this section first, before the other content sections, otherwise put a reference id "intro" in your first content block in order to enable scroll.