Repair Geek - Laptop And Computer Fixing Service Center HTML5 Template

If you like this template please spare a minute to rate it. If you want any support, Please feel free to contact me via my profile page http://themeforest.net/user/xenioushk

Template Overview

Repair Geek is a modern looking HTML5 template designed & developed for Laptop And Computer Fixing Service Center in mind. It works smoothly on your Computer, or on your tablet and mobile devices. It’s comes with eye catching features, such as animates boxes, contact form section, testimonial box, counter block and much more.

Features

20+ HTML5 Templates

  1. Home Page 1 (index.html)
  2. Home Page 2 (home-2.html)
  3. About Us (about-us.html)
  4. Our Volunteer (team.html)
  5. Volunteer Details (single-team.html)
  6. Blog (blog.html)
  7. Blog single(single.html)
  8. Events (events.html)
  9. Single Events (event-single.html)
  10. Causes (causes.html)
  11. Single Cause(cause-single.html)
  12. FAQ (faq.html)
  13. Donation (donation.html)
  14. Coming Soon (coming-soon.html)
  15. 404 (404.html)
  16. Contact(contact.html)
  17. Gallery 01(gallery-1.html)
  18. Gallery 01(gallery-2.html)
  19. Element Highlights (element-highlights.html)
  20. Element Counter (element-counters.html)
  21. Element CTA (element-cta.html)
  22. Element Sponsors (element-sponsors.html)
  23. Element Testimonials (element-testimonial.html)
  24. Element Team (element-team.html)
  25. Element Newsletter (element-newsletter.html)

🛠️ Customize Template

Requirements:

👉 To customize and run the project, you need to install the following node modules.

👉 Node version 18 is required to install the following node modules. Please install Node.js installed on your computer. 

"dependencies": {
"autoprefixer": "^10.4.16",
"concurrently": "^8.2.2",
"esbuild": "^0.19.8",
"live-server": "^1.2.2",
"postcss": "^8.4.32",
"sass": "^1.69.5"
}

Steps to customize the templates:

  • Download the repair_geek_laptop_and_computer_fixing_service_center_html5_template.zip file and unzip it.
  • You will get the following templates folder.

    repair geek templates documentation

  • Copy any of the templates folder (mobile_fixer, v_1, v_2).
  • Now, open the terminal or command window. From the command line, navigate to the folder. 
    cd v_1
  • Next, Install the node modules. 
    npm install

    👨‍💻 Note: If you are using Windows, you may need to run the command prompt as administrator.

  • Now, run the project. 
    npm run dev
    This command will compile the SCSS files and create the styles.css file in the assets folder. It will also compile the javascript files and create the scripts.js file in the assets folder.

    ✅ All the compiled files will be uncompressed.

  • Now, if you want to change the colors go to the src/styles/variables.scss file.

    For example, you can change the primary color of the template from $primary-color variable.

  • To build the styles and scripts. 
    npm run build

    ✅ This command will create the minified version of the styles.css and scripts.js files in the assets folder.

Structure

All the directories and files are well organized as it shown on the image bellow. Same file tree has been applicable for all HTML files

repair geek templates documentation

HTML File Structure

This template is a mobile friendly (responsive) layout which is designed based on Twitter Bootstrap v3.*. See our HTML file structure which is in index.html. Your contents go inside container.

repair geek templates documentation

CSS File Structure

We are using 7 CSS files in this template and we separated styles for improving convenience to edit this template. If you're going to use this template in production we recommend you to merge all stylesheets into one file (for decreasing HTTP queries).

repair geek templates documentation

jQuery File Structure

There are 11 jQuery files including necessary plugins, all of them be found in jsfolder of home directory. custom-scripts.js This file must go all the way down to other files and plugins for app landing page. This file contains custom codes

repair geek templates documentation

Logo Change

Hedaer Logo Screenshot

repair geek templates documentation

Template Font

We have used google font Open Sans. Font used in the top of the file less/variables.less

repair geek templates documentation

Animation

We used WOW plugin to trigger animations on scroll. Here are some animation classes we used in this Template. To learn more about WOW please read their Documentation
    1. fadeIn
    2. fadeInLeft
    3. fadeInRight
    4. fadeInUp
    5. fadeInDown
    6. fadeInLeftBig
    7. fadeInRightBig
    8. fadeInUpBig
    9. fadeInDownBig

repair geek templates documentation

Background

We used several background images in our template. You'll find the code in the file css/less/layout.less. Thess code will be available after the compilation of the layout.less and written in the css/layout.css in the. Examples are given in the screenshot

In the layout.less

repair geek templates documentation

In the index.html

repair geek templates documentation

Google Map

For contact page Google Map, open the file js/custom-scripts.js and look for the line 442/443 and change the lat, lng value according to your map location

repair geek templates documentation

Contact Form

Template comes with Ajax powered functional contact form feature. You just need to set your email address in 'contact_email.php' file and user will be able to send email to your address.

repair geek templates documentation

Change Log

2025, 20 August - v 1.0.6
- Added: SCSS support for the template.
- Fixed: Template minor bugs.

2023, 21 September - v 1.0.5
- Fixed: Template minor bugs.

2018, April, 04 - v 1.0.1
- Added Two More Home Pages With New Color Scheme.
- Added Functional Contact Form.
- Update Documentation.

2017, September, 09 - v 1.0.0
- Initial release

Sources and Credits

- jQuery
- Bootstrap
- Google Fonts
- Owl Carousel
- Font Awesome
- Google Maps API
- Freepik.com
- Pexels.com