minor details

src/components/Footer/Footer.js

@@ -1,10 +1,12 @@
 import React from 'react';
+import NavigationItem from '../NavigationItems/NavigationItem/NavigationItem';  
 
 const footer = () => (
   
    <footer className="footer">
    
-      <div className="footer__copyright">&copy; 2018 Made with ❤️ by Andres Alcocer</div>
+      <div className="footer__copyright">
+      &copy; 2018 Made with ❤️ by <a className="footer__copyright--link" href="http://andresio.com"> Andres Alcocer</a></div>
    </footer>
 );
 

src/containers/MovieShowcase/MovieShowcase.js

@@ -267,11 +267,3 @@ class MovieShowcase extends Component {
 }
 
 export default MovieShowcase; 
-
-/**
- * id: 
- * 18 = drama 
- *  878 - science fiction 
- *  80 - crime 
- * 36 - history 
- */

src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js

@@ -6,6 +6,7 @@ class movieShowcaseRow extends Component {
 
    render() {
       let netflixUrl = false; 
+
       const netflixStyle = {
          height: "52rem",  
       
@@ -16,8 +17,10 @@ class movieShowcaseRow extends Component {
       }
 
       return (
+         // style = { netflixUrl? netflixStyle : null}
 
-         <div onClick={this.props.movieDetails} style={netflixUrl ? netflixStyle : null} className={"movieShowcase__container--movie"}>
+         <div onClick={this.props.movieDetails} 
+            className={ "movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
             <img src={this.props.posterUrl} className="movieShowcase__container--movie-image"/>
          </div>
 

src/containers/Navigation/Navigation.js

@@ -56,16 +56,38 @@ class navigation extends Component {
          
           <NavigationItem link="/">KIDS</NavigationItem>         
           <NavigationItem link="/">DVD</NavigationItem>
-          <BellLogo className="navigation__container--bellLogo"/>
+          <BellLogo className="navigation__container--bellLogo" />  
          
             <div className="dropdownContainer">
-            <div className="navigation__container--userLogo">
+            
-              <div className="dropdownContent"></div>
+              <div className="navigation__container--userLogo">
-            </div>
+                <div className="dropdownContent">
+                <div>
+                  <div className="dropdownContent--user"></div>
+                  <p className="dropdownContent--user-text">Andres</p>
+                </div>
+                <div>
+                  <div className="dropdownContent--user dropdownContent--user-2"></div>
+                  <p className="dropdownContent--user-text">Tony</p>
+                </div>
+                <div>
+                  <div className="dropdownContent--user dropdownContent--user-3"></div>
+                  <p className="dropdownContent--user-text">Luis</p>
+                </div>
+                <p className="dropdownContent-text">Manage Profiles</p>
+             
+                </div>
+                <div className="dropdownContent dropdownContent--2">
+                <p className="dropdownContent-textOutside">Account</p>
+                <p className="dropdownContent-textOutside">Help Center</p>
+                <p className="dropdownContent-textOutside">Sign out of Netflix</p>
+                </div>
+              </div>
             </div>
   
           <DropdownArrow className="navigation__container--downArrow"/>
         </ul>
+        
       </nav>
     )
   }

src/index.html

@@ -14,3 +14,12 @@
 </body>
 
 </html>
+
+
+
+
+
+
+
+
+

src/static/sass/components/_movieOriginals.scss

@@ -1,14 +0,0 @@
-.movieOriginals {
-   background-color: $color-background;
-   grid-column: 2 / 13;
-
-   &__container {
-      display: grid;
-      grid-template-columns: repeat(6, 1fr);
-      column-gap: .5rem;
-
-      &--movie {
-         padding-bottom: 45rem;
-      }
-   }
-}

src/static/sass/components/_movieShowcase.scss

@@ -26,14 +26,33 @@
             opacity: 1;
          }
       }
+
       &:hover > *  {
          transform: translate3d(-6rem, 0, 0); 
       }
+
       &--movie:hover ~ &--movie {
           transform: translate3d(6rem, 0, 0); 
       }
 
 
+      &:hover > &--movie__netflix  {
+         transform: translate3d(-2rem, 0, 0); 
+      }
+
+      &--movie__netflix:hover ~ &--movie__netflix {
+          transform: translate3d(1rem, 0, 0); 
+      }
+
+      &:hover &--movie__netflix {
+         opacity: .3;
+
+         &:hover {
+            transform: scale(1.1);
+            opacity: 1;
+         }
+      }
+
       &--movie { 
          cursor: pointer;
          transition: all 450ms; 
@@ -48,6 +67,18 @@
        
          &-image {
             height: 100%;
+            
+         }
+
+         &__netflix {
+            // width: 2rem;
+            padding-top: 3rem;
+            padding-bottom: 4rem;
+            padding-right: 1rem;
+            height: 52rem;
+            cursor: pointer;
+            transition: all 450ms;
+            transform: center left;
          }
 
       }

src/static/sass/layout/_footer.scss

@@ -13,6 +13,17 @@
       &__copyright {
          color: #fff;
          font-size: 1.8rem;
+        
+         &--link {
+            text-decoration: none; 
+            color: #fff;
+             transition: all .3s;
+
+         }
+
+         &--link:hover {
+            color: orange;
+         }
       }  
-   // // }
+ 
 }

src/static/sass/layout/_header.scss

@@ -5,7 +5,7 @@
   
    
    &__container {
-      padding-top: 25rem;
+      padding-top: 20rem;
       padding-left: 4.5rem;
        color: #fff;
 
@@ -23,9 +23,9 @@
          border: none;
          font-weight: 700;
          border-radius: .2vw;
-         padding-left: 5rem;
+         padding-left: 3.5rem;
+         padding-right: 3.5rem;
          margin-right: 1rem;
-         padding-right: 5rem;
          padding-top: 1rem;
          background-color: rgba(51,51,51,.5); 
          padding-bottom: 1rem;

src/static/sass/layout/_navigation.scss

@@ -1,3 +1,4 @@
+
 .navigation {
    background-color: transparent; 
    z-index: 100;
@@ -33,6 +34,7 @@
          fill: red; 
          width: 2.2rem;
          padding-right: 2.5rem;
+
       }
       
       &--userLogo {
@@ -40,11 +42,12 @@
          border-radius: 5px;
          cursor: pointer;
          background-color: rgb(201, 199, 78);
-         height: 2.5rem;
+         height: 3rem;
-         width: 2.5rem;
+         width: 3rem;
          margin-right: .5rem;
         
-         &:hover .dropdownContent {
+         &:hover > .dropdownContent {
+            
             transition: all .4s;
             opacity: 1; 
             visibility: visible;
@@ -131,18 +134,73 @@
 
 
 .dropdownContent {
+   display: flex; 
+   flex-direction: column;
+//   align-items: center;
    opacity: 0;
+  
+   color: #FFF;
+   transition-delay: .5s;
+   padding-left: 1rem;
+   padding-top: 1.8rem;
    visibility: hidden;
-   height: 20rem;
+   height: 19rem;
+   border: 1px solid rgb(73, 73, 73);
    width: 15rem;
-   background-color: red;
+   background-color: rgba(#000, .9);
    transform: translateY(4.6rem) translateX(-11rem);
 
+   &--2 {
+        height: 10rem;
+   }
+
+   &-text {
+      width: 60%;
+      padding-top: 1.2rem;
+      font-size: 1.2rem;
+      
+      &:hover {
+         border-bottom: 1px solid #fff; 
+         // border-width: 2%;
+      }
+   }
+
+     &-textOutside {
+        font-size: 1.2rem;
+        padding-bottom: 1rem;
+     }
+
+   &--user {
+      height: 3rem;
+      width: 3rem;
+      border-radius: 5px;
+      background-color: rgb(64, 168, 228); 
+
+      &-2 {
+         background-color: rgb(230, 145, 48);
+      }
+
+      &-3 {
+         background-color: rgb(123, 230, 96);
+      }
+
+      &-text {
+         width: 3rem;
+         font-size: 1.2rem;
+         transform: translateX(4rem) translateY(-2rem);
+         
+         &:hover {
+            border-bottom: 1px solid #fff; 
+            border-width: 100%;
+         }
+      }
+   }
+
 }
 
 .dropdownContainer {
+   
    height: 100%;
-   display: flex;
    justify-content: center;
    align-content: center;
 

src/static/sass/style.scss

@@ -11,7 +11,6 @@
 @import "components/modal";
 @import "components/search";
 @import "components/movie";
-@import "components/movieOriginals";
 @import "components/movieShowcase";
 
 @import "layout/footer";