## Introduction

Diamond is a responsive, under construction / coming soon HTML template. This minimal template is being packed with a countdown timer, subscription form, mail form, gallery, social icons and beautiful effects

Please do not forget to rate Diamond template on ThemeForest. This can be done in Downloads area. Just select Diamond in the Download list and rate it. We really appreciate your feedback and will be grateful for your opinion.

## Getting Started

This guide is targeted at people, who have at least basic knowledge of html markup language. Furthermore css and javascript knowledge is advised. If you do not feel yourself well with understanding these technologies you should consider finding someone to assist you.

This template can't be installed into any of available CMS (Wordpress, Drupal, etc.).

This documentation will demonstrate the custom elements used in template and help you with their customization.

## Files Structure

- /assets/css/ - CSS styles folder
- /assets/fonts/ - webfont icons folder
- /assets/img/ - folder for images
- /assets/js/ - JavaScript files folder
- /assets/video/ - folder for video
- /bat/ - PhP files for your contact form
- index-****.html - HTML templates

## Structure Of The Site

`index-****.html` is the main template file that contains the HTML structure of the template.

## Structure Of CSS

The organization of the CSS is one of our priorities.
These are the CSS file we're using in the template:

`assets/css/style.css` (general styles)
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

## Installation

Template installation is pretty easy. All required files are in every version so you can delete unused.

Files are written in simple HTML/CSS/JS/PHP, so you do not need an internet connection in order to display or edit the template, you can view this template in any web browser from your computer. It's important to understand that you must have an online server in order to use this template as a real website. The server can be purchased at many different places around the internet. It's a simple thing: You need to put the files that you purchased somewhere so others can find them online.

Here are the required steps:

1. Choose the desired variant
2. Rename it `index-****.html` to `index.html`
3. Start your FTP client (I recommend FileZilla, which is free) and login to your server.
4. Locate, on your server, the domain folder you wish to upload your template files to. You are going to click and drag every files and folders that you have inside the HTML folder into your FTP client.
5. Once the files are done uploading, you can access your website via browser.

## Customization & Styles

### Title & SEO

Make sure you also change the `title`, `description` and `keywords` meta tags with your own.

### Favicons

Please change the favicons. Check `Favicon` and `Apple Icon` parts in the `index-****.html` file. Replace the `favicon.ico` and `apple-touch-icon.png` located in the template's images folder `assets/img/` with yours.

### Logo

To change the logo replace the `logo.png` located in the template's images folder `assets/img/` with yours.

### Color Style

Check `Color Style` part in the `index-****.html` file. You will find colors link. So if you want to use any other color just replace the color name `green.css`, or you can remove this line for default color active.

Available colors: `amber.css`, `blue.css`, `brown.css`, `dark-red.css`, `dark-violet.css`, `gold.css`, `gray-blue.css`, `green.css`, `indigo.css`, `light-blue.css`, `light-green.css`, `light-pink.css`, `pink.css`, `red.css`, `red-orange.css`, `sand.css`, `teal.css`, `violet.css`,

### Font

1. To change the font, first go to https://fonts.google.com/. Choose a font and use the generated code.
2. Please take a look `Fonts` part in the `index-****.html` file.
3. Replace the generated code.
`<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">`

4. Than change you font name in `font-family:` in `assets/css/style.css`

### Social Icons

Please do not forget to replace the links and icons on the necessary social networks. Replace the `#` symbol with your link and set the necessary icons `fa fa-facebook`. The list of all the icons you will find here: http://fontawesome.io/icons/

### Counter

Open `index-****.html` template and change counter for you data (year, month, day).

### Google Map

1. Check `Google Map` part in `index-****.html` file, and enter your Google API kay .
More info how to get API kay - https://developers.google.com/maps/documentation/javascript/get-api-key
2. Change you `latitude` and `longitude` for your.

## Backgrounds

### Single Version

This method for templates: Single, Parallax, Clouds, Particles, Single-Zoom, Firefly and Snow

You can find all images used for the background within the images folder `assets/img/`. Replace those images with yours and if necessary change their names `bg1.jpg` respectively in the `index-****.html` file.

You can make additional background design:
`overlay` - Background overlay
`has-vignette` - Vignette
`opacity-50` - Make background darker or lighter (0, 10, 20, ... 100)

### Slider Version

You can find all images used for the background within the images folder `assets/img/`. Replace those images with yours and if necessary change their names `bg1.jpg`, `bg2.jpg`, `bg3.jpg` respectively in the `index-****.html` file.

For change slider delay, please found parameter `delay: 6000` and change for another. Delay beetween slides in milliseconds.

