Menu

How to create a page header?

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">Questo indirizzo email è protetto dagli spambots. È necessario abilitare JavaScript per vederlo.</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>
Last modification: Lun 17 Set 2018

CAMPAGNA FINANZIATA AI SENSI DEL REG. UE N. 1308/2013
CAMPAIGN FINANCED ACCORDING TO EU REGULATION N. 1308/2013

PRIVACY POLICY | COOKIE POLICY
Tenuta Travaglino
Località Travaglino
27045 Calvignano - PV
Tel. +39 0383 872 222
info@travaglino.it

DOWNLOAD AREA

Company profile | Foto | Schede tecniche

    

CAMPAGNA FINANZIATA AI SENSI DEL REG. UE N. 1308/2013
CAMPAIGN FINANCED ACCORDING TO EU REGULATION N. 1308/2013

PRIVACY POLICY | COOKIE POLICY
×