├── css ├── _functions.css ├── _mixins.css ├── _site-blocks.css ├── mixins │ ├── _base.css │ ├── _deprecate.css │ └── _nav-divider.css ├── owl.theme.default.min.css ├── owl.carousel.min.css └── jquery.fancybox.min.css ├── scss ├── mixins │ ├── _base.scss │ ├── _clearfix.scss │ ├── _size.scss │ ├── _lists.scss │ ├── _text-truncate.scss │ ├── _resize.scss │ ├── _visibility.scss │ ├── _alert.scss │ ├── _text-hide.scss │ ├── _badge.scss │ ├── _nav-divider.scss │ ├── _transition.scss │ ├── _float.scss │ ├── _list-group.scss │ ├── _text-emphasis.scss │ ├── _reset-text.scss │ ├── _pagination.scss │ ├── _box-shadow.scss │ ├── _deprecate.scss │ ├── _background-variant.scss │ ├── _hover.scss │ ├── _screen-reader.scss │ ├── _table-row.scss │ ├── _image.scss │ ├── _border-radius.scss │ ├── _caret.scss │ ├── _grid-framework.scss │ ├── _gradients.scss │ ├── _grid.scss │ ├── _buttons.scss │ ├── _breakpoints.scss │ └── _forms.scss ├── style.scss ├── _mixins.scss ├── _site-footer.scss ├── _site-base.scss ├── _functions.scss ├── _site-elements.scss └── _site-navbar.scss ├── favicon.png ├── images ├── dotted.png ├── hero-min.jpg ├── logo-puma.png ├── img_h_1-min.jpg ├── img_h_2-min.jpg ├── img_h_3-min.jpg ├── img_h_4-min.jpg ├── img_h_5-min.jpg ├── img_h_6-min.jpg ├── img_h_7-min.jpg ├── img_h_8-min.jpg ├── img_v_1-min.jpg ├── img_v_2-min.jpg ├── img_v_3-min.jpg ├── img_v_4-min.jpg ├── img_v_5-min.jpg ├── img_v_6-min.jpg ├── img_v_7-min.jpg ├── img_v_8-min.jpg ├── logo-adobe.png ├── logo-google.png ├── logo-paypal.png ├── person_1-min.jpg ├── person_2-min.jpg ├── person_3-min.jpg ├── person_4-min.jpg ├── person_5-min.jpg ├── person_6-min.jpg ├── overlay.svg ├── slant.svg ├── slant-grey.svg └── undraw_snap_the_moment_re_88cu.svg ├── fonts ├── feather │ ├── fonts │ │ ├── feather.eot │ │ ├── feather.ttf │ │ └── feather.woff │ ├── Read Me.txt │ └── demo-files │ │ ├── demo.js │ │ └── demo.css ├── flaticon │ ├── font │ │ ├── Flaticon.eot │ │ ├── Flaticon.ttf │ │ ├── Flaticon.woff │ │ ├── Flaticon.woff2 │ │ ├── _flaticon.css │ │ ├── flaticon.css │ │ └── _flaticon.scss │ └── backup.txt └── icomoon │ ├── fonts │ ├── icomoon.eot │ ├── icomoon.ttf │ └── icomoon.woff │ ├── Read Me.txt │ └── demo-files │ ├── demo.js │ └── demo.css ├── LICENSE ├── js ├── jquery.animateNumber.min.js ├── jquery-migrate-3.0.0.min.js ├── custom.js ├── jquery.waypoints.min.js ├── jquery.stellar.min.js ├── aos.js └── imagesloaded.pkgd.js ├── .github └── workflows │ └── static.yml ├── README.md ├── prepros-6.config └── contact.html /css/_functions.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/_mixins.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/_site-blocks.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/mixins/_base.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scss/mixins/_base.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/mixins/_deprecate.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/mixins/_nav-divider.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/favicon.png -------------------------------------------------------------------------------- /images/dotted.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/dotted.png -------------------------------------------------------------------------------- /images/hero-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/hero-min.jpg -------------------------------------------------------------------------------- /images/logo-puma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/logo-puma.png -------------------------------------------------------------------------------- /images/img_h_1-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/img_h_1-min.jpg -------------------------------------------------------------------------------- /images/img_h_2-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/img_h_2-min.jpg -------------------------------------------------------------------------------- /images/img_h_3-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/img_h_3-min.jpg -------------------------------------------------------------------------------- /images/img_h_4-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/img_h_4-min.jpg -------------------------------------------------------------------------------- /images/img_h_5-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/img_h_5-min.jpg -------------------------------------------------------------------------------- /images/img_h_6-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/img_h_6-min.jpg -------------------------------------------------------------------------------- /images/img_h_7-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/img_h_7-min.jpg -------------------------------------------------------------------------------- /images/img_h_8-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/img_h_8-min.jpg -------------------------------------------------------------------------------- /images/img_v_1-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/img_v_1-min.jpg -------------------------------------------------------------------------------- /images/img_v_2-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/img_v_2-min.jpg -------------------------------------------------------------------------------- /images/img_v_3-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/img_v_3-min.jpg -------------------------------------------------------------------------------- /images/img_v_4-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/img_v_4-min.jpg -------------------------------------------------------------------------------- /images/img_v_5-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/img_v_5-min.jpg -------------------------------------------------------------------------------- /images/img_v_6-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/img_v_6-min.jpg -------------------------------------------------------------------------------- /images/img_v_7-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/img_v_7-min.jpg -------------------------------------------------------------------------------- /images/img_v_8-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/img_v_8-min.jpg -------------------------------------------------------------------------------- /images/logo-adobe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/logo-adobe.png -------------------------------------------------------------------------------- /images/logo-google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/logo-google.png -------------------------------------------------------------------------------- /images/logo-paypal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/logo-paypal.png -------------------------------------------------------------------------------- /images/person_1-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/person_1-min.jpg -------------------------------------------------------------------------------- /images/person_2-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/person_2-min.jpg -------------------------------------------------------------------------------- /images/person_3-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/person_3-min.jpg -------------------------------------------------------------------------------- /images/person_4-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/person_4-min.jpg -------------------------------------------------------------------------------- /images/person_5-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/person_5-min.jpg -------------------------------------------------------------------------------- /images/person_6-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/images/person_6-min.jpg -------------------------------------------------------------------------------- /fonts/feather/fonts/feather.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/fonts/feather/fonts/feather.eot -------------------------------------------------------------------------------- /fonts/feather/fonts/feather.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/fonts/feather/fonts/feather.ttf -------------------------------------------------------------------------------- /fonts/feather/fonts/feather.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/fonts/feather/fonts/feather.woff -------------------------------------------------------------------------------- /fonts/flaticon/font/Flaticon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/fonts/flaticon/font/Flaticon.eot -------------------------------------------------------------------------------- /fonts/flaticon/font/Flaticon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/fonts/flaticon/font/Flaticon.ttf -------------------------------------------------------------------------------- /fonts/flaticon/font/Flaticon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/fonts/flaticon/font/Flaticon.woff -------------------------------------------------------------------------------- /fonts/icomoon/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/fonts/icomoon/fonts/icomoon.eot -------------------------------------------------------------------------------- /fonts/icomoon/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/fonts/icomoon/fonts/icomoon.ttf -------------------------------------------------------------------------------- /fonts/icomoon/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/fonts/icomoon/fonts/icomoon.woff -------------------------------------------------------------------------------- /fonts/flaticon/font/Flaticon.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krypto-etox/service-website-template/HEAD/fonts/flaticon/font/Flaticon.woff2 -------------------------------------------------------------------------------- /scss/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | @mixin clearfix() { 2 | &::after { 3 | display: block; 4 | clear: both; 5 | content: ""; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /scss/mixins/_size.scss: -------------------------------------------------------------------------------- 1 | // Sizing shortcuts 2 | 3 | @mixin size($width, $height: $width) { 4 | width: $width; 5 | height: $height; 6 | @include deprecate("`size()`", "v4.3.0", "v5"); 7 | } 8 | -------------------------------------------------------------------------------- /scss/mixins/_lists.scss: -------------------------------------------------------------------------------- 1 | // Lists 2 | 3 | // Unstyled keeps list items block level, just removes default browser padding and list-style 4 | @mixin list-unstyled() { 5 | padding-left: 0; 6 | list-style: none; 7 | } 8 | -------------------------------------------------------------------------------- /scss/mixins/_text-truncate.scss: -------------------------------------------------------------------------------- 1 | // Text truncate 2 | // Requires inline-block or block for proper styling 3 | 4 | @mixin text-truncate() { 5 | overflow: hidden; 6 | text-overflow: ellipsis; 7 | white-space: nowrap; 8 | } 9 | -------------------------------------------------------------------------------- /scss/mixins/_resize.scss: -------------------------------------------------------------------------------- 1 | // Resize anything 2 | 3 | @mixin resizable($direction) { 4 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` 5 | resize: $direction; // Options: horizontal, vertical, both 6 | } 7 | -------------------------------------------------------------------------------- /scss/mixins/_visibility.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Visibility 4 | 5 | @mixin invisible($visibility) { 6 | visibility: $visibility !important; 7 | @include deprecate("`invisible()`", "v4.3.0", "v5"); 8 | } 9 | -------------------------------------------------------------------------------- /images/overlay.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /scss/mixins/_alert.scss: -------------------------------------------------------------------------------- 1 | @mixin alert-variant($background, $border, $color) { 2 | color: $color; 3 | @include gradient-bg($background); 4 | border-color: $border; 5 | 6 | hr { 7 | border-top-color: darken($border, 5%); 8 | } 9 | 10 | .alert-link { 11 | color: darken($color, 10%); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /scss/mixins/_text-hide.scss: -------------------------------------------------------------------------------- 1 | // CSS image replacement 2 | @mixin text-hide($ignore-warning: false) { 3 | // stylelint-disable-next-line font-family-no-missing-generic-family-keyword 4 | font: 0/0 a; 5 | color: transparent; 6 | text-shadow: none; 7 | background-color: transparent; 8 | border: 0; 9 | 10 | @include deprecate("`text-hide()`", "v4.1.0", "v5", $ignore-warning); 11 | } 12 | -------------------------------------------------------------------------------- /scss/mixins/_badge.scss: -------------------------------------------------------------------------------- 1 | @mixin badge-variant($bg) { 2 | color: color-yiq($bg); 3 | background-color: $bg; 4 | 5 | @at-root a#{&} { 6 | @include hover-focus() { 7 | color: color-yiq($bg); 8 | background-color: darken($bg, 10%); 9 | } 10 | 11 | &:focus, 12 | &.focus { 13 | outline: 0; 14 | box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5); 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /scss/mixins/_nav-divider.scss: -------------------------------------------------------------------------------- 1 | // Horizontal dividers 2 | // 3 | // Dividers (basically an hr) within dropdowns and nav lists 4 | 5 | @mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y, $ignore-warning: false) { 6 | height: 0; 7 | margin: $margin-y 0; 8 | overflow: hidden; 9 | border-top: 1px solid $color; 10 | @include deprecate("The `nav-divider()` mixin", "v4.4.0", "v5", $ignore-warning); 11 | } 12 | -------------------------------------------------------------------------------- /scss/mixins/_transition.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable property-blacklist 2 | @mixin transition($transition...) { 3 | @if $enable-transitions { 4 | @if length($transition) == 0 { 5 | transition: $transition-base; 6 | } @else { 7 | transition: $transition; 8 | } 9 | } 10 | 11 | @if $enable-prefers-reduced-motion-media-query { 12 | @media (prefers-reduced-motion: reduce) { 13 | transition: none; 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /scss/mixins/_float.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | @mixin float-left() { 4 | float: left !important; 5 | @include deprecate("The `float-left` mixin", "v4.3.0", "v5"); 6 | } 7 | @mixin float-right() { 8 | float: right !important; 9 | @include deprecate("The `float-right` mixin", "v4.3.0", "v5"); 10 | } 11 | @mixin float-none() { 12 | float: none !important; 13 | @include deprecate("The `float-none` mixin", "v4.3.0", "v5"); 14 | } 15 | -------------------------------------------------------------------------------- /images/slant.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /images/slant-grey.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /scss/mixins/_list-group.scss: -------------------------------------------------------------------------------- 1 | // List Groups 2 | 3 | @mixin list-group-item-variant($state, $background, $color) { 4 | .list-group-item-#{$state} { 5 | color: $color; 6 | background-color: $background; 7 | 8 | &.list-group-item-action { 9 | @include hover-focus() { 10 | color: $color; 11 | background-color: darken($background, 5%); 12 | } 13 | 14 | &.active { 15 | color: $white; 16 | background-color: $color; 17 | border-color: $color; 18 | } 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /scss/mixins/_text-emphasis.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Typography 4 | 5 | @mixin text-emphasis-variant($parent, $color, $ignore-warning: false) { 6 | #{$parent} { 7 | color: $color !important; 8 | } 9 | @if $emphasized-link-hover-darken-percentage != 0 { 10 | a#{$parent} { 11 | @include hover-focus() { 12 | color: darken($color, $emphasized-link-hover-darken-percentage) !important; 13 | } 14 | } 15 | } 16 | @include deprecate("`text-emphasis-variant()`", "v4.4.0", "v5", $ignore-warning); 17 | } 18 | -------------------------------------------------------------------------------- /scss/mixins/_reset-text.scss: -------------------------------------------------------------------------------- 1 | @mixin reset-text() { 2 | font-family: $font-family-base; 3 | // We deliberately do NOT reset font-size or word-wrap. 4 | font-style: normal; 5 | font-weight: $font-weight-normal; 6 | line-height: $line-height-base; 7 | text-align: left; // Fallback for where `start` is not supported 8 | text-align: start; 9 | text-decoration: none; 10 | text-shadow: none; 11 | text-transform: none; 12 | letter-spacing: normal; 13 | word-break: normal; 14 | word-spacing: normal; 15 | white-space: normal; 16 | line-break: auto; 17 | } 18 | -------------------------------------------------------------------------------- /scss/mixins/_pagination.scss: -------------------------------------------------------------------------------- 1 | // Pagination 2 | 3 | @mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { 4 | .page-link { 5 | padding: $padding-y $padding-x; 6 | @include font-size($font-size); 7 | line-height: $line-height; 8 | } 9 | 10 | .page-item { 11 | &:first-child { 12 | .page-link { 13 | @include border-left-radius($border-radius); 14 | } 15 | } 16 | &:last-child { 17 | .page-link { 18 | @include border-right-radius($border-radius); 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /scss/mixins/_box-shadow.scss: -------------------------------------------------------------------------------- 1 | @mixin box-shadow($shadow...) { 2 | @if $enable-shadows { 3 | $result: (); 4 | 5 | @if (length($shadow) == 1) { 6 | // We can pass `@include box-shadow(none);` 7 | $result: $shadow; 8 | } @else { 9 | // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;` 10 | @for $i from 1 through length($shadow) { 11 | @if nth($shadow, $i) != "none" { 12 | $result: append($result, nth($shadow, $i), "comma"); 13 | } 14 | } 15 | } 16 | @if (length($result) > 0) { 17 | box-shadow: $result; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /scss/mixins/_deprecate.scss: -------------------------------------------------------------------------------- 1 | // Deprecate mixin 2 | // 3 | // This mixin can be used to deprecate mixins or functions. 4 | // `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to 5 | // some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap) 6 | @mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) { 7 | @if ($enable-deprecation-messages != false and $ignore-warning != true) { 8 | @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}."; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /scss/mixins/_background-variant.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Contextual backgrounds 4 | 5 | @mixin bg-variant($parent, $color, $ignore-warning: false) { 6 | #{$parent} { 7 | background-color: $color !important; 8 | } 9 | a#{$parent}, 10 | button#{$parent} { 11 | @include hover-focus() { 12 | background-color: darken($color, 10%) !important; 13 | } 14 | } 15 | @include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning); 16 | } 17 | 18 | @mixin bg-gradient-variant($parent, $color) { 19 | #{$parent} { 20 | background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /scss/style.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Template Name: Append 3 | * Template Author: Untree.co 4 | * Template License: https://creativecommons.org/licenses/by/3.0/ 5 | * Author URI: https://untree.co/ 6 | 7 | * Twitter: https://twitter.com/Untree_co 8 | * Facebook: https://web.facebook.com/Untree.co/ 9 | */ 10 | 11 | @import "functions"; 12 | @import "variables"; 13 | @import "mixins"; 14 | 15 | $primary: #e84545; 16 | $black: #000000; 17 | $white: #ffffff; 18 | $heading_color: #000839; 19 | $heading_light_color: rgba($heading_color, .5); 20 | $font-family: 'Montserrat', sans-serif; 21 | 22 | @import 'site-base'; 23 | @import 'site-navbar'; 24 | @import 'site-blocks'; 25 | @import 'site-elements'; 26 | @import 'site-footer'; -------------------------------------------------------------------------------- /fonts/feather/Read Me.txt: -------------------------------------------------------------------------------- 1 | Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures. 2 | 3 | To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts 4 | 5 | You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects. 6 | 7 | You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection. 8 | -------------------------------------------------------------------------------- /fonts/icomoon/Read Me.txt: -------------------------------------------------------------------------------- 1 | Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures. 2 | 3 | To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts 4 | 5 | You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects. 6 | 7 | You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection. 8 | -------------------------------------------------------------------------------- /fonts/flaticon/backup.txt: -------------------------------------------------------------------------------- 1 | eyI4Ijp7IklEIjo4LCJuYW1lIjoiTXkgaWNvbnMgY29sbGVjdGlvbiIsImJvb2ttYXJrX2lkIjoxNTI2Njc0MSwiY3JlYXRlZCI6MTYwODQyNDk5MywidXBkYXRlZCI6MTYxMTA1NDU2MiwiYWN0aXZlIjoxLCJzb3VyY2UiOiJyZW1vdGUiLCJvcmRlciI6MCwiY29sb3IiOiIwMDAwMDAiLCJzdGF0dXMiOjF9LCIxNTI2Njc0MSI6W3siaWQiOjc4NjcyNCwibmFtZSI6ImpvYi1zZWFyY2giLCJjb2xvciI6IiMwMDAwMDAiLCJwcmVtaXVtIjoiMCIsInNvcnQiOjF9LHsiaWQiOjc4Njc0NiwibmFtZSI6InN0YXRpc3RpY3MiLCJjb2xvciI6IiMwMDAwMDAiLCJwcmVtaXVtIjoiMCIsInNvcnQiOjJ9LHsiaWQiOjEzOTE5ODAsIm5hbWUiOiJyb2NrZXQiLCJjb2xvciI6IiMwMDAwMDAiLCJwcmVtaXVtIjoiMCIsInNvcnQiOjN9LHsiaWQiOjgyNzk1MywibmFtZSI6Imdyb3d0aCIsImNvbG9yIjoiIzAwMDAwMCIsInByZW1pdW0iOiIwIiwic29ydCI6NH0seyJpZCI6ODI3OTE4LCJuYW1lIjoib2JqZWN0aXZlIiwiY29sb3IiOiIjMDAwMDAwIiwicHJlbWl1bSI6IjAiLCJzb3J0Ijo1fSx7ImlkIjoyMjA5OTY0LCJuYW1lIjoiY29kaW5nIiwiY29sb3IiOiIjMDAwMDAwIiwicHJlbWl1bSI6IjAiLCJzb3J0Ijo2fV19 -------------------------------------------------------------------------------- /scss/mixins/_hover.scss: -------------------------------------------------------------------------------- 1 | // Hover mixin and `$enable-hover-media-query` are deprecated. 2 | // 3 | // Originally added during our alphas and maintained during betas, this mixin was 4 | // designed to prevent `:hover` stickiness on iOS-an issue where hover styles 5 | // would persist after initial touch. 6 | // 7 | // For backward compatibility, we've kept these mixins and updated them to 8 | // always return their regular pseudo-classes instead of a shimmed media query. 9 | // 10 | // Issue: https://github.com/twbs/bootstrap/issues/25195 11 | 12 | @mixin hover() { 13 | &:hover { @content; } 14 | } 15 | 16 | @mixin hover-focus() { 17 | &:hover, 18 | &:focus { 19 | @content; 20 | } 21 | } 22 | 23 | @mixin plain-hover-focus() { 24 | &, 25 | &:hover, 26 | &:focus { 27 | @content; 28 | } 29 | } 30 | 31 | @mixin hover-focus-active() { 32 | &:hover, 33 | &:focus, 34 | &:active { 35 | @content; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /scss/mixins/_screen-reader.scss: -------------------------------------------------------------------------------- 1 | // Only display content to screen readers 2 | // 3 | // See: https://a11yproject.com/posts/how-to-hide-content/ 4 | // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ 5 | 6 | @mixin sr-only() { 7 | position: absolute; 8 | width: 1px; 9 | height: 1px; 10 | padding: 0; 11 | margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686 12 | overflow: hidden; 13 | clip: rect(0, 0, 0, 0); 14 | white-space: nowrap; 15 | border: 0; 16 | } 17 | 18 | // Use in conjunction with .sr-only to only display content when it's focused. 19 | // 20 | // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 21 | // 22 | // Credit: HTML5 Boilerplate 23 | 24 | @mixin sr-only-focusable() { 25 | &:active, 26 | &:focus { 27 | position: static; 28 | width: auto; 29 | height: auto; 30 | overflow: visible; 31 | clip: auto; 32 | white-space: normal; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /scss/mixins/_table-row.scss: -------------------------------------------------------------------------------- 1 | // Tables 2 | 3 | @mixin table-row-variant($state, $background, $border: null) { 4 | // Exact selectors below required to override `.table-striped` and prevent 5 | // inheritance to nested tables. 6 | .table-#{$state} { 7 | &, 8 | > th, 9 | > td { 10 | background-color: $background; 11 | } 12 | 13 | @if $border != null { 14 | th, 15 | td, 16 | thead th, 17 | tbody + tbody { 18 | border-color: $border; 19 | } 20 | } 21 | } 22 | 23 | // Hover states for `.table-hover` 24 | // Note: this is not available for cells or rows within `thead` or `tfoot`. 25 | .table-hover { 26 | $hover-background: darken($background, 5%); 27 | 28 | .table-#{$state} { 29 | @include hover() { 30 | background-color: $hover-background; 31 | 32 | > td, 33 | > th { 34 | background-color: $hover-background; 35 | } 36 | } 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /css/owl.theme.default.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.2.1 3 | * Copyright 2013-2017 David Deutsch 4 | * Licensed under () 5 | */ 6 | .owl-theme .owl-dots, 7 | .owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent} 8 | .owl-theme .owl-nav{margin-top:10px} 9 | .owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px;position: absolute;} 10 | .owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none} 11 | .owl-theme .owl-nav .disabled{opacity:.5;cursor:default} 12 | .owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px} 13 | .owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1} 14 | .owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px} 15 | .owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791} -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Krypto-etox 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /fonts/feather/demo-files/demo.js: -------------------------------------------------------------------------------- 1 | if (!('boxShadow' in document.body.style)) { 2 | document.body.setAttribute('class', 'noBoxShadow'); 3 | } 4 | 5 | document.body.addEventListener("click", function(e) { 6 | var target = e.target; 7 | if (target.tagName === "INPUT" && 8 | target.getAttribute('class').indexOf('liga') === -1) { 9 | target.select(); 10 | } 11 | }); 12 | 13 | (function() { 14 | var fontSize = document.getElementById('fontSize'), 15 | testDrive = document.getElementById('testDrive'), 16 | testText = document.getElementById('testText'); 17 | function updateTest() { 18 | testDrive.innerHTML = testText.value || String.fromCharCode(160); 19 | if (window.icomoonLiga) { 20 | window.icomoonLiga(testDrive); 21 | } 22 | } 23 | function updateSize() { 24 | testDrive.style.fontSize = fontSize.value + 'px'; 25 | } 26 | fontSize.addEventListener('change', updateSize, false); 27 | testText.addEventListener('input', updateTest, false); 28 | testText.addEventListener('change', updateTest, false); 29 | updateSize(); 30 | }()); 31 | -------------------------------------------------------------------------------- /fonts/icomoon/demo-files/demo.js: -------------------------------------------------------------------------------- 1 | if (!('boxShadow' in document.body.style)) { 2 | document.body.setAttribute('class', 'noBoxShadow'); 3 | } 4 | 5 | document.body.addEventListener("click", function(e) { 6 | var target = e.target; 7 | if (target.tagName === "INPUT" && 8 | target.getAttribute('class').indexOf('liga') === -1) { 9 | target.select(); 10 | } 11 | }); 12 | 13 | (function() { 14 | var fontSize = document.getElementById('fontSize'), 15 | testDrive = document.getElementById('testDrive'), 16 | testText = document.getElementById('testText'); 17 | function updateTest() { 18 | testDrive.innerHTML = testText.value || String.fromCharCode(160); 19 | if (window.icomoonLiga) { 20 | window.icomoonLiga(testDrive); 21 | } 22 | } 23 | function updateSize() { 24 | testDrive.style.fontSize = fontSize.value + 'px'; 25 | } 26 | fontSize.addEventListener('change', updateSize, false); 27 | testText.addEventListener('input', updateTest, false); 28 | testText.addEventListener('change', updateTest, false); 29 | updateSize(); 30 | }()); 31 | -------------------------------------------------------------------------------- /scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Toggles 2 | // 3 | // Used in conjunction with global variables to enable certain theme features. 4 | 5 | // Vendor 6 | // @import "vendor/rfs"; 7 | 8 | // Deprecate 9 | @import "mixins/deprecate"; 10 | 11 | // Utilities 12 | @import "mixins/breakpoints"; 13 | @import "mixins/hover"; 14 | @import "mixins/image"; 15 | @import "mixins/badge"; 16 | @import "mixins/resize"; 17 | @import "mixins/screen-reader"; 18 | @import "mixins/size"; 19 | @import "mixins/reset-text"; 20 | @import "mixins/text-emphasis"; 21 | @import "mixins/text-hide"; 22 | @import "mixins/text-truncate"; 23 | @import "mixins/visibility"; 24 | 25 | // Components 26 | @import "mixins/alert"; 27 | @import "mixins/buttons"; 28 | @import "mixins/caret"; 29 | @import "mixins/pagination"; 30 | @import "mixins/lists"; 31 | @import "mixins/list-group"; 32 | @import "mixins/nav-divider"; 33 | @import "mixins/forms"; 34 | @import "mixins/table-row"; 35 | 36 | // Skins 37 | @import "mixins/background-variant"; 38 | @import "mixins/border-radius"; 39 | @import "mixins/box-shadow"; 40 | @import "mixins/gradients"; 41 | @import "mixins/transition"; 42 | 43 | // Layout 44 | @import "mixins/clearfix"; 45 | @import "mixins/grid-framework"; 46 | @import "mixins/grid"; 47 | @import "mixins/float"; 48 | -------------------------------------------------------------------------------- /scss/mixins/_image.scss: -------------------------------------------------------------------------------- 1 | // Image Mixins 2 | // - Responsive image 3 | // - Retina image 4 | 5 | 6 | // Responsive image 7 | // 8 | // Keep images from scaling beyond the width of their parents. 9 | 10 | @mixin img-fluid() { 11 | // Part 1: Set a maximum relative to the parent 12 | max-width: 100%; 13 | // Part 2: Override the height to auto, otherwise images will be stretched 14 | // when setting a width and height attribute on the img element. 15 | height: auto; 16 | } 17 | 18 | 19 | // Retina image 20 | // 21 | // Short retina mixin for setting background-image and -size. 22 | 23 | @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { 24 | background-image: url($file-1x); 25 | 26 | // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio, 27 | // but doesn't convert dppx=>dpi. 28 | // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard. 29 | // Compatibility info: https://caniuse.com/#feat=css-media-resolution 30 | @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx 31 | only screen and (min-resolution: 2dppx) { // Standardized 32 | background-image: url($file-2x); 33 | background-size: $width-1x $height-1x; 34 | } 35 | @include deprecate("`img-retina()`", "v4.3.0", "v5"); 36 | } 37 | -------------------------------------------------------------------------------- /js/jquery.animateNumber.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | jQuery animateNumber plugin v0.0.14 3 | (c) 2013, Alexandr Borisov. 4 | https://github.com/aishek/jquery-animateNumber 5 | */ 6 | (function(d){var r=function(b){return b.split("").reverse().join("")},m={numberStep:function(b,a){var e=Math.floor(b);d(a.elem).text(e)}},g=function(b){var a=b.elem;a.nodeType&&a.parentNode&&(a=a._animateNumberSetter,a||(a=m.numberStep),a(b.now,b))};d.Tween&&d.Tween.propHooks?d.Tween.propHooks.number={set:g}:d.fx.step.number=g;d.animateNumber={numberStepFactories:{append:function(b){return function(a,e){var f=Math.floor(a);d(e.elem).prop("number",a).text(f+b)}},separator:function(b,a,e){b=b||" "; 7 | a=a||3;e=e||"";return function(f,k){var u=0>f,c=Math.floor((u?-1:1)*f).toString(),n=d(k.elem);if(c.length>a){for(var h=c,l=a,m=h.split("").reverse(),c=[],p,s,q,t=0,g=Math.ceil(h.length/l);t * { 66 | flex: 0 0 100% / $count; 67 | max-width: 100% / $count; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /fonts/feather/demo-files/demo.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-family: sans-serif; 5 | font-size: 1em; 6 | line-height: 1.5; 7 | color: #555; 8 | background: #fff; 9 | } 10 | h1 { 11 | font-size: 1.5em; 12 | font-weight: normal; 13 | } 14 | small { 15 | font-size: .66666667em; 16 | } 17 | a { 18 | color: #e74c3c; 19 | text-decoration: none; 20 | } 21 | a:hover, a:focus { 22 | box-shadow: 0 1px #e74c3c; 23 | } 24 | .bshadow0, input { 25 | box-shadow: inset 0 -2px #e7e7e7; 26 | } 27 | input:hover { 28 | box-shadow: inset 0 -2px #ccc; 29 | } 30 | input, fieldset { 31 | font-family: sans-serif; 32 | font-size: 1em; 33 | margin: 0; 34 | padding: 0; 35 | border: 0; 36 | } 37 | input { 38 | color: inherit; 39 | line-height: 1.5; 40 | height: 1.5em; 41 | padding: .25em 0; 42 | } 43 | input:focus { 44 | outline: none; 45 | box-shadow: inset 0 -2px #449fdb; 46 | } 47 | .glyph { 48 | font-size: 16px; 49 | width: 15em; 50 | padding-bottom: 1em; 51 | margin-right: 4em; 52 | margin-bottom: 1em; 53 | float: left; 54 | overflow: hidden; 55 | } 56 | .liga { 57 | width: 80%; 58 | width: calc(100% - 2.5em); 59 | } 60 | .talign-right { 61 | text-align: right; 62 | } 63 | .talign-center { 64 | text-align: center; 65 | } 66 | .bgc1 { 67 | background: #f1f1f1; 68 | } 69 | .fgc1 { 70 | color: #999; 71 | } 72 | .fgc0 { 73 | color: #000; 74 | } 75 | p { 76 | margin-top: 1em; 77 | margin-bottom: 1em; 78 | } 79 | .mvm { 80 | margin-top: .75em; 81 | margin-bottom: .75em; 82 | } 83 | .mtn { 84 | margin-top: 0; 85 | } 86 | .mtl, .mal { 87 | margin-top: 1.5em; 88 | } 89 | .mbl, .mal { 90 | margin-bottom: 1.5em; 91 | } 92 | .mal, .mhl { 93 | margin-left: 1.5em; 94 | margin-right: 1.5em; 95 | } 96 | .mhmm { 97 | margin-left: 1em; 98 | margin-right: 1em; 99 | } 100 | .mls { 101 | margin-left: .25em; 102 | } 103 | .ptl { 104 | padding-top: 1.5em; 105 | } 106 | .pbs, .pvs { 107 | padding-bottom: .25em; 108 | } 109 | .pvs, .pts { 110 | padding-top: .25em; 111 | } 112 | .unit { 113 | float: left; 114 | } 115 | .unitRight { 116 | float: right; 117 | } 118 | .size1of2 { 119 | width: 50%; 120 | } 121 | .size1of1 { 122 | width: 100%; 123 | } 124 | .clearfix:before, .clearfix:after { 125 | content: " "; 126 | display: table; 127 | } 128 | .clearfix:after { 129 | clear: both; 130 | } 131 | .hidden-true { 132 | display: none; 133 | } 134 | .textbox0 { 135 | width: 3em; 136 | background: #f1f1f1; 137 | padding: .25em .5em; 138 | line-height: 1.5; 139 | height: 1.5em; 140 | } 141 | #testDrive { 142 | display: block; 143 | padding-top: 24px; 144 | line-height: 1.5; 145 | } 146 | .fs0 { 147 | font-size: 16px; 148 | } 149 | .fs1 { 150 | font-size: 24px; 151 | } 152 | 153 | -------------------------------------------------------------------------------- /css/owl.carousel.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.2.1 3 | * Copyright 2013-2017 David Deutsch 4 | * Licensed under () 5 | */ 6 | .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} -------------------------------------------------------------------------------- /fonts/icomoon/demo-files/demo.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-family: sans-serif; 5 | font-size: 1em; 6 | line-height: 1.5; 7 | color: #555; 8 | background: #fff; 9 | } 10 | h1 { 11 | font-size: 1.5em; 12 | font-weight: normal; 13 | } 14 | small { 15 | font-size: .66666667em; 16 | } 17 | a { 18 | color: #e74c3c; 19 | text-decoration: none; 20 | } 21 | a:hover, a:focus { 22 | box-shadow: 0 1px #e74c3c; 23 | } 24 | .bshadow0, input { 25 | box-shadow: inset 0 -2px #e7e7e7; 26 | } 27 | input:hover { 28 | box-shadow: inset 0 -2px #ccc; 29 | } 30 | input, fieldset { 31 | font-family: sans-serif; 32 | font-size: 1em; 33 | margin: 0; 34 | padding: 0; 35 | border: 0; 36 | } 37 | input { 38 | color: inherit; 39 | line-height: 1.5; 40 | height: 1.5em; 41 | padding: .25em 0; 42 | } 43 | input:focus { 44 | outline: none; 45 | box-shadow: inset 0 -2px #449fdb; 46 | } 47 | .glyph { 48 | font-size: 16px; 49 | width: 15em; 50 | padding-bottom: 1em; 51 | margin-right: 4em; 52 | margin-bottom: 1em; 53 | float: left; 54 | overflow: hidden; 55 | } 56 | .liga { 57 | width: 80%; 58 | width: calc(100% - 2.5em); 59 | } 60 | .talign-right { 61 | text-align: right; 62 | } 63 | .talign-center { 64 | text-align: center; 65 | } 66 | .bgc1 { 67 | background: #f1f1f1; 68 | } 69 | .fgc1 { 70 | color: #999; 71 | } 72 | .fgc0 { 73 | color: #000; 74 | } 75 | p { 76 | margin-top: 1em; 77 | margin-bottom: 1em; 78 | } 79 | .mvm { 80 | margin-top: .75em; 81 | margin-bottom: .75em; 82 | } 83 | .mtn { 84 | margin-top: 0; 85 | } 86 | .mtl, .mal { 87 | margin-top: 1.5em; 88 | } 89 | .mbl, .mal { 90 | margin-bottom: 1.5em; 91 | } 92 | .mal, .mhl { 93 | margin-left: 1.5em; 94 | margin-right: 1.5em; 95 | } 96 | .mhmm { 97 | margin-left: 1em; 98 | margin-right: 1em; 99 | } 100 | .mls { 101 | margin-left: .25em; 102 | } 103 | .ptl { 104 | padding-top: 1.5em; 105 | } 106 | .pbs, .pvs { 107 | padding-bottom: .25em; 108 | } 109 | .pvs, .pts { 110 | padding-top: .25em; 111 | } 112 | .unit { 113 | float: left; 114 | } 115 | .unitRight { 116 | float: right; 117 | } 118 | .size1of2 { 119 | width: 50%; 120 | } 121 | .size1of1 { 122 | width: 100%; 123 | } 124 | .clearfix:before, .clearfix:after { 125 | content: " "; 126 | display: table; 127 | } 128 | .clearfix:after { 129 | clear: both; 130 | } 131 | .hidden-true { 132 | display: none; 133 | } 134 | .textbox0 { 135 | width: 3em; 136 | background: #f1f1f1; 137 | padding: .25em .5em; 138 | line-height: 1.5; 139 | height: 1.5em; 140 | } 141 | #testDrive { 142 | display: block; 143 | padding-top: 24px; 144 | line-height: 1.5; 145 | } 146 | .fs0 { 147 | font-size: 16px; 148 | } 149 | .fs1 { 150 | font-size: 28px; 151 | } 152 | .fs2 { 153 | font-size: 24px; 154 | } 155 | 156 | -------------------------------------------------------------------------------- /scss/_site-base.scss: -------------------------------------------------------------------------------- 1 | 2 | html { 3 | overflow-x: hidden; 4 | } 5 | body { 6 | font-family: $font-family; 7 | line-height: 1.8; 8 | font-size: 15px; 9 | color: #7a7a7a; 10 | background: #fff; 11 | overflow-x: hidden; 12 | &:before { 13 | content: ""; 14 | position: absolute; 15 | top: 0; 16 | left: 0; 17 | z-index: 99; 18 | right: 0; 19 | bottom: 0; 20 | background:rgba($black, .2); 21 | opacity: 0; 22 | visibility: hidden; 23 | transition: .3s all ease; 24 | } 25 | &.offcanvas-menu { 26 | &:before { 27 | opacity: 1; 28 | visibility: visible; 29 | } 30 | } 31 | } 32 | a { 33 | color: $primary; 34 | transition: .3s all ease; 35 | &:hover { 36 | color: $primary; 37 | text-decoration: none; 38 | } 39 | } 40 | h1, h2, h3, h4, h5 { 41 | color: $heading_color; 42 | } 43 | .text-primary { 44 | color: $primary!important; 45 | } 46 | 47 | .text-black { 48 | color: $black!important; 49 | } 50 | a.text-primary { 51 | color: $primary!important; 52 | &:hover { 53 | color: $primary!important; 54 | } 55 | } 56 | .bg-primary { 57 | background-color: $primary!important; 58 | } 59 | 60 | h1, .h1, h2, .h2, h3, .h3, h4, .h4 { 61 | font-family: $font-family; 62 | } 63 | 64 | 65 | .btn { 66 | padding-top: 12px; 67 | padding-bottom: 12px; 68 | padding-left: 30px; 69 | padding-right: 30px; 70 | border-radius: 4px; 71 | font-size: 14px; 72 | &:active, &:focus { 73 | outline: none; 74 | box-shadow: none; 75 | } 76 | &.btn-primary { 77 | background: $primary; 78 | border-color: $primary; 79 | &:hover { 80 | border-color: lighten($primary, 4%); 81 | background: lighten($primary, 4%); 82 | } 83 | } 84 | &.btn-white { 85 | background-color: $white; 86 | &:hover { 87 | background-color: transparent; 88 | border-color: $white; 89 | color: $white; 90 | } 91 | } 92 | &.btn-outline-white { 93 | border: 1px solid $white; 94 | &:hover { 95 | background: $white; 96 | color: $primary!important; 97 | } 98 | } 99 | 100 | &.btn-outline-black { 101 | border: 1px solid rgba($black, .1); 102 | &:hover { 103 | background: transparent; 104 | color: $primary!important; 105 | } 106 | } 107 | 108 | } 109 | 110 | .form-control, .custom-select { 111 | border: 2px solid darken($light, 5%); 112 | font-size: 16px; 113 | height: 45px; 114 | &:active, &:focus { 115 | border-color: $primary; 116 | box-shadow: none; 117 | } 118 | } 119 | 120 | .gutter-v1 { 121 | margin-right: -20px; 122 | margin-left: -20px; 123 | @include media-breakpoint-down(md) { 124 | margin-left: -15px; 125 | margin-right: -15px; 126 | } 127 | > .col, 128 | > [class*="col-"] { 129 | padding-right: 20px; 130 | padding-left: 20px; 131 | @include media-breakpoint-down(md) { 132 | padding-right: 15px; 133 | padding-left: 15px; 134 | } 135 | } 136 | } 137 | 138 | .spinner-border { 139 | color: $primary; 140 | } 141 | /*PRELOADING------------ */ 142 | #overlayer { 143 | width:100%; 144 | height:100%; 145 | position:fixed; 146 | z-index:7100; 147 | background: $white; 148 | top: 0; 149 | left: 0; 150 | right: 0; 151 | bottom: 0; 152 | } 153 | 154 | .loader { 155 | z-index:7700; 156 | position: fixed; 157 | top: 50%; 158 | left: 50%; 159 | transform: translate(-50%, -50%); 160 | } 161 | .position-relative { 162 | position: relative; 163 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🚀 Apex Service Website Template 2 | 3 | Welcome to Apex, a sleek and professional service website template designed to elevate your online presence. This README provides essential information about the template, its features, and how to utilize it effectively. 4 | 5 | ## 🌟 Overview 6 | 7 | **Apex** is a versatile and customizable website template tailored for service-based businesses, agencies, freelancers, and professionals who want to showcase their services, portfolio, and expertise in a modern and engaging manner. With its clean design, smooth animations, and responsive layout, Apex ensures an optimal viewing experience across various devices and screen sizes. 8 | 9 | ## ✨ Features 10 | 11 | - **Responsive Design**: Ensure your website looks great on desktops, tablets, and mobile devices. 12 | - **Clean and Modern**: A minimalistic design with a focus on content and user experience. 13 | - **Easy Customization**: Customize colors, fonts, content, and images to match your brand identity. 14 | - **Service Sections**: Clearly highlight your services with dedicated sections and descriptions. 15 | - **Portfolio Showcase**: Showcase your projects or portfolio with image galleries and descriptions. 16 | - **Client Testimonials**: Build trust and credibility with client testimonials and reviews. 17 | - **Contact Form**: Allow visitors to easily get in touch with you through a contact form. 18 | - **Smooth Animations**: Enhance user experience with subtle animations and transitions. 19 | 20 | ## 🛠️ Usage 21 | 22 | To use the Apex service website template, simply follow these steps: 23 | 24 | 1. **Download**: Download the template files from the [GitHub repository](https://github.com/krypto-etox/service-website-template). 25 | 26 | 2. **Customize Content**: Replace placeholder content with your own text, images, and information. Customize colors, fonts, and styles to match your branding. 27 | 28 | 3. **Service Sections**: Modify the service sections to reflect the services you offer. Provide detailed descriptions and any relevant information. 29 | 30 | 4. **Portfolio Showcase**: Populate the portfolio section with images and descriptions of your projects or work samples. 31 | 32 | 5. **Client Testimonials**: Add client testimonials to build credibility and trust. Include client names and their feedback. 33 | 34 | 6. **Contact Form Integration**: Configure the contact form to send inquiries to your preferred email address. Make sure to test the form to ensure proper functionality. 35 | 36 | 7. **Deploy**: Once you've customized the template to your satisfaction, deploy it to your web hosting provider or use GitHub Pages for hosting. 37 | 38 | 8. **Maintenance**: Periodically update content, portfolio items, and testimonials to keep your website fresh and relevant. 39 | 40 | ## 📞 Support and Feedback 41 | 42 | If you have any questions, feedback, or need assistance with the Apex service website template, feel free to reach out to the template author through the GitHub repository's [issue tracker](https://github.com/krypto-etox/service-website-template/issues). 43 | 44 | ## 🙌 Credits 45 | 46 | - **Author**: [Krypto Etox](https://github.com/krypto-etox) 47 | - **License**: MIT License 48 | 49 | ## 🚀 Demo 50 | 51 | Explore a live demo of the Apex service website template [here](https://krypto-etox.github.io/service-website-template/). 52 | 53 | ## 🤝 Contribute 54 | 55 | Contributions to improve and enhance the Apex service website template are welcome. Fork the repository, make your changes, and submit a pull request. 56 | 57 | ## 📄 License 58 | 59 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. 60 | -------------------------------------------------------------------------------- /scss/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Button variants 2 | // 3 | // Easily pump out default styles, as well as :hover, :focus, :active, 4 | // and disabled options for all buttons 5 | 6 | @mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) { 7 | color: color-yiq($background); 8 | @include gradient-bg($background); 9 | border-color: $border; 10 | @include box-shadow($btn-box-shadow); 11 | 12 | @include hover() { 13 | color: color-yiq($hover-background); 14 | @include gradient-bg($hover-background); 15 | border-color: $hover-border; 16 | } 17 | 18 | &:focus, 19 | &.focus { 20 | color: color-yiq($hover-background); 21 | @include gradient-bg($hover-background); 22 | border-color: $hover-border; 23 | // Avoid using mixin so we can pass custom focus shadow properly 24 | @if $enable-shadows { 25 | box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); 26 | } @else { 27 | box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); 28 | } 29 | } 30 | 31 | // Disabled comes first so active can properly restyle 32 | &.disabled, 33 | &:disabled { 34 | color: color-yiq($background); 35 | background-color: $background; 36 | border-color: $border; 37 | // Remove CSS gradients if they're enabled 38 | @if $enable-gradients { 39 | background-image: none; 40 | } 41 | } 42 | 43 | &:not(:disabled):not(.disabled):active, 44 | &:not(:disabled):not(.disabled).active, 45 | .show > &.dropdown-toggle { 46 | color: color-yiq($active-background); 47 | background-color: $active-background; 48 | @if $enable-gradients { 49 | background-image: none; // Remove the gradient for the pressed/active state 50 | } 51 | border-color: $active-border; 52 | 53 | &:focus { 54 | // Avoid using mixin so we can pass custom focus shadow properly 55 | @if $enable-shadows and $btn-active-box-shadow != none { 56 | box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); 57 | } @else { 58 | box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); 59 | } 60 | } 61 | } 62 | } 63 | 64 | @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { 65 | color: $color; 66 | border-color: $color; 67 | 68 | @include hover() { 69 | color: $color-hover; 70 | background-color: $active-background; 71 | border-color: $active-border; 72 | } 73 | 74 | &:focus, 75 | &.focus { 76 | box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); 77 | } 78 | 79 | &.disabled, 80 | &:disabled { 81 | color: $color; 82 | background-color: transparent; 83 | } 84 | 85 | &:not(:disabled):not(.disabled):active, 86 | &:not(:disabled):not(.disabled).active, 87 | .show > &.dropdown-toggle { 88 | color: color-yiq($active-background); 89 | background-color: $active-background; 90 | border-color: $active-border; 91 | 92 | &:focus { 93 | // Avoid using mixin so we can pass custom focus shadow properly 94 | @if $enable-shadows and $btn-active-box-shadow != none { 95 | box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5); 96 | } @else { 97 | box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); 98 | } 99 | } 100 | } 101 | } 102 | 103 | // Button sizes 104 | @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { 105 | padding: $padding-y $padding-x; 106 | @include font-size($font-size); 107 | line-height: $line-height; 108 | // Manually declare to provide an override to the browser default 109 | @include border-radius($border-radius, 0); 110 | } 111 | -------------------------------------------------------------------------------- /scss/_functions.scss: -------------------------------------------------------------------------------- 1 | // Bootstrap functions 2 | // 3 | // Utility mixins and functions for evaluating source code across our variables, maps, and mixins. 4 | 5 | // Ascending 6 | // Used to evaluate Sass maps like our grid breakpoints. 7 | @mixin _assert-ascending($map, $map-name) { 8 | $prev-key: null; 9 | $prev-num: null; 10 | @each $key, $num in $map { 11 | @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" { 12 | // Do nothing 13 | } @else if not comparable($prev-num, $num) { 14 | @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !"; 15 | } @else if $prev-num >= $num { 16 | @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !"; 17 | } 18 | $prev-key: $key; 19 | $prev-num: $num; 20 | } 21 | } 22 | 23 | // Starts at zero 24 | // Used to ensure the min-width of the lowest breakpoint starts at 0. 25 | @mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") { 26 | $values: map-values($map); 27 | $first-value: nth($values, 1); 28 | @if $first-value != 0 { 29 | @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}."; 30 | } 31 | } 32 | 33 | // Replace `$search` with `$replace` in `$string` 34 | // Used on our SVG icon backgrounds for custom forms. 35 | // 36 | // @author Hugo Giraudel 37 | // @param {String} $string - Initial string 38 | // @param {String} $search - Substring to replace 39 | // @param {String} $replace ('') - New value 40 | // @return {String} - Updated string 41 | @function str-replace($string, $search, $replace: "") { 42 | $index: str-index($string, $search); 43 | 44 | @if $index { 45 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); 46 | } 47 | 48 | @return $string; 49 | } 50 | 51 | // See https://codepen.io/kevinweber/pen/dXWoRw 52 | @function escape-svg($string) { 53 | @if str-index($string, "data:image/svg+xml") { 54 | @each $char, $encoded in $escaped-characters { 55 | $string: str-replace($string, $char, $encoded); 56 | } 57 | } 58 | 59 | @return $string; 60 | } 61 | 62 | // Color contrast 63 | @function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) { 64 | $r: red($color); 65 | $g: green($color); 66 | $b: blue($color); 67 | 68 | $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000; 69 | 70 | @if ($yiq >= $yiq-contrasted-threshold) { 71 | @return $dark; 72 | } @else { 73 | @return $light; 74 | } 75 | } 76 | 77 | // Retrieve color Sass maps 78 | @function color($key: "blue") { 79 | @return map-get($colors, $key); 80 | } 81 | 82 | @function theme-color($key: "primary") { 83 | @return map-get($theme-colors, $key); 84 | } 85 | 86 | @function gray($key: "100") { 87 | @return map-get($grays, $key); 88 | } 89 | 90 | // Request a theme color level 91 | @function theme-color-level($color-name: "primary", $level: 0) { 92 | $color: theme-color($color-name); 93 | $color-base: if($level > 0, $black, $white); 94 | $level: abs($level); 95 | 96 | @return mix($color-base, $color, $level * $theme-color-interval); 97 | } 98 | 99 | // Return valid calc 100 | @function add($value1, $value2, $return-calc: true) { 101 | @if $value1 == null { 102 | @return $value2; 103 | } 104 | 105 | @if $value2 == null { 106 | @return $value1; 107 | } 108 | 109 | @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) { 110 | @return $value1 + $value2; 111 | } 112 | 113 | @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2); 114 | } 115 | 116 | @function subtract($value1, $value2, $return-calc: true) { 117 | @if $value1 == null and $value2 == null { 118 | @return null; 119 | } 120 | 121 | @if $value1 == null { 122 | @return -$value2; 123 | } 124 | 125 | @if $value2 == null { 126 | @return $value1; 127 | } 128 | 129 | @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) { 130 | @return $value1 - $value2; 131 | } 132 | 133 | @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2); 134 | } 135 | -------------------------------------------------------------------------------- /scss/mixins/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | // Breakpoint viewport sizes and media queries. 2 | // 3 | // Breakpoints are defined as a map of (name: minimum width), order from small to large: 4 | // 5 | // (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) 6 | // 7 | // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. 8 | 9 | // Name of the next breakpoint, or null for the last breakpoint. 10 | // 11 | // >> breakpoint-next(sm) 12 | // md 13 | // >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) 14 | // md 15 | // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl)) 16 | // md 17 | @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { 18 | $n: index($breakpoint-names, $name); 19 | @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); 20 | } 21 | 22 | // Minimum breakpoint width. Null for the smallest (first) breakpoint. 23 | // 24 | // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) 25 | // 576px 26 | @function breakpoint-min($name, $breakpoints: $grid-breakpoints) { 27 | $min: map-get($breakpoints, $name); 28 | @return if($min != 0, $min, null); 29 | } 30 | 31 | // Maximum breakpoint width. Null for the largest (last) breakpoint. 32 | // The maximum value is calculated as the minimum of the next one less 0.02px 33 | // to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths. 34 | // See https://www.w3.org/TR/mediaqueries-4/#mq-min-max 35 | // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. 36 | // See https://bugs.webkit.org/show_bug.cgi?id=178261 37 | // 38 | // >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) 39 | // 767.98px 40 | @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { 41 | $next: breakpoint-next($name, $breakpoints); 42 | @return if($next, breakpoint-min($next, $breakpoints) - .02, null); 43 | } 44 | 45 | // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front. 46 | // Useful for making responsive utilities. 47 | // 48 | // >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) 49 | // "" (Returns a blank string) 50 | // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) 51 | // "-sm" 52 | @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { 53 | @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); 54 | } 55 | 56 | // Media of at least the minimum breakpoint width. No query for the smallest breakpoint. 57 | // Makes the @content apply to the given breakpoint and wider. 58 | @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { 59 | $min: breakpoint-min($name, $breakpoints); 60 | @if $min { 61 | @media (min-width: $min) { 62 | @content; 63 | } 64 | } @else { 65 | @content; 66 | } 67 | } 68 | 69 | // Media of at most the maximum breakpoint width. No query for the largest breakpoint. 70 | // Makes the @content apply to the given breakpoint and narrower. 71 | @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { 72 | $max: breakpoint-max($name, $breakpoints); 73 | @if $max { 74 | @media (max-width: $max) { 75 | @content; 76 | } 77 | } @else { 78 | @content; 79 | } 80 | } 81 | 82 | // Media that spans multiple breakpoint widths. 83 | // Makes the @content apply between the min and max breakpoints 84 | @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { 85 | $min: breakpoint-min($lower, $breakpoints); 86 | $max: breakpoint-max($upper, $breakpoints); 87 | 88 | @if $min != null and $max != null { 89 | @media (min-width: $min) and (max-width: $max) { 90 | @content; 91 | } 92 | } @else if $max == null { 93 | @include media-breakpoint-up($lower, $breakpoints) { 94 | @content; 95 | } 96 | } @else if $min == null { 97 | @include media-breakpoint-down($upper, $breakpoints) { 98 | @content; 99 | } 100 | } 101 | } 102 | 103 | // Media between the breakpoint's minimum and maximum widths. 104 | // No minimum for the smallest breakpoint, and no maximum for the largest one. 105 | // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. 106 | @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { 107 | $min: breakpoint-min($name, $breakpoints); 108 | $max: breakpoint-max($name, $breakpoints); 109 | 110 | @if $min != null and $max != null { 111 | @media (min-width: $min) and (max-width: $max) { 112 | @content; 113 | } 114 | } @else if $max == null { 115 | @include media-breakpoint-up($name, $breakpoints) { 116 | @content; 117 | } 118 | } @else if $min == null { 119 | @include media-breakpoint-down($name, $breakpoints) { 120 | @content; 121 | } 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /scss/mixins/_forms.scss: -------------------------------------------------------------------------------- 1 | // Form control focus state 2 | // 3 | // Generate a customized focus state and for any input with the specified color, 4 | // which defaults to the `$input-focus-border-color` variable. 5 | // 6 | // We highly encourage you to not customize the default value, but instead use 7 | // this to tweak colors on an as-needed basis. This aesthetic change is based on 8 | // WebKit's default styles, but applicable to a wider range of browsers. Its 9 | // usability and accessibility should be taken into account with any change. 10 | // 11 | // Example usage: change the default blue border and shadow to white for better 12 | // contrast against a dark gray background. 13 | @mixin form-control-focus($ignore-warning: false) { 14 | &:focus { 15 | color: $input-focus-color; 16 | background-color: $input-focus-bg; 17 | border-color: $input-focus-border-color; 18 | outline: 0; 19 | // Avoid using mixin so we can pass custom focus shadow properly 20 | @if $enable-shadows { 21 | box-shadow: $input-box-shadow, $input-focus-box-shadow; 22 | } @else { 23 | box-shadow: $input-focus-box-shadow; 24 | } 25 | } 26 | @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning); 27 | } 28 | 29 | // This mixin uses an `if()` technique to be compatible with Dart Sass 30 | // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details 31 | @mixin form-validation-state-selector($state) { 32 | @if ($state == "valid" or $state == "invalid") { 33 | .was-validated #{if(&, "&", "")}:#{$state}, 34 | #{if(&, "&", "")}.is-#{$state} { 35 | @content; 36 | } 37 | } @else { 38 | #{if(&, "&", "")}.is-#{$state} { 39 | @content; 40 | } 41 | } 42 | } 43 | 44 | @mixin form-validation-state($state, $color, $icon) { 45 | .#{$state}-feedback { 46 | display: none; 47 | width: 100%; 48 | margin-top: $form-feedback-margin-top; 49 | @include font-size($form-feedback-font-size); 50 | color: $color; 51 | } 52 | 53 | .#{$state}-tooltip { 54 | position: absolute; 55 | top: 100%; 56 | z-index: 5; 57 | display: none; 58 | max-width: 100%; // Contain to parent when possible 59 | padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x; 60 | margin-top: .1rem; 61 | @include font-size($form-feedback-tooltip-font-size); 62 | line-height: $form-feedback-tooltip-line-height; 63 | color: color-yiq($color); 64 | background-color: rgba($color, $form-feedback-tooltip-opacity); 65 | @include border-radius($form-feedback-tooltip-border-radius); 66 | } 67 | 68 | @include form-validation-state-selector($state) { 69 | ~ .#{$state}-feedback, 70 | ~ .#{$state}-tooltip { 71 | display: block; 72 | } 73 | } 74 | 75 | .form-control { 76 | @include form-validation-state-selector($state) { 77 | border-color: $color; 78 | 79 | @if $enable-validation-icons { 80 | padding-right: $input-height-inner; 81 | background-image: escape-svg($icon); 82 | background-repeat: no-repeat; 83 | background-position: right $input-height-inner-quarter center; 84 | background-size: $input-height-inner-half $input-height-inner-half; 85 | } 86 | 87 | &:focus { 88 | border-color: $color; 89 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25); 90 | } 91 | } 92 | } 93 | 94 | // stylelint-disable-next-line selector-no-qualifying-type 95 | textarea.form-control { 96 | @include form-validation-state-selector($state) { 97 | @if $enable-validation-icons { 98 | padding-right: $input-height-inner; 99 | background-position: top $input-height-inner-quarter right $input-height-inner-quarter; 100 | } 101 | } 102 | } 103 | 104 | .custom-select { 105 | @include form-validation-state-selector($state) { 106 | border-color: $color; 107 | 108 | @if $enable-validation-icons { 109 | padding-right: $custom-select-feedback-icon-padding-right; 110 | background: $custom-select-background, escape-svg($icon) $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size; 111 | } 112 | 113 | &:focus { 114 | border-color: $color; 115 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25); 116 | } 117 | } 118 | } 119 | 120 | .form-check-input { 121 | @include form-validation-state-selector($state) { 122 | ~ .form-check-label { 123 | color: $color; 124 | } 125 | 126 | ~ .#{$state}-feedback, 127 | ~ .#{$state}-tooltip { 128 | display: block; 129 | } 130 | } 131 | } 132 | 133 | .custom-control-input { 134 | @include form-validation-state-selector($state) { 135 | ~ .custom-control-label { 136 | color: $color; 137 | 138 | &::before { 139 | border-color: $color; 140 | } 141 | } 142 | 143 | &:checked { 144 | ~ .custom-control-label::before { 145 | border-color: lighten($color, 10%); 146 | @include gradient-bg(lighten($color, 10%)); 147 | } 148 | } 149 | 150 | &:focus { 151 | ~ .custom-control-label::before { 152 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25); 153 | } 154 | 155 | &:not(:checked) ~ .custom-control-label::before { 156 | border-color: $color; 157 | } 158 | } 159 | } 160 | } 161 | 162 | // custom file 163 | .custom-file-input { 164 | @include form-validation-state-selector($state) { 165 | ~ .custom-file-label { 166 | border-color: $color; 167 | } 168 | 169 | &:focus { 170 | ~ .custom-file-label { 171 | border-color: $color; 172 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25); 173 | } 174 | } 175 | } 176 | } 177 | } 178 | -------------------------------------------------------------------------------- /scss/_site-elements.scss: -------------------------------------------------------------------------------- 1 | 2 | // accordion 3 | .custom-accordion { 4 | .accordion-item { 5 | background-color: lighten(#efefef, 4%); 6 | margin-bottom: 0px; 7 | position: relative; 8 | border-radius: 0px; 9 | overflow: hidden; 10 | .btn-link { 11 | display: block; 12 | width: 100%; 13 | padding: 15px 0; 14 | text-decoration: none; 15 | text-align: left; 16 | color: #999; 17 | border: none; 18 | padding-left: 40px; 19 | border-radius: 0; 20 | position: relative; 21 | background: $white; 22 | &:before { 23 | font-family: 'icomoon'; 24 | content: "\f196"; 25 | position: absolute; 26 | top: 50%; 27 | transform: translateY(-50%); 28 | left: 15px; 29 | } 30 | &[aria-expanded="true"] { 31 | font-weight: 700; 32 | color: $primary; 33 | 34 | &:before { 35 | font-family: 'icomoon'; 36 | content: "\f147"; 37 | position: absolute; 38 | color: $primary; 39 | top: 50%; 40 | transform: translateY(-50%); 41 | } 42 | } 43 | 44 | 45 | 46 | } 47 | &.active { 48 | z-index: 2; 49 | .btn-link { 50 | color: $primary; 51 | box-shadow: 0 1px 10px 0 rgba($black, .1); 52 | } 53 | } 54 | 55 | .accordion-body { 56 | padding: 20px 20px 20px 20px; 57 | color: #888; 58 | } 59 | 60 | } 61 | } 62 | 63 | 64 | //checkbox 65 | .control { 66 | display: block; 67 | position: relative; 68 | padding-left: 30px; 69 | margin-bottom: 15px; 70 | cursor: pointer; 71 | font-size: 18px; 72 | 73 | .caption { 74 | position: relative; 75 | top: -3px; 76 | font-size: 16px; 77 | } 78 | } 79 | .control input { 80 | position: absolute; 81 | z-index: -1; 82 | opacity: 0; 83 | } 84 | .control__indicator { 85 | position: absolute; 86 | top: 2px; 87 | left: 0; 88 | height: 20px; 89 | width: 20px; 90 | background: #e6e6e6; 91 | border-radius: 4px; 92 | } 93 | .control--radio .control__indicator { 94 | border-radius: 50%; 95 | } 96 | .control:hover input ~ .control__indicator, 97 | .control input:focus ~ .control__indicator { 98 | background: #ccc; 99 | } 100 | .control input:checked ~ .control__indicator { 101 | background: $primary; 102 | } 103 | .control:hover input:not([disabled]):checked ~ .control__indicator, 104 | .control input:checked:focus ~ .control__indicator { 105 | background: lighten($primary, 5%); 106 | } 107 | .control input:disabled ~ .control__indicator { 108 | background: #e6e6e6; 109 | opacity: 0.9; 110 | pointer-events: none; 111 | } 112 | .control__indicator:after { 113 | font-family: 'icomoon'; 114 | content: '\e5ca'; 115 | position: absolute; 116 | display: none; 117 | font-size: 14px; 118 | transition: .3s all ease; 119 | } 120 | .control input:checked ~ .control__indicator:after { 121 | display: block; 122 | color: #fff; 123 | } 124 | .control--checkbox .control__indicator:after { 125 | top: 50%; 126 | left: 50%; 127 | transform: translate(-50%, -50%); 128 | } 129 | .control--checkbox input:disabled ~ .control__indicator:after { 130 | border-color: #7b7b7b; 131 | } 132 | .control--checkbox input:disabled:checked ~ .control__indicator { 133 | background-color: $primary; 134 | opacity: .2; 135 | } 136 | 137 | 138 | // gallery 139 | .gal-item { 140 | display: block; 141 | margin-bottom: 8px; 142 | img { 143 | border-radius: 4px; 144 | transition: .3s all ease; 145 | opacity: 1; 146 | } 147 | &:hover { 148 | img { 149 | opacity: .5; 150 | } 151 | } 152 | } 153 | 154 | // social 155 | .social-icons { 156 | li { 157 | display: inline-block; 158 | a { 159 | color: rgba($white, .5%); 160 | display: inline-block; 161 | width: 40px; 162 | height: 40px; 163 | position: relative; 164 | border-radius: 50%; 165 | background: #303030; 166 | span { 167 | position: absolute; 168 | top: 50%; 169 | left: 50%; 170 | transform: translate(-50%, -50%); 171 | } 172 | &:hover { 173 | color: $white; 174 | } 175 | } 176 | &:first-child { 177 | a { 178 | padding-left: 0; 179 | } 180 | } 181 | } 182 | &.light { 183 | li { 184 | a { 185 | color: $black; 186 | display: inline-block; 187 | width: 40px; 188 | height: 40px; 189 | position: relative; 190 | border-radius: 50%; 191 | background: $light; 192 | } 193 | } 194 | } 195 | } 196 | 197 | // video 198 | .video-wrap { 199 | position: relative; 200 | .play-wrap { 201 | position: absolute; 202 | top: 50%; 203 | left: 50%; 204 | transform: translate(-50%, -50%); 205 | width: 50px; 206 | height: 50px; 207 | background: rgba($black, .05); 208 | border-radius: 50%; 209 | transition: .3s all ease; 210 | > span { 211 | position: absolute; 212 | top: 50%; 213 | left: 50%; 214 | transform: translate(-50%, -50%); 215 | } 216 | } 217 | &:hover { 218 | .play-wrap { 219 | width: 60px; 220 | height: 60px; 221 | } 222 | } 223 | } 224 | 225 | // testimonial 226 | .owl-single { 227 | &.dots-absolute { 228 | .owl-dots { 229 | bottom: 40px; 230 | .owl-dot { 231 | span { 232 | background: rgba($white, .5); 233 | } 234 | } 235 | } 236 | } 237 | .owl-dots { 238 | text-align: center; 239 | position: absolute; 240 | width: 100%; 241 | 242 | .owl-dot { 243 | display: inline-block; 244 | margin: 5px; 245 | span { 246 | display: inline-block; 247 | width: 8px; 248 | height: 8px; 249 | border-radius: 50%; 250 | background: rgba($black, .2); 251 | } 252 | &.active { 253 | span { 254 | background: $primary; 255 | } 256 | } 257 | } 258 | } 259 | } 260 | .testimonial { 261 | max-width: 500px; 262 | text-align: center; 263 | margin-bottom: 30px; 264 | .name { 265 | font-size: 18px; 266 | color: $black; 267 | } 268 | .img-wrap { 269 | img { 270 | margin: 0 auto; 271 | width: 70px; 272 | border-radius: 50%; 273 | } 274 | } 275 | } 276 | 277 | 278 | .list-check { 279 | li { 280 | display: block; 281 | padding-left: 30px; 282 | position: relative; 283 | &:before { 284 | content: "\e5ca"; 285 | font-family: 'icomoon'; 286 | position: absolute; 287 | top: -.3rem; 288 | font-size: 20px; 289 | left: 0; 290 | } 291 | } 292 | &.primary { 293 | li { 294 | &:before { 295 | color: $primary; 296 | } 297 | } 298 | } 299 | } 300 | -------------------------------------------------------------------------------- /js/jquery-migrate-3.0.0.min.js: -------------------------------------------------------------------------------- 1 | /*! jQuery Migrate v3.0.0 | (c) jQuery Foundation and other contributors | jquery.org/license */ 2 | "undefined"==typeof jQuery.migrateMute&&(jQuery.migrateMute=!0),function(a,b){"use strict";function c(c){var d=b.console;e[c]||(e[c]=!0,a.migrateWarnings.push(c),d&&d.warn&&!a.migrateMute&&(d.warn("JQMIGRATE: "+c),a.migrateTrace&&d.trace&&d.trace()))}function d(a,b,d,e){Object.defineProperty(a,b,{configurable:!0,enumerable:!0,get:function(){return c(e),d}})}a.migrateVersion="3.0.0",function(){var c=b.console&&b.console.log&&function(){b.console.log.apply(b.console,arguments)},d=/^[12]\./;c&&(a&&!d.test(a.fn.jquery)||c("JQMIGRATE: jQuery 3.0.0+ REQUIRED"),a.migrateWarnings&&c("JQMIGRATE: Migrate plugin loaded multiple times"),c("JQMIGRATE: Migrate is installed"+(a.migrateMute?"":" with logging active")+", version "+a.migrateVersion))}();var e={};a.migrateWarnings=[],void 0===a.migrateTrace&&(a.migrateTrace=!0),a.migrateReset=function(){e={},a.migrateWarnings.length=0},"BackCompat"===document.compatMode&&c("jQuery is not compatible with Quirks Mode");var f=a.fn.init,g=a.isNumeric,h=a.find,i=/\[(\s*[-\w]+\s*)([~|^$*]?=)\s*([-\w#]*?#[-\w#]*)\s*\]/,j=/\[(\s*[-\w]+\s*)([~|^$*]?=)\s*([-\w#]*?#[-\w#]*)\s*\]/g;a.fn.init=function(a){var b=Array.prototype.slice.call(arguments);return"string"==typeof a&&"#"===a&&(c("jQuery( '#' ) is not a valid selector"),b[0]=[]),f.apply(this,b)},a.fn.init.prototype=a.fn,a.find=function(a){var b=Array.prototype.slice.call(arguments);if("string"==typeof a&&i.test(a))try{document.querySelector(a)}catch(d){a=a.replace(j,function(a,b,c,d){return"["+b+c+'"'+d+'"]'});try{document.querySelector(a),c("Attribute selector with '#' must be quoted: "+b[0]),b[0]=a}catch(e){c("Attribute selector with '#' was not fixed: "+b[0])}}return h.apply(this,b)};var k;for(k in h)Object.prototype.hasOwnProperty.call(h,k)&&(a.find[k]=h[k]);a.fn.size=function(){return c("jQuery.fn.size() is deprecated; use the .length property"),this.length},a.parseJSON=function(){return c("jQuery.parseJSON is deprecated; use JSON.parse"),JSON.parse.apply(null,arguments)},a.isNumeric=function(b){function d(b){var c=b&&b.toString();return!a.isArray(b)&&c-parseFloat(c)+1>=0}var e=g(b),f=d(b);return e!==f&&c("jQuery.isNumeric() should not be called on constructed objects"),f},d(a,"unique",a.uniqueSort,"jQuery.unique is deprecated, use jQuery.uniqueSort"),d(a.expr,"filters",a.expr.pseudos,"jQuery.expr.filters is now jQuery.expr.pseudos"),d(a.expr,":",a.expr.pseudos,'jQuery.expr[":"] is now jQuery.expr.pseudos');var l=a.ajax;a.ajax=function(){var a=l.apply(this,arguments);return a.promise&&(d(a,"success",a.done,"jQXHR.success is deprecated and removed"),d(a,"error",a.fail,"jQXHR.error is deprecated and removed"),d(a,"complete",a.always,"jQXHR.complete is deprecated and removed")),a};var m=a.fn.removeAttr,n=a.fn.toggleClass,o=/\S+/g;a.fn.removeAttr=function(b){var d=this;return a.each(b.match(o),function(b,e){a.expr.match.bool.test(e)&&(c("jQuery.fn.removeAttr no longer sets boolean properties: "+e),d.prop(e,!1))}),m.apply(this,arguments)},a.fn.toggleClass=function(b){return void 0!==b&&"boolean"!=typeof b?n.apply(this,arguments):(c("jQuery.fn.toggleClass( boolean ) is deprecated"),this.each(function(){var c=this.getAttribute&&this.getAttribute("class")||"";c&&a.data(this,"__className__",c),this.setAttribute&&this.setAttribute("class",c||b===!1?"":a.data(this,"__className__")||"")}))};var p=!1;a.swap&&a.each(["height","width","reliableMarginRight"],function(b,c){var d=a.cssHooks[c]&&a.cssHooks[c].get;d&&(a.cssHooks[c].get=function(){var a;return p=!0,a=d.apply(this,arguments),p=!1,a})}),a.swap=function(a,b,d,e){var f,g,h={};p||c("jQuery.swap() is undocumented and deprecated");for(g in b)h[g]=a.style[g],a.style[g]=b[g];f=d.apply(a,e||[]);for(g in b)a.style[g]=h[g];return f};var q=a.data;a.data=function(b,d,e){var f;return d&&d!==a.camelCase(d)&&(f=a.hasData(b)&&q.call(this,b),f&&d in f)?(c("jQuery.data() always sets/gets camelCased names: "+d),arguments.length>2&&(f[d]=e),f[d]):q.apply(this,arguments)};var r=a.Tween.prototype.run;a.Tween.prototype.run=function(b){a.easing[this.easing].length>1&&(c('easing function "jQuery.easing.'+this.easing.toString()+'" should use only first argument'),a.easing[this.easing]=a.easing[this.easing].bind(a.easing,b,this.options.duration*b,0,1,this.options.duration)),r.apply(this,arguments)};var s=a.fn.load,t=a.event.fix;a.event.props=[],a.event.fixHooks={},a.event.fix=function(b){var d,e=b.type,f=this.fixHooks[e],g=a.event.props;if(g.length)for(c("jQuery.event.props are deprecated and removed: "+g.join());g.length;)a.event.addProp(g.pop());if(f&&!f._migrated_&&(f._migrated_=!0,c("jQuery.event.fixHooks are deprecated and removed: "+e),(g=f.props)&&g.length))for(;g.length;)a.event.addProp(g.pop());return d=t.call(this,b),f&&f.filter?f.filter(d,b):d},a.each(["load","unload","error"],function(b,d){a.fn[d]=function(){var a=Array.prototype.slice.call(arguments,0);return"load"===d&&"string"==typeof a[0]?s.apply(this,a):(c("jQuery.fn."+d+"() is deprecated"),a.splice(0,0,d),arguments.length?this.on.apply(this,a):(this.triggerHandler.apply(this,a),this))}}),a(function(){a(document).triggerHandler("ready")}),a.event.special.ready={setup:function(){this===document&&c("'ready' event is deprecated")}},a.fn.extend({bind:function(a,b,d){return c("jQuery.fn.bind() is deprecated"),this.on(a,null,b,d)},unbind:function(a,b){return c("jQuery.fn.unbind() is deprecated"),this.off(a,null,b)},delegate:function(a,b,d,e){return c("jQuery.fn.delegate() is deprecated"),this.on(b,a,d,e)},undelegate:function(a,b,d){return c("jQuery.fn.undelegate() is deprecated"),1===arguments.length?this.off(a,"**"):this.off(b,a||"**",d)}});var u=a.fn.offset;a.fn.offset=function(){var b,d=this[0],e={top:0,left:0};return d&&d.nodeType?(b=(d.ownerDocument||document).documentElement,a.contains(b,d)?u.apply(this,arguments):(c("jQuery.fn.offset() requires an element connected to a document"),e)):(c("jQuery.fn.offset() requires a valid DOM element"),e)};var v=a.param;a.param=function(b,d){var e=a.ajaxSettings&&a.ajaxSettings.traditional;return void 0===d&&e&&(c("jQuery.param() no longer uses jQuery.ajaxSettings.traditional"),d=e),v.call(this,b,d)};var w=a.fn.andSelf||a.fn.addBack;a.fn.andSelf=function(){return c("jQuery.fn.andSelf() replaced by jQuery.fn.addBack()"),w.apply(this,arguments)};var x=a.Deferred,y=[["resolve","done",a.Callbacks("once memory"),a.Callbacks("once memory"),"resolved"],["reject","fail",a.Callbacks("once memory"),a.Callbacks("once memory"),"rejected"],["notify","progress",a.Callbacks("memory"),a.Callbacks("memory")]];a.Deferred=function(b){var d=x(),e=d.promise();return d.pipe=e.pipe=function(){var b=arguments;return c("deferred.pipe() is deprecated"),a.Deferred(function(c){a.each(y,function(f,g){var h=a.isFunction(b[f])&&b[f];d[g[1]](function(){var b=h&&h.apply(this,arguments);b&&a.isFunction(b.promise)?b.promise().done(c.resolve).fail(c.reject).progress(c.notify):c[g[0]+"With"](this===e?c.promise():this,h?[b]:arguments)})}),b=null}).promise()},b&&b.call(d,d),d}}(jQuery,window); -------------------------------------------------------------------------------- /images/undraw_snap_the_moment_re_88cu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /js/custom.js: -------------------------------------------------------------------------------- 1 | AOS.init({ 2 | duration: 800, 3 | easing: 'slide', 4 | once: true 5 | }); 6 | 7 | $(function(){ 8 | 9 | 'use strict'; 10 | 11 | $(".loader").delay(0).fadeOut("slow"); 12 | $("#overlayer").delay(0).fadeOut("slow"); 13 | 14 | var siteMenuClone = function() { 15 | 16 | $('.js-clone-nav').each(function() { 17 | var $this = $(this); 18 | $this.clone().attr('class', 'site-nav-wrap').appendTo('.site-mobile-menu-body'); 19 | }); 20 | 21 | 22 | setTimeout(function() { 23 | 24 | var counter = 0; 25 | $('.site-mobile-menu .has-children').each(function(){ 26 | var $this = $(this); 27 | 28 | $this.prepend('