logo

Xzomark Html Template Documentation

Thank you for purchasing my Template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here.

FTP Upload

  • Open up your FTP manager and connect to your hosting
  • Browse to required directory (Normally public_html)
  • Upload the files inside Xzomark/HTML folder.

HTML files are includes

10 pages are include in this template.

  • index.html
  • about.html
  • portfolio.html
  • portfolio_details.html
  • service.html
  • service_details.html
  • blog.html
  • blog_details.html
  • team.html
  • contact.html

Template Structure

This template stand on HTML, CSS (SASS) and JAVASCRIPT. Below will discribe there structures.

Html Structure

Xzomark- Business Html Template is built with the Bootstrap 4 framework - that means you have access to all the great features, css & js goodies has to offer. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Here is the basic HTML structure.

<!DOCTYPE html>

<html lang="zxx">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Xzomark Business</title>

    <!-- Favicon -->

    <link href="assets/img/favicon.ico" rel="shortcut icon">

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">

    <!-- themify icon -->

    <link rel="stylesheet" type="text/css" href="assets/css/themify-icons.css">

    <!-- video popup -->

    <link rel="stylesheet" type="text/css" href="assets/css/colorbox.css">

    <!-- swiper slider -->

    <link rel="stylesheet" type="text/css" href="assets/css/swiper.min.css">

    <!-- Animate Css -->

    <link rel="stylesheet" type="text/css" href="assets/css/animate.css">

    <!-- CSS -->

    <link href="assets/css/style.css" rel="stylesheet">

</head>

<body>

    <!-- Pre-loader -->

    <div class="preloader">

        <div class="loader">

        </div>

    </div>

    <!-- Start Header Section -->

    <header class="header_wrap">

    </header>

    <!-- End Header Section -->

    <!-- Start Hero Section -->

    <section class="hero_area">

    </section>

    <!-- End Hero Section -->

    <!-- Start Service Section -->

    <section class="service_area section_padding_2">

    </section>

    <!-- End Service Section -->

    <!-- Start Promo Section -->

    <section class="promo_area section_padding_2">

    </section>

    <!-- End Promo Section -->

    <!-- Start Call To Action Section -->

    <section class="call_to_action_area section_margin">

    </section>

    <!-- End Call To Action Section -->

    <!-- Start Team Section -->

    <section class="team_area section_padding_2">

    </section>

    <!-- End Team Section -->

    <!-- Start Team Section -->

    <section class="testimonial_area section_padding_2">

    </section>

    <!-- End Team Section -->

    <!-- Start Blog Section -->

    <section class="blog_area section_padding_2">

    </section>

    <!-- End Blog Section -->

    <!-- Start client Section -->

    <div class="client_area section_padding">

    </div>

    <!-- End client Section -->

    <!-- Start Footer Section -->

    <footer class="simple_clean">

    </footer>

    <!-- End Footer Section -->

    <!-- Start Scroll to top -->

    <div class="scrolltop">

        <i class="ti-angle-up"></i>

    </div>

    <!-- End Scroll to top -->

    <!--jQuery JS-->

    <script src="assets/js/jquery-3.3.1.min.js"></script>

    <script src="assets/js/popper.min.js"></script>

    <!-- Bootstrap -->

    <script src="assets/js/bootstrap.min.js"></script>

    <!-- Colorbox video poput -->

    <script src="assets/js/jquery.colorbox-min.js"></script>

    <!-- Swiper Slider -->

    <script src="assets/js/swiper.min.js"></script>

    <!-- waypoints  -->

    <script src="assets/js/jquery.waypoints.min.js"></script>

    <!-- Counterup  -->

    <script src="assets/js/jquery.counterup.min.js"></script>

    <!-- Custom js -->

    <script src="assets/js/main.js"></script>

</body>

</html>

Css Structure

SASS File Structure. We split sass in many partials for codeing every section indivisually. If yon not use sass then you get all sections code in css/style.css file.

/*--------------=====---------------------

        TABLE OF CONTENTS:

----------------=====---------------------

1. Mixins

2. Variables

3. Common Classes

4. Default

5. Header with menu

6. Pre Loader Mobile menu icon

7. Hero area section

8. Footer

9. Client

10. Service

11. Call to action

12. Team  

13. Testimonial

14. blog  

15. portfolio  

16. contact

17. contact

/* ------------------===---------------------*/

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

            1. Mixins

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

@import "mixins";

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

            2. Variables

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

@import "variables";

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

            3. Common Classes

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

@import "common_class";

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

            4. Default

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

@import "default";

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

            5. Header with menu

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

@import "header_with_menu";

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

            6. Pre Loader Mobile menu icon

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

@import "pre_loader_and_mobile_menu_icon";

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

            7. Hero area section

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

@import "hero_area";

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\  

            8. Footer

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

@import "footer";

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

            9. Client

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

@import "client";

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

            10. Service

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

@import "service";

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

            11. Call to action

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

@import "call_to_action";

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

            12. Team

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

@import "team";

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

            13. Testimonial

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

@import "testimonial";

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

            14. blog

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

@import "blog";

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

            15. portfolio

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

@import "portfolio";

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

            16. contact

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

@import "contact";

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

            17. contact

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

@import "blocks";

Javascript files

  • js/jquery-3.3.1.min.js
  • js/bootstrap.min.j
  • js/popper.min.js
  • js/jquery.colorbox-min.js
  • js/jquery.waypoints.min.js
  • js/jquery.counterup.min.js
  • js/isotope.pkgd.min.js
  • js/swiper.min.js
  • js/gmap3.min.js
  • js/main.js --most of custom javasript here

Template Customaization

You Can change template's heading style, color, backgroud, fontsize, margin, padding.

Variables

By updating variable property you can change both font and background color easily.

All uses Variables assets/sass/variables.scss

image

Mixins

All uses Mixinsassets/sass/mixins.scss

image

Common Class

Common Classes in assets/sass/common_class.scss file. pulse button/video button, heading style, gradient button, some background colors include in this file

image

Heading Style

For header/Nav/Menu style GoTo assets/sass/header_with_manu.scss file.

image

Hero area Style

To style GoTo assets/sass/hero_area.scss file.

image

Hero area 2 Style

To style GoTo assets/sass/hero_area.scss file.

image

Text Content boxes:

To style GoTo assets/sass/blocks.scss file.

image

Image box 1, 2, 3:

To style GoTo assets/sass/blocks.scss file.

image

Testimonial Area:

To style GoTo assets/sass/testimonial.scss file.

image

Team Area:

To style GoTo assets/sass/team.scss file.

image

Service Area:

To style GoTo assets/sass/service.scss file.

image

Client Area:

To style GoTo assets/sass/client.scss file.

image

Blogs Area:

To style GoTo assets/sass/blog.scss file.

image

Video Content Block/box:

To style GoTo assets/sass/blocks.scss file.

image

Portfolio Area:

To style GoTo assets/sass/portfolio.scss file.

image

Call to Action Area:

To style GoTo assets/sass/call_to_action.scss file.

image

Contact Area:

To style GoTo assets/sass/contact.sass file.

image

Footer Area:

To style GoTo assets/sass/footer.scss file.

image

Sources and Credits

Included Libraries

Used Fonts

Used Photos in Demo

Contact Us

For inquiries regarding support, please send us an email to author@themevaly.com including your question and purchase code.
To know more about what support does include, check out Envato's Support Policy