Aviato Documentation

Created: September 2016
Latest Update: September 2016
By: Adam Ostry

Thank you for purchasing

Aviato - Multipurpose One Page & Coming Soon HTML template

This document contains the description of the installation and use of the template and reveals the answers for the general questions. Read this guide attentively before using the template.

Get started!

About

Aviato is a modern, responsive HTML template with a beautiful and original design. It has been specifically designed to be easily customized and it’s created for creatives who want to make portfolio in few minutes.

• Fully responsive design;
• HTML5 and CSS3;
• Color variations;
• Countdown with exact time;
• Easy to change;
• Working ajax contact and subscription forms;
• Google Material icons;
• Google web fonts;
• Multi-browser support;
• Well documented;

Folders & Files

All *.html files are in the root directory. Supporting files (styles, scripts, images etc) are common for each template variation.

Installation

Just select the desired html version, customize it with your information and upload through FTP. Once uploading is done, rename the file you want to be your home page as "index.html".

Page layout

This is a HTML template, so you will need basic knowledge of the Hyper Text Markup Language to customize it.

Sections

The page is divided into 6 sections:

Home section

This section is different for each template version and can have some settings. Here's a part of code for the "Slideshow Background" version:

<!-- home section -->
<section class="slideshow" id="home" data-slides="./images/demo/demo-02.jpg, ..., ./images/demo/demo-06.jpg" data-delay="3000">
...
</section>
<!-- /home section -->

Section with id="home" has a class name "slideshow", it is unique for each template version and defines "Home" section style.

Slideshow images are specified using a comma-separated list of values (images url's) for the "data-slides" attribute. Also you are able to change slideshow delay ("data-delay" attribute) in milliseconds.

Triangle Background

<!-- home section -->
<section class="triangle" id="home" data-colors="random">
...
</section>
<!-- /home section -->

You are able to set the background color palette here via "data-colors" attribute. Aviato comes bundled with the colorbrewer palette set.

Video Background

<!-- home section -->
<section class="video" id="home" data-video="https://www.youtube.com/watch?v=yCNW9hzngdQ" data-image="./images/demo/demo-01.jpg">
...
</section>
<!-- /home section -->

With Aviato you can even use a youtube movie as background of your HTML page. To change the background video set a value of "data-video" attribute. To retrive the video from YouTube you can use any of the following string:

• The URL of the page containing the video:
  ‘https://www.youtube.com/watch?v=yCNW9hzngdQ’
  
  
• The short URL available fron the YouTube share panel:
  ‘http://youtu.be/yCNW9hzngdQ’
  
  
• The video ID:
  ‘yCNW9hzngdQ’
  
  

Logo

Logo image is placed inside the div with class="header-logo":

<!-- logo -->
<div class="animateIt" id="logo" data-effect="fade-down" data-delay="100"><a href="/"><img src="./images/logo.png" alt="Aviato"></a></div>
<!-- /logo -->

To change the logo just overwrite the image files images/logo.png and images/logo_dark.png with yours. First one is used on the dark background and the second on the white.

Setting the counter

It's very easy to change the countdown time. Just open you "coming-soon-*" template version file, find the block comment <!-- counter --> and type your launching time:

<!-- counter -->
   <!-- set your date data (e.g. data-date="2016-09-21 09:00:00") -->
   <div id="counter" data-date="2017-12-01 00:00:00" class="animateIt" data-effect="fade-left" data-delay="100"></div>
<!-- /counter -->

Working with icons

Material icons are beautifully crafted, delightful, and easy to use in your web. A full list of all icons is available here. The markup below is all you need to insert an icon. Wrap it in an anchor tag or a link to use the icon as a button.

<!-- For modern browsers. -->
<i class="material-icons">announcement</i>
<!-- For IE9 or below. -->
<i class="material-icons">&#xE85A;</i>

Social media

Simply add your social profiles. Find the block comment <!-- social icons --> and edit the links:

<!-- footer social icons -->
 <ul class="footer-social">
   <li><a href="#" target="_blank"><i class="socicon-twitter"></i></a></li>
   <li><a href="#" target="_blank"><i class="socicon-facebook"></i></a></li>
   <li><a href="#" target="_blank"><i class="socicon-instagram"></i></a></li>
   <li><a href="#" target="_blank"><i class="socicon-google"></i></a></li>
 </ul>
<!-- /footer social icons -->

For the full list of social icons visit http://www.socicon.com/chart.php.

Contact and subscription forms

To set up the contact and the subscribe forms you need to make a couple of simple changes to the contact-form.php and subscribe.php files which are located in the [php] folder. Open these files with any standard code editor and you will see the following code in the first few lines of the contact-form.php file:

$to_Email       = "myemail@gmail.com"; //Replace with recipient email address

$subject        = 'Ah!! My email from Somebody out there...'; //Subject line for emails

and of the subscribe.php file:

$to_Email       = "myemail@gmail.com"; //Replace with recipient email address

$subject        = 'New subscription'; //Subject line for emails

You can also customize error and success messages by editing these files.

Color Schemes

There are available 16 pre-customized color schemes. All css files of these schemes can be found in the "[/styles/themes/]" directory. You can simply change css file & apply new color scheme to your website:

<link rel="stylesheet" href="./styles/style.css">

Just add the prefered CSS file instead of style.css to apply new color scheme:

<link rel="stylesheet" href="./styles/themes/aquamarine.css">

Google Maps

There's a Google Maps container in the Contacts section. To set your location change the "data-coordinates" value with your latitude and longitude coordinates:

<div id="our-location">
  <div id="googlemaps" data-coordinates="37.418602, -122.087767" data-zoom="15"></div>
 </div>

To find the coordinates of a place on Google Maps, follow the steps below:

1. Open Google Maps.
2. Right-click the place or area on the map.
3. Select What's here?.
4. A card appears at the bottom of the screen with more info.

For more info please visit official page.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

CSS3 Animations

To set the animation just add "animateIt" class and type data-effect and data-delay values for any element on the page. For example:

<div id="logo" data-effect="fade-down" data-delay="500" class="animateIt"><a href="/"><img src="./images/logo.png" alt=""></a></div>

As we can see, #logo will be faded in down with 500 ms delay.

Here's a list of available animation effects:

• fade
• fade-up
• fade-down
• fade-left
• fade-right
• bounce
• bounce-up
• bounce-down
• bounce-left
• bounce-right
• zoom
• zoom-up
• zoom-down
• zoom-left
• zoom-right

Javascript

1. jQuery: https://jquery.org/license/
2. The Final Countdown: http://hilios.github.io/jQuery.countdown/
3. Owl Carousel: https://owlcarousel2.github.io/OwlCarousel2
4. jquery.mb.YTPlayer: https://github.com/pupunzi/jquery.mb.YTPlayer
5. Backstretch: http://srobbin.com/jquery-plugins/backstretch/
6. Trianglify: http://qrohlf.com/trianglify/
7. Waypoints: http://imakewebthings.com/waypoints
8. Simple Lightbox: https://github.com/andreknieriem/simplelightbox

Fonts

1. Google Web Fonts - Open Sans: https://fonts.google.com/specimen/Open+Sans
2. Google Web Fonts - Merriweather: https://fonts.google.com/specimen/Merriweather

Icons

1. Google Material icons: https://design.google.com/icons
2. Socicons: http://www.socicon.com/chart.php

CSS

1. Animate.css: https://github.com/daneden/animate.css
2. Typographic: https://github.com/corysimmons/typographic

Version 1.0

1. Initial release.