Spaces:
Running
Running
| body { | |
| font-family: sans-serif; | |
| background-color: #000; | |
| color: #fff; | |
| margin: 0; | |
| } | |
| .navbar { | |
| background-color: #000; | |
| padding: 10px 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .navbar-logo img { | |
| width: 100px; | |
| } | |
| .navbar-menu { | |
| list-style: none; | |
| display: flex; | |
| padding: 0; | |
| } | |
| .navbar-menu li { | |
| margin-left: 20px; | |
| } | |
| .navbar-menu li a { | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| .hero { | |
| background-image: url('https://via.placeholder.com/1920x1080'); | |
| background-size: cover; | |
| background-position: center; | |
| height: 500px; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 20px; | |
| } | |
| .hero-content { | |
| max-width: 600px; | |
| } | |
| .hero-content h1 { | |
| font-size: 3em; | |
| margin-bottom: 20px; | |
| } | |
| .hero-content p { | |
| font-size: 1.2em; | |
| margin-bottom: 30px; | |
| } | |
| .hero-buttons button { | |
| background-color: rgba(0, 0, 0, 0.5); | |
| color: #fff; | |
| border: none; | |
| padding: 10px 20px; | |
| margin-right: 10px; | |
| font-size: 1.1em; | |
| cursor: pointer; | |
| } | |
| .container { | |
| padding: 20px; | |
| } | |
| .movie-row { | |
| margin-bottom: 30px; | |
| } | |
| .movie-posters { | |
| display: flex; | |
| overflow-x: auto; | |
| } | |
| .movie-posters img { | |
| margin-right: 10px; | |
| width: 150px; | |
| height: 200px; | |
| } | |
| .footer { | |
| background-color: #222; | |
| padding: 20px; | |
| text-align: center; | |
| } | |
| .footer ul { | |
| list-style: none; | |
| padding: 0; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .footer li { | |
| margin: 0 10px; | |
| } | |
| .footer li a { | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .navbar { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .navbar-menu { | |
| margin-top: 10px; | |
| flex-direction: column; | |
| } | |
| .navbar-menu li { | |
| margin-left: 0; | |
| margin-bottom: 10px; | |
| } | |
| .hero { | |
| height: 400px; | |
| } | |
| .hero-content { | |
| max-width: 100%; | |
| } | |
| .hero-content h1 { | |
| font-size: 2em; | |
| } | |
| .hero-content p { | |
| font-size: 1em; | |
| } | |
| } | |