Template Help

Version 1.2

Cross Browser, High Quality and Responsive Multipurpose HTML Template.

Thank you very much for purchasing our template. It is built with the latest HTML5 and CSS3 technologies, but at the same time it is also made compatible with older browser versions.

Getting Started

Requirements

For installing this template you need to make sure that you have the following extensions on your webserver. You will need to contact your webhost if the following requirements are missing.

Installation

Unzip the downloaded files to the local disk on your computer. Inside the extracted folder there will be contents and folder with documentation. Copy all contents, except from folder with documentation, to your server via FTP client.

In this archive will not images, that you can see in demo pages, every images have absolute path from out server except for icons and splash page images.

Preloader

Before the main contents of the website are loaded, there is an opportunity to show the preloader of the site. It can be any image, a gif-animated icon. You can change the path to the image. Look at the preloader.css file:

            5 : .preloader {
             background: url(../images/preloader.gif);
            }
        

If you don’t need the preloader, you can delete div with class preloader in each html files.

            <!-- Preloader -->
            <div class="preloader"></div>
        

Favicon

To change the favicon image of your site, you need to load a new image in a site root or to point out a new address of the image.

            <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
        

Color skins

There have already been created 8 color skins:

The chosen theme changes text elements, buttons, highlight blocks, all color headings, links. All of this skins are situated in the css folder. Choose the most beatiful for you and replace in html file default style.css.

You can change current theme or create your own by analogy, using new skin-file.

Modular grid

Gatwick is built on the system by using a 12-column markup. With the help of the given system you can create almost any modular grid and insert a necessary content into created modules. Grid systems are used for creating page layouts through a series of rows and columns that house your content.

Twitter Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts. All features and opportuntes you can use in this project. If you need create new table or add accordion or use navbar menu, just go to the appropriate section in Bootstraps documentation copy and paste example.

           <div class="row">
             <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
             <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
            </div>
             
            <div class="row">
             <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
             <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
             <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
            </div>
        

Of course, there are many other features you do not look for in twitter bootstrap this project has. A great amount of different sliders, counters, bars, chars, pricing table and so on.

Section Separators

To separate two section add <hr> code. By default, hr has top and bottom 50px margin, but using additional class you can change this values:

            <div class="container"> … </div>
            <hr class="sm-margin no-border"/>
            <div class="container"> … </div>
        

Typography

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

Create lighter, secondary text in any heading with a generic <small> tag.

Highlights

To highlight one of the word with another background color it’s necessary to add mark tag with some classes:

            <p>Lorem Ipsum is simply dummy text of the printing and <mark class="label-default">typesetting</mark> industry. Lorem Ipsum has been the industry's standard dummy <mark class="label-info">text</mark> ever since.</p>
        

Alignments

To adjust the content inside a structural element it’s necessary to add the classes text-left, text-center or text-right. To align by vertical you should use like-table structure with divtable and divcell classes:

            <div class="divtable text-center">
             <div class="divcell">
              <p>Vertical aligned Text with any height</p>
             </div>
            </div>
        

In addition to vertical align children block you have to add class middle.

Dividers

To customize header of any section or add button into it or some other decoration line. For more details look at shortcodes_dividers.html page.

            <div class="page-header col-sm-8 col-sm-offset-2">
             <div class="subheader">
              <div class="icon icon-default painted" data-icon="N"><div>
              <h2>Extended</h2>
              <small>Subtitle</small>
             </div>
            </div>
        

Dropcaps

Sometimes you need to highlight first letter of the text. You can use class first-letter:

            <p><span class="first-letter">A</span> liquam commodo gravida magna eget tincidunt. Fusce  nisi augue, malesuada in commodo quis, euismod quis orci. Integer vitae nisl non augue ullamcorper blandit.</p>
        

Quotes

Under this template quotes may be as a slider and can be text. Slider markup you find in a Slider section. Text quote has blockquote tag and paragraph inside. You may add a footer for identifying the source.

            <blockquote>
                 <p>Gregor becomes annoyed at how his boss never accepts excuses or explanations from any of his employees no matter how hard-working they are, displaying an apparent lack of trusting abilities.</p>
                 <footer>— Sam Robertson</footer>
            </blockquote>
        

Font Settings

To change the font-family you will have to edit the file css/style.css. If the font is a standard one, built the system by default, you can just write it here.

                1861 : body { font-family: 'Helvetica', 'Arial', sans-serif;  } // or whatever you want (e.g. "Helvetica")
            

Also you can use Google Font and connect it to your website.

  1. Go to http://www.google.com/fonts.
  2. Choose the appropriate font.
  3. Click the Quick-use button ().
  4. Choose the styles that you want.
  5. Choose the character sets that you want.
  6. Below that choice standard tab and copy this line.
  7. Paste this line to the all html pages into the head tag.
  8. At last, copy font-family name from Google Fonts website and paste on css/style.css: body { font-family: "Raleway", sans-serif; }.

Lists

A few different types of lists presented in a Gatwick template. Lists may be marked, unmarked, numeric, multilevel, with bagdes, with icons. All of this types may combined. To use clear list without any markers add flat class to ol or ul element. For more details look at shortcodes_lists.html page. To use category list with badges write down next structure:

            <ol class="category-list">
             <li><a href="">General <span class="pull-right">13</span></a></li>
             <li><a href="">Requirements <span class="pull-right">6</span></a></li>
             <li><a href="">Installation <span class="pull-right">3</span></a></li>
            </ol>
        

