BioHub Documentation


Welcome to BioHub ! Get familiar with the Stripe products and explore their features:

BioHub
Working with Doc

You can any work by following our docs

BioHub
Formatting Content

Our content is more formating for your website

BioHub
Perfect Responsive

Our Template is full Perfect for all device. You can visit our template all device easily.

BioHub
Sass Available

The tamplate has Sass available for css. You can Change css by sass

BioHub
Fast Loading Speed

BioHub is faster loading speed. BioHub create your template so much faster

BioHub
24 Support System

We are provide 24 hours support for all clients.You can purchase without hesitation.

Getting Started

Welcome to BioHub! Get familiar with the features and explore a modern personal portfolio experience:

About BioHub – Next-gen All-in-one Personal Portfolio Bootstrap 5 Template BioHub is a next-generation, all-in-one Personal Portfolio Bootstrap 5 Template, built with HTML5 and Bootstrap 5 using a clean, component-based, and developer-friendly modern architecture. It delivers a professional design, smooth performance, and a fast-loading experience tailored for showcasing personal skills, projects, and achievements.

BioHub comes packed with multiple portfolio-ready demos including Designer, Developer, Freelancer, Photographer, Creative Agency, UI/UX Specialist, and more, along with essential inner pages to present your portfolio, services, resume, testimonials, blog, and contact information effectively.

Whether you're a freelancer, developer, designer, photographer, content creator, or any professional looking to build a strong personal brand, BioHub provides a fully responsive, SEO-friendly, and high-impact design solution to establish a powerful online presence.

BioHub is the perfect multipurpose personal portfolio template for individuals who want to launch a modern, professional, and performance-optimized website with ease.

BioHub Core Features

  • HTML5 & CSS3
  • Responsive layout (desktops, tablets, mobile devices)
  • Built with Bootstrap v5.3.2
  • Well structured code
  • Contact Form Working
  • Hinted Typography
  • Sass Available
  • W3 Valid 100%
  • Fast Loading Speed
  • Cross Browser Support
  • Modern Modal Popup
  • Interactive Lightbox Gallery
  • Modern Blog Pages
  • SEO-Friendly Clean Code
  • Smooth Animations
  • Reusable UI Components
  • Retina Ready Design
  • Dedicated Support, Lifetime Updates
  • And much more …

What's Included

After purchasing BioHub template on templateforest.net with your Envato account, go to your Download page. You can choose to download BioHub template only or the entire BioHub template package which contains the following files:

  1. BioHub template: A .zip file with all .html files with all necessary assets.
  2. Documentation: An HTML format documentation.
  3. Licensing.

How to Install BioHub Website Templates

Installing a BioHub template is not like installing a WordPress or CMS theme. In fact, the word “installation” doesn’t really apply to BioHub. Why? Because you don’t actually install anything. BioHub, like any HTML template, is automatically rendered directly by the browser.

1. Editing BioHub 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. When template editing is done using editor, save the files and folder and go ahead to upload template files on live server.

2. Uploading to Live Server Using FTP:

First of all, If you don’t have your template on your computer, download BioHub template to get started, when download/purchase complete you will get a package like this screenshot (after unzip).

Home Page

3. Package comes with documentation unzip the download package, you’ll found a folder with all template files, like above screenshot.

Home Page

4. Now, login to your hosting control panel or FTP client, such as: FileZilla, CyberDuck etc. and upload template files on your server root.

5. Once all files are uploaded, go to www.yoursite.com/index.html you can see your the homepage, make sure the initial page is named as index.html

Template Structures

Articles

HTML Structure

This template is a fixed layout with four columns. The main contents are inside the 'body' tag divided into differt section (i.e. header, banner, services,... footer etc.). The general template structure is the same throughout the template. Here is the general structure.

Images 
                                        
                                            <!DOCTYPE html>
                                            <html lang="en">
                                            <head>
                                                <meta charset="UTF-8">
                                                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                                <meta name="theme-style-mode" content="1">

                                                <title>Main Home || Biohub Personal Portfolio</title>

                                                <!-- Favicon -->
                                                <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.png">

                                                <!-- CSS ============================================ -->
                                                <link rel="stylesheet" href="assets/css/vendor/bootstrap.css">
                                                <link rel="stylesheet" href="assets/css/vendor/animation.css">
                                                <link rel="stylesheet" href="assets/css/plugins/fontawesome.css">
                                                <link rel="stylesheet" href="assets/css/plugins/lightbox.css">
                                                <link rel="stylesheet" href="assets/css/plugins/box-video.css">
                                                <link rel="stylesheet" href="assets/css/plugins/magnific-popup.css">
                                                <link rel="stylesheet" href="assets/css/plugins/swiper.css">

                                                <!-- custom css -->
                                                <link rel="stylesheet" href="assets/css/style.css">
                                            </head>

                                            <body>

                                                <!-- JS ============================================ -->
                                                <script src="assets/js/vendor/jquery-3.7.1.min.js"></script>
                                                <script src="assets/js/plugins/modernizr.js"></script>
                                                <script src="assets/js/vendor/bootstrap.bundle.min.js"></script>
                                                <script src="assets/js/plugins/animation.js"></script>
                                                <script src="assets/js/plugins/counterup.min.js"></script>

                                                <script src="assets/js/plugins/gsap.js"></script>
                                                <script src="assets/js/plugins/scroll-trigger.js"></script>
                                                <script src="assets/js/plugins/text-type.js"></script>
                                                <script src="assets/js/plugins/magnifying-popup.js"></script>

                                                <script src="assets/js/plugins/lightbox.min.js"></script>
                                                <script src="assets/js/plugins/box-video.js"></script>
                                                <script src="assets/js/plugins/onepagenav.min.js"></script>
                                                <script src="assets/js/plugins/swiper.min.js"></script>
                                                <script src="assets/js/plugins/typed.js"></script>
                                                <script src="assets/js/plugins/waypoint.js"></script>
                                                <script src="assets/js/plugins/wow.min.js"></script>
                                                <script src="assets/js/plugins/contact.form.js"></script>
                                                <script src="assets/js/plugins/smooth-scroll.js"></script>
                                                <script src="assets/js/plugins/backtotop.js"></script>

                                                <!-- main js -->
                                                <script src="assets/js/main.js"></script>

                                            </body>
                                            </html>

