diseño de pagina sin API

initialState.json

@@ -0,0 +1,165 @@
+{
+    "initalState": {
+      "mylist": [],
+      "trends": [
+        {
+          "id": 2,
+          "slug": "tvshow-2",
+          "title": "In the Dark",
+          "type": "Scripted",
+          "language": "English",
+          "year": 2009,
+          "contentRating": "16+",
+          "duration": 164,
+          "cover": "http://dummyimage.com/800x600.png/99118E/ffffff",
+          "description": "Vestibulum ac est lacinia nisi venenatis tristique",
+          "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4"
+        },
+        {
+          "id": 3,
+          "slug": "tvshow-3",
+          "title": "Instinct",
+          "type": "Adventure",
+          "language": "English",
+          "year": 2002,
+          "contentRating": "16+",
+          "duration": 137,
+          "cover": "http://dummyimage.com/800x600.png/302140/ffffff",
+          "description": "Vestibulum ac est lacinia nisi venenatis tristique",
+          "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4"
+        },
+        {
+          "id": 4,
+          "slug": "tvshow-4",
+          "title": "Grand Hotel",
+          "type": "Comedy",
+          "language": "English",
+          "year": 2014,
+          "contentRating": "16+",
+          "duration": 163,
+          "cover": "http://dummyimage.com/800x600.png/5472FF/ffffff",
+          "description": "Vestibulum ac est lacinia nisi venenatis tristique",
+          "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4"
+        },
+        {
+          "id": 5,
+          "slug": "tvshow-5",
+          "title": "Stargate Atlantis",
+          "type": "Scripted",
+          "language": "English",
+          "year": 2014,
+          "contentRating": "16+",
+          "duration": 194,
+          "cover": "http://dummyimage.com/800x600.png/B36F20/ffffff",
+          "description": "Vestibulum ac est lacinia nisi venenatis tristique",
+          "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4"
+        },
+        {
+          "id": 6,
+          "slug": "tvshow-6",
+          "title": "Final Space",
+          "type": "Scripted",
+          "language": "English",
+          "year": 2017,
+          "contentRating": "16+",
+          "duration": 124,
+          "cover": "http://dummyimage.com/800x600.png/CCC539/ffffff",
+          "description": "Vestibulum ac est lacinia nisi venenatis tristique",
+          "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4"
+        },
+        {
+          "id": 7,
+          "slug": "tvshow-7",
+          "title": "The InBetween",
+          "type": "Drama",
+          "language": "English",
+          "year": 2011,
+          "contentRating": "16+",
+          "duration": 179,
+          "cover": "http://dummyimage.com/800x600.png/FF7A90/ffffff",
+          "description": "Vestibulum ac est lacinia nisi venenatis tristique",
+          "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4"
+        }
+      ],
+      "originals": [
+        {
+          "id": 8,
+          "slug": "tvshow-8",
+          "title": "Stargate Atlantis",
+          "type": "Action",
+          "language": "English",
+          "year": 2012,
+          "contentRating": "16+",
+          "duration": 148,
+          "cover": "http://dummyimage.com/800x600.png/306880/ffffff",
+          "description": "Vestibulum ac est lacinia nisi venenatis tristique",
+          "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4"
+        },
+        {
+          "id": 9,
+          "slug": "tvshow-9",
+          "title": "Alien Highway",
+          "type": "Action",
+          "language": "English",
+          "year": 2019,
+          "contentRating": "16+",
+          "duration": 128,
+          "cover": "http://dummyimage.com/800x600.png/604180/ffffff",
+          "description": "Vestibulum ac est lacinia nisi venenatis tristique",
+          "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4"
+        },
+        {
+          "id": 10,
+          "slug": "tvshow-10",
+          "title": "Elementary",
+          "type": "Animation",
+          "language": "English",
+          "year": 2011,
+          "contentRating": "16+",
+          "duration": 346,
+          "cover": "http://dummyimage.com/800x600.png/FF91BA/ffffff",
+          "description": "Vestibulum ac est lacinia nisi venenatis tristique",
+          "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4"
+        },
+        {
+          "id": 11,
+          "slug": "tvshow-11",
+          "title": "Strange Angel",
+          "type": "War",
+          "language": "English",
+          "year": 2015,
+          "contentRating": "16+",
+          "duration": 226,
+          "cover": "http://dummyimage.com/800x600.png/45807C/ffffff",
+          "description": "Vestibulum ac est lacinia nisi venenatis tristique",
+          "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4"
+        },
+        {
+          "id": 12,
+          "slug": "tvshow-12",
+          "title": "Private Eyes",
+          "type": "Comedy",
+          "language": "English",
+          "year": 2018,
+          "contentRating": "16+",
+          "duration": 190,
+          "cover": "http://dummyimage.com/800x600.png/577380/ffffff",
+          "description": "Vestibulum ac est lacinia nisi venenatis tristique",
+          "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4"
+        },
+        {
+          "id": 13,
+          "slug": "tvshow-13",
+          "title": "NCIS: Los Angeles",
+          "type": "Drama",
+          "language": "English",
+          "year": 2010,
+          "contentRating": "16+",
+          "duration": 160,
+          "cover": "http://dummyimage.com/800x600.png/5472FF/ffffff",
+          "description": "Vestibulum ac est lacinia nisi venenatis tristique",
+          "source": "https://mdstrm.com/video/58333e214ad055d208427db5.mp4"
+        }
+      ]
+    }
+  }

