Overview

Malat is a creative and fully responsive HTML/CSS template based on Bootstrap 4 framework, suitable for any creative people, business, agency, portfolio etc...

Installation

Follow the steps below to get started with your Site Template:

Open the html folder to find all the Templates Files.
You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
Make sure you upload the required files/folders listed below:
- html/assets/css - Extra Stylesheets Folder
- html/demo - Demo Images Folder
- html/assets/fonts - Fonts Folder
- html/assets/images - Images Folder
- html/include - Required PHP Functions Folder
- html/assets/js - Javacripts Folder
- html/assets/css/style.css - Main Stylesheet File
- html/index.html - Index File/Homepage
The other files can be used according to your preferences.
You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

Note: Add Your custom styles to assets/css/custom.css. This solution will help you in future updates.

HTML Structure

Malat follows a simple coding structure. here is the sample:


										<!DOCTYPE html>
										<html lang="en">
											<head>
											
												<!-- Your Stylesheets, Scripts & Title -->
												
											</head>
											<body>

												<div id="preloader" class="preloader preloader-dark">
												
													[...]
													
												</div>

												<div class="site-container">

													<!-- Mobile logo -->
													<a href="#" class="mobile-logo mobile-logo-light">
														[...]
													</a>

													<!-- Navigation toggle -->
													<button type="button" id="navigation-toggle" class="nav-toggle nav-toggle-light">
														[...]
													</button>

													<!-- Site header -->
													<header class="site-header bg-transparent">
														[...]
													</header>

													<!-- Header overlay -->
													<div class="header-overlay">
														[...]
													</div>

													<!-- Back to top button -->
													<button type="button" id="backtotop" class="btn btn-primary btn-icon">
														[...]
													</button>

													<!-- Global cover background -->
													<div class="global-cover-bg">
														[...]
													</div>

													<!-- Page wrapper -->
													<div class="page-wrapper">
														<div id="page-cover" class="page-cover">
															<div class="page-cover-wrapper-fixed">
																<div class="page-cover-bg">
																	[...]
																</div>
																<div class="page-cover-wrap">

																	<section id="home" class="d-flex mh-100vh">
																		[...]
																	</section>

																</div>
															</div>
														</div><!--end .page-cover -->

														<div class="page-content">

															<section>
																[...]
																[...]
																[...]
															</section>
															
															[...]
															
															<!-- Site footer -->
															<footer class="site-footer">
																[...]
															</footer>

														</div><!--end .page-content -->
													</div><!-- end .page-wrapper -->

												</div>

												<!-- Your Scripts -->

											</body>
										</html>

Grid System

This template is based on Bootstrap 4. Go to Bootrstrap's documentation and check how does it work.

Favicons & Apple Touch Icons

You can add a Favicon to your Website using the following code:


										<link rel="icon" href="assets/images/favicon.png" type="image/png" sizes="16x16">

You can add Apple Touch Icons to your Website using the following code:


										<link rel="apple-touch-icon" href="assets/images/apple-touch-icon.png">
										<link rel="apple-touch-icon" sizes="72x72" href="assets/images/apple-touch-icon-72x72.png">
										<link rel="apple-touch-icon" sizes="114x114" href="assets/images/apple-touch-icon-114x114.png">

Content

Typography

Classic heading style

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6


												<h1>h1. Heading 1</h1>
												<h2>h2. Heading 2</h2>
												<h3>h3. Heading 3</h3>
												<h4>h4. Heading 4</h4>
												<h5>h5. Heading 5</h5>
												<h6>h6. Heading 6</h6>

Uppercase heading style

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6


												<h1 class="heading-uppercase">h1. Heading 1</h1>
												<h2 class="heading-uppercase">h2. Heading 2</h2>
												<h3 class="heading-uppercase">h3. Heading 3</h3>
												<h4 class="heading-uppercase">h4. Heading 4</h4>
												<h5 class="heading-uppercase">h5. Heading 5</h5>
												<h6 class="heading-uppercase">h6. Heading 6</h6>

Standard paragraph

Fusce pretium, elit ut tincidunt fermentum, neque nisi tristique arcu, id viverra lacus tortor sed orci. Integer eu pharetra lacus. Donec venenatis orci id dui vestibulum, vel hendrerit arcu scelerisque.


												<p>Fusce pretium, elit ut tincidunt fermentum, neque nisi tristique arcu, id viverra lacus tortor sed orci. Integer eu pharetra lacus. Donec venenatis orci id dui vestibulum, vel hendrerit arcu scelerisque.</p>

Lead paragraph

