by: bslthemes
Thank you for your purchase. If you have any questions, mail me to - beshleyua@gmail.com
After unpacking archive, you'll see this structure:
html/
│
├──doc/
├──template/
│──│──css/
│──│──scss/
│──│──img/
│──│──fonts/
│──│──js/
│──│──│──main.js
│──│──|──plugins/
│──│──index.html
│──│──home-2.html
│──│──home-3.html
│──│──home-4.html
│──│──project.html
│──│──publication.html
For editing styling, colors, sizes, etc of the template you can use following settings, folder "/scss/_variables.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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
$font-1: "Inter",
sans-serif;
$font-2: "Open Sans",
sans-serif;
/* -------------------------------------------
colors
------------------------------------------- */
$m-1: #141414;
$m-2: #8A8A8A;
$m-3: #fff;
$a-1: #FF8473;
$a-2: #FFE588;
$a-3: #7152E1;
/* -------------------------------------------
transition
------------------------------------------- */
$t-sm: .2s cubic-bezier(0, 0, 0.3642, 1);
$t-md: .4s cubic-bezier(0, 0, 0.3642, 1);
$t-lg: .6s cubic-bezier(0, 0, 0.3642, 1);
$t-xl: .8s cubic-bezier(0, 0, 0.3642, 1);
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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
Next step is to replace "$font-1: 'Inter'," to your fonts names.
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>
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Spoli – Personal Portfolio & 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">
<!-- font awesome css -->
<link rel="stylesheet" href="css/plugins/fontawesome.min.css">
<!-- swiper css -->
<link rel="stylesheet" href="css/plugins/swiper.min.css">
<!-- spoli css -->
<link rel="stylesheet" href="css/style.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 class="mil-page-wrapper">
<!-- top panel -->
<div class="mil-top-panel mil-no-anim">
...
</div>
<div class="mil-side-menu">
...
</div>
<!-- top panel end -->
<!-- hero -->
<div class="mil-hero-2 mil-b-m-1-soft" id="home" style="background-image: url(img/banner-2/2.png); background-size: 95%; background-position: center top; background-repeat: no-repeat">
...
</div>
<!-- hero end -->
<!-- about -->
<div class="mil-p-100-100" id="about">
...
</div>
<!-- about end -->
<!-- timeline -->
<div class="">
...
</div>
<!-- timeline end -->
<!-- skills -->
<div class="mil-p-0-100">
...
</div>
<!-- skills end -->
<!-- services -->
<div class="mil-b-m-1 mil-p-100-100" id="service">
...
</div>
<!-- services end -->
<!-- portfolio -->
<div class="mil-p-100-0" id="works">
...
</div>
<!-- portfolio end -->
<!-- subscribe -->
<div class="mil-p-200-0 mil-sm-p-100-0">
...
</div>
<!-- subscribe end -->
<!-- price -->
<div class="mil-p-200-40 mil-sm-p-100-40">
...
</div>
<!-- price end -->
<!-- reviews -->
<div class="mil-p-0-40" style="background-image: url(img/shapes/2.png); background-size: 100%; background-repeat: no-repeat;">
...
</div>
<!-- reviews end -->
<!-- blog end -->
<div class="mil-p-100-100" id="blog">
...
</div>
<!-- blog end -->
<!-- brands end -->
<div class="mil-p-0-100">
...
</div>
<!-- brands end -->
<!-- footer -->
<footer class="mil-b-m-1">
...
</footer>
<!-- footer end -->
</div>
<!-- wrapper end -->
<!-- jquery js -->
<script src="js/plugins/jquery.min.js"></script>
<!-- gsap js -->
<script src="js/plugins/gsap.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>
<!-- spoli js -->
<script src="js/main.js"></script>
</body>
</html>
<!-- top panel -->
<div class="mil-top-panel mil-no-anim">
<div class="mil-logo">
<a href="index.html"><img src="img/logo/l-1.png" alt="Spoli"></a>
</div>
<div class="container">
<div class="mil-tp-center mil-light">
<nav class="mil-main-menu mil-onepage-menu">
<ul>
<li>
<a href="#about">About.</a>
</li>
<li>
<a href="#works">Works.</a>
</li>
<li>
<a href="#contacts">Contacts.</a>
</li>
</ul>
</nav>
<div class="mil-tp-social">
<ul>
<li>
<a href="https://dribbble.com" target="blank"><i class="fab fa-dribbble"></i>Dribbble</a>
</li>
<li>
<a href="https://behance.com" target="blank"><i class="fab fa-behance"></i>Behance</a>
</li>
</ul>
</div>
</div>
</div>
<div class="mil-menu-btn-frame">
<div class="mil-menu-btn"><span></span></div>
</div>
</div>
<div class="mil-side-menu">
<div class="mil-side-content">
<div></div>
<div class="mil-side-pages-menu mil-onepage-side-menu">
<ul>
<li class="mil-has-children mil-current">
<a href="#home">Home</a>
<ul>
<li class="mil-current">
<a href="index.html">Home type 1</a>
</li>
<li>
<a href="home-2.html">Home type 2</a>
</li>
<li>
<a href="home-3.html">Home type 3</a>
</li>
<li>
<a href="home-4.html">Home type 4</a>
</li>
</ul>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#service">Services</a>
</li>
<li>
<a href="#works">Portfolio</a>
</li>
<li>
<a href="#blog">Blog</a>
</li>
<li>
<a href="#contacts">Contacts</a>
</li>
</ul>
</div>
<div class="mil-side-menu-footer">
<span class="mil-fs-16 mil-c-m-1">Copyright <a href="#." class="mil-c-grad">Spoli</a> 2024. All rights reserved.</span>
</div>
</div>
</div>
<!-- top panel end -->
<!-- footer -->
<footer class="mil-b-m-1">
<form>
<div class="container mil-relative mil-p-100-100 mil-sm-p-100-100" id="contacts">
<div class="row">
<div class="col-md-10">
<div class="mil-aic mil-mb-20 mil-up">
<img src="img/logo/xs.png" alt="logo" class="mil-w-12">
<span class="mil-fs-16 mil-ml-10">Get In Touch</span>
</div>
<h2 class="mil-ff-1 mil-fs-52 mil-c-grad mil-mb-20 mil-up">Give Me A Job!</h2>
<p class="mil-lh-150 mil-mb-60 mil-up">I have a fondness for clean designs, subtle interactions and delightful user <br>experiences. If you are interested you can check.</p>
<div class="mil-mb-10">
<div class="row">
<div class="col-lg-6 mil-mb-30 mil-up">
<label class="mil-fs-16 mil-fw-700 mil-ff-1 mil-c-m-3">Your Name</label>
<input type="text" placeholder="Enter your name">
</div>
<div class="col-lg-6 mil-mb-30 mil-up">
<label class="mil-fs-16 mil-fw-700 mil-ff-1 mil-c-m-3">Your Mail</label>
<input type="text" placeholder="infoflex@info.com">
</div>
<div class="col-lg-12 mil-up">
<label class="mil-fs-16 mil-fw-700 mil-ff-1 mil-c-m-3">Message</label>
<textarea placeholder="Write your message"></textarea>
</div>
</div>
</div>
<p class="mil-mb-100 mil-md-mb-60 mil-fs-14 mil-up"><span class="mil-c-grad">*</span> Call us 24/7 or fill out the form below to receive a free.</p>
<div class="mil-footer-submit mil-up">
<svg width="449" height="407" viewBox="0 0 449 407" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M267 47.5C261.5 42.5 258.5 38.5 234.119 24.9984C209.971 11.6257 216.413 45.0072 223.08 62.5457L316.929 247.265C326.894 268.177 335.961 302.107 292.509 270.534L150.943 137.072C132.838 123.917 107.103 118.562 149.003 202.389L197.776 313.017C210.026 340.037 225.618 390.209 189.989 374.735L86.5285 307.045C72.8835 298.649 51.4793 302.409 75.022 384.614" stroke="url(#paint0_linear_1032_3989)" stroke-width="2" />
<rect x="255.5" y="0.5" width="185" height="185" rx="92.5" stroke="url(#paint1_linear_1032_3989)" />
<rect x="263.5" y="0.5" width="185" height="185" rx="92.5" stroke="url(#paint2_linear_1032_3989)" />
<defs>
<linearGradient id="paint0_linear_1032_3989" x1="303.091" y1="178.428" x2="40.3741" y2="240.904" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFE588" offset="1" />
<stop offset="1" stop-color="#FF8473" />
</linearGradient>
<linearGradient id="paint1_linear_1032_3989" x1="348" y1="0" x2="348" y2="186" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFE588" offset="1" />
<stop offset="1" stop-color="#FF8473" />
</linearGradient>
<linearGradient id="paint2_linear_1032_3989" x1="356" y1="0" x2="356" y2="186" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFE588" offset="1" />
<stop offset="1" stop-color="#FF8473" />
</linearGradient>
</defs>
</svg>
<button type="submit" class="mil-ff-1 mil-fs-18 mil-tal mil-fw-700 mil-c-m-3">Submit Now</button>
</div>
</div>
</div>
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="position: absolute; left: -7%; top: 40%" class="mil-blue-star mil-up">
<path d="M4.34263 32.6269L32.6269 4.34264L35.6574 7.37309L7.37309 35.6574L4.34263 32.6269Z" fill="#7152E1" />
<path d="M17.6923 40V0H22.3077V40H17.6923Z" fill="#7152E1" />
<path d="M32.6269 35.6573L4.34264 7.37308L7.37309 4.34262L35.6574 32.6269L32.6269 35.6573Z" fill="#7152E1" />
<path d="M0 17.6923H40V22.3077H0V17.6923Z" fill="#7152E1" />
</svg>
</div>
</form>
<div class="mil-b-m-1-light mil-p-30-30">
<div class="container">
<div class="row mil-jcb mil-aic">
<div class="col col-md-4 mil-sm-hidden">
<div class="mil-aic">
<img src="img/logo/xs.png" alt="logo" class="mil-w-12">
<span class="mil-fs-16 mil-ml-10">Help.info@gmail.com</span>
</div>
</div>
<div class="col col-md-4 mil-jcc mil-sm-hidden"></div>
<div class="col col-md-4 mil-jce mil-sm-jcc">
<div class="mil-aic">
<img src="img/logo/xs.png" alt="logo" class="mil-w-12">
<span class="mil-fs-16 mil-ml-10">Copyright <a href="#." class="mil-c-grad">Spoli</a> 2024. All rights reserved.</span>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- footer end -->
In this template are defined some of classes for icons, your can see all icons here - https://fontawesome.com/v5/search
Any Images or logos used in previews are not included in this item or final purchase.