“Sleek - Responsive Multipurpose landing Page” Documentation by “theme.express” v1.2

“Sleek - Responsive Multipurpose landing page”

Created: 08/07/2016
By: theme.express
Email: support@theme.express

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email us at support@theme.express. Thanks so much!

HTML Structure
CSS Files and Structure
JavaScript
Tutorial
Sources and Credits

A) HTML Structure - top

This theme is a Responsive layout with four column. Based on Bootstrap Framework. All of the information within the main content area is nested within a div with an id of "container". The sidebar's (column #2) content is within a div with an id of "secondaryContent". The general template structure is the same throughout the template. Here is the general structure.

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

For header

header {
		background-color: #hexcode; //---for background change---//
		color: #hexcode; //---for font color change---//
}

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

B) CSS Files and Structure - top

I'm using Five CSS files in this theme. The first one is the main source file for bootstrap framework

The second file contains all of the specific stylings for the page. The file is separated into sections using:


/* 1. GLOBAL STYLES */
css codes

/* 2. HEADER */
css codes
	
/* 3. INTRO STYLES */
css codes
	
/* 4. TERMS / POPUP */
css codes

/* 5. SERVICES */
css codes

/* 6. FEATURES */
css codes

/* 7. INFO BOXES */
css codes

/* 8. INFO BOXES / DUAL */
css codes

/* 9. SCREENSHOTS  */
css codes

etc....

The third file contains all of the specific stylings for the Prettyphoto Lightbox.

The fourth file contains all of the specific stylings for Skins.

The fifth file contains all of the specific stylings for Font-Awesome Icons.

Dont change anything in first(bootstrap.css) file.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

C) JavaScript - top

This theme imports Eleven Javascript files.

jQuery

Details

jquery.js - To enable jQuery
jquery.flexslider.js - Responsive Slider plugin
jquery.easing.min.js - Easing plugin
bootstrap.min.js - Bootstrap js file
jquery.prettyphoto.js - Prettyphoto Lightbox plugin
modernizr.custom.js - Modernizr js
owl.carousel.js - Owl Carousel Plugin
gmaps.js - Google Map
contact.js - Support file for PHP Contact form
slick.js - Custom theme support file
main.js - Custom theme support file

D) Tutorial - top

Follow the steps below to change the demo contents with your own contents.

1. LOGO SECTION

To replace the logo name, find this code

	Sleek

replace "Sleek" with your website name Or logo image url/source

2. NAVMENU

Open contact.php file from "PHP" folder and find this code.

	
		Home
		Sample Page
		Contact

Replace "Home", "Sample page" with the menu name and "#" with the page links.

3. INTRO CONTENT

Intro Content

Find this code

	
		Welcome to the
Sleek landing page
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sapien leo, consequat sed aliquam at, convallis sit amet metus. Vivamus malesuada, ex in placerat bibendum, est dui euismod sapien, eget tincidunt nunc ipsum ut mauris.
		
			Purchase Now
			Learn More

replace the text between "<h2>" "</h2>" and "<p>" "</p>" with the intro title and description.

replace "Purchase Now" and "Learn More" with the button name.

replace "#" with the button links.

Same for all intro pages

Intro Slider

Find this code

replace "images/slide/1.png" with the first slide image.

Same for all. Unlimited slides can be added.

Intro Newsletter (mailchimp)

Open "subscribe.php" file from "PHP" folder and find this.

$apiKey = 'YOUR_API_KEY';

Replace "YOUR_API_KEY" with your mailchimp API key - How to get API key?

$listId = 'YOUR_LIST_ID';

Replace "YOUR_LIST_ID" with your mailchimp newsletter list id - How to get List ID?

$submit_url = "http://us3.api.mailchimp.com/1.3/?method=listSubscribe";

Replace "us3" with your actual data center (You can find the data center on the API key)

Intro Countdown Timer

Open "main.js" file from "JS" folder and find this.

    var endDate = "August 20, 2015";

replace "August 20, 2015" with your product/app launch date.

4. SERVICES SECTION

Find this code.

				
					
					Responsive Design
					Morbi laoreet scelerisque orci finibus ullam corper quam semper utac aliquam magna quis
					Learn More

To replace the icon, go to this link and choose your icon and replace "fa-hdd-o" with your icon name.

Replace the text between "<h4>" "</h4>" and "<p>" "</p>" with the service title and description.
This will be the same for all service columns.

4. FEATURES

Find this code.

App Btns

					
					
						Download App
						Morbi laoreet scelerisque orci finibus ullam corper quam semper utac aliquam magna quis

Replace the text between "<h3>" "</h3>" and "<p>" "</p>" with the title and description.
Replace the links as per app name.

Features Content

					
						
						Multi Homepages
						Morbi laoreet scelerisque orci finibus ullam corper quam sed aliquam semper utac aliquam magna quis

Replace the text between "<h4>" "</h4>" and "<p>" "</p>" with the feature title and description.

6. SCREENSHOTS

Find this code

replace "images/shots/1.jpg" with screenshot img url or source.

The First image is the Lightbox image(Zoom Image) and the second is the thumb image.

See below for the structure

7. TESTIMONIALS

Find this code

					
						
							
								Lorem Ipsum is simply dummy text of the printing and typesetting industry
								- John DoeABC Company

replace the text between "<p>" "</p>" with the quote info.

replace the text between "<cite>" "</cite>" with the quote author info.
replace "images/quote/1.png" with the quote author image.

8. PRICING TABLE

