Upload 3 files

static/styles.css

@@ -0,0 +1,78 @@
+/* General body and font styles */
+body {
+    /* Dark background for the entire page */
+    background-color: #121212;
+    /* Light text color for readability on dark background */
+    color: #f5f5f5;
+    /* Sets a clean, sans-serif font */
+    font-family: Arial, sans-serif;
+}
+
+/* Navbar and footer background color */
+.navbar, .footer {
+    /* Slightly lighter shade for navbar and footer to distinguish from the main body */
+    background-color: #181818;
+}
+
+/* Hero banner styles */
+.hero-banner {
+    /* Sets the background image for the hero banner, centers it, covers entire div, and prevents tiling */
+    background: url('/static/movebanners.jpg') center/cover no-repeat;
+    /* Light text color to contrast with the banner image */
+    color: #fff;
+    /* Padding around banner content */
+    padding: 80px 20px;
+    /* Centers text in the banner */
+    text-align: center;
+}
+
+.hero-banner h1 {
+    /* Large font size for main heading */
+    font-size: 2.5rem;
+    /* Margin below the heading for spacing */
+    margin-bottom: 10px;
+}
+
+.hero-banner p {
+    /* Slightly smaller font size for the subtitle text */
+    font-size: 1.2rem;
+}
+
+/* Button styles */
+.btn-watch-now, .btn-primary {
+    /* Bright pink background color for primary and watch-now buttons */
+    background: #ff416c;
+    /* Removes default border for a cleaner look */
+    border: none;
+    /* White text for high contrast on the button */
+    color: #fff;
+}
+
+/* Card styles */
+.card {
+    /* Dark background color for movie cards */
+    background-color: #1f1f1f;
+    /* Removes default border for a minimalist look */
+    border: none;
+    /* Light gray text for readability */
+    color: #ddd;
+}
+
+.card-title {
+    /* Standard font size for movie title within cards */
+    font-size: 1rem;
+    /* Adds space above the title for visual balance */
+    margin-top: 10px;
+}
+
+/* Footer styles */
+.footer {
+    /* Padding above and below footer content */
+    padding: 10px 0;
+    /* Centers footer text */
+    text-align: center;
+    /* Small font size for footer text */
+    font-size: 0.9rem;
+    /* Light gray color for footer text */
+    color: #b0b0b0;
+}