1. Introduction
  2. Features
  3. Start Files
  4. HTML Structure
  5. CSS Structure
  6. JS Structure
  7. PHP Structure
  8. Image Background
  9. Pattern Background
  10. Animated Pattern Background
  11. Gradient Background
  12. Bubble Effect
  13. HTML5 Video background
  14. Youtube Video background
  15. Icons
  16. Links to Social Media
  17. Contact Form
  18. Subscribe Form
  19. Sources & Credits
  20. Thanks

Acme - Help Facility

Web Based Documentation


By: John Doe
Email: johndoe@me.com

Thank you for purchasing our theme. If you have any questions that aren't covered in this article, please feel free to email us.

Acme Coming Soon Template with its unique and creative design has everything that you want in your coming soon page. This theme allows visitors to subscribe to your mailing list, so that you can notify them about the launch. This site template has six background options: Gradient Background with Bubble Effect, Static Image Background, Pattern Background, Animated Pattern Background, YouTube Video Background and HTML 5 Video Background.

FEATURES


Files


All site files are divided into following folders. These folders are present inside assets folder.

css folder - Contains css files
js folder - Contains Javascript files
img folder - Contains all images
video folder - Contains mp4/webm video
lib folder - Contains mailchimp.php file
fonts folder - Contains "Font-Awesome" fonts plugin

For more details please go through 'Read Me' text file present inside root directory.

HTML Structure


				
				
Add a new section

1] Copy the example code below
2] Paste it inside index.html below the last section [ id="section2" ]

Example:
				

3] Open init.js file
4] Find the below code
5] Add the new section name in the following lines

			/***********************************/
			/* Fullpage js */
			/***********************************/
			function fullpage() {
				if($(window).width() > 800){
				/** Full Page Effect JS **/
					
					$('#fullpage').fullpage({
							anchors: ['home', 'features', 'contact','NEW SECTION NAME'],
							navigationTooltips: ['Home', 'Features', 'Contact','NEW SECTION NAME TO APPEAR IN THE TOOLTIP'],
							fontawesome:['fa-home','fa-heart','fa-envelope','TOOLTIP ICON CLASS CHOSEN FROM FONTAWESOME'],
														
					});
				}
				else{

					$('#fullpage').fullpage({
								
								anchors: ['home', 'features', 'contact','NEW SECTION NAME'],
								
						});
				}
			}
			

Note: To get the class name for the tooltip icon refer to the Icons section inside the documentation.

CSS Structure


This theme imports following CSS files. These files are present inside the css folder.

Javascript Structure


This theme imports following JS files. These files are present inside the js folder.

PHP Structure


This theme imports the following PHP files.

Image Background


All images are inside the img folder.

How to add and change the background image:

Background image is added directly from the below css code [ style.css ].

					#section0{
						background-attachment: fixed;
						background-clip: border-box;
						background-color: rgba(0, 0, 0, 0);
						background-image: url(../img/bg.jpg); //background image
						background-origin: padding-box;
						background-repeat: no-repeat;
						background-size: cover;
						background-position:center top;
						
					}

					#section1{
						background-attachment: fixed;
						background-clip: border-box;
						background-color: rgba(0, 0, 0, 0);
						background-image: url(../img/bg.jpg); //background image
						background-origin: padding-box;
						background-repeat: no-repeat;
						background-size: cover;
						background-position:center top;
						
					}
					#section2{
						background-attachment: fixed;
						background-clip: border-box;
						background-color: rgba(0, 0, 0, 0);
						background-image: url(../img/bg.jpg); //background image
						background-origin: padding-box;
						background-repeat: no-repeat;
						background-size: cover;
						background-position:center top;
						
					}
				

Note: Live preview images are NOT included in the pack. We have generated placeholder instead.
If you need these images please contact us.

Pattern Background


All patterns are inside the img/patterns folder.

How to add and change the background pattern:

