diff --git a/src/images/icons/arrow.png b/src/images/icons/arrow.png new file mode 100644 index 000000000..c8b103e2f Binary files /dev/null and b/src/images/icons/arrow.png differ diff --git a/src/images/icons/facebook.png b/src/images/icons/facebook.png new file mode 100644 index 000000000..588de403f Binary files /dev/null and b/src/images/icons/facebook.png differ diff --git a/src/images/icons/instagram.png b/src/images/icons/instagram.png new file mode 100644 index 000000000..31407c70a Binary files /dev/null and b/src/images/icons/instagram.png differ diff --git a/src/images/icons/scroll-up.png b/src/images/icons/scroll-up.png new file mode 100644 index 000000000..639b16f1f Binary files /dev/null and b/src/images/icons/scroll-up.png differ diff --git a/src/images/icons/telegram.png b/src/images/icons/telegram.png new file mode 100644 index 000000000..264d1dea5 Binary files /dev/null and b/src/images/icons/telegram.png differ diff --git a/src/images/icons/twitter.png b/src/images/icons/twitter.png new file mode 100644 index 000000000..73783c5f6 Binary files /dev/null and b/src/images/icons/twitter.png differ diff --git a/src/index.html b/src/index.html index 2f0282719..73037b0a0 100644 --- a/src/index.html +++ b/src/index.html @@ -323,34 +323,119 @@

