diff --git a/assets/css/index.css b/assets/css/index.css index 54d3f33..f7d038a 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -1308,6 +1308,7 @@ h3 { } } .reviews__slide-video { + position: relative; height: 205px; margin: 0 0 15px; overflow: hidden; @@ -1329,6 +1330,48 @@ h3 { width: 100%; height: 100%; } +.reviews__slide-video::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 10; + background-color: rgba(0, 0, 0, 0.1); + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + cursor: pointer; +} +.reviews__slide-video::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + z-index: 11; + display: block; + width: 88px; + aspect-ratio: 1/1; + background: url(../img/icons/play.svg) center no-repeat; + background-size: cover; + transform: translateX(-50%) translateY(-50%); + transition: transform ease-in-out 0.1s; + cursor: pointer; +} +@media (max-width: 768px) { + .reviews__slide-video::after { + width: 64px; + } +} +.reviews__slide-video.active::before, .reviews__slide-video.active::after { + display: none; +} +.reviews__slide-video:hover::after { + transform: translateX(-50%) translateY(-50%) scale(1.06); +} +.reviews__slide-video:active::after { + transform: translateX(-50%) translateY(-50%) scale(0.98); +} .reviews__slide-name { margin: 0 0 8px; font-weight: 600; @@ -1721,6 +1764,7 @@ h3 { } } .why-program__video-content { + position: relative; height: 573px; margin: 0 -48px 30px; background-color: #878787; @@ -1738,6 +1782,48 @@ h3 { height: 100%; width: 100%; } +.why-program__video-content::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 10; + background-color: rgba(0, 0, 0, 0.1); + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + cursor: pointer; +} +.why-program__video-content::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + z-index: 11; + display: block; + width: 88px; + aspect-ratio: 1/1; + background: url(../img/icons/play.svg) center no-repeat; + background-size: cover; + transform: translateX(-50%) translateY(-50%); + transition: transform ease-in-out 0.1s; + cursor: pointer; +} +@media (max-width: 768px) { + .why-program__video-content::after { + width: 64px; + } +} +.why-program__video-content.active::before, .why-program__video-content.active::after { + display: none; +} +.why-program__video-content:hover::after { + transform: translateX(-50%) translateY(-50%) scale(1.06); +} +.why-program__video-content:active::after { + transform: translateX(-50%) translateY(-50%) scale(0.98); +} .why-program__video-text { max-width: 812px; font-weight: 500; diff --git a/assets/js/main.js b/assets/js/main.js index d8e0731..d8fc2db 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -4,6 +4,7 @@ import './team.js'; import './faq.js'; import './nav.js'; import './modals.js'; +import './reviews.js'; const maskOptions = { mask: '+{7} (000) 000 00 00', @@ -16,3 +17,4 @@ const phoneInputs = phoneInputClassNames .reduce((acc, array) => [...acc, ...array], []); phoneInputs.forEach((inputElement) => IMask(inputElement, maskOptions)); + diff --git a/assets/js/reviews.js b/assets/js/reviews.js new file mode 100644 index 0000000..294c66a --- /dev/null +++ b/assets/js/reviews.js @@ -0,0 +1,22 @@ +const reviewsSlideVideos = document.querySelectorAll('.reviews__slide-video'); +const whyProgramVideoContent = document.querySelector('.why-program__video-content'); + +reviewsSlideVideos.forEach((videoEl) => { + videoEl.addEventListener('click', (event) => { + if (whyProgramVideoContent) whyProgramVideoContent.classList.remove('active'); + reviewsSlideVideos.forEach((video) => { + if (video === event.currentTarget) { + video.classList.add('active'); + } else { + video.classList.remove('active'); + } + }); + }); +}); + +if (whyProgramVideoContent) { + whyProgramVideoContent.addEventListener('click', (event) => { + event.currentTarget.classList.add('active'); + reviewsSlideVideos.forEach((video) => video.classList.remove('active')); + }); +} diff --git a/assets/scss/_l-reviews.scss b/assets/scss/_l-reviews.scss index 96ab93e..d3aa1aa 100644 --- a/assets/scss/_l-reviews.scss +++ b/assets/scss/_l-reviews.scss @@ -31,6 +31,7 @@ } &-video { + position: relative; height: 205px; margin: 0 0 15px; overflow: hidden; @@ -50,6 +51,52 @@ width: 100%; height: 100%; } + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 10; + background-color: rgba($color: #000000, $alpha: 0.1); + backdrop-filter: blur(10px); + cursor: pointer; + } + + &::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + z-index: 11; + display: block; + width: 88px; + aspect-ratio: 1 / 1; + background: url(../img/icons/play.svg) center no-repeat; + background-size: cover; + transform: translateX(-50%) translateY(-50%); + transition: transform ease-in-out 0.1s; + cursor: pointer; + + @include tablet { + width: 64px; + } + } + + &.active::before, + &.active::after { + display: none; + } + + &:hover::after { + transform: translateX(-50%) translateY(-50%) scale(1.06); + } + + &:active::after { + transform: translateX(-50%) translateY(-50%) scale(0.98); + } } &-name { diff --git a/assets/scss/_l-why-program.scss b/assets/scss/_l-why-program.scss index 864ef52..cf0dc76 100644 --- a/assets/scss/_l-why-program.scss +++ b/assets/scss/_l-why-program.scss @@ -45,6 +45,7 @@ } &-content { + position: relative; height: 573px; margin: 0 -48px 30px; background-color: $grey; @@ -61,6 +62,52 @@ height: 100%; width: 100%; } + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 10; + background-color: rgba($color: #000000, $alpha: 0.1); + backdrop-filter: blur(10px); + cursor: pointer; + } + + &::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + z-index: 11; + display: block; + width: 88px; + aspect-ratio: 1 / 1; + background: url(../img/icons/play.svg) center no-repeat; + background-size: cover; + transform: translateX(-50%) translateY(-50%); + transition: transform ease-in-out 0.1s; + cursor: pointer; + + @include tablet { + width: 64px; + } + } + + &.active::before, + &.active::after { + display: none; + } + + &:hover::after { + transform: translateX(-50%) translateY(-50%) scale(1.06); + } + + &:active::after { + transform: translateX(-50%) translateY(-50%) scale(0.98); + } } &-text {