Template Features
- Unique Home Pages
- Easy to customize
- HTML5 & CSS3
- Clean & Simple Design
- Fully Responsive Layout
- Crossbrowser Compatible
- W3 Valid
- FlatIcons and Fontawesome icons
- Powered with Bootstrap
- Working Contact Form
Folders in Zip File
- css — folder with CSS files.
- fonts — folder with fonts files.
- images — folder with images files.
- js — folder with Javascript files.
- plugins — folder with Revolution slider files.
HTML Files:
- about-1.html — About 1 page
- blog-grid.html — Blog grid page
- blog-list.html — Blog list page
- blog-post.html — Blog Detail page
- blog-list.html — Blog post right sidebar page
- contact.html — Contact page
- error-404.html — Error Page
- faq-1.html — FAQ Page
- icon-font.html — Icons page
- index.html — Home page 1
- index-2.html — Home page 2
- index-3.html — Home page 3
- index-4.html — Home page 4
- There are many other html pages...
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>Shapen Template | Home Page Style 1</title>
<!-- MOBILE SPECIFIC -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- BOOTSTRAP STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- FONTAWESOME STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/fontawesome/css/font-awesome.min.css" />
<!-- OWL CAROUSEL STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css">
<!-- MAGNIFIC POPUP STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/magnific-popup.min.css">
<!-- LOADER STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/loader.min.css">
<!-- FLATICON STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/flaticon.min.css">
<!-- MAIN STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Color Theme Change Css -->
<link rel="stylesheet" class="skin" type="text/css" href="css/skin/skin-1.css">
<!-- Side Switcher Css-->
<link rel="stylesheet" type="text/css" href="css/switcher.css">
<!-- REVOLUTION SLIDER CSS -->
<link rel="stylesheet" type="text/css" href="plugins/revolution/revolution/css/settings.css">
<!-- REVOLUTION NAVIGATION STYLE -->
<link rel="stylesheet" type="text/css" href="plugins/revolution/revolution/css/navigation.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" 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.6.1.min.js"></script><!-- JQUERY.MIN JS -->
<script src="js/bootstrap.min.js"></script><!-- BOOTSTRAP.MIN JS -->
<script src="js/popper.min.js"></script><!-- POPPER.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/custom.js"></script><!-- CUSTOM FUCTIONS -->
<script src="js/shortcode.js"></script><!-- SHORTCODE FUCTIONS -->
<script src="js/jquery.bgscroll.js"></script><!-- BACKGROUND SCROLL -->
<script src="js/switcher.js"></script>
<!-- SWITCHER 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>
<!-- SLIDER REVOLUTION 5.0 EXTENSIONS (Load Extensions only on Local File Systems ! The following part can be removed on Server for On Demand Loading) -->
<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
<!-- OUR SPECIALLIZATION START -->
<div class="section-full mobile-page-padding our-speci_wrap bg-white p-t80 p-b30 bg-repeat square_shape1" style="background-image:url(images/background/bg-5.png);">
<div class="container">
<!-- IMAGE CAROUSEL START -->
<div class="section-content">
<div class="row">
<div class="col-xl-3 col-lg-4 col-md-6 m-b30">
<div class="image-effect-one hover-shadow">
<img src="images/pic1.jpg" alt="" />
<div class="figcaption">
<h4>Construction</h4>
<p>Engineering your dreams with us.</p>
<a href="project-detail.html"><i class="link-plus site-bg-primary"></i></a>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 m-b30">
<div class="image-effect-one hover-shadow">
<img src="images/pic2.jpg" alt="" />
<div class="figcaption">
<h4>Architecture</h4>
<p>Life is Architecture.</p>
<a href="project-detail.html"><i class="link-plus site-bg-primary"></i></a>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 m-b30">
<div class="image-effect-one hover-shadow">
<img src="images/pic3.jpg" alt="" />
<div class="figcaption site-bg-dark">
<h4>Renovation</h4>
<p>Dazzling Design</p>
<a href="project-detail.html"><i class="link-plus site-bg-primary"></i></a>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-12 col-md-6 m-b30">
<div class="mt-box our-speciallization-content">
<h3 class="m-t0"><span class="font-weight-100">Building</span> <br>It better in concrete.</h3>
<p>When it comes to your house, don’t mess with the rest, trust the best. Making your vision come true, that is what we do.</p>
<a href="about-1.html" class="site-button btn-effect">View All</a>
</div>
</div>
</div>
</div>
</div>
<div class="hilite-title text-right p-r50 text-uppercase text-pop-up-top">
<strong>Welcome</strong>
</div>
</div>
<!-- OUR SPECIALLIZATION END -->
Features
Click this button
Color Skin
Contact Form
You will need these 2 files to make contact form working 1 — (class.simple_mail.php) , 2 — (form-handler.php), 3 — (form-handler2.php)
<form class="contact-form cons-contact-form" method="post" action="form-handler.php">
<div class="contact-one m-b30">
<!-- TITLE START -->
<div class="section-head">
<div class="mt-separator-outer separator-left">
<div class="mt-separator">
<h2 class="text-uppercase sep-line-one "><span class="font-weight-300 site-text-primary">Get</span> In touch</h2>
</div>
</div>
</div>
<!-- TITLE END -->
<div class="contact-one-inner">
<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="4" class="form-control " required placeholder="Message"></textarea>
</div>
<div class="text-right">
<button name="submit" type="submit" value="Submit" class="site-button btn-effect">submit
</button>
</div>
</div>
</div>
</form>
Owl Carousel Edit Option
File path: js/custome.js
//________home_client_carouse function by = owl.carousel.js ________//
function home_client_carousel(){
jQuery('.home-client-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
dots: false,
navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
responsive:{
0:{
items:2
},
480:{
items:3
},
767:{
items:4
},
1000:{
items:5
}
}
});
}
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 page_loader() {
jQuery('.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">
<div class="cssload-loader">Loading</div>
</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/
IconFont
FlatIcon
If you have any questions, please use our profile contact form on Envato ( https://themeforest.net/user/7xtheme ).
This documentation is October 2022
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!