diff --git a/src/images/air-black/Azadeh.png b/src/images/air-black/Azadeh.png new file mode 100644 index 0000000000..5b3b4f66c6 Binary files /dev/null and b/src/images/air-black/Azadeh.png differ diff --git a/src/images/air-black/BG.png b/src/images/air-black/BG.png new file mode 100644 index 0000000000..920569de08 Binary files /dev/null and b/src/images/air-black/BG.png differ diff --git a/src/images/air-black/GwVmBgpP-PQ.png b/src/images/air-black/GwVmBgpP-PQ.png new file mode 100644 index 0000000000..f8016e70b3 Binary files /dev/null and b/src/images/air-black/GwVmBgpP-PQ.png differ diff --git a/src/images/air-black/Menu.svg b/src/images/air-black/Menu.svg new file mode 100644 index 0000000000..374d372c5a --- /dev/null +++ b/src/images/air-black/Menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/air-black/Michel.png b/src/images/air-black/Michel.png new file mode 100644 index 0000000000..aa825dcba7 Binary files /dev/null and b/src/images/air-black/Michel.png differ diff --git a/src/images/air-black/Photo@2x.png b/src/images/air-black/Photo@2x.png new file mode 100644 index 0000000000..2761398691 Binary files /dev/null and b/src/images/air-black/Photo@2x.png differ diff --git a/src/images/air-black/Tal.png b/src/images/air-black/Tal.png new file mode 100644 index 0000000000..0a52d866c1 Binary files /dev/null and b/src/images/air-black/Tal.png differ diff --git a/src/images/air-black/branding.png b/src/images/air-black/branding.png new file mode 100644 index 0000000000..49486d298d Binary files /dev/null and b/src/images/air-black/branding.png differ diff --git a/src/images/air-black/communication.png b/src/images/air-black/communication.png new file mode 100644 index 0000000000..ed5b82f442 Binary files /dev/null and b/src/images/air-black/communication.png differ diff --git a/src/images/air-black/cursor-mouse-mice.svg b/src/images/air-black/cursor-mouse-mice.svg new file mode 100644 index 0000000000..b9fc48dc40 --- /dev/null +++ b/src/images/air-black/cursor-mouse-mice.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/images/air-black/facebook.svg b/src/images/air-black/facebook.svg new file mode 100644 index 0000000000..b6bc5a936d --- /dev/null +++ b/src/images/air-black/facebook.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/air-black/instagram.svg b/src/images/air-black/instagram.svg new file mode 100644 index 0000000000..76a83d304d --- /dev/null +++ b/src/images/air-black/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/air-black/mdi-arrow-forward.svg b/src/images/air-black/mdi-arrow-forward.svg new file mode 100644 index 0000000000..0305d87024 --- /dev/null +++ b/src/images/air-black/mdi-arrow-forward.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/air-black/mdi-chevron-left.svg b/src/images/air-black/mdi-chevron-left.svg new file mode 100644 index 0000000000..1398ce274b --- /dev/null +++ b/src/images/air-black/mdi-chevron-left.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/air-black/mdi-chevron-right.svg b/src/images/air-black/mdi-chevron-right.svg new file mode 100644 index 0000000000..1781fbfc24 --- /dev/null +++ b/src/images/air-black/mdi-chevron-right.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/air-black/qPojqUji_y4.png b/src/images/air-black/qPojqUji_y4.png new file mode 100644 index 0000000000..96f06355ff Binary files /dev/null and b/src/images/air-black/qPojqUji_y4.png differ diff --git a/src/images/air-black/strategy.png b/src/images/air-black/strategy.png new file mode 100644 index 0000000000..6f0d1dbeb7 Binary files /dev/null and b/src/images/air-black/strategy.png differ diff --git a/src/images/air-black/twitter.svg b/src/images/air-black/twitter.svg new file mode 100644 index 0000000000..74cbdbf5d4 --- /dev/null +++ b/src/images/air-black/twitter.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git "a/src/images/air-black/\342\200\234-blue.svg" "b/src/images/air-black/\342\200\234-blue.svg" new file mode 100644 index 0000000000..14efa5df60 --- /dev/null +++ "b/src/images/air-black/\342\200\234-blue.svg" @@ -0,0 +1,3 @@ + + + diff --git a/src/images/air-blue/Azadeh-biue.png b/src/images/air-blue/Azadeh-biue.png new file mode 100644 index 0000000000..ed9cebee64 Binary files /dev/null and b/src/images/air-blue/Azadeh-biue.png differ diff --git a/src/images/air-blue/Michel-blue.png b/src/images/air-blue/Michel-blue.png new file mode 100644 index 0000000000..87f598eb7a Binary files /dev/null and b/src/images/air-blue/Michel-blue.png differ diff --git a/src/images/air-blue/Photo.png b/src/images/air-blue/Photo.png new file mode 100644 index 0000000000..45d84b23c9 Binary files /dev/null and b/src/images/air-blue/Photo.png differ diff --git a/src/images/air-blue/Shapes.png b/src/images/air-blue/Shapes.png new file mode 100644 index 0000000000..c9fec4ac67 Binary files /dev/null and b/src/images/air-blue/Shapes.png differ diff --git a/src/images/air-blue/Tal-blue.png b/src/images/air-blue/Tal-blue.png new file mode 100644 index 0000000000..964d63edc2 Binary files /dev/null and b/src/images/air-blue/Tal-blue.png differ diff --git "a/src/images/air-blue/\342\200\234-light-blue.svg" "b/src/images/air-blue/\342\200\234-light-blue.svg" new file mode 100644 index 0000000000..940001eeb7 --- /dev/null +++ "b/src/images/air-blue/\342\200\234-light-blue.svg" @@ -0,0 +1,3 @@ + + + diff --git "a/src/images/air-blue/\342\200\234-pink.png" "b/src/images/air-blue/\342\200\234-pink.png" new file mode 100644 index 0000000000..38a821c615 Binary files /dev/null and "b/src/images/air-blue/\342\200\234-pink.png" differ diff --git "a/src/images/air-blue/\342\200\234-yellow.svg" "b/src/images/air-blue/\342\200\234-yellow.svg" new file mode 100644 index 0000000000..4b38b54252 --- /dev/null +++ "b/src/images/air-blue/\342\200\234-yellow.svg" @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo/air-logo.svg b/src/images/logo/air-logo.svg new file mode 100644 index 0000000000..e26dfea4ae --- /dev/null +++ b/src/images/logo/air-logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/mateacademy-logo.jpg b/src/images/mateacademy-logo.jpg new file mode 100644 index 0000000000..d2ad12b33e Binary files /dev/null and b/src/images/mateacademy-logo.jpg differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..c94efd07db 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,10 @@ 'use strict'; + +const swiper = new Swiper('.content__swiper', { + loop: true, + navigation: { + nextEl: '.js-content-next', + prevEl: '.js-content-prev', + }, +} +); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd54008..0000000000 --- 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 1837eb46e2..0000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe10..0000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/blocks/apply.scss b/src/styles/blocks/apply.scss new file mode 100644 index 0000000000..6e78e19c54 --- /dev/null +++ b/src/styles/blocks/apply.scss @@ -0,0 +1,84 @@ +.apply { + background-color: $color-white; + position: relative; + width: 100vw; + left: 50%; + transform: translateX(-50%); + + @include on-tablet { + background-image: url(../images/air-black/BG.png); + position: relative; + width: 100vw; + left: 50%; + transform: translateX(-50%); + } + + &__content { + @include content-padding-inline; + + padding-top: 72px; + padding-bottom: 72px; + + @include on-tablet { + padding-top: 200px; + padding-bottom: 200px; + } + } + + &__title { + font-family: Poppins, sans-serif; + font-weight: 600; + font-size: 44px; + line-height: 120%; + letter-spacing: 0; + text-align: center; + vertical-align: middle; + } + + &__description { + font-family: 'Open Sans', sans-serif; + font-weight: 600; + font-size: 22px; + line-height: 150%; + letter-spacing: 0; + text-align: center; + margin-top: 24px; + color: $text-50; + + @include on-tablet { + max-width: 560px; + margin-inline: auto; + } + + @include on-small-desktop { + max-width: 760px; + } + } + + &__btn { + display: block; + align-items: center; + box-sizing: border-box; + margin-inline: auto; + margin-top: 56px; + border: none; + width: 280px; + height: 56px; + border-radius: 8px; + font-family: Poppins, sans-serif; + font-weight: 600; + font-size: 15px; + line-height: 100%; + letter-spacing: 0; + text-align: center; + background-color: $color-but-blue; + color: $color-white; + + &:hover { + cursor: $custom-cursor, pointer; + background-color: $color-but-blue-hover; + + @include hover(transform, scale(1.2)); + } + } +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 0000000000..8292b43b29 --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,114 @@ +.contact-us { + &__title { + font-family: Poppins, sans-serif; + font-weight: 600; + font-size: 32px; + line-height: 150%; + letter-spacing: 0; + vertical-align: middle; + } + + &__group { + display: grid; + margin-top: 48px; + gap: 40px; + + @include on-tablet { + margin-top: 56px; + gap: 48px; + } + } + + &__description { + font-family: Poppins, sans-serif; + font-weight: 700; + font-size: 13px; + line-height: 100%; + letter-spacing: 3px; + text-transform: uppercase; + color: $text-50; + margin-bottom: 8px; + } + + &__phone { + all: unset; + font-family: 'Open Sans', sans-serif; + font-weight: 600; + font-size: 24px; + line-height: 150%; + letter-spacing: 0; + cursor: $custom-cursor, pointer; + } + + &__adr { + all: unset; + + &--link { + text-decoration: none; + display: inline-block; + color: inherit; + font-family: 'Open Sans', sans-serif; + font-weight: 600; + font-size: 24px; + line-height: 150%; + letter-spacing: 0; + cursor: $custom-cursor, pointer; + transition: transform $effectDuration ease; + } + } + + &__group-icons { + padding-top: 8px; + display: flex; + column-gap: 32px; + } + + &__icon-f, + &__icon-t, + &__icon-i { + display: inline-block; + width: 32px; + height: 32px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + cursor: $custom-cursor, pointer; + transition: filter $effectDuration ease; + } + + &__icon-f { + background-image: url(../images/air-black/facebook.svg); + } + + &__icon-t { + background-image: url(../images/air-black/twitter.svg); + } + + &__icon-i { + background-image: url(../images/air-black/instagram.svg); + } + + &__icon-f:hover { + filter: invert(53%) sepia(87%) saturate(2258%) hue-rotate(178deg) + brightness(101%) contrast(105%); + transition: filter $effectDuration ease; + + @include hover(transform, scale(1.2)); + } + + &__icon-t:hover { + filter: invert(53%) sepia(87%) saturate(2258%) hue-rotate(178deg) + brightness(101%) contrast(105%); + transition: filter $effectDuration ease; + + @include hover(transform, scale(1.2)); + } + + &__icon-i:hover { + filter: invert(53%) sepia(87%) saturate(2258%) hue-rotate(178deg) + brightness(101%) contrast(105%); + transition: filter $effectDuration ease; + + @include hover(transform, scale(1.2)); + } +} diff --git a/src/styles/blocks/content.scss b/src/styles/blocks/content.scss new file mode 100644 index 0000000000..cf07cacaf2 --- /dev/null +++ b/src/styles/blocks/content.scss @@ -0,0 +1,222 @@ +.content { + @include page-grid; + + &__title { + font-family: Poppins, sans-serif; + font-weight: 600; + font-size: 52px; + line-height: 120%; + letter-spacing: -2px; + margin-top: 48px; + grid-column: 1/-1; + + @include on-tablet { + font-size: 64px; + line-height: 68px; + margin-top: 56px; + } + + @include on-small-desktop { + grid-column: 1 /5; + margin-top: 164px; + grid-row: 1; + align-items: start; + } + } + + &__text { + grid-column: 1 /-1; + display: block; + margin: 0; + font-family: 'Open Sans', sans-serif; + font-weight: 400; + font-size: 18px; + line-height: 150%; + letter-spacing: 0; + margin-top: 32px; + + @include on-tablet { + grid-column: 1 /5; + margin-top: 24px; + } + + @include on-small-desktop { + grid-column: 1 /6; + margin-top: 32px; + } + + @include on-design { + grid-column: 1 /5; + } + + @include on-large-screens { + grid-column: 1 /5; + } + } + + &__button { + grid-column: 1 /-1; + height: 50px; + padding: 14px; + margin-top: 72px; + margin-bottom: 48px; + font-family: Poppins, sans-serif; + font-weight: 600; + font-size: 15px; + line-height: 100%; + letter-spacing: 0; + text-align: center; + border-radius: 8px; + background-color: $color-but-blue; + color: $color-white; + border: none; + + &:hover { + cursor: $custom-cursor, pointer; + background-color: $color-but-blue-hover; + + @include hover(transform, scale(1.2)); + } + + @include on-tablet { + width: 264px; + margin-top: 56px; + margin-bottom: 147px; + } + + @include on-small-desktop { + margin-top: 83px; + margin-bottom: 205px; + grid-row: 3; + } + } + + &__swiper { + grid-column: 1 /-1; + background-image: url(../images/air-black/Photo@2x.png); + width: 100vw; + height: 390px; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + border-radius: 30px; + overflow: hidden; + + @include on-small-desktop { + grid-column: 7 / 13; + grid-row: 1 / 4; + position: relative; + width: auto; + left: 0; + margin-left: 0; + margin-right: -50vw; + padding-right: 50vw; + height: 680px; + border-radius: 30px 0; + margin-top: 48px; + } + + @include on-design { + grid-column: 8 / 13; + } + } + + &__elements { + grid-column: 1 /-1; + display: flex; + grid-template-areas: 'stack'; + align-items: flex-end; + width: 100%; + height: 100%; + padding-left: 20px; + position: absolute; + top: 0; + left: 0; + padding-bottom: 24px; + box-sizing: border-box; + z-index: 10; + pointer-events: none; + + @include on-tablet { + padding-left: 40px; + padding-bottom: 32px; + } + + @include on-small-desktop { + padding-left: 78px; + padding-bottom: 48px; + } + + @include on-design { + padding-left: 48px; + } + } + + &__info { + display: flex; + flex-direction: column; + gap: 16px; + align-items: flex-start; + color: $color-white; + pointer-events: auto; + + @include on-small-desktop { + display: flex; + flex-direction: row; + align-items: center; + gap: 24px; + } + } + + &__sides { + display: flex; + gap: 16px; + } + + &__arrow-button { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 50%; + background-color: $color-white; + cursor: $custom-cursor, pointer; + + @include hover(transform, scale(1.2)); + } + + &__background-elements { + display: flex; + flex-direction: column; + gap: 8px; + color: $color-white; + } + + &__intro { + font-family: Poppins, sans-serif; + font-weight: 700; + font-size: 13px; + line-height: 100%; + letter-spacing: 3px; + text-transform: uppercase; + margin: 0; + } + + &__describe { + font-family: 'Open Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 140%; + letter-spacing: 0; + + @include on-small-desktop { + max-width: 250px; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..f1081908ab --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,61 @@ +.footer { + background-color: $color-bg-black; + border-radius: 30px 30px 0 0; + padding-top: 72px; + padding-bottom: 80px; + color: $color-white; + + @include on-tablet { + padding-top: 180px; + padding-bottom: 80px; + } + + &__content { + @include page-grid; + } + + &__message { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-small-desktop { + grid-column: 1 / 6; + } + } + + &__contact-us { + grid-column: 1 / -1; + margin-top: 80px; + + @include on-tablet { + grid-column: 1 / 5; + margin-top: 120px; + } + + @include on-small-desktop { + grid-column: 7 / 12; + margin-top: 0; + } + + @include on-design { + grid-column: 8 / 12; + } + } + + &__navigation { + grid-column: 1 / -1; + margin-top: 80px; + + @include on-tablet { + grid-column: 1 / 5; + margin-top: 140px; + } + + @include on-small-desktop { + margin-top: 104px; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..e7b071c021 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,6 @@ +.header { + color: $color-white; + background-color: $color-bg-black; + border-radius: 0 0 30px 30px; + overflow: hidden; +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 0000000000..c7b26fef3a --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,15 @@ +.main { + &__content { + display: flex; + flex-direction: column; + padding-top: 120px; + padding-bottom: 120px; + gap: 120px; + + @include on-tablet { + padding-top: 148px; + padding-bottom: 0; + gap: 148px; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..17efd45ec5 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,109 @@ +.menu { + display: block; + position: absolute; + top: 0; + right: 0; + box-sizing: border-box; + height: 680px; + width: 100vw; + background-color: $color-bg-blue; + opacity: 0; + pointer-events: none; + scroll-behavior: smooth; + + &:target { + opacity: 1; + pointer-events: all; + } + + &__top { + padding: 20px; + display: flex; + justify-content: space-between; + align-items: center; + + @include on-tablet { + padding: 20px 40px; + } + } + + &__burger-menu { + display: block; + background: none; + border: none; + cursor: $custom-cursor, pointer; + transition: transform $effectDuration ease; + + @include hover(transform, scale(1.2)); + + &--line { + display: block; + width: 18px; + height: 2px; + background-color: $color-white; + margin: 4px 0; + transition: transform $effectDuration ease; + } + + &.is-active { + .menu__burger-menu--line:nth-child(1) { + transform: translateY(3px) rotate(45deg); + } + + .menu__burger-menu--line:nth-child(2) { + transform: translateY(-3px) rotate(-45deg); + } + } + } + + &__logo-link { + height: 28px; + width: 46px; + margin-right: 32px; + cursor: $custom-cursor, pointer; + + @include hover(transform, scale(1.2)); + } + + &__nav { + padding: 20px; + list-style: none; + display: inline-flex; + align-items: center; + line-height: 1; + + @include on-tablet { + padding: 40px; + } + } + + &__list { + all: unset; + list-style: none; + display: flex; + flex-direction: column; + gap: 24px; + + @include on-tablet { + gap: 38px; + } + } + + &__link { + display: inline-flex; + align-items: center; + line-height: 1; + text-decoration: none; + color: $color-white; + font-family: Poppins, sans-serif; + font-weight: 700; + font-size: 13px; + letter-spacing: 2px; + text-transform: uppercase; + white-space: nowrap; + transition: opacity $effectDuration; + cursor: $custom-cursor, pointer; + + @include hover(transform, scale(1.2)); + } +} diff --git a/src/styles/blocks/message.scss b/src/styles/blocks/message.scss new file mode 100644 index 0000000000..1410b63b2a --- /dev/null +++ b/src/styles/blocks/message.scss @@ -0,0 +1,85 @@ +.message { + &__title { + font-family: Poppins, sans-serif; + font-weight: 600; + font-size: 32px; + line-height: 150%; + letter-spacing: 0; + vertical-align: middle; + } + + &__group-buyer { + padding-top: 48px; + + @include on-tablet { + padding-top: 56px; + } + } + + &__group-input { + display: grid; + row-gap: 40px; + + @include on-tablet { + row-gap: 48px; + } + } + + &__input { + all: unset; + display: block; + box-sizing: border-box; + height: 40px; + padding-bottom: 17px; + width: fit-content; + width: 280px; + border-bottom: 2px solid $color-white; + cursor: $custom-cursor, pointer; + + &:hover { + border-bottom: 2px solid $color-but-blue-hover; + } + + @include on-tablet { + width: 362px; + } + + @include on-small-desktop { + width: 370px; + } + + @include on-design { + width: 460px; + } + } + + &__button { + margin-top: 56px; + display: block; + border: none; + align-items: start; + box-sizing: border-box; + width: 280px; + height: 56px; + border-radius: 8px; + font-family: Poppins, sans-serif; + font-weight: 600; + font-size: 15px; + line-height: 100%; + letter-spacing: 0; + text-align: center; + background-color: $color-but-blue; + color: $color-white; + + &:hover { + cursor: $custom-cursor, pointer; + background-color: $color-but-blue-hover; + + @include hover(transform, scale(1.2)); + } + + @include on-tablet { + width: 264px; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..31c629d91d --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,43 @@ +.nav { + &__wrapper { + display: none; + + @include on-small-desktop { + display: flex; + align-items: center; + margin-left: auto; + margin-right: 114px; + } + + @include on-design { + margin-right: 229px; + } + } + + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: row; + gap: 48px; + } + + &__link { + @include on-small-desktop { + text-decoration: none; + color: $color-white; + font-family: Poppins, sans-serif; + font-weight: 700; + font-size: 13px; + letter-spacing: 2px; + text-transform: uppercase; + transition: opacity $effectDuration; + cursor: $custom-cursor, pointer; + } + } + + &__item { + @include hover(transform, scale(1.2)); + } +} diff --git a/src/styles/blocks/navigation.scss b/src/styles/blocks/navigation.scss new file mode 100644 index 0000000000..512d975bab --- /dev/null +++ b/src/styles/blocks/navigation.scss @@ -0,0 +1,69 @@ +.navigation { + display: grid; + row-gap: 48px; + + @include on-tablet { + row-gap: 24px; + } + + @include on-small-desktop { + display: flex; + column-gap: 234px; + } + + @include on-design { + column-gap: 464px; + } + + &__nav { + list-style: none; + display: inline-flex; + align-items: center; + line-height: 1; + } + + &__list { + all: unset; + list-style: none; + display: flex; + flex-direction: column; + gap: 24px; + + @include on-tablet { + flex-direction: row; + gap: 40px; + } + + @include on-small-desktop { + gap: 64px; + } + } + + &__item { + @include hover(transform, scale(1.2)); + } + + &__link { + display: inline-flex; + align-items: center; + line-height: 1; + text-decoration: none; + color: $color-white; + font-family: Poppins, sans-serif; + font-weight: 700; + font-size: 13px; + letter-spacing: 2px; + text-transform: uppercase; + white-space: nowrap; + transition: opacity $effectDuration; + cursor: $custom-cursor, pointer; + } + + &__logo-link { + width: 46px; + height: 28px; + cursor: $custom-cursor, pointer; + + @include hover(transform, scale(1.2)); + } +} diff --git a/src/styles/blocks/our-expertise.scss b/src/styles/blocks/our-expertise.scss new file mode 100644 index 0000000000..ceef81b7a8 --- /dev/null +++ b/src/styles/blocks/our-expertise.scss @@ -0,0 +1,93 @@ +.our-expertise { + background-color: $color-white; + position: relative; + width: 100vw; + left: 50%; + transform: translateX(-50%); + + &__title { + font-family: Poppins, sans-serif; + font-weight: 600; + font-size: 44px; + line-height: 120%; + letter-spacing: 0; + text-align: center; + vertical-align: middle; + color: $text-100; + margin-top: 72px; + margin-bottom: 56px; + + @include on-tablet { + font-size: 52px; + margin-top: 128px; + margin-bottom: 64px; + } + } + + &__products { + display: grid; + gap: 56px; + margin-bottom: 72px; + + @include on-tablet { + margin-bottom: 128px; + } + + @include on-small-desktop { + margin-bottom: 134px; + } + + @include content-padding-inline; + + @include page-grid; + } + + &__product { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 2 /-2; + } + + @include on-small-desktop { + grid-column: span 4; + } + } + + &__photo { + display: block; + width: 166px; + height: 166px; + border-radius: 10px; + margin-inline: auto; + cursor: $custom-cursor, pointer; + + @include hover(transform, scale(1.2)); + } + + &__product-title { + font-family: Poppins, sans-serif; + font-weight: 600; + font-size: 20px; + line-height: 140%; + letter-spacing: 0; + text-align: center; + margin-top: 32px; + color: $text-100; + + @include on-small-desktop { + margin-top: 40px; + } + } + + &__category { + font-family: 'Open Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 150%; + letter-spacing: 0; + text-align: center; + color: $text-50; + margin-top: 16px; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..20d9adec22 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,21 @@ +.page { + font-family: Poppins, 'Open Sans', sans-serif; + font-size: 16px; + line-height: 150%; + + &__body { + margin: 0; + background-color: $color-bg; + overflow-x: hidden; + scroll-behavior: smooth; + } +} + +h1, +h2, +h3, +h4, +h5, +p { + margin: 0; +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..23fe8c75eb --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,193 @@ +.services { + @include page-grid; + + &__header { + grid-column: 1/-1; + + @include on-tablet { + grid-column: 1/ 4; + } + + @include on-small-desktop { + grid-column: 1/ 5; + margin-top: 103px; + } + } + + &__description { + font-family: Poppins, sans-serif; + font-weight: 700; + font-size: 13px; + line-height: 100%; + letter-spacing: 3px; + text-align: start; + text-transform: uppercase; + color: $text-10; + } + + &__title { + font-family: Poppins, sans-serif; + font-weight: 600; + font-size: 32px; + line-height: 130%; + letter-spacing: 0; + vertical-align: middle; + color: $text-100; + margin-top: 16px; + } + + &__excerpt { + font-family: 'Open Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 150%; + letter-spacing: 0; + color: $text-50; + margin-top: 24px; + } + + &__card { + grid-column: 1/-1; + padding: 32px; + height: 216px; + background-color: $color-white; + border-radius: 16px; + box-shadow: 0 9px 18px 0 #25293108; + cursor: $custom-cursor, pointer; + transition: transform $effectDuration ease; + + @include hover(transform, translateY(-10%)); + + &--001 { + margin-top: 48px; + + @include on-tablet { + margin-top: 56px; + grid-column: 1/ 4; + } + + @include on-small-desktop { + grid-column: 7/ 10; + margin-top: 132px; + } + } + + &--002 { + margin-top: 24px; + + @include on-tablet { + margin-top: -80px; + grid-column: 4/ 7; + position: relative; + } + + @include on-small-desktop { + grid-column: 10/ 13; + margin: 0; + } + } + &--003 { + margin-top: 24px; + + @include on-tablet { + grid-column: 1/ 4; + margin-top: 30px; + } + + @include on-small-desktop { + grid-column: 7/ 10; + margin-top: 20px; + } + + @include on-design { + margin-top: 30px; + } + } + + &--004 { + margin-top: 24px; + + @include on-tablet { + margin-top: -103px; + grid-column: 4/ 7; + } + + @include on-small-desktop { + grid-column: 10/ 13; + margin-top: -113px; + } + + @include on-design { + margin-top: -103px; + } + } + } + + &__badge { + display: inline-flex; + align-items: center; + justify-content: center; + font-family: Poppins, sans-serif; + font-weight: 600; + font-size: 13px; + line-height: 100%; + letter-spacing: 0; + text-align: center; + text-transform: uppercase; + background-color: rgba($color-but-blue, 0.1); + border-radius: 23px; + width: 46px; + height: 24px; + color: $color-but-blue; + } + + &__list { + list-style: none; + padding: 0; + margin-top: 24px; + font-family: 'Open Sans', sans-serif; + font-weight: 600; + font-size: 13px; + line-height: 150%; + letter-spacing: 0; + color: $text-50; + } + + &__learn-more { + display: flex; + text-decoration: none; + align-items: center; + gap: 16px; + margin-top: 32px; + cursor: $custom-cursor, pointer; + transition: transform $effectDuration ease; + + @include hover(transform, scale(1.2)); + } + + &__icon-circle { + display: inline-flex; + align-items: center; + justify-content: center; + background-color: $color-but-blue; + width: 40px; + height: 40px; + border-radius: 50%; + + &:hover { + cursor: $custom-cursor, pointer; + transition: transform $effectDuration ease; + background-color: $color-but-blue-hover; + } + } + + &__text { + font-family: Poppins, sans-serif; + font-weight: 600; + font-size: 15px; + line-height: 100%; + letter-spacing: 0; + text-align: center; + color: $text-200; + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..99846b6966 --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,163 @@ +.testimonials { + @include page-grid; + + &__description { + grid-column: 1 / -1; + font-family: Poppins, sans-serif; + font-weight: 700; + font-size: 13px; + line-height: 100%; + letter-spacing: 3px; + text-align: start; + text-transform: uppercase; + color: $text-10; + + @include on-small-desktop { + grid-row: 1; + } + } + + &__title { + grid-column: 1 / -1; + font-family: Poppins, sans-serif; + font-weight: 600; + font-size: 32px; + line-height: 150%; + letter-spacing: 0; + vertical-align: middle; + color: $text-100; + margin-top: 16px; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-small-desktop { + grid-row: 1; + } + + @include on-design { + grid-column: 1 / 4; + } + } + + &__review-card { + grid-column: 1 / -1; + background-color: $color-white; + border-radius: 16px; + box-shadow: 0 9px 18px 0 #25293108; + margin-top: 48px; + padding: 32px 48px; + cursor: $custom-cursor, pointer; + + @include hover(transform, translateY(-10%)); + + @include on-tablet { + padding: 32px 98px; + margin-top: 56px; + } + + @include on-small-desktop { + grid-column: span 4; + grid-row: 2; + margin-top: 85px; + padding: 32px 48px; + } + + @include on-design { + padding: 32px 56px; + } + + &--02 { + margin-top: 24px; + + @include on-tablet { + margin-top: 30px; + } + + @include on-small-desktop { + margin-top: 85px; + } + } + + &--03 { + margin-top: 24px; + + @include on-tablet { + margin-top: 30px; + } + + @include on-small-desktop { + margin-top: 85px; + } + } + } + + &__avatar-wrap { + display: flex; + justify-content: center; + align-items: center; + } + + &__avatar-img { + background-size: cover; + width: 196px; + height: 196px; + } + + &__quote-icon { + display: block; + line-height: 0; + font-family: Arial, Helvetica, sans-serif; + font-size: 72px; + font-weight: 600; + color: $color-but-blue; + text-align: center; + margin-top: 56px; + } + + &__body { + margin: 0; + padding: 0; + } + + &__text { + font-family: 'Open Sans', sans-serif; + font-weight: 600; + font-size: 13px; + line-height: 150%; + letter-spacing: 0; + text-align: center; + margin-top: 8px; + color: $text-50; + + @include on-tablet { + margin-top: 16px; + } + } + + &__name { + display: block; + font-family: 'Open Sans', sans-serif; + font-weight: 600; + font-size: 13px; + line-height: 150%; + letter-spacing: 0; + text-align: center; + color: $text-100; + margin-top: 16px; + } + + &__company { + display: block; + font-family: Poppins, sans-serif; + font-weight: 700; + font-size: 13px; + line-height: 100%; + letter-spacing: 3px; + text-align: center; + text-transform: uppercase; + margin-top: 4px; + color: $text-10; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..01c7fe0af0 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,67 @@ +.top-bar { + padding-top: 20px; + display: flex; + justify-content: space-between; + align-items: center; + + @include on-small-desktop { + padding-top: 48px; + } + + &__menu { + display: flex; + align-items: center; + gap: 32px; + } + + &__burger-menu { + display: flex; + flex-direction: column; + gap: 4px; + background: none; + border: none; + cursor: $custom-cursor, pointer; + + @include hover(transform, scale(1.2)); + + @include on-small-desktop { + display: none; + } + + &--line { + width: 18px; + height: 2px; + background-color: $color-white; + } + } + + &__cta { + text-decoration: none; + color: $color-white; + cursor: $custom-cursor, pointer; + font-family: Poppins, sans-serif; + font-weight: 700; + font-size: 13px; + letter-spacing: 3px; + text-align: center; + text-transform: uppercase; + + @include hover(transform, scale(1.2)); + + &--btn { + box-sizing: border-box; + display: block; + width: fit-content; + padding: 8px 0; + border-bottom: 2px solid $color-but-blue; + } + } + + &__logo-link { + height: 28px; + width: 46px; + cursor: $custom-cursor, pointer; + + @include hover(transform, scale(1.2)); + } +} diff --git a/src/styles/blocks/who-we-are.scss b/src/styles/blocks/who-we-are.scss new file mode 100644 index 0000000000..055ce89988 --- /dev/null +++ b/src/styles/blocks/who-we-are.scss @@ -0,0 +1,42 @@ +.who-we-are { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + + @include page-grid; + + &__title { + grid-column: 1/-1; + font-family: Poppins, sans-serif; + font-weight: 600; + font-size: 32px; + line-height: 150%; + letter-spacing: 0; + vertical-align: middle; + margin-bottom: 24px; + color: $text-100; + + @include on-tablet { + margin-bottom: 16px; + } + } + + &__description { + grid-column: 1/-1; + font-family: 'Open Sans', sans-serif; + font-weight: 600; + font-size: 22px; + line-height: 150%; + letter-spacing: 0; + color: $text-50; + + @include on-small-desktop { + grid-column: 2/ -2; + } + + @include on-design { + grid-column: 3/ -3; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index fb9195d128..0000000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} diff --git a/src/styles/style.scss b/src/styles/style.scss new file mode 100644 index 0000000000..6a137f76e6 --- /dev/null +++ b/src/styles/style.scss @@ -0,0 +1,18 @@ +@import './utils/variables'; +@import './utils/mixins'; +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/nav'; +@import 'blocks/content'; +@import 'blocks/main'; +@import 'blocks/who-we-are'; +@import 'blocks/our-expertise'; +@import 'blocks/services'; +@import 'blocks/testimonials'; +@import 'blocks/apply'; +@import 'blocks/footer'; +@import 'blocks/message'; +@import 'blocks/contact-us'; +@import 'blocks/navigation'; +@import 'blocks/menu'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3e..0000000000 --- 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 80c79780dc..0000000000 --- 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 aeb006ffbb..0000000000 --- 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 0000000000..788fa7f3b2 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,92 @@ +@mixin on-mobile { + @media (min-width: $mobile) { + @content; + } +} + +@mixin on-tablet { + @media (min-width: $tablet) { + @content; + } +} + +@mixin on-small-desktop { + @media (min-width: $small-desktop) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop) { + @content; + } +} + +@mixin on-design { + @media (min-width: $design) { + @content; + } +} + +@mixin on-large-screens { + @media (min-width: $large-screens) { + @content; + } +} + +@mixin content-padding-inline() { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 40px; + } + + @include on-small-desktop { + padding-inline: 54px; + } + + @include on-desktop { + padding-inline: 227px; + } + + @include on-design { + max-width: 1600px; + margin-inline: auto; + padding-inline: 227px; + } +} + +.container { + @include content-padding-inline; +} + +@mixin page-grid { + --columns: 2; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 6; + + column-gap: 30px; + } + + @include on-small-desktop { + --columns: 12; + + column-gap: 20px; + } + + @include on-desktop { + column-gap: 30px; + } +} + +@mixin hover($property, $toValue) { + transition: #{$property} $effectDuration; + &:hover { + #{$property}: $toValue; + } +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..8ec3a0274f --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,26 @@ +$color-bg-black: #2c2c2c; +$color-bg-blue: #008aff; +$color-bg: #f2f6fa; +$color-but-blue: #2060f6; +$color-but-blue-hover: #144ed4; +$color-but-pink: #ff9c8e; +$color-white: #fff; +$color-yellow: #fcc91d; +$color-light-blue: #56ccf2; +$color-green: #15d850; +$color-pink: #f36363; +$color-pink-say: #f25656; +$color-yellow-say: #fcc304; +$color-violet: #bc04fc; +$large-screens: 2560px; +$design: 1600px; +$desktop: 1280px; +$small-desktop: 1024px; +$tablet: 640px; +$mobile: 320px; +$custom-cursor: url(../images/air-black/cursor-mouse-mice.svg); +$effectDuration: 0.3s; +$text-200: #334563; +$text-100: #253757; +$text-50: #6c788b; +$text-10: #c0cdd7;