├── README.md ├── script.js ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | 2 |

Project Name: [FilmGalaxy]

3 | 4 | https://filmgalaxy.netlify.app 5 | 6 | Description: Welcome to Film Galaxy!!🚀, a dynamic and immersive movie website designed to give users the ultimate cinematic experience! Explore a vast galaxy of films, discover trending movies, get detailed information about your favorite films, and much more. 7 | 8 | This project is built using HTML, CSS, and JavaScript, featuring a responsive design, smooth navigation, and a visually appealing, galaxy-inspired interface. Users can search, filter, and find detailed movie info with ease, all while enjoying a futuristic, stellar theme. 9 | 10 |

Key Features:

11 | 12 | Movie browsing with categories and filters 13 | Search functionality for quick movie discovery 14 | Responsive design for seamless viewing on any device 15 | Interactive UI with animations and effects 16 | Movie details page with trailers, cast info, and reviews 17 | 18 |

Tech Stack:

19 | 20 | HTML, CSS (Flexbox/Grid), JavaScript (Vanilla JS) 21 | APIs from tmdb 22 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | 2 | // script.js 3 | const mobileMenu = document.getElementById('mobile-menu'); 4 | const navMenu = document.querySelector('.nav-menu'); 5 | 6 | mobileMenu.addEventListener('click', () => { 7 | navMenu.classList.toggle('active'); // Toggle 'active' class 8 | }); 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | const images = [ 17 | "https://i.pinimg.com/enabled_lo/564x/ae/0c/65/ae0c6506aa74d3940a025715d9a8ee8b.jpg", 18 | "https://images.unsplash.com/photo-1550197833-2a3ea3ebe101?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", 19 | "https://images.unsplash.com/photo-1621794212641-22b9f200bcf7?q=80&w=1032&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", 20 | "https://images.unsplash.com/photo-1586763365361-dfe8a05f66b6?q=80&w=956&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 21 | ]; 22 | 23 | let currentIndex = 0; 24 | 25 | function showImage(index) { 26 | const sliderImage = document.getElementById("slider-image"); 27 | sliderImage.src = images[index]; 28 | } 29 | 30 | function changeImage(direction) { 31 | currentIndex = (currentIndex + direction + images.length) % images.length; 32 | showImage(currentIndex); 33 | } 34 | 35 | function autoChangeImage() { 36 | currentIndex = (currentIndex + 1) % images.length; 37 | showImage(currentIndex); 38 | } 39 | 40 | setInterval(autoChangeImage, 6000); // Change image every 3 seconds 41 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | FilmGalaxy 10 | 11 | 12 | 13 | 14 |

15 | 32 |

33 |

34 |

35 |

36 |

37 |

38 | 39 | 40 |

41 |

42 |

43 | 46 |

47 |

48 |

49 |

Movie Picture

50 |

51 |

Movie Title

52 | 9.8 53 |

54 |

55 |

overview

56 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni recusandae quia aspernatur corporis illo ducimus voluptates ipsam perspiciatis accusamus eos? 57 |

58 |

59 |

60 |

Movie Picture

61 |

62 |

Movie Title

63 | 9.8 64 |

65 |

66 |

overview

67 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni recusandae quia aspernatur corporis illo ducimus voluptates ipsam perspiciatis accusamus eos? 68 |

69 |

70 |

71 |

Movie Picture

72 |

73 |

Movie Title

74 | 9.8 75 |

76 |

77 |

overview

78 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni recusandae quia aspernatur corporis illo ducimus voluptates ipsam perspiciatis accusamus eos? 79 |

80 |

81 |

82 |

Movie Picture

83 |

84 |

Movie Title

85 | 9.8 86 |

87 |

88 |

overview

89 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni recusandae quia aspernatur corporis illo ducimus voluptates ipsam perspiciatis accusamus eos? 90 |

91 |

92 |

93 |

Movie Picture

94 |

95 |

Movie Title

96 | 9.8 97 |

98 |

99 |

overview

100 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni recusandae quia aspernatur corporis illo ducimus voluptates ipsam perspiciatis accusamus eos? 101 |

102 |

103 |

104 |

Movie Picture

105 |

106 |

Movie Title

107 | 3.8 108 |

109 |

110 |

overview

111 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni recusandae quia aspernatur corporis illo ducimus voluptates ipsam perspiciatis accusamus eos? 112 |

113 |

114 |

115 |

Movie Picture

116 |

117 |

Movie Title

118 | 3.8 119 |

120 |

121 |

overview

122 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni recusandae quia aspernatur corporis illo ducimus voluptates ipsam perspiciatis accusamus eos? 123 |