CSS Files and Structure

We are using one customed CSS files (style.css) and several vendor css files. CSS file structure is as follows:

HTML Images 
                                            
                                                /*********************************************************************************
                                                  Template Name: BioHub - Personal Portfolio & CV Resume Bootstrap5 HTML Template
                                                  Description: Transform your business with expert consulting. Our team delivers strategic insights, innovative solutions, and professional guidance to help you achieve lasting success.
                                                  Note: This is style css.
                                                **********************************************************************************/
                                                /**************************************************************
                                                  STYLESHEET INDEXING
                                                  |
                                                  |
                                                  |___ Default Styles
                                                  | |
                                                  | |___ variables
                                                  | |___ mixins
                                                  | |___ reset
                                                  | |___ typography
                                                  | |___ extend
                                                  | |___ animations
                                                  | |___ shortcode
                                                  | |___ spacing
                                                  | |___ common
                                                  | |___ forms
                                                  | |___ text-animation
                                                  |
                                                  |
                                                  |___Header Styles
                                                  | |___ header-common
                                                  | |___ headertop
                                                  | |___ offertopbar
                                                  | |___ headermid
                                                  | |___ social-share
                                                  | |___ header
                                                  | |___ nav
                                                  | |___ mega-menu
                                                  | |___ mobilemenu
                                                  | |___ offcanvas
                                                  | |___ one-page-navigation
                                                  |
                                                  |
                                                  |___Elements Styles
                                                  | |___ button
                                                  | |___ section-title
                                                  | |___ breadcrumb
                                                  | |___ card
                                                  | |___ course-meta
                                                  | |___ service
                                                  | |___ feature
                                                  | |___ about
                                                  | |___ callto-action
                                                  | |___ accordion
                                                  | |___ image-gallery
                                                  | |___ counterup
                                                  | |___ pricingtable
                                                  | |___ team
                                                  | |___ social
                                                  | |___ pagination
                                                  | |___ backtotop
                                                  | |___ newsletterform
                                                  | |___ brand
                                                  | |___ portfolio
                                                  | |___ contact
                                                  | |___ testimonial
                                                  | |___ advance-tab
                                                  | |___ category
                                                  | |___ instagram
                                                  | |___ split
                                                  | |___ countdown
                                                  | |___ progressbar
                                                  | |___ category-box
                                                  | |___ course-filter
                                                  | |___ modal
                                                  | |___ list
                                                  | |___ search
                                                  | |___ video
                                                  | |___ 404
                                                  |___Blog Styles
                                                  | |___ blog
                                                  | |___ post-default
                                                  | |___ sidebar
                                                  | |___ blog-details
                                                  | |___ unit-test
                                                  |___Shop Styles {Coming Soon}
                                                  | |___ shop
                                                  | |___ product-details
                                                  | |___ my-account
                                                  | |___ cart
                                                  | |___ checkout
                                                  | |___ minicart
                                                  |___Template Styles
                                                  | |___ banner
                                                  | |___ course-details
                                                  | |___ course-sidebar
                                                  | |___ contact
                                                  | |___ sidebar
                                                  | |___ course-action-bottom
                                                  |___Footer Styles
                                                  | |___ footer
                                                  | |___ copyright
                                                  | |___ back-to-top
                                                  | |___ dark
                                                  |
                                                  |
                                                  |___ END STYLESHEET INDEXING
                                                ***************************************************************/

JavaScript Files

There is a custom .js file named main.js and are several vendor js files as plugins. We are using jQuery(a javascript library) instead of vanilla javascript. Our file structure is a follows:

HTML Images

Change Contents

Changing Images

To change any images of the website

  1. Carefully collect the source name of the image (i.e. banner-img.jpg)
  2. Open the file called images.
  3. Find the particular image file.
  4. Replace the file with your image.
  5. Make sure that the file name does not change.The file name should be the same.

