diff options
author | Cristian Marín <cristianmarint@gmail.com> | 2020-10-09 17:56:48 +0300 |
---|---|---|
committer | Cristian Marín <cristianmarint@gmail.com> | 2020-10-09 17:56:48 +0300 |
commit | 6f94eccb396a7ab0b5b6c2a280f053cd42a0407b (patch) | |
tree | 352ef8105c2d6c9bda27a53c8c7e39b8cb096d73 /assets |
🚀
Diffstat (limited to 'assets')
-rw-r--r-- | assets/js/script.js | 26 | ||||
-rw-r--r-- | assets/scss/_buttons.scss | 100 | ||||
-rw-r--r-- | assets/scss/_common.scss | 177 | ||||
-rw-r--r-- | assets/scss/_mixins.scss | 29 | ||||
-rw-r--r-- | assets/scss/_typography.scss | 77 | ||||
-rw-r--r-- | assets/scss/_variables.scss | 15 | ||||
-rw-r--r-- | assets/scss/style.scss | 26 | ||||
-rw-r--r-- | assets/scss/templates/_main.scss | 373 | ||||
-rw-r--r-- | assets/scss/templates/_navigation.scss | 24 | ||||
-rw-r--r-- | assets/scss/templates/_specific.scss | 113 |
10 files changed, 960 insertions, 0 deletions
diff --git a/assets/js/script.js b/assets/js/script.js new file mode 100644 index 0000000..0c5ae8a --- /dev/null +++ b/assets/js/script.js @@ -0,0 +1,26 @@ +(function ($) { + 'use strict'; + + // Preloader js + $(window).on('load', function () { + $('.preloader').fadeOut(100); + }); + + // Accordions + $('.collapse').on('shown.bs.collapse', function () { + $(this).parent().find('.ti-angle-right').removeClass('ti-angle-right').addClass('ti-angle-down'); + }).on('hidden.bs.collapse', function () { + $(this).parent().find('.ti-angle-down').removeClass('ti-angle-down').addClass('ti-angle-right'); + }); + + + //slider + $('.slider').slick({ + slidesToShow: 1, + slidesToScroll: 1, + autoplay: true, + dots: true, + arrows: false + }); + +})(jQuery);
\ No newline at end of file diff --git a/assets/scss/_buttons.scss b/assets/scss/_buttons.scss new file mode 100644 index 0000000..f313080 --- /dev/null +++ b/assets/scss/_buttons.scss @@ -0,0 +1,100 @@ +/* Button style */ +.btn { + font-size: 16px; + font-family: $primary-font; + font-weight: 600; + text-transform: capitalize; + padding: 15px 30px; + border-radius: 30px; + border: 0; + position: relative; + z-index: 1; + transition: .2s ease; + white-space: nowrap; + + &::before { + position: absolute; + content: ""; + height: 100%; + width: 100%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: -1; + border-radius: inherit; + transition: inherit; + background-color: inherit; + border: 1px solid transparent; + } + + &:hover, + &:active, + &:focus { + outline: 0; + @extend .shadow; + + &::before { + height: 110%; + width: 110%; + } + } + + &-sm { + padding: 12px 30px; + font-size: 15px; + } +} + +.btn-primary { + background-color: $primary-color; + color: $white; + border-color: $primary-color; + + &:active, + &:hover, + &.focus, + &.active { + background-color: $primary-color !important; + border-color: $primary-color !important; + } +} + +.btn-outline-primary { + background-color: transparent; + color: $text-color-dark; + border-color: transparent; + + &:active, + &:hover, + &.focus, + &.active { + background-color: transparent !important; + border-color: $primary-color !important; + color: $primary-color; + } + &::before{ + border-color: $primary-color; + } +} + +.btn-link { + color: $primary-color; + + i { + font-size: 12px; + margin-left: 5px; + transition: .2s ease; + } + + &:active, + &:hover, + &.focus, + &.active { + color: $primary-color; + text-decoration: none; + + i { + margin-left: 10px; + } + } +}
\ No newline at end of file diff --git a/assets/scss/_common.scss b/assets/scss/_common.scss new file mode 100644 index 0000000..060a057 --- /dev/null +++ b/assets/scss/_common.scss @@ -0,0 +1,177 @@ +body { + background-color: $body-color; + overflow-x: hidden; +} + +::selection { + background-color:darken($color: $primary-color, $amount: 10); + color: $white; +} + +body::-webkit-scrollbar { + width: .5rem; +} + +body::-webkit-scrollbar-track { + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); +} + +body::-webkit-scrollbar-thumb { + background-color: $primary-color; + outline: 2px solid #fff; +} + +.active{ + color: $primary-color !important; +} + + +/* preloader */ + +.preloader { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #fff; + z-index: 9999; + display: flex; + align-items: center; + justify-content: center; +} + +ol, +ul { + margin: 0px; +} + +img { + vertical-align: middle; + border: 0; +} + +a, +a:hover, +a:focus { + text-decoration: none; +} + +a, +button, +select { + cursor: pointer; + transition: .2s ease; + + &:focus { + outline: 0; + } +} + +a:hover { + color: $primary-color; +} + +.slick-slide { + outline: 0; +} + +.section { + padding-top: 70px; + padding-bottom: 70px; + + &-title { + margin-bottom: 30px; + } +} + +.bg-cover { + background-size: cover; + background-position: center center; + background-repeat: no-repeat; +} + +.border-default { + border-color: $border-color !important; +} + +/* overlay */ + +.overlay { + position: relative; + + &::before { + position: absolute; + content: ''; + height: 100%; + width: 100%; + top: 0; + left: 0; + background-color: $black; + opacity: .5; + } +} + +.bg-primary { + background-color: $primary-color !important; +} + +.bg-light { + background-color: $light !important; +} + +.text-primary { + color: $primary-color !important; +} + +.rounded-lg{ + border-radius: 10px !important; +} + +.shadow{ + box-shadow: 0 12px 24px -6px rgba(45,67,121,.10) !important; +} + +// form control + +.form-control { + &:focus { + outline: 0; + border-color: $primary-color; + box-shadow: none; + } + + &::placeholder { + color: $text-color; + } +} + +textarea.form-control { + height: 100px !important; +} + +.list-unstyled{ + li{ + margin-bottom: 10px; + } +} + +.check-mark{ + position: relative; + padding-left: 0px; + &::before{ + position: absolute; + content: "\e64c"; + font-family: $icon-font; + color: $white; + height: 25px; + width: 25px; + line-height: 25px; + background-color: $primary-color; + border-radius: 50%; + font-size: 15px; + text-align: center; + left: -30px; + top: 3px; + } +}
\ No newline at end of file diff --git a/assets/scss/_mixins.scss b/assets/scss/_mixins.scss new file mode 100644 index 0000000..f925e77 --- /dev/null +++ b/assets/scss/_mixins.scss @@ -0,0 +1,29 @@ +@mixin mobile-xs{ + @media(max-width:400px){ + @content; + } +} +@mixin mobile{ + @media(max-width:575px){ + @content; + } +} +@mixin tablet{ + @media(max-width:767px){ + @content; + } +} +@mixin desktop{ + @media(max-width:991px){ + @content; + } +} +@mixin desktop-lg{ + @media(max-width:1200px){ + @content; + } +} + +@mixin size($size){ + width: $size; height: $size; +}
\ No newline at end of file diff --git a/assets/scss/_typography.scss b/assets/scss/_typography.scss new file mode 100644 index 0000000..b6ac3ae --- /dev/null +++ b/assets/scss/_typography.scss @@ -0,0 +1,77 @@ +/* typography */ +@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap'); + +body { + line-height: 1.2; + font-family: $primary-font; + -webkit-font-smoothing: antialiased; + font-size: 16px; + color: $text-color; +} + +p, +.paragraph { + font-weight: 400; + color: $text-color; + font-size: 16px; + line-height: 1.7; + font-family: $primary-font; +} + +small { + font-size: 88%; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: $text-color-dark; + font-family: $primary-font; + font-weight: 700; + line-height: 1.2; +} + +h1, +.h1 { + font-size: 48px; + + @include tablet { + font-size: 40px; + } +} + +h2, +.h2 { + font-size: 38px; + + @include tablet { + font-size: 30px; + } +} + +h3, +.h3 { + font-size: 24px; +} + +h4, +.h4 { + font-size: 20px; +} + +h5, +.h5 { + font-size: 16px; +} + +h6, +.h6 { + font-size: 15px; +} + +.display-3{ + font-size: 3.5rem; +}
\ No newline at end of file diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss new file mode 100644 index 0000000..3d8b04d --- /dev/null +++ b/assets/scss/_variables.scss @@ -0,0 +1,15 @@ +// Color Variables +$primary-color: #007BFF; +$text-color: #000000; +$text-color-dark: #000000; +$body-color: #FFFFFF; +$border-color: #ECECEC; +$black: #000000; +$white: #FFFFFF; +$light: #EDF6F5; + +$transparent: rgba(0,0,0,0); + +// Font Variables +$primary-font: 'Lato', sans-serif; +$icon-font: 'themify';
\ No newline at end of file diff --git a/assets/scss/style.scss b/assets/scss/style.scss new file mode 100644 index 0000000..71ba752 --- /dev/null +++ b/assets/scss/style.scss @@ -0,0 +1,26 @@ +/*!------------------------------------------------------------------ +[MAIN STYLESHEET] + +PROJECT: Project Name +VERSION: Versoin Number +-------------------------------------------------------------------*/ + +/*------------------------------------------------------------------ +[TABLE OF CONTENTS] +-------------------------------------------------------------------*/ + +@import 'variables'; + +@import 'mixins'; + +@import 'typography'; + +@import 'buttons'; + +@import 'common'; + +@import 'templates/navigation.scss'; + +@import 'templates/main.scss'; + +@import 'templates/specific.scss';
\ No newline at end of file diff --git a/assets/scss/templates/_main.scss b/assets/scss/templates/_main.scss new file mode 100644 index 0000000..b56923c --- /dev/null +++ b/assets/scss/templates/_main.scss @@ -0,0 +1,373 @@ +// banner +.banner { + padding: 100px 0 50px; +} + +.feature-card { + border-radius: 10px; + padding: 20px; + transition: .2s ease; + background-color: $white; + + &:hover { + @extend .shadow; + } + + i { + font-size: 30px; + color: $primary-color; + display: inline-block; + } +} + +.footer-list a { + display: block; + padding: 5px 0; + font-size: 16px; + color: $text-color; + margin: 8px 0; + + &:hover { + color: $primary-color; + } +} + +.social-icons a { + color: $primary-color; + text-align: center; + height: 35px; + width: 35px; + line-height: 35px; + border: 1px solid $primary-color; + border-radius: 50%; + display: block; + + &:hover { + color: $white; + background-color: $primary-color; + } +} + +// blog post +a.post-title { + color: $text-color-dark; + display: block; + + &:hover { + color: $primary-color; + } +} + +.content { + + * { + word-break: break-word; + overflow-wrap: break-word; + margin-bottom: 20px; + } + + img { + max-width: 100%; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + margin-bottom: 15px; + } + + strong { + font-weight: 600; + } + + a { + color: $text-color; + border-bottom: 1px dotted $border-color; + + &:hover { + color: $primary-color; + } + } + + ol, + ul { + padding-left: 20px; + + li { + margin-bottom: 10px; + } + } + + ul { + padding-left: 0; + margin-bottom: 20px; + list-style-type: none; + + li { + padding-left: 20px; + position: relative; + + &::before { + position: absolute; + content: ''; + height: 8px; + width: 8px; + border-radius: 50%; + background: $primary-color; + left: 3px; + top: 5px; + } + } + } + + table { + width: 100%; + max-width: 100%; + margin-bottom: 1rem; + border: 1px solid $border-color; + } + + table td, + table th { + padding: .75rem; + vertical-align: top; + margin-bottom: 0; + } + + th, + td { + &:not(:last-of-type) { + border-right: 1px solid $border-color; + } + } + + th { + font-weight: 500; + } + + thead { + background: $white; + margin-bottom: 0; + + tr { + border-bottom: 1px solid $border-color; + } + } + + tbody { + background-color: transparent; + margin-bottom: 0; + } + + .notices { + margin: 2rem 0; + position: relative; + overflow: hidden; + } + + .notices p { + padding: 10px; + margin-bottom: 0; + } + + .notices p::before { + position: absolute; + top: 2px; + color: $white; + font-family: "themify"; + font-weight: 900; + content: "\e717"; + left: 10px; + } + + .notices.note p { + border-top: 30px solid #6ab0de; + background: $white; + } + + .notices.note p::after { + content: 'Note'; + position: absolute; + top: 2px; + color: $white; + left: 2rem; + } + + + .notices.tip p { + border-top: 30px solid #78C578; + background: $white; + } + + .notices.tip p::after { + content: 'Tip'; + position: absolute; + top: 2px; + color: $white; + left: 2rem; + } + + .notices.info p { + border-top: 30px solid #F0B37E; + background: $white; + } + + .notices.info p::after { + content: 'Info'; + position: absolute; + top: 2px; + color: $white; + left: 2rem; + } + + + .notices.warning p { + border-top: 30px solid #E06F6C; + background: $white; + } + + .notices.warning p::after { + content: 'Warning'; + position: absolute; + top: 2px; + color: #fff; + left: 2rem; + } + + + blockquote { + font-size: 20px !important; + color: $text-color; + padding: 20px 40px; + border-left: 2px solid $primary-color; + margin: 40px 0; + font-weight: bold; + background: $white; + + p { + margin-bottom: 0 !important; + } + } + + pre { + display: block; + padding: 9.5px; + margin: 10px 0px 10px; + white-space: pre-wrap; + } + + code { + margin-bottom: 0 !important; + font-size: 100%; + } +} + + +// pagination +.pagination { + margin-top: 30px; + justify-content: center; + + .page-item { + .page-link { + display: inline-block; + width: 40px; + height: 40px; + line-height: 40px; + border-radius: 5px; + background: $light; + text-align: center; + padding: 0; + margin-right: 10px; + border: 0; + color: $text-color; + + &:hover { + background: $primary-color; + color: $white; + } + + &:focus { + box-shadow: none; + } + } + + &:first-child, + &:last-child { + .page-link { + border-radius: 5px; + } + } + + &.active { + .page-link { + background: $primary-color; + color: $white; + } + } + } +} + +.slick-dots { + text-align: center; + margin-top: 20px; + + li { + display: inline-block; + margin: 0 5px; + + &.slick-active { + button { + background-color: $primary-color; + } + } + + button { + height: 10px; + width: 10px; + border-radius: 50%; + display: block; + color: transparent; + padding: 0; + border: 1px solid $primary-color; + background-color: transparent; + transition: .2s ease; + } + } +} + +// pricing table +.col-recommended { + margin: -2rem -1.5rem; + z-index: 1; + @include desktop { + margin: 0; + margin-bottom: 40px; + } +} + +.price{ + font-size: 50px; + color: $white; +} + +.enterprise{ + background-color: #007BFF; + color:white !important; +} + +.white{ + color:$white !important; +} + +.opposite{ + color: $primary-color; + background-color: $white; +} +.opposite:hover{ + color: $primary-color; + background-color: $white !important; +}
\ No newline at end of file diff --git a/assets/scss/templates/_navigation.scss b/assets/scss/templates/_navigation.scss new file mode 100644 index 0000000..caf5989 --- /dev/null +++ b/assets/scss/templates/_navigation.scss @@ -0,0 +1,24 @@ +.nav-item { + margin: 0; + + .nav-link { + text-transform: capitalize; + font-weight: 700; + } +} + +.navbar-light .navbar-nav .nav-link { + color: $text-color-dark; + + &:hover { + color: $primary-color; + } +} + +.navbar-expand-lg .navbar-nav .nav-link { + padding: 20px; + + @include desktop { + padding: 10px; + } +}
\ No newline at end of file diff --git a/assets/scss/templates/_specific.scss b/assets/scss/templates/_specific.scss new file mode 100644 index 0000000..c2eb40d --- /dev/null +++ b/assets/scss/templates/_specific.scss @@ -0,0 +1,113 @@ +.vh-100 { + min-height: 100vh; +} + +.vh-90 { + min-height: 90vh; +} + +.vh-80 { + min-height: 80vh; +} + +.vh-70 { + min-height: 70vh; +} + +.vh-60 { + min-height: 60vh; +} + +.vh-50 { + min-height: 50vh; +} + +.vh-40 { + min-height: 40vh; +} + +.vh-30 { + min-height: 30vh; +} + +.vh-20 { + min-height: 20vh; +} + +.vh-10 { + min-height: 10vh; +} + +.social-media-link { + color: $text-color-dark !important; + font-weight: bold !important; + font-size: small; + border-color: $black !important; +} + +.h3, h3 { + color: $black; +} + +input.contact-input { + background-color: rgba(0,0,0,0) !important; + padding: 0px; + font-size: 16px; + border-width: 1px; + border-color: #000000 !important; + color: #000000 !important; + border-style: solid !important; + border-radius: 0px !important; +} + +textarea.contact-input { + background-color: $transparent !important; + border-style: solid !important; + border-radius: 0px !important; + border: 1px solid $black !important; +} + +.contact-button { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + color: #ffffff !important; + background-color: #000000; + text-decoration: none; + display: inline-block; + cursor: pointer; + text-align: center; + color: $primary-color; + border-color: $black; +} + +.contact-button:hover { + background: $black !important; + border-color: $black !important; + color: #ffffff !important; + border-radius: 100px; + text-decoration: none; +} + +.post-summary{ + font-size: 1em !important; + overflow: hidden; + text-overflow: ellipsis; +} + +a:hover{ + text-decoration: underline !important; +} + +.page-link{ + background-color: rgba(0,0,0,0) !important; + color: #000000 !important; +} + +.icon-color-primary{ + color:$primary-color; +} + +.icon-color-white{ + color:$white; +}
\ No newline at end of file |