main layout completed

src/components/Footer/Footer.js

@@ -3,24 +3,8 @@ import React from 'react';
 const footer = () => (
   
    <footer className="footer">
-      <div className="footer__heading">icons</div>
+   
-      <div className="footer__container">
+      <div className="footer__copyright">Copyright &copy; 2018 Made with ❤️ by Andres Alcocer</div>
-         <div className="footer__container--description">desc 1</div>
-         <div className="footer__container--description">desc 2</div>
-         <div className="footer__container--description">desc 3</div>
-         <div className="footer__container--description">desc 4</div>
-         <div className="footer__container--description">desc 5</div>
-         <div className="footer__container--description">desc 6</div>
-         <div className="footer__container--description">desc 7</div>
-         <div className="footer__container--description">desc 8</div>
-         <div className="footer__container--description">desc 9</div>
-         <div className="footer__container--description">desc 10</div>
-         <div className="footer__container--description">desc 11</div>
-         <div className="footer__container--description">desc 12</div>
-         <div className="footer__container--description">desc 13</div>
-      </div>
-      <div className="footer__serviceCode">service code</div>
-      <div className="footer__copyright">copyright</div>
    </footer>
 );
 

src/containers/Layout/Layout.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import axios from 'axios'; 
 import Header from '../../components/Header/Header'; 
 import MovieShowcase from '../MovieShowcase/MovieShowcase'; 
-import MovieOriginals from '../MovieOriginals/MovieOriginals'; 
 import Footer from '../../components/Footer/Footer'; 
 import { BrowserRouter } from "react-router-dom"; 
 

src/containers/MovieOriginals/MovieOriginals.js

@@ -1,22 +0,0 @@
-import React, { Component } from 'react';
-
-class MovieOriginals extends Component {
-   render() {
-      return (
-         <div className="movieOriginals">
-            <h1>Netflix Originals</h1>
-            <div className="movieOriginals__container">
-               <div className="movieOriginals__container--movie">movie 1</div>
-               <div className="movieOriginals__container--movie">movie 2</div>
-               <div className="movieOriginals__container--movie">movie 3</div>
-               <div className="movieOriginals__container--movie">movie 4</div>
-               <div className="movieOriginals__container--movie">movie 5</div>
-               <div className="movieOriginals__container--movie">movie 6</div>
-            </div>
-         </div>
-
-      );
-   }
-}
-
-export default MovieOriginals; 

src/containers/MovieOriginals/MovieOriginalsRows/MovieOriginalsRows.js

@@ -1,14 +0,0 @@
-import React, { Component } from 'react';
-
-// `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})`;
-
-const movieOriginalsRows = (props) => (
-
-
-   <div onClick={props.movieDetails} className="movieShowcase__container" id="netflixOriginals">
-      <img src={props.posterUrl} className="movieShowcase__container--movie-image" />
-   </div>
-
-);
-
-export default movieOriginalsRows; 

src/static/sass/components/_movieOriginals.scss

@@ -1,5 +1,5 @@
 .movieOriginals {
-   background-color: pink;
+   background-color: $color-background;
    grid-column: 2 / 13;
 
    &__container {

src/static/sass/components/_movieShowcase.scss

@@ -8,14 +8,14 @@
    }
 
    &__container { 
-     overflow-y: hidden;
+      overflow-y: hidden;
       transition: transform 450ms;
       overflow-x: scroll;
       
       flex: 1 1 auto;
       display: grid;
       grid-template-columns: repeat(20, 1fr);
-      column-gap: .5rem;
+      column-gap: 0;
 
 
       &:hover &--movie {
@@ -27,21 +27,20 @@
          }
       }
       &:hover > *  {
-         transform: translate3d(-5rem, 0, 0); 
+         transform: translate3d(-6rem, 0, 0); 
       }
       &--movie:hover ~ &--movie {
-          transform: translate3d(5rem, 0, 0); 
+          transform: translate3d(6rem, 0, 0); 
       }
 
 
       &--movie { 
-
          cursor: pointer;
          transition: all 450ms; 
          transform: center left; 
          padding-top: 3.5rem;
          padding-bottom: 4rem;
-         height: 18rem;
+         height: 21.5rem;
         
          &:not(:last-child) {
             padding-right: .5rem;

src/static/sass/layout/_footer.scss

@@ -1,14 +1,18 @@
 .footer {
-   background-color: greenyellow;
+   background-color: $color-background;
-   grid-column: 2 / 13;
+   padding-top: 15rem;
+   padding-bottom: 4rem;
+   grid-column: 1 / 13;
+   text-align: center;
    
 
-   &__container {
+   // // &__container {
-      display: grid;
+   //    // display: grid;
-      grid-template-columns: repeat(4, 1fr);
+   //    // grid-template-columns: repeat(4, 1fr);
 
-      &--description {
+      &__copyright {
-         padding: 3rem;
+         color: #fff;
+         font-size: 1.8rem;
       }
-   }
+   // // }
 }

src/static/sass/layout/_header.scss

@@ -1,5 +1,5 @@
 .header {
-   background-color: rebeccapurple;
+   background-color: $color-background;
    grid-column: 1 / 13;
    display: flex;