diff --git a/Readme.md b/Readme.md index ebdbf99..33855e2 100644 --- a/Readme.md +++ b/Readme.md @@ -1,7 +1,7 @@ # Личный проект «Кэт энерджи» * Студент: [Любовь Лифшиц](https://up.htmlacademy.ru/adaptive-individual/2/user/2532253). -* Наставник: [Антон Попов](https://htmlacademy.ru/profile/joker). +* Наставник: [Виктория Никитина](https://htmlacademy.ru/profile/id1217273). --- diff --git a/index.html b/index.html deleted file mode 100644 index 551a492..0000000 --- a/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - Cat energy - - - - - -
Шапка
-

Привет, мир!

- - - diff --git a/source/catalog.html b/source/catalog.html new file mode 100644 index 0000000..232ce9a --- /dev/null +++ b/source/catalog.html @@ -0,0 +1,201 @@ + + + + + + Кокой-то Cat Energy + + + + + + +
+ + +
+ +
+
+

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

+ +
+ +
+

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

+ +
+

Закажите все и получите чехол для кота в подарок!

+
+
+
+

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

+ + +
+
+ + + + + diff --git a/source/form.html b/source/form.html new file mode 100644 index 0000000..2547553 --- /dev/null +++ b/source/form.html @@ -0,0 +1,95 @@ + + + + + + Кокой-то Cat Energy + + + + + + +
+ + +
+ +
+
+

Подбор программы

+

Заполните анкету и мы подберем программу питания для вашего кота

+
+
+ +
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+
+
+
+
+ + + + + diff --git a/source/icons/boil-adv.svg b/source/icons/boil-adv.svg new file mode 100644 index 0000000..1d8e556 --- /dev/null +++ b/source/icons/boil-adv.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/icons/clock-adv.svg b/source/icons/clock-adv.svg new file mode 100644 index 0000000..5a191f1 --- /dev/null +++ b/source/icons/clock-adv.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/icons/eat-adv.svg b/source/icons/eat-adv.svg new file mode 100644 index 0000000..1f82741 --- /dev/null +++ b/source/icons/eat-adv.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/source/icons/html-academy.svg b/source/icons/html-academy.svg new file mode 100644 index 0000000..806082c --- /dev/null +++ b/source/icons/html-academy.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/source/icons/leaf-adv.svg b/source/icons/leaf-adv.svg new file mode 100644 index 0000000..6bc1eba --- /dev/null +++ b/source/icons/leaf-adv.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/source/icons/telegram.svg b/source/icons/telegram.svg new file mode 100644 index 0000000..1056d50 --- /dev/null +++ b/source/icons/telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/icons/vkontakte.svg b/source/icons/vkontakte.svg new file mode 100644 index 0000000..d8015b7 --- /dev/null +++ b/source/icons/vkontakte.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/icons/youtube.svg b/source/icons/youtube.svg new file mode 100644 index 0000000..86f501c --- /dev/null +++ b/source/icons/youtube.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/images/arrow-goals.svg b/source/images/arrow-goals.svg new file mode 100644 index 0000000..99be4e5 --- /dev/null +++ b/source/images/arrow-goals.svg @@ -0,0 +1,4 @@ + + + + diff --git a/source/images/burger.svg b/source/images/burger.svg new file mode 100644 index 0000000..e60755b --- /dev/null +++ b/source/images/burger.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/source/images/cat-pro.svg b/source/images/cat-pro.svg new file mode 100644 index 0000000..24a91cd --- /dev/null +++ b/source/images/cat-pro.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/source/images/cat-slim.svg b/source/images/cat-slim.svg new file mode 100644 index 0000000..7b7745d --- /dev/null +++ b/source/images/cat-slim.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/source/images/cross.svg b/source/images/cross.svg new file mode 100644 index 0000000..43b2f72 --- /dev/null +++ b/source/images/cross.svg @@ -0,0 +1,4 @@ + + + + diff --git a/source/images/index-background-desktop.jpg b/source/images/index-background-desktop.jpg new file mode 100644 index 0000000..7c80eb8 Binary files /dev/null and b/source/images/index-background-desktop.jpg differ diff --git a/source/images/index-can-mobile.png b/source/images/index-can-mobile.png new file mode 100644 index 0000000..6f7738f Binary files /dev/null and b/source/images/index-can-mobile.png differ diff --git a/source/images/line-goals.svg b/source/images/line-goals.svg new file mode 100644 index 0000000..82eb93c --- /dev/null +++ b/source/images/line-goals.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/images/location.png b/source/images/location.png new file mode 100644 index 0000000..ae8f7b2 Binary files /dev/null and b/source/images/location.png differ diff --git a/source/images/logo-mobile-text.svg b/source/images/logo-mobile-text.svg new file mode 100644 index 0000000..02b1df9 --- /dev/null +++ b/source/images/logo-mobile-text.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/source/images/logo-mobile.svg b/source/images/logo-mobile.svg new file mode 100644 index 0000000..1045fce --- /dev/null +++ b/source/images/logo-mobile.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/source/images/logo-tablet.svg b/source/images/logo-tablet.svg new file mode 100644 index 0000000..0f386ab --- /dev/null +++ b/source/images/logo-tablet.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/source/index.html b/source/index.html index 1eddeaf..b9f0182 100644 --- a/source/index.html +++ b/source/index.html @@ -1,13 +1,142 @@ - - - Название проекта - - - - - -
Шапка
- + + + + Кокой-то Cat Energy + + + + + + +
+ + +
+ +
+
+
+
+

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

