├── Aladdin
    ├── Aladdin.css
    ├── Aladdin.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── AmzingSpiderMan2
    ├── Aladdin.css
    └── AmzingSpiderMan2.css
├── AvengersEndGame
    ├── AvengersEndGame.css
    ├── AvengersEndGame.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── AvengersInfinityWar
    ├── AvengersInfinityWar.css
    ├── AvengersInfinityWar.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── Bahubali2
    ├── Bahubali2.css
    ├── Bahubali2.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── BhootPartOne
    ├── BhootPartOne.css
    ├── BhootPartOne.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── BlackPanther
    ├── BlackPanther.css
    ├── BlackPanther.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── BlackWidow
    ├── BlackWidow.css
    ├── BlackWidow.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── Bloodshot
    ├── Bloodshot.css
    ├── Bloodshot.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── CaptainMarvel
    ├── CaptainMarvel.css
    ├── CaptainMarvel.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── Compressed Images
    ├── Aladdin-compressed.jpg
    ├── AmzingSpiderMan2-compressed.jpg
    ├── AntMan-compressed.jpg
    ├── AntMan2-compressed.jpg
    ├── Aquaman-compressed.jpg
    ├── AvengersEndGame-compressed.jpg
    ├── AvengersInfinityWar-compressed.jpg
    ├── Bahubali2-compressed.jpg
    ├── BhootPartOne-compressed.jpg
    ├── BlackPanther-compressed.jpg
    ├── BlackWidow-compressed.jpg
    ├── Bloodshot-compressed.jpg
    ├── Darbar-compressed.jpg
    ├── Deadpool2-compressed.jpg
    ├── Dhaakad-compressed.jpg
    ├── DoctorStrange-compressed.jpg
    ├── Drive-compressed.jpg
    ├── GuardiansoftheGalaxy-compressed.jpg
    ├── Inception-compressed.jpg
    ├── Incredibles2-compressed.jpg
    ├── IntoTheWoods-compressed.jpg
    ├── JohnWick-compressed.jpg
    ├── Joker-compressed.jpg
    ├── JungleCruise-compressed.jpg
    ├── KabirSingh-compressed.jpg
    ├── Kin-compressed.jpg
    ├── Morbius-compressed.jpg
    ├── Padmaavat-compressed.jpg
    ├── PeterRabbit2TheRunaway-compressed.jpg
    ├── ProjectPower-compressed.jpg
    ├── Shivaay-compressed.jpg
    ├── SonictheHedgehog-compressed.jpg
    ├── Sooryavanshi-compressed.jpg
    ├── SpiderManIntoTheSpiderVerse-compressed.jpg
    ├── TheBatman-compressed.jpg
    ├── TheDarkKnight-compressed.jpg
    ├── TheGodfatherPart2-compressed.jpg
    ├── ToyStory-compressed.jpg
    ├── Venom2-compressed.jpg
    ├── WonderWoman-compressed.jpg
    └── WonderWoman1984-compressed.jpg
├── Darbar
    ├── Darbar.css
    ├── Darbar.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── Deadpool2
    ├── Deadpool2.css
    ├── Deadpool2.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── Dhaakad
    ├── Dhaakad.css
    ├── Dhaakad.html
    ├── bg.png
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── DoctorStrange
    ├── DoctorStrange.css
    ├── DoctorStrange.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── Drive
    ├── Drive.css
    ├── Drive.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── GuardiansoftheGalaxy
    ├── GuardiansoftheGalaxy.css
    ├── GuardiansoftheGalaxy.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── Inception
    ├── Inception.css
    ├── Inception.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── Incredibles2
    ├── Incredibles2.css
    ├── Incredibles2.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── IntoTheWoods
    ├── IntoTheWoods.css
    ├── IntoTheWoods.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── JohnWick3
    ├── JohnWick3.css
    ├── JohnWick3.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── Joker
    ├── bg.jpg
    ├── close.png
    ├── joker.css
    ├── joker.html
    ├── logo.png
    ├── play.png
    └── toggle.png
├── JungleCruise
    ├── JungleCruise.css
    ├── JungleCruise.html
    ├── bg.png
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── KabirSingh
    ├── Bg.jpg
    ├── KabirSingh.css
    ├── KabirSingh.html
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── Kin
    ├── Kin.css
    ├── Kin.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── Morbius
    ├── Morbius.css
    ├── Morbius.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── Padmaavat
    ├── Padmaavat.css
    ├── Padmaavat.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── PeterRabbit2TheRunaway
    ├── PeterRabbit2TheRunaway.css
    ├── PeterRabbit2TheRunaway.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── ProjectPower
    ├── ProjectPower.css
    ├── ProjectPower.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── README.md
├── Shivaay
    ├── Shivaay.css
    ├── Shivaay.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── SonictheHedgehog
    ├── SonictheHedgehog.css
    ├── SonictheHedgehog.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── Sooryavanshi
    ├── Sooryavanshi.css
    ├── Sooryavanshi.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── SpiderManFarFromHome
    ├── SpiderManFarFromHome.css
    ├── SpiderManFarFromHome.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── SpiderManIntoTheSpiderVerse
    ├── SpiderManIntoTheSpiderVerse.css
    ├── SpiderManIntoTheSpiderVerse.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── TheBatman
    ├── TheBatman.css
    ├── TheBatman.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── TheDarkKnight
    ├── TheDarkKnight.css
    ├── TheDarkKnight.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── TheGodfatherPart2
    ├── TheGodfatherPart2.css
    ├── TheGodfatherPart2.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── ToyStory
    ├── ToyStory.css
    ├── ToyStory.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── Venom2
    ├── Venom2.css
    ├── Venom2.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── WonderWoman
    ├── WonderWoman.css
    ├── WonderWoman.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── WonderWoman1984
    ├── WonderWoman1984.css
    ├── WonderWoman1984.html
    ├── bg.jpg
    ├── close.png
    ├── logo.png
    ├── play.png
    └── toggle.png
├── index.html
├── main.js
└── style.css


/Aladdin/Aladdin.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/
  2 | css?family=poppins:200,300,400,500,600,700,800,900&display=swap'); */
  3 | 
  4 | *{
  5 |     margin:0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Times New Roman', Times, serif;
  9 | }
 10 | header{
 11 |     position: absolute;
 12 |     top: 0;
 13 |     left: 0;
 14 |     width: 100%;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     padding: 40px 100px;
 18 |     z-index: 1000;
 19 | }
 20 | header .logo{
 21 |     max-width: 120px;
 22 | }
 23 | header .toggle{
 24 |     max-width: 60px;
 25 |     cursor: pointer;
 26 | }
 27 | .banner{
 28 |     position: relative;
 29 |     width: 100%;
 30 |     min-height: 100vh;
 31 |     padding: 0 100px;
 32 |     background: url(bg.jpg);
 33 |     background-position: center;
 34 |     background-size: cover;
 35 |     display: flex;
 36 |     justify-content: flex-start;
 37 |     align-items: center;
 38 | }
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 300;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: #fff;
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | .trailer{
 78 |     position: fixed;
 79 |     top: 50%;
 80 |     left: 50%;
 81 |     transform: translate(-50%,-50%);
 82 |     z-index: 10000;
 83 |     background: rgba(0, 0, 0, 0.95);
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     visibility: hidden;
 90 |     opacity: 0;
 91 | }
 92 | .trailer.active{
 93 |     visibility: visible;
 94 |     opacity: 1;
 95 | }
 96 | .trailer video{
 97 |     max-width: 900px;
 98 |     outline: none;
 99 | }
100 | .trailer .close{
101 |     position: absolute;
102 |     top: 30px;
103 |     right: 30px;
104 |     cursor: pointer;
105 |     filter: invert(1);
106 |     max-width: 32px;
107 | }
108 | 
109 | @media (max-width: 991px){
110 |     header{
111 |         padding: 20px 50px;
112 |     }
113 |     header{
114 |         padding: 20px 50px;
115 |     }
116 |     header .logo{
117 |         max-width: 80px;
118 |     }
119 |     header .toggle{
120 |         max-width: 40px;
121 |     }
122 |     .banner{
123 |         padding: 100px 50px;
124 |     }
125 |     .banner .content h2{
126 |         font-weight: 400;
127 |         font-size: 2em;
128 |         letter-spacing: 0.05em; 
129 |     }
130 |     .banner .content p{
131 |         font-size: 1em;
132 |     }
133 |     .trailer video{
134 |         max-width: 90%;
135 |         outline: none;
136 |     }
137 | }


--------------------------------------------------------------------------------
/Aladdin/Aladdin.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="Aladdin.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Aladdin</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Aladdin</span></h2>
17 |             <p>
18 |                 When a street urchin finds a lamp with a genie inside, 
19 |                 he uses the lamp to turn himself into a prince in order to win the 
20 |                 heart of a beautiful princess. But an evil vizier is after the lamp too...
21 |             </p>
22 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
23 |         </div>
24 |     </div>
25 |     <div class="trailer">
26 |         <video src="Aladdin.mp4" controls="true"></video>
27 |         <img src="close.png" alt="" class="close" onclick="toggle();">
28 |     </div>
29 |     <script>
30 |         function toggle(){
31 |         var trailer=document.querySelector('.trailer');
32 |         let video=document.querySelector('.video');
33 |         trailer.classList.toggle('active');
34 |         video.currentTime = 0;
35 |         video.pause();
36 |     }
37 |     </script>
38 | </body>
39 | </html>


--------------------------------------------------------------------------------
/Aladdin/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Aladdin/bg.jpg


--------------------------------------------------------------------------------
/Aladdin/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Aladdin/close.png


--------------------------------------------------------------------------------
/Aladdin/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Aladdin/logo.png


--------------------------------------------------------------------------------
/Aladdin/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Aladdin/play.png


--------------------------------------------------------------------------------
/Aladdin/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Aladdin/toggle.png


--------------------------------------------------------------------------------
/AmzingSpiderMan2/Aladdin.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/
  2 | css?family=poppins:200,300,400,500,600,700,800,900&display=swap'); */
  3 | 
  4 | *{
  5 |     margin:0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Times New Roman', Times, serif;
  9 | }
 10 | header{
 11 |     position: absolute;
 12 |     top: 0;
 13 |     left: 0;
 14 |     width: 100%;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     padding: 40px 100px;
 18 |     z-index: 1000;
 19 | }
 20 | header .logo{
 21 |     max-width: 120px;
 22 | }
 23 | header .toggle{
 24 |     max-width: 60px;
 25 |     cursor: pointer;
 26 | }
 27 | .banner{
 28 |     position: relative;
 29 |     width: 100%;
 30 |     min-height: 100vh;
 31 |     padding: 0 100px;
 32 |     background: url(bg.jpg);
 33 |     background-position: center;
 34 |     background-size: cover;
 35 |     display: flex;
 36 |     justify-content: flex-start;
 37 |     align-items: center;
 38 | }
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 300;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: #fff;
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | .trailer{
 78 |     position: fixed;
 79 |     top: 50%;
 80 |     left: 50%;
 81 |     transform: translate(-50%,-50%);
 82 |     z-index: 10000;
 83 |     background: rgba(0, 0, 0, 0.95);
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     visibility: hidden;
 90 |     opacity: 0;
 91 | }
 92 | .trailer.active{
 93 |     visibility: visible;
 94 |     opacity: 1;
 95 | }
 96 | .trailer video{
 97 |     max-width: 900px;
 98 |     outline: none;
 99 | }
100 | .trailer .close{
101 |     position: absolute;
102 |     top: 30px;
103 |     right: 30px;
104 |     cursor: pointer;
105 |     filter: invert(1);
106 |     max-width: 32px;
107 | }
108 | 
109 | @media (max-width: 991px){
110 |     header{
111 |         padding: 20px 50px;
112 |     }
113 |     header{
114 |         padding: 20px 50px;
115 |     }
116 |     header .logo{
117 |         max-width: 80px;
118 |     }
119 |     header .toggle{
120 |         max-width: 40px;
121 |     }
122 |     .banner{
123 |         padding: 100px 50px;
124 |     }
125 |     .banner .content h2{
126 |         font-weight: 400;
127 |         font-size: 2em;
128 |         letter-spacing: 0.05em; 
129 |     }
130 |     .banner .content p{
131 |         font-size: 1em;
132 |     }
133 |     .trailer video{
134 |         max-width: 90%;
135 |         outline: none;
136 |     }
137 | }


--------------------------------------------------------------------------------
/AvengersEndGame/AvengersEndGame.css:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | *{
  4 |     margin:0;
  5 |     padding: 0;
  6 |     box-sizing: border-box;
  7 |     font-family: 'Times New Roman', Times, serif;
  8 | }
  9 | header{
 10 |     position: absolute;
 11 |     top: 0;
 12 |     left: 0;
 13 |     width: 100%;
 14 |     display: flex;
 15 |     justify-content: space-between;
 16 |     padding: 40px 100px;
 17 |     z-index: 1000;
 18 | }
 19 | header .logo{
 20 |     max-width: 120px;
 21 | }
 22 | header .toggle{
 23 |     max-width: 60px;
 24 |     cursor: pointer;
 25 | }
 26 | .banner{
 27 |     position: relative;
 28 |     width: 100%;
 29 |     min-height: 100vh;
 30 |     padding: 0 100px;
 31 |     background: url(bg.jpg);
 32 |     background-position: center;
 33 |     background-size: cover;
 34 |     display: flex;
 35 |     justify-content: flex-start;
 36 |     align-items: center;
 37 | }
 38 | .banner .content{
 39 |     max-width: 550px;
 40 | }
 41 | .banner .content h2{
 42 |     text-transform: uppercase;
 43 |     font-weight: 400;
 44 |     font-size: 2.5em;
 45 |     letter-spacing: 0.1em;
 46 |     color: #fff;
 47 | }
 48 | .banner .content h2 span{
 49 |     font-weight: 800;
 50 | }
 51 | .banner .content p{
 52 |     
 53 |     font-weight: 300;
 54 |     font-size: 1.2em;
 55 |     letter-spacing: 0.02em;
 56 |     line-height: 1.5em;
 57 |     color: #fff;
 58 |     margin: 15px 0 35px;
 59 | }
 60 | .play{
 61 |     position: relative;
 62 |     display: inline-flex;
 63 |     justify-content: flex-start;
 64 |     align-items: center;
 65 |     color: #fff;
 66 |     text-transform: uppercase;
 67 |     font-weight: 500;
 68 |     text-decoration: none;
 69 |     letter-spacing: 2px;
 70 |     font-size: 1.2em;
 71 | }
 72 | .play img{
 73 |     margin-right: 10px;
 74 |     max-width: 50px;
 75 | }
 76 | .trailer{
 77 |     position: fixed;
 78 |     top: 50%;
 79 |     left: 50%;
 80 |     transform: translate(-50%,-50%);
 81 |     z-index: 10000;
 82 |     background: rgba(0, 0, 0, 0.95);
 83 |     width: 100%;
 84 |     height: 100%;
 85 |     display: flex;
 86 |     justify-content: center;
 87 |     align-items: center;
 88 |     visibility: hidden;
 89 |     opacity: 0;
 90 | }
 91 | .trailer.active{
 92 |     visibility: visible;
 93 |     opacity: 1;
 94 | }
 95 | .trailer video{
 96 |     max-width: 900px;
 97 |     outline: none;
 98 | }
 99 | .trailer .close{
100 |     position: absolute;
101 |     top: 30px;
102 |     right: 30px;
103 |     cursor: pointer;
104 |     filter: invert(1);
105 |     max-width: 32px;
106 | }
107 | 
108 | @media (max-width: 991px){
109 |     header{
110 |         padding: 20px 50px;
111 |     }
112 |     header{
113 |         padding: 20px 50px;
114 |     }
115 |     header .logo{
116 |         max-width: 80px;
117 |     }
118 |     header .toggle{
119 |         max-width: 40px;
120 |     }
121 |     .banner{
122 |         padding: 100px 50px;
123 |     }
124 |     .banner .content h2{
125 |         font-weight: 400;
126 |         font-size: 2em;
127 |         letter-spacing: 0.05em; 
128 |     }
129 |     .banner .content p{
130 |         font-size: 1em;
131 |     }
132 |     .trailer video{
133 |         max-width: 90%;
134 |         outline: none;
135 |     }
136 | }


--------------------------------------------------------------------------------
/AvengersEndGame/AvengersEndGame.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Avengers End Game</title>
 7 | 
 8 |     <link rel="stylesheet" href="AvengersEndGame.css">
 9 | 
10 | </head>
11 | <body>
12 |     <header>
13 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
14 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
15 |     </header>
16 |     <div class="banner">
17 |         <div class="content">
18 |             <h2>Avengers <span>End Game</span> </h2>
19 |             <p>
20 |                 Avengers: Endgame is a 2019 American superhero film based on the 
21 |                 Marvel Comics superhero team the Avengers, produced by Marvel Studios 
22 |                 and distributed by Walt Disney Studios Motion Pictures. It is the direct 
23 |                 sequel to Avengers: Infinity War (2018) and the 22nd film in the Marvel 
24 |                 Cinematic Universe (MCU). The film was directed by Anthony and Joe Russo 
25 |                 and written by Christopher Markus and Stephen McFeely, and features an 
26 |                 ensemble cast including Robert Downey Jr., Chris Evans, Mark Ruffalo, 
27 |                 Chris Hemsworth, Scarlett Johansson, Jeremy Renner, Don Cheadle, 
28 |                 Paul Rudd, Brie Larson, Karen Gillan, Danai Gurira, Benedict Wong, 
29 |                 Jon Favreau, Bradley Cooper, Gwyneth Paltrow, and Josh Brolin....
30 |             </p>
31 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
32 |         </div>
33 |     </div>
34 |     <div class="trailer">
35 |         <video src="AvengersEndGame.mp4" controls="true"></video>
36 |         <img src="close.png" alt="" class="close" onclick="toggle();">
37 |     </div>
38 | 
39 | 
40 | 
41 |     <script>
42 |         function toggle(){
43 |         var trailer=document.querySelector('.trailer');
44 |         let video=document.querySelector('.video');
45 |         trailer.classList.toggle('active');
46 |         video.currentTime = 0;
47 |         video.pause();
48 |     }
49 |     </script>
50 | </body>
51 | </html>