Tables

There many types of tables Gatwick has. But, in general, text table, without any dependencies of page type you may see on shortcodes_tables.html page. Tag table must have .content-table.table classes and should be wrap div with class table-responsive. Inside table write what you want adding background color styles, or borders, or highlight some words.

            <div class="table-responsive">
             <table class="table content-table">
              <thead>
               <tr>
                <th class="col-md-3">Plans</th>
                <th class="col-md-3">Personal</th>
                <th class="col-md-3 bg-primary">Business</th>
                <th class="col-md-3">Premium</th>
               </tr>
              </thead>
              <tbody>
               <tr>
                <td>Templates</td>
                <td>10 Wordpress Templates</td>
                <td class="bg-primary">25 Wordpress Templates</td>
                <td>Unlimited Templates</td>
               </tr>
               <tr>
                <td>Color</td>
                <td>—</td>
                <td class="bg-primary">50 Color Schemes</td>
                <td>Unlimited Color Schemes</td>
               </tr>
              </tbody>
              <tfoot>
               <tr>
                <td>Pricing</td>
                <td>$ 300</td>
                <td class="bg-primary">$ 1 200</td>
                <td>$ 2 500</td>
               </tr>
              </tfoot>
             </table>
            </div>
        

Page Title

Under the header goes page title section. Inside of it contains main heading H1, in a few pages subheading, breadcrumbs. Also page title can have collapse section. Into features/page-title folder you may look for over 20 unique pages.

Page Title Style

This type combines page titles to alignments and contextuals sense. Let's have a look to page title aligned left and with sub header:

            <!-- HEADCONTENT -->
            <div class="headcontent">
             <div class="container inforow">
              <div class="col-sm-6 middle">
               <h1>Page Title <small>Mellentesque habitant morbi tristique</small></h1>
              </div>
              <div class="col-sm-6 middle text-right">
               <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li class="active">Page Titles</li>
               </ol>
              </div>
             </div>
            </div>
            <!-- /.headcontent -->
        

All page titles has headcontent class and standard container with columns inside.

Page Title Size

  1. Small
  2. Medium
  3. Large

This 3 types defined in this project. Just add one of class: headcontent-xs, headcontent-md or headcontent-lg to .headcontent section to change page title size.

Page Title Color

Light or Dark version can be for page title section. As you can see light version done by default, to change color add class headcontent-dark.

Page Title Background

The background of page title section can be solid color, pattern overlay, background image, background parallax or html5 video background. Let's have a look an example with medium size, aligned left, subheading and solid pattern overlay:

            <!-- HEADCONTENT -->
            <div class="headcontent headcontent-md solid-color pattern">
             <div class="container inforow">
              <div class="col-sm-6 middle">
               <h1>Page Title <small>Mellentesque habitant morbi tristique</small></h1>
              </div>
              <div class="col-sm-6 middle text-right">
               <ol class="breadcrumb">
                …
               </ol>
              </div>
             </div>
            </div>
            <!-- /.headcontent -->
        

Page Title Collapse

Page title section can contain addition collaspe block, which situated under main container. To add toggle button and collapse block, look to the next code:

            <!-- HEADCONTENT -->
            <div class="headcontent">
             <div class="container">
              …
             </div>
             <a data-toggle="collapse" href="#hc-collapse"  class="hc-toggle collapsed"></a>
             <div id="hc-collapse" class="hc-panel panel-collapse collapse">
              <div class="container">
               …
              </div>
             </div>
            </div>
            <!-- /.headcontent -->
        

Blog

Our template contains all needed pages to create fully-worked and oriented for blog pages. Over 30 pages for blog were html-coded and represented for using. Blog list presented in several forms: masonry, fullwidth, with sidebars. Also we considered many types of posts, standard blog.

Inside blog pages markup for articles similar as another pages and, of course, you can use all bootstrap styles too.

Each post has class post and additional contextual class.

Post Sidebar

To add sidebar for post pages with widgets you have to look at the blog/blog_post_gallery_sidebar_right.html page. In example we added a few standard wordpress markup for widgets:

3 types of comments post has: standard wordpress, facebook and disqus. All of this are included and ready to use.

Ecommerce

About 30 pages marked up specifically for the ecommerce catalog. For catalog were created 8 variants:

  1. Grid
    1. No Sidebar
    2. Right Sidebar
    3. Left Sidebar
    4. Hover Sidebar
  2. List
    1. No Sidebar
    2. Right Sidebar
    3. Left Sidebar
    4. Hover Sidebar

All of this pages contain main content with products and filtering sidebar with additional settings and widgets. Also project has 4 variants of product page with more detail fully information about single product with rating, comments, description, tables, gallery and filter. When you choose needed product you should order him. For this purposes were created additional 4 pages:

  1. Cart;
  2. Cart Empty;
  3. Checkout;
  4. Confirmation.

Inside ecommerce pages markup for articles similar as another pages and, of course, you can use all bootstrap styles too.

To login/register were created additional account pages: Login, Register and Lost Password.

Rating

In this project we use a great jQuery plugin - jQuery Raty - it's A Star Rating Plugin. Very simple to use, and here you can see an example:

            <div class="raty" data-score="4" data-readonly="true"></div>

            <div class="raty"></div>
        

