Good-Production/triumf-landing
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: added play buttons

Browse Source
This commit is contained in:
Aliaksei Karzhou
2024-07-11 16:40:45 +03:00
parent 0cd253a653
commit 0b70e62905
5 changed files with 204 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
assets/css/index.css
View File

@@ -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;