Intoduction


Haptic - Creative Web Agency HTML Template

An HTML Template

Created : 04/9/2023
By : themexriver
Email : https://themexriver.helpviser.com/

Thank you for purchasing Haptic - Creative Web Agency HTML Template. If you have any questions that are beyond the scope of this help file, please feel free to email, via my user page contact form or put a ticket at Support Center .
Thankyou so much!

HTML Structure


The html template uses Latest Bootstrap v5 with valid HTML5 tags. This template is a responisve layout with Bootstrap Grid Support column. All of the information in content area is nested within a class and comes with predefined classes. 

								<!-- Start of header
								============================================= -->
								<header>
								...
								</header>
								<!-- End of header
								============================================= -->

								<!-- Start of section name
								============================================= -->
								<section id="section-name-id" class="section-name-class">
								...
								</section>
								<!-- End section name
								============================================= -->


								<!-- Start of footer
								============================================= -->
								<footer>
								...
								</footer>
								<!-- End of footer
								============================================= -->

Main Slider Structure (Personal Portfolio)



								<div class="bi-main-slider swiper-container">
								<div class="swiper-wrapper">
								<div class="swiper-slide">
								<div class="bi-main-slide-item position-relative">
								<div class="container">
								<div class="bi-main-slide-text-img-content d-flex align-items-end">
								<div class="bi-slide-img-area position-relative">
								<div class="bi-slide-img">
								<img src="assets/img/slider/slide_img_2.png" alt="">
								</div>
								<div class="bi-slide-text-img position-absolute">
								<img src="assets/img/slider/slide_text_5.png" alt="">
								</div>
								<div class="bi-slide-img-arrow position-absolute">
								<img src="assets/img/slider/slide_arrow_3.png" alt="">
								</div>
								</div>
								<div class="bi-slide-text-area headline ul-li-block">
								<h1>Smooth</h1>
								<h2 class="b-strock-font">
								Development</h2>
								<ul>
								<li>Digital Marketing</li>
								<li>Quality Designs</li>
								<li>Mobile Solutions</li>
								</ul>
								<div class="bi-btn-1 bi-btn-area text-uppercase">
								<a class="bi-btn-main  bi-btn-hover bi-btn-item" href="service.html">  <span></span> Get Services</a>
								</div>
								</div>
								</div>
								</div>
								<span class="side-shape position-absolute"><img src="assets/img/slider/slide_shape_4.png" alt=""></span>
								</div>
								</div>
								<div class="swiper-slide">
								<div class="bi-main-slide-item position-relative">
								<div class="container">
								<div class="bi-main-slide-text-img-content d-flex align-items-end">
								<div class="bi-slide-img-area position-relative">
								<div class="bi-slide-img">
								<img src="assets/img/slider/slide_img_2.png" alt="">
								</div>
								<div class="bi-slide-text-img position-absolute">
								<img src="assets/img/slider/slide_text_5.png" alt="">
								</div>
								<div class="bi-slide-img-arrow position-absolute">
								<img src="assets/img/slider/slide_arrow_3.png" alt="">
								</div>
								</div>
								<div class="bi-slide-text-area headline ul-li-block">
								<h1>Smooth</h1>
								<h2 class="b-strock-font">
								Development</h2>
								<ul>
								<li>Digital Marketing</li>
								<li>Quality Designs</li>
								<li>Mobile Solutions</li>
								</ul>
								<div class="bi-btn-1 bi-btn-area text-uppercase">
								<a class="bi-btn-main  bi-btn-hover bi-btn-item" href="service.html">  <span></span> Get Services</a>
								</div>
								</div>
								</div>
								</div>
								<span class="side-shape position-absolute"><img src="assets/img/slider/slide_shape_4.png" alt=""></span>
								</div>
								</div>
								<div class="swiper-slide">
								<div class="bi-main-slide-item position-relative">
								<div class="container">
								<div class="bi-main-slide-text-img-content d-flex align-items-end">
								<div class="bi-slide-img-area position-relative">
								<div class="bi-slide-img">
								<img src="assets/img/slider/slide_img_2.png" alt="">
								</div>
								<div class="bi-slide-text-img position-absolute">
								<img src="assets/img/slider/slide_text_5.png" alt="">
								</div>
								<div class="bi-slide-img-arrow position-absolute">
								<img src="assets/img/slider/slide_arrow_3.png" alt="">
								</div>
								</div>
								<div class="bi-slide-text-area headline ul-li-block">
								<h1>Smooth</h1>
								<h2 class="b-strock-font">
								Development</h2>
								<ul>
								<li>Digital Marketing</li>
								<li>Quality Designs</li>
								<li>Mobile Solutions</li>
								</ul>
								<div class="bi-btn-1 bi-btn-area text-uppercase">
								<a class="bi-btn-main  bi-btn-hover bi-btn-item" href="service.html">  <span></span> Get Services</a>
								</div>
								</div>
								</div>
								</div>
								<span class="side-shape position-absolute"><img src="assets/img/slider/slide_shape_4.png" alt=""></span>
								</div>
								</div>
								</div>
								</div>

