diff --git a/source/catalog.html b/source/catalog.html index 27b2149..0e2894f 100644 --- a/source/catalog.html +++ b/source/catalog.html @@ -19,7 +19,7 @@ + srcset="images/logo-tablet.svg" /> логотип кота diff --git a/source/icons/arrow-cat.svg b/source/icons/arrow-cat.svg new file mode 100644 index 0000000..c5e4ed3 --- /dev/null +++ b/source/icons/arrow-cat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/arrow-slider.svg b/source/icons/arrow-slider.svg new file mode 100644 index 0000000..77ed2cf --- /dev/null +++ b/source/icons/arrow-slider.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/arrow.svg b/source/icons/arrow.svg new file mode 100644 index 0000000..c5e4ed3 --- /dev/null +++ b/source/icons/arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/burger-decoration.svg b/source/icons/burger-decoration.svg new file mode 100644 index 0000000..69be46b --- /dev/null +++ b/source/icons/burger-decoration.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/cat-sitting.svg b/source/icons/cat-sitting.svg new file mode 100644 index 0000000..1145925 --- /dev/null +++ b/source/icons/cat-sitting.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/cat_coming.svg b/source/icons/cat_coming.svg new file mode 100644 index 0000000..cb023ae --- /dev/null +++ b/source/icons/cat_coming.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/cross.svg b/source/icons/cross.svg new file mode 100644 index 0000000..d432f44 --- /dev/null +++ b/source/icons/cross.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/cutlery.svg b/source/icons/cutlery.svg new file mode 100644 index 0000000..d2bc6dc --- /dev/null +++ b/source/icons/cutlery.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/html-academy.svg b/source/icons/html-academy.svg new file mode 100644 index 0000000..8f46539 --- /dev/null +++ b/source/icons/html-academy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/plus.svg b/source/icons/plus.svg new file mode 100644 index 0000000..328b41a --- /dev/null +++ b/source/icons/plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/powder.svg b/source/icons/powder.svg new file mode 100644 index 0000000..1b71c41 --- /dev/null +++ b/source/icons/powder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/scales.svg b/source/icons/scales.svg new file mode 100644 index 0000000..762acdc --- /dev/null +++ b/source/icons/scales.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/sheet.svg b/source/icons/sheet.svg new file mode 100644 index 0000000..0b5fe1c --- /dev/null +++ b/source/icons/sheet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/telegram.svg b/source/icons/telegram.svg new file mode 100644 index 0000000..6d841a8 --- /dev/null +++ b/source/icons/telegram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/vkontakte.svg b/source/icons/vkontakte.svg new file mode 100644 index 0000000..5f0a761 --- /dev/null +++ b/source/icons/vkontakte.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/yotube.svg b/source/icons/yotube.svg new file mode 100644 index 0000000..7181ed6 --- /dev/null +++ b/source/icons/yotube.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git "a/source/icons/\321\201up.svg" "b/source/icons/\321\201up.svg" new file mode 100644 index 0000000..e4568f1 --- /dev/null +++ "b/source/icons/\321\201up.svg" @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/images/arrow-slider.svg b/source/images/arrow-slider.svg new file mode 100644 index 0000000..77ed2cf --- /dev/null +++ b/source/images/arrow-slider.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/images/cat-coming.svg b/source/images/cat-coming.svg deleted file mode 100644 index fb7ab91..0000000 --- a/source/images/cat-coming.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/source/images/cat-sitting.svg b/source/images/cat-sitting.svg deleted file mode 100644 index 5842426..0000000 --- a/source/images/cat-sitting.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/source/images/cat_energy_text.svg b/source/images/cat_energy_text.svg index c1a52e6..ed4bf52 100644 --- a/source/images/cat_energy_text.svg +++ b/source/images/cat_energy_text.svg @@ -1,18 +1 @@ - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/source/images/cutlery.svg b/source/images/cutlery.svg deleted file mode 100644 index 4770c13..0000000 --- a/source/images/cutlery.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/source/images/green-fon.png b/source/images/green-fon.png new file mode 100644 index 0000000..b598ea8 Binary files /dev/null and b/source/images/green-fon.png differ diff --git a/source/images/html-academy.png b/source/images/html-academy.png deleted file mode 100644 index f8c3dbc..0000000 Binary files a/source/images/html-academy.png and /dev/null differ diff --git a/source/images/icon_gift.svg b/source/images/icon_gift.svg new file mode 100644 index 0000000..f6befb1 --- /dev/null +++ b/source/images/icon_gift.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/images/logo-desktop.svg b/source/images/logo-desktop.svg index a55a87d..c25a96c 100644 --- a/source/images/logo-desktop.svg +++ b/source/images/logo-desktop.svg @@ -1,24 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/source/images/logo-mobile.svg b/source/images/logo-mobile.svg index dee2b63..d408ab4 100644 --- a/source/images/logo-mobile.svg +++ b/source/images/logo-mobile.svg @@ -1,19 +1 @@ - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/source/images/logo-tablet.svg b/source/images/logo-tablet.svg index 273be9f..5515d0b 100644 --- a/source/images/logo-tablet.svg +++ b/source/images/logo-tablet.svg @@ -1,18 +1 @@ - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/source/images/nutrition-cat-energy.png b/source/images/nutrition-cat-energy.png new file mode 100644 index 0000000..c6fee28 Binary files /dev/null and b/source/images/nutrition-cat-energy.png differ diff --git a/source/images/powder.svg b/source/images/powder.svg deleted file mode 100644 index 389f138..0000000 --- a/source/images/powder.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/source/images/scales.svg b/source/images/scales.svg deleted file mode 100644 index 253afe8..0000000 --- a/source/images/scales.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/source/images/sheet.svg b/source/images/sheet.svg deleted file mode 100644 index f257071..0000000 --- a/source/images/sheet.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/source/images/telegram.png b/source/images/telegram.png deleted file mode 100644 index 17c62e2..0000000 Binary files a/source/images/telegram.png and /dev/null differ diff --git a/source/images/vkontakte.png b/source/images/vkontakte.png deleted file mode 100644 index 092e4f0..0000000 Binary files a/source/images/vkontakte.png and /dev/null differ diff --git a/source/images/youtube.png b/source/images/youtube.png deleted file mode 100644 index 8d554c0..0000000 Binary files a/source/images/youtube.png and /dev/null differ diff --git a/source/index.html b/source/index.html index 98cc0ba..11faf52 100644 --- a/source/index.html +++ b/source/index.html @@ -16,7 +16,7 @@
-
-
-
- -
    -
  1. -

    - Функциональное питание содержит только полезные питательные +

    +
    + +
      +
    1. +

      + Функциональное питание
      содержит только полезные
      питательные вещества.

      2. -
    2. -

      - Выпускается в виде порошка, который нужно лишь залить кипятком и +

    3. +

      + Выпускается в виде порошка,
      который нужно лишь залить
      кипятком и готово.

      4. -
    4. -

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

    5. +

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

      6. -
    6. -

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

    7. +

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

      8. @@ -111,8 +127,8 @@
    - -

    +

    +

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

    Затрачено времени
    60 ДНЕЙ
    Затраты на питание:15 000 руб.
    +
    + +
    @@ -140,7 +159,7 @@

    Приглашаем к сотруднечиств
    - текст кот энергия
    @@ -158,7 +177,7 @@

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

    - html academy + html academy

