Version: 2.0 | Dated: 9 February 2017

Good Day!

Thank you for choosing our template - California. If you have any questions please feel free to submit a ticket here.

Installation

Follow the steps below to get started with your Site Template:

  1. Open the Product/HTML Folder to find all the Templates Files
  2. You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
  3. Make sure you upload the required files/folders listed below:
    • HTML/assets/css - Extra Stylesheets Folder
    • HTML/assets/images - Images Folder
    • HTML/assets/js - Javacripts Folder
    • HTML/assets/lib - Library Folder
    • HTML/assets/scss - SCSS Folder
    • HTML/php - Required PHP Functions Folder
    • HTML/index.html - Index File/Homepage
    The other files can be used according to your preferences.
  4. You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

HTML Structure

California follows a simple coding structure.

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>

	<!-- Your Stylesheets, Favicons & Title
	============================================= -->
	...

</head>
<body data-spy="scroll" data-target="#main-nav-collapse" data-offset="100">

	<!-- Wrapper & Preloader
	============================================= -->
	<div id="zwrapper" class="zwrapper animsition" data-animsition-in-class="fade-in" data-animsition-in-duration="1000" data-animsition-out-class="fade-out" data-animsition-out-duration="800" data-page-loader-text="california">

		<!-- Navbar
		============================================= -->
		<section id="topNavBar" class="nav-wrapper">

			...

		</section>

		<!-- Header
		============================================= -->
		<header id="site-header">

			...

		</header>

		<!-- Content blocks
		============================================= -->
		<section id="content">

			<div class="section-content">

				<div class="container">

					...

				</div>

			</div>

		</section>

		<!-- Footer Widgets
		============================================= -->
		<footer id="footer-widgets" class="footer-widgets">
		    <div class="container">
		        
		        ...


		    </div>
		</footer> <!-- /.footer -->

		<!-- Footer
		============================================= -->
		<footer id="footer" class="footer">
		    <div class="container">
		        <div class="row">
		            <div class="col-md-6 col-sm-6">
		                <p class="copyright text-xs-center">© 2015 Your company name</p>
		            </div>
		            <div class="col-md-6 col-sm-6">
		                <p class="footer-menu text-xs-center">
		                    <a href="">Terms & Conditions</a> | <a href="#">Privacy Policy</a>
		                </p>
		            </div>
		        </div>
		    </div>
		</footer> <!-- /.footer -->

	</div>


<!-- Offcalifornia Elements
============================================= -->

...

<!-- Javascripts
============================================= -->
...

</body>
</html>

Layout Settings

This Theme Supports both Boxed & Full-Width Layouts.


Adding the class .container-fluid to the <div> after section tag will turn your website into a Full-width Layout:

<div class="container-fluid">

Adding the class .container to the <div> after section tag will turn your website into a Boxed Layout:

<div class="container">

Grid System

Bootstrap grid system is used in this template.

Bootstrap Grid

.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-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-4
.col-md-4
.col-md-4
.col-md-5
.col-md-5
.col-md-2
.col-md-6
.col-md-6
.col...1
.col-md-11
.col-md-2
.col-md-10
.col-md-3
.col-md-9
.col-md-4
.col-md-8
.col-md-5
.col-md-7

See More To see details vist Bootstrap.

Block Structure

California follows a simple coding structure. here is the sample of a single block:

<!-- Content blocks
============================================= -->
<section id="content" class="section ... background(optional)">
	
<header>

	...

</header>

	<div class="section-content">

		<div class="container">

			<div class="row">
				<div class="col-md-x">

					...

				</div>
				<div class="col-md-x">

					...

				</div>
				<div class="col-md-x">

					...

				</div>

			</div>

		</div>

	</div>

</section>

Page Loading Transitions

You can show Interactive loaders to your Visitors while the Pages of you Website loads in the background & then Reveal your Pages with CSS3 Transitions. Page Loading Transitions are enabled by default.

See More For details vist ANIMSITION.

Color Schemes

