Develope

assets/css/base/_animations.css

@@ -0,0 +1,30 @@
+@keyframes showFade {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes slideDown {
+  0% {
+    opacity: 0.5;
+    height: 0;
+  }
+  100% {
+    opacity: 1;
+    height: 100%;
+  }
+}
+
+@keyframes slideLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(10rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

assets/css/base/_fonts.css

@@ -0,0 +1,55 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap");
+
+:root,
+:host {
+  --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"),
+    url("../../fonts/fa-solid-900.ttf") format("truetype");
+}
+
+.fas,
+.fa-solid {
+  font-family: "Font Awesome 6 free";
+  font-weight: 900;
+  font-style: normal;
+}
+
+.fa-house::before {
+  content: "\f015";
+}
+
+.fa-magnifying-glass::before {
+  content: "\f002";
+}
+
+.fa-magnifying-glass-location::before {
+  content: "\f689";
+}
+
+.fa-plus::before {
+  content: "\2b";
+}
+
+.fa-star::before {
+  content: "\f005";
+}
+
+.fa-film::before {
+  content: "\f008";
+}
+
+.fa-tv::before {
+  content: "\f26c";
+}
+
+.fa-ellipsis-vertical::before {
+  content: "\f142";
+}

assets/css/base/_global.css

@@ -0,0 +1,22 @@
+html {
+  font-size: 62.5%;
+}
+
+body {
+  font-family: "Roboto", sans-serif;
+  color: white;
+}
+
+.background-fixed {
+  background: url("../../imgs/background.png") no-repeat;
+  background-size: cover;
+  position: fixed;
+  height: 100vh;
+  width: 100%;
+  z-index: 1;
+}
+
+.wrapper {
+  position: relative;
+  z-index: 2;
+}

assets/css/base/_reset.css

@@ -0,0 +1,16 @@
+*,
+*::after,
+*::before {
+  margin: 0;
+  padding: 0;
+  border: none;
+  box-sizing: border-box;
+}
+
+a {
+  text-decoration: none;
+}
+
+ul {
+  list-style: none;
+}

assets/css/components/_arrow-slider.css

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

assets/css/components/_collection.css

@@ -0,0 +1,108 @@
+.collection {
+  padding-top: 1rem;
+  overflow: hidden;
+}
+
+.collection__title {
+  font-size: 1.9rem;
+  font-weight: normal;
+  letter-spacing: 0.1rem;
+  margin: 0 auto;
+  padding: 0 1rem 1.3rem;
+  width: 91vw;
+}
+
+.movie-carousel {
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+.movie-carousel__list {
+  display: flex;
+}
+
+.movie-carousel__item {
+  opacity: 0.5;
+  padding: 0 1rem 2.5rem;
+  width: calc(91vw / 5);
+}
+
+.movie-carousel__item.active {
+  opacity: 1;
+}
+
+.movie-carousel__link {
+  position: relative;
+  display: block;
+}
+
+.movie-carousel__link:hover {
+  transform: scale(1.05);
+}
+
+.movie-carousel__link::before {
+  border: 0.4rem solid rgba(255, 255, 255, 0);
+  border-radius: 0.3rem;
+  content: "";
+  position: absolute;
+  inset: 0;
+  transition: border 0.3s;
+}
+
+.movie-carousel__link:hover::before {
+  border-color: rgba(255, 255, 255, 0.7);
+}
+
+.movie-carousel__cover {
+  border-radius: 0.3rem;
+  box-shadow: #0f1119 0rem 2rem 2rem -1rem;
+  width: 100%;
+}
+
+.movie-carousel .arrow-slider {
+  height: 100%;
+  margin-top: -2.5rem;
+  opacity: 0;
+  position: absolute;
+  transition: opacity 0.3s;
+  z-index: 2;
+}
+
+.movie-carousel .arrow-slider:hover {
+  opacity: 1;
+}
+
+.movie-carousel .arrow-slider--left {
+  padding: 0 3.6rem;
+  left: 0;
+}
+
+.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;
+  }
+}

assets/css/components/_controls-slider.css

@@ -0,0 +1,23 @@
+.controls-slider {
+  bottom: 0;
+  position: absolute;
+  right: 0;
+  z-index: 2;
+}
+
+.controls-slider__item {
+  background: none;
+  color: #8c93a1;
+  cursor: pointer;
+  margin: 0 0.5rem;
+}
+
+.controls-slider__item::before {
+  content: "\f111";
+  font-family: "Font Awesome 6 free";
+  font-size: 0.9rem;
+}
+
+.controls-slider__item.active {
+  color: white;
+}

assets/css/components/_logo.css

@@ -0,0 +1,15 @@
+.logo__link {
+  background: url("../../imgs/logo.svg") no-repeat;
+  background-position: center;
+  background-size: 108%;
+  display: inline-block;
+  height: 4.2rem;
+  width: 7.5rem;
+}
+
+@media screen and (max-width: 1024px) {
+  .logo__link {
+    height: 3.2rem;
+    width: 5.9rem;
+  }
+}

assets/css/components/_user-profile.css

@@ -0,0 +1,24 @@
+.user-profile {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+}
+
+.user-profile--reverse {
+  flex-direction: row-reverse;
+}
+
+.user-profile--reverse .user-profile__title {
+  margin-left: 0;
+  margin-right: 1.6rem;
+}
+.user-profile__avatar {
+  height: 4.8rem;
+  width: 4.8rem;
+}
+
+.user-profile__title {
+  font-size: 1.5rem;
+  font-weight: 300;
+  margin-left: 1.6rem;
+}

assets/css/layout/_footer.css

@@ -0,0 +1,55 @@
+.footer {
+  background-color: #090b13;
+  height: 30rem;
+  padding: 2.3rem 0 2.6rem;
+  text-align: center;
+}
+
+.footer__wrapper {
+  margin: 0 auto;
+  max-width: 47rem;
+  width: 100%;
+}
+
+.footer-menu__link,
+.footer__about,
+.footer__copyright {
+  font-size: 1.2rem;
+  font-weight: 300;
+  color: #afafaf;
+}
+
+.footer__about {
+  line-height: 1.5rem;
+  margin: 0 1.8rem 1.5rem;
+}
+
+.footer-menu {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.footer-menu__item {
+  margin: 1.5rem 0;
+}
+
+.footer-menu__link {
+  padding: 0 1rem;
+  transition: color 0.3s;
+}
+
+.footer-menu__link:hover {
+  color: #fff;
+}
+
+@media screen and (max-width: 1024px) {
+  .footer {
+    height: 67rem;
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
+  .footer-menu {
+    justify-content: center;
+  }
+}