<!DOCTYPE html>
<html class="is-smooth-scroll-compatible is-loading" lang="zxx">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Finwise - Online Banking & Finance HTML5 Template</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico in the root directory -->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.svg">
<!-- CSS here -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/meanmenu.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" href="assets/css/fontAwesome6Pro.css">
<link rel="stylesheet" href="assets/css/font-autography.css">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body class="doc doc-theme-dark">
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<div class="bd-body__wrapper">
<!-- header area start -->
<header id="header-sticky" class="header header-common header__area">
<div class="container-fluid">
<div class="row align-items-center">
<div class=" col-lg-2 col-md-4 col-6">
<div class="logo d-lg-flex justify-content-center">
<a href="index-2.html">
<img class="logo__black" src="assets/img/logo/logo-black.svg" alt="logo">
<img class="logo__white" src="assets/img/logo/logo-white.svg" alt="logo">
</a>
</div>
</div>
<div class=" col-lg-10 col-md-8 col-6">
<div class="d-lg-none text-end">
<span class="offcanvas-toggle"><i class="fa-sharp fa-light fa-bars"></i></span>
</div>
<div class="header-menu d-none d-lg-flex align-items-center justify-content-end gap-5">
<nav id="mobile-menu">
<ul>
<li><a target="_blank" href="#">Live Demo</a></li>
<li><a target="_blank" href="https://support.bdevs.net/">Get Support</a></li>
<li><a target="_blank" href="https://themeforest.net/user/bdevs/portfolio">
Awesome Template</a></li>
</ul>
</nav>
<!-- dark light start -->
<div class="bd-doc__light">
<div class="doc_switch">
<label for="something" class="tab-btn tab-btns"> <i
class="fa-light fa-moon"></i></label>
<input type="checkbox" name="something" id="something" class="tab_switcher">
<label for="something" class="tab-btn"><i
class="fa-regular fa-brightness"></i></label>
</div>
</div>
<!-- dark light end -->
<a class="fill__btn" target="_blank" href="#">Purchase
Now</a>
</div>
</div>
</div>
</div>
</header>
<!-- header area end -->
<!-- doc area start -->
<section class="bd-doc-area">
<div class="container-fluid">
<div class="row bd-doc-container">
<div class="col-xxl-2 col-xl-3 col-lg-3 col-md-4 bd-doc-sidebar d-none d-md-block">
<div id="originalElement" class="bd-doc-sidebar">
<h3>Finwise Navigation</h3>
<div class="bd-doc-sidebar-menu bd-doc-menu menu-height">
<ul class="nav-doc-sidebar">
<li class="active">
<a href="#getting_started">
Getting Started
</a>
<span class="icon">
<i class="icon-plus fa-solid fa-angle-down"></i>
<i class="icon-minus fa-solid fa-angle-up"></i>
</span>
<ul class="bd-submenu">
<li class="active"><a href="#include">What's Included</a></li>
<li><a href="#install">How to Install Finwise Website Templates</a></li>
</ul>
</li>
<li>
<a href="#template">
Template Structure
</a>
<span class="icon">
<i class="icon-plus fa-solid fa-angle-down"></i>
<i class="icon-minus fa-solid fa-angle-up"></i>
</span>
<ul class="bd-submenu">
<li class="nav-item"><a href="#html" class="nav-link">
Html Structure</a></li>
<li class="nav-item"><a href="#css" class="nav-link">CSS Files and
Structure</a></li>
<li class="nav-item"><a href="#javascript" class="nav-link">JavaScript
Fiels</a>
</li>
</ul>
</li>
<li>
<a href="#allcontent">
Change Contents
</a>
<span class="icon">
<i class="icon-plus fa-solid fa-angle-down"></i>
<i class="icon-minus fa-solid fa-angle-up"></i>
</span>
<ul class="bd-submenu">
<li class="nav-item"><a href="#changingimages" class="nav-link">Changing
Images</a></li>
<li class="nav-item"><a href="#branlogo" class="nav-link">Changing Brand
Logo</a></li>
<li class="nav-item"><a href="#colorchange" class="nav-link">Changing
Colors</a></li>
<li class="nav-item"><a href="#emailchange" class="nav-link">Changing Email
Settings of the Contact Form</a></li>
</ul>
</li>
<li>
<a href="#all_header">
Header
</a>
<span class="icon">
<i class="icon-plus fa-solid fa-angle-down"></i>
<i class="icon-minus fa-solid fa-angle-up"></i>
</span>
<ul class="bd-submenu">
<li class="nav-item"><a href="#header_default" class="nav-link">Header
Default</a></li>
<li class="nav-item"><a href="#header_transparent" class="nav-link">Header
Transparent</a>
</li>
<li class="nav-item"><a href="#header_with_topbar" class="nav-link">Header
with
Bar</a>
</li>
</ul>
</li>
<li>
<a href="#all_elements">
Elements
</a>
<span class="icon">
<i class="icon-plus fa-solid fa-angle-down"></i>
<i class="icon-minus fa-solid fa-angle-up"></i>
</span>
<ul class="bd-submenu">
<li><a href="#button">Button</a></li>
<li class="nav-item"><a href="#tab" class="nav-link">Advance Tab</a></li>
<li class="nav-item"><a href="#accordion" class="nav-link">Accordion</a>
</li>
<li class="nav-item"><a href="#brand" class="nav-link">Brand</a></li>
<li class="nav-item"><a href="#counter" class="nav-link">Counter</a></li>
<li class="nav-item"><a href="#work_steps" class="nav-link">Work Steps</a>
</li>
<li class="nav-item"><a href="#key_features" class="nav-link">Key
Features</a>
</li>
<li class="nav-item"><a href="#callto_action" class="nav-link">Call to
Action</a></li>
<li class="nav-item"><a href="#values" class="nav-link">Values</a></li>
<li class="nav-item"><a href="#benefits" class="nav-link">Benefits</a></li>
</ul>
</li>
<li><a href="#all_footer">Footer</a>
<span class="icon">
<i class="icon-plus fa-solid fa-angle-down"></i>
<i class="icon-minus fa-solid fa-angle-up"></i>
</span>
<ul class="bd-submenu">
<li><a href="#footer_one">Footer
Default</a></li>
<li class="nav-item"><a href="#footer_two" class="nav-link">Footer Two</a>
</li>
<li class="nav-item"><a href="#footer_three" class="nav-link">Footer
Three</a>
<li class="nav-item"><a href="#footer_four" class="nav-link">Footer Four</a>
</li>
</ul>
</li>
<li><a href="#source">Sources and credits</a></li>
<li><a href="#video_guide">Youtube Channel</a></li>
<li><a href="#change_log">Change Log</a></li>
<li><a href="#support">Support</a></li>
</ul>
</div>
</div>
</div>
<div class="col-xxl-8 col-xl-7 col-lg-9 col-md-8">
<div class="bd-doc-content-wrap">
<div class="item-info mb-35">
<ul class="item-details">
<li>
<strong>Item Name : </strong>Finwise - Online Banking & Finance HTML5 Template
</li>
<li>
<strong>Author : </strong>
<a href="https://themeforest.net/user/bdevs/portfolio" target="_blank">bdevs</a>
</li>
<li>
<strong>Support Tickets: </strong>
<a href="https://support.bdevs.net/"
target="_blank">https://support.bdevs.net/</a>
</li>
</ul>
</div>
<!-- use-source -->
<div class="bd-doc__item-wrapper">
<div class="bd-doc-header__title">
<h1>Finwise Documentation</h1>
<br>
<p><span>Welcome to Finwise !</span> Get familiar with the Stripe products and
explore
their features:</p>
</div>
<div class="row">
<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-6 col-sm-6">
<div class="bd-doc__single-item">
<div class="bd-doc__features-icon">
<span>
<svg width="50" height="50" viewBox="0 0 60 60" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M40.0981 26.3438C40.0981 25.2219 39.1887 24.3125 38.0668 24.3125H17.145C16.0231 24.3125 15.1137 25.2219 15.1137 26.3438C15.1137 27.4656 16.0231 28.375 17.145 28.375H38.0668C39.1887 28.375 40.0981 27.4656 40.0981 26.3438Z"
fill="white" />
<path
d="M17.145 32.4375C16.0231 32.4375 15.1137 33.3469 15.1137 34.4688C15.1137 35.5906 16.0231 36.5 17.145 36.5H29.8515C30.9734 36.5 31.8828 35.5906 31.8828 34.4688C31.8828 33.3469 30.9734 32.4375 29.8515 32.4375H17.145Z"
fill="white" />
<path
d="M21.9184 51.9375H15.125C12.8849 51.9375 11.0625 50.1151 11.0625 47.875V12.125C11.0625 9.88494 12.8849 8.0625 15.125 8.0625H40.0981C42.3382 8.0625 44.1606 9.88494 44.1606 12.125V24.6172C44.1606 25.739 45.07 26.6484 46.1918 26.6484C47.3137 26.6484 48.2231 25.739 48.2231 24.6172V12.125C48.2231 7.64488 44.5782 4 40.0981 4H15.125C10.6449 4 7 7.64488 7 12.125V47.875C7 52.3551 10.6449 56 15.125 56H21.9184C23.0403 56 23.9497 55.0906 23.9497 53.9688C23.9497 52.8469 23.0403 51.9375 21.9184 51.9375Z"
fill="white" />
<path
d="M51.821 33.4095C49.445 31.0336 45.5791 31.0335 43.2047 33.4079L32.0528 44.5351C31.816 44.7714 31.6413 45.0625 31.544 45.3826L29.1153 53.3781C28.9 54.087 29.0876 54.8568 29.605 55.387C29.9925 55.7843 30.519 55.9999 31.059 55.9999C31.2397 55.9999 31.4221 55.9757 31.6012 55.926L39.7998 53.655C40.1372 53.5616 40.4447 53.3825 40.6926 53.1351L51.8211 42.0275C54.197 39.6516 54.197 35.7857 51.821 33.4095ZM38.2006 49.8826L34.076 51.0251L35.283 47.0511L42.8077 39.5431L45.6809 42.4163L38.2006 49.8826ZM48.9499 39.1537L48.5563 39.5464L45.6836 36.6737L46.0759 36.2823C46.8679 35.4903 48.1565 35.4903 48.9485 36.2823C49.7405 37.0743 49.7405 38.3629 48.9499 39.1537Z"
fill="white" />
<path
d="M38.0668 16.1875H17.145C16.0231 16.1875 15.1137 17.0969 15.1137 18.2188C15.1137 19.3406 16.0231 20.25 17.145 20.25H38.0668C39.1887 20.25 40.0981 19.3406 40.0981 18.2188C40.0981 17.0969 39.1887 16.1875 38.0668 16.1875Z"
fill="white" />
</svg>
</span>
</div>
<div class="bd-doc__item-info">
<h5>Well Documented</h5>
<p>Well organized and easy to understand. You can any work by following
our
docs</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-6 col-sm-6">
<div class="bd-doc__single-item">
<div class="bd-doc__features-icon">
<span>
<svg width="50" height="50" viewBox="0 0 60 60" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5.2325 31.7675L15.2325 41.7675C15.4631 42.0062 15.739 42.1967 16.044 42.3277C16.349 42.4587 16.677 42.5277 17.009 42.5306C17.3409 42.5335 17.6701 42.4702 17.9774 42.3445C18.2846 42.2188 18.5638 42.0332 18.7985 41.7984C19.0332 41.5637 19.2189 41.2846 19.3446 40.9773C19.4703 40.6701 19.5335 40.3409 19.5306 40.009C19.5277 39.677 19.4588 39.349 19.3278 39.0439C19.1967 38.7389 19.0063 38.4631 18.7675 38.2325L10.535 30L18.7675 21.7675C19.0063 21.5368 19.1967 21.261 19.3278 20.956C19.4588 20.651 19.5277 20.3229 19.5306 19.991C19.5335 19.659 19.4703 19.3298 19.3446 19.0226C19.2189 18.7153 19.0332 18.4362 18.7985 18.2015C18.5638 17.9667 18.2846 17.7811 17.9774 17.6554C17.6701 17.5297 17.3409 17.4664 17.009 17.4693C16.677 17.4722 16.349 17.5412 16.044 17.6722C15.739 17.8032 15.4631 17.9937 15.2325 18.2325L5.2325 28.2325C4.76382 28.7013 4.50053 29.337 4.50053 30C4.50053 30.6629 4.76382 31.2986 5.2325 31.7675Z"
fill="white" />
<path
d="M44.7675 18.2325C44.5369 17.9937 44.261 17.8032 43.956 17.6722C43.651 17.5412 43.323 17.4722 42.991 17.4693C42.6591 17.4664 42.3299 17.5297 42.0226 17.6554C41.7154 17.7811 41.4363 17.9667 41.2015 18.2015C40.9668 18.4362 40.7812 18.7153 40.6554 19.0226C40.5297 19.3298 40.4665 19.659 40.4694 19.991C40.4723 20.3229 40.5412 20.651 40.6723 20.956C40.8033 21.261 40.9937 21.5368 41.2325 21.7675L49.465 30L41.2325 38.2325C40.9937 38.4631 40.8033 38.7389 40.6723 39.0439C40.5412 39.349 40.4723 39.677 40.4694 40.009C40.4665 40.3409 40.5297 40.6701 40.6554 40.9773C40.7812 41.2846 40.9668 41.5637 41.2015 41.7984C41.4363 42.0332 41.7154 42.2188 42.0226 42.3445C42.3299 42.4702 42.6591 42.5335 42.991 42.5306C43.323 42.5277 43.651 42.4587 43.956 42.3277C44.261 42.1967 44.5369 42.0062 44.7675 41.7675L54.7675 31.7675C55.2362 31.2986 55.4995 30.6629 55.4995 30C55.4995 29.337 55.2362 28.7013 54.7675 28.2325L44.7675 18.2325Z"
fill="white" />
<path
d="M32.5975 11.815L22.5975 46.815C22.4155 47.4521 22.4938 48.1355 22.8154 48.7149C23.137 49.2944 23.6755 49.7224 24.3125 49.905C24.5365 49.9668 24.7676 49.9988 25 50C25.5433 49.9996 26.0717 49.8222 26.5051 49.4947C26.9386 49.1672 27.2536 48.7075 27.4025 48.185L37.4025 13.185C37.5067 12.8653 37.5454 12.528 37.5163 12.1931C37.4871 11.8581 37.3907 11.5325 37.2328 11.2357C37.0749 10.9389 36.8587 10.677 36.5973 10.4657C36.3358 10.2543 36.0345 10.0979 35.7112 10.0057C35.3879 9.91355 35.0493 9.88752 34.7157 9.92921C34.3821 9.97089 34.0603 10.0794 33.7697 10.2483C33.479 10.4172 33.2254 10.643 33.0239 10.9122C32.8225 11.1814 32.6775 11.4884 32.5975 11.815Z"
fill="white" />
</svg>
</span>
</div>
<div class="bd-doc__item-info">
<h5>Clean Code</h5>
<p>Code is clean if it can be understood.Our code is more formatting
for your website</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-6 col-sm-6">
<div class="bd-doc__single-item">
<div class="bd-doc__features-icon">
<span>
<svg width="50" height="50" viewBox="0 0 60 60" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M29.9011 49.3H13.05C9.1564 49.3 6 46.1437 6 42.25V14.05C6 10.1564 9.1564 7 13.05 7H36.55C40.4437 7 43.6 10.1564 43.6 14.05V18.75H45.95C49.8437 18.75 53 21.9064 53 25.8V46.95C53 50.8437 49.8437 54 45.95 54H36.55C33.4804 54 30.8689 52.0382 29.9011 49.3ZM13.05 44.6C11.7521 44.6 10.7 43.5479 10.7 42.25V14.05C10.7 12.7521 11.7521 11.7 13.05 11.7H36.55C37.8479 11.7 38.9 12.7521 38.9 14.05V18.75H36.55C32.6563 18.75 29.5 21.9064 29.5 25.8V44.6H13.05ZM34.2 46.95C34.2 48.2479 35.2521 49.3 36.55 49.3H45.95C47.2479 49.3 48.3 48.2479 48.3 46.95V25.8C48.3 24.5021 47.2479 23.45 45.95 23.45H36.55C35.2521 23.45 34.2 24.5021 34.2 25.8V46.95Z"
fill="white" />
</svg>
</span>
</div>
<div class="bd-doc__item-info">
<h5>Fully Responsive</h5>
<p>Our Template is full Perfect for all device. You can
visit our template all device easily.</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-6 col-sm-6">
<div class="bd-doc__single-item">
<div class="bd-doc__features-icon">
<span>
<svg width="50px" height="50px" viewBox="0 0 256 192" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid">
<g fill="white">
<path
d="M220.281239,110.513661 C211.374863,110.560291 203.634244,112.705282 197.152641,115.876138 C194.774499,111.166485 192.396357,106.969763 191.976685,103.892168 C191.510383,100.301639 190.95082,98.1100182 191.510383,93.8200364 C192.069945,89.5300546 194.587978,83.4214936 194.541348,82.9551913 C194.494718,82.4888889 193.981785,80.2972678 188.852459,80.2506375 C183.723133,80.2040073 179.29326,81.2298725 178.780328,82.5821494 C178.267395,83.9344262 177.28816,87.0120219 176.635337,90.182878 C175.749362,94.8459016 166.376685,111.492896 161.014208,120.21275 C159.288889,116.808743 157.796721,113.824408 157.47031,111.446266 C157.004007,107.855738 156.444444,105.664117 157.004007,101.374135 C157.56357,97.084153 160.081603,90.975592 160.034973,90.5092896 C159.988342,90.0429872 159.47541,87.8513661 154.346084,87.8047359 C149.216758,87.7581056 144.786885,88.7839709 144.273953,90.1362477 C143.76102,91.4885246 143.201457,94.6593807 142.128962,97.7369763 C141.056466,100.814572 128.606193,128.606193 125.342077,135.78725 C123.663388,139.471038 122.217851,142.408743 121.191985,144.413843 L121.191985,144.413843 C121.191985,144.413843 121.145355,144.553734 121.005464,144.786885 C120.11949,146.512204 119.606557,147.444809 119.606557,147.444809 C119.606557,147.444809 119.606557,147.444809 119.606557,147.491439 C118.907104,148.750455 118.16102,149.916211 117.787978,149.916211 C117.508197,149.916211 116.995264,146.558834 117.881239,141.989071 C119.746448,132.336612 124.176321,117.321676 124.12969,116.808743 C124.12969,116.528962 124.969035,113.917668 121.238616,112.565392 C117.601457,111.213115 116.295811,113.451366 115.969399,113.451366 C115.642987,113.451366 115.409836,114.24408 115.409836,114.24408 C115.409836,114.24408 119.466667,97.3639344 107.669217,97.3639344 C100.301639,97.3639344 90.1362477,105.430965 85.1001821,112.705282 C81.929326,114.430601 75.1679417,118.11439 67.940255,122.07796 C65.189071,123.616758 62.3446266,125.155556 59.6867031,126.601093 C59.5001821,126.414572 59.3136612,126.181421 59.1271403,125.9949 C44.8582878,110.746812 18.4655738,99.9752277 19.5846995,79.5045537 C20.0043716,72.0437158 22.5690346,52.4590164 70.2717668,28.6775956 C109.534426,9.32604736 140.776685,14.6885246 146.185792,26.579235 C153.926412,43.5526412 129.445537,75.0746812 88.8772313,79.6444444 C73.3959927,81.3697632 65.2823315,75.4010929 63.2306011,73.1628415 C61.0856102,70.8313297 60.7591985,70.691439 59.9664845,71.1577413 C58.6608379,71.8571949 59.5001821,73.9555556 59.9664845,75.1679417 C61.1788707,78.3387978 66.168306,83.9344262 74.6083789,86.6856102 C82.0692168,89.1103825 100.208379,90.4626594 122.17122,81.9759563 C146.745355,72.463388 165.957013,46.0240437 160.314754,23.8746812 C154.672495,1.3989071 117.368306,-6.01530055 82.0692168,6.52823315 C61.0856102,13.989071 38.3300546,25.7398907 21.9628415,41.0346084 C2.51803279,59.2204007 -0.559562842,75.028051 0.699453552,81.6495446 C5.22258652,105.151184 37.6306011,120.445902 50.5938069,131.777049 C49.9409836,132.150091 49.3347905,132.476503 48.8218579,132.756284 C42.340255,135.97377 17.6262295,148.890346 11.4710383,162.553005 C4.47650273,178.034244 12.5901639,189.13224 17.9526412,190.624408 C34.5996357,195.240801 51.7129326,186.940619 60.8990893,173.23133 C70.0852459,159.52204 68.9661202,141.70929 64.7227687,133.548998 C64.6761384,133.455738 64.6295082,133.362477 64.5362477,133.269217 C66.2149362,132.289982 67.940255,131.264117 69.6189435,130.284882 C72.9296903,128.326412 76.1938069,126.507832 78.9916211,125.015665 C77.4061931,129.352277 76.2404372,134.528233 75.6808743,141.989071 C74.9814208,150.755556 78.571949,162.133333 83.2816029,166.609836 C85.3799636,168.568306 87.8513661,168.614936 89.4367942,168.614936 C94.9391621,168.614936 97.4105647,164.045173 100.161749,158.636066 C103.519126,152.014572 106.550091,144.320583 106.550091,144.320583 C106.550091,144.320583 102.773042,165.117668 113.031694,165.117668 C116.762113,165.117668 120.539162,160.268124 122.217851,157.796721 L122.217851,157.843352 C122.217851,157.843352 122.311111,157.703461 122.497632,157.377049 C122.870674,156.770856 123.103825,156.397814 123.103825,156.397814 L123.103825,156.304554 C124.595993,153.69326 127.95337,147.77122 132.942805,137.93224 C139.377778,125.248816 145.579599,109.394536 145.579599,109.394536 C145.579599,109.394536 146.139162,113.264845 148.051002,119.699818 C149.170128,123.476867 151.501639,127.626958 153.366849,131.637158 C151.874681,133.735519 150.942077,134.901275 150.942077,134.901275 C150.942077,134.901275 150.942077,134.901275 150.988707,134.947905 C149.776321,136.533333 148.470674,138.258652 147.025137,139.937341 C141.942441,145.999271 135.88051,152.947177 135.041166,154.952277 C134.061931,157.330419 134.295082,159.055738 136.160291,160.454645 C137.512568,161.48051 139.937341,161.620401 142.408743,161.48051 C146.978506,161.154098 150.195993,160.034973 151.781421,159.335519 C154.252823,158.449545 157.143898,157.097268 159.848452,155.092168 C164.837887,151.408379 167.868852,146.139162 167.589071,139.191257 C167.44918,135.367577 166.190164,131.543898 164.651366,127.95337 C165.117668,127.300546 165.537341,126.647723 166.003643,125.9949 C173.884153,114.477231 179.992714,101.840437 179.992714,101.840437 C179.992714,101.840437 180.552277,105.710747 182.464117,112.145719 C183.396721,115.409836 185.308561,118.953734 186.98725,122.404372 C179.573042,128.419672 175.003279,135.414208 173.37122,139.983971 C170.433515,148.470674 172.718397,152.294353 177.055009,153.180328 C179.013479,153.6 181.811293,152.667395 183.863024,151.781421 C186.474317,150.942077 189.551913,149.496539 192.489617,147.351548 C197.479053,143.66776 202.281967,138.538434 202.002186,131.590528 C201.862295,128.419672 201.022951,125.295446 199.857195,122.264481 C206.152277,119.653188 214.265938,118.20765 224.617851,119.420036 C246.813843,122.03133 251.197086,135.88051 250.357741,141.70929 C249.518397,147.538069 244.855373,150.708925 243.316576,151.68816 C241.777778,152.667395 241.264845,152.993807 241.404736,153.69326 C241.591257,154.719126 242.337341,154.672495 243.642987,154.485974 C245.461566,154.159563 255.300546,149.776321 255.720219,139.051366 C256.419672,125.342077 243.363206,110.37377 220.281239,110.513661 L220.281239,110.513661 Z M49.0550091,168.241894 C41.6874317,176.262295 31.4287796,179.29326 26.9989071,176.728597 C22.242623,173.977413 24.1078324,162.133333 33.1540984,153.64663 C38.6564663,148.470674 45.7442623,143.66776 50.4539162,140.730055 C51.5264117,140.077231 53.1118397,139.144627 55.0236794,137.978871 C55.3500911,137.79235 55.536612,137.699089 55.536612,137.699089 L55.536612,137.699089 C55.9096539,137.465938 56.2826958,137.232787 56.6557377,136.999636 C59.9664845,149.123497 56.7956284,159.801821 49.0550091,168.241894 L49.0550091,168.241894 Z M102.679781,131.777049 C100.115118,138.025501 94.7526412,154.019672 91.4885246,153.133698 C88.6907104,152.387614 86.9653916,140.263752 90.9289617,128.279781 C92.9340619,122.264481 97.1774135,115.083424 99.648816,112.28561 C103.659016,107.809107 108.088889,106.31694 109.161384,108.135519 C110.513661,110.513661 104.265209,127.860109 102.679781,131.777049 L102.679781,131.777049 Z M146.931876,152.947177 C145.859381,153.50674 144.833515,153.879781 144.367213,153.6 C144.040801,153.413479 144.833515,152.667395 144.833515,152.667395 C144.833515,152.667395 150.382514,146.698725 152.574135,143.994171 C153.833151,142.408743 155.325319,140.543534 156.910747,138.445173 L156.910747,139.051366 C156.910747,146.185792 150.009472,150.988707 146.931876,152.947177 L146.931876,152.947177 Z M181.065209,145.159927 C180.272495,144.600364 180.412386,142.735155 183.07031,136.906375 C184.096175,134.621494 186.520947,130.797814 190.671038,127.114026 C191.137341,128.606193 191.463752,130.05173 191.417122,131.404007 C191.370492,140.403643 184.935519,143.76102 181.065209,145.159927 L181.065209,145.159927 Z">
</path>
</g>
</svg>
</span>
</div>
<div class="bd-doc__item-info">
<h5>Sass Available </h5>
<p>The template has
Sass available for css. You can
Change and customize css by sass.</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-6 col-sm-6">
<div class="bd-doc__single-item">
<div class="bd-doc__features-icon">
<span>
<svg width="50" height="50" viewBox="0 0 60 60" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M34.8744 47.3148H25.059C23.2722 47.3148 23.2722 44.6148 25.059 44.6148H34.8744C36.6612 44.6148 36.6612 47.3148 34.8744 47.3148Z"
fill="white" />
<path
d="M41.9724 52.7202H17.9604C16.1736 52.7202 16.1736 50.0202 17.9604 50.0202H41.9724C43.7592 50.0202 43.7592 52.7202 41.9724 52.7202Z"
fill="white" />
<path
d="M28.617 7.27979C22.6662 7.60199 17.3076 10.0074 13.185 13.7226L18.33 18.8676C21.0714 16.4844 24.5832 14.8692 28.617 14.5704V7.27979Z"
fill="white" />
<path
d="M12.1296 31.0638C12.4164 27.1308 13.9662 23.646 16.4232 20.7792L11.2662 15.6222C7.52579 19.7766 5.14739 25.0182 4.83359 31.0638H12.1296Z"
fill="white" />
<path
d="M12.1176 33.7638H4.83359C5.11559 39.0726 7.01159 43.953 10.0788 47.8914C10.5474 48.4926 11.439 48.558 12.0204 48.0648L15.5052 45.1128C16.0716 44.6328 16.1274 43.806 15.6792 43.2138C13.6614 40.548 12.381 37.2978 12.1176 33.7638Z"
fill="white" />
<path
d="M51.525 19.3866C50.307 20.8824 48.4992 23.1006 46.4784 25.5756C47.3598 27.6852 47.8764 29.9838 47.8764 32.4138C47.8764 36.4968 46.5102 40.2606 44.2098 43.2732C43.7754 43.842 43.8984 44.661 44.4456 45.1218L47.9148 48.042C48.5034 48.5376 49.4046 48.4698 49.8768 47.862C53.1924 43.5954 55.1664 38.235 55.1664 32.4132C55.167 27.57 53.811 23.145 51.525 19.3866Z"
fill="white" />
<path
d="M49.9182 17.0808C45.5052 11.3862 38.7564 7.68302 31.317 7.28162V14.577C35.9436 14.9298 40.6962 17.0862 44.0706 21.4014C44.0706 21.4014 27.9966 33.333 27.4248 33.9054C26.1102 35.22 26.1102 37.3518 27.4248 38.6664C28.7394 39.981 30.8712 39.981 32.1858 38.6664C33.0378 37.8138 49.9182 17.0808 49.9182 17.0808ZM49.851 17.1636C49.8516 17.1636 49.8516 17.163 49.8516 17.163L49.851 17.1636Z"
fill="white" />
</svg>
</span>
</div>
<div class="bd-doc__item-info">
<h5>Speed Optimized </h5>
<p>Finwise is faster loading speed. Finwise create your template so much
faster</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-6 col-sm-6">
<div class="bd-doc__single-item">
<div class="bd-doc__features-icon">
<span>
<svg width="50" height="50" viewBox="0 0 60 60" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10.4107 24.8391C10.4107 13.8823 19.293 5 30.2498 5C41.2066 5 50.089 13.8823 50.089 24.8391V26.87C53.2005 27.6709 55.4996 30.4955 55.4996 33.8569V41.0712C55.4996 45.0554 52.2696 48.2854 48.2854 48.2854C47.8695 48.2854 47.4617 48.2502 47.0651 48.1826C44.5957 52.8776 39.5643 55.7577 34.2175 55.4818C34.099 55.4937 33.9787 55.4996 33.8569 55.4996H30.2498C28.2576 55.4996 26.6427 53.8847 26.6427 51.8925C26.6427 49.9003 28.2576 48.2854 30.2498 48.2854H33.8569C35.7404 48.2854 37.2868 49.729 37.4498 51.5701C40.1063 50.8833 42.4159 49.1354 43.7682 46.6965C42.1237 45.3743 41.0712 43.3456 41.0712 41.0712V33.8569C41.0712 30.4955 43.3703 27.6709 46.4818 26.87V24.8391C46.4818 15.8744 39.2146 8.60712 30.2498 8.60712C21.2851 8.60712 14.0178 15.8744 14.0178 24.8391V26.87C17.1293 27.6709 19.4285 30.4955 19.4285 33.8569V41.0712C19.4285 45.0554 16.1985 48.2854 12.2142 48.2854C8.22992 48.2854 5 45.0554 5 41.0712V33.8569C5 30.4955 7.29912 27.6709 10.4107 26.87V24.8391Z"
fill="white" />
</svg>
</span>
</div>
<div class="bd-doc__item-info">
<h5>24/7 Support</h5>
<p>We are provide 24 hours support for all clients.You can purchase
without hesitation.</p>
</div>
</div>
</div>
</div>
<div class="bd-border-bottom"></div>
</div>
<!-- started -->
<div class="bd-doc-section " id="getting_started">
<div class="doc-item-section doc-title-hover">
<h2 class="mb-20">Getting Started</h2>
<p>Welcome to <a target="_blank"
href="https://themeforest.net/item/cipro-laboratory-science-research-wordpress-theme/47222322">Finwise</a>.
</p>
<p class="mb-30">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.</p>
<!-- list-item -->
<div class="bd-list__wrapper">
<h4 class="bd-list__title mb-15">Finwise Core Features</h4>
<ul class="bd-list__item">
<li><i class="fa-light fa-square-list"></i>HTML5 & CSS3</li>
<li><i class="fa-light fa-square-list"></i>Responsive layout (desktops,
tablets,
mobile devices)</li>
<li><i class="fa-light fa-square-list"></i>Built with Bootstrap v5.0.2</li>
<li><i class="fa-light fa-square-list"></i>Well structured code</li>
<li><i class="fa-light fa-square-list"></i>Contact Form Working</li>
<li><i class="fa-light fa-square-list"></i>Typography</li>
<li><i class="fa-light fa-square-list"></i>Sass Available</li>
<li><i class="fa-light fa-square-list"></i>Retina Ready</li>
<li><i class="fa-light fa-square-list"></i>UX Ready</li>
<li><i class="fa-light fa-square-list"></i>UX Ready</li>
<li><i class="fa-light fa-square-list"></i>W3 Valid 100%</li>
<li><i class="fa-light fa-square-list"></i>Fast Loading Speed</li>
<li><i class="fa-light fa-square-list"></i>Cross Browser Support</li>
<li><i class="fa-light fa-square-list"></i>Dedicated Support, Lifetime
Updates
</li>
<li><i class="fa-light fa-square-list"></i>And much more …</li>
</ul>
</div>
<div class="sub_section mb-35" id="include">
<h3 class="mb-20 load-order">What's Included</h3>
<p class="mb-30">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:</p>
<div class="steps-style">
<ul class="list-decimal">
<li><strong>Finwise template: </strong> A .zip file with all .html files
with all necessary assets.</li>
<li><strong>Documentation: </strong> An HTML format documentation.</li>
<li>Licensing.</li>
</ul>
</div>
</div>
<div class="bd-border-bottom"></div>
<div class="sub_section bd-install__work" id="install">
<h3 class="mb-20 load-order">How to Install Finwise Website Templates</h3>
<p>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.</p>
<h4 class="mb-15">1. Editing Finwise Template</h4>
<p class="mb-30">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.</p>
<h4 class="mb-15">2. Uploading to Live Server Using FTP:</h4>
<p class="mb-30">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).</p>
<img class="w-100 img-thumbnail" src="assets/img/structure/ftp-01.jpg"
alt="Home Page">
<h4 class="mb-20">3. Package comes with documentation unzip the download
package,
you’ll found a
folder with all template files, like above screenshot.</h4>
<img class="w-100 img-thumbnail" src="assets/img/structure/ftp-02.jpg"
alt="Home Page">
<h4 class="mb-10">4. Now, login to your hosting control panel or FTP client,
such
as: FileZilla,
CyberDuck etc. and upload template files on your server root.</h4>
<h4>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</h4>
</div>
<div class="bd-border-bottom"></div>
</div>
</div>
<!-- template -->
<div class="bd-doc-section" id="template">
<div class="doc-item-section bd-template__item">
<h2 class="mb-20 load-order">Template Structures</h2>
<h4 id="article">Articles</h4>
<ul class="list-unstyled article_list tag_list">
<li><a href="#html"><i class="fa-light fa-square-list"></i>HTML Structure</a>
</li>
<li><a href="#css"><i class="fa-light fa-square-list"></i>CSS Files and
Structure</a></li>
<li><a href="#javascript"><i class="fa-light fa-square-list"></i>JavaScript
Files</a></li>
</ul>
</div>
<div class="bd-border-bottom"></div>
<!-- code structure start -->
<div class="bd-doc__html" id="html">
<div class="bd-doc__html-content">
<h4 class="mb-15 load-order">HTML Structure</h4>
<p class="mb-30">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.</p>
<img class="w-100 img-thumbnail" src="assets/img/structure/html-structure-1.jpg"
alt="Images">
</div>
</div>
<!-- HTML CODE START-->
<div class="bd-highlight_code">
<pre>
<code class="language-html" data-lang="html">
<!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>
</code>
</pre>
<div class="bd-border-bottom"></div>
</div>
<!-- HTML CODE END-->
<!--css Files start-->
<div class="bd-doc__css-start" id="css">
<div class="bd-doc__css-title">
<h4 class="load-order mb-15">CSS Files and Structure</h4>
<p class="mb-30">We are using one customed CSS files (style.css) and several
vendor
css
files.
CSS file structure is as follows:</p>
<img class="w-100 img-thumbnail mb-40"
src="assets/img/structure/css-structure-1.jpg" alt="HTML Images">
</div>
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
/*********************************************************************************
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
***************************************************************/
</code>
</pre>
</div>
<div class="bd-border-bottom"></div>
</div>
<!--css Files end-->
<!--javascript Files start-->
<div class="bd-doc__javascript" id="javascript">
<div class="tab_shortcode mb-40">
<h4 class="load-order mb-15">JavaScript Files</h4>
<p class="mb-30">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:</p>
<img class="w-100 img-thumbnail"
src="assets/img/structure/javascript-structure-1.jpg" alt="HTML Images">
</div>
<div class="bd-border-bottom"></div>
</div>
<!--javascript Files end-->
</div>
<!-- content change start here -->
<div class="bd-doc__change-cont bd-doc-section" id="allcontent">
<div class="bd-doc__change-cont-inner">
<h2 class="load-order">Change Contents</h2>
<ul class="list-unstyled article_list tag_list mb-20">
<li><a href="#changingimages"><i class="fa-light fa-square-list"></i>Changing
Images</a></li>
<li><a href="#branlogo"><i class="fa-light fa-square-list"></i>Changing Brand
Logo</a>
</li>
<li><a href="#emailchange"><i class="fa-light fa-square-list"></i>Changing Email
Settings of the Contact Form</a>
</li>
</ul>
<div class="bd-border-bottom"></div>
<!-- img change -->
<div class="bd-doc__change-img" id="changingimages">
<div class="bd-doc__change-img-inner">
<h4 class=" load-order mb-10" id="changingimages_title">Changing
Images</h4>
<p class="mb-30">To change any images of the website</p>
<div class="steps-style">
<ul class="list-decimal">
<li>Carefully collect the source name of the image (i.e.
banner-img.jpg)
</li>
<li>Open the file called images.</li>
<li>Find the particular image file.</li>
<li>Replace the file with your image.</li>
<li>Make sure that the file name does not change.The file name
should be
the same.</li>
</ul>
</div>
<p> <strong>Example:</strong> Suppose you want to change the following image
file:</p>
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
<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>
</code>
</pre>
</div>
<img class="w-100 img-thumbnail mb-30"
src="assets/img/structure/brand-logo.jpg" alt="HTML Images">
<h4 class="s_title">You have to do the following to change this image with
your own image:</h4>
<div class="steps-style">
<ul class="list-decimal">
<li>Open the file called images.</li>
<li>Find the particular image file called banner-img.jpg</li>
<li>Replace the file with your image</li>
<li>Make sure that the file name does not change.</li>
</ul>
</div>
<div class="alert message_alert bd-alert-danger fade show" role="alert">
<i class="fa-light fa-circle-xmark"></i>
<div class="media-body">
<h5>Note</h5>
<p>Images seen in the live preview are only set for preview
purposes. They are not included in the download files.</p>
</div>
</div>
</div>
<div class="bd-border-bottom"></div>
</div>
<!-- brand logo change -->
<div class="bd-doc__change-img" id="branlogo">
<div class="bd-doc__change-img-inner">
<h4 class=" load-order mb-10" id="branlogo_title">Changing Brand Logo
</h4>
<p>To change any images of the website</p>
<div class="steps-style">
<ul class="list-decimal">
<li>Carefully collect the source name of the image (i.e.
banner-img.jpg)
</li>
<li>Open the file called images.</li>
<li>Find the particular image file.</li>
<li>Replace the file with your image.</li>
<li>Make sure that the file name does not change.The file name
should be
the same.</li>
</ul>
</div>
<p> <strong>Example:</strong> Suppose you want to change the following image
file:</p>
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
<div class="logo">
<a href="index.html">
<img src="assets/images/logo/logo.png" alt="Banking Logo Images">
</a>
</div>
</code>
</pre>
</div>
<img class="w-100 img-thumbnail mb-50"
src="assets/img/structure/brand-logo.jpg" alt="HTML Images">
</div>
<div class="bd-border-bottom"></div>
</div>
<!-- color change -->
<div class="bd-doc__color-change" id="colorchange">
<div class="bd-doc__color-change-inner">
<h4 class=" load-order mb-15">Changing Colors</h4>
<p>We have used <strong>scss</strong> for this
project to write css. If
you are familiar with <strong>scss</strong> you
should customize
only the <strong>.scss</strong> files. Please
make sure you compile
the <strong>style.scss</strong> file after you
have made changes in
any of the <strong>.scss</strong> files.</p>
<ul class="change-color-tag">
<li><a href="#changedefaultcolor">Changing default template
colors</a></li>
</ul>
</div>
<div class="bd-border-bottom"></div>
</div>
<!-- default color change -->
<div class="bd-doc__default-clr-change" id="changedefaultcolor">
<div class="bd-doc__default-clr-content">
<h4 class="load-order mb-20">Changing default template
colors</h4>
<div class="steps-style">
<ul class="list-decimal">
<li>Open the <strong>variable.scss</strong> file from <strong>assets
> scss >
defaults</strong> folder with a text-editor.</li>
<li>Change the right-side values of the variables to change any
default
colors of your
site.</li>
<li>Save your file.</li>
</ul>
</div>
<p class="mb-25">Have a look at the following image for a visual
description:
</p>
<img class="w-100 img-thumbnail mb-50"
src="assets/img/structure/change-default-color.jpg" alt="Images">
</div>
<div class="bd-border-bottom"></div>
</div>
<!-- email setting -->
<div class="bd-doc__email-setting" id="emailchange">
<div class="bd-doc__default-clr-content">
<h4 class="load-order mb-20">Changing Email Settings of the Contact Form
</h4>
<div class="steps-style">
<ul class="list-decimal">
<li>Go to main folder</li>
<li>Open mail.php</li>
<li>Go to line number 11</li>
<li>Follow instructions in image below:</li>
</ul>
</div>
<img class="w-100 img-thumbnail mb-50"
src="assets/img/structure/change-email-setting.jpg" alt="Images">
</div>
<div class="bd-border-bottom"></div>
</div>
</div>
</div>
<!-- content change start end -->
<!-- all content template start -->
<div class="bd-doc__header-wrapper bd-doc-section" id="all_header">
<div class="bd-doc__header-inner">
<h2 class=" load-order mb-10">Header Types</h2>
<p><span>Welcome to Finwise Header Elements!</span> You can choose 12 Types of
header package for createing you website.</p>
<div class="bd-border-bottom"></div>
<!-- default-header -->
<div class="bd-doc__header-default" id="header_default">
<div class="bd-doc__header-default-inner">
<h4 class=" load-order mb-10" id="headerDefault_title">01. Header Default
</h4>
<p>To change any images of the website</p>
<img class="w-100 img-thumbnail" src="assets/img/header/header-default.jpg"
alt="Images">
<br>
<br>
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
<!-- 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
</code>
</pre>
</div>
</div>
<div class="bd-border-bottom"></div>
</div>
<!-- transparent-header -->
<div class="bd-doc__header-transparent" id="header_transparent">
<div class="bd-doc__header-transparent-inner">
<h4 class=" load-order mb-10" id="headerTransparent_title">02. Header
Transparent</h4>
<p>To change any images of the website</p>
<div class="steps-style">
<ul class="list-decimal">
<li>Add bd-transparent-header class with header tag</li>
<li>For content white add color-white-variation class with
bd-header-wrapper class</li>
</ul>
</div>
<img class="w-100 img-thumbnail"
src="assets/img/header/header-transperent.jpg" alt="Images">
<br>
<br>
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
<!-- 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 -->
</code>
</pre>
</div>
</div>
<div class="bd-border-bottom"></div>
</div>
<!-- topbar-header -->
<div class="bd-doc__header-topbar" id="header_with_topbar">
<div class="bd-doc__header-topbar-inner">
<h4 class="load-order mb-10" id="headerWithTopbar_title">03. Header
with bar</h4>
<p>Header with bar and navigation menu to change your header area.</p>
<img class="w-100 img-thumbnail" src="assets/img/header/header-with-bar.jpg"
alt="Images">
<br>
<br>
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
<!-- 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 -->
</code>
</pre>
</div>
</div>
<div class="bd-border-bottom"></div>
</div>
</div>
</div>
<!-- all content template end -->
<!-- all elements start -->
<div class="bd-doc__elements-wrapper bd-doc-section" id="all_elements">
<div class="bd-doc__elements-inner">
<h2 class=" load-order">All Elemnts and Shortcode Types</h2>
<br>
<p><span>Welcome to Finwise Elements and Shortcode!</span> You can select any
elements & shortcode and customize easily and build your website.</p>
<div class="bd-border-bottom"></div>
<!-- single elements item start -->
<!-- button item start -->
<div class="bd-doc__elements-item" id="button">
<div class="bd-doc__elements-item-inner">
<h4 class="load-order" id="button_title">Buttons</h4>
<p>This the button classes on an <code><a></code> and
<code><button></code> element and create various button.</p>
<img class="w-100 img-thumbnail" src="assets/img/elements/button.jpg"
alt="Images">
<br>
<br>
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
<!-- Start Buttons -->
<a class="sub__btn" href="login.html">Log In</a><
<a class="gradient__btn" href="#">Know More<span><i class="fa-regular fa-angle-right"></i></span></a><
<a class="fill__btn-white" href="register.html">Open Account<span><i class="fa-regular fa-angle-right"></i></span></a><
<a class="pricing__btn-white" href="#">Know More<span><i class="fa-regular fa-angle-right"></i></span></a><
<!-- End Buttons -->
</code>
</pre>
</div>
<br>
<br>
<img class="w-100 img-thumbnail" src="assets/img/elements/button-2.jpg"
alt="Images">
<br>
<br>
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
<a class="gradient__btn btn-xs" href="#">Button XS<span><i class="fa-regular fa-angle-right"></i></span></a><
<a class="gradient__btn btn-sm" href="#">Button SM<span><i class="fa-regular fa-angle-right"></i></span></a><
<a class="gradient__btn" href="#">Button default<span><i class="fa-regular fa-angle-right"></i></span></a><
<a class="gradient__btn btn-lg" href="#">Button LG<span><i class="fa-regular fa-angle-right"></i></span></a><
<a class="gradient__btn btn-xl" href="#">Button XL<span><i class="fa-regular fa-angle-right"></i></span></a><
<a class="gradient__btn btn-xxl" href="#">Button XXL<span><i class="fa-regular fa-angle-right"></i></span></a><
</code>
</pre>
</div>
<br>
<br>
<div class="alert media message_alert alert-info fade show" role="alert">
<i class="fa-regular fa-circle-exclamation"></i>
<div class="media-body">
<h5>Note</h5>
<p>For more demo example, you can check our Finwise <a
href="#">button.html</a> page.</p>
</div>
</div>
</div>
<div class="bd-border-bottom"></div>
</div>
<!-- badge item start -->
<div class="bd-doc__elements-item" id="tab">
<div class="bd-doc__elements-item-inner">
<h4 class="load-order" id="badge_title">Advance Tab</h4>
<p>This the tab classes on an element and create various tab.</p>
<img class="w-100 img-thumbnail" src="assets/img/elements/Advance-tab.jpg"
alt="Images">
<br>
<br>
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
<!-- Explore area start -->
<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>
<!-- Explore area end -->
</code>
</pre>
</div>
<div class="alert media message_alert alert-info fade show" role="alert">
<i class="fa-regular fa-circle-exclamation"></i>
<div class="media-body">
<h5>Note</h5>
<p>For more demo example, you can check our Finwise <a
href="#">tab.html</a> page.</p>
</div>
</div>
</div>
<div class="bd-border-bottom"></div>
</div>
<!-- accordion item start -->
<div class="bd-doc__elements-item" id="accordion">
<div class="bd-doc__elements-item-inner">
<h4 class="load-order" id="accordion_title">Accordion</h4>
<p>Extend the default collapse behavior to create an accordion with the
panel
component see the code for better understanding</p>
<img class="w-100 img-thumbnail" src="assets/img/elements/accordion.jpg"
alt="Images">
<br>
<br>
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
<!-- 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 -->
</code>
</pre>
</div>
<div class="alert media message_alert alert-info fade show" role="alert">
<i class="fa-regular fa-circle-exclamation"></i>
<div class="media-body">
<h5>Note</h5>
<p>For more demo example, you can check our Finwise <a
href="#">accordion.html</a> page.</p>
</div>
</div>
</div>
<div class="bd-border-bottom"></div>
</div>
<!-- brand item start -->
<div class="bd-doc__elements-item" id="brand">
<div class="bd-doc__elements-item-inner">
<h4 class="load-order" id="brand_title">Brands</h4>
<p>Showcase of brands logos or images. See below image and code for more
information.</p>
<img class="w-100 img-thumbnail" src="assets/img/elements/clients.jpg"
alt="Images">
<br>
<br>
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
<!-- 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 -->
</code>
</pre>
</div>
<div class="alert media message_alert alert-info fade show" role="alert">
<i class="fa-regular fa-circle-exclamation"></i>
<div class="media-body">
<h5>Note</h5>
<p>For more demo example, you can check our Finwise <a
href="#">brand.html</a> page.</p>
</div>
</div>
</div>
<div class="bd-border-bottom"></div>
</div>
<!-- counter item start -->
<div class="bd-doc__elements-item" id="counter">
<div class="bd-doc__elements-item-inner">
<h4 class="load-order" id="counter_title">Counters</h4>
<p>Different styles of counters for your website are presented in our
website.
</p>
<img class="w-100 img-thumbnail" src="assets/img/elements/counter.jpg"
alt="Images">
<br>
<br>
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
<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>
</code>
</pre>
</div>
<div class="alert media message_alert alert-info fade show" role="alert">
<i class="fa-regular fa-circle-exclamation"></i>
<div class="media-body">
<h5>Note</h5>
<p>For more demo example, you can check our Finwise <a
href="#">counter.html</a> page.</p>
</div>
</div>
</div>
<div class="bd-border-bottom"></div>
</div>
<!-- work steps item start -->
<div class="bd-doc__elements-item" id="work_steps">
<div class="bd-doc__elements-item-inner">
<h4 class="load-order" id="work-step_title">Working Steps</h4>
<p>Showcase of Working Steps. See below image and code for more information.
</p>
<div class="steps-style">
<ul class="list-decimal">
<li>Add <code>.transparent-with-border</code> class For Transparent
with
border style.</li>
<li>Add <code>.with-gradient</code> class For Hover gradient style.
</li>
<li>Add <code>.with-bg-primary</code> class For With Bg Primary
Color
style.</li>
<li>Add <code>.icon-naked</code> class For naked style.</li>
</ul>
</div>
<img class="w-100 img-thumbnail" src="assets/img/elements/work-step.jpg"
alt="Images">
<br>
<br>
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
<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>
</code>
</pre>
</div>
<div class="alert media message_alert alert-info fade show" role="alert">
<i class="fa-regular fa-circle-exclamation"></i>
<div class="media-body">
<h5>Note</h5>
<p>For more demo example, you can check our Finwise <a
href="#">working-steps.html</a> page.</p>
</div>
</div>
</div>
<div class="bd-border-bottom"></div>
</div>
<!-- key-features item start -->
<div class="bd-doc__elements-item" id="key_features">
<div class="bd-doc__elements-item-inner">
<h4 class="load-order" id="key-features_title">kye Features</h4>
<p>Different types of key features are styled in our template. See below
image
and code for more information.</p>
<div class="steps-style">
<ul class="list-decimal">
<li>Add <code>.icon</code> class for large size style.</li>
<li>Add <code>.no-radius</code> class for square style.</li>
</ul>
</div>
<img class="w-100 img-thumbnail" src="assets/img/elements/key-features.jpg"
alt="Images">
<br>
<br>
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
<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>
</code>
</pre>
</div>
<div class="alert media message_alert alert-info fade show" role="alert">
<i class="fa-regular fa-circle-exclamation"></i>
<div class="media-body">
<h5>Note</h5>
<p>For more demo example, you can check our Finwise <a
href="#">key-features.html</a> page.</p>
</div>
</div>
</div>
<div class="bd-border-bottom"></div>
</div>
<!-- call-to-action item start -->
<div class="bd-doc__elements-item" id="callto_action">
<div class="bd-doc__elements-item-inner">
<h4 class="load-order" id="callto-action_title">Call To Action</h4>
<p>Awesome call to action styles. See below image and code for more
information.
</p>
<img class="w-100 img-thumbnail" src="assets/img/elements/callto-action.jpg"
alt="Images">
<br>
<br>
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
<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>
</code>
</pre>
</div>
<div class="alert media message_alert alert-info fade show" role="alert">
<i class="fa-regular fa-circle-exclamation"></i>
<div class="media-body">
<h5>Note</h5>
<p>For more demo example, you can check our Finwise <a
href="#">call-to-action.html</a> page.</p>
</div>
</div>
</div>
<div class="bd-border-bottom"></div>
</div>
<!-- values item start -->
<div class="bd-doc__elements-item" id="values">
<div class="bd-doc__elements-item-inner">
<h4 class="load-order" id="quote_title">Values</h4>
<p>Awesome values styles. See below image and code for more information.
</p>
<img class="w-100 img-thumbnail" src="assets/img/elements/values.jpg"
alt="Images">
<br>
<br>
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
<!-- 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 -->
</code>
</pre>
</div>
<div class="alert media message_alert alert-info fade show" role="alert">
<i class="fa-regular fa-circle-exclamation"></i>
<div class="media-body">
<h5>Note</h5>
<p>For more demo example, you can check our Finwise <a
href="#">values.html</a> page.
</p>
</div>
</div>
</div>
<div class="bd-border-bottom"></div>
</div>
<!-- benefits item start -->
<div class="bd-doc__elements-item" id="benefits">
<div class="bd-doc__elements-item-inner">
<h4 class="load-order" id="instagram_title">Benefits</h4>
<p>Awesome benefits styles. See below image and code for more information.
</p>
<img class="w-100 img-thumbnail" src="assets/img/elements/benefits.jpg"
alt="Images">
<br>
<br>
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
<!-- 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 -->
</code>
</pre>
</div>
<div class="alert media message_alert alert-info fade show" role="alert">
<i class="fa-regular fa-circle-exclamation"></i>
<div class="media-body">
<h5>Note</h5>
<p>For more demo example, you can check our Finwise <a
href="#">benefits.html</a> page.</p>
</div>
</div>
</div>
<div class="bd-border-bottom"></div>
<!-- elements item start -->
</div>
<!-- single elements item end -->
</div>
</div>
<!-- all elements end -->
<!-- all footer start -->
<div class="bd-doc__footer bd-doc-section" id="all_footer">
<div class="bd-doc__footer-inner">
<h2 class="load-order">Footer Style</h2>
<p><span>Welcome to Finwise Footer</span> You can select any footer & customize
easily and build your website.</p>
<div class="bd-border-bottom"></div>
<!-- footer-one -->
<div class="bd-doc__footer-item" id="footer_one">
<div class="bd-doc__footer-item-inner">
<h4 class="load-order" id="footerOne_title">Footer Default</h4>
<p>Awesome Footer styles. See below image and code for more information.</p>
<img class="w-100 img-thumbnail" src="assets/img/elements/footer.jpg"
alt="Images">
<br>
<br>
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
<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>
</code>
</pre>
</div>
</div>
<div class="bd-border-bottom"></div>
</div>
<!-- footer-two -->
<div class="bd-doc__footer-item" id="footer_two">
<div class="bd-doc__footer-item-inner">
<h4 class="load-order" id="footerTwo_title">Footer Two</h4>
<p>Awesome Footer Two styles. See below image and code for more information.
</p>
<img class="w-100 img-thumbnail" src="assets/img/elements/footer-2.jpg"
alt="Images">
<br>
<br>
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
<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>
</code>
</pre>
</div>
</div>
<div class="bd-border-bottom"></div>
</div>
<!-- footer-three -->
<div class="bd-doc__footer-item" id="footer_three">
<div class="bd-doc__footer-item-inner">
<h4 class="load-order" id="footerThree_title">Footer Three</h4>
<p>Awesome Footer Three styles. See below image and code for more
information.
</p>
<img class="w-100 img-thumbnail" src="assets/img/elements/footer-3.jpg"
alt="Images">
<br>
<br>
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
<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>
</code>
</pre>
</div>
</div>
<div class="bd-border-bottom"></div>
</div>
<!-- footer-four -->
<div class="bd-doc__footer-item" id="footer_four">
<div class="bd-doc__footer-item-inner">
<h4 class="load-order" id="footerFourhree_title">Footer Four</h4>
<p>Awesome Footer Four styles. See below image and code for more
information.
</p>
<img class="w-100 img-thumbnail" src="assets/img/elements/footer-4.jpg"
alt="Images">
<br>
<br>
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
<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>
</code>
</pre>
</div>
</div>
<div class="bd-border-bottom"></div>
</div>
</div>
</div>
<!-- all footer end -->
<!-- source start here -->
<div class="bd-doc__source bd-doc-section" id="source">
<div class="bd-doc__source-inner">
<h4 class="load-order">Sources and Credits</h4>
<p>We've used the following fonts, free icons and plugins as listed:</p>
<ul class=" bd-doc__single-list">
<li><a target="_blank" href="https://fonts.google.com/">Google Fonts</a></li>
<li><a target="_blank" href="https://feathericons.com/">Feathericons Icon
fonts</a></li>
<li><a target="_blank" href="https://swiperjs.com/">Swiperjs Slider</a></li>
<li><a target="_blank" href="https://kenwheeler.github.io/slick/">Slickjs
Slider</a>
</li>
<li><a target="_blank"
href="https://dimsemenov.com/plugins/magnific-popup/">Magnific Popup</a>
</li>
<li><a target="_blank"
href="https://daneden.github.io/animate.css/">Animate.css</a>
</li>
<li><a target="_blank" href="https://jquery.com/">jQuery</a></li>
<li><a target="_blank" href="http://imakewebthings.com/waypoints/">Waypoints
Js</a></li>
<li><a target="_blank" href="https://isotope.metafizzy.co/">Isotop</a></li>
<li><a target="_blank"
href="https://github.hubspot.com/odometer/docs/welcome/">odometer
Counter Up</a></li>
<li><a target="_blank"
href="https://github.com/TimeTravelersHackedMe/Flat-Roots-Masonry/blob/master/lib/activation.php">Masonry
Activation</a></li>
<li><a target="_blank"
href="https://github.com/davist11/jQuery-One-Page-Nav">jquery
one page
nav</a></li>
<li><a target="_blank" href="https://pixelcog.github.io/parallax.js/">Parallax
Scroll</a>
</li>
<li><a target="_blank"
href="https://developer.snapappointments.com/bootstrap-select/">Bootstrap
Select</a></li>
</ul>
<div class="bd-border-bottom"></div>
</div>
</div>
<!-- source end here -->
<!-- video guide start -->
<div class="bd-doc__video-content bd-doc-section" id="video_guide">
<div class="bd-doc__video-content-inner">
<h4 class="load-order">Youtube Channel
</h4>
<p>While it's always better to host your videos on a video sharing website, but we
provided a sample for you to include local videos in your pages.</p>
<div class="bd-doc__video-preview video-thumb">
<img src="assets/img/video/preview.jpg" alt="preview">
<a class="bd-doc__video-icon" href="https://www.youtube.com/@bdevsltd"
target="_blank"><i class="fa-duotone fa-play"></i></a>
</div>
</div>
</div>
<!-- video guide end -->
<!-- support area start -->
<div class="bd-doc__support bd-doc-section" id="support">
<div class="bd-doc__support-inner">
<h2 class="load-order">Support</h2>
<p>Thank you for purchasing my template. <br> If you have any questions that are
beyond the scope of this help file, please feel free to open a new ticket at our
<a href="https://support.bdevs.net/" target="_blank">Support
forum</a></p>
</div>
</div>
<!-- support area end -->
<div class="bd-border-bottom"></div>
<!-- Start All Content Template -->
<div class="bd-doc__change-log" id="change_log">
<div class="bd-doc__change-log-inner">
<h2 class="load-order">Change Log</h2>
<p>Update Change log <a href="#" target="_blank">View Changelog Here</a></p>
</div>
</div>
<!-- End All Content Template -->
</div>
</div>
<div class="col-xxl-2 col-xl-2 d-none d-xl-block">
<div class="bd-need-work">
<h5>Need to custom work.</h5>
<p>If you need to theme customization or make custom theme or template. Please, you can
contact
us for this.</p>
<a href="https://html.bdevs.net/cdn-cgi/l/email-protection#fc919d95908893c69e9d929b909d98998a8fcdcbbc9b919d9590d29f9391" class="contact-btn">Contact</a>
</div>
</div>
</div>
</div>
</section>
<!-- doc area end -->
<!-- footer start -->
<footer class="bd-footer">
<div class="container">
<div class="row align-items-center">
<div class="col-md-8">
<div class="page-footer">
<p>© 2023 All Rights Reserved by <a
href="https://themeforest.net/user/bdevs/portfolio">Bdevs</a>.</p>
</div>
</div>
<div class="col-md-4">
<div class="bd-social-footer d-flex justify-content-md-end">
<a href="https://www.youtube.com/@bdevsltd"><i class="fa-brands fa-youtube"></i></a>
</div>
</div>
</div>
</div>
</footer>
<!-- footer end -->
<!-- Offcanvas area start -->
<div class="fix">
<div class="offcanvas__info">
<div class="offcanvas__wrapper">
<div class="offcanvas__content">
<div class="offcanvas__top mb-40 d-flex justify-content-between align-items-center">
<div class="offcanvas__logo">
<a href="index-2.html">
<img src="assets/img/logo/logo-black.svg" alt="logo not found">
</a>
</div>
<div class="offcanvas__close">
<div class="menu-close-btn">
<i class="fa-solid fa-circle-xmark"></i>
</div>
</div>
</div>
<div class="mobile-sidebar mobile-menu mb-30 fix"></div>
<div class="bd-need-work mb-30">
<h5>need to custom work.</h5>
<p>If you need to theme customization or make custom theme or template. Please, you can
contact
us for this.</p>
<a href="https://html.bdevs.net/cdn-cgi/l/email-protection#8de0ece4e1f9e2b7efece3eae1ece9e8fbfebcbacdeae0ece4e1a3eee2e0" class="contact-btn">Contact</a>
</div>
<a class="bd-btn" target="_blank"
href="https://themeforest.net/item/cipro-laboratory-science-research-wordpress-theme/47222322">Purchase
Now</a>
</div>
</div>
</div>
</div>
<div class="offcanvas__overlay"></div>
<div class="offcanvas__overlay-white"></div>
<!-- Offcanvas area start -->
</div>
<!-- JS here -->
<script data-cfasync="false" src="../../../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
<script src="assets/js/vendor/waypoints.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/parallaxie.js"></script>
<script src="assets/js/TweenMax.min.js"></script>
<script src="assets/js/anchor.js"></script>
<script src="assets/js/prism.js"></script>
<script src="assets/js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="assets/js/tooltipster.bundle.min.js"></script>
<script src="assets/js/video.min.js"></script>
<script src="assets/js/wistia.js"></script>
<script src="assets/js/meanmenu.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>