You can change your Website's Color Scheme in an instant. You simply need to do the following.

  1. Decide that which color scheme do you want.
  2. Go to the assets/css/colors folder.
  3. If you choice one of our color, then include that color file after main.css file.
  4. <head>
    
    	...
    
    	<link rel="stylesheet" href="assets/css/main.css">
    
    	<!-- Here goes your colors
    	============================================= -->
    	<link rel="stylesheet" href="assets/css/colors/....css">
    
    </head>
  5. But if you want a new color scheme you have to create your new color file in that css/colors folder. In that file you have to paste the same code like other color css file and after that change all color code of your own.
    Or, Go to the assets/scss/colors folder. Create your scss file and give your color code in the variable $baseColor like other color scss file. Compile that scss file. New color css file will be generated in assets/css/colors folder with the same name. Include that css file in #head like before.
    Congratulations!!! You will find your color scheme.

Changing Fonts

Change your Fonts on the Fly as we have included a css/fonts.css file to manage the custom fonts you include with ease. By default, California uses 2 Fonts namely: Montserrat & Source Sans Pro from the Google Fonts Library. You can find the Linking to the Font Files in the head tag of all the .html files.

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,700'>

In order to change the Fonts, you will need to Edit the Above Links with your Custom Font if you plan to use a Google Font or Remove it complete if you plan to use a Self Hosted font. Here is an Example for using Self Hosted Fonts.

You can now be able to change the Font Names in the css/main.css File.

Setting up SCSS file

All scss files are included in assets/scss folder. In main.scss file, all scss files are included individually. You can generate your main.css file by compiling that main.scss file

Setting RTL (Right To Left)

You can simply convert your page to RTL. For this you have to replace main.css with main-rtl.css
It's easy :-)

Multi Page Navbar

From this navigation menu one can easily find all other pages of your website.

	<section id="topNavBar" class="nav-wrapper">
		<div class="container-fluid">
			<div id="menuzord" class="menuzord red">
				<a href="page-link" class="menuzord-brand">
					<img style="height: 50px;" src="assets/images/Logos/1-w.png" alt="california">
				</a>
				<ul class="menuzord-menu">
					<li class="active"><a href="page-link">Home</a>
						...
					</li>
					<li><a href="page-link">Pages</a>
						...
					</li>
					<li><a href="page-link">Portfolio</a>
						...
					</li>
					<li><a href="page-link">Blog</a>
						...
					</li>
					<li><a href="page-link">Shop</a>
						...
					</li>
					<li><a href="page-link">Features</a>
						...
					</li>
				</ul>
			</div>
		</div>
	</section> <!--/nav-wrapper-->

Dropdowns

You can show many pages under a catagory by dropdowns. We have used 3 level dropdown. Simply you have to use class="dropdown" in where you want to use dropdown. Here is the sample:

	<li><a href="#">Pages</a>
		<ul class="dropdown">
			<li><a href="page-link">Blank Page</a></li>
			<li><a href="page-link">About Us</a></li>
			<li><a href="page-link">Services</a></li>
			<li><a href="#">Pricing</a>
				<ul class="dropdown">
					<li><a href="page-link">2 Columns</a></li>
					<li><a href="page-link">3 Columns</a></li>
					<li><a href="page-link">4 Columns</a></li>
				</ul>
			</li>
			<li><a href="page-link">FAQ</a></li>
			<li><a href="page-link">Contact</a></li>
			<li><a href="gallery.html">Gallery</a>
				<ul class="dropdown">
					<li><a href="#">Full Width</a>
						<ul class="dropdown">
							<li><a href="page-link">3 Columns</a></li>
							<li><a href="page-link">4 Columns</a></li>
							<li><a href="page-link">5 Columns</a></li>
							<li><a href="page-link">6 Columns</a></li>
							<li><a href="page-link">7 Columns</a></li>
							<li><a href="page-link">8 Columns</a></li>
						</ul>
					</li>
					<li><a href="#">Full Width Gutter</a>
						<ul class="dropdown">
							<li><a href="page-link">3 Columns</a></li>
							<li><a href="page-link">4 Columns</a></li>
							<li><a href="page-link">5 Columns</a></li>
							<li><a href="page-link">6 Columns</a></li>
							<li><a href="page-link">7 Columns</a></li>
							<li><a href="page-link">8 Columns</a></li>
						</ul>
					</li>
					<li><a href="#">Boxed</a>
						<ul class="dropdown">
							<li><a href="page-link">1 Columns</a></li>
							<li><a href="page-link">2 Columns</a></li>
							<li><a href="page-link">3 Columns</a></li>
							<li><a href="page-link">4 Columns</a></li>
							<li><a href="page-link">5 Columns</a></li>
							<li><a href="page-link">6 Columns</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="page-link">Sitemap</a></li>
		</ul>
	</li>

Mega Menu

