Add the original SASS to the build workflow.

9 files changed, 559 insertions, 0 deletions

diff --git a/sass/fonts.sass b/sass/fonts.sass
new file mode 100644
index 0000000..8875af9
--- /dev/null
+++ b/sass/fonts.sass
@@ -0,0 +1,24 @@
+

+@font-face

+  font-family: 'Lato'

+  font-style: normal

+  font-weight: 400

+  font-display: swap

+  src: local('Lato Regular'), local('Lato-Regular'), url('../fonts/lato-regular.woff2') format('woff2')

+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD

+

+@font-face

+  font-family: 'Lato'

+  font-style: normal

+  font-weight: 700

+  font-display: swap

+  src: local('Lato Bold'), local('Lato-Bold'), url('../fonts/lato-bold.woff2') format('woff2')

+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD

+

+@font-face

+  font-family: 'Lato'

+  font-style: normal

+  font-weight: 900

+  font-display: swap

+  src: local('Lato Black'), local('Lato-Black'), url('../fonts/lato-black.woff2') format('woff2')

+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD

diff --git a/sass/footer.sass b/sass/footer.sass
new file mode 100644
index 0000000..d386160
--- /dev/null
+++ b/sass/footer.sass
@@ -0,0 +1,161 @@
+@import settings.sass

+  

+footer

+  div.footer__inner

+    

+    div.footer__logo-society

+      display: grid

+      grid-template-columns: 60px 1fr 191px

+      grid-gap: 25px

+      align-items: center

+      +resp(sm)

+        display: none

+      div.footer__hr

+        align-self: center

+        img

+          margin-bottom: 10px

+          width: 100%

+          +resp(md)

+            border-bottom: 1px solid #E0DFDF

+      div.footer__socials

+        display: flex

+        justify-content: space-between

+        align-items: center

+        padding-left: 6px

+

+    div.footer__links-trustpilot

+      display: flex

+      justify-content: space-between

+      margin-top: 36px

+      +resp(sm)

+        display: none

+

+      div.footer__links

+        display: flex

+        +resp(md)

+          flex-wrap: wrap

+

+        div.footer__column

+          display: grid

+          grid-template-rows: 50px 1fr

+          margin-right: 80px

+          &:last-child

+            margin-right: 0

+          +resp(lg)

+            margin-right: 32px

+          +resp(md)

+            width: 50%

+            margin: 0 0 30px

+            grid-template-rows: 34px 1fr

+          h3.footer__links-title

+            font-weight: 600

+            font-size: 21px

+            color: $black

+            +resp(lg)

+              line-height: 50px

+            +resp(md)

+              line-height: 150%

+              font-size: 16px

+              margin-bottom: 0px

+

+          ul.footer__links-item

+            padding-left: 0

+            list-style: none

+            a

+              list-style: none

+              font-family: $lato

+              font-weight: normal

+              font-size: 16px

+              line-height: 230%

+              color: #747577

+              text-decoration: none

+              +resp(md)

+                font-size: 14px

+              &:hover

+                color: $orange

+                text-decoration: underline

+

+      div.footer__trustpilot

+        justify-self: end

+        border-left: 1px solid #E0DFDF

+        padding-left: 33px

+        +resp(lg)

+          padding-left: 10px

+        div#tp-widget-wrapper

+          margin: 0

+

+    div.footer__developer

+      border-top: 1px solid #E0DFDF

+      display: flex

+      justify-content: space-between

+      align-items: center

+      padding: 40px 0

+      margin-top: 37px

+      +resp(sm)

+        display: none

+      div.footer__hosted

+        display: flex

+        align-items: center

+        p

+          font-family: $lato

+          font-weight: normal

+          font-size: 13px

+          line-height: 16px

+          color: #ACACAD

+          padding-right: 16px

+          +resp(md)

+            padding-right: 8px

+            display: none

+      div.footer__rights

+        display: flex

+        p, a

+          font-family: $lato

+          font-weight: normal

+          font-size: 15px

+          line-height: 150%

+          text-decoration: none

+          color: #ACACAD

+          padding-right: 30px

+          +resp(md)

+            font-size: 14px

+            padding-right: 22px

+        a:hover

+          text-decoration: underline

+          color: $orange

+

+    div.footer__sm

+      display: none

+      +resp(sm)

+        display: block

+      

+      div.footer__sm__contant

+        border-top: 1px solid #ACACAD

+        padding: 32px 0 23px

+        div.footer__sm__logos

+          display: flex

+          justify-content: space-between

+          align-items: center

+        div.footer__sm__society

