diff --git a/assets/css/index.css b/assets/css/index.css index 8cbb0c3..4d884a1 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -407,6 +407,48 @@ h3 { background-color: white; } +.input { + display: block; + padding: 27px 24px 25px; + box-sizing: border-box; + font-weight: 400; + font-size: 20px; + line-height: 140%; + color: #ffffff; + border: 1px solid #ffffff; + border-radius: 60px; + background-color: #609eff; + outline-color: rgba(255, 255, 255, 0.1); +} +@media (max-width: 768px) { + .input { + padding: 21px 24px 18px; + font-size: 17px; + line-height: 140%; + } +} +.input::-moz-placeholder { + color: #ffffff; +} +.input::placeholder { + color: #ffffff; +} +.input--name { + background: url(../img/icons/accountInput.svg) center left 31px no-repeat; +} +.input--phone { + background: url(../img/icons/phoneInput.svg) center left 31px no-repeat; +} +.input--name, .input--phone { + padding-left: 80px; +} +@media (max-width: 768px) { + .input--name, .input--phone { + padding-left: 60px; + background-position: center left 20px; + } +} + .header { padding: 26px 0 29px; } @@ -2568,4 +2610,89 @@ h3 { flex: 0 0 auto; display: block; height: 20px; +} + +.callback { + position: relative; + z-index: 100; + margin: 100px 0 0; +} +@media (max-width: 768px) { + .callback { + margin: 60px 0 0; + } +} +.callback__title { + margin: 21px 0; + color: #ffffff; +} +@media (max-width: 768px) { + .callback__title { + margin: 21px 0 15px; + } +} +.callback__title > span { + color: #ffffff; +} +.callback__wrapper { + padding: 42px 64px; + border-radius: 60px 10px; + background: url(../img/grid.svg) center no-repeat; + background-color: #609eff; +} +@media (max-width: 1240px) { + .callback__wrapper { + padding: 40px 16px; + margin: 0 -15px; + } +} +.callback__description { + max-width: 900px; + margin: 0 auto 35px; + font-weight: 400; + font-size: 21px; + line-height: 139%; + text-align: center; + color: #ffffff; +} +@media (max-width: 768px) { + .callback__description { + margin: 14px 0 37px; + font-size: 16px; + } +} +.callback__form { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 20px; + margin: 0 0 27px; +} +.callback__form > * { + flex: 0 0 calc(33.3333333333% - 13.3333333333px); +} +@media (max-width: 1240px) { + .callback__form > * { + flex: 0 0 calc(50% - 10px); + } +} +@media (max-width: 768px) { + .callback__form > * { + flex: 1 1 100%; + } +} +.callback__form > .button { + max-width: none; + justify-content: center; + padding-left: 24px; + padding-right: 24px; +} +.callback__disclaimer { + font-weight: 300; + font-size: 14px; + line-height: 138%; + letter-spacing: 0.01em; + text-align: center; + color: rgba(255, 255, 255, 0.4); } \ No newline at end of file diff --git a/assets/img/icons/accountInput.svg b/assets/img/icons/accountInput.svg new file mode 100644 index 0000000..bd3551b --- /dev/null +++ b/assets/img/icons/accountInput.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/img/icons/phoneInput.svg b/assets/img/icons/phoneInput.svg new file mode 100644 index 0000000..0114e2b --- /dev/null +++ b/assets/img/icons/phoneInput.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/scss/_l-callback.scss b/assets/scss/_l-callback.scss new file mode 100644 index 0000000..5062b59 --- /dev/null +++ b/assets/scss/_l-callback.scss @@ -0,0 +1,86 @@ +.callback { + position: relative; + z-index: 100; + margin: 100px 0 0; + + @include tablet { + margin: 60px 0 0; + } + + &__title { + margin: 21px 0; + color: $white; + + @include tablet { + margin: 21px 0 15px; + } + + & > span { + color: $white; + } + } + + &__wrapper { + padding: 42px 64px; + border-radius: 60px 10px; + background: url(../img/grid.svg) center no-repeat; + background-color: $blue; + + @include desktop { + padding: 40px 16px; + margin: 0 -15px; + } + } + + &__description { + max-width: 900px; + margin: 0 auto 35px; + font-weight: 400; + font-size: 21px; + line-height: 139%; + text-align: center; + color: $white; + + @include tablet { + margin: 14px 0 37px; + font-size: 16px; + } + } + + &__form { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 20px; + margin: 0 0 27px; + + & > * { + flex: 0 0 calc(100% / 3 - 20px / 3 * 2); + + @include desktop { + flex: 0 0 calc(100% / 2 - 20px / 2); + } + + @include tablet { + flex: 1 1 100%; + } + } + + & > .button { + max-width: none; + justify-content: center; + padding-left: 24px; + padding-right: 24px; + } + } + + &__disclaimer { + font-weight: 300; + font-size: 14px; + line-height: 138%; + letter-spacing: 0.01em; + text-align: center; + color: rgba($color: $white, $alpha: 0.4); + } +} diff --git a/assets/scss/_m-input.scss b/assets/scss/_m-input.scss new file mode 100644 index 0000000..2f270f3 --- /dev/null +++ b/assets/scss/_m-input.scss @@ -0,0 +1,43 @@ +.input { + display: block; + padding: 27px 24px 25px; + box-sizing: border-box; + font-weight: 400; + font-size: 20px; + line-height: 140%; + color: $white; + border: 1px solid $white; + border-radius: 60px; + background-color: $blue; + outline-color: rgba($color: $white, $alpha: 0.1); + + @include tablet { + padding: 21px 24px 18px; + font-size: 17px; + line-height: 140%; + } + + &::placeholder { + color: $white; + } + + + + &--name { + background: url(../img/icons/accountInput.svg) center left 31px no-repeat; + } + + &--phone { + background: url(../img/icons/phoneInput.svg) center left 31px no-repeat; + } + + &--name, + &--phone { + padding-left: 80px; + + @include tablet { + padding-left: 60px; + background-position: center left 20px ; + } + } +} diff --git a/assets/scss/index.scss b/assets/scss/index.scss index 977242c..838e718 100644 --- a/assets/scss/index.scss +++ b/assets/scss/index.scss @@ -11,6 +11,7 @@ @import './m-social-link'; @import './m-button'; @import './m-tag'; +@import './m-input'; // Layouts @@ -30,3 +31,4 @@ @import './l-price'; @import './l-team'; @import './l-faq'; +@import './l-callback'; diff --git a/index.html b/index.html index 22cd0ea..7cf5ff3 100644 --- a/index.html +++ b/index.html @@ -487,6 +487,44 @@ +
+
+
+
Получите помощь
+ +

+ Оставьте заявку + и получите помощь прямо сейчас! +

+ +

+ Наши специалисты проконсультируют вас по любым вопросам. А если требуется срочная и принудительная транспортировка, то мы организуем трансфер в течении 2 часов +

+ +
+ + + +
+ +
+ Оставляя заявку на нашем сайте, вы соглашаетесь с политикой обработки персональных + данных и получение новостей компании, скидках и акциях +
+
+
+
+
Этапы реабилитации
@@ -1738,7 +1776,7 @@ воскресеньям с соглашения куратора и специалистов центра
- +
Можно ли пользоваться телефоном, ноутбуком?
@@ -1816,6 +1854,45 @@
+ +
+
+
+
Момент принятия решения
+ +

+ Мы рассказали о программе,
+ теперь ваша очередь действовать +

+ +

+ Оставьте заявку и получите консультацию специалиста по Вашей ситуации и возможности + посещения программы +

+ +
+ + + +
+ +
+ Оставляя заявку на нашем сайте, вы соглашаетесь с политикой обработки персональных + данных и получение новостей компании, скидках и акциях +
+
+
+