Develop

Readme.md

@@ -0,0 +1,9 @@
+# Disney+ Clone
+Com este mini-projeto você poderá praticar os seus conhecimentos de HTML, CSS e Javascript recriando a página inicial da plataforma de stream Disney+ .
+
+Para iniciar, faça o fork deste repositório para a sua conta e, da sua conta no Github, clone os arquivos para a sua máquina local.
+
+Assista aos <a href="https://www.youtube.com/watch?v=UbhG8jxfEIE&list=PLrxph-IV8wY7IG5oGr8_hado37DkTwsPa">vídeos</a> do desenvolvimento desta página no canal da <a href="https://www.youtube.com/watch?v=UbhG8jxfEIE&list=PLrxph-IV8wY7IG5oGr8_hado37DkTwsPa">Hello Codes</a>
+
+<img src="https://cnbl-cdn.bamgrid.com/assets/c0a264881f6f269485d94228f8904ea1d4b8b02b8da0dfaaccc65ee723582e9a/original" />
+<br/><br/>

project/assets/css/base/_animations.css → assets/css/base/_animations.css

@@ -16,13 +16,15 @@
         opacity: 1;
         height: 100%;
     }
+
 }
 
 @keyframes slideLeft {
     0% {
         opacity: 0;
-        transform: translateX(10rem)
+        transform: translateX(10rem);
     }
+
     100% {
         opacity: 1;
         transform: translateX(0);

project/assets/css/base/_fonts.css → assets/css/base/_fonts.css

@@ -1,48 +1,48 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
-
 :root, :host {
-  --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free"; }
+  --fa-style-family-classic: 'Font Awesome 6 Free';
+  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }
 
 @font-face {
   font-family: 'Font Awesome 6 Free';
   font-style: normal;
   font-weight: 900;
   font-display: block;
-  src: url("../../fonts/fa-solid-900.woff2") format("woff2"), 
+  src: url("../../fonts/fa-solid-900.woff2") format("woff2"),
   url("../../fonts/fa-solid-900.ttf") format("truetype"); 
-}
+  }
 
 .fas,
 .fa-solid {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 900;
+  font-weight: 900; 
   font-style: normal;
 }
 
 .fa-house::before {
-  content: "\f015"; 
+  content: "\f015";
 }
 
 .fa-magnifying-glass::before {
-  content: "\f002"; 
+  content: "\f002";
 }
 
 .fa-plus::before {
-  content: "\2b"; 
+  content: "\2b";
 }
 
 .fa-star::before {
-  content: "\f005"; 
+  content: "\f005";
 }
 
 .fa-film::before {
-  content: "\f008"; 
+  content: "\f008";
 }
 
 .fa-tv::before {
-  content: "\f26c"; 
+  content: "\f26c";
 }
 
 .fa-ellipsis-vertical::before {
-  content: "\f142"; 
+  content: "\f142";
 }

project/assets/css/base/_global.css → assets/css/base/_global.css

@@ -4,11 +4,11 @@ html {
 
 body {
     font-family: 'Roboto', sans-serif;
-    color: white;
+    color: #f5f5f5;
 }
 
 .background-fixed {
-    background: url('../../imgs/background.png') no-repeat;
+    background: url(../../imgs/background.png) no-repeat;
     background-size: cover;
     position: fixed;
     height: 100vh;
@@ -20,3 +20,4 @@ body {
     position: relative;
     z-index: 2;
 }
+

project/assets/css/base/_reset.css → assets/css/base/_reset.css

@@ -1,8 +1,8 @@
-*,
-*::after,
+*, 
+*::after, 
 *::before {
-    margin: 0;
-    padding: 0;
+    margin: 0px;
+    padding: 0px;
     border: none;
     box-sizing: border-box;
 }
@@ -13,4 +13,5 @@ a {
 
 ul {
     list-style: none;
-}
+}
+

project/assets/css/components/_arrow-slider.css → assets/css/components/_arrow-slider.css

@@ -1,15 +1,15 @@
 .arrow-slider {
     background: none;
-    color: white;
+    color: #f5f5f5;
     cursor: pointer;
     font-family: 'Font Awesome 6 Free';
     font-size: 3rem;
 }
 
 .arrow-slider--left::before {
+
     content: '\f053';
 }
-
 .arrow-slider--right::before {
     content: '\f054';
 }

project/assets/css/components/_collection.css → assets/css/components/_collection.css

@@ -1,12 +1,12 @@
-.collection {
+.colletion {
     padding-top: 1rem;
     overflow: hidden;
 }
 
-.collection__title {
-    font-size: 1.9rem;
+.colletcion__title {
+    font-size: 1.8rem;
     font-weight: normal;
-    letter-spacing: .1rem;
+    letter-spacing: .05rem;
     margin: 0 auto;
     padding: 0 1rem 1.3rem;
     width: 91vw;
@@ -23,35 +23,30 @@
 }
 
 .movie-carousel__item {
-    opacity: .5;
     padding: 0 1rem 2.5rem;
     width: calc(91vw / 5);
 }
 
-.movie-carousel__item.active {
-    opacity: 1;
-}
-
 .movie-carousel__link {
-    position: relative;
     display: block;
+    position: relative;
 }
 
 .movie-carousel__link:hover {
     transform: scale(1.05);
 }
 
-.movie-carousel__link::before {
-    border: .4rem solid rgba(255, 255, 255, 0);
-    border-radius: .3rem;
+.movie-carousel__link::before{
+    border: .2rem solid rgba(255, 255, 255, 0);
+    border-radius: .5rem;
     content: '';
     position: absolute;
     inset: 0;
     transition: border .3s;
 }
 
 .movie-carousel__link:hover::before {
-    border-color:rgba(255, 255, 255, 0.7);
+    border-color: rgba(255, 255, 255, 0.7);
 }
 
 .movie-carousel__cover {
@@ -61,45 +56,14 @@
 }
 
 .movie-carousel .arrow-slider {
-    height: 100%;
     margin-top: -2.5rem;
-    opacity: 0;
     position: absolute;
-    transition: opacity .3s;
     z-index: 2;
 }
 
-.movie-carousel .arrow-slider:hover {
-    opacity: 1;
-}
-
 .movie-carousel .arrow-slider--left {
-    padding: 0 3.6rem ;
-    left: 0;
+    left: 3.6rem; 
 }
-
 .movie-carousel .arrow-slider--right {
-    padding: 0 3.6rem ;
-    right: 0;
-}
-
-@media screen and (max-width: 1024px) {
-    .collection {
-        padding-top: 0;
-    }
-
-    .collection__title {
-        width: 85vw;
-    }
-    .movie-carousel__item {
-        width: calc(85vw / 2);
-    }
-    .movie-carousel .arrow-slider--left {
-        padding: 0 1rem ;
-        left: 0;
-    }
-    .movie-carousel .arrow-slider--right {
-        padding: 0 1rem ;
-        right: 0;
-    }
+    right: 3.6rem;
 }

project/assets/css/components/_controls-slider.css → assets/css/components/_controls-slider.css

@@ -7,8 +7,8 @@
 
 .controls-slider__item {
     background: none;
-    color: #8C93A1;
     cursor: pointer;
+    color: #8c93a1;
     margin: 0 .5rem;
 }
 
@@ -19,5 +19,5 @@
 }
 
 .controls-slider__item.active {
-    color: #fff;
+    color: #f5f5f5;
 }

assets/css/components/_logo.css

@@ -0,0 +1,26 @@
+.logo {
+    margin-left: 3.8rem;
+    padding: 1.6rem;
+}
+
+.logo__link {
+    background: url('../../imgs/logo.svg')no-repeat;
+    background-position: center;
+    background-size: 105%;
+    display: inline-block;
+    height: 4rem;
+    width: 7.5rem;
+}
+
+@media screen and (max-width: 1024px) {
+    .logo {
+        margin-left: 2.2rem;
+        padding: 2.0rem;
+    }
+
+    .logo__link {
+        height: 3.2rem;
+        width: 5.9rem;
+    }
+
+}

project/assets/css/components/_user-profile.css → assets/css/components/_user-profile.css

@@ -4,6 +4,10 @@
     display: flex;
 }
 
+.user {
+    padding-bottom: 2rem;
+}
+
 .user-profile--reverse {
     flex-direction: row-reverse;
 }
@@ -19,7 +23,7 @@
 }
 
 .user-profile__title {
-    font-size: 1.5rem;
+    font-size: 1.3rem;
     font-weight: 300;
     margin-left: 1.6rem;
 }

assets/css/layout/_header.css

@@ -0,0 +1,11 @@
+.header {
+    display: flex;
+    position: fixed;
+    transition: background-color .3s;
+    z-index: 10;
+    width: 100%;
+}
+
+.header__navigation {
+    width: 100%;
+}