Overview

Vertiqo is a professional, modern, fully-responsive HTML5 template designed for Creative Agencies, Digital Marketing Agencies, IT Companies, Web Studios, Portfolios, and Business websites.

by: bslthemes

If you have any questions, mail to - [email protected]

Tech Stack

Technology Version Purpose
HTML5 / CSS3 - Markup and styling
Bootstrap 5.x Responsive grid and UI framework
jQuery 3.6.0 DOM manipulation
Swiper.js Latest Touch-enabled carousels and sliders
Isotope.js Latest Portfolio filtering and masonry layouts
Fancybox Latest Lightbox image gallery
FontAwesome 6 Icon library
Google Fonts - Inter font family
Framer Animations Custom IntersectionObserver-based scroll animations

Getting Started

This is a static HTML template. No build tools, package managers, or compilation steps are required. It works immediately in any modern browser.

Option 1 - Open Directly

Open any .html file inside the template/ folder directly in your web browser. Start with template/index.html.

Option 2 - VS Code Live Server (Recommended)

  1. Install the "Live Server" extension in VS Code
  2. Right-click any HTML file and select "Open with Live Server"

Option 3 - Python HTTP Server


cd template
python -m http.server 8000
# Open http://localhost:8000

Option 4 - Node.js


npx http-server template

File Structure

After unpacking the archive, you'll see this structure:

						
terio/
|
+-- doc/                              Documentation
|   +-- index.html                    This documentation page
|   +-- assets/                       Documentation assets
|
+-- template/                         Main template files
    +-- index.html                    Homepage (variant 1)
    +-- index-2.html                  Homepage (variant 2)
    +-- index-3.html                  Homepage (variant 3)
    +-- about.html                    About page
    +-- services.html                 Services page
    +-- team.html                     Team page
    +-- pricing.html                  Pricing page
    +-- contacts.html                 Contact page
    +-- 404error.html                 Error page
    +-- blog-grid.html                Blog listing
    +-- blog-single-post.html         Blog post (variant 1)
    +-- blog-single-post-2.html       Blog post (variant 2)
    +-- portfolio-grid.html           Portfolio grid layout
    +-- portfolio-masonry.html        Portfolio masonry layout
    +-- portfolio-metro.html          Portfolio metro layout
    +-- portfolio-single-v1.html      Portfolio detail (variant 1)
    +-- portfolio-single-v2.html      Portfolio detail (variant 2)
    |
    +-- assets/
        +-- css/
        |   +-- bootstrap.min.css     Bootstrap framework
        |   +-- style.css             Main custom styles
        |   +-- responsive.css        Responsive breakpoints
        |   +-- color.css             Theme color scheme
        |   +-- framer-animations.css Animation styles
        |   +-- fontawesome.min.css   Icon styles
        |   +-- jquery.fancybox.min.css Lightbox styles
        |   +-- nice-select.css       Dropdown styles
        |   +-- swiper.css            Carousel styles
        |
        +-- js/
        |   +-- jquery-3.6.0.min.js   jQuery library
        |   +-- bootstrap.min.js      Bootstrap JS
        |   +-- custom.js             Main custom scripts
        |   +-- framer-animations.js  Animation engine
        |   +-- swiper.js             Carousel library
        |   +-- jquery.fancybox.min.js Lightbox library
        |   +-- jquery.nice-select.min.js Dropdown helper
        |   +-- isotope.js            Filtering / masonry
        |   +-- isotope-init.js       Isotope initialization
        |
        +-- fonts/                    FontAwesome font files
        +-- img/                      All template images

Key Files

  • assets/css/style.css - Main stylesheet with all custom component styles (~68 KB)
  • assets/css/responsive.css - All responsive breakpoints and mobile adaptations
  • assets/css/color.css - Theme color definitions (edit this to change the color scheme)
  • assets/js/custom.js - Main JavaScript: counters, accordions, Swiper carousels, search, mobile menu
  • assets/js/framer-animations.js - Scroll-reveal animations, parallax, stagger effects

Pages

The template includes 18 pre-built HTML pages organized into the following categories:

Category File Description
Homepages index.html Primary homepage with hero, services, portfolio, testimonials, blog
index-2.html Alternative homepage layout
index-3.html Third homepage variant
Core Pages about.html Company story, mission, and team introduction
services.html Service/solution offerings with icons
team.html Team member cards with social links
pricing.html Pricing tiers with feature comparison and FAQ
contacts.html Contact form, address information
Portfolio portfolio-grid.html Grid layout with filtering
portfolio-masonry.html Masonry/Pinterest-style layout
portfolio-metro.html Metro/tile layout
portfolio-single-v1.html Single project detail (variant 1)
portfolio-single-v2.html Single project detail (variant 2)
Blog blog-grid.html Blog post listing grid
blog-single-post.html Single post with sidebar (variant 1)
blog-single-post-2.html Single post layout (variant 2)
Error 404error.html Custom 404 error page

Homepages

Three unique homepage designs are provided. Each includes the following sections:

  • Hero section with full-width background and animated text
  • Brand logos carousel
  • Services / How It Works section
  • Project / Portfolio showcase with Swiper carousel
  • Testimonials / Reviews section
  • CTA / Video section
  • Latest blog posts carousel

Inner Pages

Inner pages (About, Services, Team, Pricing, Contact) share a common structure:

  • Breadcrumb / splash area section at the top
  • Page-specific content sections
  • Shared header and footer

Portfolio Pages

Three listing layouts are available, each using Isotope.js for filtering:

  • Grid - Equal-sized cards in a uniform grid
  • Masonry - Pinterest-style with variable heights
  • Metro - Tile-based layout with mixed sizes

Two single-project detail pages are provided with full project descriptions, image galleries (Fancybox), and related projects.

Blog Pages

The blog section includes a grid listing page and two single-post layouts. Single posts feature:

  • Featured image
  • Post metadata (date, author, category)
  • Related posts section
  • Sidebar with categories, recent posts, and tags

HTML Structure

Below is the base HTML structure used across all pages:

					
<!DOCTYPE html>
<html lang="zxx">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vertiqo - Home</title>
  <link rel="icon" href="assets/img/logo-icon.png">

  <!-- CSS -->
  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/css/fontawesome.min.css">
  <link rel="stylesheet" href="assets/css/jquery.fancybox.min.css">
  <link rel="stylesheet" href="assets/css/swiper.css">
  <link rel="stylesheet" href="assets/css/nice-select.css">
  <link rel="stylesheet" href="assets/css/framer-animations.css">
  <link rel="stylesheet" href="assets/css/style.css">
  <link rel="stylesheet" href="assets/css/responsive.css">
  <link rel="stylesheet" href="assets/css/color.css">
</head>
<body>

  <!-- Preloader -->
  <div class="preloader">...</div>

  <!-- Header -->
  <header>...</header>

  <!-- Page Content Sections -->
  <section>...</section>

  <!-- Footer -->
  <footer>...</footer>

  <!-- Back to Top -->
  <a id="button"></a>

  <!-- JavaScript -->
  <script src="assets/js/jquery-3.6.0.min.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
  <script src="assets/js/jquery.fancybox.min.js"></script>
  <script src="assets/js/swiper.js"></script>
  <script src="assets/js/jquery.nice-select.min.js"></script>
  <script src="assets/js/framer-animations.js"></script>
  <script src="assets/js/custom.js"></script>
</body>
</html>

HTML Structure of "Header"

					
<header>
  <div class="container">
    <div class="nav">
      <div class="d-flex align-items-center">
        <!-- Logo -->
        <div class="logo">
          <a href="index.html">
            <img alt="logo" src="assets/img/logo.svg">
          </a>
        </div>
        <!-- Desktop Menu -->
        <ul class="menu">
          <li>
            <a href="#">Home</a>
            <ul class="sub-menu">
              <li><a href="index.html">homepage 1</a></li>
              <li><a href="index-2.html">homepage 2</a></li>
              <li><a href="index-3.html">homepage 3</a></li>
            </ul>
          </li>
          <li>
            <a href="#">Pages</a>
            <ul class="sub-menu">
              <li><a href="about.html">about</a></li>
              <li><a href="team.html">team</a></li>
              <li><a href="services.html">services</a></li>
              <li><a href="pricing.html">pricing</a></li>
              <li><a href="404error.html">404 error</a></li>
            </ul>
          </li>
          <!-- ... more menu items -->
        </ul>
      </div>
      <div>
        <!-- Search -->
        <form id="content">
          <input type="text" name="input" class="input" id="search-input">
          <button type="reset" class="search" id="search-btn"></button>
        </form>
        <!-- CTA Button -->
        <a href="contacts.html" class="themebtu">Get Started</a>
      </div>
      <!-- Mobile Hamburger -->
      <div class="bar-menu">
        <i class="fa-solid fa-bars"></i>
      </div>
    </div>
  </div>
  <!-- Mobile Navigation -->
  <div class="mobile-nav hmburger-menu" id="mobile-nav">
    ...
  </div>
