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..206930ad13 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://IrynaMariiko00.github.io/layout_dia/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/package-lock.json b/package-lock.json index fb7ba68c60..2fa5019376 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": "^1.8.6", + "@mate-academy/scripts": "^1.9.12", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "jest": "^29.7.0", @@ -1222,10 +1222,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "1.8.6", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.6.tgz", - "integrity": "sha512-b4om/whj4G9emyi84ORE3FRZzCRwRIesr8tJHXa8EvJdOaAPDpzcJ8A0sFfMsWH9NUOVmOwkBtOXDu5eZZ00Ig==", + "version": "1.9.12", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.9.12.tgz", + "integrity": "sha512-/OcmxMa34lYLFlGx7Ig926W1U1qjrnXbjFJ2TzUcDaLmED+A5se652NcWwGOidXRuMAOYLPU2jNYBEkKyXrFJA==", "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 aee2e6ad6b..e44c362eb4 100644 --- a/package.json +++ b/package.json @@ -18,12 +18,11 @@ "keywords": [], "author": "Mate Academy", "license": "GPL-3.0", - "dependencies": {}, "devDependencies": { "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^1.9.12", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "jest": "^29.7.0", diff --git a/src/fonts/OFL.txt b/src/fonts/OFL.txt new file mode 100644 index 0000000000..3e92931faa --- /dev/null +++ b/src/fonts/OFL.txt @@ -0,0 +1,93 @@ +Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://openfontlicense.org + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/src/images/about-us/Branding.png b/src/images/about-us/Branding.png new file mode 100644 index 0000000000..d38c134931 Binary files /dev/null and b/src/images/about-us/Branding.png differ diff --git a/src/images/about-us/Communication.png b/src/images/about-us/Communication.png new file mode 100644 index 0000000000..316086acae Binary files /dev/null and b/src/images/about-us/Communication.png differ diff --git a/src/images/about-us/Strategy.png b/src/images/about-us/Strategy.png new file mode 100644 index 0000000000..79c97c4d8c Binary files /dev/null and b/src/images/about-us/Strategy.png differ diff --git a/src/images/favicon.png b/src/images/favicon.png new file mode 100644 index 0000000000..74429ff591 Binary files /dev/null and b/src/images/favicon.png differ diff --git a/src/images/footer/facebook-hover.svg b/src/images/footer/facebook-hover.svg new file mode 100644 index 0000000000..18e37c8c59 --- /dev/null +++ b/src/images/footer/facebook-hover.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/footer/facebook.png b/src/images/footer/facebook.png new file mode 100644 index 0000000000..217f92cc1a Binary files /dev/null and b/src/images/footer/facebook.png differ diff --git a/src/images/footer/instagram-hover.svg b/src/images/footer/instagram-hover.svg new file mode 100644 index 0000000000..5254f81d89 --- /dev/null +++ b/src/images/footer/instagram-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/instagram.svg b/src/images/footer/instagram.svg new file mode 100644 index 0000000000..76a83d304d --- /dev/null +++ b/src/images/footer/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/twitter-hover.svg b/src/images/footer/twitter-hover.svg new file mode 100644 index 0000000000..8c05748009 --- /dev/null +++ b/src/images/footer/twitter-hover.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/footer/twitter.png b/src/images/footer/twitter.png new file mode 100644 index 0000000000..ff892cf772 Binary files /dev/null and b/src/images/footer/twitter.png differ diff --git a/src/images/header/Next.png b/src/images/header/Next.png new file mode 100644 index 0000000000..e48bc90dcc Binary files /dev/null and b/src/images/header/Next.png differ diff --git a/src/images/header/Prev.png b/src/images/header/Prev.png new file mode 100644 index 0000000000..321c1ccd92 Binary files /dev/null and b/src/images/header/Prev.png differ diff --git a/src/images/logo/Air.svg b/src/images/logo/Air.svg new file mode 100644 index 0000000000..70e90d9356 --- /dev/null +++ b/src/images/logo/Air.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/services/Vector.png b/src/images/services/Vector.png new file mode 100644 index 0000000000..60cd5e35dd Binary files /dev/null and b/src/images/services/Vector.png differ diff --git a/src/images/slider/Slide-0.png b/src/images/slider/Slide-0.png new file mode 100644 index 0000000000..e903b4744c Binary files /dev/null and b/src/images/slider/Slide-0.png differ diff --git a/src/images/slider/Slide-1.png b/src/images/slider/Slide-1.png new file mode 100644 index 0000000000..f24474d54d Binary files /dev/null and b/src/images/slider/Slide-1.png differ diff --git a/src/images/slider/Slide-2.png b/src/images/slider/Slide-2.png new file mode 100644 index 0000000000..f971e8ccdb Binary files /dev/null and b/src/images/slider/Slide-2.png differ diff --git a/src/images/testimonials/Group.png b/src/images/testimonials/Group.png new file mode 100644 index 0000000000..94eae1fe52 Binary files /dev/null and b/src/images/testimonials/Group.png differ diff --git a/src/images/testimonials/testimonial-ava-1.png b/src/images/testimonials/testimonial-ava-1.png new file mode 100644 index 0000000000..0879fac145 Binary files /dev/null and b/src/images/testimonials/testimonial-ava-1.png differ diff --git a/src/images/top-bar/Menu.png b/src/images/top-bar/Menu.png new file mode 100644 index 0000000000..0bb9b2da09 Binary files /dev/null and b/src/images/top-bar/Menu.png differ diff --git a/src/images/top-bar/close.png b/src/images/top-bar/close.png new file mode 100644 index 0000000000..bf6a5099ec Binary files /dev/null and b/src/images/top-bar/close.png differ diff --git a/src/images/vision/Shapes.png b/src/images/vision/Shapes.png new file mode 100644 index 0000000000..26ed3e89b0 Binary files /dev/null and b/src/images/vision/Shapes.png differ diff --git a/src/index.html b/src/index.html index 9a8c6db8f9..dc6a327e74 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,674 @@ - + - Dia + + + Air + + -

