diff --git a/config/_default/params.toml b/config/_default/params.toml index e16912cc..29f70103 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -14,6 +14,11 @@ logo_width = "147x" mainSections = ["blog"] mobile = "+211234565523" fullSiteSearch = true +[footer] +footer_light = false +# bg_color = "#1e384c" +# bg_image = "images/bg-banner-page.jpg" +bg_image_overlay_color = "rgba(0,0,0,.65)" [call_to_action] button_label = "Contact Us" button_link = "contact/" diff --git a/content/english/_index.md b/content/english/_index.md index 3f4e0ac0..698ed2a4 100644 --- a/content/english/_index.md +++ b/content/english/_index.md @@ -62,7 +62,7 @@ fun_facts: counter_suffix: "%" content: Make hires 40%
faster content_color: "" -work_process: +how_it_works: enable: false section: how-it-works image_and_content_block: @@ -151,4 +151,9 @@ blog: call_to_action: enable: false +footer: + footer_light: false + # bg_color: "#1e384c" + # bg_image: "images/bg-banner-page.jpg" + # bg_image_overlay_color: "rgba(0,0,0,.65)" --- diff --git a/content/english/how-it-works.md b/content/english/how-it-works.md index 7c29d8cd..0744d664 100644 --- a/content/english/how-it-works.md +++ b/content/english/how-it-works.md @@ -28,25 +28,25 @@ work_process: - title: "Ultimate Guide" title_color: "" image: "images/process/01.jpg" - content: "Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat." + content: "Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat. Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat." content_color: "" - title: "How to webinar" title_color: "" image: "images/process/02.jpg" - content: "Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat." + content: "Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat. Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat. Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat. Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat." content_color: "" - title: "workshop & FAQ" title_color: "" image: "images/process/03.jpg" - content: "Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat." + content: "Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat. Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat. Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat." content_color: "" - title: "Collaboration" title_color: "" image: "images/process/04.jpg" - content: "Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat." + content: "Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat. Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat.Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat." content_color: "" diff --git a/content/english/optimizor.md b/content/english/optimizor.md index 6791b86f..6cfa628f 100644 --- a/content/english/optimizor.md +++ b/content/english/optimizor.md @@ -53,4 +53,9 @@ work_process: content_color: "" +footer: + footer_light: false + bg_color: "#1e384c" + # bg_image: "images/bg-banner-page.jpg" + # bg_image_overlay_color: "rgba(0,0,0,.65)" --- diff --git a/themes/delta/assets/js/script.js b/themes/delta/assets/js/script.js index 7cc61fee..340e905b 100644 --- a/themes/delta/assets/js/script.js +++ b/themes/delta/assets/js/script.js @@ -278,6 +278,24 @@ $(document).ready(function () { clickable: true, }, }); + + var processItem = $(".process-item"); + processItem.each(function () { + var $this = $(this); + $(window).on("scroll", function () { + if ( + $this.offset().top - $(window).scrollTop() < + $(window).outerHeight() - 250 + ) { + $this.find(".image-block").addClass("active"); + } + }); + }); + $(window).on("scroll", function () { + if ($(window).scrollTop() === 0) { + processItem.find(".image-block").removeClass("active"); + } + }); }); //custom diff --git a/themes/delta/assets/scss/templates/_main.scss b/themes/delta/assets/scss/templates/_main.scss index 3437a151..19c5d9cf 100644 --- a/themes/delta/assets/scss/templates/_main.scss +++ b/themes/delta/assets/scss/templates/_main.scss @@ -590,7 +590,131 @@ main:empty { // process-item .process-item { - .process-image { + position: relative; + margin-bottom: 120px; + @include tablet { + margin-bottom: 0; + } + .content-block { + position: relative; + padding: 100px 30px; + &::before { + display: inline-block; + margin-bottom: 30px; + text-align: center; + content: attr(data-count); + height: 50px; + width: 50px; + line-height: 50px; + font-size: 25px; + font-family: $font-primary; + font-weight: 900; + background-color: $white; + border-radius: 100%; + box-shadow: 0px 15px 50px 10px rgba($black, 0.05); + } + } + .image-block { + perspective: 1800px; + opacity: 0; + .process-image { + opacity: 0; + will-change: transform; + transform-origin: center top; + img { + transform: translateY(100px); + } + } + &.active { + opacity: 1; + .process-image { + opacity: 1; + transition: 0.45s; + img { + transform: translateY(40px); + transition: 0.6s cubic-bezier(0.17, 0.84, 0.44, 1); + transition-delay: 0.1s; + } + } + } + } + .is-left { + .process-image { + transform: translate(0, 70px) rotate(-4e-5deg) rotateY(15deg) + rotateX(15deg); + } + .active { + .process-image { + transform: translate(0, 0) rotate(-4e-5deg) rotateY(15deg) + rotateX(9.99994deg); + } + } + } + .is-right { + .process-image { + transform: translate(0, 70px) rotate(-4e-5deg) rotateY(-20deg) + rotateX(15deg); + } + .active { + .process-image { + transform: translate(0, 0) rotate(-4e-5deg) rotateY(-20deg) + rotateX(9.99994deg); + } + } + } + &:nth-child(1), + &:nth-child(5) { + .process-image { + background-color: $color-secondary; + img { + box-shadow: 0 0 60px darken($color-secondary, 25%); + } + } + .content-block::before { + color: $color-secondary; + } + } + &:nth-child(2), + &:nth-child(6) { + .process-image { + background-color: $color-tertiary; + img { + box-shadow: 0 0 60px darken($color-tertiary, 25%); + } + } + .content-block::before { + color: $color-tertiary; + } + } + &:nth-child(3), + &:nth-child(7) { + .process-image { + background-color: $color-quaternary; + img { + box-shadow: 0 0 60px darken($color-quaternary, 25%); + } + } + .content-block::before { + color: $color-quaternary; + } + } + &:nth-child(4), + &:nth-child(8) { + .process-image { + background-color: $color-primary; + img { + box-shadow: 0 0 60px darken($color-primary, 25%); + } + } + .content-block::before { + color: $color-primary; + } + } +} + +// work-process-item +.work-process-item { + .work-process-image { border-top-left-radius: 8px; border-top-right-radius: 8px; padding: 30px; @@ -622,7 +746,7 @@ main:empty { } &:nth-child(1), &:nth-child(5) { - .process-image { + .work-process-image { background-color: $color-secondary; } .block::before { @@ -631,7 +755,7 @@ main:empty { } &:nth-child(2), &:nth-child(6) { - .process-image { + .work-process-image { background-color: $color-tertiary; } .block::before { @@ -640,7 +764,7 @@ main:empty { } &:nth-child(3), &:nth-child(7) { - .process-image { + .work-process-image { background-color: $color-quaternary; } .block::before { @@ -649,7 +773,7 @@ main:empty { } &:nth-child(4), &:nth-child(8) { - .process-image { + .work-process-image { background-color: $color-primary; } .block::before { @@ -989,7 +1113,7 @@ main:empty { position: relative; z-index: 1; overflow-x: hidden; - &::after { + .bottom-bg { position: absolute; content: ""; height: calc(50% - 55px); @@ -1333,6 +1457,8 @@ a.share-icon { // footer footer { + position: relative; + z-index: 1; padding: 100px 0 0; @include desktop { padding: 90px 0 0; @@ -1347,6 +1473,15 @@ footer { border: 2px solid rgba($white, 1) !important; } } + .footer-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: -1; + } .footer-menu { margin-top: 60px; padding: 60px 0; @@ -1372,6 +1507,27 @@ footer { } } } + &.bg-light { + .btn-search-footer { + cursor: text; + border: 2px solid rgba($dark, 0.4) !important; + &:hover { + border: 2px solid rgba($dark, 1) !important; + } + } + .footer-menu { + border-top: 1px solid rgba($dark, 0.2); + border-bottom: 1px solid rgba($dark, 0.2); + ul li { + a { + color: #555; + &:hover { + color: $dark; + } + } + } + } + } .footer-bottom { padding: 55px 0; @include tablet { diff --git a/themes/delta/layouts/_default/how-it-works.html b/themes/delta/layouts/_default/how-it-works.html index 9723ef36..8e9074c1 100644 --- a/themes/delta/layouts/_default/how-it-works.html +++ b/themes/delta/layouts/_default/how-it-works.html @@ -1,8 +1,8 @@ {{ define "main" }} - -{{end}} +{{ partial "work-process.html" . }} {{with site.GetPage "home-2" }} {{with .Params.image_and_content_block}} @@ -153,4 +117,4 @@

