diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d7310..0000000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/background/dia-header-image.png b/src/images/background/dia-header-image.png new file mode 100644 index 0000000000..d0f1c33524 Binary files /dev/null and b/src/images/background/dia-header-image.png differ diff --git a/src/images/expertise/expertise-branding.png b/src/images/expertise/expertise-branding.png new file mode 100644 index 0000000000..854143e69d Binary files /dev/null and b/src/images/expertise/expertise-branding.png differ diff --git a/src/images/expertise/expertise-communication.png b/src/images/expertise/expertise-communication.png new file mode 100644 index 0000000000..600e86345e Binary files /dev/null and b/src/images/expertise/expertise-communication.png differ diff --git a/src/images/expertise/expertise-strategy.png b/src/images/expertise/expertise-strategy.png new file mode 100644 index 0000000000..ba98148a0a Binary files /dev/null and b/src/images/expertise/expertise-strategy.png differ diff --git a/src/images/features/features-bg.jpg b/src/images/features/features-bg.jpg deleted file mode 100644 index 36b7a748d3..0000000000 Binary files a/src/images/features/features-bg.jpg and /dev/null differ diff --git a/src/images/features/features-item-icon-1.svg b/src/images/features/features-item-icon-1.svg deleted file mode 100644 index 2eb2ee14c3..0000000000 --- a/src/images/features/features-item-icon-1.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/images/features/features-item-icon-2.svg b/src/images/features/features-item-icon-2.svg deleted file mode 100644 index 194e788e11..0000000000 --- a/src/images/features/features-item-icon-2.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/images/features/features-item-icon-3.svg b/src/images/features/features-item-icon-3.svg deleted file mode 100644 index b278d8d16f..0000000000 --- a/src/images/features/features-item-icon-3.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/images/icons/dia-icon-close.png b/src/images/icons/dia-icon-close.png new file mode 100644 index 0000000000..02a79a2a04 Binary files /dev/null and b/src/images/icons/dia-icon-close.png differ diff --git a/src/images/icons/dia-menu.png b/src/images/icons/dia-menu.png new file mode 100644 index 0000000000..3d11b4182c Binary files /dev/null and b/src/images/icons/dia-menu.png differ diff --git a/src/images/logo/logo-air.png b/src/images/logo/logo-air.png new file mode 100644 index 0000000000..48eeb98c6c Binary files /dev/null and b/src/images/logo/logo-air.png differ diff --git a/src/images/slider/arrow-left.svg b/src/images/slider/arrow-left.svg deleted file mode 100644 index 66daed19a5..0000000000 --- a/src/images/slider/arrow-left.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/slider/arrow-right.svg b/src/images/slider/arrow-right.svg deleted file mode 100644 index e9ddf85873..0000000000 --- a/src/images/slider/arrow-right.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/slider/slide-img-1.jpg b/src/images/slider/slide-img-1.jpg deleted file mode 100644 index 98c4188508..0000000000 Binary files a/src/images/slider/slide-img-1.jpg and /dev/null differ diff --git a/src/images/socials-icons/facebook.svg b/src/images/socials-icons/facebook.svg new file mode 100644 index 0000000000..b6bc5a936d --- /dev/null +++ b/src/images/socials-icons/facebook.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/socials-icons/instagram.svg b/src/images/socials-icons/instagram.svg new file mode 100644 index 0000000000..76a83d304d --- /dev/null +++ b/src/images/socials-icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/socials-icons/twitter.svg b/src/images/socials-icons/twitter.svg new file mode 100644 index 0000000000..74cbdbf5d4 --- /dev/null +++ b/src/images/socials-icons/twitter.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/sub-title/sub-title-icon-dark.svg b/src/images/sub-title/sub-title-icon-dark.svg deleted file mode 100644 index 9fcdfa10cd..0000000000 --- a/src/images/sub-title/sub-title-icon-dark.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/images/sub-title/sub-title-icon-light.svg b/src/images/sub-title/sub-title-icon-light.svg deleted file mode 100644 index 5ec041c15e..0000000000 --- a/src/images/sub-title/sub-title-icon-light.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/images/testimonials/quotation-marks.svg b/src/images/testimonials/quotation-marks.svg new file mode 100644 index 0000000000..b1a5abb623 --- /dev/null +++ b/src/images/testimonials/quotation-marks.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/what-we-do/what-we-do-1.jpg b/src/images/what-we-do/what-we-do-1.jpg deleted file mode 100644 index 9481d8eeb2..0000000000 Binary files a/src/images/what-we-do/what-we-do-1.jpg and /dev/null differ diff --git a/src/images/what-we-do/what-we-do-2.jpg b/src/images/what-we-do/what-we-do-2.jpg deleted file mode 100644 index 724e65566f..0000000000 Binary files a/src/images/what-we-do/what-we-do-2.jpg and /dev/null differ diff --git a/src/images/what-we-do/what-we-do-3.jpg b/src/images/what-we-do/what-we-do-3.jpg deleted file mode 100644 index 7a69cc03f1..0000000000 Binary files a/src/images/what-we-do/what-we-do-3.jpg and /dev/null differ 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/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 0000000000..2dffd9c7d5 --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,30 @@ +.about { + background-color: $background-color-light-blue; + + &__wrapper { + max-width: 716px; + margin-inline: auto; + } + + &__title { + margin-bottom: 24px; + + font-size: 32px; + font-weight: $font-half-bold; + line-height: 150%; + color: $c-title; + text-align: center; + + @include on-tablet { + margin-bottom: 16px; + } + } + + &__text { + font-family: 'Open Sans', sans-serif; + font-size: 24px; + font-weight: $font-half-bold; + color: $c-text; + text-align: center; + } +} diff --git a/src/styles/blocks/apply.scss b/src/styles/blocks/apply.scss new file mode 100644 index 0000000000..223aba2c81 --- /dev/null +++ b/src/styles/blocks/apply.scss @@ -0,0 +1,51 @@ +.apply { + padding-block: 72px; + + background-color: $c-white; + + @include on-tablet { + padding-block: 200px; + } + + background-image: url(../images/Shapes.png); + background-position: top; + background-size: bottom; + + &__wrapper { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + @include on-small-desk { + max-width: 754px; + margin-inline: auto; + } + } + + &__title { + text-align: center; + } + + &__text-motivation { + margin-bottom: 56px; + + font-family: 'Open Sans', sans-serif; + font-size: 22px; + font-weight: $font-half-bold; + line-height: 150%; + color: $c-text; + text-align: center; + + @include on-tablet { + margin-bottom: 64px; + } + } + + &__button { + @include button-style; + + width: 280px; + font-weight: $font-half-bold; + } +} diff --git a/src/styles/blocks/caption.scss b/src/styles/blocks/caption.scss new file mode 100644 index 0000000000..65399256e1 --- /dev/null +++ b/src/styles/blocks/caption.scss @@ -0,0 +1,55 @@ +.caption { + display: flex; + flex-direction: column; + gap: 16px; + + &__sliders { + display: flex; + gap: 16px; + } + + &__info { + display: flex; + flex-direction: column; + gap: 8px; + } + + &__label { + font-size: 13px; + font-weight: $font-bold; + text-transform: uppercase; + letter-spacing: 3px; + } + + &__text { + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: normal; + line-height: 140%; + } + + &__slider { + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + width: 32px; + height: 32px; + border: none; + border-radius: 50%; + + font-size: 12px; + font-weight: $font-bold; + color: #253757; + + background-color: $c-white; + + transition: text-shadow $effectDuration; + + &:hover { + text-shadow: 0 2px 5px #253757; + } + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 0000000000..e18f785d02 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,9 @@ +.container { + max-width: 1024px; + margin-inline: auto; + padding-inline: 20px; + + @include on-tablet { + padding-inline: 40px; + } +} diff --git a/src/styles/blocks/expertise.scss b/src/styles/blocks/expertise.scss new file mode 100644 index 0000000000..07430f65e1 --- /dev/null +++ b/src/styles/blocks/expertise.scss @@ -0,0 +1,86 @@ +.expertise { + padding-block: 72px; + border-radius: 30px; + background-color: $c-white; + + @include on-tablet { + padding-block: 128px; + } + + &__title { + margin-bottom: 56px; + + font-size: 44px; + font-weight: $font-half-bold; + color: $c-title; + text-align: center; + + @include on-tablet { + margin-bottom: 64px; + } + } + + &__wrapper { + display: flex; + flex-direction: column; + gap: 56px; + align-items: center; + + @include on-small-desk { + flex-direction: row; + gap: 137px; + } + } + + &__article { + display: flex; + flex-direction: column; + align-items: center; + } + + &__article-name { + font-size: 20px; + font-weight: $font-half-bold; + line-height: 140%; + color: $c-title; + } + + &__article-text { + max-width: 362px; + + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: $font-normal; + line-height: 150%; + color: $c-text; + text-align: center; + } + + &__img-link { + display: block; + width: 166px; + height: 166px; + margin-bottom: 32px; + + @include on-small-desk { + margin-bottom: 40px; + } + } + + &__img { + display: block; + + width: 100%; + height: 100%; + + object-fit: cover; + object-position: center; + } + + &__text-content { + display: flex; + flex-direction: column; + gap: 16px; + align-items: center; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..9bab92b664 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,203 @@ +.footer { + --column-count: 2; + + min-height: 100vh; + padding-block: 72px 80px; + background-color: $background-color-dark; + + @include on-tablet { + --column-count: 6; + + padding-top: 180px; + } + + @include on-small-desk { + --column-count: 12; + } + + &__wrapper-grid { + display: grid; + grid-template-columns: repeat(var(--column-count), 1fr); + gap: 80px 24px; + + @include on-tablet { + row-gap: 120px; + } + } + + &__send-message { + grid-column: 1 / -1; + grid-row: 1 / 2; + + @include on-tablet { + grid-column: span 4; + } + + @include on-small-desk { + grid-column: 1 / 6; + } + } + + &__contact { + grid-column: 1 / -1; + grid-row: 2 / 3; + + @include on-tablet { + grid-column: span 4; + } + + @include on-small-desk { + grid-column: 7 / -1; + grid-row: 1 / 2; + } + + @include on-desk { + grid-column: 8 / -1; + } + } + + &__nav { + display: flex; + grid-column: 1 / -1; + grid-row: 3 / 4; + flex-direction: column; + gap: 48px; + + @include on-tablet { + gap: 24px; + } + + @include on-small-desk { + flex-direction: row; + justify-content: space-between; + } + } + + &__form { + display: flex; + flex-direction: column; + gap: 48px; + } + + &__title { + margin-bottom: 48px; + + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: $font-half-bold; + color: $c-white; + vertical-align: middle; + + @include on-tablet { + margin-bottom: 56px; + } + } + + &__label { + @include visually-hidden; + } + + &__form-input { + box-sizing: border-box; + width: 100%; + height: 40px; + padding-left: 15px; + border: 1px solid transparent; + border-bottom: 1px solid #fff; + + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: $font-half-bold; + color: $c-white; + + background-color: $background-color-dark; + + &:focus { + border-bottom: 1px solid $c-blue; + outline: none; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus, + &:-webkit-autofill:active { + font-family: Poppins, sans-serif; + font-size: 15px; + + -webkit-box-shadow: 0 0 0 1000px $background-color-dark inset; + box-shadow: 0 0 0 1000px $background-color-dark inset; + + transition: background-color 9999s ease-in-out 0s; + + -webkit-text-fill-color: $c-white; + } + } + + &__form-button { + @include button-style; + } + + &__category-name { + display: block; + + margin-bottom: 8px; + + font-size: 13px; + font-weight: $font-bold; + text-transform: uppercase; + letter-spacing: 3px; + + opacity: 50%; + } + + &__categories { + display: flex; + flex-direction: column; + gap: 40px; + } + + &__category-link { + font-family: 'Open Sans', sans-serif; + font-weight: $font-half-bold; + line-height: 150%; + color: $c-white; + text-decoration: none; + + @include link-underline-style; + } + + &__socials { + display: flex; + flex-direction: row; + gap: 32px; + } + + &__socials-link { + display: block; + width: 32px; + height: 32px; + + @include link-underline-style; + + &:active { + filter: invert(43%) sepia(89%) saturate(6782%) hue-rotate(221deg) + brightness(101%) contrast(93%); + } + } + + &__socials-img { + width: 100%; + height: 100%; + } + + &__logo-link { + display: block; + width: 46px; + height: 28px; + } + + &__logo-img { + width: 100%; + height: 100%; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..b2fab3999e --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,132 @@ +.header { + position: relative; + + overflow: hidden; + + box-sizing: border-box; + min-height: 100vh; + + background-color: $background-color-dark; + + @include header-padding-y; + + &__hero { + display: flex; + flex-direction: column; + justify-content: space-between; + margin-top: 48px; + + @include on-tablet { + gap: 147px; + margin-top: 56px; + } + + @include on-small-desk { + flex-direction: row; + margin-top: 164px; + } + } + + &__left { + display: flex; + flex-direction: column; + gap: 72px; + + @include on-small-desk { + flex: 1; + } + } + + &__info { + display: flex; + flex-direction: column; + gap: 32px; + + @include on-tablet { + gap: 24px; + } + + @include on-small-desk { + gap: 32px; + } + } + + &__title { + padding: 0; + + font-size: 52px; + font-weight: $font-bold; + line-height: 120%; + letter-spacing: -2px; + + @include on-tablet { + font-size: 64px; + line-height: 68px; + } + } + + &__slogan { + font-family: 'Open Sans', sans-serif; + font-size: 18px; + } + + &__button { + @include button-style; + } + + &__right { + @include on-small-desk { + flex: 1; + } + } + + &__img-wrapper { + position: absolute; + right: 0; + bottom: 0; + left: 0; + + overflow: hidden; + flex-shrink: 0; + + height: 30%; + border-radius: 30px; + + @include on-small-desk { + bottom: 0; + left: 50%; + height: 80%; + margin-inline-start: 0; + } + } + + &__img { + display: block; + + width: 100%; + height: 100%; + + object-fit: cover; + object-position: center; + } + + &__caption { + position: absolute; + bottom: 24px; + left: 20px; + + @include on-tablet { + bottom: 32px; + left: 41px; + } + + @include on-small-desk { + bottom: 48px; + left: 78px; + } + + @include on-design { + left: 48px; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..9cda651220 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,29 @@ +.menu { + overflow: auto; + + box-sizing: border-box; + width: 100vw; + min-width: 320px; + height: 100vh; + padding-top: 50px; + + font-weight: $font-bold; + + background-color: #1e293b; + + &__content { + position: sticky; /* to keep cross always visible */ + z-index: 1; + top: 0; + + display: flex; + align-items: flex-start; + justify-content: space-between; + } + + &__icon-close { + background-image: url(../images/icons/dia-icon-close.png); + + @include icons-style; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..30fb18f5d2 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,54 @@ +.nav { + &__list { + @include list-style; + + &--big-screen { + display: none; + + @include on-small-desk { + display: flex; + flex-direction: row; + gap: 48px; + align-items: center; + justify-content: center; + } + } + + &--footer { + display: flex; + flex-direction: column; + gap: 24px; + + @include on-tablet { + flex-direction: row; + gap: 40px; + } + + @include on-small-desk { + gap: 64px; + } + } + + &--menu { + display: flex; + flex-direction: column; + gap: 48px; + align-items: flex-start; + justify-content: center; + } + } + + &__link { + padding-block: 5px; + + font-size: 13px; + font-weight: $font-bold; + line-height: 150%; + color: $c-white; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 3px; + + @include link-underline-style; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..ed8461720a --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,47 @@ +p, +h1, +h2, +h3, +h4 { + margin: 0; +} + +.page { + scroll-behavior: smooth; + &:has(.page__menu:target) { + overflow: hidden; /* not to scroll the page */ + } + + &__body { + overflow-x: hidden; + + min-width: 320px; + min-height: 100vh; + margin: 0; + + font-family: Poppins, sans-serif; + color: $c-white; + + background-color: #f2f6fa; + } + + &__menu { + pointer-events: none; + + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translateY(-100%); + + opacity: 0; + + transition: all $effectDuration; + + &:target { + pointer-events: all; + transform: translateY(0); + opacity: 1; + } + } +} diff --git a/src/styles/blocks/section.scss b/src/styles/blocks/section.scss new file mode 100644 index 0000000000..c0a0efce08 --- /dev/null +++ b/src/styles/blocks/section.scss @@ -0,0 +1,16 @@ +.section { + padding-block: 120px; + + @include on-small-desk { + padding-block: 148px; + } + + &__title { + margin-bottom: 24px; + + font-size: 32px; + font-weight: $font-half-bold; + line-height: 130%; + color: $c-title; + } +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..1b4732987f --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,150 @@ +.services { + @include on-tablet { + padding-block: 0 120px; + } + + @include on-small-desk { + padding-block: 148px; + } + + &__wrapper-grid { + display: grid; + grid-template-columns: 1fr; + gap: 48px; + + @include on-tablet { + grid-template-columns: 1fr 1fr; + } + } + + &__text-content { + @include on-tablet { + transform: translateY(50%); + grid-column: 1 / 2; + } + + @include on-small-desk { + transform: translateY(0); + } + } + + &__categories { + display: grid; + grid-template-columns: 1fr; + gap: 24px; + + @include on-tablet { + grid-column: 1 / -1; + grid-template-columns: 1fr 1fr; + gap: 30px; + } + + @include on-small-desk { + grid-column: 2 / -1; + } + } + + &__category { + padding: 32px; + background-color: $c-white; + + @include blocks-styling-shadow; + + @include on-tablet { + &:nth-child(1) { + transform: translateY(50%); + } + + &:nth-child(3) { + transform: translateY(50%); + } + } + } + + &__name { + @include section-name-gray; + } + + &__title { + margin-bottom: 24px; + + font-size: 32px; + font-weight: $font-half-bold; + line-height: 130%; + color: $c-title; + } + + &__text { + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: $font-normal; + line-height: 150%; + color: $c-text; + + @include on-tablet { + margin-bottom: 56px; + } + } + + &__category-num { + width: fit-content; + margin-bottom: 24px; + padding: 2px 12px; + border-radius: 23px; + + font-size: 13px; + font-weight: $font-half-bold; + color: $c-blue; + + background-color: rgba($color: $c-blue, $alpha: 0.1); + } + + &__categories-list { + @include list-style; + + margin-bottom: 32px; + } + + &__category-link { + font-family: 'Open Sans', sans-serif; + font-size: 13px; + font-weight: $font-half-bold; + color: $c-text; + text-decoration: none; + } + + &__go-further-wrapper { + display: flex; + flex-direction: row; + gap: 16px; + align-items: center; + } + + &__go-further-button { + display: flex; + align-items: center; + justify-content: center; + + width: 24px; + height: 24px; + padding: 8px; + border-radius: 50%; + + color: $c-white; + text-decoration: none; + + background-color: $c-blue; + + transition: transform $effectDuration; + + &:hover { + transform: scale(1.1); + } + } + + &__go-further-text { + font-weight: $font-half-bold; + color: #334563; + text-decoration: none; + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..97878d9ffe --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,163 @@ +.testimonials { + padding-top: 50px; + + @include on-tablet { + padding-top: 120px; + } + &__name { + display: block; + + @include section-name-gray; + } + + &__title { + margin-bottom: 32px; + + @include on-tablet { + margin-bottom: 56px; + } + + @include on-small-desk { + margin-bottom: 85px; + } + } + + &__blocks { + display: flex; + flex-direction: column; + gap: 24px; + + @include on-tablet { + gap: 30px; + } + + @include on-small-desk { + flex-direction: row; + } + } + + &__block { + padding: 32px 42px; + background-color: $c-white; + + @include blocks-styling-shadow; + + @include on-tablet { + padding-block: 45px; + } + } + + &__imgs-wrapper { + position: relative; + max-width: 150px; + margin-inline: auto; + padding-block: 32px; + + @include on-tablet { + max-width: 190px; + } + } + + &__background-blocks-container { + transform: rotate(45deg); + display: flex; + flex-direction: row; + justify-content: space-between; + } + + &__background-block { + width: 45px; + height: 110px; + border-radius: 12px; + background-color: $c-blue; + + @include on-tablet { + width: 56px; + height: 140px; + } + } + + &__reviewer-img { + position: absolute; + bottom: 50%; + left: 50%; + transform: translate(-50%, 50%); + + display: block; + + width: 110px; + height: 110px; + border-radius: 50%; + + object-fit: cover; + object-position: top; + + @include on-tablet { + width: 140px; + height: 140px; + } + } + + &__symbols { + display: block; + + width: 24px; + height: 24px; + margin: 0 auto 8px; + + background-image: url(../images/testimonials/quotation-marks.svg); + background-position: center; + background-size: cover; + + @include on-tablet { + margin-bottom: 16px; + } + } + + &__reviewer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + margin-top: 40px; + + @include on-tablet { + margin-top: 70px; + } + } + + &__activity-block { + margin-bottom: 16px; + } + + &__descr { + max-width: 362px; + + font-family: 'Open Sans', sans-serif; + font-size: 13px; + font-weight: $font-half-bold; + line-height: 150%; + color: $c-text; + text-align: center; + } + + &__reviewer-info { + display: flex; + flex-direction: column; + gap: 10px; + align-items: center; + justify-content: center; + } + + &__reviewer-name { + font-family: 'Open Sans', sans-serif; + font-size: 13px; + font-weight: $font-half-bold; + color: $c-title; + } + + &__reviewer-occupation { + @include section-name-gray; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..22bdf78fef --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,60 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + + &__start { + display: flex; + flex-direction: row; + gap: 32px; + align-items: center; + } + + &__logo-img { + display: block; + width: 46px; + height: 28px; + } + + &__burger-button { + background-image: url(../images/icons/dia-menu.png); + + @include icons-style; + + @include on-small-desk { + display: none; + } + } + + &__action { + position: relative; + + font-size: 13px; + font-weight: $font-bold; + line-height: 150%; + color: $c-white; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 3px; + + &::after { + content: ''; + + position: absolute; + bottom: -8px; + + display: block; + + width: 100%; + height: 1px; + + background-color: $c-blue; + + transition: background-color 0.3s; + } + + &:hover::after { + background-color: $c-white; + } + } +} 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..3200b3b20c --- /dev/null +++ b/src/styles/style.scss @@ -0,0 +1,16 @@ +@import 'utils/vars'; +@import 'utils/mixins'; +@import 'blocks/page'; +@import 'blocks/top-bar'; +@import 'blocks/header'; +@import 'blocks/nav'; +@import 'blocks/container'; +@import 'blocks/menu'; +@import 'blocks/caption'; +@import 'blocks/about'; +@import 'blocks/section'; +@import 'blocks/expertise'; +@import 'blocks/services'; +@import 'blocks/testimonials'; +@import 'blocks/apply'; +@import 'blocks/footer'; 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..0f2d12d9fe --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,155 @@ +@mixin hover($_property, $_toValue) { + transition: #{$_property} 0.3s; + &:hover { + #{$_property}: $_toValue; + } +} + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-small-desk { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-desk { + @media (min-width: 1280px) { + @content; + } +} + +@mixin on-design { + @media (min-width: 1600px) { + @content; + } +} + +@mixin on-large-screen { + @media (min-width: 2560px) { + @content; + } +} + +@mixin header-padding-y { + padding-top: 20px; + + @include on-small-desk { + padding-top: 52px; + } +} + +@mixin icons-style { + display: block; + + width: 24px; + height: 24px; + + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} + +@mixin button-style { + cursor: pointer; + + display: block; + + box-sizing: border-box; + width: 280px; + height: 50px; + border: 1px solid transparent; + border-radius: 8px; + + font-size: 15px; + line-height: 48px; + color: $c-white; + text-align: center; + text-decoration: none; + letter-spacing: 0; + + background-color: $c-blue; + + transition: + background-color $effectDuration, + color $effectDuration, + border $effectDuration; + + @include on-tablet { + width: 264px; + } + + &:hover { + border: 1px solid $c-blue; + color: $c-blue; + background-color: $c-white; + } +} + +@mixin list-style { + margin: 0; + padding: 0; + list-style: none; +} + +@mixin section-name-gray { + margin-bottom: 16px; + + font-size: 13px; + font-weight: $font-bold; + line-height: 100%; + color: #c0cdd7; + text-transform: uppercase; + letter-spacing: 3px; +} + +@mixin blocks-styling-shadow { + border-radius: 16px; + box-shadow: 0 9px 18px 0 #25293108; +} + +@mixin visually-hidden { + position: absolute; + + overflow: hidden; + + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + border: 0; + + white-space: nowrap; + + clip: rect(0 0 0 0); + clip-path: inset(100%); +} + +@mixin link-underline-style { + position: relative; + + &::after { + content: ''; + + position: absolute; + bottom: -8px; + transform: scale(0); + + display: block; + + width: 100%; + height: 1px; + + background-color: $c-white; + + transition: transform $effectDuration; + } + + &:hover::after { + transform: scale(1); + } +} diff --git a/src/styles/utils/vars.scss b/src/styles/utils/vars.scss new file mode 100644 index 0000000000..7c8740375e --- /dev/null +++ b/src/styles/utils/vars.scss @@ -0,0 +1,14 @@ +$c-gray: #eee; +$c-white: #fff; +$c-blue: #2060f6; +$c-title: #253757; +$c-text: #6c788b; +$background-color-dark: #2c2c2c; +$background-color-light-blue: #f2f6fa; +$min-screen-width: 320px; +$tablet-min-width: 640px; +$desktop-min-width: 1024px; +$font-bold: 700; +$font-half-bold: 600; +$font-normal: 400; +$effectDuration: 0.3s;