diff options
| author | Aaron N. Brock <Contact@AaronNBrock.com> | 2020-10-06 19:41:32 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-10-06 19:41:32 +0300 |
| commit | cf794483a541069e0a1d7e539200bf7f1e9008be (patch) | |
| tree | 6a63455540db59126281ba94f962d57ca73cd840 | |
| parent | 324b1f3cdb5ec660f30b7408b2b43333507ae767 (diff) | |
| parent | f6c0b82dff6f7b1d5476d821c10689009dcc466a (diff) | |
Merge pull request #14 from AaronNBrock/bootstrap-refactor-typography
Bootstrap refactor typography
51 files changed, 1311 insertions, 2300 deletions
diff --git a/assets/js/script.js b/assets/js/script.js index 13a52af..9a94362 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -110,7 +110,6 @@ $(document).ready(function () { }); // skill count - $(".skill__progress").waypoint( function () { $(".progress-value span").each(function () { @@ -174,8 +173,7 @@ $(document).ready(function () { // columnWidth: 200, }); - // blob animation - + // blob animation var tl = new TimelineMax({ yoyo: true, repeat: -1, diff --git a/assets/scss/_buttons.scss b/assets/scss/_buttons.scss index fdeb0e9..8b92d41 100644 --- a/assets/scss/_buttons.scss +++ b/assets/scss/_buttons.scss @@ -8,46 +8,12 @@ // } // } - // .hire_button{ - // background: $primary_color; - // padding: 15px 30px; - // color: #fff; - // text-decoration: none; - // border-radius: 7px; - // font-size: 16px; - // font-family: $secondary-font; - // font-weight: 400; - // border: 1px solid transparent; - // transition: all .3s ease; - // transform: scale(1); - // &:hover{ - // background: #425FEE; - // box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3); - // transform: scale(1.03); - // } - // @include desktop{ - // text-align: center; - // } - // } - // Button Override .btn { display: inline-block; padding: 15px 30px; - font-family: $secondary-font; font-size: 16px; - // background: $primary-color; border-radius: 7px; - //color: #fff; - // ext-decoration: none; - // border: 1px solid transparent; - // transition: all 0.3s ease; - // transform: scale(1); - // &:hover { - // background: #425fee; - // box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3); - // transform: scale(1.03); - // } } .btn-lg { @@ -68,4 +34,4 @@ box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3); transform: scale(1.03); } -}
\ No newline at end of file +} diff --git a/assets/scss/_common.scss b/assets/scss/_common.scss index c99f906..a1387c5 100644 --- a/assets/scss/_common.scss +++ b/assets/scss/_common.scss @@ -1,12 +1,10 @@ -// html{ -// scroll-behavior: smooth; -// } - -// body { -// background: $body-color; -// } - .section{ padding: 100px 0; } +.unstyle-list { + list-style-type: none; + padding-left: 0; + margin-right: 0; +} + diff --git a/assets/scss/_typography.scss b/assets/scss/_typography.scss index 5023e12..1bf2ae6 100644 --- a/assets/scss/_typography.scss +++ b/assets/scss/_typography.scss @@ -1,43 +1,64 @@ -@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900|Yeseva+One&display=swap'); +.base-font { + font-family: $font-family-base; +} -// body{ -// font-family: $primary-font; -// font-size: 16px; -// color: $text-color; -// } +* { + transition: all 0.3s ease; +} -// h1, h2, h3, h4, h5, h6{ -// font-family: $primary-font; -// font-weight: 600; -// color: $text-color-dark; -// } +a.text-light, +a.text-dark { + // transition: all 0.3s ease; + &:hover { + color: $primary !important; + } +} -// p{ -// font-size: 16px; -// color: $text-color; -// } +.top-title { + font-size: 20px; + display: block; + color: $dark; + @extend .mb-3; +} -// h1{ -// font-size: 60px; -// } +.pre-line { + margin-left: 20px; + position: relative; + &::before { + position: absolute; + content: ""; + height: 2px; + width: 20px; + top: 50%; + left: -20px; + transform: translateX(-50%); + background: $secondary; + } +} -// h2{ -// font-size: 50px; -// } - -// h3{ -// font-size: 30px; -// } - -// h4{ -// font-size: 25px; -// } - -// h5{ -// font-size: 18px; -// } - -// h6{ -// font-size: 15px; -// font-weight: 300; -// }
\ No newline at end of file +// This fixes the fact that with `markdownify` we can't add `text-light` +// directly onto the generated `h1`, `h2` etc. +.text-white { + h1, + h2, + h3, + h4, + h5, + h6 { + color: $white; + } +} +@each $color, $value in $theme-colors { + .text-#{$color} { + h1, + h2, + h3, + h4, + h5, + h6, + p, + span { + color: $value; + } + } +} diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 20cd565..e9245ce 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -1,19 +1,35 @@ -//site color variables -$primary-color: #5D78FF; -$secondary-color: #282F49; -$text-color: #9D9EA5; -$text-color-dark: #00113E; -$site-ease: cubic-bezier(0.36, 0.03, 0, 0.91); -$gray: #F7F9FF; -$dark-gray: #646569; +// +// Colors +// -// solid colors -$white: #fff; -$black: #000; +// General +$primary: #5d78ff; +$secondary: #282f49; +// Text +$headings-color: #282f49; +$body-color: #7e7e8a; -// Font Variables -$primary-font: 'Yeseva One', cursive; -$secondary-font: 'Poppins', sans-serif; +// +// Typography +// -// Bootstrap Variables -$primary: #5D78FF; +// Fonts +@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900|Yeseva+One&display=swap"); +$font-family-base: "Poppins", sans-serif; +$headings-font-family: "Yeseva One", cursive; + +// Size +$font-size-base: 1.125rem; // 18px +$h1-font-size: 60px; +$h2-font-size: 50px; +$h3-font-size: 30px; +$h4-font-size: 25px; +$h5-font-size: 22px; +$h6-font-size: 16px; + +// Spacing +$headings-margin-bottom: 1.5rem; +$line-height-base: 1.75; + +// Misc +$link-hover-decoration: none; diff --git a/assets/scss/components/_about-section.scss b/assets/scss/components/_about-section.scss index 1ed1d28..03d6e21 100644 --- a/assets/scss/components/_about-section.scss +++ b/assets/scss/components/_about-section.scss @@ -1,28 +1,5 @@ .about { overflow: hidden; - &_header { - margin-bottom: 60px; - span { - display: block; - font-size: 20px; - font-family: $secondary-font; - margin: 0 0 30px 0; - } - h1 { - margin: 0 0 20px 0; - font-size: 55px; - font-family: $primary-font; - color: $secondary-color; - line-height: 1; - } - p { - margin: 0; - font-size: 18px; - font-family: $secondary-font; - color: #7e7e8a; - line-height: 30px; - } - } &_content { display: flex; align-items: center; @@ -92,57 +69,6 @@ display: none; } } - h3 { - margin: 0 0 35px 0; - color: $white; - font-family: $primary-font; - } - p { - margin: 0 0 35px 0; - font-size: 15px; - font-family: $secondary-font; - color: $white; - font-weight: 400; - line-height: 30px; - @include desktop { - font-size: 14px; - line-height: 26px; - } - } - ul { - margin: 0; - padding: 0; - li { - list-style: none; - display: inline-block; - // a { - // display: block; - // padding: 15px 30px; - // text-decoration: none; - // color: $white; - // border-radius: 7px; - // transition: all 0.3s ease; - // border: 1px solid #60636f; - // background: transparent; - // &.active { - // background-color: $primary-color; - // border: 1px solid transparent; - // } - // &:hover { - // border: 1px solid #425fee; - // background: #425fee; - // box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3); - // transform: scale(1.03); - // } - // } - &:not(:last-child) { - margin-right: 10px; - @include mobile-s { - margin-bottom: 10px; - } - } - } - } } } } diff --git a/assets/scss/components/_blog-section.scss b/assets/scss/components/_blog-section.scss index b3bc555..8e31f71 100644 --- a/assets/scss/components/_blog-section.scss +++ b/assets/scss/components/_blog-section.scss @@ -1,175 +1,109 @@ -.blog{ - position: relative; - margin-bottom: 30px; - &__shape{ - position: absolute; - top: 11%; - right: 12%; - height: 300px; - width: 300px; - img{ - animation: rotate 25s infinite linear; - height: 100%; - width: 100%; - } - @include desktop{ - display: none; - } - } - &__header{ - span{ - font-size: 20px; - font-family: $secondary-font; - color: $secondary-color; - position: relative; - display: block; - margin: 0 0 20px 30px; - &::before{ - position: absolute; - content: ''; - height: 2px; - width: 20px; - top: 50%; - left: -20px; - transform: translateX(-50%); - background: $secondary-color; - } - } - h1{ - margin: 0 0 30px 0; - font-size: 50px; - font-family: $primary-font; - color: $secondary-color; - line-height: 50px; - } - p{ - margin: 0 0 0 0; - font-family: $secondary-font; - color: $secondary-color; - font-size: 18px; - line-height: 26px; - } - } - &__header_button{ - position: relative; - width: 100%; - height: 100%; - a { - position: absolute; - bottom: 0; - right: 0; - display: inline-block; - // padding: 15px 40px; - // background: #fff; - // border: 1px solid #E4E6EB; - // border-radius: 7px; - // font-family: $secondary-font; - // text-decoration: none; - // font-size: 17px; - // color: #282F49; - // transition: all .3s ease; - // transform: scale(1); - @include desktop{ - position: relative; - margin-top: 30px; - } - // &:hover{ - // background: $primary-color; - // border: 1px solid transparent; - // color: #fff; - // transform: scale(1.03); - // box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3); - // } - } - } - &__item{ - position: relative; - margin-bottom: 20px; - @include desktop{ - margin-bottom: 130px; - } - &-thumb{ - width: 90%; - height: 100%; - overflow: hidden; - border-radius: 20px; - @include desktop{ - width: 80%; - margin: 0 auto; - } - img{ - height: 100%; - width: 100%; - transition: all .3s ease; - } - } - &-content{ - background: #ffffff; - position: absolute; - bottom: -100px; - left: 40px; - padding: 30px; - border-radius: 20px; - box-shadow: 0px 20px 40px 0px rgba(50,65,141,0.12); - @include desktop{ - left: 0; - } - span{ - font-size: 16px; - font-family: $secondary-font; - color: $primary-color; - margin: 0 0 20px 40px; - position: relative; - display: block; - line-height: 1; - &::before{ - position: absolute; - content: ''; - top: 50%; - left: -40px; - height: 1px; - width: 20px; - background: #282F49; - transform: translateY(-50%); - } - } - a{ - font-size: 22px; - font-family: $primary-font; - line-height: 30px; - color: $secondary-color; - margin: 0; - display: block; - text-decoration: none; - transition: all .3s ease; - &:hover{ - color: $primary-color; - } - } - } - &:hover{ - .blog__item-thumb img{ - transform: scale(1.1); - } - } - } - .mobile{ - display: none; - } - @include desktop { - .desktop{ - display: none; - } - .mobile{ - display: block; - text-align: center; - } - } +.blog-preview { + position: relative; + margin-bottom: 30px; + &__shape { + position: absolute; + top: 11%; + right: 12%; + height: 300px; + width: 300px; + img { + animation: rotate 25s infinite linear; + height: 100%; + width: 100%; + } + @include desktop { + display: none; + } + } + &__header_button { + position: relative; + width: 100%; + height: 100%; + a { + position: absolute; + bottom: 0; + right: 0; + display: inline-block; + @include desktop { + position: relative; + margin-top: 30px; + } + } + } + &__item { + position: relative; + margin-bottom: 20px; + @include desktop { + margin-bottom: 130px; + } + &-thumb { + width: 90%; + height: 100%; + overflow: hidden; + border-radius: 20px; + @include desktop { + width: 80%; + margin: 0 auto; + } + img { + height: 100%; + width: 100%; + transition: all 0.3s ease; + } + } + &-content { + position: absolute; + bottom: -100px; + left: 40px; + padding: 30px; + border-radius: 20px; + box-shadow: 0px 20px 40px 0px rgba(50, 65, 141, 0.12); + @include desktop { + left: 0; + } + span { + color: $primary; + margin: 0 0 20px 40px; + position: relative; + display: block; + line-height: 1; + &::before { + position: absolute; + content: ""; + top: 50%; + left: -40px; + height: 1px; + width: 20px; + background: $secondary; + transform: translateY(-50%); + } + } + } + &:hover { + .blog-preview__item-thumb img { + transform: scale(1.1); + } + } + } + .mobile { + display: none; + } + @include desktop { + .desktop { + display: none; + } + .mobile { + display: block; + text-align: center; + } + } +} +@keyframes rotate { + from { + -webkit-transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + } } -@keyframes rotate{ - from { - -webkit-transform: rotate(0deg); - } to { - -webkit-transform: rotate(360deg); - } -}
\ No newline at end of file diff --git a/assets/scss/components/_blog.scss b/assets/scss/components/_blog.scss index e946cf8..969149d 100644 --- a/assets/scss/components/_blog.scss +++ b/assets/scss/components/_blog.scss @@ -1,128 +1,54 @@ -.blog { - &__item { - position: relative; - margin-bottom: 120px; - &-thumb { - width: 90%; - height: 100%; - @include desktop { - width: 80%; - margin: 0 auto; - } - img { - height: 100%; - width: 100%; - border-radius: 20px; - } - } - &-content { - background: #ffffff; - position: absolute; - bottom: -100px; - left: 40px; - padding: 30px; - border-radius: 20px; - box-shadow: 0px 20px 40px 0px rgba(50, 65, 141, 0.12); - @include desktop { - left: 0; - } - span { - font-size: 16px; - font-family: $secondary-font; - color: $primary-color; - margin: 0 0 20px 40px; - position: relative; - display: block; - line-height: 1; - &::before { - position: absolute; - content: ""; - top: 50%; - left: -40px; - height: 1px; - width: 20px; - background: #282f49; - transform: translateY(-50%); - } - } - a { - font-size: 22px; - font-family: $primary-font; - line-height: 30px; - color: $secondary-color; - margin: 0; - display: block; - text-decoration: none; - transition: all 0.3s ease; - &:hover { - color: $primary-color; - } - } - } - } - &__pagination { - width: 100%; - position: relative; - height: 80px; - margin-top: 40px; - .pagination { - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); - li { - a { - transition: all 0.3s ease; - border-radius: 10px !important; - box-shadow: 0 20px 40px 0 rgba(50, 65, 141, 0.12); - height: 80px; - width: 80px; - text-decoration: none; - font-family: $primary-font; - font-size: 20px; - color: $secondary-color; - transition: all 0.3s ease; - display: inline-block; - text-align: center; - line-height: 80px; - position: relative; - border: none; - svg { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - path { - fill: #000; - } - } - } - &:hover { - a { - background: $primary-color; - color: $white; - svg { - path { - fill: $white; - } - } - } - } - &:not(:last-child) { - margin-right: 34px; - } - &.active { - a { - background: $primary-color; - color: $white; - svg { - path { - fill: $white; - } - } - } - } - } - } - } +.blog-page { + &__item { + position: relative; + margin-bottom: 180px; + &-thumb { + width: 90%; + height: 100%; + overflow: hidden; + border-radius: 20px; + @include desktop { + width: 80%; + margin: 0 auto; + } + img { + height: 100%; + width: 100%; + transition: all 0.3s ease; + } + } + &-content { + position: absolute; + bottom: -100px; + left: 40px; + padding: 30px; + border-radius: 20px; + box-shadow: 0px 20px 40px 0px rgba(50, 65, 141, 0.12); + @include desktop { + left: 0; + } + span { + color: $primary; + margin: 0 0 20px 40px; + position: relative; + display: block; + line-height: 1; + &::before { + position: absolute; + content: ""; + top: 50%; + left: -40px; + height: 1px; + width: 20px; + background: $secondary; + transform: translateY(-50%); + } + } + } + &:hover { + .blog-page__item-thumb img { + transform: scale(1.1); + } + } + } } diff --git a/assets/scss/components/_case_details.scss b/assets/scss/components/_case_details.scss index 0d48abc..290a250 100644 --- a/assets/scss/components/_case_details.scss +++ b/assets/scss/components/_case_details.scss @@ -37,24 +37,10 @@ display: none; } } - &-title { - font-size: 50px; - line-height: 60px; - font-family: $primary-font; - color: $secondary-color; - margin: 0 0 50px 0; - } - p { - font-family: $secondary-font; - color: #7e7e8a; - font-size: 16px; - line-height: 34px; - margin: 0 0 30px 0; - } &-info { display: flex; justify-content: space-around; - background: $secondary-color; + background: $secondary; border-radius: 20px; padding: 65px 0; margin: 70px 0 80px 0; @@ -89,29 +75,13 @@ } } h5 { - margin: 0 0 10px 0; - font-size: 20px; - color: $white; - font-family: $primary-font; - } - p { - margin: 0; - } - } - &-service { - margin-bottom: 90px; - h3 { - font-family: $primary-font; - color: $secondary-color; - font-size: 25px; - margin: 0 0 25px 0; + color: $light; } p { margin: 0; } } &-thumb { - margin: 0 0 90px 0; border-radius: 30px; overflow: hidden; img { @@ -121,10 +91,6 @@ } } &-nav { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 50px; .previous, .next { .icon { @@ -133,53 +99,28 @@ .content { span { display: block; - font-family: $secondary-font; - color: #7e7e8a; - font-size: 15px; - line-height: 1; - margin-bottom: 5px; } h5 { - font-family: $primary-font; font-size: 20px; margin: 0; - line-height: 1; - a { - text-decoration: none; - color: $secondary-color; - transition: all 0.3s ease; - &:hover { - color: $primary-color; - } - } } } } - .previous { - display: flex; - align-items: center; - .icon { - margin-right: 15px; - } - } + .social { @include mobile { display: none; } ul { - margin: 0; - padding: 0; li { list-style: none; display: inline-block; a { + color: $body-color; display: block; - text-decoration: none; - color: #7e7e8a; - font-size: 20px; transition: all 0.3s ease; &:hover { - color: $primary-color; + color: $primary; } } &:not(:last-child) { @@ -188,15 +129,5 @@ } } } - .next { - display: flex; - align-items: center; - .icon { - margin-left: 15px; - } - .content { - text-align: right; - } - } } } diff --git a/assets/scss/components/_clasic-blog.scss b/assets/scss/components/_clasic-blog.scss deleted file mode 100644 index c727e0e..0000000 --- a/assets/scss/components/_clasic-blog.scss +++ /dev/null @@ -1,247 +0,0 @@ -.classicBlog{ - &__item{ - position: relative; - margin-bottom: 150px; - &-thumb{ - width: 88%; - height: 100%; - @include desktop{ - width: 80%; - margin: 0 auto; - } - img{ - height: 100%; - width: 100%; - border-radius: 20px; - } - } - &-content{ - margin-right: 18px; - background: #ffffff; - position: absolute; - bottom: -100px; - left: 40px; - padding: 30px 50px 30px 40px; - border-radius: 20px; - box-shadow: 0px 20px 40px 0px rgba(50,65,141,0.12); - @include desktop{ - left: 0; - } - @include mobile{ - padding: 25px; - } - span{ - font-size: 16px; - font-family: $secondary-font; - color: $primary-color; - margin: 0 0 20px 40px; - position: relative; - display: block; - line-height: 1; - @include mobile{ - font-size: 14px; - } - &::before{ - position: absolute; - content: ''; - top: 50%; - left: -40px; - height: 1px; - width: 20px; - background: #282F49; - transform: translateY(-50%); - } - } - a{ - font-size: 28px; - font-family: $primary-font; - line-height: 40px; - color: $secondary-color; - margin: 0; - display: block; - text-decoration: none; - transition: all .3s ease; - @include mobile{ - font-size: 20px; - line-height: 28px; - } - &:hover{ - color: $primary-color; - } - } - } - } - &__pagination{ - width: 100%; - position: relative; - height: 80px; - margin-top: 40px; - @include desktop{ - margin-bottom: 100px; - } - .pagination{ - position: absolute; - top: 15px; - left: 0; - li{ - height: 80px; - width: 80px; - box-shadow: 0 20px 40px 0 rgba(50,65,141,0.12); - border-radius: 10px; - position: relative; - transition: all .3s ease; - cursor: pointer; - a{ - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); - text-decoration: none; - font-family: $primary-font; - font-size: 20px; - color: $secondary-color; - transition: all .3s ease; - svg{ - path{ - fill: #000; - } - } - } - &:hover{ - background: $primary-color; - a{ - color: $white; - svg{ - path{ - fill: $white; - } - } - } - } - &:not(:last-child){ - margin-right: 34px; - } - &.active{ - background: $primary-color; - a{ - color: $white; - svg{ - path{ - fill: $white; - } - } - } - } - } - } - } - &__sidebar{ - &:not(:first-child){ - margin: 40px 0 20px 0; - } - .form-search{ - .form-group{ - position: relative; - .form-control{ - height: 70px; - padding: 10px 30px; - border: none; - box-shadow: 0 20px 40px rgba(50, 65, 141, .12); - border-radius: 10px; - color: #7E7E8A; - font-family: $secondary-font; - font-size: 16px; - } - .search-icon{ - position: absolute; - right: 30px; - top: 50%; - transform: translateY(-50%); - display: block; - line-height: 1; - } - } - } - .sidebar-title{ - font-size: 24px; - color: $secondary-color; - font-family: $primary-font; - margin: 0 0 25px 0; - } - .list-item{ - margin: 0; - padding: 0; - li{ - display: block; - list-style: none; - a{ - display: block; - padding: 7px 0; - font-size: 16px; - font-family: $secondary-font; - color: #7E7E8A; - transition: all .3s ease; - span{ - float: right; - } - &:hover{ - color: $primary-color; - text-decoration: none; - } - } - } - } - .latest-post{ - &-item{ - display: flex; - align-items: center; - padding: 15px 0; - .thumb{ - width: 100px; - border-radius: 10px; - overflow: hidden; - img{ - height: 100%; - width: 100%; - } - } - .content{ - width: calc( 100% - 100px ); - padding-left: 30px; - span{ - display: block; - font-family: $secondary-font; - font-size: 16px; - color: $primary-color; - margin: 0 0 0 40px; - position: relative; - &::before{ - position: absolute; - content: ''; - top: 50%; - left: -40px; - transform: translateY(-50%); - height: 2px; - width: 20px; - background: $secondary-color; - } - } - h5{ - margin: 0; - a{ - font-family: $primary-font; - color: $secondary-color; - font-size: 20px; - line-height: 30px; - transition: all .3s ease; - &:hover{ - text-decoration: none; - color: $primary-color; - } - } - } - } - } - } - } -}
\ No newline at end of file diff --git a/assets/scss/components/_contact-section.scss b/assets/scss/components/_contact-section.scss deleted file mode 100644 index 1cf6917..0000000 --- a/assets/scss/components/_contact-section.scss +++ /dev/null @@ -1,275 +0,0 @@ -.contact{ - background: #1B2031; - position: relative; - margin-top: 150px; - &__background_shape{ - position: absolute; - width: 100%; - top: 0; - left: 0; - svg{ - height: 100%; - width: 100%; - path{ - fill: $white; - } - } - @include mobile{ - display: none; - } - } - &__cta{ - background: $primary-color; - padding: 100px 80px; - border-radius: 20px; - display: flex; - align-items: flex-end; - margin-top: -110px; - flex-wrap: wrap; - position: relative; - overflow: hidden; - z-index: 5; - .shape-1{ - position: absolute; - z-index: -1; - transform: rotate(-20deg); - top: -43%; - left: 2%; - animation: moveLeft 5s infinite linear; - svg{ - path{ - fill: #ffffff; - opacity: .07; - } - } - } - .shape-2{ - position: absolute; - z-index: -1; - transform: rotate(80deg); - top: 12%; - right: -9%; - width: 235px; - height: 208px; - animation: move_top 3s infinite linear; - svg{ - height: 100%; - width: 100%; - path{ - fill: #ffffff; - opacity: .07; - } - } - } - @include desktop{ - padding: 70px 40px; - } - &_content{ - width: 60%; - @include desktop{ - width: 100%; - text-align: center; - margin-bottom: 20px; - } - span{ - font-family: $secondary-font; - color: #fff; - font-size: 20px; - display: block; - line-height: 1; - margin: 0 0 20px 40px; - position: relative; - @include desktop{ - display: inline-block; - } - &::before{ - position: absolute; - content: ''; - height: 2px; - width: 20px; - left: -40px; - top: 50%; - transform: translateY(-50%); - background: #fff; - } - } - h1{ - font-family: $primary-font; - font-size: 55px; - color: #fff; - margin: 0; - line-height: 1; - @include desktop{ - font-size: 40px; - } - } - } - &_action{ - width: 40%; - @include desktop{ - width: 100%; - text-align: center; - } - a{ - float: right; - // color: $primary-color; - // padding: 15px 40px; - // background: #fff; - // display: inline-block; - // text-decoration: none; - // font-family: $secondary-font; - // border-radius: 7px; - // font-size: 16px; - // transition: all .3s ease; - @include desktop{ - float: none; - } - // &:hover{ - // background: #768bf3; - // color: #fff; - // } - } - } - } - &__widget{ - padding: 100px 0; - @include desktop{ - text-align: center; - padding: 50px 0; - } - &_sitemap{ - @include desktop{ - margin: 40px 0; - } - h3{ - font-family: $secondary-font; - color: #fff; - margin: 0 0 40px 0; - line-height: 1; - font-size: 24px; - @include desktop{ - margin: 0 0 20px 0; - } - } - ul{ - margin: 0; - padding: 0; - li{ - list-style: none; - a{ - text-decoration: none; - display: block; - color: #fff; - transition: all .3s ease; - font-family: $secondary-font; - font-size: 16px; - &:hover{ - color: $primary-color; - } - } - &:not(:last-child){ - margin-bottom: 10px; - } - } - } - } - &_address{ - h3{ - font-family: $secondary-font; - color: #fff; - margin: 0 0 40px 0; - line-height: 1; - font-size: 24px; - @include desktop{ - margin: 0 0 20px 0; - } - } - ul{ - margin: 0; - padding: 0; - li{ - list-style: none; - a{ - i{ - margin-right: 15px; - } - text-decoration: none; - display: block; - color: #fff; - transition: all .3s ease; - font-family: $secondary-font; - font-size: 16px; - &:hover{ - color: $primary-color; - } - } - &:not(:last-child){ - margin-bottom: 10px; - } - p{ - color: #fff; - margin: 0; - i{ - margin-right: 20px; - font-size: 17px; - } - } - } - } - } - } - &__footer{ - padding: 50px 0; - border-top: 1px solid rgba(255, 255, 255, .2); - @include desktop{ - text-align: center; - } - &_copy{ - p{ - color: #fff; - font-size: 16px; - font-family: $secondary-font; - margin: 0; - } - } - &_social{ - ul{ - margin: 0; - padding: 0; - float: right; - @include desktop{ - margin: 20px auto 0; - float: none; - } - li{ - list-style: none; - display: inline-block; - a{ - display: block; - text-decoration: none; - color: #fff; - font-size: 20px; - transition: all .3s ease; - &:hover{ - color: $primary-color; - } - } - &:not(:last-child){ - margin-right: 25px; - } - } - } - } - } -} -@keyframes moveLeft{ - 0%, 100% { - -webkit-transform: translateX(0) rotate(-20deg); - transform: translateX(0) rotate(-20deg); - } - - 50% { - -webkit-transform: translateX(15px) rotate(-20deg); - transform: translateX(15px) rotate(-20deg); - } -}
\ No newline at end of file diff --git a/assets/scss/components/_contact.scss b/assets/scss/components/_contact.scss index 6dd55cb..5f426fb 100644 --- a/assets/scss/components/_contact.scss +++ b/assets/scss/components/_contact.scss @@ -20,135 +20,17 @@ z-index: 1; } } - h4 { - margin: 0 0 30px 0; - font-family: $primary-font; - font-size: 25px; - color: $secondary-color; - } - p { - margin: 0; - font-size: 16px; - line-height: 34px; - color: #7e7e8a; - font-family: $secondary-font; - } a { - color: #7e7e8a; + color: $body-color; text-decoration: underline; - font-size: 16px; - line-height: 34px; - font-family: $secondary-font; - display: block; } } } .contact-form { padding: 50px 0 100px 0; - &-title { - h4 { - font-family: $primary-font; - color: $secondary-color; - margin: 0 0 30px 0; - font-size: 35px; - } - } &-input { .form-group { margin-bottom: 30px; - .form-control { - border: 1px solid #aeb8be; - border-radius: 7px; - padding: 10px 30px; - font-size: 14px; - font-family: $secondary-font; - color: #282f49; - &::placeholder { - /* Chrome, Firefox, Opera, Safari 10.1+ */ - color: #282f49; - } - &:-ms-input-placeholder { - /* Internet Explorer 10-11 */ - color: #282f49; - } - &::-ms-input-placeholder { - /* Microsoft Edge */ - color: #282f49; - } - &:focus { - outline: 0; - box-shadow: none; - } - } - input.form-control { - height: 55px; - border: 1px solid #aeb8be; - } - } - .form-check { - padding: 0; - margin-bottom: 30px; - margin-top: -10px; - &-input { - padding: 0; - height: initial; - width: initial; - margin-bottom: 0; - // display: none; - cursor: pointer; - width: 1px; - height: 1px; - opacity: 0; - margin-left: 10px; - margin-top: 23px; - } - &-label { - position: relative; - cursor: pointer; - &::before { - content: ""; - -webkit-appearance: none; - background-color: transparent; - border: 1px solid #aeb8be; - height: 20px; - width: 20px; - border-radius: 4px; - display: inline-block; - position: relative; - vertical-align: middle; - cursor: pointer; - margin-right: 8px; - } - } - - input:checked + label:after { - content: ""; - display: block; - position: absolute; - top: 6px; - left: 7px; - width: 6px; - height: 12px; - border: solid #0079bf; - border-width: 0 2px 2px 0; - transform: rotate(45deg); - } - } - .contact-form-btn { - padding: 20px 45px; - display: inline-block; - font-size: 16px; - font-family: $secondary-font; - background: $primary-color; - border-radius: 7px; - color: #fff; - transition: all 0.3s ease; - &:hover { - background: #425fee; - box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3); - transform: scale(1.03); - text-decoration: none; - } } } #map { diff --git a/assets/scss/components/_footer-section.scss b/assets/scss/components/_footer-section.scss new file mode 100644 index 0000000..2c4902e --- /dev/null +++ b/assets/scss/components/_footer-section.scss @@ -0,0 +1,149 @@ +.footer { + background: #1b2031; + position: relative; + margin-top: 150px; + &__background_shape { + position: absolute; + width: 100%; + top: 0; + left: 0; + svg { + height: 100%; + width: 100%; + path { + fill: $white; + } + } + @include mobile { + display: none; + } + } + &__cta { + background: $primary; + padding: 100px 80px; + border-radius: 20px; + display: flex; + align-items: flex-end; + margin-top: -110px; + flex-wrap: wrap; + position: relative; + overflow: hidden; + z-index: 5; + .shape-1 { + position: absolute; + z-index: -1; + transform: rotate(-20deg); + top: -43%; + left: 2%; + animation: moveLeft 5s infinite linear; + svg { + path { + fill: #ffffff; + opacity: 0.07; + } + } + } + .shape-2 { + position: absolute; + z-index: -1; + transform: rotate(80deg); + top: 12%; + right: -9%; + width: 235px; + height: 208px; + animation: move_top 3s infinite linear; + svg { + height: 100%; + width: 100%; + path { + fill: #ffffff; + opacity: 0.07; + } + } + } + @include desktop { + padding: 70px 40px; + } + &_content { + width: 60%; + @include desktop { + width: 100%; + text-align: center; + margin-bottom: 20px; + } + span { + font-size: 20px; + display: block; + line-height: 1; + margin: 0 0 20px 40px; + position: relative; + @include desktop { + display: inline-block; + } + &::before { + position: absolute; + content: ""; + height: 2px; + width: 20px; + left: -40px; + top: 50%; + transform: translateY(-50%); + background: #fff; + } + } + } + &_action { + width: 40%; + @include desktop { + width: 100%; + text-align: center; + } + a { + float: right; + @include desktop { + float: none; + } + } + } + } + &__widget { + padding: 100px 0; + @include desktop { + text-align: center; + padding: 50px 0; + .footer__widget_address { + ul { + margin-right: 2.14285714em; // match fa-lu margin + } + } + } + } + &__footer { + padding: 50px 0; + border-top: 1px solid rgba(255, 255, 255, 0.2); + @include desktop { + text-align: center; + } + &_social { + ul { + float: right; + @include desktop { + margin: 20px auto 0; + float: none; + } + } + } + } +} +@keyframes moveLeft { + 0%, + 100% { + -webkit-transform: translateX(0) rotate(-20deg); + transform: translateX(0) rotate(-20deg); + } + + 50% { + -webkit-transform: translateX(15px) rotate(-20deg); + transform: translateX(15px) rotate(-20deg); + } +} diff --git a/assets/scss/components/_hero-section.scss b/assets/scss/components/_hero-section.scss index 921e0e3..ca9c5ec 100644 --- a/assets/scss/components/_hero-section.scss +++ b/assets/scss/components/_hero-section.scss @@ -29,6 +29,7 @@ } } &_content { + padding: 0 20px 0 0; position: relative; @include desktop { text-align: center; @@ -51,58 +52,16 @@ } span { font-size: 24px; - font-family: $secondary-font; - color: $secondary-color; position: relative; display: block; margin: 0 0 20px 30px; @include desktop { display: inline-block; } - &::before { - position: absolute; - content: ""; - height: 2px; - width: 20px; - top: 50%; - left: -20px; - transform: translateX(-50%); - background: $secondary-color; - } - } - h1 { - margin: 0 0 30px 0; - font-size: 60px; - font-family: $primary-font; - color: $secondary-color; - line-height: 70px; } p { - margin: 0 0 50px 0; - font-family: $secondary-font; - color: $secondary-color; - font-size: 20px; - line-height: 30px; + font-size: $font-size-lg; } - - // a { - // display: inline-block; - // padding: 20px 50px; - // font-family: $secondary-font; - // font-size: 16px; - // background: $primary-color; - // border-radius: 7px; - // color: #ffffff; - // text-decoration: none; - // border: 1px solid transparent; - // transition: all 0.3s ease; - // transform: scale(1); - // &:hover { - // background: #425fee; - // box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3); - // transform: scale(1.03); - // } - // } } &_figure { width: 90%; @@ -181,9 +140,13 @@ left: 55%; transform: translate(-50%, -50%); transition: all 0.3s ease; + + path { + fill: $primary; + } } &:hover { - background-color: $primary-color; + background-color: $primary; svg { path { fill: #ffffff; diff --git a/assets/scss/components/_navbar.scss b/assets/scss/components/_navbar.scss new file mode 100644 index 0000000..31c6410 --- /dev/null +++ b/assets/scss/components/_navbar.scss @@ -0,0 +1,70 @@ +.navbar { + padding: 40px 0; + background: transparent; + transition: all 0.3s ease; + @include desktop { + background: $white; + } + @include desktop { + padding: 15px 20px; + margin: 10px 10px 0; + border-radius: 5px; + } + .navbar-brand { + img { + @include desktop { + width: 80%; + } + } + } + &.nav__color__change { + background: $white; + padding: 20px 0; + box-shadow: 0px 10px 20px 0px rgba(50, 65, 141, 0.1); + @include desktop { + padding: 15px 20px; + } + } + @include desktop { + .navbar-toggler { + outline: 0; + padding: 0; + &-icon { + height: 2px; + width: 25px; + transition: all 0.2s; + background: $primary; + display: block; + &:not(:last-child) { + margin-bottom: 5px; + } + &:nth-child(1) { + transform: rotate(45deg); + transform-origin: 10% 10%; + } + &:nth-child(2) { + opacity: 0; + filter: alpha(opacity=0); + } + &:nth-child(3) { + transform: rotate(-45deg); + transform-origin: 10% 90%; + } + } + &.collapsed { + .navbar-toggler-icon { + &:nth-child(1) { + transform: rotate(0); + } + &:nth-child(2) { + opacity: 1; + filter: alpha(opacity=1); + } + &:nth-child(3) { + transform: rotate(0); + } + } + } + } + } +} diff --git a/assets/scss/components/_page-title.scss b/assets/scss/components/_page-title.scss index 9e4518e..8b39c47 100644 --- a/assets/scss/components/_page-title.scss +++ b/assets/scss/components/_page-title.scss @@ -1,104 +1,66 @@ -.breadCrumb{ +.breadCrumb { padding: 200px 0 0; position: relative; - .svg-img{ + .svg-img { position: absolute; bottom: -35%; left: -7%; animation: move_top 5s infinite linear; - @include desktop{ + @include desktop { display: none; } } - .animate-shape{ + .animate-shape { position: absolute; bottom: -60%; right: 2%; height: 300px; width: 300px; - svg{ + svg { width: 100%; } - @include desktop{ + @include desktop { display: none; } } - .animate-pattern{ + .animate-pattern { position: absolute; bottom: -40%; right: 10%; height: 100px; width: 100px; animation: move_top 3s infinite linear; - img{ + img { height: 100%; width: 100%; } - @include desktop{ + @include desktop { display: none; } } - @include desktop{ + @include desktop { padding: 120px 0 0; } - &__title{ + &__title { font-size: 48px; - font-family: $primary-font; - color: $secondary-color; line-height: 1; margin: 0 0 30px 0; - @include tablet{ - font-size: 36px; - } - @include mobile{ - font-size: 30px; - } } - .breadcrumb{ + .breadcrumb { background: none; margin: 0; padding: 0; - &-item{ - a{ - font-family: $secondary-font; - color: $secondary-color; - font-size: 17px; + &-item { + a { + color: $secondary; text-decoration: none; - @include mobile{ - font-size: 14px; - } - @include mobile-xs{ - font-size: 12px; - } } - &.active{ - font-family: $secondary-font; - color: $secondary-color; - @include mobile{ - font-size: 14px; - } - @include mobile-xs{ - font-size: 12px; - } + &.active { + color: $secondary; } } } - .breadcrumb-item+.breadcrumb-item::before{ - content: '-'; - color: $secondary-color; - font-size: 17px; - padding-right: 10px; - @include mobile{ - font-size: 14px; - } - @include mobile-xs{ - padding-right: 0px; - } - } - .breadcrumb-item+.breadcrumb-item{ - padding-left: 10px; - @include mobile-xs{ - padding-right: 0px; - } + .breadcrumb-item + .breadcrumb-item::before { + content: "-"; } -}
\ No newline at end of file +} diff --git a/assets/scss/components/_portfolio-section.scss b/assets/scss/components/_portfolio-section.scss index bd5b2fa..8efb9e8 100644 --- a/assets/scss/components/_portfolio-section.scss +++ b/assets/scss/components/_portfolio-section.scss @@ -3,34 +3,13 @@ @include desktop { padding: 100px 0; } - &__header { - margin-bottom: 80px; - @include tablet { - margin-bottom: 50px; - } - span { - display: block; - font-size: 20px; - font-family: $secondary-font; - margin: 0 0 30px 0; - } - h1 { - margin: 0 0 20px 0; - font-size: 55px; - font-family: $primary-font; - color: $secondary-color; - line-height: 1; - @include tablet { - font-size: 40px; - } - } - } &-item { width: 50%; padding: 30px; @include tablet { width: 100%; padding: 0; + margin: 0; } &:nth-child(4n-3) { padding-right: 70px; @@ -50,7 +29,6 @@ &-grid { display: flex; flex-wrap: wrap; - margin: 0 -30px; } &-thumb { transition: 0.3s ease; @@ -59,35 +37,16 @@ } &-content { span { - font-family: $secondary-font; color: #7e7e8a; font-size: 18px; line-height: 1; display: block; margin: 28px 0 20px 0; } - h3 { - margin: 0 0 20px 0; - a { - font-family: $primary-font; - color: $secondary-color; - font-size: 25px; - line-height: 40px; - transition: all 0.3s ease; - display: block; - &:hover { - text-decoration: none; - color: $primary-color; - } - } - } .see-more-btn { - text-decoration: none; display: inline-block; - font-family: $secondary-font; - color: $primary-color; + color: $primary; position: relative; - font-size: 17px; margin: 0 0 0 30px; transform: scaleY(0); transform-origin: bottom center; @@ -97,7 +56,7 @@ content: ""; height: 2px; width: 20px; - background: $primary-color; + background: $primary; top: 50%; left: -30px; transform: translateY(-50%); diff --git a/assets/scss/components/_preloder.scss b/assets/scss/components/_preloder.scss index 231363a..e66b181 100644 --- a/assets/scss/components/_preloder.scss +++ b/assets/scss/components/_preloder.scss @@ -1,32 +1,32 @@ .preloader-wrap { - width: 100%; - height: 100%; - position: fixed; - top: 0; - bottom: 0; - background: $white; - z-index: 2000; - text-align: center; + width: 100%; + height: 100%; + position: fixed; + top: 0; + bottom: 0; + background: $white; + z-index: 2000; + text-align: center; height: 100vh; - .inner{ + .inner { position: absolute; height: 170px; width: 170px; left: 50%; top: 50%; - transform: translate( -50%, -50% ); - border: 1px solid $primary-color; - border-top: 5px solid $primary-color; + transform: translate(-50%, -50%); + border: 1px solid $primary; + border-top: 5px solid $primary; border-radius: 50%; animation: spin 1s infinite linear; - @include desktop{ + @include desktop { height: 150px; width: 150px; } } .percentage { z-index: 100; - color: $primary-color; + color: $primary; opacity: 1; font-weight: 600; font-family: "bebasbold"; @@ -37,19 +37,18 @@ left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - @include desktop{ + transform: translate(-50%, -50%); + @include desktop { font-size: 50px; } } } -@keyframes spin{ +@keyframes spin { 0% { - transform: translate( -50%, -50% ) rotate(0); + transform: translate(-50%, -50%) rotate(0); } 100% { - transform: translate( -50%, -50% ) rotate(360deg); + transform: translate(-50%, -50%) rotate(360deg); } } -
\ No newline at end of file diff --git a/assets/scss/components/_resume-section.scss b/assets/scss/components/_resume-section.scss index df00791..0566cb1 100644 --- a/assets/scss/components/_resume-section.scss +++ b/assets/scss/components/_resume-section.scss @@ -25,83 +25,8 @@ margin-bottom: 30px; } span{ - font-size: 20px; - font-family: $secondary-font; - color: $white; - position: relative; - display: block; - margin: 0 0 20px 30px; &::before{ - position: absolute; - content: ''; - height: 2px; - width: 20px; - top: 50%; - left: -20px; - transform: translateX(-50%); - background: $white; - } - } - h1{ - margin: 0 0 30px 0; - font-size: 55px; - font-family: $primary-font; - color: $white; - line-height: 50px; - } - p{ - margin: 0 0 0 0; - font-family: $secondary-font; - color: $white; - font-size: 18px; - line-height: 34px; - } - ul{ - margin: 40px 0 0 0; - padding: 0; - &.nav-tabs{ - border-bottom: none; - } - li{ - list-style: none; - display: inline-block; - // a { - // padding: 15px 40px; - // text-decoration: none; - // display: block; - // background: $white; - // color: $secondary-color; - // font-family: $secondary-font; - // font-size: 16px; - // transition: all .3s ease; - // @include mobile-s{ - // padding: 15px 28px; - // } - // &:hover{ - // background: #425FEE; - // color: $white; - // box-shadow: 0 8px 20px 0 rgba(56, 87, 241, 0.30); - // } - // &.active{ - // background: $primary-color; - // color: $white; - // box-shadow: 0 8px 20px 0 rgba(56, 87, 241, 0.30); - // &:hover{ - // background: #425FEE; - // } - // } - // } - &:nth-child(1){ - a{ - border-radius: 7px 0 0 7px; - } - } - &:nth-child(2){ - margin-left: -5px; - a{ - border-radius: 0 7px 7px 0; - } - } + background: $light; } } } @@ -113,37 +38,9 @@ margin-bottom: 30px; box-shadow: 0px 20px 40px 0px rgba(50, 65, 141, 0.12); span{ - color: $primary-color; display: block; - font-size: 16px; - font-family: $secondary-font; margin: 0 0 20px 30px; position: relative; - line-height: 1; - &::before{ - position: absolute; - content: ''; - height: 2px; - width: 20px; - top: 50%; - left: -20px; - transform: translateX(-50%); - background: $secondary-color; - } - } - h4{ - font-size: 25px; - font-family: $primary-font; - color: $secondary-color; - margin: 0 0 30px 0; - line-height: 1; - } - p{ - line-height: 34px; - font-family: $secondary-font; - color: #7E7E8A; - font-size: 16px; - margin: 0; } } } diff --git a/assets/scss/components/_service-section.scss b/assets/scss/components/_service-section.scss index b4d9ec6..77b058a 100644 --- a/assets/scss/components/_service-section.scss +++ b/assets/scss/components/_service-section.scss @@ -1,163 +1,112 @@ -.service{ +.service { position: relative; overflow: hidden; padding-bottom: 275px; - &__background{ + &__background { position: absolute; top: 0; right: 0; z-index: -1; width: 61%; - svg{ + svg { width: 100%; height: 100%; } } - &__background_shape{ + &__background_shape { position: absolute; bottom: -10%; left: -7%; height: 465px; width: 410px; - svg{ - width:100%; + svg { + width: 100%; } - @include desktop{ + @include desktop { display: none; } } - &__background_pattern{ + &__background_pattern { position: absolute; bottom: 4%; left: 6%; animation: move_top 5s infinite linear; - @include desktop{ + @include desktop { display: none; } } - &__header{ - margin-bottom: 50px; - span{ - font-size: 20px; - font-family: $secondary-font; - color: $secondary-color; - position: relative; - display: block; - margin: 0 0 20px 30px; - &::before{ - position: absolute; - content: ''; - height: 2px; - width: 20px; - top: 50%; - left: -20px; - transform: translateX(-50%); - background: $secondary-color; - } - } - h1{ - margin: 0 0 30px 0; - font-size: 50px; - font-family: $primary-font; - color: $secondary-color; - line-height: 50px; - @include tablet{ - font-size: 39px; - } - } - p{ - margin: 0 0 0 0; - font-family: $secondary-font; - color: $secondary-color; - font-size: 18px; - line-height: 26px; - } - } - &__slider{ - &_item{ + &__slider { + &_item { margin: 15px; padding: 30px; - box-shadow: 0px 20px 40px 0px rgba(50,65,141,0.12); + box-shadow: 0px 20px 40px 0px rgba(50, 65, 141, 0.12); border-radius: 20px; background: $white; - &-icon{ + &-icon { height: 110px; width: 125px; position: relative; - .icon-background{ + .icon-background { position: absolute; top: 0; right: 0; } - .icon{ + .icon { position: absolute; left: 0; bottom: 0; z-index: 1; } } - h4{ - font-size: 24px; - font-family: $primary-font; - color: $secondary-color; - margin: 40px 0 30px 0; - } - p{ - font-family: $secondary-font; - color: #7E7E8A; - font-size: 16px; - line-height: 30px; - margin: 0; - } } .slick-list { overflow: visible; } - .slick-dots{ + .slick-dots { display: flex; align-items: center; margin: 0; padding: 0; justify-content: center; - li{ + li { margin: 0; list-style: none; height: 8px; width: 8px; - &:not(:last-child){ + &:not(:last-child) { margin-right: 15px; } - button{ + button { cursor: pointer; height: 100%; width: 100%; - background: #C2C8CC; + background: #c2c8cc; border-radius: 50%; - transition: all .3s ease; + transition: all 0.3s ease; display: block; padding: 0; text-indent: -9999px; &:focus { outline: 0; } - &:hover{ - background: $primary-color; + &:hover { + background: $primary; } } - &.slick-active{ + &.slick-active { height: 10px; width: 10px; border-radius: 50%; - button{ - background-color: $primary-color; + button { + background-color: $primary; } } } } .slick-slide { - &:focus{ + &:focus { outline: 0; } } } -}
\ No newline at end of file +} diff --git a/assets/scss/components/_single-blog-post.scss b/assets/scss/components/_single-blog-post.scss index 98bbac0..5cdd10e 100644 --- a/assets/scss/components/_single-blog-post.scss +++ b/assets/scss/components/_single-blog-post.scss @@ -1,112 +1,76 @@ -.section{ - @include desktop{ +.section { + @include desktop { padding: 50px 0; } - .svg-img{ + .svg-img { position: absolute; top: 30%; left: -7%; animation: move_top 5s infinite linear; - @include desktop{ + @include desktop { display: none; } } - .animate-shape{ + .animate-shape { position: absolute; top: 29%; right: 4%; height: 300px; width: 300px; - svg{ + svg { width: 100%; } - @include desktop{ + @include desktop { display: none; } } - .animate-pattern{ + .animate-pattern { position: absolute; top: 46%; right: 12%; height: 100px; width: 100px; animation: move_top 3s infinite linear; - img{ + img { height: 100%; width: 100%; } - @include desktop{ + @include desktop { display: none; } } - .singleBlog{ - &__feature{ + .singleBlog { + &__feature { margin: 0 100px; - @include desktop{ + @include desktop { margin: 0; } - img{ + img { height: 100%; width: 100%; border-radius: 20px; } } - &__content{ + &__content { margin: 0 200px 0 200px; - @include desktop{ + @include desktop { margin: 0; } - p{ - font-family: $secondary-font; - font-size: 16px; - line-height: 30px; - margin-bottom: 40px; - color: #7E7E8A; - } - dl, ul, ol{ - margin-top: 0; - margin-bottom: 40px; - font-family: $secondary-font; - font-size: 16px; - line-height: 30px; - color: #7E7E8A; - } - blockquote{ - font-family: $secondary-font; - font-size: 16px; - line-height: 30px; - color: $secondary-color; - padding: 30px; - background: $white; - box-shadow: 0px 20px 40px 0px rgba(50, 65, 141, 0.07); - border-radius: 5px; - margin: 0 0 50px 0; - cite{ - display: block; - } - } - .blog-section{ + .blog-section { margin-bottom: 60px; - img{ + img { float: right; mask: url("../images/hero/hero-mask-svg.png"); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; -webkit-mask-position: center center; - @include tablet{ + @include tablet { width: 100%; float: none; margin-bottom: 40px; } } - h3{ - font-family: $primary-font; - color: $secondary-color; - font-size: 25px; - line-height: 40px; - margin: 0 0 20px 0; - } } } } -}
\ No newline at end of file +} diff --git a/assets/scss/components/_site-navigation.scss b/assets/scss/components/_site-navigation.scss deleted file mode 100644 index e0bb61a..0000000 --- a/assets/scss/components/_site-navigation.scss +++ /dev/null @@ -1,116 +0,0 @@ -.navbar{ - padding: 40px 0; - background: transparent; - transition: all .3s ease; - @include desktop{ - background: $white; - } - @include desktop{ - padding: 15px 20px; - margin: 10px 10px 0; - border-radius: 5px; - } - .navbar-brand{ - img{ - @include desktop{ - width: 80%; - } - } - } - .main-navigation{ - margin: 0 auto; - .nav-item{ - .nav-link{ - color: $secondary-color; - font-family: $secondary-font; - padding: 0 15px; - transition: all .3s ease; - font-weight: 500; - &:hover{ - color: $primary_color; - } - @include desktop{ - text-align: center; - padding: 15px 0; - cursor: pointer; - } - } - .active{ - color: $primary_color; - } - } - } - - // .hire_button{ - // background: $primary_color; - // padding: 15px 30px; - // color: #fff; - // text-decoration: none; - // border-radius: 7px; - // font-size: 16px; - // font-family: $secondary-font; - // font-weight: 400; - // border: 1px solid transparent; - // transition: all .3s ease; - // transform: scale(1); - // &:hover{ - // background: #425FEE; - // box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3); - // transform: scale(1.03); - // } - // @include desktop{ - // text-align: center; - // } - // } - - &.nav__color__change{ - background: $white; - padding: 20px 0; - box-shadow: 0px 10px 20px 0px rgba(50,65,141,0.1); - @include desktop{ - padding: 15px 20px; - } - } - @include desktop{ - .navbar-toggler{ - outline: 0; - padding: 0; - &-icon { - height: 2px; - width: 25px; - transition: all 0.2s; - background: $primary-color; - display: block; - &:not(:last-child){ - margin-bottom: 5px; - } - &:nth-child(1){ - transform: rotate(45deg); - transform-origin: 10% 10%; - } - &:nth-child(2){ - opacity: 0; - filter: alpha(opacity=0); - } - &:nth-child(3){ - transform: rotate(-45deg); - transform-origin: 10% 90%; - } - } - &.collapsed{ - .navbar-toggler-icon{ - &:nth-child(1){ - transform: rotate(0); - } - &:nth-child(2){ - opacity: 1; - filter: alpha(opacity=1); - } - &:nth-child(3){ - transform: rotate(0); - } - } - } - } - } - }
\ No newline at end of file diff --git a/assets/scss/components/_skill-section.scss b/assets/scss/components/_skill-section.scss index 10848ee..13bc8b9 100644 --- a/assets/scss/components/_skill-section.scss +++ b/assets/scss/components/_skill-section.scss @@ -66,72 +66,25 @@ margin-left: 0; margin-top: 30px; } - &_heading { - margin-bottom: 40px; - span { - font-size: 20px; - font-family: $secondary-font; - color: $secondary-color; - position: relative; - display: block; - margin: 0 0 20px 30px; - &::before { - position: absolute; - content: ""; - height: 2px; - width: 20px; - top: 50%; - left: -20px; - transform: translateX(-50%); - background: $secondary-color; - } - } - h1 { - margin: 0 0 30px 0; - font-size: 50px; - font-family: $primary-font; - color: $secondary-color; - line-height: 50px; - } - p { - margin: 0 0 0 0; - font-family: $secondary-font; - color: $secondary-color; - font-size: 18px; - line-height: 26px; - } - } &_item { &.js-animation { transition: all 0.3s ease; .progress { width: 100%; - background: #e7eef2; + background: $light; height: 10px; border-radius: 5px; .progress-bar { border-radius: 5px; position: relative; animation: animate-positive 3000ms; - background: #5d78ff; + background: $primary; } } } &:not(:last-child) { margin-bottom: 30px; } - h6 { - display: inline-block; - font-family: $secondary-font; - font-weight: 400; - font-size: 16px; - } - .progress-value { - float: right; - font-family: $secondary-font; - font-size: 16px; - font-weight: 400; - } } } } diff --git a/assets/scss/components/_testimonial-section.scss b/assets/scss/components/_testimonial-section.scss index 335835d..af192c1 100644 --- a/assets/scss/components/_testimonial-section.scss +++ b/assets/scss/components/_testimonial-section.scss @@ -21,25 +21,6 @@ display: none; } } - &__header { - margin-bottom: 50px; - span { - display: block; - font-size: 20px; - font-family: $secondary-font; - margin: 0 0 30px 0; - } - h1 { - margin: 0; - font-size: 55px; - font-family: $primary-font; - color: $secondary-color; - line-height: 1; - @include tablet { - font-size: 40px; - } - } - } &__slider { &_item { background: $white; @@ -66,14 +47,10 @@ } &-content { margin: 0 0 40px 0; - font-family: $secondary-font; - font-size: 17px; line-height: 35px; - color: #282f49; } &-author { margin: 0 0 0 35px; - font-family: $secondary-font; color: #7e7e8a; font-size: 16px; line-height: 1; @@ -122,7 +99,7 @@ outline: 0; } &:hover { - background: $primary-color; + background: $primary; } } &.slick-active { @@ -130,7 +107,7 @@ width: 10px; border-radius: 50%; button { - background-color: $primary-color; + background-color: $primary; } } } diff --git a/assets/scss/style.scss b/assets/scss/style.scss index b49f574..e6d964d 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -4,7 +4,6 @@ PROJECT: Portio HTML VERSION: 1.0.0 -------------------------------------------------------------------*/ - @import "variables"; @import "../bootstrap-4.5.2/scss/bootstrap"; @@ -19,7 +18,7 @@ VERSION: 1.0.0 @import "components/preloder"; -@import "components/site-navigation"; +@import "components/navbar"; @import "components/hero-section"; @@ -37,7 +36,7 @@ VERSION: 1.0.0 @import "components/blog-section"; -@import "components/contact-section"; +@import "components/footer-section"; @import "components/blog"; @@ -45,8 +44,6 @@ VERSION: 1.0.0 @import "components/page-title"; -@import "components/clasic-blog"; - @import "components/contact"; @import "components/case_details"; diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 8dadce2..974fa04 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -3,70 +3,89 @@ languageCode = "en-us" paginate = 6 theme = "portio" title = "Portio" - # Main Menu - [[menu.main]] - name = "Home" - url = "#home" - weight = 1 - [[menu.main]] - name = "About" - url = "#about" - weight = 2 - [[menu.main]] - name = "Service" - url = "#service" - weight = 3 - [[menu.main]] - name = "Work" - url = "#portfolio" - weight = 4 - [[menu.main]] - name = "Resume" - url = "#resume" - weight = 5 - [[menu.main]] - name = "Blog" - url = "#blog" - weight = 6 - [[menu.main]] - name = "Contact" - url = "#contact" - weight = 7 +# Main Menu +[[menu.main]] +name = "Home" +url = "#home" +weight = 1 +[[menu.main]] +name = "About" +url = "#about" +weight = 2 +[[menu.main]] +name = "Service" +url = "#service" +weight = 3 +[[menu.main]] +name = "Work" +url = "#portfolio" +weight = 4 +[[menu.main]] +name = "Resume" +url = "#resume" +weight = 5 +[[menu.main]] +name = "Blog" +url = "#blog" +weight = 6 +[[menu.main]] +name = "Contact" +url = "#contact" +weight = 7 - # Sitemap Menu - [[menu.sitemap]] - name = "About me" - url = "about" - weight = 1 - [[menu.sitemap]] - name = "Frequently Ask Question" - url = "#" - weight = 2 - [[menu.sitemap]] - name = "Privacy & Policy" - url = "#" - weight = 3 - [[menu.sitemap]] - name = "Latest Article" - url = "#" - weight = 4 +# Sitemap Menu +[[menu.sitemap]] +name = "About me" +url = "about" +weight = 1 +[[menu.sitemap]] +name = "Frequently Ask Question" +url = "#" +weight = 2 +[[menu.sitemap]] +name = "Privacy & Policy" +url = "#" +weight = 3 +[[menu.sitemap]] +name = "Latest Article" +url = "#" +weight = 4 [params] - blogPageURL = "blog" - contactLink = "contact" - copyright = "All right reserved copyright © Portio 2020" - footerLogo = "images/contact/widget-logo.png" - formspreeURL = "YOUR FORMSPREE URL" - googleAnalytics = "YOUR GOOGLE ANALYTICS CODE" - logo = "images/site-navigation/logo.png" +blogPageURL = "blog" +contactLink = "contact" +copyright = "All right reserved copyright © Portio 2020" +footerLogo = "images/contact/widget-logo.png" +formspreeURL = "YOUR FORMSPREE URL" +googleAnalytics = "YOUR GOOGLE ANALYTICS CODE" +logo = "images/site-navigation/logo.png" - [params.address] - address = "23 Khan Niketon, Grand Street, NYK." - email = "hello@example.com" - openingHours = "Open from 10am to 6pm (close at 5pm Sundays)" - phone = "+(448) 833 5272 332" - [params.map] - APIkey = "YOUR GOOGLE MAP API" - latitude = "23.7783741" - longitude = "90.3746808" - pinImage = "images/pin.png" +[params.address] +address = "23 Khan Niketon, Grand Street, NYK." +email = "hello@example.com" +openingHours = "Open from 10am to 6pm (close at 5pm Sundays)" +phone = "+(448) 833 5272 332" + +[params.map] +APIkey = "YOUR GOOGLE MAP API" +latitude = "23.7783741" +longitude = "90.3746808" +pinImage = "images/pin.png" + +# Socail icons +[[params.social]] +icon = "fa-facebook-official" +url = "https://www.facebook.com/" +weight = 1 +[[params.social]] +icon = "fa-linkedin-square" +url = "https://www.linkedin.com/" +weight = 2 +[[params.social]] +icon = "fa-pinterest-square" +url = "https://www.pinterest.com/" +weight = 3 +[[params.social]] +icon = "fa-twitter-square" +url = "https://twitter.com/" +weight = 4 diff --git a/exampleSite/content/blog/learning-from-experience.md b/exampleSite/content/blog/learning-from-experience.md deleted file mode 100644 index a850a54..0000000 --- a/exampleSite/content/blog/learning-from-experience.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: "Learning from experience" -date: 2020-07-13T12:49:27+06:00 -featureImage: images/allpost/allPost-6.jpg -postImage: images/single-blog/feature-image.jpg ---- - -Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. - -Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. - -> "The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring." -> -- <cite>Benjamin Franklin</cite> - -Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. - -- ROFL means Rolling on floor laughing. -- STFU means Shut the _freak_ up. -- LMK means Let me know. -- ILY means I love you. -- YOLO means You only live once. -- SMH means Shaking my head. - -The company was previously known as Hingston + Co. but has been given a complete rebrand — including a new logo, tap badges, website and branded material — by London-based design studio & Smith. The new identity is based on the Kandinsky abstract painting, Black Lines, and true to its name, is mostly black and white with a few flashes of colour. According to & Smith, the identity brings together “art and science” and has been brought to life through collaborations with nine illustrators. - -{{< blogsection image="images/single-blog/blog-img.jpg" title="Creative Design" >}} - -Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, - -{{< /blogsection >}} - -sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. - -Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter. diff --git a/exampleSite/content/blog/markdown-formatting-demo.md b/exampleSite/content/blog/markdown-formatting-demo.md new file mode 100644 index 0000000..65cbccd --- /dev/null +++ b/exampleSite/content/blog/markdown-formatting-demo.md @@ -0,0 +1,247 @@ +--- +title: "Markdown Formatting Demo" +date: 2020-09-13T12:49:27+06:00 +featureImage: images/allpost/allPost-6.jpg +postImage: images/single-blog/feature-image.jpg +--- + +This example Markdown file compliments of [markdown-it.github.io](https://markdown-it.github.io/) + +--- + +# h1 Heading 8-) +## h2 Heading +### h3 Heading +#### h4 Heading +##### h5 Heading +###### h6 Heading + + +## Horizontal Rules + +___ + +--- + +*** + + +## Typographic replacements + +Enable typographer option to see result. + +(c) (C) (r) (R) (tm) (TM) (p) (P) +- + +test.. test... test..... test?..... test!.... + +!!!!!! ???? ,, -- --- + +"Smartypants, double quotes" and 'single quotes' + + +## Emphasis + +**This is bold text** + +__This is bold text__ + +*This is italic text* + +_This is italic text_ + +~~Strikethrough~~ + + +## Blockquotes + + +> Blockquotes can also be nested... +>> ...by using additional greater-than signs right next to each other... +> > > ...or with spaces between arrows. + + +## Lists + +Unordered + ++ Create a list by starting a line with `+`, `-`, or `*` ++ Sub-lists are made by indenting 2 spaces: + - Marker character change forces new list start: + * Ac tristique libero volutpat at + + Facilisis in pretium nisl aliquet + - Nulla volutpat aliquam velit ++ Very easy! + +Ordered + +1. Lorem ipsum dolor sit amet +2. Consectetur adipiscing elit +3. Integer molestie lorem at massa + + +1. You can use sequential numbers... +1. ...or keep all the numbers as `1.` + +Start numbering with offset: + +57. foo +1. bar + + +## Code + +Inline `code` + +Indented code + + // Some comments + line 1 of code + line 2 of code + line 3 of code + + +Block code "fences" + +``` +Sample text here... +``` + +Syntax highlighting + +``` js +var foo = function (bar) { + return bar++; +}; + +console.log(foo(5)); +``` + +## Tables + +| Option | Description | +| ------ | ----------- | +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | + +Right aligned columns + +| Option | Description | +| ------:| -----------:| +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | + + +## Links + +[link text](http://dev.nodeca.com) + +[link with title](http://nodeca.github.io/pica/demo/ "title text!") + +Autoconverted link https://github.com/nodeca/pica (enable linkify to see) + + +## Images + +(note: redacted this section cause images were too big) + +<!-- + + + +Like links, Images also have a footnote style syntax + +![Alt text][id] + +With a reference later in the document defining the URL location: + +[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat" --> + + +## Plugins + +The killer feature of `markdown-it` is very effective support of +[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin). + + +### [Emojies](https://github.com/markdown-it/markdown-it-emoji) + +> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum: +> +> Shortcuts (emoticons): :-) :-( 8-) ;) + +see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji. + + +### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup) + +- 19^th^ +- H~2~O + + +### [\<ins>](https://github.com/markdown-it/markdown-it-ins) + +++Inserted text++ + + +### [\<mark>](https://github.com/markdown-it/markdown-it-mark) + +==Marked text== + + +### [Footnotes](https://github.com/markdown-it/markdown-it-footnote) + +Footnote 1 link[^first]. + +Footnote 2 link[^second]. + +Inline footnote^[Text of inline footnote] definition. + +Duplicated footnote reference[^second]. + +[^first]: Footnote **can have markup** + + and multiple paragraphs. + +[^second]: Footnote text. + + +### [Definition lists](https://github.com/markdown-it/markdown-it-deflist) + +Term 1 + +: Definition 1 +with lazy continuation. + +Term 2 with *inline markup* + +: Definition 2 + + { some code, part of Definition 2 } + + Third paragraph of definition 2. + +_Compact style:_ + +Term 1 + ~ Definition 1 + +Term 2 + ~ Definition 2a + ~ Definition 2b + + +### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr) + +This is HTML abbreviation example. + +It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on. + +*[HTML]: Hyper Text Markup Language + +### [Custom containers](https://github.com/markdown-it/markdown-it-container) + +::: warning +*here be dragons* +::: diff --git a/exampleSite/data/aboutSection.yml b/exampleSite/data/aboutSection.yml index 8545291..d0e6e07 100644 --- a/exampleSite/data/aboutSection.yml +++ b/exampleSite/data/aboutSection.yml @@ -1,10 +1,11 @@ --- enable: true -title: About me -subtitle: +topTitle: About +title: > + ## About me + Enjoy team diversity and increase their networks among others people in various fields by provided. -title2: I design and build ultimate things. content: > ### I design and build ultimate things. diff --git a/exampleSite/data/blogSection.yml b/exampleSite/data/blogSection.yml index 5f4be21..c182830 100644 --- a/exampleSite/data/blogSection.yml +++ b/exampleSite/data/blogSection.yml @@ -1,9 +1,8 @@ --- enable: true topTitle: Blog -title: Recent Article -content: > - # Recent Article +title: > + ## Recent Article Enjoy team diversity and increase their networks among others people in various fields by provided. diff --git a/exampleSite/data/portfolioSection.yml b/exampleSite/data/portfolioSection.yml new file mode 100644 index 0000000..31a1c9f --- /dev/null +++ b/exampleSite/data/portfolioSection.yml @@ -0,0 +1,5 @@ +--- +enable: true +topTitle: My Portfolio +title: > + ## Check Some of My Recent Work diff --git a/exampleSite/data/resumeSection.yml b/exampleSite/data/resumeSection.yml index bd73edc..253cc56 100644 --- a/exampleSite/data/resumeSection.yml +++ b/exampleSite/data/resumeSection.yml @@ -1,17 +1,12 @@ --- enable: true topTitle: My Resume -# Using " " is a way to force extra line breaks. -# See: https://discourse.gohugo.io/t/does-hardlinebreak-works-with-multiple-line-breaks/12522 -content: > - # My Expertises +title: > + ## My Expertises Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore - - - Magna aliquyam erat, sed diam voluptua. At vero eos accusam justo. tab1Name: Education tab2Name: Experiences diff --git a/exampleSite/data/serviceSection.yml b/exampleSite/data/serviceSection.yml index 0d63cb9..c1c235b 100644 --- a/exampleSite/data/serviceSection.yml +++ b/exampleSite/data/serviceSection.yml @@ -1,8 +1,8 @@ --- enable: true topTitle: Working Area -content: > - # Creative Services +title: > + ## Creative Services Enjoy team diversity and increase their networks among others people in various fields by provided. diff --git a/exampleSite/data/skillSection.yml b/exampleSite/data/skillSection.yml index c835562..d8128e4 100644 --- a/exampleSite/data/skillSection.yml +++ b/exampleSite/data/skillSection.yml @@ -2,7 +2,7 @@ enable: true topTitle: My Skills content: > - # Why hire me for your next project? + ## Why hire me for your next project? My goal is to build a strong supportive professional network among all freelancers and startups in order to improve their performance. diff --git a/exampleSite/data/testimonialSection.yml b/exampleSite/data/testimonialSection.yml index 25de72f..fed59e8 100644 --- a/exampleSite/data/testimonialSection.yml +++ b/exampleSite/data/testimonialSection.yml @@ -1,7 +1,8 @@ --- enable: true -topTitle: Testimonial -title: What People are Say About Me? +topTitle: Testimonials +title: > + ## What People are Say About Me? testimonial: - name: Ryan Cook diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index c9d8f11..2655796 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,11 +1,13 @@ <!DOCTYPE html> <html> - {{ partial "head.html" . }} - <body> - {{ partial "header.html" . }} - <div id="content"> - {{ block "main" . }}{{ end }} - </div> - {{ partial "footer.html" . }} - </body> -</html> +{{ partial "head.html" . }} + +<body> + {{ partial "navbar.html" . }} + <div id="content"> + {{ block "main" . }}{{ end }} + </div> + {{ partial "footer.html" . }} +</body> + +</html>
\ No newline at end of file diff --git a/layouts/blog/list.html b/layouts/blog/list.html index d9853a6..90bc98e 100644 --- a/layouts/blog/list.html +++ b/layouts/blog/list.html @@ -36,25 +36,27 @@ </div> </header> -<section class="section blog"> - <div class="container"> - <div class="row"> - {{ range .Paginator.Pages }} - <div class="col-lg-4"> - <div class="blog__item"> - <div class="blog__item-thumb"> - <img src={{ .Params.featureImage | absURL }} alt="post-image"> - </div> - <div class="blog__item-content"> - <span>{{ .PublishDate.Format "January 2, 2006" }}</span> - <a href="{{ .Permalink }}">{{ .Title }}</a> - </div> - </div> - </div> - {{ end }} - {{ partial "pagination" .}} - </div> - </div> +<section class="section blog-page"> + <div class="container"> + <div class="row"> + {{ range .Paginator.Pages }} + <div class="col-lg-4"> + <div class="blog-page__item"> + <div class="blog-page__item-thumb"> + <img src="{{ .Params.featureImage | absURL }}" alt="post-image"> + </div> + <div class="blog-page__item-content bg-white"> + <span class="small">{{ .PublishDate.Format "January 2, 2006" }}</span> + <h5 class="mb-0"> + <a class="text-dark" href="{{ .Permalink }}">{{ .Title }}</a> + </h5> + </div> + </div> + </div> + {{ end }} + {{ partial "pagination" .}} + </div> + </div> </section> {{ end }}
\ No newline at end of file diff --git a/layouts/contact/list.html b/layouts/contact/list.html index 6cc2037..4c7627c 100644 --- a/layouts/contact/list.html +++ b/layouts/contact/list.html @@ -1,39 +1,39 @@ {{ define "main" }} <header class="breadCrumb"> - <div class="svg-img"> - <img src="{{ "images/hero/figure-svg.svg" | absURL }}" alt="bg"> - </div> - <div class="animate-shape"> - <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600"> - <defs> - <linearGradient id="d" x1="0.929" y1="0.111" x2="0.263" y2="0.935" gradientUnits="objectBoundingBox"> - <stop offset="0" stop-color="#f1f6f9" /> - <stop offset="1" stop-color="#f1f6f9" stop-opacity="0" /> - </linearGradient> - </defs> - <g data-name="blob-shape (3)"> - <path class="blob" fill="url(#d)" - d="M455.4 151.1c43.1 36.7 73.4 92.8 60.8 136.3-12.7 43.5-68.1 74.4-111.3 119.4-43.1 45-74 104.1-109.8 109-35.9 5-76.7-44.2-111.8-89.2-35.2-45-64.7-85.8-70.8-132.6-6-46.8 11.6-99.6 46.7-136.3 35.2-36.6 88-57.2 142.4-58.8 54.5-1.7 110.6 15.6 153.8 52.2z" /> - </g> - </svg> - </div> - <div class="animate-pattern"> - <img src="{{ "images/service/background-pattern.svg" | absURL }}" alt="background-shape"> - </div> - <div class="container"> - <div class="row"> - <div class="col-12 text-center"> - <h3 class="breadCrumb__title">{{ .Title }}</h3> - <nav aria-label="breadcrumb" class="d-flex justify-content-center"> - <ol class="breadcrumb align-items-center"> - <li class="breadcrumb-item"><a href="{{ .Site.BaseURL }}">Home</a></li> - <li class="breadcrumb-item active" aria-current="page">{{ .Params.breadcrumb }}</li> - </ol> - </nav> - </div> - </div> - </div> + <div class="svg-img"> + <img src="{{ "images/hero/figure-svg.svg" | absURL }}" alt="bg"> + </div> + <div class="animate-shape"> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600"> + <defs> + <linearGradient id="d" x1="0.929" y1="0.111" x2="0.263" y2="0.935" gradientUnits="objectBoundingBox"> + <stop offset="0" stop-color="#f1f6f9" /> + <stop offset="1" stop-color="#f1f6f9" stop-opacity="0" /> + </linearGradient> + </defs> + <g data-name="blob-shape (3)"> + <path class="blob" fill="url(#d)" + d="M455.4 151.1c43.1 36.7 73.4 92.8 60.8 136.3-12.7 43.5-68.1 74.4-111.3 119.4-43.1 45-74 104.1-109.8 109-35.9 5-76.7-44.2-111.8-89.2-35.2-45-64.7-85.8-70.8-132.6-6-46.8 11.6-99.6 46.7-136.3 35.2-36.6 88-57.2 142.4-58.8 54.5-1.7 110.6 15.6 153.8 52.2z" /> + </g> + </svg> + </div> + <div class="animate-pattern"> + <img src="{{ "images/service/background-pattern.svg" | absURL }}" alt="background-shape"> + </div> + <div class="container"> + <div class="row"> + <div class="col-12 text-center"> + <h3 class="breadCrumb__title">{{ .Title }}</h3> + <nav aria-label="breadcrumb" class="d-flex justify-content-center"> + <ol class="breadcrumb align-items-center"> + <li class="breadcrumb-item"><a href="{{ .Site.BaseURL }}">Home</a></li> + <li class="breadcrumb-item active" aria-current="page">{{ .Params.breadcrumb }}</li> + </ol> + </nav> + </div> + </div> + </div> </header> {{ $address := .Site.Params.address }} @@ -44,17 +44,10 @@ <div class="contact__info_item"> <div class="contact__info_item-icon"> <div class="icon-background"> - <svg - xmlns="http://www.w3.org/2000/svg" - width="122.457" - height="109.702" - viewBox="0 0 122.457 109.702" - > - <path - fill="#f1f6f9" + <svg xmlns="http://www.w3.org/2000/svg" width="122.457" height="109.702" viewBox="0 0 122.457 109.702"> + <path fill="#f1f6f9" d="M49.855527 9.984102c-4.337424-.815024-8.766002-1.633779-13.152776-1.113889-8.196034.975107-15.344329 6.696991-19.41555 13.879649s-5.363288 15.655094-5.187042 23.907191c.156996 7.385448 1.479849 14.875357 4.972905 21.38465s9.337384 11.961229 16.458344 13.922244c4.833752 1.331211 10.056683 1.044827 14.74081 2.829827 7.560693 2.881382 12.209757 10.489626 19.01235 14.870016a25.650039 25.650039 0 0024.16316 1.698928c8.342551-3.846451 14.03857-12.107291 16.641338-20.918947s2.471077-18.187687 1.756125-27.346305c-.843101-10.912846-3.01686-22.783019-11.354287-29.869462-6.037066-5.130853-14.208558-6.772976-21.995428-8.235353z" - data-name="Path 1354" - /> + data-name="Path 1354" /> </svg> </div> <div class="icon"> @@ -71,17 +64,10 @@ <div class="contact__info_item"> <div class="contact__info_item-icon"> <div class="icon-background"> - <svg - xmlns="http://www.w3.org/2000/svg" - width="122.457" - height="109.702" - viewBox="0 0 122.457 109.702" - > - <path - fill="#f1f6f9" + <svg xmlns="http://www.w3.org/2000/svg" width="122.457" height="109.702" viewBox="0 0 122.457 109.702"> + <path fill="#f1f6f9" d="M49.855527 9.984102c-4.337424-.815024-8.766002-1.633779-13.152776-1.113889-8.196034.975107-15.344329 6.696991-19.41555 13.879649s-5.363288 15.655094-5.187042 23.907191c.156996 7.385448 1.479849 14.875357 4.972905 21.38465s9.337384 11.961229 16.458344 13.922244c4.833752 1.331211 10.056683 1.044827 14.74081 2.829827 7.560693 2.881382 12.209757 10.489626 19.01235 14.870016a25.650039 25.650039 0 0024.16316 1.698928c8.342551-3.846451 14.03857-12.107291 16.641338-20.918947s2.471077-18.187687 1.756125-27.346305c-.843101-10.912846-3.01686-22.783019-11.354287-29.869462-6.037066-5.130853-14.208558-6.772976-21.995428-8.235353z" - data-name="Path 1354" - /> + data-name="Path 1354" /> </svg> </div> <div class="icon"> @@ -89,25 +75,20 @@ </div> </div> <h4>Phone & Email</h4> - <p>{{ $address.phone }}</p> - <a href="mailto:{{ $address.email }}">{{ $address.email }}</a> + <p>{{ $address.phone }}<br> + <a href="mailto:{{ $address.email }}">{{ $address.email }}</a> + </p> + </div> </div> <div class="col-lg-4"> <div class="contact__info_item"> <div class="contact__info_item-icon"> <div class="icon-background"> - <svg - xmlns="http://www.w3.org/2000/svg" - width="122.457" - height="109.702" - viewBox="0 0 122.457 109.702" - > - <path - fill="#f1f6f9" + <svg xmlns="http://www.w3.org/2000/svg" width="122.457" height="109.702" viewBox="0 0 122.457 109.702"> + <path fill="#f1f6f9" d="M49.855527 9.984102c-4.337424-.815024-8.766002-1.633779-13.152776-1.113889-8.196034.975107-15.344329 6.696991-19.41555 13.879649s-5.363288 15.655094-5.187042 23.907191c.156996 7.385448 1.479849 14.875357 4.972905 21.38465s9.337384 11.961229 16.458344 13.922244c4.833752 1.331211 10.056683 1.044827 14.74081 2.829827 7.560693 2.881382 12.209757 10.489626 19.01235 14.870016a25.650039 25.650039 0 0024.16316 1.698928c8.342551-3.846451 14.03857-12.107291 16.641338-20.918947s2.471077-18.187687 1.756125-27.346305c-.843101-10.912846-3.01686-22.783019-11.354287-29.869462-6.037066-5.130853-14.208558-6.772976-21.995428-8.235353z" - data-name="Path 1354" - /> + data-name="Path 1354" /> </svg> </div> <div class="icon"> @@ -123,59 +104,84 @@ </div> </div> </section> + <section class="contact-form"> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="contact-form-title"> - <h4>Contact Form</h4> + <h3>Contact Form</h3> </div> <div class="contact-form-input"> <form id="contact-form" action="{{ .Site.Params.formspreeURL }}" method="POST"> + <div class="form-row"> + <div class="form-group col-md-6 pr-3"> - <input - type="text" - class="form-control" - name="Name" - placeholder="Name" - required - /> + <input type="text" class="form-control" name="Name" placeholder="Name" required /> </div> <div class="form-group col-md-6"> - <input - type="email" - class="form-control" - name="email" - placeholder="Email" - required - /> + <input type="email" class="form-control" name="email" placeholder="Email" required /> </div> </div> + <div class="form-group"> - <textarea - class="form-control" - id="exampleFormControlTextarea1" - rows="6" - name="message" - placeholder="Message" - ></textarea> + <textarea class="form-control" id="message" rows="6" name="message" placeholder="Message"></textarea> </div> - <div class="form-check"> - <input type="checkbox" class="form-check-input" name="agreement" id="aggrement" required /> - <label class="form-check-label" for="aggrement"> - I agree that my submitted data is being collected and - stored.</label - > + + <div class="form-group"> + <div class="form-check small"> + <input type="checkbox" class="form-check-input" name="agreement" id="aggrement" required /> + <label class="form-check-label" for="aggrement"> + I agree that my submitted data is being collected and + stored.</label> + </div> </div> - <button type="submit" class="btn contact-form-btn" id="contact-form-button">Send Message</button> + + <button type="submit" class="btn btn-primary btn-zoom" id="contact-form-button">Send Message</button> <p id="contact-form-status" class="mt-3"></p> </form> + + <!-- <form> + <div class="form-row"> + <div class="form-group col-md-6"> + <label for="inputEmail4">Email</label> + <input type="email" class="form-control" id="inputEmail4" placeholder="Email"> + </div> + <div class="form-group col-md-6"> + <label for="inputPassword4">Password</label> + <input type="password" class="form-control" id="inputPassword4" placeholder="Password"> + </div> + </div> + <div class="form-group"> + <label for="inputAddress">Address</label> + <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> + </div> + <div class="form-group"> + <label for="inputAddress2">Address 2</label> + <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> + </div> + + <div class="form-group"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" id="gridCheck"> + <label class="form-check-label" for="gridCheck"> + I agree that my submitted data is being collected and + stored. + </label> + </div> + </div> + <button type="submit" class="btn btn-primary">Sign in</button> + </form> --> + + + </div> </div> <div class="col-lg-6"> {{ $map := .Site.Params.map }} - <div id="map" data-lat={{ $map.latitude }} data-long={{ $map.longitude }} data-pin={{ $map.pinImage | absURL }}></div> + <div id="map" data-lat={{ $map.latitude }} data-long={{ $map.longitude }} data-pin={{ $map.pinImage | absURL }}> + </div> </div> </div> </div> diff --git a/layouts/index.html b/layouts/index.html index 1883df2..78b63d2 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -6,7 +6,7 @@ {{ partial "serviceSection.html" . }} -{{ partial "caseStudySection.html" . }} +{{ partial "portfolioSection.html" . }} {{ partial "resumeSection.html" . }} diff --git a/layouts/partials/aboutSection.html b/layouts/partials/aboutSection.html index 2772686..0001da7 100644 --- a/layouts/partials/aboutSection.html +++ b/layouts/partials/aboutSection.html @@ -4,10 +4,9 @@ <div class="container"> <div class="row text-center"> <div class="col-lg-6 offset-lg-3"> - <div class="about_header"> - <span>About</span> - <h1> {{ .title }} </h1> - <p> {{ .subtitle }} </p> + <div class="about_header mb-5"> + <span class="top-title">{{ .topTitle }}</span> + {{ .title | markdownify}} </div> </div> </div> @@ -40,15 +39,15 @@ </g> </svg> </div> - {{ .content | markdownify}} - <ul> - <li><a class="btn btn-primary btn-zoom" - href="{{ .button1Target | absURL }}">{{ .button1Name }}</a> - </li> - <li><a class="btn btn-outline-primary btn-zoom" href="{{ .button2Target | absURL }}"> - {{ .button2Name }} </a> - </li> - </ul> + <div class="mb-4 text-light"> + {{ .content | markdownify}} + </div> + <div> + <a class="btn btn-primary mr-3 btn-zoom" + href="{{ .button1Target | absURL }}">{{ .button1Name }}</a> + <a class="btn btn-outline-primary btn-zoom" href="{{ .button2Target | absURL }}"> + {{ .button2Name }} </a> + </div> </div> </div> </div> diff --git a/layouts/partials/blogSection.html b/layouts/partials/blogSection.html index 62561da..c020e48 100644 --- a/layouts/partials/blogSection.html +++ b/layouts/partials/blogSection.html @@ -1,47 +1,49 @@ {{ with .Site.Data.blogSection }} {{ if .enable }} -<section class="section blog" id="blog"> - <div class="blog__shape"> - <img src="images/blog/blog-shape.svg" alt="blog shape" /> - </div> - <div class="container"> - <div class="row mb-5"> - <div class="col-lg-6"> - <div class="blog__header"> - <span>{{ .topTitle }}</span> - {{ .content | markdownify }} - </div> - </div> - <div class="col-lg-6"> - <div class="blog__header_button desktop"> - <a class="btn btn-outline-secondary btn-zoom" href="{{ .buttonTarget | absURL }}">See all post</a> - </div> - </div> - </div> +<section class="section blog-preview" id="blog"> + <div class="blog-preview__shape"> + <img src="images/blog/blog-shape.svg" alt="blog shape" /> + </div> + <div class="container"> + <div class="row mb-5"> + <div class="col-lg-6"> + <div class="blog-preview__header"> + <span class="top-title pre-line">{{ .topTitle }}</span> + {{ .title | markdownify }} + </div> + </div> + <div class="col-lg-6"> + <div class="blog-preview__header_button desktop"> + <a class="btn btn-outline-secondary btn-zoom m-3" href="{{ .buttonTarget | absURL }}">See all post</a> + </div> + </div> + </div> - <div class="row"> - {{ range first 3 (where $.Site.RegularPages "Type" "!=" "portfolio") }} - <div class="col-lg-4"> - <div class="blog__item"> - <div class="blog__item-thumb"> - <img src="{{ .Params.featureImage | absURL }}" alt="post-image"> - </div> - <div class="blog__item-content"> - <span>{{ .PublishDate.Format "January 2, 2006" }}</span> - <a href="{{ .Permalink }}">{{ .Title }}</a> - </div> - </div> - </div> - {{ end }} + <div class="row"> + {{ range first 3 (where $.Site.RegularPages "Type" "!=" "portfolio") }} + <div class="col-lg-4"> + <div class="blog-preview__item"> + <div class="blog-preview__item-thumb"> + <img src="{{ .Params.featureImage | absURL }}" alt="post-image"> + </div> + <div class="blog-preview__item-content bg-white"> + <span class="small">{{ .PublishDate.Format "January 2, 2006" }}</span> + <h5 class="mb-0"> + <a class="text-dark" href="{{ .Permalink }}">{{ .Title }}</a> + </h5> + </div> + </div> + </div> + {{ end }} - </div> - <div class="row"> - <div class="col-lg-12"> - <div class="blog__header_button mobile"> - <a class="btn btn-outline-secondary btn-zoom" href="{{ .buttonTarget | absURL }}">See all post</a> - </div> - </div> - </div> - </div> + </div> + <div class="row"> + <div class="col-lg-12"> + <div class="blog-preview__header_button mobile"> + <a class="btn btn-outline-secondary btn-zoom" href="{{ .buttonTarget | absURL }}">See all post</a> + </div> + </div> + </div> + </div> </section> {{ end }} {{ end }}
\ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index c8d5440..966ec50 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,88 +1,91 @@ -<section class="contact" id="contact"> - <div class="contact__background_shape"> - <svg viewBox="0 0 1920 79"> - <path d="M0 0h1920v79L0 0z" data-name="Path 1450" /> - </svg> - </div> - <div class="container"> - <div class="row"> - <div class="col-lg-12"> - <div class="contact__cta"> - <div class="shape-1"> - <svg xmlns="http://www.w3.org/2000/svg" width="357" height="315.029" viewBox="0 0 357 315.029"> - <path data-name="Path 1449" - d="M76.1-157.222C91.746-135.8 87.2-94.273 99.993-61.945c12.7 32.328 42.661 55.459 39.248 73.282-3.318 17.823-40.007 30.337-65.6 43.325-25.5 12.988-39.912 26.545-60.01 42.566-20.1 16.116-46.074 34.6-63.328 27.682-17.349-6.921-25.976-39.153-59.915-59.82s-93.1-29.768-105.325-51.478 22.373-56.028 43.609-93.949c21.331-37.921 29.2-79.35 53.563-96.793 24.459-17.444 65.414-10.9 103.9-6.921 38.396 3.982 74.326 5.404 89.965 26.829z" - transform="translate(217.489 188.626)" /> - </svg> - </div> - <div class="shape-2"> - <svg xmlns="http://www.w3.org/2000/svg" width="357" height="315.029" viewBox="0 0 357 315.029"> - <path data-name="Path 1449" - d="M76.1-157.222C91.746-135.8 87.2-94.273 99.993-61.945c12.7 32.328 42.661 55.459 39.248 73.282-3.318 17.823-40.007 30.337-65.6 43.325-25.5 12.988-39.912 26.545-60.01 42.566-20.1 16.116-46.074 34.6-63.328 27.682-17.349-6.921-25.976-39.153-59.915-59.82s-93.1-29.768-105.325-51.478 22.373-56.028 43.609-93.949c21.331-37.921 29.2-79.35 53.563-96.793 24.459-17.444 65.414-10.9 103.9-6.921 38.396 3.982 74.326 5.404 89.965 26.829z" - transform="translate(217.489 188.626)" /> - </svg> - </div> - <div class="contact__cta_content"> - <span>Contact me</span> - <h1>Let’s Start a Project</h1> - </div> - <div class="contact__cta_action"> - <a class="btn btn-light btn-zoom" href="{{ .Site.Params.contactLink | absURL }}">Get in - touch</a> - </div> - </div> - </div> - </div> - <div class="row contact__widget"> - <div class="col-lg-4"> - <div class="contact__widget_logo"> - <img src="{{ .Site.Params.footerLogo | absURL }}" alt="widget-logo"> - </div> - </div> - <div class="col-lg-4"> - <div class="contact__widget_sitemap"> - <h3>Sitemap</h3> - <ul> - {{ $sitemap := .Site.Menus.sitemap }} - {{ range $sitemap }} - <li><a href="{{ .URL | absURL }}">{{ .Name }}</a></li> - {{ end }} - </ul> - </div> - </div> - <div class="col-lg-4"> - <div class="contact__widget_address"> - <h3>Address</h3> - {{ $address := .Site.Params.address }} - <ul> - <li><a href="tel:{{ $address.phone }}"><i class="fa fa-phone"></i>{{ $address.phone }}</a></li> - <li><a href="mailto:{{ $address.email }}"><i class="fa fa-envelope"></i>{{ $address.email }}</a> - </li> - <li> - <p><i class="fa fa-map-marker"></i>{{ $address.address }}</p> - </li> - </ul> - </div> - </div> - </div> - <div class="row contact__footer"> - <div class="col-lg-6"> - <div class="contact__footer_copy"> - <p>{{ .Site.Params.copyright }}</p> - </div> - </div> - <div class="col-lg-6"> - <div class="contact__footer_social"> - <ul> - <li><a href=""><i class="fa fa-facebook-official"></i></a></li> - <li><a href=""><i class="fa fa-linkedin-square"></i></a></li> - <li><a href=""><i class="fa fa-pinterest-square"></i></a></li> - <li><a href=""><i class="fa fa-twitter"></i></a></li> - </ul> - </div> - </div> - </div> - </div> +<section class="footer" id="contact"> + <div class="footer__background_shape"> + <svg viewBox="0 0 1920 79"> + <path d="M0 0h1920v79L0 0z" data-name="Path 1450" /> + </svg> + </div> + <div class="container"> + <div class="row"> + <div class="col-lg-12"> + <div class="footer__cta"> + <div class="shape-1"> + <svg xmlns="http://www.w3.org/2000/svg" width="357" height="315.029" viewBox="0 0 357 315.029"> + <path data-name="Path 1449" + d="M76.1-157.222C91.746-135.8 87.2-94.273 99.993-61.945c12.7 32.328 42.661 55.459 39.248 73.282-3.318 17.823-40.007 30.337-65.6 43.325-25.5 12.988-39.912 26.545-60.01 42.566-20.1 16.116-46.074 34.6-63.328 27.682-17.349-6.921-25.976-39.153-59.915-59.82s-93.1-29.768-105.325-51.478 22.373-56.028 43.609-93.949c21.331-37.921 29.2-79.35 53.563-96.793 24.459-17.444 65.414-10.9 103.9-6.921 38.396 3.982 74.326 5.404 89.965 26.829z" + transform="translate(217.489 188.626)" /> + </svg> + </div> + <div class="shape-2"> + <svg xmlns="http://www.w3.org/2000/svg" width="357" height="315.029" viewBox="0 0 357 315.029"> + <path data-name="Path 1449" + d="M76.1-157.222C91.746-135.8 87.2-94.273 99.993-61.945c12.7 32.328 42.661 55.459 39.248 73.282-3.318 17.823-40.007 30.337-65.6 43.325-25.5 12.988-39.912 26.545-60.01 42.566-20.1 16.116-46.074 34.6-63.328 27.682-17.349-6.921-25.976-39.153-59.915-59.82s-93.1-29.768-105.325-51.478 22.373-56.028 43.609-93.949c21.331-37.921 29.2-79.35 53.563-96.793 24.459-17.444 65.414-10.9 103.9-6.921 38.396 3.982 74.326 5.404 89.965 26.829z" + transform="translate(217.489 188.626)" /> + </svg> + </div> + <div class="text-light footer__cta_content"> + <span>Contact me</span> + <h2 class="mb-0">Let’s Start a Project</h2> + </div> + <div class="footer__cta_action"> + <a class="btn btn-light btn-zoom" href="{{ .Site.Params.contactLink | absURL }}">Get in + touch</a> + </div> + </div> + </div> + </div> + <div class="row footer__widget"> + <div class="col-lg-4"> + <div class="footer__widget_logo mb-5"> + <img src="{{ .Site.Params.footerLogo | absURL }}" alt="widget-logo"> + </div> + </div> + <div class="col-lg-4"> + <div class="text-light footer__widget_sitemap mb-5"> + <h4 class="base-font">Sitemap</h4> + <ul class="unstyle-list small"> + {{ $sitemap := .Site.Menus.sitemap }} + {{ range $sitemap }} + <li class="mb-2"><a class="text-light" href="{{ .URL | absURL }}">{{ .Name }}</a></li> + {{ end }} + </ul> + </div> + </div> + <div class="col-lg-4"> + <div class="text-light footer__widget_address mb-5"> + <h4 class="base-font">Address</h4> + {{ $address := .Site.Params.address }} + <ul class="fa-ul small"> + <li class="mb-2"><a class="text-light" href="tel:{{ $address.phone }}"><span class="fa-li"><i + class="fa fa-phone"></i></span>{{ $address.phone }}</a></li> + <li class="mb-2"><a class="text-light" href="mailto:{{ $address.email }}"><span class="fa-li"><i + class="fa fa-envelope"></i></span>{{ $address.email }}</a></li> + <li class="mb-2"> + <span class="fa-li"><i class="fa fa-map-marker"></i></span>{{ $address.address }}</a> + </li> + </ul> + </div> + </div> + </div> + <div class="row footer__footer"> + <div class="col-lg-6"> + <div class="footer__footer_copy text-light"> + <p>{{ .Site.Params.copyright }}</p> + </div> + </div> + <div class="col-lg-6"> + <div class="footer__footer_social"> + <ul class="unstyle-list"> + {{ $social := .Site.Params.social }} + {{ range $social }} + <li class="d-inline-block mx-2"><a class="text-light" target="_blank" href="{{ .url }}"><i + class="fa {{ .icon }}"></i></a> + </li> + {{ end }} + </ul> + </div> + </div> + </div> + </div> </section> <script src="https://maps.googleapis.com/maps/api/js?key={{ .Site.Params.map.APIkey }}&libraries=geometry"></script> <script src="{{ "plugins/jQuery/jquery.min.js" | absURL }}"></script> diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html index 580d259..cd389e1 100644 --- a/layouts/partials/hero.html +++ b/layouts/partials/hero.html @@ -27,11 +27,10 @@ </g> </svg> </div> - <div> - <span>{{ .topTitle }}</span> + <div class="mb-5"> + <span class="top-title pre-line">{{ .topTitle }}</span> {{ .content | markdownify }} </div> - <p></p> <!-- I'm unsure why this <p> is needed --> <a type="button" class="btn btn-lg btn-primary btn-zoom" href="{{ .buttonURL | absURL }}">{{ .buttonName }}</a> </div> @@ -51,10 +50,10 @@ <div class="thumb"> <img src="{{ .videoThumb }}" alt="popup" /> </div> - <a href="{{ .videoURL }}" type="button" class="popup-button"> + + <a href="{{ .videoURL }}" type="button" class="popup-button text-center big"> <svg xmlns="http://www.w3.org/2000/svg" width="21" height="24" viewBox="0 0 21 24"> - <path fill="#5d78ff" - d="M17.961 10.264a2 2 0 010 3.473L2.992 22.29A2 2 0 010 20.554V3.446A2 2 0 012.992 1.71z" + <path d="M17.961 10.264a2 2 0 010 3.473L2.992 22.29A2 2 0 010 20.554V3.446A2 2 0 012.992 1.71z" data-name="Polygon 4" /> </svg> </a> diff --git a/layouts/partials/header.html b/layouts/partials/navbar.html index 8e31d9f..e7d28bf 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/navbar.html @@ -10,11 +10,12 @@ </button> <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse"> - <ul class="nav navbar-nav main-navigation"> + <ul class="nav navbar-nav main-navigation my-0 mx-auto"> {{ $menu := .Site.Menus.main }} {{ range $index, $element := $menu }} <li class="nav-item"> - <a href="{{ $.Site.BaseURL }}{{ .URL }}" class="nav-link {{ if $.IsHome }}scroll{{ end }}">{{ .Name }}</a> + <a href="{{ $.Site.BaseURL }}{{ .URL }}" + class="nav-link text-dark text-sm-center p-2 {{ if $.IsHome }}scroll{{ end }}">{{ .Name }}</a> </li> {{ end }} </ul> diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html index 5893e21..3175d73 100644 --- a/layouts/partials/pagination.html +++ b/layouts/partials/pagination.html @@ -1,33 +1,27 @@ {{ $pag := $.Paginator }} {{ if gt $pag.TotalPages 1 }} - <div class="blog__pagination"> - <div class="pagination"> - {{ range $pag.Pagers }} - {{ if eq . $pag }} - <li class="active"> - <a href="{{ .URL }}">{{ .PageNumber }}</a> - </li> - {{ else }} - <li> - <a href="{{ .URL }}">{{ .PageNumber }}</a> - </li> - {{ end }} - {{ end }} +<nav aria-label="Page navigation" class="w-100"> + <ul class="pagination justify-content-center pagination-lg"> + {{ range $pag.Pagers }} + {{ if eq . $pag }} + <li class="page-item active"> + <a class="page-link" href="{{ .URL }}">{{ .PageNumber }}</a> + </li> + {{ else }} + <li class="page-item"> + <a class="page-link" href="{{ .URL }}">{{ .PageNumber }}</a> + </li> + {{ end }} + {{ end }} - {{ if $pag.HasNext }} - <li class="page-item"> - <a href="{{ $pag.Next.URL }}" rel="next" class="page-link"> - <svg xmlns="http://www.w3.org/2000/svg" width="20.657" height="11.314" viewBox="0 0 20.657 11.314"> - <g fill="#fff" data-name="Group 12"> - <path d="M0 4.657h18v2H0z" data-name="Rectangle 2400"/> - <path d="M13.586 9.9l5.6568542-5.6568542 1.4142136 1.4142135-5.6568542 5.6568543z" data-name="Rectangle 2401"/> - <path d="M15 0l5.6568542 5.6568542-1.4142135 1.4142136-5.6568543-5.6568542z" data-name="Rectangle 2402"/> - </g> - </svg> - </a> - </li> - {{ end }} - </div> - <!-- </nav> --> - </div> + {{ if $pag.HasNext }} + <li class="page-item"> + <a class="page-link" href="{{ $pag.Next.URL }}" rel="next"> + → + </a> + </li> + {{ end }} + </ul> + <!-- </nav> --> +</nav> {{ end }}
\ No newline at end of file diff --git a/layouts/partials/caseStudySection.html b/layouts/partials/portfolioSection.html index efc4b2c..8a321b5 100644 --- a/layouts/partials/caseStudySection.html +++ b/layouts/partials/portfolioSection.html @@ -1,10 +1,12 @@ +{{ with .Site.Data.portfolioSection }} +{{ if .enable }} <section class="section portfolio" id="portfolio"> <div class="container"> <div class="row text-center"> <div class="col-lg-6 offset-lg-3"> - <div class="portfolio__header"> - <span>My Portfolio</span> - <h1>Check Some of Our Recent Work.</h1> + <div class="portfolio__header mb-5"> + <span class="top-title">{{ .topTitle }}</span> + {{ .title | markdownify }} </div> </div> </div> @@ -16,10 +18,8 @@ <img src="{{ .Params.thumbnail }}" class="portfolio-item-thumb" alt="portfolio-thumb" /> <div class="portfolio-item-content"> <span>{{ .Params.service }}</span> - <h3> - <a href="{{ .Permalink }}" - >{{ .Title }}</a - > + <h3 class="mb-0"> + <a class="text-dark" href="{{ .Permalink }}">{{ .Title }}</a> </h3> <a class="see-more-btn" href="{{ .Permalink }}">See details</a> </div> @@ -29,4 +29,6 @@ </div> </div> </div> -</section>
\ No newline at end of file +</section> +{{ end }} +{{ end }}
\ No newline at end of file diff --git a/layouts/partials/resumeSection.html b/layouts/partials/resumeSection.html index 44b1dfa..7b5d44b 100644 --- a/layouts/partials/resumeSection.html +++ b/layouts/partials/resumeSection.html @@ -6,14 +6,15 @@ <div class="row"> <div class="col-lg-6"> <div class="resume__heading"> - <span>{{ .topTitle }}</span> - {{ .content | markdownify }} - <ul class="btn-group nav nav-tabs"> - <li><a href="#{{.tab1Target}}" class="btn btn-primary active" - data-toggle="tab">{{ .tab1Name }}</a></li> - <li><a href="#{{.tab2Target}}" class="btn btn-primary" data-toggle="tab">{{ .tab2Name }}</a> - </li> - </ul> + <div class="text-light"> + <span class="top-title pre-line">{{ .topTitle }}</span> + {{ .title | markdownify }} + </div> + + <div class="btn-group nav mt-5"> + <a href="#{{.tab1Target}}" class="btn btn-primary active" data-toggle="tab">{{ .tab1Name }}</a> + <a href="#{{.tab2Target}}" class="btn btn-primary" data-toggle="tab">{{ .tab2Name }}</a> + </div> </div> </div> <div class="col-lg-6"> @@ -22,7 +23,7 @@ {{ $Section := .education }} {{ range $Section }} <div class="resume__education_item"> - <span> {{ .time }} </span> + <span class="pre-line text-primary"> {{ .time }} </span> {{ .content | markdownify }} </div> {{ end }} @@ -33,7 +34,7 @@ {{ $Section := .experience }} {{ range $Section }} <div class="resume__education_item"> - <span> {{ .time }} </span> + <span class="pre-line text-primary"> {{ .time }} </span> {{ .content | markdownify }} </div> {{ end }} diff --git a/layouts/partials/serviceSection.html b/layouts/partials/serviceSection.html index bad77cb..f414575 100644 --- a/layouts/partials/serviceSection.html +++ b/layouts/partials/serviceSection.html @@ -29,9 +29,9 @@ <div class="container"> <div class="row"> <div class="col-lg-6 col-md-12 col-sm-12"> - <div class="service__header"> - <span>{{ .topTitle }}</span> - {{ .content | markdownify }} + <div class="service__header mb-5"> + <span class="top-title pre-line">{{ .topTitle }}</span> + {{ .title | markdownify }} </div> </div> </div> @@ -54,7 +54,9 @@ <img src=" {{ .image | absURL }} " alt="ui-ux"> </div> </div> - {{ .content | markdownify }} + <div class="mt-5"> + {{ .content | markdownify }} + </div> </div> {{ end }} </div> diff --git a/layouts/partials/skillSection.html b/layouts/partials/skillSection.html index 7091b29..1bd58bc 100644 --- a/layouts/partials/skillSection.html +++ b/layouts/partials/skillSection.html @@ -37,15 +37,15 @@ </div> <div class="col-lg-6"> <div class="skill__progress"> - <div class="skill__progress_heading"> - <span>{{ .topTitle }}</span> + <div class="skill__progress_heading mb-5"> + <span class="top-title pre-line">{{ .topTitle }}</span> {{ .content | markdownify }} </div> {{ $section := .skill }} {{ range $section }} <div class="skill__progress_item"> - <h6> {{ .title }} </h6> - <div class="progress-value"><span>{{ .percent }}</span>%</div> + <span class="d-inline-block text-dark"> {{ .title }} </span> + <div class="progress-value float-right"><span>{{ .percent }}</span>%</div> <div class="progress"> <div class="progress-bar" style="width:{{ .percent }}%;" aria-valuemin="0" aria-valuemax="{{ .percent }}"></div> diff --git a/layouts/partials/testimonialSection.html b/layouts/partials/testimonialSection.html index 1d897e1..0c3da60 100644 --- a/layouts/partials/testimonialSection.html +++ b/layouts/partials/testimonialSection.html @@ -10,8 +10,8 @@ <div class="row text-center"> <div class="col-lg-6 offset-lg-3"> <div class="testimonial__header"> - <span>{{ .topTitle }}</span> - <h1>{{ .title }}</h1> + <span class="top-title">{{ .topTitle }}</span> + {{ .title | markdownify }} </div> </div> </div> diff --git a/layouts/portfolio/single.html b/layouts/portfolio/single.html index 42daa24..e0d8bae 100644 --- a/layouts/portfolio/single.html +++ b/layouts/portfolio/single.html @@ -5,30 +5,16 @@ <img src="{{ "images/hero/figure-svg.svg" | absURL }}" alt="" /> </div> <div class="animate-shape"> - <svg - xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink" - viewBox="0 0 600 600" - > + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600"> <defs> - <linearGradient - id="d" - x1="0.929" - y1="0.111" - x2="0.263" - y2="0.935" - gradientUnits="objectBoundingBox" - > + <linearGradient id="d" x1="0.929" y1="0.111" x2="0.263" y2="0.935" gradientUnits="objectBoundingBox"> <stop offset="0" stop-color="#f1f6f9" /> <stop offset="1" stop-color="#f1f6f9" stop-opacity="0" /> </linearGradient> </defs> <g data-name="blob-shape (3)"> - <path - class="blob" - fill="url(#d)" - d="M455.4 151.1c43.1 36.7 73.4 92.8 60.8 136.3-12.7 43.5-68.1 74.4-111.3 119.4-43.1 45-74 104.1-109.8 109-35.9 5-76.7-44.2-111.8-89.2-35.2-45-64.7-85.8-70.8-132.6-6-46.8 11.6-99.6 46.7-136.3 35.2-36.6 88-57.2 142.4-58.8 54.5-1.7 110.6 15.6 153.8 52.2z" - /> + <path class="blob" fill="url(#d)" + d="M455.4 151.1c43.1 36.7 73.4 92.8 60.8 136.3-12.7 43.5-68.1 74.4-111.3 119.4-43.1 45-74 104.1-109.8 109-35.9 5-76.7-44.2-111.8-89.2-35.2-45-64.7-85.8-70.8-132.6-6-46.8 11.6-99.6 46.7-136.3 35.2-36.6 88-57.2 142.4-58.8 54.5-1.7 110.6 15.6 153.8 52.2z" /> </g> </svg> </div> @@ -36,7 +22,7 @@ <img src="{{ "images/service/background-pattern.svg" | absURL }}" alt="background-shape" /> </div> <div class="container"> - <div class="row"> + <div class="row mb-5"> <div class="col-lg-10 offset-lg-1 text-center"> <div class="case-details-title"> <h1>{{ .Title }}</h1> @@ -46,7 +32,7 @@ </p> <div class="case-details-info"> <div class="case-details-info-item"> - <h5>Client</h5> + <h5 class="text-light">Client</h5> <p>{{ .Params.client }}</p> </div> <div class="case-details-info-item"> @@ -58,7 +44,7 @@ <p>{{ .PublishDate.Format "January 2, 2006" }}</p> </div> </div> - <div class="row"> + <div class="row mb-5"> <div class="col-lg-6"> <div class="case-details-service"> <h3>Challenge</h3> @@ -76,7 +62,7 @@ </div> </div> </div> - <div class="case-details-thumb"> + <div class="case-details-thumb mb-5"> <img src="{{ .Params.thumbnail | absURL }}" alt="case-details" /> </div> {{ .Content }} @@ -84,80 +70,60 @@ </div> <div class="row"> <div class="col-lg-10 offset-lg-1"> - <div class="case-details-nav"> + <nav class="case-details-nav d-flex justify-content-between align-items-center"> {{ if .PrevInSection }} - <div class="previous"> - <div class="icon"> - <svg - xmlns="http://www.w3.org/2000/svg" - width="15.556" - height="28.285" - viewBox="0 0 15.556 28.285" - > + <div class="previous d-flex align-items-center"> + <div class="icon mr-3"> + <svg xmlns="http://www.w3.org/2000/svg" width="15.556" height="28.285" viewBox="0 0 15.556 28.285"> <g data-name="Group 1243" fill="#2d2d2d"> - <path - data-name="Path 1456" - d="M3.391 12.728l9.75 14.142-.982 1.414-9.742-14.142z" - /> - <path - data-name="Path 1455" - d="M13.137 1.41L3.39 15.558l-.975-1.415L12.166 0z" - /> + <path data-name="Path 1456" d="M3.391 12.728l9.75 14.142-.982 1.414-9.742-14.142z" /> + <path data-name="Path 1455" d="M13.137 1.41L3.39 15.558l-.975-1.415L12.166 0z" /> </g> </svg> </div> <div class="content"> - <span>Prev case</span> - <h5 class="title"><a href="{{ .PrevInSection.Permalink }}">{{ .PrevInSection.Title }}</a></h5> + <span class="small">Prev case</span> + <h5 class="title"><a class="text-dark" + href="{{ .PrevInSection.Permalink }}">{{ .PrevInSection.Title }}</a></h5> </div> </div> {{ end }} <div class="social"> {{ $url := printf "%s" .Permalink | absLangURL }} - <ul> + <ul class="unstyle-list big"> <li> - <a href="https://www.facebook.com/sharer/sharer.php?u={{ $url }}"><i class="fa fa-facebook-official"></i></a> + <a href=" https://www.facebook.com/sharer/sharer.php?u={{ $url }}"><i + class="fa fa-facebook-official btn-zoom"></i></a> </li> <li> - <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ $url }}"><i class="fa fa-linkedin-square"></i></a> + <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ $url }}"><i + class="fa fa-linkedin-square btn-zoom"></i></a> </li> <li> - <a href="https://twitter.com/intent/tweet?&url={{ $url }}"><i class="fa fa-twitter-square"></i></a> + <a href="https://twitter.com/intent/tweet?&url={{ $url }}"><i + class="fa fa-twitter-square btn-zoom"></i></a> </li> </ul> </div> {{ if .NextInSection }} - <div class="next"> - <div class="content"> - <span>Next case</span> + <div class="next d-flex align-items-center"> + <div class=" content text-right"> + <span class="small">Next case</span> <h5 class="title"> - <a href="{{ .NextInSection.Permalink }}" - >{{ .NextInSection.Title }}</a - > + <a class="text-dark" href="{{ .NextInSection.Permalink }}">{{ .NextInSection.Title }}</a> </h5> </div> - <div class="icon"> - <svg - xmlns="http://www.w3.org/2000/svg" - width="15.556" - height="28.285" - viewBox="0 0 15.556 28.285" - > + <div class="icon ml-3"> + <svg xmlns="http://www.w3.org/2000/svg" width="15.556" height="28.285" viewBox="0 0 15.556 28.285"> <g data-name="Group 1244" fill="#2d2d2d"> - <path - data-name="Path 1456" - d="M12.162 12.725L2.416 26.87l.978 1.41 9.746-14.138z" - /> - <path - data-name="Path 1455" - d="M2.416 1.415l9.743 14.141.975-1.414L3.39 0z" - /> + <path data-name="Path 1456" d="M12.162 12.725L2.416 26.87l.978 1.41 9.746-14.138z" /> + <path data-name="Path 1455" d="M2.416 1.415l9.743 14.141.975-1.414L3.39 0z" /> </g> </svg> </div> </div> {{ end }} - </div> + </nav> </div> </div> </div> |