Header #17

<!-- ===================
===   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 BLUE   ===
    ========================== -->
    <div class="top-bar blue-bar hidden-sm hidden-xs">
      <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:example@email.com"><i class="fa fa-envelope-o"></i> info@yourcompany.com</a>
              </li>
              <li><i class="fa fa-phone"></i> +12 345 678 900
              </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 BLUE    ===
    =========================== -->


    <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--4"></div>
    <!-- Start hero caption -->
    <div class="hero-caption">
      <div class="container">
        <div class="row">
          <div class="col-md-12 text-center m-t-40">
            <h1 class="text-uppercase gnx-shadow m-b-10">Geniux<br><span>Music Store</span></h1>
            <hr class="hr-small hr-color m-b-20">
            <h5 class="f-s-16 text-uppercase hidden-sm hidden-xs">Download Now <span>Geniux App</span></h5>
            <div class="m-t-25">
              <a href="#" class="btn btn-app btn-app-dark" role="button">
                <div class="f-s-9 m-b-0 text-left">
                  <div class="col-md-3 col-xs-3 p-r-0 f-s-20">
                    <i class="fa fa-apple" aria-hidden="true"></i>
                  </div>
                  <div class="col-md-9 col-xs-9 p-l-10 button-text">Avaiable on the<br><span>App Store</span>
                  </div>
                </div>
              </a>
              <a href="#" class="btn btn-app btn-app-white" role="button">
                <div class="f-s-9 m-b-0 text-left">
                  <div class="col-md-3 col-xs-3 p-r-0 f-s-20">
                    <i class="fa fa-android" aria-hidden="true"></i>
                  </div>
                  <div class="col-md-9 col-xs-9 p-l-10 button-text">Download it for<br><span>Android</span>
                  </div>
                </div>
              </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   ===
=================== -->