124 |

125 |

126 |

Movie Picture

127 |

128 |

Movie Title

129 | 3.8 130 |

131 |

132 |

overview

133 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni recusandae quia aspernatur corporis illo ducimus voluptates ipsam perspiciatis accusamus eos? 134 |

135 |

136 |

137 | 138 |

139 | 140 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 3 | 4 | *{ 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | 9 | } 10 | 11 | :root{ 12 | --primary-color: #D9BB95; 13 | --secondary-color: #75543B; 14 | --secondary-color2: #A23A2D; 15 | } 16 | 17 | body { 18 | background-color:var(--primary-color) ; 19 | font-family: 'Poppins', sans-serif; 20 | margin:0; 21 | font-weight: 300; 22 | } 23 | 24 | /* Adjusting slider image height */ 25 | .image-container { 26 | position: relative; 27 | width: 100%; 28 | height: 300px; /* Set your desired height */ 29 | overflow: hidden; 30 | } 31 | 32 | .overlay { 33 | position: absolute; /* Position overlay on top of the image */ 34 | top: 0; /* Align to the top */ 35 | left: 0; /* Align to the left */ 36 | right: 0; /* Align to the right */ 37 | bottom: 0; /* Align to the bottom */ 38 | background-color: rgba(139, 69, 19, 0.6); /* Brown color with transparency */ 39 | z-index: 1; /* Ensure overlay is above the image */ 40 | } 41 | 42 | #slider-image { 43 | width: 100%; /* Make the image take the full width */ 44 | height: 100%; /* Maintain aspect ratio */ 45 | position: absolute; 46 | top: 0; /* Align to the top */ 47 | left: 0; /* Align to the left */ 48 | transition: opacity 0.5s ease; 49 | object-fit: cover; 50 | border-radius: 10px; 51 | 52 | } 53 | 54 | 55 | .button-container { 56 | display: flex; 57 | justify-content: center; 58 | margin-top: 10px; 59 | background-size: cover; 60 | } 61 | 62 | .nav-button { 63 | background-color: var(--secondary-color); 64 | color:var(--primary-color); 65 | border: none; 66 | padding: 10px 20px; 67 | margin: 0 5px; 68 | cursor: pointer; 69 | border-radius: 50px; 70 | } 71 | 72 | .nav-button:hover { 73 | background-color:var(--secondary-color2); 74 | } 75 | 76 | 77 | 78 | 79 | header{ 80 | padding: 1rem; 81 | display: flex; 82 | justify-content: flex-end; 83 | } 84 | 85 | .search{ 86 | width: 250px; 87 | padding: 0.5rem 1rem; 88 | border-radius: 50px; 89 | border: 2px solid var(--secondary-color); 90 | font-size: 1rem; 91 | outline: none; 92 | background-color:var(--secondary-color); 93 | color: white; 94 | text-align: center; 95 | font-family: inherit; 96 | } 97 | 98 | .search:hover{ 99 | background-color: var(--secondary-color2); 100 | } 101 | 102 | .search::placeholder{ 103 | color: #D9BB95; 104 | } 105 | 106 | /* #main{ 107 | display: flex; 108 | flex-wrap: wrap; 109 | } 110 | 111 | #movie{ 112 | width: 300px; 113 | margin: 1rem; 114 | background-color:var(--secondary-color); 115 | box-shadow: 0px 2px 3px rgba(0,0,0,0.2); 116 | position: relative; 117 | overflow: hidden; 118 | border-radius: 20px; 119 | 120 | } */ 121 | 122 | #main { 123 | display: flex; 124 | flex-wrap: wrap; 125 | justify-content: space-between; /* Distribute space between the cards */ 126 | padding: 0 1rem; /* Add padding to balance out left and right */ 127 | } 128 | 129 | .movie { 130 | flex: 1 1 calc(25% - 2rem); /* Adjust card width to take one-fourth of the row with margins */ 131 | margin: 1rem; 132 | background-color: var(--secondary-color); 133 | box-shadow: 0px 5px rgba(0, 0, 0, 0.2); 134 | position: relative; 135 | overflow: hidden; 136 | border-radius: 20px; 137 | } 138 | 139 | @media (max-width: 1200px) { 140 | .movie { 141 | flex: 1 1 calc(33.333% - 2rem); /* Three cards per row on medium screens */ 142 | } 143 | } 144 | 145 | @media (max-width: 900px) { 146 | .movie { 147 | flex: 1 1 calc(50% - 2rem); /* Two cards per row on smaller screens */ 148 | } 149 | } 150 | 151 | @media (max-width: 600px) { 152 | .movie { 153 | flex: 1 1 calc(100% - 2rem); /* One card per row on extra small screens */ 154 | } 155 | } 156 | 157 | 158 | 159 | 160 | 161 | 162 | #movie img { 163 | width: 100%; 164 | } 165 | 166 | 167 | 168 | .movie-info{ 169 | color: rgb(154, 22, 48); 170 | padding: 2px; 171 | margin: 3px; 172 | display:flex ; 173 | align-items: center; 174 | justify-content: space-between; 175 | padding: 0.5rem 1rem 1rem; 176 | letter-spacing: 0.5px; 177 | font-weight: bold; 178 | } 179 | 180 | .movie-info h3{ 181 | margin-right: 10px; 182 | margin-top: 0; 183 | } 184 | 185 | 186 | 187 | .movie-info span{ 188 | background-color: var(--primary-color); 189 | padding: 0.25rem 0.5rem; 190 | border-radius: 5px; 191 | font-weight: bold; 192 | } 193 | 194 | .movie-info span.green{ 195 | color:teal; 196 | } 197 | .movie-info span.orange{ 198 | color:orange; 199 | } 200 | .movie-info span.red{ 201 | color:var(--secondary-color2); 202 | 203 | } 204 | 205 | .overview{ 206 | color:var(--primary-color); 207 | font-size: 1.2rem; 208 | background-color: #A23A2D; 209 | position: absolute; 210 | top: 0; 211 | bottom: 0; 212 | right: 0; 213 | padding: 2rem; 214 | max-height: 100%; 215 | transform: translateY(101%); 216 | 217 | } 218 | 219 | .movie:hover .overview{ 220 | transform: translateY(0); 221 | transition: ease-in 0.5s; 222 | } 223 | /* nav */ 224 | 225 | 226 | .navbar { 227 | background-color:var(--primary-color); /* Background color for navbar */ 228 | padding: 0.5rem; /* Spacing around the navbar */ 229 | color: var(--secondary-color); 230 | } 231 | 232 | .navbar-container { 233 | display: flex; 234 | justify-content: space-between; /* Space between logo and menu */ 235 | align-items: center; /* Center items vertically */ 236 | } 237 | 238 | .logo { 239 | color: var(--secondary-color); /* Logo color */ 240 | text-decoration: none; /* Remove underline from logo */ 241 | font-size: 20px; /* Logo font size */ 242 | } 243 | 244 | .logo:hover { 245 | color: var(--secondary-color2); /* Logo color */ 246 | text-decoration: none; /* Remove underline from logo */ 247 | font-size: 20px; /* Logo font size */ 248 | } 249 | 250 | 251 | .nav-menu { 252 | list-style: none; /* Remove bullet points from list */ 253 | display: flex; /* Align items horizontally */ 254 | color: #75543B; 255 | } 256 | 257 | .nav-menu li { 258 | margin: 0 15px; /* Space between menu items */ 259 | } 260 | 261 | .nav-menu a { 262 | color: var(--secondary-color); /* Menu item color */ 263 | text-decoration: none; /* Remove underline from links */ 264 | transition: color 0.3s; /* Transition for hover effect */ 265 | font-weight: 700; 266 | } 267 | 268 | .nav-menu a:hover { 269 | color: var(--secondary-color2); /* Color change on hover */ 270 | } 271 | 272 | /* Responsive menu toggle */ 273 | .nav-toggle { 274 | display: none; /* Hide toggle by default */ 275 | flex-direction: column; /* Stack bars vertically */ 276 | cursor: pointer; /* Pointer cursor */ 277 | } 278 | 279 | .bar { 280 | height: 3px; /* Height of the bars */ 281 | width: 25px; /* Width of the bars */ 282 | background-color:var(--secondary-color2); /* Bar color */ 283 | margin: 4px; /* Space between bars */ 284 | } 285 | 286 | /* Media query for mobile responsiveness */ 287 | @media (max-width: 768px) { 288 | .nav-menu { 289 | display: none; /* Hide menu by default on mobile */ 290 | flex-direction: column; /* Stack items vertically */ 291 | position: absolute; /* Position it absolutely */ 292 | top: 60px; /* Position below navbar */ 293 | left: 0; 294 | width: 100%; /* Full width */ 295 | background-color: #333; /* Background for dropdown */ 296 | } 297 | 298 | .nav-menu.active { 299 | display: flex; /* Show menu when active */ 300 | } 301 | 302 | .nav-toggle { 303 | display: flex; /* Show toggle button on mobile */ 304 | } 305 | } --------------------------------------------------------------------------------