diff --git a/README.md b/README.md index 93d9738cc4..1a5de4b0a3 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://vitamartsekhovska.github.io/layout_dia/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/index.html b/index.html index 1eca937738..6d74a44818 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + Dia + + + + + + + + - -

Dia

- + +
+
+
+ + + + + +
+ + + + Hire us +
+ +
+
+

Strategic Agency

+

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

+ Learn more +
+ +
+
+ Intro + +
+
+ + +
+ +
+

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 + +

Branding

+

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

+
+ +
+ + Communication + +

Communication

+

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

+
+ +
+ + Strategy + +

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 & Website Design
    • +
  • Packaging
    • +
+
+ + Arrow + Learn more + +
+
+ +
+

002

+
    +
  • Content Production
    • +
  • Graphic Design
    • +
  • Video Production
    • +
  • Post Production
    • +
+
+ + Arrow + Learn more + +
+
+ +
+

003

+
    +
  • Marketing Strategy
    • +
  • Email Marketing
    • +
  • Paid Advertising
    • +
  • Blog Content & SEO
    • +
+
+ + Arrow + Learn more + +
+
+ +
+

004

+
    +
  • Digital Communications
    • +
  • Influencer Marketing
    • +
  • Product Placements
    • +
  • Strategic Partnerships
    • +
+
+ + Arrow + Learn more + +
+
+
+ +
+
+

Testimonials

+

What people say

+
+ +
+
+ Tal Glad + brackets +

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

+
+ +
+ Tal Glad + brackets +

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

+

Azadeh Hawkins

+

Hawkins Consulting

+
+ +
+ Tal Glad + brackets +

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. +

+ + Apply +
+ +
+
+
+

Send us a message

+ +
+ + + + + +
+
+ +
+

Contact us

+ +
+
+

Call us

+ 654 321 987 +
+ +
+

Visit us

+ 2905 West Drive, Buffalo Grove +
+ +
+

Our socials