--------------------------------------------------------------------------------
/AvengersEndGame/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/AvengersEndGame/bg.jpg


--------------------------------------------------------------------------------
/AvengersEndGame/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/AvengersEndGame/close.png


--------------------------------------------------------------------------------
/AvengersEndGame/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/AvengersEndGame/logo.png


--------------------------------------------------------------------------------
/AvengersEndGame/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/AvengersEndGame/play.png


--------------------------------------------------------------------------------
/AvengersEndGame/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/AvengersEndGame/toggle.png


--------------------------------------------------------------------------------
/AvengersInfinityWar/AvengersInfinityWar.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="AvengersInfinityWar.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Avengers: Infinity War</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Avengers Infinity War</span></h2>
17 |             <p>
18 |                 As the Avengers and their allies have continued to protect the world from threats too large 
19 |                 for any one hero to handle, a new danger has emerged from the cosmic shadows: Thanos. 
20 |                 A despot of intergalactic infamy, his goal is to collect all six Infinity Stones, 
21 |                 artifacts of unimaginable power, and use them to inflict his twisted will on all of reality. 
22 |                 Everything the Avengers have fought for has led up to this moment, the fate of Earth and 
23 |                 existence has never been more uncertain.....
24 |             </p>
25 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
26 |         </div>
27 |     </div>
28 |     <div class="trailer">
29 |         <video src="AvengersInfinityWar.mp4" controls="true"></video>
30 |         <img src="close.png" alt="" class="close" onclick="toggle();">
31 |     </div>
32 |     <script>
33 |         function toggle(){
34 |         var trailer=document.querySelector('.trailer');
35 |         let video=document.querySelector('.video');
36 |         trailer.classList.toggle('active');
37 |         video.currentTime = 0;
38 |         video.pause();
39 |     }
40 |     </script>
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/AvengersInfinityWar/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/AvengersInfinityWar/bg.jpg


--------------------------------------------------------------------------------
/AvengersInfinityWar/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/AvengersInfinityWar/close.png


--------------------------------------------------------------------------------
/AvengersInfinityWar/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/AvengersInfinityWar/logo.png


--------------------------------------------------------------------------------
/AvengersInfinityWar/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/AvengersInfinityWar/play.png


--------------------------------------------------------------------------------
/AvengersInfinityWar/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/AvengersInfinityWar/toggle.png


--------------------------------------------------------------------------------
/Bahubali2/Bahubali2.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/
  2 | css?family=poppins:200,300,400,500,600,700,800,900&display=swap'); */
  3 | 
  4 | *{
  5 |     margin:0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Times New Roman', Times, serif;
  9 | }
 10 | header{
 11 |     position: absolute;
 12 |     top: 0;
 13 |     left: 0;
 14 |     width: 100%;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     padding: 40px 100px;
 18 |     z-index: 1000;
 19 | }
 20 | header .logo{
 21 |     max-width: 120px;
 22 | }
 23 | header .toggle{
 24 |     max-width: 60px;
 25 |     cursor: pointer;
 26 | }
 27 | .banner{
 28 |     position: relative;
 29 |     width: 100%;
 30 |     min-height: 100vh;
 31 |     padding: 0 100px;
 32 |     background: url(bg.jpg);
 33 |     background-position: center;
 34 |     background-size: cover;
 35 |     display: flex;
 36 |     justify-content: flex-start;
 37 |     align-items: center;
 38 | }
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 700;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: rgb(0, 0, 0);
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | .trailer{
 78 |     position: fixed;
 79 |     top: 50%;
 80 |     left: 50%;
 81 |     transform: translate(-50%,-50%);
 82 |     z-index: 10000;
 83 |     background: rgba(0, 0, 0, 0.95);
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     visibility: hidden;
 90 |     opacity: 0;
 91 | }
 92 | .trailer.active{
 93 |     visibility: visible;
 94 |     opacity: 1;
 95 | }
 96 | .trailer video{
 97 |     max-width: 900px;
 98 |     outline: none;
 99 | }
100 | .trailer .close{
101 |     position: absolute;
102 |     top: 30px;
103 |     right: 30px;
104 |     cursor: pointer;
105 |     filter: invert(1);
106 |     max-width: 32px;
107 | }
108 | 
109 | @media (max-width: 991px){
110 |     header{
111 |         padding: 20px 50px;
112 |     }
113 |     header{
114 |         padding: 20px 50px;
115 |     }
116 |     header .logo{
117 |         max-width: 80px;
118 |     }
119 |     header .toggle{
120 |         max-width: 40px;
121 |     }
122 |     .banner{
123 |         padding: 100px 50px;
124 |     }
125 |     .banner .content h2{
126 |         font-weight: 400;
127 |         font-size: 2em;
128 |         letter-spacing: 0.05em; 
129 |     }
130 |     .banner .content p{
131 |         font-size: 1em;
132 |     }
133 |     .trailer video{
134 |         max-width: 90%;
135 |         outline: none;
136 |     }
137 | }


--------------------------------------------------------------------------------
/Bahubali2/Bahubali2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="Bahubali2.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Bahubali 2</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>The Conclusion</span></h2>
17 |             <p>
18 |                 Kattappa narrates the story of Amarendra Baahubali to Shivudu, 
19 |                 who learns his lineage as the prince of Mahishmati and the son of Amarendra Baahubali. 
20 |                 Shivudu, now Mahendra Baahubali, decides to dethrone and punish Bhallaladeva for all 
21 |                 wrongdoings of his past with the help of Kattappa.....
22 |             </p>
23 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
24 |         </div>
25 |     </div>
26 |     <div class="trailer">
27 |         <video src="Bahubali2.mp4" controls="true"></video>
28 |         <img src="close.png" alt="" class="close" onclick="toggle();">
29 |     </div>
30 |     <script>
31 |         function toggle(){
32 |         var trailer=document.querySelector('.trailer');
33 |         let video=document.querySelector('.video');
34 |         trailer.classList.toggle('active');
35 |         video.currentTime = 0;
36 |         video.pause();
37 |     }
38 |     </script>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/Bahubali2/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Bahubali2/bg.jpg


--------------------------------------------------------------------------------
/Bahubali2/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Bahubali2/close.png


--------------------------------------------------------------------------------
/Bahubali2/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Bahubali2/logo.png


--------------------------------------------------------------------------------
/Bahubali2/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Bahubali2/play.png


--------------------------------------------------------------------------------
/Bahubali2/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Bahubali2/toggle.png


--------------------------------------------------------------------------------
/BhootPartOne/BhootPartOne.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/
  2 | css?family=poppins:200,300,400,500,600,700,800,900&display=swap'); */
  3 | 
  4 | *{
  5 |     margin:0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Times New Roman', Times, serif;
  9 | }
 10 | header{
 11 |     position: absolute;
 12 |     top: 0;
 13 |     left: 0;
 14 |     width: 100%;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     padding: 40px 100px;
 18 |     z-index: 1000;
 19 | }
 20 | header .logo{
 21 |     max-width: 120px;
 22 | }
 23 | header .toggle{
 24 |     max-width: 60px;
 25 |     cursor: pointer;
 26 | }
 27 | .banner{
 28 |     position: relative;
 29 |     width: 100%;
 30 |     min-height: 100vh;
 31 |     padding: 0 100px;
 32 |     background: url(bg.jpg);
 33 |     background-position: center;
 34 |     background-size: cover;
 35 |     display: flex;
 36 |     justify-content: flex-start;
 37 |     align-items: center;
 38 | }
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 300;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: #fff;
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | .trailer{
 78 |     position: fixed;
 79 |     top: 50%;
 80 |     left: 50%;
 81 |     transform: translate(-50%,-50%);
 82 |     z-index: 10000;
 83 |     background: rgba(0, 0, 0, 0.95);
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     visibility: hidden;
 90 |     opacity: 0;
 91 | }
 92 | .trailer.active{
 93 |     visibility: visible;
 94 |     opacity: 1;
 95 | }
 96 | .trailer video{
 97 |     max-width: 900px;
 98 |     outline: none;
 99 | }
100 | .trailer .close{
101 |     position: absolute;
102 |     top: 30px;
103 |     right: 30px;
104 |     cursor: pointer;
105 |     filter: invert(1);
106 |     max-width: 32px;
107 | }
108 | 
109 | @media (max-width: 991px){
110 |     header{
111 |         padding: 20px 50px;
112 |     }
113 |     header{
114 |         padding: 20px 50px;
115 |     }
116 |     header .logo{
117 |         max-width: 80px;
118 |     }
119 |     header .toggle{
120 |         max-width: 40px;
121 |     }
122 |     .banner{
123 |         padding: 100px 50px;
124 |     }
125 |     .banner .content h2{
126 |         font-weight: 400;
127 |         font-size: 2em;
128 |         letter-spacing: 0.05em; 
129 |     }
130 |     .banner .content p{
131 |         font-size: 1em;
132 |     }
133 |     .trailer video{
134 |         max-width: 90%;
135 |         outline: none;
136 |     }
137 | }


--------------------------------------------------------------------------------
/BhootPartOne/BhootPartOne.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="BhootPartOne.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Bhoot:Part One</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Bhoot Part One</span></h2>
17 |             <p>
18 |                 When an abandoned and dilapidated ship called the Sea Bird mysteriously runs 
19 |                 aground on the shores of Mumbai, one man is assigned to close the case. But the 
20 |                 sinister stories surrounding the ship may have more truth to them than he previously 
21 |                 thought.....
22 |             </p>
23 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
24 |         </div>
25 |     </div>
26 |     <div class="trailer">
27 |         <video src="BhootPartOne.mp4" controls="true"></video>
28 |         <img src="close.png" alt="" class="close" onclick="toggle();">
29 |     </div>
30 |     <script>
31 |         function toggle(){
32 |         var trailer=document.querySelector('.trailer');
33 |         let video=document.querySelector('.video');
34 |         trailer.classList.toggle('active');
35 |         video.currentTime = 0;
36 |         video.pause();
37 |     }
38 |     </script>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/BhootPartOne/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/BhootPartOne/bg.jpg


--------------------------------------------------------------------------------
/BhootPartOne/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/BhootPartOne/close.png


--------------------------------------------------------------------------------
/BhootPartOne/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/BhootPartOne/logo.png


--------------------------------------------------------------------------------
/BhootPartOne/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/BhootPartOne/play.png


--------------------------------------------------------------------------------
/BhootPartOne/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/BhootPartOne/toggle.png


--------------------------------------------------------------------------------
/BlackPanther/BlackPanther.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/
  2 | css?family=poppins:200,300,400,500,600,700,800,900&display=swap'); */
  3 | 
  4 | *{
  5 |     margin:0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Times New Roman', Times, serif;
  9 | }
 10 | header{
 11 |     position: absolute;
 12 |     top: 0;
 13 |     left: 0;
 14 |     width: 100%;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     padding: 40px 100px;
 18 |     z-index: 1000;
 19 | }
 20 | header .logo{
 21 |     max-width: 120px;
 22 | }
 23 | header .toggle{
 24 |     max-width: 60px;
 25 |     cursor: pointer;
 26 | }
 27 | .banner{
 28 |     position: relative;
 29 |     width: 100%;
 30 |     min-height: 100vh;
 31 |     padding: 0 100px;
 32 |     background: url(bg.jpg);
 33 |     background-position: center;
 34 |     background-size: cover;
 35 |     display: flex;
 36 |     justify-content: flex-start;
 37 |     align-items: center;
 38 | }
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 300;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: #fff;
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | .trailer{
 78 |     position: fixed;
 79 |     top: 50%;
 80 |     left: 50%;
 81 |     transform: translate(-50%,-50%);
 82 |     z-index: 10000;
 83 |     background: rgba(0, 0, 0, 0.95);
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     visibility: hidden;
 90 |     opacity: 0;
 91 | }
 92 | .trailer.active{
 93 |     visibility: visible;
 94 |     opacity: 1;
 95 | }
 96 | .trailer video{
 97 |     max-width: 900px;
 98 |     outline: none;
 99 | }
100 | .trailer .close{
101 |     position: absolute;
102 |     top: 30px;
103 |     right: 30px;
104 |     cursor: pointer;
105 |     filter: invert(1);
106 |     max-width: 32px;
107 | }
108 | 
109 | @media (max-width: 991px){
110 |     header{
111 |         padding: 20px 50px;
112 |     }
113 |     header{
114 |         padding: 20px 50px;
115 |     }
116 |     header .logo{
117 |         max-width: 80px;
118 |     }
119 |     header .toggle{
120 |         max-width: 40px;
121 |     }
122 |     .banner{
123 |         padding: 100px 50px;
124 |     }
125 |     .banner .content h2{
126 |         font-weight: 400;
127 |         font-size: 2em;
128 |         letter-spacing: 0.05em; 
129 |     }
130 |     .banner .content p{
131 |         font-size: 1em;
132 |     }
133 |     .trailer video{
134 |         max-width: 90%;
135 |         outline: none;
136 |     }
137 | }


--------------------------------------------------------------------------------
/BlackPanther/BlackPanther.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="BlackPanther.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Black Panther</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Black Panther</span></h2>
17 |             <p>
18 |                 Thousands of years ago, five African tribes war over a meteorite containing the metal 
19 |                 vibranium. One warrior ingests a "heart-shaped herb" affected by the metal and gains 
20 |                 superhuman abilities, becoming the first "Black Panther". He unites all but the Jabari Tribe 
21 |                 to form the nation of Wakanda. Over centuries, the Wakandans use the vibranium to develop 
22 |                 advanced technology and isolate themselves from the world by posing as a Third World country. 
23 |                 In 1992, Wakanda's King T'Chaka visits his brother N'Jobu, who is working undercover in Oakland, 
24 |                 California.....
25 |             </p>
26 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
27 |         </div>
28 |     </div>
29 |     <div class="trailer">
30 |         <video src="BlackPanther.mp4" controls="true"></video>
31 |         <img src="close.png" alt="" class="close" onclick="toggle();">
32 |     </div>
33 |     <script>
34 |         function toggle(){
35 |         var trailer=document.querySelector('.trailer');
36 |         let video=document.querySelector('.video');
37 |         trailer.classList.toggle('active');
38 |         video.currentTime = 0;
39 |         video.pause();
40 |     }
41 |     </script>
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/BlackPanther/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/BlackPanther/bg.jpg


--------------------------------------------------------------------------------
/BlackPanther/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/BlackPanther/close.png


--------------------------------------------------------------------------------
/BlackPanther/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/BlackPanther/logo.png


--------------------------------------------------------------------------------
/BlackPanther/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/BlackPanther/play.png


--------------------------------------------------------------------------------
/BlackPanther/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/BlackPanther/toggle.png


--------------------------------------------------------------------------------
/BlackWidow/BlackWidow.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/
  2 | css?family=poppins:200,300,400,500,600,700,800,900&display=swap'); */
  3 | 
  4 | *{
  5 |     margin:0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Times New Roman', Times, serif;
  9 | }
 10 | header{
 11 |     position: absolute;
 12 |     top: 0;
 13 |     left: 0;
 14 |     width: 100%;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     padding: 40px 100px;
 18 |     z-index: 1000;
 19 | }
 20 | header .logo{
 21 |     max-width: 120px;
 22 | }
 23 | header .toggle{
 24 |     max-width: 60px;
 25 |     cursor: pointer;
 26 | }
 27 | .banner{
 28 |     position: relative;
 29 |     width: 100%;
 30 |     min-height: 100vh;
 31 |     padding: 0 100px;
 32 |     background: url(bg.jpg);
 33 |     background-position: center;
 34 |     background-size: cover;
 35 |     display: flex;
 36 |     justify-content: flex-start;
 37 |     align-items: center;
 38 | }
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 300;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: #fff;
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | .trailer{
 78 |     position: fixed;
 79 |     top: 50%;
 80 |     left: 50%;
 81 |     transform: translate(-50%,-50%);
 82 |     z-index: 10000;
 83 |     background: rgba(0, 0, 0, 0.95);
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     visibility: hidden;
 90 |     opacity: 0;
 91 | }
 92 | .trailer.active{
 93 |     visibility: visible;
 94 |     opacity: 1;
 95 | }
 96 | .trailer video{
 97 |     max-width: 900px;
 98 |     outline: none;
 99 | }
100 | .trailer .close{
101 |     position: absolute;
102 |     top: 30px;
103 |     right: 30px;
104 |     cursor: pointer;
105 |     filter: invert(1);
106 |     max-width: 32px;
107 | }
108 | 
109 | @media (max-width: 991px){
110 |     header{
111 |         padding: 20px 50px;
112 |     }
113 |     header{
114 |         padding: 20px 50px;
115 |     }
116 |     header .logo{
117 |         max-width: 80px;
118 |     }
119 |     header .toggle{
120 |         max-width: 40px;
121 |     }
122 |     .banner{
123 |         padding: 100px 50px;
124 |     }
125 |     .banner .content h2{
126 |         font-weight: 400;
127 |         font-size: 2em;
128 |         letter-spacing: 0.05em; 
129 |     }
130 |     .banner .content p{
131 |         font-size: 1em;
132 |     }
133 |     .trailer video{
134 |         max-width: 90%;
135 |         outline: none;
136 |     }
137 | }


