diff --git a/source/catalog.html b/source/catalog.html index 2ef7ed0..588b449 100644 --- a/source/catalog.html +++ b/source/catalog.html @@ -36,6 +36,7 @@ -
-
+
+

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

  • @@ -283,7 +284,7 @@

    Показать е

-
+

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

    @@ -334,7 +335,7 @@

    Витамины

-
+

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

Подпишитесь на наши новости и не пропустите ни одного предложения!

diff --git a/source/index.html b/source/index.html index bc421e5..c5d4430 100644 --- a/source/index.html +++ b/source/index.html @@ -36,6 +36,7 @@ -
-
+
+

Функциональное @@ -80,7 +81,7 @@

Функциональное

-
+

Программы питания

  • @@ -96,7 +97,7 @@

    Набор массы

-
+

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

  • @@ -120,7 +121,7 @@

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

-
+

Живой пример

Борис сбросил 5 кг за 2 месяца, просто заменив свой обычный корм на Cat Energy Slim. Отличный результат без изнуряющих тренировок! При этом он не менял своих привычек и по-прежнему спит по 16 часов в день.

@@ -137,7 +138,7 @@

Живой пример

Затраты на питание: 15 000 РУБ.

-
+
diff --git a/source/styles/blocks/advantages.scss b/source/styles/blocks/advantages.scss index 2ec511e..6e1ca43 100644 --- a/source/styles/blocks/advantages.scss +++ b/source/styles/blocks/advantages.scss @@ -1,16 +1,12 @@ .advantages { min-width: 280px; max-width: 280px; - margin: 0 auto; - padding: 20px 20px 49px; } @media (min-width: $tablet-width) { .advantages { min-width: 708px; max-width: 708px; - margin: 0 auto; - padding: 45px 30px 0; border-bottom: 1px solid #e6e6e6; } } @@ -19,8 +15,6 @@ .advantages { min-width: 1220px; max-width: 1220px; - margin: 0 auto; - padding: 71px 60px 0; border: none; } } @@ -41,3 +35,15 @@ .advantages__list { @include list(); } + +@media (min-width: $tablet-width) { + .advantages__list { + margin-bottom: 47px; + } +} + +@media (min-width: $desktop-width) { + .advantages__list { + margin-bottom: 0; + } +} diff --git a/source/styles/blocks/advertising-example.scss b/source/styles/blocks/advertising-example.scss index f5c04d1..4e3e868 100644 --- a/source/styles/blocks/advertising-example.scss +++ b/source/styles/blocks/advertising-example.scss @@ -150,3 +150,27 @@ margin-left: 63px; } } + +.advertising-example__list { + margin-bottom: 10px; +} + +@media (min-width: $desktop-width) { + .advertising-example__list { + margin-bottom: 35px; + } +} + +@media (min-width: $tablet-width) { + .advertising-example__slider { + margin: 0 auto; + } +} + +@media (min-width: $desktop-width) { + .advertising-example__slider { + margin: 0; + margin-bottom: 85px; + margin-right: 60px; + } +} diff --git a/source/styles/blocks/benefits.scss b/source/styles/blocks/benefits.scss index 70e00cc..4a3f933 100644 --- a/source/styles/blocks/benefits.scss +++ b/source/styles/blocks/benefits.scss @@ -4,14 +4,12 @@ flex-wrap: wrap; gap: 37px 137px; counter-reset: benefits__item 0; - margin-bottom: 47px; } } @media (min-width: $desktop-width) { .benefits { gap: 77px; - margin-bottom: 0; } } diff --git a/source/styles/blocks/contacts.scss b/source/styles/blocks/contacts.scss index cdd98ea..e52f9dd 100644 --- a/source/styles/blocks/contacts.scss +++ b/source/styles/blocks/contacts.scss @@ -3,16 +3,12 @@ justify-content: space-between; min-width: 280px; max-width: 280px; - margin: 0 auto; - padding: 26px 20px; } @media (min-width: $tablet-width) { .contacts { min-width: 628px; max-width: 628px; - margin: 0 auto; - padding: 60px 70px; } } @@ -20,8 +16,6 @@ .contacts { min-width: 407px; max-width: 407px; - margin: 0; - padding: 60px 78px 60px 80px; } } diff --git a/source/styles/blocks/definition-list.scss b/source/styles/blocks/definition-list.scss index f3bd16c..cc450a7 100644 --- a/source/styles/blocks/definition-list.scss +++ b/source/styles/blocks/definition-list.scss @@ -4,7 +4,6 @@ flex-wrap: wrap; gap: 32px; text-align: center; - margin-bottom: 10px; } @media (min-width: $tablet-width) { @@ -13,12 +12,6 @@ } } -@media (min-width: $desktop-width) { - .definition-list { - margin-bottom: 35px; - } -} - .definition-list__description { @include font-text-secondary(24px, 24px, $color-text-dark); text-transform: uppercase; diff --git a/source/styles/blocks/extra-goods.scss b/source/styles/blocks/extra-goods.scss index 87cb251..b054633 100644 --- a/source/styles/blocks/extra-goods.scss +++ b/source/styles/blocks/extra-goods.scss @@ -1,16 +1,12 @@ .extra-goods { min-width: 280px; max-width: 280px; - margin: 0 auto; - padding: 25px 20px 0; } @media (min-width: $tablet-width) { .extra-goods { min-width: 708px; max-width: 708px; - margin: 0 auto; - padding: 0 30px; } } @@ -18,8 +14,6 @@ .extra-goods { min-width: 1220px; max-width: 1220px; - margin: 0 auto; - padding: 0 60px; } } diff --git a/source/styles/blocks/extra-product-card.scss b/source/styles/blocks/extra-product-card.scss index 03d76aa..de55e01 100644 --- a/source/styles/blocks/extra-product-card.scss +++ b/source/styles/blocks/extra-product-card.scss @@ -1,7 +1,7 @@ .extra-product-card { display: grid; grid-template-columns: 140px 70px 70px; - grid-template-rows: 29px 29px 55px; + grid-template-rows: auto auto auto; padding-top: 0; padding-bottom: 14px; border-bottom: 1px solid #ebebeb; @@ -11,7 +11,7 @@ @media (min-width: $tablet-width) { .extra-product-card { grid-template-columns: 285px 254px 91px; - grid-template-rows: 10px 70px; + grid-template-rows: auto 70px; padding-top: 26px; border-left: 1px solid #ebebeb; border-right: 1px solid #ebebeb; @@ -22,10 +22,11 @@ @media (min-width: $desktop-width) { .extra-product-card { grid-template-columns: 325px 243px 82px 244px; - grid-template-rows: 69px; + grid-template-rows: auto; padding: 0; border-left: none; border-right: none; + min-height: 70px; } } @@ -38,8 +39,9 @@ @media (min-width: $tablet-width) { .extra-product-card__link { - grid-column: 1/-1; + grid-column: 1/2; grid-row: 1/2; + margin-top: 0; } } @@ -83,11 +85,12 @@ .extra-product-card__info { display: grid; grid-template-columns: 254px 91px; - grid-template-rows: 20px; - grid-column: 2/4; + grid-template-rows: auto; + grid-column: 2/auto; grid-row: 1/2; margin-top: auto; text-align: end; + align-items: start; } } @@ -95,10 +98,11 @@ .extra-product-card__info { display: grid; grid-template-columns: 243px 82px; - grid-template-rows: 70px; + grid-template-rows: auto; grid-column: 2/4; grid-row: 1/-1; align-items: center; + height: 100%; } } @@ -133,6 +137,7 @@ @include font-text-primary(16px, 20px, $color-text-base); grid-column: 2/3; grid-row: 1/2; + word-break: break-word; } } diff --git a/source/styles/blocks/extra-product-list.scss b/source/styles/blocks/extra-product-list.scss index 3b71948..bba5415 100644 --- a/source/styles/blocks/extra-product-list.scss +++ b/source/styles/blocks/extra-product-list.scss @@ -2,14 +2,6 @@ @include list(); } -/* -- -@media (min-width: $tablet-width) { - .extra-product-list { - border: none; - } -} - -- */ - .extra-product-list__item { padding-top: 20px; padding-bottom: 25px; diff --git a/source/styles/blocks/form-block.scss b/source/styles/blocks/form-block.scss index b59a31a..f5044c2 100644 --- a/source/styles/blocks/form-block.scss +++ b/source/styles/blocks/form-block.scss @@ -1,9 +1,3 @@ -/* -- -.form-block { - border: none; -} - -- */ - .form-block__input { margin-bottom: 16px; padding: 13px; @@ -14,6 +8,7 @@ @media (min-width: $tablet-width) { .form-block__input { width: 376px; + margin-bottom: 0; } } @@ -31,8 +26,8 @@ @media (min-width: $tablet-width) { .form-block__button { - width: 256px; - height: 56px; flex-shrink: 0; + width: 256px; + min-height: 56px; } } diff --git a/source/styles/blocks/goods.scss b/source/styles/blocks/goods.scss index 14efc80..3bf21cd 100644 --- a/source/styles/blocks/goods.scss +++ b/source/styles/blocks/goods.scss @@ -1,16 +1,12 @@ .goods { min-width: 280px; max-width: 280px; - margin: 0 auto; - padding: 27px 20px 0; } @media (min-width: $tablet-width) { .goods { min-width: 708px; max-width: 708px; - margin: 0 auto; - padding: 65px 30px 77px; } } @@ -18,8 +14,6 @@ .goods { min-width: 1220px; max-width: 1220px; - margin: 0 auto; - padding: 188px 60px 71px; } } diff --git a/source/styles/blocks/icon.scss b/source/styles/blocks/icon.scss deleted file mode 100644 index fa23b89..0000000 --- a/source/styles/blocks/icon.scss +++ /dev/null @@ -1,5 +0,0 @@ -/* -- -.icon { - border: none; -} --- */ diff --git a/source/styles/blocks/links.scss b/source/styles/blocks/links.scss index 794c1a6..8f335aa 100644 --- a/source/styles/blocks/links.scss +++ b/source/styles/blocks/links.scss @@ -1,15 +1,3 @@ -/* -- -.links { - border: none; -} - -- */ - -@media (min-width: $tablet-width) { - .links { - margin-bottom: 0; - } -} - .links__wraper { min-width: 280px; max-width: 280px; diff --git a/source/styles/blocks/main-footer.scss b/source/styles/blocks/main-footer.scss index 826021e..20bb7f8 100644 --- a/source/styles/blocks/main-footer.scss +++ b/source/styles/blocks/main-footer.scss @@ -73,6 +73,25 @@ background-color: $bg-color-base; } +@media (min-width: $tablet-width) { + .main-footer__links { + margin-bottom: 0; + } +} + + +.main-footer__contacts { + margin: 0 auto; + padding: 26px 20px; +} + +@media (min-width: $tablet-width) { + .main-footer__contacts { + margin: 0 auto; + padding: 60px 70px; + } +} + @media (min-width: $desktop-width) { .main-footer__contacts { align-self: center; @@ -81,6 +100,8 @@ grid-area: 2 / 2 / 3 / 3; z-index: 1; background-color: $color-text-special; + margin: 0; margin-right: auto; + padding: 60px 78px 60px 80px; } } diff --git a/source/styles/blocks/main-header.scss b/source/styles/blocks/main-header.scss index dfa1604..1598378 100644 --- a/source/styles/blocks/main-header.scss +++ b/source/styles/blocks/main-header.scss @@ -1,7 +1,5 @@ .main-header { min-width: 280px; - margin: 0 auto; - padding-top: 13px; border-bottom: 1px solid #d9d9d9; } @@ -12,8 +10,6 @@ align-items: center; min-width: 708px; max-width: 708px; - margin: 0 auto; - padding: 25px 30px 0; border-bottom: none; } } @@ -22,9 +18,6 @@ .main-header { min-width: 1220px; max-width: 1220px; - margin: 0 auto; - padding: 55px 60px 0; - z-index: 10; } } @@ -58,9 +51,3 @@ margin-right: 0; } } - -/* -- -.main-header__nav { - border: none; -} --- */ diff --git a/source/styles/blocks/main-title.scss b/source/styles/blocks/main-title.scss deleted file mode 100644 index 68ff8a9..0000000 --- a/source/styles/blocks/main-title.scss +++ /dev/null @@ -1,5 +0,0 @@ -/* -- -.main-title { - border: none; -} - -- */ diff --git a/source/styles/blocks/main.scss b/source/styles/blocks/main.scss new file mode 100644 index 0000000..ce9eada --- /dev/null +++ b/source/styles/blocks/main.scss @@ -0,0 +1,103 @@ +@media (min-width: $tablet-width) { + .main__nutrition-selector { + margin: 0 auto; + padding: 65px 30px 0; + } +} + +@media (min-width: $desktop-width) { + .main__nutrition-selector { + padding: 0; + } +} + +.main__nutrition-programs { + margin: 0 auto; + padding: 20px 20px 0; +} + +@media (min-width: $tablet-width) { + .main__nutrition-programs { + padding: 0 30px; + } +} + + +@media (min-width: $desktop-width) { + .main__nutrition-programs { + padding: 82px 60px 0; + } +} + +.main__advantages { + margin: 0 auto; + padding: 20px 20px 49px; +} + +@media (min-width: $tablet-width) { + .main__advantages { + padding: 45px 30px 0; + } +} + +@media (min-width: $desktop-width) { + .main__advantages { + padding: 71px 60px 0; + } +} + +.main__extra-goods { + margin: 0 auto; + padding: 25px 20px 0; +} + +@media (min-width: $tablet-width) { + .main__extra-goods { + margin: 0 auto; + padding: 0 30px; + } +} + +@media (min-width: $desktop-width) { + .main__extra-goods { + margin: 0 auto; + padding: 0 60px; + } +} + +.main__goods { + margin: 0 auto; + padding: 27px 20px 0; +} + +@media (min-width: $tablet-width) { + .main__goods { + margin: 0 auto; + padding: 65px 30px 77px; + } +} + +@media (min-width: $desktop-width) { + .main__goods { + margin: 0 auto; + padding: 188px 60px 71px; + } +} + +.main__promos-and-new { + margin: 0 auto; + padding: 40px 20px; +} + +@media (width >= 768px) { + .main__promos-and-new { + padding: 0 38px; + } +} + +@media (width >= 1340px) { + .main__promos-and-new { + margin: 0 auto; + padding: 96px 60px 83px; + } +} diff --git a/source/styles/blocks/nutrition-programs.scss b/source/styles/blocks/nutrition-programs.scss index b250958..76fd855 100644 --- a/source/styles/blocks/nutrition-programs.scss +++ b/source/styles/blocks/nutrition-programs.scss @@ -1,16 +1,12 @@ .nutrition-programs { min-width: 280px; max-width: 280px; - margin: 0 auto; - padding: 20px 20px 0; } @media (min-width: $tablet-width) { .nutrition-programs { min-width: 708px; max-width: 708px; - margin: 0 auto; - padding: 0 30px; } } @@ -19,13 +15,5 @@ .nutrition-programs { min-width: 1220px; max-width: 1220px; - margin: 0 auto; - padding: 82px 60px 0; } } - -/* -- -.nutrition-programs__list { - border: none; -} - -- */ diff --git a/source/styles/blocks/nutrition-selector.scss b/source/styles/blocks/nutrition-selector.scss index e1ef5ed..2710704 100644 --- a/source/styles/blocks/nutrition-selector.scss +++ b/source/styles/blocks/nutrition-selector.scss @@ -20,7 +20,6 @@ height: calc(302 / 480 * 100%); background-repeat: no-repeat; background-position: center; - /* --background-size: contain;-- */ background-color: rgba($bg-color-bright, 85%); top: 0; left: 0; @@ -63,8 +62,6 @@ min-width: 708px; max-width: 708px; background: none; - margin: 0 auto; - padding: 65px 30px 0; } .nutrition-selector::before { @@ -101,7 +98,6 @@ min-width: initial; max-width: initial; width: 100%; - padding: 0; } .nutrition-selector::before { diff --git a/source/styles/blocks/offer-list.scss b/source/styles/blocks/offer-list.scss index f247c25..d2221d9 100644 --- a/source/styles/blocks/offer-list.scss +++ b/source/styles/blocks/offer-list.scss @@ -9,6 +9,22 @@ } } +.offer-list__item { + padding: 30px 33px 18px 20px; +} + +@media (min-width: $tablet-width) { + .offer-list__item { + padding: 77px 52px 53px; + } +} + +@media (min-width: $desktop-width) { + .offer-list__item { + padding-bottom: 55px; + } +} + .offer-list__item:not(:last-child) { margin-bottom: 20px; } diff --git a/source/styles/blocks/page.scss b/source/styles/blocks/page.scss index 7924497..ea1dcdb 100644 --- a/source/styles/blocks/page.scss +++ b/source/styles/blocks/page.scss @@ -11,6 +11,18 @@ overflow-x: hidden; } +.page__header { + margin: 0 auto; + padding-top: 13px; +} + +@media (min-width: $tablet-width) { + .page__header { + margin: 0 auto; + padding: 25px 30px 0; + } +} + @media (min-width: $desktop-width) { .page__header { @@ -18,6 +30,9 @@ top: 0; left: 50%; transform: translateX(-50%); + margin: 0 auto; + padding: 55px 60px 0; + z-index: 10; } } diff --git a/source/styles/blocks/product-list.scss b/source/styles/blocks/product-list.scss index ce63f3e..99c1ff4 100644 --- a/source/styles/blocks/product-list.scss +++ b/source/styles/blocks/product-list.scss @@ -2,7 +2,7 @@ @include list(); } -li:first-child::before { +.product-list__item:first-child::before { border-top: 1px solid #ebebeb; } diff --git a/source/styles/blocks/program-card.scss b/source/styles/blocks/program-card.scss index 85313e8..2a3d587 100644 --- a/source/styles/blocks/program-card.scss +++ b/source/styles/blocks/program-card.scss @@ -1,19 +1,11 @@ .program-card { background-color: $bg-color-base; position: relative; - padding: 30px 33px 18px 20px; -} - -@media (min-width: $tablet-width) { - .program-card { - padding: 77px 52px 53px; - } } @media (min-width: $desktop-width) { .program-card { width: 466px; - padding-bottom: 55px; } } @@ -228,42 +220,13 @@ gap: 15px; align-items: center; padding: 4px 0; - - &:hover, - &:focus-visible { - color: $color-text-dark; - - &::after { - background-color: $color-text-dark; - width: 32px; - mask-size: 32px 12px; - } - } - - &:active { - color: #b3b3b3; - - &::after { - background-color: #b3b3b3; - width: 32px; - mask-size: 32px 12px; - } - } - - &:disabled { - color: #bebebe; - - &::after { - background-color: #bebebe; - } - } } .program-card__link::after { display: block; content: ""; - width: 32px; - height: 10px; + width: 24px; + height: 12px; background-color: $color-text-dark; mask-image: url("../../icons/arrow.svg"); mask-size: 24px 12px; @@ -272,6 +235,36 @@ margin-top: 1px; } + +.program-card__link:hover, +.program-card__link:focus-visible { + color: $color-text-dark; + + &::after { + background-color: $color-text-dark; + width: 32px; + mask-size: 32px 12px; + } +} + +.program-card__link:active { + color: #b3b3b3; + + &::after { + background-color: #b3b3b3; + width: 32px; + mask-size: 32px 12px; + } +} + +.program-card__link:disabled { + color: #bebebe; + + &::after { + background-color: #bebebe; + } +} + @media (min-width: $tablet-width) { .program-card__link { @include font-text-secondary(20px, 30px, $color-text-dark); diff --git a/source/styles/blocks/promos-and-new.scss b/source/styles/blocks/promos-and-new.scss index d6a8b5e..747e9f6 100644 --- a/source/styles/blocks/promos-and-new.scss +++ b/source/styles/blocks/promos-and-new.scss @@ -1,8 +1,6 @@ .promos-and-new { min-width: 280px; max-width: 280px; - margin: 0 auto; - padding: 40px 20px; } .promos-and-new__title { @@ -58,7 +56,6 @@ .promos-and-new { min-width: 632px; max-width: 632px; - padding: 0 38px; } } @@ -112,8 +109,6 @@ .promos-and-new { min-width: 1220px; max-width: 1220px; - margin: 0 auto; - padding: 96px 60px 83px; } } diff --git a/source/styles/blocks/slider.scss b/source/styles/blocks/slider.scss index 95e7a16..b75a54e 100644 --- a/source/styles/blocks/slider.scss +++ b/source/styles/blocks/slider.scss @@ -17,12 +17,9 @@ @media (min-width: $desktop-width) { .slider { - margin: 0; - margin-bottom: 85px; position: absolute; right: 0; bottom: 0; - margin-right: 60px; } } diff --git a/source/styles/styles.scss b/source/styles/styles.scss index 64df455..4fa068f 100644 --- a/source/styles/styles.scss +++ b/source/styles/styles.scss @@ -7,6 +7,7 @@ /* BLOCKS */ @import "./blocks/page.scss"; +@import "./blocks/main.scss"; @import "./blocks/button.scss"; @import "./blocks/main-header.scss"; @import "./blocks/logo.scss"; @@ -30,7 +31,6 @@ @import "./blocks/promos-and-new.scss"; @import "./blocks/form-block.scss"; @import "./blocks/input-block.scss"; -@import "./blocks/icon.scss"; @import "./blocks/contacts.scss"; @import "./blocks/links.scss"; @import "./blocks/extra-product-list.scss";