Fusce pretium, elit ut tincidunt fermentum, neque nisi tristique arcu, id viverra lacus tortor sed orci. Integer eu pharetra lacus. Donec venenatis orci id dui vestibulum, vel hendrerit arcu scelerisque.


												<p class="lead">Fusce pretium, elit ut tincidunt fermentum, neque nisi tristique arcu, id viverra lacus tortor sed orci. Integer eu pharetra lacus. Donec venenatis orci id dui vestibulum, vel hendrerit arcu scelerisque.</p>

Images


												<img src="http://via.placeholder.com/150x150" alt="" class="rounded">


												<img src="http://via.placeholder.com/150x150" alt="" class="img-thumbnail">

Progress bar

This template is based on Bootstrap 4. Go to Bootrstrap's documentation and check how does it work.

Tables

This template is based on Bootstrap 4. Go to Bootrstrap's documentation and check how does it work.

Media

Lightbox Single Image

Please add data-featherlight="image" to the a tag.

									
									<a href="http://via.placeholder.com/1500x1500" data-featherlight="image" data-title="Love" data-text="Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris.">
										<img src="http://via.placeholder.com/1500x1500" alt="">
									</a>

Lightbox Gallery

Please add data-featherlight-gallery data-featherlight-filter="a" to the images container.


									<article class="portfolio-item isotope-item col-12 col-md-6 col-lg-4 p-0 brand" data-featherlight-gallery data-featherlight-filter="a">
										<a href="http://via.placeholder.com/1500x1500" data-title="Beautiful Girl" data-text="1. Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris.">
											<div class="item-media">
												<img src="http://via.placeholder.com/1500x1500" alt="">
											</div>
											<div class="item-overlay bg-dark"></div>
											<div class="item-details text-white">
												<h4 class="h5">Beautiful Girl - Gallery</h4>
												<p class="font-italic">Brand</p>
											</div>
										</a>
										<a class="d-none" href="http://via.placeholder.com/1500x1500" data-title="Summer" data-text="2. Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris.">
											<img src="http://via.placeholder.com/1500x1500" alt="">
										</a>
										<a class="d-none" href="http://via.placeholder.com/1500x1500" data-title="City" data-text="3. Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris.">
											<img src="http://via.placeholder.com/1500x1500" alt="">
										</a>
									</article>

Lightbox Video

Please add data-featherlight="iframe" data-featherlight-iframe-allowfullscreen="true" data-featherlight-iframe-width="1200" data-featherlight-iframe-height="675" to the a tag.


									<a href="https://www.youtube.com/embed/CG20eBusRg0" data-featherlight="iframe" data-featherlight-iframe-allowfullscreen="true" data-featherlight-iframe-width="1200" data-featherlight-iframe-height="675" data-title="Future City" data-text="Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris.">
										<img src="http://via.placeholder.com/150x150" alt="">
									</a>

Components

Buttons

Colors


										<!-- Primary --->
										<button type="button" class="btn btn-primary">Primary</button>
										
										<!-- Secondary --->
										<button type="button" class="btn btn-secondary">Secondary</button>
										
										<!-- Success --->
										<button type="button" class="btn btn-success">Success</button>
										
										<!-- Danger --->
										<button type="button" class="btn btn-danger">Danger</button>
										
										<!-- Warning --->
										<button type="button" class="btn btn-warning">Warning</button>
										
										<!-- Info --->
										<button type="button" class="btn btn-info">Info</button>
										
										<!-- Light --->
										<button type="button" class="btn btn-light">Light</button>
										
										<!-- Dark --->
										<button type="button" class="btn btn-dark">Dark</button>
										
										<!-- Black --->
										<button type="button" class="btn btn-black">Black</button>
										
										<!-- White --->
										<button type="button" class="btn btn-white">White</button>
										
										<!-- Link --->
										<button type="button" class="btn btn-link">Link</button>

Outline

Replace the default modifier classes with the btn-outline-* ones to remove all background images and colors on any button.


										<button type="button" class="btn btn-outline-primary">Outline primary</button>

Alternative

Add btn-alternative class to the button. Replace the default modifier classes with the btn-alternative-* ones to remove all background images and colors on any button.


										<button type="button" class="btn btn-alternative btn-alternative-primary">Alternative primary</button>

Shadow

Add btn-alternative class to the button.


										<button type="button" class="btn btn-primary btn-shadow">Primary</button>

Border Radius


										<!-- Default --->
										<button type="button" class="btn btn-primary">Default</button>

										<!-- No Rounded --->
										<button type="button" class="btn btn-primary rounded-0">Square</button>

										<!-- Pilled --->
										<button type="button" class="btn btn-primary btn-pill">Pilled</button>

Sizes


										<!-- Small --->
										<button type="button" class="btn btn-sm btn-primary">Small</button>
										
										<!-- Default --->
										<button type="button" class="btn btn-primary">Regular</button>
										
										<!-- Large --->
										<button type="button" class="btn btn-lg btn-primary">Large</button>

