From 59594fabdf5e6f9f9b2c62a549f7fdc3d2683bf3 Mon Sep 17 00:00:00 2001 From: Mishelinus Date: Wed, 28 Sep 2022 22:17:10 +0300 Subject: [PATCH 1/4] make js for slider --- .gitignore | 5 ++- blank.html | 4 +- catalog.html | 84 ++++++++++++++++++------------------- css/style.css | 59 ++++++++++++-------------- index.html | 114 +++++++++++++++++++++++++------------------------- js/modal.js | 57 +++++++++++++++++++++++++ js/slide.js | 18 ++++++++ product.html | 2 +- 8 files changed, 206 insertions(+), 137 deletions(-) create mode 100644 js/modal.js create mode 100644 js/slide.js diff --git a/.gitignore b/.gitignore index ccb1fe8..62fa19a 100644 --- a/.gitignore +++ b/.gitignore @@ -7,11 +7,12 @@ logs # Ignore the build directory /dist -# The file containing environment variables +# The file containing environment variables .env # Ignore IDE specific files .idea/ .vscode/ *.sw* -.DS_Store \ No newline at end of file +.DS_Store +test_slide.js diff --git a/blank.html b/blank.html index 5b4179b..ff9bfb6 100644 --- a/blank.html +++ b/blank.html @@ -14,7 +14,7 @@ - + @@ -131,7 +131,7 @@

Напишите нам

закрыть - + diff --git a/catalog.html b/catalog.html index 8a16b92..7b236a9 100644 --- a/catalog.html +++ b/catalog.html @@ -14,7 +14,7 @@ - + @@ -77,21 +77,20 @@ @@ -101,34 +100,31 @@ - + diff --git a/css/style.css b/css/style.css index 86581da..0dd3b6e 100644 --- a/css/style.css +++ b/css/style.css @@ -14,7 +14,7 @@ --green-dark: #00aa62; /*green-dark*/ --yellow-bright: #efc849; --yellow-middle: #eab534; /*yellow*/ - --yellow-dark: #e5a722; /*yellow-dark*/ + --yellow-dark: #e5a722; /*yellow-dark*/ --grey-light: #eeeeee; /* gray*/ --grey-social: #e1e1e1; /*gray-88*/ --grey-grey: #d5d5d5; @@ -267,7 +267,7 @@ button { .slides-active { display: grid; grid-template-columns: max-content 1fr; - width: 100%; + /* width: 100%; */ } .slides__inner { @@ -330,12 +330,12 @@ button { min-width: 90px; } .slides-control button { - background-color: var(--basic-white); - height: 18px; - width: 18px; - border-radius: 50%; - position: relative; - cursor: pointer; + background-color: var(--basic-white); + height: 18px; + width: 18px; + border-radius: 50%; + position: relative; + cursor: pointer; } .slides-control .button-active::before { @@ -426,8 +426,8 @@ button { } .services__btn:active, .services__btn:focus { -color: rgba(255,255,255,.3); -box-shadow: inset 0 3px 0 rgb(0 0 0 / 10%); + color: rgba(255, 255, 255, 0.3); + box-shadow: inset 0 3px 0 rgb(0 0 0 / 10%); } .services__btn-apps { @@ -967,14 +967,12 @@ box-shadow: inset 0 3px 0 rgb(0 0 0 / 10%); } .list-radio__label { - font: inherit; line-height: 20px; color: var(--grey-second-Text); padding-left: 35px; position: relative; cursor: pointer; - } .list-radio__label:before, .list-radio__label:after { @@ -988,11 +986,11 @@ box-shadow: inset 0 3px 0 rgb(0 0 0 / 10%); opacity: 0.4; } .list-radio__label:before { - width: 24px; - height: 24px; - left: 0; - top: 50%; - transform: translateY(-50%); + width: 24px; + height: 24px; + left: 0; + top: 50%; + transform: translateY(-50%); } .list-radio__label:after { @@ -1019,8 +1017,6 @@ box-shadow: inset 0 3px 0 rgb(0 0 0 / 10%); display: block; } - - /* radio toggle end */ /* Checkbox */ @@ -1063,7 +1059,7 @@ box-shadow: inset 0 3px 0 rgb(0 0 0 / 10%); opacity: 0.3; } .list__input:hover + .list-checkbox__label::before { - opacity: 1; + opacity: 1; } .list__input:focus + label { opacity: 1; @@ -1071,7 +1067,6 @@ box-shadow: inset 0 3px 0 rgb(0 0 0 / 10%); outline-offset: 5px; } - /* отменяю hover у disabled */ .list-checkbox__input:disabled + .list-checkbox__label:hover:before { opacity: 0.3; @@ -1084,8 +1079,6 @@ box-shadow: inset 0 3px 0 rgb(0 0 0 / 10%); font-size: inherit; color: var(--basic-black); max-width: 260px; - - } .filter-btn:hover { background-color: var(--grey-btn-middle); @@ -1153,7 +1146,7 @@ box-shadow: inset 0 3px 0 rgb(0 0 0 / 10%); max-width: 60px; } -.sort-direction__item { +.sort-direction__item { margin-left: 18px; margin-bottom: 10px; } @@ -1164,7 +1157,7 @@ box-shadow: inset 0 3px 0 rgb(0 0 0 / 10%); line-height: 18px; color: var(--basic-black); opacity: 0.3; - margin-bottom: 10px; + margin-bottom: 10px; margin-left: 10px; } @@ -1290,9 +1283,9 @@ box-shadow: inset 0 3px 0 rgb(0 0 0 / 10%); box-shadow: inset 0px 3px 0px var(--box-shadow); } - .card-product:hover .card-product__descr { - /* visibility: visible; */ - opacity: 1; +.card-product:hover .card-product__descr { + /* visibility: visible; */ + opacity: 1; box-shadow: 0px 6px 15px var(--shadow); border-top-color: var(--grey-text-social); } @@ -1361,6 +1354,7 @@ box-shadow: inset 0 3px 0 rgb(0 0 0 / 10%); /* modal */ .modal { + display: none; margin: auto; position: fixed; top: 0; @@ -1372,10 +1366,13 @@ box-shadow: inset 0 3px 0 rgb(0 0 0 / 10%); box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.6); } +.modal_show { + display: block; +} + /* modal__mail */ .modal__mail { - display: none; width: 960px; height: 590px; padding-top: 63px; @@ -1526,7 +1523,7 @@ box-shadow: inset 0 3px 0 rgb(0 0 0 / 10%); margin: 0 auto; text-align: center; } -.search p { +.search p { font-size: inherit; font-weight: 500; line-height: 24px; @@ -1537,11 +1534,9 @@ box-shadow: inset 0 3px 0 rgb(0 0 0 / 10%); width: 450px; height: 100px; display: block; - } .search input { display: block; width: 100%; padding: 15px 25px 15px 25px; } - diff --git a/index.html b/index.html index 6b7d60c..c1560db 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ - + @@ -42,60 +42,60 @@

Интернет магазин «Nёrds»

-
- -
-
-
Долго, дорого,
скрупулезно.
-
- Математически выверенный дизайн
- для вашего сайта или мобильного приложения. -
- - узнать больше - -
-
-
-
-
-
-
Любим математику
- как никто другой
-
- Никакого креатива, только математические формулы
- для расчета идеальных пропорций -
- - узнать больше - -
-
-
-
-
-
-
Только ночь,
- только хардкор
-
- Работать днем, как все? Мы против этого.
- Ближе к полуночи работа только начинается. -
- - УЗНАТЬ БОЛЬШЕ - -
-
-
-
+
+ +
+
+
Долго, дорого,
скрупулезно.
+
+ Математически выверенный дизайн
+ для вашего сайта или мобильного приложения. +
+ + узнать больше + +
+
+
+
+
+
+
Любим математику
+ как никто другой
+
+ Никакого креатива, только математические формулы
+ для расчета идеальных пропорций +
+ + узнать больше + +
+
+
+
+
+
+
Только ночь,
+ только хардкор
+
+ Работать днем, как все? Мы против этого.
+ Ближе к полуночи работа только начинается. +
+ + УЗНАТЬ БОЛЬШЕ + +
+
+
+
-
- - - -
-
+
+ + + +
+
@@ -275,16 +275,16 @@

Напишите нам

@@ -292,6 +292,8 @@

Напишите нам

закрыть
+ + diff --git a/js/modal.js b/js/modal.js new file mode 100644 index 0000000..2df57ea --- /dev/null +++ b/js/modal.js @@ -0,0 +1,57 @@ + +const modal = document.querySelector('.modal'); +const clickModalShow = document.querySelector('.map-contact__btn'); +const clickCloseModal = modal.querySelector('.btn-close'); +const form = modal.querySelector('form'); +const userName = modal.querySelector('[name=name]'); +const userEmail = modal.querySelector('[name=email]'); + +let isStorageSupport = true; +let storage = ''; +//перехват ошибок «исключительные ситуации» (исключения) start +try { + storage = localStorage.getItem('name'); +} catch (err) { + isStorageSupport = false; +} +// end ....................... + + + + clickModalShow.addEventListener ('click', function(evt){ + evt.preventDefault(); + modal.classList.add('modal_show'); + //фокус на поле name + userName.focus(); + if(storage){ + userName.value = storage; + } +}); + +clickCloseModal.addEventListener('click', function(){ + modal.classList.remove('modal_show'); +}); + + +form.addEventListener('submit', function(evt){ + //evt.preventDefault(); + + if(!userName.value){ + evt.preventDefault(); + console.log('не заполнено поле name '); + console.log(userEmail.value); + } else { + localStorage.setItem('name', userName.value); + } +if(!userEmail){ +console.log('не заполнено поле email '); +console.log(userEmail.value); +} else { + localStorage.setItem('userEmail', userEmail.value); +} + +}); + + + + diff --git a/js/slide.js b/js/slide.js new file mode 100644 index 0000000..41cc705 --- /dev/null +++ b/js/slide.js @@ -0,0 +1,18 @@ +const slides = document.querySelectorAll(".slides"); +const slidesControl = document.querySelectorAll(".button-slide"); + +let clickHandler = function (button, slide) { + button.addEventListener("click", function () { + for (let i = 0; i < slides.length; i++) { + slides[i].classList.remove("slides-active"); + slidesControl[i].classList.remove("button-active"); + } + slide.classList.add("slides-active"); + button.classList.add("button-active"); + }); +}; +for (let i = 0; i < slidesControl.length; i++) { + clickHandler(slidesControl[i], slides[i]); +} + + diff --git a/product.html b/product.html index 5b4179b..972526c 100644 --- a/product.html +++ b/product.html @@ -131,7 +131,7 @@

