├── README.md ├── img ├── image.webp ├── slider-1.jpg ├── slider-2.webp └── slider-3.jpg ├── style.css ├── index.html └── script.js /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumi536/reelverse/HEAD/README.md -------------------------------------------------------------------------------- /img/image.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumi536/reelverse/HEAD/img/image.webp -------------------------------------------------------------------------------- /img/slider-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumi536/reelverse/HEAD/img/slider-1.jpg -------------------------------------------------------------------------------- /img/slider-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumi536/reelverse/HEAD/img/slider-2.webp -------------------------------------------------------------------------------- /img/slider-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sumi536/reelverse/HEAD/img/slider-3.jpg -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Overpass:wght@400;500;600&display=swap"); 2 | 3 | body { 4 | font-family: "Overpass", sans-serif !important; 5 | background-color: #eaeaea; 6 | } 7 | 8 | .navbar { 9 | background-color: rgba(225, 225, 225, 0.75); 10 | backdrop-filter: blur(10px); 11 | -webkit-backdrop-filter: blur(10px); 12 | z-index: 99; 13 | } 14 | 15 | .carousel { 16 | margin-top: 56px !important; 17 | } 18 | 19 | .movie { 20 | height: 550px; 21 | width: 300px; 22 | overflow: hidden; 23 | } 24 | 25 | .movie-poster { 26 | width: 100%; 27 | height: 450px; 28 | overflow: hidden; 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | } 33 | 34 | .modal-window { 35 | max-width: 450px; 36 | position: fixed; 37 | top: 50%; 38 | left: 50%; 39 | transform: translate(-50%, -50%); 40 | background-color: rgba(215, 244, 244, 0.9); 41 | backdrop-filter: blur(10px); 42 | -webkit-backdrop-filter: blur(10px); 43 | padding: 2rem; 44 | border-radius: 1rem; 45 | box-shadow: 0 5rem 1rem rgba(0, 0, 0, 0.5); 46 | transition: all 0.4s; 47 | 48 | opacity: 0; 49 | visibility: hidden; 50 | } 51 | 52 | .close-btn { 53 | position: absolute; 54 | top: 1rem; 55 | right: 1rem; 56 | cursor: pointer; 57 | } 58 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Reel Verse 9 | 10 | 11 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 63 | 64 | 90 |
91 |
92 | 93 |
94 |

In Cinemas Now

95 |
96 |
97 | Movie Poster 98 |
99 |
100 |

Top Gun: Maverick (2022)

101 |

Top Gun: Maverick is a 2022 American action drama film directed by Joseph Kosinski. It is the sequel to the 1986 film Top Gun and the second installment in the Top Gun film series. Written by Ehren Kruger, Eric Warren Singer, and Christopher McQuarrie, the film is based on a story by Peter Craig and Justin Marks.

102 |

Lorem ipsum dolor sit amet consectetur adipisicing elit.

103 |

Release date: May 27, 2022 (USA)

104 |

Director: Joseph Kosinski

105 |

Box office: 1.355 billion USD

106 |

Distributed by: Paramount Pictures

107 |

Music by: Harold Faltermeyer; Lady Gaga; Hans Zimmer; Lorne Balfe

108 |
109 |

Running Successfully ✔

110 |
111 |
112 |
113 | 114 | 115 | 121 | 122 | 123 |
124 | ❌ 125 |

Movie title (year)

