Getting Started
Appal is a html5 / css3 template based on Bootstrap 4 framework. It allows to built impressive, better & faster, mobile friendly websites.
HTML Structure
This is the base of each HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Appal - Html5 Template</title>
<link rel="shortcut icon" href="file location here/favorite-icon.png">
<link rel="stylesheet" type="text/css" href="file location here/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="file location here/fontawesome-all.css">
<link rel="stylesheet" type="text/css" href="file location here/style.css">
</head>
<body>
<header id="header-section" class="header-section clearfix">
...
</header>
<section id="-section" class="-section clearfix">
...
</section>
<footer id="footer-section" class="footer-section clearfix">
...
</footer>
<script src="file location here/jquery-3.3.1.min.js"></script>
<script src="file location here/popper.min.js"></script>
<script src="file location here/bootstrap.min.js"></script>
<script src="file location here/custom.js"></script>
</body>
</html>
Grid System
Appal Template supporst all features of Bootstrap 4 Grid System - go to Bootstrap pages and check how does it work.
Configuration
The template includes some configurable elements - here you will find informations how to use them!
Header Section (Menubar)
<header id="header-section" class="header-section clearfix">
...
</header>
Footer Section
<div id="footer-section" class="footer-section">
<div class="newsletter-section">...</div>
<div class="btns-group">...</div>
<div class="footer-content">...</div>
<div class="footer-bottom">...</div>
</div>
Breadcrumb Section
<div id="breadcrumb-section" class="breadcrumb-section">
<div class="container">
<div class="row justify-content-lg-start justify-content-md-center">
<div class="col-lg-5 col-md-8 col-sm-12">
<div class="breadcrumb-content">
...
</div>
</div>
</div>
</div>
</div>
Banner Section
<div id="banner-section" class="banner-section">
<div class="mobile-app-banner-1">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12">
<!-- show on mobile device - start -->
<div class="mobile-banner-image d-none">
<img src="image location here" alt="image_not_found">
</div>
<!-- show on mobile device - start -->
<div class="banner-content">
...
</div>
</div>
<div class="banner-image scene">
...
</div>
</div>
</div>
</div>
</div>
Counter Section
<div id="funfact-section" class="funfact-section">
<div class="container">
<div class="bg-image">
<div class="counter-items-list ul-li-center">
<ul>
<li>
<h4><span class="count-text">13</span>M+</h4>
<small class="counter-title">total download</small>
</li>
<li>
<h4><span class="count-text">07</span>M+</h4>
<small class="counter-title">active accounts</small>
</li>
<li>
<h4><span class="count-text">10</span>M+</h4>
<small class="counter-title">positive reviews</small>
</li>
</ul>
</div>
</div>
</div>
</div>
Team Section
<div id="team-section" class="team-section">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="team-member-bordered">
...
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="team-member-bordered">
...
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="team-member-bordered">
...
</div>
</div>
</div>
</div>
</div>
<div id="team-section" class="team-section">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="team-member-grid">
...
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="team-member-grid">
...
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="team-member-grid">
...
</div>
</div>
</div>
</div>
</div>
Slider & Carousel Setting
All Sliders & Carousel are made by Owl Carousel 2. Go to the Owl Carousel website and check out how dose it work.
<div id="mobileapp-main-carousel" class="mobileapp-main-carousel owl-carousel owl-theme">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
...
</div>
<div id="appstore-main-carousel" class="appstore-main-carousel owl-carousel owl-theme">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
...
</div>
Clients Carousel
<section id="client-section" class="client-section">
<div id="client-carousel" class="client-carousel owl-carousel owl-theme">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
...
</div>
</section>
Services Carousel
<section id="service-section" class="service-section">
<div id="service-carousel" class="service-carousel owl-carousel owl-theme">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
...
</div>
</section>
Testimonial Carousel
<section id="testimonial-section" class="testimonial-section">
<div id="testimonial-carousel" class="testimonial-carousel owl-carousel owl-theme">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
...
</div>
</section>
Blog Carousel
<section id="blog-section" class="blog-section">
<div id="blog-carousel" class="blog-carousel owl-carousel owl-theme">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
...
</div>
</section>
Google Map
You put your Google Map Latitude and Longitude. Style can Change in founction file
Files & Credits
CSS & JS Files
The template uses more CSS & JS files:
-
Bootstrap- https://getbootstrap.com/ -
Jquery- https://jquery.com/ -
Font Awesome- https://fontawesome.com/icons?from=io -
Unicons- https://iconscout.com/unicons?ref=producthunt -
Flaticon- https://www.flaticon.com/ -
Animate Css- https://daneden.github.io/animate.css/ -
Owl Carousel 2- https://owlcarousel2.github.io/OwlCarousel2/ -
Magnific Popup- https://dimsemenov.com/plugins/magnific-popup/ -
AOS- http://michalsnik.github.io/aos/ -
Parallax- http://matthew.wagerfield.com/parallax/ -
CountDown- https://hilios.github.io/jQuery.countdown/ -
Counter Up- https://github.com/bfintal/Counter-Up -
mCustomScroller- -
Google Map- http://gmap3.net