Template Help

Version 1.0

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(http://media.aisconverse.com/images/other/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">
        

Modular grid

Mexico 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 35px margin, but using additional class you can change this values:

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

Other combinations using additional classes you can find on the page shortcode-dividers.html.

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="mark-warning">typesetting</mark> industry. Lorem Ipsum has been the industry's standard dummy <mark class="mark-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 or top align children block you have to add class divmiddle or divtop respectively.

Dividers

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

            <div class="col-sm-4">
              <div class="title-divider divider-stroke">
                <h3>Extended</h3>
              <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>
        

For styling the first letter, you can use the class first-letter along with the other classes:

Quotes

For quoting blocks of content from another source within your document. Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p> tag.

            <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>
        

Also, besides the standard quotes you can create stylized quotes adding to tag <blockquote> one of the following classes:

Add .blockquote-reverse class for a blockquote with right-aligned content.

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.
  9. Paste on css/style.css: body { font-family: "Open Sans", sans-serif; }.

But if you need to connect to the site any font from the list below, then you can just run 1-8 items from the list above, and subsequently used for the respective classes of fonts.

Lists

A few different types of lists presented in a Mexico template. Lists may be marked, unmarked, numeric, multilevel, with dividers, 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 shortcode-lists.html page. For example to use category list with dividers write down next structure:

            <ul class="list-divider">
             <li>Graphic design</li>
             <li>User experience design</li>
             <li>Authoring</li>
            </ul>
        

Also in the Mexico template, you can create lists the description. To create a horizontal list, add the tag <dl> .dl-horizontal class.

            <dl class="dl-horizontal">
             <dt>Description lists</dt>
             <dd>User experience design</dd>
             <dd>Authoring</dd>
            </dl>
        

Horizontal description lists will truncate terms that are too long to fit in the left column with text-overflow. In narrower viewports, they will change to the default stacked layout.

Contextual colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Stickers

Stickers are used to highlight important information, which can be positioned anywhere relative to the parent block.

            <span class="sticker">50%</span>
        

For styling stickers can use helper classes. To do this, simply add any class, and the following list:

Tables

There many types of tables Mexico has. But, in general, text table, without any dependencies of page type you may see on shortcode-tables.html page. Tag table must have .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">
              <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 titles folder you may look for over 27 unique pages.

Basic title

This type includes different types and combinations of header and other internal elements. Let's try to create the most simple title.

			
			<header class="pagetitle pagetitle-sm">
			  <div class="container">
			    <div class="divtable irow">
			      <div class="divcell text-center">
			        <h1>Widgets</h1>
			      </div>
			    </div>
			  </div>
			</header>
			
		

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

Let's complicate the task and create a little more difficult the title. On the left we have a page title and the right to create an icon.

			
			<header class="pagetitle pagetitle-sm">
			  <div class="container">
			    <div class="divtable irow">
			      <div class="divcell">
			        <h1>Widgets</h1>
			      </div>
			      <div class="divcell text-right">
			        <i class="fa fa-film"></i>
			      </div>
			    </div>
			  </div>
			</header>
			
		

Incidentally, the arrangement of the elements can be monitored by standard bootstrap .pull-left and .pull-right classes.

Note that instead of icons we could put any other element - such as bread crumbs.

			
			<header class="pagetitle pagetitle-sm">
			  <div class="container">
			    <div class="divtable irow">
			      <div class="divcell">
			        <h1>Widgets</h1>
			      </div>
			      <div class="divcell text-right">
			        <ol class="breadcrumb">
			          <li><a href="#">Home</a></li>
			          <li class="active">Pages</li>
			        </ol>
			      </div>
			    </div>
			  </div>
			</header>
			
		

Now let's add to the resulting markup slogan the right of the title and the icon on the left.

			
			<header class="pagetitle pagetitle-sm">
			  <div class="container">
			    <div class="divtable irow">
			      <div class="divcell">
			        <i class="fa fa-film"></i>
			        <h1>Widgets</h1>
			        <div class="divider"></div>
			        <span class="subtitle">What we do</span>
			      </div>
			      <div class="divcell text-right">
			        <ol class="breadcrumb">
			          <li><a href="#">Home</a></li>
			          <li class="active">Pages</li>
			        </ol>
			      </div>
			    </div>
			  </div>
			</header>
			
		

Also, a slogan we could accommodate such a title. And then the result would be the following code:

			
			<header class="pagetitle pagetitle-sm">
			  <div class="container">
			    <div class="divtable irow">
			      <div class="divcell">
			        <i class="fa fa-film"></i>
			        <h1>Widgets <small>What we do</small></h1>
			      </div>
			      <div class="divcell text-right">
			        <ol class="breadcrumb">
			          <li><a href="#">Home</a></li>
			          <li class="active">Pages</li>
			        </ol>
			      </div>
			    </div>
			  </div>
			</header>
			
		

Let us now instead of breadcrumbs put a simple page navigation.

			
			<header class="pagetitle pagetitle-sm">
			  <div class="container">
			    <div class="divtable irow">
			      <div class="divcell">
			        <i class="fa fa-film"></i>
			        <h1>Widgets <small>What we do</small></h1>
			      </div>
			      <div class="divcell text-right">
			        <nav class="pagenav">
			          <a href="" class="fa fa-angle-left"></a>
			          <a href="" class="fa fa-bars"></li>
			          <a href="" class="fa fa-angle-right"></li>
			        </nav>
			      </div>
			    </div>
			  </div>
			</header>
			
		

Also in the page title, you can change the background with the class .pagetitle-inverse .pagetitle-dark and add more drop blocks.

			
			<header class="pagetitle pagetitle-collapse pagetitle-inverse pagetitle-dark">
			  <div class="container">
			    <div class="divtable irow">
			      <div class="divcell">
			        <i class="fa fa-film"></i>
			        <h1>Widgets <small>What we do</small></h1>
			      </div>
			      <div class="divcell text-right">
			        <nav class="pagenav">
			          <a href="" class="fa fa-angle-left"></a>
			          <a href="" class="fa fa-bars"></li>
			          <a href="" class="fa fa-angle-right"></li>
			        </nav>
			      </div>
			    </div>
			  </div>

			  <a data-toggle="collapse" href="#pagetitle-collapse" class="pagetitle-toggle collapsed"></a>

			  <div id="pagetitle-collapse" class="pagetitle-panel panel-collapse collapse">
			    <div class="container">
			      <div class="row irow-xs">
			        <div class="col-sm-5 col-sm-offset-1">
			          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			        </div>
			        <div class="col-sm-5">
			          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			        </div>
			      </div>
			    </div>
			  </div>
			</header>
			
		

Also, in the template of Mexico paged headers and elements can be extended by using drop-down lists. Full implementation is presented on the page title-2-level.html.

Page title background

The background of page title section can be solid color, pattern overlay, background image, background parallax, border bottom, transparent or html5 video background. The style and type of display any page header can be set with additional classes. Let's create an example page title with a solid pattern:

			
			<header class="pagetitle pagetitle-sm pattern">
			  <div class="container">
			    <div class="divtable irow">
			      <div class="divcell">
			        <h1>Widgets</h1>
			      </div>
			      <div class="divcell text-right">
			        <i class="fa fa-film"></i>
			      </div>
			    </div>
			  </div>
			</header>
			
		

Page title size

  1. Small
  2. Medium
  3. Large
  4. Extra large

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

Blog

Our template contains all needed pages to create fully-worked and oriented for blog pages. Over 35 pages for blog were html-coded and represented for using. Blog list presented in several forms: masonry, fullwidth, timeline, with/without and fixed sidebars. Also we considered many types of posts, standard blog. All the examples of the pages of the blog you can find in the folder 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-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 28 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. Fix sidebar
  2. List
    1. No sidebar
    2. Right sidebar
    3. Left sidebar
    4. Fix 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. These pages can have different styles, and be with the side static/fixed column on the left/right or no. When you choose needed product you should order him. For this purposes were created additional 4 pages:

  1. Shopping cart;
  2. Shopping 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 and modals: 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="rating-wrap">
              <div class="raty" data-score="4" data-readonly="true"></div>
              <a href="" class="raty-count">5 reviews</a>
              <a href="" class="btn btn-default btn-xs">Add</a>
            </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,
              starType: 'i',
              readOnly: function () {
                return $(this).data('readonly');
              },
              score: function () {
                return $(this).data('score');
              },
              starOff: 'fa fa-star star-off',
              starOn: 'fa fa-star',
              starHalf: 'fa fa-star-half-o'
                });
        