For change slider animation, please found parameter `transition:` in the `index-****.html` file, and change effect `blur2` for another.
Effects: `fade`, `fade2`, `blur`, `blur2`, `flash`, `flash2`, `negative`, `negative2`, `burn`, `burn2`, `slideLeft`, `slideLeft2`, `slideRight`, `slideRight2`, `slideUp`, `slideUp2`, `slideDown`, `slideDown2`, `zoomIn`, `zoomIn2`, `zoomOut`, `zoomOut2`, `swirlLeft`, `swirlLeft2`, `swirlRight`, `swirlRight2`

You can make additional background design:
`overlay` - Background overlay
`has-vignette` - Vignette
`opacity-50` - Make background darker or lighter (0, 10, 20, ... 100)

### Video Version

You can find all video used for the background within the video folder `assets/video/`. Replace those video with yours and if necessary change their names respectively in the `index-****.html` file.

Since the video player falls back to the poster image on mobile devices, you need to update background `bg2.jpg` image as well. Make the screenshot of your video and replace the default background image located in the template's images folder.

### YouTube Version

To change the background YouTube video, please edit the `videoURL` parameter value of the data-property attribute in the `index-****.html` file.

Since the video player falls back to the slider images on mobile devices, you need to update backgrounds images. Replace those images with yours and if necessary change their names `bg1.jpg`, `bg2.jpg`, `bg3.jpg` respectively in the `jquery.mb.YTPlayer.min.js` file.. This file you can find in folder `assets/js/`

### Ken Burns (Zoom Out) Version

You can find all images used for the background within the images folder `assets/img/`. Replace those images with yours and if necessary change their names `bg1.jpg`, `bg2.jpg`, `bg3.jpg` respectively in the `index-****.html` file.

For change slider delay, please found parameter `delay: 6000` and change for another. Delay beetween slides in milliseconds.

For change Ken Burns animation, please found parameter `animation:` in the `index-****.html` file, and change effect `kenburns` for another
Animation: `kenburns`, `kenburnsLeft`, `kenburnsRight`, `kenburnsUp`, `kenburnsUpLeft`, `kenburnsUpRight`, `kenburnsDown`, `kenburnsDownLeft`, `kenburnsDownRight`

You can make additional background design:
`overlay` - Background overlay
`has-vignette` - Vignette
`opacity-50` - Make background darker or lighter (0, 10, 20, ... 100)

### Rain Version

You can find image used for the background within the images folder `assets/img/` file `bgrain.jpg`. Your image must be named `bgrain.jpg`, otherwise the background will not work.

### Glitch New Version

You can find image used for the background within the images folder `assets/img/` file `glitch-new.jpg`. Your image must be named `glitch-new.jpg`, otherwise the background will not work.

### Heat Distortion / Water Versions

For change Heat Distortion / Water backgrounds, please read a special Documentation...
More information here..

### Ripples Version

You can find all images used for the background within the images folder `assets/img/`. Replace those images with yours and if necessary change their names `bg1.jpg` respectively in the `style.css` file.

You can make additional background design:
`overlay` - Background overlay
`has-vignette` - Vignette
`opacity-90` - Make background darker or lighter (0, 10, 20, ... 100)

### Glitch Version

You can find all images used for the background within the images folder `assets/img/`. Open `glitch.js`(../assets/js/glitch.js) and replace images URL for yours.

You can make additional background design:
`overlay` - Background overlay
`has-vignette` - Vignette
`opacity-50` - Make background darker or lighter (0, 10, 20, ... 100)

### Gradient Overlay Version

You can find all images used for the background within the images folder `assets/img/`. Replace those images with yours and if necessary change their names `bg1.jpg` respectively in the `index-****.html` file.

You can make additional background design:
`overlay` - Background overlay
`has-vignette` - Vignette
`opacity-80` - Make background darker or lighter (0, 10, 20, ... 100)

You can make additional gradient background:
`opacity-20` - Make gradient background darker or lighter (0, 10, 20, ... 100)

## "About Us" Section

### About Company

Please replace the text with your in `index-****.html` file.

### Portfolio

You can find all images used for the Portfolio within the images folder `assets/img/`. Please replace the image `gallery-1.jpg` with your in `index-****.html` file.

For video, please replace the image `youtube.jpg` and link for youtube/vimeo video.

### Our Team

Please replace the text with your in `index-****.html` file.

You can find all images used for the Team within the images folder `assets/img/`. Please replace the image `team-1.jpg` with your.

For Skils, please change name, percent and `width-80` for your. `width-` may be (0, 10, 20, ... 100)

### Contacts

Please replace the text, phone, adress and email with your in `index-****.html` file.

## Mail Forms

### Activation Mail Forms

Make sure that you change the default email address to your own in `mailform.php` or `mailform_captcha.php` (for ReCaptcha version) and `subscribe.php` or `subscribe_captcha.php` files in `bat` folder, to receive emails when the mail form is submitted.