Find this code

			
				
					
						
							Basic
						
						
							$999
						
						
							5 Projects
							5 GB of Storage
							Up to 100 Users
							10 GB Bandwidth
							Security Suite
							Sign Up Now!

replace "Basic" with the plan name.
replace the text between "<div class="price">" "</div>" and "<div class="price-cents>" "</div>" with the plan price.
replace the text between "<li>" "</li>" with the plan features.
replace the "#" in "<a href="#">" with the link to the plan page or checkout page.

Do the same for all four.

9. FAQ SECTION / Accordion

Find this code

							
								
									
										
										 1. What is Lorem Ipsum?
										
									
								
								
									
										Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent odio ligula, blandit sit amet malesuada sit amet, vestibulum quis lectus. Quisque placerat non metus sed lobortis.

replace "What is Lorem Ipsum?" with the faq question.
replace the text between "<div class="panel-body">" "</div>" with the answer for the faq.

Do the same for all.

9.1 FAQ SECTION / Video

Find this code

In the above code, replace "92141950" with your vimeo video url.

For youtube video

Replace the above code with this.

Here replace "I_ClNxSST4M" with the yourtube video ID.

10. CLIENTS

replace images/clients/1.png with the client logo.
Same for all.

11. GOOGLEMAP

Open "main.js" rom "JS" folder and find this.

        lat: 40.712784,
        lng: -74.005941,

You will find this code twice. Both should be updated
Go to this link and in the search bar update your location or address and press go.
Scroll down the page to see the lattitude and longitude of your location. Update those here in both places and save.

12. CONTACT INFO

Find this code

					
						
							
							+1800 1234 5678
						
						
							
							info@domain.com
						
						
							
							#12, Some Street County 123456

replace +1800 1234 5678 with your company contact number.
replace info@domain.com and support@website.com with the company email.
replace #12, Some Street County 123456 with your company Address.
replace the social icons as per the name

13. CONTACT FORM

Open "contact.php" file from "PHP" folder and find this code.


define( "RECIPIENT_NAME", "YOUR_NAME_HERE" );
define( "RECIPIENT_EMAIL", "YOUR_EMAIL_HERE" );

Replace "YOUR_NAME_HERE" with your name
Replace "YOUR_EMAIL_HERE" with your email, where you want to receive the mails.

14. COPYRIGHT

Replace the Copyright contents with yours.

15. TERMS / POPUP

Open "index.html" and find this



	
	Terms and Conditions
	
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed justo a erat blandit maximus. Mauris et odio eu nisl viverra pharetra vel quis ante. Sed finibus mauris nisl, vel semper diam rutrum id. Phasellus placerat augue ac fringilla lacinia. Cras feugiat feugiat nulla, eu dignissim ante faucibus in. Phasellus a quam nunc. Nulla ac vehicula ipsum. In molestie egestas magna vitae euismod. Donec aliquet pellentesque nulla, in blandit felis aliquet id. Nunc vel mauris eget est convallis aliquam. Aliquam arcu augue, tincidunt convallis metus non, blandit fringilla lacus.
		Sed varius et augue eu tristique. Duis pulvinar, lorem ac vestibulum accumsan, lorem augue elementum magna, vitae vehicula orci ante at augue. Nam placerat, nulla sit amet placerat lobortis, ante sem dapibus purus, quis efficitur ipsum ipsum eget leo. Cras elementum id neque eget euismod. Vestibulum tempus, eros vitae rutrum malesuada, metus dui viverra arcu, ac molestie nisl lacus ut tellus. Proin condimentum quam quis urna venenatis cursus. Donec sit amet felis in purus convallis imperdiet quis in mi. Sed gravida, purus nec porta dapibus, est elit egestas ante, sit amet dignissim eros mauris a tortor. Integer erat elit, porttitor et lobortis a, mollis eu turpis. Etiam porttitor augue nec erat luctus, eu varius orci malesuada. Phasellus blandit leo id pretium rutrum. Nunc ac vestibulum lacus. In viverra laoreet orci, vitae dictum turpis. Nunc metus neque, rhoncus eget rhoncus congue, cursus a turpis. Duis placerat turpis nunc, vitae elementum nibh pellentesque convallis. Maecenas pulvinar leo sed fringilla venenatis.
		Nulla tristique libero ut pellentesque mollis. Praesent condimentum viverra lacus, at consequat sapien ultricies quis. Suspendisse nec gravida nisl, et euismod arcu. Etiam eu condimentum risus, vel gravida lacus. In vitae est a nisl scelerisque molestie id a libero. Ut eget nisi at dolor maximus hendrerit. Nam non mattis ex, quis mattis velit.

Replace the text between "<h3>" "</h3>" with the title.

Replace the text between "<li>" "</li>" with the terms.

16. SKINS

Below is the list of colors.

Choose a color and next to it is the skin color name.

Now in "index.html" file,find this

replace "skin-blue.css" with the color name you choose. (Eg: If you choose yellow replace as "skin-yellow.css").

Thats it. You are done. Now your website is ready to launch.

E) Sources and Credits - top

I've used the following images, cons, plugins, fonts or other files as listed.

Google WebFont used - Josefin Sans
Google WebFont used - Vampiro One
Google WebFont used - Open Sans
Responsive carousel by - owlgraphic.com
Flexslider plugin by - Woothemes.com
Fonticons by - fontawesome
Demo images from - Pixeden.com
Demo images from - Behance
Demo images from - Photodune
Demo images from - Pixabay

All images, Icons, Logos, Fonts used in this template are free for commercial use.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

theme.express

Go To Table of Contents