KONSULTAN HTML Documentation by Themes Awesome v1.0
KONSULTAN - Consulting Business HTML Template
Created: 8 march 2021
By: Themes Awesome
Support: Ask support access HERE
Thank you for purchasing KONSULTAN HTML. If you have any questions that aren't covered in the documentation, then please send me a PM and I'll be happy to help. Thanks again!
Table of Contents
KONSULTAN HTML - top
KONSULTAN
KONSULTAN Logo is
Tips
Use Firebug or Chrome Developer Tools.
Do not start from scratch, use an existing page from the demo and modify it to learn how it works.
Getting an error message? Someone might have seen it too, try a google search for a quick fix.
Explore the live demo for pages ideas and sample code.
Files Structure
- css (Template CSS ) - fonts (All Fonts & Icons) - webfonts (Fontawesome webfonts) - images (All Images) - js (jQuery file and all plugin js file)
Html Structure
The default grid system utilizes 12 columns, making for a 1080px wide depending on your viewport. Below 768px viewports, the columns become fluid and stack vertically.
Create a .row and add the appropriate number of .column-*.
HTML Markup
<div class="container">
<div class="row">
<div class="column column-1">
Level 1 column
<div class="column column-2">Level 2</div>
<div class="column column-2>Level 2</div>
</div>
</div>
</div>
If you need more information, please visit this site: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem
Head Script (Default)
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title<Home - Konsultan</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/responsive.css" />
<link rel="stylesheet" href="css/font.css" />
<link rel="stylesheet" href="css/swiper-bundle.min.css" />
<link rel="stylesheet" href="css/aos.css" />
<link rel="stylesheet" href="css/lightgallery.min.css" />
<link rel="stylesheet" href="css/owl.carousel.min.css" />
<link rel="stylesheet" href="css/owl.theme.default.css" />
<link rel="stylesheet" href="css/all.min.css" />
<link rel="shortcut icon" href="images/fav-icon.png" type="image/x-icon" />
</head>
Header Markup
<!---HEADER START ==================================-->
<header id="header" class="main-header">
<nav class="main-nav">
<div class="container">
<div class="left-nav">
<div class="nav-brand">
<a href="index.html">
<img src="assets/images/logo.png" alt="navbar-logo" />
</a>
</div>
<input id="main-menu-state" type="checkbox" />
<label class="main-menu-btn" for="main-menu-state">
<span class="main-menu-btn-icon"></span> Toggle main menu visibility
</label>
<ul id="main-menu">
<li class="menu-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="menu-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="menu-item">
<a class="nav-link" href="service.html">Services</a>
</li>
<li class="menu-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="menu-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
<div class="right-nav">
<div class="nav-menu">
<div class="contact">
<i class="telp-icon fas fa-phone-alt" style="line-height: 2"></i>
<div class="contact-text">
<span class="text-white small-text">Call Us Today</span>
<span class="text-white telp-text"><b>+62 828 111 96 75</b></span>
</div>
</div>
<div class="contact-button">
<a href="appointment.html" class="button style-1">Appointment</a>
</div>
</div>
</div>
</div>
</nav>
<!-- end navbar -->
</header>
Template
KONSULTAN have 8 template
- Home
- About
- Service
- Single Service
- Blog
- Single Post
- Contact
- Appointment
Footer Script Markup
<!---FOOTER START ==================================-->
<footer id="footer" class="footer clearfix">
<div class="footer-widget">
<div class="container">
<div class="row clearfix">
<div class="column column-4 footer-widget-component">
<a href="index.html">
<img class="footer-logo res-img" src="assets/images/logo.png" alt="footer-logo"/>
</a>
<p class="footer-text footer-desc mt-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius
doloremque pariatur magnam, a deleniti voluptatem minima quas
qui hic.
</p>
<a href="blog.html" class="button style-7">Get Location</a>
</div>
<div class="column column-4 footer-widget-component">
<p class="footer-title text-white">
get in touch
</p>
<hr class="left-hr" />
<p class="footer-text">
<b>+62 828 111 96 75</b>
</p>
<p class="footer-text">
Jl. Maleer Indah II, Maleer, Batununggal, Kota Bandung, Jawa
Barat 40274.
</p>
<p class="footer-text footer-email">consultant@contact.com</p>
<p class="footer-text footer-email">info@consultant.com</p>
</div>
<div class="column column-4 footer-widget-component">
<p class="footer-title text-white">latest news</p>
<hr class="left-hr" />
<div class="footer-news-wrapper clear-fix">
<div class="row footer-news-item mt-2">
<div class="img-zoom-wrapper">
<a href="singlePost.html">
<img class="res-img footer-news-img"src="assets/images/blog1-85x85.jpg"
alt="footer-news-img"/>
</a>
</div>
<div class="footer-news-text">
<a class="footer-news-title" href="singlepost.html">
Suspend Ullam
</a>
<p class="footer-news-date footer-text">
September 25, 2018
</p>
</div>
</div>
<div class="row footer-news-item mt-2">
<div class="img-zoom-wrapper">
<a href="index.html">
<img class="res-img footer-news-img" src="assets/images/blog2-1-85x85.jpg"
alt="footer-news-img"/>
</a>
</div>
<div class="footer-news-text">
<a class="footer-news-title" href="singlepost.html">
Proin In Orci Quis Elit
</a>
<p class="footer-news-date footer-text">
September 25, 2018
</p>
</div>
</div>
</div>
</div>
<div class="column column-4 footer-widget-component">
<p class="footer-title text-white">
Follow Us
</p>
<hr class="left-hr" />
<p class="footer-text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Dolorem pariatur, suscipit adipisci reiciendis temporibus
quidem minus quaerat
</p>
<div class="footer-icon-wrapper">
<a href="index.html" target="_blank">
<div class="footer-icon">
<i class="fab fa-twitter"></i>
</div>
</a>
<a href="index.html" target="_blank">
<div class="footer-icon">
<i class="fab fa-facebook-f"></i>
</div>
</a>
<a href="index.html" target="_blank">
<div class="footer-icon">
<i class="fab fa-google-plus-g"></i>
</div<
</a>
<a href="index.html" target="_blank">
<div class="footer-icon">
<i class="fab fa-linkedin-in"></i>
</div>
</a>
<a href="index.html" target="_blank">
<div class="footer-icon">
<i class="fab fa-instagram"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom clear-fix">
<div class="container">
<div class="row clearfix">
<div class="footer-copyright column column-2 text-gray">
© Copyright <span id="year"></span>,Built by <a
href="https://themesawesome.com/"
class="text-green">Themes Awesome</a>
</div>
<div class="column column-2 footer-nav">
<div class="footer-menu-wrapper">
<div class="footer-menu">
<a class="footer-link" href="index.html">Home</a>
</div>
<div class="footer-menu">
<a class="footer-link" href="service.html">Services</a>
</div>
<div class="footer-menu">
<a class="footer-link" href="about.html">About</a>
</div>
<div class="footer-menu">
<a class="footer-link" href="blog.html">Blog</a>
</div>
<div class="footer-menu">
<a class="footer-link" href="contact.html">Contact</a>
</div>
<div class="footer-menu">
<a class="footer-link" href="Appointment.html">
Appointment
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--END FOOTER-->
CSS Structure
The organization of the CSS is one of our priorities.
These are the CSS file we're using in the template:
- aos.css - (Animated on scrooling)
- font.css - (font styles)
- all.min.css - (fontawesome styles)
- lightgallery.min.css - (Lightbox gallery styles)
- owl.carousel.min.css - (owl carousel style)
- owl.theme.default.css - (defalut style for owl carousel)
- responsive.css (for media query)
- style.css (Generic styles, resets & normalization)
- swiper.min.css (swiper style)
Javascript
jQuery - is a Javascript library that greatly reduces the amount of code that you must write.
For more information, please visit http://www.jquery.com/
The initialization of the elements, libs and features is made by the file main.js, in the JS folder.
Take a look at the "build" function to see what it does.
Customization & Styles
Fonts
To change the font, please take a look in the head part of the website and you will find this tag:
We use Poppins, Roboto, Elusive-Icons font family in KONSULTAN. You can check the font at root > assets > css > fonts
To change the font, install it manually with convert the download zipped font to transfonter.org
Responsive
The template supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions.
Here's what's included:
Label: Large display
Layout width: 1200px and up
Column width: 70px
Gutter width: 30px
Label: Default
Layout width: 980px and up
Column width: 60px
Gutter width: 20px
Label: Portrait tablets
Layout width: 768px and above
Column width: 42px
Gutter width: 20px
Label: Phones to tablets
Layout width: 767px and below
Column width: Fluid columns, no fixed widths
Label: Phones
Layout width: 480px and below
Column width: Fluid columns, no fixed widths
Source & Credits
The images included in preview are for demonstration purposes and should always be replaced with your own work.
- Resources Used:
Once again, thank you for purchasing this theme. Customer satisfaction is our #1 priority, which is why we always endeavour to provide the best service we can. We’re only an email away if you ever need us!
Themes Awesome Team