“Azurex - Finance & Business HTML5 Template” Documentation by “Tripples” v 1.0

Azurex - Finance & Business HTML5 Template

Created: July, 2016
Updated: July, 2016
By: Tripples
Email: tripplesworld@gmail.com

Thank you for purchasing Azurex. If you have any questions that are beyond the scope of this help file, please feel free to email via profile page contact form or mail me to tripplesworld@gmail.com

Table of Contents

  1. Introduction
  2. HTML Structure
  3. CSS Files and Structure
  4. JavaScripts
  5. Navigation and Logos
  6. Fonts used
  7. FAQs
  8. Sources and Credits

A) Introduction - top

Azurex is a Clean and professional HTML template specially designed for finance business or small agency. This template comes with twitter bootstrap 3, Owl Carousel, Isotope, Beautiful Tab, Accordion, Video Popup and more.

Template Features

B) HTML Structure - top

HTML Files

General HTML structure

This template structure based on Twitter Bootstrap 3. Here is the sample structure.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- Page Layout
================================================== -->
 
<!-- Header start -->
<header id="header">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12">
            </div>
        </div>
    </div>
</header>
<!-- Header end -->

C) CSS Files and Structure - top

Styles

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- CSS
    ================================================== -->
     
    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Template styles-->
    <link rel="stylesheet" href="css/style.css">
    <!-- Responsive styles-->
    <link rel="stylesheet" href="css/responsive.css">
    <!-- FontAwesome -->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <!-- Animation -->
    <link rel="stylesheet" href="css/animate.css">
    <!-- Owl Carousel -->
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <!-- Colorbox -->
    <link rel="stylesheet" href="css/colorbox.css">

All css files are separates for improving convenience to edit this template.

Some of stylesheets contain Table of content for easy navigation, for instance style.css:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* Table of Content
==================================================
1.    Global Styles
2.    Typography
3.    Top Bar
4.    Header area
5.    Main Slider
6.    Features
7.    Project area
8.    Featured Tab
9.    Content area
10.   Facts
11.   News section
12.   Testimonial
13.   Footer
14.   Sub Pages
15.   Contact Us
16.   News Listing
17.   News Single
18.   Sidebar
19.   Error page
20.   Home Variation
   
*/

D) JavaScript - top

Below is the list of Javascript files.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- Javascript Files
================================================== -->
 
<!-- initialize jQuery Library -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- Bootstrap jQuery -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- Owl Carousel -->
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<!-- Counter -->
<script type="text/javascript" src="js/jquery.counterup.min.js"></script>
<!-- Waypoints -->
<script type="text/javascript" src="js/waypoints.min.js"></script>
<!-- Color box -->
<script type="text/javascript" src="js/jquery.colorbox.js"></script>
<!-- Isotope -->
<script type="text/javascript" src="js/isotope.js"></script>
<script type="text/javascript" src="js/ini.isotope.js"></script>
 
<!-- Template custom -->
<script type="text/javascript" src="js/custom.js"></script>
If you face any difficulites to find source then please knock me to tripplesworld@gmail.com

Header Logo

As you can see the logo is : Image based (by default) and you can make it text based if you want.

?
1
2
3
4
5
<div class="logo col-xs-12 col-sm-3">
   <a href="index.html">
    <img src="images/logo.png" alt="">
   </a>
</div><!-- logo end -->

Navigation Menu

The page navigation links such as Home, News, Contacts etc are included.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<nav class="site-navigation navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="site-nav-inner pull-left">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
 
                    <div class="collapse navbar-collapse navbar-responsive-collapse">
                        <ul class="nav navbar-nav">
                            <li class="dropdown active">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home <i class="fa fa-angle-down"></i></a>
                                <ul class="dropdown-menu" role="menu">
                           <li class="active"><a href="index.html">Home One</a></li>
                           <li><a href="index-2.html">Home Two</a></li>
                           <li><a href="index-3.html">Home Three</a></li>
                           <li><a href="index-4.html">Home Four</a></li>
                          </ul>
                       </li>
 
                       <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <i class="fa fa-angle-down"></i></a>
                                <ul class="dropdown-menu" role="menu">
                           <li><a href="service1.html">Services Style1</a></li>
                           <li><a href="service2.html">Services Style2</a></li>
                           <li><a href="service-single.html">Services Single</a></li>
                          </ul>
                       </li>
 
                       <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Projects <i class="fa fa-angle-down"></i></a>
                                <ul class="dropdown-menu" role="menu">
                           <li><a href="projects.html">Projects</a></li>
                           <li><a href="projects-single.html">Projects Single</a></li>
                          </ul>
                       </li>
 
                       <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <i class="fa fa-angle-down"></i></a>
                                <ul class="dropdown-menu" role="menu">
                           <li><a href="about.html">About Us</a></li>
                           <li><a href="team.html">Team Members</a></li>
                           <li><a href="reviews.html">Client Reviews</a></li>
                           <li><a href="career.html">Career</a></li>
                            <li><a href="pricing.html">Pricing</a></li>
                           <li><a href="faq.html">Faq</a></li>
                          </ul>
                       </li>
 
                       <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Features <i class="fa fa-angle-down"></i></a>
                                <ul class="dropdown-menu" role="menu">
                           <li><a href="typography.html">Typography</a></li>
                           <li><a href="elements.html">Elements</a></li>
                           <li><a href="404.html">404</a></li>
                           <li class="dropdown-submenu">
                                <a href="#">Parent Menu</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Child Menu 1</a></li>
                                        <li><a href="#">Child Menu 2</a></li>
                                        <li><a href="#">Child Menu 3</a></li>
                                    </ul>
                            </li>
                          </ul>
                       </li>
 
                       <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">News <i class="fa fa-angle-down"></i></a>
                                <ul class="dropdown-menu" role="menu">
                           <li><a href="news-left-sidebar.html">News Left Sidebar</a></li>
                           <li><a href="news-right-sidebar.html">News Right Sidebar</a></li>
                           <li><a href="news-single.html">News Single</a></li>
                          </ul>
                       </li>
 
                            <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact <i class="fa fa-angle-down"></i></a>
                                <ul class="dropdown-menu" role="menu">
                           <li><a href="contact1.html">Contact One</a></li>
                           <li><a href="contact2.html">Contact Two</a></li>
                          </ul>
                       </li>
 
                    </ul><!--/ Nav ul end -->
                    </div><!--/ Collapse end -->
 
                </div><!-- Site Navbar inner end -->
 
                <div class="request-quote pull-right">
                    <a href="#">Request Quote</a>
                </div>
 
            </div><!--/ Col end -->
        </div><!--/ Row end -->
    </div><!--/ Container end -->
 
</nav><!--/ Navigation end -->

G) Fonts Used - top

I have used Roboto as body font and Montserrat Slab as heading font in this template.

  1. Montserrat - Google Web Font
  2. Hind - Google Web Font

H) FAQs - top

How to change Contact Form Email Address for own?

  1. Please, open contact-form.php
  2. Find line 4 you will see
    $recipient = "yourmail@domain.com";
  3. You should change 'yourmail@domain.com' with your own.

How to change Contact Map Address?

  1. Please, open contact1.html or contact2.html file and see the below screen shot.
  2. Change your Google API key from line # 510. Here is the link how to get Google MAP API KEY
  3. Change Address from line # 520

I) Sources and Credits - top

Once again, thank you so much for purchasing this template. I'd be glad to help you if you have any questions relating to this template. I'll do my best to assist.

Tripples, tripplesworld@gmail.com

Go To Table of Contents