You can decorate your mega-menu in 4,5,6 or any other column as you wish. You have to simply use some class called megamenu, megamenu-row and mega-sub-menu. The following is saple code:

	<li><a href="#">Portfolio</a>
		<div class="megamenu">
			<div class="megamenu-row row">
				<div class="col-md-4 hidden-xs">
					<img src="assets/images/Others/nav_portfolio.png" alt="">
				</div>

				<div class="col-md-8">
					<div class="row">
						<div class="col-md-5th">
							<h5>Full Width</h5>
							<ul class="mega-sub-menu">
								<li><a href="page-link" title="">2 Columns</a></li>
								<li><a href="page-link" title="">3 Columns</a></li>
								<li><a href="page-link" title="">4 Columns</a></li>
								<li><a href="page-link" title="">5 Columns</a></li>
								<li><a href="page-link" title="">6 Columns</a></li>
							</ul>
						</div>
						<div class="col-md-5th">
							<h5>Bordered</h5>
							<ul class="mega-sub-menu">
								<li><a href="page-link" title="">2 Columns</a></li>
								<li><a href="page-link" title="">3 Columns</a></li>
								<li><a href="page-link" title="">4 Columns</a></li>
								<li><a href="page-link" title="">5 Columns</a></li>
								<li><a href="page-link" title="">6 Columns</a></li>
							</ul>
						</div>
						<div class="col-md-5th">
							<h5>Boxed</h5>
							<ul class="mega-sub-menu">
								<li><a href="page-link" title="">2 Columns</a></li>
								<li><a href="page-link" title="">3 Columns</a></li>
								<li><a href="page-link" title="">4 Columns</a></li>
								<li><a href="page-link" title="">5 Columns</a></li>
								<li><a href="page-link" title="">6 Columns</a></li>
							</ul>
						</div>
						<div class="col-md-5th">
							<h5>Standard</h5>
							<ul class="mega-sub-menu">
								<li><a href="page-link" title="">2 Columns</a></li>
								<li><a href="page-link" title="">3 Columns</a></li>
								<li><a href="page-link" title="">4 Columns</a></li>
								<li><a href="page-link" title="">5 Columns</a></li>
								<li><a href="page-link" title="">6 Columns</a></li>
							</ul>
						</div>
						<div class="col-md-5th">
							<h5>Single</h5>
							<ul class="mega-sub-menu">
								<li><a href="page-link" title="">Featured Image</a></li>
								<li><a href="page-link" title="">Featured Slider</a></li>
								<li><a href="page-link" title="">Featured Video</a></li>
								<li><a href="page-link" title="">Featured Carousel</a></li>
								<li><a href="page-link" title="">With Sidebar</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</li>

One Page Navbar

This navbar is generally used in one-page site. Navbar is fixed in the top. You can go to the desired section by clicking links. Here is the sample code:

	<section id="topNavBar" class="nav-wrapper">
		<div class="container-fluid">
			<div id="menuzord" class="menuzord">
				<a href="#" class="menuzord-brand">
					<img style="height: 50px;" src="assets/images/Logos/1-w.png" alt="california">
				</a>
				<ul class="menuzord-menu">
					<li class="active"><a href="#top">Home</a></li>
					<li><a href="#about">About</a></li>
					<li><a href="#services">Services</a></li>
					<li><a href="#portfolio">Portfolio</a></li>
					<li><a href="#team">Team</a></li>
					<li><a href="#pricing">Pricing</a></li>
					<li><a href="#blog">Blog</a></li>
					<li><a href="#contact">Contact</a></li>
					<li style="height: 1px" class="scrollable-fix">
						
					</li>
				</ul>
			</div>
		</div>
	</section><!--/nav-wrapper-->

Dot Navbar

The Sample code:

	<div data-spy="affix" id="dotNav" class="dotnav">
		<ul>
			<li class="active"><a class="onPageNav" href="#site-header">Home</a></li>
			<li><a class="onPageNav" href="#about" title="About">About</a></li>
			<li><a class="onPageNav" href="#services" title="Services">Services</a></li>
			<li><a class="onPageNav" href="#portfolio" title="Portfolio">Portfolio</a></li>
			<li><a class="onPageNav" href="#team" title="Team">Team</a></li>
			<li><a class="onPageNav" href="#pricing" title="Pricing">Pricing</a></li>
			<li><a class="onPageNav"href="#blog" title="Blog">Blog</a></li>
			<li><a class="onPageNav" href="#contact" title="Contact">Contact</a></li>
		</ul>
	</div>

