File structure
After unpacking archive, you'll see this structure:
html/
│
├──doc/
├──template/
│──│──css/
│──│──scss/
│──│──img/
│──│──fonts/
│──│──js/
│──│──│──main.js
│──│──|──plugins/
│──│──index.html
│──│──home-1.html
│──│──home-2.html
│──│──home-3.html
│──│──home-4.html
│──│──home-5.html
│──│──home-6.html
│──│──home-7.html
│──│──home-8.html
│──│──home-9.html
│──│──home-10.html
│──│──home-11.html
│──│──home-12.html
│──│──home-13.html
│──│──404.html
│──│──about.html
│──│──blog.html
│──│──contact.html
│──│──coming-soon.html
│──│──publication.html
│──│──services.html
│──│──item.html
│──│──store.html
│──│──project.html
│──│──portfolio-1.html
│──│──portfolio-2.html
│──│──portfolio-3.html
│──│──portfolio-slider.html
│──│──portfolio-slider-2.html
│──│──pricing.html
-
css/ - compiled css styles for template
-
scss/ - main .scss styles for template
-
js/ - all JS library for template
- main.js - main JS for template
Template Settings
For editing styling, colors, sizes, etc of the template you can use following settings, folder "/scss/_variables.scss". You need to compile the .sсss files to "/css" folder. You can use the "Visual Studio Code" app -> "Live Sass Compiler".
/* -------------------------------------------
fonts
------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
$font-1: "Poppins", sans-serif;
/* -------------------------------------------
colors
------------------------------------------- */
$d1: #0A0B0F;
$d2: #14151A;
$l1: #FFFFFF;
$l2: #73767B;
$a: #F35A38;
$as: #f2b279;
/* -------------------------------------------
transition
------------------------------------------- */
$tsm: .2s cubic-bezier(0, 0, 0.3642, 1);
$tmd: .4s cubic-bezier(0, 0, 0.3642, 1);
$tlg: .6s cubic-bezier(0, 0, 0.3642, 1);
$txl: .8s cubic-bezier(0, 0, 0.3642, 1);
Include of fonts
For editing fonts of the template you can use following settings, folder "/scss/_variables.scss". You need to compile the .sсss files to "/css" folder. You can use the "Visual Studio Code" app -> "Live Sass Compiler".
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
Next step is to replace "$font-1: 'Questrial'," to your fonts names.
Edit Icons
In this template are defined some of classes for icons, see all icons here - https://fontawesome.com/v5/search, 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="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="HandheldFriendly" content="true">
<meta name="author" content="bslthemes" />
<!-- grid css -->
<link rel="stylesheet" href="css/plugins/bootstrap-grid.css">
<!-- font awesome css -->
<link rel="stylesheet" href="fonts/css/font-awesome.min.css">
<!-- swiper css -->
<link rel="stylesheet" href="css/plugins/swiper.min.css">
<!-- okai css -->
<link rel="stylesheet" href="css/style.css">
<!-- page title -->
<title>Okai - Creative Portfolio & Agency HTML Template</title>
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<!-- wrapper -->
<div id="smooth-wrapper" class="mil-page-wrapper">
<!-- cursor -->
<div class="mil-cursor-follower"></div>
<!-- cursor end -->
<!-- scroll progress -->
<div class="mil-progress-track">
<div class="mil-progress"></div>
</div>
<!-- scroll progress end -->
<!-- top panel -->
<div class="mil-top-panel">
...
</div>
<!-- top panel end -->
<!-- menu -->
<div class="mil-menu-window">
...
</div>
<!-- menu end -->
<!-- content -->
<div id="smooth-content" class="mil-content">
<!-- banner -->
<div class="mil-banner">
...
</div>
<!-- banner end -->
<!-- experience -->
<div class="">
...
</div>
<!-- experience end -->
<!-- portfolio -->
<div class="mil-portfolio mil-p-120-90">
...
</div>
<!-- portfolio end -->
<!-- call to action -->
<div>
...
</div>
<!-- call to action end -->
<!-- reviews -->
<div class="mil-p-120-120">
...
</div>
<!-- reviews end -->
<!-- blog -->
<div class="mil-p-0-90">
...
</div>
<!-- blog end -->
<!-- call to action -->
<div class="mil-accent-section mil-up mil-p-180-180">
...
</div>
<!-- call to action end -->
<!-- footer -->
<footer>
...
</footer>
<!-- footer end -->
</div>
<!-- content -->
</div>
<!-- wrapper end -->
<!-- gsap js -->
<script src="js/plugins/gsap.min.js"></script>
<!-- scroll smoother -->
<script src="js/plugins/ScrollSmoother.min.js"></script>
<!-- scroll trigger js -->
<script src="js/plugins/ScrollTrigger.min.js"></script>
<!-- scroll to js -->
<script src="js/plugins/ScrollTo.min.js"></script>
<!-- swiper js -->
<script src="js/plugins/swiper.min.js"></script>
<!-- okai js -->
<script src="js/main.js"></script>
</body>
</html>
</html>