HTML and CSS Structure #back to top

Bootstrap Grid System

This Template has a Responsive layout and is based on the Bootstrap Framework v5.3 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:

								/*
								Template Name: Woof!
								Author: Ingrid Kuhn
								Author URI: themeforest/user/ingridk
								Version: 2.0

									Table of Contents

									#General and Typography
									#Preloader
									#Navigation
									#Main Slider
									#Video Header
									#Section - Services
									#Section - Adoption
									#Section - About us	
									#Section - Team
									#Section - Gallery
									#Section - Contact
									#Footer
									#Miscellaneous
									#Media Queries
				        

Template Options#back to top

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.css. The color skins can be found inside the folder Styles.


Main Color Scheme
Vet Clinic
Agility
Pet Hotel
Pet Shop
Dog Walker
Adoption

Boxed version

To use the template in the boxed version just add this code to your style.css file


/* Boxed theme */

/****** Boxed version *******/
#top {
     max-width:1400px;
     margin:0 auto;
     box-shadow: 0px 13px 20px #cecece;
     background:#f5f5f5;
}
#video-header {
     max-width:1400px;
}
 #top .navbar, #top .top-bar{
     max-width:1400px;
     margin:0 auto;
     clear: both;
     float: none;
     box-sizing: initial;
}
 #slider{
     max-width:1400px!important;
     margin-left:auto!important;
     overflow:hidden!important;
     max-height:800px!important;
}

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
						

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=rgRFcpnbJzA

						   
						  

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
						

Layerslider

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

		 
         

Adopt a pet today!

Search our list of dogs, cats and other pets available for adoption near you

Adopt Today

Newsletter with Mailchimp Integration

The newsletter form in this theme includes MailChimp integration, to integrate with your existing campaign, open the files that has the newsletter form and replace the address by your own mail list address.

						

Fonts

The fonts used in this template are from Google Fonts, the fonts are Open Sans and Quicksand.

							  
							  
							

Icons

This template includes over 500 icons from FontAwesome 5 , and Flat Icons you can click in each link to find the icon map.

How can I change the icons?

To change the icons, just follow the example on the elements page. Some of the icons that are backgrounds or repeat in every section are in Unicode, to find that open the flaticon.css file located inside fonts/flaticon folder. there you can find the unicode code for each icon.

For example, the section headers have the icon .flaticon-pawprint-4 and its unicode is \f126

						  .section-heading:before {
							 content: "\f126";
							 z-index: 0;
							 transform: rotate(20deg);
							 font-family: "flaticon";
							 font-size: 70px;
							 bottom: -20px;
							 z-index: 0;
						}
						 

CSS Animations on Scroll

This template uses Animate on Scroll, the animations are disabled in smaller screens for better performance. To change the animations you can choose an animation at AOS website and replace the animations in the template as the example below:

	                    

Images

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

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


Image links

*If an image link is missing, is because the image is not available anymore/or deleted

Credits #back to top


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