Напишите нам

закрыть - + From edb24509db0e021fa3f3481a0fca0390fe8b4608 Mon Sep 17 00:00:00 2001 From: Mishelinus Date: Sat, 29 Oct 2022 21:52:56 +0300 Subject: [PATCH 2/4] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?= =?UTF-8?q?=20transition=20=D0=BD=D0=B0=20=D0=BC=D0=BE=D0=B4=D0=B0=D0=BB?= =?UTF-8?q?=D0=BA=D1=83,=20=D0=B0=D0=BD=D0=B8=D0=BC=D0=B8=D1=80=D0=BE?= =?UTF-8?q?=D0=B2=D0=B0=D0=BB=20=D1=81=D0=BB=D0=B0=D0=B9=D0=B4=D0=B5=D1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 49 +++++++++++++++++++++++++--- index.html | 6 ++-- js/modal.js | 89 ++++++++++++++++++++++++++++++--------------------- 3 files changed, 100 insertions(+), 44 deletions(-) diff --git a/css/style.css b/css/style.css index 0dd3b6e..43063f8 100644 --- a/css/style.css +++ b/css/style.css @@ -268,6 +268,18 @@ button { display: grid; grid-template-columns: max-content 1fr; /* width: 100%; */ + animation: slideToRight 1s ease; +} +@keyframes slideToRight { + 0% { + transform: translateY(-200%); + opacity: 0; + } + 100% { + transform: translateX(0); + opacity: 1; + + } } .slides__inner { @@ -1354,7 +1366,6 @@ button { /* modal */ .modal { - display: none; margin: auto; position: fixed; top: 0; @@ -1364,10 +1375,16 @@ button { z-index: 10; background: var(--basic-white); box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.6); + transform: translateY(-100%) scale(0); + transition: .4s linear; } .modal_show { - display: block; + transform: translateY(0) scale(100%); +} + +.modal-error { + animation: shakeErrorForm 0.6s; } /* modal__mail */ @@ -1378,8 +1395,6 @@ button { padding-top: 63px; padding-left: 100px; padding-bottom: 84px; - left: 50%; - transform: translateX(-50%); } .modal__mail h3 { font-size: 45px; @@ -1540,3 +1555,29 @@ button { width: 100%; padding: 15px 25px 15px 25px; } +/* animations */ + + +@keyframes shakeErrorForm { + 0%, + 100% { + transform: translateX(0); + } + + 10%, + 30%, + 50%, + 70%, + 90% { + transform: translateX(-15px); + } + + 20%, + 40%, + 60%, + 80% { + transform: translateX(15px); + } +} + + diff --git a/index.html b/index.html index c1560db..99e525d 100644 --- a/index.html +++ b/index.html @@ -44,7 +44,7 @@

Интернет магазин «Nёrds»

-
+
Долго, дорого,
скрупулезно.
@@ -58,7 +58,7 @@
-
+
Любим математику
как никто другой
@@ -73,7 +73,7 @@
-
+
Только ночь,
только хардкор
diff --git a/js/modal.js b/js/modal.js index 2df57ea..11c7f30 100644 --- a/js/modal.js +++ b/js/modal.js @@ -1,57 +1,72 @@ - -const modal = document.querySelector('.modal'); -const clickModalShow = document.querySelector('.map-contact__btn'); -const clickCloseModal = modal.querySelector('.btn-close'); -const form = modal.querySelector('form'); -const userName = modal.querySelector('[name=name]'); -const userEmail = modal.querySelector('[name=email]'); +const modal = document.querySelector(".modal"); +const clickModalShow = document.querySelector(".map-contact__btn"); +const clickCloseModal = modal.querySelector(".btn-close"); +const form = modal.querySelector("form"); +const userName = modal.querySelector("[name=name]"); +const userEmail = modal.querySelector("[name=email]"); +const userText = modal.querySelector("[name=text]"); let isStorageSupport = true; -let storage = ''; +let storage = ""; //перехват ошибок «исключительные ситуации» (исключения) start try { - storage = localStorage.getItem('name'); + storage = localStorage.getItem("name"); } catch (err) { isStorageSupport = false; } // end ....................... +clickModalShow.addEventListener("click", function (evt) { + evt.preventDefault(); + modal.classList.add("modal_show"); + //фокус на поле name - clickModalShow.addEventListener ('click', function(evt){ - evt.preventDefault(); - modal.classList.add('modal_show'); - //фокус на поле name - userName.focus(); - if(storage){ - userName.value = storage; - } + if (storage) { + userName.value = storage; + userEmail.focus(); + } else { + userName.focus(); + } }); -clickCloseModal.addEventListener('click', function(){ - modal.classList.remove('modal_show'); -}); +clickCloseModal.addEventListener("click", function () { - -form.addEventListener('submit', function(evt){ - //evt.preventDefault(); - - if(!userName.value){ - evt.preventDefault(); - console.log('не заполнено поле name '); - console.log(userEmail.value); - } else { - localStorage.setItem('name', userName.value); - } -if(!userEmail){ -console.log('не заполнено поле email '); -console.log(userEmail.value); -} else { - localStorage.setItem('userEmail', userEmail.value); -} + modal.classList.remove("modal_show", "modal-error"); + modal.offsetWidth = modal.offsetWidth; + let issClass = modal.classList.contains("modal_show"); + if (!issClass) { + console.log("no isset class"); + localStorage.removeItem("name"); + } }); +form.addEventListener("submit", function (evt) { + + if (!userName.value || !userEmail.value || !userText.value) { + console.log("есть не заполненные поля"); + modal.classList.remove("modal-error"); + modal.offsetWidth = modal.offsetWidth; + modal.classList.add("modal-error"); + evt.preventDefault(); + } else { + if (isStorageSupport) { + localStorage.setItem("name", userName.value); + } + } +}); +window.addEventListener("keydown", function (evt) { + if (evt.keyCode === 27) { + if (modal.classList.contains("modal_show")) { + evt.preventDefault(); + modal.classList.remove("modal_show", "modal-error"); + } + } +}); +window.addEventListener('click', function(){ +modal.classList.remove('modal-show'); +}); From d01f176b52835ec7ceef3fdb381551198388ed63 Mon Sep 17 00:00:00 2001 From: Mishelinus Date: Fri, 4 Nov 2022 07:03:52 +0300 Subject: [PATCH 3/4] =?UTF-8?q?=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 54 ++++++++++++++++++++++--- index.html | 106 +++++++++++++++++++++++++------------------------- js/modal.js | 13 +++---- 3 files changed, 107 insertions(+), 66 deletions(-) diff --git a/css/style.css b/css/style.css index 43063f8..6a4b327 100644 --- a/css/style.css +++ b/css/style.css @@ -278,7 +278,6 @@ button { 100% { transform: translateX(0); opacity: 1; - } } @@ -1365,22 +1364,38 @@ button { /* modal */ +.overlay { + position: relative; + opacity: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 10; + background: rgba(0, 0, 0, 0.85); +} +.overlay_show { + opacity: 1; + position: fixed; +} + .modal { + display: none; margin: auto; position: fixed; top: 0; bottom: 0; left: 0; right: 0; - z-index: 10; + z-index: 11; background: var(--basic-white); box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.6); - transform: translateY(-100%) scale(0); - transition: .4s linear; + transition: 0.4s linear; } .modal_show { - transform: translateY(0) scale(100%); + display: block; + animation: bounce 0.6s; } .modal-error { @@ -1557,7 +1572,6 @@ button { } /* animations */ - @keyframes shakeErrorForm { 0%, 100% { @@ -1580,4 +1594,32 @@ button { } } +@keyframes bounce { + 0% { + transform: translateY(-2000px); + } + 70% { + transform: translateY(30px); + } + 90% { + transform: translateY(-10px); + } + 100% { + transform: translateY(0); + } +} +@keyframes bounce-out { + 0% { + transform: translateY(0); + } + 70% { + transform: translateY(-10px); + } + 90% { + transform: translateY(30px); + } + 100% { + transform: translateY(-2000px); + } +} diff --git a/index.html b/index.html index 99e525d..2169269 100644 --- a/index.html +++ b/index.html @@ -42,60 +42,60 @@

Интернет магазин «Nёrds»

-
- -
-
-
Долго, дорого,
скрупулезно.
-
- Математически выверенный дизайн
- для вашего сайта или мобильного приложения. -
- - узнать больше - -
-
-
-
-
-
-
Любим математику
- как никто другой
-
- Никакого креатива, только математические формулы
- для расчета идеальных пропорций -
- - узнать больше - -
-
-
-
-
-
-
Только ночь,
- только хардкор
-
- Работать днем, как все? Мы против этого.
- Ближе к полуночи работа только начинается. -
- - УЗНАТЬ БОЛЬШЕ - -
-
-
-
+
+ +
+
+
Долго, дорого,
скрупулезно.
+
+ Математически выверенный дизайн
+ для вашего сайта или мобильного приложения. +
+ + узнать больше + +
+
+
+
+
+
+
Любим математику
+ как никто другой
+
+ Никакого креатива, только математические формулы
+ для расчета идеальных пропорций +
+ + узнать больше + +
+
+
+
+
+
+
Только ночь,
+ только хардкор
+
+ Работать днем, как все? Мы против этого.
+ Ближе к полуночи работа только начинается. +
+ + УЗНАТЬ БОЛЬШЕ + +
+
+
+
-
- - - -
-
+
+ + + +
+
@@ -269,7 +269,7 @@
- +

Напишите нам

diff --git a/js/modal.js b/js/modal.js index 11c7f30..9d545b4 100644 --- a/js/modal.js +++ b/js/modal.js @@ -5,6 +5,7 @@ const form = modal.querySelector("form"); const userName = modal.querySelector("[name=name]"); const userEmail = modal.querySelector("[name=email]"); const userText = modal.querySelector("[name=text]"); +const overlay = document.querySelector(".overlay"); let isStorageSupport = true; let storage = ""; @@ -20,6 +21,7 @@ clickModalShow.addEventListener("click", function (evt) { evt.preventDefault(); modal.classList.add("modal_show"); + overlay.classList.add("overlay_show"); //фокус на поле name if (storage) { @@ -31,22 +33,18 @@ clickModalShow.addEventListener("click", function (evt) { }); clickCloseModal.addEventListener("click", function () { - modal.classList.remove("modal_show", "modal-error"); + overlay.classList.remove("overlay_show"); modal.offsetWidth = modal.offsetWidth; let issClass = modal.classList.contains("modal_show"); if (!issClass) { console.log("no isset class"); localStorage.removeItem("name"); } - }); form.addEventListener("submit", function (evt) { - - if (!userName.value || !userEmail.value || !userText.value) { - console.log("есть не заполненные поля"); modal.classList.remove("modal-error"); modal.offsetWidth = modal.offsetWidth; @@ -64,9 +62,10 @@ window.addEventListener("keydown", function (evt) { if (modal.classList.contains("modal_show")) { evt.preventDefault(); modal.classList.remove("modal_show", "modal-error"); + overlay.classList.remove("overlay_show"); } } }); -window.addEventListener('click', function(){ -modal.classList.remove('modal-show'); +window.addEventListener("click", function () { + modal.classList.remove("modal-show"); }); From f7d6b6bfdd184a114a26729c5ac1b53345efa5ba Mon Sep 17 00:00:00 2001 From: Mishelinus Date: Fri, 4 Nov 2022 11:55:51 +0300 Subject: [PATCH 4/4] =?UTF-8?q?=D0=B7=D0=B0=D0=BA=D0=BE=D0=BD=D1=87=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=B8=D0=BD=D1=82=D0=B5=D1=80=D0=B0=D0=BA=D1=82=D0=B8?= =?UTF-8?q?=D0=B2=D0=BD=D1=8B=D0=B5=20=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD?= =?UTF-8?q?=D1=82=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .prettierignore | 3 + blank.html | 12 ++-- catalog.html | 46 ++++++++------- css/style.css | 9 ++- css/style.min.css | 2 +- header.php | 141 ---------------------------------------------- index.html | 8 +-- js/modal.js | 2 - js/modal.min.js | 1 + js/slide.js | 2 - js/slide.min.js | 1 + 11 files changed, 40 insertions(+), 187 deletions(-) create mode 100644 .prettierignore delete mode 100644 header.php create mode 100644 js/modal.min.js create mode 100644 js/slide.min.js diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..b8a395f --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +css/style.min.css +js/modal.min.js +js/slide.min.js diff --git a/blank.html b/blank.html index ff9bfb6..4422127 100644 --- a/blank.html +++ b/blank.html @@ -108,22 +108,20 @@
- +

Напишите нам

- -

@@ -131,7 +129,7 @@

Напишите нам

закрыть
- + diff --git a/catalog.html b/catalog.html index 7b236a9..ebe3365 100644 --- a/catalog.html +++ b/catalog.html @@ -372,30 +372,28 @@
- -
-

Напишите нам

-
-
-

- - -

-
- - -
- -
- +
+
+

Напишите нам

+
+
+

+

+
+ + +
+ +
+ diff --git a/css/style.css b/css/style.css index 6a4b327..e00aa5f 100644 --- a/css/style.css +++ b/css/style.css @@ -1294,14 +1294,13 @@ button { box-shadow: inset 0px 3px 0px var(--box-shadow); } -.card-product:hover .card-product__descr { - /* visibility: visible; */ - opacity: 1; +.card-product:hover { box-shadow: 0px 6px 15px var(--shadow); border-top-color: var(--grey-text-social); } -.card-product__descr:focus-within { +.card-product:hover .card-product__descr { + visibility: visible; opacity: 1; } @@ -1614,7 +1613,7 @@ button { transform: translateY(0); } 70% { - transform: translateY(-10px); + transform: translateY(-10px); } 90% { transform: translateY(30px); diff --git a/css/style.min.css b/css/style.min.css index a253afa..488f535 100644 --- a/css/style.min.css +++ b/css/style.min.css @@ -1 +1 @@ -:root{--content-padding-desktop:0px;--content-width-desktop:calc(1160px - var(--content-padding-desktop) * 2);--basic-black:#000000;--black--light:rgba(0, 0, 0, 0.3);--basic-white:#fff;--basic-red-bright:#fb565a;--red-middle:#e74246;--red-dark:#d7373b;--green-bright:#00ca74;--green-middle:#00bc6c;--green-dark:#00aa62;--yellow-bright:#efc849;--yellow-middle:#eab534;--yellow-dark:#e5a722;--grey-light:#eeeeee;--grey-social:#e1e1e1;--grey-grey:#d5d5d5;--grey-btn-middle:#dfdfdf;--grey-btn-dark:#0f0404;--grey-second-Text:#283136;--grey-text:#666666;--grey-text-social:#444444;--grey-pagination-link:#dbdbdb;--radio-color:#4d4d4d;--btn-sort-bottom:#231f20;--btn-sort-top:#231f20;--item-top-active:#161212;--pagination-btn-next:#bebebe;--input-border--calm:#d7dcde;--range-shadow:rgba(0, 0, 0, 0.15);--range-label:#d7dcdf;--range-label-bg:#ababab;--range-label-span:#00ca74;--grey-slide-active:#c1c1c1;--social-shadow--active:inset 0px 3px 0px rgba(0, 1, 1, 0.1);--modal-shadow:0px 20px 40px rgba(0, 0, 0, 0.4);--card-product:#f2f2f2;--card-product-border:rgba(68, 68, 68, 0.12);--input-border--hover:#b4b9bb;--box-shadow:rgba(0, 1, 1, 0.1);--contact-btn-close:rgba(251, 86, 90, 0.3)}.page-body{min-height:100%;display:grid;align-content:start;grid-template-rows:min-content 1fr max-content;position:relative;font-family:"Roboto","Arial",sans-serif;font-size:16px;font-weight:400;line-height:24px;color:var(--basic-black);background-color:var(--basic-white)}.page{height:100%}*{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}a{text-decoration:none}.visually-hidden{position:absolute;white-space:nowrap;width:1px;height:1px;overflow:hidden;border:0;padding:0;clip:rect(0 0 0 0);clip-path:inset(50%);margin:-1px}.title,a{color:var(--basic-black)}.title{font-weight:500;font-size:55px}.btn,button{border:0}.btn{display:inline-block;min-height:50px;line-height:18px;border-radius:3px;font-weight:500;text-transform:uppercase;cursor:pointer;text-align:center;color:var(--basic-white);padding-top:16px;padding-bottom:16px}.container{width:1160px;margin:0 auto}.page-main{display:grid;grid-template-rows:repeat(5,min-content)}.main-header{background-color:var(--grey-light);padding-top:48px}.main-navigation{display:grid;grid-template-columns:max-content 1fr min-content;column-gap:30px;justify-items:end}.main-header-logo{align-self:center}.main-header-logo:hover{opacity:.7}.main-header-logo:active,.main-header-logo:focus,.social__item a:active svg,.social__item a:focus svg{opacity:.3}.basket{text-transform:uppercase;font-weight:500;color:inherit;display:block}.site-navigation{display:flex;justify-content:flex-start;list-style-type:none;width:670px;flex-wrap:wrap;align-items:center;margin-top:10px;padding-left:50px}.site-navigation li{margin-right:45px}.site-navigation li:last-child{margin-right:0}.basket{border:0;cursor:pointer;position:relative;margin-top:10px;width:125px;padding-left:53px;align-items:center;margin-left:20px}.basket:hover,.site-navigation a:hover{color:var(--basic-red-bright)}.basket:active,.basket:focus,.site-navigation a:active,.site-navigation a:focus{color:inherit;opacity:.3;border:0}.site-navigation .link-current::before,.user-navigation .link-current::before{content:"";position:absolute;background-color:var(--basic-red-bright);width:100%;height:2px;bottom:-13px}.user-navigation .link-current::before{top:40px;left:10px}.user-navigation{list-style:none;display:flex;align-self:center}.site-navigation a,.user-navigation a{display:block;position:relative;line-height:30px;text-transform:uppercase;font-weight:500;color:inherit}.basket::after{content:"";position:absolute;display:block;top:7px;left:13px;background:url(../img/cart-icon.svg)0 0 no-repeat;width:22px;height:22px}.slider{background-color:var(--grey-light);position:relative;margin-bottom:80px}.slider-wrap{display:grid;grid-template-columns:1fr 2fr;display:flex;position:relative}.slides{display:none;margin:0 auto}.slides-active{display:grid;grid-template-columns:max-content 1fr;width:100%}.slides__inner{max-width:398px;padding-top:71px}.slides__title{width:520px;font-style:normal;font-weight:500;font-size:55px;line-height:55px;margin-bottom:27px}.slides__text{max-width:416px;font-weight:400;margin-bottom:38px;color:var(--grey-second-Text)}.slides__btn{background-color:var(--basic-red-bright);padding-left:54px;padding-right:54px}.slides__btn:hover{background-color:var(--red-middle)}.slides-btn:focus,.slides__btn:active{background-color:var(--red-dark);color:rgba(255,255,255,.3)}.slides__img{max-width:760px;width:760px;height:431px;position:relative;right:-2px;bottom:7px;background-position:right top;background-repeat:no-repeat}.slides-control{display:flex;justify-content:space-between;height:18px;position:absolute;bottom:103px;left:50%;transform:translateX(-50%);z-index:2;list-style-type:none;min-width:90px}.slides-control button{background-color:var(--basic-white);height:18px;width:18px;border-radius:50%;position:relative;cursor:pointer}.slides-control .button-active::before{content:"";position:absolute;display:block;top:50%;left:50%;width:6px;height:6px;border:3px solid var(--grey-slide-active);border-radius:50%;transform:translate(-50%,-50%)}.slides-control button+button{margin-left:17px}.slides-control button:focus{outline:1px solid}.services{margin-bottom:25px;padding-right:60px}.services__list{display:grid;grid-template-columns:repeat(3,1fr);gap:100px;justify-content:start;border-bottom:2px solid var(--grey-light);padding-bottom:80px;list-style-type:none}.services__item{max-width:300px}.services__img{width:300px;height:146px;margin-bottom:25px;background-repeat:no-repeat;background-position:center;background:var(--basic-red-bright)url(../img/services/web_sites.png);margin-top:-7px}.services__img-apps{background:var(--green-bright)url(../img/services/apps.png)}.services__img-presentation{background:var(--yellow-bright)url(../img/services/presentation.png)}.about__img>img,.services__img img{width:100%}.services__title{font-size:24px;font-weight:700;line-height:30px;color:var(--basic-black);padding-right:30px;padding-left:4px;text-align:left;margin-bottom:16px;text-transform:uppercase}.services__description{font-weight:400;color:var(--grey-second-Text);margin-bottom:32px;padding-right:30px;text-align:left}.services__btn{background:var(--basic-red-bright);max-width:300px;font-weight:500;padding-left:40px;padding-right:40px}.services__btn:hover{background:var(--red-middle)}.services__btn:active,.services__btn:focus{color:rgba(255,255,255,.3);box-shadow:inset 0 3px 0 rgb(0 0 0/10%)}.services__btn-apps{background:var(--green-bright)}.services__btn-apps:hover{background-color:var(--green-middle)}.services__btn-apps:active,.services__btn-apps:focus{background-color:var(--green-dark)}.services__btn-presentation{background:var(--yellow-bright)}.services__btn-presentation:hover{background:var(--yellow-middle)}.services__btn-presentation:active,.services__btn-presentation:focus{background:var(--yellow-dark)}.about{margin-bottom:60px;padding-top:14px;padding-left:6px}.about__inner{display:grid;grid-template-columns:2fr 1fr;column-gap:80px}.about__item:nth-child(1){max-width:650px;width:650px}.about__item{display:flex;flex-direction:column}.about__title{padding-top:34px;font-size:45px;font-weight:500;color:var(--basic-black);margin-bottom:34px;line-height:45px}.about__description,.about__subtitle{margin-bottom:40px;color:var(--grey-second-Text)}.about__subtitle{font-weight:700;text-transform:uppercase;margin-bottom:23px}.about__list{font-weight:400;color:var(--grey-second-Text);list-style-type:none;padding-left:4px}.about__list li{padding-left:32px;position:relative}.about__list li+li{margin-top:24px}.about__list li::before{content:"";position:absolute;display:block;top:10px;left:-4px;width:25px;height:2px;background:var(--basic-red-bright)}.about__img{height:207px;margin-bottom:38px;background:var(--yellow-middle);background-image:url(../img/about/nerds-illustration.svg);background-repeat:no-repeat;background-position:center;background-size:cover}.about__table{box-sizing:border-box;width:100%;margin:0 auto;border-spacing:0 19px}.about__table caption{margin-bottom:28px;text-align:center;text-transform:uppercase}.about__table-num{padding-top:3px;font-weight:700;font-size:45px;text-align:left}.about__table-num--middle{text-align:center;position:relative;left:-2px}.about__table-num--last{padding-left:10px}.about__table-future{line-height:19px;padding-top:10px}.about__table-future--last{padding-left:1px;position:relative;left:10px;top:2px}.about sup{font-size:26px;font-weight:700;color:var(--basic-black)}.partners{margin-bottom:72px}.partners__items{display:grid;grid-template-columns:repeat(4,1fr);justify-items:center;align-items:center;border-top:2px solid var(--grey-light);border-bottom:2px solid var(--grey-light);list-style-type:none;column-gap:20px;grid-template-rows:184px;grid-auto-rows:184px}.partners__item{position:relative;height:100%;display:flex;align-items:center}.partners__item::after{position:absolute;content:"";display:block;width:2px;height:52px;top:50%;left:-49px;background:#eee;transform:translateY(-50%)}.partners__item:first-child::after{display:none}.partners__item img{opacity:.2;object-fit:contain}.list-radio__label:hover:after,.list-radio__label:hover:before,.partners__item img:hover{opacity:1}.partners__item img:active,.partners__item img:focus{opacity:.1}.map,.map__img iframe{width:100%;height:416px}.map{position:relative;margin-bottom:72px}.map__img{position:absolute;width:100%;left:0;top:0;z-index:1;height:auto}.map__img iframe{border:0}.map-contact{position:absolute;top:50%;width:319px;background-color:var(--basic-white);padding:49px 50px 40px;z-index:10;left:calc(50% - var(--content-width-desktop)/2);transform:translateY(-50%)}.map-contact__title{font-size:18px;font-weight:700;line-height:30px;color:var(--basic-black);margin-bottom:22px}.map-contact p{font:inherit;line-height:18px}.map-contact__phone{font:inherit;display:block;margin-top:22px;margin-bottom:33px;color:var(--basic-black)}.map-contact__btn{width:219px;background-color:var(--basic-red-bright)}.map-contact__btn:hover,.social__item a:hover{background:var(--red-middle)}.map-contact__btn:active,.map-contact__btn:focus{background:var(--red-dark);box-shadow:inset 0 3px 0 var(--box-shadow)}.main-footer,.social__item a{display:flex;justify-content:center}.main-footer{align-content:center}.main-footer .container{align-self:center;align-items:center}.social{display:flex;align-items:flex-start;justify-content:flex-start}.social__list{display:flex;flex-wrap:wrap;list-style-type:none}.social__list li{margin-bottom:25px}.social__list li+li{margin-left:9px}.social__item a{align-items:center;width:80px;height:80px;border-radius:50%;background-color:var(--grey-social)}.social__item svg{fill:var(--basic-white)}.social__item a:active,.social__item a:focus{background:var(--red-dark);box-shadow:var(--social-shadow--active)}.social__actions{margin-left:145px;margin-top:4px;display:flex;flex-direction:column}.social__actions p{color:var(--grey-text-social);line-height:22px}.social__actions p:first-child{font-weight:700;font-size:36px;color:var(--basic-black);margin-bottom:10px;line-height:36px}.page-catalog .container{display:grid;grid-template-columns:260px 2fr;grid-template-rows:auto auto;align-content:start;column-gap:140px}.page-catalog__header{grid-column:1/-1;background-color:var(--grey-light);padding-top:71px;margin-bottom:55px}.page-catalog__header h1{padding-bottom:108px;font-weight:500;font-size:55px;line-height:55px;color:var(--basic-black);width:1160px;margin:0 auto;text-align:center}.range-controls{position:relative;margin-bottom:12px;padding:38px 20px;background-color:#f1f1f1;border-radius:5px;grid-row:2/3;grid-column:1/3}.range-controls .scale{height:2px;background-color:var(--range-label)}.range-controls .bar{height:2px;background-color:var(--range-label-span)}.range-controls .toggle{content:"";position:absolute;top:30px;display:block;width:20px;height:20px;border-radius:50%;background:var(--range-label-bg);box-shadow:0 2px 1px var(--range-shadow);border:8px solid var(--basic-white);box-sizing:border-box;cursor:pointer}.range-controls .toggle-min{left:17px}.range-controls .toggle-max{right:76px}.sort-direction{list-style-type:none}.page-catalog__filter{grid-row:1/6;max-width:260px;grid-column:1/2}.page-catalog__filter label{user-select:none}.filter__item{border:0;box-sizing:border-box;padding:0;margin-bottom:54px}.filter__item:nth-child(2){margin-bottom:44px}.filter__item:last-child legend{margin-bottom:16px}.price input[type=text]{margin-left:10px}.price>p{display:flex;justify-content:space-between}.filter__item legend{font-weight:700;font-size:18px;line-height:30px;color:var(--basic-black);text-transform:uppercase;margin-bottom:48px}.filter__max-price,.filter__min-price{font-weight:inherit;font-size:inherit;line-height:26px;padding-left:3px}.filter input[type=text]{font-weight:inherit;font-size:inherit;line-height:22px;width:80px;padding:8px;background-color:var(--grey-light);border:0;outline:0;border:2px solid var(--input-border--calm);box-sizing:border-box;border-radius:3px;text-align:center}.filter input[type=text]::placeholder{font-size:16px;line-height:18px;font-weight:inherit}.filter input[type=text]:hover{border:2px solid var(--input-border--hover)}.filter input[type=text]:active,.filter input[type=text]:focus{border:2px solid var(--basic-black);color:var(--grey-text-social)}.filter input[type=text]:hover::placeholder{color:var(--grey-text-social)}.layout legend{margin-bottom:19px}.filter__list-radio{display:grid;row-gap:16px;list-style-type:none}.list-radio__item{display:flex;align-items:center}.list-radio__item:last-child{margin-bottom:0}.list-radio__label{font:inherit;line-height:20px;color:var(--grey-second-Text);padding-left:35px;position:relative;cursor:pointer}.list-radio__label:before{display:inline-block}.list-radio__label:after,.list-radio__label:before{content:"";position:absolute;border:4px solid var(--radio-color);box-shadow:0 4px 4px var(--shadow);border-radius:50%;box-sizing:border-box;opacity:.4}.list-radio__label:before{width:24px;height:24px;left:0;top:50%;transform:translateY(-50%)}.list-radio__label:after{width:8px;height:8px;left:8px;top:50%;transform:translatey(-50%);display:none}.list-radio__input:disabled+.list-radio__label,.list-radio__input:disabled+.list-radio__label:after,.list-radio__input:disabled+.list-radio__label:before{display:block;opacity:.3;cursor:default}.list-radio__input:checked+.list-radio__label:after{display:block}.filter__list-checkbox{list-style-type:none;margin-bottom:48px}.list-checkbox__item{margin-bottom:15px;display:flex;align-items:center}.list-checkbox__label{font:inherit;line-height:20px;color:var(--grey-second-Text);padding-left:35px;position:relative;cursor:pointer}.list-checkbox__input+.list-checkbox__label::before{content:"";position:absolute;width:23px;height:23px;top:50%;transform:translateY(-50%);left:0;background:url(../img/filter/checkbox-off.svg);background-repeat:no-repeat;background-position:0 0;opacity:.3}.list-checkbox__input:checked+.list-checkbox__label::before{background:url(../img/filter/checkbox-on.svg)}.list-checkbox__input:disabled+.list-checkbox__label,.list-checkbox__input:disabled+.list-checkbox__label:hover:before{opacity:.3}.list__input:hover+.list-checkbox__label::before{opacity:1}.list__input:focus+label{opacity:1;outline:1px solid;outline-offset:5px}.filter-btn{background:var(--grey-light);padding:17px 98px;font-weight:500;font-size:inherit;color:var(--basic-black);max-width:260px}.filter-btn:hover{background-color:var(--grey-btn-middle)}.filter-btn:active{background:var(--grey-grey);box-shadow:inset 0 3px 0 var(--box-shadow);opacity:.3}.page-catalog__result{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;column-gap:40px;row-gap:30px;margin-bottom:28px}.sort-catalog{grid-column:1/3;display:flex;text-align:right;margin-bottom:22px;justify-content:space-between}.sort-catalog__title{font-weight:700;font-size:18px;line-height:30px;color:var(--basic-black);text-transform:uppercase}.sort-catalog__wrap{display:flex;padding-left:20px}.sort-catalog__type{display:flex;margin-right:47px;text-transform:uppercase;list-style-type:none}.sort-type{display:flex;flex-wrap:wrap;align-items:center}.sort-type+.sort-type{margin-left:25px}.sort-direction{display:flex;flex-wrap:wrap;justify-content:flex-start;max-width:60px}.sort-direction__item,.sort-type__link{margin-left:18px;margin-bottom:10px}.sort-type__link{font:inherit;font-size:14px;line-height:18px;color:var(--basic-black);opacity:.3;margin-left:10px}.sort-type:last-child{display:flex;max-width:120px;justify-content:flex-start}.sort-direction__link svg{fill:var(--basic-black);opacity:.2}.sort-direction__link:hover svg,.sort-type__link:hover{opacity:.6}.sort-direction__link--current,.sort-direction__link--current svg,.sort-type__link--current,.sort-type__link--current svg{opacity:1}.card-product{width:100%;position:relative;background:var(--card-product);border:1px solid var(--box-shadow);box-sizing:border-box;border-radius:5px;border-top:40px solid var(--card-product-border)}.card-product__browse span,.card-product__browse span:after,.card-product__browse span:before{content:"";position:absolute;display:block;width:14px;height:14px;background-color:var(--basic-white);border-radius:50%;z-index:20}.card-product__browse span{top:-25px;left:15px}.card-product__browse span:before{top:0;left:24px}.card-product__browse span:after{top:0;left:48px}.card-product__img,.card-product__img img{width:358px;height:578px;margin:0 auto}.card-product__img img{object-fit:cover}.card-product__descr{position:absolute;bottom:0;left:0;background:var(--grey-light);width:100%;min-height:231px;text-align:center;opacity:0;padding:26px 20px 44px}.card-product__title{text-transform:uppercase;color:var(--basic-black);font-weight:700;font-size:18px;line-height:30px;margin-bottom:12px}.card-product__title a:hover{color:var(--basic-red-bright)}.card-product__title a:active,.card-product__title a:focus{color:var(--black--light)}.card-product__text{font:inherit;line-height:18px;color:var(--grey-text);margin-bottom:32px}.card-product__btn{background:var(--basic-red-bright);padding-left:73px;padding-right:73px}.card-product__btn:hover{background:var(--red-middle)}.card-product__btn:active,.card-product__btn:focus{background:var(--red-dark);box-shadow:inset 0 3px 0 var(--box-shadow)}.card-product:hover .card-product__descr{opacity:1;box-shadow:0 6px 15px var(--shadow);border-top-color:var(--grey-text-social)}.card-product__descr:focus-within{opacity:1}.pagination{list-style-type:none;grid-column:1/3;margin-top:39px}.pagination__item{display:inline-block;margin-right:10px;margin-bottom:38px}.pagination-link{background:var(--grey-light);border-radius:3px;color:var(--basic-black);font:inherit;line-height:18px;padding:17px 20px 15px;box-sizing:border-box;max-width:50px;max-height:50px}.pagination-link:hover{background:var(--grey-btn-middle)}.pagination-link:active,.pagination-link:focus{background:var(--grey-grey);box-shadow:inset 0 3px 0 var(--box-shadow);color:var(--black--light)}.pagination-link--current{padding:14px 17px 12px;background:var(--basic-white);border:3px solid var(--grey-pagination-link);box-sizing:border-box}.pagination-link--current:hover{background:var(--grey-btn-middle)}.pagination-link--current:active,.pagination-link--current:focus{background:var(--grey-grey);box-shadow:inset 0 3px 0 var(--box-shadow);color:var(--black--light);box-sizing:border-box}.pagination__btn--next{background:var(--grey-light);display:inline;padding-left:77px;padding-right:77px}.modal{margin:auto;position:fixed;top:0;bottom:0;left:0;right:0;z-index:10;background:var(--basic-white);box-shadow:0 20px 40px rgba(0,0,0,.6)}.modal__mail{display:none;width:960px;height:590px;padding-top:63px;padding-left:100px;padding-bottom:84px;left:50%;transform:translateX(-50%)}.modal__mail h3{font-size:45px;font-weight:700;color:var(--basic-black);margin-bottom:37px}.mail-form__box{display:flex;align-items:flex-end;justify-content:space-between;width:761px;height:90px;padding-right:0;margin-bottom:34px}.mail-form label{display:block;font-weight:700}.mail-form textarea::placeholder,.mail-form__box input::placeholder{color:var(--grey-text-social);opacity:.5}.mail-form textarea:hover::placeholder,.mail-form__box input:hover::placeholder{color:var(--grey-text-social);opacity:1}.mail-form textarea,.mail-form__box input{font:inherit;font-weight:400;line-height:18px;border:2px solid var(--input-border--calm);box-sizing:border-box;border-radius:3px;outline:0}.mail-form__box input{margin-top:15px;width:360px;height:50px;padding-left:15px;padding-right:14px}.mail-form textarea:hover,.mail-form__box input:hover{border:2px solid var(--input-border--hover);opacity:1}.mail-form textarea:focus,.mail-form__box input:focus{border:2px solid var(--basic-black);opacity:1}.mail-form textarea{width:760px;height:118px;margin-top:15px;margin-bottom:47px;resize:none;padding:15px}.mail-form .button{width:259px;height:50px;background:var(--basic-red-bright);color:var(--basic-white)}.mail-form .button:hover{background:var(--red-middle);color:var(--basic-white)}.mail-form .button:active{background-color:var(--red-dark);color:#db494c}.btn-close{position:absolute;display:block;top:78px;right:78px;font-size:0;cursor:pointer;background:var(--basic-white);width:21px;height:21px}.btn-close::after,.btn-close::before{position:relative;content:"";display:block;background:var(--contact-btn-close);transform:rotate(45deg)}.btn-close::after{width:25px;height:2px;top:-15px;left:-2px}.btn-close::before{width:2px;height:25px;top:-2px;left:9px}.btn-close:hover::after,.btn-close:hover::before{background-color:var(--basic-red-bright)}.btn-close:active::after,.btn-close:active::before{background-color:var(--basic-red-bright);opacity:.3}.search{display:flex;justify-content:center;width:600px;height:100px;margin:0 auto;text-align:center}.search p{font-size:inherit;font-weight:500;line-height:24px;margin-bottom:10px}.search label{box-sizing:border-box;width:450px;height:100px;display:block}.search input{display:block;width:100%;padding:15px 25px} +@keyframes slideToRight{0%{transform:translateY(-200%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes shakeErrorForm{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-15px)}20%,40%,60%,80%{transform:translateX(15px)}}@keyframes bounce{0%{transform:translateY(-2000px)}70%{transform:translateY(30px)}90%{transform:translateY(-10px)}to{transform:translateY(0)}}@keyframes bounce-out{0%{transform:translateY(0)}70%{transform:translateY(-10px)}90%{transform:translateY(30px)}to{transform:translateY(-2000px)}}:root{--content-padding-desktop:0px;--content-width-desktop:calc(1160px - var(--content-padding-desktop) * 2);--basic-black:#000000;--black--light:rgba(0, 0, 0, 0.3);--basic-white:#fff;--basic-red-bright:#fb565a;--red-middle:#e74246;--red-dark:#d7373b;--green-bright:#00ca74;--green-middle:#00bc6c;--green-dark:#00aa62;--yellow-bright:#efc849;--yellow-middle:#eab534;--yellow-dark:#e5a722;--grey-light:#eeeeee;--grey-social:#e1e1e1;--grey-grey:#d5d5d5;--grey-btn-middle:#dfdfdf;--grey-btn-dark:#0f0404;--grey-second-Text:#283136;--grey-text:#666666;--grey-text-social:#444444;--grey-pagination-link:#dbdbdb;--radio-color:#4d4d4d;--btn-sort-bottom:#231f20;--btn-sort-top:#231f20;--item-top-active:#161212;--pagination-btn-next:#bebebe;--input-border--calm:#d7dcde;--range-shadow:rgba(0, 0, 0, 0.15);--range-label:#d7dcdf;--range-label-bg:#ababab;--range-label-span:#00ca74;--grey-slide-active:#c1c1c1;--social-shadow--active:inset 0px 3px 0px rgba(0, 1, 1, 0.1);--modal-shadow:0px 20px 40px rgba(0, 0, 0, 0.4);--card-product:#f2f2f2;--card-product-border:rgba(68, 68, 68, 0.12);--input-border--hover:#b4b9bb;--box-shadow:rgba(0, 1, 1, 0.1);--contact-btn-close:rgba(251, 86, 90, 0.3)}.page-body{min-height:100%;display:grid;align-content:start;grid-template-rows:min-content 1fr max-content;position:relative;font-family:"Roboto","Arial",sans-serif;font-size:16px;font-weight:400;line-height:24px;color:var(--basic-black);background-color:var(--basic-white)}.page{height:100%}*{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}a{text-decoration:none}.visually-hidden{position:absolute;white-space:nowrap;width:1px;height:1px;overflow:hidden;border:0;padding:0;clip:rect(0 0 0 0);clip-path:inset(50%);margin:-1px}.title,a{color:var(--basic-black)}.title{font-weight:500;font-size:55px}.btn,button{border:0}.btn{display:inline-block;min-height:50px;line-height:18px;border-radius:3px;font-weight:500;text-transform:uppercase;cursor:pointer;text-align:center;color:var(--basic-white);padding-top:16px;padding-bottom:16px}.container{width:1160px;margin:0 auto}.page-main{display:grid;grid-template-rows:repeat(5,min-content)}.main-header{background-color:var(--grey-light);padding-top:48px}.main-navigation{display:grid;grid-template-columns:max-content 1fr min-content;column-gap:30px;justify-items:end}.main-header-logo{align-self:center}.main-header-logo:hover{opacity:.7}.main-header-logo:active,.main-header-logo:focus,.social__item a:active svg,.social__item a:focus svg{opacity:.3}.basket{text-transform:uppercase;font-weight:500;color:inherit;display:block}.site-navigation{display:flex;justify-content:flex-start;list-style-type:none;width:670px;flex-wrap:wrap;align-items:center;margin-top:10px;padding-left:50px}.site-navigation li{margin-right:45px}.site-navigation li:last-child{margin-right:0}.basket{border:0;cursor:pointer;position:relative;margin-top:10px;width:125px;padding-left:53px;align-items:center;margin-left:20px}.basket:hover,.site-navigation a:hover{color:var(--basic-red-bright)}.basket:active,.basket:focus,.site-navigation a:active,.site-navigation a:focus{color:inherit;opacity:.3;border:0}.site-navigation .link-current::before,.user-navigation .link-current::before{content:"";position:absolute;background-color:var(--basic-red-bright);width:100%;height:2px;bottom:-13px}.user-navigation .link-current::before{top:40px;left:10px}.user-navigation{list-style:none;display:flex;align-self:center}.site-navigation a,.user-navigation a{display:block;position:relative;line-height:30px;text-transform:uppercase;font-weight:500;color:inherit}.basket::after{content:"";position:absolute;display:block;top:7px;left:13px;background:url(../img/cart-icon.svg) 0 0 no-repeat;width:22px;height:22px}.slider{background-color:var(--grey-light);position:relative;margin-bottom:80px}.slider-wrap{display:grid;grid-template-columns:1fr 2fr;display:flex;position:relative}.slides{display:none;margin:0 auto}.slides-active{display:grid;grid-template-columns:max-content 1fr;animation:slideToRight 1s ease}.slides__inner{max-width:398px;padding-top:71px}.slides__title{width:520px;font-style:normal;font-weight:500;font-size:55px;line-height:55px;margin-bottom:27px}.slides__text{max-width:416px;font-weight:400;margin-bottom:38px;color:var(--grey-second-Text)}.slides__btn{background-color:var(--basic-red-bright);padding-left:54px;padding-right:54px}.slides__btn:hover{background-color:var(--red-middle)}.slides-btn:focus,.slides__btn:active{background-color:var(--red-dark);color:rgba(255,255,255,.3)}.slides__img{max-width:760px;width:760px;height:431px;position:relative;right:-2px;bottom:7px;background-position:right top;background-repeat:no-repeat}.slides-control{display:flex;justify-content:space-between;height:18px;position:absolute;bottom:103px;left:50%;transform:translateX(-50%);z-index:2;list-style-type:none;min-width:90px}.slides-control button{background-color:var(--basic-white);height:18px;width:18px;border-radius:50%;position:relative;cursor:pointer}.slides-control .button-active::before{content:"";position:absolute;display:block;top:50%;left:50%;width:6px;height:6px;border:3px solid var(--grey-slide-active);border-radius:50%;transform:translate(-50%,-50%)}.slides-control button+button{margin-left:17px}.slides-control button:focus{outline:1px solid}.services{margin-bottom:25px;padding-right:60px}.services__list{display:grid;grid-template-columns:repeat(3,1fr);gap:100px;justify-content:start;border-bottom:2px solid var(--grey-light);padding-bottom:80px;list-style-type:none}.services__item{max-width:300px}.services__img{width:300px;height:146px;margin-bottom:25px;background-repeat:no-repeat;background-position:center;background:var(--basic-red-bright) url(../img/services/web_sites.png);margin-top:-7px}.services__img-apps{background:var(--green-bright) url(../img/services/apps.png)}.services__img-presentation{background:var(--yellow-bright) url(../img/services/presentation.png)}.about__img>img,.services__img img{width:100%}.services__title{font-size:24px;font-weight:700;line-height:30px;color:var(--basic-black);padding-right:30px;padding-left:4px;text-align:left;margin-bottom:16px;text-transform:uppercase}.services__description{font-weight:400;color:var(--grey-second-Text);margin-bottom:32px;padding-right:30px;text-align:left}.services__btn{background:var(--basic-red-bright);max-width:300px;font-weight:500;padding-left:40px;padding-right:40px}.services__btn:hover{background:var(--red-middle)}.services__btn:active,.services__btn:focus{color:rgba(255,255,255,.3);box-shadow:inset 0 3px 0 rgb(0 0 0/10%)}.services__btn-apps{background:var(--green-bright)}.services__btn-apps:hover{background-color:var(--green-middle)}.services__btn-apps:active,.services__btn-apps:focus{background-color:var(--green-dark)}.services__btn-presentation{background:var(--yellow-bright)}.services__btn-presentation:hover{background:var(--yellow-middle)}.services__btn-presentation:active,.services__btn-presentation:focus{background:var(--yellow-dark)}.about{margin-bottom:60px;padding-top:14px;padding-left:6px}.about__inner{display:grid;grid-template-columns:2fr 1fr;column-gap:80px}.about__item:nth-child(1){max-width:650px;width:650px}.about__item{display:flex;flex-direction:column}.about__title{padding-top:34px;font-size:45px;font-weight:500;color:var(--basic-black);margin-bottom:34px;line-height:45px}.about__description,.about__subtitle{margin-bottom:40px;color:var(--grey-second-Text)}.about__subtitle{font-weight:700;text-transform:uppercase;margin-bottom:23px}.about__list{font-weight:400;color:var(--grey-second-Text);list-style-type:none;padding-left:4px}.about__list li{padding-left:32px;position:relative}.about__list li+li{margin-top:24px}.about__list li::before{content:"";position:absolute;display:block;top:10px;left:-4px;width:25px;height:2px;background:var(--basic-red-bright)}.about__img{height:207px;margin-bottom:38px;background:var(--yellow-middle);background-image:url(../img/about/nerds-illustration.svg);background-repeat:no-repeat;background-position:center;background-size:cover}.about__table{box-sizing:border-box;width:100%;margin:0 auto;border-spacing:0 19px}.about__table caption{margin-bottom:28px;text-align:center;text-transform:uppercase}.about__table-num{padding-top:3px;font-weight:700;font-size:45px;text-align:left}.about__table-num--middle{text-align:center;position:relative;left:-2px}.about__table-num--last{padding-left:10px}.about__table-future{line-height:19px;padding-top:10px}.about__table-future--last{padding-left:1px;position:relative;left:10px;top:2px}.about sup{font-size:26px;font-weight:700;color:var(--basic-black)}.partners{margin-bottom:72px}.partners__items{display:grid;grid-template-columns:repeat(4,1fr);justify-items:center;align-items:center;border-top:2px solid var(--grey-light);border-bottom:2px solid var(--grey-light);list-style-type:none;column-gap:20px;grid-template-rows:184px;grid-auto-rows:184px}.partners__item{position:relative;height:100%;display:flex;align-items:center}.partners__item::after{position:absolute;content:"";display:block;width:2px;height:52px;top:50%;left:-49px;background:#eee;transform:translateY(-50%)}.partners__item:first-child::after{display:none}.partners__item img{opacity:.2;object-fit:contain}.list-radio__label:hover:after,.list-radio__label:hover:before,.partners__item img:hover{opacity:1}.partners__item img:active,.partners__item img:focus{opacity:.1}.map,.map__img iframe{width:100%;height:416px}.map{position:relative;margin-bottom:72px}.map__img{position:absolute;width:100%;left:0;top:0;z-index:1;height:auto}.map__img iframe{border:0}.map-contact{position:absolute;top:50%;width:319px;background-color:var(--basic-white);padding:49px 50px 40px;z-index:10;left:calc(50% - var(--content-width-desktop)/2);transform:translateY(-50%)}.map-contact__title{font-size:18px;font-weight:700;line-height:30px;color:var(--basic-black);margin-bottom:22px}.map-contact p{font:inherit;line-height:18px}.map-contact__phone{font:inherit;display:block;margin-top:22px;margin-bottom:33px;color:var(--basic-black)}.map-contact__btn{width:219px;background-color:var(--basic-red-bright)}.map-contact__btn:hover,.social__item a:hover{background:var(--red-middle)}.map-contact__btn:active,.map-contact__btn:focus{background:var(--red-dark);box-shadow:inset 0 3px 0 var(--box-shadow)}.main-footer,.social__item a{display:flex;justify-content:center}.main-footer{align-content:center}.main-footer .container{align-self:center;align-items:center}.social{display:flex;align-items:flex-start;justify-content:flex-start}.social__list{display:flex;flex-wrap:wrap;list-style-type:none}.social__list li{margin-bottom:25px}.social__list li+li{margin-left:9px}.social__item a{align-items:center;width:80px;height:80px;border-radius:50%;background-color:var(--grey-social)}.social__item svg{fill:var(--basic-white)}.social__item a:active,.social__item a:focus{background:var(--red-dark);box-shadow:var(--social-shadow--active)}.social__actions{margin-left:145px;margin-top:4px;display:flex;flex-direction:column}.social__actions p{color:var(--grey-text-social);line-height:22px}.social__actions p:first-child{font-weight:700;font-size:36px;color:var(--basic-black);margin-bottom:10px;line-height:36px}.page-catalog .container{display:grid;grid-template-columns:260px 2fr;grid-template-rows:auto auto;align-content:start;column-gap:140px}.page-catalog__header{grid-column:1/-1;background-color:var(--grey-light);padding-top:71px;margin-bottom:55px}.page-catalog__header h1{padding-bottom:108px;font-weight:500;font-size:55px;line-height:55px;color:var(--basic-black);width:1160px;margin:0 auto;text-align:center}.range-controls{position:relative;margin-bottom:12px;padding:38px 20px;background-color:#f1f1f1;border-radius:5px;grid-row:2/3;grid-column:1/3}.range-controls .scale{height:2px;background-color:var(--range-label)}.range-controls .bar{height:2px;background-color:var(--range-label-span)}.range-controls .toggle{content:"";position:absolute;top:30px;display:block;width:20px;height:20px;border-radius:50%;background:var(--range-label-bg);box-shadow:0 2px 1px var(--range-shadow);border:8px solid var(--basic-white);box-sizing:border-box;cursor:pointer}.range-controls .toggle-min{left:17px}.range-controls .toggle-max{right:76px}.sort-direction{list-style-type:none}.page-catalog__filter{grid-row:1/6;max-width:260px;grid-column:1/2}.page-catalog__filter label{user-select:none}.filter__item{border:0;box-sizing:border-box;padding:0;margin-bottom:54px}.filter__item:nth-child(2){margin-bottom:44px}.filter__item:last-child legend{margin-bottom:16px}.price input[type=text]{margin-left:10px}.price>p{display:flex;justify-content:space-between}.filter__item legend{font-weight:700;font-size:18px;line-height:30px;color:var(--basic-black);text-transform:uppercase;margin-bottom:48px}.filter__max-price,.filter__min-price{font-weight:inherit;font-size:inherit;line-height:26px;padding-left:3px}.filter input[type=text]{font-weight:inherit;font-size:inherit;line-height:22px;width:80px;padding:8px;background-color:var(--grey-light);border:0;outline:0;border:2px solid var(--input-border--calm);box-sizing:border-box;border-radius:3px;text-align:center}.filter input[type=text]::placeholder{font-size:16px;line-height:18px;font-weight:inherit}.filter input[type=text]:hover{border:2px solid var(--input-border--hover)}.filter input[type=text]:active,.filter input[type=text]:focus{border:2px solid var(--basic-black);color:var(--grey-text-social)}.filter input[type=text]:hover::placeholder{color:var(--grey-text-social)}.layout legend{margin-bottom:19px}.filter__list-radio{display:grid;row-gap:16px;list-style-type:none}.list-radio__item{display:flex;align-items:center}.list-radio__item:last-child{margin-bottom:0}.list-radio__label{font:inherit;line-height:20px;color:var(--grey-second-Text);padding-left:35px;position:relative;cursor:pointer}.list-radio__label:before{display:inline-block}.list-radio__label:after,.list-radio__label:before{content:"";position:absolute;border:4px solid var(--radio-color);box-shadow:0 4px 4px var(--shadow);border-radius:50%;box-sizing:border-box;opacity:.4}.list-radio__label:before{width:24px;height:24px;left:0;top:50%;transform:translateY(-50%)}.list-radio__label:after{width:8px;height:8px;left:8px;top:50%;transform:translatey(-50%);display:none}.list-radio__input:disabled+.list-radio__label,.list-radio__input:disabled+.list-radio__label:after,.list-radio__input:disabled+.list-radio__label:before{display:block;opacity:.3;cursor:default}.list-radio__input:checked+.list-radio__label:after{display:block}.filter__list-checkbox{list-style-type:none;margin-bottom:48px}.list-checkbox__item{margin-bottom:15px;display:flex;align-items:center}.list-checkbox__label{font:inherit;line-height:20px;color:var(--grey-second-Text);padding-left:35px;position:relative;cursor:pointer}.list-checkbox__input+.list-checkbox__label::before{content:"";position:absolute;width:23px;height:23px;top:50%;transform:translateY(-50%);left:0;background:url(../img/filter/checkbox-off.svg);background-repeat:no-repeat;background-position:0 0;opacity:.3}.list-checkbox__input:checked+.list-checkbox__label::before{background:url(../img/filter/checkbox-on.svg)}.list-checkbox__input:disabled+.list-checkbox__label,.list-checkbox__input:disabled+.list-checkbox__label:hover:before{opacity:.3}.list__input:hover+.list-checkbox__label::before{opacity:1}.list__input:focus+label{opacity:1;outline:1px solid;outline-offset:5px}.filter-btn{background:var(--grey-light);padding:17px 98px;font-weight:500;font-size:inherit;color:var(--basic-black);max-width:260px}.filter-btn:hover{background-color:var(--grey-btn-middle)}.filter-btn:active{background:var(--grey-grey);box-shadow:inset 0 3px 0 var(--box-shadow);opacity:.3}.page-catalog__result{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;column-gap:40px;row-gap:30px;margin-bottom:28px}.sort-catalog{grid-column:1/3;display:flex;text-align:right;margin-bottom:22px;justify-content:space-between}.sort-catalog__title{font-weight:700;font-size:18px;line-height:30px;color:var(--basic-black);text-transform:uppercase}.sort-catalog__wrap{display:flex;padding-left:20px}.sort-catalog__type{display:flex;margin-right:47px;text-transform:uppercase;list-style-type:none}.sort-type{display:flex;flex-wrap:wrap;align-items:center}.sort-type+.sort-type{margin-left:25px}.sort-direction{display:flex;flex-wrap:wrap;justify-content:flex-start;max-width:60px}.sort-direction__item,.sort-type__link{margin-left:18px;margin-bottom:10px}.sort-type__link{font:inherit;font-size:14px;line-height:18px;color:var(--basic-black);opacity:.3;margin-left:10px}.sort-type:last-child{display:flex;max-width:120px;justify-content:flex-start}.sort-direction__link svg{fill:var(--basic-black);opacity:.2}.sort-direction__link:hover svg,.sort-type__link:hover{opacity:.6}.sort-direction__link--current,.sort-direction__link--current svg,.sort-type__link--current,.sort-type__link--current svg{opacity:1}.card-product{width:100%;position:relative;background:var(--card-product);border:1px solid var(--box-shadow);box-sizing:border-box;border-radius:5px;border-top:40px solid var(--card-product-border)}.card-product__browse span,.card-product__browse span:after,.card-product__browse span:before{content:"";position:absolute;display:block;width:14px;height:14px;background-color:var(--basic-white);border-radius:50%;z-index:20}.card-product__browse span{top:-25px;left:15px}.card-product__browse span:before{top:0;left:24px}.card-product__browse span:after{top:0;left:48px}.card-product__img,.card-product__img img{width:358px;height:578px;margin:0 auto}.card-product__img img{object-fit:cover}.card-product__descr{position:absolute;bottom:0;left:0;background:var(--grey-light);width:100%;min-height:231px;text-align:center;opacity:0;padding:26px 20px 44px}.card-product__title{text-transform:uppercase;color:var(--basic-black);font-weight:700;font-size:18px;line-height:30px;margin-bottom:12px}.card-product__title a:hover{color:var(--basic-red-bright)}.card-product__title a:active,.card-product__title a:focus{color:var(--black--light)}.card-product__text{font:inherit;line-height:18px;color:var(--grey-text);margin-bottom:32px}.card-product__btn{background:var(--basic-red-bright);padding-left:73px;padding-right:73px}.card-product__btn:hover{background:var(--red-middle)}.card-product__btn:active,.card-product__btn:focus{background:var(--red-dark);box-shadow:inset 0 3px 0 var(--box-shadow)}.card-product:hover{box-shadow:0 6px 15px var(--shadow);border-top-color:var(--grey-text-social)}.card-product:hover .card-product__descr{visibility:visible;opacity:1}.pagination{list-style-type:none;grid-column:1/3;margin-top:39px}.pagination__item{display:inline-block;margin-right:10px;margin-bottom:38px}.pagination-link{background:var(--grey-light);border-radius:3px;color:var(--basic-black);font:inherit;line-height:18px;padding:17px 20px 15px;box-sizing:border-box;max-width:50px;max-height:50px}.pagination-link:hover{background:var(--grey-btn-middle)}.pagination-link:active,.pagination-link:focus{background:var(--grey-grey);box-shadow:inset 0 3px 0 var(--box-shadow);color:var(--black--light)}.pagination-link--current{padding:14px 17px 12px;background:var(--basic-white);border:3px solid var(--grey-pagination-link);box-sizing:border-box}.pagination-link--current:hover{background:var(--grey-btn-middle)}.pagination-link--current:active,.pagination-link--current:focus{background:var(--grey-grey);box-shadow:inset 0 3px 0 var(--box-shadow);color:var(--black--light);box-sizing:border-box}.pagination__btn--next{background:var(--grey-light);display:inline;padding-left:77px;padding-right:77px}.overlay{position:relative;opacity:0;top:0;bottom:0;left:0;right:0;z-index:10;background:rgba(0,0,0,.85)}.overlay_show{opacity:1;position:fixed}.modal{display:none;margin:auto;position:fixed;top:0;bottom:0;left:0;right:0;z-index:11;background:var(--basic-white);box-shadow:0 20px 40px rgba(0,0,0,.6);transition:.4s linear}.modal_show{display:block;animation:bounce .6s}.modal-error{animation:shakeErrorForm .6s}.modal__mail{width:960px;height:590px;padding-top:63px;padding-left:100px;padding-bottom:84px}.modal__mail h3{font-size:45px;font-weight:700;color:var(--basic-black);margin-bottom:37px}.mail-form__box{display:flex;align-items:flex-end;justify-content:space-between;width:761px;height:90px;padding-right:0;margin-bottom:34px}.mail-form label{display:block;font-weight:700}.mail-form textarea::placeholder,.mail-form__box input::placeholder{color:var(--grey-text-social);opacity:.5}.mail-form textarea:hover::placeholder,.mail-form__box input:hover::placeholder{color:var(--grey-text-social);opacity:1}.mail-form textarea,.mail-form__box input{font:inherit;font-weight:400;line-height:18px;border:2px solid var(--input-border--calm);box-sizing:border-box;border-radius:3px;outline:0}.mail-form__box input{margin-top:15px;width:360px;height:50px;padding-left:15px;padding-right:14px}.mail-form textarea:hover,.mail-form__box input:hover{border:2px solid var(--input-border--hover);opacity:1}.mail-form textarea:focus,.mail-form__box input:focus{border:2px solid var(--basic-black);opacity:1}.mail-form textarea{width:760px;height:118px;margin-top:15px;margin-bottom:47px;resize:none;padding:15px}.mail-form .button{width:259px;height:50px;background:var(--basic-red-bright);color:var(--basic-white)}.mail-form .button:hover{background:var(--red-middle);color:var(--basic-white)}.mail-form .button:active{background-color:var(--red-dark);color:#db494c}.btn-close{position:absolute;display:block;top:78px;right:78px;font-size:0;cursor:pointer;background:var(--basic-white);width:21px;height:21px}.btn-close::after,.btn-close::before{position:relative;content:"";display:block;background:var(--contact-btn-close);transform:rotate(45deg)}.btn-close::after{width:25px;height:2px;top:-15px;left:-2px}.btn-close::before{width:2px;height:25px;top:-2px;left:9px}.btn-close:hover::after,.btn-close:hover::before{background-color:var(--basic-red-bright)}.btn-close:active::after,.btn-close:active::before{background-color:var(--basic-red-bright);opacity:.3}.search{display:flex;justify-content:center;width:600px;height:100px;margin:0 auto;text-align:center}.search p{font-size:inherit;font-weight:500;line-height:24px;margin-bottom:10px}.search label{box-sizing:border-box;width:450px;height:100px;display:block}.search input{display:block;width:100%;padding:15px 25px} diff --git a/header.php b/header.php deleted file mode 100644 index e1e29d1..0000000 --- a/header.php +++ /dev/null @@ -1,141 +0,0 @@ - - - - - - - <?php - if (is_home () ) { bloginfo('name').'com.ru'; } - elseif ( is_category() ) { single_cat_title(); echo 'Mamzel.com.ru'; } - elseif (is_single() ) { single_post_title(); } - elseif (is_page() ) { echo 'Mamzel.com.ru '; single_post_title(); } - else { wp_title('',true); } - ?> - - - - - - - - - - - - - - - - - - -> - - -
-
- -
- 'header-pages', 'menu_class' => 'topnav', 'menu_id' => 'page-nav', 'echo' => false, 'fallback_cb' => '' ) );}; - if ($pagesNav == '') { ?> -
    - -
- - - - -
    -
    • -
    • -
    • -
- -
- -
- '; ?> - -
-
- - -
- - - -
- -
- 'header-cats', 'menu_class' => 'nav', 'menu_id' => 'cat-nav', 'echo' => false, 'fallback_cb' => '' ) );}; - if ($catNav == '') { ?> - - -
- -
\ No newline at end of file diff --git a/index.html b/index.html index 2169269..c02747b 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ - + @@ -277,8 +277,6 @@

Напишите нам

- -

@@ -292,8 +290,8 @@

Напишите нам

закрыть - - + + diff --git a/js/modal.js b/js/modal.js index 9d545b4..c219032 100644 --- a/js/modal.js +++ b/js/modal.js @@ -38,14 +38,12 @@ clickCloseModal.addEventListener("click", function () { modal.offsetWidth = modal.offsetWidth; let issClass = modal.classList.contains("modal_show"); if (!issClass) { - console.log("no isset class"); localStorage.removeItem("name"); } }); form.addEventListener("submit", function (evt) { if (!userName.value || !userEmail.value || !userText.value) { - console.log("есть не заполненные поля"); modal.classList.remove("modal-error"); modal.offsetWidth = modal.offsetWidth; modal.classList.add("modal-error"); diff --git a/js/modal.min.js b/js/modal.min.js new file mode 100644 index 0000000..c4473bf --- /dev/null +++ b/js/modal.min.js @@ -0,0 +1 @@ +const modal=document.querySelector(".modal"),clickModalShow=document.querySelector(".map-contact__btn"),clickCloseModal=modal.querySelector(".btn-close"),form=modal.querySelector("form"),userName=modal.querySelector("[name=name]"),userEmail=modal.querySelector("[name=email]"),userText=modal.querySelector("[name=text]"),overlay=document.querySelector(".overlay");let isStorageSupport=!0,storage="";try{storage=localStorage.getItem("name")}catch(e){isStorageSupport=!1}clickModalShow.addEventListener("click",function(e){e.preventDefault(),modal.classList.add("modal_show"),overlay.classList.add("overlay_show"),storage?(userName.value=storage,userEmail.focus()):userName.focus()}),clickCloseModal.addEventListener("click",function(){modal.classList.remove("modal_show","modal-error"),overlay.classList.remove("overlay_show"),modal.offsetWidth=modal.offsetWidth,modal.classList.contains("modal_show")||localStorage.removeItem("name")}),form.addEventListener("submit",function(e){userName.value&&userEmail.value&&userText.value?isStorageSupport&&localStorage.setItem("name",userName.value):(modal.classList.remove("modal-error"),modal.offsetWidth=modal.offsetWidth,modal.classList.add("modal-error"),e.preventDefault())}),window.addEventListener("keydown",function(e){27===e.keyCode&&modal.classList.contains("modal_show")&&(e.preventDefault(),modal.classList.remove("modal_show","modal-error"),overlay.classList.remove("overlay_show"))}),window.addEventListener("click",function(){modal.classList.remove("modal-show")}); diff --git a/js/slide.js b/js/slide.js index 41cc705..cae4a01 100644 --- a/js/slide.js +++ b/js/slide.js @@ -14,5 +14,3 @@ let clickHandler = function (button, slide) { for (let i = 0; i < slidesControl.length; i++) { clickHandler(slidesControl[i], slides[i]); } - - diff --git a/js/slide.min.js b/js/slide.min.js new file mode 100644 index 0000000..f8ec8d7 --- /dev/null +++ b/js/slide.min.js @@ -0,0 +1 @@ +const slides=document.querySelectorAll(".slides"),slidesControl=document.querySelectorAll(".button-slide");let clickHandler=function(e,s){e.addEventListener("click",function(){for(let e=0;e