-
-
- 
-
-
-
+
+
+
+
+
diff --git a/source/less/blocks/additional-goods.less b/source/less/blocks/additional-goods.less
new file mode 100644
index 0000000..e9bb64f
--- /dev/null
+++ b/source/less/blocks/additional-goods.less
@@ -0,0 +1,58 @@
+.additional-goods {
+ padding: 25px 20px 35px;
+}
+
+.additional-goods__title {
+ font-family: @oswald;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 24px;
+ color: #000000;
+ padding-bottom: 35px;
+ border-bottom: 1px solid #CDCDCD;
+ margin: 0;
+}
+
+.additional-goods__list {
+ list-style: none;
+ margin: 0;
+ padding: 0 0 35px;
+}
+
+.additional-goods__item {
+ padding: 13px 0 19px;
+ border-bottom: 1px solid #CDCDCD;
+}
+
+.additional-goods-card__title {
+ margin: 0;
+ font-family: @oswald;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 16px;
+ text-transform: uppercase;
+ padding-bottom: 13px;
+}
+
+.additional-goods-card__description {
+ display: flex;
+ justify-content: space-between;
+ padding-bottom: 15px;
+}
+
+.additional-goods-card__description-name,
+.additional-goods-card__description-price {
+ margin: 0;
+}
+
+.additional-goods__present {
+ background-image: url(../../img/background-additional-goods-resent.png);
+ background-repeat: no-repeat;
+ background-size: auto;
+ padding: 189px 61px 43px 58px;
+ font-size: 16px;
+ line-height: 20px;
+ color: #FFFFFF;
+ margin: 0;
+ text-align: center;
+}
diff --git a/source/less/blocks/advantages.less b/source/less/blocks/advantages.less
new file mode 100644
index 0000000..b7cebe7
--- /dev/null
+++ b/source/less/blocks/advantages.less
@@ -0,0 +1,30 @@
+.advantages {
+ padding: 0 20px 49px;
+}
+
+.advantages__title {
+ margin: 0;
+ font-family: @oswald;
+ font-size: 36px;
+ line-height: 40px;
+ font-weight: 400;
+ color: #000000;
+ padding-bottom: 40px;
+}
+
+.advantages__list {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.advantages__item {
+ padding-left: 80px;
+}
+
+.advantages__description {
+ margin: 0;
+}
diff --git a/source/less/blocks/button.less b/source/less/blocks/button.less
new file mode 100644
index 0000000..2771b94
--- /dev/null
+++ b/source/less/blocks/button.less
@@ -0,0 +1,14 @@
+.button {
+ display: block;
+ font-family: @oswald;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 20px;
+ text-align: center;
+ color: #FFFFFF;
+ background-color: #68B738;
+ text-decoration: none;
+ text-transform: uppercase;
+ margin: 0;
+ padding: 10px 63.5px;
+}
diff --git a/source/less/blocks/card.less b/source/less/blocks/card.less
new file mode 100644
index 0000000..dea0ef9
--- /dev/null
+++ b/source/less/blocks/card.less
@@ -0,0 +1,66 @@
+.card {
+ padding: 20px 20px 25px;
+}
+
+.card__wrapper {
+ display: flex;
+}
+
+
+.card__image {
+ padding: 10.5px 36px;
+}
+
+.card__title {
+ font-family: @oswald;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 20px;
+ color: #222222;
+ margin: 0;
+ text-transform: uppercase;
+ padding-bottom: 14px;
+
+ &--additional {
+ padding: 58px 0 8px;
+ color: #111111;
+ text-align: center;
+ }
+}
+
+.card__description {
+ padding-bottom: 25px;
+}
+
+.card__definition {
+ font-size: 12px;
+ line-height: 16px;
+}
+
+.card__definition-name {
+ font-weight: 400;
+ text-align: left;
+ width: 70px;
+ margin: 0;
+
+
+ &--additional {
+ text-align: center;
+ width: 100%;
+ padding-bottom: 21px;
+ }
+}
+
+.card__definition-value {
+ font-weight: 400;
+ text-align: right;
+ width: 70px;
+}
+
+.card__button-additional {
+ width: 100%;
+ border: 0;
+ background-color: #F2F2F2;
+ color: #444444;
+}
+
diff --git a/source/less/blocks/catalog.less b/source/less/blocks/catalog.less
new file mode 100644
index 0000000..67e6c10
--- /dev/null
+++ b/source/less/blocks/catalog.less
@@ -0,0 +1,21 @@
+.catalog__title {
+ font-family: @oswald;
+ font-weight: 400;
+ font-style: normal;
+ font-size: 36px;
+ line-height: 36px;
+ margin: 0;
+ padding: 27px 20px 40px;
+ border-bottom: 1px solid #EBEBEB;
+ color: #000000;
+}
+
+.catalog__list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.catalog__item {
+ border-bottom: 1px solid #EBEBEB;
+}
diff --git a/source/less/blocks/control.less b/source/less/blocks/control.less
new file mode 100644
index 0000000..8323cad
--- /dev/null
+++ b/source/less/blocks/control.less
@@ -0,0 +1,26 @@
+.control {
+ padding-top: 22px;
+ padding-bottom: 6px;
+}
+
+.control__list {
+ list-style: none;
+ margin: 0;
+ padding: 0 20px;
+}
+
+.control__item {
+ padding-bottom: 13px;
+}
+
+.control__label {
+ font-family: @oswald;
+ font-size: 16px;
+ line-height: 18px;
+ text-transform: uppercase;
+ padding-left: 45px;
+}
+
+.control__label-input {
+ margin: 0;
+}
diff --git a/source/less/blocks/cooperation.less b/source/less/blocks/cooperation.less
new file mode 100644
index 0000000..c630a7c
--- /dev/null
+++ b/source/less/blocks/cooperation.less
@@ -0,0 +1,28 @@
+.cooperation__wrapper {
+ display: flex;
+ padding: 26px 20px;
+ background-color: #F2F2F2;
+
+ &--main {
+ background-color: #FFFFFF;
+ }
+}
+
+.cooperation__title {
+ font-family: @oswald;
+ font-size: 16px;
+ line-height: 20px;
+ text-transform: uppercase;
+ color: #111111;
+ margin: 0;
+ max-width: 140px;
+}
+
+.cooperation__description {
+ margin: 0;
+ line-height: 20px;
+}
+
+.cooperation__map {
+ display: block;
+}
diff --git a/source/less/blocks/copyright.less b/source/less/blocks/copyright.less
new file mode 100644
index 0000000..ac68d05
--- /dev/null
+++ b/source/less/blocks/copyright.less
@@ -0,0 +1,10 @@
+.copyright__link {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.copyright__name {
+ margin: 0;
+}
diff --git a/source/less/blocks/fonts.less b/source/less/blocks/fonts.less
new file mode 100644
index 0000000..39fae78
--- /dev/null
+++ b/source/less/blocks/fonts.less
@@ -0,0 +1,25 @@
+@font-face {
+ font-family: "Oswald";
+ font-style: normal;
+ font-weight: 400;
+ src: url("../../fonts/oswald/oswaldregular.woff2") format("woff2");
+ font-display: swap;
+}
+
+@font-face {
+ font-family: "Oswald";
+ font-style: normal;
+ font-weight: 500;
+ src: url("../../fonts/oswald/oswaldmedium.woff2") format("woff2");
+ font-display: swap;
+}
+
+@font-face {
+ font-family: "Lato";
+ font-style: normal;
+ font-weight: 400;
+ src: url("../../fonts/lato/Lato-Regular.woff2") format("woff2");
+ font-display: swap;
+}
+
+@oswald: "Oswald", sans-serif;
diff --git a/source/less/blocks/form.less b/source/less/blocks/form.less
new file mode 100644
index 0000000..7d943c0
--- /dev/null
+++ b/source/less/blocks/form.less
@@ -0,0 +1,95 @@
+.form {
+ display: flex;
+ flex-direction: column;
+}
+
+.form__description {
+ padding-bottom:10px;
+ border-bottom: 1px solid #D9D9D9;
+}
+
+.form__input {
+ display: flex;
+ align-items: center;
+ gap: 13px;
+ margin: 0;
+ padding: 0 20px 14px;
+ font-family: @oswald;
+ font-size: 16px;
+ line-height: 18px;
+}
+
+.form__input-name,
+.form__input-value {
+ font-family: "Oswald";
+ font-size: 16px;
+ line-height: 18px;
+ text-transform: uppercase;
+ white-space: nowrap;
+ overflow-wrap: break-word;
+}
+
+.form__input-value {
+ width: 100%;
+ padding: 14px 15px 13px;
+ color: #444444;
+ border: 1px solid #E7E7E7;
+}
+
+.form__control {
+ border-bottom: 1px solid #E7E7E7;
+}
+
+.form__title {
+ font-family: "Oswald";
+ font-weight: 400;
+ font-style: normal;
+ font-size: 24px;
+ line-height: 26px;
+ margin: 0;
+ padding: 26px 20px 35px;
+ color: #000000;
+
+ &--comment {
+ padding-bottom: 38px;
+ }
+
+ &--additional {
+ padding-bottom: 34px;
+ }
+}
+
+.form__textarea {
+ padding: 0 20px;
+ margin: 0;
+}
+
+.form__textarea-discription {
+ font-family: @oswald;
+ font-weight: 400;
+ font-style: normal;
+ font-size: 16px;
+ line-height: 18px;
+ color: #444444;
+ text-transform: uppercase;
+ padding: 14px;
+ padding-left: 15px;
+ box-sizing: border-box;
+ width: 100%;
+ min-height: 150px;
+ border: 1px solid #E7E7E7;
+}
+
+.form__submit {
+ border: none;
+ box-sizing: border-box;
+ margin: 0 20px;
+}
+
+.form__legend {
+ font-size: 14px;
+ line-height: 16px;
+ text-align: center;
+ color: #000000;
+ padding: 21px 20px 32px;
+}
diff --git a/source/less/blocks/life-example.less b/source/less/blocks/life-example.less
new file mode 100644
index 0000000..ea9c6e6
--- /dev/null
+++ b/source/less/blocks/life-example.less
@@ -0,0 +1,66 @@
+.life-example {
+ background-color: #EAEAEA;
+ padding: 25px 20px 40px;
+}
+
+.life-example__title {
+ font-family: "Oswald", sans-serif;
+ font-weight: 400;
+ font-size: 36px;
+ line-height: 40px;
+ color: #000000;
+ padding-bottom: 40px;
+ margin: 0;
+}
+
+.life-example__description {
+ padding-bottom: 20px;
+ margin: 0;
+}
+
+.life-example__chars-list {
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ display: flex;
+ justify-content: space-between;
+}
+
+.life-example__item {
+ position: relative;
+ padding-bottom: 34px;
+}
+
+.life-example__item-title {
+ font-family: "Oswald", sans-serif;
+ font-size: 24px;
+ line-height: 24px;
+ color: #000000;
+ text-transform: uppercase;
+ margin: 0;
+ width: 124px;
+ border: 1px solid #CDCDCD;
+ border-radius: 3px;
+ text-align: center;
+ padding: 14.5px 0 14.5px;
+}
+
+.life-example__item-description {
+ font-size: 12px;
+ line-height: 12px;
+ text-align: center;
+ background-color: #EAEAEA;
+ position: absolute;
+ left: 18px;
+ top: 34px;
+ min-width: 90px;
+}
+
+.life-example__price {
+ font-family: @oswald;
+ line-height: 20px;
+ text-align: center;
+ text-transform: uppercase;
+ color: #000000;
+ padding-bottom: 20px;
+}
diff --git a/source/less/blocks/main-container.less b/source/less/blocks/main-container.less
new file mode 100644
index 0000000..b7f9fcd
--- /dev/null
+++ b/source/less/blocks/main-container.less
@@ -0,0 +1,3 @@
+.main-container {
+ flex-grow: 1;
+}
diff --git a/source/less/blocks/main-footer.less b/source/less/blocks/main-footer.less
new file mode 100644
index 0000000..e33e4b1
--- /dev/null
+++ b/source/less/blocks/main-footer.less
@@ -0,0 +1,24 @@
+.main-footer {
+ display: flex;
+ flex-direction: column;
+ background-color: #F2F2F2;
+ padding: 40px 20px;
+}
+
+.main-footer__logo {
+ text-align: center;
+ padding-bottom: 20px;
+ border-bottom: 1px solid #D9D9D9;
+}
+
+.main-footer__social {
+ display: flex;
+ justify-content: center;
+ padding: 20px 0;
+ border-bottom: 1px solid #D9D9D9;
+}
+
+.main-footer__copyright {
+ display: flex;
+ padding-top: 20px;
+}
diff --git a/source/less/blocks/main-header.less b/source/less/blocks/main-header.less
new file mode 100644
index 0000000..279bfb4
--- /dev/null
+++ b/source/less/blocks/main-header.less
@@ -0,0 +1,22 @@
+.main-header {
+ font-family: @oswald;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 13px 20px 15px;
+
+ &--secondary {
+ border-bottom: 1px solid #D9D9D9;
+ }
+}
+
+.main-header__logo {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 56px;
+}
diff --git a/source/less/blocks/main-nav.less b/source/less/blocks/main-nav.less
new file mode 100644
index 0000000..79c8d66
--- /dev/null
+++ b/source/less/blocks/main-nav.less
@@ -0,0 +1,52 @@
+.main-nav {
+ position: relative;
+}
+
+.main-nav__toggle {
+ min-width: 24px;
+ min-height: 24px;
+ background-image: url("../../img/nav-open.svg");
+ background-repeat: no-repeat;
+ background-color: transparent;
+ border: none;
+}
+
+.main-nav__wrapper {
+ position: absolute;
+ width: 320px;
+ background-color: #FFFFFF;
+ top: 45px;
+ right: -20px;
+ display: none;
+
+ &--mobile-open {
+ display: block;
+ }
+
+ &--mobile-close {
+ display: none;
+ }
+}
+
+.main-nav__list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ text-align: center;
+}
+
+.main-nav__item {
+ padding: 22px 0 24px;
+ border-top: 1px solid #E6E6E6;
+ border-bottom: 1px solid #E6E6E6;
+}
+
+.main-nav__link {
+ font-family: @oswald;
+ font-weight: 400;
+ color: #000000;
+ font-size: 20px;
+ line-height: 20px;
+ text-decoration: none;
+ text-transform: uppercase;
+}
diff --git a/source/less/blocks/page.less b/source/less/blocks/page.less
new file mode 100644
index 0000000..781fc31
--- /dev/null
+++ b/source/less/blocks/page.less
@@ -0,0 +1,15 @@
+.page {
+ height: 100%;
+ background-color: #E5E5E5;
+}
+
+.page__body {
+ display: flex;
+ flex-direction: column;
+ min-height: 100%;
+ margin: 0 auto;
+ font-family: "Lato", sans-serif;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 18px;
+}
diff --git a/source/less/blocks/program-selection.less b/source/less/blocks/program-selection.less
new file mode 100644
index 0000000..1c57205
--- /dev/null
+++ b/source/less/blocks/program-selection.less
@@ -0,0 +1,20 @@
+.program-selection__title {
+ font-family: @oswald;
+ font-weight: 400;
+ font-style: normal;
+ font-size: 36px;
+ line-height: 36px;
+ margin: 0;
+ color: #000000;
+ padding: 27px 20px 37px;
+}
+
+.program-selection__description {
+ font-family: @oswald;
+ font-size: 14px;
+ line-height: 18px;
+ text-transform: uppercase;
+ color: #000000;
+ margin: 0;
+ padding: 0 20px 39px;
+}
diff --git a/source/less/blocks/programs.less b/source/less/blocks/programs.less
new file mode 100644
index 0000000..8558a2b
--- /dev/null
+++ b/source/less/blocks/programs.less
@@ -0,0 +1,70 @@
+.programs__header {
+ background-image: url(../../img/index-background.png);
+ background-repeat: no-repeat;
+ font-family: @oswald;
+ font-weight: 400;
+ padding: 27px 20px 20px;
+ color: #FFFFFF;
+}
+
+.programs__title {
+ margin: 0;
+ font-weight: 400;
+ font-size: 36px;
+ line-height: 36px;
+ padding-bottom: 25px;
+ text-align: center;
+}
+
+.programs__slogan {
+ margin: 0;
+ text-transform: uppercase;
+ font-size: 14px;
+ line-height: 14px;
+ padding-bottom: 29px;
+ text-align: center;
+}
+
+.programs__img {
+ padding-bottom: 3px;
+}
+
+.programs__list {
+ padding: 0 20px 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.programs__item {
+ background-color: #F2F2F2;
+ padding: 30px 20px 18px;
+}
+
+.programs__item-title {
+ font-family: @oswald;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 37px;
+ text-transform: uppercase;
+ color: #000000;
+ margin: 0;
+ padding: 0 0 29px 70px;
+}
+
+.programs__item-description {
+ margin: 0;
+ padding-bottom: 23px;
+ border-bottom: 1px solid #D9D9D9;
+}
+
+.programs__item-link {
+ display: block;
+ font-family: @oswald;
+ font-size: 16px;
+ line-height: 16px;
+ padding-top: 15px;
+ color: #000000;
+ text-transform: uppercase;
+ text-decoration: none;
+}
diff --git a/source/less/blocks/slider-range.less b/source/less/blocks/slider-range.less
new file mode 100644
index 0000000..608df9c
--- /dev/null
+++ b/source/less/blocks/slider-range.less
@@ -0,0 +1,35 @@
+.slider-range {
+ position: relative;
+ display: flex;
+ justify-content: center;
+}
+
+.slider-range__item {
+ display: flex;
+ justify-content: center;
+ text-align: center;
+ width: 100%;
+ max-width: 280px;
+}
+
+.slider-range__slide {
+ width: 50%;
+ overflow: hidden;
+
+ &--before {
+ text-align: right;
+ }
+
+ &--after {
+ text-align: left;
+ transform: scale(-1, 1);
+ }
+}
+
+.slider-range__img {
+ max-width: 280px;
+
+ &--after {
+ transform: scale(-1, 1);
+ }
+}
diff --git a/source/less/blocks/social.less b/source/less/blocks/social.less
new file mode 100644
index 0000000..2fe5c16
--- /dev/null
+++ b/source/less/blocks/social.less
@@ -0,0 +1,13 @@
+.social__list {
+ display: flex;
+ gap: 24px;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.social__link {
+ display: block;
+ width: 28px;
+ height: 22px;
+}
diff --git a/source/less/blocks/visually-hidden.less b/source/less/blocks/visually-hidden.less
new file mode 100644
index 0000000..70a0f84
--- /dev/null
+++ b/source/less/blocks/visually-hidden.less
@@ -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/less/style.less b/source/less/style.less
index 95815d9..89cf28a 100644
--- a/source/less/style.less
+++ b/source/less/style.less
@@ -1 +1,21 @@
-// Начните писать стили здесь
+@import "./blocks/fonts.less";
+@import "./blocks/visually-hidden.less";
+@import "./blocks/page.less";
+@import "./blocks/main-header.less";
+@import "./blocks/main-nav.less";
+@import "./blocks/main-container.less";
+@import "./blocks/programs.less";
+@import "./blocks/button.less";
+@import "./blocks/advantages.less";
+@import "./blocks/life-example.less";
+@import "./blocks/cooperation.less";
+@import "./blocks/main-footer.less";
+@import "./blocks/social.less";
+@import "./blocks/copyright.less";
+@import "./blocks/slider-range.less";
+@import "./blocks/catalog.less";
+@import "./blocks/card.less";
+@import "./blocks/additional-goods.less";
+@import "./blocks/program-selection.less";
+@import "./blocks/form.less";
+@import "./blocks/control.less";
+