Example: Suppose you want to change the following image file:

                                                    
                                                        <div class="logo-area">
                                                            <a href="index.html">
                                                                <img src="assets/images/logo/02-main.svg" alt="ConstX Logo Images">
                                                            </a>
                                                        </div>
HTML Images

You have to do the following to change this image with your own image:

  1. Open the file called images.
  2. Find the particular image file called banner-img.jpg
  3. Replace the file with your image
  4. Make sure that the file name does not change.

Changing Colors

We have used scss for this project to write css. If you are familiar with scss you should customize only the .scss files. Please make sure you compile the style.scss file after you have made changes in any of the .scss files.

Changing default template colors

  1. Open the variable.scss file from assets > scss > defaults folder with a text-editor.
  2. Change the right-side values of the variables to change any default colors of your site.
  3. Save your file.

Have a look at the following image for a visual description:

Images

Changing Email Settings of the Contact Form

  1. Go to main folder
  2. Open mail.php
  3. Go to line number 15
  4. Follow instructions in image below:
Images

Header Types

Welcome to ConstX Header Elements! You can choose 10 Types of header package for createing you website.

01. Header Default

To change any images of the website

Images 

                                                    
                                                        <!-- Start Header Area -->
                                                        <header class="tmp-header-area header-one header-defalut-spacing header--sticky header--transparent">
                                                            <div class="container">
                                                                <div class="row">
                                                                    <div class="col-lg-12">
                                                                        <div class="header-content">
                                                                            <div class="logo">
                                                                                <a href="index.html">
                                                                                    <img class="logo-dark" src="assets/images/logo/main-logo.svg" alt="logo">
                                                                                    <img class="logo-white" src="assets/images/logo/main-logo.svg" alt="logo">
                                                                                </a>
                                                                            </div>
                                                                            <div class="tmp-header-right">
                                                                                <nav class="tmp-mainmenu-nav d-none d-xl-block tmp-on-hover-animation">
                                                                                    <nav class="navbar-example2 onepagenav">
                                                                                        <ul class="tmp-mainmenu nav nav-pills">
                                                                                            <li class="current"><a class="smoth-animation" href="#home">Home</a></li>
                                                                                            <li><a class="smoth-animation" href="#service">Services</a></li>
                                                                                            <li><a class="smoth-animation" href="#portfolio">Portfolio</a></li>
                                                                                            <li><a class="smoth-animation" href="#blog">Blog</a></li>
                                                                                            <li><a class="smoth-animation" href="#contact">Contact</a></li>
                                                                                            <li class="has-dropdown">
                                                                                                <a href="#" class="external">Pages</a>
                                                                                                <ul class="submenu">
                                                                                                    <li><a href="about.html">About</a></li>
                                                                                                    <li><a href="service.html">Service</a></li>
                                                                                                    <li><a href="service-details.html">Service Details</a></li>
                                                                                                    <li><a href="portfolio.html">Portfolio</a></li>
                                                                                                    <li><a href="portfolio-details.html">Portfolio Details</a></li>
                                                                                                    <li><a href="blog.html">Blog</a></li>
                                                                                                    <li><a href="blog-details.html">Blog Details</a></li>
                                                                                                    <li><a href="contact.html">Contact</a></li>
                                                                                                </ul>
                                                                                            </li>
                                                                                        </ul>
                                                                                    </nav>
                                                                                </nav>
                                                                                <div class="header-btn tmp-button-group d-flex align-items-center">
                                                                                    <a class="tmp-btn btn-border tmp-switch-btn btn-sm hover-transform-none radius-round d-none d-sm-block" href="#">
                                                                                        <span data-text="Let’s Talk">Let’s Talk</span>
                                                                                    </a>
                                                                                    <a class="tmp-btn tmp-switch-btn btn-sm hover-transform-none radius-round" href="#">
                                                                                        <span data-text="Join Now">Join Now</span>
                                                                                    </a>
                                                                                </div>
                                                                                <div class="tmp-side-collups-area d-block d-xl-none">
                                                                                    <button class="tmp-menu-bars humberger_menu_active"><i class="fa-regular fa-bars-staggered"></i></button>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </header>
                                                        <!-- End Header Area -->

02. Header Center

To change any images of the website

  1. Add class="header-center-short header-seven header--sticky" class with header tag