+          max-width: 200px

+          margin: 24px auto 17px

+          display: flex

+          justify-content: space-between

+        div.footer__sm__developer

+          p, a

+            font-family: $lato

+            font-weight: normal

+            font-size: 13px

+            line-height: 16px

+            color: #747577

+            opacity: 0.5

+          div.footer__sm__privacy-policy

+            display: flex

+            justify-content: center

+            margin-bottom: 19px

+            a

+              text-decoration: none

+              transition: 0.3s

+              &:hover

+                text-decoration: underline

+              &:first-child

+                margin-right: 20px
\ No newline at end of file
diff --git a/sass/front-page/banner.sass b/sass/front-page/banner.sass
new file mode 100644
index 0000000..c243d03
--- /dev/null
+++ b/sass/front-page/banner.sass
@@ -0,0 +1,71 @@
+@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(lg)

+      max-width: 61%

+    +resp(sm)

+      margin-bottom: 23px

+      max-width: 100%

+    h1.banner__title

+      font-family: $lato

+      font-weight: 800

+      font-size: 45px

+      line-height: 120%

+      letter-spacing: 0.02em

+      color: $black

+      padding-bottom: 57px

+      +resp(sm)

+        font-size: 38px

+        text-align: center

+        padding-bottom: 51%

+        padding-left: 20px

+        padding-right: 20px

+      +resp(esm)

+        font-size: 28px

+    div.banner__btn_container

+      +resp(sm)

+        background-color: $white

+        display: flex

+        justify-content: center

+        padding-left: 20px

+        padding-right: 20px

+      a.banner__btn

+        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-family: $lato

+        font-weight: 900

+        font-size: 16px

+        line-height: 15px

+        color: $white

+        text-decoration: none

+        transition: 0.3s

+        +resp(sm)

+          height: 38px

+          font-size: 14px

+          // margin-left: auto

+          // margin-right: auto

+          // margin-top: 50px

+          // position: absolute

+        &:hover

+          background: $white

+          color: $black
\ No newline at end of file
diff --git a/sass/front-page/bottom-text.sass b/sass/front-page/bottom-text.sass
new file mode 100644
index 0000000..e8aee16
--- /dev/null
+++ b/sass/front-page/bottom-text.sass
@@ -0,0 +1,19 @@
+@import settings.sass

+

+section.bottom-text

+  div.bottom-text__inner

+    padding: 138px 0 182px

+    max-width: 657px

+    margin-left: auto

+    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.bottom-text__title

+      text-align: center

+      padding-bottom: 25px
\ No newline at end of file
diff --git a/sass/front-page/inform-columns.sass b/sass/front-page/inform-columns.sass
new file mode 100644
index 0000000..68930df
--- /dev/null
+++ b/sass/front-page/inform-columns.sass
@@ -0,0 +1,81 @@
+@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)

+        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-family: $lato

+            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

+          &: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: 311px

+          width: 100%

+          height: 58px

+          display: flex

+          align-items: center

+          justify-content: center

+          background: $orange

+          border: 1px solid $orange

+          font-family: $lato

+          font-weight: 900

+          font-size: 16px

+          line-height: 15px

+          color: $black

+          text-decoration: none

+          transition: 0.3s

+          +resp(sm)

+            height: 38px

+            width: 100%

+            font-size: 14px

+            line-height: 96%

+          &:hover

+            background: $white
\ No newline at end of file
diff --git a/sass/front-page/main-text.sass b/sass/front-page/main-text.sass
new file mode 100644
index 0000000..54e0786
--- /dev/null
+++ b/sass/front-page/main-text.sass
@@ -0,0 +1,13 @@
+@import settings.sass

+  

+section.main-text

+  max-width: 884px

+  margin-left: auto

+  margin-right: auto

+  padding: 143px 0

+  +resp(lg)

+    padding: 143px 0

+  +resp(md)

+    padding: 90px 0

+  +resp(sm)

+    padding: 34px 0 64px
\ No newline at end of file
diff --git a/sass/header.sass b/sass/header.sass
new file mode 100644
index 0000000..c409dab
--- /dev/null
+++ b/sass/header.sass
@@ -0,0 +1,103 @@
+@import settings.sass

+  

+header

+  background: $white

+  box-shadow: 0px 5px 20px rgba(0, 56, 79, 0.07)

+  padding: 20px 0

+  position: relative

+  +resp(md)

+    padding: 15px 0

+    position: sticky

+    top: 0

+    z-index: 2

+  +resp(esm)

+    padding: 10px 0

+

+  div.header__inner

+    display: flex

