Installation

Follow the steps below to get started with your Site Template:

1. Open the Package/template-files Folder to find all the Templates Files
2. You will need to Upload these files and folders on your Web Server to use it on your Website.
3. Make sure you upload the required files/folders listed below:
   • template-files/css - Extra Stylesheets Folder plus Main Stylesheet File
   • template-files/fonts - Fonts Folder
   • template-files/img - Images Folder
   • template-files/js - Javacripts Folder
   • template-files/php - PHP Folder
   • template-files/index.html - Home Page Image Background
   • template-files/index-2.html - Home Page 2 Partical Background
   • template-files/index-3.html - Home Page 3 Image Slide Show
   • template-files/index-4.html - Home Page 4 Parallax Image
   • template-files/index-5.html - Home Page 5 Parallax Youtube Video
   • template-files/index-6.html - Home Page 6 Parallax Vimeo Video
   • template-files/all-works.html - All Works Page
   • template-files/work-details-1.html - Work Details Page 1
   • template-files/work-details-2.html - Work Details Page 2
   • template-files/work-details-3.html - Work Details Page 3
   • template-files/work-details-4.html - Work Details Page 4
   • template-files/work-details-5.html - Work Details Page 5
   • template-files/work-details-6.html - Work Details Page 6
   The other files can be used according to your preferences.
4. You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

Html Structure

Favicon and Title Changing

Line no 13 and 15

Landing Section

index.html(HomePage One) Landing Background Image Changing

index-2.html(HomePage Two) Do not add Background Image Class

index-3.html(HomePage Three) Do not add Background Image Class

for Replacing or Add more image in kenburns slide show go to bottom of the index-3.html page and edit the image sources

index-4.html(HomePage Four) Do not add Background Image Class

index-5.html(HomePage Five) Do not add Background Image Class

for Replacing or Add "YouTube video url" go to bottom of the following code in index-5.html line no 40 and edit the YouTube video sources

index-6.html(HomePage Six) Do not add Background Image Class

for Replacing or Add "Vimeo video url" go to bottom of the following code in index-5.html line no 40 and edit the Vimeo video sources

Logo & Menu Link Changing

Landing Content Text(Name, Description etc) Changing

About Section

About Photo Changing

About Wrapper Text & Social Links Changing

Service Section

Service Item Changing

to change service icon visit the link

https://mobiriseicons.com/cheatsheet.html

https://ionicons.com/v2/

and replace the "i" tag class name with your icons class name.

Work Section

Work Item Changing

work details was a AJAX popup link

Counter Section

Counter Number, Name etc Changing

Testimonial Section

Testimonial Item Changing

Clients Section

Clients Image Changing

Contact Section

Contact Phone & Email Changing

Contact From Changing

Email Setting

Contact Form Email Address Changing

Open the php folder and edit mail.php file and go to line no. 21

then replace the web-email address with your web-email address

Footer Section

Footer Social Link & Copyright Changing

CSS Files & Structure

CSS Files

Changing Font

ZUMAN uses One Font family: 'Montserrat' as a default font from the Google Fonts Library. To change the Font, you will need to Edit the Bottom Link with your Custom Font link in main.css file and change the body css font-family

If you plan to use a Self Hosted font. Here is an Example for using Self Hosted Font.

    @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700');

    body {
        font-family: 'Montserrat', sans-serif;
    }

CSS coding standard:

We followed css and css3 coding standard. Here is the example:

    .logo a {
        color: #fff;
    }
    
    .logo img {
        height: 20px;
    }
    
    .nav-btn {
        display: none;
    }
    
    .menu_items {
        text-align: right;
    }
    
    .menu_items li {
        display: inline-block;
    }
    
    .menu_item {
        padding: 0 20px;
        font-weight: 500;
        color: #fff;
        position: relative;
    }
    
    .menu_items .menu_item::after {
        position: absolute;
        content: "";
        height: 12px;
        width: 50%;
        top: 0;
        left: calc(50% - 25%);
        z-index: -1;
        border-radius: 50px;
        transform: scale(0);
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
    }

Javascript Files & Structure

Javascript Files

Custom JS coding standard:

    /* 07. ProjectFilter Init
    ============================ */
    function projectFilter() {
        var $gridt = $('.works');
        $gridt.isotope();
        $('.filter-buttons').on('click', 'button', function () {
            var filterValue = $(this).attr('data-filter');
            $gridt.isotope({
                filter: filterValue
            });
            $(this).addClass('active').siblings().removeClass('active');
        });
    };
    projectFilter();

Sources & Credits

I've used the following images, icons or other files as listed.

• Bootstrap
• OwlCarousel2
• Isotope Filter
• Magnific-Popup
• Particles
• VegasJS
• IonIcons(IconFont)
• MobiriseIcons(IconFont)
• EasingJS
• SplittingJS
• WaypointsJS
• CounterUpJS
• Google Fonts
• unsplash(Photos)

---

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme feel free to email via my user page contact from here.