Best shop

The Quark template demo content contains few headers - this article contains a code used for creating these headers. All headers was created as the Custom HTML module instances on the header module position. For the pages with headers which contain dark, we recommend to apply the dark-bg page suffix.

Frontpage header

Based on the following code:

<img src="/images/demo/header_bg.jpg" alt="" class="parallax-img" />
<div class="gkPage">
     <h1 data-sr="enter bottom and move 50px">Product Landing Page theme</h1>
     <h2 data-sr="enter bottom and move 50px and wait .2s">Advanced, unique and powerful premium theme</h2>
     <a href="#" class="dark btn-border" data-sr="enter bottom and move 50px and wait .3s">Learn more</a> 
</div>
<span class="mouse-icon"><span><span></span></span></span>

Our team header

Contact page header

Created with the following code:

<img src="/images/demo/contact_bg.jpg" alt="" class="parallax-img" />
<div class="gkPage">
     <h1 data-sr="enter bottom and move 50px">Get in touch with us</h1>
     <h2 data-sr="enter bottom and move 50px and wait .15s">Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolen Javascript.</h2>
     <div class="gk-social-icons-block" data-sr="enter bottom and move 50px and wait .3s">
        <a href="#"><i class="gkicon-fb"></i></a>
        <a href="#"><i class="gkicon-twitter"></i></a>
        <a href="#"><i class="gkicon-gplus"></i></a>
     </div>
</div>
<a class="gk-map-icon"><i class="gkicon-marker"></i> View on Google Maps</a>

Uses the following HTML code:

<img src="/images/demo/about_bg.jpg" alt="" class="parallax-img" />
<div class="gkPage">
     <h1 data-sr="enter bottom and move 50px">We are a digital design agency based in Manhattan, NY</h1>
     <h2 data-sr="enter bottom and move 50px and wait .2s">We help the world's top companies build<br />amazing digital products.</h2>
</div>
<span class="mouse-icon"><span><span></span></span></span>