AiMug - Responsive HTML 5
AiMug Responsive HTML 5 Template.
In download folder you will find Two folders:
● Documentation (Documentation for main template)
● AiMug (Main Template)
Remember, when you want to use the shortCode/element in any pages you need to
adjust the section spacing by giving margin or padding. Don't get panic if you messed
up anything when you edit the template. We are always available to support our
customer.
01Installation
Follow the steps below to setup your site template:
1. Unzip the downloaded package and open the Template folder to find
all the template files. You wil get AiMug folder in there. You need to
upload this folder to your hosting web server using FTP or cPanel in
order to use it on your website.
2. Below is the folder structure you will see in your website root
directory:
○ AiMug/css - Stylesheet files
○ AiMug/css/09-icomoon.css - Icon/fonts files
○ AiMug/images - Image files
○ AiMug/js - JS files
3. You need to upload all or specific HTML files as per your need.
4. And now you are ready to go to generate your website with this
awesome template.
02HTML Structure
We are used Bootstrap Latest Version v5.1.3 framework in this template.
The general template structure is the same throughout the template. Here is the general
structure.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible"
content="ie=edge">
<title>AiMug - Responsive HTML 5 Template</title>
<meta name="description" content="">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon"
href="assets/img/favicon.png">
<!-- Place favicon.ico in the root directory -->
<!-- CSS here -->
<link rel="stylesheet" href="assets/css/.....">
<link rel="stylesheet" href="assets/css/.....">
<link rel="stylesheet" href="assets/css/....">
<link rel="stylesheet" href="assets/css/...">
</head>
<body>
<!-- header-area -->
<header id="home">
</header>
<!-- header-area-end -->
<!-- main-area -->
<main class="main-area fix">
<!-- All Section Here -->
</main>
<!-- main-area-end -->
<!-- Footer-area -->
<footer class="footer-area">
</footer>
<!-- Footer-area-end -->
<!-- JS here -->
<script src="assets/js/vendor/....."></script>
<script src="assets/js/...."></script>
<script src="assets/js/..."></script>
</body>
</html>
03All Pages
Introduce AiMug All Pages
● index.html is ====> Home One
● index2.html is ====> Home Two
● about.html is ====> About Page
● services.html is ====> Services Page
● project.html is ====> Portfolio Page
● project-details.html is ====> Portfolio Details Page
● team.html is ====> Team Page
● team-details.html is ====> Team Details Page
● blog.html is ====> Blog Post
● blog-details.html is ====> Blog Details Page
● contact.html is ====> Contact Us Page
04Favicon Settings
Favicon Will be found in <head> section.
<link rel="shortcut icon" type="image/x-icon"
href="assets/img/favicon.png">
05Logo Settings
The Logo will be found in the <nav class="navbar"> tag.
<div class="logo"><a href="index.html"><img
src="img/logo/logo.png" alt="logo"></a></div>
You can replace any .jpg .png .svg logo. And set the width according to your logo
size.
06Fonts Settings
In AiMug we use Sora & Inter font.
You can change both fonts form style.css Top:
<link
href="https://fonts.googleapis.com/css2?family=Sora:wght@300;400
;500;600;700;800&display=swap" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;20
0;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
07Activeted PHP Contact Form
You can edit your form simply and quickly. Open mail.php from AiMug folder and add
your email into $recipient field
<?php
// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the form fields and remove MORALspace.
$name = strip_tags(trim($_POST["name"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$message = trim($_POST["message"]);
// Check that data was sent to the mailer.
if ( empty($name) OR empty($message) OR !filter_var($email,
FILTER_VALIDATE_EMAIL)) {
// Set a 400 (bad request) response code and exit.
http_response_code(400);
echo "Please complete the form and try again.";
exit;
// Set the recipient email address.
// FIXME: Update this to your desired email address.
$recipient = "[email protected]";
?>
08CSS Structure
The style.css file contains all of the specific stylings for the page. The file is
separated into sections using:
● bootstrap.min.css
This file includes core bootstrap styles
Source
● font-awesome.css
This file contains styles about Fontawesome icon library
Source
Example
<i class="fab fa-facebook-square"></i>
● magnific-popup.css
This file contains styles about Popup Style
Source
● animate.min.css
animate.css is a bunch of cool, fun, and cross-browser animations for
you to use in projects. Great for emphasis, home pages, sliders, and
general just-add-water-awesomeness.
Source
Example
<div class="wow slideInLeft"> ... </div>
● slick.css
This file contains styles about slick carousel plugin
Source
● style.css
All styles about template
09JavaScripts
● jQuery 3.6.0
jQuery is a fast, small, and feature-rich JavaScript library.
Source
● bootstrap.min.js
Core bootstrap js file
Source
● gsap.js
GSAP is a robust JavaScript toolset that turns developers into animation
superheroes. Build high-performance animations that work in every major
browser.
Source
● slick.min.js
jQuery carousel plugin from Slick
Source
● wow.js
A lightweight script to animate scrolling.Reveal Animations When You
Scroll.
Source
● aos.js
A lightweight script to animate scrolling. Reveal Animations When You
Scroll.
Source
● min.js
This file contains all script about site.
