Modaz | Minimalist eCommerce HTML Template

  • Version: 1.1.0
  • Last Updated: 11/06/2018
  • Author: Themesflat
Thank you so much for your interests. Your comments and ratings would be much appreciated. If you purchase this template, you will get support. We will update this template time by time and we want to hear your wishes for the future updates or for complete new templates.

Template features:

  • HTML5 & CSS3
  • Responsive Template
  • Free icons used
  • Pixel Perfect
  • Clean & Unique Design
  • Easy to customize
  • Retina Ready
  • Unlimited Colors
  • Boxed or Wide layout
  • Ajax Contact Form
  • Ajax Appoinment Form
  • 3 Portfolio page
  • Portfolio Masonry
  • Portfolio grid alt
  • Four types of header
  • One page
  • 2 Blog Page
  • Parallax Effect
  • & much more...

HTML Structure

Modaz is a premium responsive HTML template created especially for logistic & transportation companies, offices. It is very easy to customize and use. The template comes with loads of great features like custom components, web fonts, animated content & powerful CSS3 animations. We studied and reviewed hundreds of logistic sites across the web before planning the features of the template and element to ensure we covered all function and abilities.

We designed our Modaz template to be simple to use, intuitive and powerful, and most importantly results orientated. Modaz HTML template will help you get your site up and running in minutes, provide an excellent user and admin experience, and help convert visitors in to attendees!

Get Modaz now along with our whole-hearted support!

Below is Modaz basic structure:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Modaz | Multipurpose Business & Financial, Consulting, Accounting, Broker HTML Templates</title>

    <!-- Mobile Specific Metas -->

    <!-- Bootstrap  -->

    <!-- Template Style -->

    <!-- Responsive -->

    <!-- colors -->    
   
    <!-- Animation Style -->    

    <!-- Favicon and touch icons  -->
</head>

<body>
	<!-- Header -->	

	<!-- Slider -->

    <!-- Section -->
    <section class="flat-row"> </section>

    <!-- Footer -->
    <footer class="footer"> </footer>

   	<!-- Bottom -->
   	<div class="bottom"> </bottom>

   	<!-- Go Top -->
    <a class="go-top">
     	<i class="fa fa-chevron-up"></a>
    </a>
   
   <!-- Javascript -->
   <script type="text/javascript" src="javascript/jquery.min.js"></script>
   <script type="text/javascript" src="javascript/bootstrap.min.js"></script>
   <script type="text/javascript" src="javascript/jquery.easing.js"></script>
   <script type="text/javascript" src="javascript/jquery.isotope.min.js"></script>
   <script type="text/javascript" src="javascript/imagesloaded.min.js"></script>
   <script type="text/javascript" src="javascript/owl.carousel.js"></script>
   <script type="text/javascript" src="javascript/jquery-waypoints.js"></script>   
   <script type="text/javascript" src="javascript/jquery.flexslider-min.js"></script>   
   <script type="text/javascript" src="javascript/jquery-countTo.js"></script>   
   <script type="text/javascript" src="javascript/jquery.cookie.js"></script>
   <script type="text/javascript" src="javascript/jquery.magnific-popup.min.js"></script>
   <script type="text/javascript" src="javascript/parallax.js"></script>
   <script type="text/javascript" src="javascript/smoothscroll.js"></script>
   <script type="text/javascript" src="javascript/jquery-validate.js"></script>
   <script type="text/javascript" src="javascript/jquery.countdown.js"></script>
   <script type="text/javascript" src="javascript/switcher.js"></script>
   <script type="text/javascript" src="javascript/main.js"></script>
</body>

</html>

CSS System

The Modaz CSS System contains 3 parts:
  • Template style
  • Shortcodes style
  • Responsive style
  • Javascript - Fonts - Animation - Bootstrap style

Style.css ( Template style )


/**
  *	Reset
  *	Repeatable Patterns
  * Extra classes
  * Top bar
  *	Header
  *	Page title
  *	Breadcrumbs
  *	Blog
  *	Blog detail
  *	Pagination
  *	Sidebar
  *	Mail chimp
  *	Flat social
  *	Footer
  *	Footer bottom
  *	Go top
  *	Parallax
  *	Preloader
  *	Switcher
  *	Boxed
*/