Product Quantity

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

            <div class="product-quantity inline">
              <a href="" class="minus disabled" data-min="1">-</a>
              <input value="1" type="text" name="quantity" size="4" title="Qty">
              <a href="" class="plus"  data-max="">+</a>
            </div>
        

Account Pages

The template Mexico implemented page displaying personal account of a registered user.

  1. My account;
  2. Order list;
  3. Edit billing address;
  4. Edit shipping address.

Inside account pages markup for table, forms as another pages and, of course, you can use all bootstrap styles too.

Product pages

Product pages can be of different types and have different styles. The template is implemented 4 main types of product page.

  1. Product page w/o sidebar;
  2. Product page left sidebar;
  3. Product page right sidebar;
  4. Product page fix sidebar.

Also, each product page can have different options for interaction with the product.

The sidebar on the product page, implemented a different number of fast widgets. Most of these widgets inherit from the classes of widgets of blog pages, but there are some new widgets.

  1. Price;
  2. Top rated;
  3. We accept;
  4. About shop.

I would like to stop and described in detail the widget price. For this we use the wonderful widget plugin - Slider UI. Let's look at an example of html markup of the widget with the plugin Slider UI.

            <div class="price_slider_wrapper">
              <div class="price_slider_amount">
                <div class="price_label">
                  <span class="from">$10</span>
                    —
                  <span class="to">$590</span>
                </div>
              </div>
              <div class="price_slider"></div>
              <div class="price_slider_legend">
                <span class="from">$0</span>
                <span class="to">$1000</span>
              </div>
              <button type="submit" class="btn btn-primary">Filter</button>
            </div>
        

