GENIUX

Page Structure

Html pages are structured to implement easily pre-designed content blocks using section tags to wrap content.

<!-- Start Section -->
<section>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12">
        <!-- Your Content Here -->
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12">
        <!-- Your Content Here -->
      </div>
    </div><!-- /.row -->
  </div><!-- /.container -->
</section>
<!--/ End Section -->

<head>

The <head> element is a container for metadata and is placed between the <html> tag and the <body> tag.

Here are defined document title, character set, styles, links and other meta information.

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
    <title>Geniux</title>
    <meta name="description" content="Geniux Responsive Bootstrap MultiPurpose Template">
    <meta name="author" content="Creativ3Design">
    <meta name="keywords" content="Bootstrap, MultiPurpose, Responsive, Retina">

    <!-- Favicon
    ============================================ -->
    <link rel="apple-touch-icon" sizes="72x72" href="assets/images/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon/favicon-16x16.png">
    <link rel="manifest" href="assets/images/favicon/site.webmanifest">
    <link rel="mask-icon" href="assets/images/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#2b5797">
    <meta name="theme-color" content="#ffffff">

    <!-- Fonts
    ============================================ -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">

    <!-- style CSS
    ============================================ -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
  </head>

    <body>

<body>

The Geniux <body> content is easy to read, well commented and nicely structured to navigate more easily for a fast customization.

Obviously you can modify the content according to your needs.

<body> Elements

1) Preloader (Mandatory)

</head>

    <body>

      <!-- ======================
      ===   START PRELOADER   ===
      ======================= -->
      <div id="cover">
        <div id="preloader">
          <!-- Spinkit Animation -->
          <div class="sk-folding-cube">
            <div class="sk-cube1 sk-cube"></div>
            <div class="sk-cube2 sk-cube"></div>
            <div class="sk-cube4 sk-cube"></div>
            <div class="sk-cube3 sk-cube"></div>
          </div>
          <!--/ Spinkit Animation -->
        </div>
      </div>
      <!-- ======================
      === /  END PRELOADER    ===
      ======================= -->

2) Header (Mandatory)

The <header> tag contains two basic parts of our pages, the Bootstrap Navigation and the Hero.

<!-- =========================
===  START HEADER CONTENT  ===
========================== -->
<header>

  <!-- =========================
  ===    START NAVIGATION    ===
  ========================== -->
  <nav class="navbar navbar-default navbar-fixed no-background white bootsnav" data-spy="affix" data-offset-top="100">

    <!-- Start Top Search -->
    <div class="top-search">
      <div class="container">
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-search"></i></span>
          <input type="text" class="form-control" placeholder="Search">
          <span class="input-group-addon close-search"><i class="fa fa-times"></i></span>
        </div>
      </div>
    </div>
    <!-- End Top Search -->

    <div class="container">
      <!-- Start Atribute Navigation -->
      <div class="attr-nav">
        <ul>
          <li class="search"><a href="#"><i class="fa fa-search"></i></a></li>
          <li class="side-menu"><a href="#"><i class="fa fa-bars"></i></a></li>
        </ul>
      </div>
      <!-- End Atribute Navigation -->

      <!-- Start Header Navigation -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
          <i class="fa fa-bars"></i>
        </button>
        <a class="navbar-brand" href="index.html">GENIUX</a>
      </div>
      <!-- End Header Navigation -->

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="navbar-menu">
        <ul class="nav navbar-nav navbar-right single-page-nav" data-in="fadeIn" data-out="fadeOut">
          <!-- Active Page -->
          <li><a href="#intro">Features</a></li>
          <li><a href="#about">About Us</a></li>
          <li><a href="#works">Works</a></li>
          <li><a href="#team">Team</a></li>
          <li><a href="#pricing-boxes-1">Pricing</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div> <!-- /.navbar-collapse -->
    </div> <!--/ .container -->

    <!-- Start Side Menu -->
    <div class="side">
      <a href="#" class="close-side"><i class="fa fa-times"></i></a>
      <div class="widget">
        <h6 class="title">Our Company</h6>
        <ul class="link">
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Careers</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
      <div class="widget">
        <h6 class="title">Additional Links</h6>
        <ul class="link">
          <li><a href="#">Product Info</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Site Map</a></li>
          <li><a href="#">Support</a></li>
          <li><a href="#">Therms of Use</a></li>
          <li><a href="#">Privacy Policy</a></li>
        </ul>
      </div>
    </div>
    <!--/ End side menu -->

  </nav>
  <!-- =========================
  ===/    END NAVIGATION     ===
  ========================== -->


  <!-- ==========================
  ===       START HERO        ===
  =========================== -->
  <div class="hero jarallax">
    <img class="jarallax-img" src="assets/images/example-image.jpg" alt="Image">
    <!-- Overlay -->
    <div class="overlay dark--5"></div>
    <!-- Start hero caption -->
    <div class="hero-caption">
      <div class="container">
        <div class="row">
          <div class="col-md-12 ">
            <h1 class="f-s-90 text-uppercase m-t-35"><span>Geniux</span></h1>
            <h3 class="f-s-35 f-w-400 l-s-5 text-uppercase m-t-15">Creative <span>&amp;</span> Multi-Purpose Theme</h3>
            <p class="lead m-t-5">Geniux is the perfect tool to build beautiful &amp; modern websites, have fun mixing pre-designed content blocks, start to create your new layout with ease.</p>
            <div class="hero-btn m-t-30">
              <a href="#" class="gnx-btn gnx-btn-default 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 class="arrow bounce" href="#intro"></a>
    </div>
  </div>
  <!-- ===========================
  ===/        END HERO         ===
  ============================ -->