Types with Icons


										<button type="button" class="btn btn-primary mb-2 mr-2">
											<i class="fab fa-facebook-messenger mr-1"></i> Default
										</button>
										<button type="button" class="btn btn-primary rounded-0 mb-2 mr-2">
											<i class="fab fa-facebook-messenger mr-1"></i> Square
										</button>
										<button type="button" class="btn btn-primary btn-pill mb-2 mr-2">
											<i class="fab fa-facebook-messenger mr-1"></i> Pilled
										</button>
										<button type="button" class="btn btn-primary btn-icon mb-2 mr-2">
											<i class="fab fa-facebook-messenger"></i>
										</button>
										<button type="button" class="btn btn-primary btn-icon rounded-circle mb-2 mr-2">
											<i class="fab fa-facebook-messenger"></i>
										</button>

Avatars

Classic


										<!-- Classic - Default --->

										<div class="u-avatar u-avatar-1x mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-2x mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-4x mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-5x mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<!-- Classic - Rounded --->
										<div class="u-avatar u-avatar-1x u-avatar-rounded mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-2x u-avatar-rounded mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-rounded mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-4x u-avatar-rounded mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-5x u-avatar-rounded mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>
										
										<!-- Classic - Circle --->
										<div class="u-avatar u-avatar-1x u-avatar-rounded-circle mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-2x u-avatar-rounded-circle mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-rounded-circle mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-4x u-avatar-rounded-circle mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-5x u-avatar-rounded-circle mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

Bordered


										<!-- Bordered - Default --->
										<div class="u-avatar u-avatar-1x u-avatar-bordered mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-2x u-avatar-bordered mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-bordered mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-4x u-avatar-bordered mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-5x u-avatar-bordered mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<!-- Bordered - Rounded --->
										div class="u-avatar u-avatar-1x u-avatar-bordered u-avatar-rounded mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-2x u-avatar-bordered u-avatar-rounded mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-bordered u-avatar-rounded mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-4x u-avatar-bordered u-avatar-rounded mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-5x u-avatar-bordered u-avatar-rounded mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<!-- Bordered - Circle --->
										<div class="u-avatar u-avatar-1x u-avatar-bordered u-avatar-rounded-circle mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-2x u-avatar-bordered u-avatar-rounded-circle mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-bordered u-avatar-rounded-circle mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-4x u-avatar-bordered u-avatar-rounded-circle mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-5x u-avatar-bordered u-avatar-rounded-circle mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

Modern


										<!-- Modern - Default --->
										<div class="u-avatar u-avatar-1x u-avatar-modern mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-2x u-avatar-modern mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-modern mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-4x u-avatar-modern mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-5x u-avatar-modern mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>
										
										<!-- Modern - Rounded --->
										<div class="u-avatar u-avatar-1x u-avatar-modern u-avatar-rounded mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-2x u-avatar-modern u-avatar-rounded mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-modern u-avatar-rounded mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-4x u-avatar-modern u-avatar-rounded mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-5x u-avatar-modern u-avatar-rounded mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<!-- Modern - Circle --->
										<div class="u-avatar u-avatar-1x u-avatar-modern u-avatar-rounded-circle mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-2x u-avatar-modern u-avatar-rounded-circle mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-modern u-avatar-rounded-circle mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-4x u-avatar-modern u-avatar-rounded-circle mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

										<div class="u-avatar u-avatar-5x u-avatar-modern u-avatar-rounded-circle mx-auto">
											<img src="demo/images/avatar_small.jpg" alt="">
										</div>

Carousel

This template use Slick. Go to Slick's documenttion and check how does it work.

Slider

This template use Slick. Go to Slick's documenttion and check how does it work.

Image Slider


										<div class="slider dots-light dots-inside mb-5" data-slick='{"dots": true}'>
											<div>
												<img src="demo/images/portfolio-single-1.jpg" alt="">
											</div>
											<div>
												<img src="demo/images/portfolio-single-2.jpg" alt="">
											</div>
											<div>
												<img src="demo/images/portfolio-single-3.jpg" alt="">
											</div>
										</div>