Images 

                                                    
                                                        <!-- header section -->
                                                        <header class="tmp-header tmp-header--technician header--sticky header-sticky-smooth">
                                                            <div class="container">
                                                                <div class="row">
                                                                    <div class="tmp-header-wrapper d-flex justify-content-between align-items-center">
                                                                        <div class="tmp-header-logo">
                                                                            <a href="index.html">
                                                                                <img class="logo-image" width="120" height="40" src="assets/images/logo/logo-technician.svg" alt="logo">
                                                                            </a>
                                                                        </div>
                                                                        <div class="tmp-header-menu">
                                                                            <nav class="tmp-mainmenu-nav d-none d-xl-block tmp-on-hover-animation">
                                                                                <nav class="navbar-example2 onepagenav">
                                                                                    <ul class="tmp-mainmenu nav nav-pills">
                                                                                        <li class="current"><a class="smoth-animation" href="#home">Home</a></li>
                                                                                        <li><a class="smoth-animation" href="#service">Services</a></li>
                                                                                        <li><a class="smoth-animation" href="#portfolio">Portfolio</a></li>
                                                                                        <li><a class="smoth-animation" href="#contact">Contact</a></li>
                                                                                        <li class="has-dropdown">
                                                                                            <a href="#" class="external">Pages</a>
                                                                                            <ul class="submenu">
                                                                                                <li><a href="about.html">About</a></li>
                                                                                                <li><a href="service.html">Service</a></li>
                                                                                                <li><a href="service-details.html">Service Details</a></li>
                                                                                                <li><a href="portfolio.html">Portfolio</a></li>
                                                                                                <li><a href="portfolio-details.html">Portfolio Details</a></li>
                                                                                                <li><a href="blog.html">Blog</a></li>
                                                                                                <li><a href="blog-details.html">Blog Details</a></li>
                                                                                                <li><a href="contact.html">Contact</a></li>
                                                                                            </ul>
                                                                                        </li>
                                                                                    </ul>
                                                                                </nav>
                                                                            </nav>
                                                                        </div>
                                                                        <div class="tmp-header-btn d-flex gap-3 d-lg-flex">

                                                                            <a class="tmp-btn icon-hover btn-sm" href="#">
                                                                                <span class="btn-text">Let's Talk</span>
                                                                                <span class="btn-icon"><i class="fa-sharp fa-regular fa-arrow-right"></i></span>
                                                                            </a>

                                                                            <div class="tmp-mobile-menu d-xl-none d-block">
                                                                                <button class="tmp-menu-bars humberger_menu_active"><i class="fa-light fa-bars"></i></button>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </header>
                                                        <!-- Start Popup Mobile Menu  -->

03. Header Left Alight

Header with topbar and navigation menu to change your header area.

Images 

                                                    
                                                        <!-- Start Header Area -->
                                                        <header class="tmp-header-area header-one header-defalut-spacing header--sticky header--transparent header-modal-main">
                                                            <div class="container">
                                                                <div class="row">
                                                                    <div class="col-lg-12">
                                                                        <div class="header-content">
                                                                            <div class="header-left-side-area-modern">
                                                                                <div class="logo">
                                                                                    <a href="index.html">
                                                                                        <img class="logo-dark" src="assets/images/logo/main-logo.svg" alt="logo">
                                                                                        <img class="logo-white" src="assets/images/logo/main-logo.svg" alt="logo">
                                                                                    </a>
                                                                                </div>
                                                                                <nav class="tmp-mainmenu-nav d-none d-xl-block tmp-on-hover-animation">
                                                                                    <nav class="navbar-example2 onepagenav">
                                                                                        <ul class="tmp-mainmenu nav nav-pills">
                                                                                            <li class="current"><a class="smoth-animation" href="#home">Home</a></li>
                                                                                            <li><a class="smoth-animation" href="#service">Services</a></li>
                                                                                            <li><a class="smoth-animation" href="#portfolio">Portfolio</a></li>
                                                                                            <li><a class="smoth-animation" href="#blog">Blog</a></li>
                                                                                            <li><a class="smoth-animation" href="#contact">Contact</a></li>
                                                                                            <li class="has-dropdown">
                                                                                                <a href="#" class="external">Pages</a>
                                                                                                <ul class="submenu">
                                                                                                    <li><a href="about.html">About</a></li>
                                                                                                    <li><a href="service.html">Service</a></li>
                                                                                                    <li><a href="service-details.html">Service Details</a></li>
                                                                                                    <li><a href="portfolio.html">Portfolio</a></li>
                                                                                                    <li><a href="portfolio-details.html">Portfolio Details</a></li>
                                                                                                    <li><a href="blog.html">Blog</a></li>
                                                                                                    <li><a href="blog-details.html">Blog Details</a></li>
                                                                                                    <li><a href="contact.html">Contact</a></li>
                                                                                                </ul>
                                                                                            </li>
                                                                                        </ul>
                                                                                    </nav>
                                                                                </nav>
                                                                            </div>
                                                                            <div class="tmp-header-right">

                                                                                <div class="header-btn tmp-button-group d-flex align-items-center">
                                                                                    <a class="tmp-btn btn-border tmp-marquee-btn btn-sm hover-transform-none radius-round d-none d-sm-block" href="#">
                                                                                        <span data-text="Let’s Talk">Let’s Talk</span>
                                                                                    </a>
                                                                                    <a class="tmp-btn tmp-marquee-btn btn-sm hover-transform-none radius-round" href="#">
                                                                                        <span data-text="Join Now">Join Now</span>
                                                                                    </a>
                                                                                </div>
                                                                                <div class="tmp-side-collups-area d-block d-xl-none">
                                                                                    <button class="tmp-menu-bars humberger_menu_active"><i class="fa-regular fa-bars-staggered"></i></button>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </header>
                                                        <!-- End Header Area -->

All Elemnts and Shortcode Types