--------------------------------------------------------------------------------
/BlackWidow/BlackWidow.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="BlackWidow.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Black Widow</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Black Widow</span></h2>
17 |             <p>
18 |                 In Marvel Studios’ action-packed spy thriller “Black Widow,” Natasha Romanoff aka Black Widow confronts the darker parts 
19 |                 of her ledger when a dangerous conspiracy with ties to her past arises. Pursued by a force that will stop at nothing to 
20 |                 bring her down, Natasha must deal with her history as a spy and the broken relationships left in her wake long before she 
21 |                 became an Avenger.
22 |             </p>
23 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch trailer</a>
24 |         </div>
25 |     </div>
26 |     <div class="trailer">
27 |         <video src="BlackWidow.mp4" controls="true"></video>
28 |         <img src="close.png" alt="" class="close" onclick="toggle();">
29 |     </div>
30 |     <script>
31 |         function toggle(){
32 |         var trailer=document.querySelector('.trailer');
33 |         let video=document.querySelector('.video');
34 |         trailer.classList.toggle('active');
35 |         video.currentTime = 0;
36 |         video.pause();
37 |     }
38 |     </script>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/BlackWidow/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/BlackWidow/bg.jpg


--------------------------------------------------------------------------------
/BlackWidow/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/BlackWidow/close.png


--------------------------------------------------------------------------------
/BlackWidow/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/BlackWidow/logo.png


--------------------------------------------------------------------------------
/BlackWidow/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/BlackWidow/play.png


--------------------------------------------------------------------------------
/BlackWidow/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/BlackWidow/toggle.png


--------------------------------------------------------------------------------
/Bloodshot/Bloodshot.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/
  2 | css?family=poppins:200,300,400,500,600,700,800,900&display=swap'); */
  3 | 
  4 | *{
  5 |     margin:0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Times New Roman', Times, serif;
  9 | }
 10 | header{
 11 |     position: absolute;
 12 |     top: 0;
 13 |     left: 0;
 14 |     width: 100%;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     padding: 40px 100px;
 18 |     z-index: 1000;
 19 | }
 20 | header .logo{
 21 |     max-width: 120px;
 22 | }
 23 | header .toggle{
 24 |     max-width: 60px;
 25 |     cursor: pointer;
 26 | }
 27 | .banner{
 28 |     position: relative;
 29 |     width: 100%;
 30 |     min-height: 100vh;
 31 |     padding: 0 100px;
 32 |     background: url(bg.jpg);
 33 |     background-position: center;
 34 |     background-size: cover;
 35 |     display: flex;
 36 |     justify-content: flex-start;
 37 |     align-items: center;
 38 | }
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 300;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: #fff;
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | .trailer{
 78 |     position: fixed;
 79 |     top: 50%;
 80 |     left: 50%;
 81 |     transform: translate(-50%,-50%);
 82 |     z-index: 10000;
 83 |     background: rgba(0, 0, 0, 0.95);
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     visibility: hidden;
 90 |     opacity: 0;
 91 | }
 92 | .trailer.active{
 93 |     visibility: visible;
 94 |     opacity: 1;
 95 | }
 96 | .trailer video{
 97 |     max-width: 900px;
 98 |     outline: none;
 99 | }
100 | .trailer .close{
101 |     position: absolute;
102 |     top: 30px;
103 |     right: 30px;
104 |     cursor: pointer;
105 |     filter: invert(1);
106 |     max-width: 32px;
107 | }
108 | 
109 | @media (max-width: 991px){
110 |     header{
111 |         padding: 20px 50px;
112 |     }
113 |     header{
114 |         padding: 20px 50px;
115 |     }
116 |     header .logo{
117 |         max-width: 80px;
118 |     }
119 |     header .toggle{
120 |         max-width: 40px;
121 |     }
122 |     .banner{
123 |         padding: 100px 50px;
124 |     }
125 |     .banner .content h2{
126 |         font-weight: 400;
127 |         font-size: 2em;
128 |         letter-spacing: 0.05em; 
129 |     }
130 |     .banner .content p{
131 |         font-size: 1em;
132 |     }
133 |     .trailer video{
134 |         max-width: 90%;
135 |         outline: none;
136 |     }
137 | }


--------------------------------------------------------------------------------
/Bloodshot/Bloodshot.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="Bloodshot.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Bloodshot</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Bloodshot</span></h2>
17 |             <p>
18 |                 Ray Garrison, an elite soldier who was killed in battle, is brought back to life by an advanced 
19 |                 technology that gives him the ability of super human strength and fast healing. With his new 
20 |                 abilities, he goes after the man who killed his wife, or at least, who he believes killed his 
21 |                 wife. He soon comes to learn that not everything he learns can be trusted. The true question is: 
22 |                 Can he even trust himself?.....
23 |             </p>
24 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
25 |         </div>
26 |     </div>
27 |     <div class="trailer">
28 |         <video src="Bloodshot.mp4" controls="true"></video>
29 |         <img src="close.png" alt="" class="close" onclick="toggle();">
30 |     </div>
31 |     <script>
32 |         function toggle(){
33 |         var trailer=document.querySelector('.trailer');
34 |         let video=document.querySelector('.video');
35 |         trailer.classList.toggle('active');
36 |         video.currentTime = 0;
37 |         video.pause();
38 |     }
39 |     </script>
40 | </body>
41 | </html>


--------------------------------------------------------------------------------
/Bloodshot/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Bloodshot/bg.jpg


--------------------------------------------------------------------------------
/Bloodshot/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Bloodshot/close.png


--------------------------------------------------------------------------------
/Bloodshot/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Bloodshot/logo.png


--------------------------------------------------------------------------------
/Bloodshot/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Bloodshot/play.png


--------------------------------------------------------------------------------
/Bloodshot/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Bloodshot/toggle.png


--------------------------------------------------------------------------------
/CaptainMarvel/CaptainMarvel.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="CaptainMarvel.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Captain Marvel</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Captain Marvel</span></h2>
17 |             <p>
18 |                 After crashing an experimental aircraft, Air Force pilot Carol Danvers is 
19 |                 discovered by the Kree and trained as a member of the elite Starforce Military under 
20 |                 the command of her mentor Yon-Rogg. Six years later, after escaping to Earth while under 
21 |                 attack by the Skrulls, Danvers begins to discover there's more to her past. With help 
22 |                 from S.H.I.E.L.D. agent Nick Fury, they set out to unravel the truth.....
23 |             </p>
24 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
25 |         </div>
26 |     </div>
27 |     <div class="trailer">
28 |         <video src="CaptainMarvel.mp4" controls="true"></video>
29 |         <img src="close.png" alt="" class="close" onclick="toggle();">
30 |     </div>
31 |     <script>
32 |         function toggle(){
33 |         var trailer=document.querySelector('.trailer');
34 |         let video=document.querySelector('.video');
35 |         trailer.classList.toggle('active');
36 |         video.currentTime = 0;
37 |         video.pause();
38 |     }
39 |     </script>
40 | </body>
41 | </html>


--------------------------------------------------------------------------------
/CaptainMarvel/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/CaptainMarvel/bg.jpg


--------------------------------------------------------------------------------
/CaptainMarvel/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/CaptainMarvel/close.png


--------------------------------------------------------------------------------
/CaptainMarvel/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/CaptainMarvel/logo.png


--------------------------------------------------------------------------------
/CaptainMarvel/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/CaptainMarvel/play.png


--------------------------------------------------------------------------------
/CaptainMarvel/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/CaptainMarvel/toggle.png


--------------------------------------------------------------------------------
/Compressed Images/Aladdin-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/Aladdin-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/AmzingSpiderMan2-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/AmzingSpiderMan2-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/AntMan-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/AntMan-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/AntMan2-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/AntMan2-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/Aquaman-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/Aquaman-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/AvengersEndGame-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/AvengersEndGame-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/AvengersInfinityWar-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/AvengersInfinityWar-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/Bahubali2-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/Bahubali2-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/BhootPartOne-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/BhootPartOne-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/BlackPanther-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/BlackPanther-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/BlackWidow-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/BlackWidow-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/Bloodshot-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/Bloodshot-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/Darbar-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/Darbar-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/Deadpool2-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/Deadpool2-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/Dhaakad-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/Dhaakad-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/DoctorStrange-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/DoctorStrange-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/Drive-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/Drive-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/GuardiansoftheGalaxy-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/GuardiansoftheGalaxy-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/Inception-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/Inception-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/Incredibles2-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/Incredibles2-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/IntoTheWoods-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/IntoTheWoods-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/JohnWick-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/JohnWick-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/Joker-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/Joker-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/JungleCruise-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/JungleCruise-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/KabirSingh-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/KabirSingh-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/Kin-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/Kin-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/Morbius-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/Morbius-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/Padmaavat-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/Padmaavat-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/PeterRabbit2TheRunaway-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/PeterRabbit2TheRunaway-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/ProjectPower-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/ProjectPower-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/Shivaay-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/Shivaay-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/SonictheHedgehog-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/SonictheHedgehog-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/Sooryavanshi-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/Sooryavanshi-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/SpiderManIntoTheSpiderVerse-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/SpiderManIntoTheSpiderVerse-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/TheBatman-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/TheBatman-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/TheDarkKnight-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/TheDarkKnight-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/TheGodfatherPart2-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/TheGodfatherPart2-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/ToyStory-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/ToyStory-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/Venom2-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/Venom2-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/WonderWoman-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/WonderWoman-compressed.jpg


--------------------------------------------------------------------------------
/Compressed Images/WonderWoman1984-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Compressed Images/WonderWoman1984-compressed.jpg


--------------------------------------------------------------------------------
/Darbar/Darbar.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/
  2 | css?family=poppins:200,300,400,500,600,700,800,900&display=swap'); */
  3 | 
  4 | *{
  5 |     margin:0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Times New Roman', Times, serif;
  9 | }
 10 | header{
 11 |     position: absolute;
 12 |     top: 0;
 13 |     left: 0;
 14 |     width: 100%;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     padding: 40px 100px;
 18 |     z-index: 1000;
 19 | }
 20 | header .logo{
 21 |     max-width: 120px;
 22 | }
 23 | header .toggle{
 24 |     max-width: 60px;
 25 |     cursor: pointer;
 26 | }
 27 | .banner{
 28 |     position: relative;
 29 |     width: 100%;
 30 |     min-height: 100vh;
 31 |     padding: 0 100px;
 32 |     background: url(bg.jpg);
 33 |     background-position: center;
 34 |     background-size: cover;
 35 |     display: flex;
 36 |     justify-content: flex-start;
 37 |     align-items: center;
 38 | }
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 300;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: #fff;
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | .trailer{
 78 |     position: fixed;
 79 |     top: 50%;
 80 |     left: 50%;
 81 |     transform: translate(-50%,-50%);
 82 |     z-index: 10000;
 83 |     background: rgba(0, 0, 0, 0.95);
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     visibility: hidden;
 90 |     opacity: 0;
 91 | }
 92 | .trailer.active{
 93 |     visibility: visible;
 94 |     opacity: 1;
 95 | }
 96 | .trailer video{
 97 |     max-width: 900px;
 98 |     outline: none;
 99 | }
100 | .trailer .close{
101 |     position: absolute;
102 |     top: 30px;
103 |     right: 30px;
104 |     cursor: pointer;
105 |     filter: invert(1);
106 |     max-width: 32px;
107 | }
108 | 
109 | @media (max-width: 991px){
110 |     header{
111 |         padding: 20px 50px;
112 |     }
113 |     header{
114 |         padding: 20px 50px;
115 |     }
116 |     header .logo{
117 |         max-width: 80px;
118 |     }
119 |     header .toggle{
120 |         max-width: 40px;
121 |     }
122 |     .banner{
123 |         padding: 100px 50px;
124 |     }
125 |     .banner .content h2{
126 |         font-weight: 400;
127 |         font-size: 2em;
128 |         letter-spacing: 0.05em; 
129 |     }
130 |     .banner .content p{
131 |         font-size: 1em;
132 |     }
133 |     .trailer video{
134 |         max-width: 90%;
135 |         outline: none;
136 |     }
137 | }


--------------------------------------------------------------------------------
/Darbar/Darbar.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="Darbar.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Darbar</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Darbar</span></h2>
17 |             <p>
18 |                 Aaditya Arunachalam, the Commissioner of Mumbai Police, is seen killing numerous gangsters 
19 |                 across Mumbai in police encounters. He is shown to be reckless and has become the target for 
20 |                 widespread criticism and condemnation. His action finally prompt the National Human Rights 
21 |                 Commission of India to take action against him. In a flashback, Aaditya, a distinguished cop, 
22 |                 is assigned to take charge as the Commissioner of Police for Mumbai, in a bid by the police 
23 |                 department to curb rampant drug-trafficking and prostitution in the city. He arrives in Mumbai 
24 |                 with his daughter Valli, to take charge as the new Commissioner of Police. Upon arrival, 
25 |                 he rescues three women, one of whom is the daughter of the Deputy Chief Minister of 
26 |                 Maharashtra....
27 |             </p>
28 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
29 |         </div>
30 |     </div>
31 |     <div class="trailer">
32 |         <video src="Darbar.mp4" controls="true"></video>
33 |         <img src="close.png" alt="" class="close" onclick="toggle();">
34 |     </div>
35 |     <script>
36 |         function toggle(){
37 |         var trailer=document.querySelector('.trailer');
38 |         let video=document.querySelector('.video');
39 |         trailer.classList.toggle('active');
40 |         video.currentTime = 0;
41 |         video.pause();
42 |     }
43 |     </script>
44 | </body>
45 | </html>


--------------------------------------------------------------------------------
/Darbar/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Darbar/bg.jpg


--------------------------------------------------------------------------------
/Darbar/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Darbar/close.png


--------------------------------------------------------------------------------
/Darbar/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Darbar/logo.png


--------------------------------------------------------------------------------
/Darbar/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Darbar/play.png


--------------------------------------------------------------------------------
/Darbar/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Darbar/toggle.png


--------------------------------------------------------------------------------
/Deadpool2/Deadpool2.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/
  2 | css?family=poppins:200,300,400,500,600,700,800,900&display=swap'); */
  3 | 
  4 | *{
  5 |     margin:0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Times New Roman', Times, serif;
  9 | }
 10 | header{
 11 |     position: absolute;
 12 |     top: 0;
 13 |     left: 0;
 14 |     width: 100%;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     padding: 40px 100px;
 18 |     z-index: 1000;
 19 | }
 20 | header .logo{
 21 |     max-width: 120px;
 22 | }
 23 | header .toggle{
 24 |     max-width: 60px;
 25 |     cursor: pointer;
 26 | }
 27 | .banner{
 28 |     position: relative;
 29 |     width: 100%;
 30 |     min-height: 100vh;
 31 |     padding: 0 100px;
 32 |     background: url(bg.jpg);
 33 |     background-position: center;
 34 |     background-size: cover;
 35 |     display: flex;
 36 |     justify-content: flex-start;
 37 |     align-items: center;
 38 | }
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 300;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: #fff;
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | .trailer{
 78 |     position: fixed;
 79 |     top: 50%;
 80 |     left: 50%;
 81 |     transform: translate(-50%,-50%);
 82 |     z-index: 10000;
 83 |     background: rgba(0, 0, 0, 0.95);
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     visibility: hidden;
 90 |     opacity: 0;
 91 | }
 92 | .trailer.active{
 93 |     visibility: visible;
 94 |     opacity: 1;
 95 | }
 96 | .trailer video{
 97 |     max-width: 900px;
 98 |     outline: none;
 99 | }
100 | .trailer .close{
101 |     position: absolute;
102 |     top: 30px;
103 |     right: 30px;
104 |     cursor: pointer;
105 |     filter: invert(1);
106 |     max-width: 32px;
107 | }
108 | 
109 | @media (max-width: 991px){
110 |     header{
111 |         padding: 20px 50px;
112 |     }
113 |     header{
114 |         padding: 20px 50px;
115 |     }
116 |     header .logo{
117 |         max-width: 80px;
118 |     }
119 |     header .toggle{
120 |         max-width: 40px;
121 |     }
122 |     .banner{
123 |         padding: 100px 50px;
124 |     }
125 |     .banner .content h2{
126 |         font-weight: 400;
127 |         font-size: 2em;
128 |         letter-spacing: 0.05em; 
129 |     }
130 |     .banner .content p{
131 |         font-size: 1em;
132 |     }
133 |     .trailer video{
134 |         max-width: 90%;
135 |         outline: none;
136 |     }
137 | }


--------------------------------------------------------------------------------
/Deadpool2/Deadpool2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="Deadpool2.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Deadpool 2</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Deadpool 2</span> </h2>
17 |             <p>
18 |                 After losing Vanessa (Morena Baccarin), the love of his life, 4th-wall 
19 |                 breaking mercenary Wade Wilson aka Deadpool (Ryan Reynolds) must assemble 
20 |                 a team and protect a young, full-figured mutant Russell Collins aka Firefist 
21 |                 (Julian Dennison) from Cable (Josh Brolin), a no-nonsense, dangerous cyborg from 
22 |                 the future, and must also learn the most important lesson of all: to be part 
23 |                 of a family again.....
24 |             </p>
25 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
26 |         </div>
27 |     </div>
28 |     <div class="trailer">
29 |         <video src="Deadpool2.mp4" controls="true"></video>
30 |         <img src="close.png" alt="" class="close" onclick="toggle();">
31 |     </div>
32 |     <script>
33 |         function toggle(){
34 |         var trailer=document.querySelector('.trailer');
35 |         let video=document.querySelector('.video');
36 |         trailer.classList.toggle('active');
37 |         video.currentTime = 0;
38 |         video.pause();
39 |     }
40 |     </script>
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/Deadpool2/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Deadpool2/bg.jpg