+

Занялся собой? Займись котом!

+
+
+ Подобрать программу +
+ +
+

+
    +
  • +

    Похудение

    +

    Ваш кот весит больше собаки и почти утратил способность лазить по деревьям? Пора на диету! Cat Energy Slim поможет вашему питомцу сбросить лишний вес.

    + Каталог slim +
    • +
  • +

    Набор массы

    +

    Заработать авторитет среди дворовых котов и даже собак? Серия Cat Energy Pro поможет вашему коту нарастить необходимые мышцы!

    + Каталог pro +
    • +
+

+ +
+

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

+ +
+ +
+
+

Живой пример

+

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

+
    +
  • + 5 кг
    + снижение веса +
    • +
  • + 60 дней
    + затрачено времени +
    • +
+

Затраты на питание: 15000 руб. +

+
+
+ +
+ + + + diff --git a/source/styles/blocks/advantages.scss b/source/styles/blocks/advantages.scss new file mode 100644 index 0000000..acc4034 --- /dev/null +++ b/source/styles/blocks/advantages.scss @@ -0,0 +1,96 @@ +.advantages { + padding-top: 20px; + margin: 0 20px; + padding-bottom: 20px; +} + +.advantages__title { + font-family: $oswald; + font-weight: 400; + font-size: 36px; + line-height: 40px; + text-align: left; + margin: 0 0 40px; + padding: 0; +} + +.advantages__list { + margin: 0; + padding: 0; + list-style: none; +} + +.advantages__item { + position: relative; + min-height: 60px; + margin-bottom: 18px; + padding-left: 81px; + padding-top: 2px; + + &::before { + content: ""; + width: 60px; + height: 60px; + background: $green; + position: absolute; + left: 0; + top: 0; + } + + &::after { + content: ""; + position: absolute; + background-repeat: no-repeat; + background-position: 0 0; + z-index: 5; + } + + &:last-child { + margin-bottom: 0; + } +} + +.advantages__item--leaf::after { + background-image: url("../../icons/leaf-adv.svg"); + width: 30px; + height: 32px; + top: 15px; + left: 15px; +} + +.advantages__item--boil::after { + background-image: url("../../icons/boil-adv.svg"); + width: 26px; + height: 29px; + left: 15px; + top: 18px; +} + +.advantages__item--eat::after { + background-image: url("../../icons/eat-adv.svg"); + width: 25px; + height: 30px; + left: 15px; + top: 18px; +} + +.advantages__item--clock::after { + background-image: url("../../icons/clock-adv.svg"); + width: 26px; + height: 31px; + left: 15px; + top: 17px; +} + +.advantages__text { + margin: 0; + padding: 0; + max-width: 500px; + font-family: $lato; + font-size: 14px; + font-weight: 400; + line-height: 18px; + text-align: left; + color: #444444; + position: relative; +} diff --git a/source/styles/blocks/description.scss b/source/styles/blocks/description.scss new file mode 100644 index 0000000..739bf69 --- /dev/null +++ b/source/styles/blocks/description.scss @@ -0,0 +1,71 @@ +.description {} + +.description__wrapper { + background: #eaeaea; + padding: 20px; +} + +.description__title { + margin: 0; + padding: 0; + font-family: $oswald; + font-size: 36px; + font-weight: 400; + line-height: 40px; + text-align: center; + margin-bottom: 20px; +} + +.description__text { + font-family: $lato; + font-size: 14px; + font-weight: 400; + line-height: 18px; + text-align: left; + color: #444444; + margin: 0; + padding: 0; + margin-bottom: 20px; +} + +.results-list { + padding: 0; + margin: 0; + display: grid; + grid-template-columns: 124px 124px; + border: 1px solid #cdcdcd; + border-radius: 4px; + gap: 32px; +} + +.result-item { + margin: 0; + padding: 0; + list-style: none; +} + +.result { + font-size: 24px; + font-weight: 400; + line-height: 24px; + text-align: center; +} + +.result-text { + font-family: $lato; + font-size: 12px; + font-weight: 400; + line-height: 12px; + text-align: center; + color: #444444; +} + +.description__cost { + font-size: 14px; + font-weight: 400; + line-height: 20px; + text-align: center; + text-transform: uppercase; + margin: 0; + padding: 20px 0 0; +} diff --git a/source/styles/blocks/footer.scss b/source/styles/blocks/footer.scss new file mode 100644 index 0000000..043c443 --- /dev/null +++ b/source/styles/blocks/footer.scss @@ -0,0 +1,75 @@ +.footer { + +} + +.footer__wrapper { + display: grid; + grid-template-columns: 140px 140px; + padding: 20px; + gap: 20px; +} + +.footer__title { + margin: 0; + padding: 0; + font-size: 16px; + font-weight: 400; + line-height: 20px; + text-align: left; + text-transform: uppercase; +} + +.footer__text { + margin: 0; + padding: 0; + font-family: $lato; + font-size: 14px; + font-weight: 400; + line-height: 20px; + text-align: left; + color: #444444; +} + +.footer__map { + max-width: 500px; +} + +.footer__elements { + background-color: #f2f2f2; + position: relative; +} + +.footer__logo { + padding-left: 96px; + position: absolute; + top: 40px; + border-bottom: 1px solid #d9d9d9; +} + +.social__links { + margin: 0; + padding: 0; + list-style: none; +} + +.social__item { + display: flex; + flex-wrap: nowrap; +} + +.social__links--vk { + background-image: url("../../icons/vkontakte.svg") no-repeat; +} + +.social__links--youtube { + background-image: url("../../icons/youtube.svg") no-repeat; +} + +.social__links--telegram { + background-image: url("../../icons/telegram.svg") no-repeat; +} + +.footer__link { + border-bottom: 1px solid #d9d9d9; + background-image: url("../../icons/html-academy.svg") no-repeat; +} diff --git a/source/styles/blocks/goals.scss b/source/styles/blocks/goals.scss new file mode 100644 index 0000000..dcb2e83 --- /dev/null +++ b/source/styles/blocks/goals.scss @@ -0,0 +1,109 @@ +.goals { +} + + +.goals__list { + margin: 0 20px; + padding: 0; + display: block; + list-style: none; +} + +.goals__item { + background-color: #f2f2f2; + margin-bottom: 20px; + padding: 30px 22px 16px; + position: relative; + + &::before { + content: ""; + width: 50px; + height: 50px; + border-radius: 50%; + background: $green; + position: absolute; + left: 24px; + top: 22px; + z-index: 1; + } + + &::after { + content: ""; + position: absolute; + background-repeat: no-repeat; + background-size: cover; + z-index: 5; + } + + &:last-child { + margin-bottom: 0; + } +} + +.goals__item--slim::after { + left: 29px; + top: 21px; + background-image: url("../../images/cat-slim.svg"); + width: 36px; + height: 50px; +} + +.goals__item--pro::after { + background-image: url("../../images/cat-pro.svg"); + width: 67px; + height: 28px; + left: 20px; + top: 40px; +} + +.goals__title { + font-family: $oswald; + font-weight: 400; + font-size: 24px; + line-height: 37px; + margin: 0 0 29px; + padding: 0 0 0 70px; + text-transform: uppercase; +} + +.goals__text { + font-family: $lato; + font-size: 14px; + font-weight: 400; + line-height: 18px; + text-align: left; + color: #444444; + margin: 0 0 16px; + padding: 0 0 23px; + border-bottom: 1px solid #d9d9d9; +} + +.goal__link { + text-transform: uppercase; + color: #000000; + text-align: center; + position: relative; + text-decoration: none; + font-family: $oswald; + font-size: 16px; + font-weight: 400; + line-height: 16px; + padding-right: 65px; + + + &::after { + content: ""; + width: 24px; + height: 10px; + position: absolute; + left: calc(100% - 40px); + transform: translate(-50%); + background: url("../../images/arrow-goals.svg") no-repeat right top; + top: 4px; + transition: width 0.3s ease; + } + + &:hover::after { + width: 32px; + } +} diff --git a/source/styles/blocks/header.scss b/source/styles/blocks/header.scss deleted file mode 100644 index 797f7c4..0000000 --- a/source/styles/blocks/header.scss +++ /dev/null @@ -1,5 +0,0 @@ -.header { - background-color: #663399; - color: #ffffff; - padding: 10px 15px; -} diff --git a/source/styles/blocks/hero.scss b/source/styles/blocks/hero.scss new file mode 100644 index 0000000..1460463 --- /dev/null +++ b/source/styles/blocks/hero.scss @@ -0,0 +1,85 @@ +.hero { + color: #ffffff; + margin-bottom: 20px; +} + +.hero__wrapper { + padding-bottom: 135px; + position: relative; + margin-bottom: 3px; + + &::before { + content: ""; + width: 280px; + height: 270px; + position: absolute; + bottom: 0; + left: 50%; + transform: translate(-50%); + background: url("../../images/index-can-mobile.png") no-repeat 0 0; + z-index: 10; + } +} + + +.hero__block { + background: #424147 url("../../images/index-background-desktop.jpg") no-repeat top center; + background-size: auto 100%; + padding-top: 27px; + padding-bottom: 163px; + position: relative; + + &::before { + content: ""; + width: 100%; + height: 100%; + position: absolute; + z-index: 1; + top: 0; + left: 0; + background-color: $green; + opacity: 0.85; + } +} + + +.hero__title { + font-family: $oswald; + margin: 0 auto 26px; + padding: 0; + font-size: 36px; + line-height: 36px; + font-weight: 400; + text-align: center; + width: 300px; + position: relative; + z-index: 5; +} + +.hero__text { + margin: 0 auto; + padding: 0; + font-size: 14px; + line-height: 14px; + text-align: center; + font-weight: 400; + width: 300px; + text-transform: uppercase; + position: relative; + z-index: 5; +} + +.hero__link { + font-size: 16px; + font-weight: 400; + line-height: 20px; + text-align: center; + text-decoration: none; + text-transform: uppercase; + background-color: $green; + color: #ffffff; + display: block; + margin: 0 20px; + padding: 11px 5px 9px; +} + diff --git a/source/styles/blocks/main-header.scss b/source/styles/blocks/main-header.scss new file mode 100644 index 0000000..d90083e --- /dev/null +++ b/source/styles/blocks/main-header.scss @@ -0,0 +1,11 @@ +.main-header { + padding-top: 65px; + position: relative; + background: url("../../images/logo-mobile-text.svg") no-repeat center 23px; +} + +.main-header__logo { + position: absolute; + top: 13px; + left: 21px; +} diff --git a/source/styles/blocks/main-nav.scss b/source/styles/blocks/main-nav.scss new file mode 100644 index 0000000..bbef009 --- /dev/null +++ b/source/styles/blocks/main-nav.scss @@ -0,0 +1,17 @@ +.main-nav { + position: relative; +} + +.main-nav__toggle { + border: none; + position: absolute; + right: 21px; + top: -45px; + width: 24px; + height: 24px; + background: url("../../images/burger.svg") no-repeat 0 0; +} + +.main-nav__list { + display: none; +} diff --git a/source/styles/blocks/site-list.scss b/source/styles/blocks/site-list.scss new file mode 100644 index 0000000..4fe1e0c --- /dev/null +++ b/source/styles/blocks/site-list.scss @@ -0,0 +1,22 @@ +.site-list { + margin: 0; + padding: 0; + list-style: none; + border-top: 1px solid #e6e6e6; +} + +.site-list__item { + border-bottom: 1px solid #e6e6e6; +} + +.site-list__link { + font-weight: 400; + font-size: 20px; + line-height: 20px; + text-transform: uppercase; + text-decoration: none; + color: #000000; + display: block; + text-align: center; + padding: 24px 5px 21px; +} diff --git a/source/styles/common/fonts.scss b/source/styles/common/fonts.scss index 6bb897d..17fc244 100644 --- a/source/styles/common/fonts.scss +++ b/source/styles/common/fonts.scss @@ -1 +1,19 @@ -/* здесь подключите шрифты */ +@font-face { + font-family: "Lato"; + font-style: normal; + font-weight: 400; + src: + url("../../fonts/lato/Lato-Regular.woff2") format("woff2"), + url("../../fonts/lato/Lato-Regular.woff") format("woff"); + font-display: swap; +} + +@font-face { + font-family: "Oswald"; + font-style: normal; + font-weight: 400; + src: + url("../../fonts/oswald/oswaldregular.woff2") format("woff2"), + url("../../fonts/oswald/oswaldregular.woff") format("woff"); + font-display: swap; +} diff --git a/source/styles/common/global.scss b/source/styles/common/global.scss index ac721bd..50542be 100644 --- a/source/styles/common/global.scss +++ b/source/styles/common/global.scss @@ -1 +1,4 @@ -/* здесь используйте глобальные селекторы img, body, html и так далее */ +body { + margin: 0; + font-family: $oswald; +} diff --git a/source/styles/common/variables.scss b/source/styles/common/variables.scss index 8bcd34b..b99071e 100644 --- a/source/styles/common/variables.scss +++ b/source/styles/common/variables.scss @@ -1 +1,5 @@ -/* здесь используйте глобальные переменные */ +$oswald:"Oswald", sans-serif; +$lato:"Lato", sans-serif; + +$green: #68b738; + diff --git a/source/styles/common/visually-hidden.scss b/source/styles/common/visually-hidden.scss new file mode 100644 index 0000000..70a0f84 --- /dev/null +++ b/source/styles/common/visually-hidden.scss @@ -0,0 +1,12 @@ +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; + white-space: nowrap; + clip-path: inset(100%); + clip: rect(0 0 0 0); + overflow: hidden; +} diff --git a/source/styles/styles.scss b/source/styles/styles.scss index 7610188..9f792e1 100644 --- a/source/styles/styles.scss +++ b/source/styles/styles.scss @@ -1,7 +1,15 @@ /* GLOBAL */ @import "./common/variables.scss"; -@import "./common/global.scss"; @import "./common/fonts.scss"; +@import "./common/global.scss"; +@import "./common/visually-hidden.scss"; /* BLOCKS */ -@import "./blocks/header.scss"; +@import "./blocks/main-header.scss"; +@import "./blocks/site-list.scss"; +@import "./blocks/main-nav.scss"; +@import "./blocks/hero.scss"; +@import "./blocks/goals.scss"; +@import "./blocks/advantages.scss"; +@import "./blocks/description.scss"; +@import "./blocks/footer.scss";