From 9e8e87c435c5a06d02d0e09c8218db560beeae5e Mon Sep 17 00:00:00 2001 From: vic-knyazeva Date: Fri, 6 Dec 2024 20:16:20 +0700 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=D0=BE=D0=B7=D0=B4=D0=B0=D0=B5=D1=82?= =?UTF-8?q?=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20=D0=B2=20=D1=81=D0=B5?= =?UTF-8?q?=D0=BA=D1=86=D0=B8=D0=B8=20=D0=BA=D0=BE=D0=BD=D1=82=D0=B0=D0=BA?= =?UTF-8?q?=D1=82=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/catalog.html | 2 +- source/styles/blocks/contacts.scss | 62 +++++++++++------------------- 2 files changed, 23 insertions(+), 41 deletions(-) diff --git a/source/catalog.html b/source/catalog.html index 544dfb3..3f104d3 100644 --- a/source/catalog.html +++ b/source/catalog.html @@ -350,7 +350,7 @@

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

-
+

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

diff --git a/source/styles/blocks/contacts.scss b/source/styles/blocks/contacts.scss index 6e024b4..b3de07f 100644 --- a/source/styles/blocks/contacts.scss +++ b/source/styles/blocks/contacts.scss @@ -5,39 +5,19 @@ } .contacts__wrapper { - @media (min-width: $tablet-width) { - background-color: $bg-basic-white; - } - @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; + width: 1440px; + margin: 0 auto; padding: 0; - margin: 0; - } -} - -.contacts__wrapper--inner { - background-color: $bg-basic-white; - - @media (min-width: $tablet-width) { - background-color: $bg-basic-grey; - } - - @media (min-width: $desktop-width) { - background-color: $bg-basic-white; + position: relative; + z-index: 2; } } .contacts__content { width: $mobile-width; - margin: 0 auto; + margin-top: 95px; + margin-bottom: 106px; padding: 0 20px; min-height: 112px; display: grid; @@ -52,12 +32,14 @@ } @media (min-width: $desktop-width) { - width: unset; + width: 565px; padding: 51px 70px 50px; column-gap: 25px; + background-color: $bg-basic-white; } } + .contacts__title { font-family: $secondary-font; font-size: 16px; @@ -95,25 +77,29 @@ } .contacts__location { - position: relative; - height: 362px; + position: absolute; + top: 0; + left: 0; + min-height: 362px; @media (min-width: $tablet-width) { - min-height: 400px; + 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 { @@ -121,10 +107,6 @@ z-index: 1; display: block; width: 100%; - height: 362px; + height: 100%; object-fit: cover; - - @media (min-width: $tablet-width) { - height: 400px; - } } From 709c8a6807009139ce7324fa24f6b21159ec7553 Mon Sep 17 00:00:00 2001 From: vic-knyazeva Date: Fri, 6 Dec 2024 23:57:28 +0700 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?= =?UTF-8?q?=20=D0=BF=D0=BE=20=D0=B7=D0=B0=D0=BC=D0=B5=D1=87=D0=B0=D0=BD?= =?UTF-8?q?=D0=B8=D1=8F=D0=BC=20=D0=BD=D0=B0=D1=81=D1=82=D0=B0=D0=B2=D0=BD?= =?UTF-8?q?=D0=B8=D0=BA=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/catalog.html | 33 +++++++------- ...x.png => catalog-background-mobile@1x.png} | Bin ...webp => catalog-background-mobile@1x.webp} | Bin ...x.png => catalog-background-mobile@2x.png} | Bin ...webp => catalog-background-mobile@2x.webp} | Bin source/index.html | 23 +++++----- source/styles/blocks/additional-products.scss | 20 +++++++-- source/styles/blocks/benefits.scss | 18 ++++++-- source/styles/blocks/button.scss | 2 - source/styles/blocks/card.scss | 8 ---- source/styles/blocks/contacts.scss | 42 ++++++++++++++---- source/styles/blocks/designed-by.scss | 1 - source/styles/blocks/diets.scss | 6 +-- source/styles/blocks/footer.scss | 1 - source/styles/blocks/header.scss | 1 - source/styles/blocks/navigation-list.scss | 1 - source/styles/blocks/slider.scss | 1 - source/styles/blocks/subscription.scss | 1 - source/styles/common/variables.scss | 4 +- 19 files changed, 96 insertions(+), 66 deletions(-) rename source/images/{catalog-background@1x.png => catalog-background-mobile@1x.png} (100%) rename source/images/{catalog-background@1x.webp => catalog-background-mobile@1x.webp} (100%) rename source/images/{catalog-background@2x.png => catalog-background-mobile@2x.png} (100%) rename source/images/{catalog-background@2x.webp => catalog-background-mobile@2x.webp} (100%) diff --git a/source/catalog.html b/source/catalog.html index 3f104d3..87a3dc6 100644 --- a/source/catalog.html +++ b/source/catalog.html @@ -6,7 +6,6 @@ Cat Energy: Каталог продукции - @@ -87,7 +86,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,7 +348,7 @@

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

    -
    +

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

    @@ -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 b3de07f..8304dfd 100644 --- a/source/styles/blocks/contacts.scss +++ b/source/styles/blocks/contacts.scss @@ -4,10 +4,30 @@ padding: 0; } +.contacts--inner { + background-color: $bg-basic-grey; + + @media (min-width: $desktop-width) { + background-color: $bg-basic-white; + } +} + .contacts__wrapper { + @media (min-width: $tablet-width) { + width: 768px; + margin: 0 auto; + overflow: hidden; + pointer-events: none; + padding: 0; + position: relative; + z-index: 2; + } + @media (min-width: $desktop-width) { width: 1440px; margin: 0 auto; + overflow: hidden; + pointer-events: none; padding: 0; position: relative; z-index: 2; @@ -15,10 +35,10 @@ } .contacts__content { + pointer-events: all; width: $mobile-width; - margin-top: 95px; - margin-bottom: 106px; padding: 0 20px; + margin: 0 auto; min-height: 112px; display: grid; grid-template-columns: 1fr 1fr; @@ -28,18 +48,19 @@ min-height: unset; width: $tablet-width; padding: 51px 70px 50px; + margin: 0; column-gap: 250px; } @media (min-width: $desktop-width) { width: 565px; - padding: 51px 70px 50px; + margin-top: 95px; + margin-bottom: 106px; column-gap: 25px; background-color: $bg-basic-white; } } - .contacts__title { font-family: $secondary-font; font-size: 16px; @@ -77,12 +98,15 @@ } .contacts__location { - position: absolute; - top: 0; - left: 0; + position: relative; 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; @@ -104,7 +128,9 @@ .contacts__map { position: absolute; - z-index: 1; + top: 0; + left: 0; + z-index: 2; display: block; width: 100%; height: 100%; diff --git a/source/styles/blocks/designed-by.scss b/source/styles/blocks/designed-by.scss index 8651815..46c30f8 100644 --- a/source/styles/blocks/designed-by.scss +++ b/source/styles/blocks/designed-by.scss @@ -33,7 +33,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..2391578 100644 --- a/source/styles/blocks/footer.scss +++ b/source/styles/blocks/footer.scss @@ -44,7 +44,6 @@ &:focus, &:hover { color: $text-color-special-black-3; - outline: none; } &:active { 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/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; From 359248c96c8dee3528426050f7ed49d17ed09bd1 Mon Sep 17 00:00:00 2001 From: vic-knyazeva Date: Sat, 7 Dec 2024 00:23:35 +0700 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?= =?UTF-8?q?=20=D0=BF=D0=BE=20=D0=B7=D0=B0=D0=BC=D0=B5=D1=87=D0=B0=D0=BD?= =?UTF-8?q?=D0=B8=D1=8F=D0=BC=20=D0=BD=D0=B0=D1=81=D1=82=D0=B0=D0=B2=D0=BD?= =?UTF-8?q?=D0=B8=D0=BA=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/styles/blocks/contacts.scss | 3 +-- source/styles/blocks/designed-by.scss | 4 ++++ source/styles/blocks/footer.scss | 9 +++++++-- source/styles/blocks/social.scss | 8 ++++++-- 4 files changed, 18 insertions(+), 6 deletions(-) diff --git a/source/styles/blocks/contacts.scss b/source/styles/blocks/contacts.scss index 8304dfd..e04aa3d 100644 --- a/source/styles/blocks/contacts.scss +++ b/source/styles/blocks/contacts.scss @@ -54,8 +54,7 @@ @media (min-width: $desktop-width) { width: 565px; - margin-top: 95px; - margin-bottom: 106px; + margin: 95px 0 106px 110px; column-gap: 25px; background-color: $bg-basic-white; } diff --git a/source/styles/blocks/designed-by.scss b/source/styles/blocks/designed-by.scss index 46c30f8..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 { diff --git a/source/styles/blocks/footer.scss b/source/styles/blocks/footer.scss index 2391578..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; } } @@ -51,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/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 {