JS code would look like this:

            var slider = $('.price_slider'),
              label = $('.price_label'),
              from = label.find('.from'),
              to = label.find('.to');

            slider.slider({
              range: true,
              min: 0,
              max: 1000,
              values: [10, 590],
              slide: function( event, ui ) {
                from.html('$' + ui.values[0]);
                to.html('$' + ui.values[1]);
              }
            });
            from.val('$' + slider.slider( 'values', 0));
            to.val('$' + slider.slider( 'values', 1));
        

All ecommerce pages you can find in the folder shop.

Portfolio

In the template Mexico has implemented more than 89 pages with various display options portfolio. Their all you can see in the folder portfolio. You can organize your portfolio according to the preset filters. At first, you create works navigation with category:

            <div class="row irow-xs">
              <div class="col-md-9 col-sm-8">
                <ul class="mix-category">
                  <li class="active"><a href="#all" class="filter active" data-filter="*">Show All</a></li>
                  <li><a href="#logos" class="filter" data-filter=".logos">Logos</a></li>
                  <li><a href="#graphics" class="filter" data-filter=".graphics">Graphics</a></li>
                  <li><a href="#illustrations" class="filter" data-filter=".illustrations">Illustrations</a></li>
                </ul>
              </div>
              <div class="col-md-3 col-sm-4 text-right form-solid">
                <select>
                  <option value="original-order">Original Order</option>
                  <option value="name">Sort by name</option>
                  <option value="date">Sort by date</option>
                  <option value="category">Sort by category</option>
                  <option value="random">Sort by random</option>
                </select>
              </div>
            </div>
        

Note that you can sort of work not only for the categories listed, but with the drop-down menu.

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.

Let's create a simple grid with the elements.

            ...
            <div class="row isotope-wrap portfolio-wrap magnific-wrap text-center">
              <div class="col-md-3 col-sm-4 col-xs-6 mix logos" data-name="" data-date="" data-category="">
                <figure class="figure">
                <img src="" alt="">
                <div class="mask mask-dark">
                  <nav>
                    <a class="icon icon-inverse icon-size-1 icon-theme icon-rounded magnific" href="" title="">
                      <i class="fa fa-search"></i>
                    </a>
                    <a class="icon icon-inverse icon-size-1 icon-theme icon-rounded" href="">
                      <i class="fa fa-link"></i>
                    </a>
                  </nav>
                  </div>
                </figure>
                <div class="work-info">
                  <h6><a href="">Mug black and white</a></h6>
                  <div class="category">Logos</div>
                </div>
              </div>
              <div class="col-md-3 col-sm-4 col-xs-6 mix illustrations" data-name="" data-date="" data-category="">
                <figure class="figure">
                <img src="" alt="">
                <div class="mask mask-dark">
                  <nav>
                    <a class="icon icon-inverse icon-size-1 icon-theme icon-rounded magnific" href="" title="">
                      <i class="fa fa-search"></i>
                    </a>
                    <a class="icon icon-inverse icon-size-1 icon-theme icon-rounded" href="">
                      <i class="fa fa-link"></i>
                    </a>
                  </nav>
                </div>
                </figure>
                <div class="work-info">
                  <h6><a href="">Branding cards design</a></h6>
                  <div class="category">Illustrations</div>
                <div>
              </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.

Inside the items can be placed not only images, but also the slider.

Portfolio gallery

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="mask mask-dark">
              <nav>
                <a href="" data-gallery="image1.jpg, image2.jpg, image3.jpg" class="icon icon-inverse icon-size-2 icon-theme icon-rounded magnific-gallery" title="Milk Bottle Design">
                  <i class="fa fa-search"></i>
                </a>
                <a class="icon icon-inverse icon-size-2 icon-theme icon-rounded" href="">
                  <i class="fa fa-link"></i>
                </a>
              </nav>
            </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="mask mask-dark">
                <nav>
                  <div class="work-info">
                    <h5><a href="">Branding style</a></h5>
                    <div class="category">Illustrations, Logos</div>
                  </div>
                  <a class="icon icon-inverse icon-size-2 icon-theme icon-rounded magnific-video" href="https://vimeo.com/45830194" title="Branding style">
                    <i class="fa fa-eye"></i>
                  </a>
                  <a class="icon icon-inverse icon-size-2 icon-theme icon-rounded">
                    <i class="fa fa-link"></i>
                  </a>
                </nav>
            </div>
        

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 folder.

  1. Single Medium;
  2. Single Large;
  3. Single Medium Fullwidth;
  4. Single Large Fullwidth;
  5. Single Carousel
    1. Single Carousel Medium
    2. Single Carousel Medium Fullwidth
    3. Single Carousel Large
    4. Single Carousel Large Fullwidth
  6. Single Slider
    1. Single Fullwidth

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 template Mexico sliders are implemented using a plugin - Slider Revolution.

Slider Revolution is an All-Purpose Slide Displaying Solution that allows for showing almost any kind of content. This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects. All customization can be handled via jQuery Options, HTML 5 data-attributes and CSS!

Slider Revolution requires jQuery 1.9.1 or higher. Detailed documentation about this plugin is here.