Dia

- +
+
+
+
+ + + + +
+ + + +

Hire Us

+ +
+
+ +
+
+
+
+

Strategic Agency

+

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

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

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

+
+
+ photo +
+

Branding

+

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

+
+
+ +
+ photo +
+

Communication

+

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

+
+
+ +
+ photo +
+

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

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

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

+ +
+
Azadeh Hawkins
+
+ Hawkins Consulting +
+
+
+
+ +
+
+
+
+ portrait +
+ +
+

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

+
+ +
+
+
+
+ + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..a4eb751232 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,37 @@ -'use strict'; +document.addEventListener('DOMContentLoaded', function () { + const prevButton = document.querySelector('.slider__switch--prev'); + const nextButton = document.querySelector('.slider__switch--next'); + const photos = document.querySelectorAll('.slider__photo'); + + let currentIndex = 0; + + function updateSlider() { + photos.forEach(function(photo, index) { + if(index===currentIndex) { + photo.style.display = 'block'; + } else { + photo.style.display = 'none'; + } + }); + } + + prevButton.addEventListener('click', function() { + if (currentIndex > 0) { + currentIndex = currentIndex - 1; + } else { + currentIndex = photos.length - 1; + } + updateSlider(); + }); + + nextButton.addEventListener('click', function() { + if (currentIndex < photos.length - 1) { + currentIndex = currentIndex + 1; + } else { + currentIndex = 0; + } + updateSlider(); + }); + + updateSlider(); +}); diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 0000000000..d3f8794d54 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,47 @@ +.about-us { + margin-bottom: 120px; + + @include on-tablet { + margin-bottom: 148px; + } + + &__title { + color: $main-accent-color; + font-family: $poppins-font-family; + font-weight: $font-weight-add; + font-size: 32px; + text-align: center; + line-height: 48px; + margin-top: 0; + margin-bottom: 24px; + + @include on-tablet { + margin-bottom: 16px; + } + } + + &__description { + text-align: center; + font-family: $open-sans-font-family; + color: $main-add-color; + font-size: 22px; + line-height: 33px; + font-weight: $font-weight-add; + margin: 0; + + @include on-tablet { + font-size: 24px; + line-height: 36px; + } + + @include on-small-desktop { + max-width: 754px; + margin: auto; + } + } +} + +.expertise { + background-color: $header-footer-text-color; + +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 0000000000..6a37103350 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,39 @@ +.button { + grid-column: span 2; + margin-top: 72px; + padding: 0; + height: 50px; + width: 100%; + border-radius: 8px; + border: none; + background: linear-gradient(90deg, $accent-blue-color-gradient-l, $accent-blue-color-gradient-r); + + @include on-tablet { + width: 264px; + } + + @include hover (transform, scale(0.98)); + + &:active { + background: linear-gradient(90deg, $accent-blue-color-gradient-R, $accent-blue-color-gradient-r); + } + + &__text { + color: $header-footer-text-color; + text-decoration: none; + font-family: $poppins-font-family; + font-size: 15px; + font-weight: $font-weight-add; + line-height: 22.5px; + text-align: center; + } + + &--vision { + max-width: 340px; + } + + &--send { + margin: 0; + } +} + diff --git a/src/styles/blocks/contact.scss b/src/styles/blocks/contact.scss new file mode 100644 index 0000000000..791c9dce17 --- /dev/null +++ b/src/styles/blocks/contact.scss @@ -0,0 +1,105 @@ + +.footer__contact { + margin-block: 80px; + grid-column: 1 / -1; + color: $header-footer-text-color; + + @include on-tablet { + margin-top: 120px; + margin-bottom: 140px; + } + + @include on-small-desktop { + grid-column: 7 / -1; + margin-top: 160px; + } + + &-title { + font-family: $poppins-font-family; + font-weight: $font-weight-add; + font-size: 32px; + line-height: 48px; + margin: 0; + } + + &-inf-wrapper { + display: grid; + gap: 40px; + margin-top: 48px; + + @include on-tablet { + margin-top: 56px; + gap: 48px; + } + } + + &-inf { + display: grid; + gap: 8px; + } + + &-text { + margin: 0; + font-family: $poppins-font-family; + font-weight: $font-weight-accent; + line-height: 19.5px; + letter-spacing: 3px; + font-size: 13px; + text-transform: uppercase; + } + + &-description { + margin: 0; + font-family: $open-sans-font-family; + font-weight: $font-weight-add; + font-size: 24px; + line-height: 36px; + } + + &-icons { + --columns: 3; + + margin-top: 8px; + grid-template-columns: repeat(var(--columns), 1fr); + display: grid; + gap: 32px; + width: 160px; + } + + &-icon { + width: 32px; + height: 32px; + } + + &-icon--facebook { + grid-column: 1 / 1; + background-image: url(../images/footer/facebook.png); + background-repeat: no-repeat; + background-size: 32px 32px; + + @include hover (background-image, url(../images/footer/facebook-hover.svg)); + @include hover (transform, scale(1.2)); + } + + &-icon--twitter { + grid-column: 2 / 2; + background-image: url(../images/footer/twitter.png); + background-repeat: no-repeat; + background-size: 32px 32px; + + @include hover (background-image, url(../images/footer/twitter-hover.svg)); + @include hover (transform, scale(1.2)); + } + + &-icon--instagram { + grid-column: 3 / -1; + background-image: url(../images/footer/instagram.svg); + background-repeat: no-repeat; + background-size: 32px 32px; + background-position: center; + + @include hover (background-image, url(../images/footer/instagram-hover.svg)); + @include hover (transform, scale(1.2)); + + } +} diff --git a/src/styles/blocks/expertise.scss b/src/styles/blocks/expertise.scss new file mode 100644 index 0000000000..0729075ae2 --- /dev/null +++ b/src/styles/blocks/expertise.scss @@ -0,0 +1,84 @@ +.expertise { + &__content { + @include on-small-desktop { + max-width: 1145px; + margin: auto; + } + } + + &__title { + font-family: $poppins-font-family; + font-weight: $font-weight-add; + font-size: 44px; + line-height: 52.8px; + text-align: center; + color: $main-accent-color; + margin: 0; + + @include on-tablet { + font-size: 52px; + } + } + + &__cards { + display: grid; + grid-template-columns: repeat(1, 1fr); + + @include on-small-desktop { + grid-template-columns: repeat(3, 1fr); + gap: 137px; + } + } + + &__card { + display: grid; + grid-column: span 1; + gap: 32px; + text-align: center; + justify-items: center; + padding-top: 56px; + + @include on-tablet { + padding-top: 64px; + } + + @include on-small-desktop { + gap: 40px; + } + + &-img { + width: 166px; + height: 166px; + border-radius: 30px; + + @include hover (transform, scale(1.05)); + + &:hover { + box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3); + } + } + + &-text { + display: grid; + gap: 16px; + } + + &-title { + font-family: $poppins-font-family; + color: $main-accent-color; + font-weight: $font-weight-add; + font-size: 20px; + line-height: 28px; + margin: 0; + } + + &-description { + font-family: $open-sans-font-family; + color: $main-add-color; + font-size: 14px; + line-height: 21px; + margin: 0; + max-width: 365px; + } + } +} diff --git a/src/styles/blocks/floating-nav.scss b/src/styles/blocks/floating-nav.scss new file mode 100644 index 0000000000..eeff11d5ef --- /dev/null +++ b/src/styles/blocks/floating-nav.scss @@ -0,0 +1,31 @@ +.floating-nav { + display: flex; + justify-content: center; + margin-top: 170px; + + &__list { + padding-top: 6px; + display: grid; + gap: 48px; + padding-left: 0; + + } + + &__item { + text-align: center; + list-style-type: none; + } + + &__link { + text-decoration: none; + color: $header-footer-text-color; + text-transform: uppercase; + font-family: $poppins-font-family; + font-weight: $font-weight-accent; + letter-spacing: 3px; + text-align: center; + line-height: 19.5px; + font-size: 14px; + } + +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..523b44dd2c --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,52 @@ +.footer { + background-color: $bg-color-header; + border-radius: 30px 30px 0 0; + + &__content { + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); + display: grid; + column-gap: 20px; + + @include on-small-desktop { + --columns: 12; + + grid-template-columns: repeat(var(--columns), 1fr); + } + } + + &__bottom { + display: flex; + margin-bottom: 80px; + flex-direction: column; + gap: 48px; + + @include on-tablet { + gap: 24px; + } + + @include on-small-desktop { + flex-direction: row; + justify-content: space-between; + align-items: center; + } + + &-list { + display: grid; + gap: 24px; + margin: 0; + list-style-type: none; + padding-left: 0; + + @include on-tablet { + display: flex; + gap: 40px; + } + } + + &-item { + @include hover (transform, scale(1.1)); + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..a75a597e20 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,111 @@ +body { + margin: 0; +} + +.header { + background-color: $bg-color-header; + border-radius: 0 0 30px 30px; + border: none; + top: 0; + right: 0; + left: 0; + box-sizing: border-box; + + + @include on-small-desktop { + height: 800px; + } + + &__slider { + min-width: 100%; + margin-top: 48px; + + @include on-tablet { + margin-top: 147px; + } + } +} + +.header__content { + --columns: 2; + + padding-inline: 20px; + padding-top: 48px; + + @include on-tablet { + padding-inline: 41px; + padding-top: 56px; + } + + @include on-small-desktop { + padding-inline: 56px; + } + + @include on-desktop { + max-width: 500px; + margin-left: auto; + margin-right: 0; + } +} + +.agency-container { + grid-column: span 2; + color: $header-footer-text-color; + + @include on-desktop { + max-width: 1200px; + margin-inline: auto; + } + + &__title { + font-family: $poppins-font-family; + font-weight: $font-weight-add; + font-size: 52px; + line-height: 62.4px; + letter-spacing: -2px; + margin-bottom: 32px; + margin-top: 0; + + @include on-tablet { + font-size: 64px; + line-height: 68px; + } + } + + &__description { + font-family: $open-sans-font-family; + font-size: 18px; + line-height: 27px; + margin: 0; + text-align: left; + } +} + +.header__grid { + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); + grid-template-rows: auto auto; + gap: 48px; + display: grid; + height: 90%; + + @include on-tablet { + gap: 147px 48px; + } + + @include on-small-desktop { + gap: 0 106px; + height: 114%; + } + + &-agency { + grid-column: 1 / span 2; + + @include on-small-desktop { + grid-column: 1 / span 1; + + margin-top: 120px; + } + } +} diff --git a/src/styles/blocks/icons.scss b/src/styles/blocks/icons.scss new file mode 100644 index 0000000000..dcb82b2e2e --- /dev/null +++ b/src/styles/blocks/icons.scss @@ -0,0 +1,32 @@ +.icon { + width: 18px; + height: 8px; + display: inline-block; + + &--menu { + background-image: url(../images/top-bar/Menu.png); + background-size: cover; + background-repeat: no-repeat; + display: block; + margin-top: 12px; + cursor: pointer; + + @include on-small-desktop { + display: none; + } + } + &--close { + height: 18px; + background-image: url(../images/top-bar/close.png); + background-size: cover; + background-repeat: no-repeat; + display: block; + margin-top: 7px; + cursor: pointer; + + @include on-small-desktop { + display: none; + } + } +} + diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 0000000000..e4fa1d7530 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,6 @@ +.main { + &__content { + margin: 0; + } + +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..5c6d9e55cf --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,18 @@ +.menu { +position: fixed; +top: 0; +right: 0; +left: 0; +opacity: 0; +pointer-events: none; +background-color: $bg-color-header; +overflow: hidden; +height: 100%; +z-index: 1000; + + + &:target { + opacity: 1; + pointer-events: all; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..a92ed77edf --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,92 @@ +.nav { + &__list { + list-style-type: none; + gap: 48px; + padding-top: 6px; + display: none; + justify-content: center; + + @include on-small-desktop { + display: flex; + } + } + + &__item { + @include hover (transform, scale(1.1)); + + &::after { + content: ''; + display: block; + position: absolute; + bottom: -8px; + height: 2px; + width: 100%; + background: linear-gradient(90deg, $accent-blue-color-gradient-l, $accent-blue-color-gradient-r); + transition: transform 0.3s; + transform: scale(0); + } + + &:hover::after { + transform: scale(1); + } + } + + &__link { + text-decoration: none; + color: $header-footer-text-color; + text-transform: uppercase; + font-family: $poppins-font-family; + font-weight: $font-weight-accent; + letter-spacing: 3px; + text-align: center; + line-height: 19.5px; + font-size: 13px; + } +} + +.hiring { + display: flex; + text-decoration: none; + + &__hire-us { + position: relative; + text-align: center; + margin-block: 0; + color: $header-footer-text-color; + font-family: $poppins-font-family; + font-weight: $font-weight-accent; + text-transform: uppercase; + font-size: 13px; + line-height: 19.5px; + letter-spacing: 3px; + display: flex; + + @include hover (transform, scale(1.1)); + + @include on-small-desktop { + padding-top: 6px; + } + + &::after { + content: ''; + position: absolute; + left: 0; + bottom: -8px; + width: 100%; + height: 2px; + background: linear-gradient(90deg, $accent-blue-color-gradient-l, $accent-blue-color-gradient-r); + border-radius: 4px; + + @include on-tablet { + bottom: -8px; + } + + @include on-desktop { + bottom: -8px; + } + } + } +} + + + diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..3e1dab3eaf --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,68 @@ +.page { + scroll-behavior: smooth; + background: $c-gray; + overflow: scroll; + overflow-x: hidden; +} + +a { + cursor: pointer; +} + +.container { + flex-direction: column; + gap: 0 48px; + padding-inline: 20px; + padding-top: 20px; + display: flex; + + @include on-tablet { + padding-inline: 41px; + } + + @include on-small-desktop { + padding-top: 48px; + padding-inline: 54px; + } + + @include on-desktop { + max-width: 1200px; + margin-inline: auto ; + } + + &--main { + padding-top: 120px; + padding-inline: 20px; + padding-bottom: 0; + + @include on-tablet { + padding-top: 148px; + padding-inline: 41px; + } + } + + &--main-accent { + padding-inline: 20px; + border-radius: 30px; + padding-block: 72px; + + @include on-tablet { + padding-block: 128px; + } + } + + &--main-vision { + margin-block: 120px; + margin-inline: 0; + + @include on-tablet { + margin-top: 148px; + margin-bottom: 0; + } + } +} + +.page:has(.page__menu:target) { + overflow: hidden; +} + diff --git a/src/styles/blocks/send.scss b/src/styles/blocks/send.scss new file mode 100644 index 0000000000..d78831efd0 --- /dev/null +++ b/src/styles/blocks/send.scss @@ -0,0 +1,118 @@ +.footer__send { + grid-column: 1 / -1; + + margin-bottom: 0; + margin-top: 52px; + + @include on-tablet { + margin-top: 160px; + } + + @include on-small-desktop { + grid-column: 1 / 6; + } + + &-title { + font-family: $poppins-font-family; + font-weight: $font-weight-add; + font-size: 32px; + line-height: 41.6px; + text-align: left; + color: $header-footer-text-color; + margin: 0; + + @include on-tablet { + line-height: 48px; + } + } + + &-form { + display: flex; + flex-direction: column; + gap: 56px; + + @include on-tablet { + max-width: 370px; + gap: 80px; + } + + @include on-small-desktop { + max-width: 370px; + } + + @include on-desktop { + max-width: 460px; + } + } + + &-inputs { + margin-top: 48px; + margin-bottom: 0; + display: grid; + gap: 40px; + + @include on-tablet { + margin-top: 56px; + gap: 48px; + } + } + + + &-input { + border: none; + background-color: $bg-color-header; + outline: none; + width: 100%; + border-bottom: 2px solid $header-footer-text-color; + color: $header-footer-text-color; + font-family: $poppins-font-family; + font-weight: $font-weight-add; + font-size: 15px; + line-height: 22.5px; + padding-bottom: 16px; + caret-color:$main-add2-color; + + &:autofill, + &:-webkit-autofill { + -webkit-text-fill-color: $header-footer-text-color; + background-color: $bg-color-header !important; + border-bottom: 2px solid $accent-blue-color-gradient-r; + transition: background-color 5000s ease-in-out 0s; + } + + &:autofill:hover, + &:-webkit-autofill:hover, + &:autofill:focus, + &:-webkit-autofill:focus { + -webkit-text-fill-color: $header-footer-text-color; + background-color: $bg-color-header !important; + border-bottom: 2px solid $accent-blue-color-gradient-r; + } + + &::placeholder { + font-family: $poppins-font-family; + font-weight: $font-weight-add; + font-size: 15px; + line-height: 22.5px; + } + } + + &-textarea { + width: 100%; + color: $header-footer-text-color; + outline: none; + border: none; + caret-color:$main-add2-color; + background-color: $bg-color-header; + border-bottom: 2px solid $header-footer-text-color; + resize: none; + overflow: hidden; + + &::placeholder { + font-family: $poppins-font-family; + font-weight: $font-weight-add; + font-size: 15px; + line-height: 22.5px; + } + } +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..a658c8bdbc --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,178 @@ +.services { + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); + display: grid; + + @include on-tablet { + --columns: 6; + + grid-template-columns: repeat(var(--columns), 1fr); + gap: 30px; + } + + @include on-small-desktop { + --columns: 12; + + grid-template-columns: repeat(var(--columns), 1fr); + max-width: 1148px; + margin: auto; + } + + &__text-wrapper { + grid-column: 1 / span 2; + + @include on-tablet { + grid-column: 1 / span 3; + } + + @include on-small-desktop { + grid-column: 1 / span 6; + margin-right: 176px; + margin-top: 100px; + } + + @include on-desktop { + grid-column: 1 / span 6; + margin-right: 226px; + max-width: 364px; + } + } + + &__add-title { + font-family: $poppins-font-family; + font-weight: $font-weight-accent; + font-size: 13px; + line-height: 19.5px; + letter-spacing: 3px; + text-align: left; + text-transform: uppercase; + color: $main-add2-color; + margin: 0; + margin-bottom: 16px; + } + + &__text { + display: grid; + gap: 24px; + } + + &__title { + margin: 0; + font-family: $poppins-font-family; + font-weight: $font-weight-add; + font-size: 32px; + line-height: 41.6px; + color: $main-accent-color; + } + + &__description { + margin: 0; + font-family: $open-sans-font-family; + font-size: 13px; + line-height: 21px; + color: $main-add-color; + margin-bottom: 48px; + + @include on-tablet { + margin-bottom: 56px; + } + } + + &__cards { + grid-column: 1 / -1; + gap: 24px; + display: grid; + + @include on-tablet { + grid-template-columns: repeat(2, 1fr); + gap: 30px; + } + + @include on-small-desktop { + grid-column: 7 / -1; + padding-top: 148px; + max-width: 558px; + } + } + + &__card { + background-color: $header-footer-text-color; + border-radius: 30px; + padding: 32px; + position: relative; + + @include on-tablet { + &:nth-child(2n) { + transform: translateY(-50%); + } + } + + &:hover { + box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); + } + + &-number-wrapper { + display: flex; + align-items: center; + justify-content: center; + border-radius: 23px; + background-color:rgba(32, 96, 246, 0.1); + height: 24px; + width: 46px; + } + + &-number { + color: $accent-blue-color-gradient-r; + font-family: $poppins-font-family; + font-size: 13px; + font-weight: $font-weight-add; + line-height: 19.5px; + padding-top: 2px; + } + + &-text { + margin-top: 24px; + margin-bottom: 32px; + font-family: $open-sans-font-family; + color: $main-add-color; + font-size: 13px; + line-height: 19.5px; + font-weight: $font-weight-add; + } + + &-button-wrapper { + display: flex; + } + + &-button { + background: linear-gradient(90deg, $accent-blue-color-gradient-l, $accent-blue-color-gradient-r); + border: none; + border-radius: 50%; + width: 40px; + height: 40px; + margin-right: 16px; + align-self: center; + + @include hover (transform, scale(1.1)); + + &:active { + background: linear-gradient(90deg, $accent-blue-color-gradient-R, $accent-blue-color-gradient-r); + } + } + + &-button-img { + padding-top: 3px; + height: 16px; + width: 16px; + } + + &-name { + font-family: $poppins-font-family; + font-size: 15px; + line-height: 22.5px; + color: $button-name-color; + font-weight: $font-weight-add; + } + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 0000000000..68a9dcb395 --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,137 @@ +.slider { + grid-column: span 2; + padding-inline: 0; + margin: 0; + position: relative; + height: 390px; + + @include on-small-desktop { + grid-column: 2 / span 1; + height: 674px; + padding-top: 48px; + } + + @include on-desktop { + max-width: 1200px; + margin-inline: auto ; + } + + &__nav-container { + z-index: 2; + position: absolute; + gap: 16px !important; + bottom: 24px; + + @include on-tablet { + bottom: 32px; + } + + @include on-small-desktop { + grid-template-columns: 1fr 3fr; + display: grid; + padding-left: 78px; + bottom: 48px; + position: absolute; + column-gap: 24px !important; + } + + @include on-desktop { + padding-left: 48px; + } + } + + &__nav-switches { + display: flex; + gap: 16px; + + @include on-small-desktop { + align-items: center; + } + } + + &__switch { + background-color: $header-footer-text-color; + width: 32px; + height: 32px; + border-radius: 50%; + border: none; + background-size: contain; + background-repeat: no-repeat; + padding: 0; + background-position: center; + cursor: pointer; + + @include hover (transform, scale(0.9)); + + &--prev { + background-image: url(../images/header/Prev.png); + } + + &--next { + background-image: url(../images/header/Next.png); + } + } + + &__nav-text { + margin: 0; + + @include on-small-desktop { + padding-top: 10px; + } + } + + &__title { + text-transform: uppercase; + color: $header-footer-text-color; + font-family: $poppins-font-family; + font-weight: $font-weight-accent; + text-align: left; + font-size: 13px; + line-height: 19.5px; + letter-spacing: 3px; + margin: 0; + } + + &__description { + color: $header-footer-text-color; + font-family: $open-sans-font-family; + font-size: 14px; + line-height: 19.6px; + margin-top: 8px; + margin-bottom: 0; + } + + &__photos { + overflow: hidden; + + display: grid; + height: 390px; + width: 100%; + + @include on-small-desktop { + height: 100%; + } + + } + + &__photo { + height: 100%; + width: 100%; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + border-radius: 30px; + grid-column: span 1; + object-fit: cover; + + @include on-small-desktop{ + border-radius: 30px 30px 30px 0; + } + + @for $i from 0 through 2 { + &.photo--#{$i} { + background-image: url('../images/slider/Slide-#{$i}.png'); + } + } + } +} diff --git a/src/styles/blocks/testimonials-card.scss b/src/styles/blocks/testimonials-card.scss new file mode 100644 index 0000000000..9a88f2e7f2 --- /dev/null +++ b/src/styles/blocks/testimonials-card.scss @@ -0,0 +1,134 @@ + +.testimonials__cards { + --columns: 2; + + grid-column: 1 / -1; + grid-template-columns: repeat(var(--columns), 1fr); + display: grid; + gap: 24px; + + @include on-small-desktop { + --columns: 12; + + margin-bottom: 38px; + } + + @include on-desktop { + margin-bottom: 0; + } +} + +.testimonials__card { + grid-column: 1 / -1; + background-color: $header-footer-text-color; + border-radius: 30px; + position: relative; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + padding-inline: 31px; + padding-block: 32px; + + @include on-small-desktop { + grid-column: span 4; + } + + @include hover (transform, scale(1.08)); + + &:hover { + box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); + } + + &-photo { + display: flex; + position: relative; + width: 196px; + height: 196px; + margin-bottom: 24px; + + @include on-tablet { + width: 250px; + height: 250px; + } + + @include on-small-desktop { + height: 196px; + width: 196px; + } + } + + &-decor { + background-color: $accent-blue-color-gradient-r; + border-radius: 12px; + width: 55.6%; + height: 22.4%; + } + + &-decor--left { + transform: translate(10%, 90%) rotate(-60deg); + } + + &-decor--right { + align-self: end; + transform: translate(-10%, -90%) rotate(-60deg); + } + + &-img { + position: absolute; + border-radius: 50%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 55%; + height: 55%; + object-fit: cover; + } + + &-text-wrapper { + background-image: url(../images/testimonials/Group.png); + background-repeat: no-repeat; + display: grid; + gap: 16px; + background-size: 24px 24px; + background-position: top center; + } + + &-text { + margin-bottom: 0; + margin-top: 35px; + text-align: center; + font-family: $open-sans-font-family; + font-size: 13px; + font-weight: $font-weight-add; + color: $main-add-color; + line-height: 19.5px; + } + + &-title-wrapper { + display: grid; + gap: 4px; + } + + &-title { + margin: 0; + font-family: $open-sans-font-family; + font-size: 13px; + font-weight: $font-weight-add; + color: $main-accent-color; + line-height: 19.5px; + text-align: center; + } + + &-add-title { + margin: 0; + font-family: $poppins-font-family; + font-weight: $font-weight-accent; + color: $main-add2-color; + font-size: 13px; + letter-spacing: 3px; + text-transform: uppercase; + line-height: 19.5px; + text-align: center; + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..328024e53f --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,51 @@ +.testimonials { + &__content { + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); + display: grid; + gap: 24px; + + @include on-small-desktop { + max-width: 1148px; + margin: auto; + } + } + + &__text-wrapper { + display: grid; + gap: 16px; + margin-bottom: 24px; + grid-column: 1 / -1; + + @include on-tablet { + width: 262px; + margin-bottom: 56px; + } + + @include on-small-desktop { + margin-bottom: 85px; + } + } + + &__add-title { + font-family: $poppins-font-family; + font-weight: $font-weight-accent; + text-transform: uppercase; + color: $main-add2-color; + font-size: 13px; + line-height: 19.5px; + letter-spacing: 3px; + margin: 0; + } + + &__title { + font-family: $poppins-font-family; + font-weight: $font-weight-add; + font-size: 32px; + line-height: 48px; + color: $main-accent-color; + margin: 0; + + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..0c7229aeaa --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,27 @@ +.top-bar { + height: 30px; + display: flex; + justify-content: space-between; + align-items: center; + + &__nav { + display: none; + + @include on-small-desktop { + display: flex; + } + } + + &__logo-icon { + gap: 32px; + display: flex; + + } + + &__logo { + width: 46px; + height: 28px; + + @include hover (transform, scale(1.1)); + } +} diff --git a/src/styles/blocks/vision.scss b/src/styles/blocks/vision.scss new file mode 100644 index 0000000000..7633a84128 --- /dev/null +++ b/src/styles/blocks/vision.scss @@ -0,0 +1,53 @@ +.vision { + &__container { + background-color: $header-footer-text-color; + padding-block: 72px; + padding-inline: 20px; + justify-content: center; + text-align: center; + display: flex; + + @include on-tablet { + padding-block: 200px; + background-image: url(../images/vision/Shapes.png); + background-repeat: no-repeat; + background-position: 50% 50%; + } + } + + &__title { + font-family: $poppins-font-family; + font-weight: $font-weight-add; + color: $main-accent-color; + font-size: 44px; + line-height: 52.8px; + + margin: 0; + + @include on-tablet { + font-size: 52px; + line-height: 62.4px; + } + + @include on-small-desktop { + line-height: 78px; + } + } + + &__description { + font-family: $open-sans-font-family; + font-weight: $font-weight-add; + font-size: 22px; + line-height: 33px; + color: $main-add-color; + margin: 0; + + @include on-tablet { + max-width: 558px; + } + + @include on-small-desktop { + max-width: 730px; + } + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss new file mode 100644 index 0000000000..7fd8e51ff7 --- /dev/null +++ b/src/styles/index.scss @@ -0,0 +1,21 @@ +@import 'utils/vars'; +@import 'utils/mixins'; +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/icons'; +@import 'blocks/nav'; +@import 'blocks/menu'; +@import 'blocks/floating-nav'; +@import 'blocks/button'; +@import 'blocks/slider'; +@import 'blocks/main'; +@import 'blocks/about-us'; +@import 'blocks/expertise'; +@import 'blocks/services'; +@import 'blocks/testimonials'; +@import 'blocks/testimonials-card'; +@import 'blocks/vision'; +@import 'blocks/footer'; +@import 'blocks/send'; +@import 'blocks/contact'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..9085804f54 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,3 +1,33 @@ +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-small-desktop { + @media (min-width: $sm-desktop-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-design { + @media (min-width: $design-min-width) { + @content; + } +} + +@mixin on-large-screen { + @media (min-width: $large-screens-min-width) { + @content; + } +} + @mixin hover($_property, $_toValue) { transition: #{$_property} 0.3s; &:hover { diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..e5cb75112c 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,26 @@ -$c-gray: #eee; +$tablet-min-width: 640px; +$sm-desktop-min-width: 1024px; +$desktop-min-width: 1280px; +$design-min-width: 1600px; +$large-screens-min-width: 2560px; +$bg-color-header: #2c2c2c; +$c-gray: #f2f6fa; +$header-footer-text-color: #FFF; +$accent-blue-color-gradient-r: #2060F6; +$accent-blue-color-gradient-R: #2060F7; +$accent-blue-color-gradient-l: #5b84e1; +$poppins-font-family: 'Poppins', sans-serif; +$open-sans-font-family: 'Open Sans', sans-serif; +$font-weight-accent: 700; +$font-weight-add: 600; +$effectDuration: 0.3s; +$main-accent-color: #253757; +$main-add-color: #6C788B; +$main-add2-color: #C0CDD7; +$button-name-color: #334563; + + + + + +