Welcome to BioHub Elements and Shortcode! You can select any elements & shortcode and customize easily and build your website.

Buttons

This the button classes on an <a> and <button> element and create various button.

Images 

                                                    
                                                        <div class="tmp-button-group mt--60">
                                                            <a class="tmp-btn radius-round btn-xs" href="#">
                                                                <span data-text="Join Now">Join Now</span>
                                                            </a>
                                                            <a class="tmp-btn radius-round btn-sm" href="#">
                                                                <span data-text="Join Now">Join Now</span>
                                                            </a>
                                                            <a class="tmp-btn radius-round btn-md" href="#">
                                                                <span data-text="Join Now">Join Now</span>
                                                            </a>
                                                            <a class="tmp-btn radius-round btn-lg" href="#">
                                                                <span data-text="Join Now">Join Now</span>
                                                            </a>
                                                            <a class="tmp-btn radius-round btn-xl" href="#">
                                                                <span data-text="Join Now">Join Now</span>
                                                            </a>
                                                            <a class="tmp-btn radius-round btn-xxl" href="#">
                                                                <span data-text="Join Now">Join Now</span>
                                                            </a>
                                                        </div>


Pricing

Extend the default collapse behavior to create an accordion with the panel component see the code for better understanding

Images 

                                                    
                                                        <div class="row g-5">
                                                            <div class="col-lg-6 col-md-6 col-xl-4">
                                                                <div class="tmp-pricing-card tmp-scroll-trigger tmp-fade-in animation-order-1">
                                                                    <div class="tmp-pricing-card-shape"></div>
                                                                    <div class="tmp-pricing-card-box">
                                                                        <h2 class="h5 pricing-plan-type">Basic</h2>
                                                                        <p class="tmp-pricing-card-desc">Essential development support for small business and personal sites.</p>
                                                                        <h1 class="tmp-pricing-card-price">$15.00</h1>

                                                                        <a class="like-button tmp-btn radius-round hover-icon-reverse btn-border w-100" href="javascript:void(0)">
                                                                            <span class="icon-reverse-wrapper">
                                                                                <span class="btn-text">ORDER NOW</span>
                                                                                <span class="btn-icon"><i class="fa-sharp fa-regular fa-arrow-right"></i></span>
                                                                                <span class="btn-icon"><i class="fa-sharp fa-regular fa-arrow-right"></i></span>
                                                                            </span>
                                                                        </a>

                                                                        <ul class="list-unstyled mb-0 tmp-list">
                                                                            <li><i class="fa-light fa-check"></i> Static Website Setup</li>
                                                                            <li><i class="fa-light fa-check"></i> Responsive Layout Design</li>
                                                                            <li><i class="fa-light fa-check"></i> Basic SEO Structure</li>
                                                                            <li><i class="fa-light fa-check"></i> Single Landing Page</li>
                                                                            <li><i class="fa-light fa-check"></i> Email Support Included</li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="col-lg-6 col-md-6 col-xl-4">
                                                                <div class="tmp-pricing-card tmp-scroll-trigger tmp-fade-in animation-order-2 active-pricing">
                                                                    <div class="tmp-pricing-card-shape"></div>
                                                                    <div class="tmp-pricing-card-feature">Popular</div>
                                                                    <div class="tmp-pricing-card-box">
                                                                        <h2 class="h5 pricing-plan-type">Standard</h2>
                                                                        <p class="tmp-pricing-card-desc">Complete web development solution for growing digital businesses.</p>
                                                                        <h1 class="tmp-pricing-card-price">$20.00</h1>

                                                                        <a class="like-button tmp-btn radius-round hover-icon-reverse w-100" href="javascript:void(0)">
                                                                            <span class="icon-reverse-wrapper">
                                                                                <span class="btn-text">ORDER NOW</span>
                                                                                <span class="btn-icon"><i class="fa-sharp fa-regular fa-arrow-right"></i></span>
                                                                                <span class="btn-icon"><i class="fa-sharp fa-regular fa-arrow-right"></i></span>
                                                                            </span>
                                                                        </a>

                                                                        <ul class="list-unstyled mb-0 tmp-list">
                                                                            <li><i class="fa-light fa-check"></i> Multi Page Website Build</li>
                                                                            <li><i class="fa-light fa-check"></i> Modern UI Component Design</li>
                                                                            <li><i class="fa-light fa-check"></i> Performance Optimization</li>
                                                                            <li><i class="fa-light fa-check"></i> Contact Form Integration</li>
                                                                            <li><i class="fa-light fa-check"></i> Priority Email Support</li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="col-lg-6 col-md-6 col-xl-4">
                                                                <div class="tmp-pricing-card tmp-scroll-trigger tmp-fade-in animation-order-3">
                                                                    <div class="tmp-pricing-card-shape"></div>
                                                                    <div class="tmp-pricing-card-box">
                                                                        <h2 class="h5 pricing-plan-type">Premium</h2>
                                                                        <p class="tmp-pricing-card-desc">Advanced custom development tailored for scalable web applications.</p>
                                                                        <h1 class="tmp-pricing-card-price">$35.00</h1>

                                                                        <a class="like-button tmp-btn radius-round hover-icon-reverse btn-border w-100" href="javascript:void(0)">
                                                                            <span class="icon-reverse-wrapper">
                                                                                <span class="btn-text">ORDER NOW</span>
                                                                                <span class="btn-icon"><i class="fa-sharp fa-regular fa-arrow-right"></i></span>
                                                                                <span class="btn-icon"><i class="fa-sharp fa-regular fa-arrow-right"></i></span>
                                                                            </span>
                                                                        </a>

                                                                        <ul class="list-unstyled mb-0 tmp-list">
                                                                            <li><i class="fa-light fa-check"></i> Custom Web Application</li>
                                                                            <li><i class="fa-light fa-check"></i> API Integration Support</li>
                                                                            <li><i class="fa-light fa-check"></i> Advanced Security Setup</li>
                                                                            <li><i class="fa-light fa-check"></i> Performance Monitoring</li>
                                                                            <li><i class="fa-light fa-check"></i> Dedicated Project Support</li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

