×
vineta
Vemus WordPress Theme is Live Special $19 Offer for You! BUY NOW
Hire Us

Doc GearO HTML

Home Doc GearO HTML
  • 1. Welcome
  • 2. HTML Structure
  • 3. CSS System
  • 4. Javascript Custom
  • 5. Compile Styles System
  • 6. Example Edit Template
  • 7. Credits

Smartdesk - Office Equipment eCommerce HTML Template

  • Version: 1.0.0
  • Updated: April 03, 2025
  • First Update: March 21, 2025
  • 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 images please contact: helpdeskthemesflat@gmail.com

Template Features:

  • HTML5 & SCSS
  • 05 Home pages (update+)
  • User Account Pages
  • Multi – Product Layout
  • Product style detail
  • Unlimited Colors
  • Ajax Contact Form
  • Ajax Appointment Form
  • Blog Page
  • Brand Page
  • Contact Page
  • FAQ Page
  • Responsive Template
  • Free icons used
  • Pixel Perfect
  • Clean & Unique Design
  • Easy to customize
  • Retina Ready
  • Filter product
  • Popup cart, popup search
  • Parallax Effect
  • & much more…

HTML Structure

GearO – Office Equipment eCommerce HTML Template GearO Office Equipment eCommerce HTML5 Template is a high-performance, mobile-friendly, and optimally coded template designed for versatility. With 05+ homepages, GearO offers a powerhouse of features for office equipment eCommerce business. Its responsive design ensures seamless adaptability across all devices. Packed with stunning demos and full e-commerce functionality, GearO is the ultimate solution for building a dynamic and engaging online store. Get GearO now along with our whole-hearted support!

Below is GearO basic structure:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title> Vineta - Multipurpose eCommerce HTML5 Template</title>

    <!-- Mobile Specific Metas -->

    <!-- Bootstrap  -->

    <!-- Theme 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-angle-up"></a>
    </a>
   
   <!-- Javascript -->
   <script type="text/javascript" src="assets/js/jquery.min.js"></script>
   <script type="text/javascript" src="assets/js/bootstrap.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/owl.carousel.js"></script>
   <script type="text/javascript" src="assets/js/parallax.js"></script>
   <script type="text/javascript" src="assets/js/jquery.cookie.js"></script>   
   <script type="text/javascript" src="assets/js/switcher.js"></script>      
   <script type="text/javascript" src="assets/js/main.js"></script>
</body>

</html>

CSS System

GearO CSS System contains 3 parts:
  • Template style
  • Shortcodes style
  • Responsive style
  • Javascript – Fonts – Animation – Bootstrap style

Your_template/asset/css/style.scss ( Template style )

/**

    * Reset css styles

    * Components

    * section

    * dashboard

    * Responsive

*/

Your_template/asset/scss/shortcodes.scss ( Shortcodes - Elements style )

You can easily use the shortcodes to create your own page

/**
* Reset Browsers
* General
* Elements
* Forms
* Typography
* Extra classes
* link style
* tf-container
**/

Javascript - Fonts - Animation - Bootstrap style

/**  
*   animate.min.css
*   bootstrap.css
*   bootstrap-select.min.css
*   style.css
*   style.css.map
*   swiper-bundle.min.css
*/

Javascript Custom

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

/**
 *   selectImages
 *   menuleft
 *   tabs
 *   collapse_menu
 *   showpass
 *   select_colors_theme
 *   icon_function
 *   box_search
 *   variant_picker
 *   fullcheckbox
 *   preloader
 **/

Compile Styles System

When you edit the sass code, run the sass scss/app.scss css/styles.css –watch command to compile the code. You can go to the official https://sass-lang.com/ page to see more features

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 GearO:-> images -> logo.png

2. Example of how to edit the “product style” template

Style list: If you want to use style listuse the sample below

<!-- Product style list -->
    <div class="card-product list-layout"> 
    	<div class="card-product-wrapper"> 
    		...
    	</div>
		<div class="card-product-info"> 
    		...
    	</div>
    </div>
Style grid: If you want to use style listuse the sample below 
<!-- Product style 01 -> 07 -->
    <div class="card-product style-2...style-7"> 
    	<div class="card-product-wrapper"> 
    		...
    	</div>
		<div class="card-product-info"> 
    		...
    	</div>
    </div>

3. Example of how to edit the “top bar style”

Background:If you want to change the white background color, add class “bg_white”

<!-- Top bar -->
    <div class="tf-top-bar bg_white"> 
		...
    </div>

Credits