diff --git a/source/catalog.html b/source/catalog.html index 544dfb3..87a3dc6 100644 --- a/source/catalog.html +++ b/source/catalog.html @@ -6,7 +6,6 @@ Cat Energy: Каталог продукции - @@ -87,7 +86,7 @@

- Заказать + Заказать
@@ -119,7 +118,7 @@

- Заказать + Заказать

@@ -151,7 +150,7 @@

- Заказать + Заказать

@@ -183,7 +182,7 @@

- Заказать + Заказать

@@ -215,7 +214,7 @@

- Заказать + Заказать

@@ -247,7 +246,7 @@

- Заказать + Заказать

@@ -279,7 +278,7 @@

- Заказать + Заказать

@@ -304,7 +303,7 @@

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

1 упаковка (100 г)
200 ₽
- Заказать + Заказать

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

    @@ -312,7 +311,7 @@

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

    5 литров
    50 ₽
    - Заказать + Заказать

  • молоко

    @@ -320,7 +319,7 @@

    молоко

    1 литр
    100 ₽
    - Заказать + Заказать

  • витамины

    @@ -328,7 +327,7 @@

    витамины

    1 упаковка (30 г)
    300 ₽
    - Заказать + Заказать
    • @@ -349,8 +348,8 @@

    Акции и новинки

    -
    -
    +
    +

    Приглашаем
    к сотрудничеству дилеров!

    @@ -387,15 +386,14 @@

    Приглашаем
    к сотрудничест

    @@ -409,6 +407,7 @@
    + diff --git a/source/images/catalog-background@1x.png b/source/images/catalog-background-mobile@1x.png similarity index 100% rename from source/images/catalog-background@1x.png rename to source/images/catalog-background-mobile@1x.png diff --git a/source/images/catalog-background@1x.webp b/source/images/catalog-background-mobile@1x.webp similarity index 100% rename from source/images/catalog-background@1x.webp rename to source/images/catalog-background-mobile@1x.webp diff --git a/source/images/catalog-background@2x.png b/source/images/catalog-background-mobile@2x.png similarity index 100% rename from source/images/catalog-background@2x.png rename to source/images/catalog-background-mobile@2x.png diff --git a/source/images/catalog-background@2x.webp b/source/images/catalog-background-mobile@2x.webp similarity index 100% rename from source/images/catalog-background@2x.webp rename to source/images/catalog-background-mobile@2x.webp diff --git a/source/index.html b/source/index.html index e8b7eae..5449d3b 100644 --- a/source/index.html +++ b/source/index.html @@ -6,7 +6,6 @@ Cat Energy: Функциональное питание для котов - @@ -76,12 +75,13 @@

  • Похудение

    Ваш кот весит больше собаки и почти утратил способность лазить по деревьям? Пора на диету! Cat Energy Slim поможет вашему питомцу сбросить лишний вес.

    - Каталог slim + Каталог slim
    • +

  • Набор массы

    Заработать авторитет среди дворовых котов и даже собак? Серия Cat Energy Pro поможет вашему коту нарастить необходимые мышцы!

    - Каталог pro + Каталог pro
    • @@ -99,7 +99,7 @@

    Как это работает

    Замените один-два приема обычной еды на наше функциональное питание.

  • -

    Уже через месяц наслаждайтесь изменениями к лучшему  вашего питомца!

    +

    Уже через месяц наслаждайтесь изменениями к лучшему   вашего питомца!

    • @@ -128,15 +128,15 @@

    Живой пример

    - - + + Изображение кота до программы снижения веса. - - + + Изображение кота после программы снижения веса. @@ -185,13 +185,13 @@

    Приглашаем
    к сотрудничест

    @@ -206,6 +206,7 @@ + diff --git a/source/styles/blocks/additional-products.scss b/source/styles/blocks/additional-products.scss index 0cc1701..f5678bd 100644 --- a/source/styles/blocks/additional-products.scss +++ b/source/styles/blocks/additional-products.scss @@ -297,20 +297,34 @@ right: 0; z-index: -1; min-height: 290px; - background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/catalog-background@1x.png"); + background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/catalog-background-mobile@1x.webp"); background-repeat: no-repeat; background-size: cover, cover; background-position: center center; @media (min-width: $tablet-width) { min-height: 200px; - background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/catalog-background-tablet@1x.png"); + background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/catalog-background-tablet@1x.webp"); } @media (min-width: $desktop-width) { width: 245px; min-height: 288px; - background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/catalog-background-desktop@1x.png"); + background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/catalog-background-desktop@1x.webp"); + } +} + +@media (min-resolution: 2x) { + .additional-products__banner::before { + background: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/catalog-background-mobile@2x.webp"); + + @media (min-width: $tablet-width) { + background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/catalog-background-tablet@2x.webp"); + } + + @media (min-width: $desktop-width) { + background: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/catalog-background-desktop@2x.webp"); + } } } diff --git a/source/styles/blocks/benefits.scss b/source/styles/blocks/benefits.scss index 16e70da..dced3a1 100644 --- a/source/styles/blocks/benefits.scss +++ b/source/styles/blocks/benefits.scss @@ -59,14 +59,16 @@ @media (min-width: $tablet-width) { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(2, 1fr); gap: 37px 60px; } @media (min-width: $desktop-width) { - display: flex; - flex-flow: row nowrap; + grid-template-columns: repeat(4, 1fr); gap: 37px 79px; + // display: flex; + // flex-flow: row wrap; + //gap: 37px 79px; } } @@ -81,7 +83,8 @@ } @media (min-width: $desktop-width) { - min-width: 246px; + min-width: 230px; + max-width: 250px; padding-right: 0; } } @@ -146,6 +149,13 @@ } } +.benefits__item:nth-child(3)::after, +.benefits__item:nth-child(4)::after { + @media (min-width: $desktop-width) { + left: 114px; + } +} + .benefits__description { margin: 2px 5px 0 80px; diff --git a/source/styles/blocks/button.scss b/source/styles/blocks/button.scss index 3dad07a..dc42f28 100644 --- a/source/styles/blocks/button.scss +++ b/source/styles/blocks/button.scss @@ -18,7 +18,6 @@ &:focus { background-color: $bg-basic-green-2; - outline: none; } &:hover { @@ -38,7 +37,6 @@ &:focus { background-color: $bg-special-grey-4; - outline: none; } &:hover { diff --git a/source/styles/blocks/card.scss b/source/styles/blocks/card.scss index 9ab8d28..fded6b6 100644 --- a/source/styles/blocks/card.scss +++ b/source/styles/blocks/card.scss @@ -44,10 +44,6 @@ $card-top-offset: 81px; place-self: start center; align-content: center; - &:focus { - outline: none; - } - @media (min-width: $tablet-width) { height: 210px; } @@ -92,10 +88,6 @@ $card-top-offset: 81px; text-decoration: none; text-transform: uppercase; - &:focus { - outline: none; - } - @media (min-width: $tablet-width) { font-size: 20px; line-height: 24px; diff --git a/source/styles/blocks/contacts.scss b/source/styles/blocks/contacts.scss index 6e024b4..e04aa3d 100644 --- a/source/styles/blocks/contacts.scss +++ b/source/styles/blocks/contacts.scss @@ -4,41 +4,41 @@ padding: 0; } -.contacts__wrapper { - @media (min-width: $tablet-width) { - background-color: $bg-basic-white; - } +.contacts--inner { + background-color: $bg-basic-grey; @media (min-width: $desktop-width) { - position: absolute; - top: 95px; - left: 110px; - z-index: 3; background-color: $bg-basic-white; - width: 565px; - height: 199px; - overflow: hidden; - padding: 0; - margin: 0; } } -.contacts__wrapper--inner { - background-color: $bg-basic-white; - +.contacts__wrapper { @media (min-width: $tablet-width) { - background-color: $bg-basic-grey; + width: 768px; + margin: 0 auto; + overflow: hidden; + pointer-events: none; + padding: 0; + position: relative; + z-index: 2; } @media (min-width: $desktop-width) { - background-color: $bg-basic-white; + width: 1440px; + margin: 0 auto; + overflow: hidden; + pointer-events: none; + padding: 0; + position: relative; + z-index: 2; } } .contacts__content { + pointer-events: all; width: $mobile-width; - margin: 0 auto; padding: 0 20px; + margin: 0 auto; min-height: 112px; display: grid; grid-template-columns: 1fr 1fr; @@ -48,13 +48,15 @@ min-height: unset; width: $tablet-width; padding: 51px 70px 50px; + margin: 0; column-gap: 250px; } @media (min-width: $desktop-width) { - width: unset; - padding: 51px 70px 50px; + width: 565px; + margin: 95px 0 106px 110px; column-gap: 25px; + background-color: $bg-basic-white; } } @@ -96,35 +98,40 @@ .contacts__location { position: relative; - height: 362px; + min-height: 362px; @media (min-width: $tablet-width) { min-height: 400px; } + + @media (min-width: $desktop-width) { + position: absolute; + top: 0; + left: 0; + z-index: 1; + width: 100%; + height: 100%; + } } .contacts__iframe { position: absolute; + top: 0; + left: 0; z-index: 2; display: block; border: none; width: 100%; - height: 362px; - - @media (min-width: $tablet-width) { - height: 400px; - } + height: 100%; } .contacts__map { position: absolute; - z-index: 1; + top: 0; + left: 0; + z-index: 2; display: block; width: 100%; - height: 362px; + height: 100%; object-fit: cover; - - @media (min-width: $tablet-width) { - height: 400px; - } } diff --git a/source/styles/blocks/designed-by.scss b/source/styles/blocks/designed-by.scss index 8651815..671b58c 100644 --- a/source/styles/blocks/designed-by.scss +++ b/source/styles/blocks/designed-by.scss @@ -6,6 +6,10 @@ align-self: start; padding: 0; } + + @media (min-width: $desktop-width) { + padding: 1px 0 0; + } } .designed-by__link { @@ -33,7 +37,6 @@ &:focus, &:hover { color: $text-color-basic-green; - outline: none; } &:active { diff --git a/source/styles/blocks/diets.scss b/source/styles/blocks/diets.scss index 7b641e6..9c555d2 100644 --- a/source/styles/blocks/diets.scss +++ b/source/styles/blocks/diets.scss @@ -17,7 +17,7 @@ .diets__list { display: flex; - flex-direction: column; + flex-flow: column wrap; gap: 20px; list-style: none; margin: 0; @@ -197,10 +197,6 @@ } } -.diets__link:focus { - outline: none; -} - .diets__link, .diets__link:hover { display: inline-block; diff --git a/source/styles/blocks/footer.scss b/source/styles/blocks/footer.scss index e7ca365..6476d6a 100644 --- a/source/styles/blocks/footer.scss +++ b/source/styles/blocks/footer.scss @@ -26,12 +26,13 @@ @media (min-width: $tablet-width) { display: grid; - grid-template-columns: 163px 1fr 163px; + grid-template-columns: 164px 1fr 162px; column-gap: 20px; padding: 55px 0 51px; } @media (min-width: $desktop-width) { + grid-template-columns: 164px 1fr 163px; padding: 65px 0 63px; } } @@ -44,7 +45,6 @@ &:focus, &:hover { color: $text-color-special-black-3; - outline: none; } &:active { @@ -52,7 +52,11 @@ } @media (min-width: $tablet-width) { - padding: 6.5px 0; + padding: 6px 0; + } + + @media (min-width: $desktop-width) { + padding: 8px 0; } } diff --git a/source/styles/blocks/header.scss b/source/styles/blocks/header.scss index 6105072..f4a38f9 100644 --- a/source/styles/blocks/header.scss +++ b/source/styles/blocks/header.scss @@ -67,7 +67,6 @@ &:focus, &:hover { opacity: 0.8; - outline: none; } &:active { diff --git a/source/styles/blocks/navigation-list.scss b/source/styles/blocks/navigation-list.scss index 4ad4417..5ba1d77 100644 --- a/source/styles/blocks/navigation-list.scss +++ b/source/styles/blocks/navigation-list.scss @@ -72,7 +72,6 @@ color: $text-color-basic-black; text-transform: uppercase; text-decoration: none; - outline: none; &:focus { opacity: 0.6; diff --git a/source/styles/blocks/slider.scss b/source/styles/blocks/slider.scss index c6ec6ec..1c6937c 100644 --- a/source/styles/blocks/slider.scss +++ b/source/styles/blocks/slider.scss @@ -41,7 +41,6 @@ &:hover, &:focus { background-color: $bg-basic-green; - outline: none; } &:active { diff --git a/source/styles/blocks/social.scss b/source/styles/blocks/social.scss index 7c2a3c3..b02bc3b 100644 --- a/source/styles/blocks/social.scss +++ b/source/styles/blocks/social.scss @@ -1,5 +1,5 @@ .social { - padding: 20px 0 19px; + padding: 18px 0 15px; border-top: 1px solid $bg-special-grey; border-bottom: 1px solid $bg-special-grey; @@ -12,13 +12,17 @@ .social__list { list-style: none; margin: 0; - padding: 0; + padding: 2px 0 0; width: 100%; display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: center; + + @media (min-width: $desktop-width) { + padding: 3px 0 0; + } } .social__item { diff --git a/source/styles/blocks/subscription.scss b/source/styles/blocks/subscription.scss index bb6e279..169bddf 100644 --- a/source/styles/blocks/subscription.scss +++ b/source/styles/blocks/subscription.scss @@ -149,7 +149,6 @@ &:focus-within, &:focus { - outline: none; border-color: #cdcdcd; } diff --git a/source/styles/common/variables.scss b/source/styles/common/variables.scss index b9f3fc9..d1ae5df 100644 --- a/source/styles/common/variables.scss +++ b/source/styles/common/variables.scss @@ -1,5 +1,5 @@ -$primary-font: "Lato", sans-serif; -$secondary-font: "Oswald", sans-serif; +$primary-font: "Lato", "Arial", sans-serif; +$secondary-font: "Oswald", "Arial", sans-serif; $text-color-special-grey: #444444; $text-color-special-grey-6: #666666;