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..b86c331e30 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://Bo-dikkk.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..c45b3917a7 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,593 @@ + - + - Dia + Air + + + + + + + + - -

Dia

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

+ Strategic Agency +

+ +

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

+ + + Learn more + +
+ +
+
+
+
+ + + +
+ +
+
+ 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 & 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 +

+ +
+
+ Tal Gilad + + quotes + +

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

+ +

+ Tal Gilad +

+ +

+ Teach for America +

+
+ +
+ Azadeh Hawkins + + quotes + +

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

+ +

+ Azadeh Hawkins +

+ +

+ Hawkins consulting +

+
+ +
+ Michel Grover + + quotes + +

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

+ +

+ Michel Grover +

+ +

+ Hulu +

+
+
+
+
+
+ +
+
+
+

+ Vision, Passion, Results +

+ +

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

+ + + Apply + +
+
+
+ +
+
+
+
+

+ Send us a message +

+
+ + + + +
+
+ +
+

+ Contact us +

+

+ Call us +

+ + 654 321 987 + +

+ Visit us +

+ + 2905 West Drive, Buffalo Grove + +

+ Our socials +

+
+ + socials + + + socials + + + socials + +
+
+
+
+
+
+ + + + diff --git a/package-lock.json b/package-lock.json index 1b7e1f550b..0d916d7b41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", @@ -1510,10 +1510,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", - "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index aebda906fc..ffc8ac6e62 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", diff --git a/public/img/slide-img-1.jpg b/public/img/slide-img-1.jpg new file mode 100644 index 0000000000..21b6bcfafb Binary files /dev/null and b/public/img/slide-img-1.jpg differ diff --git a/public/img/slide-img-2.png b/public/img/slide-img-2.png new file mode 100644 index 0000000000..d97a86db04 Binary files /dev/null and b/public/img/slide-img-2.png differ diff --git a/public/img/slide-img-3.png b/public/img/slide-img-3.png new file mode 100644 index 0000000000..fcf60aea0d Binary files /dev/null and b/public/img/slide-img-3.png differ diff --git a/src/images/cards/arrow.svg b/src/images/cards/arrow.svg new file mode 100644 index 0000000000..c38caa36b0 --- /dev/null +++ b/src/images/cards/arrow.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/categories/branding.png b/src/images/categories/branding.png new file mode 100644 index 0000000000..c9e17b506f Binary files /dev/null and b/src/images/categories/branding.png differ diff --git a/src/images/categories/communication.png b/src/images/categories/communication.png new file mode 100644 index 0000000000..976ae70b38 Binary files /dev/null and b/src/images/categories/communication.png differ diff --git a/src/images/categories/strategy.png b/src/images/categories/strategy.png new file mode 100644 index 0000000000..90b53086a9 Binary files /dev/null and b/src/images/categories/strategy.png differ diff --git a/src/images/icons/icon-close.svg b/src/images/icons/icon-close.svg new file mode 100644 index 0000000000..bc6f5230e9 --- /dev/null +++ b/src/images/icons/icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-menu.svg b/src/images/icons/icon-menu.svg new file mode 100644 index 0000000000..374d372c5a --- /dev/null +++ b/src/images/icons/icon-menu.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..e26dfea4ae --- /dev/null +++ b/src/images/logo/air-logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/peoples/people-1.png b/src/images/peoples/people-1.png new file mode 100644 index 0000000000..b98b1cc20d Binary files /dev/null and b/src/images/peoples/people-1.png differ diff --git a/src/images/peoples/people-2.png b/src/images/peoples/people-2.png new file mode 100644 index 0000000000..80771e5f10 Binary files /dev/null and b/src/images/peoples/people-2.png differ diff --git a/src/images/peoples/people-3.png b/src/images/peoples/people-3.png new file mode 100644 index 0000000000..056504eb1a Binary files /dev/null and b/src/images/peoples/people-3.png differ diff --git a/src/images/peoples/quotes.svg b/src/images/peoples/quotes.svg new file mode 100644 index 0000000000..b1a5abb623 --- /dev/null +++ b/src/images/peoples/quotes.svg @@ -0,0 +1,3 @@ + + + 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-1.jpg b/src/images/slider/slide-img-1.jpg deleted file mode 100644 index 98c4188508..0000000000 Binary files a/src/images/slider/slide-img-1.jpg and /dev/null differ diff --git a/src/images/socials/facebook.svg b/src/images/socials/facebook.svg new file mode 100644 index 0000000000..b6bc5a936d --- /dev/null +++ b/src/images/socials/facebook.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.svg b/src/images/socials/twitter.svg new file mode 100644 index 0000000000..74cbdbf5d4 --- /dev/null +++ b/src/images/socials/twitter.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/vpr/shapes.svg b/src/images/vpr/shapes.svg new file mode 100644 index 0000000000..75e402654b --- /dev/null +++ b/src/images/vpr/shapes.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..eb109abbed 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,2 @@ 'use strict'; + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd54008..0000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e2..0000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe10..0000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 0000000000..23733ad3a7 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,63 @@ +.about-us { + &__content { + @include page-grid; + + row-gap: 24px; + + @include on-tablet { + row-gap: 16px; + } + } + + &__title { + margin: 0; + padding: 0; + + color: $section-title-color; + font-weight: 600; + font-size: 32px; + line-height: 150%; + text-align: center; + + grid-column: span 2; + + @include on-tablet { + grid-column: span 6; + } + + @include on-small-desktop { + grid-column: 2 / -2; + } + + @include on-desktop { + grid-column: 3 / -3; + } + } + + &__text { + margin: 0; + padding: 0; + + color: $section-text-color; + font-weight: 600; + font-size: 22px; + line-height: 150%; + text-align: center; + + grid-column: span 2; + + @include on-tablet { + font-size: 24px; + + grid-column: span 6; + } + + @include on-small-desktop { + grid-column: 2 / -2; + } + + @include on-desktop { + grid-column: 3 / -3; + } + } +} diff --git a/src/styles/blocks/cards.scss b/src/styles/blocks/cards.scss new file mode 100644 index 0000000000..16a09b362b --- /dev/null +++ b/src/styles/blocks/cards.scss @@ -0,0 +1,80 @@ +.card { + height: 264px; + background-color: $white; + border-radius: 16px; + padding-inline: 32px; + display: flex; + flex-direction: column; + transition: all 0.3s ease; + + grid-column: span 3; + + &:hover { + transform: scale(1.05); + } + + &--move-up { + @include on-tablet { + transform: translateY(-50%); + + &:hover { + transform: translateY(-50%) scale(1.05); + } + } + } + + &__number { + margin: 0; + margin-top: 32px; + + width: 46px; + height: 24px; + border-radius: 23px; + display: flex; + align-items: center; + justify-content: center; + background-color: $c-gray; + color: $card-number-color; + font-weight: 600; + font-size: 13px; + line-height: 100%; + } + + &__text { + margin: 0; + margin-top: 24px; + + color: $section-text-color; + font-weight: 600; + font-size: 13px; + line-height: 150%; + text-align: left; + } + + &__block { + margin: 0; + margin-block: 28px; + display: flex; + gap: 16px; + align-items: center; + } + + &__button { + display: block; + height: 48px; + width: 48px; + background-size: cover; + background-position: center; + background-image: url(/src/images/cards/arrow.svg); + + @include hover(transform, scale(1.2)); + } + + &__learn-more { + text-decoration: none; + color: $card-learn-more-color; + font-weight: 600; + font-size: 15px; + line-height: 100%; + } +} diff --git a/src/styles/blocks/category.scss b/src/styles/blocks/category.scss new file mode 100644 index 0000000000..a1f3d95af6 --- /dev/null +++ b/src/styles/blocks/category.scss @@ -0,0 +1,46 @@ +.category { + display: flex; + flex-direction: column; + align-items: center; + + &__photo { + width: 166px; + height: 166px; + border-radius: 16px; + object-fit: cover; + + @include hover(transform, scale(1.2)); + } + + &__title { + margin: 0; + padding: 0; + margin-top: 32px; + + color: $section-title-color; + font-weight: 600; + font-size: 20px; + line-height: 140%; + text-align: center; + } + + &__text { + margin: 0; + padding: 0; + margin-top: 16px; + + color: $section-text-color; + font-weight: 400; + font-size: 14px; + line-height: 150%; + text-align: center; + + @include on-small-desktop { + max-width: 214px; + } + + @include on-desktop { + max-width: 264px; + } + } +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 0000000000..06dcd2c5ff --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,204 @@ +.contact-us { + background-color: $header-bg-color; + color: $white; + border-top-left-radius: 30px; + border-top-right-radius: 30px; + + &__content { + @include page-grid; + } + + &__message { + grid-column: span 2; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-small-desktop { + grid-column: 1 / 6; + } + } + + &__contacts { + grid-column: span 2; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-small-desktop { + grid-column: 7 / 13; + } + + @include on-desktop { + grid-column: 8 / 13; + } + } + + &__title-message { + margin: 0; + font-weight: 600; + font-size: 32px; + line-height: 130%; + + margin-top: 72px; + + @include on-tablet { + margin-top: 180px; + } + } + + &__title-contacts { + margin: 0; + font-weight: 600; + font-size: 32px; + line-height: 130%; + grid-column: span 2; + + margin-top: 80px; + + @include on-tablet { + margin-top: 120px; + } + + @include on-small-desktop { + margin-top: 180px; + } + } + + &__form { + margin-top: 8px; + display: grid; + + @include on-tablet { + margin-top: 16px; + } + } + + &__input { + margin: 0; + padding: 0; + border: none; + border-bottom: 1px solid $white; + outline: none; + margin-top: 40px; + + width: 100%; + height: 41px; + display: flex; + padding-inline: 10px; + box-sizing: border-box; + + background-color: $header-bg-color; + color: $white; + font: inherit; + font-weight: 600; + font-size: 15px; + line-height: 100%; + + &--textarea { + resize: none; + } + + &:hover { + border-bottom: 2px solid $button-hover-color; + cursor: pointer; + } + + &:focus { + border-bottom: 2px solid $button-hover-color; + } + } + + &__button { + margin: 0; + margin-top: 56px; + height: 56px; + width: 100%; + background-color: $main-blue; + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + border-radius: 8px; + + text-decoration: none; + border: none; + + color: $white; + font: inherit; + font-weight: 600; + font-size: 15px; + line-height: 100%; + + &:hover { + transition: all 0.3s; + background-color: $button-hover-color; + cursor: pointer; + } + + &:active { + background-color: $button-active-color; + } + + @include on-tablet { + width: 264px; + } + } + + &__text { + margin: 0; + margin-top: 40px; + opacity: 50%; + font-weight: 700; + font-size: 13px; + line-height: 100%; + letter-spacing: 3px; + + &--call-us { + margin-top: 48px; + + @include on-tablet { + margin-top: 56px; + } + } + } + + &__tel { + margin: 0; + margin-top: 8px; + text-decoration: none; + color: $white; + font-weight: 600; + font-size: 24px; + line-height: 150%; + letter-spacing: 3px; + } + + &__adress { + margin: 0; + margin-top: 8px; + text-decoration: none; + color: $white; + font-weight: 600; + font-size: 24px; + line-height: 150%; + letter-spacing: 3px; + } + + &__socials { + display: flex; + margin-top: 16px; + gap: 32px; + align-items: center; + } + + &__photo { + height: 32px; + width: 32px; + + @include hover(transform, scale(1.2)); + } +} + diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 0000000000..e781b98e28 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,17 @@ +.container { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 40px; + } + + @include on-small-desktop { + padding-inline: 54px; + } + + @include on-desktop { + max-width: $design-width; + margin-inline: auto; + padding-inline: 67px; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..34f8663f92 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,73 @@ +.footer { + background-color: $header-bg-color; + + &__content { + display: flex; + flex-direction: column; + row-gap: 48px; + padding-block: 80px; + + @include on-tablet { + padding-top: 140px; + row-gap: 24px; + } + + @include on-small-desktop { + padding-top: 104px; + flex-direction: row; + justify-content: space-between; + } + } + + &__logo { + @include hover(transform, scale(1.2)); + } + + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 24px; + + @include on-tablet { + flex-direction: row; + gap: 40px; + } + + @include on-small-desktop { + gap: 64px; + } + } + + &__link { + position: relative; + text-decoration: none; + color: $white; + font-weight: 700; + font-size: 13px; + line-height: 150%; + letter-spacing: 3px; + text-transform: uppercase; + text-wrap: nowrap ; + + &::after { + content: ''; + position: absolute; + bottom: -8px; + display: block; + height: 1px; + width: 100%; + background-color: $white; + + transition: transform 0.3s; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..5a9724ee2d --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,115 @@ +.header { + background-color: $header-bg-color; + border-bottom-left-radius: 30px; + border-bottom-right-radius: 30px; + position: relative; + + &__container { + color: $white; + min-height: 880px; + margin: 0 auto; + + @include on-small-desktop { + min-height: 800px; + } + + @include on-desktop { + max-width: $design-width; + } + } + + &__content { + @include page-grid; + + margin: 0; + } + + &__title { + margin: 0; + margin-top: 48px; + + font-weight: 600; + font-size: 52px; + line-height: 120%; + letter-spacing: -2px; + + grid-column: span 2; + + @include on-tablet { + grid-column: span 6; + } + + @include on-small-desktop { + grid-column: 1 / 5; + margin-top: 120px; + } + } + + &__text { + margin: 0; + margin-top: 32px; + + font-family: 'Open Sans', sans-serif; + font-weight: 400; + font-size: 18px; + line-height: 150%; + + grid-column: span 2; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-small-desktop { + grid-column: 1 / 6; + } + + @include on-desktop { + grid-column: 1 / 5; + } + } + + &__button { + margin: 0; + margin-top: 72px; + margin-bottom: 48px; + height: 50px; + width: 100%; + background-color: $main-blue; + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + border-radius: 8px; + + text-decoration: none; + color: $white; + font-weight: 600; + font-size: 15px; + line-height: 100%; + + grid-column: span 2; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-small-desktop { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 1 / 4; + } + + &:hover { + transition: all 0.3s; + background-color: $button-hover-color; + cursor: pointer; + } + + &:active { + background-color: $button-active-color; + } + } +} diff --git a/src/styles/blocks/icons.scss b/src/styles/blocks/icons.scss new file mode 100644 index 0000000000..2b937c3ebb --- /dev/null +++ b/src/styles/blocks/icons.scss @@ -0,0 +1,21 @@ +.icon { + display: block; + height: 24px; + width: 24px; + background-size: cover; + background-position: center; + + @include on-small-desktop { + display: none + } + + @include hover(transform, scale(1.2)); + + &--menu { + background-image: url(/src/images/icons/icon-menu.svg); + } + + &--close { + background-image: url(/src/images/icons/icon-close.svg); + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 0000000000..a2973eb7b8 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,10 @@ +.main { + display: grid; + row-gap: 120px; + padding-top: 120px; + + @include on-tablet { + row-gap: 148px; + padding-top: 148px; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..c87596c018 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,28 @@ +.menu { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 100%; + background-color: $header-bg-color; + z-index: 100; + + transform: translateY(-100%); + transition: transform 0.3s ease; + + &:target { + transform: translateY(0); + } + + &__top { + margin-bottom: 12px; + } + + &__bottom { + padding-inline: 20px; + } + + &__nav { + padding-top: 40px; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..8b2176c9c3 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,37 @@ +.nav { + &__link { + position: relative; + color: $white; + text-decoration: none; + font-size: 22px; + line-height: 22px; + letter-spacing: 2px; + + &::after { + content: ''; + position: absolute; + bottom: -8px; + display: block; + height: 1px; + width: 100%; + background-color: $white; + + transition: transform 0.3s; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + } + + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 64px; + } +} diff --git a/src/styles/blocks/our-expertise.scss b/src/styles/blocks/our-expertise.scss new file mode 100644 index 0000000000..ab2f1bcc08 --- /dev/null +++ b/src/styles/blocks/our-expertise.scss @@ -0,0 +1,57 @@ +.our-expertise { + background-color: $white; + border-radius: 30px; + + &__content { + @include page-grid; + + padding-block: 72px; + row-gap: 56px; + + @include on-tablet { + padding-block: 128px; + row-gap: 64px; + } + } + + &__categories { + display: flex; + flex-direction: column; + row-gap: 56px; + grid-column: span 2; + + @include on-tablet { + grid-column: 2 / -2; + row-gap: 72px; + } + + @include on-small-desktop { + grid-column: span 12; + + flex-direction: row; + justify-content: space-between; + } + } + + &__title { + margin: 0; + color: $section-title-color; + font-weight: 600; + font-size: 44px; + line-height: 120%; + text-align: center; + + grid-column: span 2; + + @include on-tablet { + font-size: 52px; + line-height: 150%; + + grid-column: 2 / -2; + } + + @include on-small-desktop { + grid-column: span 12; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..edaf2c6273 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,38 @@ +.page { + margin: 0; + padding: 0; + + font-family: Poppins, sans-serif; + font-weight: 700; + + scroll-behavior: smooth; + + &__body { + margin: 0; + padding: 0; + background-color: $c-gray; + min-width: 320px; + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + + opacity: 0; + transition: all 0.3s; + transform: translateX(-100%); + pointer-events: none; + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + } + + &:has(.page__menu:target) { + overflow: hidden; + } +} diff --git a/src/styles/blocks/peoples.scss b/src/styles/blocks/peoples.scss new file mode 100644 index 0000000000..68769e378a --- /dev/null +++ b/src/styles/blocks/peoples.scss @@ -0,0 +1,91 @@ +.people { + grid-column: span 2; + + background-color: $white; + border-radius: 16px; + display: flex; + flex-direction: column; + align-items: center; + padding-inline: 36px; + padding-block: 32px; + + @include on-tablet { + grid-column: span 6; + + padding-inline: 98px; + } + + @include on-small-desktop { + grid-column: span 4; + + padding-inline: 48px; + } + + @include on-desktop { + padding-inline: 56px; + } + + &__photo { + height: 196px; + width: 196px; + object-fit: cover; + + @include hover(transform, scale(1.2)); + + @include on-tablet { + height: 250px; + width: 250px; + } + + @include on-small-desktop { + height: 196px; + width: 196px; + } + + @include on-desktop { + height: 250px; + width: 250px; + } + } + + &__quotes { + margin-top: 24px; + height: 24px; + width: 24px; + object-fit: cover; + } + + &__text { + margin: 0; + margin-top: 8px; + color: $section-text-color; + font-family: "Open Sans", sans-serif; + font-weight: 600; + font-size: 13px; + line-height: 150%; + text-align: center; + } + + &__name { + margin: 0; + margin-top: 16px; + color: $section-title-color; + font-family: "Open Sans", sans-serif; + font-weight: 600; + font-size: 13px; + line-height: 150%; + text-align: center; + } + + &__info { + margin: 0; + margin-top: 4px; + color: $section-note-color; + font-weight: 700; + font-size: 13px; + line-height: 100%; + text-align: center; + letter-spacing: 3px; + text-transform: uppercase; + } +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..768d5412a5 --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,72 @@ +.services { + &__content { + @include page-grid; + } + + &__cards { + display: grid; + gap: 24px; + margin-top: 48px; + grid-column: span 2; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + margin-top: 56px; + gap: 30px; + grid-column: span 6; + } + + @include on-small-desktop { + margin-top: 140px; + gap: 20px; + grid-column: 7 / 13; + } + + @include on-desktop { + gap: 30px; + margin-top: 132px; + } + } + + &__text-block { + grid-column: span 2; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-small-desktop { + grid-column: 1 / 5; + margin-top: 104px; + } + } + + &__note { + margin: 0; + font-weight: 700; + font-size: 13px; + line-height: 100%; + letter-spacing: 3px; + text-transform: uppercase; + color: $section-note-color; + } + + &__title { + margin: 0; + margin-top: 16px; + color: $section-title-color; + font-weight: 600; + font-size: 32px; + line-height: 130%; + text-align: left; + } + + &__text { + margin: 0; + margin-top: 24px; + color: $section-text-color; + font-weight: 400; + font-size: 14px; + line-height: 150%; + } +} diff --git a/src/styles/blocks/slide-bar.scss b/src/styles/blocks/slide-bar.scss new file mode 100644 index 0000000000..6e41936ed3 --- /dev/null +++ b/src/styles/blocks/slide-bar.scss @@ -0,0 +1,102 @@ +.slide-bar { + background-image: url(/public/img/slide-img-1.jpg); + height: 390px; + width: 100%; + box-sizing: border-box; + border-radius: 30px; + background-size: cover; + background-position: center; + position: absolute; + right: 0; + bottom: 0; + transition: background-image 0.3s ease; + + @include on-small-desktop { + top: 120px; + height: 680px; + width: 50%; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + } + + &__container { + padding-inline: 20px; + padding-top: 250px; + + @include on-tablet { + padding-inline: 40px; + padding-top: 242px; + } + + @include on-small-desktop { + padding-inline: 78px; + padding-top: 564px; + } + + @include on-desktop{ + padding-inline: 48px; + } + } + + &__content { + display: flex; + flex-direction: column; + row-gap: 16px; + + @include on-small-desktop { + flex-direction: row; + align-items: center; + column-gap: 24px; + } + } + + &__block { + display: flex; + flex-direction: column; + row-gap: 8px; + } + + &__buttons { + display: flex; + gap: 16px; + } + + &__button { + display: block; + height: 32px; + width: 32px; + background-size: cover; + background-position: center; + + @include hover(transform, scale(1.2)); + + &--left { + background-image: url(/src/images/slider/arrow-left.svg); + } + + &--right { + background-image: url(/src/images/slider/arrow-right.svg); + } + } + + &__title { + margin: 0; + text-align: left; + text-transform: uppercase; + + font-weight: 700; + font-size: 13px; + line-height: 100%; + letter-spacing: 3px; + } + + &__text { + margin: 0; + text-align: left; + + font-family: 'Open Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 140%; + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..09a7774176 --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,60 @@ +.testimonials { + &__content { + @include page-grid; + } + + &__note { + grid-column: span 2; + + margin: 0; + text-align: left; + color: $section-note-color; + font-weight: 700; + font-size: 13px; + line-height: 100%; + letter-spacing: 3px; + text-transform: uppercase; + + @include on-tablet { + grid-column: 1 / 4; + } + } + + &__title { + grid-column: span 2; + + margin: 0; + margin-top: 16px; + text-align: left; + color: $section-title-color; + font-weight: 600; + font-size: 32px; + line-height: 150%; + + @include on-tablet { + grid-column: 1 / 4; + } + } + + &__peoples { + grid-column: span 2; + + @include page-grid; + + row-gap: 24px; + margin-top: 48px; + + @include on-tablet { + grid-column: span 6; + + row-gap: 30px; + margin-top: 56px; + } + + @include on-small-desktop { + grid-column: span 12; + + margin-top: 85px; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..01efe508ea --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,110 @@ +.top-bar { + background-color: $header-bg-color; + color: $white; + display: flex; + align-items: center; + justify-content: space-between; + height: 56px; + padding-block: 20px; + box-sizing: border-box; + + grid-column: span 2; + + @include on-tablet { + grid-column: span 6; + } + + @include on-small-desktop { + height: 120px; + padding-block: 52px; + + grid-column: span 12; + } + + &__block { + display: flex; + gap: 32px; + align-items: center; + } + + &__logo { + @include hover(transform, scale(1.2)); + } + + &__hire-us { + position: relative; + font-weight: 700; + font-size: 13px; + line-height: 150%; + letter-spacing: 3px; + color: $white; + text-decoration: none; + text-transform: uppercase; + + &::after { + content: ''; + position: absolute; + bottom: -8px; + display: block; + height: 2px; + width: 100%; + background-color: $main-blue; + border-radius: 4px; + + transition: transform 0.3s; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + } + + &__items { + display: none; + margin: 0; + padding: 0; + + @include on-small-desktop { + display: block; + } + } + + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + gap: 48px; + } + + &__link { + position: relative; + text-decoration: none; + color: $white; + font-weight: 700; + font-size: 13px; + line-height: 150%; + letter-spacing: 3px; + text-transform: uppercase; + + &::after { + content: ''; + position: absolute; + bottom: -8px; + display: block; + height: 2px; + width: 100%; + background-color: $main-blue; + + transition: transform 0.3s; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + } +} diff --git a/src/styles/blocks/vpr.scss b/src/styles/blocks/vpr.scss new file mode 100644 index 0000000000..e80aad06c2 --- /dev/null +++ b/src/styles/blocks/vpr.scss @@ -0,0 +1,105 @@ +.vpr { + background-color: $white; + + @include on-tablet { + background-image: url(/src/images/vpr/shapes.svg); + background-position: center; + background-size: cover; + } + + &__container { + @include page-grid; + } + + &__content { + padding-block: 72px; + display: flex; + flex-direction: column; + align-items: center; + + grid-column: span 2; + + @include on-tablet { + padding-block: 200px; + + grid-column: span 6; + } + + @include on-small-desktop { + grid-column: 2 / -2; + } + + @include on-desktop { + grid-column: 3 / -3; + } + } + + &__title { + margin: 0; + color: $section-title-color; + font-weight: 600; + font-size: 44px; + line-height: 120%; + text-align: center; + + @include on-tablet { + font-size: 52px; + } + + @include on-small-desktop { + line-height: 150%; + } + } + + &__text { + margin: 0; + margin-top: 24px; + color: $section-text-color; + font-weight: 600; + font-size: 22px; + line-height: 150%; + text-align: center; + + @include on-tablet { + font-size: 24px; + } + + @include on-small-desktop { + line-height: 150%; + } + } + + &__button { + margin: 0; + margin-top: 56px; + height: 56px; + width: 100%; + background-color: $main-blue; + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + border-radius: 8px; + + text-decoration: none; + color: $white; + font-weight: 600; + font-size: 15px; + line-height: 100%; + + @include on-tablet { + margin-top: 64px; + width: 264px; + } + + &:hover { + transition: all 0.3s; + background-color: $button-hover-color; + cursor: pointer; + } + + &:active { + background-color: $button-active-color; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index fb9195d128..0000000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} diff --git a/src/styles/style.scss b/src/styles/style.scss new file mode 100644 index 0000000000..16b367845b --- /dev/null +++ b/src/styles/style.scss @@ -0,0 +1,21 @@ +@import 'utils/vars'; +@import 'utils/mixins'; +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/container'; +@import 'blocks/slide-bar'; +@import 'blocks/icons'; +@import 'blocks/menu'; +@import 'blocks/nav'; +@import 'blocks/main'; +@import 'blocks/about-us'; +@import 'blocks/our-expertise'; +@import 'blocks/category'; +@import 'blocks/services'; +@import 'blocks/cards'; +@import 'blocks/testimonials'; +@import 'blocks/peoples'; +@import 'blocks/vpr'; +@import 'blocks/contact-us'; +@import 'blocks/footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3e..0000000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%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..f6cb857186 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,48 @@ +@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 hover($_property, $_toValue) { transition: #{$_property} 0.3s; &:hover { #{$_property}: $_toValue; } } + +@mixin page-grid { + --columns: 2; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 6; + + column-gap: 30px; + } + + @include on-small-desktop { + --columns: 12; + + column-gap: 20px; + } + + @include on-desktop { + column-gap: 30px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..7538d363c8 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,17 @@ $c-gray: #eee; +$white: #fff; +$main-blue: #2060f6; +$button-hover-color: #144ED4; +$button-active-color: darkblue; +$header-bg-color: #2c2c2c; +$page-padding-inline: 20px; +$tablet-min-width: 640px; +$small-desktop-min-width: 1024px; +$desktop-min-width: 1280px; +$design-width: 1600px; +$section-title-color: #253757; +$section-text-color: #6C788B; +$section-note-color: #C0CDD7; +$card-number-color: #2060F6; +$card-learn-more-color: #334563; +