Documentation

  1. All Pages
  2. Documentation

Getting Started

Appril is a html5/css3 template based on Bootstrap 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>Appril - 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

Appril Template supporst all features of Bootstrap 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!

Slider / Carousel Setting

Go to the Owl Carousel website and check out how dose it work.

                image_not_found

                <div id="screenshot-carousel" class="screenshot-carousel owl-carousel owl-theme">
                  <div class="item"></div>
                  <div class="item"></div>
                  <div class="item"></div>
                  ...
                </div>

Testimonial Setting

Go to the Owl Carousel website and check out how dose it work.

                image_not_found

                <div id="testimonial-carousel" class="testimonial-carousel owl-carousel owl-theme">
                  <div class="item"></div>
                  <div class="item"></div>
                  <div class="item"></div>
                  ...
                </div>

Counter Up Setting

                image_not_found

                <div class="funfact-items-list">
                  <ul class="clearfix">
                    <li>
                      <span class="item-icon mb-15"><i class="flaticon-cloud-computing-1"></i></span>
                      <h2 class="count-text mb-15">299</h2>
                      <h3 class="title-text mb-0">downloads</h3>
                    </li>
                    <li>
                      <span class="item-icon mb-15"><i class="flaticon-boy"></i></span>
                      <h2 class="count-text mb-15">232</h2>
                      <h3 class="title-text mb-0">Satisfied Clients</h3>
                    </li>
                    <li>
                      <span class="item-icon mb-15"><i class="flaticon-trophy"></i></span>
                      <h2 class="count-text mb-15">530</h2>
                      <h3 class="title-text mb-0">Rewarded Clients</h3>
                    </li>
                    <li>
                      <span class="item-icon mb-15"><i class="flaticon-award"></i></span>
                      <h2 class="count-text mb-15">321</h2>
                      <h3 class="title-text mb-0">Award Win</h3>
                    </li>
                    <li>
                      <span class="item-icon mb-15"><i class="flaticon-star"></i></span>
                      <h2 class="count-text mb-15">786</h2>
                      <h3 class="title-text mb-0">Total Ratings</h3>
                    </li>
                  </ul>
                </div>

Team Setting

                image_not_found

                <div class="team-member text-center">
                  <div class="hero-image">
                    <img src="assets/images/team/img-1.png" alt="image_not_found">
                  </div>
                  <h3 class="hero-name mb-0">Ahsan Rana</h3>
                  <span class="hero-title mb-30">Web Devoloper</span>
                  <div class="hero-social-links ul-li-center clearfix">
                    <ul class="clearfix">
                      <li><a href="#!" class="bg-facebook"><i class="fab fa-facebook-f"></i></a></li>
                      <li><a href="#!" class="bg-twitter"><i class="fab fa-twitter"></i></a></li>
                      <li><a href="#!" class="bg-linkedin"><i class="fab fa-linkedin-in"></i></a></li>
                    </ul>
                  </div>
                </div>

Pricing Table Settings

                image_not_found

                <div class="pricing-plan text-center">
                  <div class="header-content">
                    <span class="item-icon">
                      <img src="assets/images/icons/paper-plane.png" alt="image_not_found">
                    </span>
                    <h3 class="plan-title">free</h3>
                    <span class="plan-price"><strong>$00/</strong> Per Month</span>
                  </div>
                  <div class="body-content ul-li-block">
                    <ul class="clearfix">
                      <li>100GB Disk Space</li>
                      <li>2 Subdomains</li>
                      <li>5 Email Accounts</li>
                      <li>Webmail Support</li>
                    </ul>
                  </div>
                  <div class="footer-content">
                    <a href="#!" class="custom-btn join-btn">join now</a>
                  </div>
                </div>

Files & Credits