garbage collection
This commit is contained in:
138
assets/js/script.js
Normal file
138
assets/js/script.js
Normal file
@ -0,0 +1,138 @@
|
||||
(function ($) {
|
||||
'use strict';
|
||||
|
||||
// Preloader js
|
||||
$(window).on('load', function () {
|
||||
$('.preloader').fadeOut(100);
|
||||
});
|
||||
|
||||
// Sticky Menu
|
||||
$(window).scroll(function () {
|
||||
var height = $('.top-header').innerHeight();
|
||||
if ($('header').offset().top > 10) {
|
||||
$('.top-header').addClass('hide');
|
||||
$('.navigation').addClass('nav-bg');
|
||||
$('.navigation').css('margin-top','-'+height+'px');
|
||||
} else {
|
||||
$('.top-header').removeClass('hide');
|
||||
$('.navigation').removeClass('nav-bg');
|
||||
$('.navigation').css('margin-top','-'+0+'px');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Background-media
|
||||
$('[data-background]').each(function () {
|
||||
$(this).css({
|
||||
'background-image': 'url(' + $(this).data('background') + ')'
|
||||
});
|
||||
});
|
||||
|
||||
//Hero Slider
|
||||
$('.hero-slider').slick({
|
||||
autoplay: true,
|
||||
autoplaySpeed: 7500,
|
||||
pauseOnFocus: false,
|
||||
pauseOnHover: false,
|
||||
infinite: true,
|
||||
arrows: true,
|
||||
fade: true,
|
||||
prevArrow: '<button type=\'button\' class=\'prevArrow\'><i class=\'ti-angle-left\'></i></button>',
|
||||
nextArrow: '<button type=\'button\' class=\'nextArrow\'><i class=\'ti-angle-right\'></i></button>',
|
||||
dots: true
|
||||
});
|
||||
$('.hero-slider').slickAnimation();
|
||||
|
||||
// venobox popup
|
||||
$(document).ready(function () {
|
||||
$('.venobox').venobox();
|
||||
});
|
||||
|
||||
// filter
|
||||
$(document).ready(function () {
|
||||
var containerEl = document.querySelector('.filtr-container');
|
||||
var filterizd;
|
||||
if (containerEl) {
|
||||
filterizd = $('.filtr-container').filterizr({});
|
||||
}
|
||||
//Active changer
|
||||
$('.filter-controls li').on('click', function () {
|
||||
$('.filter-controls li').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Count Up
|
||||
function counter() {
|
||||
var oTop;
|
||||
if ($('.count').length !== 0) {
|
||||
oTop = $('.count').offset().top - window.innerHeight;
|
||||
}
|
||||
if ($(window).scrollTop() > oTop) {
|
||||
$('.count').each(function () {
|
||||
var $this = $(this),
|
||||
countTo = $this.attr('data-count');
|
||||
$({
|
||||
countNum: $this.text()
|
||||
}).animate({
|
||||
countNum: countTo
|
||||
}, {
|
||||
duration: 1000,
|
||||
easing: 'swing',
|
||||
step: function () {
|
||||
$this.text(Math.floor(this.countNum));
|
||||
},
|
||||
complete: function () {
|
||||
$this.text(this.countNum);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
$(window).on('scroll', function () {
|
||||
counter();
|
||||
});
|
||||
|
||||
// Animation
|
||||
$(document).ready(function () {
|
||||
$('.has-animation').each(function (index) {
|
||||
$(this).delay($(this).data('delay')).queue(function () {
|
||||
$(this).addClass('animate-in');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
var containerEl = document.querySelector('.shuffle-wrapper');
|
||||
if (containerEl) {
|
||||
var Shuffle = window.Shuffle;
|
||||
var myShuffle = new Shuffle(document.querySelector('.shuffle-wrapper'), {
|
||||
itemSelector: '.shuffle-item',
|
||||
buffer: 1
|
||||
});
|
||||
|
||||
jQuery('input[name="shuffle-filter"]').on('change', function (evt) {
|
||||
var input = evt.currentTarget;
|
||||
if (input.checked) {
|
||||
myShuffle.filter(input.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
})(jQuery);
|
||||
|
||||
var acc = document.getElementsByClassName("accordion");
|
||||
var i;
|
||||
|
||||
for (i = 0; i < acc.length; i++) {
|
||||
acc[i].addEventListener("click", function() {
|
||||
this.classList.toggle("active");
|
||||
var panel = this.nextElementSibling;
|
||||
if (panel.style.maxHeight) {
|
||||
panel.style.maxHeight = null;
|
||||
} else {
|
||||
panel.style.maxHeight = panel.scrollHeight + "px";
|
||||
}
|
||||
});
|
||||
}
|
138
assets/script.js
Normal file
138
assets/script.js
Normal file
@ -0,0 +1,138 @@
|
||||
(function ($) {
|
||||
'use strict';
|
||||
|
||||
// Preloader js
|
||||
$(window).on('load', function () {
|
||||
$('.preloader').fadeOut(100);
|
||||
});
|
||||
|
||||
// Sticky Menu
|
||||
$(window).scroll(function () {
|
||||
var height = $('.top-header').innerHeight();
|
||||
if ($('header').offset().top > 10) {
|
||||
$('.top-header').addClass('hide');
|
||||
$('.navigation').addClass('nav-bg');
|
||||
$('.navigation').css('margin-top','-'+height+'px');
|
||||
} else {
|
||||
$('.top-header').removeClass('hide');
|
||||
$('.navigation').removeClass('nav-bg');
|
||||
$('.navigation').css('margin-top','-'+0+'px');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Background-media
|
||||
$('[data-background]').each(function () {
|
||||
$(this).css({
|
||||
'background-image': 'url(' + $(this).data('background') + ')'
|
||||
});
|
||||
});
|
||||
|
||||
//Hero Slider
|
||||
$('.hero-slider').slick({
|
||||
autoplay: true,
|
||||
autoplaySpeed: 7500,
|
||||
pauseOnFocus: false,
|
||||
pauseOnHover: false,
|
||||
infinite: true,
|
||||
arrows: true,
|
||||
fade: true,
|
||||
prevArrow: '<button type=\'button\' class=\'prevArrow\'><i class=\'ti-angle-left\'></i></button>',
|
||||
nextArrow: '<button type=\'button\' class=\'nextArrow\'><i class=\'ti-angle-right\'></i></button>',
|
||||
dots: true
|
||||
});
|
||||
$('.hero-slider').slickAnimation();
|
||||
|
||||
// venobox popup
|
||||
$(document).ready(function () {
|
||||
$('.venobox').venobox();
|
||||
});
|
||||
|
||||
// filter
|
||||
$(document).ready(function () {
|
||||
var containerEl = document.querySelector('.filtr-container');
|
||||
var filterizd;
|
||||
if (containerEl) {
|
||||
filterizd = $('.filtr-container').filterizr({});
|
||||
}
|
||||
//Active changer
|
||||
$('.filter-controls li').on('click', function () {
|
||||
$('.filter-controls li').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Count Up
|
||||
function counter() {
|
||||
var oTop;
|
||||
if ($('.count').length !== 0) {
|
||||
oTop = $('.count').offset().top - window.innerHeight;
|
||||
}
|
||||
if ($(window).scrollTop() > oTop) {
|
||||
$('.count').each(function () {
|
||||
var $this = $(this),
|
||||
countTo = $this.attr('data-count');
|
||||
$({
|
||||
countNum: $this.text()
|
||||
}).animate({
|
||||
countNum: countTo
|
||||
}, {
|
||||
duration: 1000,
|
||||
easing: 'swing',
|
||||
step: function () {
|
||||
$this.text(Math.floor(this.countNum));
|
||||
},
|
||||
complete: function () {
|
||||
$this.text(this.countNum);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
$(window).on('scroll', function () {
|
||||
counter();
|
||||
});
|
||||
|
||||
// Animation
|
||||
$(document).ready(function () {
|
||||
$('.has-animation').each(function (index) {
|
||||
$(this).delay($(this).data('delay')).queue(function () {
|
||||
$(this).addClass('animate-in');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
var containerEl = document.querySelector('.shuffle-wrapper');
|
||||
if (containerEl) {
|
||||
var Shuffle = window.Shuffle;
|
||||
var myShuffle = new Shuffle(document.querySelector('.shuffle-wrapper'), {
|
||||
itemSelector: '.shuffle-item',
|
||||
buffer: 1
|
||||
});
|
||||
|
||||
jQuery('input[name="shuffle-filter"]').on('change', function (evt) {
|
||||
var input = evt.currentTarget;
|
||||
if (input.checked) {
|
||||
myShuffle.filter(input.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
})(jQuery);
|
||||
|
||||
var acc = document.getElementsByClassName("accordion");
|
||||
var i;
|
||||
|
||||
for (i = 0; i < acc.length; i++) {
|
||||
acc[i].addEventListener("click", function() {
|
||||
this.classList.toggle("active");
|
||||
var panel = this.nextElementSibling;
|
||||
if (panel.style.maxHeight) {
|
||||
panel.style.maxHeight = null;
|
||||
} else {
|
||||
panel.style.maxHeight = panel.scrollHeight + "px";
|
||||
}
|
||||
});
|
||||
}
|
131
assets/scss/_buttons.scss
Normal file
131
assets/scss/_buttons.scss
Normal file
@ -0,0 +1,131 @@
|
||||
/* Button style */
|
||||
.btn {
|
||||
font-size: 16px;
|
||||
font-family: $primary-font;
|
||||
padding: 15px 40px;
|
||||
border-radius: 0;
|
||||
font-weight: 500;
|
||||
border: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: .2s ease;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 10%;
|
||||
z-index: -1;
|
||||
transition: transform .2s ease-in-out;
|
||||
transform-origin: top;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
&::before {
|
||||
transform: scaleY(1);
|
||||
transform-origin: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
font-size: 14px;
|
||||
padding: 10px 35px;
|
||||
}
|
||||
|
||||
.btn-xs {
|
||||
font-size: 12px;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: $primary-color;
|
||||
color: $white;
|
||||
|
||||
&::before {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $primary-color !important;
|
||||
color: $primary-color;
|
||||
|
||||
&::before {
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color: $primary-color, $amount: 10);
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary:not(:disabled):not(.disabled).active,
|
||||
.btn-primary:not(:disabled):not(.disabled):active,
|
||||
.show>.btn-primary.dropdown-toggle {
|
||||
color: $white;
|
||||
background-color: darken($color: $primary-color, $amount: 10);
|
||||
border-color: darken($color: $primary-color, $amount: 10);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: $white;
|
||||
color: $primary-color;
|
||||
border: 1px solid $white;
|
||||
|
||||
&::before {
|
||||
background: $primary-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $primary-color;
|
||||
color: $white;
|
||||
border: 1px solid $white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $white;
|
||||
color: $white;
|
||||
border: 1px solid $white;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary-outline {
|
||||
border: 1px solid $primary-color;
|
||||
color: $primary-color;
|
||||
background: transparent;
|
||||
|
||||
&::before {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $primary-color;
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $primary-color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
border: 100px;
|
||||
}
|
428
assets/scss/_common.scss
Normal file
428
assets/scss/_common.scss
Normal file
@ -0,0 +1,428 @@
|
||||
body {
|
||||
background-color: $body-color;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: lighten($color: $primary-color, $amount: 10);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
/* preloader */
|
||||
|
||||
.preloader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ffbC3b;
|
||||
z-index: 999999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a{
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a,
|
||||
button,
|
||||
select {
|
||||
cursor: pointer;
|
||||
transition: .2s ease;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
a.text-primary:hover {
|
||||
color: $primary-color!important;
|
||||
}
|
||||
|
||||
a.text-light:hover {
|
||||
color: $primary-color!important;
|
||||
}
|
||||
|
||||
h4{
|
||||
transition: .2s ease;
|
||||
}
|
||||
a h4{
|
||||
&:hover{
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-slide {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-top: 90px;
|
||||
padding-bottom: 90px;
|
||||
|
||||
&-sm {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-cover {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.border-primary {
|
||||
border-color: $border-color !important;
|
||||
}
|
||||
|
||||
/* overlay */
|
||||
|
||||
.overlay {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: $secondary-color;
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
.outline-0 {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
.d-unset {
|
||||
display: unset !important;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background: $primary-color !important;
|
||||
}
|
||||
|
||||
.bg-secondary {
|
||||
background: $secondary-color !important;
|
||||
}
|
||||
|
||||
.bg-gray {
|
||||
background: $gray;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: $primary-color !important;
|
||||
}
|
||||
|
||||
.text-color {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.text-light {
|
||||
color: $text-color-light !important;
|
||||
}
|
||||
|
||||
.text-lighten{
|
||||
color: #d6d6e0 !important;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #b5b5b7 !important;
|
||||
}
|
||||
|
||||
.text-dark {
|
||||
color: $text-color-dark !important;
|
||||
}
|
||||
|
||||
.font-secondary {
|
||||
font-family: $secondary-font;
|
||||
}
|
||||
|
||||
.mb-10 {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.mb-20 {
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.mb-30 {
|
||||
margin-bottom: 30px !important;
|
||||
}
|
||||
|
||||
.mb-40 {
|
||||
margin-bottom: 40px !important;
|
||||
}
|
||||
|
||||
.mb-50 {
|
||||
margin-bottom: 50px !important;
|
||||
}
|
||||
|
||||
.mb-60 {
|
||||
margin-bottom: 60px !important;
|
||||
}
|
||||
|
||||
.mb-70 {
|
||||
margin-bottom: 70px !important;
|
||||
}
|
||||
|
||||
.mb-80 {
|
||||
margin-bottom: 80px !important;
|
||||
}
|
||||
|
||||
.mb-90 {
|
||||
margin-bottom: 90px !important;
|
||||
}
|
||||
|
||||
.mb-100 {
|
||||
margin-bottom: 100px !important;
|
||||
}
|
||||
|
||||
.pl-150 {
|
||||
padding-left: 150px;
|
||||
}
|
||||
|
||||
.zindex-1 {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.overflow-md-hidden {
|
||||
@include desktop {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-align-middle{
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon-md{
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
/* page title */
|
||||
.page-title-section {
|
||||
padding: 200px 0 80px;
|
||||
}
|
||||
|
||||
.custom-breadcrumb {
|
||||
li {
|
||||
&.nasted {
|
||||
position: relative;
|
||||
padding-left: 25px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
font-family: $icon-font;
|
||||
content: "\e649";
|
||||
font-size: 20px;
|
||||
top: 50%;
|
||||
left: -5px;
|
||||
color: $white;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* /page title */
|
||||
|
||||
.list-styled{
|
||||
padding-left: 25px;
|
||||
li{
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
&::before{
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 50%;
|
||||
background: $primary-color;
|
||||
left: -25px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea.form-control{
|
||||
height: 200px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.post-thumb-sm {
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
|
||||
/* pagination */
|
||||
.pagination {
|
||||
justify-content: center;
|
||||
.page-item {
|
||||
margin: 0 10px;
|
||||
|
||||
&.active {
|
||||
.page-link {
|
||||
background: $primary-color;
|
||||
color: $white;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child .page-link,
|
||||
&:last-child .page-link {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.content {
|
||||
* {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
ol {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
list-style-type: none;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "\e65d";
|
||||
font-family: "themify";
|
||||
font-size: 14px;
|
||||
left: 0;
|
||||
top: 1px;
|
||||
color: #ffbc3b;
|
||||
transition: .3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid #dee2e6;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: .75rem;
|
||||
vertical-align: top;
|
||||
border: 1px solid #dee2e6
|
||||
}
|
||||
|
||||
thead {
|
||||
background: darken($color: $light, $amount: 2);
|
||||
}
|
||||
|
||||
tbody {
|
||||
background: $light;
|
||||
|
||||
td {
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
blockquote {
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
color: $text-color;
|
||||
font-style: italic !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
pre {
|
||||
padding: 10px 20px;
|
||||
background: $light;
|
||||
}
|
||||
}
|
||||
|
||||
.teacher-thumb-sm{
|
||||
height: 85px;
|
||||
width: 85px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
summary {
|
||||
font-weight: 900;
|
||||
margin: -.5em -.5em 0;
|
||||
padding: .5em;
|
||||
font-size: 20px;
|
||||
color: $secondary-color;
|
||||
|
||||
&.hover {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
details[open] {
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
details[open] summary {
|
||||
border-bottom: 1px solid #aaa;
|
||||
margin-bottom: .5em;
|
||||
}
|
34
assets/scss/_mixins.scss
Normal file
34
assets/scss/_mixins.scss
Normal file
@ -0,0 +1,34 @@
|
||||
@mixin mobile-xs{
|
||||
@media(max-width:370px){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin mobile{
|
||||
@media(max-width:575px){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin tablet{
|
||||
@media(max-width:767px){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin desktop{
|
||||
@media(max-width:991px){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin desktop-lg{
|
||||
@media(max-width:1200px){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin desktop-xl{
|
||||
@media(max-width:1400px){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin size($size){
|
||||
width: $size; height: $size;
|
||||
}
|
66
assets/scss/_typography.scss
Normal file
66
assets/scss/_typography.scss
Normal file
@ -0,0 +1,66 @@
|
||||
/* typography */
|
||||
@import url('https://code.cdn.mozilla.net/fonts/fira.css');
|
||||
body {
|
||||
line-height: 1.2;
|
||||
font-family: $primary-font;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 15px;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
p, .paragraph {
|
||||
font-weight: 400;
|
||||
color: $text-color;
|
||||
font-size: 15px;
|
||||
line-height: 1.9;
|
||||
font-family: $primary-font;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: $text-color-dark;
|
||||
font-family: $secondary-font;
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h1, .h1{
|
||||
font-size: 60px;
|
||||
@include mobile {
|
||||
font-size: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
h2, .h2{
|
||||
font-size: 40px;
|
||||
@include mobile {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
h3, .h3{
|
||||
font-size: 25px;
|
||||
@include mobile {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
h4, .h4{
|
||||
font-size: 20px;
|
||||
@include mobile {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
h5, .h5{
|
||||
font-size: 18px;
|
||||
@include mobile {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
h6, .h6{
|
||||
font-size: 16px;
|
||||
@include mobile {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
17
assets/scss/_variables.scss
Normal file
17
assets/scss/_variables.scss
Normal file
@ -0,0 +1,17 @@
|
||||
// Color Variables
|
||||
$primary-color: #ffbc3b;
|
||||
$secondary-color: #1a1a37;
|
||||
$text-color: #5c5c77;
|
||||
$text-color-light: #8585a4;
|
||||
$text-color-dark: #1e1e4b;
|
||||
$body-color: #fff;
|
||||
$border-color: #ededf1;
|
||||
$black: #000;
|
||||
$white: #fff;
|
||||
$light: #f8f9fe;
|
||||
$gray: #f8f8f8;
|
||||
|
||||
// Font Variables
|
||||
$primary-font: 'Fira Sans', sans-serif;
|
||||
$secondary-font: 'Fira Sans', sans-serif;
|
||||
$icon-font: 'themify';
|
28
assets/scss/style.scss
Normal file
28
assets/scss/style.scss
Normal file
@ -0,0 +1,28 @@
|
||||
/*!------------------------------------------------------------------
|
||||
[MAIN STYLESHEET]
|
||||
|
||||
PROJECT: Project Name
|
||||
VERSION: Versoin Number
|
||||
-------------------------------------------------------------------*/
|
||||
|
||||
/*------------------------------------------------------------------
|
||||
[TABLE OF CONTENTS]
|
||||
-------------------------------------------------------------------*/
|
||||
|
||||
@import 'variables';
|
||||
|
||||
@import 'mixins';
|
||||
|
||||
@import 'typography';
|
||||
|
||||
@import 'buttons';
|
||||
|
||||
@import 'common';
|
||||
|
||||
@import 'templates/navigation';
|
||||
|
||||
@import 'templates/slider';
|
||||
|
||||
@import 'templates/homepage';
|
||||
|
||||
@import 'templates/otherspage';
|
215
assets/scss/templates/_homepage.scss
Normal file
215
assets/scss/templates/_homepage.scss
Normal file
@ -0,0 +1,215 @@
|
||||
/* banner feature */
|
||||
.feature-icon {
|
||||
font-size: 60px;
|
||||
color: $secondary-color;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.feature-blocks {
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
padding-left: 70px;
|
||||
padding-top: 80px;
|
||||
padding-right: 30%;
|
||||
|
||||
@include desktop-xl {
|
||||
padding-right: 10%;
|
||||
}
|
||||
|
||||
@include desktop-lg {
|
||||
padding-right: 50px;
|
||||
padding-left: 50px;
|
||||
padding-top: 30px;
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
margin-top: 0;
|
||||
padding: 50px;
|
||||
|
||||
h3 {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/* /banner feature */
|
||||
|
||||
/* course */
|
||||
.card-btn {
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.flex-basis-33 {
|
||||
flex-basis: 33.3333%;
|
||||
}
|
||||
|
||||
.hover-shadow {
|
||||
transition: .3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 4px 25px 0px rgba(27, 39, 71, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
/* /course */
|
||||
|
||||
/* success story */
|
||||
.success-video {
|
||||
min-height: 300px;
|
||||
|
||||
.play-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
|
||||
@include tablet {
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
display: inline-block;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
border-radius: 50%;
|
||||
background: $primary-color;
|
||||
color: $white;
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
line-height: 80px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 0;
|
||||
width: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
background: $white;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: -2;
|
||||
transition: .3s ease;
|
||||
transition-delay: .2s;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 80%;
|
||||
width: 80%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: $primary-color;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: -1;
|
||||
transition: .3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
height: 80%;
|
||||
width: 80%;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
&::after {
|
||||
height: 0;
|
||||
width: 0;
|
||||
transition: 0s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* /success story */
|
||||
|
||||
/* events */
|
||||
.card-date {
|
||||
position: absolute;
|
||||
background: $primary-color;
|
||||
font-family: $secondary-font;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
color: $white;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-transform: uppercase;
|
||||
|
||||
span {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* /events */
|
||||
|
||||
/* teacher */
|
||||
.teacher-info {
|
||||
width: 70%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* /teacher */
|
||||
|
||||
/* footer */
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
height: 60px;
|
||||
background: $white;
|
||||
border-radius: 0;
|
||||
padding-left: 25px;
|
||||
|
||||
&:focus {
|
||||
border-color: $primary-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.newsletter-block {
|
||||
.form-control {
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-footer {
|
||||
background-color: #182b45;
|
||||
}
|
||||
|
||||
.logo-footer {
|
||||
margin-top: -20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-color: #494a43 !important;
|
||||
padding-top: 75px;
|
||||
}
|
||||
|
||||
/* /footer */
|
168
assets/scss/templates/_navigation.scss
Normal file
168
assets/scss/templates/_navigation.scss
Normal file
@ -0,0 +1,168 @@
|
||||
.top-header {
|
||||
font-size: 12px;
|
||||
transition: transform .2s ease;
|
||||
transform-origin: top;
|
||||
font-weight: 600;
|
||||
|
||||
&.hide {
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation {
|
||||
background: linear-gradient(to right, transparent 50%, $primary-color 50%);
|
||||
transition: .2s ease;
|
||||
|
||||
@include desktop {
|
||||
background: $secondary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse{
|
||||
@include desktop {
|
||||
background: $secondary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
padding-left: 50px;
|
||||
background: $primary-color;
|
||||
|
||||
@include desktop {
|
||||
padding-left: 0;
|
||||
background: $secondary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-bg {
|
||||
background-color: $secondary-color;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
margin: 0 15px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 6px;
|
||||
width: 100%;
|
||||
content: "";
|
||||
background: $white;
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
transition: transform .3s ease;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
&::before {
|
||||
transform: scaleY(1);
|
||||
transform-origin: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-nav .nav-link {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
link:focus,
|
||||
.navbar-dark .navbar-nav .nav-link:hover {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-nav .active>.nav-link,
|
||||
.navbar-dark .navbar-nav .nav-link.active,
|
||||
.navbar-dark .navbar-nav .nav-link.show,
|
||||
.navbar-dark .navbar-nav .show>.nav-link {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.navbar-expand-lg .navbar-nav .nav-link {
|
||||
padding: 40px 0px;
|
||||
|
||||
@include desktop {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
background: $white;
|
||||
box-shadow: 0 2px 5px #0000000d;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
.dropdown {
|
||||
&:hover {
|
||||
.dropdown-menu {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translateY(0)
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12);
|
||||
border-bottom: 5px solid $primary-color;
|
||||
padding: 15px;
|
||||
top: 96px;
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
transition: .3s ease;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
background: $white;
|
||||
|
||||
@include desktop {
|
||||
display: none;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
transform-origin: unset;
|
||||
}
|
||||
|
||||
&.show {
|
||||
visibility: hidden;
|
||||
|
||||
@include desktop {
|
||||
visibility: visible;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
position: relative;
|
||||
color: $text-color-dark;
|
||||
transition: .2s ease;
|
||||
text-transform: capitalize;
|
||||
font-family: $primary-font;
|
||||
|
||||
@include desktop {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
26
assets/scss/templates/_otherspage.scss
Normal file
26
assets/scss/templates/_otherspage.scss
Normal file
@ -0,0 +1,26 @@
|
||||
.filter-controls{
|
||||
li{
|
||||
cursor: pointer;
|
||||
transition: .1s ease;
|
||||
&.active{
|
||||
font-weight: 600;
|
||||
color: $primary-color;
|
||||
}
|
||||
&:hover{
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag-list{
|
||||
a{
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
background: $light;
|
||||
color: $text-color;
|
||||
&:hover{
|
||||
background-color: $primary-color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
64
assets/scss/templates/_slider.scss
Normal file
64
assets/scss/templates/_slider.scss
Normal file
@ -0,0 +1,64 @@
|
||||
.hero-section {
|
||||
padding: 250px 0 290px;
|
||||
}
|
||||
|
||||
.hero-slider {
|
||||
|
||||
.prevArrow,
|
||||
.nextArrow {
|
||||
position: absolute;
|
||||
bottom: -123px;
|
||||
z-index: 9;
|
||||
padding: 15px;
|
||||
color: rgba($color: $white, $alpha: .5);
|
||||
border: 0;
|
||||
font-size: 30px;
|
||||
transition: all linear .2s;
|
||||
background: transparent;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.prevArrow {
|
||||
right: 60px;
|
||||
}
|
||||
|
||||
.nextArrow {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -100px;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 6px;
|
||||
|
||||
&.slick-active {
|
||||
button {
|
||||
background: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
color: transparent;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: rgba($color: $white, $alpha: .5);
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user