--------------------------------------------------------------------------------
/Deadpool2/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Deadpool2/close.png


--------------------------------------------------------------------------------
/Deadpool2/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Deadpool2/logo.png


--------------------------------------------------------------------------------
/Deadpool2/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Deadpool2/play.png


--------------------------------------------------------------------------------
/Deadpool2/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Deadpool2/toggle.png


--------------------------------------------------------------------------------
/Dhaakad/Dhaakad.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/
  2 | css?family=poppins:200,300,400,500,600,700,800,900&display=swap'); */
  3 | 
  4 | *{
  5 |     margin:0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Times New Roman', Times, serif;
  9 | }
 10 | header{
 11 |     position: absolute;
 12 |     top: 0;
 13 |     left: 0;
 14 |     width: 100%;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     padding: 40px 100px;
 18 |     z-index: 1000;
 19 | }
 20 | header .logo{
 21 |     max-width: 120px;
 22 | }
 23 | header .toggle{
 24 |     max-width: 60px;
 25 |     cursor: pointer;
 26 | }
 27 | .banner{
 28 |     position: relative;
 29 |     width: 100%;
 30 |     min-height: 100vh;
 31 |     padding: 0 100px;
 32 |     background: url(bg.png);
 33 |     background-position: center;
 34 |     background-size: cover;
 35 |     display: flex;
 36 |     justify-content: flex-start;
 37 |     align-items: center;
 38 | }
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 700;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: #fff;
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | .trailer{
 78 |     position: fixed;
 79 |     top: 50%;
 80 |     left: 50%;
 81 |     transform: translate(-50%,-50%);
 82 |     z-index: 10000;
 83 |     background: rgba(0, 0, 0, 0.95);
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     visibility: hidden;
 90 |     opacity: 0;
 91 | }
 92 | .trailer.active{
 93 |     visibility: visible;
 94 |     opacity: 1;
 95 | }
 96 | .trailer video{
 97 |     max-width: 900px;
 98 |     outline: none;
 99 | }
100 | .trailer .close{
101 |     position: absolute;
102 |     top: 30px;
103 |     right: 30px;
104 |     cursor: pointer;
105 |     filter: invert(1);
106 |     max-width: 32px;
107 | }
108 | 
109 | @media (max-width: 991px){
110 |     header{
111 |         padding: 20px 50px;
112 |     }
113 |     header{
114 |         padding: 20px 50px;
115 |     }
116 |     header .logo{
117 |         max-width: 80px;
118 |     }
119 |     header .toggle{
120 |         max-width: 40px;
121 |     }
122 |     .banner{
123 |         padding: 100px 50px;
124 |     }
125 |     .banner .content h2{
126 |         font-weight: 400;
127 |         font-size: 2em;
128 |         letter-spacing: 0.05em; 
129 |     }
130 |     .banner .content p{
131 |         font-size: 1em;
132 |     }
133 |     .trailer video{
134 |         max-width: 90%;
135 |         outline: none;
136 |     }
137 | }


--------------------------------------------------------------------------------
/Dhaakad/Dhaakad.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="Dhaakad.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Dhaakad</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Dhaakad</span></h2>
17 |             <p>
18 |                 Kangana Ranaut is all set to make the Diwali of 2020 all the more 'Dhamakedaar'
19 |                  with her next film Dhaakad.....
20 |             </p>
21 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
22 |         </div>
23 |     </div>
24 |     <div class="trailer">
25 |         <video src="Dhaakad.mp4" controls="true"></video>
26 |         <img src="close.png" alt="" class="close" onclick="toggle();">
27 |     </div>
28 |     <script>
29 |         function toggle(){
30 |         var trailer=document.querySelector('.trailer');
31 |         let video=document.querySelector('.video');
32 |         trailer.classList.toggle('active');
33 |         video.currentTime = 0;
34 |         video.pause();
35 |     }
36 |     </script>
37 | </body>
38 | </html>


--------------------------------------------------------------------------------
/Dhaakad/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Dhaakad/bg.png


--------------------------------------------------------------------------------
/Dhaakad/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Dhaakad/close.png


--------------------------------------------------------------------------------
/Dhaakad/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Dhaakad/logo.png


--------------------------------------------------------------------------------
/Dhaakad/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Dhaakad/play.png


--------------------------------------------------------------------------------
/Dhaakad/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Dhaakad/toggle.png


--------------------------------------------------------------------------------
/DoctorStrange/DoctorStrange.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="DoctorStrange.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Doctor Strange</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Doctor Strange</span></h2>
17 |             <p>
18 |                 Marvel's "Doctor Strange" follows the story of the talented neurosurgeon 
19 |                 Doctor Stephen Strange who, after a tragic car accident, must put ego aside and learn 
20 |                 the secrets of a hidden world of mysticism and alternate dimensions. Based in New York 
21 |                 City's Greenwich Village, Doctor Strange must act as an intermediary between the real 
22 |                 world and what lies beyond, utilising a vast array of metaphysical abilities and artifacts 
23 |                 to protect the Marvel Cinematic Universe.....
24 |             </p>
25 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
26 |         </div>
27 |     </div>
28 |     <div class="trailer">
29 |         <video src="DoctorStrange.mp4" controls="true"></video>
30 |         <img src="close.png" alt="" class="close" onclick="toggle();">
31 |     </div>
32 |     <script>
33 |         function toggle(){
34 |         var trailer=document.querySelector('.trailer');
35 |         let video=document.querySelector('.video');
36 |         trailer.classList.toggle('active');
37 |         video.currentTime = 0;
38 |         video.pause();
39 |     }
40 |     </script>
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/DoctorStrange/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/DoctorStrange/bg.jpg


--------------------------------------------------------------------------------
/DoctorStrange/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/DoctorStrange/close.png


--------------------------------------------------------------------------------
/DoctorStrange/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/DoctorStrange/logo.png


--------------------------------------------------------------------------------
/DoctorStrange/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/DoctorStrange/play.png


--------------------------------------------------------------------------------
/DoctorStrange/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/DoctorStrange/toggle.png


--------------------------------------------------------------------------------
/Drive/Drive.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/
  2 | css?family=poppins:200,300,400,500,600,700,800,900&display=swap'); */
  3 | 
  4 | *{
  5 |     margin:0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Times New Roman', Times, serif;
  9 | }
 10 | header{
 11 |     position: absolute;
 12 |     top: 0;
 13 |     left: 0;
 14 |     width: 100%;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     padding: 40px 100px;
 18 |     z-index: 1000;
 19 | }
 20 | header .logo{
 21 |     max-width: 120px;
 22 | }
 23 | header .toggle{
 24 |     max-width: 60px;
 25 |     cursor: pointer;
 26 | }
 27 | .banner{
 28 |     position: relative;
 29 |     width: 100%;
 30 |     min-height: 100vh;
 31 |     padding: 0 100px;
 32 |     background: url(bg.jpg);
 33 |     background-position: center;
 34 |     background-size: cover;
 35 |     display: flex;
 36 |     justify-content: flex-start;
 37 |     align-items: center;
 38 | }
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 300;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: #fff;
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | .trailer{
 78 |     position: fixed;
 79 |     top: 50%;
 80 |     left: 50%;
 81 |     transform: translate(-50%,-50%);
 82 |     z-index: 10000;
 83 |     background: rgba(0, 0, 0, 0.95);
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     visibility: hidden;
 90 |     opacity: 0;
 91 | }
 92 | .trailer.active{
 93 |     visibility: visible;
 94 |     opacity: 1;
 95 | }
 96 | .trailer video{
 97 |     max-width: 900px;
 98 |     outline: none;
 99 | }
100 | .trailer .close{
101 |     position: absolute;
102 |     top: 30px;
103 |     right: 30px;
104 |     cursor: pointer;
105 |     filter: invert(1);
106 |     max-width: 32px;
107 | }
108 | 
109 | @media (max-width: 991px){
110 |     header{
111 |         padding: 20px 50px;
112 |     }
113 |     header{
114 |         padding: 20px 50px;
115 |     }
116 |     header .logo{
117 |         max-width: 80px;
118 |     }
119 |     header .toggle{
120 |         max-width: 40px;
121 |     }
122 |     .banner{
123 |         padding: 100px 50px;
124 |     }
125 |     .banner .content h2{
126 |         font-weight: 400;
127 |         font-size: 2em;
128 |         letter-spacing: 0.05em; 
129 |     }
130 |     .banner .content p{
131 |         font-size: 1em;
132 |     }
133 |     .trailer video{
134 |         max-width: 90%;
135 |         outline: none;
136 |     }
137 | }


--------------------------------------------------------------------------------
/Drive/Drive.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="Drive.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Drive</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Drive</span></h2>
17 |             <p>
18 |                 Vibha Singh is a corrupt bureaucrat in the Accounts Department of the Indian Government who pushes many of her 
19 |                 clients into giving her "percentages" of their money which may either have been stolen or confiscated. With the support 
20 |                 of her assistant Hamid, she continues to do so and keeps hiding the money in a basement of the Rashtrapati Bhavan which 
21 |                 is only known to her, and resumes her lifestyle until she receives news from Kirit Ojha, the Honorary Secretary to the 
22 |                 Prime Minister, that her help is needed critically by the Prime Minister for a certain task, and Ojha sends his man, 
23 |                 Irfan to work with them and start an investigation from within their department to avoid being caught, as the investigation 
24 |                 in question is against the notorious criminal King......
25 |             </p>
26 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
27 |         </div>
28 |     </div>
29 |     <div class="trailer">
30 |         <video src="Drive.mp4" controls="true"></video>
31 |         <img src="close.png" alt="" class="close" onclick="toggle();">
32 |     </div>
33 |     <script>
34 |         function toggle(){
35 |         var trailer=document.querySelector('.trailer');
36 |         let video=document.querySelector('.video');
37 |         trailer.classList.toggle('active');
38 |         video.currentTime = 0;
39 |         video.pause();
40 |     }
41 |     </script>
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/Drive/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Drive/bg.jpg


--------------------------------------------------------------------------------
/Drive/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Drive/close.png


--------------------------------------------------------------------------------
/Drive/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Drive/logo.png


--------------------------------------------------------------------------------
/Drive/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Drive/play.png


--------------------------------------------------------------------------------
/Drive/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Drive/toggle.png


--------------------------------------------------------------------------------
/GuardiansoftheGalaxy/GuardiansoftheGalaxy.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="GuardiansoftheGalaxy.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Guardians of the Galaxy</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Guardians of the Galaxy</span></h2>
17 |             <p>
18 |                 After saving Xandar from Ronan's wrath, the Guardians are now recognized as heroes. 
19 |                 Now the team must help their leader Star Lord (Chris Pratt) uncover the truth behind his 
20 |                 true heritage. Along the way, old foes turn to allies and betrayal is blooming. And the 
21 |                 Guardians find that they are up against a devastating new menace who is out to rule the 
22 |                 galaxy.....
23 |             </p>
24 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
25 |         </div>
26 |     </div>
27 |     <div class="trailer">
28 |         <video src="GuardiansoftheGalaxy.mp4" controls="true"></video>
29 |         <img src="close.png" alt="" class="close" onclick="toggle();">
30 |     </div>
31 |     <script>
32 |         function toggle(){
33 |         var trailer=document.querySelector('.trailer');
34 |         let video=document.querySelector('.video');
35 |         trailer.classList.toggle('active');
36 |         video.currentTime = 0;
37 |         video.pause();
38 |     }
39 |     </script>
40 | </body>
41 | </html>


--------------------------------------------------------------------------------
/GuardiansoftheGalaxy/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/GuardiansoftheGalaxy/bg.jpg


--------------------------------------------------------------------------------
/GuardiansoftheGalaxy/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/GuardiansoftheGalaxy/close.png


--------------------------------------------------------------------------------
/GuardiansoftheGalaxy/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/GuardiansoftheGalaxy/logo.png


--------------------------------------------------------------------------------
/GuardiansoftheGalaxy/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/GuardiansoftheGalaxy/play.png


--------------------------------------------------------------------------------
/GuardiansoftheGalaxy/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/GuardiansoftheGalaxy/toggle.png


--------------------------------------------------------------------------------
/Inception/Inception.css:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | *{
  4 |     margin:0;
  5 |     padding: 0;
  6 |     box-sizing: border-box;
  7 |     font-family: 'Times New Roman', Times, serif;
  8 | }
  9 | header{
 10 |     position: absolute;
 11 |     top: 0;
 12 |     left: 0;
 13 |     width: 100%;
 14 |     display: flex;
 15 |     justify-content: space-between;
 16 |     padding: 40px 100px;
 17 |     z-index: 1000;
 18 | }
 19 | header .logo{
 20 |     max-width: 120px;
 21 | }
 22 | header .toggle{
 23 |     max-width: 60px;
 24 |     cursor: pointer;
 25 | }
 26 | .banner{
 27 |     position: relative;
 28 |     width: 100%;
 29 |     min-height: 100vh;
 30 |     padding: 0 100px;
 31 |     background: url(bg.jpg);
 32 |     background-position: center;
 33 |     background-size: cover;
 34 |     display: flex;
 35 |     justify-content: flex-start;
 36 |     align-items: center;
 37 | }
 38 | 
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 300;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: #fff;
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | 
 78 | .trailer{
 79 |     position: fixed;
 80 |     top: 50%;
 81 |     left: 50%;
 82 |     transform: translate(-50%,-50%);
 83 |     z-index: 10000;
 84 |     background: rgba(0, 0, 0, 0.95);
 85 |     width: 100%;
 86 |     height: 100%;
 87 |     display: flex;
 88 |     justify-content: center;
 89 |     align-items: center;
 90 |     visibility: hidden;
 91 |     opacity: 0;
 92 | }
 93 | .trailer.active{
 94 |     visibility: visible;
 95 |     opacity: 1;
 96 | }
 97 | .trailer video{
 98 |     max-width: 900px;
 99 |     outline: none;
100 | }
101 | .trailer .close{
102 |     position: absolute;
103 |     top: 30px;
104 |     right: 30px;
105 |     cursor: pointer;
106 |     filter: invert(1);
107 |     max-width: 32px;
108 | }
109 | 
110 | @media (max-width: 991px){
111 |     header{
112 |         padding: 20px 50px;
113 |     }
114 |     header{
115 |         padding: 20px 50px;
116 |     }
117 |     header .logo{
118 |         max-width: 80px;
119 |     }
120 |     header .toggle{
121 |         max-width: 40px;
122 |     }
123 |     .banner{
124 |         padding: 100px 50px;
125 |     }
126 |     .banner .content h2{
127 |         font-weight: 400;
128 |         font-size: 2em;
129 |         letter-spacing: 0.05em; 
130 |     }
131 |     .banner .content p{
132 |         font-size: 1em;
133 |     }
134 |     .trailer video{
135 |         max-width: 90%;
136 |         outline: none;
137 |     }
138 | }


--------------------------------------------------------------------------------
/Inception/Inception.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="Inception.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Inception</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2> science <span>fiction</span> </h2>
17 |             <p>
18 |                 Dom Cobb is a skilled thief, the absolute best in the dangerous art of extraction, 
19 |                 stealing valuable secrets from deep within the subconscious during the dream state, 
20 |                 when the mind is at its most vulnerable. Cobb's rare ability has made him a coveted 
21 |                 player in this treacherous new world of corporate espionage, but it has also made him
22 |                  an international fugitive and cost him everything he has ever loved. Now Cobb is being
23 |                   offered a chance at redemption. One last job could give him his life back but only if 
24 |                   he can accomplish the impossible, inception. But no amount of careful 
25 |                   planning or expertise can prepare the team for the dangerous enemy that seems to predict 
26 |                   their every move....
27 |             </p>
28 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
29 |         </div>
30 |     </div>
31 |     <div class="trailer">
32 |         <video src="Inception.mp4" controls="true"></video>
33 |         <img src="close.png" alt="" class="close" onclick="toggle();">
34 |     </div>
35 |     <script>
36 |         function toggle(){
37 |         var trailer=document.querySelector('.trailer');
38 |         let video=document.querySelector('.video');
39 |         trailer.classList.toggle('active');
40 |         video.currentTime = 0;
41 |         video.pause();
42 |     }
43 |     </script>
44 | </body>
45 | </html>


--------------------------------------------------------------------------------
/Inception/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Inception/bg.jpg


--------------------------------------------------------------------------------
/Inception/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Inception/close.png


--------------------------------------------------------------------------------
/Inception/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Inception/logo.png


--------------------------------------------------------------------------------
/Inception/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Inception/play.png


--------------------------------------------------------------------------------
/Inception/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Inception/toggle.png


