fables — HTML 作品集模板

SHA-256: 7c1b7e4be4298485c27d891a6dfd161c199afb70ca336664eaf87dcaf136aad4

2026-10-02T15:16:21.121Z

# Multipurpose Corporation HTML5 Template

[![Multipurpose Corporation HTML5 Template](https://tech-labs.github.io/fables/assets/custom/images/logo-dark.png "Multipurpose Corporation HTML5 Template")](https://tech-labs.github.io/fables/)

Fables is the awesome responsive HTML5 template created for corporate and portfolio websites – business site needn’t be boring! It features a very clean and minimal design that is perfect for showcasing your work. It is also optimized for Retina Displays (used in iPhone, iPad and MacBook Pro Retina).

[Demo](https://tech-labs.github.io/fables/)

## Features

*   Responsive HTML5 and CSS3 design
*   Css animations
*   Multiple Headers and Footers
*   Clean and Modern Design
*   Clean and Modern Code
*   Masonry portfolio layouts
*   Easy to edit by changing html classes
*   Based on Bootstrap4 the latest version
*   Based on fontawesome5 the latest version
*   all the libraries used in this template is the latest version .
*   Multi-Purpose Design , you can use it as a bussiness template or an online store .
*   Web Friendly Fonts
*   in this template you have variety of designs , such as the template contains 4 design for home page , three designs for about us page , three designs for contact us page , many dsigns for blog single or blog category , many designs for gallery . all according your need .


## File/Folder Structure

The files are placed in organized folders so to make it easy for you to find files where you will need to do customizations or change other stuffs easily. Below is the folders and details of what they are for

*   assets/custom/CSS: This folder contains all style files or stylesheets.
*   assets/custom/Fonts: This folder contains all the fonts used for in the Template.
*   assets/custom/Js: This folder contains all the scripts
*   assets/custom/images: This folder contains all the images
*   vendor/: This folder contains all the Libraries Used In this Template like ( animate.css , bootstrap , fancybox , fontawesome , jquery , owlcarousel , popper , WOW).

## Installation

You Can upload the compressed fils via ftp , then you can extract it and begin to change the basic data such as phone numbers , fax , email , the location of google map according to your personal data .

## HTML Structure

On Opening the main Index.html file. You can see the full HTML structure of the Template. Every Section of the Template is properly commented so you can see which section starts/ends.  
the template is divided into main six parts :-  

1- index : the template contains four different designs we have . (index1.html , index2.html , index3.html , index4.html ). every design of each page contains all you need to add to your home page , it will cover all your needs.  

2- about us : the template contains three different designs . we have (about1.html , about2.html , about3.html ). every design of each page contains all you need to add to your about us page like :-  
    2.1 - you can add the services your company provide .  
    2.2 - you can add counter to count your clients , your successfull Deal your professional Employee .  
             you can also show your professional team to your customers .  
    2.3 - you can add show your Success Partners to give the Confidence to your next clients .  
    2.4 - you can add show your testimonials and clients opinion .  

3- Store : the template contains two different designs about the store ( store_grid_list.html , store_single.html ). the two designs of each page contains all you need to add to your store like :-  
    3.1 - you can view all products you need in two ways (View them as grid layout or list layout ) .  
    3.2 - the single product page contains all the data of the product you need to show to your clients such slider , description , number of items you need , the color of the items . also you can share your product to social media with friends .  

4- Blog : the template contains many designs about the blog . there are many designs to show your blogs . the designs of each page contains all you need to add to your blog page like :-  
    4.1 - there are various layouts to show the blog category .  
    4.2 - there are various layouts to show the single blog page , you may show blog with image or with video or with sider all according to your needs .  
    4.3 - you can also show your events timeline .  

5- page : the template contains many designs about the page . there are many designs to show your pages . the designs of each page contains all you need to add to your page like :-  
    5.1 - you can show your gallery or your portfolio .  
    5.2 - there is under construction page , you can show it white preparing your site or a specific page .  
    5.3 - there 404 page to show when some links not found .  

6- contact us : the template contains three designs about contact us page . there are three designs to show your contact us page . the designs of each page contains all you need to add to your contact us page like :-  
    6.1 - you can add your company data such as (phone number , fax , email , social media links , the address)  
    6.2 - you can add your location , there is a map showing the location to make it easy for clients to reach your company .  
    6.3 - there is a form to let your clients message you any time , asking you about any thing , this is a good way to communicate with your clients .  
7- Finally Features :  
    7.1 - Headers & Footers : there is five designs for header and four designd for footer . in this part we collect all headers and footers , you can choose any header or any footer as you want  
    7.2 - team members : there is three designs you can apply any of them located in 'team.html'  
    7.3 - pricing table : there is three designs you can apply any of them located in 'pricing-table.html'  
    7.4 - testimonials : there is four designs you can apply any of them located in 'testimonials.html'  
    7.4 - blog : there is four designs you can apply any of them located in 'blog.html' 'blog.html'  
    7.5 - counters : there is four designs you can apply any of them located in 'counters.html'  
    7.6 - image hover effects : there is seven kinds of animations applied on images we have declared them in the animation section in this documentation .  

## CSS Structure

The overall CSS of the Template is distributed into different separate files. Inside the CSS folder, You can find the following CSS files.

*   custom.css : It is the main style file of the whole template . that contains all the styles you should use it when you to want to edit some styles like colors , font size , backgrouns ... ,etc .
*   custom-responsive.css : it is the file that is responsible for the media queries to view the template in mobile phones and tablets in the best case , and to be fully responsive . it contains alot of screen sizes to cover all screens .
*   fables-icons.css : it is the file that is responsibe for the icons in the website .


*   some examples to edit some styles througth html . just to change some prepared classes :-
*   the main color of the tempalte is the dark blue is named as main color
*   when you want to write text with the main color you just give it a class '.fables-main-text-color'
*   and if you want to give a specific element a main background . you just add the class '.fables-main-background-color'
*   and if tou want to add border to an element with the main color you just add the class '.fables-main-border-color' .
*   Note : you can use all the above classes with the 5 colors of the template with the declared way like , '.fables-second-text-color' , '.fables-second-background-color' , '.fables-second-border-color'

## Animation

there is some fantastic animations in this template like

*   Translate Effect : to use it , just Surround the '' element with a div containing class of the wanted animation . example :-  
    ```
    <div class="image-container translate-effect-right">

           <img src="http://via.placeholder.com/350x209" alt="alt image text">

    </div>

    ```
*   ZoomIn Effect  
    ```

    <div class="image-container zoomIn-effect">

           <img src="http://via.placeholder.com/350x209" alt="alt image text">

    </div>

    ```
*   ZoomOut Effect
    ```

    <div class="image-container zoomOut-effect">

           <img src="http://via.placeholder.com/350x209" alt="alt image text">

    </div>

    ```
*   RotateIn Effect'
    ```

    <div class="image-container rotateIn-effect">

           <img src="http://via.placeholder.com/350x209" alt="alt image text">

    </div>

    ```
*   RotateOut Effect
    ```

    <div class="image-container rotateOut-effect">

           <img src="http://via.placeholder.com/350x209" alt="alt image text">

    </div>

    ```
*   Shine Effect
    ```

    <div class="image-container shine-effect">

           <img src="http://via.placeholder.com/350x209" alt="alt image text">

    </div>

    ```
*   Circle Effect
    ```

    <div class="image-container circle-effect">

           <img src="http://via.placeholder.com/350x209" alt="alt image text">

    </div>

    ```

## Javascript Structure

This Template uses latest version of jQuery and other JavaScript libraries to add extra functioanlity.

*   comming soon counter down you can edit it from the html code inside the 'comming-soon.html' page by editing the date in this code  

    ```
    <div id="comming-soon" data-countdown="2019/01/01"></div>

    ```
*   you can change the default location to yours by edit the 'data-lng' & 'data-lat' in the 'contactus.html' file and edit the following code  
    ```

    <div id="map" data-lng="31.248848" data-lat="29.966324"  
    data-icon="assets/custom/images/map-marker.png"  
    data-zom="12" style="width:100%;height:420px">  
    </div>

    ```
*   the counters which in the index pages and about pages you can change the values by changing the html code as follows :-  
    ```

    <h2 class="" data-count="307">0</h2>

    ```
where is the zero is the number to start and 307 is the number to reach .

## Changelogs

v1.0 (02.12.2018) - Initial Release

## Sources & Credits


*   **jQuery** - [http://jquery.com/](http://jquery.com/)
*   **animate** - [https://daneden.github.io/animate.css/](https://daneden.github.io/animate.css/)
*   **bootstrap** - [https://getbootstrap.com/](https://getbootstrap.com/)
*   **fancybox** - [http://fancyapps.com/fancybox/3/](http://fancyapps.com/fancybox/3/)
*   **fontawesome** - [https://fontawesome.com/](https://fontawesome.com/)
*   **jQuery.countdown** - [http://hilios.github.io/jQuery.countdown/](http://hilios.github.io/jQuery.countdown/)
*   **jquery.circle.progress** - [http://kottenator.github.io/jquery-circle-progress/](http://kottenator.github.io/jquery-circle-progress/)
*   **loadscreen** - [http://tobiasahlin.com/spinkit/](http://tobiasahlin.com/spinkit/)
*   **masonry** - [https://masonry.desandro.com/](https://masonry.desandro.com/)
*   **OffCanvasMenuEffects** - [https://tympanus.net/Development/OffCanvasMenuEffects/sideslide.html](https://tympanus.net/Development/OffCanvasMenuEffects/sideslide.html)
*   **owlcarousel** - [https://owlcarousel2.github.io/OwlCarousel2/](https://owlcarousel2.github.io/OwlCarousel2/)
*   **jquery Timeline**- [https://www.jqueryscript.net/demo/Create-A-Responsive-Animated-Vertical-Timeline-with-jQuery-CSS3/](https://www.jqueryscript.net/demo/Create-A-Responsive-Animated-Vertical-Timeline-with-jQuery-CSS3/)
*   **owlcarousel** - [https://owlcarousel2.github.io/OwlCarousel2/](https://owlcarousel2.github.io/OwlCarousel2/)
*   **WOW-master** - [https://mynameismatthieu.com/WOW/](https://mynameismatthieu.com/WOW/)