styling

package.json

@@ -10,6 +10,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
+    "react-spinners": "^0.13.8",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.css

@@ -18,15 +18,15 @@ body {
 }
 
 .app {
-  padding: 4rem;
+  padding: 2rem;
 
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
 }
 
-h1 {
+h1:not(#h1) {
   font-size: 3rem;
   letter-spacing: 0.9px;
   background: linear-gradient(
@@ -41,7 +41,7 @@ h1 {
 }
 
 .search {
-  width: 71%;
+  width: 60%;
   margin: 4rem 0 2rem;
 
   display: flex;
@@ -163,6 +163,41 @@ h1 {
   left: 0;
 }
 
+/* Mvoie Details style */
+.movieContainer {
+  display: flex; /* Use flexbox for layout */
+}
+
+.movieImage {
+  flex: 1; /* Take up half of the available space (adjust as needed) */
+  margin-right: 20px; /* Add some spacing between the poster and details */
+}
+
+
+
+
+#h1{
+  font-size: 4em;
+  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+  font-style: inherit;
+  color: #a1a1a1;
+}
+.infoMovie {
+  flex: 2; /* Adjust the width as needed */
+  color: #fff; /* Set the text color to white */
+  padding: 25px; /* Add some padding for spacing */
+}
+
+.infoMovie h2 {
+  font-size: 24px; /* Customize the title font size */
+  margin-bottom: 10px; /* Add margin below the title */
+}
+
+.infoMovie p {
+  font-size: 16px; /* Customize the paragraph font size */
+  margin: 20px 0; /* Add some vertical margin between paragraphs */
+}
+
 .movie div:nth-of-type(3) span {
   font-family: "Raleway", sans-serif;
   text-transform: uppercase;

src/components/MovieDetails.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
+import { BeatLoader } from "react-spinners";
 
 const MovieDetails = () => {
   const { imdbID } = useParams();
@@ -27,17 +28,28 @@ const MovieDetails = () => {
   return (
     <div className="movie-details">
       {movieDetails ? (
-        <div>
-          <h2>{movieDetails.Title}</h2>
-          <p>{movieDetails.Plot}</p>
-          <p>Director: {movieDetails.Director}</p>
-          <p>Actors: {movieDetails.Actors}</p>
-          <p>Genre: {movieDetails.Genre}</p>
-          <p>Runtime: {movieDetails.Runtime}</p>
-          <p>IMDb Rating: {movieDetails.imdbRating}</p>
+        <div className="movieContainer">
+          <div className="movieImage">
+            <img alt="moviePoster" src={movieDetails.Poster} />
+          </div>
+          <div className="infoMovie">
+            <h1 id="h1">{movieDetails.Title}</h1>
+            <p>Plot: {movieDetails.Plot}</p>
+            <p>Director: {movieDetails.Director}</p>
+            <p>Actors: {movieDetails.Actors}</p>
+            <p>Genre: {movieDetails.Genre}</p>
+            <p>Runtime: {movieDetails.Runtime}</p>
+            <p>IMDb Rating: {movieDetails.imdbRating}</p>
+          </div>
         </div>
       ) : (
         <div className="empty">
+          <BeatLoader
+            size={15} // Adjust the size of the loader as needed
+            color={"#f9d3b4"} // Change the loader color
+            loading={true}
+            padding={10}
+          />
           <h2>Loading movie details...</h2>
         </div>
       )}