</header>
<!-- =========================
===/  END HEADER CONTENT   ===
========================== -->

3) Content Area

The Content Area is the place where we will find all our content blocks:

  • Content Blocks
  • Footer
  • Slide to top button (scroll page to top)

You can customize the existing sections or replace them using the pre-designed sections from the Geniux Blocks shortcodes demo. (Geniux/blocks/index.html)

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

<!-- Section #1 -->
<section>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <!-- Your Content Here -->
      </div>
    </div><!-- /.row -->
  </div><!-- /.container -->
</section>
<!--/ Section #1 -->

<!-- Section #2 -->
<section>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <!-- Your Content Here -->
      </div>
    </div><!-- /.row -->
  </div><!-- /.container -->
</section>
<!--/ Section #2 -->

<!-- Section #3 -->
<section>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <!-- Your Content Here -->
      </div>
    </div><!-- /.row -->
  </div><!-- /.container -->
</section>
<!--/ Section #3 -->

<!-- Footer -->
<footer class="no-padding">
  <div class="row bg-primary text-white p-t-70 p-b-80">
    <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 text-center">
      <i class="icon-genius icon-md m-b-10" aria-hidden="true"></i>
      <h3 class="gnx-heading-light dark-caption m-b-20">Geniux Multipurpose</h3>
      <div class="title-line single-line f-s-30 m-b-20">
        <h2 class="f-s-30 m-b-15">Made with love for creatives !</h2>
      </div>
      <a href="#" class="gnx-btn btn-border-white" role="button">Buy This Theme</a>
    </div>
  </div><!-- /.row -->
</footer>
<!--/ Footer -->


<!-- Slide To Top Button Start -->
<a href="javascript:void(0);" id="to-top"><i class="fa fa-angle-up" aria-hidden="true"></i></a>
<!-- Slide To Top Button End -->

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

3) Javascript - Scripts & Plugins

At the bottom of page, before the <body> end tag we can find the basic javascript scripts files used to make everything work.

  • jquery-2.2.0.min.js (jQuery)
  • bootstrap.min.js (Bootstrap)
  • plugins.js (Plugins Collection)
  • scripts.js (Script Collection)
<!-- =====================================================
===                / END CONTENT AREA                  ===
====================================================== -->

    <!-- JS -->

    <!-- jquery-2.2.0.min js
    ============================================ -->
    <script src="assets/js/vendor/jquery-2.2.0.min.js"></script>

    <!-- bootstrap js
    ============================================ -->
    <script src="assets/js/vendor/bootstrap.min.js"></script>

    <!-- Plugins js
    ============================================ -->
    <script src="assets/js/vendor/plugins.js"></script>

    <!-- Scripts js
    ============================================ -->
    <script src="assets/js/scripts.js"></script>


  </body>
</html>
To enable particular features (Google Maps, Mailchimp, Contact Form, etc.) we will need to add some other javascript script files, this is well specified and will be suggested inside the appropriate shortcode demo page.