Dustri - Factory & Industrial HTML Template

  • Version: 1.0.0
  • Last Updated: August 29 2019
  • 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. You need file PSD or images please contact via skyper:themesflat or email themesflat@gmail.com we will send this for you.

Template features:

  • HTML5 & CSS3
  • Responsive Template
  • Free icons used
  • Pixel Perfect
  • Bootstrap Grid 1170px
  • Google Font Used
  • SEO Optimized
  • CSS3 Animations
  • Parallax Effect
  • Clean & Unique Design
  • Easy to customize
  • Retina Ready
  • Ajax Contact Form
  • Includes 2 Home page
  • Cross-Browser Compatibility: Chrome, FireFox, Safari, IE9+, Opera
  • & much more...

HTML Structure

Dustri HTMl Template

Below is Dustri basic structure:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Dustri - Factory & Industrial HTML Template</title>

    <!-- Mobile Specific Metas -->

    <!-- Bootstrap  -->

    <!-- Theme Style -->

    <!-- Responsive -->

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

    <!-- Favicon and touch icons  -->
    
    <!-- Slider Revolution CSS Files -->
</head>

<body>
    <!-- Top bar --> 

    <!-- Header --> 
    <header class="style1"> </header>    

    <!-- SLIDER --> 
    
    <!-- Section -->
    <section class="flat-welcome"> </section>
    <section class="flat-our-services style1"> </section>
    <section class="flat-section"> </section>
    <section class="flat-section"> </section>
    <section class="flat-number-speak"> </section>
    <section class="flat-testimonials"> </section>
    <section class="flat-recent-project"> </section>
    <section class="flat-company clearfix"> </section>
    <section class="flat-latest clearfix"> </section>
    <section class="flat-row style2"> </section>

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

    <!-- Go Top -->
    <a class="fa fa-angle-up"> </a>
   
   <!-- Javascript -->
   <script type="text/javascript" src="assets/js/jquery.min.js"></script>
   <script type="text/javascript" src="assets/js/jquery.easing.js"></script>
   <script type="text/javascript" src="assets/js/jquery-waypoints.js"></script>
   <script type="text/javascript" src="assets/js/parallax.js"></script>
   <script type="text/javascript" src="assets/js/rev-slider.js"></script>
   <script type="text/javascript" src="assets/js/owl.carousel.min.js"></script>      
   <script type="text/javascript" src="assets/js/jquery-fancybox.js"></script>
   <script type="text/javascript" src="assets/js/jquery-countTo.js"></script>
   <script type="text/javascript" src="assets/js/main.js"></script>
</body>

</html>

CSS System

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

Style.css ( Template style )


/**
    * Reset
    * Repeatable Patterns
    * bootstrap resetting elements 
    * topbar
    * header
    * page title
    * pagination
    * footer
    * main blog post
    * blog list small
    * blog list
    * main blog single
    * flat project
    * services
    * flat slider
    * main home
    * flat section
    * flat row
    * flat why choose
    * flat latest
    * flat post
    * video fancybox
    * flat request
    * mobile button 
    * mobile navigation
    * widget Link Service
    * widget Banner
    * preloader
    * go top
*/

Shortcodes.css ( Shortcodes - Elements style )

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


/**
    * team-members
    * image-box
    * title-section
    * flat-couter
    * flat-button
    * flat-table
    * flat-progress
    * flat-testimonials
    * flat-tabs
    * flat-team
    * flat-video
    * timeline
    * spacer
    * testimonails-slider
*/

Javascript - Fonts - Animation - Bootstrap style

/**  
  * font-awesome.css
  * owl.carousel.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 ( js/main.js )


/**
* inViewport
* flatPrice
* flatCounter
* tabs
* flatFilterBox
* flatIsotope
* searchIcon
* goTop
* VideoPopup
* countDownTime
* googleMap
* responsiveMenu
* headerFixed
* flatImagePopup
* inViewport
* zoomPic
* flatGallery
* ajaxContactForm
* flatProgressBar
* accordionToggle
* contentBox
* spacer
* flatFilterPrice
* canvasMobi
* testimonialCarousel
* flatRetinaLogo
* flatOwl
* parallax
* inViewport
* removePreloader  
*/

Shortcodes System

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

    
/**
    * team-members
    * image-box
    * title-section
    * flat-couter
    * flat-button
    * flat-table
    * flat-progress
    * flat-testimonials
    * flat-tabs
    * flat-team
    * flat-video
    * timeline
    * spacer
    * testimonails-slider
*/

Credits