Main Slider Structure (Digital Web Agency)



								<div class="bi-slider-wrapper-3">
								<div class="swiper-wrapper">
								<div class="swiper-slide">
								<div class="bi-slider-item-3 position-relative">
								<div class="bi-slider-img3_1 position-absolute"><img src="assets/img/slider/slide_vector_1.png" alt=""></div>
								<div class="bi-slider-img3_2 position-absolute"><img src="assets/img/slider/slide_3.png" alt=""></div>
								<div class="container">
								<div class="bi-slider-text-3 headline pera-content">
								<div class="slider-sub-title text-uppercase">Welcome Creative Agency</div>
								<h1>
								<span>Creative </span>
								Agency Digital
								</h1>
								<div class="slider-img-desc d-flex align-items-center">
								<div class="inner-img">
								<img src="assets/img/slider/slide_4.png" alt="">
								</div>
								<div class="inner-text">
								Suspendisse finibus dolor et pharetra porta. Sed quam elit, lacinia vitae mi quis, ullamcorper imperdiet dolor. Ut imperdiet turpis nulla, eget pharetra velit pretium viverra.
								</div>
								</div>
								<div class="slider-btn-grp d-flex align-items-center">
								<div class="bi-btn-3 text-uppercase">
								<a href="contact.html">get Started <img src="assets/img/icon/arrow.svg" alt=""></a>
								</div>
								<div class="bi-slider-video-play">
								<a class="d-flex align-items-center video_box" href="https://www.youtube.com/watch?v=Nv7RgGpu6ME"><i class="fal fa-play-circle"></i> Watch Video</a>
								</div>
								</div>
								</div>
								</div>
								</div>
								</div>
								<div class="swiper-slide">
								<div class="bi-slider-item-3 position-relative">
								<div class="bi-slider-img3_1 position-absolute"><img src="assets/img/slider/slide_vector_1.png" alt=""></div>
								<div class="bi-slider-img3_2 position-absolute"><img src="assets/img/slider/slide_3.png" alt=""></div>
								<div class="container">
								<div class="bi-slider-text-3 headline pera-content">
								<div class="slider-sub-title text-uppercase">Welcome Creative Agency</div>
								<h1>
								<span>Creative </span>
								Agency Digital
								</h1>
								<div class="slider-img-desc d-flex align-items-center">
								<div class="inner-img">
								<img src="assets/img/slider/slide_4.png" alt="">
								</div>
								<div class="inner-text">
								Suspendisse finibus dolor et pharetra porta. Sed quam elit, lacinia vitae mi quis, ullamcorper imperdiet dolor. Ut imperdiet turpis nulla, eget pharetra velit pretium viverra.
								</div>
								</div>
								<div class="slider-btn-grp d-flex align-items-center">
								<div class="bi-btn-3 text-uppercase">
								<a href="contact.html">get Started <img src="assets/img/icon/arrow.svg" alt=""></a>
								</div>
								<div class="bi-slider-video-play">
								<a class="d-flex align-items-center video_box" href="https://www.youtube.com/watch?v=Nv7RgGpu6ME"><i class="fal fa-play-circle"></i> Watch Video</a>
								</div>
								</div>
								</div>
								</div>
								</div>
								</div>
								<div class="swiper-slide">
								<div class="bi-slider-item-3 position-relative">
								<div class="bi-slider-img3_1 position-absolute"><img src="assets/img/slider/slide_vector_1.png" alt=""></div>
								<div class="bi-slider-img3_2 position-absolute"><img src="assets/img/slider/slide_3.png" alt=""></div>
								<div class="container">
								<div class="bi-slider-text-3 headline pera-content">
								<div class="slider-sub-title text-uppercase">Welcome Creative Agency</div>
								<h1>
								<span>Creative </span>
								Agency Digital
								</h1>
								<div class="slider-img-desc d-flex align-items-center">
								<div class="inner-img">
								<img src="assets/img/slider/slide_4.png" alt="">
								</div>
								<div class="inner-text">
								Suspendisse finibus dolor et pharetra porta. Sed quam elit, lacinia vitae mi quis, ullamcorper imperdiet dolor. Ut imperdiet turpis nulla, eget pharetra velit pretium viverra.
								</div>
								</div>
								<div class="slider-btn-grp d-flex align-items-center">
								<div class="bi-btn-3 text-uppercase">
								<a href="contact.html">get Started <img src="assets/img/icon/arrow.svg" alt=""></a>
								</div>
								<div class="bi-slider-video-play">
								<a class="d-flex align-items-center video_box" href="https://www.youtube.com/watch?v=Nv7RgGpu6ME"><i class="fal fa-play-circle"></i> Watch Video</a>
								</div>
								</div>
								</div>
								</div>
								</div>
								</div>
								</div>
								</div>

