From 842d23a13c6bb16ae8c24de7f1e42a7a42ebe146 Mon Sep 17 00:00:00 2001 From: Serhii Reshetniak Date: Mon, 15 Apr 2024 04:44:50 +0300 Subject: [PATCH 1/2] Fix formatting --- src/css/how-it-works.css | 308 +++++++++++++++++---------------------- 1 file changed, 132 insertions(+), 176 deletions(-) diff --git a/src/css/how-it-works.css b/src/css/how-it-works.css index b742ea7..0b93c15 100644 --- a/src/css/how-it-works.css +++ b/src/css/how-it-works.css @@ -1,244 +1,200 @@ /* Styles for "How It Works" section */ .how-it-works { - width: 100%; - margin: 0 auto; - + width: 100%; + margin: 0 auto; } -.how-it-works>.container { - padding: 0; +.how-it-works > .container { + padding: 0; } .work-image-wrap { - padding: 40px 20px; + padding: 40px 20px; } .work-image { - position: relative; - + position: relative; } - - .work-image-pic { + border-radius: 30px; + max-width: 100%; - border-radius: 30px; - max-width: 100%; - - margin: 0 auto; - - + margin: 0 auto; } - .work-image::after { - content: ''; - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - background-color: rgba(20, 20, 20, 0.3); - border-radius: 30px; - pointer-events: none; - + content: ''; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background-color: rgba(20, 20, 20, 0.3); + border-radius: 30px; + pointer-events: none; } - - .work-steps-wrap { - background-color: #576f35; - padding-top: 80px; - padding-bottom: 80px; - padding-left: 20px; - padding-right: 20px; + background-color: #576f35; + padding-top: 80px; + padding-bottom: 80px; + padding-left: 20px; + padding-right: 20px; } .work-steps-txt-wrap { - - margin-bottom: 40px; - + margin-bottom: 40px; } .work-steps-subtit { - font-weight: 600; - font-size: 28px; - line-height: 1; - letter-spacing: -0.01em; - text-transform: uppercase; - color: #fbfbfb; + font-weight: 600; + font-size: 28px; + line-height: 1; + letter-spacing: -0.01em; + text-transform: uppercase; + color: #fbfbfb; - margin: 0 auto; - margin-bottom: 20px; + margin: 0 auto; + margin-bottom: 20px; } .steps-subt-accent { - color: rgba(251, 251, 251, 0.3); + color: rgba(251, 251, 251, 0.3); } .work-steps-text { - font-weight: 500; - font-size: 14px; - line-height: 1.28; - color: #fbfbfb; - margin: 0 auto; - - - + font-weight: 500; + font-size: 14px; + line-height: 1.28; + color: #fbfbfb; + margin: 0 auto; } .work-steps-list { - color: rgba(20, 20, 20, 0.6); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 20px; - width: 100% + color: rgba(20, 20, 20, 0.6); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 20px; + width: 100%; } .work-steps-item:nth-child(2) { - padding: 12px 59px 12px 100px; - + padding: 12px 59px 12px 100px; } .work-steps-item { - display: flex; - align-items: center; - position: relative; - counter-increment: section; - list-style: none; - z-index: 0; - background-color: #fbfbfb; - border-radius: 15px; - padding: 12px 27px 12px 100px; - width: 100%; - height: 76px; + display: flex; + align-items: center; + position: relative; + counter-increment: section; + list-style: none; + z-index: 0; + background-color: #fbfbfb; + border-radius: 15px; + padding: 12px 27px 12px 100px; + width: 100%; + height: 76px; } .work-steps-item::before { - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='26' cy='26' r='21' fill='%237A3145'/%3E%3Ccircle cx='26' cy='26' r='23.5' stroke='%237A3145' stroke-opacity='0.3' stroke-width='5'/%3E%3C/svg%3E%0A"); - background-repeat: no-repeat; - background-size: cover; - content: counter(section); - position: absolute; - top: 50%; - transform: translateY(-50%); - left: 24px; - display: flex; - align-items: center; - justify-content: center; - - font-size: 20px; - color: #fbfbfb; - font-weight: 500; - line-height: 1; - letter-spacing: -0.02em; - height: 52px; - width: 52px; + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='26' cy='26' r='21' fill='%237A3145'/%3E%3Ccircle cx='26' cy='26' r='23.5' stroke='%237A3145' stroke-opacity='0.3' stroke-width='5'/%3E%3C/svg%3E%0A"); + background-repeat: no-repeat; + background-size: cover; + content: counter(section); + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 24px; + display: flex; + align-items: center; + justify-content: center; + + font-size: 20px; + color: #fbfbfb; + font-weight: 500; + line-height: 1; + letter-spacing: -0.02em; + height: 52px; + width: 52px; } .work-steps-item-txt { - font-weight: 500; - font-size: 12px; - line-height: 1.17; - letter-spacing: -0.02em; - color: rgba(20, 20, 20, 0.6); + font-weight: 500; + font-size: 12px; + line-height: 1.17; + letter-spacing: -0.02em; + color: rgba(20, 20, 20, 0.6); } .steps-list-accent { - font-weight: 700; - color: #141414; + font-weight: 700; + color: #141414; } - - - @media screen and (min-width: 768px) { + .work-image-wrap { + padding: 100px 64px; + } - .work-image-wrap { - padding: 100px 64px; - } - + .work-image-pic { + max-width: 640px; + height: 640px; + } + .work-steps-wrap { + padding-top: 100px; + padding-bottom: 100px; + padding-left: 159px; + padding-right: 159px; + } - .work-image-pic { + .work-steps-txt-wrap { + margin-bottom: 50px; + } - max-width: 640px; - height: 640px; + .work-steps-subtit { + font-size: 32px; - } + margin-bottom: 25px; + } - .work-steps-wrap { + .work-steps-text { + font-size: 16px; + line-height: 1.25; + } - padding-top: 100px; - padding-bottom: 100px; - padding-left: 159px; - padding-right: 159px; - } - - - - - .work-steps-txt-wrap { - - margin-bottom: 50px; - - } - - .work-steps-subtit { - font-size: 32px; - - margin-bottom: 25px; - } - - .work-steps-text { - font-size: 16px; - line-height: 1.25; - } - - .work-steps-item { - padding: 12px 25px 12px 100px; - - - } - - .work-steps-item-txt { - font-size: 16px; - line-height: 1.25; - } + .work-steps-item { + padding: 12px 25px 12px 100px; + } + .work-steps-item-txt { + font-size: 16px; + line-height: 1.25; + } } @media screen and (min-width: 1280px) { - .how-it-works>.container { - display: flex; - flex-direction: row; - gap: 0 - } - - - - .work-image-wrap { - padding: 100px; - flex-basis: 630px; - } - - - - - .work-image-pic { - width: 430px; - height: 559px; - } - - .work-steps-wrap { - flex-basis: 650px; - padding: 100px 100px 160px 100px; - - } - + .how-it-works > .container { + display: flex; + flex-direction: row; + gap: 0; + } + .work-image-wrap { + padding: 100px; + flex-basis: 630px; + } + .work-image-pic { + width: 430px; + height: 559px; + } -} \ No newline at end of file + .work-steps-wrap { + flex-basis: 650px; + padding: 100px 100px 160px 100px; + } +} From 8a069eb5819b763f60e1de670503032d93cf537f Mon Sep 17 00:00:00 2001 From: Serhii Reshetniak Date: Mon, 15 Apr 2024 06:41:23 +0300 Subject: [PATCH 2/2] Full background on "How it works" sectoin --- src/css/how-it-works.css | 46 +++++++++++++++++++++------------- src/partials/how-it-works.html | 6 +++-- 2 files changed, 33 insertions(+), 19 deletions(-) diff --git a/src/css/how-it-works.css b/src/css/how-it-works.css index 0b93c15..36b3601 100644 --- a/src/css/how-it-works.css +++ b/src/css/how-it-works.css @@ -4,12 +4,10 @@ margin: 0 auto; } -.how-it-works > .container { - padding: 0; -} - .work-image-wrap { padding: 40px 20px; + max-width: 375px; + margin: 0 auto; } .work-image { @@ -19,7 +17,6 @@ .work-image-pic { border-radius: 30px; max-width: 100%; - margin: 0 auto; } @@ -35,12 +32,14 @@ pointer-events: none; } -.work-steps-wrap { +.work-steps-container { background-color: #576f35; - padding-top: 80px; - padding-bottom: 80px; - padding-left: 20px; - padding-right: 20px; +} + +.work-steps-wrap { + padding: 80px 20px; + max-width: 375px; + margin: 0 auto; } .work-steps-txt-wrap { @@ -137,6 +136,8 @@ @media screen and (min-width: 768px) { .work-image-wrap { padding: 100px 64px; + max-width: 768px; + margin: 0 auto; } .work-image-pic { @@ -145,10 +146,9 @@ } .work-steps-wrap { - padding-top: 100px; - padding-bottom: 100px; - padding-left: 159px; - padding-right: 159px; + padding: 100px 159px; + max-width: 768px; + margin: 0 auto; } .work-steps-txt-wrap { @@ -177,15 +177,21 @@ } @media screen and (min-width: 1280px) { - .how-it-works > .container { + .how-it-works { display: flex; - flex-direction: row; gap: 0; } + .work-image-container { + flex-basis: calc(50% - 10px); + display: flex; + } + .work-image-wrap { - padding: 100px; + position: relative; flex-basis: 630px; + padding: 100px; + margin: 0 0 0 auto; } .work-image-pic { @@ -193,8 +199,14 @@ height: 559px; } + .work-steps-container { + flex-basis: calc(50% + 10px); + display: flex; + } + .work-steps-wrap { flex-basis: 650px; padding: 100px 100px 160px 100px; + margin: 0 auto 0 0; } } diff --git a/src/partials/how-it-works.html b/src/partials/how-it-works.html index 71a2aa1..67702e8 100644 --- a/src/partials/how-it-works.html +++ b/src/partials/how-it-works.html @@ -1,7 +1,6 @@
-
+
-
@@ -37,6 +36,9 @@
+
+ +