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/index.html b/index.html index 1eca937738..f149d7ff49 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,674 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Dia + DIA + + + + + + + + -

Dia

+
+ +
+

Strategic Agency

+

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

+ + Learn more + +
+
+
+ slide +
+
+ + +
+

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 +

+
+
+
+ decorative shapes + Tal Gilad +
+

+ 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

+
+ +
+
+ decorative shapes + Azadeh Hawkins +
+

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

+

Azadeh Hawkins

+

Hawkins Consulting

+
+ +
+
+ decorative shapes + Michel Grover +
+

+ 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 + +
+
+
+ + + diff --git a/package-lock.json b/package-lock.json index 1b7e1f550b..37ec2f69ee 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", @@ -8721,20 +8722,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..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/favicon_io/about.txt b/src/images/favicon_io/about.txt new file mode 100644 index 0000000000..48b18f8572 --- /dev/null +++ b/src/images/favicon_io/about.txt @@ -0,0 +1,6 @@ +This favicon was generated using the following font: + +- Font Title: Libertinus Serif Display +- Font Author: undefined +- Font Source: https://fonts.gstatic.com/s/libertinusserifdisplay/v2/0FlHVOmbklub_P32Hm53RVREi5BsXWudOF_Gpgcrg81gHhVOxQ.ttf +- Font License: undefined) diff --git a/src/images/favicon_io/android-chrome-192x192.png b/src/images/favicon_io/android-chrome-192x192.png new file mode 100644 index 0000000000..4da991f21f Binary files /dev/null and b/src/images/favicon_io/android-chrome-192x192.png differ diff --git a/src/images/favicon_io/android-chrome-512x512.png b/src/images/favicon_io/android-chrome-512x512.png new file mode 100644 index 0000000000..35afa37d74 Binary files /dev/null and b/src/images/favicon_io/android-chrome-512x512.png differ diff --git a/src/images/favicon_io/apple-touch-icon.png b/src/images/favicon_io/apple-touch-icon.png new file mode 100644 index 0000000000..06d8bafdac Binary files /dev/null and b/src/images/favicon_io/apple-touch-icon.png differ diff --git a/src/images/favicon_io/favicon-16x16.png b/src/images/favicon_io/favicon-16x16.png new file mode 100644 index 0000000000..0a27614fc6 Binary files /dev/null and b/src/images/favicon_io/favicon-16x16.png differ diff --git a/src/images/favicon_io/favicon-32x32.png b/src/images/favicon_io/favicon-32x32.png new file mode 100644 index 0000000000..dfb13c1134 Binary files /dev/null and b/src/images/favicon_io/favicon-32x32.png differ diff --git a/src/images/favicon_io/favicon.ico b/src/images/favicon_io/favicon.ico new file mode 100644 index 0000000000..f8895853fd Binary files /dev/null and b/src/images/favicon_io/favicon.ico differ diff --git a/src/images/favicon_io/site.webmanifest b/src/images/favicon_io/site.webmanifest new file mode 100644 index 0000000000..630fcab6fc --- /dev/null +++ b/src/images/favicon_io/site.webmanifest @@ -0,0 +1 @@ +{"name":"","short_name":"","icons":[{"src":"android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file diff --git a/src/images/icon/Menu.svg b/src/images/icon/Menu.svg new file mode 100644 index 0000000000..374d372c5a --- /dev/null +++ b/src/images/icon/Menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/favicon.svg b/src/images/icon/favicon.svg new file mode 100644 index 0000000000..e5cb0ddaa3 --- /dev/null +++ b/src/images/icon/favicon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/slider/mdi_arrow_forward.svg b/src/images/slider/mdi_arrow_forward.svg new file mode 100644 index 0000000000..abcb7f51b8 --- /dev/null +++ b/src/images/slider/mdi_arrow_forward.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/socials/facebook 1.svg b/src/images/socials/facebook 1.svg new file mode 100644 index 0000000000..b6bc5a936d --- /dev/null +++ b/src/images/socials/facebook 1.svg @@ -0,0 +1,10 @@ + + + + + + + + + + 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 1.svg b/src/images/socials/twitter 1.svg new file mode 100644 index 0000000000..74cbdbf5d4 --- /dev/null +++ b/src/images/socials/twitter 1.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..9583d6a60a 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,35 @@ 'use strict'; + +const navToggle = document.getElementById('nav-toggle'); +const nav = document.getElementById('nav'); +const navClose = document.getElementById('nav-close'); + +navToggle.addEventListener('click', function (event) { + event.preventDefault(); + nav.classList.add('nav--open'); +}); + +navClose.addEventListener('click', function () { + nav.classList.remove('nav--open'); +}); + +nav.querySelectorAll('.nav__link').forEach(function (link) { + link.addEventListener('click', function () { + nav.classList.remove('nav--open'); + }); +}); + +const contactForm = document.getElementById('contact-form'); + +contactForm.addEventListener('submit', function (event) { + event.preventDefault(); + + if (!contactForm.checkValidity()) { + contactForm.reportValidity(); + + return; + } + + contactForm.reset(); + window.scrollTo({ top: 0, behavior: 'smooth' }); +}); diff --git a/src/styles/_base.scss b/src/styles/_base.scss new file mode 100644 index 0000000000..ef96cdafe2 --- /dev/null +++ b/src/styles/_base.scss @@ -0,0 +1,34 @@ +html { + scroll-behavior: smooth; +} + +body { + overflow-x: hidden; + margin: 0; + font-family: $f-body; + background-color: $c-bg; +} + +main { + display: flex; + flex-direction: column; + gap: 120px; + + box-sizing: border-box; + padding: 120px 20px; + + @media (min-width: $bp-tablet) { + gap: 148px; + padding: 148px 41px; + } + + @media (min-width: $bp-desktop) { + gap: 148px; + padding: 148px 54px; + } + + @media (min-width: $bp-large) { + max-width: $bp-large; + margin: 0 auto; + } +} diff --git a/src/styles/_button.scss b/src/styles/_button.scss new file mode 100644 index 0000000000..bd191e8170 --- /dev/null +++ b/src/styles/_button.scss @@ -0,0 +1,24 @@ +.button { + cursor: pointer; + + display: block; + + padding: 18px; + border: none; + border-radius: 8px; + + font-family: $f-poppins; + font-size: 15px; + font-weight: 600; + color: $c-white; + text-align: center; + text-decoration: none; + + background: $c-blue; + + transition: background-color 0.3s; + + &:hover { + background-color: $c-blue-light; + } +} diff --git a/src/styles/_expertise.scss b/src/styles/_expertise.scss new file mode 100644 index 0000000000..d6c0b03196 --- /dev/null +++ b/src/styles/_expertise.scss @@ -0,0 +1,101 @@ +.expertise { + margin-right: -20px; + margin-left: -20px; + padding: 72px 20px; + border-radius: $r-card; + + background: $c-white; + + &__title { + font-family: $f-poppins; + font-size: 44px; + font-weight: 600; + line-height: 120%; + color: $c-navy; + text-align: center; + + @media (min-width: $bp-desktop) { + font-size: 52px; + line-height: 150%; + } + } + + &__content { + display: flex; + flex-wrap: wrap; + gap: 56px; + justify-content: center; + + margin-top: 56px; + + @media (min-width: $bp-desktop) { + flex-wrap: nowrap; + justify-content: space-between; + } + } + + &__item { + display: flex; + flex-direction: column; + align-items: center; + transition: transform 0.3s; + + &:hover { + transform: translateY(-8px); + } + + &-title { + margin-top: 32px; + + font-family: $f-poppins; + font-size: 20px; + font-weight: 600; + line-height: 140%; + color: $c-navy; + text-align: center; + } + + &-description { + margin-top: 16px; + + font-size: 14px; + font-weight: 400; + line-height: 150%; + color: $c-gray-text; + text-align: center; + } + + @media (min-width: $bp-tablet) { + width: 362px; + height: 305px; + } + + @media (min-width: $bp-desktop) { + width: 214px; + height: 334px; + } + } + + &__icon { + width: 166px; + height: 166px; + border-radius: 20px; + transition: box-shadow 0.3s; + + .expertise__item:hover & { + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); + } + } + + @media (min-width: $bp-tablet) { + margin-right: -41px; + margin-left: -41px; + padding: 72px 41px; + } + + @media (min-width: $bp-desktop) { + margin-right: -80px; + margin-left: -80px; + padding: 128px 54px; + } +} 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/_footer.scss b/src/styles/_footer.scss new file mode 100644 index 0000000000..68e43f9f6f --- /dev/null +++ b/src/styles/_footer.scss @@ -0,0 +1,228 @@ +.footer { + box-sizing: border-box; + padding: 72px 20px; + border-radius: $r-card $r-card 0 0; + background: $c-dark; + + &__logo { + display: block; + line-height: 0; + } + + &__nav { + padding-top: 40px; + + @media (min-width: $bp-desktop) { + grid-column: 1 / -1; + } + } + + &__nav-list { + display: flex; + flex-direction: column; + gap: 16px; + + margin: 24px 0 0; + padding: 0; + + list-style: none; + + @media (min-width: $bp-tablet) { + flex-direction: row; + align-items: center; + justify-content: space-between; + } + } + + &__nav-link { + font-family: $f-poppins; + font-size: 13px; + font-weight: 700; + color: $c-white; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 3px; + + transition: color 0.3s; + + &:hover { + color: $c-blue-light; + } + } + + @media (min-width: $bp-tablet) { + padding: 180px 41px 80px; + } + + @media (min-width: $bp-desktop) { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 104px 98px; + padding: 180px 54px 40px; + } + + @media (min-width: $bp-large) { + max-width: $bp-large; + margin: 0 auto; + } +} + +.contact-form { + margin-bottom: 64px; + + &__title { + margin: 0 0 40px; + + font-family: $f-poppins; + font-size: 32px; + font-weight: 600; + line-height: 130%; + color: $c-white; + } + + &__form { + display: flex; + flex-direction: column; + gap: 24px; + } + + &__input { + box-sizing: border-box; + width: 100%; + padding: 12px 0; + border: none; + border-bottom: 1px solid rgba($c-white, 0.3); + + font-family: $f-body; + font-size: 15px; + color: $c-white; + + background: transparent; + outline: none; + + transition: border-color 0.3s; + + &::placeholder { + color: rgba($c-white, 0.4); + } + + &:focus { + border-color: $c-blue-light; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + -webkit-box-shadow: 0 0 0 1000px $c-dark inset; + transition: background-color 9999s ease-in-out 0s; + + -webkit-text-fill-color: $c-white; + } + } + + &__textarea { + resize: vertical; + min-height: 72px; + font-family: inherit; + } + + &__button { + align-self: flex-start; + padding: 18px 48px; + + @media (min-width: $bp-tablet) { + margin-top: 80px; + padding: 18px 104px; + } + } + + @media (min-width: $bp-tablet) { + width: 362px; + margin-bottom: 120px; + } + + @media (min-width: $bp-desktop) { + width: auto; + margin-bottom: 0; + } +} + +.contact-info { + margin-bottom: 64px; + + &__title { + margin: 0 0 40px; + + font-family: $f-poppins; + font-size: 32px; + font-weight: 600; + line-height: 130%; + color: $c-white; + } + + &__item { + margin-bottom: 32px; + + @media (min-width: $bp-tablet) { + margin-bottom: 40px; + } + } + + &__label { + margin: 0 0 8px; + + font-family: $f-poppins; + font-size: 13px; + font-weight: 700; + color: rgba($c-white, 0.5); + text-transform: uppercase; + letter-spacing: 3px; + } + + &__value { + display: block; + + margin: 0; + + font-size: 24px; + font-weight: 600; + line-height: 150%; + color: $c-white; + + &--link { + text-decoration: none; + transition: color 0.3s; + + &:hover { + color: $c-blue-light; + } + } + } + + &__socials { + display: flex; + gap: 24px; + margin-top: 8px; + } + + &__social-link { + display: flex; + align-items: center; + justify-content: center; + + img { + display: block; + width: 32px; + height: 32px; + } + } + + @media (min-width: $bp-tablet) { + width: 362px; + } + + @media (min-width: $bp-desktop) { + width: auto; + margin-bottom: 0; + } +} diff --git a/src/styles/_header.scss b/src/styles/_header.scss new file mode 100644 index 0000000000..5a0ac38892 --- /dev/null +++ b/src/styles/_header.scss @@ -0,0 +1,214 @@ +.logo { + width: 46px; + height: 28px; +} + +.icon { + display: block; + width: 24px; + height: 24px; + + &--menu { + background-image: url('../images/icon/Menu.svg'); + background-repeat: no-repeat; + background-size: contain; + } +} + +.header { + position: relative; + + display: flex; + flex-direction: column; + + box-sizing: border-box; + width: 100%; + border-radius: 0 0 $r-card $r-card; + + background: $c-dark; + + &__nav { + display: flex; + gap: 32px; + align-items: center; + padding: 20px; + } + + &__nav-list { + display: none; + margin: 0; + padding: 0; + list-style: none; + } + + &__nav-link { + font-family: $f-poppins; + font-size: 13px; + font-weight: 700; + color: $c-white; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 3px; + + transition: color 0.3s; + + &:hover { + color: $c-blue-light; + } + } + + &__logo { + display: block; + line-height: 0; + } + + &__button { + margin-left: auto; + padding-bottom: 8px; + border-bottom: 2px solid $c-blue-light; + + font-family: $f-poppins; + font-size: 13px; + font-weight: 700; + color: $c-white; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 3px; + + transition: color 0.3s; + + &:hover { + color: $c-blue-light; + } + } + + &__top { + display: flex; + flex-direction: column; + padding: 20px 20px 42px; + } + + &__title { + margin: 48px 0 32px; + + font-family: $f-poppins; + font-size: 52px; + font-weight: 600; + line-height: 120%; + color: $c-white; + } + + &__description { + margin: 0 0 72px; + + font-size: 18px; + font-weight: 400; + line-height: 150%; + color: $c-white; + } + + &__bottom { + position: relative; + height: 390px; + } + + @media (min-width: $bp-tablet) { + &__nav { + padding: 20px 41px; + } + + &__top { + padding: 0 41px 147px; + } + + &__description { + max-width: 400px; + } + + &__title { + font-size: 60px; + line-height: 68px; + } + + &__top .button { + align-self: flex-start; + box-sizing: border-box; + width: 264px; + } + } + + @media (min-width: $bp-desktop) { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto 1fr; + + height: 100vh; + border-radius: 0 0 $r-card $r-card; + + &__nav { + grid-column: 1 / -1; + grid-row: 1; + min-width: 0; + padding: 58px 54px 48px; + } + + &__nav-list { + display: flex; + flex: 1; + flex-wrap: wrap; + gap: 16px 40px; + align-items: center; + justify-content: center; + + min-width: 0; + } + + &__button { + position: relative; + top: 6px; + margin-left: 0; + } + + .icon--menu { + display: none; + } + + &__top { + grid-column: 1; + grid-row: 2; + justify-content: center; + + min-width: 0; + padding: 60px; + } + + &__bottom { + grid-column: 2; + grid-row: 2; + min-width: 0; + height: auto; + } + + &__title { + margin-top: 0; + font-size: 72px; + line-height: 120%; + } + + &__description { + max-width: 460px; + margin-bottom: 84px; + } + + &__top .button { + align-self: flex-start; + box-sizing: border-box; + width: 264px; + } + } + + @media (min-width: $bp-large) { + max-width: $bp-large; + margin: 0 auto; + } +} diff --git a/src/styles/_nav.scss b/src/styles/_nav.scss new file mode 100644 index 0000000000..fa8d98d509 --- /dev/null +++ b/src/styles/_nav.scss @@ -0,0 +1,71 @@ +.nav { + position: fixed; + z-index: 100; + inset: 0; + transform: translateX(100%); + + display: flex; + flex-direction: column; + + padding: 20px; + + background: $c-dark; + + transition: transform 0.3s ease; + + &--open { + transform: translateX(0); + } + + &__logo { + display: block; + line-height: 0; + } + + &__header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 56px; + } + + &__close { + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + padding: 0; + border: none; + + background: none; + } + + &__list { + display: flex; + flex-direction: column; + gap: 32px; + + margin: 0; + padding: 0; + + list-style: none; + } + + &__link { + font-family: $f-poppins; + font-size: 28px; + font-weight: 700; + color: #fff; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 3px; + + transition: color 0.3s; + + &:hover { + color: $c-blue-light; + } + } +} diff --git a/src/styles/_services.scss b/src/styles/_services.scss new file mode 100644 index 0000000000..c354b4a6be --- /dev/null +++ b/src/styles/_services.scss @@ -0,0 +1,228 @@ +.services { + &__label { + @extend %section-label; + } + + &__title { + margin: 0; + padding: 16px 0 24px; + + font-family: $f-poppins; + font-size: 32px; + font-weight: 600; + line-height: 130%; + color: $c-navy; + } + + &__description { + padding-bottom: 32px; + + font-size: 14px; + font-weight: 400; + line-height: 150%; + color: $c-gray-text; + } + + &__list { + display: flex; + flex-direction: column; + gap: 24px; + } + + &__item { + transform: var(--card-shift, none); + + display: flex; + flex-direction: column; + + box-sizing: border-box; + width: 100%; + padding: 30px; + border-radius: 20px; + + background-color: $c-white; + + transition: + transform 0.3s, + box-shadow 0.3s; + + &:hover { + transform: var(--card-shift, none) scale(1.03); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); + } + } + + &__number { + display: inline-block; + align-self: flex-start; + + padding: 5px 16px; + border-radius: 23px; + + font-family: $f-poppins; + font-size: 13px; + font-weight: 600; + line-height: 150%; + color: $c-blue; + text-align: center; + text-transform: uppercase; + + background-color: rgba($c-blue, 0.1); + } + + &__tags { + margin: 32px 0 auto; + padding: 0; + list-style: none; + } + + &__tag { + font-size: 13px; + font-weight: 600; + line-height: 150%; + color: $c-gray-text; + } + + &__link { + display: flex; + gap: 16px; + align-items: center; + + margin-top: 24px; + + font-family: $f-poppins; + font-size: 15px; + font-weight: 600; + line-height: 100%; + color: $c-navy; + text-decoration: none; + + transition: color 0.3s; + + &-icon { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + + width: 48px; + height: 48px; + border-radius: 50%; + + background-color: $c-blue; + + transition: background-color 0.3s; + + img { + width: 20px; + height: 20px; + filter: brightness(0) invert(1); + } + } + + &:hover { + color: $c-blue; + } + + &:hover &-icon { + background-color: $c-blue-light; + } + } + + @media (min-width: $bp-tablet) { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0 30px; + align-items: start; + + min-height: 926px; + + &__info { + grid-column: 1; + grid-row: 1 / 4; + } + + &__list { + display: contents; + } + + &__item { + &:nth-child(1) { + grid-column: 1; + grid-row: 4; + } + + &:nth-child(2) { + grid-column: 2; + grid-row: 2 / 5; + margin-top: 100px; + } + + &:nth-child(3) { + grid-column: 1; + grid-row: 5; + margin-top: 30px; + } + + &:nth-child(4) { + grid-column: 2; + grid-row: 5; + margin-top: -90px; + } + } + } + + @media (min-width: $bp-desktop) { + column-gap: 176px; + align-items: start; + min-height: 0; + + &__info { + grid-column: 1; + grid-row: 1; + padding-top: 125px; + } + + &__list { + display: grid; + grid-column: 2; + grid-row: 1; + grid-template-columns: repeat(2, 214px); + grid-template-rows: repeat(2, 264px); + gap: 20px; + } + + &__item { + width: 214px; + height: 264px; + margin: 0; + + &:nth-child(1) { + --card-shift: translateY(-50%); + + grid-column: 1; + grid-row: 2; + } + + &:nth-child(2) { + grid-column: 2; + grid-row: 1; + margin-top: 0; + } + + &:nth-child(3) { + --card-shift: translateY(-50%); + + grid-column: 1; + grid-row: 3; + } + + &:nth-child(4) { + --card-shift: translateY(100px); + + grid-column: 2; + grid-row: 2; + } + } + } +} diff --git a/src/styles/_slider.scss b/src/styles/_slider.scss new file mode 100644 index 0000000000..a0bf1b0ef1 --- /dev/null +++ b/src/styles/_slider.scss @@ -0,0 +1,118 @@ +.slider { + position: absolute; + right: 0; + bottom: 0; + + overflow: hidden; + + width: 100%; + height: 100%; + border-radius: $r-card; + + &__image { + position: absolute; + top: 0; + left: 0; + + width: 100%; + height: 100%; + + object-fit: cover; + } + + &__content { + position: absolute; + right: 0; + bottom: 0; + left: 0; + + padding: 20px; + + @media (min-width: $bp-desktop) { + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto auto; + column-gap: 32px; + align-items: center; + + padding: 0 54px 48px 78px; + } + } + + &__controls { + display: flex; + gap: 12px; + margin-bottom: 16px; + + @media (min-width: $bp-desktop) { + grid-area: 1 / 1 / 3 / 2; + margin-bottom: 0; + } + } + + &__arrow { + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + width: 32px; + height: 32px; + border: none; + border-radius: 50%; + + background: $c-white; + + transition: background-color 0.3s; + + &-icon { + width: 8px; + height: 8px; + filter: invert(1); + } + + &:hover { + background-color: $c-blue-light; + } + + &:hover &-icon { + filter: brightness(0) invert(1); + } + + @media (min-width: $bp-desktop) { + width: 32px; + height: 32px; + } + } + + &__label { + margin: 0 0 8px; + + font-family: $f-poppins; + font-size: 13px; + font-weight: 700; + color: $c-white; + text-transform: uppercase; + letter-spacing: 3px; + + @media (min-width: $bp-desktop) { + grid-column: 2; + grid-row: 1; + } + } + + &__description { + margin: 0; + + font-size: 14px; + font-weight: 400; + line-height: 1.4; + color: $c-white; + + @media (min-width: $bp-desktop) { + grid-column: 2; + grid-row: 2; + } + } +} diff --git a/src/styles/_testimonials.scss b/src/styles/_testimonials.scss new file mode 100644 index 0000000000..6832e39174 --- /dev/null +++ b/src/styles/_testimonials.scss @@ -0,0 +1,149 @@ +.testimonials { + &__label { + @extend %section-label; + } + + &__break { + display: none; + + @media (min-width: $bp-tablet) { + display: inline; + } + } + + &__title { + margin: 0; + padding: 16px 0; + + font-family: $f-poppins; + font-size: 32px; + font-weight: 600; + line-height: 150%; + color: $c-navy; + + @media (min-width: $bp-tablet) { + letter-spacing: 0; + vertical-align: middle; + } + } + + &__content { + display: flex; + flex-direction: column; + gap: 24px; + margin-top: 40px; + + @media (min-width: $bp-desktop) { + display: flex; + flex-direction: row; + gap: 20px; + align-items: center; + justify-content: center; + } + } +} + +.testimonial { + padding: 40px 24px; + border-radius: 20px; + + text-align: center; + + background: $c-white; + + transition: + transform 0.3s, + box-shadow 0.3s; + + &:hover { + transform: translateY(-8px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); + } + + &__avatar { + position: relative; + + display: flex; + align-items: center; + justify-content: center; + + margin-bottom: 32px; + + @media (min-width: $bp-tablet) { + align-self: center; + width: 250px; + height: 250px; + margin-bottom: 0; + } + } + + &__shapes { + width: 160px; + } + + &__photo { + position: absolute; + + width: 80px; + height: 80px; + border-radius: 50%; + + object-fit: cover; + } + + &__quote { + margin: 0 0 24px; + font-size: 14px; + line-height: 160%; + color: $c-gray-text; + + &::before { + content: '\201C'; + + display: block; + + font-size: 48px; + font-weight: 700; + line-height: 1; + color: $c-blue; + } + + @media (min-width: $bp-tablet) { + // width: 362px; + align-self: center; + } + } + + &__name { + margin: 0 0 8px; + + font-family: $f-poppins; + font-size: 16px; + font-weight: 700; + color: $c-navy; + } + + &__company { + margin: 0; + + font-family: $f-poppins; + font-size: 12px; + font-weight: 700; + color: $c-gray-label; + text-transform: uppercase; + letter-spacing: 2px; + } + + @media (min-width: $bp-tablet) { + display: flex; + flex-direction: column; + justify-content: space-evenly; + + box-sizing: border-box; + height: 478px; + } + + @media (min-width: $bp-desktop) { + width: 292px; + } +} diff --git a/src/styles/_vision.scss b/src/styles/_vision.scss new file mode 100644 index 0000000000..73502fb238 --- /dev/null +++ b/src/styles/_vision.scss @@ -0,0 +1,90 @@ +.vision { + margin-right: -20px; + margin-left: -20px; + text-align: center; + background-color: $c-white; + + &__content { + padding: 72px 20px; + + @media (min-width: $bp-tablet) { + width: 558px; + padding: 0; + } + + @media (min-width: $bp-desktop) { + width: 754px; + padding: 0; + } + } + + &__title { + margin: 0 0 32px; + + font-family: $f-poppins; + font-size: 40px; + font-weight: 700; + line-height: 120%; + color: $c-navy; + + @media (min-width: $bp-tablet) { + align-items: center; + + font-size: 52px; + font-weight: 600; + line-height: 120%; + letter-spacing: 0; + } + + @media (min-width: $bp-desktop) { + line-height: 150%; + } + } + + .button { + @media (min-width: $bp-tablet) { + width: 264px; + margin: 0 auto; + } + } + + &__description { + margin: 0 0 48px; + + font-family: $f-body; + font-size: 18px; + line-height: 160%; + color: $c-gray-text; + + @media (min-width: $bp-tablet) { + margin-bottom: 64px; + + font-size: 24px; + font-weight: 600; + line-height: 150%; + text-align: center; + letter-spacing: 0; + } + } + + @media (min-width: $bp-tablet) { + display: flex; + align-items: center; + justify-content: center; + + height: 796px; + margin-right: -41px; + margin-bottom: -148px; + margin-left: -41px; + border-radius: $r-card; + + background-image: url('../images/Shapes.png'); + background-repeat: repeat-y; + background-size: cover; + } + + @media (min-width: $bp-desktop) { + margin-right: -80px; + margin-left: -80px; + } +} diff --git a/src/styles/_who-we-are.scss b/src/styles/_who-we-are.scss new file mode 100644 index 0000000000..85b331567e --- /dev/null +++ b/src/styles/_who-we-are.scss @@ -0,0 +1,30 @@ +.who-we-are { + &__content { + max-width: 800px; + margin: 0 auto; + + @media (min-width: $bp-desktop) { + padding-right: 154px; + padding-left: 154px; + } + } + + &__title { + font-family: $f-poppins; + font-size: 32px; + font-weight: 600; + line-height: 150%; + color: $c-navy; + text-align: center; + } + + &__description { + margin: 24px 0 0; + + font-size: 22px; + font-weight: 600; + line-height: 150%; + color: $c-gray-text; + text-align: center; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..e9c921be62 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,13 @@ @import 'utils'; @import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import 'base'; +@import 'button'; +@import 'header'; +@import 'slider'; +@import 'nav'; +@import 'who-we-are'; +@import 'expertise'; +@import 'services'; +@import 'testimonials'; +@import 'vision'; +@import 'footer'; diff --git a/src/styles/style.css b/src/styles/style.css new file mode 100644 index 0000000000..84f1b8943e --- /dev/null +++ b/src/styles/style.css @@ -0,0 +1,637 @@ +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + font-family: 'Open Sans', Arial, sans-serif; + background-color: #f2f6fa; +} + +.header { + background: #2c2c2c; + height: 100vh; + box-sizing: border-box; + border-radius: 0 0 30px 30px; + + display: flex; + flex-direction: column; +} + +.header__top { + display: flex; + flex-direction: column; + padding: 20px 20px 42px; +} + +.header__nav { + display: flex; + align-items: center; + gap: 32px; +} + +.logo { + width: 46px; + height: 28px; +} + +.header__logo { + display: block; + line-height: 0; +} + +.icon { + display: block; + width: 24px; + height: 24px; +} + +.icon--menu { + background-image: url('../images/icon/Menu.svg'); + background-repeat: no-repeat; + background-size: contain; +} + +.header__button { + font-family: Poppins, Arial, sans-serif; + margin-left: auto; + color: #fff; + text-decoration: none; + text-transform: uppercase; + font-size: 13px; + font-weight: 700; + letter-spacing: 3px; + border-bottom: 2px solid #4e6ef2; + padding-bottom: 8px; +} + +.header__title { + font-family: Poppins, Arial, sans-serif; + margin: 48px 0 32px; + color: #fff; + font-size: 52px; + font-weight: 600; + line-height: 120%; +} + +.header__description { + margin: 0 0 72px; + color: #fff; + font-size: 18px; + font-weight: 400; + line-height: 150%; +} + +.button { + display: block; + background: #2060f6; + color: #fff; + text-align: center; + text-decoration: none; + font-family: Poppins, Arial, sans-serif; + font-size: 15px; + font-weight: 600; + padding: 18px; + border-radius: 8px; + border: none; + cursor: pointer; +} + +.header__bottom { + flex: 1; + min-height: 0; + display: flex; +} + +.slider { + flex: 1; + min-height: 0; + position: relative; + border-radius: 30px; + overflow: hidden; +} + +.slider__image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; +} + +.slider__content { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 20px; +} + +.slider__controls { + display: flex; + gap: 12px; + margin-bottom: 16px; +} + +.slider__arrow { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 50%; + border: none; + background: #fff; + cursor: pointer; +} + +.slider__arrow-icon { + width: 18px; + height: 18px; + filter: invert(1); +} + +.slider__label { + margin: 0 0 8px; + color: #fff; + font-family: Poppins, Arial, sans-serif; + font-size: 13px; + font-weight: 700; + letter-spacing: 3px; + text-transform: uppercase; +} + +.slider__description { + margin: 0; + color: #fff; + font-size: 14px; + font-weight: 400; + line-height: 1.4; +} + +/* Main */ + +main { + display: flex; + flex-direction: column; + gap: 120px; + padding: 120px 20px; +} + +/* Who We Are */ + +.who-we-are__content { + max-width: 800px; + margin: 0 auto; +} + +.services__label, +.testimonials__label { + margin: 0; + font-family: Poppins, Arial, sans-serif; + color: #c0cdd7; + font-weight: 700; + font-size: 13px; + line-height: 100%; + letter-spacing: 3px; + text-transform: uppercase; +} + +.who-we-are__title { + font-family: Poppins, Arial, sans-serif; + color: #253757; + font-weight: 600; + font-size: 32px; + line-height: 150%; + text-align: center; +} + +.who-we-are__description { + font-weight: 600; + font-size: 22px; + color: #6c788b; + line-height: 150%; + text-align: center; + margin: 24px 0 0; +} + +.expertise { + background: #fff; + padding: 72px 20px; + border-radius: 30px; +} + +.expertise__title { + font-family: Poppins, Arial, sans-serif; + color: #253757; + font-weight: 600; + font-size: 44px; + line-height: 120%; + text-align: center; +} + +.expertise__content { + display: flex; + flex-wrap: wrap; + gap: 56px; + margin-top: 56px; + justify-content: center; +} + +.expertise__item { + display: flex; + flex-direction: column; + align-items: center; +} + +.expertise__icon { + width: 166px; + height: 166px; + border-radius: 20px; +} + +.expertise__item-title { + font-family: Poppins, Arial, sans-serif; + color: #253757; + font-weight: 600; + font-size: 20px; + line-height: 140%; + text-align: center; + margin-top: 32px; +} + +.expertise__item-description { + font-weight: 400; + font-size: 14px; + color: #6c788b; + line-height: 150%; + text-align: center; + margin-top: 16px; +} + +.services__title { + margin: 0; + padding: 16px 0 24px; + font-family: Poppins, Arial, sans-serif; + color: #253757; + font-weight: 600; + font-size: 32px; + line-height: 130%; +} + +.services__description { + font-weight: 400; + font-size: 14px; + color: #6c788b; + line-height: 150%; + padding-bottom: 32px; +} + +.services__list { + display: flex; + flex-direction: column; + gap: 24px; +} + +.services__item { + width: 100%; + box-sizing: border-box; + padding: 32px; + border-radius: 20px; + background-color: #fff; + + display: flex; + flex-direction: column; +} + +.services__number { + display: inline-block; + align-self: flex-start; + padding: 5px 16px; + + background-color: rgba(32, 96, 246, 0.1); + border-radius: 23px; + + font-family: Poppins, Arial, sans-serif; + font-weight: 600; + font-size: 13px; + line-height: 150%; + text-align: center; + text-transform: uppercase; + color: #2060f6; +} + +.services__tags { + list-style: none; + margin: 32px 0 auto; + padding: 0; +} + +.services__tag { + font-size: 13px; + font-weight: 600; + color: #6c788b; + line-height: 150%; +} + +.services__link { + display: flex; + align-items: center; + gap: 16px; + margin-top: 24px; + text-decoration: none; + font-family: Poppins, Arial, sans-serif; + font-weight: 600; + font-size: 15px; + line-height: 100%; + color: #253757; +} + +.services__link-icon { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + width: 48px; + height: 48px; + border-radius: 50%; + background-color: #2060f6; +} + +.services__link-icon img { + width: 20px; + height: 20px; + filter: brightness(0) invert(1); +} + +.testimonials__title { + font-family: Poppins, Arial, sans-serif; + color: #253757; + font-weight: 600; + font-size: 32px; + line-height: 150%; + margin: 0; + padding: 16px 0; +} + +.testimonials__content { + display: flex; + flex-direction: column; + gap: 24px; + margin-top: 40px; +} + +.testimonial { + background: #fff; + border-radius: 20px; + padding: 40px 24px; + text-align: center; +} + +.testimonial__avatar { + position: relative; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 32px; +} + +.testimonial__shapes { + width: 160px; +} + +.testimonial__photo { + position: absolute; + width: 80px; + height: 80px; + border-radius: 50%; + object-fit: cover; +} + +.testimonial__quote { + font-size: 14px; + color: #6c788b; + line-height: 160%; + margin: 0 0 24px; +} + +.testimonial__quote::before { + content: '\201C'; + display: block; + font-size: 48px; + color: #2060f6; + font-weight: 700; + line-height: 1; +} + +.testimonial__name { + font-family: Poppins, Arial, sans-serif; + font-weight: 700; + font-size: 16px; + color: #253757; + margin: 0 0 8px; +} + +.testimonial__company { + font-family: Poppins, Arial, sans-serif; + font-size: 12px; + font-weight: 700; + color: #c0cdd7; + text-transform: uppercase; + letter-spacing: 2px; + margin: 0; +} + +/* Vision */ + +.vision { + text-align: center; + background-color: #fff; + margin-left: -20px; + margin-right: -20px; +} + +.vision__content { + padding: 72px 20px; +} + +.vision__title { + font-family: Poppins, Arial, sans-serif; + color: #253757; + font-weight: 700; + font-size: 40px; + line-height: 120%; + margin: 0 0 32px; +} + +.vision__description { + color: #6c788b; + font-size: 18px; + line-height: 160%; + margin: 0 0 48px; +} + +/* Footer */ + +.footer { + background: #2c2c2c; + border-radius: 30px 30px 0 0; + padding: 72px 20px; +} + +.contact-form { + margin-bottom: 64px; +} + +.contact-form__title { + font-family: Poppins, Arial, sans-serif; + color: #fff; + font-weight: 600; + font-size: 32px; + line-height: 130%; + margin: 0 0 40px; +} + +.contact-form__form { + display: flex; + flex-direction: column; + gap: 24px; +} + +.contact-form__input { + width: 100%; + box-sizing: border-box; + background: transparent; + border: none; + border-bottom: 1px solid rgba(255, 255, 255, 0.3); + color: #fff; + font-family: 'Open Sans', Arial, sans-serif; + font-size: 15px; + padding: 12px 0; + outline: none; +} + +.contact-form__input::placeholder { + color: rgba(255, 255, 255, 0.4); +} + +.contact-info { + margin-bottom: 64px; +} + +.contact-info__title { + font-family: Poppins, Arial, sans-serif; + color: #fff; + font-weight: 600; + font-size: 32px; + line-height: 130%; + margin: 0 0 40px; +} + +.contact-info__item { + margin-bottom: 32px; +} + +.contact-info__label { + font-family: Poppins, Arial, sans-serif; + font-size: 13px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 3px; + color: rgba(255, 255, 255, 0.5); + margin: 0 0 8px; +} + +.contact-info__value { + margin: 0; + color: #fff; + font-size: 24px; + font-weight: 600; + line-height: 150%; +} + +.contact-info__socials { + display: flex; + gap: 24px; + margin-top: 8px; +} + +.contact-info__social-link { + display: flex; + align-items: center; + justify-content: center; +} + +/* Mobile nav overlay */ + +.nav { + position: fixed; + inset: 0; + background: #2c2c2c; + z-index: 100; + padding: 20px; + display: flex; + flex-direction: column; + transform: translateX(100%); + transition: transform 0.3s ease; +} + +.nav--open { + transform: translateX(0); +} + +.nav__header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 56px; +} + +.nav__close { + display: flex; + align-items: center; + justify-content: center; + background: none; + border: none; + cursor: pointer; + padding: 0; +} + +/* Shared nav list (overlay + footer) */ + +.nav__list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 32px; +} + +.nav__link { + font-family: Poppins, Arial, sans-serif; + font-weight: 700; + font-size: 28px; + text-transform: uppercase; + letter-spacing: 3px; + color: rgba(255, 255, 255, 0.85); + text-decoration: none; +} + +/* Footer nav overrides */ + +.footer__nav { + border-top: 1px solid rgba(255, 255, 255, 0.15); + padding-top: 40px; +} + +.footer__nav .nav__list { + margin-top: 24px; + gap: 16px; +} + +.footer__nav .nav__link { + font-size: 13px; + color: rgba(255, 255, 255, 0.7); +} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3e..7eb304928e 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -2,3 +2,15 @@ font-family: Roboto, sans-serif; font-weight: 400; } + +%section-label { + margin: 0; + + font-family: $f-poppins; + font-size: 13px; + font-weight: 700; + line-height: 100%; + color: $c-gray-label; + text-transform: uppercase; + letter-spacing: 3px; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..305d19989d 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,22 @@ -$c-gray: #eee; +// Colors +$c-dark: #2c2c2c; +$c-navy: #253757; +$c-blue: #2060f6; +$c-blue-light: #4e6ef2; +$c-gray-text: #6c788b; +$c-gray-label: #c0cdd7; +$c-bg: #f2f6fa; +$c-white: #fff; + +// Fonts +$f-poppins: Poppins, Arial, sans-serif; +$f-body: 'Open Sans', Arial, sans-serif; + +// Border radius +$r-card: 30px; + +// Breakpoints +$bp-tablet: 640px; +$bp-desktop: 1024px; +$bp-desktop-lg: 1280px; +$bp-large: 1600px;