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.

Key features:

- 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

[documentation] | Template documentation
[template] | This folder contains 7 different versions of the template and supporting files

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

[fonts] | Contains the icon font used in the template
[images] | All images for the template are found here
[php] | The contact and subscription forms php scripts can be found here
[scripts] | This folder holds all javascript libraries used in the template
[styles] | This folder contains all the template's CSS files
index.html | Preview of the template.
coming-soon-single-image.html | Single Image background (Coming Soon version)
coming-soon-slideshow.html | Slideshow background (Coming Soon version)
coming-soon-triangle.html | Triangle background (Coming Soon version)
coming-soon-video.html | Video background (Coming Soon version)
one-page-single-image.html | Single Image background (One Page version)
one-page-slideshow.html | Slideshow background (One Page version)
one-page-triangle.html | Triangle background (One Page version)
one-page-video.html | Video background (One Page version)

### 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 | This section shows logo, greeting message and counter
About | A section with short information about your project
Portfolio | This section contains a list of your works
Team | The information about your team will be displayed here
Subscribe | This section contains a subscription form
Contacts | Contact form section

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

###### Please note!

- The feature works only if used under a web server. It doesn’t work if you run the HTML page as file (file://…).
- It doesn’t work as background for devices due to the restriction policy adopted by all on managing multimedia files via javascript. So you need to set a background image via "data-image" attribute. This image will be displayed on mobile devices.

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

###### Please note!

Form fields are validated both on the user-side, using JavaScript and on the server-side, just to make sure no hacker gets in.

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

###### Please note!

To place Google Maps on your website you need a google maps api key. Find the string below and replace "YOUR_API_KEY" phrase with your google maps api key.

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