├── style.css ├── index.html └── script.js /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap"); 2 | 3 | body { 4 | font-family: "Source Sans Pro", sans-serif; 5 | background-color: #f0f8ff; 6 | } 7 | 8 | .navbar { 9 | background-color: rgba(216, 223, 230, 0.7); 10 | backdrop-filter: blur(10px); 11 | -webkit-backdrop-filter: (20px); 12 | z-index: 98; 13 | } 14 | 15 | .carousel { 16 | margin-top: 3.5rem; 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(255, 255, 255, 0.9); 41 | backdrop-filter: blur(10px); 42 | -webkit-backdrop-filter: blur(10px); 43 | padding: 2rem; 44 | border-radius: 1rem; 45 | box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.5); 46 | opacity: 0; 47 | visibility: hidden; 48 | transform: all 0.3s; 49 | } 50 | 51 | .close-btn { 52 | position: absolute; 53 | top: 1rem; 54 | right: 1rem; 55 | cursor: pointer; 56 | } 57 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Cine Mela 8 | 14 | 15 | 16 | 17 |
18 | 19 | 57 | 58 | 145 |
146 |
147 | 148 |
149 |

In Cinemas Now

150 |
151 |
152 | Movie Poster 157 |
158 |
159 |

Top Gun: Maverick

160 |

161 | After more than 30 years of service as one of the Navy's top 162 | aviators, Pete "Maverick" Mitchell is where he belongs, pushing 163 | the envelope as a courageous test pilot and dodging the 164 | advancement in rank that would ground him. 165 |

166 |

167 | Training a detachment of graduates for a special assignment, 168 | Maverick must confront the ghosts of his past and his deepest 169 | fears, culminating in a mission that demands the ultimate 170 | sacrifice from those who choose to fly it. 171 |

172 |

Release date: May 27, 2022 (USA)

173 |

Director: Joseph Kosinski

174 |

Box office: 1.488 billion USD

175 |

Budget: 170 million USD

176 |

Art director: Clint Wallace

177 |
178 |

Running Successfully 🎉

179 |
180 |
181 |
182 | 183 | 184 |
185 |

Trending Now

186 |
189 | 190 | 197 |
198 |
199 | 200 | 201 |
202 | ❌ 203 |

Movie title (year)

204 |
Price: 300 ৳
205 |
VAT 30 ৳
206 | 207 |
208 |
209 | 210 | 215 | 216 | 217 | 218 | -------------------------------------------------------------------------------- /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://m.media-amazon.com/images/M/MV5BZjBiOGIyY2YtOTA3OC00YzY1LThkYjktMGRkYTNhNTExY2I2XkEyXkFqcGdeQXVyMTEyMjM2NDc2._V1_FMjpg_UX1013_.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 moviesEl = document.querySelector(".movies"); 316 | 317 | for (let i = 0; i < moviesArr.length; i++) { 318 | const movie = document.createElement("div"); 319 | movie.classList.add( 320 | "movie", 321 | "col", 322 | "card", 323 | "p-0", 324 | "shadow", 325 | "border-0", 326 | "rounded-3" 327 | ); 328 | 329 | movie.innerHTML = ` 330 |
331 | 332 |
333 |
334 |
335 | ${moviesArr[i].title} (${moviesArr[i].year}) 336 |
337 |
${moviesArr[i].ticketPrice}৳
338 | 339 |
340 | `; 341 | moviesEl.append(movie); 342 | } 343 | } 344 | displayMovies(); 345 | 346 | function displayModal() { 347 | const bookTickets = document.querySelectorAll(".book-ticket"); 348 | const modalWindow = document.querySelector(".modal-window"); 349 | 350 | for (let i = 0; i < bookTickets.length; i++) { 351 | bookTickets[i].addEventListener("click", function () { 352 | for (let j = 0; j < moviesArr.length; j++) { 353 | if (i === j) { 354 | const title = moviesArr[j].title; 355 | const year = moviesArr[j].year; 356 | const price = moviesArr[j].ticketPrice; 357 | const vat = Number((price * 0.07).toFixed(2)); 358 | const subtotal = price + vat; 359 | 360 | modalWindow.style.opacity = 1; 361 | modalWindow.style.visibility = "visible"; 362 | 363 | modalWindow.innerHTML = ` 364 | ❌ 365 |

${title} (${year})

366 |
Price: ${price}
367 |
VAT ${vat}
368 |

Subtotal: ${subtotal}

369 | 370 | `; 371 | 372 | const closeBtn = document.querySelector(".close-btn"); 373 | closeBtn.addEventListener("click", function () { 374 | modalWindow.style.opacity = 0; 375 | modalWindow.style.visibility = "hidden"; 376 | }); 377 | } 378 | } 379 | }); 380 | } 381 | } 382 | 383 | displayModal(); 384 | --------------------------------------------------------------------------------