--------------------------------------------------------------------------------
/Incredibles2/Incredibles2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="Incredibles2.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Incredibles 2</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Incredibles 2</span></h2>
17 |             <p>
18 |                 While the Parr family has accepted its collective calling as superheroes, 
19 |                 the fact remains that their special heroism is still illegal. After they are arrested 
20 |                 after unsuccessfully trying to stop the Underminer, their future seems bleak. However, 
21 |                 the wealthy Deavor siblings of Devtech offer new hope with a bold project to rehabilitate 
22 |                 the public image and legal status of Supers, with Elastigirl being assigned on point to be 
23 |                 the shining example.....
24 |             </p>
25 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
26 |         </div>
27 |     </div>
28 |     <div class="trailer">
29 |         <video src="Incredibles2.mp4" controls="true"></video>
30 |         <img src="close.png" alt="" class="close" onclick="toggle();">
31 |     </div>
32 |     <script>
33 |         function toggle(){
34 |         var trailer=document.querySelector('.trailer');
35 |         let video=document.querySelector('.video');
36 |         trailer.classList.toggle('active');
37 |         video.currentTime = 0;
38 |         video.pause();
39 |     }
40 |     </script>
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/Incredibles2/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Incredibles2/bg.jpg


--------------------------------------------------------------------------------
/Incredibles2/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Incredibles2/close.png


--------------------------------------------------------------------------------
/Incredibles2/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Incredibles2/logo.png


--------------------------------------------------------------------------------
/Incredibles2/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Incredibles2/play.png


--------------------------------------------------------------------------------
/Incredibles2/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Incredibles2/toggle.png


--------------------------------------------------------------------------------
/IntoTheWoods/IntoTheWoods.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="IntoTheWoods.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Into The Woods</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Into The Woods</span></h2>
17 |             <p>
18 |                 Into the Woods is a modern twist on the beloved Brothers Grimm fairy tales in a 
19 |                 musical format that follows the classic tales of Cinderella, Little Red Riding Hood, 
20 |                 Jack and the Beanstalk, and Rapunzel-all tied together by an original story involving a 
21 |                 baker and his wife, their wish to begin a family and their interaction with the witch who 
22 |                 has put a curse on them.....
23 |             </p>
24 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
25 |         </div>
26 |     </div>
27 |     <div class="trailer">
28 |         <video src="IntoTheWoods.mp4" controls="true"></video>
29 |         <img src="close.png" alt="" class="close" onclick="toggle();">
30 |     </div>
31 |     <script>
32 |         function toggle(){
33 |         var trailer=document.querySelector('.trailer');
34 |         let video=document.querySelector('.video');
35 |         trailer.classList.toggle('active');
36 |         video.currentTime = 0;
37 |         video.pause();
38 |     }
39 |     </script>
40 | </body>
41 | </html>


--------------------------------------------------------------------------------
/IntoTheWoods/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/IntoTheWoods/bg.jpg


--------------------------------------------------------------------------------
/IntoTheWoods/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/IntoTheWoods/close.png


--------------------------------------------------------------------------------
/IntoTheWoods/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/IntoTheWoods/logo.png


--------------------------------------------------------------------------------
/IntoTheWoods/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/IntoTheWoods/play.png


--------------------------------------------------------------------------------
/IntoTheWoods/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/IntoTheWoods/toggle.png


--------------------------------------------------------------------------------
/JohnWick3/JohnWick3.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/
  2 | css?family=poppins:200,300,400,500,600,700,800,900&display=swap'); */
  3 | 
  4 | *{
  5 |     margin:0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Times New Roman', Times, serif;
  9 | }
 10 | header{
 11 |     position: absolute;
 12 |     top: 0;
 13 |     left: 0;
 14 |     width: 100%;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     padding: 40px 100px;
 18 |     z-index: 1000;
 19 | }
 20 | header .logo{
 21 |     max-width: 120px;
 22 | }
 23 | header .toggle{
 24 |     max-width: 60px;
 25 |     cursor: pointer;
 26 | }
 27 | .banner{
 28 |     position: relative;
 29 |     width: 100%;
 30 |     min-height: 100vh;
 31 |     padding: 0 100px;
 32 |     background: url(bg.jpg);
 33 |     background-position: center;
 34 |     background-size: cover;
 35 |     display: flex;
 36 |     justify-content: flex-start;
 37 |     align-items: center;
 38 | }
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 300;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: #fff;
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | .trailer{
 78 |     position: fixed;
 79 |     top: 50%;
 80 |     left: 50%;
 81 |     transform: translate(-50%,-50%);
 82 |     z-index: 10000;
 83 |     background: rgba(0, 0, 0, 0.95);
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     visibility: hidden;
 90 |     opacity: 0;
 91 | }
 92 | .trailer.active{
 93 |     visibility: visible;
 94 |     opacity: 1;
 95 | }
 96 | .trailer video{
 97 |     max-width: 900px;
 98 |     outline: none;
 99 | }
100 | .trailer .close{
101 |     position: absolute;
102 |     top: 30px;
103 |     right: 30px;
104 |     cursor: pointer;
105 |     filter: invert(1);
106 |     max-width: 32px;
107 | }
108 | 
109 | @media (max-width: 991px){
110 |     header{
111 |         padding: 20px 50px;
112 |     }
113 |     header{
114 |         padding: 20px 50px;
115 |     }
116 |     header .logo{
117 |         max-width: 80px;
118 |     }
119 |     header .toggle{
120 |         max-width: 40px;
121 |     }
122 |     .banner{
123 |         padding: 100px 50px;
124 |     }
125 |     .banner .content h2{
126 |         font-weight: 400;
127 |         font-size: 2em;
128 |         letter-spacing: 0.05em; 
129 |     }
130 |     .banner .content p{
131 |         font-size: 1em;
132 |     }
133 |     .trailer video{
134 |         max-width: 90%;
135 |         outline: none;
136 |     }
137 | }


--------------------------------------------------------------------------------
/JohnWick3/JohnWick3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="JohnWick3.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>John Wick 3</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>John Wick 3</span> </h2>
17 |             <p>
18 |                 Bound by an inescapable blood debt to the Italian crime lord, Santino D'Antonio, 
19 |                 and with his precious 1969 Mustang still stolen, John Wick--the taciturn and pitiless 
20 |                 assassin who thirsts for seclusion--is forced to visit Italy to honour his promise. 
21 |                 But, soon, the Bogeyman will find himself dragged into an impossible task in the heart 
22 |                 of Rome's secret criminal society, as every killer in the business dreams of cornering 
23 |                 the legendary Wick who now has an enormous price on his head......
24 |             </p>
25 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
26 |         </div>
27 |     </div>
28 |     <div class="trailer">
29 |         <video src="JohnWick3.mp4" controls="true"></video>
30 |         <img src="close.png" alt="" class="close" onclick="toggle();">
31 |     </div>
32 |     <script>
33 |         function toggle(){
34 |         var trailer=document.querySelector('.trailer');
35 |         let video=document.querySelector('.video');
36 |         trailer.classList.toggle('active');
37 |         video.currentTime = 0;
38 |         video.pause();
39 |     }
40 |     </script>
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/JohnWick3/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/JohnWick3/bg.jpg


--------------------------------------------------------------------------------
/JohnWick3/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/JohnWick3/close.png


--------------------------------------------------------------------------------
/JohnWick3/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/JohnWick3/logo.png


--------------------------------------------------------------------------------
/JohnWick3/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/JohnWick3/play.png


--------------------------------------------------------------------------------
/JohnWick3/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/JohnWick3/toggle.png


--------------------------------------------------------------------------------
/Joker/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Joker/bg.jpg


--------------------------------------------------------------------------------
/Joker/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Joker/close.png


--------------------------------------------------------------------------------
/Joker/joker.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/
  2 | css?family=poppins:200,300,400,500,600,700,800,900&display=swap'); */
  3 | 
  4 | *{
  5 |     margin:0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Times New Roman', Times, serif;
  9 | }
 10 | header{
 11 |     position: absolute;
 12 |     top: 0;
 13 |     left: 0;
 14 |     width: 100%;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     padding: 40px 100px;
 18 |     z-index: 1000;
 19 | }
 20 | header .logo{
 21 |     max-width: 120px;
 22 | }
 23 | header .toggle{
 24 |     max-width: 60px;
 25 |     cursor: pointer;
 26 | }
 27 | .banner{
 28 |     position: relative;
 29 |     width: 100%;
 30 |     min-height: 100vh;
 31 |     padding: 0 100px;
 32 |     background: url(bg.jpg);
 33 |     background-position: center;
 34 |     background-size: cover;
 35 |     display: flex;
 36 |     justify-content: flex-start;
 37 |     align-items: center;
 38 | }
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 300;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: #fff;
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | .trailer{
 78 |     position: fixed;
 79 |     top: 50%;
 80 |     left: 50%;
 81 |     transform: translate(-50%,-50%);
 82 |     z-index: 10000;
 83 |     background: rgba(0, 0, 0, 0.95);
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     visibility: hidden;
 90 |     opacity: 0;
 91 | }
 92 | .trailer.active{
 93 |     visibility: visible;
 94 |     opacity: 1;
 95 | }
 96 | .trailer video{
 97 |     max-width: 900px;
 98 |     outline: none;
 99 | }
100 | .trailer .close{
101 |     position: absolute;
102 |     top: 30px;
103 |     right: 30px;
104 |     cursor: pointer;
105 |     filter: invert(1);
106 |     max-width: 32px;
107 | }
108 | 
109 | @media (max-width: 991px){
110 |     header{
111 |         padding: 20px 50px;
112 |     }
113 |     header{
114 |         padding: 20px 50px;
115 |     }
116 |     header .logo{
117 |         max-width: 80px;
118 |     }
119 |     header .toggle{
120 |         max-width: 40px;
121 |     }
122 |     .banner{
123 |         padding: 100px 50px;
124 |     }
125 |     .banner .content h2{
126 |         font-weight: 400;
127 |         font-size: 2em;
128 |         letter-spacing: 0.05em; 
129 |     }
130 |     .banner .content p{
131 |         font-size: 1em;
132 |     }
133 |     .trailer video{
134 |         max-width: 90%;
135 |         outline: none;
136 |     }
137 | }


--------------------------------------------------------------------------------
/Joker/joker.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="joker.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2>put on a <span>Happy</span> face</h2>
17 |             <p>
18 |                 Arthur Fleck works as a clown and is an aspiring stand-up comic. He has mental health issues, 
19 |                 part of which involves uncontrollable laughter. Times are tough and, due to his issues and 
20 |                 occupation, Arthur has an even worse time than most. Over time these issues bear down on him, 
21 |                 shaping his actions, making him ultimately take on the persona he is more known as...Joker.....
22 |             </p>
23 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
24 |         </div>
25 |     </div>
26 |     <div class="trailer">
27 |         <video src="Joker.mp4" controls="true"></video>
28 |         <img src="close.png" alt="" class="close" onclick="toggle();">
29 |     </div>
30 |     <script>
31 |         function toggle(){
32 |         var trailer=document.querySelector('.trailer');
33 |         let video=document.querySelector('.video');
34 |         trailer.classList.toggle('active');
35 |         video.currentTime = 0;
36 |         video.pause();
37 |     }
38 |     </script>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/Joker/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Joker/logo.png


--------------------------------------------------------------------------------
/Joker/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Joker/play.png


--------------------------------------------------------------------------------
/Joker/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Joker/toggle.png


--------------------------------------------------------------------------------
/JungleCruise/JungleCruise.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="JungleCruise.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Jungle Cruise</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Jungle Cruise</span></h2>
17 |             <p>
18 |                 Jungle Cruise is an upcoming American adventure film directed by Jaume Collet-Serra from a story by 
19 |                 John Norville & Josh Goldstein and Glenn Ficarra & John Requa and a screenplay written by Michael Green, Glenn Ficarra 
20 |                 and John Requa, based on Walt Disney's theme park attraction of the same name. Produced by Walt Disney Pictures, 
21 |                 the film stars Dwayne Johnson, Emily Blunt, Édgar Ramírez, Jack Whitehall, Jesse Plemons, and Paul Giamatti....
22 |             </p>
23 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch trailer</a>
24 |         </div>
25 |     </div>
26 |     <div class="trailer">
27 |         <video src="JungleCruise.mp4" controls="true"></video>
28 |         <img src="close.png" alt="" class="close" onclick="toggle();">
29 |     </div>
30 |     <script>
31 |         function toggle(){
32 |         var trailer=document.querySelector('.trailer');
33 |         let video=document.querySelector('.video');
34 |         trailer.classList.toggle('active');
35 |         video.currentTime = 0;
36 |         video.pause();
37 |     }
38 |     </script>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/JungleCruise/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/JungleCruise/bg.png


--------------------------------------------------------------------------------
/JungleCruise/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/JungleCruise/close.png


--------------------------------------------------------------------------------
/JungleCruise/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/JungleCruise/logo.png


--------------------------------------------------------------------------------
/JungleCruise/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/JungleCruise/play.png


--------------------------------------------------------------------------------
/JungleCruise/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/JungleCruise/toggle.png


--------------------------------------------------------------------------------
/KabirSingh/Bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/KabirSingh/Bg.jpg


--------------------------------------------------------------------------------
/KabirSingh/KabirSingh.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/
  2 | css?family=poppins:200,300,400,500,600,700,800,900&display=swap'); */
  3 | 
  4 | *{
  5 |     margin:0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Times New Roman', Times, serif;
  9 | }
 10 | header{
 11 |     position: absolute;
 12 |     top: 0;
 13 |     left: 0;
 14 |     width: 100%;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     padding: 40px 100px;
 18 |     z-index: 1000;
 19 | }
 20 | header .logo{
 21 |     max-width: 120px;
 22 | }
 23 | header .toggle{
 24 |     max-width: 60px;
 25 |     cursor: pointer;
 26 | }
 27 | .banner{
 28 |     position: relative;
 29 |     width: 100%;
 30 |     min-height: 100vh;
 31 |     padding: 0 100px;
 32 |     background: url(bg.jpg);
 33 |     background-position: center;
 34 |     background-size: cover;
 35 |     display: flex;
 36 |     justify-content: flex-start;
 37 |     align-items: center;
 38 | }
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 300;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: #fff;
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | .trailer{
 78 |     position: fixed;
 79 |     top: 50%;
 80 |     left: 50%;
 81 |     transform: translate(-50%,-50%);
 82 |     z-index: 10000;
 83 |     background: rgba(0, 0, 0, 0.95);
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     visibility: hidden;
 90 |     opacity: 0;
 91 | }
 92 | .trailer.active{
 93 |     visibility: visible;
 94 |     opacity: 1;
 95 | }
 96 | .trailer video{
 97 |     max-width: 900px;
 98 |     outline: none;
 99 | }
100 | .trailer .close{
101 |     position: absolute;
102 |     top: 30px;
103 |     right: 30px;
104 |     cursor: pointer;
105 |     filter: invert(1);
106 |     max-width: 32px;
107 | }
108 | 
109 | @media (max-width: 991px){
110 |     header{
111 |         padding: 20px 50px;
112 |     }
113 |     header{
114 |         padding: 20px 50px;
115 |     }
116 |     header .logo{
117 |         max-width: 80px;
118 |     }
119 |     header .toggle{
120 |         max-width: 40px;
121 |     }
122 |     .banner{
123 |         padding: 100px 50px;
124 |     }
125 |     .banner .content h2{
126 |         font-weight: 400;
127 |         font-size: 2em;
128 |         letter-spacing: 0.05em; 
129 |     }
130 |     .banner .content p{
131 |         font-size: 1em;
132 |     }
133 |     .trailer video{
134 |         max-width: 90%;
135 |         outline: none;
136 |     }
137 | }


--------------------------------------------------------------------------------
/KabirSingh/KabirSingh.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="KabirSingh.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Kabir Singh</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Kabir Singh</span></h2>
17 |             <p>
18 |                 This Sandeep Vanga directorial is a remake of the 2017 Telugu movie Arjun Reddy. 
19 |                 The plot revolves around an alcoholic surgeon battling temper issues. Things get 
20 |                 worse as he watches the love of his life marry another man. High on emotions coupled 
21 |                 with impressive action the film promises an intense watch.....
22 |             </p>
23 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
24 |         </div>
25 |     </div>
26 |     <div class="trailer">
27 |         <video src="KabirSingh.mp4" controls="true"></video>
28 |         <img src="close.png" alt="" class="close" onclick="toggle();">
29 |     </div>
30 |     <script>
31 |         function toggle(){
32 |         var trailer=document.querySelector('.trailer');
33 |         let video=document.querySelector('.video');
34 |         trailer.classList.toggle('active');
35 |         video.currentTime = 0;
36 |         video.pause();
37 |     }
38 |     </script>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/KabirSingh/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/KabirSingh/close.png


--------------------------------------------------------------------------------
/KabirSingh/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/KabirSingh/logo.png


--------------------------------------------------------------------------------
/KabirSingh/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/KabirSingh/play.png


--------------------------------------------------------------------------------
/KabirSingh/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/KabirSingh/toggle.png


--------------------------------------------------------------------------------
/Kin/Kin.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/
  2 | css?family=poppins:200,300,400,500,600,700,800,900&display=swap'); */
  3 | 
  4 | *{
  5 |     margin:0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Times New Roman', Times, serif;
  9 | }
 10 | header{
 11 |     position: absolute;
 12 |     top: 0;
 13 |     left: 0;
 14 |     width: 100%;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     padding: 40px 100px;
 18 |     z-index: 1000;
 19 | }
 20 | header .logo{
 21 |     max-width: 120px;
 22 | }
 23 | header .toggle{
 24 |     max-width: 60px;
 25 |     cursor: pointer;
 26 | }
 27 | .banner{
 28 |     position: relative;
 29 |     width: 100%;
 30 |     min-height: 100vh;
 31 |     padding: 0 100px;
 32 |     background: url(bg.jpg);
 33 |     background-position: center;
 34 |     background-size: cover;
 35 |     display: flex;
 36 |     justify-content: flex-start;
 37 |     align-items: center;
 38 | }
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 300;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: #fff;
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | .trailer{
 78 |     position: fixed;
 79 |     top: 50%;
 80 |     left: 50%;
 81 |     transform: translate(-50%,-50%);
 82 |     z-index: 10000;
 83 |     background: rgba(0, 0, 0, 0.95);
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     visibility: hidden;
 90 |     opacity: 0;
 91 | }
 92 | .trailer.active{
 93 |     visibility: visible;
 94 |     opacity: 1;
 95 | }
 96 | .trailer video{
 97 |     max-width: 900px;
 98 |     outline: none;
 99 | }
