Busico Multipurpose Bootstrap 5 HTML Template Documentation
Template Installation
BUSICO Multipurpose Bootstrap 5 HTML Template Documentation- FTP Upload:
- Open up your FTP manager and connect to your hosting
- Browse to required directory (Normally public_html)
- Upload the files inside busico-html folder.
Pages
-
- index.html 1st Home Page
- index-2.html 2nd Home Page
- index-3.html 3rd Home Page
- index-3.html 4th Home Page
- about.html About Page
- about-2.html About 2 Page
- team.html Team Page
- team-details.html Team Details Page
- contact.html Contact Page
- faq.html FAQ Page
- project.html Project Page
- project-2.html Project 2 Page
- pricing.html pricing Page
- pricing-2.html pricing 2 Page
- project-details.html Project Details Page
- services.html Services Page
- services-2.html Services 2 Page
- services-details.html Single services Details Page
- 404.html 404 - Error Page
- news.html News - Blog Page
- news-details.html Single News / Blog Details Page
- mail.php mail.php file
Fonts
<!-- Google Fonts
============================================ -->
Roboto - <link href='https://fonts.google.com/specimen/Roboto' rel='stylesheet' type='text/css'>
Exo 2 - <link href='https://fonts.google.com/specimen/Exo+2?query=exo+2' rel='stylesheet' type='text/css'>
oswald - <link href='https://fonts.google.com/specimen/oswald' rel='stylesheet' type='text/css'>
1 More Font Family: Cambria (Default)
Source File (CSS)
<!-- =========== All Stylesheet ================= -->
<!-- fontawesome css plugins
============================================ -->
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!-- metismenu CSS
============================================ -->
<link rel="stylesheet" href="assets/css/metismenu.css">
<
!-- animate CSS
============================================ -->
<link rel="stylesheet" href="assets/css/animate.css">
<!-- magnific-popup CSS
============================================ -->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!-- Owl Carousel CSS
============================================ -->
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<!-- Owl Carousel CSS
============================================ -->
<link rel="stylesheet" href="assets/css/owl.theme.css">
<!-- Bootstrap CSS
============================================ -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Template Style CSS
============================================ -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Style CSS
============================================ -->
<link rel="stylesheet" href="style.css">
Source File (JS)
<!-- All JS Plugins -->
<!-- jQuery
============================================ -->
<script src="assets/js/jquery-1.12.4.min.js"></script>
<!-- Bootstrap
============================================ -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Others jQuery Plugins
============================================ -->
<script src="assets/js/jquery.easing.1.3.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/scrollUp.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/magnific-popup.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/metismenu.js"></script>
<!-- Main JS
============================================ -->
<script src="assets/js/active.js"></script>
Customization
How to Change Logo
How to Change Title
How to Change Favicon
How to Change Hero Sliders Section Homepage
How to Change Section Titile
How to Change Page Banner
How to Change Serivce
How to Change Single-skill Item
How to Change Single Pricing Plane Item
How to Change Blog Section Item
How to Change Mail Address with Your's - Open mail.php file and edit.
How to Change Social Links
How to Change Copyright
SCSS Structure
CSS Structure
I'm using One SCSS files in this template. You change the SCSS Code of style.scss file================================= |*** Table of contents: ***| ================================= 1. General styles 2. Typography 3. Helpers 4. Preloader 5. Go up button 6. Header and navigation 7. Hero Section 8. About us 9. Causes 10. Fun facts 11. Events 12. Blog *Note: Responsive css in style.css file bottom.If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited. Home Page Hero Sliders section CSS - find and change it on _hero.scss from "assets/scss" folder
/* ----------------------------------
Hero Section - Styles
------------------------------------ */
.hero-1 {
position: relative;
.hero-contents {
padding-top: 215px;
padding-bottom: 220px;
overflow: hidden;
@media (min-width: 991px) {
margin-left: 20px;
}
@media (max-width: 1200px) {
padding-top: 180px;
padding-bottom: 190px;
}
@media (max-width: 991px) {
padding-top: 120px;
padding-bottom: 120px;
}
@media (max-width: 767px) {
padding-top: 100px;
padding-bottom: 110px;
}
h1 {
margin-bottom: 30px;
color: #fff;
@media (max-width: 767px) {
margin-bottom: 25px;
}
}
p {
margin-bottom: 20px;
color: #EBEDF2;
font-size: 20px;
}
.theme-btn {
margin-top: 20px;
overflow: hidden;
margin-right: 20px;
}
.plus-text-btn {
color: #fff;
display: inline-block;
overflow: hidden;
clear: both;
margin-top: 20px;
&:hover {
.icon {
background: $theme-color;
color: #fff;
}
color: $theme-color;
}
.icon {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
color: $second-color;
background: #fff;
border-radius: 50px;
margin-right: 20px;
float: left;
overflow: auto;
transition: all .3s ease-in-out;
}
.link-text {
float: left;
overflow: auto;
}
span {
display: block;
}
}
}
.hero-slider-active {
position: relative;
&.owl-theme {
&:hover {
.owl-nav {
div {
opacity: 1;
visibility: visible;
transform: scale(1);
}
}
}
.owl-nav {
margin: 0;
div {
left: 20px;
top: 50%;
position: absolute;
transform: translateY(-50%);
color: $white;
background-color: transparent;
margin: 0;
padding: 0;
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
font-size: 20px;
display: inline-block;
border-radius: 0px;
z-index: 99;
border-radius: 50%;
border: 2px solid #fff;
transition: all .3s ease-in-out;
opacity: 0;
visibility: hidden;
transform: scale(.85);
@media (max-width: 991px) {
width: 50px;
height: 50px;
line-height: 50px;
font-size: 16px;
}
@media (max-width: 767px) {
width: 40px;
height: 40px;
line-height: 40px;
font-size: 14px;
}
@media (max-width: 500px) {
display: none;
}
&:hover {
border-color: $theme-color;
background-color: $theme-color;
box-shadow: 0px 10px 35px 0px rgba(38, 42, 76, 0.1);
color: #fff;
}
&.owl-next {
left: auto;
right: 20px;
}
}
}
}
}
.owl-nav {
div {
position: absolute;
right: 120px;
bottom: 0;
padding: 18px 31px;
line-height: 1;
text-transform: uppercase;
background-color: #fff;
color: $theme-color;
@media (max-width: 767px) {
font-size: 14px;
padding: 14px 28px;
right: 108px;
}
&:hover {
color: $second-color;
}
&.owl-prev {
i {
margin-right: 5px;
}
}
&.owl-next {
right: 0px;
i {
margin-left: 5px;
}
}
}
}
}
Change section padding CSS - find and change it on style.css or _section.scss file from scss folder
.section-padding {
padding: 120px 0px;
}
JavaScript Customization
Change The Carosuels & Others with your's choice
function loader() {
$(window).on('load', function() {
// Animate loader off screen
$(".preloader").delay(700).fadeOut();
});
}
loader();
$(".hero-1 .hero-slider-active").owlCarousel({
items: 1,
dots: false,
loop: true,
autoplayTimeout: 8000,
autoplay:true,
nav: true,
navText: ['PREV', 'Next'],
});
Thanks
Once again thank you for purchasing one of our Templates
Best Regards RRDevs
