diff --git a/source/catalog.html b/source/catalog.html index e43e5ba..076b85e 100644 --- a/source/catalog.html +++ b/source/catalog.html @@ -82,7 +82,7 @@

- Заказать + Заказать
  • @@ -111,7 +111,7 @@

    - Заказать + Заказать

  • @@ -140,7 +140,7 @@

    - Заказать + Заказать

  • @@ -169,7 +169,7 @@

    - Заказать + Заказать

  • @@ -198,7 +198,7 @@

    - Заказать + Заказать

  • @@ -227,7 +227,7 @@

    - Заказать + Заказать

  • @@ -256,7 +256,7 @@

    - Заказать + Заказать

  • @@ -281,7 +281,7 @@

    Сахарозаменитель

    1 упаковка (100г) 200 р.

    - Заказать + Заказать

  • Питьевая вода

    @@ -289,7 +289,7 @@

    Питьевая вода

    5 литров 50 р.

    - Заказать + Заказать

  • Молоко

    @@ -297,7 +297,7 @@

    Молоко

    1 литр 100 р.

    - Заказать + Заказать

  • Витамины

    @@ -305,7 +305,7 @@

    Витамины

    1 упаковка (30 г) 300 р.

    - Заказать + Заказать
    • @@ -321,7 +321,7 @@

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

    - +
    @@ -371,7 +371,15 @@

    - HTML Academy + HTML Academy + +

    diff --git a/source/index.html b/source/index.html index 161ae2f..6a5343d 100644 --- a/source/index.html +++ b/source/index.html @@ -130,7 +130,7 @@

    +
    + затраты на питание: + 15 000 руб. +
    @@ -172,64 +176,64 @@

    - - + +
  • + +
    • +
  • + +
    • + +

    + HTML Academy + + +

    + + diff --git a/source/styles/blocks/action-button--big.scss b/source/styles/blocks/action-button--big.scss new file mode 100644 index 0000000..ab59680 --- /dev/null +++ b/source/styles/blocks/action-button--big.scss @@ -0,0 +1,4 @@ +.action-button--big { + font-size: 20px; + line-height: 26px; +} diff --git a/source/styles/blocks/action-button--small.scss b/source/styles/blocks/action-button--small.scss new file mode 100644 index 0000000..302fe8d --- /dev/null +++ b/source/styles/blocks/action-button--small.scss @@ -0,0 +1,4 @@ +.action-button--small { + font-size: 16px; + line-height: 20px; +} diff --git a/source/styles/blocks/action-button.scss b/source/styles/blocks/action-button.scss new file mode 100644 index 0000000..17e3aaa --- /dev/null +++ b/source/styles/blocks/action-button.scss @@ -0,0 +1,7 @@ +.action-button { + font-family: "Oswald", sans-serif; + color: #ffffff; + background-color: #68b738; + list-style: none; + text-transform: uppercase; +} diff --git a/source/styles/blocks/additional-product-card.scss b/source/styles/blocks/additional-product-card.scss new file mode 100644 index 0000000..2676639 --- /dev/null +++ b/source/styles/blocks/additional-product-card.scss @@ -0,0 +1,27 @@ +.additional-product-card__title { + font-family: "Oswald", sans-serif; + font-size: 16px; + line-height: 16px; + color: #222222; +} + +.additional-product-card__unit { + font-family: "Lato", sans-serif; + font-size: 14px; + line-height: 14px; + color: #444444; +} + +.additional-product-card__price { + font-family: "Lato", sans-serif; + font-size: 14px; + line-height: 14px; + color: #444444; +} + +.additional-product-card__order { + font-family: "Oswald", sans-serif; + font-size: 16px; + line-height: 20px; + color: #ffffff; +} diff --git a/source/styles/blocks/additional-products.scss b/source/styles/blocks/additional-products.scss new file mode 100644 index 0000000..5093163 --- /dev/null +++ b/source/styles/blocks/additional-products.scss @@ -0,0 +1,6 @@ +.additional-products__text { + font-family: "Oswald", sans-serif; + font-size: 24px; + line-height: 24px; + color: #000000; +} diff --git a/source/styles/blocks/adress.scss b/source/styles/blocks/adress.scss new file mode 100644 index 0000000..e4e9f9b --- /dev/null +++ b/source/styles/blocks/adress.scss @@ -0,0 +1,20 @@ +.adress__content { + font-family: "Oswald", sans-serif; + font-size: 16px; + line-height: 20px; + color: #111111; +} + +.adress__location-street { + font-family: "Lato", sans-serif; + font-size: 14px; + line-height: 20px; + color: #444444; +} + +.adress__location-city { + font-family: "Lato", sans-serif; + font-size: 14px; + line-height: 20px; + color: #444444; +} diff --git a/source/styles/blocks/catalog-main.scss b/source/styles/blocks/catalog-main.scss new file mode 100644 index 0000000..2fd54ec --- /dev/null +++ b/source/styles/blocks/catalog-main.scss @@ -0,0 +1,6 @@ +.catalog-main__title { + font-family: "Oswald", sans-serif; + font-size: 36px; + line-height: 36px; + color: #000000; +} diff --git a/source/styles/blocks/demonstrating-example.scss b/source/styles/blocks/demonstrating-example.scss new file mode 100644 index 0000000..f86e079 --- /dev/null +++ b/source/styles/blocks/demonstrating-example.scss @@ -0,0 +1,27 @@ +.demonstrating-example__title { + font-family: "Oswald", sans-serif; + font-size: 36px; + line-height: 40px; + color: #000000; +} + +.demonstrating-example__promo-text { + font-family: "Lato", sans-serif; + font-size: 14px; + line-height: 18px; + color: #444444; +} + +.demonstrating-example__title-exampless { + font-family: "Oswald", sans-serif; + font-size: 14px; + line-height: 20px; + color: #000000; +} + +.demonstrating-example__money-exampless { + font-family: "Oswald", sans-serif; + font-size: 14px; + line-height: 20px; + color: #000000; +} diff --git a/source/styles/blocks/graphic.scss b/source/styles/blocks/graphic.scss new file mode 100644 index 0000000..11b4f2a --- /dev/null +++ b/source/styles/blocks/graphic.scss @@ -0,0 +1,13 @@ +.graphic__number { + font-family: "Oswald", sans-serif; + font-size: 24px; + line-height: 24px; + color: #000000; +} + +.graphic__note { + font-family: "Lato", sans-serif; + font-size: 12px; + line-height: 12px; + color: #444444; +} 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/main-header.scss b/source/styles/blocks/main-header.scss new file mode 100644 index 0000000..5a4a8a8 --- /dev/null +++ b/source/styles/blocks/main-header.scss @@ -0,0 +1,4 @@ +.main-header { + background-color: #000000; + padding: 10px 15px; +} diff --git a/source/styles/blocks/more-products-card.scss b/source/styles/blocks/more-products-card.scss new file mode 100644 index 0000000..8c88aff --- /dev/null +++ b/source/styles/blocks/more-products-card.scss @@ -0,0 +1,20 @@ +.more-products-card__title { + font-family: "Oswald", sans-serif; + font-size: 16px; + line-height: 20px; + color: #111111; +} + +.more-products-card__text { + font-family: "Lato", sans-serif; + font-size: 12px; + line-height: 16px; + color: #444444; +} + +.more-products-card__show-all-link { + font-family: "Oswald", sans-serif; + font-size: 16px; + line-height: 20px; + color: #444444; +} diff --git a/source/styles/blocks/product-card.scss b/source/styles/blocks/product-card.scss new file mode 100644 index 0000000..7bce76c --- /dev/null +++ b/source/styles/blocks/product-card.scss @@ -0,0 +1,6 @@ +.product-card__title-link { + font-family: "Oswald", sans-serif; + font-size: 16px; + line-height: 20px; + color: #222222; +} diff --git a/source/styles/blocks/product-groups.scss b/source/styles/blocks/product-groups.scss new file mode 100644 index 0000000..50490fc --- /dev/null +++ b/source/styles/blocks/product-groups.scss @@ -0,0 +1,20 @@ +.product-groups__title { + font-family: "Oswald", sans-serif; + font-size: 24px; + line-height: 37px; + color: #000000; +} + +.product-groups__decription { + font-family: "Lato", sans-serif; + font-size: 14px; + line-height: 18px; + color: #444444; +} + +.product-groups__link { + font-family: "Oswald", sans-serif; + font-size: 16px; + line-height: 16px; + color: #000000; +} diff --git a/source/styles/blocks/product-specification.scss b/source/styles/blocks/product-specification.scss new file mode 100644 index 0000000..830d966 --- /dev/null +++ b/source/styles/blocks/product-specification.scss @@ -0,0 +1,13 @@ +.product-specification__title { + font-family: "Lato", sans-serif; + font-size: 12px; + line-height: 16px; + color: #444444; +} + +.product-specification__value { + font-family: "Lato", sans-serif; + font-size: 12px; + line-height: 16px; + color: #444444; +} diff --git a/source/styles/blocks/promo-block.scss b/source/styles/blocks/promo-block.scss new file mode 100644 index 0000000..5443c36 --- /dev/null +++ b/source/styles/blocks/promo-block.scss @@ -0,0 +1,6 @@ +.promo-block__text { + font-family: "Lato", sans-serif; + font-size: 16px; + line-height: 20px; + color: #ffffff; +} diff --git a/source/styles/blocks/subscription-form.scss b/source/styles/blocks/subscription-form.scss new file mode 100644 index 0000000..a48c6a3 --- /dev/null +++ b/source/styles/blocks/subscription-form.scss @@ -0,0 +1,13 @@ +.subscription-form__title { + font-family: "Oswald", sans-serif; + font-size: 24px; + line-height: 24px; + color: #000000; +} + +.subscription-form__text { + font-family: "Oswald", sans-serif; + font-size: 16px; + line-height: 24px; + color: #000000; +} diff --git a/source/styles/blocks/top-banner.scss b/source/styles/blocks/top-banner.scss new file mode 100644 index 0000000..fdb0c2b --- /dev/null +++ b/source/styles/blocks/top-banner.scss @@ -0,0 +1,13 @@ +.top-banner__title { + font-family: "Oswald", sans-serif; + font-size: 36px; + line-height: 36px; + color: #ffffff; +} + +.top-banner__slogan { + font-family: "Oswald", sans-serif; + font-size: 14px; + line-height: 14px; + color: #ffffff; +} diff --git a/source/styles/blocks/working-basics.scss b/source/styles/blocks/working-basics.scss new file mode 100644 index 0000000..bdd0d83 --- /dev/null +++ b/source/styles/blocks/working-basics.scss @@ -0,0 +1,13 @@ +.working-basics__title { + font-family: "Oswald", sans-serif; + font-size: 36px; + line-height: 40px; + color: #000000; +} + +.working-basics__description { + font-family: "Lato", sans-serif; + font-size: 14px; + line-height: 18px; + color: #444444; +} diff --git a/source/styles/common/fonts.scss b/source/styles/common/fonts.scss index 6bb897d..ac1cca2 100644 --- a/source/styles/common/fonts.scss +++ b/source/styles/common/fonts.scss @@ -1 +1,2 @@ -/* здесь подключите шрифты */ +@include font("Lato", 400, normal, url("../../fonts/lato/Lato-Regular.woff2") format("woff2")); +@include font ("Oswald", 400, normal, url("../../fonts/oswald/oswaldregular.woff2") format("woff2")); diff --git a/source/styles/common/global.scss b/source/styles/common/global.scss index ac721bd..37c0976 100644 --- a/source/styles/common/global.scss +++ b/source/styles/common/global.scss @@ -1 +1,3 @@ -/* здесь используйте глобальные селекторы img, body, html и так далее */ +body { + font-family: "Lato", sans-serif; +} diff --git a/source/styles/common/mixins.scss b/source/styles/common/mixins.scss new file mode 100644 index 0000000..8d57b50 --- /dev/null +++ b/source/styles/common/mixins.scss @@ -0,0 +1,9 @@ +@mixin font ($font-family, $font-weight, $font-style, $font-src) { + @font-face { + font-family: $font-family; + font-weight: $font-weight; + font-style: $font-style; + src: $font-src; + font-display: swap; + } +} diff --git a/source/styles/styles.scss b/source/styles/styles.scss index 7610188..6ffa718 100644 --- a/source/styles/styles.scss +++ b/source/styles/styles.scss @@ -1,7 +1,24 @@ /* GLOBAL */ @import "./common/variables.scss"; -@import "./common/global.scss"; +@import "./common/mixins.scss"; @import "./common/fonts.scss"; +@import "./common/global.scss"; + /* BLOCKS */ -@import "./blocks/header.scss"; +@import "./blocks/main-header.scss"; +@import "./blocks/top-banner.scss"; +@import "./blocks/product-groups.scss"; +@import "./blocks/working-basics.scss"; +@import "./blocks/demonstrating-example.scss"; +@import "./blocks/graphic.scss"; +@import "./blocks/adress.scss"; +@import "./blocks/catalog-main.scss"; +@import "./blocks/product-card.scss"; +@import "./blocks/product-specification.scss"; +@import "./blocks/more-products-card.scss"; +@import "./blocks/additional-products.scss"; +@import "./blocks/additional-product-card.scss"; +@import "./blocks/promo-block.scss"; +@import "./blocks/subscription-form.scss"; +@import "./blocks/action-button.scss";