Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to email us
Template Installation
-
FTP Upload:
- Open up your FTP manager and connect to your hosting
- Browse to required directory (Normally public_html)
- Upload the files inside dalio-html folder.
Pages
- index.html 1st Home Page
- index-2.html 2nd Home Page
- index-3.html 3rd Home Page
- about-us.html About Us Page
- portfolio.html Portfolio Page
- service.html Service Page
- service-details.html Service Details Page
- blog.html Blog Grid Page
- blog-details.html Blog Details Page
- team.html Team Page
- testimonials.html Testimonials Page
- contact.html Contact Page
- 404.html Error Page
- mail.php mail.php file
Fonts
<!-- Google Fonts
============================================ -->
Inter, Roboto, Space Grotesk
@font-face {
font-family: 'Inter';
src: url('../fonts/Inter-Bold.woff2') format('woff2'),
url('../fonts/Inter-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('../fonts/Inter-Black.woff2') format('woff2'),
url('../fonts/Inter-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('../fonts/Inter-ExtraBold.woff2') format('woff2'),
url('../fonts/Inter-ExtraBold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('../fonts/Inter-Light.woff2') format('woff2'),
url('../fonts/Inter-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('../fonts/Inter-Regular.woff2') format('woff2'),
url('../fonts/Inter-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('../fonts/Inter-ExtraLight.woff2') format('woff2'),
url('../fonts/Inter-ExtraLight.woff') format('woff');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('../fonts/Inter-Thin.woff2') format('woff2'),
url('../fonts/Inter-Thin.woff') format('woff');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('../fonts/Inter-Regular.woff2') format('woff2'),
url('../fonts/Inter-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('../fonts/Inter-SemiBold.woff2') format('woff2'),
url('../fonts/Inter-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('../fonts/Inter-Medium.woff2') format('woff2'),
url('../fonts/Inter-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Black.woff2') format('woff2'),
url('../fonts/Roboto-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-BlackItalic.woff2') format('woff2'),
url('../fonts/Roboto-BlackItalic.woff') format('woff');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-BoldItalic.woff2') format('woff2'),
url('../fonts/Roboto-BoldItalic.woff') format('woff');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Bold.woff2') format('woff2'),
url('../fonts/Roboto-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-LightItalic.woff2') format('woff2'),
url('../fonts/Roboto-LightItalic.woff') format('woff');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Italic.woff2') format('woff2'),
url('../fonts/Roboto-Italic.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Medium.woff2') format('woff2'),
url('../fonts/Roboto-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Light.woff2') format('woff2'),
url('../fonts/Roboto-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-ThinItalic.woff2') format('woff2'),
url('../fonts/Roboto-ThinItalic.woff') format('woff');
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Space Grotesk';
src: url('../fonts/SpaceGrotesk-Bold.woff2') format('woff2'),
url('../fonts/SpaceGrotesk-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Space Grotesk';
src: url('../fonts/SpaceGrotesk-Light.woff2') format('woff2'),
url('../fonts/SpaceGrotesk-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Regular.woff2') format('woff2'),
url('../fonts/Roboto-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Space Grotesk';
src: url('../fonts/SpaceGrotesk-Light.woff2') format('woff2'),
url('../fonts/SpaceGrotesk-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Thin.woff2') format('woff2'),
url('../fonts/Roboto-Thin.woff') format('woff');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-MediumItalic.woff2') format('woff2'),
url('../fonts/Roboto-MediumItalic.woff') format('woff');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Space Grotesk';
src: url('../fonts/SpaceGrotesk-Regular.woff2') format('woff2'),
url('../fonts/SpaceGrotesk-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Space Grotesk';
src: url('../fonts/SpaceGrotesk-Medium.woff2') format('woff2'),
url('../fonts/SpaceGrotesk-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Space Grotesk';
src: url('../fonts/SpaceGrotesk-SemiBold.woff2') format('woff2'),
url('../fonts/SpaceGrotesk-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
Source File (CSS)
<!-- =========== All Stylesheet ================= -->
<link rel="shortcut icon" href="assets/images/home/favicon.png">
<!-- icon css -->
<link rel="stylesheet" href="assets/css/icons.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/slick.css">
<link rel="stylesheet" href="assets/css/aos.min.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/slick-theme.css">
<!-- main style css file -->
<link href="assets/css/style.css" rel="stylesheet">
Source File (JS)
<!-- ALl JS Plugins
====================================== -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/aos.min.js"></script>
<script src="assets/js/slick.min.js"></script>
<script src="assets/js/scrollUp.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/counterup.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/imagesloaded-pkgd.js"></script>
<script src="assets/js/magnific-popup.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/active.js"></script>
Customization
How to Change Logo
How to Change Title
How to Change Favicon
How to Change Page Banner
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: ***| ================================= /**** content /**** FONTS /**** MIXIN /**** TYPOGRAPHY /**** CUSTOM /**** BASE /**** BASE /**** BUTTON /**** ICON FONTS /**** BASIC /************************************* Template Section Styles **************************************/ /**** Menu - header - style /**** Menu - header - style /**** Menu - footer - style /**** blog - style /**** team - style /**** 404 - style /**** blog-details - style /**** blog-details - style /**** service-tetail- style /**** service-tetail- style /**** service-tetail- style /**** service-tetail- style /**** service-tetail- style /**** service-tetail- style /**** service-tetail- style /**** footer-1 - style /**** footer-1 - style */ *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.
JavaScript Customization
Change The Carosuels & Others with your's choice
/*** our-client */
$('.our-client-banner').slick({
dots: false,
autoplay: true,
speed: 5000,
arrows: false,
infinite: true,
slidesToShow: 4,
autoplaySpeed: 0,
cssEase: 'linear',
centerMode: true,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 4
}
},
{
breakpoint: 992,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 481,
settings: {
slidesToShow: 1
}
}
]
});