diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 0000000000..8b5743ecb4 --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/README.md b/README.md index 93d9738cc4..4577cb3d91 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://Korochenko.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..1e95e07fa7 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + @@ -6,14 +7,608 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Dia + Air + + -

Dia

- + + + + + +
+
+

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 +

+ +
+
+ who-we-are +

Branding

+

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

+
+ +
+ who-we-are +

Communication

+

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

+
+ +
+ who-we-are +

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

+

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

+ +
+
+
+
+
+
+ # +
+
+ # +

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

+

Azadeh Hawkins

+

Hawkins Consulting

+
+
+
+
+
+
+ # +
+
+ # +

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

+

Michel Grover

+

Hulu

+
+
+
+
+
+
+ # +
+
+ # +

+ 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

+
+
+
+ +
+

Vision, Passion, Results

+

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

+ + Apply + +
+
+ + + diff --git a/package-lock.json b/package-lock.json index 1b7e1f550b..baad187b00 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,11 +9,16 @@ "version": "1.0.0", "hasInstallScript": true, "license": "GPL-3.0", + "dependencies": { + "@fontsource-variable/open-sans": "^5.2.7", + "@fontsource/open-sans": "^5.2.7", + "@fontsource/poppins": "^5.2.7" + }, "devDependencies": { "@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", @@ -1038,6 +1043,33 @@ "node": ">=18" } }, + "node_modules/@fontsource-variable/open-sans": { + "version": "5.2.7", + "resolved": "https://registry.npmjs.org/@fontsource-variable/open-sans/-/open-sans-5.2.7.tgz", + "integrity": "sha512-wzCLm2STuekK9Fz58DiuBnk4GgJpvvVtAU85a4b06ACNG/UsVjQcCvkUd6R/ETlHfsaykCUZamLRvSXg4KtWuA==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, + "node_modules/@fontsource/open-sans": { + "version": "5.2.7", + "resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-5.2.7.tgz", + "integrity": "sha512-8yfgDYjE5O0vmTPdrcjV35y4yMnctsokmi9gN49Gcsr0sjzkMkR97AnKDe6OqZh2SFkYlR28fxOvi21bYEgMSw==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, + "node_modules/@fontsource/poppins": { + "version": "5.2.7", + "resolved": "https://registry.npmjs.org/@fontsource/poppins/-/poppins-5.2.7.tgz", + "integrity": "sha512-6uQyPmseo4FgI97WIhA4yWRlNaoLk4vSDK/PyRwdqqZb5zAEuc+Kunt8JTMcsHYUEGYBtN15SNkMajMdqUSUmg==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@inquirer/external-editor": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@inquirer/external-editor/-/external-editor-1.0.3.tgz", @@ -1510,10 +1542,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", @@ -8721,20 +8754,6 @@ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true }, - "node_modules/yaml": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz", - "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==", - "dev": true, - "optional": true, - "peer": true, - "bin": { - "yaml": "bin.mjs" - }, - "engines": { - "node": ">= 14.6" - } - }, "node_modules/yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", diff --git a/package.json b/package.json index aebda906fc..80715f19de 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", @@ -42,5 +42,10 @@ "tests": { "backstop": false } + }, + "dependencies": { + "@fontsource-variable/open-sans": "^5.2.7", + "@fontsource/open-sans": "^5.2.7", + "@fontsource/poppins": "^5.2.7" } } diff --git a/src/images/features/Arrow.svg b/src/images/features/Arrow.svg new file mode 100644 index 0000000000..14283291fa --- /dev/null +++ b/src/images/features/Arrow.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/features/quoute.png b/src/images/features/quoute.png new file mode 100644 index 0000000000..cfdd289ace Binary files /dev/null and b/src/images/features/quoute.png differ diff --git a/src/images/logo/burger.svg b/src/images/logo/burger.svg new file mode 100644 index 0000000000..374d372c5a --- /dev/null +++ b/src/images/logo/burger.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo/dia-logo.svg b/src/images/logo/dia-logo.svg index a81933296e..43ebc78d9d 100644 --- a/src/images/logo/dia-logo.svg +++ b/src/images/logo/dia-logo.svg @@ -1,3 +1,19 @@ - - + + + + + + + + + + + + + + + + + + diff --git a/src/images/slider/arrow-left.svg b/src/images/slider/arrow-left.svg index 66daed19a5..ed235fafc6 100644 --- a/src/images/slider/arrow-left.svg +++ b/src/images/slider/arrow-left.svg @@ -1,3 +1,11 @@ - - + + + + + + + + + + diff --git a/src/images/slider/arrow-right.svg b/src/images/slider/arrow-right.svg index e9ddf85873..315ac0baf4 100644 --- a/src/images/slider/arrow-right.svg +++ b/src/images/slider/arrow-right.svg @@ -1,3 +1,11 @@ - - + + + + + + + + + + diff --git a/src/images/slider/slide-img-0.png b/src/images/slider/slide-img-0.png new file mode 100644 index 0000000000..7fc390324c Binary files /dev/null and b/src/images/slider/slide-img-0.png differ diff --git a/src/images/slider/slide-img-1.jpg b/src/images/slider/slide-img-1.jpg index 98c4188508..43bc044698 100644 Binary files a/src/images/slider/slide-img-1.jpg and b/src/images/slider/slide-img-1.jpg 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..07359151f9 Binary files /dev/null and b/src/images/slider/slide-img-2.jpg differ diff --git a/src/images/social_media_icons/facebook.png b/src/images/social_media_icons/facebook.png new file mode 100644 index 0000000000..b003ebe9fc Binary files /dev/null and b/src/images/social_media_icons/facebook.png differ diff --git a/src/images/social_media_icons/instagram.png b/src/images/social_media_icons/instagram.png new file mode 100644 index 0000000000..4f46f91e99 Binary files /dev/null and b/src/images/social_media_icons/instagram.png differ diff --git a/src/images/social_media_icons/twitter.png b/src/images/social_media_icons/twitter.png new file mode 100644 index 0000000000..d85cf97ee8 Binary files /dev/null and b/src/images/social_media_icons/twitter.png differ diff --git a/src/images/what-people-say/person1.png b/src/images/what-people-say/person1.png new file mode 100644 index 0000000000..4b683fb230 Binary files /dev/null and b/src/images/what-people-say/person1.png differ diff --git a/src/images/what-people-say/person2.png b/src/images/what-people-say/person2.png new file mode 100644 index 0000000000..9d0370d3d3 Binary files /dev/null and b/src/images/what-people-say/person2.png differ diff --git a/src/images/what-people-say/person3.png b/src/images/what-people-say/person3.png new file mode 100644 index 0000000000..371eea53c5 Binary files /dev/null and b/src/images/what-people-say/person3.png differ diff --git a/src/images/who-we-are/image1.png b/src/images/who-we-are/image1.png new file mode 100644 index 0000000000..e829350112 Binary files /dev/null and b/src/images/who-we-are/image1.png differ diff --git a/src/images/who-we-are/image2.png b/src/images/who-we-are/image2.png new file mode 100644 index 0000000000..721b9fe676 Binary files /dev/null and b/src/images/who-we-are/image2.png differ diff --git a/src/images/who-we-are/image3.png b/src/images/who-we-are/image3.png new file mode 100644 index 0000000000..b00cd79f87 Binary files /dev/null and b/src/images/who-we-are/image3.png differ diff --git a/src/images/what-we-do/what-we-do-1.jpg b/src/images/who-we-are/what-we-do-1.jpg similarity index 100% rename from src/images/what-we-do/what-we-do-1.jpg rename to src/images/who-we-are/what-we-do-1.jpg diff --git a/src/images/what-we-do/what-we-do-2.jpg b/src/images/who-we-are/what-we-do-2.jpg similarity index 100% rename from src/images/what-we-do/what-we-do-2.jpg rename to src/images/who-we-are/what-we-do-2.jpg diff --git a/src/images/what-we-do/what-we-do-3.jpg b/src/images/who-we-are/what-we-do-3.jpg similarity index 100% rename from src/images/what-we-do/what-we-do-3.jpg rename to src/images/who-we-are/what-we-do-3.jpg diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..8b13789179 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1 @@ -'use strict'; + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd54008..b5725d0c82 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,30 @@ @font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; + font-family: 'Open Sans'; font-style: normal; + font-display: swap; + font-weight: 400; + src: + url(@fontsource/open-sans/files/open-sans-latin-400-normal.woff2) + format('woff2'), + url(@fontsource/open-sans/files/open-sans-latin-400-normal.woff) + format('woff'); + unicode-range: + U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, + U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; +} + +@font-face { + font-family: 'Poppins'; + font-style: normal; + font-display: swap; + font-weight: 400; + src: + url(@fontsource/poppins/files/poppins-latin-400-normal.woff) format('woff'), + url(@fontsource/poppins/files/poppins-latin-400-normal.woff2) + format('woff2'); + unicode-range: + U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, + U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; } diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..225e4058ae 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -2,6 +2,980 @@ @import 'fonts'; @import 'typography'; +* { + margin: 0; + padding: 0; + font-family: 'Poppins'; + list-style-type: none; + box-sizing: border-box; +} + +html { + overflow-x: hidden; + scroll-behavior: smooth; +} + body { - background: $c-gray; + display: flex; + flex-direction: column; + font-family: 'Poppins'; + background-color: #eee; + overflow-x: hidden; +} + +a { + color: #fff; + text-decoration: none; +} + +button { + cursor: pointer; + border: none; +} + +textarea { + resize: none; +} + +.main { + display: flex; + flex-direction: column; + gap: 120px; + align-items: center; + + padding: 0 20px; + + @include on-tablet { + gap: 148px; + } +} + +/* #region header */ +.header { + height: 100vh; + padding: 21px 21px 0 21px; + + display: flex; + justify-content: center; + + border-radius: 0 0 16px 16px; + + background-color: #2c2c2c; + + margin-bottom: 120px; + + @include on-tablet { + } + + @include on-small-desktop { + width: 100%; + padding: 21px 20px 24px; + } + + &__box { + max-width: 1150px; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + position: relative; + } + + &__top { + height: 46px; + + overflow: hidden; + + display: flex; + align-items: center; + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 56px; + } + + @include on-small-desktop { + justify-content: space-between; + } + + &__icons { + display: flex; + align-items: center; + flex: 1; + justify-content: flex-start; + gap: 32px; + + @include on-small-desktop { + flex: none; + } + } + + &__navigation { + display: none; + + @include on-small-desktop { + width: 100%; + display: flex; + justify-content: space-evenly; + } + + &__list { + width: 100%; + display: flex; + align-items: center; + justify-content: space-around; + &__links { + font-weight: 700; + font-size: 13px; + line-height: 150%; + letter-spacing: 0.23em; + text-transform: uppercase; + text-align: center; + color: #fff; + } + } + } + + &__hire-us { + font-weight: 700; + font-size: 13px; + line-height: 150%; + letter-spacing: 0.23em; + text-transform: uppercase; + text-align: center; + color: #fff; + position: relative; + transition: 0.3s; + display: block; + + width: 71px; + + &::after { + content: ''; + position: absolute; + background-color: #2060f6; + height: 4px; + bottom: -5px; + left: 0; + width: 100%; + transform: scaleX(0); + transition: transform 0.3s; + } + + &:hover::after { + transform: scaleX(1); + } + } + } + + &__wrapper { + display: flex; + flex-direction: column; + overflow: hidden; + @include on-small-desktop { + height: 100%; + flex-direction: row; + } + } + + &__middle { + width: 100%; + font-family: 'Poppins'; + display: flex; + flex-direction: column; + align-items: start; + height: 360px; + color: #fff; + margin-bottom: 48px; + + @include on-small-desktop { + height: 100%; + justify-content: center; + } + + &__title { + font-weight: 600; + font-size: 52px; + line-height: 120%; + letter-spacing: -0.04em; + margin-bottom: 32px; + + @include on-tablet { + margin-bottom: 24px; + } + } + + &__description { + font-family: 'Open Sans'; + font-weight: 400; + font-size: 18px; + line-height: 150%; + color: #fff; + width: 280px; + margin-bottom: 72px; + + @include on-tablet { + width: 362px; + margin-bottom: 56px; + } + } + + &__button { + font-weight: 600; + font-size: 15px; + text-align: center; + color: #fff; + padding: 15px 95px; + border-radius: 8px; + background-color: #2060f6; + border: none; + } + } + &__bottom { + position: absolute; + top: 70%; + bottom: 0; + left: 0; + right: 0; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-end; + padding: 50px 20px; + flex: 1; + background-image: url(/src/images/slider/slide-img-0.png); + background-size: cover; + background-position: center; + border-radius: 16px; + overflow: hidden; + transition: background-image 0.3s ease; + + color: #fff; + + &--slide-2 { + background-image: url(/src/images/slider/slide-img-1.jpg); + } + + &--slide-3 { + background-image: url(/src/images/slider/slide-img-2.jpg); + } + + @include on-tablet { + top: 60%; + } + + @include on-small-desktop { + top: 15%; + left: 50%; + } + + @include on-small-desktop { + flex-direction: row; + align-items: flex-end; + justify-content: flex-start; + gap: 24px; + } + + &__wrapper { + display: flex; + flex-direction: column; + align-items: flex-start; + &__arrow { + width: 24px; + height: 24px; + } + + &__title { + font-weight: 700; + font-size: 13px; + letter-spacing: 0.23em; + text-transform: uppercase; + text-align: center; + margin-bottom: 8px; + } + + &__description { + font-family: 'Open Sans'; + font-weight: 400; + font-size: 14px; + line-height: 140%; + } + } + } +} + +/* #endregion */ + +/* #region icon and slider */ + +.icon { + width: 24px; + height: 24px; +} + +.icon--burger { + background-image: url(../images/logo/burger.svg); + + @include on-small-desktop { + display: none; + } +} + +.slider { + display: flex; + gap: 16px; + + &__button { + border-radius: 50%; + margin-bottom: 16px; + + @include on-small-desktop { + margin-bottom: 0; + } + } +} + +/* #endregion */ + +/* #region who we are */ +.who-we-are { + display: flex; + flex-direction: column; + align-items: center; + + &__title { + font-weight: 600; + font-size: 32px; + line-height: 150%; + text-align: center; + color: #253757; + margin-bottom: 24px; + } + + &__description { + font-family: 'Open Sans'; + width: 280px; + font-weight: 600; + font-size: 22px; + line-height: 150%; + text-align: center; + color: #6c788b; + + @include on-tablet { + width: 500px; + } + } +} + +/* #endregion */ + +/* #region our expertise */ +.our-expertise { + width: 100%; + display: flex; + align-items: center; + flex-direction: column; + gap: 56px; + background-color: #fff; + border-radius: 16px; + padding: 72px 20px; + + @include on-tablet { + gap: 72px; + } + + &__title { + color: #253757; + font-weight: 600; + font-size: 44px; + line-height: 120%; + text-align: center; + } + + &__wrapper { + display: flex; + flex-direction: column; + + @include on-small-desktop { + flex-direction: row; + width: 100%; + justify-content: space-around; + } + } + + &__section { + display: flex; + align-items: center; + flex-direction: column; + + &__image { + width: 184px; + height: 166px; + margin-bottom: 32px; + border-radius: 16px; + transition: transform 0.3s; + + &:hover { + transform: translateY(-25%); + } + } + + &__title { + color: #253757; + font-weight: 600; + font-size: 20px; + line-height: 140%; + text-align: center; + margin-bottom: 16px; + } + + &__description { + font-family: 'Open Sans'; + width: 280px; + font-weight: 400; + font-size: 14px; + line-height: 150%; + text-align: center; + color: #6c788b; + + @include on-tablet { + width: 362px; + } + + @include on-small-desktop { + width: 214px; + } + } + } +} + +/* #endregion */ + +/* #region services */ + +.services { + width: 100%; + max-width: 1150px; + display: flex; + flex-direction: column; + + @include on-small-desktop { + flex-direction: row; + justify-content: space-between; + } + + &__top { + display: flex; + flex-direction: column; + + // @include on-small-desktop { + // flex-direction: row; + // justify-content: space-evenly; + // } + &__name { + font-weight: 700; + font-size: 13px; + letter-spacing: 0.23em; + text-transform: uppercase; + color: #c0cdd7; + margin-bottom: 16px; + } + + &__title { + font-weight: 600; + font-size: 32px; + line-height: 130%; + margin-bottom: 24px; + } + + &__description { + font-family: 'Open Sans'; + + font-weight: 400; + font-size: 14px; + line-height: 150%; + color: #6c788b; + margin-bottom: 48px; + + @include on-tablet { + width: 264px; + } + } + } + + &__cards { + display: grid; + grid-template-columns: 1fr; + gap: 30px; + justify-items: center; + + @include on-tablet { + grid-template-columns: repeat(2, 1fr); + } + + @include on-small-desktop { + margin-top: 50px; + } + } + + &__card { + width: 100%; + max-width: 260px; + background-color: #fff; + border-radius: 16px; + padding: 32px; + box-sizing: border-box; + transition: transform 0.3s; + + &:hover { + transform: scale(1.03); + } + + @include on-tablet { + max-width: 280px; + &:nth-child(2), + &:nth-child(4) { + transform: translateY(-50%); + + &:hover { + transform: translateY(-50%) scale(1.03); + } + } + } + + // @include on-tablet { + // width: 264px; + // } + &__title { + font-weight: 600; + font-size: 13px; + text-transform: uppercase; + color: #2060f6; + margin-bottom: 24px; + width: 46px; + background-color: $c-gray; + border-radius: 16px; + text-align: center; + padding: 12px 2px; + } + + &__description { + font-family: 'Open Sans'; + + font-weight: 600; + font-size: 13px; + line-height: 150%; + color: #6c788b; + margin-bottom: 32px; + } + + &__learn-more { + display: flex; + align-items: center; + gap: 16px; + + &__button { + background-color: #fff; + } + + &__text { + font-weight: 600; + font-size: 15px; + text-align: center; + color: #334563; + } + } + } +} + +/* #endregion */ + +/* #region testimonials */ + +.testimonials { + display: flex; + flex-direction: column; + width: 100%; + max-width: 1150px; + + &__text { + font-weight: 700; + font-size: 13px; + letter-spacing: 0.23em; + text-transform: uppercase; + color: #c0cdd7; + } + + &__title { + width: 280px; + font-weight: 600; + font-size: 32px; + line-height: 150%; + color: #253757; + margin-bottom: 42px; + + @include on-tablet { + width: 179px; + } + + @include on-small-desktop { + margin-bottom: 85px; + } + } + + &__cards { + display: flex; + flex-direction: column; + align-items: center; + gap: 24px; + + @include on-tablet { + gap: 30px; + } + + @include on-small-desktop { + flex-direction: row; + gap: 20px; + } + } + + &__card { + width: 100%; + padding: 32px 42px; + background-color: #fff; + border-radius: 16px; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + + transition: transform 0.3s; + + &:hover { + transform: scale(1.03); + } + + &__quote { + width: 21px; + height: 19px; + margin-bottom: 12px; + } + + &__description { + font-family: 'Open Sans'; + + font-weight: 600; + font-size: 13px; + line-height: 150%; + text-align: center; + color: #6c788b; + margin-bottom: 16px; + } + + &__name { + font-family: 'Open Sans'; + + font-weight: 600; + font-size: 13px; + line-height: 150%; + text-align: center; + margin-bottom: 4px; + } + + &__position { + font-weight: 700; + font-size: 13px; + letter-spacing: 0.23em; + text-transform: uppercase; + text-align: center; + color: #c0cdd7; + } + } } + +.card__wrapper { + margin-top: 75px; + margin-bottom: 24px; + display: flex; + flex-direction: column; + align-items: center; + position: relative; + height: 196px; + width: 196px; + + &__blob { + position: absolute; + border-radius: 12px; + width: 45px; + height: 105px; + background: #2060f6; + transform: rotate(35deg); + z-index: 1; + + &--top { + top: -36px; + left: 35px; + } + &--bottom { + bottom: 50px; + right: 35px; + } + } + + &__image { + position: relative; + z-index: 2; + + &__img { + border-radius: 50%; + width: 110px; + height: 110px; + } + } +} +/* #endregion */ + +/* #region services */ +.vision { + display: flex; + flex-direction: column; + align-items: center; + background-image: url(/src/images/Shapes.png); + width: 100%; + background-position: center; + background-repeat: no-repeat; + padding-top: 72px; + padding-bottom: 72px; + overflow-x: hidden; + background-color: #fff; + + &__title { + font-weight: 600; + font-size: 44px; + line-height: 120%; + text-align: center; + margin-bottom: 24px; + width: 280px; + + @include on-tablet { + width: 471px; + } + + @include on-small-desktop { + width: 754px; + } + } + + &__description { + font-family: 'Open Sans'; + + font-weight: 600; + font-size: 22px; + line-height: 150%; + text-align: center; + color: #6c788b; + margin-bottom: 30px; + width: 280px; + + @include on-tablet { + width: 558px; + } + + @include on-small-desktop { + width: 754px; + } + } + + &__btn { + font-weight: 600; + font-size: 15px; + text-align: center; + color: #fff; + margin: auto auto; + color: #fff; + border-radius: 8px; + background-color: #2060f6; + padding: 16px 110px; + } +} +/* #endregion */ + +/* #region footer */ +.footer { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + gap: 80px; + background-color: #2c2c2c; + border-radius: 16px 16px 0 0; + padding: 72px 20px 80px 20px; + + @include on-small-desktop { + padding: 72px 20px 80px 20px; + } + + &__wrapper { + max-width: 1150px; + width: 100%; + display: flex; + flex-direction: column; + gap: 120px; + @include on-small-desktop { + justify-content: space-between; + flex-direction: row; + } + + &__form { + @include on-small-desktop { + } + } + } + + &__title { + font-weight: 600; + font-size: 32px; + line-height: 130%; + color: #fff; + + margin-bottom: 56px; + } + + &__form { + display: flex; + flex-direction: column; + gap: 40px; + + &__input { + font-weight: 600; + font-size: 15px; + color: #fff; + height: 30px; + background: transparent; + border: none; + border-bottom: 2px solid #fff; + outline: none; + + @include on-tablet { + width: 364px; + } + + &::placeholder { + font-weight: 600; + font-size: 15px; + + transition: opacity 0.3s; + } + + &:focus { + outline: none; + border-bottom: 2px solid #144ed4; + + &::placeholder { + opacity: 0; + } + } + } + } + + &__button { + font-weight: 600; + font-size: 15px; + text-align: center; + margin: 0 auto; + width: 100%; + height: 56px; + background-color: #144ed4; + color: #fff; + border-radius: 8px; + font-weight: 600; + font-size: 15px; + + @include on-tablet { + width: 264px; + margin: 0; + } + } + + &__contact { + &__title { + color: #fff; + font-weight: 600; + font-size: 32px; + line-height: 150%; + margin-bottom: 48px; + } + + &__contacts { + display: flex; + flex-direction: column; + gap: 40px; + + &__links { + &__text { + font-weight: 700; + font-size: 13px; + letter-spacing: 0.23em; + text-transform: uppercase; + color: #6c788b; + } + + &__adress { + font-weight: 600; + font-size: 24px; + line-height: 150%; + color: #fff; + } + } + + &__medias { + &__text { + font-weight: 700; + font-size: 13px; + letter-spacing: 0.23em; + text-transform: uppercase; + color: #6c788b; + margin-bottom: 16px; + } + + &__network { + display: flex; + gap: 32px; + } + } + } + } + + &__links { + width: 100%; + display: flex; + flex-direction: column; + gap: 24px; + + @include on-small-desktop { + flex-direction: row; + justify-content: space-around; + } + + &__navigation { + display: flex; + flex-direction: column; + gap: 24px; + + @include on-tablet { + flex-direction: row; + gap: 40px; + } + &__link { + font-weight: 700; + font-size: 13px; + line-height: 150%; + color: #fff; + text-transform: uppercase; + letter-spacing: 0.23em; + } + } + } +} + +/* #endregion */ diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3e..ca492a2de7 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,3 @@ %h1 { - font-family: Roboto, sans-serif; font-weight: 400; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..331da135f2 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,33 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-small-desktop { + @media (min-width: $small-desktop-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-design { + @media (min-width: $design-min-width) { + @content; + } +} + +@mixin on-large-screens { + @media (min-width: $large-screens-min-width) { + @content; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..181d848ead 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,6 @@ $c-gray: #eee; +$tablet-min-width: 576px; +$small-desktop-min-width: 1024px; +$desktop-min-width: 1280px; +$design-min-width: 1600px; +$large-screens-min-width: 2560px;