Main Slider Structure (Creative Web Agency)



								<div class="bi-main-slider-4 swiper-container position-relative">
								<div class="swiper-wrapper">
								<div class="swiper-slide">
								<div class="bi-main-slider-item-4 position-relative">
								<span class="shape_1 position-absolute"><img src="assets/img/slider/s-circle.png" alt=""></span>
								<span class="slider_men position-absolute"><img src="assets/img/slider/s-men2.png" alt=""></span>
								<div class="bi-main-slider-text position-relative headline pera-content">
								<h1>
								We are
								<span>Creative</span>
								<strong>Agen <b>cy</b></strong>
								</h1>
								<div class="bi-slider-text">
								<p>Lorem ipsum dolor sit amet consectetur. Eu sit eros proin quisque est. Quis quis tortor nulla at. Molestie risus porttitor nec enim ac viverra.</p>
								<div class="bi-btn-4 text-uppercase">
								<a href="contact.html">get started <span class="d-flex justify-content-center align-items-center"><img src="assets/img/icon/arrow.svg" alt=""></span></a>
								</div>
								</div>
								</div>
								<div class="bi-slider-watch-video">
								<a class="video_box d-flex align-items-center" href="https://www.youtube.com/watch?v=Nv7RgGpu6ME">
								<div class="inner-icon d-flex position-relative justify-content-center align-items-center">
								<i class="fas fa-play"></i>
								<span class="video_btn_border border_wrap-1"></span>
								<span class="video_btn_border border_wrap-2"></span>
								<span class="video_btn_border border_wrap-3"></span>
								</div>
								<div class="inner-text headline">
								<h4>Watch Intro Video</h4>
								<span>90 Seconds</span>
								</div>
								</a>
								</div>
								</div>
								</div>
								<div class="swiper-slide">
								<div class="bi-main-slider-item-4 position-relative">
								<span class="shape_1 position-absolute"><img src="assets/img/slider/s-circle.png" alt=""></span>
								<span class="slider_men position-absolute"><img src="assets/img/slider/s-men.png" alt=""></span>
								<div class="bi-main-slider-text position-relative headline pera-content">
								<h1>
								We are
								<span>Creative</span>
								<strong>Agen <b>cy</b></strong>
								</h1>
								<div class="bi-slider-text">
								<p>Lorem ipsum dolor sit amet consectetur. Eu sit eros proin quisque est. Quis quis tortor nulla at. Molestie risus porttitor nec enim ac viverra.</p>
								<div class="bi-btn-4 text-uppercase">
								<a href="contact.html">get started <span class="d-flex justify-content-center align-items-center"><img src="assets/img/icon/arrow.svg" alt=""></span></a>
								</div>
								</div>
								</div>
								<div class="bi-slider-watch-video">
								<a class="video_box d-flex align-items-center" href="https://www.youtube.com/watch?v=Nv7RgGpu6ME">
								<div class="inner-icon position-relative d-flex justify-content-center align-items-center">
								<i class="fas fa-play"></i>
								<span class="video_btn_border border_wrap-1"></span>
								<span class="video_btn_border border_wrap-2"></span>
								<span class="video_btn_border border_wrap-3"></span>
								</div>
								<div class="inner-text headline">
								<h4>Watch Intro Video</h4>
								<span>90 Seconds</span>
								</div>
								</a>
								</div>
								</div>
								</div>
								<div class="swiper-slide">
								<div class="bi-main-slider-item-4 position-relative">
								<span class="shape_1 position-absolute"><img src="assets/img/slider/s-circle.png" alt=""></span>
								<span class="slider_men position-absolute"><img src="assets/img/slider/s-men2.png" alt=""></span>
								<div class="bi-main-slider-text position-relative headline pera-content">
								<h1>
								We are
								<span>Creative</span>
								<strong>Agen <b>cy</b></strong>
								</h1>
								<div class="bi-slider-text">
								<p>Lorem ipsum dolor sit amet consectetur. Eu sit eros proin quisque est. Quis quis tortor nulla at. Molestie risus porttitor nec enim ac viverra.</p>
								<div class="bi-btn-4 text-uppercase">
								<a href="contact.html">get started <span class="d-flex justify-content-center align-items-center"><img src="assets/img/icon/arrow.svg" alt=""></span></a>
								</div>
								</div>
								</div>
								<div class="bi-slider-watch-video">
								<a class="video_box d-flex align-items-center" href="https://www.youtube.com/watch?v=Nv7RgGpu6ME">
								<div class="inner-icon position-relative d-flex justify-content-center align-items-center">
								<i class="fas fa-play"></i>
								<span class="video_btn_border border_wrap-1"></span>
								<span class="video_btn_border border_wrap-2"></span>
								<span class="video_btn_border border_wrap-3"></span>
								</div>
								<div class="inner-text headline">
								<h4>Watch Intro Video</h4>
								<span>90 Seconds</span>
								</div>
								</a>
								</div>
								</div>
								</div>
								</div>
								<div class="bi-main-slider-next-prev">
								<div class="bi-main-slider-arrow-4 d-flex justify-content-end align-items-center bi-main-button-prev-4" data-background="assets/img/slider/arrow-bg1.png"><i class="far fa-long-arrow-left"></i></div>
								<div class="bi-main-slider-arrow-4 bi-main-button-next-4  d-flex justify-content-start align-items-center" data-background="assets/img/slider/arrow-bg2.png"><i class="far fa-long-arrow-right"></i></div>
								</div>
								</div>

Testimonial Slider(Web Agency)



        <div class="hap-testimonial-slider swiper-container">
        <div class="swiper-wrapper">
        <div class="swiper-slide">
        <div class="hap-testimonial-item d-flex align-items-center justify-content-center">
        <div class="testimoial-img position-relative">
        <img src="assets/img/home_5/about/tst1.png" alt="">
        </div>
        <div class="testimoial-text-author position-relative" data-background="">
        <div class="testimonial-desc">
        On the other hand, We denounce with righteous indignation And Dislike men who are beguiled and demoralized the Charms of Pleasure At vero eos et accusamus et iusto odio Dignis
        </div>
        <div class="testimonial-author hap-headline">
        <h3>Mike Hardson</h3>
        <span>Director</span>
        </div>
        </div>
        </div>
        </div>
        <div class="swiper-slide">
        <div class="hap-testimonial-item d-flex align-items-center justify-content-center">
        <div class="testimoial-img position-relative">
        <img src="assets/img/home_5/about/tst1.png" alt="">
        </div>
        <div class="testimoial-text-author position-relative" data-background="">
        <div class="testimonial-desc">
        On the other hand, We denounce with righteous indignation And Dislike men who are beguiled and demoralized the Charms of Pleasure At vero eos et accusamus et iusto odio Dignis
        </div>
        <div class="testimonial-author hap-headline">
        <h3>Mike Hardson</h3>
        <span>Director</span>
        </div>
        </div>
        </div>
        </div>
        <div class="swiper-slide">
        <div class="hap-testimonial-item d-flex align-items-center justify-content-center">
        <div class="testimoial-img position-relative">
        <img src="assets/img/home_5/about/tst1.png" alt="">
        </div>
        <div class="testimoial-text-author position-relative" data-background="">
        <div class="testimonial-desc">
        On the other hand, We denounce with righteous indignation And Dislike men who are beguiled and demoralized the Charms of Pleasure At vero eos et accusamus et iusto odio Dignis
        </div>
        <div class="testimonial-author hap-headline">
        <h3>Mike Hardson</h3>
        <span>Director</span>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>