+
+ + + +
+
+
+
+
+
+
+ + diff --git a/package-lock.json b/package-lock.json index 1b7e1f550b..0d916d7b41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", @@ -1510,10 +1510,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", - "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index aebda906fc..ffc8ac6e62 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", diff --git a/src/images/icons/icon-arrow.png b/src/images/icons/icon-arrow.png new file mode 100644 index 0000000000..3d36bed447 Binary files /dev/null and b/src/images/icons/icon-arrow.png differ diff --git a/src/images/icons/icon-brackets.png b/src/images/icons/icon-brackets.png new file mode 100644 index 0000000000..cd6bdbe03f Binary files /dev/null and b/src/images/icons/icon-brackets.png differ diff --git a/src/images/icons/icon-decor.png b/src/images/icons/icon-decor.png new file mode 100644 index 0000000000..f8cc93d445 Binary files /dev/null and b/src/images/icons/icon-decor.png differ diff --git a/src/images/icons/icon-facebook.png b/src/images/icons/icon-facebook.png new file mode 100644 index 0000000000..ac7f321073 Binary files /dev/null and b/src/images/icons/icon-facebook.png differ diff --git a/src/images/icons/icon-instagram.png b/src/images/icons/icon-instagram.png new file mode 100644 index 0000000000..a21270c6db Binary files /dev/null and b/src/images/icons/icon-instagram.png differ diff --git a/src/images/icons/icon-menu.png b/src/images/icons/icon-menu.png new file mode 100644 index 0000000000..3d11b4182c Binary files /dev/null and b/src/images/icons/icon-menu.png differ diff --git a/src/images/icons/icon-twitter.png b/src/images/icons/icon-twitter.png new file mode 100644 index 0000000000..d4ea19bea2 Binary files /dev/null and b/src/images/icons/icon-twitter.png differ diff --git a/src/images/logo/logo-2px.png b/src/images/logo/logo-2px.png new file mode 100644 index 0000000000..1665f68559 Binary files /dev/null and b/src/images/logo/logo-2px.png differ diff --git a/src/images/slider/arrow-left.png b/src/images/slider/arrow-left.png new file mode 100644 index 0000000000..81cdd6a352 Binary files /dev/null and b/src/images/slider/arrow-left.png differ diff --git a/src/images/slider/arrow-right.png b/src/images/slider/arrow-right.png new file mode 100644 index 0000000000..f48d66beaf Binary files /dev/null and b/src/images/slider/arrow-right.png differ diff --git a/src/images/slider/slide-img-2.jpg b/src/images/slider/slide-img-2.jpg new file mode 100644 index 0000000000..7fc390324c Binary files /dev/null and b/src/images/slider/slide-img-2.jpg differ diff --git a/src/images/testimonials/testimonial-photo-1.png b/src/images/testimonials/testimonial-photo-1.png new file mode 100644 index 0000000000..d0a3094dcc Binary files /dev/null and b/src/images/testimonials/testimonial-photo-1.png differ diff --git a/src/images/testimonials/testimonial-photo-2.png b/src/images/testimonials/testimonial-photo-2.png new file mode 100644 index 0000000000..22c36e5389 Binary files /dev/null and b/src/images/testimonials/testimonial-photo-2.png differ diff --git a/src/images/testimonials/testimonial-photo-3.png b/src/images/testimonials/testimonial-photo-3.png new file mode 100644 index 0000000000..c8725f418c Binary files /dev/null and b/src/images/testimonials/testimonial-photo-3.png differ diff --git a/src/images/what-we-do/expertise-1.png b/src/images/what-we-do/expertise-1.png new file mode 100644 index 0000000000..87f697b2bc Binary files /dev/null and b/src/images/what-we-do/expertise-1.png differ diff --git a/src/images/what-we-do/expertise-2.png b/src/images/what-we-do/expertise-2.png new file mode 100644 index 0000000000..cbfcd2e5a5 Binary files /dev/null and b/src/images/what-we-do/expertise-2.png differ diff --git a/src/images/what-we-do/expertise-3.png b/src/images/what-we-do/expertise-3.png new file mode 100644 index 0000000000..4a032ef455 Binary files /dev/null and b/src/images/what-we-do/expertise-3.png differ diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd54008..5cfc5b4d05 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,6 @@ @font-face { font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; + src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); } diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 0000000000..5f2c1549ef --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,22 @@ +.button { + display: inline-flex; + align-items: center; + justify-content: center; + text-decoration: none; + cursor: pointer; + background-color: $c-accent; + color: $c-block; + height: 56px; + width: 280px; + border-radius: 8px; + font-weight: $fw-m; + font-size: 15px; + line-height: 100%; + border: none; + + @include hover(background-color, $c-hover-accent); + + @include on-tablet { + width: 264px; + } +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 0000000000..14fea19a3a --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,91 @@ +.contact-us { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-mini-desktop { + grid-column: 7 / -2; + } + + @include on-desktop { + grid-column: 8 / -2; + } + + &__information { + display: flex; + flex-direction: column; + gap: 40px; + + @include on-tablet { + gap: 48px; + } + } + + &__title { + color: $c-block; + margin-bottom: 48px; + text-align: left; + + @include on-tablet { + margin-bottom: 56px; + } + } + + &__info { + text-transform: uppercase; + color: $c-block; + display: flex; + flex-direction: column; + gap: 8px; + } + + &__label { + font-weight: $fw-l; + font-size: $fs-s; + line-height: 100%; + letter-spacing: 3px; + opacity: 50%; + margin: 0; + } + + &__phone { + font-family: 'Open Sans', sans-serif; + font-weight: $fw-m; + font-size: $fs-xl; + line-height: 150%; + color: $c-block; + text-decoration: none; + + @include hover(color, rgba($c-block, 0.7)); + } + + &__address { + font-family: 'Open Sans', sans-serif; + font-weight: $fw-m; + font-size: $fs-xl; + line-height: 150%; + margin: 0; + color: $c-block; + text-decoration: none; + + @include hover(color, rgba($c-block, 0.7)); + } + + &__socials { + display: flex; + margin-top: 8px; + gap: 32px; + } + + &__social { + text-decoration: none; + @include hover(opacity, 0.7); + } + + &__image { + height: 32px; + width: 32px; + } +} diff --git a/src/styles/blocks/dark-block.scss b/src/styles/blocks/dark-block.scss new file mode 100644 index 0000000000..69eda872e6 --- /dev/null +++ b/src/styles/blocks/dark-block.scss @@ -0,0 +1,25 @@ +.dark-block { + background-color: $c-bg-accent; + border-radius: 30px 30px 0 0; + padding-top: 72px; + margin-bottom: -1px; + + @include on-tablet { + padding-top: 180px; + } + + &__wrapper { + @include page-grid; + @include content-padding-inline; + + gap: 80px; + + @include on-tablet { + gap: 120px; + } + + @include on-mini-desktop { + gap: 0; + } + } +} diff --git a/src/styles/blocks/expertise.scss b/src/styles/blocks/expertise.scss new file mode 100644 index 0000000000..0a8a661aa8 --- /dev/null +++ b/src/styles/blocks/expertise.scss @@ -0,0 +1,43 @@ +.expertise { + @include hover(transform, scale(1.05)); + + &__link { + display: block; + overflow: hidden; + width: fit-content; + margin: 0 auto; + } + + &__photo { + width: 166px; + height: 166px; + border-radius: 16px; + display: block; + object-fit: cover; + } + + &__title { + margin-top: 32px; + margin-bottom: 0; + font-size: 20px; + font-weight: $fw-m; + line-height: 140%; + color: $c-text-section; + text-align: center; + + @include on-mini-desktop { + margin-top: 40px; + } + } + + &__description { + margin-top: 16px; + margin-bottom: 0; + font-family: 'Open Sans', sans-serif; + font-weight: $fw-s; + font-size: $fs-m; + line-height: 150%; + color: $c-text-main; + text-align: center; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..b948f59db9 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,57 @@ +.footer { + @include content-padding-inline; + + background-color: $c-bg-accent; + padding-bottom: 80px; + display: flex; + flex-direction: column; + gap: 48px; + padding-top: 80px; + + @include on-tablet { + gap: 24px; + padding-top: 140px; + } + + @include on-mini-desktop { + // padding-inline: -54px; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding-top: 120px; + } + + &__logo { + width: 46px; + height: 28px; + } + + &__list { + list-style: none; + display: flex; + flex-direction: column; + gap: 24px; + margin: 0; + padding: 0; + + @include on-tablet { + flex-direction: row; + gap: 40px; + } + + @include on-mini-desktop { + gap: 64px; + } + } + + &__link { + text-decoration: none; + color: $c-block; + font-weight: $fw-l; + font-size: $fs-s; + line-height: 150%; + text-transform: uppercase; + letter-spacing: 3px; + @include hover(color, rgba($c-block, 0.7)); + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..0160d04df3 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,92 @@ +.header { + background-color: $c-bg-accent; + border-radius: 0 0 30px 30px; + + &__wrapper { + @include page-grid; + @include content-padding-inline; + } + + &__content { + grid-column: 1 /-1; + @include on-mini-desktop { + grid-column: 1 / 6; + } + + @include on-desktop { + grid-column: 1 / 5; + } + } + + &__slider { + grid-column: 1 /-1; + margin-right: -20px; + margin-left: -20px; + @include on-tablet { + margin-right: -40px; + margin-left: -40px; + } + + @include on-mini-desktop { + grid-column: 7 / -1; + margin-right: -54px; + margin-left: 0; + } + + @include on-desktop { + grid-column: 8 / -1; + margin-right: -226px; + margin-left: 0; + } + + @include on-big-screen { + margin-right: -706px; + margin-left: 0; + } + } + + &__title { + font-weight: $fw-m; + font-size: $fs-title-l; + line-height: 120%; + letter-spacing: -2px; + color: $c-block; + margin-bottom: 32px; + @include on-tablet { + font-size: $fs-title-xl; + line-height: 68px; + margin-bottom: 24px; + } + + @include on-mini-desktop { + margin-bottom: 32px; + } + } + + &__description { + font-family: 'Open Sans', sans-serif; + font-weight: $fw-s; + font-size: 18px; + line-height: 150%; + color: $c-block; + margin-bottom: 72px; + @include on-tablet { + margin-bottom: 56px; + } + + @include on-mini-desktop { + margin-bottom: 82px; + } + } + + &__button { + margin-bottom: 48px; + @include on-tablet { + margin-bottom: 148px; + } + + @include on-mini-desktop { + margin-bottom: 204px; + } + } +} diff --git a/src/styles/blocks/main-block.scss b/src/styles/blocks/main-block.scss new file mode 100644 index 0000000000..09955a9c4f --- /dev/null +++ b/src/styles/blocks/main-block.scss @@ -0,0 +1,11 @@ +.main { + display: flex; + flex-direction: column; + gap: 120px; + padding-top: 120px; + background-color: $c-bg; + @include on-tablet { + gap: 148px; + padding-top: 148px; + } +} diff --git a/src/styles/blocks/our-expertise.scss b/src/styles/blocks/our-expertise.scss new file mode 100644 index 0000000000..55493a52ef --- /dev/null +++ b/src/styles/blocks/our-expertise.scss @@ -0,0 +1,53 @@ +.our-expertise { + background-color: $c-block; + border-radius: 30px; + + &__expertises { + @include content-padding-inline; + @include page-grid; + + row-gap: 56px; + margin-top: 56px; + margin-bottom: 72px; + @include on-tablet { + row-gap: 72px; + margin-top: 64px; + margin-bottom: 128px; + } + + @include on-mini-desktop { + margin-bottom: 134px; + grid-template-columns: repeat(3, auto); + justify-content: space-between; + } + } + + &__title { + @include content-padding-inline; + + margin-top: 72px; + @include on-desktop { + margin-top: 128px; + } + } + + &__expertise { + grid-column: 1 / -1; + @include on-tablet { + grid-column: 2 / -2; + } + + @include on-mini-desktop { + grid-column: auto; + width: 214px; + } + + @include on-desktop { + width: 264px; + } + + @include on-big-screen { + width: 264px; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..ec5291e0fe --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,14 @@ +.page { + font-family: Poppins, sans-serif; + line-height: 150%; + overflow-x: hidden; + scroll-behavior: smooth; + + &__body { + overflow-x: hidden; + background: $c-gray; + margin: 0; + padding: 0; + min-width: 320px; + } +} diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 0000000000..91bad726fb --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,22 @@ +.section-title { + margin: 0; + font-weight: $fw-m; + font-size: $fs-title-s; + color: $c-text-section; + line-height: 150%; + text-align: center; + + &--bigger { + font-size: $fs-title-m; + line-height: 120%; + + @include on-tablet { + font-size: $fs-title-l; + line-height: 150%; + } + } + + &--align--left { + text-align: left; + } +} diff --git a/src/styles/blocks/send-us-a-message.scss b/src/styles/blocks/send-us-a-message.scss new file mode 100644 index 0000000000..cf8b268763 --- /dev/null +++ b/src/styles/blocks/send-us-a-message.scss @@ -0,0 +1,83 @@ +.send-us-a-message { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-mini-desktop { + grid-column: 1 / 6; + } + + &__title { + color: $c-block; + text-align: left; + margin-bottom: 48px; + + @include on-tablet { + margin-bottom: 56px; + } + } + + &__form { + display: flex; + flex-direction: column; + gap: 40px; + + @include on-tablet { + gap: 48px; + } + } + + &__input { + box-sizing: border-box; + background: transparent; + border: none; + outline: none; + border-bottom: 1px solid rgba($c-block, 0.7); + width: 100%; + height: 40px; + color: $c-block; + font-weight: $fw-m; + font-size: 15px; + line-height: 100%; + + &::placeholder { + color: rgba($c-block, 0.7); + } + + &:hover { + border-bottom: 2px solid $c-hover-accent; + } + + &:focus { + outline: none; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + -webkit-text-fill-color: $c-block; + transition: background-color 5000s ease-in-out 0s; + box-shadow: 0 0 0 1000px transparent inset; + } + } + + &__input--textarea { + height: 40px; + resize: none; + font-family: 'Open Sans', sans-serif; + font-size: 15px; + font-weight: $fw-m; + line-height: 100%; + color: $c-block; + } + + &__button { + margin-top: 16px; + + @include on-tablet { + margin-top: 32px; + } + } +} diff --git a/src/styles/blocks/service.scss b/src/styles/blocks/service.scss new file mode 100644 index 0000000000..68e8cada9d --- /dev/null +++ b/src/styles/blocks/service.scss @@ -0,0 +1,95 @@ +.service { + background-color: $c-block; + padding: 32px; + border-radius: 16px; + display: flex; + flex-direction: column; + + grid-column: 1 / -1; + + &--first { + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-mini-desktop { + grid-column: 7 / 10; + } + } + + &--second { + @include on-tablet { + grid-column: 4 / -1; + transform: translateY(-132px); + } + + @include on-mini-desktop { + grid-column: 10 / -1; + transform: translateY(-132px); + } + } + + &__number { + display: flex; + margin: 0; + background-color: rgba($c-accent, 0.1); + width: 46px; + height: 24px; + border-radius: 23px; + color: $c-accent; + justify-content: center; + align-items: center; + font-weight: $fw-m; + font-size: $fs-s; + text-transform: uppercase; + } + + &__items { + list-style: none; + padding: 0; + margin: 0; + margin-top: 24px; + } + + &__item { + font-family: 'Open Sans', sans-serif; + font-weight: $fw-m; + font-size: $fs-s; + line-height: 150%; + color: $c-text-main; + } + + &__wrap { + margin-top: 32px; + cursor: pointer; + } + + &__link { + display: flex; + align-items: center; + gap: 16px; + text-decoration: none; + } + + &__icon { + height: 40px; + width: 40px; + transition: opacity 0.3s; + } + + &__link-text { + font-weight: $fw-m; + font-size: 15px; + line-height: 100%; + color: $c-dark-grey; + transition: color 0.3s; + } + + &__wrap:hover &__icon { + opacity: 0.6; + } + + &__wrap:hover &__link-text { + color: $c-accent; + } +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..4060d21fcc --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,44 @@ +.services { + @include content-padding-inline; + @include page-grid; + + gap: 24px; + + @include on-tablet { + margin-top: 132px; + } + + &__content { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + gap: 30px; + } + + @include on-mini-desktop { + grid-column: 1 / 5; + } + } + + &__label { + text-transform: uppercase; + font-weight: $fw-l; + font-size: $fs-s; + line-height: 100%; + letter-spacing: 3px; + color: $c-label; + } + + &__title { + line-height: 130%; + } + + &__description { + font-family: 'Open Sans', sans-serif; + font-weight: $fw-s; + font-size: $fs-m; + line-height: 150%; + color: $c-text-main; + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 0000000000..dd4a0ff90e --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,91 @@ +.slider { + position: relative; + + &__photo { + display: block; + width: 100%; + height: 390px; + border-radius: 30px; + object-fit: cover; + object-position: left center; + @include on-mini-desktop { + height: 680px; + border-bottom-left-radius: 0; + border-top-right-radius: 0; + } + } + + &__bottom { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + display: flex; + flex-direction: column; + gap: 16px; + margin-bottom: 24px; + margin-left: 20px; + @include on-tablet { + margin-bottom: 32px; + margin-left: 40px; + } + + @include on-mini-desktop { + flex-direction: row; + gap: 24px; + align-items: center; + margin-bottom: 48px; + margin-left: 78px; + } + + @include on-desktop { + margin-left: 48px; + } + } + + &__controls { + display: flex; + gap: 16px; + } + + &__button { + width: 32px; + height: 32px; + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + } + + &__image { + height: 32px; + width: 32px; + } + + &__info { + display: flex; + flex-direction: column; + gap: 8px; + } + + &__label { + font-weight: $fw-l; + font-size: $fs-s; + line-height: 100%; + letter-spacing: 3px; + text-transform: uppercase; + color: $c-block; + margin: 0; + } + + &__text { + font-family: 'Open Sans', sans-serif; + font-weight: $fw-s; + font-size: $fs-m; + line-height: 140%; + color: $c-block; + margin: 0; + } +} diff --git a/src/styles/blocks/testimonial.scss b/src/styles/blocks/testimonial.scss new file mode 100644 index 0000000000..ddcdc3f2a8 --- /dev/null +++ b/src/styles/blocks/testimonial.scss @@ -0,0 +1,66 @@ +.testimonial { + background-color: $c-block; + padding: 32px 42px; + border-radius: 16px; + grid-column: 1 / -1; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + @include hover(transform, scale(1.05)); + + @include on-tablet { + padding-inline: 98px; + } + + @include on-mini-desktop { + grid-column: span 4; + padding-inline: 48px; + } + + @include on-desktop { + padding-inline: 56px; + } + + &__photo { + width: 196px; + height: 196px; + } + + &__brackets { + height: 24px; + width: 24px; + margin-top: 24px; + } + + &__text { + font-family: 'Open Sans', sans-serif; + font-weight: $fw-m; + font-size: $fs-s; + line-height: 150%; + color: $c-text-main; + margin-top: 8px; + margin-bottom: 0; + } + + &__name { + font-family: 'Open Sans', sans-serif; + font-weight: $fw-m; + font-size: $fs-s; + line-height: 150%; + color: $c-text-section; + margin-top: 32px; + margin-bottom: 0; + } + + &__company { + font-weight: $fw-l; + font-size: $fs-s; + line-height: 100%; + letter-spacing: 3px; + text-transform: uppercase; + color: $c-label; + margin-top: 4px; + margin-bottom: 0; + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..5181a2e139 --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,47 @@ +.testimonials { + @include content-padding-inline; + @include page-grid; + + gap: 48px; + + @include on-tablet { + gap: 56px; + } + + @include on-mini-desktop { + gap: 85px; + } + + &__content { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + } + + &__label { + text-transform: uppercase; + font-weight: $fw-l; + font-size: $fs-s; + line-height: 100%; + letter-spacing: 3px; + color: $c-label; + } + + &__title { + line-height: 150%; + } + + &__list { + grid-column: 1 / -1; + + @include page-grid; + + gap: 24px; + + @include on-tablet { + gap: 30px; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..acdd56ed24 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,84 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + padding-block: 20px; + + @include content-padding-inline; + + @include on-mini-desktop { + padding-block: 48px; + } + + &__wrapper { + display: flex; + gap: 32px; + align-items: center; + } + + &__logo { + display: flex; + height: 28px; + } + + &__logo-link { + display: flex; + } + + &__menu { + cursor: pointer; + border: none; + background: none; + display: block; + padding: 0; + + @include on-mini-desktop { + display: none; + } + } + + &__menu-icon { + display: flex; + width: 24px; + height: 24px; + } + + &__nav { + display: none; + @include on-mini-desktop { + display: block; + } + } + + &__list { + list-style: none; + display: flex; + gap: 48px; + margin: 0; + padding: 0; + } + + &__link { + text-decoration: none; + color: $c-block; + font-weight: $fw-l; + font-size: $fs-s; + line-height: 150%; + text-transform: uppercase; + letter-spacing: 3px; + @include hover(color, rgba($c-block, 0.7)); + } + + &__cta { + text-decoration: none; + color: $c-block; + font-weight: $fw-l; + font-size: $fs-s; + line-height: 150%; + letter-spacing: 3px; + text-transform: uppercase; + border-bottom: 2px solid $c-accent; + padding-bottom: 8px; + @include hover(color, rgba($c-block, 0.7)); + } +} diff --git a/src/styles/blocks/vision-passion-results.scss b/src/styles/blocks/vision-passion-results.scss new file mode 100644 index 0000000000..03f718c26b --- /dev/null +++ b/src/styles/blocks/vision-passion-results.scss @@ -0,0 +1,32 @@ +.vision-passion-results { + padding: 72px 0; + background-color: $c-block; + text-align: center; + + @include on-tablet { + background-image: url('/src/images/Shapes.png'); + background-repeat: no-repeat; + + margin-bottom: -148px; + padding: 200px 0; + background-position: top center; + } + + @include content-padding-inline; + + &__text { + font-family: 'Open Sans', sans-serif; + font-size: $fs-l; + font-weight: $fw-m; + line-height: 150%; + + margin-top: 24px; + color: $c-text-main; + margin-bottom: 56px; + + @include on-tablet { + margin-bottom: 64px; + font-size: $fs-xl; + } + } +} diff --git a/src/styles/blocks/who-we-are.scss b/src/styles/blocks/who-we-are.scss new file mode 100644 index 0000000000..5eb4d8e1d1 --- /dev/null +++ b/src/styles/blocks/who-we-are.scss @@ -0,0 +1,30 @@ +.who-we-are { + @include page-grid; + @include content-padding-inline; + + &__title { + grid-column: 1 / -1; + } + + &__description { + grid-column: 1 / -1; + + font-family: 'Open Sans', sans-serif; + font-size: $fs-l; + font-weight: $fw-m; + + margin-top: 24px; + line-height: 150%; + color: $c-text-main; + + text-align: center; + + @include on-tablet { + margin-top: 16px; + } + + @include on-mini-desktop { + grid-column: 3 / -3; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..146145d87b 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,22 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import './utils'; +@import './fonts'; +@import './typography'; +@import './blocks/page'; +@import './blocks/header'; +@import './blocks/top-bar'; +@import './blocks/slider'; +@import './blocks/main-block'; +@import './blocks/who-we-are'; +@import './blocks/section-title'; +@import './blocks/our-expertise'; +@import './blocks/expertise'; +@import './blocks/services'; +@import './blocks/service'; +@import './blocks/testimonials'; +@import './blocks/testimonial'; +@import './blocks/vision-passion-results'; +@import './blocks/button'; +@import './blocks/dark-block'; +@import './blocks/send-us-a-message'; +@import './blocks/contact-us'; +@import './blocks/footer'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..2b2ad7d9da 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,83 @@ @mixin hover($_property, $_toValue) { transition: #{$_property} 0.3s; + &:hover { #{$_property}: $_toValue; } } + +@mixin on-mobile { + @media (min-width: $mobile-min-width) { + @content; + } +} + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-mini-desktop { + @media (min-width: $mini-desktop-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-big-screen { + @media (min-width: $big-screen-min-width) { + @content; + } +} + +@mixin content-padding-inline { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 40px; + } + + @include on-mini-desktop { + padding-inline: 54px; + } + + @include on-desktop { + padding-inline: 226px; + } + + @include on-big-screen { + padding-inline: 706px; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 6; + + column-gap: 24px; + } + + @include on-mini-desktop { + --columns: 12; + } + + @include on-desktop { + --columns: 12; + } + + @include on-big-screen { + --columns: 12; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..a074859ff7 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,26 @@ $c-gray: #eee; +$c-bg: #f2f6fa; +$c-bg-accent: #2c2c2c; +$c-block: #fff; +$c-text-section: #253757; +$c-text-main: #6c788b; +$c-accent: #2060f6; +$c-label: #c0cdd7; +$c-dark-grey: #334563; +$c-hover-accent: #144ed4; +$mobile-min-width: 320px; +$tablet-min-width: 640px; +$mini-desktop-min-width: 1024px; +$desktop-min-width: 1600px; +$big-screen-min-width: 2560px; +$fw-s: 400; +$fw-m: 600; +$fw-l: 700; +$fs-title-s: 32px; +$fs-title-m: 44px; +$fs-title-l: 52px; +$fs-title-xl: 64px; +$fs-s: 13px; +$fs-m: 14px; +$fs-l: 22px; +$fs-xl: 24px;