diff --git a/100_projects/92-video-movie-popup/1.jpg b/100_projects/92-video-movie-popup/1.jpg new file mode 100644 index 0000000..844328a Binary files /dev/null and b/100_projects/92-video-movie-popup/1.jpg differ diff --git a/100_projects/92-video-movie-popup/index.html b/100_projects/92-video-movie-popup/index.html new file mode 100644 index 0000000..00fcfc1 --- /dev/null +++ b/100_projects/92-video-movie-popup/index.html @@ -0,0 +1,27 @@ + + + + + + + document + + + + +
+ movie +

Movie Title

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum iste + necessitatibus porro explicabo illo dolorum dolores cupiditate non modi + quasi nobis, earum ab, autem esse vero sapiente minus vel! Provident?

+ +
+
+ + +
+ + + diff --git a/100_projects/92-video-movie-popup/index.js b/100_projects/92-video-movie-popup/index.js new file mode 100644 index 0000000..17c9771 --- /dev/null +++ b/100_projects/92-video-movie-popup/index.js @@ -0,0 +1,14 @@ +const btnEl = document.querySelector(".btn"); +const closeIconEl = document.querySelector(".close-icon"); +const trailerContainerEl = document.querySelector(".trailer-container"); +const videoEl = document.querySelector("video"); + +btnEl.addEventListener("click", () => { + trailerContainerEl.classList.remove("active"); +}); + +closeIconEl.addEventListener("click", () => { + trailerContainerEl.classList.add("active"); + videoEl.pause(); + videoEl.currentTime = 0; +}); diff --git a/100_projects/92-video-movie-popup/style.css b/100_projects/92-video-movie-popup/style.css new file mode 100644 index 0000000..b03ce73 --- /dev/null +++ b/100_projects/92-video-movie-popup/style.css @@ -0,0 +1,124 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + margin: 0; + box-sizing: border-box; + font-family: sans-serif; + display: flex; + justify-content: center; + height: 100vh; + align-items: center; + background-image: linear-gradient(to bottom, #000000, #2A272A, #4B4A54, #677381, #82A0AA, #A3CFCD); +} +body::before { + content: ''; + position: absolute; + top: 60px; + left: 10%; + width: 300px; + height: 300px; + background: linear-gradient(#dadde2, #fff5ff); + filter: blur(20px); +} +body::after { + content: ''; + position: absolute; + bottom: 60px; + right: 10%; + width: 300px; + height: 300px; + background: linear-gradient(#dadde2, #dadde2); + filter: blur(20px); +} +.main-container { + max-width: 550px; + padding: 10px; + text-align: center; + position: relative; + z-index: 9; +} +.main-container{ + position: absolute; + padding: 20px; + background: rgba(255, 255, 255,0.05); + box-shadow: 0 5px 15px rgba(0, 0, 0,0.1); + border-radius: 8px; + backdrop-filter: blur(10px); + z-index: 1; + transition: 0.5s; + color: #fff; +} +.main-container img { + max-width: 100%; + margin-bottom: 15px; + border-radius: 10px; +} +.main-container h1 { + color: #fff; + font-weight: 500; +} +.main-container p { + color: #fff; + margin: 15px 0; +} +.btn { + color: #fff; + background: rgba(255, 255, 255,0.05); + box-shadow: 0 5px 15px rgba(0, 0, 0,0.1); + border-radius: 8px; + backdrop-filter: blur(10px); + border: none; + font-size: 16px; + padding: 10px 20px; + cursor: pointer; + border-radius: 5px; + transition: .3s; +} +.btn:hover { + background-color: #fff; + color: #000; +} +.trailer-container { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: black; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + opacity: 1; + transition: opacity 0.7s; + z-index: 99; +} +.active.trailer-container { + visibility: hidden; + opacity: 0; +} +.trailer-container video { + position: relative; + max-width: 900px; + outline: none; + z-index: 999; +} +@media (max-width: 991px) { + .trailer-container video { + max-width: 90%; + } +} +.close-icon { + position: absolute; + top: 30px; + right: 30px; + color: white; + cursor: pointer; + transition: .3s; +} +.close-icon:hover{ + color: #f00; +} \ No newline at end of file diff --git a/100_projects/92-video-movie-popup/trailer.mp4 b/100_projects/92-video-movie-popup/trailer.mp4 new file mode 100644 index 0000000..9712b6f Binary files /dev/null and b/100_projects/92-video-movie-popup/trailer.mp4 differ