### Google ReCaptcha

1. First, we need an API key, so head on over to https://www.google.com/recaptcha/admin. To gain access to this page you’ll need to be logged into a Google account. You’ll be asked to register your website, so give it a suitable name, then list domains (for example artsoundgroup.com) where this particular reCAPTCHA will be used.

2. With that done you’ll be given a site key and its partner secret key.

3. Paste this code fragment where you want to place the reCAPTCHA widget. Remove `xxxx` and insert your Site key.

<div class="g-recaptcha" data-sitekey="xxxx">

4. Secret key you will add in `mailform_captcha.php` and `subscribe_captcha.php` files. Remove `xxxx` and insert your Secret key.

##### `ATTENTION!` Google supports only one ReCaptcha on the page. If you need to install 2 ReCaptcha, please read this manual.

### Delete Google ReCaptcha

1. For delete google ReCaptcha, please change `bat/mailform_captcha.php` for `bat/mailform.php` or `bat/subscribe_captcha.php` for `bat/subscribe.php` in html file.

2. Delete ReCaptcha code.

3. For fix the button position, change (only for mail form):
`div class="col-md-6 col-sm-6 text-right"`
for
`div class="col-md-12 col-sm-12 text-center"`

## Source & Credits

### Fonts

Name | Description | Location
--- | --- | ---
Fontawesome | The iconic font and CSS toolkit | assets/fonts/
Google fonts | Montserrat | ---

### CSS Files

Name | Description | Location
--- | --- | ---
Bootstrap | Defines main Bootstrap classes | assets/bootstrap/bootstrap.css
Trackpad Scroll Emulator | Styles for jQuery custom content scroller | assets/css/trackpad-scroll-emulator.css
Magnific Popup | Styles for Popup Windows | assets/css/magnific-popup.css
Vegas | Styles for jQuery Slideshow Backgrounds | assets/css/vegas.min.css
Mailform | Styles for Mail Forms | assets/css/mailform.css
Template styles | Contains all of the specific stylings for the template. | assets/css/style.css

### JavaScript Files

Name | Description | Location
--- | --- | ---
jQuery | Core Javascript library | assets/js/jquery-2.2.4.min.js
Bootstrap | Sleek, intuitive, and powerful front-end framework for faster and easier web development | bootstrap/js/bootstrap.min.js
Template scripts | Contains all of the specific scripts for the template. | assets/js/custom.js
Plugins | Contains all plugins for the template. | assets/js/jquery.plugin.min.js
Snow | Script for Snow Animation | assets/js/snow.js
Rain | Script for Rain Animation | assets/js/rain.js
Particles | Script for Particles Animation | assets/js/star.js
Cooking | Animated heat distortion effect | assets/js/cooking.js
Water | Water Animated | assets/js/water.js
Ripples | Water Ripples Animated | assets/js/jquery.ripples-min.js
Glitch | Glitch Animated | assets/js/glitch.js
Gradient | Animated Radial Gradient | assets/js/gradient.js
Gradient Overlay | Animated Gradient Overlay | assets/js/gradient-overlay.js
Circle Particles | Animated Circle Particles Background | assets/js/circle-particles.js
Universe | Animated 360 Universe Background | assets/js/universe.js
Firefly | Animated Flashing Firefly | assets/js/firefly.js

### PHP Files

Name | Description | Location
--- | --- | ---
Subscribe | PHP Subscribe Form | bat/subscribe.php
Mail Form | PHP Mail Forms | bat/mailform.php

### Images & Video

Name | Description | Location
--- | --- | ---
Images | All images from StockSnap.io | ---
Video | Video from Videohive.net | ---

## Updates

Version 4.1 - 08.08.2018
new - Glitch New Animation
Version 4.0 - 26.09.2017
new - Flashing Firefly Animation
Version 3.0 - 20.08.2017
change mailforms and add Google ReCaptcha
Version 2.2 - 26.07.2017
new - 360 Universe (Space) / Dark-Violet Color Style
Version 2.1 - 23.07.2017
new - Animated Circle Particles / Dark-Red Color Style
Version 2.0 - 15.07.2017
new - Animated Gradient Overlay / Reg-Orange Color Style
Version 1.8 - 09.07.2017
new - Animated Radial Gradient
Version 1.7 - 02.07.2017
new - YouTube Background / Brown Color Style
Version 1.6 - 23.06.2017
new - Glitch Animation / Gray-Blue Color style
Version 1.5 - 23.06.2017
new - Water Ripples Animation / Indigo Color style
Version 1.4 - 18.06.2017
new - Water Animation / Sand Color style
Version 1.3 - 14.06.2017
new - Parallax Animation
Version 1.2 - 10.06.2017
new - Rain Animation / Snow Animation / Particle Animation
update - Documentation

## End

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.