Clients

Showcase of clients logos or images. See below image and code for more information.

Images 

                                                    


                                                    <div class="row g-5">
                                                        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 tmp-scroll-trigger tmp-fade-in animation-order-1">
                                                            <div class="tmp-client-card text-center">
                                                                <a href="#" aria-label="client">
                                                                    <img src="assets/images/technician/brand/1.svg" alt="">
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 tmp-scroll-trigger tmp-fade-in animation-order-2">
                                                            <div class="tmp-client-card text-center">
                                                                <a href="#" aria-label="client">
                                                                    <img src="assets/images/technician/brand/2.svg" alt="">
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 tmp-scroll-trigger tmp-fade-in animation-order-3">
                                                            <div class="tmp-client-card text-center">
                                                                <a href="#" aria-label="client">
                                                                    <img src="assets/images/technician/brand/3.svg" alt="">
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 tmp-scroll-trigger tmp-fade-in animation-order-4">
                                                            <div class="tmp-client-card text-center">
                                                                <a href="#" aria-label="client">
                                                                    <img src="assets/images/technician/brand/4.svg" alt="">
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 tmp-scroll-trigger tmp-fade-in animation-order-5">
                                                            <div class="tmp-client-card text-center">
                                                                <a href="#" aria-label="client">
                                                                    <img src="assets/images/technician/brand/5.svg" alt="">
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 tmp-scroll-trigger tmp-fade-in animation-order-6">
                                                            <div class="tmp-client-card text-center">
                                                                <a href="#" aria-label="client">
                                                                    <img src="assets/images/technician/brand/6.svg" alt="">
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 tmp-scroll-trigger tmp-fade-in animation-order-7">
                                                            <div class="tmp-client-card text-center">
                                                                <a href="#" aria-label="client">
                                                                    <img src="assets/images/technician/brand/7.svg" alt="">
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 tmp-scroll-trigger tmp-fade-in animation-order-8">
                                                            <div class="tmp-client-card text-center">
                                                                <a href="#" aria-label="client">
                                                                    <img src="assets/images/technician/brand/8.svg" alt="">
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>

Counters

Different styles of counters for your website are presented in our website.

Images 

                                                    
                                                        
                                                        <div class="col-lg-12 col-xl-7 tmp-scroll-trigger tmp-fade-in animation-order-7">
                                                            <div class="resume-style-1 tmp-four-side-border border-gap-40">
                                                                <div class="tmp-left"></div>
                                                                <div class="tmp-right"></div>
                                                                <div class="tmp-bottom"></div>
                                                                <div class="tmp-bottom-right"></div>
                                                                <div class="resume-inner-content text-start">
                                                                    <div class="tmp-funfact">

                                                                        <div class="tmp-funfact-single">
                                                                            <h2 class="fw-bold"><span class="counter">10</span>+</h2>
                                                                            <p>Complete Projects</p>
                                                                        </div>
                                                                        <div class="tmp-funfact-single">
                                                                            <h2 class="fw-bold"><span class="counter">15</span>+</h2>
                                                                            <p>Happy Clients</p>
                                                                        </div>
                                                                        <div class="tmp-funfact-single">
                                                                            <h2 class="fw-bold"><span class="counter">20</span>K</h2>
                                                                            <p>Real Projects</p>
                                                                        </div>
                                                                        <div class="tmp-funfact-single">
                                                                            <h2 class="fw-bold"><span class="counter">55</span>+</h2>
                                                                            <p>Awesome Clients</p>
                                                                        </div>
                                                                        <div class="tmp-funfact-single">
                                                                            <h2 class="fw-bold"><span class="counter">99</span>K</h2>
                                                                            <p>Pending Projects</p>
                                                                        </div>
                                                                        <div class="tmp-funfact-single">
                                                                            <h2 class="fw-bold"><span class="counter">70</span>+</h2>
                                                                            <p>React Templates</p>
                                                                        </div>

                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

Footer Style

Welcome to ConstX Footer You can select any footer & customize easily and build your website.

Footer Default

