├── img ├── download.jpg ├── thehobbit.jpg ├── Screenshot (490).png ├── me-before-you-poster.jpg ├── xl_108108_cab05185.jpg ├── istockphoto-824033170-612x612.jpg ├── ba87e988-5aa1-4355-8214-c88fb7aaad9c.jpg └── Uncut-Gems-Movie-Art-print-Silk-poster-Home-Wall-Decor.jpg ├── logic.js ├── index.html └── style.css /img/download.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahilxkhadka/skmovies/HEAD/img/download.jpg -------------------------------------------------------------------------------- /img/thehobbit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahilxkhadka/skmovies/HEAD/img/thehobbit.jpg -------------------------------------------------------------------------------- /img/Screenshot (490).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahilxkhadka/skmovies/HEAD/img/Screenshot (490).png -------------------------------------------------------------------------------- /img/me-before-you-poster.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahilxkhadka/skmovies/HEAD/img/me-before-you-poster.jpg -------------------------------------------------------------------------------- /img/xl_108108_cab05185.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahilxkhadka/skmovies/HEAD/img/xl_108108_cab05185.jpg -------------------------------------------------------------------------------- /img/istockphoto-824033170-612x612.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahilxkhadka/skmovies/HEAD/img/istockphoto-824033170-612x612.jpg -------------------------------------------------------------------------------- /img/ba87e988-5aa1-4355-8214-c88fb7aaad9c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahilxkhadka/skmovies/HEAD/img/ba87e988-5aa1-4355-8214-c88fb7aaad9c.jpg -------------------------------------------------------------------------------- /img/Uncut-Gems-Movie-Art-print-Silk-poster-Home-Wall-Decor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahilxkhadka/skmovies/HEAD/img/Uncut-Gems-Movie-Art-print-Silk-poster-Home-Wall-Decor.jpg -------------------------------------------------------------------------------- /logic.js: -------------------------------------------------------------------------------- 1 | const toggleNav=document.getElementsByClassName("hamburger-lines"); 2 | const navBlock=document.getElementById("malmasala"); 3 | toggleNav[0].addEventListener("click",()=>{ 4 | navBlock.classList.toggle("toggle") 5 | }) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | SK Movies 10 | 11 | 12 | 41 |
42 |
43 | Movie Hall 44 |
45 |
46 |

Movies at reasonable prices

47 | Watch Now 48 |
49 |
50 | 51 |
52 |
53 | 54 |

4k Movies

55 |

Watch all the latest movies in high quality 4k

56 |
57 |
58 | 59 |

Restro & Bar

60 |

A perfect place arranged for you to dine.

61 |
62 |
63 | 64 |

Customer Care

65 |

Friendly customer care always dedicated at your service

66 |
67 |
68 |
69 |

Top Movies for the week

70 |
71 |
72 |
73 | 74 |
75 | 7/10 76 |

Romance/Drama

77 |
78 |
79 |
80 | 81 |
82 | 7.4/10 83 |

Crime/Comedy-Drama

84 |
85 |
86 |
87 | 88 |
89 | 7.8/10 90 |

High Fantasy

91 |
92 |
93 |
94 | 95 |
96 | 8/10 97 |

War/Adventure

98 |
99 |
100 |
101 | 102 |
103 | 6.8/10 104 |

Comedy/Romance

105 |
106 |
107 |
108 | 109 |
110 | 7.6/10 111 |

Comedy/Adventure

112 |
113 |
114 |
115 | 116 |
117 |
118 | 119 |

Iso 9001 certified

120 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis deserunt inventore sequi modi asperiores eveniet nobis blanditiis non quam optio saepe quaerat beatae minima ratione quisquam, harum omnis! Porro odit, eaque consectetur recusandae labore aut neque magnam nulla voluptate perferendis nostrum! Vel quidem obcaecati, deleniti nulla dolore veritatis animi eius.

121 |
122 |
123 |
124 |

Contact Us:

