AKAD HTML Template Documentation

Created: 16/01/2065
By: Akhouad-me

Thank you for purchasing my 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!

Extract the zip file

After extract the main zip file, you'll see these folders and files:

HTML - Main theme folder
- assets
  - img - UI images folder
  - js - javascript files folder
  - css - css file folder
  - fonts - icon fonts
Documentation - help file

We provide 9 HTMLs:

index.html - Home page
about.html - Page about us
Services.html - Page services
blog-1.html - Page blog
single-post.html - Page single post
portfolio-1.html - Portfolio page
single-project.html - Page single project 1
single-project-2.html - Page single project 2
contact.html - Contact us page

General

Open a html file with editor, you'll find the code:

<!DOCTYPE html>
<html>
<head>
	...
</head>
<body class="animsition">
	<header class="main-header">
		...
	</header>
	...
	<section class="green-section" style="padding:50px 0">
		...
	</section>
	<footer class="main-footer">
		...
	</footer>
</body>
</html>

Header

The header's code looks like this :

<header class="main-header">
	<div class="container">
		<div class="logo">
			<a href="index.html"><img src="assets/img/logo.png" alt="logo"></a>
		</div>

		<div class="menu">
			<!-- desktop navbar -->
			<nav class="desktop-nav">
				<ul class="first-level">
					<li><a href="index.html" class="animsition-link">Home</a></li>
					<li><a href="about.html" class="animsition-link">about us</a></li>
					<li><a href="services.html" class="animsition-link">services</a></li>
					<li><a href="">portfolio</a>
						<ul class="second-level">
							<li><a href="portfolio-1.html" class="animsition-link">portfolio list</a></li>
							<li><a href="single-project.html" class="animsition-link">single project 1</a></li>
							<li><a href="single-project-2.html" class="animsition-link">single project 2</a></li>
						</ul>
					</li>
					<li><a href="">blog</a>
						<ul class="second-level">
							<li><a href="blog-1.html" class="animsition-link">posts list</a></li>
							<li><a href="single-post.html" class="animsition-link">single post</a></li>
						</ul>
					</li>
					<li><a href="contact.html" class="animsition-link">contact us</a></li>
				</ul>
			</nav>
			<!-- mobile navbar -->
			<nav class="mobile-nav"></nav>
			<div class="menu-icon">
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
			</div>
		</div>
	</div>
</header>

To change the logo, you should edit the link in src attribute in img tag.

And for the menu, the links are inside <nav class='desktop-menu'> tag

Footer

The footer's code is at the bottom of any HTML file, you can edit its menu &s; its social icons as you like.

<footer class="main-footer">
	<div class="container">
		<div class="col-md-8 col-sm-12">
			<div class="row">
				<nav class="footer-nav">
					<ul>
						<li><a href="index.html" class="animsition-link link">Home</a></li>
						<li><a href="about.html" class="animsition-link link">about us</a></li>
						<li><a href="services.html" class="animsition-link link">services</a></li>
						<li><a href="portfolio-1.html" class="animsition-link link">portfolio</a></li>
						<li><a href="blog-1.html" class="animsition-link link">blog</a></li>
						<li><a href="contact.html" class="animsition-link link">contact us</a></li>
					</ul>
				</nav>
			</div>
		</div>

		<div class="col-md-4 col-sm-12" style="text-align:right">
			<div class="row">
				<div class="uppercase gray-text">
					created by akhouad &copy;2016. all rights reserved.
				</div>
				<ul class="social-icons" style="margin-top:30px;float:right">
					<li><a href="#"><i class="icon ion-social-facebook"></i></a></li>
					<li><a href="#"><i class="icon ion-social-twitter"></i></a></li>
					<li><a href="#"><i class="icon ion-social-youtube"></i></a></li>
					<li><a href="#"><i class="icon ion-social-linkedin"></i></a></li>
					<li><a href="#"><i class="icon ion-social-pinterest"></i></a></li>
					<li><a href="#"><i class="icon ion-social-instagram"></i></a></li>
				</ul>
			</div>
		</div>
	</div>
</footer>

Each secion has margin top of 150px, if you want to edit this value, you can go to assets/css/style.css and look for section, then you can edit 150px value.

There are three types of sections

Green section : you can use it with <section class="green-section">
White section : you can use it with <section class="white-section">
Light gray section : you can use is with <section class="light-gray-section">

Blockquote

to use a stylish blockquote, use this element : <blockquote class="bq">

Links

Akad Template has a special style for links, when you put your mouse on the link, a bottom line appears.
To do so, use this class in "a" tags : <a class="link">

Lists

List 1

To use this list, use this tag :

<ul class="list-1">
	<li>...</li>
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ul>

List 2

To use this list, use this tag :

<ul class="list-2">
	<li>...</li>
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ul>

List 3 - Tags

If you want to show tags, use this code

<ul class="tags">
	<li>...</li>
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ul>

List 4 - social icons

if you want to show social icons, use this code

<ul class="social-icons">
	<li>...</li>
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ul>

Section's title

to show like this title

Use this code

<div class="section-title">
	<span>why choose us</span>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Buttons

There are two types of buttons in Akad Template, a green one & a white one.
To use the green one, use these two classes btn and green
To use the white one, use these two classes btn and white

ie : <a href="..." class="btn green">Click here</a>

Tab

If you want to show like these tabs, use this code :

<div class="tab">
	<nav>
		<a href="">Tab_title 1 </a>
		<a href="">Tab_title 2</a>
		<div class="bottom-line"></div>
	</nav>
	<div class="tab_single shown">
		...
	</div>
	<div class="tab_single">
		...
	</div>
</div>

Note :

"shown" class is to choose which tab to show first.

Akad Template use 5 CSS files.

animsition.min.css for the page transition.
Bootstrap.min.css for the pre made elements & columns...
flexslider.css for the slider.
ionicons.min.css for the icons used in template.
style.css is the main CSS file of AKAD, where you can find all elements' styles.

Akad Template use 5 CSS files.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited, every file is well documented.

Open the styles folder, you'll find all css files.

animsition.min.css for the page transition.
Bootstrap.min.css for the pre made elements & columns...
flexslider.css for the slider.
ionicons.min.css for the icons used in template.
style.css is the main CSS file of AKAD, where you can find all elements' styles.

This theme imports 7 Javascript files. All located in assets/js folder.

isotope.pkgd.min.js for portfolio filtering.
jquery-2.1.4.min.js version 2.1.4 of jQuery.
jquery.animsition.min.js for page transition.
jquery.flexslider.js for sliders.
jquery.social-buttons.min.js for sharing icons (in blog pages).
smoothScroll.js for a smooth scrolling.
main.js this is the main Javascript file of Akad Template.

If you have a more general question relating to the themes, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist.

To keep in touch with my latest templates make sure to check out my profile frequently.

Best regards,

Akhouad