We use star icons from wonderfull FontAwesome service, and you can change 3 types of statements in js/custom.js file:

            instance.rating.raty({
             half: true, // to add half stars
             starType: 'i', // tag element for star
             starOff: 'fa fa-star-o', // class for empty-star
             starOn: 'fa fa-star', // class for fill-star
             starHalf: 'fa fa-star-half-o' // class for half-star
            });
        

Product Quantity

For counting items in a cart, change amount for more/less you may use like this structure:

            <a href="" class="minus disabled">-</a>
            <input type="text" value="1">
            <a href="" class="plus">+</a>
        

Portfolio

You can organize your portfolio according to the preset filters. At first, you create works navigation with category:

                <ul class="nav-category">
                 <li><a href="#all" class="filter" data-filter="*">All Works</a></li>
                 <li><a href="#branding" class="filter" data-filter=".branding">Branding</a></li>
                 <li><a href="#logotype" class="filter" data-filter=".logotype">Logotypes</a></li>
                 <li><a href="#graphics" class="filter" data-filter=".graphics">Graphics</a></li>
                </ul>
            

Items of this list have obligatory class filter and data-filter attribute, which helps you divide works on needed category. Under this project can be 2 types of portfolio works:

  1. Isotope Layout;
  2. Grid MixItUp Layout.

The main difference between the two types are in different classes of parent block: isotope-list masonry-wrap and mix-list accordingly. The first type makes the portfolio masonry-view, where single work may have different sizes, the second type makes grid system with the same width columns.

            <div class="row isotope-list masonry-wrap">
             <div class="col-sm-4 col-xs-6 mix branding">
              <img src="…" alt="">
              <a href="" class="mask">
               <h4>
                Drinking Bottle
                <cite>Modeling</cite>
               </h4>
              </a>
             </div>
             <div class="col-sm-8 col-xs-6 mix branding">
              <img src="…" alt="">
              <a href="" class="mask">
               <h4>
                Eco Bag
                <cite>Branding</cite>
               </h4>
              </a>
             </div>
            </div>
            …
        

Each of mix block should has filtering class: branding, modeling and etc. Some words about your work. When you click one of the description, full gallery or new page or modal window will open.

To open gallery in a modal window, you should add array of images to data-gallery attribute for a link and obligatory additional class magnific-gallery:

             <div class="col-sm-4 col-xs-6 mix branding">
              <img src="…" alt="">
              <a href="" data-gallery="image-1.jpg, image-2.jpg, image-3.jpg, image-4.jpg, image-5.jpg"  class="mask magnific-gallery" title="Wooden Chair">
               <h4>…</h4>
              </a>
             </div>
        

Portfolio Video

To open video in a modal, you should add video url (youtube or vimeo) for link and obligatory additional class magnific-video:

             <div class="col-sm-4 col-xs-6 mix branding">
              <img src="…" alt="">
              <a href="https://vimeo.com/45830194" title="Whistle" class="mask magnific-video">
               <h4>…</h4>
              </a>
             </div>
        

Portfolio Modal

Portfolio modal contains one-image slider, heading, project description and datas. To open modal window for single work add data attribute: data-toggle="modal" and into href write modal id. Single project modal window has the next structure:

            <!-- Modal -->
            <div class="modal" id="portfolio-modal-1">
             <a href="" class="mfp-close" data-dismiss="modal"></a>
             <div class="modal-dialog modal-lg">
              <div class="modal-content">
               <div class="container inforow">
                <div class="col-lg-5 col-sm-6 col-lg-offset-1 no-all-padding">
                 <div class="slider oneslider">
                  <ul>
                   <li>
                    <img src="work-1.jpg" alt="">
                   </li>
                   <li>
                    <img src="work-2.jpg" alt="">
                   </li>
                  </ul>
                  <nav class="nav-pages"></nav>
                  <a href="" class="arrow prev"><i></i></a>
                  <a href="" class="arrow next"><i></i></a>
                 </div>
                </div>
                <div class="col-lg-5 col-sm-6 col-lg-offset-1">
                 <h2 class="painted">Project Name</h2>
                 <p>Ea nec enim accumsan, ut prima blandit mel, labores nonumes detraxit an sed..</p>
                 <table class="table data-table">
                  <tbody>
                   <tr>
                    <th>Date:</th>
                    <td>24 December, 2015</td>
                   </tr>
                   <tr>
                    <th>Category:</th>
                    <td>Visualization</td>
                   </tr>
                   <tr>
                    <th>Client:</th>
                    <td><a href="http://www.samplesite.com" target="_blank">www.samplesite.com </a></td>
                   </tr>
                  </tbody>
                 </table>
                </div>
               </div>
              </div>
             </div>
            </div>
            <!-- /.modal -->
        

Single Project

In addition to isotope/grid layout we have done some types of single project pages. All of this pages have different markup and unique design. More details and information you find in portfolio/single-work folder.

  1. Single Carousel;
  2. Single Grid;
  3. Single Masonry;
  4. Single Slider;
  5. Single Video Background.

Sliders

Sliders allow you to save space, animate and decorate your site. Under this theme there can be several sliders with different settings, which not depends on bootstrap settings.

The slider occupies the whole section by adding a special class slider or additional oneslider (for one-image gallery) to the parent block and some additional markup into it. In each of them there can be 12-columns system with various elements. For each slider we use carouFredSel slider. jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction. And it's responsive too.

Each slider has additional parameters, which can use or not. All of this parameters add to ul list as data-attribute:

One-image Gallery

