Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

updated how-it-works section #41

Merged
merged 6 commits into from
Feb 7, 2023
Merged

updated how-it-works section #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7e7c6af
updated how-it-works section
tfsojon Jan 25, 2023
060e6f0
Merge branch 'intelops:chandu' into chandu
tfsojon Jan 28, 2023
2ae98de
updated how-it-works page
tfsojon Feb 7, 2023
c8373b1
fix search popup in how-it-works page
tfsojon Feb 7, 2023
73ce3b6
updated footer to chnage bg-image, bg-color etc
tfsojon Feb 7, 2023
f50bd88
added default option for footer to chnage bg-image, bg-color
tfsojon Feb 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions config/_default/params.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/"
Expand Down
7 changes: 6 additions & 1 deletion content/english/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ fun_facts:
counter_suffix: "%"
content: Make hires 40% <br> faster
content_color: ""
work_process:
how_it_works:
enable: false
section: how-it-works
image_and_content_block:
Expand Down Expand Up @@ -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)"
---
8 changes: 4 additions & 4 deletions content/english/how-it-works.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: ""


Expand Down
5 changes: 5 additions & 0 deletions content/english/optimizor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
---
18 changes: 18 additions & 0 deletions themes/delta/assets/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
168 changes: 162 additions & 6 deletions themes/delta/assets/scss/templates/_main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -622,7 +746,7 @@ main:empty {
}
&:nth-child(1),
&:nth-child(5) {
.process-image {
.work-process-image {
background-color: $color-secondary;
}
.block::before {
Expand All @@ -631,7 +755,7 @@ main:empty {
}
&:nth-child(2),
&:nth-child(6) {
.process-image {
.work-process-image {
background-color: $color-tertiary;
}
.block::before {
Expand All @@ -640,7 +764,7 @@ main:empty {
}
&:nth-child(3),
&:nth-child(7) {
.process-image {
.work-process-image {
background-color: $color-quaternary;
}
.block::before {
Expand All @@ -649,7 +773,7 @@ main:empty {
}
&:nth-child(4),
&:nth-child(8) {
.process-image {
.work-process-image {
background-color: $color-primary;
}
.block::before {
Expand Down Expand Up @@ -989,7 +1113,7 @@ main:empty {
position: relative;
z-index: 1;
overflow-x: hidden;
&::after {
.bottom-bg {
position: absolute;
content: "";
height: calc(50% - 55px);
Expand Down Expand Up @@ -1333,6 +1457,8 @@ a.share-icon {

// footer
footer {
position: relative;
z-index: 1;
padding: 100px 0 0;
@include desktop {
padding: 90px 0 0;
Expand All @@ -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;
Expand All @@ -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 {
Expand Down
44 changes: 4 additions & 40 deletions themes/delta/layouts/_default/how-it-works.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{{ define "main" }}

<section class="banner bg-quaternary-soft rounded-lg wave-block overflow-hidden">
{{ partial "header.html" . }}
{{ partial "header.html" . }}

<section class="banner bg-quaternary-soft rounded-lg wave-block overflow-hidden">
{{with .Params.banner}}
<div class="container container-delta block">
<div class="row align-items-center text-center text-lg-start">
Expand Down Expand Up @@ -33,7 +33,7 @@ <h1 class="title text-xl mb-3">{{.title | markdownify}}</h1>
</div>
{{end}}

<div class="has-wave">
<div class="has-wave">
<svg class="wave-left" width="274" height="395" viewBox="0 0 274 395" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.6" d="M-160.703 49.9832C-102.183 25.7147 -35.1189 14.7857 26.6255 33.4291C82.7274 50.3045 126.094 93.2164 147.051 147.379C157.53 174.218 162.85 202.826 162.689 231.595C162.528 245.256 162.205 260.364 157.369 273.221C155.273 278.846 151.888 284.311 146.406 287.043C142.537 288.972 136.089 289.936 132.703 286.4C124.643 277.721 133.026 258.756 138.507 251.042C145.762 240.756 157.53 233.041 170.105 231.756C198.8 228.863 223.466 252.81 236.04 276.114C262.963 326.097 249.26 396.492 203.798 431.368C198.639 435.386 195.899 441.654 199.445 447.922C202.347 453.065 210.891 456.119 216.05 452.261C267.477 412.885 287.951 339.919 264.091 279.489C251.517 247.828 225.723 217.291 191.062 209.416C155.273 201.219 119.161 222.756 108.521 257.792C103.524 274.185 104.33 295.722 119.323 306.651C133.348 316.776 153.5 313.401 166.074 302.472C180.261 290.097 183.969 270.328 185.742 252.488C187.516 235.292 187.193 217.934 185.097 200.898C176.714 132.592 140.764 66.6978 80.4704 30.8576C5.66784 -13.6614 -89.4475 -5.46471 -167.152 26.679C-173.117 29.0898 -177.469 34.7149 -175.535 41.465C-173.923 47.2509 -166.829 52.5547 -160.703 49.9832Z" fill="currentColor"/>
</svg>
Expand All @@ -44,43 +44,7 @@ <h1 class="title text-xl mb-3">{{.title | markdownify}}</h1>
</div>
</section>

{{with .Params.work_process}}
<section class="section pb-0">
<div class="container container-delta">
<div class="row justify-content-center text-center">
<div class="col-lg-8">
<div class="section-title">
{{with .subtitle}}<p class="subtitle">{{. | markdownify}}</p>{{end}}
<h2 class="title">{{.title | markdownify}}</h2>
</div>
</div>
<div class="col-lg-12">
<div class="row gy-4">
{{ $.Scratch.Set "counter" 0 }}
{{range .process_item}}
{{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }}
<div class="col-lg-3 col-sm-6 process-item">
{{$n := $.Scratch.Get "counter"}}
<div class="block pt-4" data-count="{{if (le $n 9)}}0{{$n}}{{ else }}{{$n}}{{ end }}">
{{with .image}}
<div class="process-image">
{{$img:= resources.Get . }}
{{$img:= $img.Resize "350x"}}
{{$imgWebp:= $img.Resize "350x webp"}}
<img loading="lazy" decoding="async" class="w-100" width="{{$img.Width}}" height="{{$img.Height}}" src="{{$imgWebp.RelPermalink}}" alt="Banner Image" onerror="this.onerror=null;this.src='{{$img.RelPermalink}}'">
</div>
{{end}}
<h3 class="title h4">{{.title | markdownify}}</h3>
<p class="mb-0">{{.content | markdownify}}</p>
</div>
</div>
{{end}}
</div>
</div>
</div>
</div>
</section>
{{end}}
{{ partial "how-it-works.html" . }}

{{with site.GetPage "home-2" }}
{{with .Params.image_and_content_block}}
Expand Down
Loading