x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-05-24 12:23:47 +03:00 committed by GitHub
parent ff18292a2d
commit 3e70cd139f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 165 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
100_projects/92-video-movie-popup/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

27
100_projects/92-video-movie-popup/index.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous"referrerpolicy="no-referrer"/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main-container">
<img src="1.jpg" alt="movie"/>
<h1>Movie Title</h1>
<p>
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?</p>
<button class="btn">Watch Now</button>
</div>
<div class="trailer-container active">
<video src="trailer.mp4" controls="true"></video>
<i class="fas fa-times fa-2x close-icon"></i>
</div>
<script src="index.js"></script>
</body>
</html>

14
100_projects/92-video-movie-popup/index.js Normal file
View File

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

124
100_projects/92-video-movie-popup/style.css Normal file
View File

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

BIN
100_projects/92-video-movie-popup/trailer.mp4 Normal file
View File

Binary file not shown.