+
+
+
+
+
+
+
+
+ Дивіться ТБ та кіно без реклами в єдиній передплаті
+
+
+ Популярні телеканали та величезна бібліотека фільмів, серіалів,
+ мультфільмів, трансляцій у єдиній передплаті.
+
+
+
+
+
+
+
+
+
+
Дивіться фільми без інтернету
+
+ Завантаження фільмів та серіалів на ваш пристрій.
+
+
+
+
+
+
+
+
+
+ Передплата
+
+
+ Оптимальна
+
+
+
+
+
+ 10000 фільмів та 160+ каналів
+
+
+ Голлівудська класика та свіжі кіно-новинки за підпискою, прямі
+ футбольні трансляції та понад 160 каналів
+
+
+
+
+
+ від 1 ГРН
+
+
+
+ Перші 14 днів за 1 грн,
+
+ далі – 97 грн/міс.
+
+
+ Детальніше
+
+
+
+
+
+
+
+
+
+ Подарунки від партнерів при кожному продовженні передплати
+
+
+ Сертифікати на знижки від WOG, Сушія, Антошка, Єва та ін.
+
+
+
+
+
+
+
+
+ Підключіть передплату за 1 грн та отримуйте:
+
+
+
+
-
+
+ ТВ-архів
+
+
+ телепередач до 14 днів
+
+
+
-
+
+ 10% знижка
+
+
+ на прем'єри
+
+
+
-
+
+ Без реклами
+
+
+ на всіх фільмах та мультфільмах
+
+
+
+
-
+
+ Full HD
+
+
+ якість тільки за передплатою
+
+
+
-
+
+ 5 пристроїв
+
+
+ в одній передплаті
+
+
+
+
+
+
+
+
+
-
+
\ No newline at end of file
diff --git a/src/scripts/main.js b/src/scripts/main.js
deleted file mode 100644
index ad9a93a..0000000
--- a/src/scripts/main.js
+++ /dev/null
@@ -1 +0,0 @@
-'use strict';
diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss
new file mode 100644
index 0000000..0e1b866
--- /dev/null
+++ b/src/styles/blocks/button.scss
@@ -0,0 +1,45 @@
+.button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ box-sizing: border-box;
+ border: 0;
+ width: 200px;
+ height: 56px;
+ border-radius: 5px;
+ text-decoration: none;
+ background-color: $green;
+ font-family: SF UI Display;
+ font-size: 11px;
+ font-weight: 600;
+ line-height: 13.13px;
+ letter-spacing: 1.3px;
+ text-align: center;
+ color: $white;
+ text-transform: uppercase;
+
+ @include onMobileM {
+ font-size: 13px;
+ }
+ @include onMobileL {
+ font-size: 14px;
+ }
+ @include onDescktop {
+ font-size: 16px;
+ }
+
+ cursor: pointer;
+ transition: all 0.3s;
+
+ &:hover {
+ box-shadow: 1px 4px 16px rgba(232, 232, 240, 0.4);
+ border: 2px solid $white
+ }
+
+ &:active {
+ box-shadow: 1px 4px 16px rgba(232, 232, 240, 0.64);
+ border: 2px solid $green;
+ color: $green;
+ background-color: $white;
+ }
+}
diff --git a/src/styles/blocks/connection.scss b/src/styles/blocks/connection.scss
new file mode 100644
index 0000000..246d842
--- /dev/null
+++ b/src/styles/blocks/connection.scss
@@ -0,0 +1,45 @@
+.connection {
+ &__content {
+ padding: 40px $inline-padding-mobile-s;
+
+ @include inlinePadding;
+ }
+
+ &__title {
+ margin-bottom: 30px;
+ }
+
+ &__list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ justify-content: space-between;
+ padding-bottom: 52px;
+
+ &--left {
+ margin-right: 15px;
+ }
+ }
+
+ &__item {
+ margin-bottom: 40px;
+
+ &:nth-child(3n) {
+ margin-bottom: 0;
+ }
+ }
+
+ &__text {
+ &--title {
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 23.87px;
+ }
+ &--description {
+ font-size: 15px;
+ font-weight: 400;
+ line-height: 17.9px;
+ }
+ }
+}
diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss
new file mode 100644
index 0000000..f0ec227
--- /dev/null
+++ b/src/styles/blocks/container.scss
@@ -0,0 +1,7 @@
+.container {
+ z-index: 1;
+ margin: 0 auto;
+ display: flex;
+ height: 100%;
+ max-width: 1024px;
+}
\ No newline at end of file
diff --git a/src/styles/blocks/downloading.scss b/src/styles/blocks/downloading.scss
new file mode 100644
index 0000000..368d138
--- /dev/null
+++ b/src/styles/blocks/downloading.scss
@@ -0,0 +1,20 @@
+.downloading {
+ position: relative;
+ background-image: url(../images/iPhone.png);
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: center 30vh;
+ position: relative;
+
+ &::after {
+ @include positionGradient;
+ background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
+ }
+
+ &__content {
+ display: flex;
+ flex-direction: column;
+ padding: 60px $inline-padding-mobile-s 0;
+ @include inlinePadding;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/blocks/first-page.scss b/src/styles/blocks/first-page.scss
new file mode 100644
index 0000000..70e6674
--- /dev/null
+++ b/src/styles/blocks/first-page.scss
@@ -0,0 +1,35 @@
+.first-page {
+ height: 100vh;
+ background-position: center;
+ background-image: url(../images/Rectangle.png);
+ background-repeat: no-repeat;
+ background-size: cover;
+
+ @include onDescktop {
+ background-image: url(../images/people.jpg);
+ }
+
+ &::after {
+ @include positionGradient;
+ background: $black;
+ opacity: 0.5;
+ }
+
+ &__content {
+ margin: 15px 15px 25px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+
+ &__title {
+ padding-inline: 25px;
+ }
+
+ &__bottom {
+ display: flex;
+ justify-content: center;
+ }
+}
+
+
diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss
new file mode 100644
index 0000000..9aabb75
--- /dev/null
+++ b/src/styles/blocks/icon.scss
@@ -0,0 +1,52 @@
+.icon {
+ display: block;
+ block-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+
+ &__menu-opener {
+ width: 16px;
+ height: 12px;
+ background-image: url(../images/icons/menu.svg);
+
+ @include onMobileM {
+ width: 18px;
+ height: 16px;
+ }
+ @include onMobileL {
+ width: 20px;
+ height: 18px;
+ }
+ @include onDescktop {
+ width: 24px;
+ height: 20px;
+ }
+
+ &:hover {
+ transform: scale(1.3);
+ }
+ }
+
+ &__bottom {
+ width: 14px;
+ height: 7px;
+ background-image: url(../images/icons/vector.svg);
+
+ @include onMobileM {
+ width: 16px;
+ height: 8px;
+ }
+ @include onMobileL {
+ width: 18px;
+ height: 9px;
+ }
+ @include onDescktop {
+ width: 24px;
+ height: 12px;
+ }
+
+ &:hover {
+ transform: scale(1.3);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss
new file mode 100644
index 0000000..69f745d
--- /dev/null
+++ b/src/styles/blocks/page.scss
@@ -0,0 +1,76 @@
+.page {
+ font-family: SF UI Display;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 22.4px;
+ letter-spacing: 0.5px;
+ text-align: left;
+ color: $white;
+
+ &__container {
+ width: 100%;
+ height: 100vh;
+ overflow-y: auto;
+ scroll-snap-type: y mandatory;
+ }
+
+ &__section {
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: $black;
+ scroll-snap-align: start;
+ overflow: scroll;
+
+ &--title {
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 28px;
+ margin-bottom: 15px;
+
+ @include onMobileM {
+ font-size: 26px;
+ }
+ @include onMobileL {
+ font-size: 28px;
+ }
+ @include onDescktop {
+ font-size: 32px;
+ }
+ }
+
+ &--title-main {
+ font-size: 36px;
+ font-weight: 700;
+ line-height: 42.96px;
+ margin-bottom: 10px;
+
+ @include onMobileM {
+ font-size: 38px;
+ }
+ @include onMobileL {
+ font-size: 40px;
+ }
+ @include onDescktop {
+ font-size: 44px;
+ }
+ }
+
+ &--text {
+ font-size: 15px;
+ font-weight: 400;
+ line-height: 20px;
+
+ @include onMobileM {
+ font-size: 16px;
+ }
+ @include onMobileL {
+ font-size: 18px;
+ }
+ @include onDescktop {
+ font-size: 20px;
+ }
+ }
+ }
+}
diff --git a/src/styles/blocks/partners.scss b/src/styles/blocks/partners.scss
new file mode 100644
index 0000000..54e298a
--- /dev/null
+++ b/src/styles/blocks/partners.scss
@@ -0,0 +1,17 @@
+.partners {
+ position: relative;
+ background-image: url(../images/partners.png);
+ background-repeat: no-repeat;
+ background-position: center 40vh;
+ position: relative;
+
+ &::after {
+ @include positionGradient;
+ background: linear-gradient(179.79deg, rgba(16, 16, 16, 0) 37.5%, #101010 90.39%);
+ }
+ &__content {
+ padding: 60px $inline-padding-mobile-s 0;
+
+ @include inlinePadding;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/blocks/reset.scss b/src/styles/blocks/reset.scss
new file mode 100644
index 0000000..d86665a
--- /dev/null
+++ b/src/styles/blocks/reset.scss
@@ -0,0 +1,4 @@
+* {
+ margin: 0;
+ box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/src/styles/blocks/subscription.scss b/src/styles/blocks/subscription.scss
new file mode 100644
index 0000000..d6aabbc
--- /dev/null
+++ b/src/styles/blocks/subscription.scss
@@ -0,0 +1,77 @@
+.subscription {
+ background-image: url(../images/groupFilms.png);
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+ position: relative;
+ border: 8px solid $green;
+
+ &::after {
+ @include positionGradient;
+ background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
+ }
+
+ &__content {
+ padding: 40px $inline-padding-mobile-s;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ @include inlinePadding;
+ }
+
+ &__top {
+ &--text {
+ font-size: 16px;
+ line-height: 22.4px;
+ letter-spacing: 0.5px;
+ padding-bottom: 5px;
+ }
+
+ &--name {
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 28.64px;
+ letter-spacing: 1px;
+ }
+ }
+
+ &__details {
+ &--price {
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 30px;
+ letter-spacing: 1px;
+ margin-bottom: 16px;
+ }
+
+ &--button {
+ margin-bottom: 10px;
+ }
+
+ &--conditions {
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 14.32px;
+ letter-spacing: 0.83px;
+ margin-bottom: 20px;
+ color: #FFFFFF99;
+
+ }
+
+ &--link {
+ font-size: 11px;
+ font-weight: 600;
+ line-height: 13.13px;
+ letter-spacing: 1.3px;
+ text-decoration: none;
+ color: $white;
+ text-transform: uppercase;
+ transition: all 0.3s;
+
+ &:hover {
+ border-bottom: 2px solid $white;
+ }
+ }
+ }
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 293d3b1..1598474 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,3 +1,17 @@
-body {
- margin: 0;
-}
+@import "./utils/variables";
+@import "./utils/fonts";
+@import "./utils/mixins.scss";
+
+@import "./blocks/page";
+@import "./blocks/icon";
+@import "./blocks/reset";
+
+@import "./blocks/first-page";
+@import "./blocks/container";
+@import "./blocks/downloading";
+@import "./blocks/subscription";
+@import "./blocks/partners";
+@import "./blocks/connection";
+@import "./blocks/button";
+
+
diff --git a/src/styles/utils/fonts.scss b/src/styles/utils/fonts.scss
new file mode 100644
index 0000000..24fc5f6
--- /dev/null
+++ b/src/styles/utils/fonts.scss
@@ -0,0 +1,11 @@
+@font-face {
+ font-family: SF UI Display;
+ src: url(../fonts/SFUIDisplay-Bold.woff);
+ font-weight: 700px;
+}
+
+@font-face {
+ font-family: SF UI Display;
+ src: url(../fonts/SFUIDisplay-Regular.woff);
+ font-weight: 400px;
+}
\ No newline at end of file
diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss
new file mode 100644
index 0000000..fe027b8
--- /dev/null
+++ b/src/styles/utils/mixins.scss
@@ -0,0 +1,41 @@
+
+@mixin onMobileM {
+ @media (min-width: 420px) {
+ @content;
+ }
+}
+
+@mixin onMobileL {
+ @media (min-width: 768px) {
+ @content;
+ }
+}
+
+@mixin onDescktop {
+ @media (min-width: 1024px) {
+ @content;
+ }
+}
+
+@mixin inlinePadding {
+ @include onMobileM {
+ padding-inline: $inline-padding-mobile-m;
+ }
+ @include onMobileL {
+ padding-inline: $inline-padding-mobile-l;
+ }
+ @include onDescktop {
+ padding-inline: $inline-padding-descktop;
+ }
+}
+
+
+@mixin positionGradient {
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ content: "";
+ pointer-events: none;
+}
diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss
new file mode 100644
index 0000000..2e99653
--- /dev/null
+++ b/src/styles/utils/variables.scss
@@ -0,0 +1,8 @@
+$white: #FFFFFF;
+$black: #101010;
+$green: #23C3B2;
+$inline-padding-mobile-s: 20px;
+$inline-padding-mobile-m: 35px;
+$inline-padding-mobile-l: 45px;
+$inline-padding-descktop: 60px;
+;
\ No newline at end of file