1. Documentation
2. /HTML/
|-- assets
|-- | -- css/
|-- | -- images/
|-- | -- js/
|-- | -- plugins/
|-- php

/HTML/assets/css/ - CSS styles
/HTML/assets/images/ - all images needed by the template
/HTML/assets/js/scripts.js - controlls all loaded plugins on the website.
/HTML/assets/plugins/ - javascripts files (jquery plugins).

/HTML/php/ - contains the php files needed to send emails through contact form. All you have to do is to edit config.inc.php wih your settings (email server).

The template is based on Bootstrap Framework - http://getbootstrap.com/

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

	

	  
.col-md-1
	  
.col-md-1
	  
.col-md-1
	  
.col-md-1
	  
.col-md-1
	  
.col-md-1
	  
.col-md-1
	  
.col-md-1
	  
.col-md-1
	  
.col-md-1
	  
.col-md-1
	  
.col-md-1
	
	

	  
.col-md-8
	  
.col-md-4
	
	

	  
.col-md-4
	  
.col-md-4
	  
.col-md-4
	
	

	  
.col-md-6
	  
.col-md-6
	

If you need more info, please visit http://getbootstrap.com/css/#grid

W3C Valid
HTML code is fully valid on validator.w3.org.

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

- bootstrap.css - Generic styles, resets & normalization

- essentials.css - All website elements

- style.css - The layout structure - sliders, boxes, titles, etc...

- layout.css - The layout stylesheet

- color/ -  Folder containing colors

Google Fonts
Default Font is Open Sans.

The template uses some advanced jQuery functions.
Almost everything is controlled by scripts.js

If you want to add more jquery plugins, it's recommended to use your custom javascript file.


• Google Map
Edit conctact-us.html or any other contact/onepage file:

You can use this code anywhere, just change the coordonates to match your location.

• Javascript Structure

- scripts.js - main javascript
- countdown.js - used only by countdown layouts

Font Awesome gives you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with the power of CSS.

If you need more information, please visit http://fontawesome.io/.

Usage

...

View icons. Click the icon to copy/paste used class.

		

			

			
			

			

			


			

				


					
					

						

							
WE ARE AMUNRA
						

						

							
WE LOVE TO DESIGN
						
					

					
					
Bootstrap – Fully Responsive – Parallax – Elegant
					GET STARTED
				
			
		

Content Slider (carousel)

	
#item 1
	
#item 2
	
#item 3
	
#item N



class controlls-over 	= a class to show arros (left/right) on the center, over image

data-plugin-options:
	transitionStyle 	= fade, backSlide, goDown, fadeUp.

	autoPlay   			= "true", "false" or miliseconds - for example: data-autoplay="4000" means 4s delay
	pagination			= false/true - bullets

See Content Carousel for examples.

Magnific Popup is a jQuery script used for photos.
Not only does it support images, it also support videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox.

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device

USAGE

	IMAGE
	
		
	

	VIDEO
	
		
	

Documentation issue - please use single quotes instead of double quotes: data-plugin-options='{"type":"iframe"}'. Documentation convert the code in a wrong way!

Regarding contact form as main part of Contact Us section, only thing you need to do is to setup your email address.
Please open "/php/config.inc.php" file and edit with your own credentials.

PHPMailer is used to send emails - you need a valid email account that accept SMTP connections.

// SMTP Server Settings
$config['smtp_host'] 			= 'ssl://smtp.gmail.com';   // eg.: smtp.mandrillapp.com
$config['smtp_port'] 			= 465;						// eg.: 587
$config['smtp_user'] 			= ''; 						// you@gmail.com
$config['smtp_pass'] 			= '';						// password
$config['smtp_ssl']				= false;					// should remain false

// Who receive all emails?
$config['send_to']				= 'you@gmail.com';			// destination of all emails sent throught contact form

// Email Subject
$config['subject']				= 'Contact Form';			// subject of emails you receive

