From ce07066f6ca69b8a65fe3b34079b51d286e975f2 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Sun, 1 Sep 2019 01:57:33 +0300 Subject: [PATCH] =?UTF-8?q?=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD?= =?UTF-8?q?=D0=B8=D0=B5=20=D0=BF=D0=BE=20=D0=B2=D0=B5=D1=80=D1=81=D1=82?= =?UTF-8?q?=D0=BA=D0=B5=20=D0=B8=20JS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 70 +++++++++++++++++++++-- src/img/main-questions/tooltip-close.png | Bin 0 -> 265 bytes src/js/index.js | 16 +++++- src/styles/style.css | 70 +++++++++++++++++------ 4 files changed, 133 insertions(+), 23 deletions(-) create mode 100644 src/img/main-questions/tooltip-close.png diff --git a/index.html b/index.html index 84555fa..c5f2701 100644 --- a/index.html +++ b/index.html @@ -372,28 +372,88 @@

- 1.Как заказать деталь правильно? + 1.Как заказать деталь правильно?

+
+ + # + +

+ 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua.

+ + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. +

+

- 2.Что делать, если запчасть не понадобилась? + 2.Что делать, если запчасть не понадобилась?

+
+ + # + +

+ 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua.

+ + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. +

+

- 3.Можете ли Вы установить деталь? + 3.Можете ли Вы установить деталь?

+
+ + # + +

+ 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua.

+ + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. +

+

- 4.В чем преимущества оригинальных деталей? + 4.В чем преимущества оригинальных деталей?

+
+ + # + +

+ 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua.

+ + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. +

+

- 5.В чем преимущества оригинальных деталей? + 5.В чем преимущества оригинальных деталей?

+
+ + # + +

+ 5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua.

+ + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. +

+

diff --git a/src/img/main-questions/tooltip-close.png b/src/img/main-questions/tooltip-close.png new file mode 100644 index 0000000000000000000000000000000000000000..e343b12ab331b13cc500ec10e8304513147ff6fc GIT binary patch literal 265 zcmV+k0rvihP){O;2c94N5IxJ~!uQ^DPNrP09N+=B=4%%l*vlf1D{Rd{w{eDHSaQW;=?-HY;RDYR z+{7i?=p=BM1AO8HUsy&LhiD}>`IO};zHyE}9AiJ7DP&IT9X}}G7nwzH6*suXdT1ZN z=Vsy62tJ~T`*={t1(p(c1%13=C)x)+VGT9(Lg@fk@QMZ|GacUI!3fiTiP$NrKmGnC P00000NkvXXu0mjfsV{1} literal 0 HcmV?d00001 diff --git a/src/js/index.js b/src/js/index.js index e531715..4931313 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -23,4 +23,18 @@ $('.owl-carousel').owlCarousel({ nav: true } } -}) \ No newline at end of file +}); +// Questions Tooltip +const links = document.querySelectorAll('.wrap-questions__item a'); +links.forEach((link) => { + link.addEventListener('click', () => { + const contentTollTip = link.parentNode.parentNode.querySelector('.question-content'); + const contentTollTipClose = link.parentNode.parentNode.querySelector('.tooltip-close'); + contentTollTipClose.addEventListener('click', () => { + contentTollTip.style.display = 'none'; + contentTollTip.classList.remove('fade'); + }); + contentTollTip.classList.add('fade'); + contentTollTip.style.display = 'block'; + }); +}); \ No newline at end of file diff --git a/src/styles/style.css b/src/styles/style.css index b104bd3..d67867d 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -78,7 +78,35 @@ input { font-family: 'ProximaNovaRegular'; text-transform: uppercase; } +/* Fade Animation */ +.fade { + -webkit-animation-name: fade; + animation-name: fade; + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-animation-name: fade; + -webkit-animation-duration: 0.5s; +} +@-webkit-keyframes fade { + from { + opacity: 0.1; + } + + to { + opacity: 1; + } +} + +@keyframes fade { + from { + opacity: 0.1; + } + + to { + opacity: 1; + } +} .container { max-width: 1170px; } @@ -579,7 +607,30 @@ header { height: 20px; position: absolute; } - +.question-content { + background-color: #fff; + color: #000; + font-family: 'ProximaNovaRegular'; + padding: 15px 15px 20px 15px; + box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75); + width: 330px; + font-size: 14px; + position: absolute; + margin-left: 30px; + margin-top: 35px; + display: none; +} +.question-content::before { + border: 20px solid transparent; + border-bottom: 20px solid #fff; + content: ''; + position: absolute; + top: -40px; +} +.tooltip-close { + float: right; + cursor: pointer; +} /* Section Working */ #working { padding-top: 100px; @@ -780,19 +831,4 @@ footer { .footer-wrap__info p span { font-family: 'ProximaNovaBlack'; font-size: 21px; -} -/* #info, -#price, -#advantages, -#detail, -#guarantees, -#discount, -#working, -#stock, -#team, -#advice, -#come, -#map, -footer { - display: none; -} */ \ No newline at end of file +} \ No newline at end of file