Terio - IT Solutions & Services HTML5 Template
by: bslthemes
Thank you for your purchase. If you have any questions, mail me to - beshleyua@gmail.com
File structure
After unpacking archive, you'll see this structure:
html/
│
├──doc/
├──template/
│──│──css/
│──│──│──bootstrap.min.css
│──│──│──color.css
│──│──│──fontawesome.min.css
│──│──│──jquery.fancybox.min.css
│──│──│──nice-select.css
│──│──│──responsive.css
│──│──│──style.css
│──│──│──swiper.css
│──│──img/
│──│──js/
│──│──│──bootstrap.min.js
│──│──│──custom.js
│──│──│──jquery-3.6.0.min.js
│──│──│──isotope.js
│──│──│──isotope-2.js
│──│──│──isotope.min.js
│──│──│──jquery.nice-select.min.js
│──│──│──jquery.fancybox.min.js
│──│──│──swiper.js
│──│──404error.html
│──│──about.html
│──│──blog-grid.html
│──│──blog-single-post.html
│──│──blog-single-post-2.html
│──│──contacts.html
│──│──index.html
│──│──index-2.html
│──│──index-3.html
│──│──portfolio-grid.html
│──│──portfolio-masonry.html
│──│──portfolio-metro.html
│──│──portfolio-single-v1.html
│──│──portfolio-single-v2.html
│──│──pricing.html
│──│──services.html
│──│──team.html
-
assets/css/ - all CSS styles for template
-
assets/css/style.css - main CSS styles for template
-
assets/js/ - all JS library for template
- assets/js/custom.js - main JS for template
Settings
Include of fonts
To use fonts, you must add @import in '/css/style.css' file:
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
Next step is to replace "font-family: '...';" to your fonts names.
Edit Icons
In this template are defined some of classes for icons, see all icons here - https://fontawesome.com/icons?d=gallery&s=brands,solid&m=free, use search and select icons.
Copy icon class (for example "fas fa-code") and add to tag in html file like this:
<i class="fas fa-pencil-ruler"></i>
HTML structure
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terio - Home</title>
<link rel="icon" href="assets/img/logo-icon.png">
<!-- CSS only -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<!-- Font Awesome 6 -->
<link rel="stylesheet" href="assets/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/css/jquery.fancybox.min.css">
<link rel="stylesheet" href="assets/css/swiper.css">
<!-- style -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- responsive -->
<link rel="stylesheet" href="assets/css/responsive.css">
<!-- color -->
<link rel="stylesheet" href="assets/css/color.css">
</head>
<body>
<!-- preloader start -->
<div class="preloader">
<div>
<div class="container">
<div class="squarebox one"></div>
<div class="squarebox two"></div>
<div class="squarebox three"></div>
<div class="squarebox two"></div>
<div class="squarebox three"></div>
<div class="squarebox four"></div>
<div class="squarebox three"></div>
<div class="squarebox four"></div>
<div class="squarebox five"></div>
</div>
</div>
</div>
<!-- preloader end -->
<header>
<div class="container">
...
</div>
<div class="mobile-nav hmburger-menu" id="mobile-nav" style="display:block;">
...
</header>
<section class="hero-section-one" style="background-image: url(https://via.placeholder.com/1920x982)">
...
</section>
<div class="brands-we-work one gap">
...
</div>
<section class="gap no-bottom">
...
</section>
<section class="how-it-works gap no-top">
...
</section>
<section class="project gap">
...
</section>
<section class="gap reaview-section">
...
</section>
<section class="gap no-bottom video-section" style="background-color :#f2edf5 ;">
...
</section>
<section class="latest-blog gap">
...
</section>
<footer class="gap no-bottom" style="background-color: #222 ;">
...
</footer>
<!-- Back to top button -->
<a id="button"></a>
<!-- Back to top button end -->
<!-- jQuery -->
<script src="assets/js/jquery-3.6.0.min.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- fancybox -->
<script src="assets/js/jquery.fancybox.min.js"></script>
<!-- swiper -->
<script src="assets/js/swiper.js"></script>
<script src="assets/js/custom.js"></script>
</body>
HTML structure of "Home" pages
<section class="hero-section-one" style="background-image: url(https://via.placeholder.com/1920x982)">
...
</section>
<div class="brands-we-work one gap">
...
</div>
<section class="gap no-bottom">
...
</section>
<section class="how-it-works gap no-top">
...
</section>
<section class="project gap">
...
</section>
<section class="gap reaview-section">
...
</section>
<section class="gap no-bottom video-section" style="background-color :#f2edf5 ;">
...
</section>
<section class="latest-blog gap">
...
</section>
HTML structure of "Inner" pages
<section class="splash-area-section">
<div class="container">
...
</div>
</section>
<section class="things-differently gap">
<div class="container">
...
</section>
<section class="we-deliver-results gap">
<div class="container">
...
</div>
</section>
<div class="counter-style gap">
<div class="container">
...
</div>
</div>
<div class="gap brands-we-work awards">
<div class="container">
...
</div>
</div>
<section class="offices gap">
<div class="container">
...
</div>
</section>
Icons
In this template are defined some of classes for icons, you can see all icons here - https://fontawesome.com/icons?d=gallery&s=brands,solid&m=free
Sourse & Credits
Scripts
Fonts
Images
Any Images or logos used in previews are not included in this item or final purchase.
-
Freepik, Unsplash, Envato Elements