Getting Started
Thank you for choosing our template. This documentation will help you get started creating your site with Rakon. If you face any problems , Please open a ticket in the support forum to get in touch with us.
First Steps
All the files are well organized, its so easy to work with the template.
- Unzip the files.
- Open "Rakon-MultiPurpose Template" folder.
- You will find two folders, One is for "Source files" it has icons , illustration and license of the used font "circular-std-master" the second is for "main-file" it has Documentation folder and rakon-template folder.
-
rakon-template Folder ==> Contains on
- html Folder Contains HTML Files.
- html-rtl Folder Contains HTML Files.
-
Assets Folder Contains on Css, Fonts, Img and Js.
- Fonts Contains on icon files "The-Icon-of" and text-font Folder that used in the site.
Main File Structure
All the files are well organized, its so easy to work with the template.
Body Structure
All the files are well organized, its so easy to work with the template.
Css Files
<!-- Bootstrap 4.5 -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css" />
<!-- Bootstrap rtl 4.2 -->
<link rel="stylesheet" href="assets/css/bootstrap-rtl.min.css" type="text/css" />
<!-- animate -->
<link rel="stylesheet" href="assets/css/animate.css" type="text/css" />
<!-- Swiper -->
<link rel="stylesheet" href="assets/css/swiper.min.css" />
<!-- aos -->
<link rel="stylesheet" href="assets/css/aos.css" type="text/css" />
<!-- icons -->
<link rel="stylesheet" href="assets/css/icons.css" type="text/css" />
<!-- main css -->
<link rel="stylesheet" href="assets/css/main.css" type="text/css" />
<!-- main rtl css -->
<link rel="stylesheet" href="assets/css/main-rtl.css" type="text/css" />
<!-- normalize -->
<link rel="stylesheet" href="assets/css/normalize.css" type="text/css" />
Default Header
<!-- Start header -->
<header class="header-nav-center" id="myNavbar">
<div class="container">
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="sass-products.html">
<img class="logo" src="../Rakon/assets/img/logo.svg" alt="logo" />
Rakon
</a>
<button class="navbar-toggler menu ripplemenu" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<svg viewBox="0 0 64 48">
<path d="M19,15 L45,15 C70,15 58,-2 49.0177126,7 L19,37"></path>
<path d="M19,24 L45,24 C61.2371586,24 57,49 41,33 L32,24"></path>
<path d="M45,33 L19,33 C-8,33 6,-2 22,14 L45,37"></path>
</svg>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto nav-pills">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Products">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#faq">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Testimonial">Testimonial</a>
</li>
</ul>
<div class="nav_account">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#mdllLogin">Sign in</button>
<a href="#Testimonial" class="btn scale btn_sm_primary bg-blue c-white effect-letter rounded-pill">
Try for free
</a>
</div>
</div>
</nav>
<!-- End Navbar -->
</div>
<!-- end container -->
</header>
<!-- End header -->
All Sections are inside the tag <main>
The base structure was organized by row, col-** class
<main data-spy="scroll" data-target="#navbar-example2" data-offset="0">
<!-- Start Banner Section -->
<section class="demo_1 banner_section" id="home">
<div class="container">
<div class="row justify-content-md-center text-center">
<div class="col-md-6">
<div class="banner_title">
<h1>Your Visual Bookmark Manager</h1>
<p>
The project management tool teams use to stay organized, avoid delays, and have time for the work that matters most.
</p>
<button type="button" class="btn scale rounded-pill btn-video btn_video" data-toggle="modal" data-src="https://www.youtube.com/embed/VvHoHw5AWTk" data-target="#mdllVideo">
<span class="tio play_circle"></span>
Discover this video
</button>
</div>
</div>
<!-- image Product -->
<div class="image_product">
<img src="../Rakon/assets/img/web-sass.png" alt="" />
</div>
</div>
</div>
</section>
<!-- End Banner -->
</main>
Tilte Section
You can use class .title_sections for titles
<div class="title_sections">
<div class="before_title">
<span>Cryptocurrency</span>
<span>Portfolio</span>
</div>
<h2>A project planner that won't let anything slip through the cracks</h2>
<p>
Lovely to look at and easy-to-use, Toggl Plan gives teams a visual overview of who’s doing what, and what’s coming up next. That means less stress and better results.
</p>
</div>
Default Footer
<!-- Start footer -->
<footer class="footer_short position-relative bg-white padding-py-3 z-index-1">
<div class="container">
<div class="row justify-content-md-center text-center">
<div class="col-md-8">
<a class="logo c-dark" href="sass-products.html">
<img src="../Rakon/assets/img/logo.svg" alt="">
Rakon
</a>
<div class="social--media">
<a href="#" class="btn so-link">
<span class="tio appstore"></span>
</a>
<a href="#" class="btn so-link">
<span class="tio github"></span>
</a>
<a href="#" class="btn so-link">
<span class="tio instagram"></span>
</a>
<a href="#" class="btn so-link">
<span class="tio google"></span>
</a>
<a href="#" class="btn so-link">
<span class="tio twitter"></span>
</a>
<a href="#" class="btn so-link">
<span class="tio facebook_square"></span>
</a>
</div>
<div class="other--links">
<a href="#">White paper</a>
<a href="#">Support</a>
<a href="#">API</a>
<a href="#">Privacy Policy</a>
<a href="#">Cookie Policy</a>
</div>
<div class="opyright">
<p>
© 2020 <a href="https://themeforest.net/user/orinostu" target="_blank">OrinoStu.</a> All Right Reseved
</p>
</div>
</div>
</div>
</div>
</footer>
<!-- End. Footer -->
JavaScript Fils
Add JavaScript before end the tag of </body>
<!-- jquery -->
<script src="assets/js/jquery-3.5.0.js" type="text/javascript"></script>
<!-- jquery-migrate -->
<script src="assets/js/jquery-migrate.min.js" type="text/javascript"></script>
<!-- popper -->
<script src="assets/js/popper.min.js" type="text/javascript"></script>
<!-- bootstrap -->
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
<!--
============
vendor file
============
-->
<!-- particles -->
<script src="assets/js/vendor/particles.min.js" type="text/javascript"></script>
<!-- TweenMax -->
<script src="assets/js/vendor/TweenMax.min.js" type="text/javascript"></script>
<!-- ScrollMagic -->
<script src="assets/js/vendor/ScrollMagic.js" type="text/javascript"></script>
<!-- animation.gsap -->
<script src="assets/js/vendor/animation.gsap.js" type="text/javascript"></script>
<!-- addIndicators -->
<script src="assets/js/vendor/debug.addIndicators.min.js" type="text/javascript"></script>
<!-- Swiper js -->
<script src="assets/js/vendor/swiper.min.js" type="text/javascript"></script>
<!-- countdown -->
<script src="assets/js/vendor/countdown.js" type="text/javascript"></script>
<!-- simpleParallax -->
<script src="assets/js/vendor/simpleParallax.min.js" type="text/javascript"></script>
<!-- waypoints -->
<script src="assets/js/vendor/waypoints.min.js" type="text/javascript"></script>
<!-- counterup -->
<script src="assets/js/vendor/jquery.counterup.min.js" type="text/javascript"></script>
<!-- charming -->
<script src="assets/js/vendor/charming.min.js" type="text/javascript"></script>
<!-- imagesloaded -->
<script src="assets/js/vendor/imagesloaded.pkgd.min.js" type="text/javascript"></script>
<!-- aos -->
<script src="assets/js/vendor/aos.js" type="text/javascript"></script>
<!-- BX-Slider -->
<script src="assets/js/vendor/jquery.bxslider.min.js" type="text/javascript"></script>
<!-- main file -->
<script src="assets/js/main.js" type="text/javascript"></script>
JavaScript Files for pages
JavaScript codes for some pages
<!-- agency -->
<script src="assets/js/pages/agency.js" type="text/javascript"></script>
<!-- crypto -->
<script src="assets/js/pages/crypto.js" type="text/javascript"></script>
<!-- hosting -->
<script src="assets/js/pages/hosting.js" type="text/javascript"></script>
<!-- interior -->
<script src="assets/js/pages/interior.js" type="text/javascript"></script>
<!-- mobile -->
<script src="assets/js/pages/mobile.js" type="text/javascript"></script>
<!-- sass -->
<script src="assets/js/pages/sass.js" type="text/javascript"></script>
<!-- sass2 -->
<script src="assets/js/pages/sass2.js" type="text/javascript"></script>
Css Structure
To add or edit you can use Sass Files.
Header
/* =========
Style header Default
============*/
header .navbar {
height: 80px;
}
header .navbar .navbar-brand {
font-weight: 500;
font-size: 20px;
}
header .navbar .navbar-brand .logo {
vertical-align: bottom;
margin-right: .5rem;
width: 27px;
}
header .navbar .navbar-collapse {
margin-top: .4rem;
}
header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
font-size: 16px;
font-weight: 400;
text-transform: capitalize;
margin-right: 1.25rem;
}
header .navbar .navbar-collapse .nav_account .btn {
font-size: 15px;
}
header .navbar .navbar-collapse .nav_account.btn_demo2 .btn_sm_primary {
background-color: rgba(22, 93, 245, 0.1);
color: #165DF5;
}
header .navbar .navbar-collapse .nav_account.btn_demo3 .btn_sm_primary {
border: 1px solid #EDEEF1;
}
@media (max-width: 767px) {
header {
background: rgba(255, 255, 255, 0.8);
-webkit-backdrop-filter: saturate(1) blur(20px) !important;
-moz-backdrop-filter: saturate(1) blur(20px) !important;
-o-backdrop-filter: saturate(1) blur(20px) !important;
-ms-backdrop-filter: saturate(1) blur(20px) !important;
backdrop-filter: saturate(1) blur(20px) !important;
}
header .navbar-toggler:focus {
border: 0;
outline: 0;
box-shadow: none;
}
header .navbar {
height: auto;
padding: .75rem;
}
header .navbar-brand {
color: #0B2238 !important;
font-size: 18px !important;
}
header .navbar-brand .logo {
width: 24px !important;
}
header .navbar-collapse {
margin-left: 0 !important;
}
header .navbar-collapse .navbar-nav {
padding-bottom: 1rem;
}
header .navbar-collapse .navbar-nav .nav-item .nav-link {
color: #0B2238 !important;
}
header .navbar-collapse .navbar-nav .nav-item .nav-link.active {
color: #165DF5 !important;
}
header .navbar-collapse .nav_account {
border-top: 1px solid #EDEEF1;
padding: 1rem 0;
}
header .navbar-collapse .nav_account .btn-default {
color: #0B2238 !important;
}
header .navbar-collapse .nav_account .btn-primary {
background-color: #165DF5 !important;
color: #ffffff !important;
}
}
/* =========
header-nav-center
============*/
.header-nav-center {
width: 100%;
left: 0;
z-index: 12;
}
.header-nav-center .navbar-brand {
color: #0B2238;
}
.header-nav-center .navbar-collapse .nav-item .nav-link {
color: #0B2238;
-webkit-transition: 0.4s !important;
-moz-transition: 0.4s !important;
-o-transition: 0.4s !important;
-ms-transition: 0.4s !important;
transition: 0.4s !important;
}
.header-nav-center .navbar-collapse .nav-item .nav-link:hover {
color: #165DF5;
}
.header-nav-center .navbar-collapse .nav-item .nav-link.active {
color: #165DF5;
background-color: transparent;
}
.header-nav-center .navbar-collapse .nav-item.active .nav-link {
color: #165DF5;
background-color: transparent;
}
Footer
/*===========
footer_short
===========*/
.footer_short .social--media {
margin-top: 2.25rem;
}
.footer_short .social--media .so-link {
width: 50px;
height: 50px;
border-radius: 20px;
background-color: rgba(11, 34, 56, 0.05);
margin: 0 .25rem;
-webkit-transition: 0.3s !important;
-moz-transition: 0.3s !important;
-o-transition: 0.3s !important;
-ms-transition: 0.3s !important;
transition: 0.3s !important;
}
@media (max-width: 767px) {
.footer_short .social--media .so-link {
margin-bottom: .5rem;
}
}
.footer_short .social--media .so-link .tio {
display: flex;
justify-content: center;
text-align: center;
font-size: 22px;
color: #0B2238;
padding-top: .6rem;
-webkit-transition: 0.3s !important;
-moz-transition: 0.3s !important;
-o-transition: 0.3s !important;
-ms-transition: 0.3s !important;
transition: 0.3s !important;
}
.footer_short .social--media .so-link:hover {
background-color: #165DF5;
}
.footer_short .social--media .so-link:hover .tio {
color: #ffffff;
}
.footer_short .other--links {
margin-top: 1.5rem;
}
.footer_short .other--links a {
color: #6C7A87;
font-size: 16px;
font-weight: 400;
margin: .6rem;
-webkit-transition: 0.3s !important;
-moz-transition: 0.3s !important;
-o-transition: 0.3s !important;
-ms-transition: 0.3s !important;
transition: 0.3s !important;
}
@media (max-width: 767px) {
.footer_short .other--links a {
margin-bottom: .5rem;
}
}
.footer_short .other--links a:hover {
color: #0B2238;
}
.footer_short .opyright {
margin-top: 1.5rem;
}
.footer_short .opyright p {
font-size: 14px;
font-weight: 400;
color: #9DA6AF;
}
.footer_short .opyright p a {
color: #0B2238;
-webkit-transition: 0.3s !important;
-moz-transition: 0.3s !important;
-o-transition: 0.3s !important;
-ms-transition: 0.3s !important;
transition: 0.3s !important;
}
.footer_short .opyright p a:hover {
color: #165DF5;
}
/*==========
Full Footer
==========*/
.defalut-footer.light::before {
display: none;
}
.defalut-footer.light .item_about .logo {
color: #0B2238;
}
.defalut-footer.light .item_about p {
color: #6C7A87;
}
.defalut-footer.light .item_about .address span {
color: #0B2238;
}
.defalut-footer.light .item_about .address span a {
color: #165DF5;
}
.defalut-footer.light .item_links h4 {
color: #0B2238;
}
.defalut-footer.light .item_links .nav-link {
color: #6C7A87;
}
.defalut-footer.light .item_links .nav-link:hover {
color: #0B2238;
}
.defalut-footer.light .item_subscribe h4 {
color: #0B2238;
}
.defalut-footer.light .item_subscribe p {
color: #6C7A87;
}
.defalut-footer.light .item_subscribe .input_subscribe input {
border-color: #EDEEF1;
color: #0B2238 !important;
}
.defalut-footer.light .item_subscribe .input_subscribe input::placeholder {
color: #9DA6AF;
}
.defalut-footer.light .item_subscribe .input_subscribe .btn_subscribe {
color: #0B2238;
}
.defalut-footer.light .item_subscribe .input_subscribe:hover .btn_subscribe {
background-color: #FD6B3B;
color: #ffffff;
}
.defalut-footer.light .item_subscribe .app_smartphone .btn--app .blue {
background-color: rgba(22, 93, 245, 0.1);
}
.defalut-footer.light .item_subscribe .app_smartphone .btn--app .blue .tio {
color: #165DF5;
}
.defalut-footer.light .item_subscribe .app_smartphone .btn--app .dark {
background-color: rgba(56, 24, 64, 0.1);
}
.defalut-footer.light .item_subscribe .app_smartphone .btn--app .dark .tio {
color: #381840;
}
.defalut-footer.light .select-menu .button {
background: rgba(11, 34, 56, 0.05);
color: #0B2238;
font-size: 14px;
}
.defalut-footer.light .select-menu .button ul li {
color: #0B2238;
}
.defalut-footer.light .select-menu .button em::before {
border-left: 2px solid #6C7A87;
border-top: 2px solid #6C7A87;
}
.defalut-footer.light .select-menu .button em::after {
border-right: 2px solid #6C7A87;
border-bottom: 2px solid #6C7A87;
}
.defalut-footer.light .select-menu > ul {
background-color: #F7F8FA;
}
.defalut-footer.light .copyright span {
color: #6C7A87;
}
.defalut-footer.light .copyright span a {
color: #0B2238;
-webkit-transition: 0.3s !important;
-moz-transition: 0.3s !important;
-o-transition: 0.3s !important;
-ms-transition: 0.3s !important;
transition: 0.3s !important;
}
.defalut-footer.light .copyright span a:hover {
color: #165DF5;
}
Scss Structure
All the files are well organized, its so easy to work with the template.
Section
You can use class .title_sections for titles
// Default Sections Title
.title_sections {
margin-bottom: 4rem;
@include maxMobile {
margin-bottom: 3rem;
}
.before_title {
margin-bottom: 20px;
span {
color: $dark-color;
font-size: 16px;
font-weight: 500;
&:last-child {
color: $blue-color;
}
}
}
h2 {
font-size: 2.188em;
margin-bottom: 20px;
font-weight: 600;
color: $dark-color;
}
p {
color: $gray-color;
font-size: 16px;
font-weight: 400;
margin-bottom: 20px;
}
}
// feature_app
.feature_app {
background-color: rgba(#381840, .05);
.app--crypto {
width: 100%;
@include prefixer(box-shadow, 0px 0px 70px 0px rgba(56,24,64,0.1), webkit mo o ms);
@include prefixer(border-radius, 52px, webkit mo o ms);
}
.item-feat {
margin-bottom: 7rem;
@include maxMobile {
direction: ltr;
margin-bottom: 2rem;
}
.icon-iim {
width: 60px;
height: 60px;
background-color: $white-color;
display: flex;
text-align: center;
justify-content: center;
border-radius: 15px;
margin-bottom: 1.25rem;
padding: 1rem;
}
h3 {
font-size: 20px;
font-weight: 500;
color: $dark-color;
margin-bottom: 10px;
}
p {
font-size: 16px;
font-weight: 400;
color: $gray-color;
}
}
}
Buttons
there are for sizes of buttons (sm, md, lg, xl).
.btn_sm_primary
.btn_md_primary
.btn_lg_primary
.btn_xl_primary
/*=== Small Button ====
==================*/
.btn_sm_primary {
padding: .7rem 1.55rem;
font-size: 15px;
text-align: center;
@include prefixer (transition, .3s, webkit moz o ms);
&:hover {
opacity: .9;
}
}
/*=== Medium Button ====
==================*/
.btn_md_primary {
padding: .85rem 1.8rem;
font-size: 15px;
text-align: center;
@include prefixer (transition, .3s, webkit moz o ms);
&:hover {
opacity: .9;
}
}
/*=== Large Button ====
==================*/
.btn_lg_primary {
padding: .9rem 2.3rem;
font-size: 15px;
text-align: center;
@include prefixer (transition, .3s, webkit moz o ms);
&:hover {
opacity: .9;
}
}
/*=== XLarge Button ====
==================*/
.btn_xl_primary {
padding: 1.1rem 2.3rem;
font-size: 15px;
text-align: center;
@include prefixer (transition, .3s, webkit moz o ms);
&:hover {
opacity: .9;
}
}
Variables
media query and Colors.
/*-----------------------------
media query
-----------------------------*/
$maxMobile: "(max-width:767px)";
$maxSmall: "(max-width:991px)";
$minSmall: "(min-width:768px)";
$minMedium: "(min-width:992px)";
$minLarge: "(min-width:1200px)";
/*-----------------------------
Colors
-----------------------------*/
$dark-color: #0b2238;
$white-color: #ffffff;
$blue-color: #165df5;
$orange-red-color: #fd6b3b;
$yollow-color: #ffc329;
$aquamarine-color: #17e79b;
$orange-color: #f28e1c;
$red-color: #f93542;
$gray-color: #6c7a87;
$light-color: #9da6af;
$bg-color: #f7f8fa;
$border-color: #edeef1;
$beiget-color: #ffe7aa;
$green-color: #19a389;
$lightgreen-color: #7bd88a;
$sea-color: #4d81f7;
$gold-color: #ffce53;
$purple-color: #6f5fa6;
$green2-color: #31d1ab;
$black-color: #000;
$blue2-color: #3875f7;
$orange2-color: #fd7028;
// color Currency
$sky-color: #6bb0f8;
$currency-p-color: #aa9bb3; //pargraph
$magenta-color: #fd4ffe;
$currency-d-color: #29013e;
Clasess
You can use the clasess inside html codes.
margin, padding, color, background-color,
border-radius, z-index, font-size, min-width
this classes only refer to template (Rakon).
/*-----------------------------
Classes:
margin, padding, font-size, color,
background-color, border-radius,
z-index, min-width
-----------------------------*/
// margin bottom
.margin-b-1 {
margin-bottom: 0.625rem !important;
}
.margin-b-2 {
margin-bottom: 1.25rem !important;
}
.margin-b-3 {
margin-bottom: 1.875rem !important;
}
.margin-b-4 {
margin-bottom: 2.5rem !important;
}
.margin-b-5 {
margin-bottom: 3.125rem !important;
@include maxMobile {
margin-bottom: 1.875rem !important;
}
}
.margin-b-6 {
margin-bottom: 3.75rem !important;
@include maxMobile {
margin-bottom: 2.5rem !important;
}
}
.margin-b-7 {
margin-bottom: 4.375rem !important;
@include maxMobile {
margin-bottom: 2.5rem !important;
}
}
.margin-b-8 {
margin-bottom: 5rem !important;
@include maxMobile {
margin-bottom: 2.5rem !important;
}
}
.margin-b-9 {
margin-bottom: 5.625rem !important;
@include maxMobile {
margin-bottom: 3.125rem !important;
}
}
.margin-b-10 {
margin-bottom: 6.25rem !important;
@include maxMobile {
margin-bottom: 3.125rem !important;
}
}
.margin-b-11 {
margin-bottom: 6.875rem !important;
@include maxMobile {
margin-bottom: 3.125rem !important;
}
}
.margin-b-12 {
margin-bottom: 7.5rem !important;
@include maxMobile {
margin-bottom: 3.125rem !important;
}
}
.margin-b-13 {
margin-bottom: 8.125rem !important;
@include maxMobile {
margin-bottom: 3.125rem !important;
}
}
.margin-b-14 {
margin-bottom: 8.75rem !important;
@include maxMobile {
margin-bottom: 3.125rem !important;
}
}
.margin-b-15 {
margin-bottom: 9.375rem !important;
@include maxMobile {
margin-bottom: 3.75rem !important;
}
}
// margin Top
.margin-t-1 {
margin-top: 0.625rem !important;
}
.margin-t-2 {
margin-top: 1.25rem !important;
}
.margin-t-3 {
margin-top: 1.875rem !important;
}
.margin-t-4 {
margin-top: 2.5rem !important;
}
.margin-t-5 {
margin-top: 3.125rem !important;
}
.margin-t-6 {
margin-top: 3.75rem !important;
@include maxMobile {
margin-top: 2.5rem !important;
}
}
.margin-t-7 {
margin-top: 4.375rem !important;
@include maxMobile {
margin-top: 2.5rem !important;
}
}
.margin-t-8 {
margin-top: 5rem !important;
@include maxMobile {
margin-top: 2.5rem !important;
}
}
.margin-t-9 {
margin-top: 5.625rem !important;
@include maxMobile {
margin-top: 3.125rem !important;
}
}
.margin-t-10 {
margin-top: 6.25rem !important;
@include maxMobile {
margin-top: 3.125rem !important;
}
}
.margin-t-11 {
margin-top: 6.875rem !important;
@include maxMobile {
margin-top: 3.125rem !important;
}
}
.margin-t-12 {
margin-top: 7.5rem !important;
@include maxMobile {
margin-top: 3.125rem !important;
}
}
.margin-t-13 {
margin-top: 8.125rem !important;
@include maxMobile {
margin-top: 3.125rem !important;
}
}
.margin-t-14 {
margin-top: 8.75rem !important;
@include maxMobile {
margin-top: 3.125rem !important;
}
}
.margin-t-15 {
margin-top: 9.375rem !important;
@include maxMobile {
margin-top: 3.75rem !important;
}
}
// margin top and top
.margin-my-1 {
margin-top: 0.625rem !important;
margin-bottom: 0.625rem !important;
}
.margin-my-2 {
margin-top: 1.25rem !important;
margin-bottom: 1.25rem !important;
}
.margin-my-3 {
margin-top: 1.875rem !important;
margin-bottom: 1.875rem !important;
}
.margin-my-4 {
margin-top: 2.5rem !important;
margin-bottom: 2.5rem !important;
}
.margin-my-5 {
margin-top: 3.125rem !important;
margin-bottom: 3.125rem !important;
}
.margin-my-6 {
margin-top: 3.75rem !important;
margin-bottom: 3.75rem !important;
@include maxMobile {
margin-top: 2.5rem !important;
margin-bottom: 2.5rem !important;
}
}
.margin-my-7 {
margin-top: 4.375rem !important;
margin-bottom: 4.375rem !important;
@include maxMobile {
margin-top: 2.5rem !important;
margin-bottom: 2.5rem !important;
}
}
.margin-my-8 {
margin-top: 5rem !important;
margin-bottom: 5rem !important;
@include maxMobile {
margin-top: 2.5rem !important;
margin-bottom: 2.5rem !important;
}
}
.margin-my-9 {
margin-top: 5.625rem !important;
margin-bottom: 5.625rem !important;
@include maxMobile {
margin-top: 3.125rem !important;
margin-bottom: 3.125rem !important;
}
}
.margin-my-10 {
margin-top: 6.25rem !important;
margin-bottom: 6.25rem !important;
@include maxMobile {
margin-top: 3.125rem !important;
margin-bottom: 3.125rem !important;
}
}
.margin-my-11 {
margin-top: 6.875rem !important;
margin-bottom: 6.875rem !important;
@include maxMobile {
margin-top: 3.125rem !important;
margin-bottom: 3.125rem !important;
}
}
.margin-my-12 {
margin-top: 7.5rem !important;
margin-bottom: 7.5rem !important;
@include maxMobile {
margin-top: 3.125em !important;
margin-bottom: 3.125rem !important;
}
}
.margin-my-13 {
margin-top: 8.125rem !important;
margin-bottom: 8.125rem !important;
@include maxMobile {
margin-top: 3.125rem !important;
margin-bottom: 3.125rem !important;
}
}
.margin-my-14 {
margin-top: 8.75rem !important;
margin-bottom: 8.75rem !important;
@include maxMobile {
margin-top: 3.125rem !important;
margin-bottom: 3.125rem !important;
}
}
.margin-my-15 {
margin-top: 9.375rem !important;
margin-bottom: 9.375rem !important;
@include maxMobile {
margin-top: 1.875rem !important;
margin-bottom: 3.75rem !important;
}
}
// padding
.padding-py-1 {
padding-top: 0.625rem !important;
padding-bottom: 0.625rem !important;
}
.padding-py-2 {
padding-top: 1.25rem !important;
padding-bottom: 1.25rem !important;
}
.padding-py-3 {
padding-top: 1.875rem !important;
padding-bottom: 1.875rem !important;
}
.padding-py-4 {
padding-top: 2.5rem !important;
padding-bottom: 2.5rem !important;
}
.padding-py-5 {
padding-top: 3.125rem !important;
padding-bottom: 3.125rem !important;
}
.padding-py-6 {
padding-top: 3.75rem !important;
padding-bottom: 3.75rem !important;
@include maxMobile {
padding-top: 2.5rem !important;
padding-bottom: 2.5rem !important;
}
}
.padding-py-7 {
padding-top: 4.375rem !important;
padding-bottom: 4.375rem !important;
@include maxMobile {
padding-top: 2.5rem !important;
padding-bottom: 2.5rem !important;
}
}
.padding-py-8 {
padding-top: 5rem !important;
padding-bottom: 5rem !important;
@include maxMobile {
padding-top: 2.5rem !important;
padding-bottom: 2.5rem !important;
}
}
.padding-py-9 {
padding-top: 5.625rem !important;
padding-bottom: 5.625rem !important;
@include maxMobile {
padding-top: 3.125rem !important;
padding-bottom: 3.125rem !important;
}
}
.padding-py-10 {
padding-top: 6.25rem !important;
padding-bottom: 6.25rem !important;
@include maxMobile {
padding-top: 3.125rem !important;
padding-bottom: 3.125rem !important;
}
}
.padding-py-11 {
padding-top: 6.875rem !important;
padding-bottom: 6.875rem !important;
@include maxMobile {
padding-top: 3.125rem !important;
padding-bottom: 3.125rem !important;
}
}
.padding-py-12 {
padding-top: 7.5rem !important;
padding-bottom: 7.5rem !important;
@include maxMobile {
padding-top: 3.125rem !important;
padding-bottom: 3.125rem !important;
}
}
.padding-py-13 {
padding-top: 8.125rem !important;
padding-bottom: 8.125rem !important;
@include maxMobile {
padding-top: 3.125rem !important;
padding-bottom: 3.125rem !important;
}
}
.padding-py-14 {
padding-top: 8.75rem !important;
padding-bottom: 8.75rem !important;
@include maxMobile {
padding-top: 3.125rem !important;
padding-bottom: 3.125rem !important;
}
}
.padding-py-15 {
padding-top: 9.375rem !important;
padding-bottom: 9.375rem !important;
@include maxMobile {
padding-top: 3.75rem !important;
padding-bottom: 3.75rem !important;
}
}
// padding top
.padding-t-1 {
padding-top: 0.625rem !important;
}
.padding-t-2 {
padding-top: 1.25rem !important;
}
.padding-t-3 {
padding-top: 1.875rem !important;
}
.padding-t-4 {
padding-top: 2.5rem !important;
}
.padding-t-5 {
padding-top: 3.125rem !important;
}
.padding-t-6 {
padding-top: 3.75rem !important;
@include maxMobile {
padding-top: 2.5rem !important;
}
}
.padding-t-7 {
padding-top: 4.375rem !important;
@include maxMobile {
padding-top: 2.5rem !important;
}
}
.padding-t-8 {
padding-top: 5rem !important;
@include maxMobile {
padding-top: 2.5rem !important;
}
}
.padding-t-9 {
padding-top: 5.625rem !important;
@include maxMobile {
padding-top: 3.125rem !important;
}
}
.padding-t-10 {
padding-top: 6.25rem !important;
@include maxMobile {
padding-top: 3.125rem !important;
}
}
.padding-t-11 {
padding-top: 6.875rem !important;
@include maxMobile {
padding-top: 3.125rem !important;
}
}
.padding-t-12 {
padding-top: 7.5rem !important;
@include maxMobile {
padding-top: 3.125rem !important;
}
}
.padding-t-13 {
padding-top: 8.125rem !important;
@include maxMobile {
padding-top: 1.875rem !important;
}
}
.padding-t-14 {
padding-top: 8.75rem !important;
@include maxMobile {
padding-top: 3.125rem !important;
}
}
.padding-t-15 {
padding-top: 9.375rem !important;
@include maxMobile {
padding-top: 3.75rem !important;
}
}
// padding left & Right
.padding-px-1 {
padding-left: 0.625rem !important;
padding-right: 0.625rem !important;
}
.padding-px-2 {
padding-left: 1.25rem !important;
padding-right: 1.25rem !important;
}
.padding-px-3 {
padding-left: 1.875rem !important;
padding-right: 1.875rem !important;
}
.padding-px-4 {
padding-left: 2.5rem !important;
padding-right: 2.5rem !important;
}
.padding-px-5 {
padding-left: 3.125rem !important;
padding-right: 3.125rem !important;
@include maxMobile {
padding-left: 1.875rem !important;
padding-right: 1.875rem !important;
}
}
.padding-px-6 {
padding-left: 3.75rem !important;
padding-right: 3.75rem !important;
@include maxMobile {
padding-left: 2.5rem !important;
padding-right: 2.5rem !important;
}
}
.padding-px-7 {
padding-left: 4.375rem !important;
padding-right: 4.375rem !important;
@include maxMobile {
padding-left: 2.5rem !important;
padding-right: 2.5rem !important;
}
}
.padding-px-8 {
padding-left: 5rem !important;
padding-right: 5rem !important;
@include maxMobile {
padding-left: 2.5rem !important;
padding-right: 2.5rem !important;
}
}
.padding-px-9 {
padding-left: 5.625rem !important;
padding-right: 5.625rem !important;
@include maxMobile {
padding-left: 3.125rem !important;
padding-right: 3.125rem !important;
}
}
.padding-px-10 {
padding-left: 6.25rem !important;
padding-right: 6.25rem !important;
@include maxMobile {
padding-left: 3.125rem !important;
padding-right: 3.125rem !important;
}
}
.padding-px-11 {
padding-left: 6.875rem !important;
padding-right: 6.875rem !important;
@include maxMobile {
padding-left: 3.125rem !important;
padding-right: 3.125rem !important;
}
}
.padding-px-12 {
padding-left: 7.5rem !important;
padding-right: 7.5rem !important;
@include maxMobile {
padding-left: 3.125rem !important;
padding-right: 3.125rem !important;
}
}
.padding-px-13 {
padding-left: 8.125rem !important;
padding-right: 8.125rem !important;
@include maxMobile {
padding-left: 3.125rem !important;
padding-right: 3.125rem !important;
}
}
.padding-px-14 {
padding-left: 8.75rem !important;
padding-right: 8.75rem !important;
@include maxMobile {
padding-left: 3.125rem !important;
padding-right: 3.125rem !important;
}
}
.padding-px-15 {
padding-left: 9.375rem !important;
padding-right: 9.375rem !important;
@include maxMobile {
padding-left: 3.75rem !important;
padding-right: 3.75rem !important;
}
}
// padding bottom
.padding-b-1 {
padding-bottom: 0.625rem !important;
}
.padding-b-2 {
padding-bottom: 1.25rem !important;
}
.padding-b-3 {
padding-bottom: 1.875rem !important;
}
.padding-b-4 {
padding-bottom: 2.5rem !important;
}
.padding-b-5 {
padding-bottom: 3.125rem !important;
}
.padding-b-6 {
padding-bottom: 3.75rem !important;
@include maxMobile {
padding-bottom: 2.5rem !important;
}
}
.padding-b-7 {
padding-bottom: 4.375rem !important;
@include maxMobile {
padding-bottom: 2.5rem !important;
}
}
.padding-b-8 {
padding-bottom: 5rem !important;
@include maxMobile {
padding-bottom: 2.5rem !important;
}
}
.padding-b-9 {
padding-bottom: 5.625rem !important;
@include maxMobile {
padding-bottom: 3.125rem !important;
}
}
.padding-b-10 {
padding-bottom: 6.25rem !important;
@include maxMobile {
padding-bottom: 3.125rem !important;
}
}
.padding-b-11 {
padding-bottom: 6.875rem !important;
@include maxMobile {
padding-bottom: 3.125rem !important;
}
}
.padding-b-12 {
padding-bottom: 7.5rem !important;
@include maxMobile {
padding-bottom: 3.125rem !important;
}
}
.padding-b-13 {
padding-bottom: 8.125rem !important;
@include maxMobile {
padding-bottom: 3.125rem !important;
}
}
.padding-b-14 {
padding-bottom: 8.75rem !important;
@include maxMobile {
padding-bottom: 3.125rem !important;
}
}
.padding-b-15 {
padding-bottom: 9.375rem !important;
@include maxMobile {
padding-bottom: 3.75rem !important;
}
}
// Colors
.c-dark {
color: $dark-color !important;
}
.c-white {
color: $white-color !important;
}
.c-blue {
color: $blue-color !important;
}
.c-gold {
color: $gold-color !important;
}
.c-green {
color: $green-color !important;
}
.c-aquamarine {
color: $aquamarine-color !important;
}
.c-orange {
color: $orange-color !important;
}
.c-orange-red {
color: $orange-red-color !important;
}
.c-red {
color: $red-color !important;
}
.c-yollow {
color: $yollow-color !important;
}
.c-gray {
color: $gray-color !important;
}
.c-light {
color: $light-color !important;
}
.c-beiget {
color: $beiget-color !important;
}
.c-skuy {
color: $sky-color !important;
}
.c-magenta {
color: $magenta-color !important;
}
.c-currency-d {
color: $currency-d-color !important;
}
.c-currency-p {
color: $currency-p-color !important;
}
.c-sea {
color: $sea-color !important;
}
.c-purple {
color: $purple-color !important;
}
.c-lightgreen {
color: $lightgreen-color !important;
}
.c-green2 {
color: $green2-color !important;
}
.c-black {
color: $black-color !important;
}
.c-blue2 {
color: $blue2-color !important;
}
.c-orange2 {
color: $orange2-color !important;
}
// background
.bg-dark {
background-color: $dark-color !important;
}
.bg-white {
background: $white-color !important;
}
.bg-blue {
background-color: $blue-color !important;
}
.bg-gold {
background-color: $gold-color !important;
}
.bg-green {
background-color: $green-color !important;
}
.bg-aquamarine {
background-color: $aquamarine-color !important;
}
.bg-orange {
background-color: $orange-color !important;
}
.bg-red {
background-color: $red-color !important;
}
.bg-yollow {
background-color: $yollow-color !important;
}
.bg-gray {
background-color: $gray-color !important;
}
.bg-light {
background-color: $light-color !important;
}
.bg-beiget {
background-color: $beiget-color !important;
}
.bg-skuy {
background-color: $sky-color !important;
}
.bg-magenta {
background-color: $magenta-color !important;
}
.bg-green2 {
background-color: $green2-color !important;
}
.bg-currency-d {
background-color: $currency-d-color !important;
}
.bg-orange-red {
background-color: $orange-red-color !important;
}
.bg-currency-p {
background-color: $currency-p-color !important;
}
.bg-sea {
background-color: $sea-color !important;
}
.bg-purple {
background-color: $purple-color !important;
}
.bg-lightgreen {
background-color: $lightgreen-color !important;
}
.bg-black {
background-color: $black-color !important;
}
.bg-snow {
background-color: $bg-color !important;
}
.bg-blue2 {
background-color: $blue2-color !important;
}
.bg-orange2 {
background-color: $orange2-color !important;
}
// border-radius
.rounded-0 {
@include prefixer(border-radius, 0, webkit moz o ms);
}
.rounded-1 {
@include prefixer(border-radius, 1px, webkit moz o ms);
}
.rounded-2 {
@include prefixer(border-radius, 2px, webkit moz o ms);
}
.rounded-3 {
@include prefixer(border-radius, 3px, webkit moz o ms);
}
.rounded-4 {
@include prefixer(border-radius, 04px, webkit moz o ms);
}
.rounded-5 {
@include prefixer(border-radius, 5px, webkit moz o ms);
}
.rounded-6 {
@include prefixer(border-radius, 6px, webkit moz o ms);
}
.rounded-7 {
@include prefixer(border-radius, 7px, webkit moz o ms);
}
.rounded-8 {
@include prefixer(border-radius, 8px, webkit moz o ms);
}
.rounded-9 {
@include prefixer(border-radius, 9px, webkit moz o ms);
}
.rounded-10 {
@include prefixer(border-radius, 10px, webkit moz o ms);
}
.rounded-11 {
@include prefixer(border-radius, 11px, webkit moz o ms);
}
.rounded-12 {
@include prefixer(border-radius, 12px, webkit moz o ms);
}
.rounded-13 {
@include prefixer(border-radius, 13px, webkit moz o ms);
}
.rounded-14 {
@include prefixer(border-radius, 14px, webkit moz o ms);
}
.rounded-15 {
@include prefixer(border-radius, 15px, webkit moz o ms);
}
.rounded-16 {
@include prefixer(border-radius, 16px, webkit moz o ms);
}
.rounded-17 {
@include prefixer(border-radius, 17px, webkit moz o ms);
}
.rounded-18 {
@include prefixer(border-radius, 18px, webkit moz o ms);
}
.rounded-19 {
@include prefixer(border-radius, 19px, webkit moz o ms);
}
.rounded-20 {
@include prefixer(border-radius, 20px, webkit moz o ms);
}
.rounded-21 {
@include prefixer(border-radius, 21px, webkit moz o ms);
}
.rounded-22 {
@include prefixer(border-radius, 22px, webkit moz o ms);
}
.rounded-23 {
@include prefixer(border-radius, 23px, webkit moz o ms);
}
.rounded-24 {
@include prefixer(border-radius, 24px, webkit moz o ms);
}
.rounded-25 {
@include prefixer(border-radius, 25px, webkit moz o ms);
}
// height
.h-100vh {
height: 100vh !important;
}
// z-index
.z-index-0 {
z-index: 0;
}
.z-index-1 {
z-index: 1;
}
.z-index-2 {
z-index: 2;
}
.z-index-3 {
z-index: 3;
}
// transform Rotate
.transform-r-15 {
transform: rotate(-15deg) !important;
}
// text-align
.align-justify {
text-align: justify !important;
}
// font-size
.font-s-8 {
font-size: 8px !important;
}
.font-s-10 {
font-size: 10px !important;
}
.font-s-12 {
font-size: 12px !important;
}
.font-s-13 {
font-size: 13px !important;
}
.font-s-14 {
font-size: 14px !important;
}
.font-s-15 {
font-size: 15px !important;
}
.font-s-16 {
font-size: 16px !important;
}
.font-s-17 {
font-size: 17px !important;
}
.font-s-18 {
font-size: 18px !important;
}
.font-s-19 {
font-size: 19px !important;
}
.font-s-20 {
font-size: 20px !important;
}
.font-s-21 {
font-size: 21px !important;
}
.font-s-22 {
font-size: 22px !important;
}
.font-s-23 {
font-size: 23px !important;
}
.font-s-24 {
font-size: 24px !important;
}
.font-s-25 {
font-size: 25px !important;
}
.font-s-26 {
font-size: 26px !important;
}
.font-s-27 {
font-size: 27px !important;
}
.font-s-28 {
font-size: 28px !important;
}
.font-s-29 {
font-size: 29px !important;
}
.font-s-30 {
font-size: 30px !important;
}
.font-s-35 {
font-size: 35px !important;
}
.font-s-40 {
font-size: 40px !important;
}
.font-s-45 {
font-size: 45px !important;
}
.font-s-50 {
font-size: 50px !important;
@include maxSmall {
font-size: 40px !important;
}
}
.font-s-55 {
font-size: 55px !important;
@include maxSmall {
font-size: 45px !important;
}
}
.font-s-60 {
font-size: 60px !important;
@include maxSmall {
font-size: 30px !important;
}
}
.font-s-65 {
font-size: 65px !important;
@include maxSmall {
font-size: 30px !important;
}
}
.font-s-70 {
font-size: 70px !important;
@include maxSmall {
font-size: 40px !important;
}
}
.font-s-75 {
font-size: 75px !important;
@include maxSmall {
font-size: 40px !important;
}
}
.font-s-80 {
font-size: 80px !important;
@include maxSmall {
font-size: 40px !important;
}
}
.font-s-85 {
font-size: 85px !important;
@include maxSmall {
font-size: 40px !important;
}
}
.font-s-90 {
font-size: 90px !important;
@include maxSmall {
font-size: 40px !important;
}
}
.font-s-95 {
font-size: 95px !important;
@include maxSmall {
font-size: 40px !important;
}
}
.font-s-100 {
font-size: 100px !important;
@include maxSmall {
font-size: 40px !important;
}
}
// font wight
.font-w-400 {
font-weight: 400 !important;
}
.font-w-500 {
font-weight: 500 !important;
}
.font-w-600 {
font-weight: 600 !important;
}
.font-w-700 {
font-weight: 700 !important;
}
.font-w-800 {
font-weight: 800 !important;
}
// min width
.wd-50 {
min-width: 50px !important;
justify-content: center;
}
.wd-100 {
min-width: 100px !important;
justify-content: center;
}
.wd-120 {
min-width: 120px !important;
justify-content: center;
}
.wd-130 {
min-width: 130px !important;
justify-content: center;
}
.wd-140 {
min-width: 140px !important;
justify-content: center;
}
.wd-160 {
min-width: 160px !important;
justify-content: center;
}
.wd-170 {
min-width: 170px !important;
justify-content: center;
}
.border-0 {
border: 0 !important;
}
.border-1 {
border: 1px solid$border-color !important;
}
.opacity-1 {
opacity: 1 !important;
}
.h-fit-content {
height: fit-content !important;
}
/*-----------------------------
Active, hover Colors for Navbar
-----------------------------*/
.active-dark {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
&.active {
color: $dark-color !important;
}
&.selected {
color: $dark-color !important;
}
&:hover {
color: $dark-color !important;
}
}
.dropdown_menu_nav {
.item_colume {
.nav_meun {
.dropdown-item {
&:hover {
color: $dark-color !important;
}
&.active {
background-color: $dark-color !important;
color: $white-color !important;
}
}
}
}
.dropdown-submenu {
.dropdown-item {
&:hover {
color: $dark-color !important;
}
&.active {
background-color: $dark-color !important;
color: $white-color !important;
}
}
.dropdown-menu {
.dropdown-item {
&:hover {
color: $dark-color !important;
}
&.active {
background-color: $dark-color !important;
color: $white-color !important;
}
}
}
}
}
&.show {
.nav-link {
color: $dark-color !important;
&:hover {
color: $dark-color !important;
}
}
}
}
}
}
}
}
.active-blue {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
&.active {
color: $blue-color !important;
}
&:hover {
color: $blue-color !important;
}
&.selected {
color: $blue-color !important;
}
}
.dropdown_menu_nav {
.item_colume {
.nav_meun {
.dropdown-item {
&:hover {
color: $blue-color !important;
}
&.active {
background-color: $blue-color;
color: $white-color !important;
}
}
}
}
.dropdown-submenu {
.dropdown-item {
&:hover {
color: $blue-color !important;
}
&.active {
background-color: $blue-color !important;
color: $white-color !important;
}
}
.dropdown-menu {
.dropdown-item {
&:hover {
color: $blue-color !important;
}
&.active {
background-color: $blue-color !important;
color: $white-color !important;
}
}
}
}
}
&.show {
.nav-link {
color: $blue-color !important;
&:hover {
color: $blue-color !important;
}
}
}
}
}
}
}
}
.active-gold {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
&.active {
color: $gold-color !important;
}
&.selected {
color: $gold-color !important;
}
&:hover {
color: $gold-color !important;
}
}
.dropdown_menu_nav {
.item_colume {
.nav_meun {
.dropdown-item {
&:hover {
color: $gold-color !important;
}
&.active {
background-color: $gold-color !important;
color: $white-color !important;
}
}
}
}
.dropdown-submenu {
.dropdown-item {
&:hover {
color: $gold-color !important;
}
&.active {
background-color: $gold-color !important;
color: $white-color !important;
}
}
.dropdown-menu {
.dropdown-item {
&:hover {
color: $gold-color !important;
}
&.active {
background-color: $gold-color !important;
color: $white-color !important;
}
}
}
}
}
&.show {
.nav-link {
color: $gold-color !important;
&:hover {
color: $gold-color !important;
}
}
}
}
}
}
}
}
.active-green {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
&.active {
color: $green-color !important;
}
&.selected {
color: $green-color !important;
}
&:hover {
color: $green-color !important;
}
}
.dropdown_menu_nav {
.item_colume {
.nav_meun {
.dropdown-item {
&:hover {
color: $green-color !important;
}
&.active {
background-color: $green-color !important;
color: $white-color !important;
}
}
}
}
.dropdown-submenu {
.dropdown-item {
&:hover {
color: $green-color !important;
}
&.active {
background-color: $green-color !important;
color: $white-color !important;
}
}
.dropdown-menu {
.dropdown-item {
&:hover {
color: $green-color !important;
}
&.active {
background-color: $green-color !important;
color: $white-color !important;
}
}
}
}
}
&.show {
.nav-link {
color: $green-color !important;
&:hover {
color: $green-color !important;
}
}
}
}
}
}
}
}
.active-aquamarine {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
&.active {
color: $aquamarine-color !important;
}
&.selected {
color: $aquamarine-color !important;
}
&:hover {
color: $aquamarine-color !important;
}
}
.dropdown_menu_nav {
.item_colume {
.nav_meun {
.dropdown-item {
&:hover {
color: $aquamarine-color !important;
}
&.active {
background-color: $aquamarine-color !important;
color: $white-color !important;
}
}
}
}
.dropdown-submenu {
.dropdown-item {
&:hover {
color: $aquamarine-color !important;
}
&.active {
background-color: $aquamarine-color !important;
color: $white-color !important;
}
}
.dropdown-menu {
.dropdown-item {
&:hover {
color: $aquamarine-color !important;
}
&.active {
background-color: $aquamarine-color !important;
color: $white-color !important;
}
}
}
}
}
&.show {
.nav-link {
color: $aquamarine-color !important;
&:hover {
color: $aquamarine-color !important;
}
}
}
}
}
}
}
}
.active-orange {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
&.active {
color: $orange-color !important;
}
&.selected {
color: $orange-color !important;
}
&:hover {
color: $orange-color !important;
}
}
.dropdown_menu_nav {
.item_colume {
.nav_meun {
.dropdown-item {
&:hover {
color: $orange-color !important;
}
&.active {
background-color: $orange-color !important;
color: $white-color !important;
}
}
}
}
.dropdown-submenu {
.dropdown-item {
&:hover {
color: $orange-color !important;
}
&.active {
background-color: $orange-color !important;
color: $white-color !important;
}
}
.dropdown-menu {
.dropdown-item {
&:hover {
color: $orange-color !important;
}
&.active {
background-color: $orange-color !important;
color: $white-color !important;
}
}
}
}
}
&.show {
.nav-link {
color: $orange-color !important;
&:hover {
color: $orange-color !important;
}
}
}
}
}
}
}
}
.active-orange-red {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
&.active {
color: $orange-red-color !important;
}
&.selected {
color: $orange-red-color !important;
}
&:hover {
color: $orange-red-color !important;
}
}
.dropdown_menu_nav {
.item_colume {
.nav_meun {
.dropdown-item {
&:hover {
color: $orange-red-color !important;
}
&.active {
background-color: $orange-red-color !important;
color: $white-color !important;
}
}
}
}
.dropdown-submenu {
.dropdown-item {
&:hover {
color: $orange-red-color !important;
}
&.active {
background-color: $orange-red-color !important;
color: $white-color !important;
}
}
.dropdown-menu {
.dropdown-item {
&:hover {
color: $orange-red-color !important;
}
&.active {
background-color: $orange-red-color !important;
color: $white-color !important;
}
}
}
}
}
&.show {
.nav-link {
color: $orange-red-color !important;
&:hover {
color: $orange-red-color !important;
}
}
}
}
}
}
}
}
.active-red {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
&.active {
color: $red-color !important;
}
&.selected {
color: $red-color !important;
}
&:hover {
color: $red-color !important;
}
}
.dropdown_menu_nav {
.item_colume {
.nav_meun {
.dropdown-item {
&:hover {
color: $red-color !important;
}
&.active {
background-color: $red-color !important;
color: $white-color !important;
}
}
}
}
.dropdown-submenu {
.dropdown-item {
&:hover {
color: $red-color !important;
}
&.active {
background-color: $red-color !important;
color: $white-color !important;
}
}
.dropdown-menu {
.dropdown-item {
&:hover {
color: $red-color !important;
}
&.active {
background-color: $red-color !important;
color: $white-color !important;
}
}
}
}
}
&.show {
.nav-link {
color: $red-color !important;
&:hover {
color: $red-color !important;
}
}
}
}
}
}
}
}
.active-yollow {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
&.active {
color: $yollow-color !important;
}
&.selected {
color: $yollow-color !important;
}
&:hover {
color: $yollow-color !important;
}
}
.dropdown_menu_nav {
.item_colume {
.nav_meun {
.dropdown-item {
&:hover {
color: $yollow-color !important;
}
&.active {
background-color: $yollow-color !important;
color: $white-color !important;
}
}
}
}
.dropdown-submenu {
.dropdown-item {
&:hover {
color: $yollow-color !important;
}
&.active {
background-color: $yollow-color !important;
color: $white-color !important;
}
}
.dropdown-menu {
.dropdown-item {
&:hover {
color: $yollow-color !important;
}
&.active {
background-color: $yollow-color !important;
color: $white-color !important;
}
}
}
}
}
&.show {
.nav-link {
color: $yollow-color !important;
&:hover {
color: $yollow-color !important;
}
}
}
}
}
}
}
}
.active-gray {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
&.active {
color: $gray-color !important;
}
&.selected {
color: $gray-color !important;
}
&:hover {
color: $gray-color !important;
}
}
.dropdown_menu_nav {
.item_colume {
.nav_meun {
.dropdown-item {
&:hover {
color: $gray-color !important;
}
&.active {
background-color: $gray-color !important;
color: $white-color !important;
}
}
}
}
.dropdown-submenu {
.dropdown-item {
&:hover {
color: $gray-color !important;
}
&.active {
background-color: $gray-color !important;
color: $white-color !important;
}
}
.dropdown-menu {
.dropdown-item {
&:hover {
color: $gray-color !important;
}
&.active {
background-color: $gray-color !important;
color: $white-color !important;
}
}
}
}
}
&.show {
.nav-link {
color: $gray-color !important;
&:hover {
color: $gray-color !important;
}
}
}
}
}
}
}
}
.active-beiget {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
&.active {
color: $beiget-color !important;
}
&.selected {
color: $beiget-color !important;
}
&:hover {
color: $beiget-color !important;
}
}
.dropdown_menu_nav {
.item_colume {
.nav_meun {
.dropdown-item {
&:hover {
color: $beiget-color !important;
}
&.active {
background-color: $beiget-color !important;
color: $white-color !important;
}
}
}
}
.dropdown-submenu {
.dropdown-item {
&:hover {
color: $beiget-color !important;
}
&.active {
background-color: $beiget-color !important;
color: $white-color !important;
}
}
.dropdown-menu {
.dropdown-item {
&:hover {
color: $beiget-color !important;
}
&.active {
background-color: $beiget-color !important;
color: $white-color !important;
}
}
}
}
}
&.show {
.nav-link {
color: $beiget-color !important;
&:hover {
color: $beiget-color !important;
}
}
}
}
}
}
}
}
.active-sky {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
&.active {
color: $sky-color !important;
}
&.selected {
color: $sky-color !important;
}
&:hover {
color: $sky-color !important;
}
}
.dropdown_menu_nav {
.item_colume {
.nav_meun {
.dropdown-item {
&:hover {
color: $sky-color !important;
}
&.active {
background-color: $sky-color !important;
color: $white-color !important;
}
}
}
}
.dropdown-submenu {
.dropdown-item {
&:hover {
color: $sky-color !important;
}
&.active {
background-color: $sky-color !important;
color: $white-color !important;
}
}
.dropdown-menu {
.dropdown-item {
&:hover {
color: $sky-color !important;
}
&.active {
background-color: $sky-color !important;
color: $white-color !important;
}
}
}
}
}
&.show {
.nav-link {
color: $sky-color !important;
&:hover {
color: $sky-color !important;
}
}
}
}
}
}
}
}
.active-magenta {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
&.active {
color: $magenta-color !important;
}
&.selected {
color: $magenta-color !important;
}
&:hover {
color: $magenta-color !important;
}
}
.dropdown_menu_nav {
.item_colume {
.nav_meun {
.dropdown-item {
&:hover {
color: $magenta-color !important;
}
&.active {
background-color: $magenta-color !important;
color: $white-color !important;
}
}
}
}
.dropdown-submenu {
.dropdown-item {
&:hover {
color: $magenta-color !important;
}
&.active {
background-color: $magenta-color !important;
color: $white-color !important;
}
}
.dropdown-menu {
.dropdown-item {
&:hover {
color: $magenta-color !important;
}
&.active {
background-color: $magenta-color !important;
color: $white-color !important;
}
}
}
}
}
&.show {
.nav-link {
color: $magenta-color !important;
&:hover {
color: $magenta-color !important;
}
}
}
}
}
}
}
}
.active-currency-d {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
&.active {
color: $currency-d-color !important;
}
&.selected {
color: $currency-d-color !important;
}
&:hover {
color: $currency-d-color !important;
}
}
.dropdown_menu_nav {
.item_colume {
.nav_meun {
.dropdown-item {
&:hover {
color: $currency-d-color !important;
}
&.active {
background-color: $currency-d-color !important;
color: $white-color !important;
}
}
}
}
.dropdown-submenu {
.dropdown-item {
&:hover {
color: $currency-d-color !important;
}
&.active {
background-color: $currency-d-color !important;
color: $white-color !important;
}
}
.dropdown-menu {
.dropdown-item {
&:hover {
color: $currency-d-color !important;
}
&.active {
background-color: $currency-d-color !important;
color: $white-color !important;
}
}
}
}
}
&.show {
.nav-link {
color: $currency-d-color !important;
&:hover {
color: $currency-d-color !important;
}
}
}
}
}
}
}
}
.active-currency-p {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
&.active {
color: $currency-p-color !important;
}
&.selected {
color: $currency-p-color !important;
}
&:hover {
color: $currency-p-color !important;
}
}
.dropdown_menu_nav {
.item_colume {
.nav_meun {
.dropdown-item {
&:hover {
color: $currency-p-color !important;
}
&.active {
background-color: $currency-p-color !important;
color: $white-color !important;
}
}
}
}
.dropdown-submenu {
.dropdown-item {
&:hover {
color: $currency-p-color !important;
}
&.active {
background-color: $currency-p-color !important;
color: $white-color !important;
}
}
.dropdown-menu {
.dropdown-item {
&:hover {
color: $currency-p-color !important;
}
&.active {
background-color: $currency-p-color !important;
color: $white-color !important;
}
}
}
}
}
&.show {
.nav-link {
color: $currency-p-color !important;
&:hover {
color: $currency-p-color !important;
}
}
}
}
}
}
}
}
.active-sea {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
&.active {
color: $sea-color !important;
}
&.selected {
color: $sea-color !important;
}
&:hover {
color: $sea-color !important;
}
}
.dropdown_menu_nav {
.item_colume {
.nav_meun {
.dropdown-item {
&:hover {
color: $sea-color !important;
}
&.active {
background-color: $sea-color !important;
color: $white-color !important;
}
}
}
}
.dropdown-submenu {
.dropdown-item {
&:hover {
color: $sea-color !important;
}
&.active {
background-color: $sea-color !important;
color: $white-color !important;
}
}
.dropdown-menu {
.dropdown-item {
&:hover {
color: $sea-color !important;
}
&.active {
background-color: $sea-color !important;
color: $white-color !important;
}
}
}
}
}
&.show {
.nav-link {
color: $sea-color !important;
&:hover {
color: $sea-color !important;
}
}
}
}
}
}
}
}
.active-purple {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
&.active {
color: $purple-color !important;
}
&.selected {
color: $purple-color !important;
}
&:hover {
color: $purple-color !important;
}
}
.dropdown_menu_nav {
.item_colume {
.nav_meun {
.dropdown-item {
&:hover {
color: $purple-color !important;
}
&.active {
background-color: $purple-color !important;
color: $white-color !important;
}
}
}
}
.dropdown-submenu {
.dropdown-item {
&:hover {
color: $purple-color !important;
}
&.active {
background-color: $purple-color !important;
color: $white-color !important;
}
}
.dropdown-menu {
.dropdown-item {
&:hover {
color: $purple-color !important;
}
&.active {
background-color: $purple-color !important;
color: $white-color !important;
}
}
}
}
}
&.show {
.nav-link {
color: $purple-color !important;
&:hover {
color: $purple-color !important;
}
}
}
}
}
}
}
}
.active-lightgreen {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
&.active {
color: $lightgreen-color !important;
}
&.selected {
color: $lightgreen-color !important;
}
&:hover {
color: $lightgreen-color !important;
}
}
.dropdown_menu_nav {
.item_colume {
.nav_meun {
.dropdown-item {
&:hover {
color: $lightgreen-color !important;
}
&.active {
background-color: $lightgreen-color !important;
color: $white-color;
}
}
}
}
.dropdown-submenu {
.dropdown-item {
&:hover {
color: $lightgreen-color !important;
}
&.active {
background-color: $lightgreen-color !important;
color: $white-color;
}
}
.dropdown-menu {
.dropdown-item {
&:hover {
color: $lightgreen-color !important;
}
&.active {
background-color: $lightgreen-color !important;
color: $white-color;
}
}
}
}
}
&.show {
.nav-link {
color: $lightgreen-color !important;
&:hover {
color: $lightgreen-color !important;
}
}
}
}
}
}
}
}
.active-green2 {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
&.active {
color: $green2-color !important;
}
&.selected {
color: $green2-color !important;
}
&:hover {
color: $green2-color !important;
}
}
.dropdown_menu_nav {
.item_colume {
.nav_meun {
.dropdown-item {
&:hover {
color: $green2-color !important;
}
&.active {
background-color: $green2-color !important;
color: $white-color !important;
}
}
}
}
.dropdown-submenu {
.dropdown-item {
&:hover {
color: $green2-color !important;
}
&.active {
background-color: $green2-color !important;
color: $white-color !important;
}
}
.dropdown-menu {
.dropdown-item {
&:hover {
color: $green2-color !important;
}
&.active {
background-color: $green2-color !important;
color: $white-color !important;
}
}
}
}
}
&.show {
.nav-link {
color: $green2-color !important;
&:hover {
color: $green2-color !important;
}
}
}
}
}
}
}
}
.active-black {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
&.active {
color: $black-color !important;
}
&.selected {
color: $black-color !important;
}
&:hover {
color: $black-color !important;
}
}
.dropdown_menu_nav {
.item_colume {
.nav_meun {
.dropdown-item {
&:hover {
color: $black-color !important;
}
}
}
}
.dropdown-submenu {
.dropdown-item {
&:hover {
color: $black-color !important;
}
&.active {
background-color: $black-color !important;
color: $white-color !important;
}
}
.dropdown-menu {
.dropdown-item {
&:hover {
color: $black-color !important;
}
&.active {
background-color: $black-color !important;
color: $white-color !important;
}
}
}
}
}
&.show {
.nav-link {
color: $black-color !important;
&:hover {
color: $black-color !important;
}
}
}
}
}
}
}
}
.active-orange2 {
.navbar {
.navbar-collapse {
.navbar-nav {
.nav-item {
.nav-link {
&.active {
color: $orange2-color !important;
}
&.selected {
color: $orange2-color !important;
}
&:hover {
color: $orange2-color !important;
}
}
.dropdown_menu_nav {
.item_colume {
.nav_meun {
.dropdown-item {
&:hover {
color: $orange2-color !important;
}
}
}
}
.dropdown-submenu {
.dropdown-item {
&:hover {
color: $orange2-color !important;
}
&.active {
background-color: $orange2-color !important;
color: $white-color !important;
}
}
.dropdown-menu {
.dropdown-item {
&:hover {
color: $orange2-color !important;
}
&.active {
background-color: $orange2-color !important;
color: $white-color !important;
}
}
}
}
}
&.show {
.nav-link {
color: $orange2-color !important;
&:hover {
color: $orange2-color !important;
}
}
}
}
}
}
}
}
.dividar_line {
border-bottom: 1px solid$border-color;
position: relative;
&::after {
content: "";
width: 50px;
height: 1px;
background-color: $dark-color;
position: absolute;
left: 0;
}
}
.no-before {
&::before {
display: none !important;
}
}
.no-after {
&::after {
display: none !important;
}
}
.shadow-none {
@include prefixer(box-shadow, nnoe, webkit moz o ms);
}
.filter-blur {
@include prefixer(background, rgba(255, 255, 255, 0.2), webkit moz o ms);
@include prefixer(backdrop-filter, saturate(1) blur(20px), webkit moz o ms);
}
.fixed-header {
.when-scroll {
.btn {
color: $dark-color !important;
}
}
}
.oh-x {
overflow-x: hidden !important;
}
.oh-y {
overflow-y: hidden !important;
}
.dividar {
border-bottom: 1px solid$border-color;
}
.transition {
@include prefixer(transition, 0.3s, webkit moz o ms);
}
Source And Credit
- Bootstrap
- theiconof
- UnSplash
- Dribbble
- UI8
- Shutterstock
Fonts Included
- circularStd
- Yeseva One
Main Package
- HTML Files.
- Supporting CSS, JS files.
- Example Images.
- Documentation.
Support
Thank you for purchasing our template. Rakon - Creative Multi-Purpose HTML5 Template. If you have any question, please feel free to contact us.
- Created: 30 March 2020
- Latest Update: 27, Apr 2021
- By: Orino Studio
- Email: support@orinostudio.com