If something is not working, be sure that the port you use for SMTP conections, is not firewalled.
Example: gmail use port 465. Be sure that port 465 is not firewalled.
Also, check carefuly your /php/config.inc.php for errors or incorrect username,password, host or port.

Newsletter

php/newsletter.php is a newsletter script that write to a text file all subscriptions.
The file is named "_newsletter.txt" and can be found on the same folder.
Please note: "_newsletter.txt" must have write permission on your webserver.

You cand see the html code used here. Modal is used only to alert the visitor that the email has been recorded.
A good example of usage you can find on one of countdown layouts.

		
		

			


				


					
					

						
NOTIFY
						
Subscribe to our newsletter and get notified when website is launched.
					



					
					


						
						

							

								

									

										
										

										
										
											
											SUBSCRIBE
										
									
								
							
						
						

					

				

			
		
		

		
		

			

				


					

						×
						
 Subscribed
					

						


							

								Thank you for your subscription!
							

						

						

							OK, CLOSE
						

				

			

		
		

The template is set to use "orange" as default.

All skin colors are located on assets/css/color/
To use a different color, add this line after layout.css:

		RED COLOR EXAMPLE:
		

		
		

			
        
				
COLORS

				
            
					

					

					

					

					

					

					

				
        

				
×
			
		

		

		



		CSS LINES TO REMOVE ON PRODUCTION/DEVELOPMENT MODE
		
		
		
		
		
		
		
		
			
		
		

		
		JAVASCRIPT LINE TO REMOVE ON PRODUCTION/DEVELOPMENT MODE
		
		

Icons are retina redy, (font awsome).

Also, you can use all social icons that fontawsome supports. Please note: if you want rounded icons, add class 'rounded'
See Shortcodes for more!

This template is fully responsive.

	essentials.css useful classes:

		fsize11 - fsize20 					= font size 	%10
		w50, w100... w500 					= width 		%50
		font300, font400, font600, font700 	= font weight
		padding10, padding20 ... padding100 = padding 		%10

		TOP MARGINS CLASSES (used for top spacing):
			margin-top10
			margin-top20
			margin-top30
			margin-top40
			margin-top50
			margin-top60
			margin-top80
			margin-top100
			margin-top130
			margin-top150
			margin-top180
			margin-top200

		BOTTOM MARGINS CLASSES (used for bottom spacing):
			margin-bottom10
			margin-bottom20
			margin-bottom30
			margin-bottom40
			margin-bottom50
			margin-bottom60
			margin-bottom80
			margin-bottom100
			margin-bottom130
			margin-bottom150
			margin-bottom180
			margin-bottom200

		fixed				= position:fixed
		relative			= position:relative
		absolute			= position:relative
		nopadding			= padding:0
		nopadding-left		= padding-left:0
		nopadding-right		= padding-right:0
		nomargin			= margin:0
		nomargin-left		= margin-left:0
		nomargin-right		= margin-right:0
		noborder			= border:0
		lowercase			= text-transform:lowercase
		uppercase			= text-transform:uppercase
		no-text-transform	= text-transform:none
		italic				= font-style:italic
		pointer				= pointer:cursor
		block				= display:block
		bold				= font-weight:bold
		fullwidth			= width:100%
		spacer 				= margin-bottom:60x 	(
)

		raster				= a raster background, position absolute - to be used on slider or quotes
		overlay				= a 0.5 opacity overlay - to be used on slider or quotes
		dragCursor			= used mostly by carousels
		
		bs-callout bs-callout-danger	= blockquote type but not exactly a blockquote.
		bs-callout bs-callout-warning	= blockquote type but not exactly a blockquote.
		bs-callout bs-callout-info		= blockquote type but not exactly a blockquote.


		For more useful classes, see elements.css (05. Commons)

		animated span from bottom
		
		Available Javascript Effects (add to class):
			- animate_from_top
			- animate_from_bottom
			- animate_from_left
			- animate_from_right
			- animate_fade_in