From d4796d94879262e86c589261a02ee46c945d1859 Mon Sep 17 00:00:00 2001 From: baranovdmitriy87 <147241780+baranovdmitriy87@users.noreply.github.com> Date: Fri, 18 Oct 2024 18:13:58 +0300 Subject: [PATCH] =?UTF-8?q?=D0=9F=D1=80=D0=BE=D0=B2=D0=B5=D1=80=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D0=B8=20=D0=BF=D0=BE=D0=B4=D0=B3=D0=BE=D0=BD?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D0=BF=D0=BE=20PP=20=D0=BD=D0=B0=D0=B2?= =?UTF-8?q?=D0=B8=D0=B3=D0=B0=D1=86=D0=B8=D1=8E=20=D0=B8=20=D0=B1=D0=BB?= =?UTF-8?q?=D0=BE=D0=BA=20=D0=BF=D1=80=D0=B5=D0=B8=D0=BC=D1=83=D1=89=D0=B5?= =?UTF-8?q?=D1=81=D1=82=D0=B2=20=D0=BD=D0=B0=20=D0=BC=D0=BE=D0=B1=D0=B8?= =?UTF-8?q?=D0=BB=D0=BA=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/icons/features/clock.svg | 1 + source/icons/features/leaf.svg | 1 + source/icons/features/lightning.svg | 1 + source/icons/features/pocket.svg | 1 + source/index.html | 52 ++++++---- source/styles/blocks/features.scss | 151 ++++++++++++++++++++++++---- source/styles/blocks/header.scss | 14 +-- source/styles/blocks/site-list.scss | 2 +- source/styles/blocks/slider.scss | 9 ++ source/styles/blocks/user-menu.scss | 2 +- source/styles/common/mixins.scss | 9 ++ 11 files changed, 196 insertions(+), 47 deletions(-) create mode 100644 source/icons/features/clock.svg create mode 100644 source/icons/features/leaf.svg create mode 100644 source/icons/features/lightning.svg create mode 100644 source/icons/features/pocket.svg diff --git a/source/icons/features/clock.svg b/source/icons/features/clock.svg new file mode 100644 index 00000000..7844a5eb --- /dev/null +++ b/source/icons/features/clock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/features/leaf.svg b/source/icons/features/leaf.svg new file mode 100644 index 00000000..a2baeb8f --- /dev/null +++ b/source/icons/features/leaf.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/features/lightning.svg b/source/icons/features/lightning.svg new file mode 100644 index 00000000..56c512af --- /dev/null +++ b/source/icons/features/lightning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/features/pocket.svg b/source/icons/features/pocket.svg new file mode 100644 index 00000000..c1c15a90 --- /dev/null +++ b/source/icons/features/pocket.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/index.html b/source/index.html index aa7cb51d..bbfbe5f9 100644 --- a/source/index.html +++ b/source/index.html @@ -58,11 +58,17 @@
  • Войти +
  • Корзина +
    • @@ -94,7 +100,7 @@

    Интернет-магазин кофейных н width="476" height="476"> Кофе в бежевой банке Декаф Флэт Уайт + width="280" height="270" loading="lazy" alt="Кофе в бежевой банке Декаф Флэт Уайт"> @@ -120,28 +126,40 @@

    Декаф Флэт Уайт

    Главные причины выбрать Drink2Go

    diff --git a/source/styles/blocks/features.scss b/source/styles/blocks/features.scss index aad9f0fb..8a2b7a77 100644 --- a/source/styles/blocks/features.scss +++ b/source/styles/blocks/features.scss @@ -1,28 +1,54 @@ -.features {} +.features { + // @media (min-width: $desktop-width) { + // width: 1140px; + // padding: 50px 40px; + // } +} .features__wrapper { margin: 0 auto; width: 320px; - padding: 50px 20px; + padding: 58px 20px; display: flex; flex-direction: column; + + @media (min-width: $tablet-width) { + width: 768px; + } + + @media (min-width: $desktop-width) { + width: 1140px; + padding: 50px 40px; + } } .features__title { - width: 280px; - height: 72px; + min-width: 280px; + // min-height: 72px; display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - gap: 10; - margin: 0 auto; + margin: 4px auto 0; color: $base-black; font-family: $montserrat-medium; font-size: 24px; font-weight: 700; line-height: 36px; text-align: center; + letter-spacing: 0.41px; + + @media (min-width: $tablet-width) { + min-width: 560px; + // height: 120px; + font-size: 38px; + font-weight: 700; + line-height: 60px; + letter-spacing: 0%; + text-align: center; + } + + @media (min-width: $desktop-width) { + margin-bottom: 50px; + } + } .features__subtitle { @@ -33,6 +59,7 @@ line-height: 16px; text-align: center; text-transform: uppercase; + letter-spacing: 0.51px; } .features__list { @@ -40,34 +67,100 @@ display: flex; flex-direction: column; align-items: center; + + @media (min-width: $tablet-width) { + display: grid; + grid-template-columns: 1fr 1fr; + margin-top: 60px; + } + + @media (min-width: $desktop-width) { + align-items: normal; + // display: flex; + // flex-direction: row; + display: grid; + column-gap: 10px; + grid-template-columns:250px 260px 250px 240px; + } + } .features__item { - width: 100%; - display: flex; - flex-direction: column; - align-items: center; + position: relative; + + @media (max-width: $mobile-width-only) { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + + @media (min-width: $tablet-width) { + display: flex; + flex-direction: column; + padding: 0 25px 0 73px; + } + + @media (min-width: $desktop-width) { + padding: 0; + } } .features__caption { - min-width: 75px; - padding: 0 20px; - margin: 10px 0 0; font-family: $montserrat-bold; color: $base-black; font-size: 18px; font-weight: 700; line-height: 32px; - text-align: center; -} -.features__span { - margin: 30px 0 0; + @media (max-width: $mobile-width-only) { + min-width: 75px; + // padding: 0 20px; + margin: 10px 0 1px; + text-align: center; + } + + @media (min-width: $tablet-width) { + font-size: 24px; + font-weight: 700; + line-height: 36px; + margin: 0; + } + + @media (min-width: $desktop-width) { + text-align: center; + } } +// .features__grid-tablet { +// @media (min-width: $tablet-width) { +// display: flex; +// flex-direction: column; +// align-items: flex-start; +// padding: 0 25px; +// } + +// } .features__icon { - margin: 30px 0 0; + + + @media (max-width: $mobile-width-only) { + margin: 36px 0 0; + } + + @media (min-width: $tablet-width) { + position: absolute; + top: -10px; + left: 0; + margin: 15px 0 0; + } + + @media (min-width: $desktop-width) { + top: -70px; + left: 110px; + text-align: center; + } &--speed::before { @include features-icon-base-styles; @@ -91,6 +184,7 @@ } .features__description { + margin: 5px auto -5px; color: $base-black; font-family: $montserrat-regular; font-size: 14px; @@ -98,4 +192,19 @@ line-height: 20px; letter-spacing: 0%; text-align: center; + + @media (min-width: $tablet-width) { + text-align: start; + } + + @media (min-width: $tablet-width) { + font-size: 14px; + line-height: 22px; + } + + @media (min-width: $desktop-width) { + text-align: center; + font-size: 12px; + line-height: 22px; + } } diff --git a/source/styles/blocks/header.scss b/source/styles/blocks/header.scss index e9268bab..34da7614 100644 --- a/source/styles/blocks/header.scss +++ b/source/styles/blocks/header.scss @@ -9,7 +9,7 @@ @media (max-width: $mobile-width-only) { position: relative; width: 320px; - padding: 12px 20px; + padding: 0px 20px; min-height: 60px; margin: 0 auto; display: flex; @@ -73,7 +73,7 @@ content: ""; width: 24px; height: 24px; - right: 33px; + right: 20px; z-index: 2; background-color: $white; display: block; @@ -93,12 +93,12 @@ .header--closed .js-toggle-button::before { content: ""; position: absolute; - top: 2px; - right: 0; - width: 24px; + top: 6px; + right: 2px; + width: 16px; height: 2px; background-color: $base-black; - box-shadow: 0 8px 0 0 $base-black, 0 16px 0 0 $base-black; + box-shadow: 0 5px 0 0 $base-black, 0 10px 0 0 $base-black; } .header--closed .js-toggle-button:active::before { @@ -122,7 +122,7 @@ .header--opened .main-nav__wrapper { width: 100%; position: absolute; - top: 66px; + top: 60px; right: 0; z-index: 10; text-align: center; diff --git a/source/styles/blocks/site-list.scss b/source/styles/blocks/site-list.scss index e5c05e39..33fad164 100644 --- a/source/styles/blocks/site-list.scss +++ b/source/styles/blocks/site-list.scss @@ -7,7 +7,7 @@ text-transform: uppercase; @media (max-width: $mobile-width-only) { - padding: 23px 0 22px; + padding: 20px 0 ; outline-offset: unset; } diff --git a/source/styles/blocks/slider.scss b/source/styles/blocks/slider.scss index 7e17dabb..6940bf39 100644 --- a/source/styles/blocks/slider.scss +++ b/source/styles/blocks/slider.scss @@ -1,4 +1,13 @@ .slider__wrapper { margin: 0 auto; width: 320px; + padding: 20px 0 50px; + margin-bottom: 100px; +} + +.slider__image-wrapper { + display: flex; + flex-direction: column; + align-items: center; + } diff --git a/source/styles/blocks/user-menu.scss b/source/styles/blocks/user-menu.scss index ffa6f38a..445dc7e0 100644 --- a/source/styles/blocks/user-menu.scss +++ b/source/styles/blocks/user-menu.scss @@ -18,7 +18,7 @@ .user-menu__wrapper { @media (max-width: $mobile-width-only) { - width: 210px; + width: 230px; } @media (min-width: $tablet-width) { diff --git a/source/styles/common/mixins.scss b/source/styles/common/mixins.scss index 3a394807..af11dc2f 100644 --- a/source/styles/common/mixins.scss +++ b/source/styles/common/mixins.scss @@ -5,6 +5,7 @@ list-style: none; } + /* user-menu base styles*/ @mixin user-menu-base-styles { content: ""; width: 16px; @@ -12,3 +13,11 @@ display: block; background: #444444; } + +/*features base styles*/ +@mixin features-icon-base-styles { + content: ""; + width: 50px; + height: 55px; + display: block; +}