diff --git a/src/images/drawing_desktop.png b/src/images/drawing_desktop.png new file mode 100644 index 000000000..f87e3cc34 Binary files /dev/null and b/src/images/drawing_desktop.png differ diff --git a/src/images/drawing_mobile.png b/src/images/drawing_mobile.png new file mode 100644 index 000000000..1c3851b0b Binary files /dev/null and b/src/images/drawing_mobile.png differ diff --git a/src/images/drawing_tablet.png b/src/images/drawing_tablet.png new file mode 100644 index 000000000..683212999 Binary files /dev/null and b/src/images/drawing_tablet.png differ diff --git a/src/images/icons/angle.svg b/src/images/icons/angle.svg new file mode 100644 index 000000000..ffa680dba --- /dev/null +++ b/src/images/icons/angle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/arrow_left.svg b/src/images/icons/arrow_left.svg new file mode 100644 index 000000000..8ad36d300 --- /dev/null +++ b/src/images/icons/arrow_left.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arrow_right.svg b/src/images/icons/arrow_right.svg new file mode 100644 index 000000000..bf3bd358a --- /dev/null +++ b/src/images/icons/arrow_right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arrow_top.svg b/src/images/icons/arrow_top.svg new file mode 100644 index 000000000..9977a457b --- /dev/null +++ b/src/images/icons/arrow_top.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/arrow_top2.svg b/src/images/icons/arrow_top2.svg new file mode 100644 index 000000000..e23b10413 --- /dev/null +++ b/src/images/icons/arrow_top2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/avatar.svg b/src/images/icons/avatar.svg new file mode 100644 index 000000000..551d3e805 --- /dev/null +++ b/src/images/icons/avatar.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/burger_menu.svg b/src/images/icons/burger_menu.svg new file mode 100644 index 000000000..4df42c36f --- /dev/null +++ b/src/images/icons/burger_menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/close.svg b/src/images/icons/close.svg new file mode 100644 index 000000000..df1397add --- /dev/null +++ b/src/images/icons/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/facebook.svg b/src/images/icons/facebook.svg new file mode 100644 index 000000000..2f5d0bec2 --- /dev/null +++ b/src/images/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/favicon.png b/src/images/icons/favicon.png new file mode 100644 index 000000000..f8ee6d6c6 Binary files /dev/null and b/src/images/icons/favicon.png differ diff --git a/src/images/icons/instagram.svg b/src/images/icons/instagram.svg new file mode 100644 index 000000000..acc91ab7f --- /dev/null +++ b/src/images/icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/light.svg b/src/images/icons/light.svg new file mode 100644 index 000000000..df0cb9b4c --- /dev/null +++ b/src/images/icons/light.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/icons/sound.svg b/src/images/icons/sound.svg new file mode 100644 index 000000000..fd4b7550f --- /dev/null +++ b/src/images/icons/sound.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/twitter.svg b/src/images/icons/twitter.svg new file mode 100644 index 000000000..1d928f615 --- /dev/null +++ b/src/images/icons/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/wifi.svg b/src/images/icons/wifi.svg new file mode 100644 index 000000000..203f2f68d --- /dev/null +++ b/src/images/icons/wifi.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo_big.svg b/src/images/logo_big.svg new file mode 100644 index 000000000..d830ed06f --- /dev/null +++ b/src/images/logo_big.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/meetLuna_desktop.png b/src/images/meetLuna_desktop.png new file mode 100644 index 000000000..ead76ee81 Binary files /dev/null and b/src/images/meetLuna_desktop.png differ diff --git a/src/images/meetLuna_mobile.png b/src/images/meetLuna_mobile.png new file mode 100644 index 000000000..dade64612 Binary files /dev/null and b/src/images/meetLuna_mobile.png differ diff --git a/src/images/meetLuna_tablet.png b/src/images/meetLuna_tablet.png new file mode 100644 index 000000000..fc7f93345 Binary files /dev/null and b/src/images/meetLuna_tablet.png differ diff --git a/src/images/meetLuna_test.png b/src/images/meetLuna_test.png new file mode 100644 index 000000000..c992603cf Binary files /dev/null and b/src/images/meetLuna_test.png differ diff --git a/src/images/meetLuna_test2.png b/src/images/meetLuna_test2.png new file mode 100644 index 000000000..85c2b1ac9 Binary files /dev/null and b/src/images/meetLuna_test2.png differ diff --git a/src/images/meetLuna_test3.png b/src/images/meetLuna_test3.png new file mode 100644 index 000000000..c992603cf Binary files /dev/null and b/src/images/meetLuna_test3.png differ diff --git a/src/images/meetLuna_test4.png b/src/images/meetLuna_test4.png new file mode 100644 index 000000000..c5e55dd6b Binary files /dev/null and b/src/images/meetLuna_test4.png differ diff --git a/src/images/meetLuna_test5.png b/src/images/meetLuna_test5.png new file mode 100644 index 000000000..e1b9970a4 Binary files /dev/null and b/src/images/meetLuna_test5.png differ diff --git a/src/images/speaker1_desktop.png b/src/images/speaker1_desktop.png new file mode 100644 index 000000000..c1bc172de Binary files /dev/null and b/src/images/speaker1_desktop.png differ diff --git a/src/images/speaker1_mobile.png b/src/images/speaker1_mobile.png new file mode 100644 index 000000000..ebc660281 Binary files /dev/null and b/src/images/speaker1_mobile.png differ diff --git a/src/images/speaker1_tablet.png b/src/images/speaker1_tablet.png new file mode 100644 index 000000000..f75155707 Binary files /dev/null and b/src/images/speaker1_tablet.png differ diff --git a/src/images/speaker2_desktop.png b/src/images/speaker2_desktop.png new file mode 100644 index 000000000..484ee2273 Binary files /dev/null and b/src/images/speaker2_desktop.png differ diff --git a/src/images/speaker2_mobile.png b/src/images/speaker2_mobile.png new file mode 100644 index 000000000..ec4dbb7a4 Binary files /dev/null and b/src/images/speaker2_mobile.png differ diff --git a/src/images/speaker2_tablet.png b/src/images/speaker2_tablet.png new file mode 100644 index 000000000..4958174d1 Binary files /dev/null and b/src/images/speaker2_tablet.png differ diff --git a/src/images/speaker3_desktop.png b/src/images/speaker3_desktop.png new file mode 100644 index 000000000..da456b420 Binary files /dev/null and b/src/images/speaker3_desktop.png differ diff --git a/src/images/speaker3_tablet.png b/src/images/speaker3_tablet.png new file mode 100644 index 000000000..0c65f466f Binary files /dev/null and b/src/images/speaker3_tablet.png differ diff --git a/src/images/speaker3_tablet_test.png b/src/images/speaker3_tablet_test.png new file mode 100644 index 000000000..b031f60e7 Binary files /dev/null and b/src/images/speaker3_tablet_test.png differ diff --git a/src/images/vector.png b/src/images/vector.png new file mode 100644 index 000000000..eb69e5400 Binary files /dev/null and b/src/images/vector.png differ diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd5400..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e..000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 000000000..ea1d2ed63 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,167 @@ +.about-us { + display: flex; + flex-direction: column; + gap: 110px; + padding-bottom: 110px; + + @include on-tablet { + gap: 140px; + padding-bottom: 140px; + } + + @include on-desktop { + gap: 170px; + padding-bottom: 170px; + } +} + +.block { + display: grid; + grid-template-areas: + 'title' + 'img' + 'content'; + grid-template-columns: 1fr; + + &__title { + grid-area: title; + + &--mobile { + display: block; + } + + &--tablet { + display: none; + } + + &--desktop { + display: none; + } + + @include on-tablet { + &--mobile { + display: none; + } + &--tablet { + display: block; + } + &--desktop { + display: none; + } + } + + @include on-desktop { + &--mobile { + display: none; + } + &--tablet { + display: none; + } + &--desktop { + display: block; + } + } + } + + &__img { + grid-area: img; + + img { + display: block; + width: 100%; + padding-top: 30px; + + @include on-tablet { + padding-top: 0; + } + } + } + + &__content { + display: flex; + grid-area: content; + flex-direction: column; + + @include on-tablet { + padding-right: 34px; + } + + &--reverse { + @include on-tablet { + padding-left: 34px; + } + + @include on-desktop { + padding-left: 0; + } + } + } + + &__description { + padding-top: 20px; + color: $secondary-text-color; + + @include on-tablet { + padding-top: 30px; + font-size: 16px; + line-height: 24px; + } + } + + &__button { + padding-top: 30px; + + @include on-tablet { + padding-top: 60px; + } + + &__link { + position: relative; + color: $accent-lignt-color; + text-decoration: none; + + &::after { + content: ''; + + position: absolute; + bottom: -6px; + left: 0; + transform-origin: left; + transform: scaleX(0.42); + + display: block; + + width: 100%; + height: 1px; + + background-color: $accent-lignt-color; + + transition: transform 0.5s; + } + + &:hover::after { + transform: scaleX(1); + } + } + } + + @include on-tablet { + grid-template-areas: 'img content'; + grid-template-columns: 1fr 1fr; + gap: 0 20px; + align-items: start; + + margin-inline: -34px; + } + + &--reverse { + @include on-tablet { + grid-template-areas: 'content img'; + } + } + + @include on-desktop { + gap: 0 30px; + margin-inline: 0; + } +} diff --git a/src/styles/blocks/benefits.scss b/src/styles/blocks/benefits.scss new file mode 100644 index 000000000..3b582a1d2 --- /dev/null +++ b/src/styles/blocks/benefits.scss @@ -0,0 +1,57 @@ +.benefits { + padding-top: 110px; + + @include on-tablet { + padding-top: 0; + } + + @include on-desktop { + padding-top: max(62px, 4vw); + } + + &__list { + display: grid; + grid-template-columns: 1fr; + gap: 30px; + align-items: self-start; + justify-content: space-evenly; + + margin: 0; + padding-inline-start: 0; + + list-style: none; + + @include on-tablet { + grid-template-columns: 2fr 2fr; + gap: 65px 20px; + } + + @include on-desktop { + grid-template-columns: 1fr 1fr 1fr 1fr; + } + } +} + +.benefit { + &__item { + display: grid; + grid-template-rows: auto 3rem auto; + justify-items: center; + text-align: center; + } + + &__img { + width: 70px; + height: 50px; + padding-bottom: 30px; + } + + &__description { + padding-top: 20px; + color: $secondary-text-color; + + @include on-tablet { + padding-top: 24px; + } + } +} diff --git a/src/styles/blocks/features.scss b/src/styles/blocks/features.scss new file mode 100644 index 000000000..7de286710 --- /dev/null +++ b/src/styles/blocks/features.scss @@ -0,0 +1,236 @@ +.features { + width: calc(100% + 60px); + margin-inline: -30px; + padding-block: 110px 90px; + + @include on-tablet { + width: 100%; + margin-inline: 0; + padding-block: 140px; + } + + @include on-desktop { + width: 100%; + margin-inline: 0; + padding-block: 170px; + + .features__slide { + pointer-events: auto; + + transform: none; + + // критично: прибираємо накладання grid-area: 1/1 + grid-area: auto; + + opacity: 1; + + transition: none; + } + + .features__slide--1 { + grid-area: s1; + } + .features__slide--2 { + grid-area: s2; + } + .features__slide--3 { + grid-area: s3; + } + + .features__tab--1:checked ~ .features__panel .features__slide--1, + .features__tab--2:checked ~ .features__panel .features__slide--2, + .features__tab--3:checked ~ .features__panel .features__slide--3 { + pointer-events: auto; + transform: none; + opacity: 1; + } + } + + &__title { + padding-bottom: 30px; + padding-left: 30px; + + @include on-tablet { + padding-left: 0; + } + } + + &__tab { + // pointer-events: none; + position: absolute; + width: 1px; + height: 1px; + opacity: 0; + } + + &__panel { + display: grid; + background-color: $background-accent-color; + + @include on-tablet { + width: 100%; + height: 555px; + + background-image: url(/src/images/speaker3_tablet_test.png); + background-repeat: no-repeat; + background-position: bottom right; + background-size: 415px; + } + + @include on-desktop { + grid-template: 's2 s3' 1fr 's1 .' 1fr / 1fr 1fr; + gap: 56px 30px; + + box-sizing: border-box; + height: 642px; + padding-left: 102px; + padding-block: 60px; + + background-size: 543px 301px; + } + } + + &__slide { + pointer-events: none; + + transform: translateX(24px); + + grid-area: 1 / 1; + + opacity: 0; + + transition: + opacity 300ms ease, + transform 300ms ease; + + @media (max-width: 1279px) { + grid-template-columns: 1fr; + gap: 24px; + } + } + + .features__tab--1:checked ~ &__panel .features__slide--1, + .features__tab--2:checked ~ &__panel .features__slide--2, + .features__tab--3:checked ~ &__panel .features__slide--3 { + pointer-events: auto; + transform: translateX(0); + opacity: 1; + } + + &__content { + display: flex; + flex-direction: column; + padding-top: 30px; + padding-inline: 30px; + + @include on-tablet { + align-items: flex-start; + padding-top: 60px; + padding-inline: 90px; + } + + @include on-desktop { + padding-top: 0; + padding-inline: 0; + } + } + + &__heading { + color: $accent-dark-color; + } + + &__list { + display: flex; + flex-direction: column; + gap: 10px; + + height: 233px; + margin: 0; + padding-left: 13px; + padding-block: 20px 50px; + + @include on-tablet { + width: 260px; + } + + @include on-desktop { + width: auto; + height: auto; + padding-block: 30px 0; + + font-size: 16px; + line-height: 19px; + } + } + + &__nav { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + @include on-desktop { + display: none; + } + } + + &__icon { + width: 48px; + height: 14px; + fill: $main-text-color; + } + + &__arrows { + display: flex; + color: $main-text-color; + } + + &__arrow { + &:hover .features__icon { + fill: $accent-dark-color; + } + + &.is-disabled .features__icon { + fill: $tertiary-light-text-color; + } + } + + &__counter { + display: flex; + gap: 4px; + align-items: end; + } + + &__current { + font-size: 16px; + font-weight: 400; + line-height: 24px; + } + + &__sep { + font-size: 11px; + font-weight: 400; + line-height: 100%; + color: $tertiary-light-text-color; + } + + &__total { + font-size: 11px; + font-weight: 400; + line-height: 100%; + color: $tertiary-light-text-color; + } + + &__img { + height: 173px; + + background-image: url(/src/images/speaker3_tablet_test.png); + background-repeat: no-repeat; + background-position: bottom; + background-size: contain; + + @include on-tablet { + display: none; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..3b445671e --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,80 @@ +.footer { + display: flex; + flex-direction: column; + padding-block: 110px 20px; + + @include on-tablet { + padding-block: 140px 0; + } + + @include on-desktop { + padding-block: 170px 0; + } + + &__top { + @include page-grid; + + display: none; + + @include on-tablet { + display: grid; + } + } + + &__logo-link { + @include on-tablet { + grid-column: 4 / 6; + justify-self: center; + } + + @include on-desktop { + grid-column: 6 / 8; + justify-self: center; + } + } + + &__logo { + display: block; + } + + &__arrow-link { + @include on-tablet { + grid-column: -2 / -1; // остання колонка + justify-self: end; + } + } + + &__arrow { + display: block; + } + + &__bottom { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + &__media { + display: flex; + gap: 49px; + padding-bottom: 30px; + + @include on-tablet { + padding-block: 35px 60px; + } + + @include on-desktop { + gap: 40px; + } + } + + &__icon { + display: block; + } + + &__text { + color: $tertiary-light-text-color; + text-align: center; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..563b33810 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,5 @@ +.header { + @include on-desktop { + min-height: 100vh; + } +} diff --git a/src/styles/blocks/main-block.scss b/src/styles/blocks/main-block.scss new file mode 100644 index 000000000..088bf4065 --- /dev/null +++ b/src/styles/blocks/main-block.scss @@ -0,0 +1,26 @@ +.main-block { + &__content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + &__img { + display: block; + width: calc(100% + 24px); + margin-inline: -12px; + padding-block: 110px; + + @include on-tablet { + width: 100%; + margin-inline: 0; + padding-block: 140px; + } + + @include on-desktop { + width: 846px; + padding-block: 170px; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..ab3d6a73e --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,32 @@ +.menu { + overflow: hidden; + display: flex; + flex-direction: column; + + box-sizing: border-box; + width: 100vw; + height: 100vh; + + background-color: $background-color; + + &__top { + display: flex; + justify-content: space-between; + + @include on-tablet { + height: 74px; + } + } + + &__content { + overflow: auto; + flex: 1; + min-height: 0; + } + + &__bottom { + flex: 0 0 auto; + margin-top: auto; + margin-bottom: 30px; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..6204bdd98 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,53 @@ +.nav { + &__desktop { + display: none; + + @include on-desktop { + display: contents; + } + } + + &__mobile { + display: block; + + @include on-desktop { + display: none; + } + } + &__link { + color: $main-text-color; + text-decoration: none; + + &:hover { + font-weight: 700; + color: $hover-black-color; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 25px; + + margin: 0; + padding-top: 30px; + padding-inline-start: 0; + + list-style: none; + + @include on-tablet { + gap: 40px; + padding-top: 40px; + } + + @include on-desktop { + flex-direction: row; + gap: 84px; + align-items: center; + justify-content: center; + + height: 76px; + padding-top: 0; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..0f0239c49 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,38 @@ +.page { + scroll-behavior: smooth; + font-family: Inter, sans-serif; + background: $background-color; + + &__body { + min-width: 320px; + margin: 0; + + @include on-tablet { + padding-block: 30px; + } + } + + &__menu { + pointer-events: none; + + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translateX(-100%); + + opacity: 0; + + transition: all 500ms; + + &:target { + pointer-events: all; + transform: translateX(0); + opacity: 1; + } + } + + &:has(.page__menu:target) { + overflow: hidden; + } +} diff --git a/src/styles/blocks/presentation.scss b/src/styles/blocks/presentation.scss new file mode 100644 index 000000000..79ef4eb0d --- /dev/null +++ b/src/styles/blocks/presentation.scss @@ -0,0 +1,56 @@ +.presentation { + display: grid; + grid-template-columns: 1fr; + + @include on-tablet { + grid-template-columns: 1fr 2fr; + + padding-block: 130px 140px; + + background-image: url(/src/images/speaker1_tablet.png); + background-repeat: no-repeat; + background-position: right; + background-size: 429px 317px; + } + + @include on-desktop { + padding-block: 170px; + + background-image: url(/src/images/speaker1_desktop.png); + background-repeat: no-repeat; + background-position: right; + background-size: 816px 464px; + } + + &__img { + display: block; + width: calc(100% + 60px); + margin-inline: -30px; + padding-bottom: 40px; + + @include on-tablet { + display: none; + margin-inline: 0; + } + } + + &__info { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + gap: 30px; + } + } + + &__text { + @include on-tablet { + width: 250px; + } + + @include on-desktop { + width: 276px; + } + } +} diff --git a/src/styles/blocks/questions.scss b/src/styles/blocks/questions.scss new file mode 100644 index 000000000..85bd01483 --- /dev/null +++ b/src/styles/blocks/questions.scss @@ -0,0 +1,167 @@ +.questions { + @include page-grid; + + gap: 30px 0; + width: 100%; + + @include on-tablet { + gap: 0 20px; + } + + @include on-desktop { + gap: 0 30px; + } + + &__title { + grid-column: 1 / -1; + + &--mobile { + display: block; + } + &--tablet { + display: none; + } + + @include on-tablet { + grid-column: span 4; + &--mobile { + display: none; + } + &--tablet { + display: block; + } + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__form { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: 7 / -1; + } + + &--specs { + box-sizing: border-box; + height: 48px; + padding: 12px 20px; + border: 1px solid $border-color; + + color: $main-text-color; + + background: $background-color; + + &::placeholder { + color: $tertiary-light-text-color; + } + + &:valid { + border-color: $border-color; + color: $main-text-color; + } + + &:focus { + border-color: $accent-dark-color; + outline: none; + + &:valid { + border-color: $accent-dark-color; + outline: none; + } + + &invalid:not(:placeholder-shown) { + border-color: $accent-dark-color; + outline: none; + } + } + + &:invalid:not(:placeholder-shown) { + border-color: $border-error-color; + color: #eb57574d; + } + } + &--textarea { + resize: none; + box-sizing: border-box; + height: 128px; + margin-block: 20px 30px; + + &:valid { + border-color: $border-color; + color: $main-text-color; + } + + &:focus:invalid { + border-color: $border-error-color; + color: #eb5757; + } + + @include on-tablet { + height: 201px; + } + + @include on-desktop { + height: 128px; + } + } + } + + &__button { + cursor: pointer; + + width: 102px; + height: 40px; + border: none; + + color: #fff; + + background-color: $accent-lignt-color; + + transition: + background-color 0.2s, + opacity 0.2s; + + @include on-desktop { + width: 124px; + height: 48px; + } + } + + &__form .questions__button { + pointer-events: none; + cursor: not-allowed; + background-color: #cfeff0; + } + + &__form:valid .questions__button { + pointer-events: auto; + cursor: pointer; + background-color: #39bebf; + } + + &__form:valid .questions__button:hover { + background-color: #0c797a; + } +} + +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +textarea:-webkit-autofill, +textarea:-webkit-autofill:hover, +textarea:-webkit-autofill:focus { + border: 1px solid $accent-dark-color; + -webkit-box-shadow: 0 0 0 1000px $background-color inset; + transition: background-color 5000s ease-in-out 0s; + + -webkit-text-fill-color: $main-text-color; +} diff --git a/src/styles/blocks/testimonilas.scss b/src/styles/blocks/testimonilas.scss new file mode 100644 index 000000000..d39978ae4 --- /dev/null +++ b/src/styles/blocks/testimonilas.scss @@ -0,0 +1,44 @@ +.testimonilas { + display: flex; + flex-direction: column; + align-items: center; + + background-image: url(/src/images/vector.png); + background-repeat: no-repeat; + background-position: center top; + background-size: 208px 171px; + + @include on-tablet { + background-size: 233px 189px; + } + + @include on-desktop { + width: 786px; + background-size: 233px 192px; + } + + &__text { + padding-top: 50px; + padding-bottom: 30px; + text-align: center; + + @include on-tablet { + width: 100%; + padding-top: 60px; + padding-bottom: 40px; + } + + @include on-desktop { + padding-top: 42px; + padding-bottom: 30px; + } + } + + &__name { + padding-block: 10px 5px; + + @include on-tablet { + padding-block: 20px 5px; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..73a3ab46e --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,123 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + + box-sizing: border-box; + height: $header-height-mobile; + + @include on-tablet { + height: $header-height-tablet; + } + + &__right-side { + display: flex; + gap: 30px; + align-items: center; + justify-content: space-between; + } + + &__buy { + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + height: 48px; + + color: white; + + background-color: $main-text-color; + + @include on-tablet { + width: 100px; + height: $header-height-tablet; + } + + &:hover { + background-color: $hover-black-color; + } + + &--mobile { + @include on-tablet { + display: none; + } + } + + &--tablet { + display: none; + + @include on-tablet { + display: flex; + } + } + } +} + +.specs-block { + display: none; + + @include on-tablet { + display: flex; + gap: 30px; + align-items: center; + justify-content: space-between; + + height: $header-height-tablet; + } + + @include on-desktop { + gap: 45px; + } + + &__mobile { + display: flex; + flex-direction: column; + padding-top: 50px; + + @include on-tablet { + display: none; + } + } + + &__all-specs { + display: flex; + gap: 20px; + } + + &__specs { + color: $tertiary-dark-text-color; + } + + &__lang { + display: flex; + gap: 3px; + align-items: center; + justify-content: space-between; + + &--active { + color: $main-text-color; + } + + &--passive { + color: $tertiary-light-text-color; + + &:hover { + color: $main-text-color; + } + } + } +} + +.burger_menu { + @include on-desktop { + display: none; + } + + &__img { + width: 32px; + height: 32px; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..77be0c133 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,27 @@ -@import 'utils'; -@import 'fonts'; +@import './utils/vars'; +@import './utils/mixins'; @import 'typography'; -body { - background: $c-gray; +@import './blocks/top-bar'; +@import './blocks/header'; +@import './blocks/page'; +@import './blocks/presentation'; +@import './blocks/nav'; +@import './blocks/benefits'; +@import './blocks/main-block'; +@import './blocks/about-us'; +@import './blocks/testimonilas'; +@import './blocks/features'; +@import './blocks/questions'; +@import './blocks/footer'; +@import './blocks/menu'; + +h1, +h2, +h3, +h4, +h5, +h6, +p { + margin: 0; } diff --git a/src/styles/typography.scss b/src/styles/typography.scss new file mode 100644 index 000000000..f05aa088a --- /dev/null +++ b/src/styles/typography.scss @@ -0,0 +1,120 @@ +@import './utils/mixins'; + +h1 { + // @extend %h1; + font-size: 40px; + font-weight: 700; + line-height: 52px; + color: $main-text-color; + text-transform: uppercase; + + @include on-tablet { + font-size: 48px; + line-height: 62px; + } + + @include on-desktop { + font-size: 62px; + line-height: 78px; + } +} + +h2 { + font-size: 30px; + font-weight: 700; + line-height: 40px; + color: $main-text-color; + text-transform: uppercase; + + @include on-tablet { + font-size: 36px; + line-height: 46px; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } +} + +h3 { + font-size: 18px; + font-weight: 700; + line-height: 22px; + color: $main-text-color; + text-transform: uppercase; + + @include on-tablet { + font-size: 24px; + line-height: 30px; + } + + @include on-desktop { + font-size: 34px; + line-height: 42px; + } +} + +h4 { + font-size: 22px; + font-weight: 700; + line-height: 28px; + color: $main-text-color; + text-transform: uppercase; +} + +h5 { + font-size: 16px; + font-weight: 700; + line-height: 22px; + color: $main-text-color; +} + +h6 { + font-size: 14px; + font-weight: 700; + line-height: 20px; + color: $main-text-color; + text-transform: uppercase; +} + +.button_text { + font-size: 12px; + font-weight: 700; + line-height: 14px; + text-transform: uppercase; +} + +.main_text { + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: $main-text-color; +} + +.secondary_text { + font-size: 14px; + font-weight: 400; + line-height: 21px; +} + +.tertiary_text { + font-size: 14px; + font-weight: 400; + line-height: 20px; + text-decoration: none; + text-transform: uppercase; + + // color: $tertiary-dark-text-color; +} + +.quote { + font-size: 14px; + font-weight: 700; + line-height: 20px; + + @include on-tablet { + font-size: 24px; + line-height: 36px; + } +} diff --git a/src/styles/utils.scss b/src/styles/utils.scss new file mode 100644 index 000000000..3280c3fe1 --- /dev/null +++ b/src/styles/utils.scss @@ -0,0 +1,3 @@ +@import 'utils/vars'; +@import 'utils/mixins'; +@import 'utils/extends'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3..000000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss deleted file mode 100644 index 80c79780d..000000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006ffb..000000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee; diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 000000000..96ade6dd2 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,61 @@ +@import './vars'; + +@mixin hover($_property, $_toValue) { + transition: #{$_property} 0.3s; + &:hover { + #{$_property}: $_toValue; + } +} + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin content-padding-inline() { + box-sizing: border-box; + margin-inline: 0; + padding-inline: 30px; + + @include on-tablet { + margin-inline: 0; + padding-inline: 34px; + } + + @include on-desktop { + max-width: $content-max-width; + margin-inline: auto; + padding-inline: 123px; + } +} + +.container { + @include content-padding-inline; + + // margin-inline: 0; +} + +@mixin page-grid { + --colums: 4; + + display: grid; + grid-template-columns: repeat(var(--colums), 1fr); + column-gap: 20px; + + @include on-tablet { + --colums: 8; + } + + @include on-desktop { + --colums: 12; + + column-gap: 30px; + } +} diff --git a/src/styles/utils/vars.scss b/src/styles/utils/vars.scss new file mode 100644 index 000000000..09479339a --- /dev/null +++ b/src/styles/utils/vars.scss @@ -0,0 +1,19 @@ +$main-text-color: #333; +$secondary-text-color: #7c7c7c; +$tertiary-dark-text-color: #4f4f4f; +$tertiary-light-text-color: #bdbdbd; +$hover-black-color: #131313; +$hover-disabledgrey-color: #d0d0d0; +$border-color: #828282; +$border-error-color: #eb5757; +$accent-lignt-color: #0db2b3; +$accent-dark-color: #0c797a; +$accent-disabled-color: #eefafa; +$background-color: #f7f7f7; +$background-accent-color: #d6ecec; +$background-disabled-color: #cfeff0; +$tablet-min-width: 640px; +$desktop-min-width: 1280px; +$content-max-width: 1440px; +$header-height-tablet: 48px; +$header-height-mobile: 76px;