A responsive one-image gallery has a markup:

            <!-- SLIDER -->
            <div class="slider oneslider">
             <ul>
              <li>
               <a href="">
                <img src="…" alt="">
               </a>
              </li>
              <li>
               <a href="">
                <img src="…" alt="">
               </a>
              </li>
             </ul>
             <a href="#" class="arrow prev light"><i></i></a>
             <a href="#" class="arrow next light"><i></i></a>
             <nav class="nav-pages"></nav>
            </div>
            <!-- /.slider -->
        
  1. Add classes slider oneslider into a parent block;
  2. create a familiar section structure;
  3. ul – an marked list with slides;
  4. Sliders li elements can contain align classes;
  5. There is a content with a 12-column markup and a random set of elements in the slider.

Restricting the number of visible items to a minimum and maximum amount. The main difference between this slider and previous - no class oneslider. Amount of visible items in a page depends on modular grid classes col-sm-#.

Carousel of Logotypes

In general we can use slider with logotypes or some another link images. Only one difference for this slider it's adding additional class logotypes to slider block. All images into this slider have opacity: 0.5 and hover effect opacity: 0.1. More information and examples you ca find in shortcodes/shortcodes_client_logos.html page.

Pricing

Theme has page with prices (pages/pricing.html). There we use also unique slider with obligatory class pricing for slider and some custom markup. Let's look on it:

Each slide has attribute data-period where writes period.

            <!-- CONTAINER -->
            <div class="container slider oneslider pricing inforow">
             <ul>
              <li data-period="Monthly">
               <div class="col-md-3 col-sm-6">
                <h3>Simple</h3>
                <div class="num">10<sup>$</sup></div>
                <p class="text-muted">Per month</p>
                <hr/>
                <p class="information">Project Scoping <br/>
                 — <br/>
                 Process Planning <br/>
                </p>
                <a href="" class="btn btn-trial">Free Trial</a>
                <p class="text-muted">30 days trial</p>
               </div>
               …
              </li>
              <li data-period="3 Months">
               …
              </li>
              <li data-period="Yearly">
               …
              </li>
             </ul>
             <nav class="nav-pages"></nav>
            </div>
            <!-- /.container -->
        

Filtering

Using category navigation with slider take an interesting type of slider. Have a look to the pages/team_carousel_full_big.html page. Slider has new class - filter-list. Each person has obligatory class mix and additional contextual, for instance, branding or design. Before slider category navigation is. Changing active item into category persons, with contextual classes will become more transparent an and have new class: inactive. Code:

            <ul class="nav-category">
             <li><a href="#all" class="filter active" data-filter="*">Show All</a></li>
             <li><a href="#leadership" class="filter" data-filter=".leadership">Leadership</a></li>
             <li><a href="#designers" class="filter" data-filter=".designers">Designers</a></li>
            </ul>
        

Slider Navigation

For navigate slider uses slider arrows and slider pagination. Previous button should have class .arrow.prev, next buttons - .arrow.next. Pagination should have class nav-pages. Also arrows can be to color types: light(add class light) and dark(without class).

One-image slider can have vertical pagination and sliding. For slider add class vertical.

Arrows and navigation are not obligatory. If the true definition is set up in the data-auto attribute, it means that slides will switch in a specified period of time without these elements.

Also arrows can have attractive hover effect with next/previous slide title. Each slide (li) should have data-title attribute. Code structure of this arrows is below:

            <a href="" class="arrow prev nav-rounded"><i></i><span></span></a>
		    <a href="" class="arrow next nav-rounded"><i></i><span></span></a>
        

Variations of home pages show us new stunning and unique sliders. Some of them has fix height, some has animated absolute-positioned blocks. The last remark of this section is fullscreen slider. Good example you may see on the features/fullscreen_slider.html page. To block with classes slider oneslider you should add class fullscreen.

After all of this slider examples you can use yourself or something new for each types.

Google Maps

In html file you should write really simple code, with main class google-map:

            <!-- MAP -->
            <div class="google-map">
             <div class="google-map-container google-map-big" data-longitude="-0.1159143" data-latitude="51.513447" data-zoom="11"></div>
             <a href="#google-map-popup" class="a-map" data-toggle="modal"><i class="fa fa-search"></i></a>
            </div>
            <!-- /.google-map -->
        

In html structure you may set all needed settings. Map has single marker. To get the longtitude and latitude you can use the following service. Click a map and replace a marker into the place you need after switching to a link. Then insert the received coordinates into the data-longitude and data-latitude attributes. Next one, data-zoom - the value of the map zoom.

Under the google map container goes link, which open modal map in a fullscreen. The position of this link may be changed to another corner. The modal window code is trivial only wrap and map container with close link into it.

Contact.html file has an example with google map and modal.

Google map, by default, has 100% width and fixed height. This sizes may be changed in css/style.css file. On page may have more than one map, it does not matter how many, copy and paste the same structure, change coordinates and add/remove markers.

Countdown

Coming soon page has countdown. Under construction page has too. To set the date for the countdown edit js/custom.js:

            12: countdownTo: '2015/06/01'
        

To customize countdown view, you have to edit css/style.css. Also do not forget to change code in responsive section. Countdown in general and countdown in the countdown page it's different, and different stylized. Countdown page has additional countdown-page class.

            4102: .countdown {
             margin-bottom: 23px;
            }
             
            4106 : .countdown > div {
             font-size: 38px;
            }
             
            4122 : .countdown i {
             font-style: normal;
             font-size: 30px;
            }
             
            4131 : .countdown ins {
             font-size: 18px;
            }
             
            4163: .countdown-page .countdown ins {
             position: absolute;
             bottom: -30px;
             left: 0;
             font-size: 19px;
             opacity: .5;
            }
        