</header>

Notes:

  • The header becomes sticky on scroll
  • Dropdown menus use the .sub-menu class
  • Mobile navigation is toggled via the .bar-menu button
  • Replace logo.svg with your own logo file

HTML Structure of "Home" Pages

Homepage sections follow this order:

					
<!-- 1. Hero Section -->
<section class="hero-section-one" style="background-image: url(assets/img/hero-bg-1.jpg)">
  ...
</section>

<!-- 2. Brand Logos -->
<div class="brands-we-work one gap">
  ...
</div>

<!-- 3. About / Services -->
<section class="gap no-bottom">
  ...
</section>

<!-- 4. How It Works -->
<section class="how-it-works gap no-top">
  ...
</section>

<!-- 5. Projects / Portfolio -->
<section class="project gap">
  ...
</section>

<!-- 6. Testimonials -->
<section class="gap reaview-section">
  ...
</section>

<!-- 7. CTA / Video -->
<section class="gap no-bottom video-section">
  ...
</section>

<!-- 8. Latest Blog -->
<section class="latest-blog gap">
  ...
</section>

HTML Structure of "Inner" Pages

Inner pages start with a breadcrumb/splash area, then contain page-specific sections:

					
<!-- Breadcrumb / Splash Area -->
<section class="splash-area-section">
  <div class="container">
    ...
  </div>
</section>

<!-- Page Content (varies per page) -->
<section class="things-differently gap">
  <div class="container">
    ...
  </div>
</section>

<section class="we-deliver-results gap">
  <div class="container">
    ...
  </div>
</section>

<div class="counter-style gap">
  <div class="container">
    ...
  </div>
</div>

Components

The template includes the following reusable UI components. Each can be copied and adapted across pages.

Hero Section

Full-width hero with background image, heading, description, and CTA buttons.

					
<section class="hero-section-one" style="background-image: url(assets/img/hero-bg-1.jpg)">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-6">
        <div class="hero-text">
          <h1>Your Heading Here</h1>
          <p>Your description text.</p>
          <a href="contacts.html" class="themebtu">Get Started</a>
        </div>
      </div>
    </div>
  </div>
</section>

Variants: Each homepage has a different hero class: .hero-section-one, .hero-section-two, .hero-section-three.

Services

Service cards with FontAwesome icons, titles, and descriptions.

					
<div class="col-lg-4 col-md-6">
  <div class="service-card">
    <i class="fa-solid fa-code"></i>
    <h4>Web Development</h4>
    <p>Service description here.</p>
    <a href="services.html">Read More <i class="fa-solid fa-arrow-right"></i></a>
  </div>
</div>

Portfolio

Portfolio items use Isotope.js for filtering by category and Fancybox for lightbox previews.

					
<!-- Filter Buttons -->
<ul class="filter-buttons">
  <li class="active" data-filter="*">All</li>
  <li data-filter=".design">Design</li>
  <li data-filter=".development">Development</li>
  <li data-filter=".marketing">Marketing</li>
</ul>

<!-- Portfolio Grid -->
<div class="portfolio-grid">
  <div class="portfolio-item design">
    <a data-fancybox="gallery" href="assets/img/portfolio-1.jpg">
      <img src="assets/img/portfolio-1.jpg" alt="Project">
    </a>
    <h5>Project Title</h5>
    <span>Category</span>
  </div>
</div>

Note: The data-filter value must match the class on the portfolio item.

Testimonials

