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
│──│──about.html
│──│──blog.html
│──│──contact.html
│──│──404.html
│──│──portfolio.html
│──│──pp.html
│──│──project.html
│──│──publication.html
│──│──services.html
│──│──skills.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-light.scss (and dark)". 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=Kanit: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&family=Sacramento&family=Unbounded:wght@200..900&display=swap');
$font-1: "Unbounded", sans-serif;
$font-2: "Kanit", sans-serif;
$font-3: "Sacramento", cursive;
/* -------------------------------------------
colors
------------------------------------------- */
$m1: #1D1D1D;
$m2: #737373;
$m3: #F7F7F7;
$m4: #FFFFFF;
$a: #FF4C33;
/* -------------------------------------------
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-light.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>
<title>Josie – Personal Portfolio & CV Resume HTML Template</title>
<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">
<!-- swiper css -->
<link rel="stylesheet" href="css/plugins/swiper.min.css">
<!-- okai css -->
<link rel="stylesheet" href="css/style-light.css">
<!-- 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">
<!-- preloader -->
<div class="mil-preloader">
...
</div>
<!-- preloader end -->
<!-- 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 -->
<!-- sidebar -->
<div class="mil-sidebar">
...
</div>
<!-- sidebar end -->
<!-- content -->
<div id="smooth-content" class="mil-content">
<div class="mil-content-frame" id="home">
<!-- banner -->
<div class="mil-banner mil-container-out-right">
...
</div>
<!-- banner end -->
<!-- services -->
<div class="mil-container mil-p-0-30" id="services">
...
</div>
<!-- services end -->
<!-- about -->
<div class="mil-container" id="about">
...
</div>
<div class="mil-container-out">
...
</div>
<div class="mil-container mil-p-90-90 mil-1200-p-30-90">
...
</div>
<!-- about end -->
<!-- portfolio -->
<div class="mil-container" id="portfolio">
...
</div>
<div class="mil-container-out mil-p-0-90">
...
</div>
<!-- portfolio end -->
<!-- blog -->
<div class="mil-container mil-p-0-90" id="blog">
...
</div>
<!-- blog end -->
<!-- skills -->
<div class="mil-container mil-p-0-90" id="skills">
...
</div>
<!-- skills end -->
<!-- experience -->
<div class="mil-container mil-p-0-30">
...
</div>
<!-- experience end -->
<!-- contact -->
<div class="mil-container" id="contact">
...
</div>
<div class="mil-container-out">
...
</div>
<div class="mil-container mil-p-90-90">
...
</div>
<!-- contact end -->
</div>
</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>