Countdown may have any markup, and to change it you have to edit js/custom.js file countDown() method.

Sections

Among the typical 12-column blocks allocated special sections that emphasize the expressiveness of the site and make it even more stunning views. For all types of this sections used special block jumbotron. A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site. Inside jumbotron may be any content.

Color & Pattern

The first example shows jumbotron with solid background color, or it may be pattern overlay. Look an example:

            <!-- JUMBOTRON -->
            <div class="jumbotron no-height solid-color">
             <div class="container middle text-center">
              <div class="col-sm-8 col-sm-offset-2">
               <blockquote>
                <h3>“ Game snake applies to the general game design original was not named snake ”</h3>
               </blockquote>
               <h5>Sam Newton <small>Creative Systems, Founder</small></h5>
              </div>
             </div>
            </div>
            <!-- /.jumbotron -->
        

Image & Parallax

The second example shows jumbotron with image background, which can have parallax scroll effect:

            <!-- JUMBOTRON -->
            <div class="jumbotron overlay bg-sl-section-parallax" data-stellar-background-ratio="0.5">
             <div class="container middle inforow">
              <div class="col-sm-6">
               <div class="icon ico-default painted" data-icon="i"></div>
               <h4>About Us</h4>
               <p>Ea nec enim accumsan, ut prima blandit mel, labores nonumes detraxit an sed. Omnis malis propriae an sed, eu mea erat utinam meliore.</p>
              </div>
              <div class="col-sm-6">
               <div class="icon ico-default painted" data-icon="b"></div>
               <h4>Our Targets</h4>
               <p>Ea nec enim accumsan, ut prima blandit mel, labores nonumes detraxit an sed. Omnis malis propriae an sed, eu mea erat utinam meliore, inciderint philosophia usune.</p>
              </div>
             </div>
            </div>
            <!-- /.jumbotron -->
        

To add parallax effect you should add obligatory data attribute data-stellar-background-ratio and amount from 0 to 1 and also additional class with background image which starts like bg-sl-. This class should have background image in css file or using inline style for writing into html file.

HTML5 Video

Third type - jumbotron with video background. Video can be loop, muted, autoplay, has overlay and poster. To cover all the browsers you need to add the two types of video.

            <!-- JUMBOTRON -->
            <div class="jumbotron no-height overlay">
             <video autoplay muted loop class="html-video" poster="marguerite.jpg">
               <source src="marguerite.webm" type="video/webm">
               <source src="marguerite.mp4" type="video/mp4">
             </video>
             <div class="container middle text-center">
               <div class="col-sm-8 col-sm-offset-2">
                 <h1>Welcome to <mark>Gatwick</mark></h1>
               </div>
             </div>
            </div>
            <!-- /.jumbotron -->
        

Overlay class has transparent background color. To change this color or opacity, edit css/style.css file or add some predefined class:

            5677: .overlay:before {
             opacity: .5;
             background-color: #1F1F1F;
            }
        

Google Map

The last type - jumbotron with google map background.

            <!-- JUMBOTRON -->
            <div class="jumbotron overlay">
             <div class="google-map">
              <div class="google-map-container" data-longitude="-0.1159143" data-latitude="51.513447" data-zoom="11"></div>
             </div>
             <div class="container middle text-center">
              <div class="col-sm-8 col-sm-offset-2">
               <h1>Welcome to <mark>Gatwick</mark></h1>
               <a href="#google-map-popup" class="a-map" data-toggle="modal"><i class="fa fa-search"></i></a>
              </div>
             </div>
            </div>
            <!-- /.jumbotron -->
        

All information about Google Map and Modal Map look for in a Google Map section.

Shortcodes

Over a dozen reusable components built to provide dropdowns, boxes, dividers, accordions, charts, alerts, tabs and more.

Accordions

Extend the default collapse behavior to create an accordion with the panel component. More details and examples look at the bootstrap page.

            <div class="panel-group">
                 <div class="panel">
              <div class="panel-heading">
               <a data-toggle="collapse" href="#clps-21">
                <i class="fa fa-minus fa-fw"></i>
                Accountabilities
               </a>
              </div>
              <div id="clps-21" class="panel-collapse collapse in">
               <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetuer leo, vel purus, nonummy dolor auctor quam.</p>
               </div>
              </div>
             </div>
            </div>
        

Many examples were shown in shortcodes_accordions.html page: with borders, with background, simple accordion, with icon (toggle).

Alerts

Alert it's a div block with class alert + additional contextual class: alert-info, alert-warning, alert-info, alert-dark, alert-light, alert -default or alert-success. Inside alerts may be different code without limitations. The simplest example it's cautionary text with icon:

            <div class="alert alert-warning fade in">
             <button class="close" data-dismiss="alert" type="button"><img src="close-w-sm.png" alt=""></button>
             <i class="fa fa-warning"></i> This is a standard warning alert!
            </div>
        

Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through :before and content. The most complicated example, with icons and the custom separator is shown below:

           <ol class="breadcrumb breadcrumb-arrow">
             <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
             <li><a href="#"><i class="fa fa-file-image-o"></i> Pages</a></li>
             <li><a href="#"><i class="fa fa-bar-chart"></i> Elements</a></li>
             <li class="active">Active Item</li>
           </ol>
        