Testimonial/Content Slider


										<div class="slider" data-slick='{"dots":true,"arrows":false}'>
											<div>
												<div class="icon-font-3x mb-5">
													<i class="fa fa-quote-right"></i>
												</div>
												<blockquote>
													<p class="mb-5">Nulla consequat nulla vitae enim venenatis, vel vulputate mi commodo. Pellentesque consequat at justo quis vulputate. Maecenas elementum metus eu maximus auctor. Morbi ultrices quam rhoncus purus bibendum ornare. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
													<footer class="d-flex justify-content-center align-items-center w-lg-50 mx-auto text-left">
														<div class="u-avatar u-avatar-rounded-circle">
															<img class="img-fluid" src="demo/images/avatar_small.jpg" alt="">
														</div>
														<div class="ml-3">
															<h4 class="h6 mb-0">Jessica Nelson</h4>
															<small>Director Business Planning, Amazon</small>
														</div>
													</footer>
												</blockquote>
											</div>

											<div>
												<div class="icon-font-3x mb-5">
													<i class="fa fa-quote-right"></i>
												</div>
												<blockquote>
													<p class="mb-5">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
													<footer class="d-flex justify-content-center align-items-center w-lg-50 mx-auto text-left">
														<div class="u-avatar u-avatar-rounded-circle">
															<img class="img-fluid" src="demo/images/avatar_small.jpg" alt="">
														</div>
														<div class="ml-3">
															<h4 class="h6 mb-0">Jessica Nelson</h4>
															<small>Director Business Planning, Amazon</small>
														</div>
													</footer>
												</blockquote>
											</div>

											<div>
												<div class="icon-font-3x mb-5">
													<i class="fa fa-quote-right"></i>
												</div>
												<blockquote>
													<p class="mb-5">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
													<footer class="d-flex justify-content-center align-items-center w-lg-50 mx-auto text-left">
														<div class="u-avatar u-avatar-rounded-circle">
															<img class="img-fluid" src="demo/images/avatar_small.jpg" alt="">
														</div>
														<div class="ml-3">
															<h4 class="h6 mb-0">Jessica Nelson</h4>
															<small>Director Business Planning, Amazon</small>
														</div>
													</footer>
												</blockquote>
											</div>
										</div>

Feature Block

Default


										<div class="row mb-5">
											<div class="col-md-6 mb-4 mb-md-0">
												<div class="feature-block">
													<div class="feature-icon text-primary mb-3">
														<div>
															<i class="ti-timer"></i>
														</div>
													</div>
													<h3 class="h4 mb-2">Launch Quickly</h3>
													<p>Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu sed ligula malesuada, quis condimentum eros sollicitudin.</p>
												</div>
											</div>

											<div class="col-md-6">
												<div class="feature-block">
													<div class="feature-icon text-primary mb-3">
														<div>
															<i class="ti-brush-alt"></i>
														</div>
													</div>
													<h3 class="h4 mb-2">Stylish Design</h3>
													<p>Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu sed ligula malesuada, quis condimentum eros sollicitudin.</p>
												</div>
											</div>
										</div>

Bordered


										<div class="row mb-5">
											<div class="col-md-6 mb-2 mb-md-0">
												<div class="feature-block feature-boxed feature-decorated">
													<div class="feature-icon text-primary mb-3">
														<div>
															<i class="ti-timer"></i>
														</div>
													</div>
													<h3 class="h4 mb-2">Launch Quickly</h3>
													<p>Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu sed ligula malesuada, quis condimentum eros sollicitudin.</p>
												</div>
											</div>

											<div class="col-md-6">
												<div class="feature-block feature-boxed feature-decorated">
													<div class="feature-icon text-primary mb-3">
														<div>
															<i class="ti-brush-alt"></i>
														</div>
													</div>
													<h3 class="h4 mb-2">Stylish Design</h3>
													<p>Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu sed ligula malesuada, quis condimentum eros sollicitudin.</p>
												</div>
											</div>
										</div>

With Background


										<div class="row mb-5">
											<div class="col-md-6 mb-2 mb-md-0">
												<div class="feature-block feature-boxed bg-primary text-white">
													<div class="feature-icon mb-3">
														<div>
															<i class="ti-timer"></i>
														</div>
													</div>
													<h3 class="h4 mb-2">Launch Quickly</h3>
													<p>Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu sed ligula malesuada, quis condimentum eros sollicitudin.</p>
												</div>
											</div>

											<div class="col-md-6">
												<div class="feature-block feature-boxed bg-light">
													<div class="feature-icon text-primary mb-3">
														<div>
															<i class="ti-brush-alt"></i>
														</div>
													</div>
													<h3 class="h4 mb-2">Stylish Design</h3>
													<p>Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu sed ligula malesuada, quis condimentum eros sollicitudin.</p>
												</div>
											</div>
										</div>

