Header #12

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

  <!-- =======================
  ===   START NAVIGATION   ===
  ======================== -->
  <nav class="navbar navbar-default navbar-fixed white bootsnav affix">

    <!-- Top Bar Style Options
    =========================================================
    Classes :
    top-bar                  =   white (default)
    top-bar dark-bar         =   dark background
    top-bar blue-bar         =   blue background
    =========================
    -->

    <!-- =========================
    ===   START TOP BAR WHITE   ===
    ========================== -->
    <div class="top-bar hidden-sm">
      <div class="container">
        <div class="row">
          <div class="col-md-7">
            <!-- Start Contact Info -->
            <ul class="contact-details">
              <li><i class="fa fa-map-marker"></i> Liverpool St. 3, London, UK
              </li>
              <li><a href="mailto:mail@example.com"><i class="fa fa-envelope-o"></i> mail@example.com</a>
              </li>
              <li><i class="fa fa-phone"></i> +1 234 567 890
              </li>
            </ul>
            <!--/ End Contact Info -->
          </div>
          <!--/ .col-md-6 -->
          <div class="col-md-5">
            <!-- Start Social Links -->
            <ul class="social-icons">
              <li>
                <a href="#" class="facebook" title="Facebook" ><i class="fa fa-facebook" aria-hidden="true"></i></a>
              </li>
              <li>
                <a href="#" class="twitter" title="Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
              </li>
              <li>
                <a href="#" class="google" title="Google Plus"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
              </li>
              <li>
                <a href="#" class="dribbble" title="Dribbble"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
              </li>
              <li>
                <a href="#" class="linkedin" title="Linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
              </li>
              <li>
                <a href="#" class="instagram" title="Instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a>
              </li>
            </ul>
            <!-- End Social Links -->
          </div> <!-- .col-md-6 -->
        </div> <!--/ .row -->
      </div> <!--/ .container -->
    </div> <!--/ .top-bar -->
    <!-- ===========================
    ===/    END TOP BAR WHITE    ===
    ============================ -->


    <div class="container">

      <!-- Start Header Navigation -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
          <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 id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right" data-in="fadeIn" data-out="fadeOut">
          <!-- Active Page -->
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Company</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Gallery</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div>
  </nav>
  <!-- ======================
  ===/   END NAVIGATION   ===
  ======================= -->

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

  <div class="hero jarallax">
    <img class="jarallax-img" src="assets/images/demo-img/hero-bg.jpg" alt="Image">
    <!-- Overlay -->
    <div class="overlay dark--8"></div>
    <!-- Start hero caption -->
    <div class="hero-caption">
      <div class="container">
        <div class="row">
          <div class="col-md-12 caption-left">
            <h1 class="text-uppercase">Welcome to<br><span>Geniux</span></h1>
            <hr class="hr-small hr-left hr-color xs-center">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 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">Start The Tour</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" data-scroll href="#intro"></a>
    </div>
  </div>

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

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