From 8d8b71d9ef01004dfbe8b5dc01a8d1961d794c47 Mon Sep 17 00:00:00 2001 From: ElenaLisavina Date: Mon, 9 Dec 2024 18:58:23 +0300 Subject: [PATCH] Task5 --- source/catalog.html | 14 +++---- source/icons/1.svg | 1 + source/icons/2.svg | 1 + source/icons/3.svg | 1 + source/icons/4.svg | 1 + source/icons/academy-logo.svg | 1 + source/icons/black-cat..svg | 1 + source/icons/black-pantere.svg | 1 + source/icons/cat-weightless.svg | 1 + source/icons/clock.svg | 1 + source/icons/cross.svg | 1 + source/icons/cutlery.svg | 1 + source/icons/icon-clock.svg | 1 + source/icons/icon-cutlery.svg | 1 + source/icons/icon-leaf.svg | 1 + source/icons/icon-plus.svg | 1 + source/icons/icon-powder.svg | 1 + source/icons/icon-raw.svg | 1 + source/icons/leaf.svg | 1 + source/icons/powder.svg | 1 + source/icons/slash.svg | 1 + source/icons/slider-button.svg | 1 + source/icons/square-background.svg | 1 + source/icons/telegram-desctop.svg | 1 + source/icons/telegram-mobile.svg | 1 + source/icons/telegram-tablet.svg | 1 + source/icons/vkontakte-desctop.svg | 1 + source/icons/vkontakte-mobile.svg | 1 + source/icons/vkontakte-tablet.svg | 1 + source/icons/youtube-desctop.svg | 1 + source/icons/youtube-mobile.svg | 1 + source/icons/youtube-tablet.svg | 1 + source/images/svg/logo-desktop.svg | 1 + source/images/svg/logo-html academy.svg | 1 + source/images/svg/logo-mobile.svg | 20 +--------- source/images/svg/logo-tablet.svg | 1 + source/images/svg/logotype-desktop.svg | 25 +----------- source/images/svg/logotype-name.svg | 12 +----- source/images/svg/logotype-tablet.svg | 19 +-------- source/images/svg/main-logo-mobile.svg | 1 + source/index.html | 16 ++++---- source/styles/blocks/actions.scss | 13 +++++++ source/styles/blocks/additional-products.scss | 19 +++++++++ source/styles/blocks/advantages.scss | 39 +++++++++++++++++++ source/styles/blocks/card.scss | 18 +++++++++ source/styles/blocks/contacts.scss | 6 +++ source/styles/blocks/example.scss | 38 ++++++++++++++++++ source/styles/blocks/logotype.scss | 21 ++++++++++ source/styles/blocks/main-container.scss | 6 +++ source/styles/blocks/main-nav.scss | 35 +++++++++++++++++ source/styles/blocks/program.scss | 37 ++++++++++++++---- source/styles/common/scaffolding.scss | 14 +++++++ 52 files changed, 292 insertions(+), 95 deletions(-) create mode 100644 source/icons/1.svg create mode 100644 source/icons/2.svg create mode 100644 source/icons/3.svg create mode 100644 source/icons/4.svg create mode 100644 source/icons/academy-logo.svg create mode 100644 source/icons/black-cat..svg create mode 100644 source/icons/black-pantere.svg create mode 100644 source/icons/cat-weightless.svg create mode 100644 source/icons/clock.svg create mode 100644 source/icons/cross.svg create mode 100644 source/icons/cutlery.svg create mode 100644 source/icons/icon-clock.svg create mode 100644 source/icons/icon-cutlery.svg create mode 100644 source/icons/icon-leaf.svg create mode 100644 source/icons/icon-plus.svg create mode 100644 source/icons/icon-powder.svg create mode 100644 source/icons/icon-raw.svg create mode 100644 source/icons/leaf.svg create mode 100644 source/icons/powder.svg create mode 100644 source/icons/slash.svg create mode 100644 source/icons/slider-button.svg create mode 100644 source/icons/square-background.svg create mode 100644 source/icons/telegram-desctop.svg create mode 100644 source/icons/telegram-mobile.svg create mode 100644 source/icons/telegram-tablet.svg create mode 100644 source/icons/vkontakte-desctop.svg create mode 100644 source/icons/vkontakte-mobile.svg create mode 100644 source/icons/vkontakte-tablet.svg create mode 100644 source/icons/youtube-desctop.svg create mode 100644 source/icons/youtube-mobile.svg create mode 100644 source/icons/youtube-tablet.svg create mode 100644 source/images/svg/logo-desktop.svg create mode 100644 source/images/svg/logo-html academy.svg create mode 100644 source/images/svg/logo-tablet.svg create mode 100644 source/images/svg/main-logo-mobile.svg diff --git a/source/catalog.html b/source/catalog.html index 99e7127..12168bd 100644 --- a/source/catalog.html +++ b/source/catalog.html @@ -56,7 +56,7 @@ -