100 | .trailer .close{
101 |     position: absolute;
102 |     top: 30px;
103 |     right: 30px;
104 |     cursor: pointer;
105 |     filter: invert(1);
106 |     max-width: 32px;
107 | }
108 | 
109 | @media (max-width: 991px){
110 |     header{
111 |         padding: 20px 50px;
112 |     }
113 |     header{
114 |         padding: 20px 50px;
115 |     }
116 |     header .logo{
117 |         max-width: 80px;
118 |     }
119 |     header .toggle{
120 |         max-width: 40px;
121 |     }
122 |     .banner{
123 |         padding: 100px 50px;
124 |     }
125 |     .banner .content h2{
126 |         font-weight: 400;
127 |         font-size: 2em;
128 |         letter-spacing: 0.05em; 
129 |     }
130 |     .banner .content p{
131 |         font-size: 1em;
132 |     }
133 |     .trailer video{
134 |         max-width: 90%;
135 |         outline: none;
136 |     }
137 | }


--------------------------------------------------------------------------------
/Kin/Kin.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="Kin.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Kin</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Kin</span></h2>
17 |             <p>
18 |                 Co-directors Jonathan Baker and Josh Baker's Sci-Fi action thriller features James Franco, 
19 |                 Zoe Kravitz, and Dennis Quaid. A young boy (Myles Truitt) finds a powerful otherworldly 
20 |                 weapon, which he uses to save his older adoptive brother (Jack Reynor) from a crew of thugs. 
21 |                 Before long, the two of them are also pursued by federal agents and mysterious mercenaries 
22 |                 aiming to reclaim their asset.....
23 |             </p>
24 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
25 |         </div>
26 |     </div>
27 |     <div class="trailer">
28 |         <video src="Kin.mp4" controls="true"></video>
29 |         <img src="close.png" alt="" class="close" onclick="toggle();">
30 |     </div>
31 |     <script>
32 |         function toggle(){
33 |         var trailer=document.querySelector('.trailer');
34 |         let video=document.querySelector('.video');
35 |         trailer.classList.toggle('active');
36 |         video.currentTime = 0;
37 |         video.pause();
38 |     }
39 |     </script>
40 | </body>
41 | </html>


--------------------------------------------------------------------------------
/Kin/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Kin/bg.jpg


--------------------------------------------------------------------------------
/Kin/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Kin/close.png


--------------------------------------------------------------------------------
/Kin/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Kin/logo.png


--------------------------------------------------------------------------------
/Kin/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Kin/play.png


--------------------------------------------------------------------------------
/Kin/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Kin/toggle.png


--------------------------------------------------------------------------------
/Morbius/Morbius.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/
  2 | css?family=poppins:200,300,400,500,600,700,800,900&display=swap'); */
  3 | 
  4 | *{
  5 |     margin:0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Times New Roman', Times, serif;
  9 | }
 10 | header{
 11 |     position: absolute;
 12 |     top: 0;
 13 |     left: 0;
 14 |     width: 100%;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     padding: 40px 100px;
 18 |     z-index: 1000;
 19 | }
 20 | header .logo{
 21 |     max-width: 120px;
 22 | }
 23 | header .toggle{
 24 |     max-width: 60px;
 25 |     cursor: pointer;
 26 | }
 27 | .banner{
 28 |     position: relative;
 29 |     width: 100%;
 30 |     min-height: 100vh;
 31 |     padding: 0 100px;
 32 |     background: url(bg.jpg);
 33 |     background-position: center;
 34 |     background-size: cover;
 35 |     display: flex;
 36 |     justify-content: flex-start;
 37 |     align-items: center;
 38 | }
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 300;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: #fff;
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | .trailer{
 78 |     position: fixed;
 79 |     top: 50%;
 80 |     left: 50%;
 81 |     transform: translate(-50%,-50%);
 82 |     z-index: 10000;
 83 |     background: rgba(0, 0, 0, 0.95);
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     visibility: hidden;
 90 |     opacity: 0;
 91 | }
 92 | .trailer.active{
 93 |     visibility: visible;
 94 |     opacity: 1;
 95 | }
 96 | .trailer video{
 97 |     max-width: 900px;
 98 |     outline: none;
 99 | }
100 | .trailer .close{
101 |     position: absolute;
102 |     top: 30px;
103 |     right: 30px;
104 |     cursor: pointer;
105 |     filter: invert(1);
106 |     max-width: 32px;
107 | }
108 | 
109 | @media (max-width: 991px){
110 |     header{
111 |         padding: 20px 50px;
112 |     }
113 |     header{
114 |         padding: 20px 50px;
115 |     }
116 |     header .logo{
117 |         max-width: 80px;
118 |     }
119 |     header .toggle{
120 |         max-width: 40px;
121 |     }
122 |     .banner{
123 |         padding: 100px 50px;
124 |     }
125 |     .banner .content h2{
126 |         font-weight: 400;
127 |         font-size: 2em;
128 |         letter-spacing: 0.05em; 
129 |     }
130 |     .banner .content p{
131 |         font-size: 1em;
132 |     }
133 |     .trailer video{
134 |         max-width: 90%;
135 |         outline: none;
136 |     }
137 | }


--------------------------------------------------------------------------------
/Morbius/Morbius.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="Morbius.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Morbius</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Morbius</span></h2>
17 |             <p>
18 |                 Morbius is an upcoming American superhero film based on the Marvel Comics character of the 
19 |                 same name, produced by Columbia Pictures in association with Marvel. Distributed by Sony 
20 |                 Pictures Releasing, it is intended to be the second film in the Sony Pictures Universe of 
21 |                 Marvel Characters. The film is directed by Daniel Espinosa from a script by the writing teams 
22 |                 of Matt Sazama and Burk Sharpless, and Art Marcum and Matt Holloway, and stars Jared Leto as 
23 |                 Michael Morbius alongside Matt Smith, Adria Arjona, Jared Harris, Al Madrigal, and Tyrese 
24 |                 Gibson. In the film, Morbius becomes a vampire after attempting to cure himself of a rare 
25 |                 blood disease.....
26 |             </p>
27 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch trailer</a>
28 |         </div>
29 |     </div>
30 |     <div class="trailer">
31 |         <video src="Morbius.mp4" controls="true"></video>
32 |         <img src="close.png" alt="" class="close" onclick="toggle();">
33 |     </div>
34 |     <script>
35 |         function toggle(){
36 |         var trailer=document.querySelector('.trailer');
37 |         let video=document.querySelector('.video');
38 |         trailer.classList.toggle('active');
39 |         video.currentTime = 0;
40 |         video.pause();
41 |     }
42 |     </script>
43 | </body>
44 | </html>


--------------------------------------------------------------------------------
/Morbius/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Morbius/bg.jpg


--------------------------------------------------------------------------------
/Morbius/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Morbius/close.png


--------------------------------------------------------------------------------
/Morbius/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Morbius/logo.png


--------------------------------------------------------------------------------
/Morbius/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Morbius/play.png


--------------------------------------------------------------------------------
/Morbius/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Morbius/toggle.png


--------------------------------------------------------------------------------
/Padmaavat/Padmaavat.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/
  2 | css?family=poppins:200,300,400,500,600,700,800,900&display=swap'); */
  3 | 
  4 | *{
  5 |     margin:0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Times New Roman', Times, serif;
  9 | }
 10 | header{
 11 |     position: absolute;
 12 |     top: 0;
 13 |     left: 0;
 14 |     width: 100%;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     padding: 40px 100px;
 18 |     z-index: 1000;
 19 | }
 20 | header .logo{
 21 |     max-width: 120px;
 22 | }
 23 | header .toggle{
 24 |     max-width: 60px;
 25 |     cursor: pointer;
 26 | }
 27 | .banner{
 28 |     position: relative;
 29 |     width: 100%;
 30 |     min-height: 100vh;
 31 |     padding: 0 100px;
 32 |     background: url(bg.jpg);
 33 |     background-position: center;
 34 |     background-size: cover;
 35 |     display: flex;
 36 |     justify-content: flex-start;
 37 |     align-items: center;
 38 | }
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 300;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: #fff;
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | .trailer{
 78 |     position: fixed;
 79 |     top: 50%;
 80 |     left: 50%;
 81 |     transform: translate(-50%,-50%);
 82 |     z-index: 10000;
 83 |     background: rgba(0, 0, 0, 0.95);
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     visibility: hidden;
 90 |     opacity: 0;
 91 | }
 92 | .trailer.active{
 93 |     visibility: visible;
 94 |     opacity: 1;
 95 | }
 96 | .trailer video{
 97 |     max-width: 900px;
 98 |     outline: none;
 99 | }
100 | .trailer .close{
101 |     position: absolute;
102 |     top: 30px;
103 |     right: 30px;
104 |     cursor: pointer;
105 |     filter: invert(1);
106 |     max-width: 32px;
107 | }
108 | 
109 | @media (max-width: 991px){
110 |     header{
111 |         padding: 20px 50px;
112 |     }
113 |     header{
114 |         padding: 20px 50px;
115 |     }
116 |     header .logo{
117 |         max-width: 80px;
118 |     }
119 |     header .toggle{
120 |         max-width: 40px;
121 |     }
122 |     .banner{
123 |         padding: 100px 50px;
124 |     }
125 |     .banner .content h2{
126 |         font-weight: 400;
127 |         font-size: 2em;
128 |         letter-spacing: 0.05em; 
129 |     }
130 |     .banner .content p{
131 |         font-size: 1em;
132 |     }
133 |     .trailer video{
134 |         max-width: 90%;
135 |         outline: none;
136 |     }
137 | }


--------------------------------------------------------------------------------
/Padmaavat/Padmaavat.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="Padmaavat.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Padmaavat</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Padmaavat</span></h2>
17 |             <p>
18 |                 This fictional story is set in 13th century medieval India. a Princess of 
19 |                 Sinhala(modern-day Sri Lanka) called Padmavati falls in love with an already married 
20 |                 Maharawal Ratan Singh, King of Chittor. Upon their marriage, Padmavati is crowned queen, 
21 |                 taking the place of the legal wife and queen consort of Ratan Singh and they reside together 
22 |                 in joy and splendor. Their perfect life takes an unfortunate turn when a Court priest Chetan, 
23 |                 banished by his king Ratan Singh, approaches Sultan of Delhi Allauddin Khilji and convinces 
24 |                 him to attack Chittor and capture Padmavati for her beauty and absolute luck she brings to 
25 |                 the king she marries.....
26 |             </p>
27 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
28 |         </div>
29 |     </div>
30 |     <div class="trailer">
31 |         <video src="Padmaavat.mp4" controls="true"></video>
32 |         <img src="close.png" alt="" class="close" onclick="toggle();">
33 |     </div>
34 |     <script>
35 |         function toggle(){
36 |         var trailer=document.querySelector('.trailer');
37 |         let video=document.querySelector('.video');
38 |         trailer.classList.toggle('active');
39 |         video.currentTime = 0;
40 |         video.pause();
41 |     }
42 |     </script>
43 | </body>
44 | </html>


--------------------------------------------------------------------------------
/Padmaavat/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Padmaavat/bg.jpg


--------------------------------------------------------------------------------
/Padmaavat/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Padmaavat/close.png


--------------------------------------------------------------------------------
/Padmaavat/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Padmaavat/logo.png


--------------------------------------------------------------------------------
/Padmaavat/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Padmaavat/play.png


--------------------------------------------------------------------------------
/Padmaavat/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Padmaavat/toggle.png


--------------------------------------------------------------------------------
/PeterRabbit2TheRunaway/PeterRabbit2TheRunaway.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="PeterRabbit2TheRunaway.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Peter Rabbit2 The Runaway</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2>Peter Rabbit 2 <span>The Runaway</span></h2>
17 |             <p>
18 |                 Peter Rabbit 2: The Runaway (shortened as Peter Rabbit 2 in other territories) is an upcoming American 
19 |                 live action/computer animated comedy film directed by Will Gluck and written by Patrick Burleigh and Gluck. 
20 |                 The film is a sequel to 2018's Peter Rabbit and is based on the stories of Peter Rabbit created by Beatrix Potter. 
21 |                 The film stars the voice of James Corden as the title character, alongside Rose Byrne, Domhnall Gleeson, 
22 |                 and David Oyelowo in live-action roles, and the voices of Elizabeth Debicki and Margot Robbie. The film is currently 
23 |                 scheduled to be released in the United Kingdom on December 11, 2020, and in the United States on January 15, 2021, by Sony 
24 |                 Pictures Releasing under its Columbia Pictures label....
25 |             </p>
26 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch trailer</a>
27 |         </div>
28 |     </div>
29 |     <div class="trailer">
30 |         <video src="PeterRabbit2TheRunaway.mp4" controls="true"></video>
31 |         <img src="close.png" alt="" class="close" onclick="toggle();">
32 |     </div>
33 |     <script>
34 |         function toggle(){
35 |         var trailer=document.querySelector('.trailer');
36 |         let video=document.querySelector('.video');
37 |         trailer.classList.toggle('active');
38 |         video.currentTime = 0;
39 |         video.pause();
40 |     }
41 |     </script>
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/PeterRabbit2TheRunaway/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/PeterRabbit2TheRunaway/bg.jpg


--------------------------------------------------------------------------------
/PeterRabbit2TheRunaway/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/PeterRabbit2TheRunaway/close.png


--------------------------------------------------------------------------------
/PeterRabbit2TheRunaway/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/PeterRabbit2TheRunaway/logo.png


--------------------------------------------------------------------------------
/PeterRabbit2TheRunaway/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/PeterRabbit2TheRunaway/play.png


--------------------------------------------------------------------------------
/PeterRabbit2TheRunaway/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/PeterRabbit2TheRunaway/toggle.png


--------------------------------------------------------------------------------
/ProjectPower/ProjectPower.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="ProjectPower.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Project Power</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Project Power</span></h2>
17 |             <p>
18 |                 On the streets of New Orleans, word begins to spread about a mysterious new pill that unlocks 
19 |                 superpowers unique to each user. The catch: You don't know what will happen until you take it. 
20 |                 While some develop bulletproof skin, invisibility, and super strength, others exhibit a deadlier 
21 |                 reaction. But when the pill escalates crime within the city to dangerous levels, a local cop 
22 |                 (Joseph Gordon-Levitt) teams with a teenage dealer (Dominique Fishback) and a former soldier 
23 |                 fueled by a secret vendetta (Jamie Foxx) to fight power with power and risk taking the pill 
24 |                 in order to track down and stop the group responsible for creating it.....
25 |             </p>
26 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
27 |         </div>
28 |     </div>
29 |     <div class="trailer">
30 |         <video src="ProjectPower.mp4" controls="true"></video>
31 |         <img src="close.png" alt="" class="close" onclick="toggle();">
32 |     </div>
33 |     <script>
34 |         function toggle(){
35 |         var trailer=document.querySelector('.trailer');
36 |         let video=document.querySelector('.video');
37 |         trailer.classList.toggle('active');
38 |         video.currentTime = 0;
39 |         video.pause();
40 |     }
41 |     </script>
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/ProjectPower/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/ProjectPower/bg.jpg


--------------------------------------------------------------------------------
/ProjectPower/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/ProjectPower/close.png


--------------------------------------------------------------------------------
/ProjectPower/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/ProjectPower/logo.png


--------------------------------------------------------------------------------
/ProjectPower/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/ProjectPower/play.png


--------------------------------------------------------------------------------
/ProjectPower/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/ProjectPower/toggle.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Flick-play
2 | 
3 | Change the images name which are under compressed images folder and give proper name inside index.html.
4 | 
5 | Add all the folder in a single folder named(Movies) except Main files--
6 | Or you can change the file location under index.html
7 | 


--------------------------------------------------------------------------------
/Shivaay/Shivaay.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/
  2 | css?family=poppins:200,300,400,500,600,700,800,900&display=swap'); */
  3 | 
  4 | *{
  5 |     margin:0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Times New Roman', Times, serif;
  9 | }
 10 | header{
 11 |     position: absolute;
 12 |     top: 0;
 13 |     left: 0;
 14 |     width: 100%;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     padding: 40px 100px;
 18 |     z-index: 1000;
 19 | }
 20 | header .logo{
 21 |     max-width: 120px;
 22 | }
 23 | header .toggle{
 24 |     max-width: 60px;
 25 |     cursor: pointer;
 26 | }
 27 | .banner{
 28 |     position: relative;
 29 |     width: 100%;
 30 |     min-height: 100vh;
 31 |     padding: 0 100px;
 32 |     background: url(bg.jpg);
 33 |     background-position: center;
 34 |     background-size: cover;
 35 |     display: flex;
 36 |     justify-content: flex-start;
 37 |     align-items: center;
 38 | }
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 300;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: #fff;
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | .trailer{
 78 |     position: fixed;
 79 |     top: 50%;
 80 |     left: 50%;
 81 |     transform: translate(-50%,-50%);
 82 |     z-index: 10000;
 83 |     background: rgba(0, 0, 0, 0.95);
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     visibility: hidden;
 90 |     opacity: 0;
 91 | }
 92 | .trailer.active{
 93 |     visibility: visible;
 94 |     opacity: 1;
 95 | }
 96 | .trailer video{
 97 |     max-width: 900px;
 98 |     outline: none;
 99 | }