Testimonial Slider(Creative Agency)



        <div class="bi-testimonial-content position-relative">
        <div class="bi-testimonial-thumb position-absolute">
        <div class="bi-testimonial-nav swiper-container">
        <div class="swiper-wrapper">
        <div class="swiper-slide">
        <div  class="bi-testimonial-nav-item">
        <img src="assets/img/testimonial/test-1.jpg" alt="">
        </div>
        </div>
        <div class="swiper-slide">
        <div  class="bi-testimonial-nav-item">
        <img src="assets/img/testimonial/test-2.jpg" alt="">
        </div>
        </div>
        <div class="swiper-slide">
        <div  class="bi-testimonial-nav-item">
        <img src="assets/img/testimonial/test-3.jpg" alt="">
        </div>
        </div>
        <div class="swiper-slide">
        <div  class="bi-testimonial-nav-item">
        <img src="assets/img/testimonial/test-1.jpg" alt="">
        </div>
        </div>
        <div class="swiper-slide">
        <div  class="bi-testimonial-nav-item">
        <img src="assets/img/testimonial/test-2.jpg" alt="">
        </div>
        </div>
        </div>
        </div>
        </div>
        <div class="bi-testimonial-item-content">
        <div class="bi-testimonial-slider-for swiper-container">
        <div class="swiper-wrapper">
        <div class="swiper-slide">
        <div class="bi-testimonial-item-2 d-flex align-items-center">
        <div class="bi-testimonial-img">
        <img src="assets/img/testimonial/test1.jpg" alt="">
        </div>
        <div class="bi-testimonial-text">
        <div class="testimonial-quote">
        <img src="assets/img/icon/qt.png" alt="">
        </div>
        <div class="testimonial-desc">
        Since 1985 Reed has pioneered specialist recruitment Sourcing knowledgeable, 
        skilled professionals pioneered Specialist recruitment, sourcing.
        </div>
        <div class="testimonial-author headline">
        <h3>Tandre Flop</h3>
        <span>CEO, Squaround</span>
        </div>
        </div>
        </div>
        </div>
        <div class="swiper-slide">
        <div class="bi-testimonial-item-2 d-flex align-items-center">
        <div class="bi-testimonial-img">
        <img src="assets/img/testimonial/test2.jpg" alt="">
        </div>
        <div class="bi-testimonial-text">
        <div class="testimonial-quote">
        <img src="assets/img/icon/qt.png" alt="">
        </div>
        <div class="testimonial-desc">
        Since 1985 Reed has pioneered specialist recruitment Sourcing knowledgeable, 
        skilled professionals pioneered Specialist recruitment, sourcing.
        </div>
        <div class="testimonial-author headline">
        <h3>Tandre Flop</h3>
        <span>CEO, Squaround</span>
        </div>
        </div>
        </div>
        </div>
        <div class="swiper-slide">
        <div class="bi-testimonial-item-2 d-flex align-items-center">
        <div class="bi-testimonial-img">
        <img src="assets/img/testimonial/test3.jpg" alt="">
        </div>
        <div class="bi-testimonial-text">
        <div class="testimonial-quote">
        <img src="assets/img/icon/qt.png" alt="">
        </div>
        <div class="testimonial-desc">
        Since 1985 Reed has pioneered specialist recruitment Sourcing knowledgeable, 
        skilled professionals pioneered Specialist recruitment, sourcing.
        </div>
        <div class="testimonial-author headline">
        <h3>Tandre Flop</h3>
        <span>CEO, Squaround</span>
        </div>
        </div>
        </div>
        </div>
        <div class="swiper-slide">
        <div class="bi-testimonial-item-2 d-flex align-items-center">
        <div class="bi-testimonial-img">
        <img src="assets/img/testimonial/test1.jpg" alt="">
        </div>
        <div class="bi-testimonial-text">
        <div class="testimonial-quote">
        <img src="assets/img/icon/qt.png" alt="">
        </div>
        <div class="testimonial-desc">
        Since 1985 Reed has pioneered specialist recruitment Sourcing knowledgeable, 
        skilled professionals pioneered Specialist recruitment, sourcing.
        </div>
        <div class="testimonial-author headline">
        <h3>Tandre Flop</h3>
        <span>CEO, Squaround</span>
        </div>
        </div>
        </div>
        </div>
        <div class="swiper-slide">
        <div class="bi-testimonial-item-2 d-flex align-items-center">
        <div class="bi-testimonial-img">
        <img src="assets/img/testimonial/test2.jpg" alt="">
        </div>
        <div class="bi-testimonial-text">
        <div class="testimonial-quote">
        <img src="assets/img/icon/qt.png" alt="">
        </div>
        <div class="testimonial-desc">
        Since 1985 Reed has pioneered specialist recruitment Sourcing knowledgeable, 
        skilled professionals pioneered Specialist recruitment, sourcing.
        </div>
        <div class="testimonial-author headline">
        <h3>Tandre Flop</h3>
        <span>CEO, Squaround</span>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>

Portfolio Tab