Fullscreen Navbar

The Sample code:

	<a href="#cd-nav" class="cd-nav-trigger">Menu 
		<span class="cd-nav-icon"></span>

		<svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">
			<circle fill="transparent" stroke="#ffffff" stroke-width="2" cx="27" cy="27" r="25" stroke-dasharray="157 157" stroke-dashoffset="157"></circle>
		</svg>
	</a>


	<div id="cd-nav" class="cd-nav">
		<div class="cd-navigation-wrapper">
			<div class="cd-half-block">
				<h5>Navigation</h5>

				<nav>
					<ul class="cd-primary-nav">
						<li><a href="#team" class="selected">The team</a></li>
						<li><a href="#services">Our services</a></li>
						<li><a href="#portfolio">Our projects</a></li>
						<li><a href="#0">Start a project</a></li>
						<li><a href="#0">Contact us</a></li>
					</ul>
				</nav>
			</div><!-- .cd-half-block -->
			
			<div class="cd-half-block">
				<address>
					<ul class="cd-contact-info">
						<li><a href="mailto:info@myemail.co">info@myemail.co</a></li>
						<li>0244-12345678</li>
						<li>
							<span>MyStreetName 24</span>
							<span>W1234X</span>
							<span>London, UK</span>
						</li>
					</ul>
				</address>
			</div> <!-- .cd-half-block -->
		</div> <!-- .cd-navigation-wrapper -->
	</div> <!-- .cd-nav -->

Navbar Styles

We have used 3 kind of navbar styles. They are:

Style Class Name Sample Code Purpose
Solid .solid
	<section id="topNavBar" class="nav-wrapper solid">
		<div class="container-fluid">
			...
Navbar background is solid black. Parts below that navbar will not be shown.
Transparent .transparent
	<section id="topNavBar" class="nav-wrapper transparent">
		<div class="container-fluid">
			...
Navbar background is transparent. One can easily see the parts below navbar.
Semi Transparent .semi-transparent
	<section id="topNavBar" class="nav-wrapper semi-transparent">
		<div class="container-fluid">
			...
Navbar background is semi-transparent. One can see the parts lightly below navbar.

Portfolio Filter

We have used Isotope to filter portfolio items

Here is the sample of filter:

	<ul class="portfolio-filter">
        <li class="active"><a class="btn btn-sm" href="#" data-filter="*"> All</a></li>
        <li><a class="btn btn-sm" href="#" data-filter=".printMedia">printing</a></li>
        <li><a class="btn btn-sm" href="#" data-filter=".webDesign">Web</a></li>
        <li><a class="btn btn-sm" href="#" data-filter=".illustrations">illustration</a></li>
        <li><a class="btn btn-sm" href="#" data-filter=".multiMedia">multiMedia</a></li>
        <li><a class="btn btn-sm" href="#" data-filter=".crafts">crafts</a></li>
    </ul>

For Details about filtering it is better to visit this site.

Setting Portfolio Items

In portfolio we have used 5 kinds of grid-system with the combination of 4 kinds of layout. They are:

Column Number Sample Code
2 Column without gutter col-2
2 Column with gutter col-2 gutter
3 Column without gutter col-3
3 Column with gutter col-3 gutter
4 Column without gutter col-4
4 Column with gutter col-4 gutter
5 Column without gutter col-5
5 Column with gutter col-5 gutter
6 Column without gutter col-6
6 Column with gutter col-6 gutter

For Different layout you have to follow same rule like before .

Here is the sample of setting portfolio items:

	<div class="portfolio-item your-data-filter-class">
	    <div class="thumb">
	        <img src="assets/images/portfolio/masonry/original/7.jpg" alt="">
	        <div class="portfolio-hover">
	            <div class="action-btn">
	                <a href="portfolio-single.html"> 
	                    <i class="icon-basic_link"></i>  
	                </a>
	            </div>
	            <div class="portfolio-description">
	                <h5><a href="portfolio-single.html">External link</a></h5>
	                <p><a href="#">category 1</a> , <a href="#">category 2</a> </p>
	            </div> <!-- /.portfolio-description -->
	            
	        </div> <!-- /.portfolio-hover -->
	    </div> <!-- /.thumb -->
	</div>  <!-- /.portfolio-item -->

For Details about filtering it is better to visit this site.