With Image Overlay


										<div class="row">
											<div class="col-lg-6 mb-2 mb-md-0">
												<div class="feature-block feature-boxed text-white">
													<div class="overlay">
														<div class="overlay-inner bg-image-holder bg-cover bg-bottom-left">
															<img src="demo/images/image-3.jpg" alt="">
														</div>
														<div class="overlay-inner bg-primary opacity-85"></div>
													</div>
													<div class="feature-icon mb-3">
														<div>
															<i class="ti-timer"></i>
														</div>
													</div>
													<h3 class="h4 mb-2">Launch Quickly</h3>
													<p>Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu sed ligula malesuada, quis condimentum eros sollicitudin.</p>
												</div>
											</div>

											<div class="col-lg-6">
												<div class="feature-block feature-boxed text-white">
													<div class="overlay">
														<div class="overlay-inner bg-image-holder bg-cover">
															<img src="demo/images/image-17.jpg" alt="">
														</div>
														<div class="overlay-inner bg-dark opacity-50"></div>
													</div>
													<div class="feature-icon mb-3">
														<div>
															<i class="ti-brush-alt"></i>
														</div>
													</div>
													<h3 class="h4 mb-2">Stylish Design</h3>
													<p>Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu sed ligula malesuada, quis condimentum eros sollicitudin.</p>
												</div>
											</div>
										</div>

News Block


										<div class="row">
											<div class="col-sm-6 col-md-4 mb-4 mb-md-0">
												<article class="news-block border-0">
													<div class="news-body p-0">
														<div class="mb-4">
															<img class="img-fluid w-100 rounded" src="demo/images/blog/blog-1.jpg" alt="">
														</div>
														<small class="d-block mb-1">May 27, 2019</small>
														<h2 class="h4 mb-1">
															<a href="single-article.html">Building an enduring online audience</a>
														</h2>
														<p>Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu.</p>
													</div>
												</article>
											</div>

											<div class="col-sm-6 col-md-4 mb-4 mb-md-0">
												<article class="news-block border-0">
													<div class="news-body p-0">
														<div class="mb-4">
															<img class="img-fluid w-100 rounded" src="demo/images/blog/blog-2.jpg" alt="">
														</div>
														<small class="d-block mb-1">May 20, 2019</small>
														<h2 class="h4 mb-1">
															<a href="single-article.html">Building a site for your small business</a>
														</h2>
														<p>Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu.</p>
													</div>
												</article>
											</div>

											<div class="col-sm-6 col-md-4">
												<article class="news-block border-0">
													<div class="news-body p-0">
														<div class="mb-4">
															<img class="img-fluid w-100 rounded" src="demo/images/blog/blog-3.jpg" alt="">
														</div>
														<small class="d-block mb-1">May 13, 2019</small>
														<h2 class="h4 mb-1">
															<a href="single-article.html">A day in the life of a fitness blogger</a>
														</h2>
														<p>Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu.</p>
													</div>
												</article>
											</div>
										</div>

Forms

This template is based on Bootstrap 4. Go to Bootrstrap's documentation and check how does it work.

Modal

Lightbox Single Image

Please add data-featherlight="image" to the a tag.

									
									<a href="http://via.placeholder.com/1500x1500" data-featherlight="image" data-title="Love" data-text="Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris.">
										<img src="http://via.placeholder.com/1500x1500" alt="">
									</a>

Lightbox Gallery

Please add data-featherlight-gallery data-featherlight-filter="a" to the images container.


									<article class="portfolio-item isotope-item col-12 col-md-6 col-lg-4 p-0 brand" data-featherlight-gallery data-featherlight-filter="a">
										<a href="http://via.placeholder.com/1500x1500" data-title="Beautiful Girl" data-text="1. Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris.">
											<div class="item-media">
												<img src="http://via.placeholder.com/1500x1500" alt="">
											</div>
											<div class="item-overlay bg-dark"></div>
											<div class="item-details text-white">
												<h4 class="h5">Beautiful Girl - Gallery</h4>
												<p class="font-italic">Brand</p>
											</div>
										</a>
										<a class="d-none" href="http://via.placeholder.com/1500x1500" data-title="Summer" data-text="2. Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris.">
											<img src="http://via.placeholder.com/1500x1500" alt="">
										</a>
										<a class="d-none" href="http://via.placeholder.com/1500x1500" data-title="City" data-text="3. Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris.">
											<img src="http://via.placeholder.com/1500x1500" alt="">
										</a>
									</article>

Lightbox Video

Please add data-featherlight="iframe" data-featherlight-iframe-allowfullscreen="true" data-featherlight-iframe-width="1200" data-featherlight-iframe-height="675" to the a tag.


									<a href="https://www.youtube.com/embed/CG20eBusRg0" data-featherlight="iframe" data-featherlight-iframe-allowfullscreen="true" data-featherlight-iframe-width="1200" data-featherlight-iframe-height="675" data-title="Future City" data-text="Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris.">
										<img src="http://via.placeholder.com/150x150" alt="">
									</a>

Utilities

Helper Classes

We have created some really useful helper classes for you.

Main colors

#377dff .bg-primary

.text-primary

#6e1ac9 .bg-secondary

.text-secondary

#00c9a7 .bg-success

.text-success

#de4437 .bg-danger

.text-danger

#ffc107 .bg-warning

.text-warning

#00dffc .bg-info

