Added the Movie title under the image like Netflix.

README.md

@@ -1,12 +1,19 @@
 <h2 align="center">Hey Developers! Presenting you all the 'Netflix Clone'. </h2>
 <h2 align="center">
-<img src="./demo-images/image1.jpg" alt="screenshot1"><hr/>
-<img src="./demo-images/image2.jpg" alt="screenshot2"><hr/>
-<img src="./demo-images/image3.jpg" alt="screenshot3"><hr/>
-<img src="./demo-images/image4.jpg" alt="screenshot4"><hr/>
+<img src="./demo-images/image1.jpg" style="margin-bottom:30px" alt="screenshot1">
+<img src="./demo-images/image02.jpg" style="margin-bottom:30px" alt="screenshot2">
+<img src="./demo-images/image03.jpg" style="margin-bottom:30px" alt="screenshot3">
+<img src="./demo-images/image04.jpg" style="margin-bottom:30px" alt="screenshot4">
 
-<img src="./demo-images/mobileview1.jpg" alt="screenshot5">
-<img src="./demo-images/mobileview1.jpg" alt="screenshot6">
+<h3 align="center">Desktop view 💻</h3>
+<hr/>
+
+<div style="display:flex">
+    <img src="./demo-images/mobileview01.jpg" height=550 style="margin:0px 50px" alt="screenshot5">
+    <img src="./demo-images/mobileview02.jpg" height=550 alt="screenshot6">
+</div>
+
+<h3 align="center">Mobile view 📱</h3>
 <hr/>
 # Getting Started with Create React App
 

src/Row.css

@@ -12,7 +12,7 @@
   max-width: 95%;
   margin-right: 10px;
   transition: 450ms;
-  padding-bottom: 32px;
+  padding-bottom: 12px;
   padding-top: 5px;
 }
 
@@ -29,4 +29,9 @@
 .row_posterLarge:hover {
   transform: scale(1.09);
   opacity: 1;
+}
+
+.movie_title_wrapper{
+  text-align: center;
+  margin-bottom: 20px;
 }

src/Row.js

@@ -17,7 +17,7 @@ function Row({title, fetchUrl, isLargeRow}) {
           }      
     fetchData(); 
     }, [fetchUrl]);
-
+    console.log(movies)
     const responsive = {
       desktop: {
         breakpoint: { max: 2024, min: 800 },
@@ -48,12 +48,20 @@ function Row({title, fetchUrl, isLargeRow}) {
              removeArrowOnDeviceType='mobile'>
              {movies.map((movie) => {
                return (
-                 <img
-                   key={movie.id}
-                   className={`row_poster ${isLargeRow && "row_posterLarge"}`}
-                   src={`${base_url}${isLargeRow ? movie.poster_path : movie.backdrop_path}`}
-                   alt={movie.name}
-                 />
+                 <>
+                   <img
+                     key={movie.id}
+                     className={`row_poster ${isLargeRow && "row_posterLarge"}`}
+                     src={`${base_url}${
+                       isLargeRow ? movie.poster_path : movie.backdrop_path
+                     }`}
+                     alt={movie.name}
+                   />
+                   <div className="movie_title_wrapper">
+                     <span className="movie_title">{movie.original_title ? movie.original_title :
+                       (movie.original_name ? movie.original_name : "") }</span>
+                   </div>
+                 </>
                );
              })}
            </Carousel>