Luck - Coming Soon Page Doc

## Luck Clean Coming Soon Page

- Created: 9/14/2016
- By: prowebtheme
- Site: prowebTheme.net
- Email: masudzakaria2@yahoo.com

## Getting Started

Unzip the source-file and find out the folder Luck-Coming-Soon-Page-HTML and open, There are 2 layout folder Tab-version And page-scroll-version And 10+10=20 versions:-.

1. image-backgorund
2. Image-Background+Perticle-effect
3. Image-Background+Rain-effect
4. Image-Background+Snow-effect
5. Image-Background+Firyfly-effect
6. Polygon-Background
7. slider-Background
8. html5-video-Background
9. vimeo-video-Background
10. youtube-video-Background

And all Version folder in has blow file:-

1. /css — folder with css files.
2. /fonts — folder with icon fonts.
3. /img — folder with image files.
4. /js — folder with Javascript files.
5. /contract-form — folder with contract-form files.
6. index.html — Main Html.
7. style.css — Main style sheet.

## Change color

if you want to use any other color, open Your layout/varsion folder and open css/colors/,There has 6 defult colors (yellow-color, orange-color.css, lilac-color.css, green-color.css, defult-color.css, blue-color.css) and open any type of color css file in editor,and replace the color code.

# All section content for All version

## 1. Welcome section

### For All version:- Change full screen Background.

open layout/varsion folder and open index.html file. Then change Welcome background images from below code.

#### Tab Layout:

#### Page scroll Layout:

Weclcome section

About section

Services section

Contact section

### Slider Background version.

Open slider-Background folder and open index.html file. You can upload your slider images on 'img' folder. Then change the slider single image name from below code.

#### Tab and Page scroll Layout:

### Image Background + Firyfly effect version HTML code.

open Image-Background+Firyfly-effect folder and open index.html file. Then you can found from below HTML code.

#### Tab Layout:

#### Page scroll Layout:

### Image Background + Perticle effect version js code.

open Image-Background+Perticle-effect folder and open main.js file. Then you can found from below js code.

### Image Background + Rain effect version code.

open Image-Background+Rain-effect folder and open index.html file. Then you can found from below HTML and js code.

#### index.html file HTML:code

#### Tab and Page scroll Layout:

index.html file js:code

### Image Background + Snow effect version code.

open Image-Background+Snow-effect folder and open index.html file. Then you can found from below HTML code.

#### Tab Layout:

#### Page scroll Layout:

### Polygon Background version code.

open Polygon-Background folder and open main.js file. Then you can found from below js code.

#### Tab and Page scroll Layout:

### Html5 video Background version code.

open html5-video-Background folder and open upload folder and upload video and open index.html file. Then you can change the video url from below Html code.

#### Tab and Page scroll Layout:

### Vimeo video Background version code.

open vimeo-video-Background folder and open index.html file. Then you can change the video id or url from below Html code.

#### Tab and Page scroll Layout:

### Youtube video Background version code.

open youtube-video-Background folder and open index.html file. Then you can change the video id or url from below Html code.

### data-property for initial settings:

*data-property is an attribute of the TAG where you can pass the settings of the player.

1. opacity: 1 //(int) 0 → Set the opacity of the player;
2. mute: true //(boolean) mute the audio;
3. showControls: true // or false If you set the player as background you can show controls adding this parameter;
4. ratio: ‘4/3’ or “16/9” to set the aspect ratio of the movie;
5. quality: ‘default’ or “small”, “medium”, “large”, “hd720”, “hd1080”, “highres”;
6. containment: (string) the CSS selector of the DOM element where you want the video background; if not specified it takes the “body”; if set to “self” the player will be instanced on that element;
7. optimizeDisplay: true (boolean) will fit the video size into the window size optimizing the view;
8. loop: true (boolean) or false loops the movie once ended.
9. vol: 1 to 100 (number) set the volume level of the video.
10. startAt: 20 (int) Set the seconds the video should start at.
11. autoplay: true (boolean) or false play the video once ready.
12. showYTLogo: true (boolean) Show or hide the YT logo and the link to the original video URL.
13. showControls: true (boolean) Show or hide the controls bar at the bottom of the page.

### Change Welcome section Logo.

open your version folder and open index.html file. You can upload your logo on 'img' folder. Then change the logo image name from below code.

#### Tab and Page scroll Layout:

### Change Welcome section count down timer.

open your version folder and open index.html and main.js file. Then change count down content from below code.

#### Index.html = Html Code:

#### Tab and Page scroll Layout:

#### main.js = js Code:

#### Tab and Page scroll Layout:

### Change Welcome section Ajax Mailchimp Integration.

index.html Mailchimp

1. Replace the form action url with your own from the MailChimp supplied embed code
2. Within the action url, replace "subscribe/post" with "subscribe/post-json"
3. Be sure the action url starts with `http://`. If it doesn't, the form will hang when testing the html as a local file in your browser
4. Open the html file in a browser on your local machine

#### Tab and Page scroll Layout:

## 2. About us section

### Change About us section content.

open your version folder and open index.html file.Then change the About us Text , content, skillbar, from below code.

#### Tab and Page scroll Layout:

## 3. Services section

### Change Service section content

open your version folder and open index.html file.Then change the Service single item icon and Text content, from below code.

#### Tab and Page scroll Layout:

## 4. Contact us section.

### Change Contact us section content

open your version folder and open index.html file.Then change the Contact us section content from below code.

#### Contact us Content HTML code:

#### Contact us Content PHP code:

open your version folder and open contract-form/php/form-process.php file.Then change the Contact Your mail address here from below code.

## Javascript & Css Source And Credits

1. Modernizr
2. jQuery
3. Bootstrap
4. Owl Carousel 2
5. fullPage js
6. Geometryangle
7. Three js
8. mb.YTPlayer