Background pattern is added directly from the below css code [ style.css ].

					#section0{
						background: url("../img/patterns/01_home.jpg") repeat fixed 0 0 rgba(0, 0, 0, 0);
					}
					#section1{
						background: url("../img/patterns/02_features.jpg") repeat fixed 0 0 rgba(0, 0, 0, 0);
					}
					#section2{
						background: url("../img/patterns/03_contact.jpg") repeat fixed 0 0 rgba(0, 0, 0, 0);
					}
			

You can also select your pattern from here.
Download the pattern files and keep it inside the img/patterns folder. Also change the name inside the css file.

Animated Pattern Background


All patterns are inside the img/patterns folder.

How to add and change the background image

Background pattern is added directly from the below css code [ style.css ].

				#section0{
					background-image: url("../img/patterns/01_home.jpg");
					background-attachment: fixed;

				}
				#section1{
					background-image: url("../img/patterns/02_features.jpg");
					background-attachment: fixed;

				}
				#section2{
					background-image: url("../img/patterns/03_contact.jpg");
					background-attachment: fixed;

				}
			
Animation Code

You will find this code inside init.js

				$(function(){
					var x = 0;
					var y = 0;
					setInterval(function(){
					x+=1;
					y-=1;
					$('#section0').css('background-position', x + 'px  0');
					$('#section1').css('background-position', x + 'px ' + y + 'px');
					$('#section2').css('background-position', '0 ' + y + 'px');
					}, 10); //you can change the animation speed from here.
				})
			

Gradient Background


