minor details

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,12 +42,13 @@
          border-radius: 5px;
          cursor: pointer;
          background-color: rgb(201, 199, 78);
-         height: 2.5rem;
-         width: 2.5rem;
+         height: 3rem;
+         width: 3rem;
          margin-right: .5rem;
         
-         &:hover .dropdownContent {
-            transition: all .4s; 
+         &: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;
 
@@ -151,4 +209,4 @@
       opacity: 1;
       visibility: visible;
    }
-}
+}

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";