Pagination

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative. All examples you may see in the shortcodes_pagination.html page. The main and the most usable view code:

            <!-- PAGINATION -->
            <div class="container pagination-bar text-center">
             <ul class="pagination">
              <li><a href="#" class="prev"></a></li>
              <li class="active"><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">…</a></li>
              <li><a href="#">36</a></li>
              <li><a href="#" class="next"></a></li>
             </ul>
            </div>
            <!-- /.pagination-bar -->
        

As you can see, for pagination bar should be class pagination for marked list ul. First (previous) item has class prev, last - next. If add class no-border - navigation arrows will be without borders.

To use navigation arrows and main pagination separately you have to add pagination-extend class to parent container bar.

Buttons

There are many types of button this project has. Small, normal, big buttons; link, primary, default, warning, icon buttons, wide, thin. All of this types are customized. For icon used fontawesome service. More details you may find in shortcodes_buttons.html page. The simplest example:

            <a href="" class="btn btn-success"><i class="fa fa-thumbs-up"></i> Success</a>
            <a href="" class="btn btn-primary btn-lg">Large</a>
        

Icons

We you use excellent Fontawesome service. Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Over 500 new icons.

In addition, we have unique a great amount of image-text icons. This icons uses in a whole project. Full list of this icons you may see on a shortcodes_icons_gatwick.html. To use it clear and very simple. It should added data-icon attribute with symbol inside and some additional classes icon:

            <div class="icon icon-default" data-icon="t"></div>
            <div class="icon icon-sm" data-icon="5"></div>
            <div class="icon icon-lg" data-icon="v"></div>
            <div class="icon" data-icon="A"></div>
        

Of course, this icons may be customized in css. By default, were created 3 size-classes:

  1. .icon-default - 60px size;
  2. .icon-sm - 45px size;
  3. .icon-lg - 80px size.
            767: .icon {
              color: #B3B3B3;
              margin-bottom: 30px;
              font-size: 55px;
            }

            775: .icon.icon-default {
              font-size: 60px;
              height: 60px;
            }

            780: .icon.icon-sm {
              font-size: 45px;
              height: 50px;
            }

            785: .icon.icon-lg {
              font-size: 80px;
              height: 85px;
            }
        

Charts & Counters

In the role of charts are the counters. Counters allow you to see the process of increasing any meaning to the required one when the counter area is in the visible browser screen. There can be several counters. To add a counter to the site create the div block with the class countup, after add obligatory attributes to it. If you add additional class progress-up the increasing border line will appear.

            <div class="countup" data-increment="70" data-num="3640"></div>
            — — —
            <div class="countup progress-up" data-increment="1" data-num="76" data-sign="%"></div>
        

Pies Charts

Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. These charts are highly customizable, very easy to implement, scale to the resolution of the display of the client to provide sharp charts even on retina displays, and use requestAnimationFrame for smooth animations on modern devices. May be 2 variants:

  1. Pie Chart Icons;
  2. Pie Chart Text.
            <div class="col-md-3 col-sm-6">
             <div class="chart no-percent" data-percent="98">
              <div class="percent">
               <div class="icon icon-default" data-icon="m"></div>
              </div>
             </div>
             <h4>Photoshop</h4>
            </div>
            <div class="col-md-3 col-sm-6">
             <div class="chart" data-percent="68">
              <div class="percent"></div>
             </div>
             <h4>Java Script</h4>
            </div>
        

The first block has icon instead of text (adding class no-percent), the second - percentage text. It does not matter how many charts you use into one page, all are them will work. data-percent attribute sets percents.

Process Steps

Another beautiful simple shortcode shows us step by step action in interactive view. The shortcodes_process_steps.html page a few different examples. The code for one of them (colored) is shown below:

            <div class="container steps">
             <div class="col-sm-4">
              <span class="icon" data-icon="a"></span>
              <h3>Design</h3>
             </div>
             <div class="col-sm-4">
              <span class="icon" data-icon="u"></span>
              <h3>Develop</h3>
             </div>
             <div class="col-sm-4">
              <span class="icon" data-icon="g"></span>
              <h3>Deploy</h3>
             </div>
            </div>
        

Promo Box

Three types of promo boxes Gatwick has. All of this has different background color but the same code structure. Add obligatory class promo and additional one of them: promo-default, promo-dark, promo-color.

            <div class="promo promo-default text-center">
             <h3>Gatwick multipurpose template</h3>
             <a href="" class="btn btn-primary">Purchase</a>
            </div>
             
            <div class="promo promo-dark text-center">
             <h3>Gatwick multipurpose template</h3>
             <a href="" class="btn btn-default">Purchase</a>
            </div>
             
            <div class="promo promo-color text-center">
             <h3>Gatwick multipurpose template</h3>
             <a href="" class="btn btn-primary">Purchase</a>
            </div>
        

Tabs

Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. Of course, we use general Bootstrap markup for this purpose. Tho main types of example you find in shortcodes_tabs.html page. You can activate a tab navigation without writing any JavaScript by simply specifying data-toggle="tab" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.

To make tabs fade in, add .fade to each .tab-pane. The first tab pane must also have .in to properly fade in initial content. Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.

            <ul class="nav nav-tabs text-center">
             <li class="active"><a href="#details" data-toggle="tab">Details</a></li>
             <li><a href="#reviews" data-toggle="tab">Reviews</a></li>
            </ul>
            <section class="tab-content inforow">
             <article class="tab-pane fade in active" id="details">
              …
             </article>
             <article class="tab-pane fade" id="reviews">
              …
             </article>
            </section>
        