125 |
126 |
127 |
128 |
129 | 130 | 131 |
132 | 136 |
137 | 138 |
139 | 140 |
141 | 142 |
143 | 151 | 152 | 153 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap'); 2 | *, 3 | *::after, 4 | *::before{ 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | } 9 | html{ 10 | font-size: 62.5%; 11 | } 12 | body{ 13 | font-family: 'Poppins', sans-serif; 14 | scroll-behavior: smooth; 15 | overflow-x:hidden; 16 | } 17 | /* #######################nav-barstyling ################################# */ 18 | .navbar{ 19 | background: rgb(14, 10, 10); 20 | height: 64px; 21 | width: 100%; 22 | position: relative; 23 | z-index: 5; 24 | } 25 | .navbar-container{ 26 | display: flex; 27 | justify-content: space-between; 28 | align-items: flex-start; 29 | } 30 | .nav-menu-items{ 31 | display: flex; 32 | order: 3; 33 | } 34 | .nav-heading{ 35 | order: 2; 36 | height: 100%; 37 | font-weight: 500; 38 | align-self: center; 39 | justify-self: center; 40 | padding-top: 1.5rem; 41 | margin-left: 15rem; 42 | font-size: 3rem; 43 | color: #fff; 44 | text-transform: uppercase; 45 | } 46 | .social{ 47 | margin-top: 2rem; 48 | margin-left: 2.5rem; 49 | color: #fff; 50 | } 51 | .fa-instagram:hover{ 52 | background: linear-gradient(45DEG, #405DE6, #5851DB, #83AAB4, #C13584, #E1306C, #FD1D1D); 53 | border-radius: 1.8rem; 54 | } 55 | .fa-twitter-square:hover{ 56 | color: #1DA1F2; 57 | } 58 | .nav-menu-items{ 59 | margin-right: 2.5rem; 60 | } 61 | .hamburger-lines{ 62 | display: block; 63 | height: 24px; 64 | width: 32px; 65 | position: absolute; 66 | top: 20px; 67 | left: 20px; 68 | z-index: 2; 69 | display: flex; 70 | flex-direction: column; 71 | justify-content: space-between; 72 | cursor: pointer; 73 | } 74 | .hamburger-lines .lines{ 75 | height: 4px; 76 | width: 100%; 77 | display: block; 78 | background: #fff; 79 | border-radius: 10px; 80 | } 81 | .ham-menu-items{ 82 | position: absolute; 83 | top: 0px; 84 | left: 0px; 85 | height: 100vh; 86 | width: 350px; 87 | background: #000; 88 | transform: translateX(-100%); 89 | display: flex; 90 | flex-direction: column; 91 | justify-content: space-evenly; 92 | transition: transform 0.3s ease-in-out; 93 | } 94 | .ham-menu-items li{ 95 | font-size: 2rem; 96 | font-weight: 400; 97 | padding-left: 40px; 98 | } 99 | .ham-menu-items a{ 100 | text-decoration: none; 101 | color: #fff; 102 | } 103 | .ham-menu-items a:hover{ 104 | text-decoration: 2px underline blue; 105 | } 106 | .toggle{ 107 | transform: translateX(0%); 108 | } 109 | /* ###############cover-image-styling################ */ 110 | .cover-image-container{ 111 | position: relative; 112 | } 113 | .cover-image-container img{ 114 | display: block; 115 | height: 85vh; 116 | width: 100%; 117 | object-fit: center; 118 | object-position: center; 119 | } 120 | .cover-page-container .cover-image-text{ 121 | color: #000; 122 | font-size: 3rem; 123 | font-weight: 500; 124 | position: absolute; 125 | top: 50%; 126 | left: 50%; 127 | bottom: 80px; 128 | text-align: center; 129 | transform: translate(-50%, -50%); 130 | text-transform: uppercase; 131 | } 132 | .cover-page-container a{ 133 | text-decoration: none; 134 | color: honeydew; 135 | font-size: 2rem; 136 | } 137 | .button{ 138 | background: rgba(236, 42, 42, 0.843); 139 | border-radius: 5rem; 140 | padding: 1rem; 141 | margin-top: 1.5rem; 142 | box-shadow: 1px 1px 1px 1px #aaa; 143 | } 144 | .button:hover{ 145 | background: #000; 146 | } 147 | .services-container{ 148 | max-width: 75%; 149 | margin: 3rem auto; 150 | display: flex; 151 | justify-content: space-between; 152 | background: honeydew; 153 | padding: 1.5rem; 154 | height: 250px; 155 | box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; 156 | } 157 | .services-container .movies{ 158 | margin-left: 0; 159 | } 160 | .movies, .resturant, .customer-care{ 161 | display: flex; 162 | flex-direction: column; 163 | align-items: center; 164 | justify-content: space-around; 165 | border: 2px solid rgb(80, 80, 80); 166 | width: 33%; 167 | margin-left: 1.5rem; 168 | } 169 | .movies h2, .resturant h2, .customer-care h2{ 170 | font-size: 2.5rem; 171 | font-weight: 600; 172 | text-transform: uppercase; 173 | } 174 | .services-text{ 175 | font-size: 1.8rem; 176 | font-weight: 400; 177 | text-align: center; 178 | } 179 | .services-container .fas{ 180 | color: rgb(80, 80, 80); 181 | } 182 | .middle-heading{ 183 | font-size: 2.8rem; 184 | font-weight: 600; 185 | text-align: center; 186 | text-transform: uppercase; 187 | color: rgb(17, 14, 14); 188 | } 189 | .movies-container{ 190 | max-width: 80%; 191 | margin: 3rem auto; 192 | display: flex; 193 | justify-content: space-evenly; 194 | flex-wrap: wrap; 195 | align-items: center; 196 | height: 750px; 197 | } 198 | .movies-container img{ 199 | display: block; 200 | height: 350px; 201 | object-fit: center; 202 | object-position: center; 203 | } 204 | .movies-container .movie-list{ 205 | width: 26%; 206 | display: flex; 207 | flex-direction: column; 208 | justify-content: center; 209 | margin-bottom: 3rem; 210 | } 211 | .movies-container .fas{ 212 | color: gold; 213 | } 214 | .movie-one-container{ 215 | position: relative; 216 | } 217 | .movie-one-text{ 218 | text-align: center; 219 | color: whitesmoke; 220 | font-size: 2rem; 221 | font-weight: 700; 222 | text-transform: uppercase; 223 | position: absolute; 224 | top: 75%; 225 | left: 10%; 226 | z-index: 2; 227 | display: none; 228 | } 229 | .movie-one-container::after{ 230 | content: ' '; 231 | display: block; 232 | height: 100%; 233 | width: 100%; 234 | position: absolute; 235 | top: 0px; 236 | left: 0px; 237 | background: #000; 238 | transform: translateY(100%); 239 | transition: all 0.3s ease-in-out; 240 | opacity: 0; 241 | } 242 | .movie-one-container:hover::after{ 243 | opacity: 0.7; 244 | transform: translateY(0%); 245 | } 246 | .movie-one-container:hover .movie-one-text{ 247 | display: block; 248 | } 249 | .movie-two-container{ 250 | position: relative; 251 | } 252 | .movie-two-text{ 253 | text-align: center; 254 | color: whitesmoke; 255 | font-size: 2rem; 256 | font-weight: 700; 257 | text-transform: uppercase; 258 | position: absolute; 259 | top: 70%; 260 | left: 10%; 261 | z-index: 2; 262 | display: none; 263 | } 264 | .movie-two-container::after{ 265 | content: ' '; 266 | display: block; 267 | height: 100%; 268 | width: 100%; 269 | position: absolute; 270 | top: 0px; 271 | left: 0px; 272 | background: #000; 273 | transform: translateX(100%); 274 | transition: all 0.3s ease-in-out; 275 | opacity: 0; 276 | } 277 | .movie-two-container:hover::after{ 278 | opacity: 0.7; 279 | transform: translateX(0%); 280 | } 281 | .movie-two-container:hover .movie-two-text{ 282 | display: block; 283 | } 284 | .movie-three-container{ 285 | position: relative; 286 | } 287 | .movie-three-text{ 288 | text-align: center; 289 | color: whitesmoke; 290 | font-size: 2rem; 291 | font-weight: 700; 292 | text-transform: uppercase; 293 | position: absolute; 294 | top: 70%; 295 | left: 20%; 296 | z-index: 2; 297 | display: none; 298 | } 299 | .movie-three-container::after{ 300 | content: ' '; 301 | display: block; 302 | height: 100%; 303 | width: 100%; 304 | position: absolute; 305 | top: 0px; 306 | left: 0px; 307 | background: #000; 308 | transform: translate(100%, -100%); 309 | transition: all 0.3s ease-in-out; 310 | opacity: 0; 311 | } 312 | .movie-three-container:hover::after{ 313 | opacity: 0.7; 314 | transform: translate(0%, 0%); 315 | } 316 | .movie-three-container:hover .movie-three-text{ 317 | display: block; 318 | } 319 | .movie-four-container{ 320 | position: relative; 321 | } 322 | .movie-four-text{ 323 | text-align: center; 324 | color: whitesmoke; 325 | font-size: 2rem; 326 | font-weight: 700; 327 | text-transform: uppercase; 328 | position: absolute; 329 | top: 75%; 330 | left: 10%; 331 | z-index: 2; 332 | display: none; 333 | } 334 | .movie-four-container::after{ 335 | content: ' '; 336 | display: block; 337 | height: 100%; 338 | width: 100%; 339 | position: absolute; 340 | top: 0px; 341 | left: 0px; 342 | background: #000; 343 | transform: translateX(-100%); 344 | transition: all 0.3s ease-in-out; 345 | opacity: 0; 346 | } 347 | .movie-four-container:hover::after{ 348 | opacity: 0.7; 349 | transform: translateX(0%); 350 | } 351 | .movie-four-container:hover .movie-four-text{ 352 | display: block; 353 | } 354 | .movie-five-container{ 355 | position: relative; 356 | } 357 | .movie-five-text{ 358 | text-align: center; 359 | color: whitesmoke; 360 | font-size: 2rem; 361 | font-weight: 700; 362 | text-transform: uppercase; 363 | position: absolute; 364 | top: 70%; 365 | left: 10%; 366 | z-index: 2; 367 | display: none; 368 | } 369 | .movie-five-container::after{ 370 | content: ' '; 371 | display: block; 372 | height: 100%; 373 | width: 100%; 374 | position: absolute; 375 | top: 0px; 376 | left: 0px; 377 | background: #000; 378 | transform: translateX(100%); 379 | transition: all 0.3s ease-in-out; 380 | opacity: 0; 381 | } 382 | .movie-five-container:hover::after{ 383 | opacity: 0.7; 384 | transform: translateX(0%); 385 | } 386 | .movie-five-container:hover .movie-five-text{ 387 | display: block; 388 | } 389 | .movie-six-container{ 390 | position: relative; 391 | } 392 | .movie-six-text{ 393 | text-align: center; 394 | color: whitesmoke; 395 | font-size: 2rem; 396 | font-weight: 700; 397 | text-transform: uppercase; 398 | position: absolute; 399 | top: 70%; 400 | left: 2%; 401 | z-index: 2; 402 | display: none; 403 | } 404 | .movie-six-container::after{ 405 | content: ' '; 406 | display: block; 407 | height: 100%; 408 | width: 100%; 409 | position: absolute; 410 | top: 0px; 411 | left: 0px; 412 | background: #000; 413 | transform: translateX(100%); 414 | transition: all 0.3s ease-in-out; 415 | opacity: 0; 416 | } 417 | .movie-six-container:hover::after{ 418 | opacity: 0.7; 419 | transform: translateX(0%); 420 | } 421 | .movie-six-container:hover .movie-six-text{ 422 | display: block; 423 | } 424 | /* ######################certification################ */ 425 | .certification-container{ 426 | max-width: 80%; 427 | height: 400px; 428 | margin: 8rem auto; 429 | background: cornsilk; 430 | display: flex; 431 | flex-direction: column; 432 | justify-content: space-evenly; 433 | align-items: center; 434 | border: 5px solid black; 435 | box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; 436 | } 437 | .certification-wrapper{ 438 | margin: 3rem; 439 | border: 3px solid black; 440 | text-align: center; 441 | } 442 | .certification-heading{ 443 | font-size: 4rem; 444 | text-transform: uppercase; 445 | font-weight: 600; 446 | color: rgb(17, 14, 14); 447 | } 448 | .certification-text{ 449 | padding:2rem; 450 | text-align: center; 451 | font-size: 2rem; 452 | font-weight: 400; 453 | } 454 | .certification-container .fas{ 455 | color: gold; 456 | padding-top: 2rem; 457 | } 458 | /* ##################contact ############ */ 459 | #contact{ 460 | max-width: 80%; 461 | height: 400px; 462 | margin: 3rem auto; 463 | background: #fff3f3; 464 | display: flex; 465 | justify-content: space-around; 466 | align-items: center; 467 | } 468 | .contact-wrapper{ 469 | width: 50%; 470 | height: 100%; 471 | display: flex; 472 | flex-direction: column; 473 | justify-content: space-around; 474 | align-items: center; 475 | } 476 | .contact-wrapper .field{ 477 | display: flex; 478 | flex-direction: column; 479 | } 480 | .field input{ 481 | width: 250px; 482 | } 483 | .field{ 484 | font-size: 1.5rem; 485 | font-weight: 400; 486 | } 487 | .contact-wrapper .button{ 488 | color: honeydew; 489 | } 490 | .contact-form img{ 491 | display: block; 492 | width: 90%; 493 | height: 90%; 494 | margin: auto; 495 | object-fit: center; 496 | object-position: center; 497 | } 498 | /* #########################footer###################### */ 499 | .footer-container{ 500 | height: 80px; 501 | width: 100%; 502 | background: rgb(14, 10, 10); 503 | color: honeydew; 504 | display: flex; 505 | flex-direction: column; 506 | align-items: center; 507 | justify-content: space-around; 508 | } 509 | .connect-links a{ 510 | margin-right: 3rem; 511 | color: honeydew; 512 | } 513 | .footer-text{ 514 | text-transform: uppercase; 515 | font-size: 2rem; 516 | font-weight: 500; 517 | } 518 | /* ##################media-queries ############ */ 519 | @media(max-width: 768px) 520 | { 521 | body{ 522 | font-size: 50%; 523 | } 524 | .nav-heading{ 525 | display: none; 526 | } 527 | .cover-image-container, .cover-image-container img{ 528 | height: 50vh; 529 | } 530 | .cover-page-container .cover-image-text{ 531 | display: none; 532 | } 533 | .services-container{ 534 | flex-direction: column; 535 | justify-content: space-between; 536 | align-items: center; 537 | height: 100vh; 538 | } 539 | .movies, .resturant, .customer-care{ 540 | width: 100%; 541 | height: 33%; 542 | margin-left: 0; 543 | } 544 | .middle-heading{ 545 | font-size: 1.5rem; 546 | } 547 | .movies-container{ 548 | flex-direction: column; 549 | height: auto; 550 | } 551 | .movies-container .movie-list{ 552 | width: 100%; 553 | } 554 | .movies-container img{ 555 | height: auto; 556 | } 557 | .movie-one-text{ 558 | left: 20%; 559 | } 560 | .movie-two-text{ 561 | top: 80%; 562 | } 563 | .movie-three-text{ 564 | top: 80%; 565 | left: 30%; 566 | } 567 | .movie-four-text{ 568 | left: 25%; 569 | } 570 | .movie-five-text{ 571 | top: 80%; 572 | left: 25%; 573 | } 574 | .movie-six-text{ 575 | top: 80%; 576 | left: 20%; 577 | } 578 | .certification-container{ 579 | max-width: 95%; 580 | height: auto; 581 | } 582 | .certification-heading{ 583 | font-size: 3rem; 584 | } 585 | .certification-text{ 586 | padding: 1.5rem; 587 | font-size: 1.5rem; 588 | } 589 | #contact{ 590 | max-width: 90%; 591 | flex-direction: column; 592 | height: auto; 593 | justify-content: space-evenly; 594 | } 595 | .contact-wrapper{ 596 | margin-bottom: 2rem; 597 | justify-content: space-between; 598 | align-items: flex-start; 599 | height: 60%; 600 | width: 100%; 601 | } 602 | .hamburger-lines{ 603 | height: 16px; 604 | width: 24px; 605 | } 606 | .hamburger-lines .lines{ 607 | height: 2px; 608 | } 609 | } 610 | --------------------------------------------------------------------------------