summaryrefslogtreecommitdiff
path: root/sass/front-page
diff options
context:
space:
mode:
Diffstat (limited to 'sass/front-page')
-rw-r--r--sass/front-page/banner.sass132
-rw-r--r--sass/front-page/bottom-text.sass61
-rw-r--r--sass/front-page/canvas.sass21
-rw-r--r--sass/front-page/inform-columns.sass224
-rw-r--r--sass/front-page/main-text.sass51
-rw-r--r--sass/front-page/navigation.sass16
6 files changed, 318 insertions, 187 deletions
diff --git a/sass/front-page/banner.sass b/sass/front-page/banner.sass
index 51b6bcf..fd504a6 100644
--- a/sass/front-page/banner.sass
+++ b/sass/front-page/banner.sass
@@ -1,57 +1,75 @@
-@import ../settings.sass
-
-section.banner
- background-image: url("/img/front-page/banner/banner-bg.svg")
- background-position: bottom
- background-repeat: no-repeat
- background-size: cover
- padding: 77px 0 87px
- +resp(sm)
- background-image: url("/img/front-page/banner/banner-bg-sm.svg")
- padding: 45px 0 0
- div.sm-none
- +resp(sm)
- padding: 0
- div.banner__text-button
- max-width: 50%
- +resp(md)
- max-width: 60%
- +resp(sm)
- margin-bottom: 23px
- max-width: 100%
- h1
- padding-bottom: 57px
- +resp(sm)
- text-align: center
- padding-bottom: 51%
- padding-left: 20px
- padding-right: 20px
- div.banner__btn_container
- +resp(sm)
- background-color: $white
- display: flex
- justify-content: center
- padding-left: 20px
- padding-right: 20px
- a
- max-width: 311px
- width: 100%
- height: 58px
- background: $black
- border: 1px solid $black
- display: inline-flex
- margin-top: 23px
- align-items: center
- justify-content: center
- font-weight: 700
- font-size: 16px
- line-height: 15px
- color: $white
- text-decoration: none
- transition: 0.3s
- +resp(sm)
- height: 38px
- font-size: 14px
- &:hover
- background: $white
- color: $black \ No newline at end of file
+@import ../settings
+
+section.banner
+ background-color: $grey-light2
+ display: flex
+ justify-content: center
+ position: relative
+ overflow: hidden
+ +resolution(0, 575)
+ height: 386px
+ padding-top: 100px
+ +resolution(576, 991)
+ height: 433px
+ padding-top: 110px
+ +resolution(992)
+ height: 459px
+ padding-top: 74px
+ align-items: center
+
+ .containerCustom
+ position: relative
+ +resolution(0, 991)
+ justify-content: center
+
+ .image
+ position: absolute
+ z-index: 1
+ +resolution(0, 575)
+ bottom: 0
+ left: 50%
+ transform: translateX(-50%)
+ width: 373px
+ height: 225px
+ +resolution(576, 991)
+ bottom: 0
+ left: 50%
+ transform: translateX(-50%)
+ width: 550px
+ height: 300px
+ +resolution(992, 1100)
+ bottom: -220px
+ right: -20px
+ width: 528px
+ height: 320px
+ +resolution(1100, 1300)
+ bottom: -220px
+ right: -20px
+ width: 648px
+ height: 390px
+ +resolution(1300)
+ bottom: -220px
+ right: -150px
+ width: 758px
+ height: 457px
+
+ img
+ width: 100%
+ height: 100%
+
+ .innerDiv
+ +resolution(0, 991)
+ text-align: center
+
+ h1
+ +resolution(992)
+ max-width: 680px
+ +resolution(575, 991)
+ max-width: 709px
+
+ p
+ font-family: $a
+ font-weight: 600
+ letter-spacing: $px
+ color: $grey-normal
+ margin-top: 16px
diff --git a/sass/front-page/bottom-text.sass b/sass/front-page/bottom-text.sass
index 943c4b6..fce2d46 100644
--- a/sass/front-page/bottom-text.sass
+++ b/sass/front-page/bottom-text.sass
@@ -1,27 +1,34 @@
-@import ../settings.sass
-
-.bottom-text
- &__inner
- padding: 138px 0 182px
- max-width: 657px
- margin-left: auto
- text-align: center
- margin-right: auto
- +resp(lg)
- padding: 138px 250px 182px
- +resp(md)
- padding: 90px 50px 126px
- +resp(sm)
- padding: 56px 50px 64px
- +resp(esm)
- padding: 56px 20px 64px
- h2
- padding-bottom: 25px
- +resp(sm)
- padding-bottom: 0
- p
- font-size: 18px
- +resp(sm)
- font-size: 16px
- +resp(esm)
- font-size: 14px \ No newline at end of file
+@import ../settings
+
+.bottom-text
+ text-align: center
+ display: flex
+ justify-content: center
+ +resolution(992)
+ padding: 144px 0
+ +resolution(576, 991)
+ padding: 96px 0
+ +resolution(0, 575)
+ padding: 64px 0
+
+ div
+ display: flex
+ flex-direction: column
+
+ h2
+ letter-spacing: $em
+ color: $black
+ +resolution(576)
+ font-size: 34px
+ +resolution(0, 575)
+ font-size: 22px
+ p
+ letter-spacing: $px
+ font-weight: 500
+ color: $black2
+ +resolution(576)
+ font-size: 18px
+ margin-top: 24px
+ +resolution(0, 575)
+ font-size: 16px
+ margin-top: 16px
diff --git a/sass/front-page/canvas.sass b/sass/front-page/canvas.sass
new file mode 100644
index 0000000..e69cd00
--- /dev/null
+++ b/sass/front-page/canvas.sass
@@ -0,0 +1,21 @@
+.background
+ position: absolute
+ z-index: 0
+ +resolution(0, 575)
+ display: none
+ +resolution(576, 991)
+ top: -516px
+ right: -280px
+ +resolution(992)
+ top: -600px
+ +resolution(992, 1199)
+ right: -250px
+ +resolution(1200, 1300)
+ right: -220px
+ +resolution(1300)
+ right: -150px
+
+ canvas
+ +resolution(576)
+ width: 1024px !important
+ height: 840px !important
diff --git a/sass/front-page/inform-columns.sass b/sass/front-page/inform-columns.sass
index 250982f..04ae9b6 100644
--- a/sass/front-page/inform-columns.sass
+++ b/sass/front-page/inform-columns.sass
@@ -1,83 +1,141 @@
-@import ../settings.sass
-
-section.inform-columns
-
- div.inform-column__inner
- display: grid
- grid-template-columns: 1fr 1fr
- grid-gap: 23px 30px
- +resp(lg)
- grid-gap: 20px
- +resp(sm)
- grid-template-columns: 1fr
-
- div.inform-column__item
- background: #F3F4F4
- display: grid
- grid-template-rows: auto 1fr auto
- grid-gap: 40px
- padding: 48px 54px 59px
- +resp(md)
- grid-gap: 25px
- padding: 30px 25px
- +resp(sm)
- padding: 30px 24px 40px
- grid-gap: 15px
- grid-template-rows: auto 1fr 65px
-
- div.inform-column__header
- display: flex
- align-items: center
- div.inform-column__icon
- padding-right: 19px
- div.inform-column__title
- h3
- font-weight: bold
- font-size: 28px
- line-height: 150%
- letter-spacing: 0.02em
- color: #000000
- +resp(sm)
- font-size: 21px
-
- div.inform-column__data
- p
- text-align: left
- margin-bottom: 29px
- font-size: 16px
- +resp(md)
- margin-bottom: 20px
- &:last-child
- margin-bottom: 10px
- +resp(sm)
- margin-bottom: 0
- +resp(sm)
- line-height: 180%
- font-size: 14px
- margin-bottom: 25px
-
- div.inform-column__button
- +resp(sm)
- align-self: end
- a.inform-column__btn
- max-width: 291px
- padding: 10px
- min-height: 38px
- color: #18191C !important
- display: flex
- align-items: center
- justify-content: center
- text-align: center
- background: $orange
- border: 1px solid $orange
- font-weight: 700
- font-size: 16px
- color: $black
- text-decoration: none
- transition: 0.3s
- line-height: 1.5
- +resp(sm)
- min-height: 28px
- font-size: 14px
- &:hover
- background: $white \ No newline at end of file
+@import ../settings
+
+section.inform-columns
+ display: flex
+ justify-content: center
+
+ .inner-div
+ display: grid
+ grid-template-columns: 1fr 1fr
+ grid-gap: 30px
+ +resolution(0, 991)
+ grid-template-columns: 1fr
+
+ .item
+ background: $light
+ position: relative
+ display: grid
+ grid-template-rows: auto 1fr auto
+ +resolution(576)
+ padding: 40px
+ +resolution(0, 575)
+ padding: 30px 20px
+
+ &:nth-child(odd)
+ &::before
+ content: ""
+ position: absolute
+ top: 0
+ left: 0
+ background-color: $white
+ clip-path: polygon(0 0, 0 100%, 100% 0)
+ +resolution(576)
+ width: 40px
+ height: 40px
+ +resolution(0, 575)
+ width: 20px
+ height: 20px
+
+ &::after
+ content: ""
+ position: absolute
+ bottom: 0
+ right: 0
+ background-color: $white
+ clip-path: polygon(100% 100%, 0 100%, 100% 0)
+ +resolution(576, 992)
+ width: 40px
+ height: 40px
+ +resolution(0, 575)
+ width: 20px
+ height: 20px
+
+ &:nth-child(2n)
+ &::before
+ content: ""
+ position: absolute
+ top: 0
+ left: 0
+ background-color: $white
+ clip-path: polygon(0 0, 0 100%, 100% 0)
+ +resolution(576)
+ width: 40px
+ height: 40px
+ +resolution(0, 575)
+ width: 20px
+ height: 20px
+
+ &::after
+ content: ""
+ position: absolute
+ bottom: 0
+ right: 0
+ background-color: $white
+ clip-path: polygon(100% 100%, 0 100%, 100% 0)
+ +resolution(576)
+ width: 40px
+ height: 40px
+ +resolution(0, 575)
+ width: 20px
+ height: 20px
+
+ .header
+ display: flex
+ flex-direction: column
+
+ img
+ width: 54px
+ height: 54px
+
+ div
+
+ h3
+ font-weight: bold
+ letter-spacing: $em
+ color: $black
+ margin-top: 16px
+ +resolution(992)
+ font-size: 24px
+ +resolution(0, 991)
+ font-size: 20px
+
+ .content
+ +resolution(992)
+ margin: 24px 0
+ +resolution(0, 991)
+ margin: 16px 0
+
+ p
+ text-align: left
+ font-size: 16px
+ +resolution(992)
+ margin-bottom: 20px
+ +resolution(0, 991)
+ margin-bottom: 15px
+ &:last-child
+ margin-bottom: 0
+
+ a
+ max-width: 291px
+ min-height: 58px
+ color: $black !important
+ display: flex
+ align-items: center
+ font-weight: 700
+ font-size: 16px
+ text-decoration: none
+ transition: 0.3s
+ letter-spacing: $em
+
+ &::after
+ content: url('/img/global/link-arrow.svg')
+ display: flex
+ margin-left: 15px
+ align-items: center
+ padding-top: 5px
+
+ &:hover
+ color: $secondary !important
+
+ &:active
+ color: $primary !important
diff --git a/sass/front-page/main-text.sass b/sass/front-page/main-text.sass
index c3b4fdd..3ed9773 100644
--- a/sass/front-page/main-text.sass
+++ b/sass/front-page/main-text.sass
@@ -1,20 +1,31 @@
-@import ../settings.sass
-
-section.main-text
- max-width: 884px
- margin-left: auto
- margin-right: auto
- padding: 143px 0
- text-align: center
- +resp(lg)
- padding: 143px 0
- +resp(md)
- padding: 90px 0
- +resp(sm)
- padding: 0 0 55px
- p
- font-size: 18px
- +resp(sm)
- font-size: 16px
- +resp(esm)
- font-size: 14px \ No newline at end of file
+@import ../settings
+
+section.main-text
+ display: flex
+ +resolution(0, 575)
+ padding: 64px 0
+ +resolution(576)
+ justify-content: center
+ +resolution(576, 991)
+ padding: 96px 0
+ +resolution(992)
+ padding: 144px 0
+
+ .containerCustom
+ +resolution(0, 575)
+ flex-direction: column
+
+ img
+ width: 72px
+ height: 72px
+
+ p
+ font-size: 18px
+ letter-spacing: $px
+ color: $grey-dark
+ +resolution(576)
+ font-size: 18px
+ margin-left: 30px
+ +resolution(0, 575)
+ font-size: 16px
+ margin-top: 16px
diff --git a/sass/front-page/navigation.sass b/sass/front-page/navigation.sass
new file mode 100644
index 0000000..5c0c545
--- /dev/null
+++ b/sass/front-page/navigation.sass
@@ -0,0 +1,16 @@
+.navigation
+ background: transparent
+ position: fixed
+ top: 0
+ right: 0
+ left: 0
+ z-index: 2
+ display: flex
+ justify-content: center
+ transition: background-color 250ms linear, box-shadow 250ms linear
+
+ &.background__white
+ background-color: $white
+
+ &.bottom-shadow
+ box-shadow: 0 4px 16px rgba(0, 0, 0, .12) \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-07-04 02:23:54 +0000