This documentation will teach you how to set up and use our template. If you have any questions that realted to template, please feel free to send your question on Author.
The template root folder contains the assets folder and all of the HTML pages:
<!DOCTYPE html>
<html class="no-js" lang="">
<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>Vah | HTML5 Multi-purpose Responsive Template</title>
<meta name="generator" content="Responsive, Mobile-Friendly HTML5 Website Template" />
<meta name="author" content="Techmate Softtech LLP">
<meta name="keywords" content="html5 template, buiness template, responsive templates, website template">
<meta name="description" content="Vah is the latest HTML5 template useful for any business or digital agency.">
<!-- Modernizr script -->
<script src="assets/js/modernizr-custom.js"></script>
<!-- Icon fonts: Simple line icons -->
<link rel="stylesheet" href="assets/icons/simple-line-icons/css/simple-line-icons.css" />
<!-- Icon fonts: Material design icons -->
<link rel="stylesheet" href="assets/icons/material-design-icons/css/materialdesignicons.min.css">
<!-- Default css -->
<link rel="stylesheet" type="text/css" href="assets/css/vah.css">
<!-- Animate css -->
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<!-- Theme css -->
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body class="vah-body">
<!-- Scroll top btn -->
<a href="#" class="scroll-to-top vah-smooth-link" data-tooltip="Go to top!" data-tooltip-placement="left">
<i class="mdi mdi-chevron-up"></i>
</a>
<!-- Pre Loader -->
<div class="pre-loader">
<div class="pre-loader-bg">
<h2>Loading
<div class="vah-loader-dot">.</div>
<div class="vah-loader-dot vah-delay-03">.</div>
<div class="vah-loader-dot vah-delay-06">.</div>
</h2>
</div>
</div>
<!-- End Pre Loader -->
<!-- Vah Template Content Start -->
<div class="vah-theme">
<!-- Content Part -->
<div class="vah-content"></div>
</div>
<footer class="footer"></footer>
<!-- jQuery CDN -->
<script src="assets/js/jquery.min.js" crossorigin="anonymous"></script>
<!-- Main Template JS -->
<script src="assets/js/main.js"></script>
</body>
</html>
We use custom grid structure of vah. Vah template follows standard 12 column grid structure. More grid elements can be found on template bundle (elements.html file).
<button class="btn btn-invert">Value</button>
<input type="text" class="input" />
<div class="alert alert-primary"><p>Message</p></div>- Closable alert messages
<div class="alert alert-primary" data-alert-close><p>Message</p></div>
<div class="vah-accordian" data-accordian-collapse="single">- For accordian type 2(add attribute data-accordian-collapse="all")
<div class="vah-accordian" data-accordian-collapse="all">- Sample block
<div class="vah-accordian" data-accordian-collapse="single">
<div class="vah-accordian-row">
<h3 class="vah-accordian-title" data-accordian="row1">Accordian Title</h3>
<div class="vah-accordian-content" id="row1">
Description
</div>
</div>
.
.
.
</div>
<div class="vah-tabs">
<ul class="vah-tab-list">
<li class="tab-active" data-tab="content1">Tab 1</li>
<li data-tab="content2">Tab 2</li>
.
.
</ul>
<div class="vah-tab-body">
<div class="vah-tab-content tab-content-active" id="content1">Content 1
</div>
<div class="vah-tab-content" id="content2">Content 2
</div>
.
.
</div>
</div>
<div class="vah-progress vah-progress-active">
<div class="vah-progress-group">
<label>HTML</label>
<div class="vah-progress-bar-bg">
<div class="vah-progress-bars" data-range-value="80" data-range-delay="0" style="width: 80%;">80%</div>
</div>
</div>
<div class="clearfix"></div><br>
<div class="vah-progress-group">
.
.
.
</div>
</div>
Here is a simple guide on editing HTML elements suitable to your need.
It is very easy to change betweeen different header and body layouts. You just need to add a class to <nav> and <body> tags:
<body class="vah-body">
<body class="vah-body vah-box">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/css/style-dark.css">
$~: stylus ../assets/stylus/style-default.styl -o ./assets/css/style-skin-name.css- Above command will generate the css file named style-skin-name.css inside css folder. - In header section, you can replace the default css(style.css) file with style-skin-name.css file. You can use the following code to change the skin in header area:
<link rel="stylesheet" type="text/css" href="assets/css/style-skin-name.css">
<nav class="vah-navbar">
<nav class="vah-navbar vah-navbar-stick">
<nav class="vah-navbar vah-navbar-large">
<nav class="vah-navbar navbar-transparent vah-navbar-fixed">
<nav class="vah-navbar vah-navbar-stick vah-navbar-large">
<nav class="vah-navbar vah-navbar-large navbar-transparent">
<li class="mega-menu mega-5-column">...</li>1. Use class "mega-1-column" for one column megamenu
<ul class="menu-items">
<li><a href="#">...</a></li>
<!-- Mega menu(5 column) -->
<li class="mega-menu mega-5-column">
<a>Mega Menu <i class="mdi mdi-chevron-down"></i></a>
<ul class="submenu mob-submenu">
<li>
<ul>
<li><a href="#">...</a></li>
.
.
.
</ul>
</li>
.
.
.
</ul>
</li>
</ul>
<ul class="submenu">
<li>
<ul>
<li class="menu-dropdown"><a>... <i class="mdi mdi-chevron-right"></i></a>
<ul class="menu-dropdown-list right">
<li><a href="#">...</a></li>
.
.
.
</ul>
</li>
</ul>
</li>
</ul>
<ul class="menu-items menu-arrow submenu-scale"></ul>
<ul class="menu-items menu-undeline submenu-up"></ul>
<div class="vah-slider" id="vah-slider">
<div class="vah-slider-slides">
<div class="vah-slider-slide" data-vah-slider-image="assets/images/slider/1.jpg">
<div class="vah-slider-content">
<div class="vah-slider-inner">
<div class="vah-slider-inner-content">
<h1 class="vah-slider-title">Welcome to the <span><strong>"Vah"</strong></span> Template!</h1>
<div class="clearfix"></div>
<a href="about.html" class="vah-gs-btn" data-wow-delay='.5s'><i class="mdi mdi-link"></i> Learn More</a>
</div>
</div>
</div>
</div>
</div>
</div>
Kindly look for the custom element named "data-vah-slider-image". Change the value of path with your actual image path:
<div class="vah-slider-slide" data-vah-slider-image="assets/images/slider-1.jpg"></div>
You can use the Animation classes for changing the effects.
<script>
$("#vah-slider").vahSlider({
in: 'animated fadeIn',
out: 'animated fadeOut'
});
</script>
Vah template provides you control on scroll animations. You can customize your template by adding new animation style classes. The main element having class name vah-animated can be followed with following data attributes with possible values.
<div class="vah-box vah-animated" data-animated-class="fadeInUp" data-animated-delay=".2" data-animated-duration=".5">
To edit the countdown on coming soon page, please find the following block markup and script:
<div class="clock" style="margin:2em;display: inline-block;"></div>
<script type="text/javascript">
var clock;
var month = 2; // Month index starts from 0, so 2 would be March
var date = 31;
$(document).ready(function() {
// Grab the current date
var currentDate = new Date();
// Set some date in the future.
var futureDate = new Date(currentDate.getFullYear() + 1, month, date);
// Calculate the difference in seconds between the future and current date
var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
// Instantiate a coutdown FlipClock
clock = $('.clock').FlipClock(diff, {
clockFace: 'DailyCounter',
countdown: true
});
});
</script>
More on Countdown timer can be found here.
Vah template provides your readymade Email sending contact page script. You can customize your contact us page POST action and Email address.
<form action="post-contact.php" method="POST" id="contact_form"> . // FORM Elements . <form>
<?php
session_start(); // Session for storing the status message
$name = $_POST['name'];
$to = 'info@example.com'; // Set Email id where you want to receive Contact Form Emails
$from = $_POST['email'];
$subject = "Subject";
$message = $_POST['message'];
$headers = 'From: '.$from."\r\n" .
'Reply-To: webmaster@example.com' . "\r\n" . //Set to your webmaster Email Address
'X-Mailer: PHP/' . phpversion();;
$send_mail = mail($to, $subject, $message, $headers);
if( $send_mail ) {
$res['status'] = 'success';
$res['message'] = 'Message sent successfully.';
} else {
$res['status'] = 'fail';
$res['message'] = 'Error while sending the message.';
}
$_SESSION['res'] = $res;
header("Location: message.php");
?>
NOTE: Your hosting server should be capable of sending Emails.