If you have any questions, please use our profile contact form on Envato ( https://themeforest.net/user/thememajestic ).
This documentation is December 2023
Thank you for purchasing this HTML template.
If you like this template, Please support us by rating this template with 5 stars
We hope you found this document helpful. Thank you!
Template Features
- Unique Home Pages
- Easy to customize
- HTML5 & CSS3
- Clean & Simple Design
- Fully Responsive Layout
- Crossbrowser Compatible
- W3 Valid
- Fontawesome Icons
- Powered with Bootstrap Version
- Working Contact Form
Folders in Zip File
- css — folder with CSS and SCSS files.
- fonts — folder with fonts files.
- images — folder with images files.
- js — folder with Javascript files.
- Media — folder with images files.
- Plugins — folder with Javascript files.
HTML Files:
- about-1.html — About page
- accordian.html — Accordian page
- alertbox.html — Alertbox page
- button.html — Button page
- carousel.html — Carousel page
- client_logo.html — Client_logo page
- contact-1.html — Contact-1 page
- counter.html — Counter page
- google_map.html — Google_map page
- icon_box.html — Icon_box page
- index.html — Home page 1
- index-2.html — Home page 2
- index-3.html — Home page 3
- index-4.html — Home page 4
- index-5.html — Home page 5
- list_group.html — List group page
- modal_popup.html — Modal_popup page
- news-grid.html — News-grid page
- news-listing.html — News-listing page
- news-masonry.html — News-masonry page
- post-gallery.html — Post-gallery page
- Post-image.html — Post-image page
- post-right-sidebar.html — Post-right-sidebar page
- post-video.html — Post-video page
- pricing_table.html — Pricing_table page
- project-detail.html — Project-detail page
- table.html — Table page
- tabs.html — Tabs page
- video.html — Video page
- work-carousel.html — Work-carousel page
- work-grid.html — Work-grid page
- work-masonry.html — Work-masonry page
HEAD CSS Structure
Followings are the css files which loaded inside the Head Section:
<head>
<!-- META -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="robots" content="" />
<meta name="description" content="" />
<!-- FAVICONS ICON -->
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png" />
<!-- PAGE TITLE HERE -->
<title>Modern Template | Home Page Style 1</title>
<!-- MOBILE SPECIFIC -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/loader.min.css"> <!-- LOADER STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><!-- BOOTSTRAP STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/fontawesome/css/font-awesome.min.css" /><!-- FONTAWESOME STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css"><!-- OWL CAROUSEL STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/magnific-popup.min.css"><!-- MAGNIFIC POPUP STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/style.css"><!-- MAIN STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/rev-slider-4.css"><!-- REVOLUTION SLIDER 4 STYLE -->
<link rel="stylesheet" type="text/css" href="plugins/revolution/revolution/css/settings.css"><!-- REVOLUTION SLIDER CSS -->
<link rel="stylesheet" type="text/css" href="plugins/revolution/revolution/css/navigation.css"><!-- REVOLUTION NAVIGATION STYLE -->
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,800,800i,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crete+Round:400,400i&subset=latin-ext" rel="stylesheet">
</head>
Javascript Structure
Followings are the JS files which loaded before the end of HEAD or BODY Section:.
<!-- JAVASCRIPT FILES ========================================= -->
<script src="js/jquery-3.7.1.min.js"></script><!-- JQUERY.MIN JS -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script><!-- BOOTSTRAP.MIN JS -->
<script src="js/magnific-popup.min.js"></script><!-- MAGNIFIC-POPUP JS -->
<script src="js/waypoints.min.js"></script><!-- WAYPOINTS JS -->
<script src="js/counterup.min.js"></script><!-- COUNTERUP JS -->
<script src="js/waypoints-sticky.min.js"></script><!-- COUNTERUP JS -->
<script src="js/isotope.pkgd.min.js"></script><!-- MASONRY -->
<script src="js/imagesloaded.pkgd.min.js"></script><!-- MASONRY -->
<script src="js/owl.carousel.min.js"></script><!-- OWL SLIDER -->
<script src="js/jquery.owl-filter.js"></script>
<script src="js/scrolla.min.js"></script><!-- ON SCROLL CONTENT ANIMTE -->
<script src="js/custom.js"></script><!-- CUSTOM FUCTIONS -->
<script src="js/shortcode.js"></script><!-- SHORTCODE FUCTIONS -->
<!-- REVOLUTION JS FILES -->
<script src="plugins/revolution/revolution/js/jquery.themepunch.tools.min.js"></script>
<script src="plugins/revolution/revolution/js/jquery.themepunch.revolution.min.js"></script>
<script src="plugins/revolution/revolution/js/extensions/revolution-plugin.js"></script>
<!-- REVOLUTION SLIDER SCRIPT FILES -->
<script src="js/rev-script-1.js"></script>
HTML Structure
<!-- WELCOME SECTION START -->
<div class="section-full clearfix p-t80 bg-gray">
<div class="container">
<div class="section-content">
<div class="row">
<div class="col-lg-5 col-md-12 m-b30 text-uppercase text-black">
<span class="font-30 font-weight-300 d-block m-b10">Welcome</span>
<h2 class="font-40">
We are creative Building - Design Company
</h2>
<p>Dummy text is also used to demonstrate the appearance of different typefaces and layouts, and in general</p>
<p class="text-lowercase">typefaces and layouts, and in appearance of different general
the content of dummy text is nonsensical.typefaces and layouts,
different general the content of dummy text is nonsensical.
</p>
<a href="about-1.html" class="btn-half site-button button-lg m-b15"><span>Read More</span><em></em></a>
</div>
<div class="col-lg-7 col-md-12">
<div class="m-carousel-1 m-l100">
<div class="owl-carousel home-carousel-1 owl-btn-vertical-center">
<!-- COLUMNS 1 -->
<div class="item">
<div class="ow-img wt-img-effect zoom-slow">
<a href="about-1.html"><img src="images/gallery/pic1.jpg" alt=""></a>
</div>
</div>
<!-- COLUMNS 2 -->
<div class="item">
<div class="ow-img wt-img-effect zoom-slow">
<a href="about-1.html"><img src="images/gallery/pic2.jpg" alt=""></a>
</div>
</div>
<!-- COLUMNS 3 -->
<div class="item">
<div class="owl-img wt-img-effect zoom-slow">
<a href="about-1.html"><img src="images/gallery/pic3.jpg" alt=""></a>
</div>
</div>
<!-- COLUMNS 4 -->
<div class="item">
<div class="ow-img wt-img-effect zoom-slow">
<a href="about-1.html"><img src="images/gallery/pic4.jpg" alt=""></a>
</div>
</div>
<!-- COLUMNS 5 -->
<div class="item">
<div class="ow-img wt-img-effect zoom-slow">
<a href="about-1.html"><img src="images/gallery/pic5.jpg" alt=""></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hilite-title p-lr20 m-tb20 text-right text-uppercase bdr-gray bdr-right">
<strong>18 Year</strong>
<span class="text-black">Experience Working</span>
</div>
</div>
</div>
</div>
<!-- WELCOME SECTION END -->
Features
Click this button
Contact Form
You will need these 2 files to make contact form working 1 — (mail.php) , 2 — (custom.js)
<form class="contact-form cons-contact-form" method="post" action="form-handler.php">
<div class="contact-one p-a40 p-r150">
<div class="form-group">
<input name="username" type="text" required class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input name="email" type="text" class="form-control" required placeholder="Email">
</div>
<div class="form-group">
<textarea name="message" rows="3" class="form-control " required placeholder="Message"></textarea>
</div>
<button name="submit" type="submit" value="Submit" class="site-button black radius-no text-uppercase">
<span class="font-12 letter-spacing-5">Submit</span>
</button>
<div class="contact-info bg-black text-white p-a30">
<div class="wt-icon-box-wraper left p-b30">
<div class="icon-sm"><i class="iconmoon-smartphone-1"></i></div>
<div class="icon-content text-white ">
<h5 class="m-t0 text-uppercase">Phone number</h5>
<p>(456) 789 10 12</p>
</div>
</div>
<div class="wt-icon-box-wraper left p-b30">
<div class="icon-sm"><i class="iconmoon-email"></i></div>
<div class="icon-content text-white">
<h5 class="m-t0 text-uppercase">Email address</h5>
<p>Moderninfo@gmail.com</p>
</div>
</div>
<div class="wt-icon-box-wraper left">
<div class="icon-sm"><i class="iconmoon-travel"></i></div>
<div class="icon-content text-white">
<h5 class="m-t0 text-uppercase">Address info</h5>
<p>55/11 Land Street, Modern New Yourk City, USA</p>
</div>
</div>
</div>
</div>
</form>
Owl Carousel Edit Option
File path: js/custom.js
// > work carousel function by = owl.carousel.js ========================== //
function work_carousel(){
jQuery('.work-carousel').owlCarousel({
loop:true,
autoplay:false,
center: true,
items:3,
margin:0,
nav:true,
dots: false,
navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
responsive:{
0:{
items:1
},
854:{
items:2
}
}
});
}
More Info please browser the link: Owl Carousel Docs Options
How to edit/off Preloader
Please remove or comment the below code file path: js/custome.js
// > page loader function by = custom.js ========================= //
function page_loader() {
$('.loading-area').fadeOut(1000);
}
Also, please remove or comment the below code all HTML files
<!-- LOADING AREA START ===== -->
<div class="loading-area">
<div class="loading-box"></div>
<div class="loading-pic">
<svg id="triangle" width="140px" height="140px" viewBox="-3 -4 39 39">
<polygon fill="#fff" stroke="#000" stroke-width="2" points="16,0 32,32 0,32"></polygon>
</svg>
</div>
</div>
<!-- LOADING AREA END ====== -->
Credits
Note: All images are used for preview purpose only and not included in the final purchase files.
Images from:
——— https://www.shutterstock.com
——— https://www.freepik.com/
——— https://pixabay.com/
——— https://unsplash.com/
Google Fonts:
——— Roboto
——— Poppins
——— Crete Round