Shortcodes.css ( Shortcodes - Elements style )

You can easily use the shortcodes to create your own page.


/**
 	* Row
 	* Flat title
 	* Title section
 	* Empy space
 	* Column
 	* Flat grid box
 	* Flat accordion
 	* Flat error
 	* Flat coming soon
 	* Flat button
 	* Iconbox
 	* Flat map
 	* Flat contact
 	* Filter shop
 	* Product
 	* Slidebar shop
 	* Flexslider
 	* Product detail
 	* Flat star
 	* Flat social
 	* Flat tabs
 	* Review
 	* Flat image box
 	* Flat icon
 	* Flat filter
 	* Flat Icon Box
 	* Carousel box
 	* Flat gallery
 	* Instagram
 */

Javascript - Fonts - Animation - Bootstrap style

/**  
  * font-awesome.css
  * simple-line-icons.css
  * magnific-popup.css

  * owl.carousel.css
  * flexslider.css
  * justifiedGallery.css

  * animate.css
  * shortcodes.css

  * bootstrap.css 
  * revolution-slider.css
*/

Javascript Custom

Here you can modify any settings for ( Retina Logos, Animations, Testimonials, Sliders, & Progress bar and more..)

Main.js ( javascript/main.js )


/**
  * isMobile
  * flatAccordion
  * countDown
  * flatCounter
  * goTop
  * parallax
  * removePreloader
  * flatPrice
  * flatFilterBox
  * flatShopSearch
  * topSearch
  * flexProduct
  * quantityNumber
  * flatTabs
  * flatImagePopup
  * flatVideoPopup
  * flatEffectDir
  * flatIsotope
  * flatCarouselOwl
  * searchIcon
  * headerFixed
  * responsiveMenu
  * flatMegamenu
  * flatEqualHeight
  * flatContentBox
  * swClick
*/

Shortcodes System

You can easily use the shortcodes to create your own page.

    
/**
 	* Row
 	* Flat title
 	* Title section
 	* Empy space
 	* Column
 	* Flat grid box
 	* Flat accordion
 	* Flat error
 	* Flat coming soon
 	* Flat button
 	* Iconbox
 	* Flat map
 	* Flat contact
 	* Filter shop
 	* Product
 	* Slidebar shop
 	* Flexslider
 	* Product detail
 	* Flat star
 	* Flat social
 	* Flat tabs
 	* Review
 	* Flat image box
 	* Flat icon
 	* Flat filter
 	* Flat Icon Box
 	* Carousel box
 	* Flat gallery
 	* Instagram
 */

Contact Form

To edit the contact form to send mails to your email box, you can look for the config.php. You need to edit yourname@yourdomain.com to your email.

contact-process.php ( contact/contact-process.php )


$address = "themesflat@gmail.com";

Example Edit Template

1. Example of how to edit the logo template


You change the logo image in the folder of project "Images" of your logo images, the same name as the original (logo.png)
Project Modaz:-> images -> logo.png

2. Example of how to edit the "iconbox" template

Two column: add class "item-two-column"

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Modaz | Multipurpose Business & Financial, Consulting, Accounting, Broker HTML Templates</title>
</head>

<body>

    <!-- Section -->
    <section class="flat-row"> 
    	<div class="flat-iconbox-style"> 
    		<div class="flat-item item-two-column"> 
    			...
    		</div>
    	</div>
    </section>

</body>

</html>

Three column: add class "item-three-column"

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Modaz | Multipurpose Business & Financial, Consulting, Accounting, Broker HTML Templates</title>
</head>

<body>

    <!-- Section -->
    <section class="flat-row"> 
    	<div class="flat-iconbox-style"> 
    		<div class="flat-item item-three-column"> 
    			...
    		</div>
    	</div>
    </section>

</body>

</html>

Four column: add class "item-four-column"

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Modaz | Multipurpose Business & Financial, Consulting, Accounting, Broker HTML Templates</title>
</head>

<body>

    <!-- Section -->
    <section class="flat-row"> 
    	<div class="flat-iconbox-style"> 
    		<div class="flat-item item-four-column"> 
    			...
    		</div>
    	</div>
    </section>

</body>

</html>

Credits