XIOM is a modern Template with full of customization options and lot of features.
Xiom is based on Bootstrap 1170px grid system. All files are clearly organised we believe it will be easy to use and edit them. The design is very clean, elegant and modern. Any one can customize this template as his wishes
Thank you for purchasing our theme. 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. Thanks so much!
• 1170 px bootstrap grid.
• Easy to customize.
• sass files included.
• Fully Responsive.
• Modern and unique design.
• index.html
• index-aster-v1.html
• index-aster-v2.html
• index-hosta-v1.html
• index-hosta-v2.html
• about-aster.html
• about-hosta.html
• feature-aster.html
• feature-hosta.html
• contact-aster.html
• contact-hosta.html
• pricing-aster-v1.html
• pricing-aster-v2.html
• pricing-hosta.html
• login-aster.html
• login-hosta.html
<body> <!-- HEADER AREA STARTS --> <div class="header-area" id="home"> </div> <!-- HEADER AREA ENDS --> <!-- PARTNER STARTS --> <div class="partner section-pad-xs"> </div> <!-- PARTNER ENDS --> <!-- WHY THIS STARTS --> <div class="why-this section-pad-lg section-pad nopb"> </div> <!-- WHY THIS ENDS --> <!-- CONFIG STARTS --> <div class="config section-pad-xl section-pad nopb"> </div> <!-- CONFIG ENDS --> <!-- TOOLS STARTS --> <div class="tools section-pad-lg"> </div> <!-- TOOLS ENDS --> <!-- FEATURE STARTS --> <div class="feature section-pad nopb"> </div> <!-- FEATURE ENDS --> <!-- TESTIMONIAL STARTS --> <div class="testimonial section-pad-lg section-pad nopb mtn-x2"> </div> <!-- TESTIMONIAL ENDS --> <!-- CALL TO ACTION STARTS --> <div class="cta section-pad-sm section-pad nopb"> </div> <!-- CALL TO ACTION ENDS --> <!-- FOOTER STARTS --> <div class="footer-area nopd"> </div> <!-- FOOTER ENDS --> </body>
All CSS are located in the "css" folder of the template. Each CSS File is well commented and easy to use and customize to your own needs. Here's the list of the CSS files:
Third-Party Vendor
01. bootstrap.min.css
02. font-awesome.min.css
---
Used Files
01. vendor.bundle.css
02. style.css
---
Pre-Built color preset
01. theme.css
02. theme-blue.css
03. theme-mint.css
04. theme-orange.css
05. theme-royal.css
06. theme-ruby.css
/*!
Template : XIOM
Author : Softnio
Version : 1.0.0
*/
/**
* Table of Contents
* 01 - Fonts
* 02 - Reset
* 03 - Common
* 04 - Utility
* 05 - Header
* 06 - Button
* 07 - Elements
*/
/*! 01 - Fonts !*/
@font-face {
font-family: 'Poppins';
src: url("../fonts/Poppins-Bold.eot");
src: local("Poppins Bold"), local("Poppins-Bold"), url("../fonts/Poppins-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Poppins-Bold.woff2") format("woff2"), url("../fonts/Poppins-Bold.woff") format("woff"), url("../fonts/Poppins-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal; }
@font-face {
font-family: 'Poppins';
src: url("../fonts/Poppins-SemiBold.eot");
src: local("Poppins SemiBold"), local("Poppins-SemiBold"), url("../fonts/Poppins-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Poppins-SemiBold.woff2") format("woff2"), url("../fonts/Poppins-SemiBold.woff") format("woff"), url("../fonts/Poppins-SemiBold.ttf") format("truetype");
font-weight: 600;
font-style: normal; }
@font-face {
font-family: 'Poppins';
src: url("../fonts/Poppins-Regular.eot");
src: local("Poppins Regular"), local("Poppins-Regular"), url("../fonts/Poppins-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Poppins-Regular.woff2") format("woff2"), url("../fonts/Poppins-Regular.woff") format("woff"), url("../fonts/Poppins-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'Hind Madurai';
src: url("../fonts/HindMadurai-SemiBold.eot");
src: local("Hind Madurai SemiBold"), local("HindMadurai-SemiBold"), url("../fonts/HindMadurai-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/HindMadurai-SemiBold.woff2") format("woff2"), url("../fonts/HindMadurai-SemiBold.woff") format("woff"), url("../fonts/HindMadurai-SemiBold.ttf") format("truetype");
font-weight: 600;
font-style: normal; }
@font-face {
font-family: 'Hind Madurai';
src: url("../fonts/HindMadurai-Bold.eot");
src: local("Hind Madurai Bold"), local("HindMadurai-Bold"), url("../fonts/HindMadurai-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/HindMadurai-Bold.woff2") format("woff2"), url("../fonts/HindMadurai-Bold.woff") format("woff"), url("../fonts/HindMadurai-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal; }
/*! 02 - Reset !*/
body {
font-family: 'Poppins';
font-size: 14px;
line-height: 1.875;
font-weight: normal;
color: #6f7c8a;
background-color: #F8FBFF;
position: relative;
min-width: 320px; }
@media all and (min-width: 576px) {
body {
font-size: 15px; } }
@media all and (min-width: 1400px) {
body {
font-size: 16px; } }
html, body {
overflow-x: hidden; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
line-height: 1.33;
font-weight: 600; }
h1, .h1 {
font-size: 2.93em; }
h2, .h2 {
font-size: 2.3em; }
h3, .h3 {
font-size: 1.87em; }
h4, .h4 {
font-size: 1.6em; }
h5, .h5 {
font-size: 1.33em; }
h6, .h6 {
font-size: 1.07em; }
.lead {
font-size: 1.1em;
line-height: 1.8;
font-weight: normal; }
/*! 03 - Common css !*/
.aster {
font-family: 'Lato'; }
.aster h1, .aster h2, .aster h3, .aster h4, .aster h5, .aster h6 {
font-family: 'Poppins';
color: #3d486a; }
.aster blockquote {
color: #6f7c8a; }
.hosta {
background-color: #fff; }
.hosta h1, .hosta h2, .hosta h3, .hosta h4, .hosta h5, .hosta h6, .hosta span, .hosta blockquote {
font-family: 'Hind Madurai';
color: #4a5b7a; }
.hosta p {
font-weight: 300; }
.hosta .lead {
font-weight: normal; }
/*! 04 - Utility !*/
.section-pad {
padding-top: 50px;
padding-bottom: 50px; }
.section-pad-xs {
padding-top: 50px;
padding-bottom: 50px; }
.section-pad-sm {
padding-top: 50px;
padding-bottom: 50px; }
.section-pad-md {
padding-top: 50px;
padding-bottom: 50px; }
.section-pad-lg {
padding-top: 60px;
padding-bottom: 60px; }
.section-pad-xl {
padding-top: 70px;
padding-bottom: 70px; }
.section-pad.nopd {
padding-top: 0;
padding-bottom: 0; }
.section-pad.nopb {
padding-bottom: 0; }
.section-pad.nopt {
padding-top: 0; }
/*! 05 - Header !*/
.navbar-brand {
transition: .6s;
padding: 0;
height: auto;
transition: all .5s linear; }
.navbar-brand img {
max-height: 100%; }
/*! 06 - Button !*/
.btn-menu {
display: inline-block;
border: none;
padding: 2px 30px 2px 30px;
border-radius: 30px;
font-family: 'Poppins';
font-weight: 600;
font-size: .875em;
line-height: 2.5;
background-color: #C8CFE7;
color: #3d486a; }
.btn-menu:hover {
background-color: #FF5E8D; }
.btn-menu-2 {
border: 2px solid #fff;
background-color: transparent;
color: #fff; }
.btn-menu-2:hover {
background-color: transparent;
border: 2px solid #FF5E8D; }
/*! 07 - Elements !*/
.why-this-content {
padding: 5px 0;
text-align: center; }
.why-this-content h2 {
font-weight: bold;
font-size: 1em;
line-height: 2; }
@media all and (min-width: 480px) {
.why-this-content {
padding: 10px 0; }
.why-this-content h2 {
font-size: 1.125em; } }
@media all and (min-width: 768px) {
.why-this-content {
padding: 20px 0;
text-align: left; } }
@media all and (min-width: 992px) {
.why-this-content {
padding: 0; } }
.why-box {
padding: 10px 8px 10px 8px;
background-color: #FFFFFF;
box-shadow: 0 0 90px rgba(14, 0, 137, 0.06);
max-width: 450px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px; }
.why-box .why-img {
width: 90px;
height: auto;
padding-bottom: 10px;
margin: 0 auto; }
.why-box h2 {
font-size: 1.03em;
line-height: 1.8;
font-weight: 600; }
.why-box-sm {
box-shadow: none;
position: relative;
transition: 0.3s; }
.why-box-sm .why-img {
padding-bottom: 20px; }
.why-box-sm:hover {
box-shadow: 0 0 90px rgba(14, 0, 137, 0.06);
z-index: 4;
transform: scale(1.01);
position: relative;
border: none;
background: #fff; }
/** END */
All javascript are located in the "js" folder of the template
Third-Party Vendor
01. bootstrap.min.js
02. form.plugins.js
03. googleMap.js
04. jquery.min.js
05. jquery.validate.js
---
Used Files
01. jquery.bundle.js
02. script.js
All javascript code are located in script.js file
(function($){
'use strict';
var $win = $(window), $doc = $(document), $body_m = $('body'), $navbar = $('.navbar');
// Get Window Width
function winwidth () {
return $win.width();
}
var wwCurrent = winwidth();
$win.on('resize', function () {
wwCurrent = winwidth();
});
// Sticky
var $is_sticky = $('.is-sticky');
if ($is_sticky.length > 0 ) {
var $navm = $('#mainnav').offset();
$win.scroll(function(){
var $scroll = $win.scrollTop();
if ($win.width() > 991) {
if($scroll > $navm.top ){
if(!$is_sticky.hasClass('has-fixed')) {$is_sticky.addClass('has-fixed');}
} else {
if($is_sticky.hasClass('has-fixed')) {$is_sticky.removeClass('has-fixed');}
}
} else {
if($is_sticky.hasClass('has-fixed')) {$is_sticky.removeClass('has-fixed');}
}
});
}
toHash = toHash.length ? toHash : toHashN;
if (toHash.length) {
$('html, body').animate({
scrollTop: (toHash.offset().top - nbar)
}, 1000, "easeInOutExpo");
return false;
}
}
});
// Active page menu when click
var CurURL = window.location.href, urlSplit = CurURL.split("#");
var $nav_link = $(".nav li a");
if ($nav_link.length > 0) {
$nav_link.each(function() {
if (CurURL === (this.href) && (urlSplit[1]!=="")) {
$(this).closest("li").addClass("active").parent().closest("li").addClass("active");
}
});
}
var $dropdown_menu = $('.dropdown'), $dropdown_toggle = $('.dropdown-toggle');
if ($dropdown_menu.length > 0 ) {
$dropdown_menu.on("mouseover",function(){
if ($win.width() > 991) {
$(this).children('.dropdown-menu').stop().fadeIn(400);
$(this).addClass('open');
}
});
$dropdown_menu.on("mouseleave",function(){
if ($win.width() > 991) {
$(this).children('.dropdown-menu').stop().fadeOut(400);
$(this).removeClass('open');
}
});
$dropdown_toggle.on("click",function(){
if ($win.width() < 991) {
$(this).parent().children('.dropdown-menu').fadeToggle(400);
$(this).parent().toggleClass('open');
return false;
}
});
}
// remove ani
var $navtoggler = $('.navbar-toggler'), $trannav =$('.is-transparent');
if ($navtoggler.length > 0) {
$navtoggler.on("click",function(){
$('.remove-animation').removeClass('animated');
if (!$trannav.hasClass('active')) {
$trannav.addClass('active');
}else{
$trannav.removeClass('active');
}
});
}
// Nav collapse
$('.menu-link').on("click",function() {
$('.navbar-collapse').collapse('hide');
$trannav.removeClass('active');
});
$(document).on('mouseup', function(e){
if (!$trannav.is(e.target) && $trannav.has(e.target).length===0) {
$('.navbar-collapse').collapse('hide');
$trannav.removeClass('active');
}
});
$(".up-icon").click(function(){
$("html").animate({'scrollTop' : 0},2000)
})
$('.pages-icon,.close-icon').on("click", function() {
$('.pages').toggleClass('active');
$('html').toggleClass('scrollbar-hidden');
});
$('.color-icon').on("click", function() {
$('.color-content').slideToggle('slow');
});
var $color_trigger = $('.color-trigger');
if ($color_trigger.length > 0 ) {
$color_trigger.on("click",function() {
var $self = $(this);
var $color_value = $self.attr("title");
$("#layoutstyle").attr("href", "assets/css/" + $color_value + ".css");
return false;
});
}
})(jQuery);
First open the php file located into form folder. Files are 'contact.php', 'subscribe.php'. On each file you will saw bellow code. Just update your sitename, your email and name. If you want to add multiple email then just duplicate the line '$emailTO[] = array...' and add another email
// Enter Your Sitename $sitename = 'your site'; // Enter your email addresses: @required $emailTO[] = array( 'email' => 'your mail', 'name' => 'your name' );
If you want to add BCC / CC email address then just enable below line and update same way as email too.
//$emailBCC[] = array( 'email' => 'email@yoursite.com', 'name' => 'Your Name' ); //$emailCC[] = array( 'email' => 'email@yoursite.com', 'name' => 'Your Name' );
In this template have 6 defferent prebuilt stylesheet which is helps you to use different color on your site. So you just need to update stylesheet link from each html head section.
Example as bellow.
<link rel="stylesheet" type="text/css" href="css/theme.css"> to <link rel="stylesheet" type="text/css" href="css/theme-blue.css">
GMaps :-https://hpneo.github.io/gmaps/
jQuery Form :- http://malsup.com/jquery/form/
jQuery Validation :- http://jqueryvalidation.org/
PHPMailer :- https://github.com/PHPMailer/PHPMailer/
Pexel :- https://www.pexels.com/
Unsplash :- https://unsplash.com/
Pixabay :- https://pixabay.com/
Freepik :- https://www.freepik.com//
DepositPhotos :- https://depositphotos.com/
Poppins :- Poppins
Hind Madurai :- Hind Madurai
Lato :- Lato