Client testimonial carousel powered by Swiper.js.

					
<div class="swiper reaview">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="testimonial-card">
        <div class="stars">
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
        </div>
        <p>"Client feedback text here."</p>
        <div class="client-info">
          <img src="assets/img/testimonial-1.jpg" alt="Client">
          <h6>Client Name</h6>
          <span>Position, Company</span>
        </div>
      </div>
    </div>
    <!-- More slides... -->
  </div>
  <div class="swiper-pagination"></div>
</div>

Pricing

Pricing tables with tiered plans and feature checklists.

					
<div class="col-lg-4 col-md-6">
  <div class="pricing-card">
    <h4>Basic Plan</h4>
    <div class="price">
      <span class="currency">$</span>
      <span class="amount">29</span>
      <span class="period">/month</span>
    </div>
    <ul class="features">
      <li><i class="fa-solid fa-check"></i> Feature 1</li>
      <li><i class="fa-solid fa-check"></i> Feature 2</li>
      <li class="disabled"><i class="fa-solid fa-xmark"></i> Feature 3</li>
    </ul>
    <a href="#" class="themebtu">Choose Plan</a>
  </div>
</div>

Team

Team member cards with photo, name, role, and social links.

					
<div class="col-lg-3 col-md-6">
  <div class="team-card">
    <img src="assets/img/team-member-1.jpg" alt="Team Member">
    <h5>John Doe</h5>
    <span>CEO & Founder</span>
    <ul class="social-links">
      <li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
      <li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
    </ul>
  </div>
</div>

Blog Cards

Blog post cards with featured image, title, date, and excerpt.

					
<div class="col-lg-4 col-md-6">
  <div class="blog-card">
    <img src="assets/img/blog-grid-1.jpg" alt="Blog Post">
    <div class="blog-meta">
      <span><i class="fa-solid fa-calendar"></i> Jan 15, 2024</span>
      <span><i class="fa-solid fa-user"></i> Admin</span>
    </div>
    <h5><a href="blog-single-post.html">Blog Post Title</a></h5>
    <p>Post excerpt text...</p>
    <a href="blog-single-post.html">Read More</a>
  </div>
</div>

Counter

Animated count-up numbers. The counter activates when scrolled into view.

					
<div class="counter-style gap">
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-6">
        <div class="counter-item">
          <h2 class="count" data-count="150">0</h2>
          <span>+</span>
          <p>Projects Completed</p>
        </div>
      </div>
    </div>
  </div>
</div>

Set the target number via the data-count attribute.

Accordion

Expandable FAQ / accordion sections with smooth animation.

					
<div class="accordion-item">
  <div class="accordion-header">
    <h5>Question or heading text?</h5>
    <i class="fa-solid fa-plus"></i>
  </div>
  <div class="accordion-body">
    <p>Answer or content text.</p>
  </div>
</div>

Buttons

The template's primary button class is .themebtu:

					
<!-- Primary Button -->
<a href="#" class="themebtu">Get Started</a>

<!-- Button with Arrow -->
<a href="#" class="themebtu">Learn More <i class="fa-solid fa-arrow-right"></i></a>

Breadcrumb / Splash Area

Used at the top of inner pages for navigation context:

					
<section class="splash-area-section">
  <div class="container">
    <h2>Page Title</h2>
    <ul class="breadcrumb">
      <li><a href="index.html">Home</a></li>
      <li>Current Page</li>
    </ul>
  </div>
</section>

Customization

This section explains how to personalize the template for your brand and project.

Colors

The primary theme color is #7C3AED (purple). To change it:

  1. Open assets/css/color.css
  2. Replace all occurrences of #7C3AED with your desired color
  3. Also check assets/css/style.css for any hardcoded color values on specific elements
					