Let's try to create a simple html markup for the slider.

            <div class="bannercontainer container">
              <div class="banner" data-auto="true" data-hidetimerbar="off">
                <ul>
                  <li data-transition="fade" data-slotamount="7" data-saveperformance="on" class="background overlay overlay-light" style="background-image: url(image1.jpg);">
                    <div class="tp-caption sft large_bold_white"  data-x="center" data-y="center" data-voffset="-85" data-speed="700" data-start="700" data-easing="easeOutBack">Title 1</div>
                    <p class="tp-caption fade text-center" data-x="center" data-y="center" data-speed="500" data-start="900" data-easing="easeOutBack">Text 1>
                      <br/> eiusmod tempor incididunt ut labore et dolore magna aliqua. <br/> Utondo enim ad minim veniam quis nostrud exercitation ullamco.</p>
                    <a href="" class="tp-caption sfb btn btn-primary btn-lg btn-wide" data-x="center" data-y="center" data-voffset="80" data-hoffset="-10" data-speed="300" data-start="1000">Read More</a>
                  </li>
                  <li data-transition="fade" data-slotamount="7" data-saveperformance="on" class="background overlay overlay-light" style="background-image: url(image2.jpg);">
                    <div class="tp-caption sft large_bold_white"  data-x="left" data-y="center" data-hoffset="100" data-voffset="-85" data-speed="700" data-start="700" data-easing="easeOutBack">Title 2</div>
                    <p class="tp-caption fade" data-x="left" data-y="center" data-hoffset="100" data-speed="500" data-start="900" data-easing="easeOutBack">Text 2>
                      <br/> eiusmod tempor incididunt ut labore et dolore magna aliqua. <br/> Utondo enim ad minim veniam quis nostrud exercitation ullamco.</p>
                    <a href="" class="tp-caption sfb btn btn-primary btn-lg btn-wide" data-x="left" data-y="center" data-voffset="80" data-hoffset="100" data-speed="300" data-start="1000">Read More</a>
                  </li>
                  <li data-transition="fade" data-slotamount="7" data-saveperformance="on" class="background overlay overlay-light" style="background-image: url(image3.jpg);">
                    <div class="tp-caption sft large_bold_white"  data-x="left" data-y="center" data-hoffset="500" data-voffset="-85" data-speed="700" data-start="700" data-easing="easeOutBack">Title 3</div>
                    <p class="tp-caption fade" data-x="left" data-y="center" data-hoffset="500" data-speed="500" data-start="900" data-easing="easeOutBack">Text 3>
                      <br/> eiusmod tempor incididunt ut labore et dolore magna aliqua. <br/> Utondo enim ad minim veniam quis nostrud exercitation ullamco.</p>
                    <a href="" class="tp-caption sfb btn btn-primary btn-lg btn-wide" data-x="left" data-y="center" data-voffset="80"  data-hoffset="500" data-speed="300" data-start="1000">Read More</a>
                  </li>
                </ul>
              </div>
            </div>
        

More js markup can be found in the file custom.js. All examples of sliders you can look in the folder sliders.

One image gallery

With plugin Slider Revolution implemented many different galleries.

  1. Fullwidth background;
  2. Fullscreen background;
  3. Boxed background;
  4. Fullwidth arrows;
  5. Fullscreen arrows;
  6. Boxed arrows;
  7. Fullwidth various;
  8. Fullscreen various;
  9. Boxed various;
  10. Vertical.

The carousel occupies the whole section by adding a special class slider 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 carousel. 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:


            <div class="container-fluid slider cards">
              <div class="container">
                <div class="row text-center">
                  <ul data-max-items="4">
                    <li class="col-md-3 col-xs-6 card card-image">
                      <figure class="figure">
                        <a href="">
                          <img src="image1.jpg" alt="">
                        </a>
                        <div class="mask mask-dark">
                          <nav>
                            <a class="icon icon-inverse icon-size-2 icon-theme icon-rounded" href="">
                              <i class="fa fa-link"></i>
                            </a>
                          </nav>
                        </div>
                      </figure>
                      <div class="figure-info">
                        <h4><a href="">Robert Hunter</a></h4>
                        <div class="heading-divider"></div>
                        <div class="status">Founder</div>
                      </div>
                    </li>
                    <li class="col-md-3 col-xs-6 card card-image">
                      <figure class="figure">
                        <a href="">
                          <img src="image2.jpg" alt="">
                        </a>
                        <div class="mask mask-dark">
                          <nav class="share-links share-links-sm">
                            <a href="" class="fa fa-facebook"></a>
                            <a href="" class="fa fa-twitter"></a>
                            <a href="" class="fa fa-envelope"></a>
                          </nav>
                        </div>
                      </figure>
                      <div class="figure-info">
                        <h4><a href="">Sandra Jacobson</a></h4>
                        <div class="heading-divider"></div>
                        <div class="status">Designer</div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

        

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.25 and hover effect opacity: 1. More information and examples you ca find in elements-carousels-client-logos.html page.

You can also find these sections implemented using conventional static grid on the page elements-client-logos.html.

Carousel navigation

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

