- Item Name : Finwise - Online Banking & Finance HTML5 Template
- Author : bdevs
- Support Tickets: https://support.bdevs.net/
Finwise Documentation
Welcome to Finwise ! Get familiar with the Stripe products and explore their features:
Well Documented
Well organized and easy to understand. You can any work by following our docs
Clean Code
Code is clean if it can be understood.Our code is more formatting for your website
Fully Responsive
Our Template is full Perfect for all device. You can visit our template all device easily.
Sass Available
The template has Sass available for css. You can Change and customize css by sass.
Speed Optimized
Finwise is faster loading speed. Finwise create your template so much faster
24/7 Support
We are provide 24 hours support for all clients.You can purchase without hesitation.
Getting Started
Welcome to Finwise.
Finwise – Banking, Finance is a clean and modern HTML5 , Bootstrap Banking Finance Template. Finwise by providing a seamless, secure, and convenient way to manage transactions. The template designed for mobile banking, business consulting, bank loans, finance, Investment Management, insurance, forex trading, Payment Solution and many more.In this situation Finwise is perfect solution.
Finwise Core Features
- HTML5 & CSS3
- Responsive layout (desktops, tablets, mobile devices)
- Built with Bootstrap v5.0.2
- Well structured code
- Contact Form Working
- Typography
- Sass Available
- Retina Ready
- UX Ready
- UX Ready
- W3 Valid 100%
- Fast Loading Speed
- Cross Browser Support
- Dedicated Support, Lifetime Updates
- And much more …
What's Included
After purchasing Finwise template on templateforest.net with your Envato account, go to your Download page. You can choose to download Finwise template only or the entire Finwise template package which contains the following files:
- Finwise template: A .zip file with all .html files with all necessary assets.
- Documentation: An HTML format documentation.
- Licensing.
How to Install Finwise Website Templates
Installing a finwise template is not like WordPress or CMS theme installation, actually, installation keyword does not go with finwise template. Why? because you don’t install anything, yes finwise or HTML templates are automatically rendered by the browser.
1. Editing Finwise 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 Finwise template to get started, when download/purchase complete you will get a package like this screenshot (after unzip).
3. Package comes with documentation unzip the download package, you’ll found a folder with all template files, like above screenshot.
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
HTML Structure
This template is a fixed layout with four columns. The main contents are inside the 'body' tag divided into different section (i.e. header, banner, services,... footer etc.). The general template structure is the same throughout the template. Here is the general structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title> Online Banking & Transaction Bootstrap5 Template</title>
<meta name="robots" content="noindex, follow" />
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="assets/imags/favicon.png">
<!-- CSS
============================================ -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/slick.css">
<link rel="stylesheet" href="assets/css/fontawesome-pro.min.css">
<link rel="stylesheet" href="assets/css/swiper.css">
<link rel="stylesheet" href="assets/css/vendor/flaticon_finwise.css">
<link rel="stylesheet" href="assets/css/magnify.css">
<link rel="stylesheet" href="assets/css/odometer.css">
<link rel="stylesheet" href="assets/css/vendor/spacing.css"">
<link rel="stylesheet" href="assets/css/animation.css">
<link rel="stylesheet" href="assets/css/magnigy-popup.css">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<!-- JS
============================================ -->
<!-- Modernizer JS -->
<script src="assets/js/vendor/modernizr.min.js"></script>
<!-- jQuery JS -->
<script src="assets/js/jquery.js"></script>
<!-- Bootstrap JS -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/swiper.js"></script>
<script src="assets/js/magnify.min.js"></script>
<script src="assets/js/jquery-appear.js"></script>
<script src="assets/js/odometer.js"></script>
<script src="assets/js/backtotop.js"></script>
<script src="assets/js/isotop.js"></script>
<script src="assets/js/imageloaded.js"></script>
<script src="assets/js/countdown.js"></script>
<script src="assets/js/wow.js"></script>
<script src="assets/js/waypoint.min.js"></script>
<script src="assets/js/easypie.js"></script>
<script src="assets/js/bootstrap-bundle.min.js"></script>
<script src="assets/js/jquery-ui.js"></script>
<script src="assets/js/magnify-popup.min.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:
/*********************************************************************************
Template Name: Finwise - Online Banking & Finance HTML5 Template
Description: A perfect Template For Banking. It comes with nice and clean design.
Note: This is style css.
**********************************************************************************/
/**************************************************************
STYLESHEET INDEXING
|
|
|___ Common Styles
| |___ breakpoints
| |___ colors
| |___ extends
| |___ mixins
| |___ root
| |___ typography
| |___ index
| |___ main
|
|
|___Header Styles
| |___ header 01
| |___ header 02
| |___ index
|
|
|___Menu Styles
| |___ meanmenu
| |___ menu
| |___ index
|
|
|___Elements Styles
| |___ button
| |___ section-title
| |___ breadcrumb
| |___ card
| |___ service
| |___ feature
| |___ about
| |___ callto-action
| |___ accordion
| |___ counterup
| |___ pricingtable
| |___ team
| |___ social
| |___ pagination
| |___ backtotop
| |___ newsletterform
| |___ brand
| |___ portfolio
| |___ contact
| |___ testimonial
| |___ advance-tab
| |___ key-value
| |___ feature-tab
| |___ use-case
| |___ category
| |___ split
| |___ countdown
| |___ progressbar
| |___ category-box
| |___ modal
| |___ list
| |___ search
| |___ video
| |___ 404
|___Blog Styles
| |___ blog
| |___ postbox
| |___ recent-post
| |___ sidebar
| |___ index
|___Banner Styles
| |___ banner 01
| |___ banner 02
| |___ banner 03
| |___ banner 04
| |___ banner 05
| |___ banner 06
| |___ index
|___Footer Styles
| |___ footer
| |___ footer 01
| |___ footer 02
| |___ footer 03
| |___ footer 04
| |___ footer 05
| |___ footer 06
| |___ index
|
|
|___ 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:
Change Contents
Changing Images
To change any images of the website
- Carefully collect the source name of the image (i.e. banner-img.jpg)
- Open the file called images.
- Find the particular image file.
- Replace the file with your image.
- 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="header__logo">
<a href="index.html">
<img class="logo__white" src="assets/images/logo/logo-white.svg" alt="logo not found">
</a>
</div>
You have to do the following to change this image with your own image:
- Open the file called images.
- Find the particular image file called banner-img.jpg
- Replace the file with your image
- Make sure that the file name does not change.
Changing Brand Logo
To change any images of the website
- Carefully collect the source name of the image (i.e. banner-img.jpg)
- Open the file called images.
- Find the particular image file.
- Replace the file with your image.
- 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">
<a href="index.html">
<img src="assets/images/logo/logo.png" alt="Banking Logo Images">
</a>
</div>
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
- Open the variable.scss file from assets > scss > defaults folder with a text-editor.
- Change the right-side values of the variables to change any default colors of your site.
- Save your file.
Have a look at the following image for a visual description:
Changing Email Settings of the Contact Form
- Go to main folder
- Open mail.php
- Go to line number 11
- Follow instructions in image below:
Header Types
Welcome to Finwise Header Elements! You can choose 12 Types of header package for createing you website.
01. Header Default
To change any images of the website
<!-- Start Header Area -->
<header>
<div id="header-sticky" class="header__area header-common">
<div class="container">
<div class="mega__menu-wrapper p-relative">
<div class="header__main">
<div class="header__left">
<div class="header__logo">
<a href="index.html">
<div class="logo">
<!-- Logo Here -->
</div>
</div>
</div>
<div class="header__middle">
...
</ul>
<!-- End Middle Here -->
</nav>
</div>
<div class="header__right">
...
<!-- End right Icons -->
</ul>
</div>
</div>
</div>
</div>
</header>
<!-- End Header Area
02. Header Transparent
To change any images of the website
- Add bd-transparent-header class with header tag
- For content white add color-white-variation class with bd-header-wrapper class
<!-- Start Header Area -->
<div id="header-sticky" class="header__area header-transparent">
<div class="container">
<div class="mega__menu-wrapper p-relative">
<div class="header__main">
<div class="header__left">
<!-- Start Header Content -->
...
<!-- End Header Content -->
</div>
</div>
</header>
<!-- End Header Area -->
03. Header with bar
Header with bar and navigation menu to change your header area.
<!-- Start Header Area -->
<header>
<div id="header-sticky" class=" header-4">
<div class="container-fluid p-0 p-relative">
<div class="mega__menu-wrapper p-relative">
<div class="header__main">
<div class="header__left">
<div class="header__logo">
<a href="index.html">
<div class="logo">
<!-- Logo Here -->
</div>
</div>
</div>
<div class="header__middle">
...
</ul>
<!-- End Middle Here -->
</nav>
</div>
<div class="header__right">
...
<!-- End right Icons -->
</ul>
</div>
</div>
</div>
</div>
</header>
<!-- End Header Area -->
All Elemnts and Shortcode Types
Welcome to Finwise 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.
<!-- Start Buttons -->
<a class="sub__btn" href="login.html">Log In</a><
<a class="gradient__btn" href="#">Know More</a><
<a class="fill__btn-white" href="register.html">Open Account</a><
<a class="pricing__btn-white" href="#">Know More</a><
<!-- End Buttons -->
<a class="gradient__btn btn-xs" href="#">Button XS</a><
<a class="gradient__btn btn-sm" href="#">Button SM</a><
<a class="gradient__btn" href="#">Button default</a><
<a class="gradient__btn btn-lg" href="#">Button LG</a><
<a class="gradient__btn btn-xl" href="#">Button XL</a><
<a class="gradient__btn btn-xxl" href="#">Button XXL</a><
Advance Tab
This the tab classes on an element and create various tab.
<section class="explore__area section-space-bottom">
<div class="container">
<div class="row gy-50">
<div class="col-xxl-6 col-xl-6 col-lg-6">
<div class="explore__tab-inner wow fadeInLeft" data-wow-delay=".5s">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-explore-1" role="tabpanel"
aria-labelledby="nav-explore-1-tab" tabindex="0">
...
<!-- End tab title -->
</div>
<div class="tab-pane fade" id="nav-explore-2" role="tabpanel"
aria-labelledby="nav-explore-2-tab" tabindex="0">
...
<!-- End tab content -->
</div>
<div class="tab-pane fade" id="nav-explore-3" role="tabpanel"
aria-labelledby="nav-explore-3-tab" tabindex="0">
...
<!-- End tab content -->
</div>
<div class="tab-pane fade" id="nav-explore-4" role="tabpanel"
aria-labelledby="nav-explore-3-tab" tabindex="0">
...
<!-- End tab content -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Accordion
Extend the default collapse behavior to create an accordion with the panel component see the code for better understanding
<!-- Start Accordion -->
<div class="bd__faq"><
<div class="accordion" id="accordionExample"><
<div class="accordion-item"><
<h2 class="accordion-header" id="headingOne"><
...
<!-- End accordion content -->
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"><
...
<!-- End accordion content -->
</div>
</div>
<div class="accordion-item"><
<h2 class="accordion-header" id="headingTwo"><
...
<!-- End accordion content -->
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"><
...
<!-- End accordion content -->
</div>
</div>
<div class="accordion-item"><
<h2 class="accordion-header" id="headingThree"><
<!-- End accordion content -->
...
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"><
...
<!-- End accordion content -->
</div>
</div>
<div class="accordion-item"><
<h2 class="accordion-header" id="headingFour"><
...
<!-- End accordion content -->
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample"><
...
<!-- End accordion content -->
</div>
</div>
</div>
</div>
<!-- End Accordion -->
Brands
Showcase of brands logos or images. See below image and code for more information.
<!-- Start Brand -->
<div class="brand__inner theme-bg-1">
<div class="container">
<div class="swiper brnad__active">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="brand__item text-center">
<div class="brand__thumb">
<img src="assets/imgs/brand/brand-01.png" alt="image not found">
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="brand__item text-center">
<div class="brand__thumb">
<img src="assets/imgs/brand/brand-02.png" alt="image not found">
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="brand__item text-center">
<div class="brand__thumb">
<img src="assets/imgs/brand/brand-03.png" alt="image not found">
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="brand__item text-center">
<div class="brand__thumb">
<img src="assets/imgs/brand/brand-04.png" alt="image not found">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Brand -->
Counters
Different styles of counters for your website are presented in our website.
<div class="revolution__grid">
<div class="revolution__item text-center">
<div class="revolution__content">
<div class="revolution__number">
<h2><span class="counter"><25</span>+</h2>
</div>
<p>Years of Experience</p>
</div>
</div>
<div class="revolution__item text-center is-mainly-red">
<div class="revolution__content">
<div class="revolution__number">
<h2><span class="counter"><25</span>+</h2>
</div>
<p>Years of Experience</p>
</div>
</div>
<div class="revolution__item text-center is-mainly-blue">
<div class="revolution__content">
<div class="revolution__number">
<h2><span class="counter"><36</span>+</h2>
</div>
<p>Investors Partners</p>
</div>
</div>
<div class="revolution__item text-center is-mainly-pink">
<div class="revolution__content">
<div class="revolution__number">
<h2><span class="counter"><2</span>B+</h2>
</div>
<p>Global User Worldwide</p>
</div>
</div>
</div>
Working Steps
Showcase of Working Steps. See below image and code for more information.
- Add
.transparent-with-borderclass For Transparent with border style. - Add
.with-gradientclass For Hover gradient style. - Add
.with-bg-primaryclass For With Bg Primary Color style. - Add
.icon-nakedclass For naked style.
<div class="row wow fadeInUp" data-wow-delay=".3s">
<div class="col-xxl-12">
<div class="work__steps-main">
<div class="row g-5">
<div class="col-xxl-4 col-xl-4 col-lg-4">
<div class="working__step-item text-center">
<div class="working__step-round">
<span>01</span>
</div>
<div class="working__step-content">
<h3>Check rate</h3>
<p>Fill out a form to check your rate in minutes</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4">
<div class="working__step-item is-mainly-red text-center">
<div class="working__step-round">
<span>02</span>
</div>
<div class="working__step-content">
<h3>Verify information</h3>
<p>90% of loans are fully automated</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4">
<div class="working__step-item is-mainly-blue text-center">
<div class="working__step-round">
<span>03</span>
</div>
<div class="working__step-content">
<h3>Get money</h3>
<p>99% of funds are sent just 1 business day</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
kye Features
Different types of key features are styled in our template. See below image and code for more information.
- Add
.iconclass for large size style. - Add
.no-radiusclass for square style.
<div class="row wow fadeInUp" data-wow-delay=".3s">
<div class="col-xxl-12">
<div class="work__steps-main">
<div class="row g-5">
<div class="col-xxl-4 col-xl-4 col-lg-4">
<div class="working__step-item text-center">
<div class="working__step-round">
<span>01</span>
</div>
<div class="working__step-content">
<h3>Check rate</h3>
<p>Fill out a form to check your rate in minutes</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4">
<div class="working__step-item is-mainly-red text-center">
<div class="working__step-round">
<span>02</span>
</div>
<div class="working__step-content">
<h3>Verify information</h3>
<p>90% of loans are fully automated</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4">
<div class="working__step-item is-mainly-blue text-center">
<div class="working__step-round">
<span>03</span>
</div>
<div class="working__step-content">
<h3>Get money</h3>
<p>99% of funds are sent just 1 business day</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Call To Action
Awesome call to action styles. See below image and code for more information.
<section class="account__open-area theme-bg-1 pt-60 section-space-bottom">
<div class="container">
<div class="row">
<div class="col-xxl-12">
<div class="account__open-box top-0 bounceInUp" data-wow-delay=".8s">
<div class="bubble__1 wow fadeInup"></div>
<div class="bubble__2"></div>
<div class="bubble__3"></div>
<div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-6">
<div class="account__open-thumb">
<img src="assets/imgs/bg/account-bg.png" alt="image not found">
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6">
<div class="section__title-wrapper is-white">
<h2 class="section__title mb-40">Let’s Get Started With Finwise!</h2>
<a class="fill__btn-white" href="register.html">Open Account<span><i class="fa-regular fa-angle-right"></i></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Values
Awesome values styles. See below image and code for more information.
<!-- start values -->
<div class="col-xxl-7 col-xl-7 col-lg-7">
<div class="row g-5">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="our-values__item wow fadeIn" data-wow-delay=".4s">
<div class="our-values__icon">
<span>
<svg width="40" height="40" viewBox="0 0 40 40" fill="none"
xmlns="http://www.w3.org/2000/svg">
</svg>
</span>
</div>
<div class="our-values__content">
<h3>Be Genuine</h3>
<p>Keep empathy and comsion central to everything.</p>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="our-values__item is-mainly-red wow fadeIn" data-wow-delay=".5s">
<div class="our-values__icon">
<span>
<svg width="40" height="40" viewBox="0 0 40 40" fill="none"
xmlns="http://www.w3.org/2000/svg">
</svg>
</span>
</div>
<div class="our-values__content">
<h3>Invest in Growth</h3>
<p>Keep empathy and comsion central to everything.</p>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="our-values__item is-mainly-pink wow fadeIn" data-wow-delay=".6s">
<div class="our-values__icon">
<span>
<svg width="40" height="40" viewBox="0 0 40 40" fill="none"
xmlns="http://www.w3.org/2000/svg">
</svg>
</span>
</div>
<div class="our-values__content">
<h3>Distil the SMS</h3>
<p>Keep empathy and comsion central to everything.</p>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="our-values__item is-mainly-blue wow fadeIn" data-wow-delay=".7s">
<div class="our-values__icon">
<span>
<svg width="40" height="40" viewBox="0 0 40 40" fill="none"
xmlns="http://www.w3.org/2000/svg">
</svg>
</span>
</div>
<div class="our-values__content">
<h3>Take Action</h3>
<p>Keep empathy and comsion central to everything.</p>
</div>
</div>
</div>
</div>
</div>
<!-- end values -->
Benefits
Awesome benefits styles. See below image and code for more information.
<!-- start benefits -->
<div class="col-xxl-6 col-xl-6 col-lg-6">
<div class="benefits__thumb wow fadeInRight animated" data-wow-delay="0.3s">
<img src="assets/imgs/benefits/benefit-thumb.webp" alt="image not found">
</div>
</div>
<!-- End Benefits -->
Footer Style
Welcome to Finwise 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.
<footer class="theme-bg-1">
<section class="footer__area footer-space-top">
<div class="footer__wrapper-5">
<div class="container">
<div class="footer__grid">
<div class="footer__widget">
</div>
<div class="footer__widget">
</div>
<div class="footer__widget">
</div>
<div class="footer__widget">
</div>
</div>
</div>
</div>
<div class="container">
<div class="footer__bottom bt-0">
<div class="footer__copyright">
<p>Copyright © 2023 <a href="#">Finwise</a></p>
</div>
<div class="footer__conditions">
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</section>
</footer>
Footer Two
Awesome Footer Two styles. See below image and code for more information.
<footer>
<div class="footer__area theme-bg-1 section-space-top">
<div class="container">
<div class="footer__main">
<div class="row gy-50">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-5 col-sm-12">
<div class="footer__widget-1-1">
</div>
</div>
<div class="col-xxl-2 col-xl-2 col-lg-2 col-md-3 col-sm-4">
<div class="footer__widget-1-2">
</div>
</div>
<div class="col-xxl-2 col-xl-2 col-lg-2 col-md-4 col-sm-4">
<div class="footer__widget-1-3">
</div>
</div>
<div class="col-xxl-2 col-xl-2 col-lg-2 col-md-5 col-sm-4">
<div class="footer__widget-1-4">
</div>
</div>
<div class="col-xxl-2 col-xl-2 col-lg-2 col-md-4 col-sm-6">
<div class="footer__widget-1-5 justify-content-lg-end">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="footer__bottom">
<div class="footer__copyright">
<p>Copyright © 2023 <a href="#">Finwise</a></p>
</div>
<div class="footer__conditions">
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
Footer Three
Awesome Footer Three styles. See below image and code for more information.
<footer class="theme-bg-2">
<section class="footer__area footer footer-space-top theme-bg-1 fix p-relative z-index-1">
<div class="footer__glow-2">
<div class="glow-3"></div>
</div>
<div class="container">
<div class="footer__main">
<div class="row gy-50">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-5 col-sm-6">
<div class="footer__widget-2-1">
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6">
<div class="footer__widget-2-2">
</div>
</div>
<div class="col-xxl-2 col-xl-2 col-lg-2 col-md-3 col-sm-6">
<div class="footer__widget-2-3">
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-6">
<div class="footer__widget-2-4 justify-content-lg-end">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="footer__bottom">
<div class="footer__copyright">
<p>Copyright © 2023 <a href="#">Finwise</a></p>
</div>
<div class="footer__conditions">
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
</footer>
Footer Four
Awesome Footer Four styles. See below image and code for more information.
<footer>
<section class="footer__area-common">
<div class="container">
<div class="footer__main">
<div class="footer__grid">
<div class="footer__widget-4">
</div>
<div class="footer__widget-4">
</div>
<div class="footer__widget-4">
</div>
<div class="footer__widget-4">
</div>
<div class="footer__widget-4">
</div>
</div>
</div>
<div class="footer__bottom-2">
<div class="footer__copyright">
<p>Copyright © 2023 <a href="#">Finwise</a></p>
</div>
<div class="footer__social">
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-youtube"></i></a>
</div>
<div class="footer__conditions">
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</section>
</footer>
Sources and Credits
We've used the following fonts, free icons and plugins as listed:
Support
Thank you for purchasing my template.
If you have any questions that are
beyond the scope of this help file, please feel free to open a new ticket at our
Support
forum
Change Log
Update Change log View Changelog Here
Need to custom work.
If you need to theme customization or make custom theme or template. Please, you can contact us for this.
Contact
need to custom work.
If you need to theme customization or make custom theme or template. Please, you can contact us for this.
Contact