Awesome Footer styles. See below image and code for more information.

Images 

                                                    

                                                        <footer class="tmp-footer footer-main is-doctor position-relative">
                                                        <div class="tmp-footer-shape"></div>
                                                        <div class="container">
                                                            <div class="row">
                                                                <div class="tmp-footer-wrapper tmp-section-padding tmp-border-bottom gap-5 d-flex justify-content-between">
                                                                    <div class="tmp-footer-left min-fit mr-50">
                                                                        <a href="home-technician.html" class="tmp-footer-logo mb-1">
                                                                            <img class="logo-image" width="150" height="40" src="assets/images/logo/main-logo.svg" alt="biohub">
                                                                        </a>
                                                                        <h4 class="tmp-footer-mail mt-4 mb-5 d-block">
                                                                            Create something great
                                                                            <a class="hover-moving-primary" href="mailto:mark@example.com">mark@example.com</a>
                                                                        </h4>
                                                                        <div class="tmp-social-default sm-size justify-content-start">
                                                                            <a href="https://facebook.com" target="_blank" class="tmp-social-item" aria-label="facebook"><i class="fab fa-facebook-f"></i></a>
                                                                            <a href="https://twitter.com" target="_blank" class="tmp-social-item" aria-label="twitter"><i class="fab fa-twitter"></i></a>
                                                                            <a href="https://linkedin.com" target="_blank" class="tmp-social-item" aria-label="linkedin"><i class="fab fa-linkedin"></i></a>
                                                                            <a href="https://instagram.com" target="_blank" class="tmp-social-item" aria-label="instagram"><i class="fab fa-instagram"></i></a>
                                                                        </div>
                                                                    </div>
                                                                    <div class="tmp-footer-menus d-flex justify-content-between w-100">
                                                                        <div class="tmp-widget">
                                                                            <div class="tmp-widget-title">
                                                                                <h4>Menu</h4>
                                                                            </div>
                                                                            <div class="tmp-widget-menu">
                                                                                <ul class="list-unstyled link-hover-animation mb-0">
                                                                                    <li><a href="#" aria-label="About Me">About Me</a></li>
                                                                                    <li><a href="#" aria-label="Photoshop">Photoshop</a></li>
                                                                                    <li><a href="#" aria-label="Database">Database</a></li>
                                                                                    <li><a href="#" aria-label="Figma Design">Figma Design</a></li>
                                                                                    <li><a href="#" aria-label="Adobe XD">Adobe XD</a></li>
                                                                                </ul>
                                                                            </div>
                                                                        </div>

                                                                        <div class="tmp-widget">
                                                                            <div class="tmp-widget-title">
                                                                                <h4>Resources</h4>
                                                                            </div>
                                                                            <div class="tmp-widget-menu">
                                                                                <ul class="list-unstyled link-hover-animation mb-0">
                                                                                    <li><a href="#" aria-label="Support Center">Support Center</a></li>
                                                                                    <li><a href="#" aria-label="Terms of My Service">Terms of My Service</a></li>
                                                                                    <li><a href="#" aria-label="Privacy and Policyl">Privacy and Policy</a></li>
                                                                                    <li><a href="#" aria-label="React Router">React Router</a></li>
                                                                                    <li><a href="#" aria-label="Photoshop Design">Photoshop Design</a></li>
                                                                                </ul>
                                                                            </div>
                                                                        </div>

                                                                        <div class="tmp-widget">
                                                                            <div class="tmp-widget-title">
                                                                                <h4>Developers</h4>
                                                                            </div>
                                                                            <div class="tmp-widget-menu">
                                                                                <ul class="list-unstyled link-hover-animation mb-0">
                                                                                    <li><a href="#" aria-label="Contact">Contact Me</a></li>
                                                                                    <li><a href="#" aria-label="About Me">About Me</a></li>
                                                                                    <li><a href="#" aria-label="Management">Management</a></li>
                                                                                    <li><a href="#" aria-label="Support Policy">Support Policy</a></li>
                                                                                    <li><a href="#" aria-label="Adobe XD">Adobe XD</a></li>
                                                                                </ul>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="container">
                                                            <div class="row justify-content-center w-100 text-center">
                                                                <div class="tmp-copyright py-6">
                                                                    <p>© <span id="year">2026</span> All Rights Reserved by <a class="hover-moving-primary" target="_blank" href="https://themeforest.net/user/inversweb">InversWeb</a>
                                                                    </p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </footer>

Footer Two

Awesome Footer Two styles. See below image and code for more information.

Images 

                                                    


                                                       <div class="tmp-footer-area footer-style-4 tmp-section-gapBottom">
                                                            <div class="container">
                                                                <div class="row">
                                                                    <div class="col-lg-12">
                                                                        <div class="footer-area-narrow text-center">
                                                                            <div class="logo">
                                                                                <a href="index.html">
                                                                                    <img src="assets/images/logo/main-logo.svg" alt="Biohub - Personal Portfolio HTML Template for developers and freelancers">
                                                                                </a>
                                                                            </div>
                                                                            <p class="description mt--30">©
                                                                                <script>
                                                                                    document.write(new Date().getFullYear())
                                                                                </script>2026
                                                                                . All rights reserved by <a target="_blank" href="https://themeforest.net/user/inversweb/portfolio">InversWeb.</a>
                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

