diff --git a/source/catalog.html b/source/catalog.html index 36e5ec0..d9e5f83 100644 --- a/source/catalog.html +++ b/source/catalog.html @@ -16,7 +16,7 @@
-
+
- - - Логотип Cat Energy. + + Логотип Cat Energy. -
-
-

Каталог продукции

+

Каталог продукции

-
-

Дополнительные товары

- - - -
- -

Закажите все и получите чехол для кота в подарок!

+
+

Дополнительные товары

+ +
    + +
  • +

    Сахарозаменитель

    +

    + 1 упаковка (100 г) + 200 ₽ +

    + + Заказать +
    • + +
  • +

    питьевая вода

    +

    + 5 литров + 50 ₽ +

    + + Заказать +
    • + +
  • +

    молоко

    +

    + 1 литр + 100 ₽ +

    + + Заказать +
    • + +
  • +

    витамины

    +

    + 1 упаковка (30 г) + 300 ₽ +

    + + Заказать +
    • + +
+ +
+ +

Закажите все и получите чехол для кота в подарок!

+
+
@@ -326,38 +307,43 @@ -
- + +
+ HTML Academy - - Логотип HTML Academy. + + + + + +
diff --git a/source/form.html b/source/form.html index b62bcc9..c964e71 100644 --- a/source/form.html +++ b/source/form.html @@ -16,7 +16,7 @@
-
+
- - - Логотип Cat Energy. + + Логотип Cat Energy. -
-
+

Подбор программы

Заполните анкету, и мы подберем @@ -89,10 +91,10 @@

-
+
-
    +
-
+
Контактные данные (владельца кота) -
    +
    • @@ -131,8 +135,10 @@
    • @@ -140,16 +146,20 @@
-
+
- + +
+ +
+
-
- Дополнительно. +
+ Дополнительно -
    +
- -

* — Обязательные поля

+
+ +

* — Обязательные поля

