diff --git a/assets/css/index.css b/assets/css/index.css index b84b65f..72ad91e 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -1770,6 +1770,7 @@ h3 { position: relative; height: 573px; margin: 0 -48px 30px; + background: url(../img/videocontent-bg.jpg) center no-repeat; background-color: #878787; } @media (max-width: 992px) { @@ -1794,8 +1795,8 @@ h3 { bottom: 0; z-index: 10; background-color: rgba(0, 0, 0, 0.1); - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(4px); + backdrop-filter: blur(4px); cursor: pointer; } .why-program__video-content::after { diff --git a/assets/img/videocontent-bg.jpg b/assets/img/videocontent-bg.jpg new file mode 100644 index 0000000..b0c9885 Binary files /dev/null and b/assets/img/videocontent-bg.jpg differ diff --git a/assets/js/reviews.js b/assets/js/reviews.js index 7ef02b8..062decb 100644 --- a/assets/js/reviews.js +++ b/assets/js/reviews.js @@ -3,7 +3,10 @@ const whyProgramVideoContent = document.querySelector('.why-program__video-conte reviewsSlideVideos.forEach((videoEl) => { videoEl.addEventListener('click', (event) => { - if (whyProgramVideoContent) whyProgramVideoContent.classList.remove('active'); + if (whyProgramVideoContent) { + whyProgramVideoContent.classList.remove('active'); + whyProgramVideoContent.innerHTML = ''; + } reviewsSlideVideos.forEach((video) => { if (video === event.currentTarget) { video.classList.add('active'); @@ -30,6 +33,20 @@ reviewsSlideVideos.forEach((videoEl) => { if (whyProgramVideoContent) { whyProgramVideoContent.addEventListener('click', (event) => { event.currentTarget.classList.add('active'); - reviewsSlideVideos.forEach((video) => video.classList.remove('active')); + event.currentTarget.innerHTML = ` + + `; + reviewsSlideVideos.forEach((video) => { + video.classList.remove('active'); + }); }); } diff --git a/assets/scss/_l-why-program.scss b/assets/scss/_l-why-program.scss index cf0dc76..9d035e4 100644 --- a/assets/scss/_l-why-program.scss +++ b/assets/scss/_l-why-program.scss @@ -48,6 +48,7 @@ position: relative; height: 573px; margin: 0 -48px 30px; + background: url(../img/videocontent-bg.jpg) center no-repeat; background-color: $grey; @include laptop { @@ -72,7 +73,7 @@ bottom: 0; z-index: 10; background-color: rgba($color: #000000, $alpha: 0.1); - backdrop-filter: blur(10px); + backdrop-filter: blur(4px); cursor: pointer; } diff --git a/index.html b/index.html index 2e1d737..238be69 100644 --- a/index.html +++ b/index.html @@ -850,16 +850,6 @@
-