package.json

@@ -27,6 +27,7 @@
     "@babel/preset-react": "^7.9.4",
     "babel-loader": "^8.1.0",
     "css-loader": "^3.4.2",
+    "file-loader": "^6.0.0",
     "html-loader": "^1.0.0",
     "html-webpack-plugin": "^4.0.1",
     "mini-css-extract-plugin": "^0.9.0",

public/index.html

@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <!-- <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Platzi Video</title>
 </head>
 <body>

src/assets/styles/App.scss

@@ -1,5 +1,12 @@
+@import "./Vars.scss";
+@import "./Media.scss";
+
 body {
     margin: 0;
-    background-color: red;    
-    color: white;
-}
+    font-family: $theme-font;
+    background: $main-color;
+  }
+
+  * {
+    box-sizing: border-box;
+  }

src/assets/styles/Media.scss

@@ -0,0 +1,11 @@
+
+@media only screen and (max-width: 600px) {
+    .main__description--title {
+      font-size: 30px;
+    }
+
+    .footer {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+  }

src/assets/styles/Vars.scss

@@ -0,0 +1,6 @@
+@import url(https://fonts.googleapis.com/css?family=Muli&display=swap);
+
+$theme-font: 'Muli', sans-serif;
+$main-color: #8f57fd;
+
+

src/assets/styles/components/Carousel.scss

@@ -0,0 +1,29 @@
+.carousel {
+  overflow-y: hidden;
+  padding-left: 30px;
+  width: 100%;
+  position: relative;
+  -webkit-scrollbar {display: none;}
+  overflow-x: hidden;
+
+}
+
+.carousel__container {
+  transition: 450ms -webkit-transform;
+  transition: 450ms transform;
+  transition: 450ms transform, 450ms -webkit-transform;
+  font-size: 0;
+  white-space: nowrap;
+  margin: 70px 0px;
+  padding-bottom: 10px;
+}
+
+.carousel__container:hover .carousel-item {
+  opacity: 0.3;
+}
+
+.carousel__container:hover .carousel-item:hover {
+  -webkit-transform: scale(1.5);
+          transform: scale(1.5);
+  opacity: 1;
+}

src/assets/styles/components/CarouselItem.scss

@@ -0,0 +1,62 @@
+.carousel-item {
+  border-radius: 20px;
+  overflow: hidden;
+  position: relative;
+  display: inline-block;
+  width: 200px;
+  height: 250px;
+  margin-right: 10px;
+  font-size: 20px;
+  cursor: pointer;
+  transition: 450ms all;
+  -webkit-transform-origin: center left;
+          transform-origin: center left;
+}
+
+.carousel-item:hover ~ .carousel-item {
+  -webkit-transform: translate3d(100px, 0, 0);
+          transform: translate3d(100px, 0, 0);
+}
+
+.carousel-item__img {
+  width: 200px;
+  height: 250px;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.carousel-item__details {
+  align-items: flex-start;
+  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
+  bottom: 0;
+  display: flex;
+  font-size: 10px;
+  flex-direction: column;
+  justify-content: flex-end;
+  left: 0;
+  opacity: 0;
+  transition: 450ms opacity;
+  padding: 10px;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.carousel-item__details--img {
+  width: 20px;
+}
+
+.carousel-item:hover .carousel-item__details {
+  opacity: 1;
+}
+
+.carousel-item__details--title {
+  color: white;
+  margin: 5px 0px 0px 0px;
+}
+
+.carousel-item__details--subtitle {
+  color: white;
+  font-size: 8px;
+  margin: 3px 0px;
+}

src/assets/styles/components/Categories.scss

@@ -0,0 +1,10 @@
+
+.categories__title {
+    background: #8f57fd;
+    color: white;
+    font-size: 16px;
+    margin-top: -16px;
+    position: absolute;
+    padding-left: 30px;
+    width: 100%;
+  }

src/assets/styles/components/Footer.scss

@@ -0,0 +1,20 @@
+.footer {
+    align-items: center;
+    background-color: #8f57fd;
+    display: flex;
+    height: 100px;
+    width: 100%;    
+  }
+
+  .footer a {
+    color: white;
+    cursor: pointer;
+    font-size: 14px;
+    padding-left: 30px;
+    text-decoration: none;
+  }
+
+  .footer a:hover {
+    text-decoration: underline;
+  }
+