diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index 67e430c..24c12ff 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -68,6 +68,38 @@ body{ font-family: var(--font-family); } +.modal{ + position: fixed; + top: 0; + + height: 100vh; + width: 100%; + + background-color: rgba(17, 17, 20, .8); + + z-index: 100; + + display: none; +} +.modal.active{ + display: flex; + justify-content: center; + align-items: center; +} + +.modal__item{ + padding: 88px 64px; + + background-color: var(--background-main); + + position: relative; + + display: none; +} +.modal__item.active{ + display: block; +} + /* text */ .title-1{ font-weight: 700; diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index 94eb6b7..a080943 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -851,4 +851,19 @@ } } /* call */ + +/* modal */ +.modal__item{ + width: 1000px;; +} +.modal__item > .title-1{ + text-align: center; +} +.modal__item > .text-1{ + margin-top: 24px; +} +.modal__item > .form{ + padding: 56px 36px 0 36px; +} +/* modal */ @media only screen and (min-width: 992px) and (max-width: 1032px) {} \ No newline at end of file diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css index 7be29b3..64dd3b3 100644 --- a/assets/css/gp-style-tablet.css +++ b/assets/css/gp-style-tablet.css @@ -90,39 +90,65 @@ transition: opacity .3s; } -.button-menu__close{ + +.phone-menu{ position: absolute; - top: 0; + top: 0px; + right: 0; left: 0; - + + height: 0; width: 100%; - height: 100%; - transition: opacity .3s; - opacity: 0; + background-color: var(--background-main); + + z-index: 10; + overflow: hidden; + transition: all .3s; } -.button-menu.open .button-menu__open{ - opacity: 0; +.phone-menu.active{ + height: 100vh; + overflow-y: auto; } -.button-menu.open .button-menu__close{ - opacity: 1; +.phone-menu__block-content{ + height: 0; + overflow: hidden; + + z-index: 10; + + transition: all .5s; } +.phone-menu__content{ + padding: 104px 16px 40px 16px; -.phone-menu{ + position: relative; +} +.phone-menu__sub{ position: absolute; - top: 112px; - right: 0; - left: 0; - + top: 0; + left: 100%; width: 100%; + transition: all .3s; + + background-color: var(--background-main); } -.phone-menu__block-content{ - /* height: 0; */ - /* overflow: hidden; */ +.phone-menu__sub.active{ + left: 0; } -.phone-menu__content{ - padding: 0 16px 40px 16px; +.phone-menu-content__close{ + position: absolute; + top: 40px; + right: 16px; + width: 32px; + aspect-ratio: 1; + + background-image: url(/assets/img/icon/close.svg); + background-repeat: no-repeat; + background-position: center; + + background-color: var(--background-main); + border: none; } .phone-menu__block{ margin-top: 32px; @@ -187,6 +213,10 @@ display: flex; align-items: center; } + +.phone-menu{ + display: block; +} /* header */ /* footer */ @@ -612,4 +642,5 @@ main{ } /* call */ + @media only screen and (max-width: 992px) {} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index 6af0059..461b57b 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -142,6 +142,32 @@ function howPhone() { } // how end +// phone menu +let btnOpenMenu = document.querySelector('.button-menu__open'); + +btnOpenMenu.onclick = function () { + let phoneMenu = document.querySelector('.phone-menu'), + block = document.querySelector('.phone-menu__block-content.main'), + content = document.querySelector('.phone-menu__content.main'), + newHeigh = content.offsetHeight + 'px'; + + phoneMenu.classList.add('active'); + block.style.height = newHeigh; +} + +let nextPhoneMenu = document.querySelectorAll('.phone-menu--next'); + +nextPhoneMenu.forEach(next => { + next.onclick = function () { + let subName = next.dataset.menu, + blockSub = document.querySelector(`.phone-menu__sub.${subName}`); + + blockSub.classList.add('active'); + } +}) +// phone menu + + // resize window.addEventListener('resize', () => { let screenWidth = window.screen.width; diff --git a/index.html b/index.html index ee9774e..f860bc5 100644 --- a/index.html +++ b/index.html @@ -97,7 +97,6 @@
open - close
@@ -136,18 +135,20 @@
-
-
+
+
+ +
+ +
+
+ + + + +
+

+ Работаем с гос.заказчиками по
+ 44-ФЗ/223-ФЗ +

+ + +7 (495) 798-80-81 + + sales@bestinfitness.ru + +
+ + + + + + + +
+
+ +
+ + Заказать звонок + +
+
+
+ +
+
+ + + + +
+

+ Работаем с гос.заказчиками по
+ 44-ФЗ/223-ФЗ +

+ + +7 (495) 798-80-81 + + sales@bestinfitness.ru + +
+ + + + + + + +
+
+ +
+ + Заказать звонок + +
+
+
+ +
+
+ + + + +
+

+ Работаем с гос.заказчиками по
+ 44-ФЗ/223-ФЗ +

+ + +7 (495) 798-80-81 + + sales@bestinfitness.ru + +
+ + + + + + + +
+
+ +
+ + Заказать звонок + +
+
+
+
@@ -981,6 +1133,109 @@
+
+
+

+ Получи проект бесплатно +

+ +
+
+
+ + + Имя введено не верно +
+
+
+
+ + + Телефон введен не верно +
+ +
+ + + E-mail введен не верно +
+
+ +
+ + +
+ + +
+ +
+ + + +
+
+ +
+

+ Обратный звонок +

+ +

+ Если у вас возникли вопросы, или вам нужна консультация, обращайтесь +

+ +
+
+
+ + + Имя введено не верно +
+
+
+
+ + + Телефон введен не верно +
+ +
+ + + E-mail введен не верно +
+
+ +
+ +
+ + + +
+
+
+