HTML and CSS Structure #back to top

Bootstrap Grid System

This Template has a Responsive layout and is based on the Bootstrap Framework v4 For more information about the grid please visit Bootstrap Website.

							
YOUR CODES GOES HERE

Grid system with 2 columns:

							
YOUR CODES GOES HERE
YOUR CODES GOES HERE

Grid system with 3 columns:

							
YOUR CODES GOES HERE
YOUR CODES GOES HERE
YOUR CODES GOES HERE

CSS File

The CSS file is divided in sections:

	#General and Typography
	#Preloader
	#Navigation
	#Headers
	#Testimonials
	#Call to action
	#About
	#Pricing Tables
	#Team	
	#Services
	#Image Galleries
	#Contact	
	#Blog Pages
	#Services
	#Footer
	#Miscellaneous
	#Media queries
				        

Template Options#back to top

Template elements

To see the elements included on the template,please visit the elements page

Color Skins

In the top of the HTML files you can find the lines below

						
                        
							

The color skin maincolors.css is the default, to use other color scheme simply rename the color scheme you want to use to maincolors. The color skins can be found inside the folder Styles.


Main Colors
Agility
Vet
Woof
Paws
Puppy

Extras#back to top

Map

To change the Open street Map section with your own location you can use This website to find your own latitude and longitude, then you can replace the longitude and latitude numbers in the file map.js located inside the js folder.

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

Contact Form

The 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
						
Form not sending?

Be sure that your webhost has PHP sendmail enabled


Video Sections

This template include a page with a video header and video call to action. To use it, choose a mp4 video and put it inside the "video" folder and link it in the div,you can also choose a image to use as a placeholder in case the video doesnt load.

					  
					

Youtube Video embed

To embed a youtube video in the template just follow this code below and replace the zeros by your youtube video ID, you can find the ID in the video address. For example https://www.youtube.com/watch?v=FOLHgoRcMHU

				 

Newsletter with Mailchimp Integration

The Newsletter form in this template includes MailChimp integration, to integrate with your existing campaign just open the page files and replace the address by your own mail list address.

						  

Fonts

The font used in this template is from Google Fonts, the fonts name is Nunito


Images

The images used in the preview are from Istock and Freepik.

For better performance is recommended to use a image optimizer like TinyJPG to make your site load faster.


Logo

The logo used in the demo is included in editable Photoshop file (psd), it can be found in the Img folder as logo_editable.psd, the font used was Barlow black.

Credits #back to top


Need Customization or an Exclusive custom template? Contact me at contact@ingridkuhn.com