diff options
Diffstat (limited to 'sass')
-rw-r--r-- | sass/fonts.sass | 3 | ||||
-rw-r--r-- | sass/footer.sass | 79 | ||||
-rw-r--r-- | sass/front-page/banner.sass | 26 | ||||
-rw-r--r-- | sass/front-page/bottom-text.sass | 20 | ||||
-rw-r--r-- | sass/front-page/inform-columns.sass | 24 | ||||
-rw-r--r-- | sass/front-page/main-text.sass | 11 | ||||
-rw-r--r-- | sass/header.sass | 2 | ||||
-rw-r--r-- | sass/main.sass | 78 | ||||
-rw-r--r-- | sass/settings.sass | 2 |
9 files changed, 159 insertions, 86 deletions
diff --git a/sass/fonts.sass b/sass/fonts.sass index 8875af9..a22bc92 100644 --- a/sass/fonts.sass +++ b/sass/fonts.sass @@ -1,4 +1,3 @@ -
@font-face
font-family: 'Lato'
font-style: normal
@@ -21,4 +20,4 @@ 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
+ 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
\ No newline at end of file diff --git a/sass/footer.sass b/sass/footer.sass index d386160..0c9faf1 100644 --- a/sass/footer.sass +++ b/sass/footer.sass @@ -37,43 +37,58 @@ footer div.footer__column
display: grid
- grid-template-rows: 50px 1fr
- margin-right: 80px
- &:last-child
- margin-right: 0
+ grid-template-rows: auto 1fr
+ margin-right: 48px
+resp(lg)
- margin-right: 32px
+ margin-right: 28px
+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
+ &:nth-child(1)
+ +resp(lg)
+ width: 16%
+ +resp(md)
+ width: 40%
+ &:nth-child(2)
+ +resp(lg)
+ width: 18%
+ +resp(md)
+ width: 60%
+ &:nth-child(3)
+ +resp(lg)
+ width: 20%
+ +resp(md)
+ width: 40%
+ &:nth-child(4)
+ margin-right: 0
+resp(lg)
- line-height: 50px
+ width: 32%
+resp(md)
- line-height: 150%
- font-size: 16px
- margin-bottom: 0px
+ width: 60%
- ul.footer__links-item
+ h3
+ font-weight: 600
+ font-size: 18px
+ padding: 0 0 17px 0
+ color: $black
+
+ ul
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
+ li
+ padding: 5px 0
+ a
+ list-style: none
+ font-weight: normal
+ font-size: 16px
+ line-height: 1.7
+ color: #747577
+ text-decoration: none
+ +resp(md)
+ font-size: 14px
+ &:hover
+ color: $orange
+ text-decoration: underline
div.footer__trustpilot
justify-self: end
@@ -97,7 +112,6 @@ footer display: flex
align-items: center
p
- font-family: $lato
font-weight: normal
font-size: 13px
line-height: 16px
@@ -106,10 +120,10 @@ footer +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%
@@ -142,7 +156,6 @@ footer justify-content: space-between
div.footer__sm__developer
p, a
- font-family: $lato
font-weight: normal
font-size: 13px
line-height: 16px
@@ -158,4 +171,6 @@ footer &:hover
text-decoration: underline
&:first-child
- margin-right: 20px
\ No newline at end of file + margin-right: 20px
+ div.footer__sm__rights
+ text-align: center
\ No newline at end of file diff --git a/sass/front-page/banner.sass b/sass/front-page/banner.sass index c243d03..51b6bcf 100644 --- a/sass/front-page/banner.sass +++ b/sass/front-page/banner.sass @@ -1,4 +1,4 @@ -@import settings.sass
+@import ../settings.sass
section.banner
background-image: url("/img/front-page/banner/banner-bg.svg")
@@ -14,27 +14,18 @@ section.banner padding: 0
div.banner__text-button
max-width: 50%
- +resp(lg)
- max-width: 61%
+ +resp(md)
+ max-width: 60%
+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
+ h1
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
@@ -42,7 +33,7 @@ section.banner justify-content: center
padding-left: 20px
padding-right: 20px
- a.banner__btn
+ a
max-width: 311px
width: 100%
height: 58px
@@ -52,8 +43,7 @@ section.banner margin-top: 23px
align-items: center
justify-content: center
- font-family: $lato
- font-weight: 900
+ font-weight: 700
font-size: 16px
line-height: 15px
color: $white
@@ -62,10 +52,6 @@ section.banner +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 index e8aee16..943c4b6 100644 --- a/sass/front-page/bottom-text.sass +++ b/sass/front-page/bottom-text.sass @@ -1,10 +1,11 @@ -@import settings.sass
+@import ../settings.sass
-section.bottom-text
- div.bottom-text__inner
+.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
@@ -14,6 +15,13 @@ section.bottom-text 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 + 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 diff --git a/sass/front-page/inform-columns.sass b/sass/front-page/inform-columns.sass index 68930df..250982f 100644 --- a/sass/front-page/inform-columns.sass +++ b/sass/front-page/inform-columns.sass @@ -1,6 +1,7 @@ -@import settings.sass
+@import ../settings.sass
section.inform-columns
+
div.inform-column__inner
display: grid
grid-template-columns: 1fr 1fr
@@ -17,6 +18,7 @@ section.inform-columns grid-gap: 40px
padding: 48px 54px 59px
+resp(md)
+ grid-gap: 25px
padding: 30px 25px
+resp(sm)
padding: 30px 24px 40px
@@ -30,7 +32,6 @@ section.inform-columns padding-right: 19px
div.inform-column__title
h3
- font-family: $lato
font-weight: bold
font-size: 28px
line-height: 150%
@@ -44,6 +45,8 @@ section.inform-columns text-align: left
margin-bottom: 29px
font-size: 16px
+ +resp(md)
+ margin-bottom: 20px
&:last-child
margin-bottom: 10px
+resp(sm)
@@ -57,25 +60,24 @@ section.inform-columns +resp(sm)
align-self: end
a.inform-column__btn
- max-width: 311px
- width: 100%
- height: 58px
+ 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-family: $lato
- font-weight: 900
+ font-weight: 700
font-size: 16px
- line-height: 15px
color: $black
text-decoration: none
transition: 0.3s
+ line-height: 1.5
+resp(sm)
- height: 38px
- width: 100%
+ min-height: 28px
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 index 54e0786..c3b4fdd 100644 --- a/sass/front-page/main-text.sass +++ b/sass/front-page/main-text.sass @@ -1,13 +1,20 @@ -@import settings.sass
+@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: 34px 0 64px
\ No newline at end of file + padding: 0 0 55px
+ p
+ font-size: 18px
+ +resp(sm)
+ font-size: 16px
+ +resp(esm)
+ font-size: 14px
\ No newline at end of file diff --git a/sass/header.sass b/sass/header.sass index c409dab..0ae1105 100644 --- a/sass/header.sass +++ b/sass/header.sass @@ -28,7 +28,6 @@ header +resp(lg)
margin-right: 16px
div.header__text
- font-family: $lato
font-weight: 500
font-size: 16px
line-height: 25px
@@ -53,7 +52,6 @@ header +resp(sm)
display: none
a
- font-family: $lato
font-weight: 600
font-size: 15px
line-height: 14px
diff --git a/sass/main.sass b/sass/main.sass index 53de465..ece16ef 100644 --- a/sass/main.sass +++ b/sass/main.sass @@ -1,36 +1,96 @@ @import settings.sass
-@import fonts.sass
body
- font-family: $lato, sans-serif
+ font-family: sans-serif
margin: 0
color: $black
h1, h2, h3, h4, h5, p, ul, li
margin: 0
+h1
+ font-weight: 800
+ font-size: 45px
+ line-height: 120%
+ letter-spacing: 0.02em
+ color: $black
+ +resp(sm)
+ font-size: 32px
+ +resp(esm)
+ font-size: 28px
h2
- font-family: $lato
font-weight: 800
- font-size: 38px
+ font-size: 32px
line-height: 140%
+resp(sm)
- font-size: 24px
+ font-size: 21px
p
- font-family: $lato
font-weight: normal
- font-size: 18px
line-height: 180%
- text-align: center
+ font-size: 16px
color: $black
- +resp(sm)
+ +resp(esm)
font-size: 14px
+ @supports (hyphens: auto)
+ text-align: justify
+ hyphens: auto
+
+pre, code, sample
+ white-space: pre-wrap
+ hyphens: none
div.container
max-width: 1340px
margin: 0 auto
padding-left: 15px
padding-right: 15px
+ &.small
+ max-width: 1000px
+
+#content
+ padding-top: 60px
+ padding-bottom: 50px
+ +resp(sm)
+ padding-top: 40px
+ padding-bottom: 20px
+ +resp(esm)
+ padding-top: 30px
+ h1
+ margin-bottom: 25px
+ +resp(esm)
+ margin-bottom: 15px
+ h2
+ margin-top: 25px
+ margin-bottom: 20px
+ +resp(esm)
+ margin-top: 20px
+ margin-bottom: 15px
+ p
+ margin: 15px 0
+ +resp(esm)
+ margin: 9px 0
+ ul
+ +resp(sm)
+ padding-left: 25px
+ +resp(esm)
+ padding-left: 15px
+ li
+ list-style: none
+ display: flex
+ align-items: center
+ margin: 12px 0
+ line-height: 150%
+ +resp(esm)
+ font-size: 14px
+ margin: 10px 0
+ &:before
+ margin-top: 4px
+ margin-right: 10px
+ content: url('../img/global/list-element.svg')
+ a
+ color: $dark-orange
+ &:hover
+ text-decoration: none
@import header.sass
@import front-page/banner.sass
diff --git a/sass/settings.sass b/sass/settings.sass index 136578d..9cf5631 100644 --- a/sass/settings.sass +++ b/sass/settings.sass @@ -1,5 +1,3 @@ -// fonts
-$lato : "Lato", "Arial", sans-serif
// colors
$white : #ffffff
$orange : #FFBE12
|