Plax - Banking, Finance & Fintech HTML Template

by: bslthemes

Thank you for your purchase. If you have any questions, mail me to - beshleyua@gmail.com

File structure

After unpacking archive, you'll see this structure:

						
html/
│
├──doc/
├──template/
│──│──css/
│──│──scss/
│──│──img/
│──│──fonts/
│──│──js/
│──│──│──main.js
│──│──|──plugins/
│──│──index.html
│──│──home-2.html
│──│──home-3.html
│──│──home-4.html
│──│──home-5.html
│──│──about.html
│──│──career-details.html
│──│──career.html
│──│──coming-soon.html
│──│──blog.html
│──│──contact.html
│──│──price.html
│──│──register.html
│──│──services.html
│──│──publication.html
  • css/ - compiled css styles for template
  • scss/ - main .scss styles for template
  • js/ - all JS library for template
    • main.js - main JS for template

Settings

Template Settings

For editing styling, colors, sizes, etc of the template you can use following settings, folder "/scss/_variables.scss". You need to compile the .sсss files to "/css" folder. You can use the "Visual Studio Code" app -> "Live Sass Compiler".

					
@import url('https://fonts.googleapis.com/css2?family=Questrial');

$font-1: 'Switzer-Variable';
$font-2: 'Questrial',
sans-serif;


$color-1-1: rgba(242, 116, 87, 1);
$color-1-2: rgba(3, 166, 166, 1);
$color-1-3: rgba(160, 205, 205, 1);
$color-1-4: rgba(242, 250, 250, 1);


$color-2-1: rgba(13, 81, 82, 1);
$color-2-2: rgba(137, 141, 150, 1);
$color-2-3: rgba(196, 196, 196, 1);
$color-2-4: rgba(137, 141, 150, 0.2);
$color-2-5: rgba(255, 255, 255, 1);

$color-3-1: rgba(27, 23, 23, 1);
$color-3-2: rgba(39, 38, 38, 1);


$t-sm: .2s cubic-bezier(0, 0, 0.3642, 1);
$t-md: .4s cubic-bezier(0, 0, 0.3642, 1);