/* color.css - Change these values to your brand color */
.themebtu { background-color: #7C3AED; }
a:hover { color: #7C3AED; }
/* ... other color definitions */

Fonts

The template uses the Inter font from Google Fonts. To change it:

  1. Open assets/css/style.css
  2. Replace the @import URL at the top of the file with your chosen Google Fonts URL
  3. Update the font-family declarations throughout the file
					
/* Replace this import with your font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Update font-family references */
body {
  font-family: 'Inter', sans-serif;
}

Images

All images are stored in assets/img/. To customize:

  • Replace images in the img/ folder with your own, keeping the same filenames
  • Or update the src attributes in the HTML files to point to your new filenames
  • Maintain the same aspect ratios for best results
  • Replace logo.svg and logo-icon.svg with your company logo

Note: Preview/demo images are not included in the purchased template. Use your own images.

Icons

The template uses FontAwesome 6 for icons. Browse all available icons at fontawesome.com.

To use an icon, add its class to an <i> tag:

					
<!-- Solid icons -->
<i class="fa-solid fa-code"></i>
<i class="fa-solid fa-pencil-ruler"></i>
<i class="fa-solid fa-arrow-right"></i>

<!-- Brand icons -->
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-linkedin-in"></i>

Animations

The template includes a custom animation engine (framer-animations.js + framer-animations.css) built on the IntersectionObserver API. Elements animate as they scroll into the viewport.

Available Animation Types

Animation Description
Scroll Reveal Elements fade and slide in when they enter the viewport
Stagger Grouped elements reveal one after another with a delay
Parallax Background elements move at different speeds on scroll
Image Reveal Masked entrance effect for images
Magnetic Hover Elements subtly follow the cursor on hover
Tilt 3D tilt effect on cards when hovered

Animations are applied via data attributes and CSS classes in the HTML. The animation engine automatically detects elements and triggers animations on scroll.

Responsive Design

The template is fully responsive. All breakpoints are defined in assets/css/responsive.css.

Breakpoints

Breakpoint Target
1400px+ Extra large desktops
1200px Large desktops
1024px Desktops / landscape tablets
768px Tablets
480px Mobile phones

Key Responsive Features

  • Desktop navigation collapses into a hamburger menu on mobile
  • Multi-column layouts stack into single columns
  • Typography scales down for smaller screens
  • Touch-friendly buttons and interactive elements
  • Swiper carousels adapt slide count per breakpoint

JavaScript

The main custom JavaScript is in assets/js/custom.js. It handles:

Feature Description
Preloader Hides the loading animation after page load
Sticky Header Adds sticky class to header on scroll
Mobile Menu Toggles the hamburger/slide-out navigation
Search Toggle Expands/collapses the header search form
Swiper Carousels Initializes carousels for projects, testimonials, blog, and brands
Counter Animation Count-up animation triggered when counter section enters viewport
Accordion Smooth expand/collapse for FAQ sections
Back to Top Shows/hides the scroll-to-top button based on scroll position
Nice Select Transforms native select dropdowns into styled versions

Script Loading Order

Scripts must be loaded in the following order at the end of <body>:

					
<script src="assets/js/jquery-3.6.0.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.fancybox.min.js"></script>
<script src="assets/js/swiper.js"></script>
<script src="assets/js/jquery.nice-select.min.js"></script>
<script src="assets/js/isotope.js"></script>        <!-- Portfolio pages only -->
<script src="assets/js/isotope-init.js"></script>   <!-- Portfolio pages only -->
<script src="assets/js/framer-animations.js"></script>
<script src="assets/js/custom.js"></script>

CSS Classes Reference

Common utility and layout classes used throughout the template:

Layout Classes

Class Description
.gap Standard section padding (top and bottom)
.no-top Removes top padding
.no-bottom Removes bottom padding
.container Bootstrap container (centered, max-width)

Component Classes

Class Description
.themebtu Primary CTA button style
.hero-section-one Hero section for homepage variant 1
.hero-section-two Hero section for homepage variant 2
.hero-section-three Hero section for homepage variant 3
.splash-area-section Inner page breadcrumb/header area
.brands-we-work Brand logos carousel section
.reaview-section Testimonials/reviews section
.counter-style Counter/stats section
.latest-blog Blog posts section
.footer-logo Footer logo area
.footer-bottom Footer copyright and social links
.preloader Page loading animation
.bar-menu Mobile hamburger menu trigger
.mobile-nav Mobile slide-out navigation
.sub-menu Dropdown menu items

Browser Support

Browser Support
Google Chrome Latest
Mozilla Firefox Latest
Apple Safari Latest
Microsoft Edge Latest
Opera Latest

Sources & Credits

Scripts & Libraries

Fonts & Icons

Images

Any images or logos used in previews are not included in this item or final purchase.

  • Freepik, Unsplash, Envato Elements