diff --git a/source/styles/blocks/example-case.scss b/source/styles/blocks/example-case.scss index 1db9aaf..da1574e 100644 --- a/source/styles/blocks/example-case.scss +++ b/source/styles/blocks/example-case.scss @@ -35,3 +35,56 @@ color: $base-color-text; } +.example-case__slider-cat { + + width: 100%; + height: 300px; +} + +.example-case__slider { + background-color: #666666; + border: none; + width: 4px; + height: 100%; + padding: 0; + display: block; + position: relative; + top: 0; + left: -2px; + cursor: pointer; + margin-left: 20px; +} + + +.example-case__slider::before { + content: ""; + position: absolute; + width: 40px; + height: 40px; + background-color: rgb(255, 255, 255); + border: 2px solid #666666; + border-radius: 50%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.example-case__slider::after { + content: ""; + background-color: #666666; + width: 24px; + height: 18px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + -webkit-mask-image: url("/icons/arrow-slider.svg"); + mask-image: url("/icons/arrow-slider.svg"); + -webkit-mask-position: 50%; + mask-position: 50%; + -webkit-mask-size: 24px 18px; + mask-size: 24px 18px; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; +} + diff --git a/source/styles/blocks/example-case__wrapper.scss b/source/styles/blocks/example-case__wrapper.scss new file mode 100644 index 0000000..0d90b47 --- /dev/null +++ b/source/styles/blocks/example-case__wrapper.scss @@ -0,0 +1,3 @@ +.example-case__wrapper { + text-decoration: none; +} diff --git a/source/styles/blocks/how-works.scss b/source/styles/blocks/how-works.scss index ab231cf..2bf1ded 100644 --- a/source/styles/blocks/how-works.scss +++ b/source/styles/blocks/how-works.scss @@ -10,4 +10,46 @@ font-size: 14px; line-height: 14px; color: $base-color-text; + width: 200px; + margin-left: 100px; + margin-top: 5px; +} + +.how-works__item { + content: ""; + background-color: rgb(104,183,56); + background-position: 50%; + background-repeat: no-repeat; + flex-shrink: 0; + width: 60px; + height: 60px; + display: block; + margin-bottom: 20px; +} + +.how-works__item--sheet { + background-image: url("/icons/sheet.svg"); + background-size: 30px 32px; +} + +.how-works__item--powder { + background-image: url("/icons/powder.svg"); + background-size: 60px 60px; +} + +.how-works__item--cutlery { + background-image: url("/icons/cutlery.svg"); + background-size: 25px 30px; +} + +.how-works__item--scales { + background-image: url("/icons/scales.svg"); + background-size: 26px 31px; +} + +.how-works__list { + display: flex; + flex-direction: column; + width: 320px; + height: 300px; } diff --git a/source/styles/blocks/main-footer.scss b/source/styles/blocks/main-footer.scss index 5b8af30..8d93b73 100644 --- a/source/styles/blocks/main-footer.scss +++ b/source/styles/blocks/main-footer.scss @@ -1,3 +1,87 @@ .main-footer { text-decoration: none; } + +.social-link--vkonakte { + background-color: rgb(102,102,102); + -webkit-mask-image: url("/icons/vkontakte.svg"); + mask-image: url("/icons/vkontakte.svg"); + -webkit-mask-size: 28px 22px; + mask-size: 28px 22px; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; +} + +.social-link--vkonakte:hover { + background-color: rgb(104,183,56); +} + +.social-link--yotube { + background-color: rgb(102,102,102); + -webkit-mask-image: url("/icons/yotube.svg"); + mask-image: url("/icons/yotube.svg"); + -webkit-mask-size: 28px 22px; + mask-size: 28px 22px; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; +} + +.social-link--telegram { + background-color: rgb(102,102,102); + -webkit-mask-image: url("/icons/telegram.svg"); + mask-image: url("/icons/telegram.svg"); + -webkit-mask-size: 28px 22px; + mask-size: 28px 22px; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; +} + +.main-footer__social { + display: flex; + justify-content: space-between; +} + +.social-list { + display: flex; + list-style: none; + padding: 0; + margin: 0; +} + +.social-item { + margin-right: 26px; +} + +.social-item:last-child { + margin-right: 0; +} + + +.copyright { + color: inherit; + display: flex; + justify-content: space-between; + align-items: center; + font-family: "Lato", sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 20px; + text-decoration: none; + transition: all, all 1.3s; +} + + +.copyright { + background-color: rgb(102,102,102); + -webkit-mask-image: url("/icons/html-academy.svg"); + mask-image: url("/icons/html-academy.svg"); + -webkit-mask-size: 27px 34px; + mask-size: 27px 34px; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; +} + +.main-footer__link { + height: 34px; +} diff --git a/source/styles/blocks/navigation.scss b/source/styles/blocks/navigation.scss index f07ad05..38bb882 100644 --- a/source/styles/blocks/navigation.scss +++ b/source/styles/blocks/navigation.scss @@ -18,6 +18,8 @@ li { font-size: 36px; line-height: 36px; color: #ffffff; + position: absolute; + z-index: 1; } .navigation__text { @@ -26,11 +28,8 @@ li { font-size: 14px; line-height: 14px; color: #ffffff; -} - - -.navigation__functional { - background-color: rgba(104, 183, 56, 0.85); + position: absolute; + z-index: 1; } .navigation__select-program { @@ -44,3 +43,32 @@ li { text-decoration: none; } +.navigation__toggle { + background-image: url("/icons/burger-decoration.svg"); + background-repeat: no-repeat; + background-size: 24px 24px; + width: 24px; + height: 24px; + border: none; + background-color: rgb(255 255 255); +} + +.navigation__toggle--close { + background-image: url("/icons/cross.svg"); +} + +.navigation__functional { + position: relative; +} + +.navigation__green { + background-image: url("/images/green-fon.png"); + position: absolute; + top: 0; + left: 0; + width: 320px; + height: 302px; + background-size: cover; + background-position: center; +} + diff --git a/source/styles/blocks/product-program.scss b/source/styles/blocks/product-program.scss index 02723e1..772f478 100644 --- a/source/styles/blocks/product-program.scss +++ b/source/styles/blocks/product-program.scss @@ -1,15 +1,43 @@ -.product-program__titel { +.product-program__title { font-family: "Oswald", sans-serif; font-weight: 400; font-size: 24px; line-height: 37px; color: $base-color-text; + text-align: center; + text-transform: uppercase; } -.product-program__item { +.navigation__functional { + height: 505px; +} + +.product-program__item--weight-gain { + background-color: #f2f2f2; + width: 280px; + height: 266px; + background-image: url("/icons/cat_coming.svg"); + background-size: 50px 53px; + background-repeat: no-repeat; +} + +.product-program__item--weight-loss { background-color: #f2f2f2; + width: 280px; + height: 266px; + background-image: url("/icons/cat-sitting.svg"); + background-size: 50px 53px; + background-repeat: no-repeat; } +.navigation__feed { + z-index: 2; + position: absolute; + bottom: 10px; + left: 5px; +} + + .product-program__text { font-family: "Lato", sans-serif; font-weight: 400; @@ -25,5 +53,22 @@ line-height: 16px; color: $base-color-text; text-decoration: none; + text-transform: uppercase; +} + +.product-program__link::after { + content: ""; + background-color: #000000; + width: 24px; + height: 12px; + transition: all, all 1.3s; + -webkit-mask-image: url("/icons/arrow.svg"); + mask-image: url("/icons/arrow.svg"); + -webkit-mask-position: 100%; + -webkit-mask-size: 24px 12px; + mask-size: 24px 12px; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + display: block; }