$gradient-1: linear-gradient(180deg, #F27457 0%, #A08488 100%);
$gradient-2: linear-gradient(0deg, #B3D4D8 0%, #DEECE8 100%);
$gradient-3: linear-gradient(0deg, #224D50 0%, #1C6360 100%);

Include of fonts

For editing fonts of the template you can use following settings, folder "/scss/_variables.scss". You need to compile the .sсss files to "/css" folder. You can use the "Visual Studio Code" app -> "Live Sass Compiler".

					
@import url('https://fonts.googleapis.com/css2?family=Questrial');

Next step is to replace "$font-1: 'Questrial'," to your fonts names.

Edit Icons

In this template are defined some of classes for icons, see all icons here - https://fontawesome.com/v5/search, use search and select icons.

Copy icon class (for example "fas fa-code") and add to tag in html file like this:

					
<i class="fas fa-pencil-ruler"></i>

HTML structure

					
</html>
<!DOCTYPE html>
<html lang="en-US">

<head>

    <title>Plax - Banking, Finance & Fintech HTML Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="HandheldFriendly" content="true">
    <meta name="author" content="bslthemes" />

    <!-- switzer font css -->
    <link rel="stylesheet" href="fonts/css/switzer.css" type="text/css" media="all">
    <!-- font awesome css -->
    <link rel="stylesheet" href="fonts/css/font-awesome.min.css" type="text/css" media="all">
    <!-- bootstrap grid css -->
    <link rel="stylesheet" href="css/plugins/bootstrap-grid.css" type="text/css" media="all">
    <!-- swiper css -->
    <link rel="stylesheet" href="css/plugins/swiper.min.css" type="text/css" media="all">
    <!-- magnific popup -->
    <link rel="stylesheet" href="css/plugins/magnific-popup.css" type="text/css" media="all">
    <!-- plax css -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all">

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

</head>

<body>

    <!-- wrapper -->
    <div id="smooth-wrapper" class="mil-wrapper">

        <!-- preloader -->
        <div class="mil-preloader">
            <div class="mil-load"></div>
            <p class="h2 mil-mb-30"><span class="mil-light mil-counter" data-number="100">100</span><span class="mil-light">%</span></p>
        </div>
        <!-- preloader end -->

        <!-- scroll progress -->
        <div class="mil-progress-track">
            <div class="mil-progress"></div>
        </div>
        <!-- scroll progress end -->

        <!-- back to top -->
        <div class="progress-wrap active-progress"></div>

        <!-- top panel end -->
        <div class="mil-top-panel">
            ...
        </div>
        <!-- top panel end -->

        <!-- content -->
        <div id="smooth-content">

            <!-- banner -->
            <div class="mil-banner mil-dissolve">
                ...
            </div>
            <!-- banner end -->

            <!-- features -->
            <div class="mil-features mil-p-160-80">
                ...
            </div>
            <!-- features end -->

            <!-- facts -->
            <div class="mil-facts mil-p-0-80">
                ...
            </div>
            <!-- facts end -->

            <!-- call to action -->
            <div class="mil-cta mil-up">
                ...
            </div>
            <!-- call to action end -->

            <!-- features -->
            <div class="mil-features mil-p-160-80">
                ...
            </div>
            <!-- features end -->

            <!-- testimonials -->
            <div class="mil-testimonials mil-p-0-160">
                ...
            </div>
            <!-- testimonials end -->

            <!-- brands -->
            <div class="mil-brands mil-p-0-160">
                ...
            </div>
            <!-- brands end -->

            <!-- security -->
            <div class="mil-security mil-up">
                ...
            </div>
            <!-- security end -->

            <!-- faq -->
            <div class="mil-faq mil-p-160-130">
                ...
            </div>
            <!-- faq end -->

            <!-- call to action -->
            <div class="mil-cta mil-up">
                ...
            </div>
            <!-- call to action end -->

            <!-- footer -->
            <footer class="mil-p-160-0">
                ...
            </footer>
            <!-- footer end -->

        </div>
        <!-- content end -->
    </div>
    <!-- wrapper end -->

    <!-- jquery js -->
    <script src="js/plugins/jquery.min.js"></script>
	<script src="js/plugins/jquery.validate.min.js"></script>
    <!-- swiper css -->
    <script src="js/plugins/swiper.min.js"></script>
    <!-- gsap js -->
    <script src="js/plugins/gsap.min.js"></script>
    <!-- scroll smoother -->
    <script src="js/plugins/ScrollSmoother.min.js"></script>
    <!-- scroll trigger js -->
    <script src="js/plugins/ScrollTrigger.min.js"></script>
    <!-- scroll to js -->
    <script src="js/plugins/ScrollTo.min.js"></script>
    <!-- magnific -->
    <script src="js/plugins/magnific-popup.js"></script>
    <!-- plax js -->
    <script src="js/main.js"></script>

</body>

</html>

HTML structure of "Header"

					

<!-- top panel end -->
<div class="mil-top-panel">
	<div class="container">
		<a href="index.html" class="mil-logo">
			<img src="img/logo.png" alt="Plax" width="83" height="32">
		</a>
		<nav class="mil-top-menu">
			<ul>
				<li class="mil-has-children mil-active">
					<a href="#.">Home</a>
					<ul>
						<li><a href="index.html">Type 1</a></li>
						...
					</ul>
				</li>
				...
			</ul>
		</nav>
		<div class="mil-menu-buttons">
			<a href="register.html" class="mil-btn mil-sm">Log in</a>
			<div class="mil-menu-btn">
				<span></span>
			</div>
		</div>
	</div>
</div>
<!-- top panel end -->