100 | .trailer .close{
101 |     position: absolute;
102 |     top: 30px;
103 |     right: 30px;
104 |     cursor: pointer;
105 |     filter: invert(1);
106 |     max-width: 32px;
107 | }
108 | 
109 | @media (max-width: 991px){
110 |     header{
111 |         padding: 20px 50px;
112 |     }
113 |     header{
114 |         padding: 20px 50px;
115 |     }
116 |     header .logo{
117 |         max-width: 80px;
118 |     }
119 |     header .toggle{
120 |         max-width: 40px;
121 |     }
122 |     .banner{
123 |         padding: 100px 50px;
124 |     }
125 |     .banner .content h2{
126 |         font-weight: 400;
127 |         font-size: 2em;
128 |         letter-spacing: 0.05em; 
129 |     }
130 |     .banner .content p{
131 |         font-size: 1em;
132 |     }
133 |     .trailer video{
134 |         max-width: 90%;
135 |         outline: none;
136 |     }
137 | }


--------------------------------------------------------------------------------
/Shivaay/Shivaay.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="Shivaay.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Shivaay</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Shivaay</span></h2>
17 |             <p>
18 |                 Shivaay is a well-known mountain climber/guide in Himalayas. On one of his adventure 
19 |                 he meets Olga and both fall in love. Soon they discover that Olga is pregnant but she doesn't 
20 |                 want the child. But Shivaay convinces her to give birth to the baby, Olga leaves the country 
21 |                 after giving birth to his baby without even seeing her. 9 years later Shivaay's daughter Gaura 
22 |                 finds that her mother is still alive and lives in Bulgaria. Gaura hates Shivaay for hiding the 
23 |                 truth about her mother and insists on meeting her.....
24 |             </p>
25 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
26 |         </div>
27 |     </div>
28 |     <div class="trailer">
29 |         <video src="Shivaay.mp4" controls="true"></video>
30 |         <img src="close.png" alt="" class="close" onclick="toggle();">
31 |     </div>
32 |     <script>
33 |         function toggle(){
34 |         var trailer=document.querySelector('.trailer');
35 |         let video=document.querySelector('.video');
36 |         trailer.classList.toggle('active');
37 |         video.currentTime = 0;
38 |         video.pause();
39 |     }
40 |     </script>
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/Shivaay/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Shivaay/bg.jpg


--------------------------------------------------------------------------------
/Shivaay/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Shivaay/close.png


--------------------------------------------------------------------------------
/Shivaay/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Shivaay/logo.png


--------------------------------------------------------------------------------
/Shivaay/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Shivaay/play.png


--------------------------------------------------------------------------------
/Shivaay/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Shivaay/toggle.png


--------------------------------------------------------------------------------
/SonictheHedgehog/SonictheHedgehog.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="SonictheHedgehog.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Sonic: the Hedgehog</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Sonic the Hedgehog</span></h2>
17 |             <p>
18 |                 Based on the global blockbuster videogame franchise from Sega, SONIC THE HEDGEHOG tells the 
19 |                 story of the world's speediest hedgehog as he embraces his new home on Earth. 
20 |                 In this live-action adventure comedy, Sonic and his new best friend Tom (James Marsden) 
21 |                 team up to defend the planet from the evil genius Dr. Robotnik (Jim Carrey) and his plans 
22 |                 for world domination. The family-friendly film also stars Tika Sumpter and Ben Schwartz as 
23 |                 the voice of Sonic....
24 |             </p>
25 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
26 |         </div>
27 |     </div>
28 |     <div class="trailer">
29 |         <video src="SonictheHedgehog.mp4" controls="true"></video>
30 |         <img src="close.png" alt="" class="close" onclick="toggle();">
31 |     </div>
32 |     <script>
33 |         function toggle(){
34 |         var trailer=document.querySelector('.trailer');
35 |         let video=document.querySelector('.video');
36 |         trailer.classList.toggle('active');
37 |         video.currentTime = 0;
38 |         video.pause();
39 |     }
40 |     </script>
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/SonictheHedgehog/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/SonictheHedgehog/bg.jpg


--------------------------------------------------------------------------------
/SonictheHedgehog/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/SonictheHedgehog/close.png


--------------------------------------------------------------------------------
/SonictheHedgehog/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/SonictheHedgehog/logo.png


--------------------------------------------------------------------------------
/SonictheHedgehog/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/SonictheHedgehog/play.png


--------------------------------------------------------------------------------
/SonictheHedgehog/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/SonictheHedgehog/toggle.png


--------------------------------------------------------------------------------
/Sooryavanshi/Sooryavanshi.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="Sooryavanshi.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Sooryavanshi</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2> <span>Sooryavanshi</span> </h2>
17 |             <p>
18 |                 Sooryavanshi traces the acts and serious antics of DCP Veer 
19 |                 Sooryavanshi, the chief of the Anti-Terrorism Squad in India.....
20 |             </p>
21 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
22 |         </div>
23 |     </div>
24 |     <div class="trailer">
25 |         <video src="Sooryavanshi.mp4" controls="true"></video>
26 |         <img src="close.png" alt="" class="close" onclick="toggle();">
27 |     </div>
28 |     <script>
29 |         function toggle(){
30 |         var trailer=document.querySelector('.trailer');
31 |         let video=document.querySelector('.video');
32 |         trailer.classList.toggle('active');
33 |         video.currentTime = 0;
34 |         video.pause();
35 |     }
36 |     </script>
37 | </body>
38 | </html>


--------------------------------------------------------------------------------
/Sooryavanshi/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Sooryavanshi/bg.jpg


--------------------------------------------------------------------------------
/Sooryavanshi/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Sooryavanshi/close.png


--------------------------------------------------------------------------------
/Sooryavanshi/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Sooryavanshi/logo.png


--------------------------------------------------------------------------------
/Sooryavanshi/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Sooryavanshi/play.png


--------------------------------------------------------------------------------
/Sooryavanshi/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Sooryavanshi/toggle.png


--------------------------------------------------------------------------------
/SpiderManFarFromHome/SpiderManFarFromHome.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="SpiderManFarFromHome.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Spider-Man Far-From Home</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Spider-Man Far From Home</span></h2>
17 |             <p>
18 |                 Following the events of Avengers: Endgame, Peter Parker (Tom Holland) returns 
19 |                 in Spider-Man: Far From Home. Our friendly neighborhood Super Hero decides to join 
20 |                 his best friends Ned, MJ, and the rest of the gang on a European vacation. However, 
21 |                 Peter’s plan to leave super heroics behind for a few weeks is quickly scrapped when he 
22 |                 begrudgingly agrees to help Nick Fury (Samuel L. Jackson) uncover the mystery of several 
23 |                 elemental creature attacks. Spider-Man and Mysterio (Jake Gyllenhaal) join forces to fight 
24 |                 the havoc unleashed across the continent but all is not as it seems.....
25 |             </p>
26 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
27 |         </div>
28 |     </div>
29 |     <div class="trailer">
30 |         <video src="SpiderManFarFromHome.mp4" controls="true"></video>
31 |         <img src="close.png" alt="" class="close" onclick="toggle();">
32 |     </div>
33 |     <script>
34 |         function toggle(){
35 |         var trailer=document.querySelector('.trailer');
36 |         let video=document.querySelector('.video');
37 |         trailer.classList.toggle('active');
38 |         video.currentTime = 0;
39 |         video.pause();
40 |     }
41 |     </script>
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/SpiderManFarFromHome/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/SpiderManFarFromHome/bg.jpg


--------------------------------------------------------------------------------
/SpiderManFarFromHome/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/SpiderManFarFromHome/close.png


--------------------------------------------------------------------------------
/SpiderManFarFromHome/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/SpiderManFarFromHome/logo.png


--------------------------------------------------------------------------------
/SpiderManFarFromHome/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/SpiderManFarFromHome/play.png


--------------------------------------------------------------------------------
/SpiderManFarFromHome/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/SpiderManFarFromHome/toggle.png


--------------------------------------------------------------------------------
/SpiderManIntoTheSpiderVerse/SpiderManIntoTheSpiderVerse.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="SpiderManIntoTheSpiderVerse.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Spide-Man Into The Spider-Verse</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2>Into the <span>Spider-Verse</span></h2>
17 |             <p>
18 |                 The film grossed over $375 million worldwide against a $90 million budget. 
19 |                 It received praise from critics for its animation, direction, characters, story, 
20 |                 voice acting, humor and soundtrack, and won numerous awards, including Best Animated 
21 |                 Feature at the 91st Academy Awards, 46th Annie Awards, and 76th Golden Globe Awards. 
22 |                 It was the first non-Disney/Pixar film to win the Academy Award for Best Animated 
23 |                 Feature since Rango (2011), as well as the first non-Disney/Pixar film since Happy 
24 |                 Feet (2006) to win that award when a Disney or Pixar film was also in contention.... 
25 |             </p>
26 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
27 |         </div>
28 |     </div>
29 |     <div class="trailer">
30 |         <video src="SpiderManIntoTheSpiderVerse.mp4" controls="true"></video>
31 |         <img src="close.png" alt="" class="close" onclick="toggle();">
32 |     </div>
33 |     <script>
34 |         function toggle(){
35 |         var trailer=document.querySelector('.trailer');
36 |         let video=document.querySelector('.video');
37 |         trailer.classList.toggle('active');
38 |         video.currentTime = 0;
39 |         video.pause();
40 |     }
41 |     </script>
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/SpiderManIntoTheSpiderVerse/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/SpiderManIntoTheSpiderVerse/bg.jpg


--------------------------------------------------------------------------------
/SpiderManIntoTheSpiderVerse/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/SpiderManIntoTheSpiderVerse/close.png


--------------------------------------------------------------------------------
/SpiderManIntoTheSpiderVerse/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/SpiderManIntoTheSpiderVerse/logo.png


--------------------------------------------------------------------------------
/SpiderManIntoTheSpiderVerse/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/SpiderManIntoTheSpiderVerse/play.png


--------------------------------------------------------------------------------
/SpiderManIntoTheSpiderVerse/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/SpiderManIntoTheSpiderVerse/toggle.png


--------------------------------------------------------------------------------
/TheBatman/TheBatman.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/
  2 | css?family=poppins:200,300,400,500,600,700,800,900&display=swap'); */
  3 | 
  4 | *{
  5 |     margin:0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Times New Roman', Times, serif;
  9 | }
 10 | header{
 11 |     position: absolute;
 12 |     top: 0;
 13 |     left: 0;
 14 |     width: 100%;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     padding: 40px 100px;
 18 |     z-index: 1000;
 19 | }
 20 | header .logo{
 21 |     max-width: 120px;
 22 | }
 23 | header .toggle{
 24 |     max-width: 60px;
 25 |     cursor: pointer;
 26 | }
 27 | .banner{
 28 |     position: relative;
 29 |     width: 100%;
 30 |     min-height: 100vh;
 31 |     padding: 0 100px;
 32 |     background: url(bg.jpg);
 33 |     background-position: center;
 34 |     background-size: cover;
 35 |     display: flex;
 36 |     justify-content: flex-start;
 37 |     align-items: center;
 38 | }
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 300;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: #fff;
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | .trailer{
 78 |     position: fixed;
 79 |     top: 50%;
 80 |     left: 50%;
 81 |     transform: translate(-50%,-50%);
 82 |     z-index: 10000;
 83 |     background: rgba(0, 0, 0, 0.95);
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     visibility: hidden;
 90 |     opacity: 0;
 91 | }
 92 | .trailer.active{
 93 |     visibility: visible;
 94 |     opacity: 1;
 95 | }
 96 | .trailer video{
 97 |     max-width: 900px;
 98 |     outline: none;
 99 | }
100 | .trailer .close{
101 |     position: absolute;
102 |     top: 30px;
103 |     right: 30px;
104 |     cursor: pointer;
105 |     filter: invert(1);
106 |     max-width: 32px;
107 | }
108 | 
109 | @media (max-width: 991px){
110 |     header{
111 |         padding: 20px 50px;
112 |     }
113 |     header{
114 |         padding: 20px 50px;
115 |     }
116 |     header .logo{
117 |         max-width: 80px;
118 |     }
119 |     header .toggle{
120 |         max-width: 40px;
121 |     }
122 |     .banner{
123 |         padding: 100px 50px;
124 |     }
125 |     .banner .content h2{
126 |         font-weight: 400;
127 |         font-size: 2em;
128 |         letter-spacing: 0.05em; 
129 |     }
130 |     .banner .content p{
131 |         font-size: 1em;
132 |     }
133 |     .trailer video{
134 |         max-width: 90%;
135 |         outline: none;
136 |     }
137 | }


--------------------------------------------------------------------------------
/TheBatman/TheBatman.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="TheBatman.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>The Batman</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>The Batman</span></h2>
17 |             <p>
18 |                 The Batman is an upcoming American superhero film based on the DC Comics character of the same name. 
19 |                 Produced by DC Films and distributed by Warner Bros. Pictures, it is a reboot of the Batman film franchise. 
20 |                 The film is directed by Matt Reeves, who wrote the screenplay with Peter Craig. It stars Robert Pattinson as 
21 |                 Bruce Wayne / Batman, with Zoë Kravitz, Paul Dano, Jeffrey Wright, John Turturro, Peter Sarsgaard, Barry Keoghan, 
22 |                 Jayme Lawson, Andy Serkis, and Colin Farrell rounding out the ensemble cast. The Batman is set during Batman's 
23 |                 second year of fighting crime and follows him as he explores Gotham City's corruption and faces the Riddler, 
24 |                 a riddle-obsessed serial killer.....
25 |             </p>
26 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch trailer</a>
27 |         </div>
28 |     </div>
29 |     <div class="trailer">
30 |         <video src="TheBatman.mp4" controls="true"></video>
31 |         <img src="close.png" alt="" class="close" onclick="toggle();">
32 |     </div>
33 |     <script>
34 |         function toggle(){
35 |         var trailer=document.querySelector('.trailer');
36 |         let video=document.querySelector('.video');
37 |         trailer.classList.toggle('active');
38 |         video.currentTime = 0;
39 |         video.pause();
40 |     }
41 |     </script>
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/TheBatman/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/TheBatman/bg.jpg


--------------------------------------------------------------------------------
/TheBatman/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/TheBatman/close.png


--------------------------------------------------------------------------------
/TheBatman/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/TheBatman/logo.png


--------------------------------------------------------------------------------
/TheBatman/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/TheBatman/play.png


--------------------------------------------------------------------------------
/TheBatman/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/TheBatman/toggle.png


--------------------------------------------------------------------------------
/TheDarkKnight/TheDarkKnight.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="TheDarkKnight.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>The Dark Knight</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2>The <span>Dark</span> Knight</h2>
17 |             <p>
18 |                 The Dark Knight is a 2008 superhero film directed, produced, and co-written 
19 |                 by Christopher Nolan. Based on the DC Comics character Batman, the film is the 
20 |                 second installment of Nolan's The Dark Knight Trilogy and a sequel to 2005's Batman
21 |                  Begins, starring Christian Bale and supported by Michael Caine, Heath Ledger, Gary 
22 |                  Oldman, Aaron Eckhart, Maggie Gyllenhaal, and Morgan Freeman. In the film, 
23 |                  Bruce Wayne / Batman (Bale), Police Lieutenant James Gordon (Oldman) and District Attorney
24 |                   Harvey Dent (Eckhart) form an alliance to dismantle organized crime in Gotham City, but 
25 |                   are menaced by an anarchistic mastermind known as the Joker (Ledger), who seeks to undermine 
26 |                   Batman's influence and throw the city into anarchy.
27 |             </p>
28 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
29 |         </div>
30 |     </div>
31 |     <div class="trailer">
32 |         <video src="TheDarkKnight.mp4" controls="true"></video>
33 |         <img src="close.png" alt="" class="close" onclick="toggle();">
34 |     </div>
35 |     <script>
36 |         function toggle(){
37 |         var trailer=document.querySelector('.trailer');
38 |         let video=document.querySelector('.video');
39 |         trailer.classList.toggle('active');
40 |         video.currentTime = 0;
41 |         video.pause();
42 |     }
43 |     </script>
44 | </body>
45 | </html>


--------------------------------------------------------------------------------
/TheDarkKnight/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/TheDarkKnight/bg.jpg


--------------------------------------------------------------------------------
/TheDarkKnight/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/TheDarkKnight/close.png


--------------------------------------------------------------------------------
/TheDarkKnight/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/TheDarkKnight/logo.png


--------------------------------------------------------------------------------
/TheDarkKnight/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/TheDarkKnight/play.png


--------------------------------------------------------------------------------
/TheDarkKnight/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/TheDarkKnight/toggle.png