{{.title | markdownify}}

{{end}} {{ partial "call-to-action-2.html" . }} -{{ end }} +{{ end }} \ No newline at end of file diff --git a/themes/delta/layouts/index.html b/themes/delta/layouts/index.html index 06a5b5d5..e87b1980 100644 --- a/themes/delta/layouts/index.html +++ b/themes/delta/layouts/index.html @@ -155,10 +155,10 @@

-
+ {{ if not $bg_image }} +
+ {{ end }} +
diff --git a/themes/delta/layouts/partials/footer-logo-dark.html b/themes/delta/layouts/partials/footer-logo-dark.html new file mode 100644 index 00000000..6c4a2993 --- /dev/null +++ b/themes/delta/layouts/partials/footer-logo-dark.html @@ -0,0 +1,38 @@ +{{ $logoPath:= site.Params.logo }} +{{ $logoWidth:= replace site.Params.logo_width "px" "x" }} + + +{{ if $logoPath }} +{{ if fileExists (add `assets/` $logoPath) }} +{{ $logo:= resources.Get $logoPath }} + + +{{ $logoExt := path.Ext $logo }} +{{ if eq $logoExt ".gif" }} +{{ .Scratch.Set "logo" ($logo.Resize $logoWidth).RelPermalink }} + +{{ else if eq $logoExt ".svg"}} +{{ .Scratch.Set "logo" $logo.RelPermalink }} + +{{ .Scratch.Set "logo_fallback" $logo.RelPermalink }} +{{ else }} + +{{ $logoDefaultWidth:= add (string $logo.Width) "x"}} +{{ $logoWidth:= $logoWidth | default $logoDefaultWidth }} +{{ $options := add (string $logoWidth) " webp" }} +{{ .Scratch.Set "logo" ($logo.Resize $options).RelPermalink }} + +{{ .Scratch.Set "logo_fallback" ($logo.Resize $logoWidth).RelPermalink }} +{{ end }} + +{{ site.Title }} +{{ end }} + +{{ else if site.Params.logo_text }} +{{ site.Params.logo_text | markdownify }} + +{{ else }} +{{ site.Title | markdownify }} +{{ end }} \ No newline at end of file diff --git a/themes/delta/layouts/partials/footer.html b/themes/delta/layouts/partials/footer.html index e6876843..474b3d04 100644 --- a/themes/delta/layouts/partials/footer.html +++ b/themes/delta/layouts/partials/footer.html @@ -1,14 +1,25 @@ -