+
@@ -201,38 +216,43 @@ -
- + +
+ HTML Academy - - Логотип HTML Academy. + + + + + +
diff --git a/source/images/catalog/catalog-1-tablet-desktop@1x.jpg b/source/images/catalog/catalog-1-tablet-desktop@1x.jpg deleted file mode 100644 index 420113d..0000000 Binary files a/source/images/catalog/catalog-1-tablet-desktop@1x.jpg and /dev/null differ diff --git a/source/images/catalog/catalog-1-tablet-desktop@1x.png b/source/images/catalog/catalog-1-tablet-desktop@1x.png new file mode 100644 index 0000000..1e11d00 Binary files /dev/null and b/source/images/catalog/catalog-1-tablet-desktop@1x.png differ diff --git a/source/images/catalog/catalog-1-tablet-desktop@1x.webp b/source/images/catalog/catalog-1-tablet-desktop@1x.webp index 222cdbc..b4f1867 100644 Binary files a/source/images/catalog/catalog-1-tablet-desktop@1x.webp and b/source/images/catalog/catalog-1-tablet-desktop@1x.webp differ diff --git a/source/images/catalog/catalog-1-tablet-desktop@2x.jpg b/source/images/catalog/catalog-1-tablet-desktop@2x.jpg deleted file mode 100644 index 28896f4..0000000 Binary files a/source/images/catalog/catalog-1-tablet-desktop@2x.jpg and /dev/null differ diff --git a/source/images/catalog/catalog-1-tablet-desktop@2x.png b/source/images/catalog/catalog-1-tablet-desktop@2x.png new file mode 100644 index 0000000..23a9989 Binary files /dev/null and b/source/images/catalog/catalog-1-tablet-desktop@2x.png differ diff --git a/source/images/catalog/catalog-1-tablet-desktop@2x.webp b/source/images/catalog/catalog-1-tablet-desktop@2x.webp index 34f69e7..18a50ef 100644 Binary files a/source/images/catalog/catalog-1-tablet-desktop@2x.webp and b/source/images/catalog/catalog-1-tablet-desktop@2x.webp differ diff --git a/source/images/catalog/catalog-2-tablet-desktop@1x.jpg b/source/images/catalog/catalog-2-tablet-desktop@1x.jpg deleted file mode 100644 index 885f67e..0000000 Binary files a/source/images/catalog/catalog-2-tablet-desktop@1x.jpg and /dev/null differ diff --git a/source/images/catalog/catalog-2-tablet-desktop@1x.png b/source/images/catalog/catalog-2-tablet-desktop@1x.png new file mode 100644 index 0000000..5310cef Binary files /dev/null and b/source/images/catalog/catalog-2-tablet-desktop@1x.png differ diff --git a/source/images/catalog/catalog-2-tablet-desktop@1x.webp b/source/images/catalog/catalog-2-tablet-desktop@1x.webp index 917b45c..2d88aa7 100644 Binary files a/source/images/catalog/catalog-2-tablet-desktop@1x.webp and b/source/images/catalog/catalog-2-tablet-desktop@1x.webp differ diff --git a/source/images/catalog/catalog-2-tablet-desktop@2x.jpg b/source/images/catalog/catalog-2-tablet-desktop@2x.jpg deleted file mode 100644 index 41e0e78..0000000 Binary files a/source/images/catalog/catalog-2-tablet-desktop@2x.jpg and /dev/null differ diff --git a/source/images/catalog/catalog-2-tablet-desktop@2x.png b/source/images/catalog/catalog-2-tablet-desktop@2x.png new file mode 100644 index 0000000..eec0e69 Binary files /dev/null and b/source/images/catalog/catalog-2-tablet-desktop@2x.png differ diff --git a/source/images/catalog/catalog-2-tablet-desktop@2x.webp b/source/images/catalog/catalog-2-tablet-desktop@2x.webp index a492181..1ca710b 100644 Binary files a/source/images/catalog/catalog-2-tablet-desktop@2x.webp and b/source/images/catalog/catalog-2-tablet-desktop@2x.webp differ diff --git a/source/images/catalog/catalog-3-tablet-desktop@1x.jpg b/source/images/catalog/catalog-3-tablet-desktop@1x.jpg deleted file mode 100644 index a1b22d1..0000000 Binary files a/source/images/catalog/catalog-3-tablet-desktop@1x.jpg and /dev/null differ diff --git a/source/images/catalog/catalog-3-tablet-desktop@1x.png b/source/images/catalog/catalog-3-tablet-desktop@1x.png new file mode 100644 index 0000000..2f5f879 Binary files /dev/null and b/source/images/catalog/catalog-3-tablet-desktop@1x.png differ diff --git a/source/images/catalog/catalog-3-tablet-desktop@1x.webp b/source/images/catalog/catalog-3-tablet-desktop@1x.webp index c21d242..9f2aa8a 100644 Binary files a/source/images/catalog/catalog-3-tablet-desktop@1x.webp and b/source/images/catalog/catalog-3-tablet-desktop@1x.webp differ diff --git a/source/images/catalog/catalog-3-tablet-desktop@2x.jpg b/source/images/catalog/catalog-3-tablet-desktop@2x.jpg deleted file mode 100644 index 4e84e49..0000000 Binary files a/source/images/catalog/catalog-3-tablet-desktop@2x.jpg and /dev/null differ diff --git a/source/images/catalog/catalog-3-tablet-desktop@2x.png b/source/images/catalog/catalog-3-tablet-desktop@2x.png new file mode 100644 index 0000000..8c06fab Binary files /dev/null and b/source/images/catalog/catalog-3-tablet-desktop@2x.png differ diff --git a/source/images/catalog/catalog-3-tablet-desktop@2x.webp b/source/images/catalog/catalog-3-tablet-desktop@2x.webp index 7961ac5..1955a18 100644 Binary files a/source/images/catalog/catalog-3-tablet-desktop@2x.webp and b/source/images/catalog/catalog-3-tablet-desktop@2x.webp differ diff --git a/source/images/catalog/catalog-4-tablet-desktop@1x.jpg b/source/images/catalog/catalog-4-tablet-desktop@1x.jpg deleted file mode 100644 index 4d736b3..0000000 Binary files a/source/images/catalog/catalog-4-tablet-desktop@1x.jpg and /dev/null differ diff --git a/source/images/catalog/catalog-4-tablet-desktop@1x.png b/source/images/catalog/catalog-4-tablet-desktop@1x.png new file mode 100644 index 0000000..9a8ab87 Binary files /dev/null and b/source/images/catalog/catalog-4-tablet-desktop@1x.png differ diff --git a/source/images/catalog/catalog-4-tablet-desktop@1x.webp b/source/images/catalog/catalog-4-tablet-desktop@1x.webp index 3e5e8c1..28165f0 100644 Binary files a/source/images/catalog/catalog-4-tablet-desktop@1x.webp and b/source/images/catalog/catalog-4-tablet-desktop@1x.webp differ diff --git a/source/images/catalog/catalog-4-tablet-desktop@2x.jpg b/source/images/catalog/catalog-4-tablet-desktop@2x.jpg deleted file mode 100644 index 1aadb8a..0000000 Binary files a/source/images/catalog/catalog-4-tablet-desktop@2x.jpg and /dev/null differ diff --git a/source/images/catalog/catalog-4-tablet-desktop@2x.png b/source/images/catalog/catalog-4-tablet-desktop@2x.png new file mode 100644 index 0000000..81babe6 Binary files /dev/null and b/source/images/catalog/catalog-4-tablet-desktop@2x.png differ diff --git a/source/images/catalog/catalog-4-tablet-desktop@2x.webp b/source/images/catalog/catalog-4-tablet-desktop@2x.webp index 3705a85..3311b81 100644 Binary files a/source/images/catalog/catalog-4-tablet-desktop@2x.webp and b/source/images/catalog/catalog-4-tablet-desktop@2x.webp differ diff --git a/source/images/catalog/catalog-5-tablet-desktop@1x.jpg b/source/images/catalog/catalog-5-tablet-desktop@1x.jpg deleted file mode 100644 index 65d6444..0000000 Binary files a/source/images/catalog/catalog-5-tablet-desktop@1x.jpg and /dev/null differ diff --git a/source/images/catalog/catalog-5-tablet-desktop@1x.png b/source/images/catalog/catalog-5-tablet-desktop@1x.png new file mode 100644 index 0000000..10a58c8 Binary files /dev/null and b/source/images/catalog/catalog-5-tablet-desktop@1x.png differ diff --git a/source/images/catalog/catalog-5-tablet-desktop@1x.webp b/source/images/catalog/catalog-5-tablet-desktop@1x.webp index 3669ace..f391305 100644 Binary files a/source/images/catalog/catalog-5-tablet-desktop@1x.webp and b/source/images/catalog/catalog-5-tablet-desktop@1x.webp differ diff --git a/source/images/catalog/catalog-5-tablet-desktop@2x.jpg b/source/images/catalog/catalog-5-tablet-desktop@2x.jpg deleted file mode 100644 index 6f08861..0000000 Binary files a/source/images/catalog/catalog-5-tablet-desktop@2x.jpg and /dev/null differ diff --git a/source/images/catalog/catalog-5-tablet-desktop@2x.png b/source/images/catalog/catalog-5-tablet-desktop@2x.png new file mode 100644 index 0000000..bce9b82 Binary files /dev/null and b/source/images/catalog/catalog-5-tablet-desktop@2x.png differ diff --git a/source/images/catalog/catalog-5-tablet-desktop@2x.webp b/source/images/catalog/catalog-5-tablet-desktop@2x.webp index bd7aebf..27d464c 100644 Binary files a/source/images/catalog/catalog-5-tablet-desktop@2x.webp and b/source/images/catalog/catalog-5-tablet-desktop@2x.webp differ diff --git a/source/images/catalog/catalog-6-tablet-desktop@1x.jpg b/source/images/catalog/catalog-6-tablet-desktop@1x.jpg deleted file mode 100644 index 0264b36..0000000 Binary files a/source/images/catalog/catalog-6-tablet-desktop@1x.jpg and /dev/null differ diff --git a/source/images/catalog/catalog-6-tablet-desktop@1x.png b/source/images/catalog/catalog-6-tablet-desktop@1x.png new file mode 100644 index 0000000..9dbf808 Binary files /dev/null and b/source/images/catalog/catalog-6-tablet-desktop@1x.png differ diff --git a/source/images/catalog/catalog-6-tablet-desktop@1x.webp b/source/images/catalog/catalog-6-tablet-desktop@1x.webp index 88cecd0..363b061 100644 Binary files a/source/images/catalog/catalog-6-tablet-desktop@1x.webp and b/source/images/catalog/catalog-6-tablet-desktop@1x.webp differ diff --git a/source/images/catalog/catalog-6-tablet-desktop@2x.jpg b/source/images/catalog/catalog-6-tablet-desktop@2x.jpg deleted file mode 100644 index b342118..0000000 Binary files a/source/images/catalog/catalog-6-tablet-desktop@2x.jpg and /dev/null differ diff --git a/source/images/catalog/catalog-6-tablet-desktop@2x.png b/source/images/catalog/catalog-6-tablet-desktop@2x.png new file mode 100644 index 0000000..f8f44e0 Binary files /dev/null and b/source/images/catalog/catalog-6-tablet-desktop@2x.png differ diff --git a/source/images/catalog/catalog-6-tablet-desktop@2x.webp b/source/images/catalog/catalog-6-tablet-desktop@2x.webp index 5c3499c..c04d1d1 100644 Binary files a/source/images/catalog/catalog-6-tablet-desktop@2x.webp and b/source/images/catalog/catalog-6-tablet-desktop@2x.webp differ diff --git a/source/images/catalog/catalog-7-tablet-desktop@1x.jpg b/source/images/catalog/catalog-7-tablet-desktop@1x.jpg deleted file mode 100644 index 2335133..0000000 Binary files a/source/images/catalog/catalog-7-tablet-desktop@1x.jpg and /dev/null differ diff --git a/source/images/catalog/catalog-7-tablet-desktop@1x.png b/source/images/catalog/catalog-7-tablet-desktop@1x.png new file mode 100644 index 0000000..1b109d1 Binary files /dev/null and b/source/images/catalog/catalog-7-tablet-desktop@1x.png differ diff --git a/source/images/catalog/catalog-7-tablet-desktop@1x.webp b/source/images/catalog/catalog-7-tablet-desktop@1x.webp index e723200..059afca 100644 Binary files a/source/images/catalog/catalog-7-tablet-desktop@1x.webp and b/source/images/catalog/catalog-7-tablet-desktop@1x.webp differ diff --git a/source/images/catalog/catalog-7-tablet-desktop@2x.jpg b/source/images/catalog/catalog-7-tablet-desktop@2x.jpg deleted file mode 100644 index 48fc79d..0000000 Binary files a/source/images/catalog/catalog-7-tablet-desktop@2x.jpg and /dev/null differ diff --git a/source/images/catalog/catalog-7-tablet-desktop@2x.png b/source/images/catalog/catalog-7-tablet-desktop@2x.png new file mode 100644 index 0000000..16bc3f9 Binary files /dev/null and b/source/images/catalog/catalog-7-tablet-desktop@2x.png differ diff --git a/source/images/catalog/catalog-7-tablet-desktop@2x.webp b/source/images/catalog/catalog-7-tablet-desktop@2x.webp index 638c2c1..24f2967 100644 Binary files a/source/images/catalog/catalog-7-tablet-desktop@2x.webp and b/source/images/catalog/catalog-7-tablet-desktop@2x.webp differ diff --git a/source/index.html b/source/index.html index 5293ca3..da0e8f8 100644 --- a/source/index.html +++ b/source/index.html @@ -16,7 +16,7 @@
-
+
- - Логотип Cat Energy. + Логотип Cat Energy. -
-
- + @@ -186,38 +217,43 @@ -
- + +
+ HTML Academy - - Логотип HTML Academy. + + + + + +
diff --git a/source/scripts/index.js b/source/scripts/index.js index 7a738ce..5697692 100644 --- a/source/scripts/index.js +++ b/source/scripts/index.js @@ -1 +1,14 @@ -/* в этот файл добавляет скрипты*/ +window.addEventListener('load', () => { + const button = document.querySelector('.js-burger'); + const navMenu = document.querySelector('.js-nav-menu'); + + navMenu.classList.remove('site-list--nojs'); + + button.addEventListener('click', (e) => { + e.preventDefault(); + + button.classList.toggle('is-active'); + navMenu.classList.toggle('is-active'); + }); +}); + diff --git a/source/styles/blocks/card-row.scss b/source/styles/blocks/card-row.scss index 0a751cf..96e1e72 100644 --- a/source/styles/blocks/card-row.scss +++ b/source/styles/blocks/card-row.scss @@ -1,14 +1,93 @@ +.card-row { + padding: 13px 0 18px; + + @media (min-width: $tablet-width) { + padding: 25px 38px 28px; + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 16px; + row-gap: 27px; + } + + @media (min-width: $desktop-width) { + align-items: baseline; + grid-template-columns: 1fr 80px 1fr 80px 1fr; + column-gap: 0; + padding: 15px 0 18px; + } +} + .card-row__heading { + margin: 0; + margin-bottom: 13px; + + color: $color-gray-850; + font-family: $font-heading; font-size: 16px; font-weight: 400; - line-height: 16px; + line-height: 1; text-transform: uppercase; - color: $color-gray-850; + + @media (min-width: $tablet-width) { + margin-bottom: 0; + + font-size: 20px; + } } -.card-row__text { +.card-row__list { + margin-top: 0; + margin-bottom: 15px; + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 8px; + color: $color-gray-700; - font-size: 14px; - line-height: 14px; + + line-height: 1; + + @media (min-width: $tablet-width) { + margin-bottom: 0; + grid-template-columns: 1fr 82px; + align-items: end; + } + + @media (min-width: $desktop-width) { + grid-column: 3 / 5; + } +} + +.card-row__definition { + margin: 0; + + &:last-child { + text-align: right; + } + + @media (min-width: $tablet-width) { + text-align: right; + } + + @media (min-width: $desktop-width) { + padding-right: 12px; + + text-align: left; + + &:last-child { + text-align: left; + } + } +} + +.card-row__button { + width: 100%; + + @media (min-width: $tablet-width) { + grid-column: 1 / -1; + } + + @media (min-width: $desktop-width) { + grid-column: 5 / 6; + } } diff --git a/source/styles/blocks/card.scss b/source/styles/blocks/card.scss index 3905557..704a4d6 100644 --- a/source/styles/blocks/card.scss +++ b/source/styles/blocks/card.scss @@ -1,23 +1,160 @@ .card { - list-style: none; - padding: 0; + position: relative; + z-index: 0; + + padding-top: 19px; + padding-bottom: 24px; + display: grid; + + @media (max-width: $mobile-width) { + grid-template-columns: 1fr 1fr; + grid-template-areas: + "img link" + "img list" + "button button"; + } + + @media (min-width: $tablet-width) { + padding: 8px 38px 41px; + grid-template-rows: 200px auto; + grid-template-areas: + "img" + "link" + "list" + "button"; + + background-color: $color-gray-50; + background-image: linear-gradient(to bottom, $color-white 80px, $color-gray-50 80px); + } +} + +.card__link { + margin-bottom: 9px; + padding-right: 41px; + grid-area: link; + + color: $color-gray-850; + + text-decoration: none; + + &::after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 80px; + left: 0; + } + + @media (min-width: $tablet-width) { + margin-top: 33px; + margin-bottom: 6px; + padding: 0 45px; + + &::after { + bottom: 120px; + } + } + + @media (min-width: $desktop-width) { + padding: 0 5px; + } } .card__heading { + margin: 0; + font-family: $font-heading; font-size: 16px; + font-weight: 400; line-height: 20px; text-transform: uppercase; - font-weight: 400; - color: $color-gray-850; + + @media (min-width: $tablet-width) { + font-size: 20px; + line-height: 24px; + text-align: center; + } } -.card__list { - list-style: none; - padding: 0; +.card__picture, +.card__img { + grid-area: img; + align-self: center; + justify-self: center; + width: auto; + display: block; + + @media (min-width: $tablet-width) { + min-width: 161px; + } +} + +.card__img { + margin-bottom: 10px; + + @media (min-width: $tablet-width) { + margin-bottom: 0; + } + + @media (min-width: $desktop-width) { + margin-bottom: 15px; + } } -.card__description { +.card__list { + margin: 0; + margin-bottom: 13px; + padding: 9px 0; + grid-area: list; + display: grid; + grid-template-columns: 1fr 1fr; + row-gap: 2px; + + color: $color-gray-700; + font-size: 12px; - line-height: 16px; + line-height: 14px; + + @media (min-width: $tablet-width) { + margin-bottom: 25px; + + font-size: 16px; + line-height: 24px; + } +} + +.card__title { + margin: 0; + padding-right: 4px; + + @media (min-width: $tablet-width) { + padding-top: 2px; + padding-bottom: 3px; + border-bottom: 1px solid $color-gray-250; + } +} + +.card__definition { + margin: 0; + padding-left: 4px; + + text-align: right; + + @media (min-width: $tablet-width) { + padding-top: 2px; + padding-bottom: 3px; + border-bottom: 1px solid $color-gray-250; + } +} + +.card__definition--price { + text-transform: uppercase; +} + +.card__button { + position: relative; + z-index: 1; + + grid-area: button; } diff --git a/source/styles/blocks/catalog-additional.scss b/source/styles/blocks/catalog-additional.scss index da89c1d..cd67bbc 100644 --- a/source/styles/blocks/catalog-additional.scss +++ b/source/styles/blocks/catalog-additional.scss @@ -1,4 +1,100 @@ +.catalog-additional { + position: relative; + padding: 25px 0 35px; + + @media (min-width: $tablet-width) { + padding-top: 68px; + padding-bottom: 76px; + } + + @media (min-width: $desktop-width) { + padding-top: 74px; + padding-bottom: 86px; + } +} + +.catalog-additional__container { + display: grid; + + @media (min-width: $desktop-width) { + grid-template-columns: repeat(4, 1fr); + column-gap: 80px; + } +} + +.catalog-additional__heading { + margin: 0; + margin-left: -20px; + margin-bottom: 35px; + padding: 0 20px; + justify-self: start; + + background-color: $color-white; + + font-family: $font-heading; + font-size: 24px; + font-weight: 400; + line-height: 24px; + + @media (min-width: $tablet-width) { + margin-left: 0; + margin-bottom: 79px; + padding: 0 36px; + + font-size: 36px; + line-height: 36px; + } + + @media (min-width: $desktop-width) { + margin-bottom: 80px; + margin-left: -40px; + padding: 0 35px 0 40px; + grid-column: 1 / -1; + } +} + .catalog-additional__list { + margin: 0; + margin-bottom: 35px; padding: 0; list-style: none; + + @media (min-width: $tablet-width) { + margin-bottom: 68px; + + border: 1px solid $color-gray-250; + } + + @media (min-width: $desktop-width) { + margin-bottom: 0; + grid-column: 1 / -2; + + border: none; + } +} + +.catalog-additional__item { + border-top: 1px solid $color-gray-250; + + @media (max-width: $mobile-width) { + &:last-child { + border-bottom: 1px solid $color-gray-250; + } + } + + @media (min-width: $tablet-width) { + &:first-child { + border-top: none; + } + } + + @media (min-width: $desktop-width) { + &:first-child { + border-top: 1px solid $color-gray-250; + } + + &:last-child { + border-bottom: 1px solid $color-gray-250; + } + } } diff --git a/source/styles/blocks/catalog-list.scss b/source/styles/blocks/catalog-list.scss index 9d0558e..c634b01 100644 --- a/source/styles/blocks/catalog-list.scss +++ b/source/styles/blocks/catalog-list.scss @@ -1,3 +1,49 @@ -.page-footer { - margin: 0; +.catalog-list { + overflow: hidden; + + @media (max-width: $mobile-width) { + border-bottom: 1px solid $color-gray-100; + } + + @media (min-width: $tablet-width) { + padding-top: 13px; + } + + @media (min-width: $desktop-width) { + padding-top: 16px; + } +} + +.catalog-list__container { + padding: 0; + + @media (min-width: $tablet-width) { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 60px; + } + + @media (min-width: $desktop-width) { + grid-template-columns: repeat(4, 1fr); + column-gap: 80px; + row-gap: 64px; + } +} + +.catalog-list__item { + @media (max-width: $mobile-width) { + position: relative; + + &::before { + content: ""; + position: absolute; + top: 0; + left: calc(50% - 50vw); + + width: 100vw; + height: 1px; + + background-color: $color-gray-100; + } + } } diff --git a/source/styles/blocks/catalog-preview.scss b/source/styles/blocks/catalog-preview.scss index 5403724..820b6d9 100644 --- a/source/styles/blocks/catalog-preview.scss +++ b/source/styles/blocks/catalog-preview.scss @@ -1,72 +1,237 @@ +.catalog-preview { + display: grid; + + @media (min-width: $tablet-width) { + padding-top: 0; + } + + @media (min-width: $desktop-width) { + padding-top: 82px; + } +} + +.catalog-preview__container { + display: grid; + gap: 20px; + + @media (min-width: $desktop-width) { + grid-template-columns: 1fr 1fr; + gap: 80px; + } +} + +.catalog-preview__item { + position: relative; + padding: 21px 33px 18px 20px; + background-color: $color-gray-50; + + + @media (min-width: $tablet-width) { + padding: 69px 316px 60px 52px; + } + + @media (min-width: $desktop-width) { + padding: 47px 52px 62px; + } +} + .catalog-preview__heading { font-family: $font-heading; font-size: 24px; - line-height: 37px; + line-height: 36px; color: $color-black; text-transform: uppercase; font-weight: 400; - position: relative; + margin: 0; + display: flex; + align-items: center; + + + min-height: 50px; + margin-bottom: 22px; padding-left: 72px; -} -.catalog-preview__link { - font-family: $font-heading; - font-size: 20px; - line-height: normal; - text-transform: uppercase; - text-decoration: none; - color: $color-black; + @media (min-width: $tablet-width) { + margin-bottom: 18px; + padding-left: 0; + position: static; + font-size: 36px; + } - padding-right: 25px; - background-size: 35px 10px; - background-repeat: no-repeat; - background-position: 108% 50%; - background-image: url("../../images/icons/stack.svg#arrow"); -} + @media (min-width: $desktop-width) { + min-height: 100px; + margin-bottom: 39px; + padding-left: 162px; + position: relative; + } + + &::before, + &::after { + content: ""; + position: absolute; + } -.catalog-preview__heading--slim { &::before { content: ""; position: absolute; left: 0; top: 0; + width: 50px; height: 50px; + background-color: $color-primary-500; border-radius: 50%; + + @media (min-width: $tablet-width) { + top: calc(50% - 95px); + right: 62px; + left: auto; + + width: 200px; + height: 200px; + } + + @media (min-width: $desktop-width) { + top: calc(50% - 50px); + right: auto; + left: 0; + + width: 100px; + height: 100px; + } } &::after { - content: ""; - position: absolute; + background-size: contain; + } +} + +.catalog-preview__heading--slim { + &::after { top: -3px; left: 7px; + width: 36px; height: 50px; + background-image: url("../../images/icons/stack.svg#cat-slim"); + + @media (min-width: $tablet-width) { + top: calc(50% - 106px); + right: 92px; + left: auto; + width: 140px; + height: 194px; + } + + @media (min-width: $desktop-width) { + top: calc(50% - 54px); + left: 15px; + + width: 70px; + height: 97px; + } } } .catalog-preview__heading--pro { - &::before { - content: ""; - position: absolute; - left: 0; - top: 0; - width: 50px; - height: 50px; - background-color: $color-primary-500; - border-radius: 50%; - } - &::after { - content: ""; - position: absolute; top: 11px; left: -10px; + width: 67px; height: 28px; + background-image: url("../../images/icons/stack.svg#cat-pro"); + + @media (min-width: $tablet-width) { + top: calc(50% - 51px); + right: 28px; + left: auto; + + width: 268px; + height: 112px; + } + + @media (min-width: $desktop-width) { + top: calc(50% - 30px); + left: -19px; + + width: 134px; + height: 56px; + } + } +} + +.catalog-preview__text { + margin: 0; + margin-bottom: 15px; + padding-bottom: 23px; + + color: $color-gray-700; + border-bottom: 1px solid $color-gray-200; + + @media (min-width: $tablet-width) { + color: $color-black; + font-size: 16px; + line-height: 24px; + margin-bottom: 54px; + padding: 0; + + border: none; + } + + @media (min-width: $desktop-width) { + margin-bottom: 30px; + } +} + +.catalog-preview__link { + display: grid; + grid-template-columns: max-content 32px; + align-items: center; + gap: 17px; + + font-family: $font-heading; + font-size: 16px; + line-height: 16px; + text-transform: uppercase; + text-decoration: none; + color: $color-black; + + @media (min-width: $tablet-width) { + font-size: 20px; + line-height: normal; + gap: 27px; + } + + &::after { + content: ""; + + width: 24px; + height: 15px; + + background-repeat: no-repeat; + background-position: 100% 50%; + + background-image: url("../../images/icons/stack.svg#arrow"); + } + + &:hover { + opacity: 0.6; + + &::after { + width: 32px; + } + } + + &:active { + opacity: 0.3; + + &::after { + width: 32px; + } } } diff --git a/source/styles/blocks/common-heading.scss b/source/styles/blocks/common-heading.scss index a8bc717..4bc718d 100644 --- a/source/styles/blocks/common-heading.scss +++ b/source/styles/blocks/common-heading.scss @@ -4,4 +4,11 @@ line-height: 36px; color: $color-black; font-weight: 400; + margin: 0; + padding: 25px 0 40px; + + @media (min-width: $tablet-width) { + font-size: 60px; + line-height: 60px; + } } diff --git a/source/styles/blocks/contacts.scss b/source/styles/blocks/contacts.scss index c93b0e6..83b06e3 100644 --- a/source/styles/blocks/contacts.scss +++ b/source/styles/blocks/contacts.scss @@ -1,11 +1,102 @@ +.contacts { + @media (min-width: $desktop-width) { + position: relative; + z-index: 0; + + min-height: 400px; + padding: 40px 0 52px; + display: grid; + grid-template-columns: 1220px; + align-items: center; + justify-content: center; + } +} + +.contacts__container { + width: 280px; + margin-right: auto; + margin-left: auto; + padding: 26px 0; + display: grid; + grid-template-columns: 1fr 1fr; + + @media (min-width: $tablet-width) { + width: 708px; + padding: 56px 40px 61px; + grid-template-columns: 172px 172px; + justify-content: space-between; + } + + @media (min-width: $desktop-width) { + position: relative; + z-index: 1; + + grid-template-columns: 172px 155px; + width: 565px; + margin: 0; + padding: 56px 80px; + + background-color: $color-white; + } +} + .contacts__heading { + margin: 0; + padding-right: 10px; + font-family: $font-heading; - text-transform: uppercase; - line-height: 20px; font-size: 16px; + line-height: 20px; + text-transform: uppercase; + color: $color-gray-900; + + @media (min-width: $tablet-width) { + margin-top: 4px; + padding-right: 0; + + font-size: 20px; + line-height: 26px; + } + + @media (min-width: $desktop-width) { + margin-top: 0; + } } .contacts__address { font-style: normal; + color: $color-gray-700; line-height: 20px; + + @media (min-width: $tablet-width) { + display: flex; + flex-direction: column; + justify-content: space-between; + + text-align: right; + } + + @media (min-width: $desktop-width) { + text-align: left; + } +} + +.contacts__map { + display: block; + width: 100%; + height: 362px; + + border: none; + + @media (min-width: $tablet-width) { + height: 400px; + } + + @media (min-width: $desktop-width) { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } } diff --git a/source/styles/blocks/control.scss b/source/styles/blocks/control.scss index ef0a6ed..484c3fd 100644 --- a/source/styles/blocks/control.scss +++ b/source/styles/blocks/control.scss @@ -1,7 +1,109 @@ .control { + position: relative; + display: grid; + grid-template-columns: 30px 1fr; + gap: 16px; font-family: $font-heading; font-size: 16px; - line-height: 18px; + font-weight: 400; text-transform: uppercase; - color: $color-gray-700; + + @media (min-width: $tablet-width) { + grid-template-columns: 40px 1fr; + gap: 20px; + } +} + +.control__input { + position: relative; + z-index: 1; + + width: 100%; + height: 30px; + margin: 0; + grid-column: 1 / 2; + grid-row: 1 / 2; + + opacity: 0; + + @media (min-width: $tablet-width) { + height: 40px; + } +} + +.control__lead { + grid-column: 1 / -1; + grid-row: 1 / 2; + display: grid; + grid-template-columns: 30px 1fr; + gap: 16px; + align-items: center; + + &::before, + &::after { + content: ""; + + height: 30px; + grid-column: 1 / 2; + grid-row: 1 / 2; + } + + &::before { + border: 1px solid $color-gray-250; + } + + &:hover::before { + border-color: $color-gray-300; + } + + .control__input:focus + &::before { + outline: 2px solid $color-gray-850; + outline-offset: -2px; + } + + .control__input:disabled + & { + opacity: 0.3; + } + + .control__input:disabled + &::before { + border-color: $color-gray-300; + } + + .control--radio &::before { + border-radius: 50%; + } + + .control--radio .control__input:checked + &::after { + background-clip: padding-box; + background-color: $color-primary-500; + border: 8px solid transparent; + border-radius: 50%; + + @media (min-width: $tablet-width) { + border-width: 11px; + } + } + + .control--checkbox .control__input:checked + &::after { + background-repeat: no-repeat; + background-position: calc(50% + 1px) 50%; + background-image: url("../../images/icons/stack.svg#check"); + + @media (min-width: $tablet-width) { + background-size: 24px auto; + } + } + + @media (min-width: $tablet-width) { + grid-template-columns: 40px 1fr; + gap: 20px; + + font-size: 20px; + line-height: normal; + + &::before, + &::after { + height: 40px; + } + } } diff --git a/source/styles/blocks/developer.scss b/source/styles/blocks/developer.scss index 1dd8bc6..02d4e77 100644 --- a/source/styles/blocks/developer.scss +++ b/source/styles/blocks/developer.scss @@ -1,11 +1,29 @@ -.developer__link { - line-height: 20px; +.page-footer__developer-conteiner { + display: flex; + justify-content: space-between; + align-items: center; +} + +.developer { + color: $color-gray-700; font-size: 16px; text-decoration: none; - color: $color-gray-700; -} -.developer__image { - width: 27px; - height: 34px; + &:hover { + opacity: 0.6; + color: $color-gray-700; + + .developer__image { + color: $color-primary-500; + } + } + + &:active { + opacity: 0.3; + color: $color-gray-700; + + .developer__image { + color: $color-primary-500; + } + } } diff --git a/source/styles/blocks/example.scss b/source/styles/blocks/example.scss index d280441..2a0fa66 100644 --- a/source/styles/blocks/example.scss +++ b/source/styles/blocks/example.scss @@ -1,25 +1,248 @@ .example { - background-color: $color-gray-150; + background-color: $color-gray-100; + + @media (min-width: $tablet-width) { + padding-top: 43px; + padding-bottom: 62px; + + border-top: 1px solid $color-gray-150; + background-image: linear-gradient(to top, $color-gray-100 462px, $color-white 462px); + } + + @media (min-width: $desktop-width) { + padding-top: 22px; + padding-bottom: 69px; + + border-top: none; + } } -.example__definition { - font-family: $font-heading; - font-size: 24px; - line-height: 24px; - color: $color-black; - text-transform: uppercase; +.example__container { + @media (min-width: $desktop-width) { + display: grid; + grid-template-columns: 1fr 590px; + } +} + +.example__content { + margin-bottom: 10px; + + @media (min-width: $tablet-width) { + display: grid; + grid-template-columns: 366px 1fr; + column-gap: 32px; + margin-bottom: 85px; + } + + @media (min-width: $desktop-width) { + margin-bottom: 0; + grid-template-columns: 366px 70px 1fr; + } +} + +.example__view { + @media (min-width: $desktop-width) { + margin-top: -43px; + } +} + +.example__heading { + @media (min-width: $tablet-width) { + grid-column: 1 / -1; + } +} + +.example__text { margin: 0; - padding: 0; + margin-bottom: 20px; + + @media (min-width: $tablet-width) { + grid-column: 1 / -1; + margin-top: 10px; + margin-bottom: 54px; + padding-right: 8px; + } + + @media (min-width: $desktop-width) { + grid-column: 1 / -2; + margin-top: 92px; + margin-bottom: 70px; + padding-right: 30px; + } +} + +.example__list { + margin-top: 0; + margin-bottom: 34px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 32px; + + text-align: center; + + @media (min-width: $tablet-width) { + margin-bottom: 0; + gap: 42px; + } + + @media (min-width: $desktop-width) { + margin-bottom: 55px; + grid-column: 1 / 2; + } +} + +.example__item { + padding: 14px 8px 0; + display: flex; + flex-direction: column-reverse; + align-items: center; + + border: 1px solid $color-gray-250; + border-radius: 4px; + + @media (min-width: $tablet-width) { + padding-top: 16px; + } } .example__title { + width: 87px; + margin-bottom: -14px; + padding: 0 4px; + + color: $color-gray-700; + background-color: $color-gray-100; + font-size: 12px; - line-height: 12px; + line-height: 1; + text-transform: lowercase; + + @media (min-width: $tablet-width) { + width: auto; + margin-bottom: -6px; + padding: 0 7px; + + background-color: $color-white; + + font-size: 14px; + } + + @media (min-width: $desktop-width) { + background-color: $color-gray-100; + } } -.example__cost { +.example__definition { + color: $color-black; + margin: 0; + margin-bottom: 7px; + font-family: $font-heading; + font-size: 24px; + line-height: 1; + text-transform: uppercase; + + @media (min-width: $tablet-width) { + margin-bottom: 16px; + font-size: 30px; + } +} + +.example__spending { color: $color-black; + margin: 0; + + font-family: $font-heading; line-height: 20px; + text-align: center; text-transform: uppercase; + + @media (min-width: $tablet-width) { + padding-left: 130px; + align-self: center; + + font-size: 20px; + text-align: right; + } + + @media (min-width: $desktop-width) { + padding-left: 0; + grid-column: 1 / 2; + display: grid; + grid-template-columns: 1fr 42px 1fr; + + text-align: left; + + span:first-child { + grid-column: 1 / 3; + } + + span:last-child { + text-align: center; + } + } +} + +.example__images { + margin-bottom: 15px; + + @media (min-width: $tablet-width) { + display: grid; + grid-template-columns: 50% 1fr; + margin-bottom: 26px; + padding: 0 58px; + overflow: hidden; + } + + @media (min-width: $desktop-width) { + padding: 0; + } +} + +.example__image { + display: flex; + overflow: hidden; + + img { + width: 280px; + height: 256px; + max-width: none; + } + + @media (min-width: $tablet-width) { + display: flex; + overflow: hidden; + + img { + width: 594px; + height: 511px; + max-width: none; + } + } +} + +.example__image--before { + img { + margin-left: 40px; + } + + @media (min-width: $tablet-width) { + img { + margin-left: 0; + } + } +} + +.example__image--after { + img { + margin-left: -144px; + } + + @media (min-width: $tablet-width) { + justify-content: end; + } +} + +.example__image--active { + display: block; } diff --git a/source/styles/blocks/field-group.scss b/source/styles/blocks/field-group.scss index c149859..664896a 100644 --- a/source/styles/blocks/field-group.scss +++ b/source/styles/blocks/field-group.scss @@ -1,23 +1,96 @@ .field-group { padding: 0; + border: none; } +.field-group--target { + padding: 21px; + padding-bottom: 17px; + + @media (min-width: $tablet-width) { + padding: 25px; + } +} + .field-group__heading { + margin-bottom: 35px; + padding: 0; + display: flex; + float: left; + font-family: $font-heading; font-size: 24px; font-weight: 400; line-height: 26px; + + span { + position: relative; + z-index: 1; + + width: min-content; + margin-left: -22px; + padding: 0 22px; + background-color: $color-white; + } + + @media (min-width: $tablet-width) { + margin-bottom: 75px; + + font-size: 36px; + line-height: 36px; + + &::before { + margin-top: 22px; + } + + .field-group--additional & { + margin-bottom: 57px; + } + + span { + width: auto; + margin-left: -42px; + padding: 0 42px; + } + } + + @media (min-width: $desktop-width) { + margin-bottom: 72px; + } +} + +.field-group__field { + clear: both; + width: 100%; } .field-group__list { - list-style: none; + margin: 0; padding: 0; + clear: both; + + list-style: none; } -.field-group__input { - font-family: inherit; - font-size: 16px; - line-height: 18px; - text-transform: uppercase; +.field-group__list--contacts { + @media (min-width: $desktop-width) { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 80px; + } +} + +.field-group__list--additional { + @media (min-width: $tablet-width) { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 60px; + row-gap: 32px; + } + + @media (min-width: $desktop-width) { + grid-template-columns: repeat(4, 1fr); + column-gap: 80px; + } } diff --git a/source/styles/blocks/field.scss b/source/styles/blocks/field.scss index ee97ca5..6528b3f 100644 --- a/source/styles/blocks/field.scss +++ b/source/styles/blocks/field.scss @@ -1,14 +1,29 @@ .field { + position: relative; + + display: grid; + grid-template-columns: max-content 1fr; + align-items: center; + gap: 14px; + color: $color-gray-700; + font-family: $font-heading; font-size: 16px; font-weight: 400; line-height: 18px; text-transform: uppercase; + + @media (min-width: $tablet-width) { + gap: 18px; + + font-size: 20px; + } } .field__input { min-width: 100px; + padding: 9px 14px; color: $color-gray-700; border: 1px solid $color-gray-150; @@ -17,8 +32,71 @@ font-size: 16px; line-height: 18px; text-transform: uppercase; + + &:hover { + border-color: $color-gray-250; + } + + &:focus { + outline: 2px solid $color-gray-700; + outline-offset: -2px; + } + + &:not(:placeholder-shown):invalid { + outline: 2px solid $color-error-500; + outline-offset: -2px; + } + + &::placeholder { + opacity: 1; + } + + .field--no-label & { + grid-column: 1 / -1; + } + + .field--icon & { + padding-right: 42px; + } + + @media (min-width: $tablet-width) { + padding: 10px 18px; + + font-size: 20px; + line-height: 30px; + + .field--icon & { + padding-right: 50px; + } + } +} + +.field__input--textarea { + padding-bottom: 18px; + + @media (min-width: $tablet-width) { + padding-bottom: 15px; + } + + @media (min-width: $desktop-width) { + padding-bottom: 21px; + } } -.field__input--icon:hover { - stroke: $color-primary-500; +.field__icon { + position: absolute; + right: 8px; + top: calc(50% - 12px); + + @media (min-width: $tablet-width) { + right: 14px; + } + + .field__input:focus + & { + color: $color-primary-500; + } + + .field__input:not(:placeholder-shown):invalid + & { + color: $color-error-500; + } } diff --git a/source/styles/blocks/form.scss b/source/styles/blocks/form.scss index cd7ec0a..1b41d60 100644 --- a/source/styles/blocks/form.scss +++ b/source/styles/blocks/form.scss @@ -1,4 +1,110 @@ +.form { + overflow: hidden; + + @media (min-width: $tablet-width) { + padding-top: 28px; + } + + @media (min-width: $desktop-width) { + padding-top: 26px; + } +} + +.form__container { + @media (min-width: $desktop-width) { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 80px; + padding-right: 0; + padding-left: 0; + } +} + +.form__group { + margin: 0; + + & + & { + margin-top: 25px; + + @media (min-width: $tablet-width) { + margin-top: 71px; + } + + @media (min-width: $desktop-width) { + &.form__group--target { + margin-top: 0; + } + } + } +} + +.form__group + .form__group--additional { + margin-top: 22px; + + @media (min-width: $tablet-width) { + margin-top: 64px; + } +} + +.form__group--contacts, +.form__group--comment, +.form__group--additional { + @media (min-width: $desktop-width) { + grid-column: 1 / -1; + } +} + +.form__group--target { + margin-right: -21px; + margin-left: -21px; + + border: 1px solid $color-gray-200; + + @media (min-width: $tablet-width) { + margin-right: 0; + margin-left: 0; + } +} + +.form__footer { + margin-top: 34px; + padding-bottom: 32px; + text-align: center; + + @media (min-width: $tablet-width) { + margin-top: 51px; + padding-bottom: 72px; + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + gap: 60px; + + text-align: left; + } + + @media (min-width: $desktop-width) { + margin-top: 59px; + padding-bottom: 82px; + gap: 80px; + grid-column: 1 / -1; + } +} + +.form__button { + width: 100%; + + @media (max-width: $mobile-width) { + margin-bottom: 21px; + } +} + .form__additional { + margin: 0; color: $color-black; + font-size: 14px; line-height: 16px; + + @media (min-width: $desktop-width) { + font-size: 16px; + } } diff --git a/source/styles/blocks/hero.scss b/source/styles/blocks/hero.scss index 0faa95e..55e0b35 100644 --- a/source/styles/blocks/hero.scss +++ b/source/styles/blocks/hero.scss @@ -1,25 +1,27 @@ .hero { + padding-top: 27px; + text-align: center; + color: $color-white; + + background-repeat: no-repeat; + background-position: 50% 0; + background-size: auto 320px; + background-image: linear-gradient($color-primary-500--opacity 302px, $color-white 302px), url("../../images/background/index-background-mobile@1x.jpg"); - @media (max-width: $mobile-width) { - color: $color-white; - background-color: $color-primary-800; - background-repeat: no-repeat; - background-position: 50% 0; - background-size: cover; - background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/background/index-background-mobile@1x.jpg"); - } @media (min-resolution: 2dppx) { background-repeat: no-repeat; - background-size: cover; - background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/background/index-background-mobile@2x.jpg"); + background-size: auto 302px; + background-image: linear-gradient($color-primary-500--opacity 0, $color-primary-500--opacity 302px, $color-white 302px), url("../../images/background/index-background-mobile@2x.jpg"); } @media (min-width: $tablet-width) { color: $color-black; background-color: transparent; background-image: none; + text-align: left; + padding-top: 33px; } @media (min-width: $desktop-width) { @@ -32,29 +34,98 @@ right: 0; bottom: 0; left: 50%; - z-index: -1; + z-index: -2; background-color: $color-primary-800; background-position: 0 100%; background-repeat: no-repeat; - background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/background/index-background-desktop@1x.jpg"); + background-image: linear-gradient($color-primary-500--opacity, $color-primary-500--opacity), url("../../images/background/index-background-desktop@1x.jpg"); // @media (min-resolution: 2dppx) { // background-size: auto 700px; - // background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/background/index-background-desktop@2x.jpg"); + // background-image: linear-gradient($color-primary-500--opacity, $color-primary-500--opacity), url("../../images/background/index-background-desktop@2x.jpg"); // } } } } +.hero__container { + @media (min-width: $tablet-width) { + position: relative; + + padding: 0 90px 526px; + } + + @media (min-width: $desktop-width) { + min-height: 491px; + padding: 20px 610px 95px 80px; + } +} + .hero__heading { - @media (max-width: $tablet-width) { - color: $color-white; + color: $color-white; + margin: 0; + margin-bottom: 25px; + + font-family: $font-heading; + font-size: 36px; + font-weight: 400; + line-height: 1; + + @media (min-width: $tablet-width) { + margin-bottom: 41px; + color: $color-black; + font-size: 60px; } } .hero__text { + margin: 0; + margin-bottom: 29px; + font-family: $font-heading; - line-height: 14px; - color: $color-white; + line-height: 1; + text-transform: uppercase; + + @media (min-width: $tablet-width) { + margin-bottom: 49px; + + font-size: 20px; + } + + @media (min-width: $desktop-width) { + margin-bottom: 51px; + } +} + +.hero__image { + width: 280px; + + @media (min-width: $tablet-width) { + position: absolute; + bottom: 0; + left: 0; + z-index: -1; + + width: 708px; + height: 609px; + } + + @media (min-width: $desktop-width) { + top: -20px; + left: calc(50% - 162px); + + width: 552px; + height: 499px; + } +} + +.hero__button { + width: 100%; + + @media (min-width: $tablet-width) { + width: auto; + justify-self: start; + padding: 14px 26px; + } } diff --git a/source/styles/blocks/logo.scss b/source/styles/blocks/logo.scss index 9d7356a..6c98d73 100644 --- a/source/styles/blocks/logo.scss +++ b/source/styles/blocks/logo.scss @@ -1,3 +1,31 @@ .logo { text-decoration: none; + + @media (min-width: $tablet-width) { + width: 174px; + height: 50px; + } + + @media (min-width: $desktop-width) { + width: 202px; + height: 59px; + } + + &:link:hover { + opacity: 0.8; + } + + &:link:active { + opacity: 0.6; + } +} + +.logo--footer { + display: flex; + align-items: center; + + @media (max-width: $mobile-width) { + padding: 8px; + justify-content: center; + } } diff --git a/source/styles/blocks/page-footer.scss b/source/styles/blocks/page-footer.scss index 9d0558e..6b2b733 100644 --- a/source/styles/blocks/page-footer.scss +++ b/source/styles/blocks/page-footer.scss @@ -1,3 +1,39 @@ .page-footer { + padding: 31px 0 25px; + + background-color: $color-gray-50; + + @media (min-width: $tablet-width) { + padding: 58px 0 50px; + } +} + +.page-footer__container { + @media (min-width: $tablet-width) { + display: grid; + grid-template-columns: 164px 1fr 164px; + gap: 16px; + } +} + +.page-footer__logo { + @media (max-width: $mobile-width) { + margin-bottom: 24px; + } +} + +.page-footer__social { margin: 0; + + @media (max-width: $mobile-width) { + margin-bottom: 22px; + + border-top: 1px solid $color-gray-200; + border-bottom: 1px solid $color-gray-200; + } + + @media (min-width: $tablet-width) { + margin-top: -4px; + margin-right: 8px; + } } diff --git a/source/styles/blocks/page-header.scss b/source/styles/blocks/page-header.scss index 804d195..f92b3ea 100644 --- a/source/styles/blocks/page-header.scss +++ b/source/styles/blocks/page-header.scss @@ -1,29 +1,94 @@ -.page-header__toggler-open { - display: none; - width: 40px; - height: 40px; - mask-position: 50% 50%; - mask-repeat: no-repeat; - mask-image: url("../../images/icons/stack.svg#burger"); - background-color: $color-black; - border: 0; - - @media (max-width: $mobile-width) { - display: block; +.page-header { + position: relative; + + @media (min-width: $tablet-width) { + width: 708px; + margin-right: auto; + margin-left: auto; + display: flex; + flex-direction: row; + justify-content: space-around; + } + + @media (min-width: $desktop-width) { + gap: 350px; + justify-content: space-around; + } +} + +.page-header__container-header { + display: flex; + justify-content: space-between; + align-items: center; + position: relative; + z-index: 3; + background: $color-white; +} + +.page-header__logo-sign { + text-decoration: none; + padding: 23px 20px 24px; + align-self: center; + + + @media (min-width: $tablet-width) { + display: none; + } + + @media (min-width: $desktop-width) { + display: none; } } -.page-header__toggler-close { - display: none; - width: 40px; - height: 40px; - mask-position: 50% 50%; - mask-repeat: no-repeat; - mask-image: url("../../images/icons/stack.svg#close"); - background-color: $color-black; - border: 0; - - @media (max-width: $mobile-width) { - display: block; +.page-header__toggler { + width: 35px; + height: 35px; + background: transparent; + border: none; + padding: 0; + position: relative; + + .page-header__toggler-burger { + width: 24px; + height: 2px; + background-color: $color-black; + transition: 0.3s ease; + + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + + &:nth-child(1) { + top: 7px; + } + + &:nth-child(2) { + top: 17px; + } + + &:nth-child(3) { + top: 27px; + } + } + + &.is-active { + span { + &:nth-child(1) { + transform: translate(-50%, 10px) rotate(-46deg); + } + + &:nth-child(2) { + display: none; + } + + &:nth-child(3) { + transform: translate(-50%, -10px) rotate(46deg); + } + } + } + + @media (min-width: $tablet-width) { + display: none; } } diff --git a/source/styles/blocks/page-main.scss b/source/styles/blocks/page-main.scss index 8a9ee48..ec58cdd 100644 --- a/source/styles/blocks/page-main.scss +++ b/source/styles/blocks/page-main.scss @@ -4,15 +4,6 @@ color: $color-black; } -.page-header__logo-sign { - - text-decoration: none; - - @media (min-width: $tablet-width) { - display: none; - } - - @media (min-width: $desktop-width) { - display: none; - } +.page-main__hero { + background: linear-gradient(0deg, $color-white 7%, $color-primary-500 7%); } diff --git a/source/styles/blocks/page.scss b/source/styles/blocks/page.scss index 2b8c7c3..9af6dda 100644 --- a/source/styles/blocks/page.scss +++ b/source/styles/blocks/page.scss @@ -1,9 +1,23 @@ -.page__body { +.page { + min-width: 320px; + height: 100%; + font-family: $font-body; font-size: 14px; line-height: 18px; color: $color-gray-700; background-color: $color-white; font-weight: 400; + + @media (min-width: $tablet-width) { + font-size: 16px; + line-height: 24px; + } +} + +.page__body { + min-height: 100%; margin: 0; + display: grid; + grid-template-rows: min-content 1fr min-content; } diff --git a/source/styles/blocks/process.scss b/source/styles/blocks/process.scss index 38c7a97..0e68dc7 100644 --- a/source/styles/blocks/process.scss +++ b/source/styles/blocks/process.scss @@ -8,10 +8,21 @@ padding: 0; color: $color-gray-700; list-style: none; + display: grid; + gap: 20px; @media (min-width: $tablet-width) { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 60px; + row-gap: 36px; counter-reset: process; } + + @media (min-width: $desktop-width) { + grid-template-columns: repeat(4, 1fr); + column-gap: 80px; + } } .process__item { @@ -23,22 +34,19 @@ position: relative; z-index: 0; min-height: 280px; + padding-top: 15px; + grid-template-columns: auto; + grid-template-rows: 80px auto; + gap: 32px; counter-increment: process; } - &::before { - content: ""; - width: 60px; - height: 60px; - background-color: $color-primary-500; - background-repeat: no-repeat; - background-position: 50% 50%; - } - &::after { @media (min-width: $tablet-width) { content: counter(process); position: absolute; + top: -25px; + right: 72px; z-index: -1; color: $color-gray-50; font-family: $font-heading; @@ -49,27 +57,30 @@ } } -.process__item--leaf::before { - background-size: 25px 28px; - background-image: url("../../images/icons/stack.svg#leaf"); -} - -.process__item--powder::before { - background-size: 26px 29px; - background-image: url("../../images/icons/stack.svg#powder"); -} - -.process__item--meal::before { - background-size: 25px 30px; - background-image: url("../../images/icons/stack.svg#meal"); +.process__icon-container { + width: 60px; + height: 60px; + background-color: $color-primary-500; + position: relative; } -.process__item--weight::before { - background-size: 26px 31px; - background-image: url("../../images/icons/stack.svg#weight"); +.process__icon { + color: $color-white; + margin: auto; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; } .process__text { - font-size: 16px; - line-height: 24px; + font-size: 14px; + line-height: 18px; + margin: 0; + + @media (min-width: $tablet-width) { + font-size: 16px; + line-height: 24px; + } } diff --git a/source/styles/blocks/proposal.scss b/source/styles/blocks/proposal.scss index 68efaa8..85fd5e7 100644 --- a/source/styles/blocks/proposal.scss +++ b/source/styles/blocks/proposal.scss @@ -3,31 +3,53 @@ text-align: center; color: $color-white; background-color: $color-primary-500; - padding: 140px 140px; background-repeat: no-repeat; - background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/background/washing-machine-mobile-desktop@1x.jpg"); + background-image: linear-gradient($color-primary-500--opacity, $color-primary-500--opacity), url("../../images/background/washing-machine-mobile-desktop@1x.jpg"); @media (min-resolution: 2dppx) { background-repeat: no-repeat; - background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/background/washing-machine-mobile-desktop@2x.jpg"); + background-image: linear-gradient($color-primary-500--opacity, $color-primary-500--opacity), url("../../images/background/washing-machine-mobile-desktop@2x.jpg"); background-size: 280px 290px; } @media (min-width: $tablet-width) { + background-size: cover; background-repeat: no-repeat; - background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/background/washing-machine-tablet@1x.jpg"); - background-size: 707px 200px; + background-image: linear-gradient($color-primary-500--opacity, $color-primary-500--opacity), url("../../images/background/washing-machine-tablet@1x.jpg"); @media (min-resolution: 2dppx) { - background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/background/washing-machine-tablet@2x.jpg"); + background-image: linear-gradient($color-primary-500--opacity, $color-primary-500--opacity), url("../../images/background/washing-machine-tablet@2x.jpg"); + } + } + + @media (min-width: $desktop-width) { + background-size: 245px 288px; + background-image: linear-gradient($color-primary-500--opacity, $color-primary-500--opacity), url("../../images/background/washing-machine-mobile-desktop@1x.jpg"); + + @media (min-resolution: 2dppx) { + background-repeat: no-repeat; + background-image: linear-gradient($color-primary-500--opacity, $color-primary-500--opacity), url("../../images/background/washing-machine-mobile-desktop@2x.jpg"); + background-size: 280px 305px; } } } .proposal__text { - padding-top: 50px; + padding: 186px 58px 18px; background-size: 78px 80px; background-repeat: no-repeat; - background-position: 50% 50%; + background-position: 50% 33%; background-image: url("../../images/icons/stack.svg#gift"); + + @media (min-width: $tablet-width) { + padding: 71px 125px 69px 421px; + background-position: 20% 50%; + background-size: 80px 82px; + } + + @media (min-width: $desktop-width) { + padding: 160px 58px 18px; + background-position: 50% 33%; + background-size: 78px 80px; + } } diff --git a/source/styles/blocks/show-more.scss b/source/styles/blocks/show-more.scss index 8c05782..7eeef6c 100644 --- a/source/styles/blocks/show-more.scss +++ b/source/styles/blocks/show-more.scss @@ -1,25 +1,99 @@ .show-more { - background-image: url("../../images/icons/stack.svg#plus-mobil"); + list-style: none; + margin: 0; +} + +.show-more__border { + padding: 78px 0 25px; + text-align: center; @media (min-width: $tablet-width) { - background-image: url("../../images/icons/stack.svg#plus-tablet-desctop"); + margin-top: 80px; + padding: 161px 38px 38px; + display: flex; + flex-direction: column; + border: 2px solid $color-gray-50; + } + + @media (min-width: $desktop-width) { + padding-top: 158px; + padding-bottom: 42px; } } + .show-more__heading { + position: relative; + margin: 0; + margin-bottom: 9px; + font-family: $font-heading; font-size: 16px; + font-weight: 400; line-height: 20px; text-transform: uppercase; - color: $color-gray-900; + + @media (min-width: $tablet-width) { + margin-bottom: 23px; + padding: 0 40px; + + font-size: 20px; + line-height: 24px; + } + + @media (min-width: $desktop-width) { + padding: 0 10px; + } + + &::before, + &::after { + content: ""; + bottom: 55px; + left: 44%; + position: absolute; + width: 30px; + height: 2px; + background-color: $show-more; + + @media (min-width: $tablet-width) { + bottom: 130px; + width: 60px; + left: 34%; + } + } + + &::after { + transform: rotate(90deg); + } } .show-more__text { - line-height: 16px; + margin: 0; + margin-bottom: 86px; + + color: $color-gray-700; + font-size: 12px; + line-height: 16px; + + @media (min-width: $tablet-width) { + padding: 0 20px; + + font-size: 16px; + line-height: 18px; + } + + @media (min-width: $desktop-width) { + padding: 0; + } } .show-more__button { + width: 100%; color: $color-gray-700; background-color: $color-gray-50; + + @media (min-width: $tablet-width) { + margin-top: auto; + } } diff --git a/source/styles/blocks/site-list.scss b/source/styles/blocks/site-list.scss new file mode 100644 index 0000000..6aab1bf --- /dev/null +++ b/source/styles/blocks/site-list.scss @@ -0,0 +1,79 @@ +.site-list { + font-family: $font-heading; + font-size: 20px; + line-height: 20px; + color: $color-black; + text-transform: uppercase; + text-align: center; + background-color: $color-white; + + position: absolute; + bottom: 0; + left: 0; + width: 100%; + transition: 0.3s ease; + + &.is-active { + transform: translateY(100%); + + @media (min-width: $tablet-width) { + transform: translateY(0); + } + + & .site-list__item { + border-bottom: 1px solid $color-gray-100; + background-color: inherit; + } + } + + @media (min-width: $tablet-width) { + position: static; + display: flex; + font-size: 18px; + line-height: 24px; + background-color: inherit; + } + + @media (min-width: $desktop-width) { + font-size: 20px; + line-height: normal; + color: $color-black; + } +} + +.site-list--nojs { + position: static; +} + +.site-list__menu { + list-style: none; + padding: 0; + margin: 0; + + @media (min-width: $tablet-width) { + display: flex; + position: static; + } +} + +.site-list__link { + display: block; + text-decoration: none; + color: inherit; + padding: 22px 10px 24px; + min-width: 200px; + + &:link:hover { + opacity: 0.6; + } + + &:link:active { + opacity: 0.3; + } +} + +.site-list__link-index { + @media (min-width: $desktop-width) { + color: $color-white; + } +} diff --git a/source/styles/blocks/site-menu.scss b/source/styles/blocks/site-menu.scss deleted file mode 100644 index 1f1cd89..0000000 --- a/source/styles/blocks/site-menu.scss +++ /dev/null @@ -1,14 +0,0 @@ -.site-menu { - font-family: $font-heading; - font-size: 20px; - line-height: 20px; - text-transform: uppercase; - list-style: none; - text-align: center; - padding: 0; -} - -.site-menu__link { - text-decoration: none; - color: #000000; -} diff --git a/source/styles/blocks/social.scss b/source/styles/blocks/social.scss index 91a86d7..84b6b3b 100644 --- a/source/styles/blocks/social.scss +++ b/source/styles/blocks/social.scss @@ -1,5 +1,35 @@ .social { - margin: 0; - padding: 0; + padding: 12px 0; + display: flex; + flex-wrap: wrap; + justify-content: center; list-style: none; + + @media (min-width: $tablet-width) { + padding: 0; + } +} + +.social__item { + margin: 0 4px; + display: flex; + align-items: center; +} + +.social__link { + display: block; + padding: 8px; + color: $color-gray-600; + + &:hover { + color: $color-primary-500; + } + + &:active { + color: rgba($color-primary-500, 0.3); + } + + svg { + display: block; + } } diff --git a/source/styles/global/global.scss b/source/styles/global/global.scss index e13c752..5fad546 100644 --- a/source/styles/global/global.scss +++ b/source/styles/global/global.scss @@ -8,5 +8,4 @@ img { max-width: 100%; height: auto; - object-fit: cover; /* Масштабируем картинку с соблюдением пропорций. */ } diff --git a/source/styles/global/variables.scss b/source/styles/global/variables.scss index de38666..dbb986b 100644 --- a/source/styles/global/variables.scss +++ b/source/styles/global/variables.scss @@ -5,7 +5,7 @@ $font-body: "Lato", sans-serif; $color-black: #000000; $color-white: #ffffff; $color-gray-50: #f2f2f2; -$color-gray-100: #ebebeb; +$color-gray-100: #e6e6e6; $color-gray-180: #dcdcdc; $color-gray-200: #d9d9d9; $color-gray-250: #cdcdcd; @@ -16,11 +16,14 @@ $color-gray-850: #222222; $color-gray-900: #111111; $color-primary-500: #68b738; $color-primary-800: #63a63b; + +$color-primary-500--opacity: rgba($color-primary-500, 0.85); $color-error-500: #ff8282; // background switcher $color-gray-150: #eaeaea; $desktop-width: 1240px; $tablet-width: 768px; -$mobile-width: 700px; +$mobile-width: 767px; +$show-more: #d3d3d3; diff --git a/source/styles/styles.scss b/source/styles/styles.scss index 8637dcb..e2bf56a 100644 --- a/source/styles/styles.scss +++ b/source/styles/styles.scss @@ -5,16 +5,15 @@ @import "./global/global.scss"; @import "./global/visually-hidden"; - /* BLOCKS */ -@import "./blocks/page"; -@import "./blocks/page-header"; +@import "./blocks/page.scss"; +@import "./blocks/page-header.scss"; @import "./blocks/button.scss"; -@import "./blocks/logo"; -@import "./blocks/site-menu.scss"; -@import "./blocks/page-main"; +@import "./blocks/logo.scss"; +@import "./blocks/page-main.scss"; @import "./blocks/common-heading.scss"; -@import "./blocks/hero"; +@import "./blocks/hero.scss"; +@import "./blocks/site-list.scss"; @import "./blocks/container.scss"; @import "./blocks/switcher.scss"; @import "./blocks/catalog-additional.scss"; @@ -26,12 +25,12 @@ @import "./blocks/control.scss"; @import "./blocks/example.scss"; @import "./blocks/field-group"; -@import "./blocks/form"; -@import "./blocks/field"; +@import "./blocks/form.scss"; +@import "./blocks/field.scss"; @import "./blocks/process.scss"; @import "./blocks/proposal.scss"; @import "./blocks/show-more.scss"; @import "./blocks/contacts.scss"; -@import "./blocks/page-footer"; +@import "./blocks/page-footer.scss"; @import "./blocks/social.scss"; @import "./blocks/developer.scss";