Other styles of arrows you can find on the page elements-carousels-arrows.html.

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.

            ...
            <a href="" class="slider-arrow arrow-md arrow-light slider-arrow-prev"></a>
            <a href="" class="slider-arrow arrow-md arrow-light slider-arrow-next"></a>
            ...
            <nav class="slider-pagination"></nav>
        

Google Maps

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

            <!-- MAP -->
            <div class="google-map map-wrap">
              <div class="google-map-container" data-markers="51.51,-0.11; 51.53,-0.13;  51.49,-0.18" data-center="51.513447,-0.1159143" data-zoom="12"></div>
              <a href="#map-modal" class="a-map" data-toggle="modal">
                <i class="fa fa-arrows-alt"></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-center attributes. Next one, data-zoom - the value of the map zoom.

Google map can also have different styles and sizes.

Let's look at an example of creating a small google map.

            
				
  

For any Google map can be set to display a unique style attribute data-style.

Sections

Among the typical 12-column blocks allocated special sections that emphasize the expressiveness of the site and make it even more stunning views.

Service Cards

The template can implement a variety of beautiful service cards with different effects when you hover over them. Let's look at an example of creating a simple service card.

            <div class="container">
              <div class="row irow-sm text-center cards cards-inside">
                <div class="col-md-3 col-sm-6">
                  <a href="" class="card-flip">
                    <div class="flipper">
                      <div class="front card card-light card-lightest card-border-solid">
                        <div class="icon icon-color icon-size-4">
                          <i class="fa fa-hdd-o"></i>
                        </div>
                        <h4>Development</h4>
                        <p>Text.</p>
                        <div class="heading-divider"></div>
                      </div>
                      <div class="back card card-dark">
                        <div class="icon icon-color icon-size-4">
                          <i class="fa fa-hdd-o"></i>
                        </div>
                        <h4>Full Stack</h4>
                        <p>Text.</p>
                        <div class="heading-divider"></div>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
            </div>
        

All other kinds of services cards can be found on the page elements-service-cards.html.

You can also find this section realized via a carousel on the page elements-carousels-service-cards.html.

Process Steps

For a beautiful display of the process or the implementation of steps necessary to use the block process steps.

            <div class="row irow-xs text-center steps-1">
              <div class="col-sm-4">
                <div class="icon icon-step icon-inverse icon-size-3 icon-theme icon-rounded"><i>1.</i></div>
                <h4>Planing</h4>
                <div class="heading-divider"></div>
                <p>Duis aute irure dolor in reprehe nderit voluptate velit esse cillum.</p>
              </div>
              <div class="col-sm-4">
                <div class="icon icon-step icon-inverse icon-size-3 icon-theme icon-rounded"><i>2.</i></div>
                <h4>Development</h4>
                <div class="heading-divider"></div>
                <p>Duis aute irure dolor in reprehe nderit voluptate velit esse cillum.</p>
              </div>
              <div class="col-sm-4">
                <div class="icon icon-step icon-inverse icon-size-3 icon-theme icon-rounded"><i>3.</i></div>
                <h4>Launch</h4>
                <div class="heading-divider"></div>
                <p>Duis aute irure dolor in reprehe nderit voluptate velit esse cillum.</p>
              </div>
            </div>
        

All examples of the process steps can be found on the page elements-process-steps.html.

You can also find this section realized via a carousel on the page elements-carousels-process-steps.html.

Promo Boxes

More than 20 different types of promo boxes are included in the Mexico template.

            <!-- PROMO-BOX -->
            <div class="promo-box promo-box-simple promo-box-light">
              <h4>Mexico - Responsive Multipurpose Template</h4>
              <a href="" class="btn btn-primary">Purchase</a>
            </div>
            <!-- /.promo-box -->
        

Also, in some promo boxes have collected all the ready-made social icons of different styles and sizes.

            <!-- PROMO-BOX -->
            <div class="promo-box promo-box-dark promo-box-simple inverse overlay background promo-box-lg" style="background-image: url(bg-image.jpg);">
              <nav class="share-links">
                <h4>Follow Us</h4>
                <a href="" class="fa fa-facebook"></a>
                <a href="" class="fa fa-twitter"></a>
                <a href="" class="fa fa-linkedin"></a>
                <a href="" class="fa fa-google-plus"></a>
              </nav>
            </div>
            <!-- /.promo-box -->
        

The remaining examples of promo boxes are implemented on the page elements-promo-boxes.html.

Testimonials

In Mexico there are special template beautiful blocks to output testimonials. Let's look at one example of such a block.

            <!-- CONTAINER -->
            <div class="container">
              <div class="row irow-xs quotes quotes-grid divtable">
                <div class="col-sm-4 divcell">
                  <q>Text 1.</q>
                  <div class="quote-author">
                    <strong>Sara Jacobson</strong>
                    <small>Cars Systems</small>
                  </div>
                </div>
                <div class="col-sm-4 divcell">
                  <q>Text 2.</q>
                  <div class="quote-author">
                    <strong>Sam Robertson</strong>
                    <small>Mexico Crew</small>
                  </div>
                </div>
                <div class="col-sm-4 divcell">
                  <q>Text 3.</q>
                  <div class="quote-author">
                    <strong>Robert Kowalsky</strong>
                    <small>Hotels Team</small>
                  </div>
                </div>
              </div>
            </div>
            <!-- /.container -->
        

