diff --git a/README.md b/README.md index 93d9738cc4..f677634021 100644 --- a/README.md +++ b/README.md @@ -65,7 +65,7 @@ Adapt the page to the following screens: 11. `git push origin develop` - to send you code for PR. 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/layout_dia/). + [DEMO LINK](https://VasylPylypchynets.github.io/layout_dia/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/src/images/logo/Air-favicon.png b/src/images/logo/Air-favicon.png new file mode 100644 index 0000000000..aa3d9810a1 Binary files /dev/null and b/src/images/logo/Air-favicon.png differ diff --git a/src/images/logo/Air-log.png b/src/images/logo/Air-log.png new file mode 100644 index 0000000000..db25e66b9e Binary files /dev/null and b/src/images/logo/Air-log.png differ diff --git a/src/images/menu/icon-close.png b/src/images/menu/icon-close.png new file mode 100644 index 0000000000..125771febf Binary files /dev/null and b/src/images/menu/icon-close.png differ diff --git a/src/images/menu/nav__switcher.png b/src/images/menu/nav__switcher.png new file mode 100644 index 0000000000..13432252ed Binary files /dev/null and b/src/images/menu/nav__switcher.png differ diff --git a/src/images/our-expertise/branding.png b/src/images/our-expertise/branding.png new file mode 100644 index 0000000000..ab9d68fb27 Binary files /dev/null and b/src/images/our-expertise/branding.png differ diff --git a/src/images/our-expertise/communication.png b/src/images/our-expertise/communication.png new file mode 100644 index 0000000000..2205726f1c Binary files /dev/null and b/src/images/our-expertise/communication.png differ diff --git a/src/images/our-expertise/strategy.png b/src/images/our-expertise/strategy.png new file mode 100644 index 0000000000..2fb903e377 Binary files /dev/null and b/src/images/our-expertise/strategy.png differ diff --git a/src/images/service/arrow.svg b/src/images/service/arrow.svg new file mode 100644 index 0000000000..c535a27bf9 --- /dev/null +++ b/src/images/service/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/slider/arrow-left.svg b/src/images/slider/arrow-left.svg index 66daed19a5..2055a17bbc 100644 --- a/src/images/slider/arrow-left.svg +++ b/src/images/slider/arrow-left.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/images/slider/arrow-right.svg b/src/images/slider/arrow-right.svg index e9ddf85873..71e16adb61 100644 --- a/src/images/slider/arrow-right.svg +++ b/src/images/slider/arrow-right.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/images/slider/slider-photo.png b/src/images/slider/slider-photo.png new file mode 100644 index 0000000000..7fc390324c Binary files /dev/null and b/src/images/slider/slider-photo.png differ diff --git a/src/images/socials/Layer 2.png b/src/images/socials/Layer 2.png new file mode 100644 index 0000000000..d455beb9fd Binary files /dev/null and b/src/images/socials/Layer 2.png differ diff --git a/src/images/socials/facebook.svg b/src/images/socials/facebook.svg new file mode 100644 index 0000000000..edd7a48714 --- /dev/null +++ b/src/images/socials/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/socials/instagram.svg b/src/images/socials/instagram.svg new file mode 100644 index 0000000000..76a83d304d --- /dev/null +++ b/src/images/socials/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/socials/twitter.svg b/src/images/socials/twitter.svg new file mode 100644 index 0000000000..74cbdbf5d4 --- /dev/null +++ b/src/images/socials/twitter.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/testimonials/azadeh-hawkins.png b/src/images/testimonials/azadeh-hawkins.png new file mode 100644 index 0000000000..944c4f106f Binary files /dev/null and b/src/images/testimonials/azadeh-hawkins.png differ diff --git a/src/images/testimonials/michel-grover.png b/src/images/testimonials/michel-grover.png new file mode 100644 index 0000000000..0e9836e32c Binary files /dev/null and b/src/images/testimonials/michel-grover.png differ diff --git a/src/images/testimonials/quote.png b/src/images/testimonials/quote.png new file mode 100644 index 0000000000..abc3bb7b7c Binary files /dev/null and b/src/images/testimonials/quote.png differ diff --git a/src/images/testimonials/tal_gilad.png b/src/images/testimonials/tal_gilad.png new file mode 100644 index 0000000000..7d1a147a6d Binary files /dev/null and b/src/images/testimonials/tal_gilad.png differ diff --git a/src/index.html b/src/index.html index 9a8c6db8f9..349c11be26 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,733 @@ - + - Dia + Air + + -

Dia

+
+
+ + + + nav switcher + + + + + + Hire us + +
+ +
+
+

Strategic Agency

+ +

+ We believe in the power of bold ideas that can solve business + challenges. +

+ + + + +
+
+ +
+ slider-photo + +
+
+ + + +
+ +
+

intro

+ +

+ By the same illusion which lifts the +
+ horizon. +

+
+
+
+
+ + + +
+
+
+

Who we are

+ +

+ We embrace a strategic approach to creative ideas. We are interested + in people and human relationships. This is the main thing you need + to know about us. We believe in the power of bold ideas that can + solve business challenges. +

+
+
+ +
+
+

Our expertise

+ +
+
+ branding-photo + +

Branding

+ +

+ We create additional value for companies, products, services as + well as verbal and visual ways to deliver it to the audience. +

+
+ +
+ communication-photo + +

Communication

+ +

+ We strive to create communications that can increase media + performance. We use everything — words, meanings, stories, art, + movies. +

+
+ +
+ strategy-photo + +

Strategy

+ +

+ We create business growth strategies, from the moment of its + birth to the achievement of the necessary business indicators. +

+
+
+
+
+ +
+
+
+

Services

+

+ Air is a full service creative agency +

+

+ Deep analytics, strong strategy and bright creative ideas. +

+

+ We are sure that first-rate job is possible only if all three + components are united. +

+
+ +
+
001
+
+ Brand Development Copywriting Logo & Webite Design Packaging +
+
+ + + + Learn more + +
+
+ +
+
002
+
+ Сontent Production Graphic Design Video Production Post Production +
+
+ + + + Learn more + +
+
+ +
+
003
+
+ Marketing Strategy Email Marketing Paid Advertising Blog Content & + SEO +
+
+ + + + Learn more + +
+
+ +
+
004
+
+ Digital Communications Influencer Marketing Product Placements + Strategic Partnerships +
+
+ + + + Learn more + +
+
+
+
+ +
+
+

Testimonials

+

What people say

+
+ +
+
+
+ teach-for-america +
+ +
+ single-quotes + +

+ AIR’s ideas are refreshing and out of the box. Authentic team + that focuses on the important path of the brand. +

+
+ +
+

Tal Gilad

+ +

Teach for America

+
+
+ +
+
+ Hawkins Consulting +
+ +
+ single-quotes + +

+ AIR is an exceptional agency that leads with creative talent, + first-class account servicing. +

+
+ +
+

Azadeh Hawkins

+ +

+ Hawkins Consulting +

+
+
+ +
+
+ Hulu +
+ +
+ single-quotes + +

+ AIR raises the agency bar to stratospheric heights on both + creative output and client service. +

+
+ +
+

Michel Grover

+ +

Hulu

+
+
+
+
+ +
+
+

Vision, Passion, Results

+ +

+ We are sure that first-rate job is possible only if all three + components are united. +

+ + + + +
+
+
+ + diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 0000000000..c9b438595c --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,33 @@ +.about-us { + @include content-inline; + + &__content { + display: flex; + flex-direction: column; + row-gap: 16px; + margin-block: 120px; + + @include on-tablet { + margin-block: 148px; + } + + &-title { + margin: 0; + font-size: 32px; + font-weight: 600; + line-height: 48px; + text-align: center; + color: #253757; + } + + &-text { + margin: 0; + font-family: 'Open Sans', Arial, Helvetica, sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 33px; + text-align: center; + color: #6c788b; + } + } +} diff --git a/src/styles/blocks/apply.scss b/src/styles/blocks/apply.scss new file mode 100644 index 0000000000..71dcdeebd7 --- /dev/null +++ b/src/styles/blocks/apply.scss @@ -0,0 +1,58 @@ +.apply { + background-color: $white-color; + padding-block: 72px; + + @include on-tablet { + padding-block: 200px; + background-image: url('../images/Shapes.png'); + background-position: 50% 40%; + background-repeat: no-repeat; + } + + &__content { + @include content-inline; + + display: flex; + flex-direction: column; + row-gap: 24px; + align-items: center; + + &-title { + margin: 0; + font-size: 44px; + font-weight: 600; + line-height: 52.8px; + text-align: center; + color: rgba(37, 55, 87, 1); + + @include on-tablet { + font-size: 52px; + line-height: 78px; + } + } + + &-text { + margin: 0; + margin-bottom: 24px; + font-family: 'Open Sans', Arial, sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 33px; + text-align: center; + color: $grayish-color; + + @include on-tablet { + font-size: 24px; + line-height: 36px; + } + } + + &-button { + width: 100%; + + @include on-tablet { + width: 264px; + } + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..dd6c7ae2ba --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,257 @@ +.footer { + background-color: rgba(44, 44, 44, 1); + border-radius: 30px 30px 0 0; + padding-top: 72px; + + @include on-tablet { + padding-top: 180px + } + + &__contact-us { + @include content-inline; + + display: flex; + flex-direction: column; + row-gap: 80px; + + @include on-tablet { + row-gap: 120px; + } + + @include on-small-desktop { + flex-direction: row; + justify-content: space-between; + } + + &-input { + border: none; + border-bottom: 1 solid $white-color; + padding: 0 0 16px; + background-color: rgba(44, 44, 44, 1); + outline: none; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: left; + color: $white-color; + + &::placeholder { + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: left; + color: #969696; + } + + &:hover { + border-color: rgba(134, 145, 171, 0.7); + } + + &:focus { + border-color: rgba(20, 78, 212, 1); + } + + &:autofill:focus, + &:-webkit-autofill:focus { + border-color: rgb(3, 236, 85); + color: $white-color; + } + } + + &-title { + font-size: 32px; + font-weight: 600; + line-height: 41.6px; + color: $white-color; + } + + &-send { + display: flex; + flex-direction: column; + row-gap: 48px; + + @include on-tablet { + row-gap: 56px; + } + } + + &-form { + display: flex; + flex-direction: column; + row-gap: 40px; + + @include on-tablet { + row-gap: 48px; + } + } + + &-content { + flex-direction: column; + row-gap: 40px; + + @include on-tablet { + row-gap: 48px; + } + } + + &-contact { + display: flex; + flex-direction: column; + row-gap: 48px; + + @include on-tablet { + row-gap: 56px; + } + + &-title { + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: left; + text-transform: uppercase; + color: #969696; + } + + &-phone { + font-family: 'Open Sans', Arial, sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 36px; + text-align: left; + color: $white-color; + text-decoration: none; + + &:hover { + color: #acabab; + } + } + + &-address { + font-family: 'Open Sans', Arial, sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 36px; + text-align: left; + color: $white-color; + text-decoration: none; + + &:hover { + color: #acabab; + } + } + } + + &-our-socials { + display: flex; + flex-direction: column; + row-gap: 16px; + + &-icons { + display: flex; + column-gap: 32px; + } + + &-icon { + width: 32px; + height: 32px; + + &-facebook { + transition-duration: 0.3s; + &:hover { + fill: $bright-blue-color; + transform: scale(1.1); + } + } + + &-twitter { + transition-duration: 0.3s; + &:hover { + fill: $bright-blue-color; + transform: scale(1.1); + } + } + + &-instagram { + transition-duration: 0.3s; + &:hover { + fill: $bright-blue-color; + transform: scale(1.1); + } + } + } + } + + &-message { + resize: none; + height: 40px; + padding-bottom: 0; + } + } + + &__nav { + display: grid; + align-items: center; + grid-template-columns: repeat(2, auto); + grid-template-rows: repeat(2, auto); + row-gap: 48px; + padding-block: 80px; + + @include content-inline; + + @include on-tablet { + padding-block: 100px; + column-gap: 30px; + grid-template-columns: repeat(6, auto); + } + + @include on-small-desktop { + grid-template-columns: repeat(12, auto); + grid-template-rows: 1; + } + + &-logo-link { + grid-column: 1; + grid-row: 1; + } + + &-lists { + grid-column: 1; + grid-row: 2; + display: flex; + flex-direction: column; + row-gap: 24px; + list-style: none; + padding: 0; + margin: 0; + + @include on-tablet { + flex-direction: row; + column-gap: 40px; + justify-content: space-between; + grid-column: 1 / -1; + } + + @include on-small-desktop { + grid-row: 1; + grid-column: 4 / -1; + } + } + + &-list { + &-link { + text-decoration: none; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + color: $white-color; + text-transform: uppercase; + + &:hover { + color: #a5a3a3; + } + } + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..7fcdbd792e --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,188 @@ +.header { + position: relative; + background-color: #2c2c2c; + border-bottom-left-radius: 30px; + border-bottom-right-radius: 30px; + height: 893px; + + @include on-small-desktop { + height: 800px; + } + + &__container { + @include content-inline; + } + + &__top-bar { + position: relative; + padding-top: 20px; + display: flex; + place-content: center space-between; + align-items: center; + + @include content-inline; + + @include on-small-desktop { + padding-top: 50px; + } + } + + &__logo { + width: 46px; + height: 28px; + } + + &__menu-link { + @include on-small-desktop { + display: none; + } + } + + &__menu-switcher { + position: absolute; + width: 18px; + height: 8px; + left: 80px; + + @include on-small-desktop { + display: none; + } + } + + &__nav { + display: none; + + &-lists { + display: flex; + list-style: none; + justify-content: space-between; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-transform: uppercase; + column-gap: 48px; + } + + &-link { + position: relative; + text-decoration: none; + cursor: pointer; + color: $white-color; + + &::after { + content: ''; + position: absolute; + width: 0; + height: 2px; + border-radius: 4px; + top: 28px; + left: 0; + background-color: #2060f6; + transition-duration: 0.3s; + transition-timing-function: ease-in; + } + + &:hover::after { + width: 100%; + } + } + + @include on-small-desktop { + display: block; + } + } + + &__hire-us { + position: relative; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: center; + color: $white-color; + text-decoration: none; + text-transform: uppercase; + + &::after { + content: ''; + position: absolute; + width: 100%; + height: 2px; + border-radius: 4px; + top: 28px; + left: 0; + background-color: #2060f6; + + @include on-small-desktop { + width: 0; + transition-duration: 0.3s; + transition-timing-function: ease-in; + } + } + + @include on-small-desktop { + &:hover::after { + width: 100%; + } + } + } + + &__bottom { + margin-top: 48px; + width: 100%; + + @include on-tablet { + margin-top: 56px; + width: 470px; + } + + @include on-small-desktop { + margin-top: 164px; + } + + @include on-desktop { + width: 490px; + } + + &-title { + margin: 0; + padding: 0; + font-size: 52px; + font-weight: 600; + line-height: 62.4px; + letter-spacing: -2px; + text-align: left; + color: $white-color; + + @include on-tablet { + font-size: 64px; + line-height: 68px; + } + } + + &-description { + margin: 0; + padding: 0; + margin-top: 32px; + font-family: 'Open Sans', Arial, sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 27px; + text-align: left; + color: $white-color; + } + + &-button { + margin-top: 72px; + + @include on-tablet { + margin-top: 56px; + } + + @include on-small-desktop { + margin-top: 83px; + } + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..d9fb003697 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,65 @@ +.menu { + box-sizing: border-box; + height: 100vh; + background-color: #2c2c2c; + font-weight: 700; + z-index: 1; + overflow: auto; + + &__nav { + margin-bottom: 48px; + } + + &__content { + @include content-inline; + } + + &__top { + margin-bottom: 32px; + + position: sticky; + top: 0; + z-index: 1; + } + + &__bottom { + margin-top: 50px; + } + + &__list { + list-style: none; + padding: 0; + display: flex; + flex-direction: column; + row-gap: 16px; + } + + &__link { + position: relative; + text-decoration: none; + font-family: Poppins, Arial, Helvetica, sans-serif; + font-size: 20px; + font-weight: 700; + line-height: 150%; + letter-spacing: 3px; + color: $white-color; + cursor: pointer; + + &::after { + content: ''; + position: absolute; + width: 0; + height: 2px; + border-radius: 4px; + top: 28px; + left: 0; + background-color: #2060f6; + transition-duration: 0.3s; + transition-timing-function: ease-out; + } + + &:hover::after { + width: 100%; + } + } +} diff --git a/src/styles/blocks/our-expertise.scss b/src/styles/blocks/our-expertise.scss new file mode 100644 index 0000000000..b1f8c97191 --- /dev/null +++ b/src/styles/blocks/our-expertise.scss @@ -0,0 +1,79 @@ +.our-expertise { + border-radius: 30px; + background-color: $white-color; + + &__container { + @include content-inline; + + display: flex; + flex-direction: column; + row-gap: 56px; + + @include on-tablet { + row-gap: 64px; + } + } + + &__title { + font-size: 44px; + font-weight: 600; + line-height: 52.8px; + text-align: center; + margin-top: 72px; + + @include on-tablet { + margin-top: 128px; + } + } + + &__content { + display: flex; + flex-direction: column; + align-items: center; + row-gap: 56px; + margin-bottom: 72px; + + @include on-tablet { + row-gap: 72px; + margin-bottom: 128px; + } + + @include on-small-desktop { + flex-direction: row; + justify-content: space-between; + column-gap: 137px; + } + } + + &__article { + display: flex; + flex-direction: column; + row-gap: 16px; + align-items: center; + transition-duration: 0.3s; + transition-property: all; + + &:hover { + transform: scale(1.1); + } + + &-title { + margin: 0; + font-size: 20px; + font-weight: 600; + line-height: 28px; + text-align: center; + color: #253757; + } + + &-text { + margin: 0; + font-family: 'Open Sans', Arial, Helvetica, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + color: #6c788b; + text-align: center; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..4abe7f60e2 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,31 @@ +.page { + font-family: Poppins, Arial, sans-serif; + font-optical-sizing: auto; + scroll-behavior: smooth; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__body { + margin: 0; + min-width: 320px; + } + + &__menu { + position: fixed; + top: 0; + right: 0; + left: 0; + transition: all 0.3s; + opacity: 0; + pointer-events: none; + transform: translateX(-100%); + + &:target { + opacity: 1; + pointer-events: all; + transform: translateX(0); + } + } +} diff --git a/src/styles/blocks/primary-button.scss b/src/styles/blocks/primary-button.scss new file mode 100644 index 0000000000..0c7d292f61 --- /dev/null +++ b/src/styles/blocks/primary-button.scss @@ -0,0 +1,29 @@ +.primary-button { + height: 50px; + width: 100%; + border-radius: 8px; + background-color: #2060f6; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: center; + color: $white-color; + border: none; + transition-duration: 0.3s; + + @include on-tablet { + width: 264px; + } + + &:hover { + cursor: pointer; + background-color: #1154f1; + box-shadow: rgba(10, 92, 173, 0.2) 0 -8px -24px; + } + + &:active { + background-color: #0d3594; + transform: scale(0.9); + box-shadow: rgba(11, 11, 215, 0.2) 0 -7px -29px 0; + } +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..fabbb25433 --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,228 @@ +.services { + &__content { + @include content-inline; + + row-gap: 24px; + padding-block: 120px; + + display: grid; + align-content: start; + grid-template-columns: repeat(2, auto); + grid-template-rows: repeat(6, auto); + + @include on-tablet { + padding-block: 150px; + column-gap: 30px; + grid-template-columns: repeat(6, auto); + grid-template-rows: repeat(3, auto); + } + + @include on-small-desktop { + grid-template-columns: repeat(12, auto); + align-items: start; + } + } + + &__description { + grid-column: span 2; + + @include on-tablet { + grid-column: 1 / 4; + grid-row: 1 / 2; + } + + @include on-small-desktop { + grid-column: 1 / 5; + grid-row: 1 / 2; + transform: translateY(30%); + } + + &-title { + margin-bottom: 16px; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: left; + color: #c0cdd7; + } + + &-headline { + margin: 0; + font-size: 32px; + font-weight: 600; + line-height: 41.6px; + text-align: left; + color: #253757; + } + + &-text { + margin: 0; + margin-top: 24px; + font-family: 'Open Sans', Arial, Helvetica, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: left; + color: #6c788b; + } + } + + &__card { + display: flex; + align-content: flex-start; + flex-direction: column; + row-gap: 24px; + padding: 32px; + border-radius: 16px; + background-color: $white-color; + box-shadow: 0 9px 18px 0 #25293108; + grid-column: span 2; + transition-duration: 0.3s; + + &:hover { + box-shadow: + rgba(0, 0, 0, 0.3) 0 19px 38px, + rgba(0, 0, 0, 0.22) 0 15px 12px; + } + + &-number { + display: flex; + justify-content: center; + color: $bright-blue-color; + align-items: center; + width: 46px; + height: 24px; + border-radius: 23px; + background-color: rgba(32, 96, 246, 0.3); + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + } + + &-content { + font-family: 'Open Sans', Arial, Helvetica, sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + text-align: left; + color: #6c788b; + } + + &-more { + display: flex; + justify-content: space-between; + align-items: center; + } + + &-button { + display: flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: #2060f6; + border: none; + transition-duration: 0.3s; + + &:hover { + cursor: pointer; + transform: scale(1.1); + background-color: #1154f1; + box-shadow: rgba(10, 92, 173, 0.2) 0 -8px -24px; + } + + &:active { + background-color: #0d3594; + transform: scale(0.9); + box-shadow: rgba(11, 11, 215, 0.2) 0 -7px -29px 0; + } + } + + &-learn-more { + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: center; + color: #334563; + text-decoration: none; + transition-duration: 0.3s; + + &:hover { + color: #4b5f83; + transform: scale(1.05); + cursor: pointer; + } + } + } +} + +.card-001 { + @include on-tablet { + grid-column: 1 / 4; + grid-row: 2; + } + + @include on-small-desktop { + grid-column: 7 / 10; + grid-row: 1; + transform: translateY(33%); + } + + @include on-middle-screens { + transform: translateY(43%); + } +} + +.card-002 { + @include on-tablet { + grid-column: 4 / -1; + grid-row: 2 / 2; + transform: translateY(-45%); + } + + @include on-small-desktop { + grid-column: 10 / -1; + grid-row: 1; + transform: translateY(5%); + } + + @include on-middle-screens { + transform: translateY(5%); + } +} + +.card-003 { + @include on-tablet { + grid-column: 1 / 4; + grid-row: 3 / 3; + } + + @include on-small-desktop { + grid-column: 7 / 10; + grid-row: 2; + } + + @include on-middle-screens { + transform: translateY(26%); + } +} + +.card-004 { + @include on-tablet { + grid-column: 4 / -1; + grid-row: 3; + transform: translateY(-42%); + } + + @include on-small-desktop { + grid-column: 10 / -1; + grid-row: 2; + transform: translateY(-25%); + } + + @include on-middle-screens { + transform: translateY(-12%); + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 0000000000..579e6ec8f0 --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,122 @@ +.slider { + position: absolute; + bottom: 0; + right: 0; + width: 100%; + height: 390px; + border-radius: 30px; + + @include on-tablet { + height: 390px; + } + + @include on-small-desktop { + width: 49vw; + height: 680px; + border-radius: 30px 0; + } + + @include on-desktop { + width: 40vw; + } + + @include on-middle-screens { + height: 680px; + } + + @include on-large-screens { + height: 680px; + } + + &-photo { + width: 100%; + height: 100%; + border-radius: 30px; + object-fit: cover; + + @include on-tablet { + width: 100%; + height: 390px; + } + + @include on-small-desktop { + height: 680px; + border-radius: 30px 0; + } + + @include on-middle-screens { + height: 680px; + } + + @include on-large-screens { + height: 680px; + } + } + + &-arrows { + display: flex; + justify-content: space-between; + align-items: center; + width: 90px; + + &-button { + width: 32px; + height: 32px; + border-radius: 50%; + border: none; + transition-duration: 0.3s; + cursor: pointer; + + &:hover { + transform: scale(1.1); + } + + &:active { + transform: scale(0.9); + } + } + } + + &-bottom { + display: flex; + flex-direction: column; + row-gap: 16px; + position: relative; + bottom: 150px; + + @include content-inline; + + @include on-small-desktop { + margin-inline: 0; + flex-direction: row; + column-gap: 24px; + width: 370px; + left: 48px; + } + } + &-content { + max-width: 280px; + } + + &-intro { + margin: 0; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: left; + color: $white-color; + text-transform: uppercase; + } + + &-text { + margin: 0; + padding-top: 8px; + font-family: 'Open Sans', Arial, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + text-align: left; + color: $white-color; + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..6a13407728 --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,160 @@ +.testimonials { + @include content-inline; + + padding-bottom: 120px; + + @include on-tablet { + padding-bottom: 150px; + } + + &__description { + display: flex; + flex-direction: column; + row-gap: 16px; + margin-bottom: 48px; + + @include on-tablet { + margin-bottom: 56px; + } + + @include on-small-desktop { + margin-bottom: 80px; + } + + &-title { + margin: 0; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + color: rgba(192, 205, 215, 1); + } + + &-headline { + margin: 0; + font-size: 32px; + font-weight: 600; + line-height: 48px; + text-align: left; + color: rgba(37, 55, 87, 1); + } + } + + &__content { + display: flex; + flex-direction: column; + row-gap: 24px; + + @include on-tablet { + row-gap: 30px; + } + + @include on-small-desktop { + flex-direction: row; + column-gap: 20px; + } + + @include on-middle-screens { + column-gap: 30px; + } + + &-card { + display: flex; + flex-direction: column; + row-gap: 16px; + align-items: center; + position: relative; + background-color: $white-color; + box-shadow: 0 9px 18px 0 rgba(37, 41, 49, 0.03); + border-radius: 16px; + z-index: 0; + padding: 66px 56px 32px; + transition-duration: 0.3s; + + &:hover { + transform: scale(1.05); + box-shadow: rgb(38, 57, 77) 0 20px 30px -10px; + } + + &-img-content { + border-radius: 50%; + position: relative; + margin-bottom: 37px; + + &::after { + content: ' '; + position: absolute; + width: 45%; + height: 100%; + background-color: $bright-blue-color; + z-index: -1; + bottom: -25%; + left: 60%; + transform: rotate(40deg); + border-radius: 12px; + } + + &::before { + content: ' '; + position: absolute; + width: 45%; + height: 100%; + background-color: $bright-blue-color; + z-index: -1; + bottom: 30%; + left: 0; + transform: rotate(40deg); + border-radius: 12px; + } + } + + &-photo { + border-radius: 50%; + position: relative; + } + + &-quotes { + display: flex; + flex-direction: column; + row-gap: 8px; + align-items: center; + } + + &-quote { + margin: 0; + font-family: 'Open Sans', Arial, sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + text-align: center; + color: $grayish-color; + } + + &-about { + display: flex; + flex-direction: column; + row-gap: 4px; + align-items: center; + } + + &-name { + font-family: 'Open Sans', Arial, sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + text-align: center; + color: rgba(37, 55, 87, 1); + } + + &-work { + margin: 0; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: center; + color: rgba(192, 205, 215, 1); + } + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..d8a9e1f3d7 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,21 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import './blocks/header'; +@import './blocks/primary-button'; +@import './blocks/slider'; +@import './blocks/menu'; +@import './blocks/page'; +@import './blocks/about-us'; +@import './blocks/our-expertise'; +@import './blocks/services'; +@import './blocks/testimonials'; +@import './blocks/apply'; +@import './blocks/footer'; body { background: $c-gray; + font-family: Poppins, Arial, sans-serif; + margin: 0; + padding: 0; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..41ecbcda2a 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,64 @@ #{$_property}: $_toValue; } } + +@mixin on-mobile { + @media (min-width: 320px) { + @content; + } +} + +@mixin on-tablet { + @media (min-width: 640px) { + @content; + } +} + +@mixin on-small-desktop { + @media (min-width: 1024px) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: 1280px) { + @content; + } +} + +@mixin on-middle-screens { + @media (min-width: 1600px) { + @content; + } +} + +@mixin on-large-screens { + @media (min-width: 2560px) { + @content; + } +} + +@mixin content-inline() { + margin-inline: auto; + max-width: 280px; + + @include on-tablet { + max-width: 558px; + } + + @include on-small-desktop { + max-width: 916px; + } + + @include on-desktop { + max-width: 916px; + } + + @include on-middle-screens { + max-width: 1146px; + } + + @include on-large-screens { + max-width: 1146px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..41ad552f0e 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,4 @@ $c-gray: #eee; +$white-color: #fff; +$grayish-color: rgba(108, 120, 139, 1); +$bright-blue-color: rgba(32, 96, 246, 1);