Background Gradient is added directly from the below css code [ style.css ].

				#section0{
					background-image: -webkit-gradient(
					linear,
					left top,
					left bottom,
					color-stop(0, #4AE5DB),
					color-stop(0.56, #FFA2C4),
					color-stop(1, #FFE1A1)
					);
					background-image: -o-linear-gradient(bottom, #4AE5DB 0%, #FFA2C4 56%, #FFE1A1 100%);
					background-image: -moz-linear-gradient(bottom, #4AE5DB 0%, #FFA2C4 56%, #FFE1A1 100%);
					background-image: -webkit-linear-gradient(bottom, #4AE5DB 0%, #FFA2C4 56%, #FFE1A1 100%);
					background-image: -ms-linear-gradient(bottom, #4AE5DB 0%, #FFA2C4 56%, #FFE1A1 100%);
					background-image: linear-gradient(to bottom, #4AE5DB 0%, #FFA2C4 56%, #FFE1A1 100%);
					background-attachment:fixed;
					
				}
				#section1{
					background-image: -webkit-gradient(
					linear,
					left bottom,
					left top,
					color-stop(0, #0BA3CD),
					color-stop(0.45, #BA89DF),
					color-stop(1, #FFDEFE)
					);
					background-image: -o-linear-gradient(top, #0BA3CD 0%, #BA89DF 45%, #FFDEFE 100%);
					background-image: -moz-linear-gradient(top, #0BA3CD 0%, #BA89DF 45%, #FFDEFE 100%);
					background-image: -webkit-linear-gradient(top, #0BA3CD 0%, #BA89DF 45%, #FFDEFE 100%);
					background-image: -ms-linear-gradient(top, #0BA3CD 0%, #BA89DF 45%, #FFDEFE 100%);
					background-image: linear-gradient(to top, #0BA3CD 0%, #BA89DF 45%, #FFDEFE 100%);
					background-attachment:fixed;
					
				}
				#section2{
					background-image: -webkit-gradient(
					linear,
					left top,
					left bottom,
					color-stop(0, #FF775F),
					color-stop(0.6, #E49CE6),
					color-stop(1, #D7D9E3)
				);
					background-image: -o-linear-gradient(bottom, #FF775F 0%, #E49CE6 60%, #D7D9E3 100%);
					background-image: -moz-linear-gradient(bottom, #FF775F 0%, #E49CE6 60%, #D7D9E3 100%);
					background-image: -webkit-linear-gradient(bottom, #FF775F 0%, #E49CE6 60%, #D7D9E3 100%);
					background-image: -ms-linear-gradient(bottom, #FF775F 0%, #E49CE6 60%, #D7D9E3 100%);
					background-image: linear-gradient(to bottom, #FF775F 0%, #E49CE6 60%, #D7D9E3 100%);
					background-attachment:fixed;
				}
			

You can select your gradient from here.

Bubble Effect


Html code [ index.html ]
				
				
CSS code [ style.css ]
				.bubble-toggle {
				position: relative;
				top: 10px;
				right: 10px;
				padding: 10px;
				background: rgba(255, 255, 255, 0.5);
				font-family: sans-serif;
				font-size: 13px;
				color: #333;
				}

				.bubble-toggle:hover {
					background: rgba(255, 255, 255, 0.75);
				}

				.bubbles {
					position: absolute;
					overflow: hidden;
					width: 100%;
					height: 100%;
					margin: 0 auto;
				}

				.bubble-container {
					position: absolute;
					bottom: 0;
					-webkit-animation: bubblerise 4s infinite ease-in;
					-moz-animation: bubblerise 4s infinite ease-in;
					-ms-animation: bubblerise 4s infinite ease-in;
					animation: bubblerise 4s infinite ease-in;
					filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
					opacity: 0;
					z-index:999;
				}

				.bubble {
					width: 6px;
					height: 6px;
					margin: 0 auto;
					border: 0px solid rgba(255, 255, 255, 0.7);
					background: rgba(255, 255, 255, 0.4);
					-moz-border-radius: 10px;
					-webkit-border-radius: 10px;
					border-radius: 10px;
					-webkit-animation: bubblewobble 0.4s infinite linear;
					-moz-animation: bubblewobble 0.4s infinite linear;
					-ms-animation: bubblewobble 0.4s infinite linear;
					animation: bubblewobble 0.4s infinite linear;
				}

				@-webkit-keyframes bubblerise {
				  0% {
					bottom: 0;
					filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
					opacity: 0;
				  }
				  5% {
					bottom: 0;
					filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
					opacity: 1;
				  }
				  99% {
					filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
					opacity: 1;
				  }
				  100% {
					bottom: 100%;
					filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
					opacity: 0;
				  }
				}

				@-moz-keyframes bubblerise {
				  0% {
					bottom: 0;
					filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
					opacity: 0;
				  }
				  5% {
					bottom: 0;
					filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
					opacity: 1;
				  }
				  99% {
					filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
					opacity: 1;
				  }
				  100% {
					bottom: 100%;
					filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
					opacity: 0;
				  }
				}

				@-ms-keyframes bubblerise {
				  0% {
					bottom: 0;
					filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
					opacity: 0;
				  }
				  5% {
					bottom: 0;
					filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
					opacity: 1;
				  }
				  99% {
					filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
					opacity: 1;
				  }
				  100% {
					bottom: 100%;
					filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
					opacity: 0;
				  }
				}

				@keyframes bubblerise {
				  0% {
					bottom: 0;
					filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
					opacity: 0;
				  }
				  5% {
					bottom: 0;
					filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
					opacity: 1;
				  }
				  99% {
					filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
					opacity: 1;
				  }
				  100% {
					bottom: 100%;
					filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
					opacity: 0;
				  }
				}

				@-webkit-keyframes bubblewobble {
				  0% {
					margin-left: 0;
				  }
				  50% {
					margin-left: 2px;
				  }
				}

				@-moz-keyframes bubblewobble {
				  0% {
					margin-left: 0;
				  }
				  50% {
					margin-left: 2px;
				  }
				}

				@-ms-keyframes bubblewobble {
				  0% {
					margin-left: 0;
				  }
				  50% {
					margin-left: 2px;
				  }
				}

				@keyframes bubblewobble {
				  0% {
					margin-left: 0;
				  }
				  50% {
					margin-left: 2px;
				  }
				}

			
JS Code [ init.js ]
			/** Bubble JS  **/
				var $bubbles = $('.bubbles');

				function bubbles() {
				 
				  // Settings
				  var min_bubble_count = 20, // Minimum number of bubbles
					  max_bubble_count = 40, // Maximum number of bubbles
					  min_bubble_size = 3, // Smallest possible bubble diameter (px)
					  max_bubble_size = 8; // Largest possible bubble diameter (px)
				 
				  // Calculate a random number of bubbles based on our min/max
				  var bubbleCount = min_bubble_count + Math.floor(Math.random() * (max_bubble_count + 1));
				 
				  // Create the bubbles
				  for (var i = 0; i < bubbleCount; i++) {
					$bubbles.append('
'); } // Now randomise the various bubble elements $bubbles.find('.bubble-container').each(function(){ // Randomise the bubble positions (0 - 100%) var pos_rand = Math.floor(Math.random() * 101); // Randomise their size var size_rand = min_bubble_size + Math.floor(Math.random() * (max_bubble_size + 1)); // Randomise the time they start rising (0-15s) var delay_rand = Math.floor(Math.random() * 16); // Randomise their speed (3-8s) var speed_rand = 2 + Math.floor(Math.random() * 9); // Cache the this selector var $this = $(this); // Apply the new styles $this.css({ 'left' : pos_rand + '%', '-webkit-animation-duration' : speed_rand + 's', '-moz-animation-duration' : speed_rand + 's', '-ms-animation-duration' : speed_rand + 's', 'animation-duration' : speed_rand + 's', '-webkit-animation-delay' : delay_rand + 's', '-moz-animation-delay' : delay_rand + 's', '-ms-animation-delay' : delay_rand + 's', 'animation-delay' : delay_rand + 's' }); $this.children('.bubble').css({ 'width' : size_rand + 'px', 'height' : size_rand + 'px' }); }); } // In case users value their laptop battery life // Allow them to turn the bubbles off $('.bubble-toggle').click(function(){ if($bubbles.is(':empty')) { bubbles(); $bubbles.show(); $(this).text('Bubbles Off'); } else { $bubbles.fadeOut(function(){ $(this).empty(); }); $(this).text('Bubbles On'); } return false; }); bubbles();

HTML5 Video background


1] New video can be added from the assets/video folder
2] To change the video you have to open the file index.html .
3] Change the "src" to point to your video.

Code for HTML5 video :

				
				

Note: The video does not play on smartphones - so if a user comes to your site from a mobile browser - the background is replaced by a background color

Note: You can customize the background color for mobile devices from the below code [code is inside init.js]

				trueMobile = isMobile.any()
					if (trueMobile){
					$('#section0').css('background','#fdbd12');
					$('#section1').css('background','#e74c2e');
					$('#section2').css('background','#2fbfbf');
					$('.container-overlay').css('display','none');
				}
			

Youtube Video background


1] Open the file "init.js" with your text editor
2] Find the following code:

				function youtube(){

					var options = { videoId: 'Cg4lEyWlm28',repeat: true }; /* you tube video id goes here.*/
					$('#background-video').tubular(options);

				}
			

3] Find the line videoId: 'Cg4lEyWlm28', and in single quotes add your Youtube code

How to find video code?

1] Go to Youtube.
2] Under video click to share.
3] In the screen that appears after http://youtu.be/ copy and replace the code.

Note: The video does not play on smartphones - so if a user comes to your site from a mobile browser - the background is replaced by a background color

 

Note: You can customize the background color for mobile devices from the below code [code is inside init.js]

				trueMobile = isMobile.any()
					if (trueMobile){
					$('#section0').css('background','#fdbd12');
					$('#section1').css('background','#e74c2e');
					$('#section2').css('background','#2fbfbf');
					$('.container-overlay').css('display','none');
				}
			

Icons


All icons are generated by the plugin "Font-Awesome". List of all the icons can be found here.
To change the icon, you have to copy and paste the code icon at the right place and just add the class. Read the documentation plugin - it is described in detail how to change the icons size.

Example:

	
	
	
	

 

Links to Social Media


Find the below code in index.html and replace '#' with the social media link.

			
		
		
		
			

 

Contact Form


1] Find the file "contact_me" in the root directory.
2] In this file, find the line $to_Email = "myemail@gmail.com"; and add your e-mail id.

JS Code
			/** Contact Us JS **/
				$("#submit_btn").click(function() {
					
					var filter = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
					var user_name       = $('input[name=name]').val();  //get input field values*/
					var user_email      = $('input[name=email1]').val();
					var user_message    = $('textarea[name=message]').val();
					
					//simple validation at client's end
					//we simply change border color to red if empty field using .css()
					var proceed = true;
					
					if(user_name==""){
						$('input[name=name]').css('border-color','red');
						$('input[name=name]').css('border-width','1px');
						$('input[name=name]').css('border-style','solid');
						proceed = false;
					}
					
					if(user_email== ""){
						$('input[name=email1]').css('border-color','red');
						$('input[name=email1]').css('border-width','1px');
						$('input[name=email1]').css('border-style','solid');
						proceed = false;
					}
					else if(!filter.test(user_email)) {
					   $('input[name=email1]').css('border-color','red');
						$('input[name=email1]').css('border-width','1px'); 
						 $('input[name=email1]').css('border-style','solid');
					  /* $('#email_error').html("X Please Enter valid email address");*/
					   $('#email_error').show();
						 proceed = false;
					}
				
					if(user_message=="") { 
						$('textarea[name=message]').css('border','red');
						 $('textarea[name=message]').css('border-width','1px'); 
						  $('textarea[name=message]').css('border-style','solid');
						proceed = false;
					}
					
					if(proceed) //everything looks good! proceed...
					{
						//data to be sent to server
						var post_data = {'userName':user_name, 'userEmail':user_email,  'userMessage':user_message};
						
						//Ajax post data to server
						$.post('contact_me.php', post_data, function(response){ 

							//load json data from server and output message    
							if(response.type == 'error')
							{
								var output = '
'+response.text+'
'; }else{ var output = '
'+response.text+'
'; //reset values in all input fields $('#contact_form input').val(''); $('#contact_form textarea').val(''); $('#email_error').hide(); } $("#result").hide().html(output).fadeIn(500); }, 'json'); } }); //reset previously set border colors and hide all message on .keyup() $("#contact_form input, #contact_form textarea").keyup(function() { $("#contact_form input, #contact_form textarea").css('border-color',''); $('#email_error').hide(); $("#result").slideUp(); });

Subscribe Form


This template includes a script that helps you to create a mailing list for notifying visitors about the website launch. Email addresses can be stored in your MailChimp list.

MailChimp

MailChimp is an online service that let's you to create, send and track email newsletters.

How to get an API Key

1] Log in to your MailChimp account or create one
2] Go to Account Settings > Extras > API keys
3] In Your API keys section click Create A Key button
4] Copy and paste it to notify-me.php file

How to get a List ID

1] Log in to your MailChimp account or create one
2] Go to Lists and choose an existing list or create a new one
3] Go to list's Settings > List name & Defaults
4] Copy and paste your List ID to notify-me.php file

Make sure that $STORE_MODE value is set to "mailchimp". As result, the beginning of your notify-me.php should look like this:

				
				// Set to "mailchimp" to store contacts in MailChimp or "file" to store in a file
				$STORE_MODE = "mailchimp";
				
				// Your MailChimp API Key
				$API_KEY = "51ra5f777afa21047180b942187216a7-us8";
				
				// Your MailChimp List ID
				$LIST_ID = "f018q6dabc";
		

If you have more questions regarding MailChimp service you can check their Knowledge Base.

Sources & Credits


Twitter Bootstrap framework
http://getbootstrap.com/

Fonts
http://www.google.com/fonts

Icons
Font-Awesome
http://fortawesome.github.io/Font-Awesome/

JQuery
http://jquery.com

Mailchimp
http://mailchimp.com/

Full Page
http://alvarotrigo.com/fullPage/

Background YouTube Video
http://www.seanmccambridge.com/tubular/

Youtube Video
http://www.youtube.com/watch?v=Cg4lEyWlm28

HTML5 Video
http://www.youtube.com/watch?v=CaKsEdaLek0&index=75&list=UUk0ICGtmgO3FvvjxD4tasdg

Image
http://www.imcreator.com/free

Pattern
http://thepatternlibrary.com/

Thanks


Once again, thanks for visiting this help facility.