To learn how to use Portfolio , here is the code or go to and check how does it work. 


        <div class="bi-portfolio-tab-btn">
        <ul class="nav nav-tabs" id="bi_portfolio_tab" role="tablist">
        <li class="nav-item" role="presentation">
        <div class="nav-link active" id="portfolio_tab_1" data-bs-toggle="tab" data-bs-target="#portfolio_1_1"  role="tab">
        <div class="bi-portfolio-btn-text position-relative">
        User Research
        </div>
        </div>
        </li>
        <li class="nav-item" role="presentation">
        <div class="nav-link" id="portfolio_tab_2" data-bs-toggle="tab" data-bs-target="#portfolio_1_2"  role="tab">
        <div class="bi-portfolio-btn-text position-relative">
        StoryBoard
        </div>
        </div>
        </li>
        <li class="nav-item" role="presentation">
        <div class="nav-link" id="portfolio_tab_3" data-bs-toggle="tab" data-bs-target="#portfolio_1_3"  role="tab">
        <div class="bi-portfolio-btn-text position-relative">
        Wireframing
        </div>
        </div>
        </li>
        <li class="nav-item" role="presentation">
        <div class="nav-link" id="portfolio_tab_4" data-bs-toggle="tab" data-bs-target="#portfolio_1_4"  role="tab">
        <div class="bi-portfolio-btn-text position-relative">
        Usability Testing
        </div>
        </div>
        </li>

        </ul>
        </div>


        <div class="tab-content" id="bi_portfolio_tab8">
        <div class="tab-pane animated fadeInUp show active" id="portfolio_1_1" role="tabpanel" aria-labelledby="portfolio_tab_1">
        <div class="bi-portfolio-item-content">
        <div class="row">
        <div class="col-md-12">
        <div class="bi-portfolio-item position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/pro2.jpg" alt="">
        </div>
        <div class="portfolio-text headline">
        <h3><a href="portfolio-single.html"><i class="fal fa-link"></i> Customer Value Proposition</a></h3>
        </div>
        </div>
        </div>
        <div class="col-md-6">
        <div class="bi-portfolio-item position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/pro3.jpg" alt="">
        </div>
        <div class="portfolio-text headline">
        <h3><a href="portfolio-single.html"><i class="fal fa-link"></i> Customer Value Proposition</a></h3>
        </div>
        </div>
        </div>
        <div class="col-md-6">
        <div class="bi-portfolio-item position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/pro4.jpg" alt="">
        </div>
        <div class="portfolio-text headline">
        <h3><a href="portfolio-single.html"><i class="fal fa-link"></i> Customer Value Proposition</a></h3>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        <div class="tab-pane animated fadeInUp" id="portfolio_1_2" role="tabpanel" aria-labelledby="portfolio_tab_1">
        <div class="bi-portfolio-item-content">
        <div class="row">
        <div class="col-md-12">
        <div class="bi-portfolio-item position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/pro2.jpg" alt="">
        </div>
        <div class="portfolio-text headline">
        <h3><a href="portfolio-single.html"><i class="fal fa-link"></i> Customer Value Proposition</a></h3>
        </div>
        </div>
        </div>
        <div class="col-md-6">
        <div class="bi-portfolio-item position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/pro3.jpg" alt="">
        </div>
        <div class="portfolio-text headline">
        <h3><a href="portfolio-single.html"><i class="fal fa-link"></i> Customer Value Proposition</a></h3>
        </div>
        </div>
        </div>
        <div class="col-md-6">
        <div class="bi-portfolio-item position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/pro4.jpg" alt="">
        </div>
        <div class="portfolio-text headline">
        <h3><a href="portfolio-single.html"><i class="fal fa-link"></i> Customer Value Proposition</a></h3>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        <div class="tab-pane animated fadeInUp" id="portfolio_1_3" role="tabpanel" aria-labelledby="portfolio_tab_2">
        <div class="bi-portfolio-item-content">
        <div class="row">
        <div class="col-md-12">
        <div class="bi-portfolio-item position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/pro2.jpg" alt="">
        </div>
        <div class="portfolio-text headline">
        <h3><a href="portfolio-single.html"><i class="fal fa-link"></i> Customer Value Proposition</a></h3>
        </div>
        </div>
        </div>
        <div class="col-md-6">
        <div class="bi-portfolio-item position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/pro3.jpg" alt="">
        </div>
        <div class="portfolio-text headline">
        <h3><a href="portfolio-single.html"><i class="fal fa-link"></i> Customer Value Proposition</a></h3>
        </div>
        </div>
        </div>
        <div class="col-md-6">
        <div class="bi-portfolio-item position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/pro4.jpg" alt="">
        </div>
        <div class="portfolio-text headline">
        <h3><a href="portfolio-single.html"><i class="fal fa-link"></i> Customer Value Proposition</a></h3>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        <div class="tab-pane animated fadeInUp" id="portfolio_1_4" role="tabpanel" aria-labelledby="portfolio_tab_3">
        <div class="bi-portfolio-item-content">
        <div class="row">
        <div class="col-md-12">
        <div class="bi-portfolio-item position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/pro2.jpg" alt="">
        </div>
        <div class="portfolio-text headline">
        <h3><a href="portfolio-single.html"><i class="fal fa-link"></i> Customer Value Proposition</a></h3>
        </div>
        </div>
        </div>
        <div class="col-md-6">
        <div class="bi-portfolio-item position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/pro3.jpg" alt="">
        </div>
        <div class="portfolio-text headline">
        <h3><a href="portfolio-single.html"><i class="fal fa-link"></i> Customer Value Proposition</a></h3>
        </div>
        </div>
        </div>
        <div class="col-md-6">
        <div class="bi-portfolio-item position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/pro4.jpg" alt="">
        </div>
        <div class="portfolio-text headline">
        <h3><a href="portfolio-single.html"><i class="fal fa-link"></i> Customer Value Proposition</a></h3>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>

Team Member Slider Structure



        <div class="hap-team-slider swiper-container">
        <div class="swiper-wrapper">
        <div class="swiper-slide">
        <div class="hap-team-item position-relative">
        <div class="team-img position-relative">
        <img src="assets/img/home_5/team/tm1.png" alt="">
        </div>
        <div class="team-text position-absolute text-center hap-headline text-uppercase">
        <h3><a href="team-single.html">Matt Smith</a></h3>
        <span>Co-Founder</span>
        </div>
        </div>
        </div>
        <div class="swiper-slide">
        <div class="hap-team-item position-relative">
        <div class="team-img position-relative">
        <img src="assets/img/home_5/team/tm2.png" alt="">
        </div>
        <div class="team-text position-absolute text-center hap-headline text-uppercase">
        <h3><a href="team-single.html">Matt Smith</a></h3>
        <span>Co-Founder</span>
        </div>
        </div>
        </div>
        <div class="swiper-slide">
        <div class="hap-team-item position-relative">
        <div class="team-img position-relative">
        <img src="assets/img/home_5/team/tm3.png" alt="">
        </div>
        <div class="team-text position-absolute text-center hap-headline text-uppercase">
        <h3><a href="team-single.html">Matt Smith</a></h3>
        <span>Co-Founder</span>
        </div>
        </div>
        </div>
        <div class="swiper-slide">
        <div class="hap-team-item position-relative">
        <div class="team-img position-relative">
        <img src="assets/img/home_5/team/tm1.png" alt="">
        </div>
        <div class="team-text position-absolute text-center hap-headline text-uppercase">
        <h3><a href="team-single.html">Matt Smith</a></h3>
        <span>Co-Founder</span>
        </div>
        </div>
        </div>
        </div>
        </div>