Cat Energy Pro 500 г>

+

Cat Energy Pro 500 г
@@ -84,7 +84,7 @@

Cat Energy Pro 500 г>

-

Cat Energy Pro 1000 г

+

Cat Energy Pro 1000 г
@@ -114,7 +114,7 @@

Cat Energy Pro 1000 г

-

Cat Energy Pro 500 г

+

Cat Energy Pro 500 г
@@ -144,7 +144,7 @@

Cat Energy Pro 500 г

-

Cat Energy Pro 1000 г

+

Cat Energy Pro 1000 г
@@ -174,7 +174,7 @@

Cat Energy Pro 1000 г

-

Cat Energy Pro 500 г

+

Cat Energy Pro 500 г
@@ -203,7 +203,7 @@

Cat Energy Pro 500 г

-

Cat Energy Pro 1000 г

+

Cat Energy Pro 1000 г
@@ -233,7 +233,7 @@

Cat Energy Pro 1000 г

-

Cat Energy Pro 500 г

+

Cat Energy Pro 500 г
diff --git a/source/icons/1.svg b/source/icons/1.svg new file mode 100644 index 0000000..179d707 --- /dev/null +++ b/source/icons/1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/2.svg b/source/icons/2.svg new file mode 100644 index 0000000..f141587 --- /dev/null +++ b/source/icons/2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/3.svg b/source/icons/3.svg new file mode 100644 index 0000000..d069584 --- /dev/null +++ b/source/icons/3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/4.svg b/source/icons/4.svg new file mode 100644 index 0000000..7d38acf --- /dev/null +++ b/source/icons/4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/academy-logo.svg b/source/icons/academy-logo.svg new file mode 100644 index 0000000..5c839da --- /dev/null +++ b/source/icons/academy-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/black-cat..svg b/source/icons/black-cat..svg new file mode 100644 index 0000000..83b768f --- /dev/null +++ b/source/icons/black-cat..svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/black-pantere.svg b/source/icons/black-pantere.svg new file mode 100644 index 0000000..911a7da --- /dev/null +++ b/source/icons/black-pantere.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/cat-weightless.svg b/source/icons/cat-weightless.svg new file mode 100644 index 0000000..1145925 --- /dev/null +++ b/source/icons/cat-weightless.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/clock.svg b/source/icons/clock.svg new file mode 100644 index 0000000..762acdc --- /dev/null +++ b/source/icons/clock.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..2e0d330 --- /dev/null +++ b/source/icons/cutlery.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/icon-clock.svg b/source/icons/icon-clock.svg new file mode 100644 index 0000000..f37bd08 --- /dev/null +++ b/source/icons/icon-clock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/icon-cutlery.svg b/source/icons/icon-cutlery.svg new file mode 100644 index 0000000..bea8526 --- /dev/null +++ b/source/icons/icon-cutlery.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/icon-leaf.svg b/source/icons/icon-leaf.svg new file mode 100644 index 0000000..882a6e9 --- /dev/null +++ b/source/icons/icon-leaf.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/icon-plus.svg b/source/icons/icon-plus.svg new file mode 100644 index 0000000..41819d7 --- /dev/null +++ b/source/icons/icon-plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/icon-powder.svg b/source/icons/icon-powder.svg new file mode 100644 index 0000000..212106f --- /dev/null +++ b/source/icons/icon-powder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/icon-raw.svg b/source/icons/icon-raw.svg new file mode 100644 index 0000000..4296dd6 --- /dev/null +++ b/source/icons/icon-raw.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/leaf.svg b/source/icons/leaf.svg new file mode 100644 index 0000000..a6e9fe5 --- /dev/null +++ b/source/icons/leaf.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..4baff4d --- /dev/null +++ b/source/icons/powder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/slash.svg b/source/icons/slash.svg new file mode 100644 index 0000000..4296dd6 --- /dev/null +++ b/source/icons/slash.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/slider-button.svg b/source/icons/slider-button.svg new file mode 100644 index 0000000..77ed2cf --- /dev/null +++ b/source/icons/slider-button.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/square-background.svg b/source/icons/square-background.svg new file mode 100644 index 0000000..cec1579 --- /dev/null +++ b/source/icons/square-background.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/telegram-desctop.svg b/source/icons/telegram-desctop.svg new file mode 100644 index 0000000..36c26db --- /dev/null +++ b/source/icons/telegram-desctop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/telegram-mobile.svg b/source/icons/telegram-mobile.svg new file mode 100644 index 0000000..36c26db --- /dev/null +++ b/source/icons/telegram-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/telegram-tablet.svg b/source/icons/telegram-tablet.svg new file mode 100644 index 0000000..36c26db --- /dev/null +++ b/source/icons/telegram-tablet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/vkontakte-desctop.svg b/source/icons/vkontakte-desctop.svg new file mode 100644 index 0000000..8eff6a3 --- /dev/null +++ b/source/icons/vkontakte-desctop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/vkontakte-mobile.svg b/source/icons/vkontakte-mobile.svg new file mode 100644 index 0000000..8eff6a3 --- /dev/null +++ b/source/icons/vkontakte-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/vkontakte-tablet.svg b/source/icons/vkontakte-tablet.svg new file mode 100644 index 0000000..8eff6a3 --- /dev/null +++ b/source/icons/vkontakte-tablet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/youtube-desctop.svg b/source/icons/youtube-desctop.svg new file mode 100644 index 0000000..8506734 --- /dev/null +++ b/source/icons/youtube-desctop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/youtube-mobile.svg b/source/icons/youtube-mobile.svg new file mode 100644 index 0000000..7181ed6 --- /dev/null +++ b/source/icons/youtube-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/youtube-tablet.svg b/source/icons/youtube-tablet.svg new file mode 100644 index 0000000..7181ed6 --- /dev/null +++ b/source/icons/youtube-tablet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/images/svg/logo-desktop.svg b/source/images/svg/logo-desktop.svg new file mode 100644 index 0000000..c25a96c --- /dev/null +++ b/source/images/svg/logo-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/images/svg/logo-html academy.svg b/source/images/svg/logo-html academy.svg new file mode 100644 index 0000000..dba21bf --- /dev/null +++ b/source/images/svg/logo-html academy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/images/svg/logo-mobile.svg b/source/images/svg/logo-mobile.svg index dee2b63..d408ab4 100644 --- a/source/images/svg/logo-mobile.svg +++ b/source/images/svg/logo-mobile.svg @@ -1,19 +1 @@ - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/source/images/svg/logo-tablet.svg b/source/images/svg/logo-tablet.svg new file mode 100644 index 0000000..5515d0b --- /dev/null +++ b/source/images/svg/logo-tablet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/images/svg/logotype-desktop.svg b/source/images/svg/logotype-desktop.svg index a55a87d..c25a96c 100644 --- a/source/images/svg/logotype-desktop.svg +++ b/source/images/svg/logotype-desktop.svg @@ -1,24 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/source/images/svg/logotype-name.svg b/source/images/svg/logotype-name.svg index 45465fe..cc386ea 100644 --- a/source/images/svg/logotype-name.svg +++ b/source/images/svg/logotype-name.svg @@ -1,11 +1 @@ - - - - - - - - - - - + \ No newline at end of file diff --git a/source/images/svg/logotype-tablet.svg b/source/images/svg/logotype-tablet.svg index 273be9f..5515d0b 100644 --- a/source/images/svg/logotype-tablet.svg +++ b/source/images/svg/logotype-tablet.svg @@ -1,18 +1 @@ - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/source/images/svg/main-logo-mobile.svg b/source/images/svg/main-logo-mobile.svg new file mode 100644 index 0000000..d4d7242 --- /dev/null +++ b/source/images/svg/main-logo-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/index.html b/source/index.html index cda4758..88e5ace 100644 --- a/source/index.html +++ b/source/index.html @@ -16,7 +16,8 @@
- + + @@ -24,11 +25,11 @@ Товарный знак CAT ENERGY - -
/
@@ -61,7 +61,7 @@

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

  • -

    +

    Похудение

    @@ -87,16 +87,16 @@

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

      -
    • +

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

      • -
    • +

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

      • -
    • +

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

      • -
    • +

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

    diff --git a/source/styles/blocks/actions.scss b/source/styles/blocks/actions.scss index e69de29..857facc 100644 --- a/source/styles/blocks/actions.scss +++ b/source/styles/blocks/actions.scss @@ -0,0 +1,13 @@ +.actions__tittle { + font-weight: 400; + font-size: 32px; + line-height: 32px; + font-family: $secondary-font; +} + +.actions__discription { + font-weight: 400; + font-size: 24px; + line-height: 32px; + font-family: $secondary-font; +} diff --git a/source/styles/blocks/additional-products.scss b/source/styles/blocks/additional-products.scss index e69de29..2839883 100644 --- a/source/styles/blocks/additional-products.scss +++ b/source/styles/blocks/additional-products.scss @@ -0,0 +1,19 @@ +.additional-products__heading { + font-family: $secondary-font; + font-weight: 400; + font-size: 32px; + line-height: 32px; +} + +.product__title { + font-family: $secondary-font; + font-weight: 400; + font-size: 20px; + line-height: 20px; +} + +.product__options { + font-weight: 400; + font-size: 16px; + line-height: 20px; +} diff --git a/source/styles/blocks/advantages.scss b/source/styles/blocks/advantages.scss index e69de29..c17cac1 100644 --- a/source/styles/blocks/advantages.scss +++ b/source/styles/blocks/advantages.scss @@ -0,0 +1,39 @@ +.advantages__item--leaf::before { + background-size: 30px 32px; + background-image: url("../../icons/stack.svg#leaf"); +} + +.advantages__item--powder::before { + background-size: 30px 32px; + background-image: url("../../icons/stack.svg#powder"); +} + +.advantages__item--cutlery::before { + background-size: 30px 32px; + background-image: url("../../icons/stack.svg#cutlery"); +} + +.advantages__item--clock::before { + background-size: 30px 32px; + background-image: url("../../icons/stack.svg#clock"); +} + +.advantages__item { + flex-flow: row; + justify-content: start; + align-items: normal; + gap: 20px; +} + +.advantages__item::before { + content: ""; + width: 60px; + height: 60px; + display: block; + background-color: $basic-green; + background-position: 50%; + flex-shrink: 0; + background-size: 26px 30px; + background-repeat: no-repeat; +} + diff --git a/source/styles/blocks/card.scss b/source/styles/blocks/card.scss index e69de29..9ef4e4a 100644 --- a/source/styles/blocks/card.scss +++ b/source/styles/blocks/card.scss @@ -0,0 +1,18 @@ +.card__title { + font-family: $secondary-font; + font-weight: 400; + font-size: 20px; + line-height: 24px; +} + +.card__text { + font-weight: 400; + font-size: 16px; + line-height: 18px; +} + +.card__option{ + font-weight: 400; + font-size: 16px; + line-height: 20px; +} diff --git a/source/styles/blocks/contacts.scss b/source/styles/blocks/contacts.scss index e69de29..e791bff 100644 --- a/source/styles/blocks/contacts.scss +++ b/source/styles/blocks/contacts.scss @@ -0,0 +1,6 @@ +.contacts__wrapper { + font-family: $secondary-font; + font-size: 20px; + font-weight: 400; + line-height: 26px; +} diff --git a/source/styles/blocks/example.scss b/source/styles/blocks/example.scss index e69de29..025df58 100644 --- a/source/styles/blocks/example.scss +++ b/source/styles/blocks/example.scss @@ -0,0 +1,38 @@ +.slider__button { + cursor: pointer; + width: 4px; + height: 100%; + display: block; + background-color: $dark-grey; + position: absolute; + top: 1700px; + left: -2px; + border-radius: 2px; + border: none; +} + +.slider__button::before { + content: ""; + width: 40px; + height: 40px; + background-color: $white; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%); + border: 2px solid $dark-grey; +} + +.slider__button::after { + content: ""; + width: 24px; + height: 18px; + background-color: $white; + border-radius: 50%; + position: absolute; + top: 53%; + left: 53%; + transform: translate(-50%, -50%); + background-image: url("../../icons/stack.svg#slider-button"); +} diff --git a/source/styles/blocks/logotype.scss b/source/styles/blocks/logotype.scss index e69de29..d713b9a 100644 --- a/source/styles/blocks/logotype.scss +++ b/source/styles/blocks/logotype.scss @@ -0,0 +1,21 @@ +.logotype__name { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + fill: #111111; + + @media (min-width: $tablet-width) { + position: relative; + transform: translate(0); + margin-left: 14px; + left: 0; + } + + @media (min-width: $desktop-width) { + width: 118px; + height: 21px; + margin-left: 10px; + } +} + diff --git a/source/styles/blocks/main-container.scss b/source/styles/blocks/main-container.scss index e69de29..e81eee7 100644 --- a/source/styles/blocks/main-container.scss +++ b/source/styles/blocks/main-container.scss @@ -0,0 +1,6 @@ +.main-container__heading { + font-family: $secondary-font; + font-weight: 400; + font-size: 60px; + line-height: 60px; +} diff --git a/source/styles/blocks/main-nav.scss b/source/styles/blocks/main-nav.scss index e69de29..83865cb 100644 --- a/source/styles/blocks/main-nav.scss +++ b/source/styles/blocks/main-nav.scss @@ -0,0 +1,35 @@ +.main-nav__link { + font-family: $secondary-font; + font-weight: 400; + font-size: 18px; + line-height: 24px; + text-decoration: none; + color: $black; + text-transform: uppercase; + position: relative; +} + + +.main-nav__toggle { + background-image: url("../../icons/stack.svg#cross.svg"); + width: 24px; + height: 24px; + background-color: #ffffff; + background-repeat: no-repeat; +} + +.main-nav__list { + display: flex; + flex-flow: column wrap; + padding: 0; + margin: 0; + list-style-type: none; + text-align: center; + flex-wrap: wrap; +} + +.main-nav__item { + padding: 25px 0; + border-top: 1px solid #e6e6e6; +} + diff --git a/source/styles/blocks/program.scss b/source/styles/blocks/program.scss index 3542bb0..6f65112 100644 --- a/source/styles/blocks/program.scss +++ b/source/styles/blocks/program.scss @@ -1,13 +1,34 @@ -.program__item-title { +.program__item { font-family: $secondary-font; - font-size: 24px; font-weight: 400; - line-height: 37px; + + color: #000000; + text-transform: uppercase; + flex-flow: wrap; + justify-content: start; + align-items: center; + font-style: normal; + display: flex; + margin: 0 0 29px; + gap: 20px; + position: relative; } -.program__item-button { - font-family: $secondary-font; - font-size: 16px; - font-weight: 400; - line-height: 16px; +.program__item::before { + content: ""; + background-color: $basic-green; + border-radius: 50%; + width: 50px; + height: 50px; + display: block; +} + +.program__item-title--slim::after { + content: ""; + background-image: url("../../icons/stack.svg#black-pantere"); + background-repeat: no-repeat; + background-size: 36px 50px; + position: absolute; + top: -3px; + left: 7px; } diff --git a/source/styles/common/scaffolding.scss b/source/styles/common/scaffolding.scss index 432a938..95c05d6 100644 --- a/source/styles/common/scaffolding.scss +++ b/source/styles/common/scaffolding.scss @@ -8,3 +8,17 @@ clip: rect(0 0 0 0); overflow: hidden; } + +.button { + background-color: $basic-green; + display: block; + + &:hover { + background-color: #5eaa2f; + } + + &:focus { + background-color: #5eaa2f; + color: rgba(255, 255, 255, 0.3); + } +}