.text-info

#1e2022 .bg-dark

.text-dark

#000000 .bg-black

.text-black

#f8fafd .bg-light

.text-light

#ffffff .bg-white

.text-white

Background size

.bg-cover - background-size:cover
.bg-contain - background-size:contain

Background position

.bg-top-left - background-position:top left
.bg-top-center - background-position:top center
.bg-top-right - background-position:top right
.bg-center-left - background-position:center left
.bg-center - background-position:center
.bg-center-right - background-position:center right
.bg-bottom-left - background-position:bottom left
.bg-bottom-center - background-position:bottom center
.bg-bottom-right - background-position:bottom right

Background repeat

.bg-repeat - background-repeat:repeat
.bg-repeat-x - background-repeat:repeat-x
.bg-repeat-y - background-repeat:repeat-y
.bg-norepeat - background-repeat:no-repeat

Font family

.main-font - font-family: 'Roboto', Helvetica, sans-serif
.alt-font - font-family: 'Source Sans Pro', Helvetica, sans-serif

Text decoration

.text-underline - text-decoration:underline
.text-none - text-decoration: none

Letter spacing

.text-space-1 - letter-spacing: 1px

Opacity

.opacity-100 - opacity:1
.opacity-95 - opacity:.95
.opacity-90 - opacity:.9
.opacity-85 - opacity:.85
.opacity-80 - opacity:.8
.opacity-75 - opacity:.75
.opacity-70 - opacity:.70
.opacity-65 - opacity:.65
.opacity-60 - opacity:.60
.opacity-55 - opacity:.55
.opacity-50 - opacity:.5
.opacity-45 - opacity:.45
.opacity-40 - opacity:.4
.opacity-35 - opacity:.35
.opacity-30 - opacity:.3
.opacity-25 - opacity:.25
.opacity-20 - opacity:.2
.opacity-15 - opacity:.15
.opacity-10 - opacity:.1
.opacity-5 - opacity:.05
.opacity-0 - opacity:0

z-index

.zindex-0 - z-index:0
.zindex-1 - z-index:1
.zindex-2 - z-index:2
.zindex-3 - z-index:3
.zindex-4 - z-index:4
.zindex-5 - z-index:5
.zindex-555 - z-index:555
.zindex-5555 - z-index:5555
.zindex-n1 - z-index:-1

Box shadow

.zindex-0 - z-index:0
.shadow-sm - box-shadow: 0 1.25rem 1.56rem -0.75rem rgba(0, 0, 0, 0.09)
.shadow - box-shadow: 0 0.2rem 1.25rem 0 rgba(0, 0, 0, 0.07)
.shadow-lg - box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175)

Font Icons

.icon-font-1x - font-size: 1rem
.icon-font-2x - font-size: 2rem
.icon-font-3x - font-size: 3rem
.icon-font-4x - font-size: 4rem

SVG icons

.icon-svg-1x - width: 1rem
.icon-svg-2x - width: 2rem
.icon-svg-3x - width: 3rem
.icon-svg-4x - width: 4rem

Position spaces

.top-0 - top:0
.top-auto - top:auto
.bottom-0 - bottom:0
.bottom-auto - bottom:auto
.left-0 - left:0
.left-auto - left:auto
.right-0 - right:0
.right-auto - right:auto

Configuration

Backgrounds

Global Slideshow Background

Please add class slideshow-background to the body tag.

Open main.js file and find this code:


										// Slideshow
										if ($body.hasClass('slideshow-background')) {
											$body.vegas({
												preload: true,
												timer: false,
												delay: 5000,
												transition: 'fade',
												transitionDuration: 1000,
												slides: [
													{ src: 'demo/images/image-15.jpg' },
													{ src: 'demo/images/image-16.jpg' },
													{ src: 'demo/images/image-17.jpg' },
													{ src: 'demo/images/image-4.jpg' }
												]
											});
										}

Global Slideshow with Zoom Effect Background

Please add class slideshow-zoom-background to the body tag.

Open main.js file and find this code:


										// Slideshow - ZoomOut
										if ($body.hasClass('slideshow-zoom-background')) {
											$body.vegas({
												preload: true,
												timer: false,
												delay: 7000,
												transition: 'zoomOut',
												transitionDuration: 4000,
												slides: [
													{ src: 'demo/images/image-4.jpg' },
													{ src: 'demo/images/image-16.jpg' },
													{ src: 'demo/images/image-17.jpg' },
													{ src: 'demo/images/image-15.jpg' }
												]
											});
										}

Global Kenburns Background

Please add class kenburns-background to the body tag.

