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 latest 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.
- phpmailer — folder for contact form.
HTML Files:
- about-1.html — About 1 page
- about-2.html — About 2 page
- blog-classic.html — Blog classic page
- blog-grid.html — Blog grid page
- blog-list.html — Blog list page
- blog-masonry.html — Blog list page
- blog-single.html — Blog post right sidebar page
- contact.html — Contact page
- error-404.html — Error Page
- faq.html — FAQ Page
- icon-font.html — Icons page
- index.html — Home page 1
- index-2.html — Home page 2
- 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>anih. Template | Home Page Style 1</title>
<!-- MOBILE SPECIFIC -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"><!-- BOOTSTRAP STYLE SHEET -->
<link rel="stylesheet" href="css/fontawesome/css/font-awesome.min.css" /><!-- FONTAWESOME STYLE SHEET -->
<link rel="stylesheet" href="css/owl.carousel.min.css"><!-- OWL CAROUSEL STYLE SHEET -->
<link rel="stylesheet" href="css/magnific-popup.min.css"><!-- MAGNIFIC POPUP STYLE SHEET -->
<link rel="stylesheet" href="css/loader.min.css"><!-- LOADER STYLE SHEET -->
<link rel="stylesheet" href="css/flaticon.min.css"><!-- FLATICON STYLE SHEET -->
<link rel="stylesheet" href="css/lc_lightbox.css" /><!-- IMAGE POPUP -->
<link rel="stylesheet" href="css/magic-mouse.css" /><!-- CURSUR CSS -->
<link rel="stylesheet" href="css/swiper-bundle.min.css" /><!-- SWIPER SLIDER CSS -->
<link rel="stylesheet" href="css/style.css"><!-- MAIN STYLE SHEET -->
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" 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.0.min.js.js"></script><!-- JQUERY.MIN JS -->
<script src="js/popper.min.js"></script><!-- POPPER.MIN JS -->
<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><!-- sticky header 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/theia-sticky-sidebar.js"></script><!--sticky content-->
<script src="js/lc_lightbox.lite.js" ></script><!-- IMAGE POPUP -->
<script src="js/magic_mouse.js"></script><!-- CURSOR POINT SCRIPT FILES -->
<script src="js/swiper-bundle.min.js"></script><!-- Swiper js -->
<script src="js/custom.js"></script><!-- CUSTOM FUCTIONS -->
HTML Structure
<!-- ABOUT COMPANY START -->
<div class="section-full mobile-page-padding p-t100 p-b70 bg-white" >
<div class="container">
<div class="section-content">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="a-about">
<div class="sx-media">
<img src="images/about/p1.jpg" alt="">
</div>
<div class="dot-corner"><img src="images/background/r-corner.png" alt=""></div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-12">
<div class="a-about-home-right">
<!-- TITLE START -->
<div class="section-head">
<div class="sx-separator-outer separator-left">
<div class="sx-separator" data-title="01">
<h2 class="sep-line-one typewrite" data-period="2000" data-type='[ "About us"]'><span class="wrap">About us</span></h2>
</div>
</div>
<p>We help to create strategies, design &development. We never underestimate any parts of each project as they're all essential to meeting the ultimate goal. you'll be engaged in with our positive and enthusiastic attitude. </p>
</div>
<!-- TITLE END -->
<div class="year-ex">
<div class="year-ex-info sx-bg-light">
<div class="year-ex-count"><span class="text-outline">05</span></div>
<div class="year-ex-content"><span class="info1 sx-text-black">Years Experience</span><span class="info2 sx-text-primary">Established 2016</span></div>
<div class="dot-corner"><img src="images/background/r-corner.png" alt=""></div>
</div>
</div>
<h3 class="sx-tilte">We are a branding agency with over seven hundred projects under our belt. We help to create strategy, design and development. </h3>
<a href="about-1.html" class="site-button-secondry btn-half outline ">Read More <span class="sx-bg-primary"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ABOUT COMPANY END -->
Features
Click this button
For Contact form
1.You have to put smtp detail inside mail.php file for contact form to run
2.You will also need to make some changes inside the custom.js file
Color Skin
Owl Carousel Edit Option
File path: js/custome.js
function home_client_carousel(){
jQuery('.home-client-carousel').owlCarousel({
loop:true,
nav:true,
dots: false,
margin:10,
autoplay:true,
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
Swiper Carousel Edit Option
File path: js/custome.js
//________ Team 2 slider function by = swiper-bundle.min.js ________//
function sx_team2_swiper(){
var swiper = new Swiper('.sx-team2-swiper ', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
freeMode: false,
loop: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
observer: true,
observeParents: true,
modifier: 1,
slideShadows: true,
},
autoplay: {
delay: 2500,
disableOnInteraction: true,
},
autoplay: false,
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
}
More Info please browser the link: Swiper 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">
<div class="cssload-preloader">
<div class="cssload-preloader-box">
<div>a</div>
<div>n</div>
<div>i</div>
<div>h</div>
</div>
</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/
Google Fonts:
Barlow Condensed
DM Sans
IconFont
FlatIcon
If you have any questions, please use our profile contact form on Envato ( https://themeforest.net/user/7xtheme ).
This documentation is February 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!