Other examples can be found on page elements-testimonials.html.

You can also find this section realized via a carousel on the page elements-carousels-testimonials.html.

Pricing

Theme has page with prices (elements-pricing.html). Let's look on it:

            <div class="row irow-sm text-center pricing pricing-nobg">
              <div class="col-md-3 col-xs-6">
                <div class="pricing-box">
                  <h2>Simple</h2>
                  <div class="num"><sup>$</sup>0</div>
                  <div class="num-per">/month</div>
                  <hr class="hr-dots"/>
                  <ul>
                    <li>Project Scoping</li>
                  </ul>
                  <a href="" class="btn btn-inverse btn-lg">Order Now</a>
                </div>
              </div>
              <div class="col-md-3 col-xs-6">
                <div class="most">Most Popular</div>
                <div class="pricing-box pricing-highlight">
                  <h2>Personal</h2>
                  <div class="num"><sup>$</sup>25</div>
                  <div class="num-per">/month</div>
                  <hr class="hr-dots"/>
                  <ul>
                    <li>Graphic design</li>
                  </ul>
                  <a href="" class="btn btn-primary btn-lg">Order Now</a>
                </div>
              </div>
              <div class="col-md-3 col-xs-6">
                <div class="pricing-box">
                  <h2>Business</h2>
                  <div class="num"><sup>$</sup>75</div>
                  <div class="num-per">/month</div>
                  <hr class="hr-dots"/>
                  <ul>
                    <li>Filmmaking</li>
                  </ul>
                  <a href="" class="btn btn-inverse btn-lg">Order Now</a>
                </div>
              </div>
              <div class="col-md-3 col-xs-6">
                <div class="pricing-box">
                  <h2>Premium</h2>
                  <div class="num"><sup>$</sup>240</div>
                  <div class="num-per">/month</div>
                  <hr class="hr-dots"/>
                  <ul>
                    <li>Unlimited Templates</li>
                  </ul>
                  <a href="" class="btn btn-inverse btn-lg">Order Now</a>
                </div>
              </div>
            </div>
        

Team

For a stylized image of a team or employees are 5 special multi-function units (elements-team-1.html - elements-team-5.html).

  1. Standard display team;
  2. All graphic elements are rounded;
  3. All graphic elements in the boxes;
  4. Large graphic elements;
  5. All graphic elements in the boxes with border.

You can also find this section realized via a carousel on the page elements-carousels-team-1.html.

Also, items can be displayed in Grid MixItUp Layout.

About me

To display information about me use the section of the page elements-about-me.html. All sections are similar in structure and are based on the styling and styles described in the documentation styles and standard bootstrap.

Animation for the elements given by the library Animate.css and special attribute - data-animate.

            ...
            <div class="col-sm-5 img-wrap img-wrap-left">
              <img src="image1.jpg" alt="" data-animate="fadeInLeft">
            </div>
            ...
        

Also, you may notice that the text inside the tag <cite> is displayed in a different font - "Satisfy", cursive.

Blog Previews

To display the blog, you can use a special preview of the blog section of the page elements-blog-previews.html.

            <!-- CONTAINER -->
            <div class="container">
              <div class="row irow-sm cards">
                <div class="col-md-3 col-sm-6 card card-image">
                  <figure class="figure">
                    <a href="">
                      <img src="image1.jpg" alt="">
                    </a>
                    <div class="mask mask-dark">
                      <nav>
                        <a class="icon icon-inverse icon-size-2 icon-theme icon-rounded" href="">
                          <i class="fa fa-search"></i>
                        </a>
                      </nav>
                    </div>
                  </figure>
                  <div class="figure-info">
                    <h4><a href="">Text post about web design</a></h4>
                    <div class="meta">
                      <small>October 09, 2015</small>
                      <a href="">
                        <i class="fa fa-comment-o"></i>
                        23
                      </a>
                    </div>
                    <div class="heading-divider"></div>
                    <p>Debitis nam, sed id quidam sanctus. Vel ipsum inani te, volu ptua invidunt probatus qucu. Exart hinc esse munere mei, vix eu eius augue diceret, ponderum mandam us efficiendi an eos.</p>
                  </div>
                </div>
              </div>
            </div>
            <!-- /.container -->
        

You can also find this section realized via a carousel on the page elements-carousels-blog-previews.html.

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 elements-timeline.html. Have a look an example:

            <!-- CONTAINER -->
            <div class="container timeline">
              <div class="row irow-xs onerow" data-animate="fadeInUp">
                <div class="col-md-8 col-sm-10 col-md-offset-2 col-sm-offset-1 text-center">
                  <div class="icon icon-inverse icon-size-3 icon-theme icon-rounded">
                    <i class="fa fa-calendar"></i>
                  </div>
                  <h1>Company Establishment</h1>
                  <div class="date">20 September, 1989</div>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip retex tempor incididunea commodo consequat.</p>
                  <div class="heading-divider"></div>
                  <div class="circle"></div>
                </div>
              </div>

              <div class="row irow-xs" data-animate="fadeInUp">
                <div class="col-sm-5 hidden-xs"></div>
                <div class="col-sm-2 no-padding">
                  <div class="date">20 September, 1989</div>
                </div>
                <div class="col-sm-5">
                  <img src="image1.jpg" alt="">
                  <h4>Clients testimonials</h4>
                  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
              </div>
            </div>
            <!-- /.container -->
        