--------------------------------------------------------------------------------
/TheGodfatherPart2/TheGodfatherPart2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="TheGodfatherPart2.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>The God Father Part 2</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2>The <span>Godfather</span> </h2>
17 |             <p>
18 |                 The Godfather Part II is a 1974 American epic crime film produced and directed by
19 |                  Francis Ford Coppola from the screenplay co-written with Mario Puzo, starring Al Pacino, 
20 |                  Robert Duvall, Diane Keaton, Robert De Niro, Talia Shire, Morgana King, John Cazale, Mariana 
21 |                  Hill, and Lee Strasberg. It is the second installment in The Godfather trilogy. Partially based 
22 |                  on Puzo's 1969 novel The Godfather, the film is both sequel and prequel to The Godfather, presenting 
23 |                  parallel dramas: one picks up the 1958 story of Michael Corleone (Pacino), the new Don of the Corleone
24 |                   family, protecting the family business in the aftermath of an attempt on his life....
25 |             </p>
26 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
27 |         </div>
28 |     </div>
29 |     <div class="trailer">
30 |         <video src="TheGodfatherPart2.mp4" controls="true"></video>
31 |         <img src="close.png" alt="" class="close" onclick="toggle();">
32 |     </div>
33 |     <script>
34 |         function toggle(){
35 |         var trailer=document.querySelector('.trailer');
36 |         let video=document.querySelector('.video');
37 |         trailer.classList.toggle('active');
38 |         video.currentTime = 0;
39 |         video.pause();
40 |     }
41 |     </script>
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/TheGodfatherPart2/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/TheGodfatherPart2/bg.jpg


--------------------------------------------------------------------------------
/TheGodfatherPart2/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/TheGodfatherPart2/close.png


--------------------------------------------------------------------------------
/TheGodfatherPart2/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/TheGodfatherPart2/logo.png


--------------------------------------------------------------------------------
/TheGodfatherPart2/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/TheGodfatherPart2/play.png


--------------------------------------------------------------------------------
/TheGodfatherPart2/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/TheGodfatherPart2/toggle.png


--------------------------------------------------------------------------------
/ToyStory/ToyStory.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/
  2 | css?family=poppins:200,300,400,500,600,700,800,900&display=swap'); */
  3 | 
  4 | *{
  5 |     margin:0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Times New Roman', Times, serif;
  9 | }
 10 | header{
 11 |     position: absolute;
 12 |     top: 0;
 13 |     left: 0;
 14 |     width: 100%;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     padding: 40px 100px;
 18 |     z-index: 1000;
 19 | }
 20 | header .logo{
 21 |     max-width: 120px;
 22 | }
 23 | header .toggle{
 24 |     max-width: 60px;
 25 |     cursor: pointer;
 26 | }
 27 | .banner{
 28 |     position: relative;
 29 |     width: 100%;
 30 |     min-height: 100vh;
 31 |     padding: 0 100px;
 32 |     background: url(bg.jpg);
 33 |     background-position: center;
 34 |     background-size: cover;
 35 |     display: flex;
 36 |     justify-content: flex-start;
 37 |     align-items: center;
 38 | }
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 300;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: #fff;
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | .trailer{
 78 |     position: fixed;
 79 |     top: 50%;
 80 |     left: 50%;
 81 |     transform: translate(-50%,-50%);
 82 |     z-index: 10000;
 83 |     background: rgba(0, 0, 0, 0.95);
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     visibility: hidden;
 90 |     opacity: 0;
 91 | }
 92 | .trailer.active{
 93 |     visibility: visible;
 94 |     opacity: 1;
 95 | }
 96 | .trailer video{
 97 |     max-width: 900px;
 98 |     outline: none;
 99 | }
100 | .trailer .close{
101 |     position: absolute;
102 |     top: 30px;
103 |     right: 30px;
104 |     cursor: pointer;
105 |     filter: invert(1);
106 |     max-width: 32px;
107 | }
108 | 
109 | @media (max-width: 991px){
110 |     header{
111 |         padding: 20px 50px;
112 |     }
113 |     header{
114 |         padding: 20px 50px;
115 |     }
116 |     header .logo{
117 |         max-width: 80px;
118 |     }
119 |     header .toggle{
120 |         max-width: 40px;
121 |     }
122 |     .banner{
123 |         padding: 100px 50px;
124 |     }
125 |     .banner .content h2{
126 |         font-weight: 400;
127 |         font-size: 2em;
128 |         letter-spacing: 0.05em; 
129 |     }
130 |     .banner .content p{
131 |         font-size: 1em;
132 |     }
133 |     .trailer video{
134 |         max-width: 90%;
135 |         outline: none;
136 |     }
137 | }


--------------------------------------------------------------------------------
/ToyStory/ToyStory.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="ToyStory.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Toy Story</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2>Toy <span>Story</span></h2>
17 |             <p>
18 |                 little boy named Andy loves to be in his room, playing with his toys,
19 |                  especially his doll named "Woody". But, what do the toys do when Andy is 
20 |                  not with them, they come to life. Woody believes that his life (as a toy) is good. 
21 |                  However, he must worry about Andy's family moving, and what Woody does not know is 
22 |                  about Andy's birthday party. Woody does not realize that Andy's mother gave him an 
23 |                  action figure known as Buzz Lightyear, who does not believe that he is a toy, and quickly 
24 |                  becomes Andy's new favorite toy. Woody, who is now consumed with jealousy, tries to get rid 
25 |                  of Buzz....
26 |             </p>
27 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
28 |         </div>
29 |     </div>
30 |     <div class="trailer">
31 |         <video src="ToyStory.mp4" controls="true"></video>
32 |         <img src="close.png" alt="" class="close" onclick="toggle();">
33 |     </div>
34 |     <script>
35 |         function toggle(){
36 |         var trailer=document.querySelector('.trailer');
37 |         let video=document.querySelector('.video');
38 |         trailer.classList.toggle('active');
39 |         video.currentTime = 0;
40 |         video.pause();
41 |     }
42 |     </script>
43 | </body>
44 | </html>


--------------------------------------------------------------------------------
/ToyStory/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/ToyStory/bg.jpg


--------------------------------------------------------------------------------
/ToyStory/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/ToyStory/close.png


--------------------------------------------------------------------------------
/ToyStory/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/ToyStory/logo.png


--------------------------------------------------------------------------------
/ToyStory/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/ToyStory/play.png


--------------------------------------------------------------------------------
/ToyStory/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/ToyStory/toggle.png


--------------------------------------------------------------------------------
/Venom2/Venom2.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/
  2 | css?family=poppins:200,300,400,500,600,700,800,900&display=swap'); */
  3 | 
  4 | *{
  5 |     margin:0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 |     font-family: 'Times New Roman', Times, serif;
  9 | }
 10 | header{
 11 |     position: absolute;
 12 |     top: 0;
 13 |     left: 0;
 14 |     width: 100%;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     padding: 40px 100px;
 18 |     z-index: 1000;
 19 | }
 20 | header .logo{
 21 |     max-width: 120px;
 22 | }
 23 | header .toggle{
 24 |     max-width: 60px;
 25 |     cursor: pointer;
 26 | }
 27 | .banner{
 28 |     position: relative;
 29 |     width: 100%;
 30 |     min-height: 100vh;
 31 |     padding: 0 100px;
 32 |     background: url(bg.jpg);
 33 |     background-position: center;
 34 |     background-size: cover;
 35 |     display: flex;
 36 |     justify-content: flex-start;
 37 |     align-items: center;
 38 | }
 39 | .banner .content{
 40 |     max-width: 550px;
 41 | }
 42 | .banner .content h2{
 43 |     text-transform: uppercase;
 44 |     font-weight: 400;
 45 |     font-size: 2.5em;
 46 |     letter-spacing: 0.1em;
 47 |     color: #fff;
 48 | }
 49 | .banner .content h2 span{
 50 |     font-weight: 800;
 51 | }
 52 | .banner .content p{
 53 |     
 54 |     font-weight: 300;
 55 |     font-size: 1.2em;
 56 |     letter-spacing: 0.02em;
 57 |     line-height: 1.5em;
 58 |     color: #fff;
 59 |     margin: 15px 0 35px;
 60 | }
 61 | .play{
 62 |     position: relative;
 63 |     display: inline-flex;
 64 |     justify-content: flex-start;
 65 |     align-items: center;
 66 |     color: #fff;
 67 |     text-transform: uppercase;
 68 |     font-weight: 500;
 69 |     text-decoration: none;
 70 |     letter-spacing: 2px;
 71 |     font-size: 1.2em;
 72 | }
 73 | .play img{
 74 |     margin-right: 10px;
 75 |     max-width: 50px;
 76 | }
 77 | .trailer{
 78 |     position: fixed;
 79 |     top: 50%;
 80 |     left: 50%;
 81 |     transform: translate(-50%,-50%);
 82 |     z-index: 10000;
 83 |     background: rgba(0, 0, 0, 0.95);
 84 |     width: 100%;
 85 |     height: 100%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: center;
 89 |     visibility: hidden;
 90 |     opacity: 0;
 91 | }
 92 | .trailer.active{
 93 |     visibility: visible;
 94 |     opacity: 1;
 95 | }
 96 | .trailer video{
 97 |     max-width: 900px;
 98 |     outline: none;
 99 | }
100 | .trailer .close{
101 |     position: absolute;
102 |     top: 30px;
103 |     right: 30px;
104 |     cursor: pointer;
105 |     filter: invert(1);
106 |     max-width: 32px;
107 | }
108 | 
109 | @media (max-width: 991px){
110 |     header{
111 |         padding: 20px 50px;
112 |     }
113 |     header{
114 |         padding: 20px 50px;
115 |     }
116 |     header .logo{
117 |         max-width: 80px;
118 |     }
119 |     header .toggle{
120 |         max-width: 40px;
121 |     }
122 |     .banner{
123 |         padding: 100px 50px;
124 |     }
125 |     .banner .content h2{
126 |         font-weight: 400;
127 |         font-size: 2em;
128 |         letter-spacing: 0.05em; 
129 |     }
130 |     .banner .content p{
131 |         font-size: 1em;
132 |     }
133 |     .trailer video{
134 |         max-width: 90%;
135 |         outline: none;
136 |     }
137 | }


--------------------------------------------------------------------------------
/Venom2/Venom2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="Venom2.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Venom 2</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Venom 2: </span>Let There Be Carnage</h2>
17 |             <p>
18 |                 Venom: Let There Be Carnage is an upcoming American superhero film based on the Marvel Comics 
19 |                 character Venom, produced by Columbia Pictures in association with Marvel. Distributed by Sony 
20 |                 Pictures Releasing, it is intended to be the third film in the Sony Pictures Universe of Marvel 
21 |                 Characters and the sequel to Venom (2018). The film is being directed by Andy Serkis from a 
22 |                 screenplay by Kelly Marcel, and stars Tom Hardy as Eddie Brock / Venom alongside Woody Harrelson, 
23 |                 Michelle Williams, Reid Scott, and Naomie Harris....
24 |             </p>
25 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch trailer</a>
26 |         </div>
27 |     </div>
28 |     <div class="trailer">
29 |         <video src="Venom2.mp4" controls="true"></video>
30 |         <img src="close.png" alt="" class="close" onclick="toggle();">
31 |     </div>
32 |     <script>
33 |         function toggle(){
34 |         var trailer=document.querySelector('.trailer');
35 |         let video=document.querySelector('.video');
36 |         trailer.classList.toggle('active');
37 |         video.currentTime = 0;
38 |         video.pause();
39 |     }
40 |     </script>
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/Venom2/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Venom2/bg.jpg


--------------------------------------------------------------------------------
/Venom2/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Venom2/close.png


--------------------------------------------------------------------------------
/Venom2/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Venom2/logo.png


--------------------------------------------------------------------------------
/Venom2/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Venom2/play.png


--------------------------------------------------------------------------------
/Venom2/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/Venom2/toggle.png


--------------------------------------------------------------------------------
/WonderWoman/WonderWoman.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="WonderWoman.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Wonder Woman</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2><span>Wonder Woman</span></h2>
17 |             <p>
18 |                 In present-day Paris, Diana Prince receives a photographic plate from Wayne Enterprises 
19 |                 (accompanied by a letter from Bruce Wayne) of herself and four men taken during World War I, 
20 |                 prompting her to recall her past. The daughter of Queen Hippolyta, Diana is raised on the 
21 |                 hidden island of Themyscira, home to the Amazons, women warriors created by the Olympian gods 
22 |                 to protect mankind. Hippolyta explains their history to Diana, including how Ares became 
23 |                 jealous of humanity and orchestrated its destruction. When the other gods attempted to stop 
24 |                 him, Ares killed all but Zeus, who used the last of his power to wound Ares and force his 
25 |                 retreat......
26 |             </p>
27 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch now</a>
28 |         </div>
29 |     </div>
30 |     <div class="trailer">
31 |         <video src="WonderWoman.mp4" controls="true"></video>
32 |         <img src="close.png" alt="" class="close" onclick="toggle();">
33 |     </div>
34 |     <script>
35 |         function toggle(){
36 |         var trailer=document.querySelector('.trailer');
37 |         let video=document.querySelector('.video');
38 |         trailer.classList.toggle('active');
39 |         video.currentTime = 0;
40 |         video.pause();
41 |     }
42 |     </script>
43 | </body>
44 | </html>


--------------------------------------------------------------------------------
/WonderWoman/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/WonderWoman/bg.jpg


--------------------------------------------------------------------------------
/WonderWoman/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/WonderWoman/close.png


--------------------------------------------------------------------------------
/WonderWoman/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/WonderWoman/logo.png


--------------------------------------------------------------------------------
/WonderWoman/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/WonderWoman/play.png


--------------------------------------------------------------------------------
/WonderWoman/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/WonderWoman/toggle.png


--------------------------------------------------------------------------------
/WonderWoman1984/WonderWoman1984.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <link rel="stylesheet" href="WonderWoman1984.css">
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Wonder Woman 1984</title>
 8 | </head>
 9 | <body>
10 |     <header>
11 |         <a href="#" class="logo"><img src="logo.png" alt=""></a>
12 |     <div class="toggle"><a href="../../user.html"><img src="toggle.png" alt=""></a></div>
13 |     </header>
14 |     <div class="banner">
15 |         <div class="content">
16 |             <h2>Wonder Woman <span>1984</span></h2>
17 |             <p>
18 |                 Wonder Woman 1984 is an upcoming American superhero film based on the DC Comics character 
19 |                 Wonder Woman. It is the sequel to 2017's Wonder Woman and the ninth installment in the DC 
20 |                 Extended Universe (DCEU). The film is directed by Patty Jenkins from a script she wrote with 
21 |                 Geoff Johns and David Callaham and a story by Johns and Jenkins. It will star Gal Gadot as 
22 |                 Diana Prince / Wonder Woman, alongside Chris Pine, Kristen Wiig, Pedro Pascal, Robin Wright 
23 |                 and Connie Nielsen in supporting roles. Set in 1984, during the Cold War, the film will 
24 |                 follow Diana as she faces off against Maxwell Lord and Cheetah.....
25 |             </p>
26 |             <a href="#" class="play" onclick="toggle();"><img src="play.png" alt="">watch trailer</a>
27 |         </div>
28 |     </div>
29 |     <div class="trailer">
30 |         <video src="WonderWoman1984.mp4" controls="true"></video>
31 |         <img src="close.png" alt="" class="close" onclick="toggle();">
32 |     </div>
33 |     <script>
34 |         function toggle(){
35 |         var trailer=document.querySelector('.trailer');
36 |         let video=document.querySelector('.video');
37 |         trailer.classList.toggle('active');
38 |         video.currentTime = 0;
39 |         video.pause();
40 |     }
41 |     </script>
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/WonderWoman1984/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/WonderWoman1984/bg.jpg


--------------------------------------------------------------------------------
/WonderWoman1984/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/WonderWoman1984/close.png


--------------------------------------------------------------------------------
/WonderWoman1984/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/WonderWoman1984/logo.png


--------------------------------------------------------------------------------
/WonderWoman1984/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/WonderWoman1984/play.png


--------------------------------------------------------------------------------
/WonderWoman1984/toggle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiecoder2079/Flick-play/2752999acd9dc2f899be5f27bc25cf66d7b533e6/WonderWoman1984/toggle.png


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | (function ($) {
 2 |   ("use strict");
 3 | 
 4 |   // closes the sidebar menu
 5 |   $(".menu-toggle").click(function (e) {
 6 |     e.preventDefault();
 7 |     $("#sidebar-wrapper").toggleClass("active");
 8 |     $(".menu-toggle > .fa-bars, .menu-toggle > .fa-times").toggleClass(
 9 |       "fa-bars fa-times"
10 |     );
11 |     $(this).toggleClass("active");
12 |   });
13 | 
14 |   //smooth scrolling using jquery and easing
15 |   $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () {
16 |     if (
17 |       location.pathname.replace(/^\//, "") ==
18 |         this.pathname.replace(/^\//, "") &&
19 |       location.hostname == this.hostname
20 |     ) {
21 |       var target = $(this.hash);
22 |       target = target.length ? target : $("[name=" + this.hash.slice(1) + "]");
23 |       if (target.length) {
24 |         $("html, body").animate(
25 |           {
26 |             scrollTop: target.offset().top,
27 |           },
28 |           1000,
29 |           "easeInOutExpo"
30 |         );
31 |         return false;
32 |       }
33 |     }
34 |   });
35 |   $("#sidebar-wrapper .js-scroll-trigger").click(function () {
36 |     $("#sidebar-wrapper").removeClass("active");
37 |     $("menu-toggle").removeClass("active");
38 |     $(".menu-toggle > fa.bars, .menu-toggle > .fa-times").toggleClass(
39 |       "fa-bars fa-times"
40 |     );
41 |   });
42 | 
43 |   $(document).scroll(function () {
44 |     var scrollDistance = $(this).scrollTop();
45 |     if (scrollDistance > 100) {
46 |       $(".scroll-to-top").fadeIn();
47 |     } else {
48 |       $(".scroll-to-top").fadeOut();
49 |     }
50 |   });
51 | })(jQuery);
52 | 


--------------------------------------------------------------------------------