Open main.js file and find this code:


										// Kenburns
										if ($body.hasClass('kenburns-background')) {

											var kenburnsDisplayBackdrops = false;
											var kenburnsBackgrounds = [
												{ src: 'demo/images/image-15.jpg', valign: 'top' },
												{ src: 'demo/images/image-14.jpg', valign: 'top' },
												{ src: 'demo/images/image-17.jpg', valign: 'top' }
											];

											$body.vegas({
												preload: true,
												transition: 'swirlLeft2',
												transitionDuration: 4000,
												timer: false,
												delay: 10000,
												slides: kenburnsBackgrounds,
												walk: function (nb) {
													if (kenburnsDisplayBackdrops === true) {
														var backdrop;

														backdrop = backdrops[nb];
														backdrop.animation = 'kenburns';
														backdrop.animationDuration = 20000;
														backdrop.transition = 'fade';
														backdrop.transitionDuration = 1000;

														$body
															.vegas('options', 'slides', [ backdrop ])
															.vegas('next');
													}
												}
											});
										}

Section Image Background


										<section class="malat-section d-lg-flex fullscreen-lg" data-anchor="home" data-tooltip="Home">
											<div class="overlay">
												<div class="overlay-inner bg-image-holder bg-cover">
													<img src="demo/images/image-4.jpg" alt="background">
												</div>
												<div class="overlay-inner bg-dark opacity-55"></div>
											</div>
											<div class="container align-self-lg-center">
											
												[...]
												[...]
												[...]
												
											</div>
										</section>

Section Video Background


										<section class="malat-section d-lg-flex fullscreen-lg" data-anchor="home" data-tooltip="Home">
											<div class="overlay">
												<div class="overlay-inner bg-image-holder bg-cover">
													<img src="demo/images/image-4.jpg" alt="background">
												</div>
												<div class="overlay-inner overlay-video">
													<div class="video-wrapper">
														<video autoplay muted loop data-keepplaying>
															<source src="demo/video/work.webm" type="video/webm">
															<source src="demo/video/work.mp4" type="video/mp4">
															<source src="demo/video/work.ogv" type="video/ogg">
														</video>
													</div>
												</div>
												<div class="overlay-inner bg-dark opacity-50"></div>
											</div>
											<div class="container align-self-lg-center">
											
												[...]
												[...]
												[...]
												
											</div>
										</section>

Section Animated Gradient Background

Add colors in hex format to the data-gradient-bg attribute.


										<section class="malat-section d-lg-flex fullscreen-lg" data-anchor="home" data-tooltip="Home">
											<div class="overlay">
												<div class="overlay-inner" data-gradient-bg="[['#AA076B','#61045F'],['#02AAB0','#00CDAC'],['#DA22FF','#9733EE']]"></div>
											</div>
											<div class="container align-self-lg-center">
											
												[...]
												[...]
												[...]
												
											</div>
										</section>

Section Solid Color Background


										<section class="malat-section d-lg-flex fullscreen-lg" data-anchor="home" data-tooltip="Home">
											<div class="overlay">
												<div class="overlay-inner bg-primary"></div>
											</div>
											<div class="container align-self-lg-center">
											
												[...]
												[...]
												[...]
												
											</div>
										</section>

Header

Default code:


										<!-- Site header -->
										<header class="site-header bg-transparent">
											<div class="overlay">
												<div class="overlay-inner bg-dark opacity-75"></div>
											</div>
											<div class="header-inner">
												<div class="header-brand">
													<!-- Logo -->
													<a href="#" class="logo">
														<span>Amanda Malat</span>
														<span class="title-letter text-white opacity-15">A</span>
													</a>
												</div>
												<div class="nav-divider mb-5"></div>
												<nav class="site-nav">
													<ul id="navigation">
														<li>
															<a href="#home" class="scrollto">Home</a>
														</li>
														<li>
															<a href="#about" class="scrollto">About</a>
														</li>
														<li>
															<a href="#services" class="scrollto">Services</a>
														</li>
														<li>
															<a href="#portfolio" class="scrollto">Portfolio</a>
														</li>
														<li>
															<a href="#news" class="scrollto">News</a>
														</li>
														<li>
															<a href="#contact" class="scrollto">Contact</a>
														</li>
													</ul>
												</nav>
												<div class="nav-divider my-5"></div>
												<nav>
													<ul class="list-inline text-center">
														<li class="list-inline-item">
															<a class="btn btn-sm btn-icon btn-outline-white btn-transparent rounded-circle" href="#">
																<span class="btn-icon-inner fab fa-facebook-f"></span>
															</a>
														</li>
														<li class="list-inline-item">
															<a class="btn btn-sm btn-icon btn-outline-white btn-transparent rounded-circle" href="#">
																<span class="btn-icon-inner fab fa-instagram"></span>
															</a>
														</li>
														<li class="list-inline-item">
															<a class="btn btn-sm btn-icon btn-outline-white btn-transparent rounded-circle" href="#">
																<span class="btn-icon-inner fab fa-twitter"></span>
															</a>
														</li>
														<li class="list-inline-item">
															<a class="btn btn-sm btn-icon btn-outline-white btn-transparent rounded-circle" href="#">
																<span class="btn-icon-inner fab fa-pinterest"></span>
															</a>
														</li>
													</ul>
												</nav>
											</div>
										</header>