Counter Structure


Counter Up 


        <div class="bi-counter-item position-relative headline pera-content d-flex align-items-center justify-content-between">
        <h3><span class="counter">40</span>k</h3>
        <p>Website Building</p>
        </div>

Client Slider



        <div class="bi-sponsor-slider-3 swiper-container">
        <div class="swiper-wrapper">
        <div class="swiper-slide">
        <div class="slider-img">
        <img src="assets/img/sponsor/7.png" alt="">
        </div>
        </div>
        <div class="swiper-slide">
        <div class="slider-img">
        <img src="assets/img/sponsor/8.png" alt="">
        </div>
        </div>
        <div class="swiper-slide">
        <div class="slider-img">
        <img src="assets/img/sponsor/9.png" alt="">
        </div>
        </div>
        <div class="swiper-slide">
        <div class="slider-img">
        <img src="assets/img/sponsor/10.png" alt="">
        </div>
        </div>
        <div class="swiper-slide">
        <div class="slider-img">
        <img src="assets/img/sponsor/11.png" alt="">
        </div>
        </div>
        <div class="swiper-slide">
        <div class="slider-img">
        <img src="assets/img/sponsor/12.png" alt="">
        </div>
        </div>
        <div class="swiper-slide">
        <div class="slider-img">
        <img src="assets/img/sponsor/9.png" alt="">
        </div>
        </div>
        <div class="swiper-slide">
        <div class="slider-img">
        <img src="assets/img/sponsor/10.png" alt="">
        </div>
        </div>
        <div class="swiper-slide">
        <div class="slider-img">
        <img src="assets/img/sponsor/11.png" alt="">
        </div>
        </div>
        <div class="swiper-slide">
        <div class="slider-img">
        <img src="assets/img/sponsor/12.png" alt="">
        </div>
        </div>
        </div>
        </div>

Video Popup


Video Popup Settings 


        <a class="video_box" href="Put your youtube video link here">Play</a<

Project Tab