126 |
Price: 300 ৳
127 |
Vat: 30 ৳
128 | 129 |
130 | 131 | 132 |
133 |
134 | 135 | 136 |
137 |
138 | 139 | 142 |
143 | 144 |
145 |
146 | 149 | 150 | 151 | 156 | 157 | 158 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // Movies 2 | const moviesArr = [ 3 | { 4 | title: "Hit: The First Case", 5 | year: 2022, 6 | ticketPrice: 300, 7 | posterURL: 8 | "https://www.torrentbd.com/posters/F69G9Lx6w9PoScHsQK0bUQYY13130760.jpg", 9 | }, 10 | { 11 | title: "Top Gun: Maverick", 12 | year: 2022, 13 | ticketPrice: 350, 14 | posterURL: 15 | "https://www.torrentbd.com/posters/P7J6QBtsk758rCVZ0TajtQYY1745960.jpg", 16 | }, 17 | { 18 | title: "Orphan: First Kill", 19 | year: 2022, 20 | ticketPrice: 350, 21 | posterURL: 22 | "https://www.torrentbd.com/posters/CQ7uuODTRQD74EEfJPDwUQYY11851548.jpg", 23 | }, 24 | { 25 | title: "Nope", 26 | year: 2022, 27 | ticketPrice: 300, 28 | posterURL: 29 | "https://www.torrentbd.com/posters/2BWAUqwpFb62mcHiEntXaAYY10954984.jpg", 30 | }, 31 | { 32 | title: "The Next 365 Days", 33 | year: 2022, 34 | ticketPrice: 300, 35 | posterURL: 36 | "https://www.torrentbd.com/posters/grT28qkCjf9qbW421hzHFAYY21106646.jpg", 37 | }, 38 | { 39 | title: "Cuttputlli", 40 | year: 2022, 41 | ticketPrice: 300, 42 | posterURL: 43 | "https://www.torrentbd.com/posters/eM6dhYLs5LR3jRRzICEOdgYY15315164.jpg", 44 | }, 45 | { 46 | title: "Shamshera", 47 | year: 2022, 48 | ticketPrice: 300, 49 | posterURL: 50 | "https://www.torrentbd.com/posters/vmbS5vig6F7y3oRuZRkHugYY8426926.jpg", 51 | }, 52 | { 53 | title: "Deja Vu", 54 | year: 2022, 55 | ticketPrice: 320, 56 | posterURL: 57 | "https://www.torrentbd.com/posters/6CfRAB1gviZFhyWsK8IMDQYY15097330.jpg", 58 | }, 59 | { 60 | title: "Sita Ramam", 61 | year: 2022, 62 | ticketPrice: 350, 63 | posterURL: 64 | "https://www.torrentbd.com/posters/OpZt68x1USWw4IwH49M14gYY20850406.jpg", 65 | }, 66 | { 67 | title: "Dobaaraa", 68 | year: 2022, 69 | ticketPrice: 350, 70 | posterURL: 71 | "https://www.torrentbd.com/posters/1srBZRpeJ0pbW4fT7ktiVwYY14042066.jpg", 72 | }, 73 | { 74 | title: "Uri", 75 | year: 2019, 76 | ticketPrice: 350, 77 | posterURL: 78 | "https://www.torrentbd.com/posters/0IhNmMvXLhghUAj2sZgMZQYY8291224.jpg", 79 | }, 80 | { 81 | title: "Cobra", 82 | year: 2022, 83 | ticketPrice: 380, 84 | posterURL: 85 | "https://www.torrentbd.com/posters/jfFZ6X2ACbpykVVsoXZhgAYY9466814.jpg", 86 | }, 87 | { 88 | title: "Jurassic World", 89 | year: 2022, 90 | ticketPrice: 330, 91 | posterURL: 92 | "https://www.torrentbd.com/posters/8EZ9vIAm4IpAZUdLuho9gwYY8041270.jpg", 93 | }, 94 | { 95 | title: "The Vanished", 96 | year: 2018, 97 | ticketPrice: 300, 98 | posterURL: 99 | "https://www.torrentbd.com/posters/AbDZEU9nBJZBwBWpgRprZwYY6955298.jpg", 100 | }, 101 | { 102 | title: "Dark Knight Rises", 103 | year: 2012, 104 | ticketPrice: 350, 105 | posterURL: 106 | "https://www.torrentbd.com/posters/flp1AIyyTSW6EoXFZp39jAYY1345836.jpg", 107 | }, 108 | { 109 | title: "Avatar", 110 | year: 2009, 111 | ticketPrice: 350, 112 | posterURL: 113 | "https://www.torrentbd.com/posters/gR1COWvmGG37Qz2I4V7TSgYY0499549.jpg", 114 | }, 115 | { 116 | title: "Vesper", 117 | year: 2022, 118 | ticketPrice: 320, 119 | posterURL: 120 | "https://www.torrentbd.com/posters/Zk9u9CpJkmAEZOyu3ZAq8wYY20225374.jpg", 121 | }, 122 | { 123 | title: "Avengers: Endgame", 124 | year: 2019, 125 | ticketPrice: 370, 126 | posterURL: 127 | "https://www.torrentbd.com/posters/VDZUEqOdFDjt7rKw91WhRQYY4154796.jpg", 128 | }, 129 | { 130 | title: "After Ever Happy", 131 | year: 2022, 132 | ticketPrice: 340, 133 | posterURL: 134 | "https://www.torrentbd.com/posters/ug8FrB12ZEMw5AMZcIbaVAYY13070038.jpg", 135 | }, 136 | { 137 | title: "House of the Dragon", 138 | year: 2022, 139 | ticketPrice: 380, 140 | posterURL: 141 | "https://www.torrentbd.com/posters/oUw3f9JJagihLRybyY7P5wYY11198330.jpg", 142 | }, 143 | { 144 | title: "Attorney Woo", 145 | year: 2022, 146 | ticketPrice: 350, 147 | posterURL: 148 | "https://www.torrentbd.com/posters/aDUZ4745QpjXfgquTzQ5AwYY20869502.jpg", 149 | }, 150 | { 151 | title: "The Sandman", 152 | year: 2022, 153 | ticketPrice: 370, 154 | posterURL: 155 | "https://www.torrentbd.com/posters/BD8VXOgCq4d4P2vBeiG3qAYY1751634.jpg", 156 | }, 157 | { 158 | title: "Game of Thrones", 159 | year: 2011, 160 | ticketPrice: 380, 161 | posterURL: 162 | "https://www.torrentbd.com/posters/eCEzQi8tgNq6bLUUS6GvPQYY0944947.jpg", 163 | }, 164 | { 165 | title: "Devil in Ohio", 166 | year: 2022, 167 | ticketPrice: 320, 168 | posterURL: 169 | "https://www.torrentbd.com/posters/1rN7pJD60NRmxH2TPGEwQQYY15432016.jpg", 170 | }, 171 | { 172 | title: "Flower of Evil", 173 | year: 2020, 174 | ticketPrice: 300, 175 | posterURL: 176 | "https://www.torrentbd.com/posters/IbnZZQxZZg9RIjknkdCxIgYY11691684.jpg", 177 | }, 178 | { 179 | title: "Rubikon", 180 | year: 2022, 181 | ticketPrice: 300, 182 | posterURL: 183 | "https://www.torrentbd.com/posters/TniRZHKO0nZv09JCa8RLZQYY13829262.jpg", 184 | }, 185 | { 186 | title: "Into the Deep", 187 | year: 2022, 188 | ticketPrice: 320, 189 | posterURL: 190 | "https://www.torrentbd.com/posters/zZnz5m2SkIqmwjuRjgwMCAYY11005128.jpg", 191 | }, 192 | { 193 | title: "Take the Night", 194 | year: 2022, 195 | ticketPrice: 330, 196 | posterURL: 197 | "https://www.torrentbd.com/posters/Ci0Z2AARW9I8CPIn6jev4wYY10680838.jpg", 198 | }, 199 | { 200 | title: "Monstrous", 201 | year: 2022, 202 | ticketPrice: 350, 203 | posterURL: 204 | "https://m.media-amazon.com/images/M/MV5BNmJhZDJkMGEtYzQxMC00MDA0LTk4NWItMjljNDRjNTJmNjY1XkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg", 205 | }, 206 | { 207 | title: "Little Ukraine", 208 | year: 2022, 209 | ticketPrice: 330, 210 | posterURL: 211 | "https://www.torrentbd.com/posters/2QuXs4NbZNZ5XhjOJlyv2QYY11511518.jpg", 212 | }, 213 | { 214 | title: "Cadaver", 215 | year: 2022, 216 | ticketPrice: 350, 217 | posterURL: 218 | "https://www.torrentbd.com/posters/uSjfX4CobqC3o0LZ7FDNiQYY11102262.jpg", 219 | }, 220 | { 221 | title: "Pil's Adventures", 222 | year: 2021, 223 | ticketPrice: 310, 224 | posterURL: 225 | "https://www.torrentbd.com/posters/RMg470prsaRlrM6OzzLonQYY15091284.jpg", 226 | }, 227 | { 228 | title: "The Art of Passion", 229 | year: 2022, 230 | ticketPrice: 330, 231 | posterURL: 232 | "https://www.torrentbd.com/posters/kJ8XyJDdxZZ6Pe0kqGmwfAYY19380876.jpg", 233 | }, 234 | { 235 | title: "Prey", 236 | year: 2022, 237 | ticketPrice: 380, 238 | posterURL: 239 | "https://www.torrentbd.com/posters/DegyyZ5ZNP7LoOiVvnoN1AYY11866324.jpg", 240 | }, 241 | { 242 | title: "Luck", 243 | year: 2022, 244 | ticketPrice: 340, 245 | posterURL: 246 | "https://www.torrentbd.com/posters/5qzrfqkStIP3flwZ4ihYGQYY7214954.jpg", 247 | }, 248 | { 249 | title: "Carter", 250 | year: 2022, 251 | ticketPrice: 330, 252 | posterURL: 253 | "https://www.torrentbd.com/posters/6TxRWSmE3HIDvnGZ0pS1ZAYY21237030.jpg", 254 | }, 255 | { 256 | title: "Carma", 257 | year: 2022, 258 | ticketPrice: 350, 259 | posterURL: 260 | "https://www.torrentbd.com/posters/CjLfdksflPNI4aqNFf5SFAYY14992864.jpg", 261 | }, 262 | { 263 | title: "The Moderator", 264 | year: 2022, 265 | ticketPrice: 340, 266 | posterURL: 267 | "https://www.torrentbd.com/posters/e2xU0RqLZ4LVuoD3Nj4XHwYY12810902.jpg", 268 | }, 269 | { 270 | title: "The Princess", 271 | year: 2022, 272 | ticketPrice: 330, 273 | posterURL: 274 | "https://www.torrentbd.com/posters/ARNOJg3bwASSfJ7cCveoKAYY13406136.jpg", 275 | }, 276 | { 277 | title: "Revealer", 278 | year: 2022, 279 | ticketPrice: 300, 280 | posterURL: 281 | "https://www.torrentbd.com/posters/b4mgPbm1On6r6lS5zfLowAYY14661252.jpg", 282 | }, 283 | { 284 | title: "Anchor", 285 | year: 2022, 286 | ticketPrice: 350, 287 | posterURL: 288 | "https://www.torrentbd.com/posters/VGEM3CadFzZPTbGwUDVIrwYY19245482.jpg", 289 | }, 290 | { 291 | title: "The Witch: Part 2", 292 | year: 2022, 293 | ticketPrice: 350, 294 | posterURL: 295 | "https://www.torrentbd.com/posters/boHrz7AZFY4N6SQknw2ZdQYY13721828.jpg", 296 | }, 297 | { 298 | title: "Vikram", 299 | year: 2022, 300 | ticketPrice: 380, 301 | posterURL: 302 | "https://www.torrentbd.com/posters/idJqYus6zjdGAoERtKkLAAYY9179430.jpg", 303 | }, 304 | { 305 | title: "Watcher", 306 | year: 2022, 307 | ticketPrice: 330, 308 | posterURL: 309 | "https://www.torrentbd.com/posters/n17TeZ9062keY64ukljBXgYY12004038.jpg", 310 | }, 311 | ]; 312 | 313 | // display movies 314 | function displayMovies() { 315 | const moviesElement = document.querySelector(".movies"); 316 | 317 | for (let i = 0; i < moviesArr.length; i++) { 318 | console.log(moviesArr[i]); 319 | const movieElement = document.createElement("div"); 320 | movieElement.classList.add( 321 | "movie", 322 | "card", 323 | "p-0", 324 | "col", 325 | "shadow", 326 | "border-0", 327 | "rounded-3" 328 | ); 329 | movieElement.innerHTML = ` 330 |
331 | 333 |
334 |
335 |
${moviesArr[i].title} (${moviesArr[i].year})
336 |
${moviesArr[i].ticketPrice} ৳
337 | 338 |
339 | `; 340 | moviesElement.append(movieElement); 341 | } 342 | } 343 | displayMovies(); 344 | 345 | // display modal 346 | function displayModal() { 347 | const bookTickets = document.querySelectorAll(".book-ticket"); 348 | // console.log(bookTickets); 349 | const modalWindow = document.querySelector(".modal-window"); 350 | 351 | for (let i = 0; i < bookTickets.length; i++) { 352 | bookTickets[i].addEventListener("Click", function () { 353 | // console.log("clicked"); 354 | for (let j = 0; j < moviesArr.length; j++) { 355 | if (i === j) { 356 | const title = moviesArr[j].title; 357 | const year = moviesArr[j].year; 358 | const price = moviesArr[j].ticketPrice; 359 | const vat = (price * 7) / 100; 360 | const subtotal = price + vat; 361 | 362 | // showing modal window 363 | modalWindow.style.opacity = 1; 364 | modalWindow.style.visibility = visible; 365 | 366 | modalWindow.innerHTML = ` 367 | ❌ 368 |

${title} (${year})

369 |
Price: 300 ৳
370 |
Vat: ${price} ৳
371 |
Vat: ${vat} ৳
372 |

Subtotal: ${subtotal} ৳

373 | `; 374 | 375 | // hiding the modal 376 | const closeBtn = document.querySelector(".close-btn"); 377 | 378 | closeBtn.addEventListener("click", function () { 379 | modalWindow.style.opacity = 0; 380 | modalWindow.style.visibility = hidden; 381 | }); 382 | } 383 | } 384 | }); 385 | } 386 | } 387 | 388 | displayModal(); 389 | --------------------------------------------------------------------------------