Working Contact Form

Open the file ./php/contact-form.php and enter your data:

// Your email
$to = 'info@themewagon.com';
$subject = 'Contact Form : California - Responsive Multiporpuse HTML5 Website Template';

If Contact form form not working

You need to check is PHP mail() function working.

  • Save this code as mailtest.php
  • change you@yourmail.com to your e-mail address
  • upload mailtest.php to your server
  • open mailtest.php in your browser (http://yourwebsite.com/mailtest.php)
  • check your inbox to see if a test message arrived.
If it works:
  • double-check your form script for errors (like e-mail address misspelling)
  • use the same e-mail address as your form recipient
  • double-check your SPAM filters and SPAM/Junk/Bulk mailboxes
If it not

Contact your host and ask them to check PHP mail() setting.

Configuring Mailchimp

Open the file ./php/subscribe.php and enter your data:

// MailChimp
$APIKey = '53bb3bcad3947b9c5b45884b439097f4-us3';
$listID = 'fd1b8baf3f;
Grab your List's Unique Id by going to http://admin.mailchimp.com/lists/

PLEASE DO NOT USE THE EXISTING API KEY OR LIST ID

Google Map

Recently Google has changed the system. One must have an API key for a domain to show google map in any website of that domain. So you have to create an API key for your website to take this service of google.

In our template, you will find the script for google map, added in the bottom of the file like following:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
								

Please change that line like this

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false" type="text/javascript"></script>
								

For more to know, following links will help you more to get the API key for google map for your site.

Google Map is used in contact section. The code is in main.js. You can change your latitude and longitude from there in Line 440.

To move your map marker in center, you have to substract some longitude, which have been done in Line 441. We used our longitude -73.9400 to show -74.2000.

	/*===================================
	    Google Map
	 ===================================*/

	(function(){

	    if($("#map").length == 0 || typeof google == 'undefined') return;

	    // When the window has finished loading create our google map below
	    google.maps.event.addDomListener(window, 'load', init);

	    var mkr = new google.maps.LatLng(40.6700, -74.2000);
	    var cntr = (isMobile) ? mkr : new google.maps.LatLng(40.6700, -73.9400);

	    function init() {
	        // Basic options for a simple Google Map
	        // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
	        var mapOptions = {
	            // How zoomed in you want the map to start at (always required)
	            zoom: 11,
	            scrollwheel: false,
	            // The latitude and longitude to center the map (always required)
	            center: cntr, // New York

	            // How you would like to style the map.
	            // This is where you would paste any style found on Snazzy Maps.
	            styles: [
	                {
	                    "featureType": "all",
	                    "elementType": "geometry.fill",
	                    "stylers": [
	                        {
	                            "visibility": "on"
	                        },
	                        {
	                            "saturation": "-11"
	                        }
	                    ]
	                },
	                {
	                    "featureType": "administrative",
	                    "elementType": "geometry.fill",
	                    "stylers": [
	                        {
	                            "saturation": "22"
	                        }
	                    ]
	                },
	                {
	                    "featureType": "administrative",
	                    "elementType": "geometry.stroke",
	                    "stylers": [
	                        {
	                            "saturation": "-58"
	                        },
	                        {
	                            "color": "#cfcece"
	                        }
	                    ]
	                },
	                {
	                    "featureType": "administrative",
	                    "elementType": "labels.text",
	                    "stylers": [
	                        {
	                            "color": "#f8f8f8"
	                        }
	                    ]
	                },
	                {
	                    "featureType": "administrative",
	                    "elementType": "labels.text.fill",
	                    "stylers": [
	                        {
	                            "color": "#999999"
	                        },
	                        {
	                            "visibility": "on"
	                        }
	                    ]
	                },
	                {
	                    "featureType": "administrative",
	                    "elementType": "labels.text.stroke",
	                    "stylers": [
	                        {
	                            "visibility": "on"
	                        }
	                    ]
	                },
	                {
	                    "featureType": "administrative.country",
	                    "elementType": "geometry.fill",
	                    "stylers": [
	                        {
	                            "color": "#f9f9f9"
	                        },
	                        {
	                            "visibility": "simplified"
	                        }
	                    ]
	                },
	                {
	                    "featureType": "landscape",
	                    "elementType": "all",
	                    "stylers": [
	                        {
	                            "color": "#f2f2f2"
	                        }
	                    ]
	                },
	                {
	                    "featureType": "landscape",
	                    "elementType": "geometry",
	                    "stylers": [
	                        {
	                            "saturation": "-19"
	                        },
	                        {
	                            "lightness": "-2"
	                        },
	                        {
	                            "visibility": "on"
	                        }
	                    ]
	                },
	                {
	                    "featureType": "poi",
	                    "elementType": "all",
	                    "stylers": [
	                        {
	                            "visibility": "off"
	                        }
	                    ]
	                },
	                {
	                    "featureType": "road",
	                    "elementType": "all",
	                    "stylers": [
	                        {
	                            "saturation": -100
	                        },
	                        {
	                            "lightness": 45
	                        }
	                    ]
	                },
	                {
	                    "featureType": "road.highway",
	                    "elementType": "all",
	                    "stylers": [
	                        {
	                            "visibility": "simplified"
	                        }
	                    ]
	                },
	                {
	                    "featureType": "road.arterial",
	                    "elementType": "labels.icon",
	                    "stylers": [
	                        {
	                            "visibility": "off"
	                        }
	                    ]
	                },
	                {
	                    "featureType": "transit",
	                    "elementType": "all",
	                    "stylers": [
	                        {
	                            "visibility": "off"
	                        }
	                    ]
	                },
	                {
	                    "featureType": "water",
	                    "elementType": "all",
	                    "stylers": [
	                        {
	                            "color": "#d8e1e5"
	                        },
	                        {
	                            "visibility": "on"
	                        }
	                    ]
	                },
	                {
	                    "featureType": "water",
	                    "elementType": "geometry.fill",
	                    "stylers": [
	                        {
	                            "color": "#dedede"
	                        }
	                    ]
	                },
	                {
	                    "featureType": "water",
	                    "elementType": "labels.text",
	                    "stylers": [
	                        {
	                            "color": "#cbcbcb"
	                        }
	                    ]
	                },
	                {
	                    "featureType": "water",
	                    "elementType": "labels.text.fill",
	                    "stylers": [
	                        {
	                            "color": "#9c9c9c"
	                        }
	                    ]
	                },
	                {
	                    "featureType": "water",
	                    "elementType": "labels.text.stroke",
	                    "stylers": [
	                        {
	                            "visibility": "off"
	                        }
	                    ]
	                }
	            ]
	        };

	        // Get the HTML DOM element that will contain your map
	        // We are using a div with id="map" seen below in the 
	        var mapElement = document.getElementById('map');

	        // Create the Google Map using our element and options defined above
	        var map = new google.maps.Map(mapElement, mapOptions);

	        // Let's also add a marker while we're at it
	        var marker = new google.maps.Marker({
	            position: mkr,
	            map: map,
	            title: 'Snazzy!'
	        });
	    }

	})();

Count Up

Count Up is used in funfactsection. You can control the speed via javascript. In main.js at Line 952, you have found a property called duration. You can change it as your wish.

Here is the sample code:

	/*===================================
	    Fun Facts
	 ===================================*/


	(function () {
	    if(!$('#funfacts').html()) return;
	    var inview = new Waypoint.Inview({
	        element: $('#funfacts')[0],
	        enter: function (direction) {
	            $('.fact-number').each(function () {
	                $(this).prop('Counter', 0).animate({
	                    Counter: $(this).text()
	                }, {
	                    duration: 3000,
	                    easing: 'swing',
	                    step: function (now) {
	                        $(this).text(Math.ceil(now));
	                    }
	                });
	            });
	            this.destroy();
	        }
	    });

	})();

Count Down

Counts Down is used in Coming Soonpage. You can control it by changing the date & time. In main.js at line 679 you have found the date and time.

Here is the sample code:

	/*===================================
	    Countdown Coming Soon
	 ===================================*/

	$(document).ready(function(){
	    if($(".container-countdown").length == 0) return;

	    $('.container-countdown').countdown({
	        date: "December 13, 2017 00:00:00",
	        render: function(data) {
	            var el = $(this.el);
	            el.empty()
	                .append("<div class='countdown-box'><span class='counter'>" + this.leadingZeros(data.days, 2) + "</span><h6>Days</h6></div>")
	                .append("<div class='countdown-box'><span class='counter'>" + this.leadingZeros(data.hours, 2) + "</span><h6>Hours</h6></div>")
	                .append("<div class='countdown-box'><span class='counter'>" + this.leadingZeros(data.min, 2) + "</span><h6>Minutes</h6></div>")
	                .append("<div class='countdown-box'><span class='counter'>" + this.leadingZeros(data.sec, 2) + "</span><h6>Seconds</h6></div>");
	        }
	    });
	});

Instafeed

Instafeed is a javascript plugin for instagram feed.

Here is the sample code:

	/*=====================================================
	    Instagram Feed
	========================================================*/

	(function(){

	    if($("#instafeed").length == 0) return;

	    var feed = new Instafeed({
	        get: 'tagged',
	        tagName: 'nature',
	        limit: 6,
	        clientId: 'fa06c7e2c5d24947907f097b79d0f99a'
	    });
	    feed.run();


	})();

Note: For detais you can visit thissite

Tabs & Accordions

Tabs

We simply follow Bootstrap tabs. Sample code is here:

	<ul class="nav nav-tabs" role="tablist">
        <li class="active">
            <a href="#tab1" role="tab" data-toggle="tab">Tab 1</a>
        </li>
        <li>
            <a href="#tab2" role="tab" data-toggle="tab">Tab 2</a>
        </li>
        <li>
            <a href="#tab3" role="tab" data-toggle="tab">Tab 3</a>
        </li>
    </ul>

    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="tab1">
            .....
        </div>

        <div class="tab-pane fade" id="tab2">
            .....
        </div>

        <div class="tab-pane fade" id="tab3">
            .....
        </div>
    </div>

Accordions

We simply follow Bootstrap accordions. Sample code is here:

	<div class="panel-group" id="accordion">
	    <div class="panel panel-default">
	        <div class="panel-heading">
	            <h4 class="panel-title">
	                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Will my earnings from my clients on themewagon be separate?</a>
	            </h4>
	        </div>
	        <div id="collapseOne" class="panel-collapse collapse in">
	            <div class="panel-body">
	                ...
	            </div>
	        </div>
	    </div>
	    <div class="panel panel-default">
	        <div class="panel-heading">
	            <h4 class="panel-title">
	                <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">I've been logged out and don't know my password. How do I reset it?</a>
	            </h4>
	        </div>
	        <div id="collapseTwo" class="panel-collapse collapse">
	            <div class="panel-body">
	                ...
	            </div>
	        </div>
	    </div>
	    <div class="panel panel-default">
	        <div class="panel-heading">
	            <h4 class="panel-title">
	                <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Why payment method do you accept?</a>
	            </h4>
	        </div>
	        <div id="collapseThree" class="panel-collapse collapse">
	            <div class="panel-body">
	                ...
	            </div>
	        </div>
	    </div>
	</div> <!-- /#accordion -->

Icons

3 types of icon sets are used in CALIFORNIA. They are:

Libraries

Libraries are those which we called bower components. Either javascript or css or both are included in these libraries

  • Animsition - A simple and easy jquery plugin for css animated page transitions
  • Bootstrap - Most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
  • Bootstrap 3 RTL - RTL Theme for Bootstrap v3.x.
  • Modernizr - Respond to user’s browser features.
  • Countdown - Simple, lightweight and easy to use jQuery countdown plugin
  • FlexSlider - An awesome, fully responsive jQuery slider toolkit.
  • Font Awesome - The iconic font and CSS toolkit
  • Imagesloaded - Detect when images have been loaded.
  • Instafeed - A simple Instagram javascript plugin.
  • ionIcon - The premium icon font for Ionic framework.
  • Isotope - Filter & sort magical layouts.
  • Isotope-fit-columns - fitColumns layout mode for Isotope.
  • Isotoope-Packery - Packery layout mode for Isotope
  • jQuery - jQuery JavaScript Library.
  • jquery.mb.YTPlayer - A custom yutube player for a video as background on jQuery framework
  • LightGallery - A customizable, modular, responsive, lightbox gallery plugin for jQuery.
  • Magnific-Popup - Light and responsive lightbox script with focus on performance.
  • OwlCarousel - Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
  • Packery - Bin-packing layout library.
  • Parallax - Simple parallax scrolling effect.
  • Particles.js - A lightweight JavaScript library for creating particles
  • Simple Text Rotator - Add a super simple rotating text to your website with little to no markup.
  • Vide - Easy as hell jQuery plugin for video backgrounds.
  • Waypoints - Makes it easy to execute a function whenever you scroll to an element.

PHP

MailChimp

Initial Release V1.0

Released on 20 November, 2015