Frontpage elements
- Category: Template articles
- Hits: 1958
- Print , Email
Portfolio
The portfolio section is generated by the News Show Pro GK5 module using the Portfoli II portal mode.
The module uses few additional suffixes for display:
title-right - places the title on the right side and over the module
overlay-2x2 - adds opacity for the last 2 items in 2 rows.
There are also few additional suffixes for adding opacity to News Show Pro GK5 items:
overlay-1x1, overlay-1x2 and overlay-2x1
Awards
The awards section uses the following code:
<div class="gkColumnLeft"> <h3 class="header" data-scroll-reveal="enter left and move 50px over 0.6s">Didn't<br />you <i class="gk-icon-prize"></i><br />know?!</h3> <p data-scroll-reveal="enter left and move 50px over 0.6s after 0.3s">I'm award winning desiger. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> </div> <div class="gkColumnRight"> <figure data-scroll-reveal="enter from the bottom and move 50px over 0.3s after 0.2s"><img src="/images/demo/award_1.png" alt="Prize" /><figcaption><h4>HTML Inspiration</h4><p>Featured Site + #1 Best of the best</p></figcaption></figure> <figure data-scroll-reveal="enter from the bottom and move 50px over 0.3s after 0.4s"><img src="/images/demo/award_2.png" alt="Prize" /><figcaption><h4>French Design Index</h4><p>Featured Site + #1 Best of the best</p></figcaption></figure> <figure data-scroll-reveal="enter from the bottom and move 50px over 0.3s after 0.6s"><img src="/images/demo/award_3.png" alt="Prize" /><figcaption><h4>Awwwards</h4><p>Featured Site + #1 Best of the best</p></figcaption></figure> <figure data-scroll-reveal="enter from the bottom and move 50px over 0.3s after 0.8s"><img src="/images/demo/award_4.png" alt="Prize" /><figcaption><h4>The FWA</h4><p>Featured Site + #1 Best of the best</p></figcaption></figure> </div>
Content is separated into two columns using gkColumnLeft and gkColumnRight CSS classes.
Clients
The clients list uses the following code:
<ul class="gkClients"> <li class="double" data-scroll-reveal="enter from the top and move 50px over 0.3s"><h3 class="header">I do<i class="gk-icon-heart"></i> my<br />clients</h3></li> <li data-scroll-reveal="enter from the bottom and move 50px over 0.3s after 0.2s"><a href="#"><img src="/images/demo/client_1.png" alt="Client" /></a></li> <li data-scroll-reveal="enter from the bottom and move 50px over 0.3s after 0.3s"><a href="#"><img src="/images/demo/client_2.png" alt="Client" /></a></li> <li data-scroll-reveal="enter from the bottom and move 50px over 0.3s after 0.4s"><a href="#"><img src="/images/demo/client_3.png" alt="Client" /></a></li> <li data-scroll-reveal="enter from the bottom and move 50px over 0.3s after 0.5s"><a href="#"><img src="/images/demo/client_4.png" alt="Client" /></a></li> <li data-scroll-reveal="enter from the bottom and move 50px over 0.3s after 0.6s"><a href="#"><img src="/images/demo/client_5.png" alt="Client" /></a></li> <li data-scroll-reveal="enter from the bottom and move 50px over 0.3s after 0.7s"><a href="#"><img src="/images/demo/client_6.png" alt="Client" /></a></li> <li data-scroll-reveal="enter from the bottom and move 50px over 0.3s after 0.8s"><a href="#"><img src="/images/demo/client_7.png" alt="Client" /></a></li> <li data-scroll-reveal="enter from the bottom and move 50px over 0.3s after 0.9s"><a href="#"><img src="/images/demo/client_8.png" alt="Client" /></a></li> <li data-scroll-reveal="enter from the bottom and move 50px over 0.3s after 1s"><a href="#"><img src="/images/demo/client_9.png" alt="Client" /></a></li> <li data-scroll-reveal="enter from the bottom and move 50px over 0.3s after 1.1s"><a href="#"><img src="/images/demo/client_10.png" alt="Client" /></a></li> </ul>
The title is places as an item of the list with the double CSS class - it makes this element two times wider than other.
Blog
The blog showcase uses the big-nav CSS suffix. We recommend to display only articles (not links section) with this suffix.
Team
The team section uses the following code:
<div class="gkTeam" data-cols="4" data-pages="1"> <div> <div class="active"> <figure data-scroll-reveal="enter from the top and move 50px over 0.4s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="/images/demo/team_1.jpg" alt="Team member" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.1s"><h3>John Hammond</h3><small>CEO, Creative Director</small></figcaption></figure> <figure data-scroll-reveal="enter from the top and move 50px over 0.4s after 0.2s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="/images/demo/team_2.jpg" alt="Team member" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.3s"><h3>Dennis Hawkings</h3><small>Lead Developer</small></figcaption></figure> <figure data-scroll-reveal="enter from the top and move 50px over 0.4s after 0.4s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="/images/demo/team_3.jpg" alt="Team member" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.5s"><h3>Tom Weerd</h3><small>General manager</small></figcaption></figure> <figure data-scroll-reveal="enter from the top and move 50px over 0.4s after 0.6s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="/images/demo/team_4.jpg" alt="Team member" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.7s"><h3>John Doe</h3><small>Webmaster</small></figcaption></figure> </div> </div> </div>
Every team member has attributes like data-fb which are used to specify the social media links displayed in the overlay.
Attributes data-cols and data-pages in the main wrapper are used to add optional navigation for more team members.
Contact form
The contact form section uses the following code:
<div data-src="images/demo/map.jpg" class="gkMap"></div>
{ GKCONTACT}
The element with gkMap class is used for the map image preloading
The { GKCONTACT} code is used in our GK Contact plugin.
Menu features
The John S template contains few new important features connected with the menu.
It is possible to create a right-side buttons - it needs just addind of a button class in the menu item settings.
In typical one page websites usually there is a different menu for the frontpage and for subpages. In this template it is possible to specify the different menu for the frontpage and subpages in the template settigs under the Menu tabs.
Main menu can display active section during scrolling.
This feature needs IDs for the main blocks of the website - these IDs can be defined under the menu tab in the template settings:
Suffixes for pages
The frontpage suffix adds different layout for the page - the modules are wider and additionally page can have custom background specified in the template basic settings.
Some pages like category blog, featured articles list are displayed without white backround - it is connected with the no-bg CSS class which is added to the main container in these views.