BOUNCE Template is a modern multipurposes template. It can be used by a creative agency, a coorporate compagny or as personal portfolio for a freelancer .
The template come with two different layout :
1-First layout : a one page layout that display all the information in the same page exept for the blog posts and the blog post details pages that are separated.This layout come with a two header navigation options :
2-Second layout : a multiple page that display evrey section of the site in it’s own page.This layout also come with a two header navigation options :
The template have :
When you download the main download file you finde several folder :
You are concerned with the HTML folder because it contain the main files of the site.You can upload it to your server and start work with it, by doing the customization that you need, color , layout , content, image ......
Features :
The template has a slider section to display images your project ,what ever you want, the code that setup the slider is described below :
<!--Slider--> <div class="slider"> <!--Main slider--> <div class=" mainSlider flexslider"> <ul class="slides"> <li><img src="images/sliderImages/slide1.jpg" class="slide" alt=""/> <div class="caption"> <h1>welcome to bounce</h1> <p>From design to the development, production of contents, Bounce proposes a wide range of services</p> <div class="ctl"> <a class="folio btn" href="#">View Our Works</a> <a class="contact btn" href="#">Get In Touche</a> </div> </div> </li> <li><img src="images/sliderImages/slide2.jpg" class="slide" alt="" /> <div class="caption"> <h1>bounce digital agency</h1> <p>From design to the development, production of contents, Bounce proposes a wide range of services</p> <div class="ctl"> <a class="folio btn" href="#">View Our Works</a> <a class="contact btn" href="#">Get In Touche</a> </div> </div> </li> </ul> </div> <!--End main slider--> </div> <!--End slider-->
To add a slider images to the list just add this line of html to the ul list :
<li><img src="images/sliderImages/slide1.jpg" alt=""/>
The same thing for all the slider in the template, they have the same structure and you can add items the same way.
BOUNCE use Skeleton : Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.
The css file structure is described blow :
<link href="css/base.css" rel="stylesheet" type="text/css">
The base.css contain the default css rules of the site.
<link href="css/skeleton.css" rel="stylesheet" type="text/css">
The skeleton.css file contain the css rules of the skeleton framework, you don't need to modifie anything there.
<link href="css/main.css" rel="stylesheet" type="text/css">
The main.css contain all the css rules that style the entire site.
The images used in this template are not included with the main purchased files, but there are freebies and you can download them from the link below :
BOUNCE uses fontawsome icons and elinefont , the template come with a set of icons that you can use as you want, and change the default icons to fit your needs.
You can find the list of the icons in the font-awsome.css and in etlinefont.css in the css folder then you can choose the icon that you want and change it in the html code
For example to change the font-awsome icon , all you need to do is change the name of the icon in the i tag class :
<i class="fa fa-skype"></i>
The same thing for the etlinefont icon all you need to do is change the name of the icon in the i tag class :
<i class="icon icon-lightbulb"></i>
BOUNCE come with a twitter feed section to display the last tweet from you twitter account. By default i set the twitter feed the display my own twitter feed for the preview purposes. To change the twitter feed to display your own feed open script.js and locate the twitter section then change the user name there " username: "BenaissaGhrib", // Change username here" to your's.
Important note : Since Twitter now requires every request to be authenticated due the new version 1.1 of twitter API, it needs some private informations and settings. I recommend that you open the index.php file in the twitter folder and fill in with your own API settings. You can create a Twitter app here: https://dev.twitter.com/
The index.php is located in the twitter folder if you open it there is a config section from line 24 you are only interested in this four lines below :
You have to change this information to yours , when you create your twitter app here https://dev.twitter.com/ you get this information unther OAuth tool tab.
BOUNCE come with instagram feed section to display user, popular or tags photo feeds inside your site, by default this area in the footer display a default set of images for demo purposes, but od cours you can display your own instagram fee, popular or tags photo feeds....
To change the instafeed widget located in the footer to display the images that want(you user feed, popular or tags photo feeds), simply open script.js located in the js folder then located the instagram feed setup section look for the line of codes below then change the query variable into you user name if you want to dsiplay a specific user feed or popular or tags photo feeds
query: 'insideenvato', //Change the instagram feed user to display the feed that you want.
More info about instgram feed option can be found here :
BOUNCE come whith a good to go ajax contact form ready to use, you have to replace the adress of the recipient in the send.php file by your adresse.
To do that open the send.php file located in the main download file in any editor of your choice and go to the line 34 and change the adress by your adresse.
Thanks
Benaissa Ghrib