Merge pull request #386 from mahaveergurjar/main

update the style of movie detail page
samyakmaitre · Oct 19, 2024 · ddbca65 · ddbca65
2 parents 79666f7 + d01f03b
commit ddbca65
Showing 1 changed file with 74 additions and 56 deletions.
diff --git a/src/assets/styles/MovieDetails.css b/src/assets/styles/MovieDetails.css
@@ -1,31 +1,3 @@
-/* Global Styles */
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: 'Roboto', sans-serif;
-  line-height: 1.6;
-  color: #333;
-  background-color: #f4f4f4;
-}
-
-/* Header and Footer Styles */
-header,
-footer {
-  background-color: #222;
-  color: #fff;
-  padding: 1.5em;
-  text-align: center;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-}
-
-footer {
-  margin-top: 40px;
-}
-
 .movie-details-container {
   width: 800px;
 
@@ -50,6 +22,7 @@ footer {
   width: 300px;
   height: 400px;
   object-fit: cover;
+  border-radius: 15px;
   transition: transform 0.3s ease;
 }
 
@@ -59,26 +32,30 @@ footer {
 
 
 .right-section {
-  flex: 50%;
+  flex: 1;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .movie-title {
-  font-size: 30px;
+  font-size: 36px;
   font-weight: bold;
-  margin-bottom: 15px;
-  color: #2c3e50;
+  color: #333;
+  margin-bottom: 10px;
 }
 
-.movie-description {
-  font-size: 16px;
-  color: #7f8c8d;
-  margin-bottom: 20px;
+.rating {
+  font-size: 18px;
+  color: #f39c12;
+  background-color: #333;
+  padding: 10px;
+  border-radius: 10px;
+  display: inline-block;
 }
 
-.right-section {
-  display: flex;
-  flex-direction: column;
-}
+
 
 .movie-genre {
   font-size: 18px;
@@ -94,13 +71,31 @@ footer {
   font-weight: bold;
 }
 
-.movie-showtimes h3,
+.movie-description {
+  font-size: 16px;
+  color: #7f8c8d;
+  margin-bottom: 20px;
+}
+
+/* Showtimes */
+.movie-showtimes div {
+  background-color: #e8f8ff;
+  padding: 10px;
+  border-radius: 10px;
+  margin-bottom: 10px;
+  margin-right: 10px;
+  font-weight: bold;
+  color: #2c3e50;
+  display: inline-block;
+}
 .movie-cast h3,
 .movie-photos h3,
 .movie-trailer h3 {
+  margin-top: 10px;
   font-size: 22px;
   margin-bottom: 10px;
   color: #2c3e50;
+  text-align: center;
 }
 
 .movie-showtimes div,
@@ -110,38 +105,61 @@ footer {
   margin-bottom: 5px;
 }
 
-/* Carousel Styles */
-.carousel-container {
-  margin: 20px 0;
+/* Carousel Arrows */
+.carousel-container .react-multiple-carousel__arrow {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+
+}
+
+.carousel-container:hover .react-multiple-carousel__arrow {
+  opacity: 1;
 }
 
-.cast-member,
-.photo {
-  text-align: center;
-  margin: 10px;
+/* Positioning and Styling Arrows */
+.react-multiple-carousel__arrow--left {
+  left: 0px;
+  z-index: 1;
+}
+
+.react-multiple-carousel__arrow--right {
+  right: 0px;
+  z-index: 1;
+}
+
+
+.react-multiple-carousel__arrow:hover {
+  background-color: rgba(0, 0, 0, 0.8);
+  opacity: 1;
 }
 
-.cast-member img,
-.photo img {
+
+/* Cast Section */
+.movie-cast h3 { 
+  align-items: center;
+}
+.photo img, .cast-member img {
+  margin-top: 8px;
+  margin-left: 70px;
   width: 110px;
   height: 110px;
   border-radius: 50%;
-  object-fit: cover;
+  justify-content: center;
   transition: transform 0.3s ease;
 }
 
-.cast-member img:hover,
-.photo img:hover {
+.cast-member img:hover {
   transform: scale(1.1);
 }
 
-.cast-member div,
-.photo div {
+.cast-member div {
   margin-top: 8px;
+  margin-left: 100px;
   font-size: 14px;
   color: #34495e;
 }
 
+
 /* Movie Trailer */
 .movie-trailer iframe {
   border-radius: 15px;
@@ -187,4 +205,4 @@ footer {
     display: flex;
     justify-content: space-between;
   }
-}
+}