Міжнародний
-
+ + diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..5682d3987 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,129 @@ +.footer { + background-color: #3f5252; + @include contentPaddingInline; + + @include onTablet { + @include pageGrid; + } + + &__content { + &--1 { + padding-top: 34px; + + @include onTablet { + padding-top: 50px; + grid-column: 1 / 3; + } + } + + &--2 { + margin-top: 50px; + + @include onTablet { + grid-column: 3 / 5; + } + + @include onDesktop { + grid-column: 5 / 7; + } + } + + } + + &__title { + font-family: "Playfair Display", sans-serif; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: 125%; + color: #f1f5f4; + } + + &__info { + color: #f1f5f4; + font-family: "Raleway", sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 150%; + margin-top: 10px; + } + + &__icon { + &-wrapper { + margin-top: 30px; + + @include onTablet { + margin-top: 50px; + } + } + } + + &__nav { + + margin-top: 50px; + @include onTablet { + grid-column: 5 / 6; + } + + @include onDesktop { + grid-column: 9 / 11; + } + + &-link { + text-decoration: none; + color: #f1f5f4; + font-family: "Raleway", sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 150%; + display: block; + margin-top: 5px; + + &--1 { + margin-top: 10px; + } + } + } + + &__endline { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 60px; + padding-bottom: 30px; + + @include onTablet { + grid-column: 1 / -1; + padding-top: 62px; + } + + &-text { + font-family: "Raleway", sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 140%; + color: #f1f5f4; + padding-right: 22px; + + &:last-child { + padding-right: 0; + } + + @include onDesktop { + padding-right: 102px; + } + + &-wrapper { + display: flex; + } + } + + &-picture { + height: 30px; + width: 30px; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..705325e97 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,9 @@ +.icon { + width: 20px; + height: 20px; + margin-right: 20px; + + &:last-child { + margin-right: 0; + } +} diff --git a/src/styles/blocks/news.scss b/src/styles/blocks/news.scss index c5b95e8f6..1a7cf0bfc 100644 --- a/src/styles/blocks/news.scss +++ b/src/styles/blocks/news.scss @@ -131,6 +131,10 @@ &__info { margin-bottom: 50px; + + @include onTablet { + margin-bottom: 0; + } &-date { color: #1c1b29; font-family: "Raleway", sans-serif; @@ -184,6 +188,10 @@ &--2 { margin-bottom: 30px; + + @include onTablet { + margin-bottom: 0; + } } } diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss index 76ab805ae..00ac3f105 100644 --- a/src/styles/blocks/page.scss +++ b/src/styles/blocks/page.scss @@ -4,6 +4,7 @@ * { box-sizing: border-box; + scroll-behavior: smooth; } body { @@ -43,3 +44,25 @@ h3 { main { background-color: #f1f5f4; } + +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +textarea:-webkit-autofill, +textarea:-webkit-autofill:hover, +textarea:-webkit-autofill:focus, +select:-webkit-autofill, +select:-webkit-autofill:hover, +select:-webkit-autofill:focus, +select:-webkit-autofill:focus-visible { + font-family: "Raleway", sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 150%; + width: 280px; + color: #1c1b29; + border: none; + border-bottom: 1px solid #1c1b29; + background-color: #f1f5f4; +} diff --git a/src/styles/blocks/subscibe.scss b/src/styles/blocks/subscibe.scss index 6a486bfa1..5ea6abe48 100644 --- a/src/styles/blocks/subscibe.scss +++ b/src/styles/blocks/subscibe.scss @@ -1,10 +1,16 @@ .subscribe { - &__content { - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; - margin: 0 auto; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + margin: 0 auto; + + @include onTablet { + @include pageGrid; + } + + @include onDesktop { + padding-top: 200px; } &__title { @@ -15,6 +21,26 @@ font-style: normal; font-weight: 700; line-height: 125%; + width: 280px; + + @include onTablet { + width: 100%; + padding-top: 160px; + font-size: 40px; + } + + @include onDesktop { + font-size: 48px; + padding-top: 0; + } + + &-wrapper { + grid-column: 1 / 6; + + @include onDesktop { + grid-column: 1 / 5; + } + } } &__info { @@ -25,13 +51,44 @@ line-height: 150%; color: #1c1b29; margin-top: 20px; + width: 280px; + + @include onTablet { + width: 100%; + } + + @include onDesktop { + margin-top: 0; + } + + &-wrapper { + grid-column: 1 / 6; + + @include onDesktop { + grid-column: 7 / 13; + align-self: start; + } + } } - &__form-wrapper { - &__form { - margin-top: 50px; - display: flex; - justify-content: center; + &__form { + margin-top: 50px; + display: flex; + justify-content: center; + flex-direction: column; + + &-wrapper { + padding-bottom: 80px; + + @include onTablet { + grid-column: 1 / 5; + padding-bottom: 128px; + } + + @include onDesktop { + grid-column: 1 / 6; + padding-bottom: 200px; + } } } @@ -39,13 +96,34 @@ font-family: "Raleway", sans-serif; font-size: 16px; font-style: normal; - font-weight: 400; + font-weight: 700; line-height: 150%; width: 280px; color: #1c1b29; + border: none; + border-bottom: 1px solid #1c1b29; + background-color: #f1f5f4; + outline: none; + + &::placeholder { + color: #1c1b29; + font-weight: 400; + } + + @include onTablet { + width: 450px; + } + + @include onDesktop { + width: 470px; + } } &-button { margin-top: 30px; + + @include onDesktop { + margin-top: 40px; + } } } diff --git a/src/styles/blocks/visit.scss b/src/styles/blocks/visit.scss index 5d89a8c5f..1f2efe8a9 100644 --- a/src/styles/blocks/visit.scss +++ b/src/styles/blocks/visit.scss @@ -1,7 +1,10 @@ .visit { background-color: #3f5252; - display: flex; - justify-content: flex-end; + + @include onDesktop { + display: flex; + justify-content: flex-end; + } &__title { color: #f1f5f4; diff --git a/src/styles/main.scss b/src/styles/main.scss index 6238ca01a..16819acb4 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -16,3 +16,5 @@ body { @import "../styles/blocks/visit.scss"; @import "../styles/blocks/news.scss"; @import "../styles/blocks/subscibe.scss"; +@import "../styles/blocks/footer.scss"; +@import "../styles/blocks/icon.scss";