Documentation for Workwise - The Freelancer And Social Networking HTML Template

Thank you for purchasing our Workwise - The Freelancer And Social Networking HTML Template. If you have any questions that are beyond the scope of this help file, please feel free to contact us here Gambol or mail us at Gambol.

Workwise is a HTML5 & CSS3 responsive template created for Freelancer and Social Networking Plateform but also can be used for generalised website. Workwise will be a subtle and smart choice for user post project and receive competitive bids from freelancers within minutes. Our reputation system will make it easy to find the perfect freelancer for your job. It's the simplest and safest way to get work done online. It is a fully responsive, feature rich and beautifully designed to host a website or create online identity. We have created html pages and components for this template and much more in future. It supports bootstrap framework and intergrated font awesome icon set so easy to customise and develop your own styles. Workwise is a retina ready so it works nicely on smartphones, tablet PCs and desktops. Easily customisable, 24/7 support time.

Software requirements

• Sublime Text 3 used to edit the .HTML, .JS, .PHP, .CSS files.
• Workwise used as precompiler for CSS convert.

The following scheme displays the theme files structure.

HTML Structure

This template has a responsive layout. It has a block structure, one block on grey background and the other on an image (pattern) background.

CSS Structure

If any styles need to be changed just replace it with the wanted styles in the respective block in your colored style-color.css.

Js Strucutre

This template has dynamic animations, which have been implemented in JavaScript. The JS file is custom.js

In this theme we have used google font slick. You can learn more on using Google Web Fonts by checking the tutorial on how to work with Google web Fonts.

JQuery Plugin:

In this theme jQuery libraries and plugins have been used for dynamic animation.

• Bootstrap.min(js/bootstrap.min.js)
• Flatpickr.min(js/flatpickr.min.js)
• Jquery.mCustomScrollbar(js/jquery.mCustomScrollbar.js)
• Jquery.min(js/jquery.min.js)
• Jquery.range-min(js/jquery.range-min.js)
• Popper(js/popper.js)
• Script(js/script.js)
• Scrollbar(js/scrollbar.js)
• Slick.min(js/Slick.min.js)

Stylesheet (CSS) Reference File

• Animate (css/animate.css)
• Bootstrap.min (css/bootstrap.min.css)
• Flatpickr.min (css/flatpickr.min.css)
• Font-awesome.min (css/font-awesome.min.css)
• Jquery.mCustomScrollbar.min (css/jquery.mCustomScrollbar.min.css)
• Jquery.range (css/jquery.range.css)
• Line-awesome (css/line-awesome.css)
• Line-awesome.min (css/line-awesome.min.css)
• Line-awesome-font-awesome (css/line-awesome-font-awesome.css)
• Line-awesome-font-awesome.min(css/line-awesome-font-awesome.min.css)
• Responsive (css/responsive.css)
• Style (css/style.css)
• Slick (lib/slick/slick.css)
• Slick-theme (lib/slick/slick-theme.css)

Font awesome Icon

Font Awesome icons have been used in this theme. Learn more about font awesome icon from font awesome website. In a single collection, Font Awesome is a pictographic language of web-related actions. Easily style icon color, size, shadow, and anything that's possible with CSS. Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.

Icon8 Png Icon

Icon8 png icons have been used in this theme. Learn more about Icon8 icon from Icon8 website. In a single collection, Icon8 is a pictographic language of web-related actions. Easily style icon color, size, shadow, and anything that's possible with CSS. Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.

We have designed 40+ pages for Workwise template. You can easily use it and customise it as you want. We have used bootstrap layout structure. See below for their file nomenclature.

1. Homepage - index.html
2. Jobs - jobs.html
3. Companies - companies.html
4. Company Profile - company-profile.html
5. Forum - forum.html
6. Forum Post View - forum-post-view.html
7. Messages - messages.html
8. My Profile Feed - my-profile-feed.html
9. Profile Account Setting - profile-account-setting.html
10. Profiles - profiles.html
11. Projects - projects.html
12. Sign in - sign-in.html
13. User Profile - user-profile.html

It is HTML5, CSS3 and Js based template so you cna edit it yourself.

This template use bootstrap grid to make it very easy for anybody to understand the grid system and we have created other grid for layout. See below for more info

Classes of Sections

.layer-stretch and .layer-wrapper class is used to creating the out layer of section

        <div class="post-bar">
            <div class="post_topbar">
            </div>
        </div>
    

.layer-ttl class is used to creating the mail title of section

        <div class="layer-ttl">
            <h3> Section Title </h>
        </div>
    

Workwose HTML Template