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..c0aa884538 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://khomenko-vlad.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..3af237b5c7 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,382 @@ + - Dia + Air -

Dia

+
+
+
+ + + menu + +
+ + hire us +
+
+

Strategic Agency

+

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

+ Learn more +
+
+ + Header picture + +
+
+ + +
+
+

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

Branding

+

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

+
+
+ Communication picture +

Communication

+

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

+
+
+ Strategy picture +

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
    • +
+
+ +
+ learn more link +
+ Learn more + +
+
+
+

002

+
    +
  • Content Production
    • +
  • Graphic Design
    • +
  • Video Production
    • +
  • Post Production
    • +
+
+ +
+ learn more link +
+ Learn more + +
+
+
+

003

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

004

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

Testimonials

+

What people say

+
+
+
+
+
+ person +
+
+
+ quote +

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

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

+
Azadeh Hawkins
+
Hawkins Consulting
+
+
+
+
+
+ person +
+
+
+ quote +

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..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/fonts/OpenSans-Regular.ttf b/src/fonts/OpenSans-Regular.ttf new file mode 100644 index 0000000000..134d225f66 Binary files /dev/null and b/src/fonts/OpenSans-Regular.ttf differ diff --git a/src/fonts/OpenSans-SemiBold.ttf b/src/fonts/OpenSans-SemiBold.ttf new file mode 100644 index 0000000000..2310e8ae88 Binary files /dev/null and b/src/fonts/OpenSans-SemiBold.ttf differ diff --git a/src/fonts/Poppins-Bold.ttf b/src/fonts/Poppins-Bold.ttf new file mode 100644 index 0000000000..00559eeb29 Binary files /dev/null and b/src/fonts/Poppins-Bold.ttf differ diff --git a/src/fonts/Poppins-SemiBold.ttf b/src/fonts/Poppins-SemiBold.ttf new file mode 100644 index 0000000000..74c726e327 Binary files /dev/null and b/src/fonts/Poppins-SemiBold.ttf differ diff --git a/src/images/features/left-arrow.svg b/src/images/features/left-arrow.svg new file mode 100644 index 0000000000..e0e78c500f --- /dev/null +++ b/src/images/features/left-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/features/mdi_arrow_forward.svg b/src/images/features/mdi_arrow_forward.svg new file mode 100644 index 0000000000..fa19b7d24b --- /dev/null +++ b/src/images/features/mdi_arrow_forward.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/features/quote.svg b/src/images/features/quote.svg new file mode 100644 index 0000000000..14efa5df60 --- /dev/null +++ b/src/images/features/quote.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/features/right-arrow.svg b/src/images/features/right-arrow.svg new file mode 100644 index 0000000000..4319096bd3 --- /dev/null +++ b/src/images/features/right-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo/air-logo.svg b/src/images/logo/air-logo.svg new file mode 100644 index 0000000000..70e90d9356 --- /dev/null +++ b/src/images/logo/air-logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/logo/fav-icon.svg b/src/images/logo/fav-icon.svg new file mode 100644 index 0000000000..48f73992c7 --- /dev/null +++ b/src/images/logo/fav-icon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/images/logo/fb-logo.svg b/src/images/logo/fb-logo.svg new file mode 100644 index 0000000000..ce2478fe7b --- /dev/null +++ b/src/images/logo/fb-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo/insta-logo.svg b/src/images/logo/insta-logo.svg new file mode 100644 index 0000000000..769fcd5763 --- /dev/null +++ b/src/images/logo/insta-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo/menu-burger.svg b/src/images/logo/menu-burger.svg new file mode 100644 index 0000000000..48fc38e477 --- /dev/null +++ b/src/images/logo/menu-burger.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo/x-logo.svg b/src/images/logo/x-logo.svg new file mode 100644 index 0000000000..b27c847d77 --- /dev/null +++ b/src/images/logo/x-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/slider/bg-photo.png b/src/images/slider/bg-photo.png new file mode 100644 index 0000000000..7e98f4f334 Binary files /dev/null and b/src/images/slider/bg-photo.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..f4e7578916 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,14 @@ 'use strict'; + +const form = document.querySelector('.footer__message'); + +form.addEventListener('submit', (event) => { + event.preventDefault(); + + form.reset(); + + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); +}); diff --git a/src/styles/_about.scss b/src/styles/_about.scss new file mode 100644 index 0000000000..f21d867f62 --- /dev/null +++ b/src/styles/_about.scss @@ -0,0 +1,22 @@ +.about { + margin-top: 120px; + display: flex; + flex-direction: column; + gap: 24px; + font-weight: $weight-bold; + line-height: 150%; + text-align: center; + + @include page-padding; + + &__title { + font-family: $font-title; + color: $text-color-dark; + font-size: $font-size-medium; + } + + &__text { + font-size: $font-size-medium-s; + color: $text-color-light; + } +} diff --git a/src/styles/_button.scss b/src/styles/_button.scss new file mode 100644 index 0000000000..9466881301 --- /dev/null +++ b/src/styles/_button.scss @@ -0,0 +1,30 @@ +.button { + border: none; + max-width: 280px; + color: $white-color; + height: 50px; + background-color: $blue-color; + display: flex; + border-radius: 8px; + align-items: center; + justify-content: center; + font-family: $font-title; + font-size: $font-size-small; + font-weight: $weight-bold; + cursor: pointer; + transition: $transition-def; + + &:hover { + transform: scale(1.05); + background-color: $blue-dark-color; + box-shadow: $background-dark-shadow; + } + + &:active { + transform: scale(1.03); + } + + @media (min-width: $tablet) { + width: 264px; + } +} diff --git a/src/styles/_expertise.scss b/src/styles/_expertise.scss new file mode 100644 index 0000000000..e9301c5efe --- /dev/null +++ b/src/styles/_expertise.scss @@ -0,0 +1,66 @@ +.expertise { + margin-top: 120px; + display: flex; + flex-direction: column; + gap: 56px; + align-items: center; + padding-top: 72px; + padding-bottom: 72px; + background-color: $white-color; + border-radius: $border-radius; + @include page-padding; + + &__title { + max-width: 264px; + font-family: $font-title; + text-align: center; + font-size: $font-size-medium-l; + font-weight: $weight-bold; + line-height: 120%; + color: $text-color-dark; + } + + &__items { + display: flex; + flex-direction: column; + gap: 56px; + + @media (min-width: $desktop) { + display: flex; + flex-direction: row; + justify-content: space-between; + } + } + + &__item { + display: flex; + flex-direction: column; + align-items: center; + } + + &__picture { + display: block; + object-fit: cover; + width: 166px; + height: 166px; + border-radius: 16px; + } + + &__item-title { + margin-top: 32px; + font-family: $font-title; + font-size: $font-size-medium-small; + font-weight: $weight-bold; + color: $text-color-dark; + line-height: 140%; + } + + &__item-text { + margin-top: 16px; + font-size: $font-size-tiny-l; + font-weight: $weight-small; + text-align: center; + line-height: 150%; + color: $text-color-light; + } +} diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd54008..034cad7bfb 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,34 @@ @font-face { font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); font-weight: normal; + src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); + font-style: normal; +} + +@font-face { + font-family: Poppins; + font-weight: 600; + src: url('../fonts/Poppins-SemiBold.ttf') format('truetype'); + font-style: normal; +} + +@font-face { + font-family: Poppins; + font-weight: 700; + src: url('../fonts/Poppins-Bold.ttf') format('truetype'); + font-style: normal; +} + +@font-face { + font-family: 'Open Sans'; + font-weight: 400; + src: url('../fonts/OpenSans-Regular.ttf') format('truetype'); + font-style: normal; +} + +@font-face { + font-family: 'Open Sans'; + font-weight: 600; + src: url('../fonts/OpenSans-SemiBold.ttf') format('truetype'); font-style: normal; } diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss new file mode 100644 index 0000000000..0a6c411a1c --- /dev/null +++ b/src/styles/_footer.scss @@ -0,0 +1,191 @@ +.footer { + margin-top: 120px; + padding-top: 72px; + padding-bottom: 80px; + + display: flex; + flex-direction: column; + gap: 80px; + + border-radius: $border-radius $border-radius 0 0; + background-color: $background-dark; + color: $white-color; + + @include page-padding; + + &__container { + display: flex; + flex-direction: column; + gap: 80px; + margin-inline: auto; + + @media (min-width: $tablet) { + gap: 120px; + } + + @media (min-width: $desktop) { + flex-direction: row; + gap: 98px; + } + + @media (min-width: $desktop-wide) { + gap: 226px; + } + } + + // #region message + &__title { + font-family: $font-title; + font-size: $font-size-medium; + font-weight: $weight-bold; + line-height: 130%; + } + + &__inputs { + display: flex; + margin-top: 48px; + flex-direction: column; + gap: 40px; + } + + &__input { + font-family: $font-title; + font-size: $font-size-small; + font-weight: $weight-bold; + max-width: 280px; + color: $white-color-input; + padding-bottom: 16px; + border: none; + border-bottom: 1px solid $white-color; + background-color: $background-dark; + + &:focus { + border-bottom: 2px solid rgba(20, 78, 212, 1); + outline: none; + color: $white-color; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + -webkit-text-fill-color: $white-color-input; + -webkit-box-shadow: 0 0 0 1000px $background-dark inset; + } + + @media (min-width: $desktop) { + max-width: 370px; + } + + @media (min-width: $desktop-wide) { + max-width: 460px; + } + } + + &__textarea { + display: block; + resize: none; + min-height: 40px; + } + + &__button { + width: 100%; + margin-top: 56px; + } + + // #endregion + + // #region contact + &__contact { + display: flex; + flex-direction: column; + gap: 56px; + } + + &__contact-info { + display: flex; + flex-direction: column; + gap: 48px; + } + + &__info-block { + display: flex; + flex-direction: column; + gap: 16px; + } + + &__info-subtitle { + color: $white-color-info-subtitle; + + @include uppercase-label; + } + + &__info-link { + font-weight: $weight-bold; + font-size: $font-size-medium-ss; + line-height: 150%; + color: $white-color; + transition: $transition-def; + + &:hover { + transform: scale(1.02); + } + + &:active { + transform: scale(0.99); + } + } + + &__logos { + display: flex; + flex-direction: row; + gap: 32px; + } + + &__social-logo { + display: block; + height: 24px; + width: 24px; + transition: $transition-def; + + &:hover { + transform: scale(1.05); + } + } + + // #endregion + &__icon { + transition: $transition-def; + opacity: 1; + + &:hover { + opacity: 0.75; + } + } + + &__nav { + margin-top: 80px; + display: flex; + flex-direction: column; + gap: 48px; + + @media (min-width: $tablet) { + gap: 24px; + } + + @media (min-width: $desktop) { + flex-direction: row; + justify-content: space-between; + } + } + + &__logo { + display: block; + width: 46px; + height: 28px; + } + + @media (min-width: $tablet) { + margin: 0; + padding-top: 180px; + } +} diff --git a/src/styles/_header.scss b/src/styles/_header.scss new file mode 100644 index 0000000000..5fe5c0d64e --- /dev/null +++ b/src/styles/_header.scss @@ -0,0 +1,125 @@ +.header { + position: relative; + background-color: $background-dark; + padding-inline: 21px; + height: 893px; + display: flex; + flex-direction: column; + color: $white-color; + border-radius: 0 0 $border-radius $border-radius; + @include page-padding; + + @media (min-width: $desktop) { + height: 800px; + } + + &__top { + align-items: center; + padding-top: 20px; + display: flex; + justify-content: space-between; + } + + &__icons { + display: flex; + gap: 32px; + align-items: center; + } + + &__burger { + @media (min-width: $desktop) { + display: none; + } + } + + &__icon { + transition: $transition-def; + opacity: 1; + + &:hover { + opacity: 0.75; + } + } + + & nav { + @media (max-width: $desktop) { + display: none; + } + } + + &__hire-link { + display: inline-flex; + flex-direction: column; + color: inherit; + + @include uppercase-label; + + &::after { + margin-top: 8px; + display: block; + content: ''; + height: 2px; + border-radius: 4px; + background-color: $blue-color; + width: 67px; + transition: $transition-def; + } + + &:hover::after { + transform: scale(1.02); + background-color: coral; + opacity: 0.8; + } + } + + &__content { + margin-top: 48px; + + @media (min-width: $desktop) { + max-width: 45%; + margin-top: 164px; + } + } + + &__title { + font-weight: $weight-bold; + font-size: $font-size-large; + line-height: 120%; + font-family: $font-title; + letter-spacing: $letter-spacing-title; + } + + &__description { + font-weight: $weight-small; + font-size: $font-size-small-l; + line-height: 150%; + margin-top: 32px; + } + + &__button { + margin-top: 72px; + } + + &__slider { + border-radius: $border-radius; + overflow: hidden; + height: 390px; + width: 100%; + position: absolute; + right: 0; + bottom: 0; + + @media (min-width: $desktop) { + width: 50%; + height: 680px; + border-radius: $border-radius 0 $border-radius 0; + } + } + + &__image { + object-fit: cover; + display: block; + height: 100%; + width: 100%; + } +} diff --git a/src/styles/_nav.scss b/src/styles/_nav.scss new file mode 100644 index 0000000000..282dbbc2b1 --- /dev/null +++ b/src/styles/_nav.scss @@ -0,0 +1,41 @@ +.nav { + &__list { + list-style: none; + display: flex; + flex-direction: column; + gap: 24px; + + @media (min-width: $tablet) { + flex-direction: row; + gap: 40px; + } + } + + &__link { + display: inline-flex; + flex-direction: column; + color: $white-color; + + @include uppercase-label; + + &::after { + border-radius: 5px; + transform-origin: center; + margin-top: 5px; + transform: scaleX(0); + content: ''; + height: 2px; + width: 100%; + display: block; + background-color: $white-color; + opacity: 0.8; + transition: $transition-def; + } + + &:hover { + &::after { + transform: scaleX(1); + } + } + } +} diff --git a/src/styles/_services-card.scss b/src/styles/_services-card.scss new file mode 100644 index 0000000000..dd4bce0e10 --- /dev/null +++ b/src/styles/_services-card.scss @@ -0,0 +1,73 @@ +.service-card { + display: flex; + flex-direction: column; + padding: 32px; + background-color: $white-color; + border-radius: 16px; + font-weight: $weight-bold; + line-height: 150%; + font-size: $font-size-tiny; + max-width: 282px; + transition: $transition-def; + + &:hover { + transform: scale(0.99); + box-shadow: inset 0 2px 12px #afafaf; + } + + &--shifted:hover { + @media (min-width: $tablet) { + transform: scale(0.99) translateY(-50%); + } + } + + &__number { + display: flex; + justify-content: center; + align-items: center; + color: $blue-color; + background-color: rgba(32, 96, 246, 0.1); + width: 46px; + height: 24px; + border-radius: 23px; + font-family: $font-title; + } + + &__list { + margin-top: 24px; + list-style: none; + display: flex; + flex-direction: column; + gap: 7px; + align-items: flex-start; + color: $text-color-light; + } + + &__link { + margin-top: 32px; + width: 143px; + } + + &__button { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } + + &__link-bg { + display: flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: $blue-color; + } + + &__learn { + color: $text-color-service-link; + font-size: $font-size-small; + line-height: 100%; + } +} diff --git a/src/styles/_services.scss b/src/styles/_services.scss new file mode 100644 index 0000000000..9f135f76e6 --- /dev/null +++ b/src/styles/_services.scss @@ -0,0 +1,123 @@ +.services { + margin-top: 120px; + @include page-padding; + + @media (min-width: $desktop) { + margin-top: 250px; + } + + &__content { + display: flex; + flex-direction: column; + + @media (min-width: $tablet) { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 30px; + align-items: center; + } + + @media (min-width: $desktop) { + grid-template-columns: repeat(12, 1fr); + } + } + + &__description { + display: flex; + flex-direction: column; + align-items: flex-start; + max-width: 282px; + + @media (min-width: $tablet) { + grid-column: 1 / 4; + } + + @media (min-width: $desktop) { + grid-column: span 5; + } + } + + &__title { + color: $text-color-grey; + + @include uppercase-label; + } + + &__slogan { + margin-top: 16px; + font-family: $font-title; + font-weight: $weight-bold; + font-size: $font-size-medium; + line-height: 130%; + color: $text-color-dark; + } + + &__texts { + color: $text-color-light; + margin-top: 24px; + display: flex; + flex-direction: column; + gap: 24px; + font-weight: $weight-small; + font-size: $font-size-tiny-l; + line-height: 150%; + } + + &__card { + margin-top: 48px; + display: flex; + flex-direction: column; + + @media (min-width: $tablet) { + min-width: 264px; + margin-top: 0; + } + + &--first { + @media (min-width: $tablet) { + grid-column: 1 / 4; + justify-self: end; + } + + @media (min-width: $desktop) { + grid-column: 7 / 10; + justify-self: end; + } + } + + &--second { + @media (min-width: $tablet) { + grid-column: 4 / 7; + transform: translateY(-50%); + justify-self: start; + } + + @media (min-width: $desktop) { + grid-column: 10 / 13; + } + } + + &--third { + @media (min-width: $tablet) { + grid-column: 1 / 4; + justify-self: end; + } + + @media (min-width: $desktop) { + grid-column: 7 / 10; + } + } + + &--fourth { + @media (min-width: $tablet) { + grid-column: 4 / 7; + transform: translateY(-50%); + justify-self: start; + } + + @media (min-width: $desktop) { + grid-column: 10 / 13; + } + } + } +} diff --git a/src/styles/_slider.scss b/src/styles/_slider.scss new file mode 100644 index 0000000000..4be2efa814 --- /dev/null +++ b/src/styles/_slider.scss @@ -0,0 +1,61 @@ +@use 'utils'; + +.slider { + position: absolute; + left: 20px; + bottom: 24px; + color: $white-color; + display: flex; + flex-direction: column; + gap: 16px; + + &__buttons { + display: flex; + flex-direction: row; + gap: 16px; + } + + &__button { + display: flex; + justify-content: center; + align-items: center; + background: $white-color; + border: none; + border-radius: 50%; + cursor: pointer; + width: 32px; + height: 32px; + transition: $transition-def; + opacity: 0.8; + + & img { + width: 7px; + height: 11px; + } + + &:hover { + transform: scale(1.07); + box-shadow: 0 1px 12px rgb(1, 1, 23); + } + + &:active { + transform: scale(1.03); + } + } + + &__content { + display: flex; + flex-direction: column; + gap: 8px; + } + + &__title { + @include uppercase-label; + } + + &__text { + font-weight: $weight-small; + font-size: $font-size-tiny-l; + line-height: 140%; + } +} diff --git a/src/styles/_testimonial-card.scss b/src/styles/_testimonial-card.scss new file mode 100644 index 0000000000..cbc6ec3eee --- /dev/null +++ b/src/styles/_testimonial-card.scss @@ -0,0 +1,123 @@ +.testimonial-card { + background-color: $white-color; + display: flex; + align-items: center; + flex-direction: column; + justify-content: space-between; + padding: 32px 0; + border-radius: 16px; + gap: 24px; + text-align: center; + width: 100%; + + transition: $transition-def; + + &:hover { + transform: scale(0.98); + box-shadow: inset 0 2px 12px #afafaf; + } + + @media (min-width: 350px) { + padding-inline: 48px; + } + + @media (min-width: $desktop) { + min-height: 456px; + } + + @media (min-width: $desktop-wide) { + max-width: 350px; + min-height: 494px; + } + + &__top { + position: relative; + } + + &__photo-wrap { + position: relative; + width: 196px; + height: 196px; + display: flex; + justify-content: center; + align-items: center; + + &::after { + position: absolute; + display: block; + content: ''; + width: 109px; + height: 44px; + border-radius: 12px; + background-color: $blue-color; + z-index: 0; + + transform: rotate(-60deg); + right: 5px; + bottom: 40px; + } + + &::before { + position: absolute; + content: ''; + display: block; + + width: 109px; + height: 44px; + border-radius: 12px; + + background-color: $blue-color; + z-index: 0; + transform: rotate(-60deg); + top: 40px; + left: 5px; + } + } + + &__photo { + position: relative; + z-index: 1; + + width: 110px; + height: 110px; + border-radius: 50%; + + object-fit: cover; + } + + &__bottom { + display: flex; + flex-direction: column; + align-items: center; + + font-size: $font-size-tiny; + font-weight: $weight-bold; + line-height: 150%; + } + + &__quote { + display: block; + height: 24px; + width: 24px; + } + + &__comment { + margin-top: 8px; + text-align: center; + color: $text-color-light; + } + + &__name { + margin-top: 16px; + color: $text-color-dark; + } + + &__job { + margin-top: 8px; + line-height: 100%; + color: $text-color-grey; + white-space: nowrap; + + @include uppercase-label; + } +} diff --git a/src/styles/_testimonials.scss b/src/styles/_testimonials.scss new file mode 100644 index 0000000000..37123fa5c0 --- /dev/null +++ b/src/styles/_testimonials.scss @@ -0,0 +1,56 @@ +.testimonials { + display: flex; + flex-direction: column; + gap: 48px; + margin-top: 120px; + + @include page-padding; + + &__header { + display: flex; + flex-direction: column; + gap: 16px; + font-family: $font-title; + width: 100%; + margin-inline: auto; + max-width: 1110px; + } + + &__cards { + display: flex; + flex-direction: column; + gap: 24px; + align-items: center; + + @media (min-width: $desktop) { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + justify-content: center; + gap: 30px; + } + + @media (min-width: $desktop-wide) { + display: grid; + grid-template-columns: repeat(3, 350px); + justify-content: center; + gap: 30px; + } + } + + &__name { + color: $text-color-grey; + + @include uppercase-label; + } + + &__title { + font-size: $font-size-medium; + font-weight: $weight-bold; + line-height: 150%; + color: $text-color-dark; + } + + @media (min-width: $tablet) { + margin-top: 148px; + } +} diff --git a/src/styles/_vision.scss b/src/styles/_vision.scss new file mode 100644 index 0000000000..e2d0f846b6 --- /dev/null +++ b/src/styles/_vision.scss @@ -0,0 +1,42 @@ +.vision { + display: flex; + flex-direction: column; + align-items: center; + + margin-top: 120px; + padding-block: 72px; + + font-weight: $weight-bold; + text-align: center; + + background-color: $white-color; + background-image: url(../images/Shapes.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @include page-padding; + + &__title { + font-size: $font-size-medium-l; + line-height: 120%; + color: $text-color-dark; + } + + &__text { + margin-top: 24px; + font-size: $font-size-medium-s; + line-height: 150%; + color: $text-color-light; + } + + &__button { + width: 100%; + margin-top: 56px; + } + + @media (min-width: $tablet) { + margin-top: 186px; + padding-block: 200px; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..af9dacaff2 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,34 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import 'header'; +@import 'button'; +@import 'slider'; +@import 'about'; +@import 'expertise'; +@import 'services'; +@import 'services-card'; +@import 'testimonials'; +@import 'testimonial-card'; +@import 'vision'; +@import 'footer'; +@import 'nav'; + +html { + scroll-behavior: smooth; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} body { + font-family: $font-main; background: $c-gray; } + +a { + text-decoration: none; +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..033b9484af 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,32 @@ #{$_property}: $_toValue; } } + +@mixin page-padding { + padding-inline: 20px; + + @media (min-width: $tablet) { + padding-inline: 41px; + } + + @media (min-width: $desktop) { + padding-inline: 54px; + } + + @media (min-width: $desktop-wide) { + padding-inline: 227px; + } + + @media (min-width: $wide-screen) { + padding-inline: 707px; + } +} + +@mixin uppercase-label { + font-family: $font-title; + font-size: $font-size-tiny; + font-weight: $weight-extra-bold; + line-height: 150%; + text-transform: uppercase; + letter-spacing: 3px; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..8d3bc82c78 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,36 @@ $c-gray: #eee; +$weight-small: 400; +$weight-bold: 600; +$weight-extra-bold: 700; +$font-size-large: 52px; +$font-size-medium-l: 44px; +$font-size-medium: 32px; +$font-size-medium-ss: 24px; +$font-size-medium-s: 22px; +$font-size-medium-small: 20px; +$font-size-small-l: 18px; +$font-size-small: 15px; +$font-size-tiny-l: 14px; +$font-size-tiny: 13px; +$letter-spacing-title: -2px; +$font-main: 'Open Sans', Arial, sans-serif; +$font-title: 'Poppins', Arial, sans-serif; +$border-radius: 30px; +$background-dark: rgb(44, 44, 44); +$background-dark-shadow: 0 2px 12px #161616; +$background-dark-shadow-big: 0 2px 30px #9a9a9a; +$white-color: #fff; +$white-color-input: rgb(255, 255, 255, 0.7); +$white-color-info-subtitle: rgb(255, 255, 255, 0.5); +$blue-color: rgb(32, 96, 246); +$blue-color-number-bg: rgba(32, 96, 246, 0.1); +$blue-dark-color: rgb(28, 76, 188); +$text-color-dark: rgb(37, 55, 87); +$text-color-light: rgb(108, 120, 139); +$text-color-grey: rgb(192, 205, 215); +$text-color-service-link: rgba(51, 69, 99, 1); +$transition-def: all 0.3s ease; +$tablet: 640px; +$desktop: 960px; +$desktop-wide: 1560px; +$wide-screen: 2420px;