Footer Three

Awesome Footer Three styles. See below image and code for more information.

Images 

                                                    
                                                        <footer class="tmp-footer footer-technician position-relative">
                                                        <div class="tmp-footer-shape"></div>
                                                        <div class="container">
                                                            <div class="row">
                                                                <div class="tmp-footer-wrapper tmp-section-padding tmp-border-bottom gap-5 d-flex justify-content-between">
                                                                    <div class="tmp-footer-left min-fit mr-50">
                                                                        <a href="index.html" class="tmp-footer-logo mb-1">
                                                                            <img class="logo-image" width="150" height="40" src="assets/images/logo/logo-technician.svg" alt="biohub">
                                                                        </a>
                                                                        <h4 class="tmp-footer-mail mt-4 mb-5 d-block">
                                                                            Create something great
                                                                            <a class="hover-moving-primary" href="mailto:mark@example.com">mark@example.com</a>
                                                                        </h4>
                                                                        <div class="tmp-social-default sm-size justify-content-start">
                                                                            <a href="https://facebook.com" target="_blank" class="tmp-social-item" aria-label="facebook"><i class="fab fa-facebook-f"></i></a>
                                                                            <a href="https://twitter.com" target="_blank" class="tmp-social-item" aria-label="twitter"><i class="fab fa-twitter"></i></a>
                                                                            <a href="https://linkedin.com" target="_blank" class="tmp-social-item" aria-label="linkedin"><i class="fab fa-linkedin"></i></a>
                                                                            <a href="https://instagram.com" target="_blank" class="tmp-social-item" aria-label="instagram"><i class="fab fa-instagram"></i></a>
                                                                        </div>
                                                                    </div>
                                                                    <div class="tmp-footer-menus d-flex justify-content-between w-100">
                                                                        <div class="tmp-widget">
                                                                            <div class="tmp-widget-title">
                                                                                <h4>Menu</h4>
                                                                            </div>
                                                                            <div class="tmp-widget-menu">
                                                                                <ul class="list-unstyled link-hover-animation mb-0">
                                                                                    <li><a href="#" aria-label="About Me">About Me</a></li>
                                                                                    <li><a href="#" aria-label="Photoshop">Photoshop</a></li>
                                                                                    <li><a href="#" aria-label="Database">Database</a></li>
                                                                                    <li><a href="#" aria-label="Figma Design">Figma Design</a></li>
                                                                                    <li><a href="#" aria-label="Adobe XD">Adobe XD</a></li>
                                                                                </ul>
                                                                            </div>
                                                                        </div>

                                                                        <div class="tmp-widget">
                                                                            <div class="tmp-widget-title">
                                                                                <h4>Resources</h4>
                                                                            </div>
                                                                            <div class="tmp-widget-menu">
                                                                                <ul class="list-unstyled link-hover-animation mb-0">
                                                                                    <li><a href="#" aria-label="Support Center">Support Center</a></li>
                                                                                    <li><a href="#" aria-label="Terms of My Service">Terms of My Service</a></li>
                                                                                    <li><a href="#" aria-label="Privacy and Policyl">Privacy and Policy</a></li>
                                                                                    <li><a href="#" aria-label="React Router">React Router</a></li>
                                                                                    <li><a href="#" aria-label="Photoshop Design">Photoshop Design</a></li>
                                                                                </ul>
                                                                            </div>
                                                                        </div>

                                                                        <div class="tmp-widget">
                                                                            <div class="tmp-widget-title">
                                                                                <h4>Developers</h4>
                                                                            </div>
                                                                            <div class="tmp-widget-menu">
                                                                                <ul class="list-unstyled link-hover-animation mb-0">
                                                                                    <li><a href="#" aria-label="Contact">Contact Me</a></li>
                                                                                    <li><a href="#" aria-label="About Me">About Me</a></li>
                                                                                    <li><a href="#" aria-label="Management">Management</a></li>
                                                                                    <li><a href="#" aria-label="Support Policy">Support Policy</a></li>
                                                                                    <li><a href="#" aria-label="Adobe XD">Adobe XD</a></li>
                                                                                </ul>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="container">
                                                            <div class="row justify-content-center w-100 text-center">
                                                                <div class="tmp-copyright py-6">
                                                                    <p>© <span id="year">2026</span> All Rights Reserved by <a class="hover-moving-primary" target="_blank" href="https://themeforest.net/user/inversweb">InversWeb</a>
                                                                    </p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </footer>

Support

Thank you for choosing our template.
For any item-related support, customization requests, or questions not covered in this help file, feel free to reach out to us through our support system.

Leave a Review

We hope you’re loving your new template! ⭐⭐⭐⭐⭐
If this template exceeded your expectations, we’d be thrilled if you could leave a 5-star review.
Your support motivates us to keep creating amazing templates and helps others make the best choice. Submit your review here

If you need the template customization or custom development services please contact us.

Email Us