Функциональное питание
Программа питания
-
-
+
Похудение
@@ -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);
+ }
+}
+
Похудение
@@ -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);
+ }
+}
Как это работает
-
-
- +
-
Функциональное питание содержит только полезные питательные вещества.
- - +
-
Выпускается в виде порошка, который нужно лишь залить кипятком и готово.
- - +
-
Замените один-два приема обычной еды на наше функциональное питание.
- - +
-
Уже через месяц наслаждайтесь изменениями к лучшему;
вашего питомца!