Footer

Default code:


										<!-- Site footer -->
										<footer class="site-footer bg-light">
											<div class="container">
												<nav class="mb-3">
													<ul class="list-inline text-center">
														<li class="list-inline-item">
															<a class="btn btn-sm btn-icon btn-outline-dark btn-transparent rounded-circle" href="#">
																<span class="btn-icon-inner fab fa-facebook-f"></span>
															</a>
														</li>
														<li class="list-inline-item">
															<a class="btn btn-sm btn-icon btn-outline-dark btn-transparent rounded-circle" href="#">
																<span class="btn-icon-inner fab fa-instagram"></span>
															</a>
														</li>
														<li class="list-inline-item">
															<a class="btn btn-sm btn-icon btn-outline-dark btn-transparent rounded-circle" href="#">
																<span class="btn-icon-inner fab fa-twitter"></span>
															</a>
														</li>
														<li class="list-inline-item">
															<a class="btn btn-sm btn-icon btn-outline-dark btn-transparent rounded-circle" href="#">
																<span class="btn-icon-inner fab fa-pinterest"></span>
															</a>
														</li>
													</ul>
												</nav>
												<p class="text-center">© 2019 Malat - All Rights Reserved</p>
											</div>
										</footer>

Contact

You can setup Contact Forms anywhere on your Website by simply Copy/Pasting the Sample Code present in the HTML Files.

Just change your Email Address in the include/sendemail.php file to start receiving Form Responses.


										$toemails[] = array(
											'email' => 'your@email.com', // Your Email Address
											'name' => 'Your Name' // Your Name
										);

Not receiving Form Emails?

If you are not receiving Emails from your Forms then chances are that your Server Configuration doesn't support PHP mail() function. But you can use SMTP Authentication. Just find the following line of code:


										$mail = new PHPMailer();

Add this after the above line:


										$mail->IsSMTP();
										$mail->Host = "mail.yourdomain.com";
										$mail->SMTPDebug = 2;
										$mail->SMTPAuth = true;
										$mail->Port = 26;
										$mail->Username = "yourname@yourdomain.com";
										$mail->Password = "yourpassword";

Subscription

You can setup Mailchimp Subscriptions.

Just add your API Key and List ID in the include/subscribe.php file.


										$MC_apiKey = ''; // Your MailChimp API Key
										$MC_listId = ''; // Your MailChimp List ID

About API Keys
Find Your List ID

Local Scroll

You can use this functionality by adding scrollto class to a Link.


										<a href="#about" class="btn scrollto">Learn more</a>

Changing Fonts

By default, Malat uses 2 Fonts namely: Roboto and Josefin Sans from the Google Fonts Library. You can find the Linking to the Font Files in the head tag of all the .html files.


										<!-- FONTS -->
										<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700%7CMRoboto:300,400,500,700' rel='stylesheet' type='text/css'>

In order to change the Fonts, you will need to Edit the Above Links with your Custom Font if you plan to use a Google Font or Remove it complete if you plan to use a Self Hosted font. Here is an Example for using Self Hosted Fonts.

Website Optimization Tips

A Fast & Optimized Website has several factors which needs to be implemented in order to achieve the desired results. There are several Optimization Techniques available which will definitely affect your Website's Performance in a Positive Way & we want to share a few of them with you:

gZip Compression & Browser Caching
Image Compression & Optimization
CSS & jQuery Minifications
Fast Web Hosting Servers

Files & Credits

CSS & Fonts

Bootstrap
Animate.css
Font-Awesome (Font Icons)
Themify Icons (Font Icons)
Google Fonts
Roboto Font
Source Sans Pro

JS

PHP

PHP Mailer

Images

Unsplash

Changelog

Let's check what has changed since the first version...

v 1.2.0 - 25 May 2020

Features

NEW! - Added auto show/hide mobile nav - example: elements.html page

v 1.1.0 - 25 July 2019

Features

NEW! - Added +17 pages with white/dark navigation

v 1.0.1 - 22 July 2019

Fixed

Fixed media queries - .container padding on small resolutions

v 1.0.0 - 16 July 2019

Release

Initial Release

Support

PSD File is not included with this template.

Thank you for purchasing Malat - Responsive Personal / Portfolio / Resume Template. If you have any questions that are beyond the scope of this help file, please feel free to email via my profile page contact form or add new ticket on support forum. Thanks so much!