Project Tab Settings 


        <div class="bi-portfolio-feed-top-content d-flex justify-content-between flex-wrap align-items-end">
        <div class="bi-portfolio-filter-btn ul-li text-center wow fadeInRight"  data-wow-delay="300ms" data-wow-duration="1500ms">
        <ul id="filters" class="nav-gallery">
        <li class="filtr-button filtr-active" data-filter="all">see all</li>
        <li class="filtr-button" data-filter="1">Business</li>
        <li class="filtr-button" data-filter="2">Development</li>
        <li class="filtr-button" data-filter="3">Web Design </li>
        </ul>
        </div>
        </div>
        <div class="bi-portfolio-feed-item-wrapper filtr-container d-flex flex-wrap">
        <div class="bi-portfolio-item-3 filtr-item" data-category="1, 2" data-sort="Busy streets">
        <div class="bi-portfolio-img-text-3  position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/pf1.jpg" alt="">
        </div>
        <a class="porfolio-icon position-absolute d-flex align-items-center justify-content-center" href="#"> <i class="fal fa-search"></i></a>
        <div class="portfolio-text headline position-absolute">
        <span><a href="#">Digital Marketing</a></span>
        <h3><a href="#"> Digital Marketing </a></h3>
        <a class="more_btn position-absolute d-flex align-items-center justify-content-center" href="#"><i class="fal fa-long-arrow-right"></i></a>
        </div>
        </div>
        </div>
        <div class="bi-portfolio-item-3 filtr-item" data-category="1, 3" data-sort="Busy streets">
        <div class="bi-portfolio-img-text-3  position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/pf2.jpg" alt="">
        </div>
        <a class="porfolio-icon position-absolute d-flex align-items-center justify-content-center" href="#"> <i class="fal fa-search"></i></a>
        <div class="portfolio-text headline position-absolute">
        <span><a href="#">Digital Marketing</a></span>
        <h3><a href="#"> Digital Marketing </a></h3>
        <a class="more_btn position-absolute d-flex align-items-center justify-content-center" href="#"><i class="fal fa-long-arrow-right"></i></a>
        </div>
        </div>
        </div>
        <div class="bi-portfolio-item-3 filtr-item" data-category="2" data-sort="Busy streets">
        <div class="bi-portfolio-img-text-3  position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/pf5.jpg" alt="">
        </div>
        <a class="porfolio-icon position-absolute d-flex align-items-center justify-content-center" href="#"> <i class="fal fa-search"></i></a>
        <div class="portfolio-text headline position-absolute">
        <span><a href="#">Digital Marketing</a></span>
        <h3><a href="#"> Digital Marketing </a></h3>
        <a class="more_btn position-absolute d-flex align-items-center justify-content-center" href="#"><i class="fal fa-long-arrow-right"></i></a>
        </div>
        </div>
        </div>
        <div class="bi-portfolio-item-3 filtr-item" data-category="1" data-sort="Busy streets">
        <div class="bi-portfolio-img-text-3  position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/port3.4.jpg" alt="">
        </div>
        <a class="porfolio-icon position-absolute d-flex align-items-center justify-content-center" href="#"> <i class="fal fa-search"></i></a>
        <div class="portfolio-text headline position-absolute">
        <span><a href="#">Digital Marketing</a></span>
        <h3><a href="#"> Digital Marketing </a></h3>
        <a class="more_btn position-absolute d-flex align-items-center justify-content-center" href="#"><i class="fal fa-long-arrow-right"></i></a>
        </div>
        </div>
        </div>
        <div class="bi-portfolio-item-3 filtr-item" data-category="3" data-sort="Busy streets">
        <div class="bi-portfolio-img-text-3  position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/port3.5.jpg" alt="">
        </div>
        <a class="porfolio-icon position-absolute d-flex align-items-center justify-content-center" href="#"> <i class="fal fa-search"></i></a>
        <div class="portfolio-text headline position-absolute">
        <span><a href="#">Digital Marketing</a></span>
        <h3><a href="#"> Digital Marketing </a></h3>
        <a class="more_btn position-absolute d-flex align-items-center justify-content-center" href="#"><i class="fal fa-long-arrow-right"></i></a>
        </div>
        </div>
        </div>
        <div class="bi-portfolio-item-3 filtr-item" data-category="1, 2" data-sort="Busy streets">
        <div class="bi-portfolio-img-text-3  position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/pf1.jpg" alt="">
        </div>
        <a class="porfolio-icon position-absolute d-flex align-items-center justify-content-center" href="#"> <i class="fal fa-search"></i></a>
        <div class="portfolio-text headline position-absolute">
        <span><a href="#">Digital Marketing</a></span>
        <h3><a href="#"> Digital Marketing </a></h3>
        <a class="more_btn position-absolute d-flex align-items-center justify-content-center" href="#"><i class="fal fa-long-arrow-right"></i></a>
        </div>
        </div>
        </div>
        <div class="bi-portfolio-item-3 filtr-item" data-category="1, 3" data-sort="Busy streets">
        <div class="bi-portfolio-img-text-3  position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/pf2.jpg" alt="">
        </div>
        <a class="porfolio-icon position-absolute d-flex align-items-center justify-content-center" href="#"> <i class="fal fa-search"></i></a>
        <div class="portfolio-text headline position-absolute">
        <span><a href="#">Digital Marketing</a></span>
        <h3><a href="#"> Digital Marketing </a></h3>
        <a class="more_btn position-absolute d-flex align-items-center justify-content-center" href="#"><i class="fal fa-long-arrow-right"></i></a>
        </div>
        </div>
        </div>
        <div class="bi-portfolio-item-3 filtr-item" data-category="2" data-sort="Busy streets">
        <div class="bi-portfolio-img-text-3  position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/pf5.jpg" alt="">
        </div>
        <a class="porfolio-icon position-absolute d-flex align-items-center justify-content-center" href="#"> <i class="fal fa-search"></i></a>
        <div class="portfolio-text headline position-absolute">
        <span><a href="#">Digital Marketing</a></span>
        <h3><a href="#"> Digital Marketing </a></h3>
        <a class="more_btn position-absolute d-flex align-items-center justify-content-center" href="#"><i class="fal fa-long-arrow-right"></i></a>
        </div>
        </div>
        </div>
        <div class="bi-portfolio-item-3 filtr-item" data-category="1" data-sort="Busy streets">
        <div class="bi-portfolio-img-text-3  position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/port3.4.jpg" alt="">
        </div>
        <a class="porfolio-icon position-absolute d-flex align-items-center justify-content-center" href="#"> <i class="fal fa-search"></i></a>
        <div class="portfolio-text headline position-absolute">
        <span><a href="#">Digital Marketing</a></span>
        <h3><a href="#"> Digital Marketing </a></h3>
        <a class="more_btn position-absolute d-flex align-items-center justify-content-center" href="#"><i class="fal fa-long-arrow-right"></i></a>
        </div>
        </div>
        </div>
        <div class="bi-portfolio-item-3 filtr-item" data-category="3" data-sort="Busy streets">
        <div class="bi-portfolio-img-text-3  position-relative">
        <div class="portfolio-img">
        <img src="assets/img/portfolio/port3.5.jpg" alt="">
        </div>
        <a class="porfolio-icon position-absolute d-flex align-items-center justify-content-center" href="#"> <i class="fal fa-search"></i></a>
        <div class="portfolio-text headline position-absolute">
        <span><a href="#">Digital Marketing</a></span>
        <h3><a href="#"> Digital Marketing </a></h3>
        <a class="more_btn position-absolute d-flex align-items-center justify-content-center" href="#"><i class="fal fa-long-arrow-right"></i></a>
        </div>
        </div>
        </div>
        </div>

Skill Progress Bar


Skill Progress Bar Settings 


        <div class="skill-progress-bar">
        <div class="skill-set-percent headline">
        <h4>Write Your Progress Title Here</h4>
        <div class="progress">
        <div class="progress-bar" data-percent="Put Your Skill Percent Here"></div>
        </div>
        </div>
        <div class="skill-set-percent headline">
        <h4>Write Your Progress Title Herep</h4>
        <div class="progress">
        <div class="progress-bar" data-percent="Put Your Skill Percent Here"></div>
        </div>
        </div>
        <div class="skill-set-percent headline">
        <h4>Write Your Progress Title Here</h4>
        <div class="progress">
        <div class="progress-bar" data-percent="Put Your Skill Percent Here"></div>
        </div>
        </div>
        <div class="skill-set-percent headline">
        <h4>Write Your Progress Title Here</h4>
        <div class="progress">
        <div class="progress-bar" data-percent="Put Your Skill Percent Here"></div>
        </div>
        </div>
        </div>

FAQ Accordion