Timeline

If you need to show historical events by chronology you have to add timeline class to parent block and creates events by adding new blocks with class row. Inside it write any code, which you need. For more details look at the shortcodes_timeline.html. Have a look an example:

            <div class="container timeline inforow appear-wrap">
             <div class="row">
              <div class="col-sm-10 col-sm-offset-1 text-center">
               <h2>Company Establishment</h2>
               <div class="date">
                <div class="year year-start">1963</div>
                <small>September, 03</small>
               </div>
               <p>Ea nec enim accumsan, ut prima blandit mel, labores nonumes detraxit an sed. Omnis malis propriae an sed, eu mea erat utinam meliore, inciderint philosophia usu ne. Laudem labores eu sed, vix in omnis habemus omnesque. Enim accumsan, ut prima blandit mel, labores nonumes detraxit an sed.</p>
              </div>
             </div>
             
             <div class="row">
              <div class="col-sm-5"></div>
              <div class="col-sm-2 no-all-padding">
               <div class="date">
                <div class="year">1976</div>
                <small>December, 28</small>
               </div>
              </div>
              <div class="col-sm-5">
               <h4>News Begins Publication</h4>
               <p>Ea nec enim accumsan, ut prima blandit mel, labores nonumes detraxit an sed. Omnis malis propriae an sed, eu mea erat utinam meliore, inciderint philosophia usu ne.</p>
              </div>
             </div>
            </div>
        

Appear Block

Using tiny jQuery Plugin jQuery.appear it adds more show/hide smooth animation to your webpage. This plugin can be used to prevent unnecessary processeing for content that is hidden or is outside of the browser viewport. It implements a custom appear/disappear events which are fired when an element became visible/invisible in the browser viewport.

Only that you should do, it's add class appear-wrap to parent block and all blocks with class col-* (* - any type of column) will appear when visible in the browser viewport. Previous example with timeline has it. If block appeared, appeared class will be added.

Instagram Feed

To add instagram feed widget to your website used great small plugin InstaFeed. Instafeed.js is a dead-simple way to add Instagram photos to your website. In HTML file write only 1 line:

            <div id="instafeed"></div>
        

Another actions and settings you should set in js/custom.js in the instagramm method:

            var userFeed = new Instafeed({
             get: 'user',
             userId: instance.options.instagrammId,
             limit: 6,
             accessToken: '339241463.5d9f31c.49c117cfe2e54c3a98e2a26be5050401',
             template: ''
            });
        

Flickr Feed

To add flickr photos widget to your website used tiny jQuery plugin jflickrfeed. This plugin works by pulling a JSON feed from Flickr and applying the data it gets back to a template. The plugin gets the feed from Flickr using AJAX and applies each image it gets back to the provided template. In HTML file write only 1 line:

            <div id="flickrfeed"></div>
        

Another settings you should set in js/custom.js in the flickr method:

            instance.flickrfeed.jflickrfeed({
             limit: 6,
             qstrings: {
              id: instance.options.flickrId
             },
             itemTemplate: '{{title}}'
            });
        

In order to make it really easy to use any kind of markup needed with this plugin, a simple templating system has been build in. Here is an example of a template:

            <a href="{{image_b}}"><img src="{{image_s}}" alt="{{title}}" /></a>
        

You can see that this is just basic html with a few special tags mixed in. All of the tags are surrouned by double curly braces. The plugin works by putting in the correct information for each tag and each item into the template. The tags that are available depend on what flickr returns for each item. For the Public Photos API these are: title, link, date_taken, description, published, author, author_id, tags, and image. For the image property, the plugin uses the Flickr URL scheme to make several sizes available. You can read about this at http://www.flickr.com/services/api/misc.urls.html. The image tags available are: image_s, image_t, image_m, image, image_b.

Media

Gatwick has there are many pages with responsive video embed, audio elements, html5 video background.

Audio

For audio player we use powerfull MediaElement plugin. HTML5 audio players in pure HTML and CSS.

            <audio src="http://demo.aisconverse.com/AirReview-Landmarks-02-ChasingCorporate.mp3" controls="controls"></audio>
        

Embed Video

For posts with video we use responsive embeded from Twitter Bootstrap Framework. Rules are directly applied to iframe elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

            <!-- 16:9 aspect ratio -->
            <div class="embed-responsive embed-responsive-16by9">
             <iframe class="embed-responsive-item" src=""></iframe>
            </div>

            <!-- 4:3 aspect ratio -->
            <div class="embed-responsive embed-responsive-4by3">
             <iframe class=embed-responsive-item" src=""></iframe>
            </div>
        

HTML5 Video

To add html5 video you should have 2 types of video: .webm and .mp4. Also it good idea you if have video-poster for this video. Video may be loop, autoplaying, muted/unmuted. Tag video must have html-video class. The general structure, with fix height and some additional markup see below:

            <!-- JUMBOTRON -->
            <div class="jumbotron">
             <video autoplay muted loop class="html-video" poster="marguerite.jpg">
              <source src="video/marguerite.webm" type="video/webm">
              <source src="video/marguerite.mp4" type="video/mp4">
             </video>
             <div class="container middle text-center">
              <div class="col-sm-8 col-sm-offset-2">
               <h1>Welcome to <mark>Gatwick</mark></h1>
               <p>Ea nec enim accumsan, ut prima blandit mel, labores nonumes detraxit an sed. Omnis malis propriae an sed, eu mea erat utinam meliore, inciderint philosophia usu ne.</p>
              </div>
             </div>
            </div>
            <!-- /.jumbotron -->
        

