Bootstrap Grid System

This Template has a Responsive layout and is based on the Bootstrap Framework. For more information about the grid please visit Bootstrap Site
The theme is divided in sections.

							

				            	

				                	

				                    	YOUR CODES GOES HERE
				                    
				                
				            
				        

Our you can use the grid system with 2 columns like this;

							

				            	

				                	

				                    	YOUR CODES GOES HERE
				                    
				                	

				                    	YOUR CODES GOES HERE
				                    
				                
				            
				        

Our you can use the grid system with 3 columns like this;

							

				            	

				                	

				                    	YOUR CODES GOES HERE
				                    
				                	

				                    	YOUR CODES GOES HERE
				                    
				                	

				                    	YOUR CODES GOES HERE
				                    
				                
				            
				        

CSS file

							#General and Typography
							#Preloader
							#Navigation
							#Logo
							#Main Slider
							#Section - Services
							#Section - Callout
							#Section - About us
							#Section - Team
							#Section - Activities
							#Section - Gallery
							#Section - Blog
							#Section - Prices
							#Section - Call to Action
							#Section - Contact
							#Section - Footer
							#Miscellaneous
							#Media Queries
				        

Boxed and Full Width layout

You have the option to use this theme boxed ot full,the default value is 'full',change this class to 'boxed' to have a boxed theme.

Layerslider

This theme uses Layerslider in the header, to read the documentation and learn how to insert slides, layers and effects Click here.

                        
                        

                        
                        
                        
                        
                        
                        

                        
Welcome to Alphabet
                        
 Alphabet is a Super Fun Daycare / Children HTML Theme including many Elements 
                        
                        

                        Contact us
                        
                        
                        
                        
                        
							 
                        

Using Google Calendar

This template uses a calendar script that syncs with your Google Calendar, so every event added in your Google Calendar will show in this template calendar. To integrate it to your calendar follow these steps:

1. Login in the Google Account that you have a Calendar you wish to use, then Go to the Google Developer Console and create a new project clicking on "create project"
2. Once the project is created, go to "APIs & Services" page and click on the top button "Enable APIs and services"
3. Find the api for "Google Calendar API", click on it and then click on the button "enable"
4. In the next page click on "Credentials" on the sidebar, then you will see a text with a link that says " To view all credentials or create new credentials visit Credentials in APIs & Services" click on this link.
5. In the next page click on the top button "Create Credentials" and select "Api Key". Copy the Api Key.
6. (Optional Step) For security purposes you can restrict your API Key to your site adress use only, clicking on "restrict key", you can read more abour restricting you key here
7. now go to your Google Calendar page, and on the sidebar you will find your calendar under "my calendars", hover the calendar name and click on the 3 little dots on the left and choose "settings and sharing"
8. on the settings page scroll down to "Access permissions" and select "Make available to public"
9. Scroll down in the same page and you will find the Calendar ID under "Integrate Calendar",t will look something like “abcd1234@group.calendar.google.com”
10. Now that you have your Api Key and Calendar ID, Open calendar_edit.js file inside js folder and replace the API Key and Calendar ID on this file

	
                        //Google API key:
                        googleCalendarApiKey: 'YourAPIkeyHere',
                        // Calendar ID:
                        events: 'yourID@group.calendar.google.com',
                        

You can also change the language of your Calendar by changing the line bellow, the Calendar uses english by default, for other languages you can use for example "es" for Spanish, "pt" for Portuguese, "ru" for Russian.

                        //Language:
                        locale: 'en',
                        

Newsletter with Mailchimp Integration

The Newsletter form in this theme includes Mail Chimp integration,to integrate with your existing campaign,just open all yout HTML files and find the newsletetr form in the bottom, and replace the address by your own mail list address.

---

Contact Form

Contact form will use php to send emails. Open the file sendmail.php located inside the php folder and change the example email found in the line 4 and your form is ready to use.

                        = "youremail@email.com"; //Recipient email, Replace with own email here
                        

Maps

To change the Maps section with your own location you can use this website to find your own latitude and longitude: http://www.latlong.net/ then you can replace the longitude and latitude numbers in the file main.js located inside the js folder on the line 12.

                        //Open street  Map
                        var coord = [40.738270, -74.008911]; // <--- coordinates here
                        

---

Icons

This theme includes over 800 icons from Glyphicons , FontAwesome 4.3 , and Flat Icons you can click in each link to find the icon map, to change the icons just replace with the icon name you want.

---

Fonts

The fonts used in this theme are from Google Fonts, the fonts are Alegreya Sans and Lato

Sections with Background Color

The sections that have a background color are using 'class="color-section"' ,to add color to other sections just include this class in the section element like in the example bellow:

---

Parallax Scrolling Animations

This theme uses Skrollr for scrolling animations.

You can understand better the Skrollr Animations with the image bellow:

image by I hate Tomatoes

---

Images

All the placeholder images are located in the img folder,for better performance is recommended to use a image optimizer like Compressjpeg to make your site load faster.

---

Video Header

To use the video header version just put your videos inside the folder 'videos', It is recommended to have the video both in webm and mp4 formats. A placeholder image can be used in case the video doesn't load.

The video used in the preview you can find at Videohive.

---

Ilustrations

The Illustrations included are from Freepik.

---

Elements

All the Elements demo are in the elements.html file, just copy and paste the elements you want to use.