FAQ Accordion Settings 


        <div class="accordion" id="accordionExample_31">
        <div class="accordion-item wow fadeInUp"  data-wow-delay="200ms" data-wow-duration="1000ms">
        <h2 class="accordion-header" id="heading10">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse10" aria-expanded="true" aria-controls="collapse10">
        <span> What is Business ?</span>
        </button>
        </h2>
        <div id="collapse10" class="accordion-collapse collapse show" aria-labelledby="heading10" data-bs-parent="#accordionExample_31">
        <div class="accordion-body ">
        <div class="bi-faq-text">
        Improve efficiency, provide a better customer experience with modern technolo services available around Improve efficiency, provide 
        </div>
        </div>
        </div>
        </div>
        <div class="accordion-item wow fadeInUp"  data-wow-delay="300ms" data-wow-duration="1000ms">
        <h2 class="accordion-header" id="heading12">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse12" aria-expanded="false" aria-controls="collapse12">
        <span>Nulla vitae est risus. Aenean aliquam dolor a massa</span>
        </button>
        </h2>
        <div id="collapse12" class="accordion-collapse collapse" aria-labelledby="heading12" data-bs-parent="#accordionExample_31">
        <div class="accordion-body ">
        <div class="bi-faq-text">
        Improve efficiency, provide a better customer experience with modern technolo services available around Improve efficiency, provide
        </div>
        </div>
        </div>
        </div>
        <div class="accordion-item wow fadeInUp"  data-wow-delay="400ms" data-wow-duration="1000ms">
        <h2 class="accordion-header" id="heading13">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse13" aria-expanded="false" aria-controls="collapse13">
        <span>Pellentesque habitant morbi 
        tristique senectus ?</span>
        </button>
        </h2>
        <div id="collapse13" class="accordion-collapse collapse" aria-labelledby="heading13" data-bs-parent="#accordionExample_31">
        <div class="accordion-body ">
        <div class="bi-faq-text">
        Improve efficiency, provide a better customer experience with modern technolo services available around Improve efficiency, provide
        </div>
        </div>
        </div>
        </div>
        <div class="accordion-item wow fadeInUp"  data-wow-delay="500ms" data-wow-duration="1000ms">
        <h2 class="accordion-header" id="heading14">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse14" aria-expanded="false" aria-controls="collapse14">
        <span>Pellentesque habitant morbi 
        tristique senectus ?</span>
        </button>
        </h2>
        <div id="collapse14" class="accordion-collapse collapse" aria-labelledby="heading14" data-bs-parent="#accordionExample_31">
        <div class="accordion-body ">
        <div class="bi-faq-text">
        Improve efficiency, provide a better customer experience with modern technolo services available around Improve efficiency, provide
        </div>
        </div>
        </div>
        </div>
        <div class="accordion-item wow fadeInUp"  data-wow-delay="500ms" data-wow-duration="1000ms">
        <h2 class="accordion-header" id="heading15">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse15" aria-expanded="false" aria-controls="collapse15">
        <span>Pellentesque habitant morbi 
        tristique senectus ?</span>
        </button>
        </h2>
        <div id="collapse15" class="accordion-collapse collapse" aria-labelledby="heading15" data-bs-parent="#accordionExample_31">
        <div class="accordion-body ">
        <div class="bi-faq-text">
        Improve efficiency, provide a better customer experience with modern technolo services available around Improve efficiency, provide
        </div>
        </div>
        </div>
        </div>
        </div>

Service Drop Text


Service Drop Text Settings (You can change it from Script.js file on bottom) 


        const texts = [
        "User Interface Design",
        "Digital Marketing",
        "Lack of Brand Differentiation",
        "Application Development",
        "Application Development",
        "Scaling Difficulties",
        "Application Development",
        "Outdated Designs",
        "Products Designs",
        "Branding Designs",
        "3D Animations",
        "3D Illustration Design",
        "Web Application Development",
        "User Interface Design",
        ];

Text Scroller


Text Scroller Settings 


        <div class="bi-text-scroll-item-1 headline text-uppercase">
        <h3>Haptic Creative Digital Agency</h3>
        <h3>Haptic Creative Digital Agency</h3>
        </div>

Contact Form Mail Setup

CSS Files and Structure


Mainly two main CSS files are used in this theme. The first one bootstrap.min.css, second one is style.css which for this template and responsive style include in style.css file.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

CSS Files

Common stylesheets included in all pages:

        <link rel="stylesheet" href="assets/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/css/fontawesome.css">
        <link rel="stylesheet" href="assets/css/flaticon_aina.css">
        <link rel="stylesheet" href="assets/css/animate.css">
        <link rel="stylesheet" href="assets/css/global.css">
        <link rel="stylesheet" href="assets/css/swiper.min.css">
        <link rel="stylesheet" href="assets/css/magnific-popup.css">
        <link rel="stylesheet" href="assets/css/style.css">

Jquery and javascript


This Template imports three types of Javascript files.

  • jQuery
  • Custom scripts (script.js)
  • Some plugins

  • jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  • Most of the animation in this site is carried out from the customs scripts. There are a few functions worth looking over.

        <script src="assets/js/jquery-3.6.0.min.js"></script>
        <script src="assets/js/bootstrap.bundle.min.js"></script>
        <script src="assets/js/swiper-bundle.min.js"></script>
        <script src="assets/js/appear.js"></script>
        <script src="assets/js/counter.js"></script>
        <script src="assets/js/gsap.min.js"></script>
        <script src="assets/js/knob.js"></script>
        <script src="assets/js/jquery.magnific-popup.min.js"></script>
        <script src="assets/js/jquery.counterup.min.js"></script>
        <script src="assets/js/waypoints.min.js"></script>
        <script src="assets/js/parallax.min.js"></script>
        <script src="assets/js/ScrollTrigger.min.js"></script>
        <script src="assets/js/ScrollToPlugin.min.js"></script>
        <script src="assets/js/ScrollSmoother.min.js"></script>
        <script src="assets/js/SplitText.min.js"></script>
        <script src="assets/js/jquery.filterizr.js"></script>
        <script src="assets/js/imagesloaded.pkgd.min.js"></script>
        <script src="assets/js/hover-revel.js"></script>
        <script src="assets/js/parallax-scroll.js"></script>
        <script src="assets/js/jquery.marquee.min.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/tilt.jquery.min.js"></script>
        <script src="assets/js/matter.min.js"></script>
        <script src="assets/js/script.js"></script>

Sources and Credits


Fonts Used int the template are google fonts, you can find theme on Google Fonts API

Fonts Used are :

"RecoletaAlt"

"Inter"

"Inter"

"space-grotesk"




Sliders Used Are :

Swiper Slider


Every Code is properly commented for Editing Ease.

Icons Used are :


Fontawsome Icons
https://fortawesome.github.io/Font-Awesome/

Support


Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have any queries, please feel free to contact us at Support Center.

Email Us at : https://themexriver.helpviser.com/