Intruder - Responsive Multi-Purpose HTMl5 Template
Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!
Template Features:
- Multi Page Demos
- 36+ HTML Files
- 8 Multi Page demos
- 8 Home Variation demos
- Easy to customize
- HTML5 & CSS4
- Clean & Simple Design
- Fully Responsive Layout
- Crossbrowser Compatible with Edge, IE9+, Firefox, Safari, Opera, Chrome
- Font Awesome 400+ icons
- 7 Stroke 200+ icons
- FlatIcon 150+ icons
- Powered with Bootstrap
- Smooth animation
- Google Maps easy to setup via data attributes
- Ready contact form
- Well documented
- Created: September 25, 2018
- Last Update: January 17, 2023
- Version 3.0
- By: bdCoder
- Email: shakilahsan1988@gmail.com
Getting Started
Unzip the archive and find out the folder client-html. There are all the template files in this folder.
The file and folder structure is something like this:
- /css — folder with css files.
- /fonts — folder with icon fonts.
- /images — folder with image files.
Upload the template files to server with the help of one of the FTP-clients like FileZilla.
HEAD CSS Structure
These are the css files which are loaded into the template in Head Section.
Copyhtml<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Responsive stylesheet -->
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<!-- Favicon -->
<link href="images/favicon.png" rel="shortcut icon" type="image/png">
Javascript Structure
These are the JS files which are loaded into the template before the end of the HEAD and BODY Section.
Copyhtml<!-- Main JavaScript -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Optional JavaScript -->
<script src="js/bootstrap-dropdownhover.min.js"></script>
<script src="js/bootsnav.js"></script>
<script src="js/bootstrap-slider.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/retina.min.js"></script>
<script src="js/css3-animate-it.js"></script>
<script src="js/magnific-popup.min.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/gallery.js"></script>
<script src="js/player-min.js"></script>
<!-- Custom JavaScript -->
<script src="js/script.js"></script>
HTML Structure
The general template structure is the same throughout the template. Here is the general structure:
Copyhtml<section id="sectionID_if_Needed">
<div class="container">
<div class="row">
<!-- Section Title -->
<div class="section-title">
<div class="col-md-12">
... ... ...
</div>
</div>
<!-- Section Content -->
<div class="section-content">
<div class="col-md-12">
... ... ...
</div>
</div>
</div>
</div>
</section>
Divider
Divider Background Overlay Layer
Layer Overlay Utility Classes:
Copyprettyprint lang-css linenums
.over-layer-black {
position: relative;
}
.over-layer-black:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background-color: rgba(0, 0, 0, 0.9);
}
Preloader
There are two types of preloader we used
1. gif animated images
Gif Image preloader example:
Copyhtml<div class="preloader"></div>
Contact Form
The Contact form html code example is as follows :
Copyhtml<form id="ajax-contact" method="post" action="php/contact.php">
<div class="form-row">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" name="name" id="name" class="form-control bg-transparent" placeholder="First Name" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="name" id="name2" class="form-control bg-transparent" placeholder="Last Name" required>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="email" name="email" id="email" class="form-control bg-transparent" placeholder="Your Email" required>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="text" name="subject" class="form-control bg-transparent" placeholder="Subject" id="subject" required>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<div class="contact-textarea">
<textarea class="form-control bg-transparent" rows="6" placeholder="Wright Message" id="message" name="message" required></textarea>
<button class="btn btn-theme mt-4" type="submit" value="Submit Form">GET AN APPOINTMENT</button>
</div>
</div>
</div>
<div id="form-messages"></div>
</div>
</div>
</form>
Fonts used
By default, the template loads Poiret One and Noto font from Google Web Font Services, you can change the font with the one that suits you best.
You will find the font code in the "style.css" file in the "css" folder:
Copycss@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,500i,700');
Resource
Google Fonts
Font Icon
Used Images
Support
Again, thank you for purchasing this Template!
If you have any questions, please use our profile contact form on Envato ( https://themeforest.net/user/tributetheme ).
We aim to answer all questions within 24 hours . In some cases the waiting time can be extended to 48 hours.
Email: shafiulislam4241@gmail.com