Text with icons and images

In the template of Mexico are a lot of different options for displaying sections of text with icons or images. Different combinations of text and images can be found on pages elements-text-images-1.html - elements-text-images-6.html. A combination of text and icons on pages elements-text-icons-1.html - elements-text-icons-8.html.

By the way, all these sections are also implemented using carousel in the pages elements-carousels-text-icons-1.html - elements-carousels-text-icons-4.html and elements-carousels-text-images-1.html - elements-carousels-text-images-4.html.

Shortcodes

Over a dozen reusable components built to provide buttons, paginations, accordions, charts, alerts, tabs and more. Examples of shortcodes are located in the shortcodes folder.

Columns

On the shortcode-columns.html page is an example of the standard bootstrap grid using standard bootstrap classes. Also shown are the blocks lining the text using the classes: .text-left, .text-center, .text-right.

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 shortcode-icons.html. To use it clear and very simple. Just add the name of the class you desired icon in the appropriate tag:

            <i class="fa fa-hdd-o"></i>
        

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

  1. .icon-size-1 - 18px size;
  2. .icon-size-2 - 22px size;
  3. .icon-size-3 - 30px size;
  4. .icon-size-4 - 40px size;
  5. .icon-size-5 - 50px size;
  6. .icon-size-6 - 60px size;
  7. .icon-size-7 - 80px size;
  8. .icon-size-8 - 100px size.

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 shortcode-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.

            <!-- Tabs -->
            <div class="tabs tabs-border">
              <!-- Nav tabs -->
              <ul class="nav nav-tabs">
                <li class="active"><a href="#services-1" data-toggle="tab">Services</a></li>
                <li><a href="#targets-1" data-toggle="tab">Targets</a></li>
                <li><a href="#history-1" data-toggle="tab">History</a></li>
              </ul>

              <!-- Tab panes -->
              <div class="tab-content">
                <div class="tab-pane fade in active" id="services-1">
                  <p>Ultrices commodo mi felis scelerisque nulla bibendum, augue aliquam, eget vulputate congue. Elit varius, justo ad tincidunt lorem sit, convallis adipiscing, elit vitae vivamus congue elit aliquet, et scelerisque luctus.</p>
                </div>
                <div class="tab-pane fade" id="targets-1">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid architectom consequatur dolor eligendi ipsa, maxime natus reiciendis repellat sequi tempore ullam velit.</p>
                </div>
                <div class="tab-pane fade" id="history-1">
                  <p>Asperiores aspernatur aut commodi consequatur eaque eius eum excepturi impedit ipsa ipsum magni minus necessitatibus nisi placeat, repudiandae sequi vel velit voluptates.</p>
                </div>
              </div>
            </div>
            <!-- /.tabs -->
        

Accordions & Toggles

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" id="accordion-1">
              <div class="panel">
                <div class="panel-heading">
                  <a data-toggle="collapse"  data-parent="#accordion-1" href="#collapse-1-1">Responsive ready</a>
                </div>
                <div id="collapse-1-1" 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 class="panel">
                <div class="panel-heading">
                  <a data-toggle="collapse"  data-parent="#accordion-1" href="#collapse-1-2" class="collapsed">Infographics</a>
                </div>
                <div id="collapse-1-2" class="panel-collapse collapse">
                  <div class="panel-body">
                    <p>Ultrices commodo mi felis scelerisque nulla bibendum, au  aliquamar eget vulputate congue.</p>
                  </div>
                </div>
              </div>
              <div class="panel">
                <div class="panel-heading">
                  <a data-toggle="collapse"  data-parent="#accordion-1" href="#collapse-1-3" class="collapsed">Mailchimp integration</a>
                </div>
                <div id="collapse-1-3" class="panel-collapse collapse">
                  <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 shortcode-accordions.html page: with borders, with background, simple accordion, with icon (toggle).

Buttons

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

            <a href="" class="btn btn-primary btn-xl">Extra Large</a>
        

Tooltips

Many different tooltips implemented on the page shortcode-tooltips.html. All of them are implemented by marking the bootstrap.

            <div class="text-right">
              <div class="icon icon-inverse icon-size-2 icon-theme icon-rounded">
                <i class="fa fa-align-left"></i>
              </div>
              <div class="popover left" style="top: -30px; left: auto; right: 100px;">
                <div class="arrow"></div>
                <h3 class="popover-title">Left tooltip</h3>
                <div class="popover-content">
                  <p>Duis aute irure dolor reprehe nderit voluptate velit esse lum dolore eufugiat nulla.</p>
                </div>
              </div>
            </div>
        

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages. More examples can be found on the page shortcode-alerts.html. More details and examples look at the bootstrap page.

            <div class="alert alert-success alert-dismissible fade in">
              <button type="button" class="close" data-dismiss="alert">
                <i class="fa fa-times"></i>
              </button>
              <p><i class="fa fa-thumbs-o-up"></i> <strong>Well done!</strong> You successfully read this important alert message.</p>
            </div>
        

