ReVeal

One Page HTML5/CSS3 Responsive Portfolio Template

Reveal is a creative one page responsive HTML5 portfolio template built with latest Bootstrap version 3.3.6. This template can be used for individulas or small agencies to build and publish their online profiles. This template comes with developer/non developer friendly coding styles as well as it has rich customization capabilities that is suitable for any kind of small business or creative farms. Creative design, stunning animations, eye catching google map and functional contact form are the main features of this template.

We hope, you will be pleased with this mobile friendly template and for any clarification please visit the demo and carefully read this documentation. This document will assist you to have a better idea about this tamplate's structure and functionalities. Though we tried to cover every single details regarding this template, however, for any issue, that is not coverd here, please feel free to communicate us via email.

Template Structure

After downloading the file from themeforest, you will find your template inside the "reveal" folder

This folder has below structure

Copy all of theses files and upload those in your domain's root directory and the site is live!

**Note: Images used on the demo is not included in the template you downloaded, rather you will see preview images with the image dimension mentioned in the template. You can always replace those images. For somooth layout, use images with specified dimension and also please compare with the demo to have a better idea

Fonts used:

Colors used:

Javascripts used:

Editing the template

Open "index.html" with any text editor like notepad++ or sublime text and you will have the access to the codes immediately. Now please follow below sections or choose from the left side menu to edit specific sections.

Header Section

This section (line: 45 to line: 83) contains the Logo, Menu, and the welcome screen when user first visit the site

How to change the Logo?--> Go to line: 56 of index.html, and change the text "ReVeal" to your own, You can also, include an image there, replace "ReVeal" with the <img> tag, sample line will be like 

<a class="navbar-brand" href="/"><img src="your-logo.png" alt=""></a>

How to change the Menu Text?--> Line: 62 to line: 69 are for Menu. you can change/alter the menu text there.

How to change header or screen background image?--> go to images folder and there you will find "showcase.jpg" image with you own (image dimension 1920X1000). replace this image but keep the image name same and you are done!

How to change welcome message?--> Line: 75 to line: 80 contains the welcome message. you can change/alter the text there.

About Section

This section (line: 87 to line: 172) describes about the agencies or farms or individuals and also have the counter of the company's/individual's achievements

How to change the sub-title and title and description text?--> Line: 89 to line: 95. inside this code block, you can replace the text "Who we are", "Story about us" and the description text inside the <p>: .

How to change the images?--> line: 101, line: 115 and 129 has the <img> tag where you can change the images. Keep your images for this section inside "images/about" folder

How to change the achievement counters and text?--> line: 144 to line: 171. You can change the counter number and texts by editing the class text "counter" and text inside <p> tag

Service Section

This section (line: 176 to line: 289) describes about the services provided by the agencies or farms or individuals and also have a parallex backgrounded image to promote the business

How to change the sub-title and title and description text?--> You can replace the texts inside Line: 180 to line: 181.

How to change the service title?--> Find lines that has a class "media-heading" and replace the text inside that <h4> tag. To edit the description, replace the tetxt inside <p> tag just beneath the "media-heading" class

How to change service icons?--> These icons are provided using font-awesome icons. find class name "media-left (for example, line: 185, inside that class, you can see the required <i> tag and you can change the icons by editing that. You can use any of the icons that is provided here by fontawesome

How to change the parallex backgrund image?--> line: 275 to line: 288 has the required code for the parallex section. But to change the parallex background image (recommended image dimension 1920X1280), you are needed to open the "js/main.js" file and inside main.js, find the below lines and replace the imagepath there 'images/concept-bg.jpg'

"js/main.js" file:

Events Section

This section (line: 293 to line: 421) describes about the agencies or farms or individuals Events and also have a some main events descriptions in a accordion for. This section also has a testimonial slider just below the events description

How to change the sub-title and title and description text?--> You can replace the texts inside Line: 297, line: 298 and line: 300.

How to change the image?--> line: 306 has the <img> tag where you can change the image. Keep your images for this section inside "images/events" folder

Which blocks have the testominial Slider?--> line: 366 to line: 420 has the testimonial or quote slider.

Team Section

This section (line: 426 to line: 510) describes about the Team Members and by hovering the tema member images, you can reveal their social profiles as well

How to change the sub-title and title and description text?--> You can replace the texts inside Line: 429, line: 430 and line: 432.

How to change the image?--> Find class "single-team" and inside that class you will have the <img> tag (for example, line: 438)

How to change the title and designation?--> Find class "team-description" and replace the title and designation there inside <p> tag (for example, line: 448 to line 451)

Portfolio Section

This section (line: 514 to line: 673) describes and showcases about various types of services they are offering or they already completed and by hovering each portfolio, you can have a view of that project samples in a pop up form. if you dont like the "pop up" you can always remove that by removing the class that has a class "img-pop-up" . Also you can add an external link by editing the "href" attribute there.

How to change the sub-title and title and description text?--> You can replace the texts inside Line: 517, line: 518 and line: 519.

How to change the image?--> Find first instance of <img> tag inside "portfolio" class for example line: 537 and replace the image source accordingly

the javascript that are responsible for this portfolio section to filter the projects are Isotope.js

This section also has a client carousel started from line: 627 to line: 672 and uses the owl carousel JS

Testimonial Section

This section (line: 676 to line: 734) describes about the Testimonial or Happy clients section

How to change the sub-title and title?--> You can replace the texts inside Line: 679, line: 680

How to change the image?--> Find class "media-object" inside this code block and inside that class you will have the <img> tag to replace (for example, line: 684)

How to change the title and designation?--> Find class "media-body inside this code block" and replace the title and designation and testominial quote accordingly (for example, line: 686 to line 690)

Blog Section

This section (line: 737 to line: 812) describes about the blog section

Contact Section

This section (line: 816 to line: 868) describes the Contact section. And has two parts. One is the eye catching Google Map Location of the business and second one is a fully functional contact form

How to change the map location?--> You need to open the "js/main.js" file and inside that file find the lines: 204,205 and 218, 219 and provide your own latitude and longitude there. lat=latitude and lng=longitude. You can get your latitude, longitude by providing your address information here

**Note: To use the map, as per google you need to use your own API Key and you can get this from here https://console.developers.google.com/. Also here is the supporting doc how to obatin the API key API Key

A sample API key looks like AIzaSyA6CKatrt34QhZKT5TyHqwerxM3hEiMpQ.


After getting your own the API key

just replace that API key at the last of this line: 1010 on the index.html file like below screen shot:

How to get the messages to your own email address when user submit the form?--> Open the "sendmail.php" file provided with the template and replace the email addres there as per below screenshot

**issues: parallex background are kept disabled on IE edge and IE version 9 and 10 for performance issue.

Credit

Javascript

Icons

Thank You

Finally thank you very much for purchasing this HTML template. Please keep in mind that we are working very hard to provide the best quality in coming days. If you love our work then appreciate us by writting a good review with 5 star.

Support Questions/Answers



Question: How can I set a different background image for the showcase (Header) section in mobile?

Answer:

In order to set a different background image for mobile, you will need to add CSS code in the responsive.css file. Here are the steps to follow:

  1. Upload the mobile image to the "images" folder of the template and name it as showcase-mobile.jpg
  2. Open the "responsive.css" file located in the "css" folder.
  3. Go to line number 116, where you will find the existing code for mobile like below:



  4. Replace this existing code block with the following code:

    
    header {
        min-height: 300px;
        background: url('../images/showcase-mobile.jpg') no-repeat scroll;
        background-position: center;
        background-size: cover;
        background-attachment: scroll;
    }
  5. Save the file and upload it to your server.
  6. Thanks so much :)