Techo Flask Documentation 1.0.0

Thank you very much for your purchase!

If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via our Support mail : Support

Introduction

Techo is a Flask-based web template designed specifically for IT Solutions & Technology websites. It comes with a wide array of predefined web components that make it easy to build a professional, high-performing website quickly. Techo features a fully responsive layout, ensuring that your site looks perfect across all devices—from desktop monitors to tablets, iPads, iPhones, and smaller mobile screens.

Installation

To setup the theme, follow below-mentioned steps

  • Download and Extract the Zip File:

    • Download the zip file containing all files integrated with Flask. Extract the contents of the zip file to your desired location.

  • Install Python and Flask:
    • Make sure Python (We recommend version 3.12.3) and Flask (We recommend version 3.0) are installed on your machine. If not already installed, you can download and install Python from the official website. To install Flask, you can use pip:
      • npm install
  • Running the Flask Application:

    To run the Flask application, execute the command:

    • python app.py
  • Editing Techo Template

    Before all that you have to edit your template and place your own contents by replacing old demo contents, in this case, you will need a code editor such as – VScode, Sublime Text etc.

File Structure

    ├──  Techo /
    │   ├──  __pycache__/
    │   ├──  static/
    │   │   ├──  css/
    │   │   ├──  fonts/
    │   │   ├──  images/
    │   │   ├──  includes/
    │   │   ├──  js/
    │   │   ├──  plugins/
    │   │   └──  scss/
    │   ├──  templates/
    │   │   ├──  home
    │   │   ├──  news
    │   │   ├──  pages
    │   │   ├──  services
    │   │   ├──  set
    │   │   └──  shop
    │   ├──  __init__.py
    │   ├──  app.py
    │   ├──  homeViews.py
    │   ├──  newsViews.py
    │   ├──  pagesViews.py
    │   ├──  servicesViews.py
    │   ├──  shopViews.py
    ├──  Documentation/
    │    └── index.html - Index file for documentation.

Flask Structure


{% extends './layout/layout.html' %}

    {% block css %}
		<link href="static/plugins/revolution/css/settings.css" rel="stylesheet" type="text/css"> 
		<link href="static/plugins/revolution/css/layers.css" rel="stylesheet" type="text/css"> 
		<link href="static/plugins/revolution/css/navigation.css" rel="stylesheet" type="text/css"> 
		<link href="static/css/style.css" rel="stylesheet">
    {% endblock css %} 

    {% block script %}
		<script src="static/plugins/revolution/js/jquery.themepunch.revolution.min.js"></script> 
		<script src="static/plugins/revolution/js/jquery.themepunch.tools.min.js"></script>
		<script src="static/plugins/revolution/js/extensions/revolution.extension.actions.min.js"></script> 
		<script src="static/plugins/revolution/js/extensions/revolution.extension.carousel.min.js"></script> 
		<script src="static/plugins/revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
		<script src="static/plugins/revolution/js/extensions/revolution.extension.layeranimation.min.js"></script> 
		<script src="static/plugins/revolution/js/extensions/revolution.extension.migration.min.js"></script>
		<script src="static/plugins/revolution/js/extensions/revolution.extension.navigation.min.js"></script> 
		<script src="static/plugins/revolution/js/extensions/revolution.extension.parallax.min.js"></script> 
		<script src="static/plugins/revolution/js/extensions/revolution.extension.slideanims.min.js"></script> 
		<script src="static/plugins/revolution/js/extensions/revolution.extension.video.min.js"></script>
		<script src="static/js/main-slider-script.js"></script>
    {% endblock script %} 

    {% block script2 %}
		<script src="static/js/jquery.validate.min.js"></script>
		<script src="static/js/jquery.form.min.js"></script> 
		<script src="static/js/contact-form.js"></script>
    {% endblock script2 %} 

{% block content %}

	<!-- Main Header-->
	<header class="main-header header-style-two-new">
		.....	.....	.....	.....	.....
	</header>
	<!--End Main Header -->

	<!--Main Slider-->
	<section class="main-slider">
		.....	.....	.....	.....	.....
	</section>
	<!-- End Main Slider-->

	<!-- About Section -->
	<section class="about-section-six pt-0 pb-70">
		.....	.....	.....	.....	.....
	</section>
	<!--Emd About Section -->

	<!-- Services Section Four -->
	<section class="services-section-four">
		.....	.....	.....	.....	.....
	</section>
	<!-- End Services Section Four-->

	<!-- Project Section -->
	<section class="project-section style-two pb-0">
		.....	.....	.....	.....	.....
	</section>
	<!--End Project Section -->

	<!-- Fun Fact Section -->
	<section class="fun-fact-section">
		.....	.....	.....	.....	.....
	</section>
	<!-- End Fun Fact Section -->

	<!-- Why Choose Us Two-->
	<section class="why-choose-us-four">
		.....	.....	.....	.....	.....
	</section>
	<!--Emd Why Choose Us -->

	<!-- Team Section -->
	<section class="team-section">
		.....	.....	.....	.....	.....
	</section>
	<!-- End Team Section -->

	<!-- Call To Action Two -->
	{% include 'partials/callaction.html' %}
	<!--End Call To Action Two -->

	<!-- Testimonial Section Three -->
	<section class="testimonial-section-four pb-0">
		.....	.....	.....	.....	.....
	</section>
	<!-- End Testimonial Section Three -->

	<!-- Clients Section   -->
	<section class="clients-section">
		.....	.....	.....	.....	.....
	</section>
	<!--End Clients Section -->

	<!-- FAQ Section -->
	<section class="faqs-section style-two">
		.....	.....	.....	.....	.....
	</section>
	<!--End FAQ Section -->

	<!-- News Section -->
	<section class="news-section">
		.....	.....	.....	.....	.....
	</section>
	<!--End News Section -->

	<!-- Contact Section -->
	<section class="contact-four-section">
		.....	.....	.....	.....	.....
	</section>
	<!--End Contact Section -->

	<!-- Call To Action Two -->
	<section class="call-to-action-two p-0">
		.....	.....	.....	.....	.....
	</section>
	<!--End Call To Action Two -->

	<!-- Main Footer -->
	<footer class="main-footer">
		.....	.....	.....	.....	.....
	</footer>
	<!--End Main Footer -->

{% endblock content %}

CSS

Techo Built with latest version of CSS3.

File Name Details
plugins/bootstrap.min.css Bootstrap CSS
plugins/fontawesome.min.css Fontawesome CSS
plugins/slick.css Slick CSS
plugins/animate.css Animate CSS
plugins/odometer.css Odometer CSS
plugins/jquery-ui.min.css jquery CSS
css/swiper-bundle.min.css Swiper CSS
css/style.css Style CSS

Javascript

Techo Built with Javascript

File Name Details
plugins/isotope.pkg.min.js Isotop js
plugins/odometer.js Odometer Js
plugins/ripples.min.js Ripples js
plugins/wow.min.js Wow Js
plugins/swiper.min.js Swiper Js
plugins/YTPlayer.min.js YTPlayer Js
js/main.js All Custom js files

Credit & Resources

We have used the following plugins.

Support

Thank you for become a part of us. If you have any query, suggestion and complain. Contact us anytime. If you have any questions that are beyond the scope of this documentation, please feel free to email us via our Support mail : Support

Changelog

1.0.0 - 30th July 2025

General

Initial Released

© 2025 Techo