jtpmcdevitt/web_design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added movie_app

Browse source
This commit is contained in:
JSriwongsa 2023-05-19 23:36:18 -05:00
parent fb3a164b40
commit 4ca14dbe1a
9 changed files with 1172 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -2,3 +2,5 @@ template_education/images/*
travel_web/images/*
msc_web/images/*
fitness_app/images/*
movie_app/images/*
movie_app/play_*/*

537
movie_app/css/style.css Executable file
View file

@ -0,0 +1,537 @@
*{padding: 0; margin: 0; font-family: monospace; scroll-behavior: smooth; box-sizing: border-box; scroll-padding-top: 2rem;}
:root{
--main-color: red;
--hover-color: rgb(240, 57, 57);
--body-color:black;
--container-color:#25262a;
--text-color: #fff;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
section{
padding: 3rem 0 2rem;
}
img{
width: 100%;
}
.bx{
cursor: pointer;
}
body{
background: var(--body-color);
color: var(--text-color);
}
.container{
max-width: 1060px;
margin: auto;
width: 100%;
}
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(--body-color);
z-index: 100;
}
.nav{
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0;
}
.logo{
font-size: 2rem;
color: var(--text-color);
font-weight: 600;
text-transform: uppercase;
margin: 0 auto 0 0;
}
.logo span{
color: var(--main-color);
}
.search-box{
max-width: 240px;
width: 100%;
display: flex;
align-items: center;
column-gap: 0.5rem;
padding: 8px 15px;
background: var(--container-color);
border-radius: 4rem;
margin-right: 1rem;
}
.search-box .bx:hover{
color: var(--main-color);
}
.search-box .bx{
font-size: 1rem;
}
#search-input{
width: 100%;
border: none;
outline: none;
color: var(--text-color);
background: transparent;
font-size: 1rem;
}
.navbar{
position: fixed;
top: 50%;
transform:translateY(-50%) ;
left: 30px;
display: flex;
flex-direction: column;
row-gap: 3rem;
}
.nav-link{
display: flex;
flex-direction: column;
align-items: center;
color: lightgrey;
}
.nav-link:hover, .nav-active{
color: var(--text-color);
transition: 0.2s all linear;
transform: scale(1.3);
}
.nav-link .bx{
font-size: 1.5rem;
}
.nav-link-title{
font-size: 0.8rem;
}
.home{
position: relative;
min-height: 450px;
display: flex;
align-items: center;
margin-top: 5rem !important;
border-radius: 0.5rem;
}
.home-img{
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
object-fit: cover;
border-radius: 0.5rem;
}
.home-text{
padding-left: 40px;
}
.home-title{
font-size: 2.5rem;
font-weight: 600;
}
.home-text p{
font-size: 1rem;
margin: 10px 0 20px;
color: var(--main-color);
}
.watch-btn{
display: flex;
align-items: center;
column-gap: 0.8rem;
color: var(--text-color);
}
.watch-btn .bx{
font-size: 25px;
background: var(--main-color);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.watch-btn .bx:hover{
background: var(--hover-color);
}
.watch-btn span{
font-size: 1rem;
font-weight: 400;
}
.heading{
display: flex;
align-items: center;
justify-content: space-between;
background: var(--container-color);
padding: 8px 14px;
margin-bottom: 2rem;
}
.heading-title{
font-size: 1.5rem;
font-weight: 600;
}
.movie-box{
position: relative;
width: 100%;
height: 380px;
overflow: hidden;
}
.movie-box-img{
width: 100%;
height: 100%;
object-fit: cover;
}
.movie-box .box-text{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 14px;
background: linear-gradient(8deg, hsl(240 17% 14% / 74%) 14%, hsl(240 17% 14% / 14%) 44% );
overflow: hidden;
}
.movie-title{
font-size: 1.5rem;
font-weight: 600;
}
.movie-genre{
font-size: 1rem;
font-weight: 500;
}
.swiper-btn{
display: flex;
}
.swiper-button-next, .swiper-button-prev{
position: static !important;
margin: 0 0 0 10px !important;
}
.swiper-button-next::after, .swiper-button-prev::after{
color: var(--text-color);
font-size: 20px !important;
font-weight: 600 !important;
}
.play-btn{
position: absolute;
bottom: 0.5rem;
right: 0.5rem;
}
.movies .heading{
padding: 10px 14px;
}
.movies-content{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(247px, 1fr));
gap: 2rem;
}
.movies-content .movie-box:hover .movie-box-img{
transform: scale(1.1);
transition: 0.5s;
}
.next-page{
display: flex;
align-items: center;
justify-content: center;
margin-top: 2.5rem;
}
.next-page a{
color: var(--text-color);
font-size: 18px;
margin-bottom: 1%;
}
.copyright{
text-align: center;
padding: 20px;
}
/*-----------------------------------------*/
.play-container{
position: relative;
min-height: 540px;
margin-top: 5rem !important;
}
.play-img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: -1;
}
.play-text{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 40px;
background: linear-gradient(8deg, hsl(240 17% 14% / 74%) 14%, hsl(240 17% 14% / 14%) 44% );
}
.play-text h2{
font-size: 2rem;
font-weight: 600;
}
.rating{
margin-top: 4px;
column-gap: 2px;
}
.tags{
display: flex;
align-items: center;
column-gap: 5px;
margin: 0.5rem 0;
}
.tags span{
padding: 0 5px;
background: var(--container-color);
}
.play-movie{
position: absolute;
bottom: 18rem;
right: 10rem;
display: flex !important;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 50%;
background: var(--main-color);
font-size: 20px;
animation: animate 2s linear infinite;
}
@keyframes animate{
0%{
box-shadow: 0 0 0 0 rgba(255, 81, 58, 0.7);
}
40%{
box-shadow: 0 0 0 50px rgb(255, 190, 7, 0);
}
80%{
box-shadow: 0 0 0 50px rgb(255, 190, 7, 0);
}
100%{
box-shadow: 0 0 0 rgb(255, 190, 7, 0);
}
}
.video-container{
position: fixed;
top: 0;
left: 0;
display: none;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
background: hsl(234 10% 20% /60%);
z-index: 400;
}
.video-container.show-video{
display: flex;
}
.video-box{
position: relative;
width: 75%;
}
.video-box #myvideo{
width: 100%;
aspect-ratio: 16/9;
}
.close-video{
position: absolute;
top: -3rem;
right: 0;
font-size: 40px;
color: var(--main-color);
}
.about-movie{
margin-top: 2rem !important;
}
.about-movie h2{
font-size: 1.5rem;
font-weight: 600;
color: var(--main-color);
}
.about-movie p{
max-width: 600px;
font-size: 1rem;
margin: 10px 0;
}
.cast-heading{
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--main-color);
}
.cast{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 150px));
gap: 1rem;
}
.cast-img{
width: 150px;
height: 200px;
}
@media(max-width:1170px){
.navbar{
bottom: 0;
left: 0;
right: 0;
top: auto;
transform: translateY(0);
flex-direction: row;
justify-content: space-evenly;
row-gap: 1px;
padding: 10px;
border-top: 1px solid hsl(200 100% 99% / 5%);
background: linear-gradient(8deg, hsl(240 17% 14% / 100%) 5%,hsl(240 17% 14% / 90%) 100% );
}
.nav-link .bx{
font-size: 1.5rem;
}
.copyright{
margin-bottom: 4rem;
}
}
@media(max-width:1060px){
.container{
margin: 0 auto;
width: 95%;
}
}
@media(max-width:950px){
.movie-box{
height: 340px;
}
.movies-content{
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
@media(max-width:880px){
.nav{
padding: 14px 0;
}
.home{
min-height: 440px;
margin-top: 4rem !important;
}
.home-text{
padding-left: 15px;
}
.home-title{
font-size: 1.5rem;
}
.watch-btn span{
font-size: 0.9rem;
}
.movie-title{
font-size: 1rem;
padding-right: 30px;
}
.play-container{
min-height: 440px;
margin-top: 4rem !important;
}
.play-movie{
bottom: 15rem;
right: 3rem;
}
.cast{
justify-content: center;
}
}
@media(max-width:760px){
.nav{
padding: 11px 0;
}
.home-img{
object-position: left;
}
.movie-genre{
font-size: 0.9rem;
margin-top: 2px;
}
.tags span, .about-movie p{
font-size: 0.9rem;
}
.play-text h2, .about-movie h2{
font-size: 1.5rem;
}
.play-movie{
bottom: 10rem;
right: 2rem;
}
}
@media(max-width:500px){
.home{
min-height: 350px;
}
.heading{
padding: 2px 14px;
}
.heading-title{
font-size: 1.3rem;
}
.play-text{
padding: 20px;
}
.play-movie{
bottom: 4rem;
}
.video-box{
width: 90%;
}
.cast-heading{
font-size: 1rem;
}
.cast-title{
font-size: 0.9rem;
}
}
@media(max-width:400px){
*{
scroll-padding-top: 5rem;
}
.nav{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
row-gap: 5px;
}
.search-box{
max-width: 100%;
width: 100%;
border-radius: 4px;
order: 3;
grid-column-start: 1;
grid-column-end: 3;
}
.play-container{
margin-top: 7rem !important;
}
.movie-box{
height: 300px;
}
.movies-content{
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
}
}
@media(max-width:360px){
.home{
min-height: 300px;
}
.movie-box{
height: 285px;
}
.watch-btn .bx{
width: 30px;
height: 30px;
}
.navbar{
justify-content: space-around;
padding: 8px 0;
}
}

13
movie_app/css/swiper-bundle.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

281
movie_app/index.html Executable file
View file

@ -0,0 +1,281 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MOVIEJTP</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/swiper-bundle.min.css">
<link rel="shortcut icon" href="images/Daco.png">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header>
<div class="nav container">
<a href="index.html" class="logo">
Movie<span>JTP</span>
</a>
<div class="search-box">
<input type="search" name="" id="search-input" placeholder="Search movie">
<i class='bx bx-search'></i>
</div>
<div class="navbar">
<a href="#home" class="nav-link nav-active">
<i class='bx bxs-home'></i>
<span class="nav-link-title">HOME</span>
</a>
<a href="#popular" class="nav-link">
<i class='bx bxs-hot'></i>
<span class="nav-link-title">TRENDING</span>
</a>
<a href="#movies" class="nav-link">
<i class='bx bx-compass' ></i>
<span class="nav-link-title">EXPLORE</span>
</a>
<a href="play_page.html" class="nav-link">
<i class='bx bx-tv' ></i>
<span class="nav-link-title">MOVIES</span>
</a>
</div>
</div>
</header>
<section class="home container" id="home">
<img src="images/background2.jpg" alt="" class="home-img">
<div class="home-text">
<h1 class = "home-title">The Flash</h1>
<p>Releasing April 4th</p>
<a href="play_heading.html" class="watch-btn">
<i class='bx bx-play-circle' ></i>
<span>Watch the trailer</span>
</a>
</div>
</section>
<section class="popular container" id="popular">
<div class="heading">
<h2 class="heading-title">Popular Movies</h2>
<div class="swiper-btn">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="popular-content swiper">
<div class="swiper-wrapper">
<!--m1-->
<div class="swiper-slide">
<div class="movie-box">
<img src="images/p1.jpg" alt="" class="movie-box-img">
<div class="box-text">
<h2 class="movie-title">A League of Their Own</h2>
<span class="movie-genre">Comedy/ Drama/ Sport</span>
<a href="play_popular.html" class="watch-btn play-btn">
<i class='bx bx-play-circle' ></i>
</a>
</div>
</div>
</div>
<!--m2-->
<div class="swiper-slide">
<div class="movie-box">
<img src="images/m2.jpg" alt="" class="movie-box-img">
<div class="box-text">
<h2 class="movie-title">Avatar: The Way of Water</h2>
<span class="movie-genre">Action/ Adventure/ Fantasy/ Sci-Fi</span>
<a href="#" class="watch-btn play-btn">
<i class='bx bx-play-circle' ></i>
</a>
</div>
</div>
</div>
<!--m3-->
<div class="swiper-slide">
<div class="movie-box">
<img src="images/m3.jpg" alt="" class="movie-box-img">
<div class="box-text">
<h2 class="movie-title">M3GAN</h2>
<span class="movie-genre"> Horror/ Sci-Fi/ Thriller</span>
<a href="#" class="watch-btn play-btn">
<i class='bx bx-play-circle' ></i>
</a>
</div>
</div>
</div>
<!--m4-->
<div class="swiper-slide">
<div class="movie-box">
<img src="images/m4.jpg" alt="" class="movie-box-img">
<div class="box-text">
<h2 class="movie-title">The Hustle</h2>
<span class="movie-genre">Comedy/ Crime</span>
<a href="#" class="watch-btn play-btn">
<i class='bx bx-play-circle' ></i>
</a>
</div>
</div>
</div>
<!--m5-->
<div class="swiper-slide">
<div class="movie-box">
<img src="images/m5.jpg" alt="" class="movie-box-img">
<div class="box-text">
<h2 class="movie-title">Chip'n Dale: Rescue Rangers</h2>
<span class="movie-genre"> Animation/ Action/ Adventure/ Comedy/ Crime/ Family/ Fantasy/ Mystery/ Sci-Fi</span>
<a href="#" class="watch-btn play-btn">
<i class='bx bx-play-circle' ></i>
</a>
</div>
</div>
</div>
<!--m6-->
<div class="swiper-slide">
<div class="movie-box">
<img src="images/m6.jpg" alt="" class="movie-box-img">
<div class="box-text">
<h2 class="movie-title">Finch</h2>
<span class="movie-genre"> Adventure/ Drama/ Sci-Fi</span>
<a href="#" class="watch-btn play-btn">
<i class='bx bx-play-circle' ></i>
</a>
</div>
</div>
</div>
<!--m7-->
<div class="swiper-slide">
<div class="movie-box">
<img src="images/m7.jpg" alt="" class="movie-box-img">
<div class="box-text">
<h2 class="movie-title">Girl in the Basement</h2>
<span class="movie-genre"> Crime/ Thriller</span>
<a href="#" class="watch-btn play-btn">
<i class='bx bx-play-circle' ></i>
</a>
</div>
</div>
</div>
<!--m8-->
<div class="swiper-slide">
<div class="movie-box">
<img src="images/m8.jpg" alt="" class="movie-box-img">
<div class="box-text">
<h2 class="movie-title">The Last Duel</h2>
<span class="movie-genre"> Action/ Drama/ History/ Thriller</span>
<a href="#" class="watch-btn play-btn">
<i class='bx bx-play-circle' ></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="movies container" id="movies">
<div class="heading">
<h2 class="heading-title">Movies</h2>
</div>
<div class="movies-content">
<!--p1-->
<div class="movie-box">
<img src="images/m1.jpg" alt="" class="movie-box-img">
<div class="box-text">
<h2 class="movie-title">Top Gun: Maverick</h2>
<span class="movie-genre">Action/ Drama</span>
<a href="play_page.html" class="watch-btn play-btn">
<i class='bx bx-play-circle' ></i>
</a>
</div>
</div>
<!--p2-->
<div class="movie-box">
<img src="images/p2.jpg" alt="" class="movie-box-img">
<div class="box-text">
<h2 class="movie-title">The Quick and the Dead</h2>
<span class="movie-genre">Action/ Romance/ Thriller/ Western</span>
<a href="#" class="watch-btn play-btn">
<i class='bx bx-play-circle' ></i>
</a>
</div>
</div>
<!--p3-->
<div class="movie-box">
<img src="images/p3.jpg" alt="" class="movie-box-img">
<div class="box-text">
<h2 class="movie-title">Léon: The Professional</h2>
<span class="movie-genre">Action/ Crime/ Drama/ Thrillerr</span>
<a href="#" class="watch-btn play-btn">
<i class='bx bx-play-circle' ></i>
</a>
</div>
</div>
<!--p4-->
<div class="movie-box">
<img src="images/p4.jpg" alt="" class="movie-box-img">
<div class="box-text">
<h2 class="movie-title">Forrest Gump</h2>
<span class="movie-genre"> Drama/ Romance</span>
<a href="#" class="watch-btn play-btn">
<i class='bx bx-play-circle' ></i>
</a>
</div>
</div>
<!--p5-->
<div class="movie-box">
<img src="images/p5.jpg" alt="" class="movie-box-img">
<div class="box-text">
<h2 class="movie-title">Joker</h2>
<span class="movie-genre"> Crime/ Drama/ Thriller</span>
<a href="#" class="watch-btn play-btn">
<i class='bx bx-play-circle' ></i>
</a>
</div>
</div>
<!--p6-->
<div class="movie-box">
<img src="images/p6.jpg" alt="" class="movie-box-img">
<div class="box-text">
<h2 class="movie-title">All My Life</h2>
<span class="movie-genre"> Drama/ Romance</span>
<a href="#" class="watch-btn play-btn">
<i class='bx bx-play-circle' ></i>
</a>
</div>
</div>
<!--p7-->
<div class="movie-box">
<img src="images/p7.jpg" alt="" class="movie-box-img">
<div class="box-text">
<h2 class="movie-title">The Banker</h2>
<span class="movie-genre"> Drama/ Biography</span>
<a href="#" class="watch-btn play-btn">
<i class='bx bx-play-circle' ></i>
</a>
</div>
</div>
<!--p8-->
<div class="movie-box">
<img src="images/p8.jpg" alt="" class="movie-box-img">
<div class="box-text">
<h2 class="movie-title">The Imitation Game</h2>
<span class="movie-genre"> Biography/ Drama/ Thriller/ War</span>
<a href="#" class="watch-btn play-btn">
<i class='bx bx-play-circle' ></i>
</a>
</div>
</div>
</div>
</section>
<div class="next-page">
<a href="#" class="next-btn">Next Page <i class='bx bx-chevrons-right' ></i> </a>
</div>
<div class="copyright">
<p>&#169; MOVIEJTP All Rights Reserved </p>
</div>
<script src = "js/swiper-bundle-min.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

50
movie_app/js/script.js Executable file
View file

@ -0,0 +1,50 @@
var swiper = new Swiper(".popular-content", {
autoplay: {
delay: 5500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints:{
280:{
slidesPerView: 1,
spaceBetween:10,
},
320:{
slidesPerView: 2,
spaceBetween:10,
},
510:{
slidesPerView: 2,
spaceBetween:10,
},
750:{
slidesPerView: 3,
spaceBetween:15,
},
900:{
slidesPerView: 4,
spaceBetween:20,
},
},
});
// video
let playButton = document.querySelector(".play-movie");
let video = document.querySelector(".video-container");
let myvideo = document.querySelector("#myvideo");
let closebtn = document.querySelector(".close-video");
playButton.onclick = () =>{
video.classList.add("show-video")
myvideo.play();
};
closebtn.onclick = () =>{
video.classList.remove("show-video")
myvideo.pause();
};

14
movie_app/js/swiper-bundle-min.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

96
movie_app/play_heading.html Normal file
View file

@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Flash</title>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="images/Daco.png">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header>
<div class="nav container">
<a href="index.html" class="logo">
Movie<span>JTP</span>
</a>
<div class="search-box">
<input type="search" name="" id="search-input" placeholder="Search movie">
<i class='bx bx-search'></i>
</div>
<div class="navbar">
<a href="index.html" class="nav-link nav-active">
<i class='bx bxs-home'></i>
<span class="nav-link-title">HOME</span>
</a>
</div>
</div>
</header>
<div class="play-container container">
<img src="play_page_heading/wall1.jpg" alt="" class="play-img">
<div class="play-text">
<h2>The Flash</h2>
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bx-star' ></i>
</div>
<div class="tags">
<span>Action</span>
<span>Adventure</span>
<span>Drama</span>
<span>Sci-Fi</span>
</div>
</div>
<i class='bx bx-play-circle play-movie'></i>
<div class="video-container">
<div class="video-box">
<video id="myvideo" src="play_page_heading/The Flash – Official Trailer.mp4" controls></video>
<i class='bx bxs-x-circle close-video'></i>
</div>
</div>
</div>
<div class="about-movie container">
<h2>The Flash</h2>
<p>After being struck by lightning, Barry Allen wakes up from his coma to discover
he's been given the power of super speed, becoming the Flash, and fighting crime in Central City.</p>
<h2 class="cast-heading">Movie Cast</h2>
<div class="cast">
<div class="cast-box">
<img src="play_page_heading/cast1.jpg" alt="" class="cast-img">
<span class="cast-title">Grant Gustin</span>
</div>
<div class="cast-box">
<img src="play_page_heading/cast2.jpg" alt="" class="cast-img">
<span class="cast-title">Candice Patton</span>
</div>
<div class="cast-box">
<img src="play_page_heading/cast3.jpg" alt="" class="cast-img">
<span class="cast-title">Danielle Panabaker</span>
</div>
<div class="cast-box">
<img src="play_page_heading/cast4.jpg" alt="" class="cast-img">
<span class="cast-title">Carlos Valdes</span>
</div>
<div class="cast-box">
<img src="play_page_heading/cast5.jpg" alt="" class="cast-img">
<span class="cast-title">Jesse L. Martin</span>
</div>
<div class="cast-box">
<img src="play_page_heading/cast6.jpg" alt="" class="cast-img">
<span class="cast-title">Tom Cavanagh</span>
</div>
</div>
</div>
<div class="copyright">
<p>&#169; MOVIEJTP All Rights Reserved </p>
</div>
<script src="js/swiper-bundle-min.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

91
movie_app/play_page.html Executable file
View file

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Top Gun: Maverick</title>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="images/Daco.png">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header>
<div class="nav container">
<a href="index.html" class="logo">
Movie<span>JTP</span>
</a>
<div class="search-box">
<input type="search" name="" id="search-input" placeholder="Search movie">
<i class='bx bx-search'></i>
</div>
<div class="navbar">
<a href="index.html" class="nav-link nav-active">
<i class='bx bxs-home'></i>
<span class="nav-link-title">HOME</span>
</a>
</div>
</div>
</header>
<div class="play-container container">
<img src="play_page/play_wall2.jpg" alt="" class="play-img">
<div class="play-text">
<h2>Top Gun: Maverick</h2>
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star-half' ></i>
</div>
<div class="tags">
<span>Action</span>
<span>Drama</span>
</div>
</div>
<i class='bx bx-play-circle play-movie'></i>
<div class="video-container">
<div class="video-box">
<video id="myvideo" src="play_page/Top Gun Maverick.mp4" controls></video>
<i class='bx bxs-x-circle close-video'></i>
</div>
</div>
</div>
<div class="about-movie container">
<h2>Top Gun: Maverick</h2>
<p>After thirty years, Maverick is still pushing the envelope as a top naval aviator, but must confront ghosts of his past when
he leads TOP GUN's elite graduates on a mission that demands the ultimate sacrifice from those chosen to fly it.</p>
<h2 class="cast-heading">Movie Cast</h2>
<div class="cast">
<div class="cast-box">
<img src="play_page/cast1.jpg" alt="" class="cast-img">
<span class="cast-title">Tom Cruise</span>
</div>
<div class="cast-box">
<img src="play_page/cast2.jpg" alt="" class="cast-img">
<span class="cast-title">Miles Teller</span>
</div>
<div class="cast-box">
<img src="play_page/cast3.jpg" alt="" class="cast-img">
<span class="cast-title">Jennifer Connelly</span>
</div>
<div class="cast-box">
<img src="play_page/cast4.jpg" alt="" class="cast-img">
<span class="cast-title">Jon Hamm</span>
</div>
<div class="cast-box">
<img src="play_page/cast6.jpg" alt="" class="cast-img">
<span class="cast-title">Glen Powell</span>
</div>
</div>
</div>
<div class="copyright">
<p>&#169; MOVIEJTP All Rights Reserved </p>
</div>
<script src="js/swiper-bundle-min.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

88
movie_app/play_popular.html Normal file
View file

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A League of Their Own</title>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="images/Daco.png">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header>
<div class="nav container">
<a href="index.html" class="logo">
Movie<span>JTP</span>
</a>
<div class="search-box">
<input type="search" name="" id="search-input" placeholder="Search movie">
<i class='bx bx-search'></i>
</div>
<div class="navbar">
<a href="index.html" class="nav-link nav-active">
<i class='bx bxs-home'></i>
<span class="nav-link-title">HOME</span>
</a>
</div>
</div>
</header>
<div class="play-container container">
<img src="play_popular/wall.jpg" alt="" class="play-img">
<div class="play-text">
<h2>A League of Their Own</h2>
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star-half'></i>
</div>
<div class="tags">
<span>Comedy</span>
<span>Drama</span>
<span>Sport</span>
</div>
</div>
<i class='bx bx-play-circle play-movie'></i>
<div class="video-container">
<div class="video-box">
<video id="myvideo" src="play_popular/Official Trailer A League of Their Own (1992).mp4" controls></video>
<i class='bx bxs-x-circle close-video'></i>
</div>
</div>
</div>
<div class="about-movie container">
<h2>A League of Their Own</h2>
<p>Two sisters join the first female professional baseball league and struggle to help it succeed
amid their own growing rivalry.</p>
<h2 class="cast-heading">Movie Cast</h2>
<div class="cast">
<div class="cast-box">
<img src="play_popular/cast1.jpg" alt="" class="cast-img">
<span class="cast-title">Tom Hanks</span>
</div>
<div class="cast-box">
<img src="play_popular/cast2.jpg" alt="" class="cast-img">
<span class="cast-title">Geena Davis</span>
</div>
<div class="cast-box">
<img src="play_popular/cast3.jpeg" alt="" class="cast-img">
<span class="cast-title">Lori Petty</span>
</div>
<div class="cast-box">
<img src="play_popular/cast4.jpg" alt="" class="cast-img">
<span class="cast-title">Madonna</span>
</div>
</div>
</div>
<div class="copyright">
<p>&#169; MOVIEJTP All Rights Reserved </p>
</div>
<script src="js/swiper-bundle-min.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>