Also 404 error page and under construction page in one of the variants have fullscreen html5 video background. But structure for tag video the same.

Animation

Each block may have animate effect when this block is in the visible browser screen. It adds interactivity and mobility project. For animation uses CSS3 transitions and brilliant tablesheet from Animate.css comunity. Animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

            <div class="animate" data-animate="fadeInLeft">
                …
            </div>
        

Add the class animate to the element you want to animate and obligatory data-animate attribute with the name of css effect. You may also want to include the class infinite for an infinite loop. In this project many sliders on home pages have animate effects. List the names of effects:

Background Parallax

Stellar.js is a jQuery plugin that provides parallax scrolling effects to any scrolling element. Using stellar it's really trivial to add parallax effect. If you want an element's background image to reposition on scroll, simply add the following attribute: data-stellar-background-ratio and amount from 0 to 1. In css or using inline style add background image to div.

            <div class="bg-sl-fscreen-1" data-stellar-background-ratio=".5">
                 <p>Wrap Content</p>
            </div>
        

Background Parallax do not support mobile devices. Instead of you'll centering static background image.

Forms

There are many different types of forms Gatwick has. Each of them stylized, have suitable types, helper classes and placeholder text.

Feedback

Feedback forms may contain the following blocks:

All the areas must be in the form tag. The tag must have obligatory attributes:

Each area in the form must contain unique forms id, the name attribute and a not obligatory placeholder attribute, also required attributes, which need to validate form for sending. Id and name attributes must remain the same as shown above for the proper work and its further processing. The placeholder is a text which is shown to the user before inputting the main text in the area.

The sending button can be stylized by the code in the style sheet or by adding/changing the existing class. The text on the button is set up with the help of the value attribute.

If form areas are filled in the right way, after pressing the button there will appear a message with class succs-msg.

If areas are filled in the incorrect way or aren’t filled required fields, the class has-error is added to the parent block that hasn’t been validated. The invalid area style can be changed.

            4323 : .has-error input[type=text],
              .has-error input[type=email],
              .has-error input[type=number],
              .has-error input[type=url],
              .has-error input[type=password],
              .has-error input[type=search],
              .has-error textarea {
              border-color: #DF6D69;
              color: #D9534F;
            }
        

In the php/email.php file you can change the address of message receiving, a message topic, also the whole text that will deliver to the administrator of the site.

  • define('EMAIL_ADMIN_SENT_TO', 'admin@gmail.com'); - an e-mail address to which a letter will be sent for the administrator template;
  • define('EMAIL_ADMIN_SUBJECT', 'Feedback letter from contacts form on Gatwick'); - the topic of a letter for the administrator template;
  • define('EMAIL_CLIENT_SUBJECT', 'Feedback letter from Gatwick'); - the topic of a letter for the sender;
  • $letterToAdmin = … - the template of a letter for the administrator;
  • $letterToClient = … - the template of a letter for the sender;
  • an e-mail on behalf of whom a letter is sent to the sender: $headers .= "From: feedback@Gatwick.local\r\n";. \r\n obligatory to save at the end of the line.

Contact Forms may be wrapped in one fieldset (div block with class form-wrap or without any wrapping, just classing form, where form controls goes one by one.

MailChimp Subscription Form

You need to change the Mailchimp's List URL in your html file for the Newsletter form. Check this link How can I add my signup form on my website and try to insert correct URL from code in Step 5.

            <form action="http://aisconverse.us8.list-manage.com/subscribe/post?u=86ec31fd6b7533ccaa2435111&id=a1293dd461" method="post">
             <input type="email" required="" placeholder="Enter your email address" name="EMAIL">
             <button class="btn btn-default" type="submit">Subscribe</button>
            </form>
        

To change the succcess or error text, you will have to edit js/custom.js:

            16 : successText: 'Thanks. You have successfully subscribed. Please check email to confirm.',
            17 : errorText: 'Please, enter a valid email'
        

Scrolltop Button

To scroll the template up, to its beginning, there is a special button that appears by scrolling the page down. Its code is:

            
            <a href="#" class="scrolltop"><i></i></a>
        

To change its style you need to edit the css/style.css file.

            1672 : .scrolltop {
             width: 60px;
             height: 60px;
             background-color: rgba(128,128,128,.1);
             border-radius: 3px;
             bottom: 60px;
             left: 60px;
            }
             
            1216 : .scrolltop i {
             background: url("") 0 100% no-repeat;
             width: 22px;
             height: 12px;
             opacity: .3;
            }
             
            .scrolltop:hover {
             background-color: #E6940E;
            }
        

Also, to change offset position, when this button show, you have to edt js/custom.js file scrollTopButtonOffset global variable:

           13 : scrollTopButtonOffset: 500
        

Error Pages

For special pages, like 404 or under construction, used a few another markup. At first, you should add class error404 for body tag. To under construction variant also add uconstruction class. This pages do not contain header and footer like in another pages. Under this theme is a simplified version of the 404 page with heading, paragraph, icon, home button and copyrights. By analogy of this pages you may create suitable and needed for your purposes pages.

As pages 404 and under construction can be of three variants:

  1. Blank Page - without any background (white color);
  2. Image Background;
  3. Video Background.