+    justify-content: space-between

+    +resp(sm)

+      align-items: center

+    

+    div.header__logo-side

+      display: flex

+      align-items: center

+      a.header__logo

+        display: inherit

+        margin-right: 30px

+        +resp(lg)

+          margin-right: 16px

+      div.header__text

+        font-family: $lato

+        font-weight: 500

+        font-size: 16px

+        line-height: 25px

+        +resp(sm)

+          display: none

+        p

+          font-size: 16px

+          color: #ACACAD

+          text-align: left

+          +resp(md)

+            display: none

+

+    div.header__links-side

+      display: grid

+      grid-template-columns: 1fr auto auto auto

+      grid-gap: 31px

+      justify-items: center

+      align-items: center

+      +resp(lg)

+        grid-gap: 20px

+        text-align: center

+      +resp(sm)

+        display: none

+      a

+        font-family: $lato

+        font-weight: 600

+        font-size: 15px

+        line-height: 14px

+        text-transform: uppercase

+        text-decoration: none

+        color: $black

+        transition: 0.3s

+        +resp(lg)

+          font-size: 14px

+        &:hover

+          color: $orange

+

+    div.header__mobile-menu__buttons

+      height: 100%

+      width: 30px

+      justify-content: center

+      display: none

+      +resp(sm)

+        display: flex

+      img

+        cursor: pointer

+        display: none

+      img.active

+        display: block

+

+nav#mobile-menu

+  z-index: 1

+  bottom: 0

+  top: 0

+  right: 0

+  position: fixed

+  left: 100%

+  background-color: $white

+  padding: 70px 15px

+  +resp(esm)

+    padding: 60px 15px

+  a

+    display: block

+    text-transform: uppercase

+    color: $black

+    text-decoration: none

+    padding: 15px 0

+    font-weight: 600

+    transition: 0.3s

+    border-bottom: 1px solid #e0e0e0

+    &:hover

+      color: $orange
\ No newline at end of file
diff --git a/sass/main.sass b/sass/main.sass
new file mode 100644
index 0000000..53de465
--- /dev/null
+++ b/sass/main.sass
@@ -0,0 +1,40 @@
+@import settings.sass

+@import fonts.sass

+

+body

+  font-family: $lato, sans-serif

+  margin: 0

+  color: $black

+

+h1, h2, h3, h4, h5, p, ul, li

+  margin: 0

+

+h2

+  font-family: $lato

+  font-weight: 800

+  font-size: 38px

+  line-height: 140%

+  +resp(sm)

+    font-size: 24px

+p

+  font-family: $lato

+  font-weight: normal

+  font-size: 18px

+  line-height: 180%

+  text-align: center

+  color: $black

+  +resp(sm)

+    font-size: 14px

+

+div.container

+  max-width: 1340px

+  margin: 0 auto

+  padding-left: 15px

+  padding-right: 15px

+

+@import header.sass

+@import front-page/banner.sass

+@import front-page/main-text.sass

+@import front-page/inform-columns.sass

+@import front-page/bottom-text.sass

+@import footer.sass
\ No newline at end of file
diff --git a/sass/settings.sass b/sass/settings.sass
new file mode 100644
index 0000000..136578d
--- /dev/null
+++ b/sass/settings.sass
@@ -0,0 +1,47 @@
+// fonts

+$lato : "Lato", "Arial", sans-serif

+// colors

+$white : #ffffff

+$orange : #FFBE12

+$black : #18191C

+$grey : #747577

+$dark-orange: #FD8F01

+

+// mixins

+@mixin resp($media)

+	// 1200px and up

+	@if $media == xlg

+		@media only screen and (min-width: 1200px)

+			@content

+	// 1400px and down

+	@if $media == elg

+		@media only screen and (max-width: 1400px)

+			@content

+	// 1199px and down

+	@if $media == lg

+		@media only screen and (max-width: 1199px)

+			@content

+	// 991px and down

+	@else if $media == md

+		@media only screen and (max-width: 991px)

+			@content

+	// 767px and down

+	@else if $media == sm

+		@media only screen and (max-width: 767px)

+			@content

+	// 575px and down

+	@else if $media == esm

+		@media only screen and (max-width: 575px)

+			@content

+	// 450px and down

+	@else if $media == usm

+		@media only screen and (max-width: 450px)

+			@content

+	// 390px and down

+	@else if $media == xsm

+		@media only screen and (max-width: 390px)

+			@content

+	// 350px and down

+	@else if $media == exsm

+		@media only screen and (max-width: 350px)

+			@content
\ No newline at end of file