Paginations

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 shortcode-paginations.html page. The main and the most usable view code:

            <!-- PAGINATION -->
			<ul class="pagination no-border">
              <li><a href="#" class="prev"><i class="fa fa-angle-left"></i></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"><i class="fa fa-angle-right"></i></a></li>
            </ul>
            <!-- /.pagination -->
        

As you can see, for pagination bar should be class pagination for marked list ul. First (previous) item has class prev, last - next.

Modals

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. In Mexico, modals use standard bootstrap classes to display.

            <!-- Modal Small -->
            <div class="modal fade" id="small-modal">
              <div class="modal-dialog modal-sm">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><i class="fa fa-times"></i></button>
                    <h6 class="modal-title">Small modal window</h6>
                  </div>
                  <div class="modal-body text-center">
                    <div class="modal-body-inside">
                      ...
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- /.modal -->
        

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.

The template Mexico jQuery.appear to apply only in the animated blocks. Let's look at a detailed code:

            279 : instance.animateBlock.on('appear', function () {
              var t = $(this),
                fx = t.data('animate');
              t.parent().css('position', 'relative');
              t.addClass('animated ' + fx);
            }).appear();
        

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:

            1025 : instagramm: function () {
              var instance = this;

              if (instance.instafeed.length){
                  var linkTemplate = "{{link}}",
                    imgTemplate = "{{image}}",
                    userFeed = new Instafeed({
                    get: 'user',
                    userId: instance.options.instagrammId,
                    limit: 6,
                    accessToken: '339241463.5d9f31c.49c117cfe2e54c3a98e2a26be5050401',
                    template: '<a href='+ linkTemplate +' target="_blank"><img alt="" src='+ imgTemplate +' /></a>'
                  });
                  userFeed.run();
              }
        }
        

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:

            1041 : flickr: function () {
              var instance = this;

              if (instance.flickrfeed.length){
                var imgBTemplate = "{{image_b}}",
                  imgSTemplate = "{{image_s}}";

                instance.flickrfeed.jflickrfeed({
                  limit: 6,
                  qstrings: {
                    id: instance.options.flickrId
                  },
                  itemTemplate: '<a href='+ imgBTemplate +' target="_blank"><img alt="{{title}}" src='+ imgSTemplate +' /></a>'
                });
              }
        }
        

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.

Horizontal 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. More examples can be found on the page elements-horizontal-charts.html and elements-counters.html

            <div class="countup countup-md countup-default" data-increment="28.1" data-num="560.8" data-fractional="1"></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: More examples can be found on the page elements-pie-charts.html.

  1. Pie Chart Icons;
  2. Pie Chart Text.
            <div class="pie-chart pie-chart-sm" data-track-color="#EDEDED" data-bar-color="#DA3636" data-percent="95">
              <div class="pie-percent"></div>
            </div>
        

Vertical charts

To create a vertical chart, we use a special plugin jqBarGraph. To create a vertical chart on the page just create a <div> block and apply the class .vertical-chart. You can also use additional attributes to adjust the vertical chart.

More examples can be found on the page elements-vertical-charts.html.

            <div class="vertical-chart vertical-chart-border" data-value="52" data-colors="#FFF" data-postfix="%"></div>
        

Media

Mexico 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="song.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:

	         <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>Mexico</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>
        

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.

Animations

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.

            <img src="image.jpg" alt="" class="animate-toggle" data-animate="flash">
        

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. All examples of animation are on the page shortcode-animations.html. In this project many sliders on home pages have animate effects. List the names of effects:

Background Parallax

To add parallax effect to the block just add a special date attribute data-type="parallax". To specify the speed of the effect using the attribute data-speed="0.1".

            <div data-speed="0.5" data-type="parallax">
                  ...
            </div>
        
            1009 : parallaxBG: function () {
              var instance = this;

              instance.parallax.each(function(){
                var self = $(this),
                  yPos = -($win.scrollTop() * self.data('speed')),
                  coords = '50% '+ yPos + 'px';

                if ($win.width() >= 768) {
                  self.css({backgroundPosition: coords});
                } else {
                  self.css({backgroundPosition: '50% 50%'});
                }
              });

        }
        

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

Forms

There are many different types of forms Mexico 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.

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 Mexico'); - the topic of a letter for the administrator template;
  • define('EMAIL_CLIENT_SUBJECT', 'Feedback letter from Mexico'); - 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@Mexico.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 name="EMAIL" placeholder="Enter your email" required type="email">
	              <button type="submit" class="subscribe-submit"><i class="fa fa-envelope"></i></button>
            </form>
        

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

            13 : successText: 'You have successfully subscribed.',
            14 : errorText: 'Please, enter a valid email'
        

Maintenance page

If you want to close the website maintenance you can use as a stub page template maintenance of Mexico. In Mexico template maintenance page may be four different types.

Error page

For special pages, like 404 or under construction, used a few another markup. At first, you should add class error404 for body tag. By analogy of this pages you may create suitable and needed for your purposes pages.

Sample page 404 can be seen on the page 404.html.