Tri-O - Multipurpose HTML Template

Last Update : 14/03/2020

24/7 Support: Send Us a message from our profile

Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to contact with us


Getting Started

Bootstrap Grid System

Code For One column

<div class="container">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            YOUR CODES GOES HERE
        </div>
    </div>
</div>

Code For Two columns

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            YOUR CODES GOES HERE
        </div>

        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            YOUR CODES GOES HERE
        </div>
    </div>
</div>
                            

Code For Three columns

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            YOUR CODES GOES HERE
        </div>

        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            YOUR CODES GOES HERE
        </div>

        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            YOUR CODES GOES HERE
        </div>
    </div>
</div>

Template Installation

FTP Upload:

  • Open up your FTP manager and connect to your hosting
  • Browse to required directory (Normally public_html)
  • Upload the files inside trio folder.

Table Of Contents

/*------------------------------------------------------
[Table of contents ]

    00. Typography Style Start
    01. Background Colors
    02. Start Header Area Wrapper
    03. Start Search Box Area
    04. Start Off Canvas Area Wrapper
    05. Quick View Style Here
    06. Start Page Header Area
    07. Start Main Navigation Wrap
    08. Start Welcome Area Wrapper
    09. Start Fun Fact Area Wrapper
    10. Start Portfolio Area Wrapper
    11. Start Testimonial Area Wrapper
    12. Start Team Area Wrapper
    13. Start Latest Blog Area Wrapper
    14. Start Brand Logo Area Wrapper
    15. Start Banner Area Wrapper
    16. Start Discover Area Wrapper
    17. Start Product Slider Area
    18. Start Category Banner Area
    19. Start Feature Products Area
    20. Start Products Wrapper
    21. Start Newsletter Area Wrapper
    22. Start Shop Creative Banner Area
    23. Start Category Product Area
    24. Start Post Slider Wrapper
    25. Start About Me Area
    26. Start Blog Content Area
    27. Start Sidebar Content Wrapper
    28. Start Call to Action Wrapper
    29. Start Our Skills Area
    30. Start Contact Area Wrapper
    31. Start Agency About Wrapper
    32. Start Showcase Description Area
    33. Start Get App Now Area Wrapper
    34. Start Architect Project Area
    35. Start Revolution Slider Css
    36. Start Video Background Content Area
    37. Start Parallax Bg Content Wrapper
    38. Start vCard Container Wrapper
    39. Event Home Page Style
    40. Creative Freelancer Home Page Style
    41. Portfolio Metro Home Page Style
    42. Restaurant Home Page Style
    43. Business Home Page Style
    44. Landing Home Page Style
    45. Fashion Home Page Style
    46. Blog Metro Home Page Style
    47. Startup Home Page Style
    48. Baber Home Page Style
    49. Marketing Home Page Style
    50. Help Home Page Style
    51. Artist Home Page Style
    52. About Us Pages Style
    53. Service Pages Style
    54. Team Pages Style
    55. Contact Pages Style
    56. Pricing Table Page Style
    57. Faq Page Style
    58. Partner Page Style
    59. 404 Error Page Style
    60. Coming Soon Page Style
    61. Blog Details Page Style
    62. Portfolio Page Style
    63. Portfolio Details Page Style
    64. Shop Page Style
    65. Product Details Page Style
    66. Cart Page Style
    67. Checkout Page Style
    68. Wishlist Page Style

--------------------------- The End -------------------*/

Fonts Used

<!--== Google Fonts ==-->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700%7CPlayfair+Display:400,400i" rel="stylesheet">

Source Files(CSS)

    <!--=== All Plugins CSS ===-->
    <link href="assets/css/plugins.css" rel="stylesheet">
    <!--=== All Vendor CSS ===-->
    <link href="assets/css/vendor.css" rel="stylesheet">
    <!--=== Main Style CSS ===-->
    <link href="assets/css/style.min.css" rel="stylesheet">
Plugins Css (plugins.css)
/*--------------------------------
Css Plugins Index
----------------------
    01. SlickNav
    02. Animate Css
    03. Slick Slider
    04. Odometer
    05. Leaflet
    06. jquery.mb.YTPlayer.min.css
    07. Magnific Popup
    08. Nice Select
    09. jQuery UI - v1.12.1
---------------------------------*/

Source Files(JS)

<!--=======================Javascript============================-->
<!--=== All Vendor Js ===-->
<script src="assets/js/vendor.js"></script>
<!--=== All Plugins Js ===-->
<script src="assets/js/plugins.js"></script>
<!--=== Active Js ===-->
<script src="assets/js/active.min.js"></script>

<!--=== Revolution Slider Js ===-->
<script src="assets/js/revslider/jquery.themepunch.tools.min.js"></script>
<script src="assets/js/revslider/jquery.themepunch.revolution.min.js"></script>

<!-- SLIDER REVOLUTION 5.0 EXTENSIONS  (Load Extensions only on Local File Systems !  The following part can be removed on Server for On Demand Loading) -->
<script src="assets/js/revslider/extensions/revolution.extension.actions.min.js"></script>
<script src="assets/js/revslider/extensions/revolution.extension.carousel.min.js"></script>
<script src="assets/js/revslider/extensions/revolution.extension.kenburn.min.js"></script>
<script src="assets/js/revslider/extensions/revolution.extension.layeranimation.min.js"></script>
<script src="assets/js/revslider/extensions/revolution.extension.migration.min.js"></script>
<script src="assets/js/revslider/extensions/revolution.extension.navigation.min.js"></script>
<script src="assets/js/revslider/extensions/revolution.extension.parallax.min.js"></script>
<script src="assets/js/revslider/extensions/revolution.extension.slideanims.min.js"></script>
<script src="assets/js/revslider/extensions/revolution.extension.video.min.js"></script>


<script src="assets/js/revslider/revslider-active.js"></script>
Plugins JS (plugins.js)
/*---------------------------------
    JS Plugins Index
    ----------------------
    01. SlickNav
    02. Tippy js
    03. Odometer
    04. Isotope
    05. Slick Slider
    06. jQuery.appear
    07. ajaxchimp
    08. easy-pie-chart
    09. Parallax [Jarallax]
    10. instafeed js
    11. sticky-sidebar
    12. Leaflet // Map
    13. jquery.mb.YTPlayer
    14. Magnific Popup
    15. jQuery Nice Select
    16. jQuery Smooth Scroll
    17. jquery-match-height 0.7.2
    18. jquery.nicescroll v3.7.3
    19. jQuery UI - v1.12.1
------------------------------------*/

Customization

How to Change Your Logo

Raju Ahammad

replace your logo on assets/img/ folder as a same name(logo.svg). or if have another name, change img source on html file under header section.

How to Change Your Copyright Text

Raju Ahammad

Open html Files with text editor and Replace your Copyright text on Footer Area.

How to Configure Your Contact Form

Raju Ahammad

open assets/php/mail.php file with text editor and change recipient email address on line no 22.

How to Configure Newsletter / Subscribe Form

Raju Ahammad

Go to newsletter section and replace to your mailchimp subscribe url on form action.


Once again thank you for purchasing one of our Template.

Best Regards Hasthemes