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..242ec04c42 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://MateuszCieplak.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..bcdb709c45 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,13 +7,12 @@ "": { "name": "dia", "version": "1.0.0", - "hasInstallScript": true, "license": "GPL-3.0", "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.8.6", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "jest": "^29.7.0", @@ -1226,6 +1225,7 @@ "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.6.tgz", "integrity": "sha512-b4om/whj4G9emyi84ORE3FRZzCRwRIesr8tJHXa8EvJdOaAPDpzcJ8A0sFfMsWH9NUOVmOwkBtOXDu5eZZ00Ig==", "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..2aaa420d2c 100644 --- a/package.json +++ b/package.json @@ -11,19 +11,16 @@ "test:only": "mate-scripts test", "build": "mate-scripts build", "deploy": "mate-scripts deploy", - "update": "mate-scripts update", - "postinstall": "npm run update", "test": "npm run lint && npm run test:only" }, "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.8.6", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "jest": "^29.7.0", diff --git a/src/images/logo/header-Air.svg b/src/images/logo/header-Air.svg new file mode 100644 index 0000000000..70e90d9356 --- /dev/null +++ b/src/images/logo/header-Air.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/logo/header-burger.svg b/src/images/logo/header-burger.svg new file mode 100644 index 0000000000..48fc38e477 --- /dev/null +++ b/src/images/logo/header-burger.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo/header_icon-menu-close.svg b/src/images/logo/header_icon-menu-close.svg new file mode 100644 index 0000000000..331edf3644 --- /dev/null +++ b/src/images/logo/header_icon-menu-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/our__expertise/experties-1.png b/src/images/our__expertise/experties-1.png new file mode 100644 index 0000000000..87f697b2bc Binary files /dev/null and b/src/images/our__expertise/experties-1.png differ diff --git a/src/images/our__expertise/experties-2.png b/src/images/our__expertise/experties-2.png new file mode 100644 index 0000000000..cbfcd2e5a5 Binary files /dev/null and b/src/images/our__expertise/experties-2.png differ diff --git a/src/images/our__expertise/experties-3.png b/src/images/our__expertise/experties-3.png new file mode 100644 index 0000000000..4a032ef455 Binary files /dev/null and b/src/images/our__expertise/experties-3.png differ diff --git a/src/images/our__expertise/image-1.jpg b/src/images/our__expertise/image-1.jpg new file mode 100644 index 0000000000..9d5117197e Binary files /dev/null and b/src/images/our__expertise/image-1.jpg differ diff --git a/src/images/our__expertise/image-2.jpg b/src/images/our__expertise/image-2.jpg new file mode 100644 index 0000000000..d4095e2d5e Binary files /dev/null and b/src/images/our__expertise/image-2.jpg differ diff --git a/src/images/our__expertise/image-3.jpg b/src/images/our__expertise/image-3.jpg new file mode 100644 index 0000000000..128a5b3438 Binary files /dev/null and b/src/images/our__expertise/image-3.jpg differ diff --git a/src/images/services/services-arrow-left.svg b/src/images/services/services-arrow-left.svg new file mode 100644 index 0000000000..c535a27bf9 --- /dev/null +++ b/src/images/services/services-arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/slider/arrow-left.svg b/src/images/slider/arrow-left.svg deleted file mode 100644 index 66daed19a5..0000000000 --- a/src/images/slider/arrow-left.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/slider/arrow-right.svg b/src/images/slider/arrow-right.svg deleted file mode 100644 index e9ddf85873..0000000000 --- a/src/images/slider/arrow-right.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/slider/slide-img-1.jpg b/src/images/slider/slide-img-1.jpg index 98c4188508..7b7ab0b3c8 100644 Binary files a/src/images/slider/slide-img-1.jpg and b/src/images/slider/slide-img-1.jpg differ diff --git a/src/images/slider/slide-img-2.jpg b/src/images/slider/slide-img-2.jpg new file mode 100644 index 0000000000..7fc390324c Binary files /dev/null and b/src/images/slider/slide-img-2.jpg differ diff --git a/src/images/slider/slide-img-3.jpg b/src/images/slider/slide-img-3.jpg new file mode 100644 index 0000000000..f23d6c53a1 Binary files /dev/null and b/src/images/slider/slide-img-3.jpg differ diff --git a/src/images/slider/slide-left.svg b/src/images/slider/slide-left.svg new file mode 100644 index 0000000000..2055a17bbc --- /dev/null +++ b/src/images/slider/slide-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/slider/slide-right.svg b/src/images/slider/slide-right.svg new file mode 100644 index 0000000000..71e16adb61 --- /dev/null +++ b/src/images/slider/slide-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/socials-icons/socials-icon-facebook.svg b/src/images/socials-icons/socials-icon-facebook.svg new file mode 100644 index 0000000000..a148dbac37 --- /dev/null +++ b/src/images/socials-icons/socials-icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/socials-icons/socials-icon-instagram.svg b/src/images/socials-icons/socials-icon-instagram.svg new file mode 100644 index 0000000000..39f34206b2 --- /dev/null +++ b/src/images/socials-icons/socials-icon-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/socials-icons/socials-icon-twitter.svg b/src/images/socials-icons/socials-icon-twitter.svg new file mode 100644 index 0000000000..baee0f5fab --- /dev/null +++ b/src/images/socials-icons/socials-icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/socials-icons/socials-icon-x.svg b/src/images/socials-icons/socials-icon-x.svg new file mode 100644 index 0000000000..35e914da1c --- /dev/null +++ b/src/images/socials-icons/socials-icon-x.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/testimonials/testimonial-quote.svg b/src/images/testimonials/testimonial-quote.svg new file mode 100644 index 0000000000..14efa5df60 --- /dev/null +++ b/src/images/testimonials/testimonial-quote.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/vision/background-img.png b/src/images/vision/background-img.png new file mode 100644 index 0000000000..26ed3e89b0 Binary files /dev/null and b/src/images/vision/background-img.png differ diff --git a/src/index.html b/src/index.html index 9a8c6db8f9..8301952eb6 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,568 @@ - + - Dia + Air + + + + + + - -

Dia

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

Strategic Agency

+

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

+ +

+ Learn more +

+ +
+
+
+ slide__img-1 + slide__img-2 + slide__img-3 +
+
+
+ + +
+
+

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

+
+
+ our__expertise__image-1 +
+

+ Branding +

+

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

+
+
+
+
+ our__expertise__image-2 +
+
+

+ Communication +

+

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

+
+
+
+
+ our__expertise__image-3 +
+
+

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

+
+
+

+ Brand Development +
+ Copywriting +
+ Logo & Webite Design +
+ Packaging +

+
+ +
+
+
+
+ Learn more +
+ +
+
+
+

+ 003 +

+
+
+

+ Brand Development +
+ Copywriting +
+ Logo & Webite Design +
+ Packaging +

+
+ +
+
+
+
+ Learn more +
+ +
+
+
+

+ 004 +

+
+
+

+ Brand Development +
+ Copywriting +
+ Logo & Webite Design +
+ Packaging +

+
+ +
+
+
+
+ Learn more +
+ +
+
+
+
+
+

+ Testimonials +

+

+ What people say +

+
+
+
+ testimonials-person-1 +
+
+
+

+ 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 +
+
+
+
+ testimonials-person-2 +
+
+
+

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

+
+
+ Azadeh Hawkins +
+
+ Hawkins Consulting +
+
+
+
+ testimonials-person-3 +
+
+
+

+ 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/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..21bd3b689e 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,8 @@ 'use strict'; + +document +.getElementById('message-form') +.addEventListener('submit', function (event) { + event.preventDefault(); +}); + diff --git a/src/scripts/sliders.js b/src/scripts/sliders.js new file mode 100644 index 0000000000..4dc983cd9a --- /dev/null +++ b/src/scripts/sliders.js @@ -0,0 +1,19 @@ +const e = document.querySelectorAll(".intro__images__image") + , t = document.getElementById("leftArrow") + , c = document.getElementById("rightArrow"); +let n = 0; +function a() { + e.forEach( (e, t) => { + e.classList.remove("intro__images__image--active"), + t === n && e.classList.add("intro__images__image--active") + } + ) +} +function d(t) { + n = (n + t + e.length) % e.length, + a() +} +t.addEventListener("click", () => d(-1)), +c.addEventListener("click", () => d(1)), +a(); +//# sourceMappingURL=index.78945eee.js.map diff --git a/src/styles/blocks/about__us.scss b/src/styles/blocks/about__us.scss new file mode 100644 index 0000000000..12f29b5ca5 --- /dev/null +++ b/src/styles/blocks/about__us.scss @@ -0,0 +1,49 @@ +.about__us { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + grid-column: 1 / 3; + padding-block: 148px; + + @include for-tablet { + grid-column: 1 / 7; + } + + @include for-small-desktop { + grid-column: 1 / 13; + } + + @include the-design { + align-items: center; + } + + &__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 48px; + text-align: center; + margin-bottom: 24px; + color: rgba(37, 55, 87, 1); + } + + &__paragraph { + font-family: "Open Sans", sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 33px; + text-align: center; + text-underline-position: from-font; + text-decoration-skip-ink: none; + color:rgba(108, 120, 139, 1); + + @include for-small-desktop { + margin-inline: 102px; + } + + @include for-desktop { + max-width: 754px; + } + } +} diff --git a/src/styles/blocks/arrow.scss b/src/styles/blocks/arrow.scss new file mode 100644 index 0000000000..26ab1b6ab7 --- /dev/null +++ b/src/styles/blocks/arrow.scss @@ -0,0 +1,23 @@ +.arrow { + width: 32px; + height: 32px; + cursor: pointer; + + &--left { + background-image: url(../images/slider/slide-left.svg); + background-position: center; + background-repeat: no-repeat; + background-color: white; + border-radius: 50%; + } + + &--right { + background-image: url(../images/slider/slide-right.svg); + background-position: center; + background-repeat: no-repeat; + background-color: white; + border-radius: 50%; + } + + @include hover (transform, scale(1.1)); +} diff --git a/src/styles/blocks/body.scss b/src/styles/blocks/body.scss new file mode 100644 index 0000000000..cd54a9fe0c --- /dev/null +++ b/src/styles/blocks/body.scss @@ -0,0 +1,8 @@ +.body { + background-color: rgba(242, 246, 250, 1.0); + min-width: 320px; +} + +.page__body--with-menu { + overflow: hidden; +} diff --git a/src/styles/blocks/box.scss b/src/styles/blocks/box.scss new file mode 100644 index 0000000000..75feba804c --- /dev/null +++ b/src/styles/blocks/box.scss @@ -0,0 +1,15 @@ +.box { + display: flex; + justify-content: center; + align-items: center; + background-color: rgba(32, 96, 246, 1); + border-radius: 50%; + box-sizing: border-box; + padding: 12px; + + &__arrow { + background-image: url(../images/services/services-arrow-left.svg); + width: 16px; + height: 16px; + } +} diff --git a/src/styles/blocks/call.scss b/src/styles/blocks/call.scss new file mode 100644 index 0000000000..33df405a8f --- /dev/null +++ b/src/styles/blocks/call.scss @@ -0,0 +1,20 @@ +.call { + &__link { + font-family: "Open Sans", sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 36px; + color: rgba(255, 255, 255, 1); + text-decoration: none; + } + + &__paragraph { + font-family: "Open Sans", sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 36px; + color: rgba(255, 255, 255, 1); + + @include hover (color, rgba(20, 78, 212, 1)); + } +} diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 0000000000..c9a7ffff64 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,50 @@ +.card { + box-sizing: border-box; + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + + &__image { + width: 166px; + height: 166px; + border-radius: 15px; + margin-bottom: 32px; + object-position: center; + object-fit: cover; + + @include hover (transform, scale(1.1)); + } + + &__text { + display: flex; + flex-direction: column; + justify-content: center; + } + + &__title { + font-family: Poppins, sans-serif; + font-size: 20px; + font-weight: 600; + line-height: 28px; + text-align: center; + color: rgba(37, 55, 87, 1); + margin-bottom: 16px; + letter-spacing: 0; + } + + &__paragraph { + font-family: "Open Sans", sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: center; + color: rgba(108, 120, 139, 1); + margin-bottom: 56px; + + @include for-small-desktop { + width: 214px; + margin-bottom: 134px; + } + } +} diff --git a/src/styles/blocks/cards.scss b/src/styles/blocks/cards.scss new file mode 100644 index 0000000000..60ac6b99a0 --- /dev/null +++ b/src/styles/blocks/cards.scss @@ -0,0 +1,12 @@ +.cards { + grid-column: 1 / 3; + + @include for-tablet { + grid-column: 2 / 6; + } + + @include for-small-desktop { + display: flex; + justify-content: space-between; + } +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 0000000000..036cbba444 --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,46 @@ +.contact-us { + display: flex; + flex-direction: column; + justify-content: center; + padding: 80px 0; + grid-column: 1 /3; + + @include for-tablet { + grid-column: 1 / 5; + padding: 120px 0 140px; + } + + @include for-small-desktop { + justify-content: start; + padding-top: 180px; + padding-bottom: 0; + grid-column: 7 / 12; + } + + &__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 48px; + color: rgba(255, 255, 255, 1); + margin-bottom: 48px; + + &--small { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-transform: uppercase; + color: rgba(149, 149, 149, 1); + margin-bottom: 8px; + } + } + + &__elements { + display: flex; + flex-direction: column; + justify-content: center; + gap: 40px; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..e2f6ceb646 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,100 @@ +@use '../utils/mixins' as *; + +.footer { + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: center; + padding-top: 120px; + + &__elements { + background-color: rgba(44, 44, 44, 1); + box-sizing: border-box; + padding-bottom: 80px; + border-top-left-radius: 24px; + border-top-right-radius: 24px; + + @include grid; + @include padding-inline; + } + + &__forms { + @include for-small-desktop { + margin-bottom: 120px; + } + } + + &__navigation { + display: flex; + flex-direction: column; + justify-content: center; + grid-column: 1 / 3; + + @include for-tablet { + grid-column: 1 / 7; + } + + @include for-small-desktop { + flex-direction: row; + justify-content: space-between; + grid-column: 1 / 13; + } + + &__logo { + background-image: url(../images/logo/header-Air.svg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + height: 28px; + width: 46px; + margin-bottom: 50px; + + @include for-tablet { + margin-bottom: 24px; + } + + @include for-small-desktop { + margin-bottom: 0; + } + + @include hover (transform, scale(1.1)); + } + + &__list { + display: flex; + flex-direction: column; + justify-content: center; + align-items: start; + gap: 24px; + + @include for-tablet { + flex-direction: row; + justify-content: space-between; + align-items: center; + } + + @include for-small-desktop { + gap: 64px; + } + } + + &__link { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + color: rgba(255, 255, 255, 1); + text-decoration: none; + text-transform: uppercase; + + @include hover (color, rgba(32, 96, 246, 1)); + } + + &__item { + display: flex; + justify-content: center; + align-items: center; + } + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 0000000000..6f12336a69 --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,70 @@ +.form { + display: flex; + flex-direction: column; + justify-content: center; + + &__inputs { + display: flex; + flex-direction: column; + justify-content: center; + gap: 40px; + margin-bottom: 56px; + } + + &__input { + background-color: rgba(44, 44, 44, 1); + border: none; + border-bottom: 1px solid rgba(255, 255, 255, 1); + box-sizing: border-box; + padding-bottom: 17px; + outline: none; + color: rgba(255, 255, 255, 1); + + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: left; + + @include for-tablet{ + margin-bottom: 48px; + } + + &--textarea { + @include for-tablet { + margin-bottom: 80px; + } + } + + &:focus { + border-color: rgba(20, 78, 212, 1); + } + } + + &__button { + display: flex; + justify-content: center; + align-items: center; + height: 56px; + box-sizing: border-box; + border: none; + border-radius: 8px; + background-color: rgba(20, 78, 212, 1); + + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: center; + color: rgba(255, 255, 255, 1); + + @include for-tablet { + width: 264px; + } + + &:active { + background-color: rgba(44, 44, 44, 1); + border: 2px solid rgba(20, 78, 212, 1); + } + } + } diff --git a/src/styles/blocks/forms.scss b/src/styles/blocks/forms.scss new file mode 100644 index 0000000000..4fa38fa4bc --- /dev/null +++ b/src/styles/blocks/forms.scss @@ -0,0 +1,27 @@ +.forms { + display: flex; + flex-direction: column; + justify-content: center; + grid-column: 1 /3; + padding-top: 72px; + + @include for-tablet { + padding-top: 180px; + grid-column: 1 / 5; + } + + @include for-small-desktop { + grid-column: 1 / 6; + justify-content: start; + } + + &__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 41.6px; + text-align: left; + color: rgba(255, 255, 255, 1); + margin-bottom: 48px; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..8e524f6199 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,30 @@ +@use '../utils/mixins' as *; + +.header { + display: flex; + justify-content: center; + flex-direction: column; + box-sizing: border-box; + background-color: rgba(44, 44, 44, 1); + border-radius: 0 0 30px 30px; + height: 893px; + + @include for-small-desktop { + height: 800px; + } + + &__content { + display: flex; + flex-direction: column; + justify-content: space-between; + box-sizing: border-box; + flex-grow: 1; + margin-top: 28px; + + @include for-small-desktop { + @include grid; + + margin-top: 0; + } + } +} diff --git a/src/styles/blocks/home.scss b/src/styles/blocks/home.scss new file mode 100644 index 0000000000..4fa7afce32 --- /dev/null +++ b/src/styles/blocks/home.scss @@ -0,0 +1,91 @@ +@use '../utils/mixins' as *; + +.home { + box-sizing: border-box; + + @include padding-inline; + + @include for-small-desktop { + grid-column: 1 / 7; + } + + @include the-design { + grid-column: 1 / 8; + } + + &__paragraph { + font-family: 'Open Sans', sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 27px; + text-align: left; + color: rgba(255, 255, 255, 1); + margin-bottom: 72px; + + @include for-tablet { + width: 362px; + margin-bottom: 56px; + } + + @include for-small-desktop { + margin-bottom: 84px; + } + } + + &__link { + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + height: 50px; + background-color: rgba(32, 96, 246, 1); + color: rgba(255, 255, 255, 1); + border-radius: 8px; + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + letter-spacing: 1px; + text-align: center; + text-decoration: none; + + &--text { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + + @include hover (transform, scale(1.1)); + } + + @include for-tablet { + width: 264px; + } + } + + &__title { + margin-bottom: 32px; + font-family: Poppins, sans-serif; + font-size: 52px; + font-weight: 600; + line-height: 62px; + letter-spacing: -2px; + text-align: left; + text-underline-position: from-font; + text-decoration-skip-ink: none; + color: rgba(255, 255, 255, 1); + + @include for-tablet { + font-size: 64px; + line-height: 68px; + grid-column: 1 / 7; + margin-bottom: 24px; + } + + @include for-small-desktop { + letter-spacing: 1px; + margin-block: 120px 32px; + } + } +} diff --git a/src/styles/blocks/intro.scss b/src/styles/blocks/intro.scss new file mode 100644 index 0000000000..1171a4cbe1 --- /dev/null +++ b/src/styles/blocks/intro.scss @@ -0,0 +1,91 @@ +.intro { + display: flex; + flex-direction: column; + justify-content: flex-end; + position: relative; + + @include for-small-desktop { + grid-column: 7 / 13; + height: 676px; + } + + @include the-design { + grid-column: 8 / 13; + } + + &__container { + z-index: 1; + display: flex; + flex-direction: column; + justify-content: flex-end; + box-sizing: border-box; + padding-inline: 32px; + + @include for-small-desktop { + padding-inline: 78px; + flex-direction: row; + gap: 24px; + align-items: center; + justify-content: start; + } + } + + &__images { + &__image { + opacity: 0; + object-fit: cover; + border-radius: 30px; + width: 100%; + height: 390px; + transition: all .5s; + position: absolute; + bottom: 0; + right: 0; + + @include for-small-desktop { + height: 100%; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + } + + &--active { + opacity: 1; + } + } + } + + &__arrows { + display: flex; + gap: 16px; + margin-bottom: 16px; + } + + &__info { + text-align: left; + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + margin-bottom: 24px; + } + + &__title { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-transform: uppercase; + margin-bottom: 8px; + } + + &__text { + font-family: "Open Sans", sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + text-align: left; + color: rgba(255, 255, 255, 1); + } +} diff --git a/src/styles/blocks/links.scss b/src/styles/blocks/links.scss new file mode 100644 index 0000000000..02beef7d0c --- /dev/null +++ b/src/styles/blocks/links.scss @@ -0,0 +1,23 @@ +.links{ + display: flex; + flex-direction: column; + justify-content: center; + + &__list { + display: flex; + flex-direction: column; + gap: 24px; + } + + &__link { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: left; + text-decoration: none; + text-transform: uppercase; + color: rgba(255, 255, 255, 1); + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 0000000000..22b2b14435 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,6 @@ +@use '../utils/mixins' as *; + +.main { + padding: 0; + +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..befafe64e8 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,29 @@ +.menu { + display: flex; + flex-direction: column; + justify-content: flex-start; + box-sizing: border-box; + padding: 20px 20px 0; + position: fixed; + z-index: 10; + top: 0; + right: 0; + left: 0; + height: 100vh; + background-color: rgba(44, 44, 44, 1); + transform: translateX(-100%); + opacity: 0; + transition: all 0.3s ease-in-out; + overflow-y: auto; + + &__navigation { + display: flex; + justify-content: space-between; + margin-bottom: 48px; + } + + &:target { + transform: translateX(0); + opacity: 1; + } +} diff --git a/src/styles/blocks/navigation.scss b/src/styles/blocks/navigation.scss new file mode 100644 index 0000000000..98a4a08538 --- /dev/null +++ b/src/styles/blocks/navigation.scss @@ -0,0 +1,87 @@ +@use '../utils/mixins' as *; + +.navigation { + display: flex; + justify-content: space-between; + align-items: center; + box-sizing: border-box; + padding-block: 20px; + + + @include for-small-desktop { + padding-block: 48px; + } + + @include padding-inline; + + &__icons { + display: flex; + gap: 32px; + } + + &__logo { + background-image: url(../images/logo/header-Air.svg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + height: 28px; + width: 46px; + + @include hover(transform, scale(1.1)); + } + + &__burger { + background-image: url(../images/logo/header-burger.svg); + background-position: center; + background-repeat: no-repeat; + height: 24px; + width: 24px; + + @include for-small-desktop { + display: none; + } + } + + &__menu { + display: none; + + @include for-small-desktop { + display: flex; + justify-content: center; + align-items: center; + } + } + + &__paragraph { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 5px; + text-transform: uppercase; + } + + &__link { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 5px; + text-transform: uppercase; + text-decoration: none; + text-align: center; + color: rgba(255, 255, 255, 1); + position: relative; + + @include hover (transform, scale(1.1)); + + &::before { + content: ""; + width: 100%; + height: 2px; + background-color: rgba(32, 96, 246, 1); + position: absolute; + bottom: -8px; + } + } +} diff --git a/src/styles/blocks/our__expertise.scss b/src/styles/blocks/our__expertise.scss new file mode 100644 index 0000000000..036bae6560 --- /dev/null +++ b/src/styles/blocks/our__expertise.scss @@ -0,0 +1,30 @@ +@use '../utils/mixins' as *; + +.our__expertise { + box-sizing: border-box; + + @include grid; + + &__title { + font-family: Poppins, sans-serif; + font-size: 44px; + font-weight: 600; + line-height: 52.8px; + text-align: center; + color: rgba(37, 55, 87, 1); + margin-top: 72px; + margin-bottom: 56px; + grid-column: 1 / 3; + + @include for-tablet { + font-size: 52px; + grid-column: 1 / 7; + } + } + + @include for-small-desktop { + display: flex; + flex-direction: column; + justify-content: center; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..28decd9db4 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,9 @@ +.page { + scroll-behavior: smooth; + font-family: Poppins, sans-serif; + font-size: 20px; + font-style: normal; + font-weight: 600; + line-height: 28px; + transition: color 0.5s; +} diff --git a/src/styles/blocks/paragraph.scss b/src/styles/blocks/paragraph.scss new file mode 100644 index 0000000000..13c1328586 --- /dev/null +++ b/src/styles/blocks/paragraph.scss @@ -0,0 +1,7 @@ +.paragraph { + font-family: 'Open Sans', sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 27px; + text-align: left; +} diff --git a/src/styles/blocks/people.scss b/src/styles/blocks/people.scss new file mode 100644 index 0000000000..4bcfe9ed52 --- /dev/null +++ b/src/styles/blocks/people.scss @@ -0,0 +1,15 @@ +.people { + display: flex; + flex-direction: column; + justify-content: center; + gap: 24px; + grid-column: 1 /3 ; + + @include for-tablet { + grid-column: 1 / 7; + } + + @include for-small-desktop { + @include grid; + } +} diff --git a/src/styles/blocks/person.scss b/src/styles/blocks/person.scss new file mode 100644 index 0000000000..afe7863446 --- /dev/null +++ b/src/styles/blocks/person.scss @@ -0,0 +1,145 @@ +.person { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + box-sizing: border-box; + padding-inline: 42px; + background-color: rgba(255, 255, 255, 1); + border-radius: 16px; + + @include for-tablet { + padding-inline: 98px; + } + + @include for-small-desktop { + padding-inline: 48px; + grid-column: span 4; + height: 456px; + } + + &__image { + z-index: 10; + position: relative; + margin-bottom: 68px; + margin-top: 75px; + + &::before { + content: ""; + z-index: -1; + width: 56px; + height: 140px; + background-color: rgba(32, 96, 246, 1); + border-radius: 12px; + position: absolute; + top: -50px; + left: -46px; + transform: rotate(30deg); + transform-origin: 100% 100%; + + @include for-small-desktop { + width: 44px; + height: 110px; + top: -36px; + left: -36px; + } + } + + &::after { + content: ""; + z-index: -1; + width: 56px; + height: 140px; + background-color: rgba(32, 96, 246, 1); + border-radius: 12px; + position: absolute; + bottom: -50px; + right: -46px; + transform: rotate(30deg); + transform-origin: 0 0; + + @include for-small-desktop { + width: 44px; + height: 110px; + bottom: -36px; + right: -36px; + } + } + } + + &__picture { + width: 140px; + height: 140px; + object-position: center; + object-fit: cover; + border-radius: 50%; + + @include for-small-desktop { + width: 110px; + height: 110px; + } + } + + &:hover { + box-shadow: 0 8px 12px #2c2c2c; + transition: 0.3s; + + .person__image::before { + transform: translateX(0) translateY(0); + transition: 0.3s; + } + + .person__image::after { + transform: translateX(0) translateY(0); + transition: 0.3s; + } + + .person__picture { + transform: scale(1.2); + transition: 0.3s; + } + } + + &__quote { + width: 24px; + height: 24px; + background-image: url(../images/testimonials/testimonial-quote.svg); + background-position: center; + background-repeat: no-repeat; + margin-bottom: 10px; + } + + &__description { + box-sizing: border-box; + margin-bottom: 16px; + } + + &__paragraph { + font-family: "Open Sans", sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + text-align: center; + color: rgba(108, 120, 139, 1); + } + + &__name { + font-family: "Open Sans", sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + text-align: center; + margin-bottom: 4px; + } + + &__specialization { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: center; + color: rgba(192, 205, 215, 1); + margin-bottom: 32px; + } +} diff --git a/src/styles/blocks/section.scss b/src/styles/blocks/section.scss new file mode 100644 index 0000000000..1901f17103 --- /dev/null +++ b/src/styles/blocks/section.scss @@ -0,0 +1,49 @@ +@use '../utils/mixins' as *; + +.section { + box-sizing: border-box; + + + &--first { + @include grid; + @include padding-inline; + } + + &--second { + border-radius: 30px; + background-color: white; + + @include padding-inline; + } + + &--third { + padding-top: 120px; + + @include for-tablet { + padding-top: 148px; + } + + @include for-small-desktop { + padding-top: 250px; + } + + @include padding-inline; + } + + &--fourth { + @include padding-inline; + } + + &--fiveth { + background-color: rgba(255, 255, 255, 1); + padding-block: 72px; + + @include for-tablet { + background-image: url(../images/vision/background-img.png); + background-position: center; + background-repeat: no-repeat; + } + + @include padding-inline; + } +} diff --git a/src/styles/blocks/service.scss b/src/styles/blocks/service.scss new file mode 100644 index 0000000000..b59b49fb53 --- /dev/null +++ b/src/styles/blocks/service.scss @@ -0,0 +1,107 @@ +.service { +@include grid; + + @include for-tablet { + grid-gap: 30px; + } + + @include for-small-desktop { + display: flex; + flex-flow: row wrap; + } + + &__card { + display: flex; + flex-direction: column; + height: 264px; + box-sizing: border-box; + padding: 32px; + border-radius: 16px; + background-color: rgba(255, 255, 255, 1); + grid-column: span 2; + margin-bottom: 24px; + + @include for-tablet { + grid-column: 1 / 4; + width: auto; + margin-bottom: 0; + } + + @include for-small-desktop { + width: auto; + grid-column: 7 / 10; + margin-bottom: 0; + } + + @include hover (transform, scale(1.1)); + } + + &__number { + box-sizing: border-box; + padding: 2px 20px; + width: 46px; + height: 24px; + border-radius: 23px; + background-color: rgba(233, 239, 254, 1); + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 24px; + + &--text { + font-family: Poppins, sans-serif; + font-size: 16px; + font-weight: 600; + line-height: 19.5px; + text-align: center; + color: rgba(32, 96, 246, 1); + } + } + + &__text { + margin-bottom: 32px; + width: 200px; + } + + &__paragraph { + font-family: "Open Sans", sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + text-align: left; + color: rgba(108, 120, 139, 1); + } + + &__box { + display: flex; + align-items: center; + gap: 16px; + text-decoration: none; + width: 200px; + + &--text { + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: center; + color: rgba(51, 69, 99, 1); + } + } + + &--up { + @include for-tablet { + grid-column: 4 / 7; + transform: translateY(-50%); + + &:hover { + transform: translateY(-50%) scale(1.1); + box-shadow: 0 9px 18px 0 rgba(37, 41, 49, 0.03); + } + } + + @include for-small-desktop { + grid-column: 10 / 13; + } + } +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..d29111a680 --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,88 @@ +@use '../utils/mixins' as *; + +.services { +box-sizing: border-box; + +@include grid; + + &__service { + display: flex; + flex-direction: column; + gap: 24px; + grid-column: 1 / 3; + + @include for-tablet { + grid-column: 1 / 7; + } + + @include for-small-desktop { + grid-column: 7 / 13; + margin-top: 36px; + } + } + + &__box { + display: flex; + flex-direction: column; + justify-content: start; + grid-column: 1 / 3; + + @include for-tablet { + grid-column: 1 / 4; + } + + @include for-small-desktop { + grid-column: 1 / 5; + } + } + + &__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 41.6px; + text-align: left; + letter-spacing: 0.5px; + color: rgba(37, 55, 87, 1); + margin-bottom: 24px; + grid-column: 1 / 3; + + @include for-tablet { + letter-spacing: 0; + } + } + + &__title--small { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: start; + color: rgba(192, 205, 215, 1); + text-transform: uppercase; + margin-bottom: 16px; + } + + &__text { + grid-column: 1 / 3; + + @include for-tablet { + grid-column: 1 / 4; + } + + @include for-small-desktop { + grid-column: 1 / 5; + } + } + + &__paragraph { + font-family: "Open Sans", sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: left; + color: rgba(108, 120, 139, 1); + margin-bottom: 48px; + } +} diff --git a/src/styles/blocks/socials.scss b/src/styles/blocks/socials.scss new file mode 100644 index 0000000000..af8f9f9a0d --- /dev/null +++ b/src/styles/blocks/socials.scss @@ -0,0 +1,43 @@ +.socials { + display: flex; + flex-direction: column; + justify-content: center; + + &:first-child { + margin-bottom: 16px; + } + + &__icons { + display: flex; + gap: 41px; + + &--icon { + color: rgba(255, 255, 255, 1); + + @include hover (fill, rgba(20, 78, 212, 1)); + } + + &--logo { + width: 32px; + height: 32px; + display: flex; + justify-content: center; + align-items: center; + } + + &--fb { + width: 24px; + height: 24px; + } + + &--x { + width: 24px; + height: 24px; + } + + &--ig { + width: 24px; + height: 24px; + } + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..6f3ef1c631 --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,51 @@ +@use '../utils/mixins' as *; + +.testimonials { + box-sizing: border-box; + margin: 120px 0; + + @include grid; + + @include for-small-desktop { + display: flex; + justify-content: center; + flex-direction: column; + padding: 0; + } + + @include for-desktop { + padding: 0; + } + + &__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 48px; + letter-spacing: 0.5px; + color: rgba(37, 55, 87, 1); + margin-bottom: 48px; + grid-column: 1 /3; + + @include for-tablet { + grid-column: 1 / 7; + } + + &--small { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 2px; + text-align: left; + text-transform: uppercase; + color: rgba(192, 205, 215, 1); + margin-bottom: 16px; + grid-column: 1 /3; + + @include for-tablet { + grid-column: 1 / 7; + } + } + } +} diff --git a/src/styles/blocks/title.scss b/src/styles/blocks/title.scss new file mode 100644 index 0000000000..0100fc46be --- /dev/null +++ b/src/styles/blocks/title.scss @@ -0,0 +1,8 @@ +.title { + font-family: Poppins, sans-serif; + font-size: 52px; + font-weight: 600; + line-height: 62.4px; + text-align: left; + color: rgba(255, 255, 255, 1); +} diff --git a/src/styles/blocks/top__bar.scss b/src/styles/blocks/top__bar.scss new file mode 100644 index 0000000000..bab4fac38d --- /dev/null +++ b/src/styles/blocks/top__bar.scss @@ -0,0 +1,42 @@ +@use '../utils/mixins' as *; + +.top__bar { + display: none; + + @include for-small-desktop { + display: flex; + justify-content: center; + align-items: center; + + &__box { + display: flex; + justify-content: center; + align-items: center; + } + + &__list { + display: flex; + justify-content: space-between; + gap: 48px; + } + + &__item { + display: flex; + justify-content: center; + align-items: center; + } + + &__link { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + color: rgba(255, 255, 255, 1); + text-decoration: none; + text-transform: uppercase; + + @include hover (color, rgba(32, 96, 246, 1)); + } + } +} diff --git a/src/styles/blocks/vision.scss b/src/styles/blocks/vision.scss new file mode 100644 index 0000000000..28500fb2b5 --- /dev/null +++ b/src/styles/blocks/vision.scss @@ -0,0 +1,96 @@ +@use '../utils/mixins' as *; + +.vision { + align-items: center; + + @include grid; + + &__title { + font-family: Poppins, sans-serif; + font-size: 44px; + font-weight: 600; + line-height: 52.8px; + text-align: center; + color: rgba(37, 55, 87, 1); + margin-bottom: 24px; + grid-column: 1 /3; + + @include for-tablet { + grid-column: 1 / 7; + } + + @include for-small-desktop { + grid-column: 1 / 13; + } + } + + &__text { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 56px; + grid-column: 1 / 3; + + @include for-tablet { + grid-column: 1 / 7; + } + + @include for-small-desktop { + grid-column: 1 / 13; + } + + @include for-desktop { + max-width: 1 / 13; + } + } + + &__paragraph { + font-family: "Open Sans", sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 33px; + text-align: center; + color: rgba(108, 120, 139, 1); + + @include for-desktop { + max-width: 754px; + } + } + + &__button { + display: flex; + justify-content: center; + align-items: center; + height: 56px; + width: 100%; + box-sizing: border-box; + border-radius: 8px; + background-color: rgba(32, 96, 246, 1); + text-decoration: none; + grid-column: 1 / 3; + + @include for-tablet { + grid-column: 3 / 5; + } + + @include for-small-desktop { + grid-column: 5 / 9; + } + + &--text { + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + color: rgba(255, 255, 255, 1); + + @include hover (transform, scale(1.1)); + } + } +} diff --git a/src/styles/blocks/visit.scss b/src/styles/blocks/visit.scss new file mode 100644 index 0000000000..ba72c1e957 --- /dev/null +++ b/src/styles/blocks/visit.scss @@ -0,0 +1,20 @@ +.visit { + &__link { + font-family: "Open Sans", sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 36px; + color: rgba(255, 255, 255, 1); + text-decoration: none; + } + + &__paragraph { + font-family: "Open Sans", sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 36px; + color: rgba(255, 255, 255, 1); + + @include hover (color, rgba(20, 78, 212, 1)); + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..85d287eb2c 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,36 @@ +@import './utils/reset'; @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import './blocks/page'; +@import './blocks/body'; +@import './blocks/title'; +@import './blocks/paragraph'; +@import './blocks/header'; +@import './blocks/navigation'; +@import './blocks/top__bar'; +@import './blocks/home'; +@import './blocks/intro'; +@import './blocks/arrow'; +@import './blocks/main'; +@import './blocks/section'; +@import './blocks/about__us'; +@import './blocks/our__expertise'; +@import './blocks/cards'; +@import './blocks/card'; +@import './blocks/services'; +@import './blocks/service'; +@import './blocks/box'; +@import './blocks/testimonials'; +@import './blocks/people'; +@import './blocks/person'; +@import './blocks/vision'; +@import './blocks/footer'; +@import './blocks/forms'; +@import './blocks/form'; +@import './blocks/contact-us'; +@import './blocks/call'; +@import './blocks/visit'; +@import './blocks/socials'; +@import './blocks/menu'; +@import './blocks/links'; diff --git a/src/styles/style.css b/src/styles/style.css new file mode 100644 index 0000000000..c66d491730 --- /dev/null +++ b/src/styles/style.css @@ -0,0 +1,1776 @@ +/* stylelint-disable comment-empty-line-before */ +/* stylelint-disable at-rule-empty-line-before */ +/* stylelint-disable rule-empty-line-before */ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote::before, +blockquote::after, +q::before, +q::after { + content: ""; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +h1 { + font-family: Roboto, sans-serif; + font-weight: 400; +} + +@font-face { + font-family: Roboto, Arial, Helvetica, sans-serif; + src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); + font-weight: normal; + font-style: normal; +} +.page { + scroll-behavior: smooth; + font-family: Poppins, sans-serif; + font-size: 20px; + font-style: normal; + font-weight: 600; + line-height: 28px; + transition: color 0.5s; +} + +.body { + background-color: rgb(242, 246, 250); + min-width: 320px; +} + +.page__body--with-menu { + overflow: hidden; +} + +.title { + font-family: Poppins, sans-serif; + font-size: 52px; + font-weight: 600; + line-height: 62.4px; + text-align: left; + color: rgb(255, 255, 255); +} + +.paragraph { + font-family: "Open Sans", sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 27px; + text-align: left; +} + +.header { + display: flex; + justify-content: center; + flex-direction: column; + box-sizing: border-box; + background-color: rgb(44, 44, 44); + border-radius: 0 0 30px 30px; + height: 893px; +} +@media (min-width: 1024px) { + .header { + height: 800px; + } +} +.header__content { + display: flex; + flex-direction: column; + justify-content: space-between; + box-sizing: border-box; + flex-grow: 1; + margin-top: 28px; +} +@media (min-width: 1024px) { + .header__content { + justify-content: center; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 20px; + margin-top: 0; + } +} +@media (min-width: 1024px) and (min-width: 640px) { + .header__content { + grid-template-columns: repeat(6, 1fr); + grid-column-gap: 30px; + } +} +@media (min-width: 1024px) and (min-width: 1024px) { + .header__content { + grid-template-columns: repeat(12, 1fr); + grid-column-gap: 20px; + } +} +@media (min-width: 1024px) and (min-width: 1280px) { + .header__content { + grid-template-columns: repeat(12, 1fr); + grid-column-gap: 30px; + } +} + +.navigation { + display: flex; + justify-content: space-between; + align-items: center; + box-sizing: border-box; + padding-inline: 20px; + padding-block: 20px; +} +@media (min-width: 640px) { + .navigation { + padding-inline: 41px; + } +} +@media (min-width: 1024px) { + .navigation { + padding-inline: 54px; + padding-block: 48px; + } +} +.navigation__icons { + display: flex; + gap: 32px; +} +.navigation__logo { + background-image: url(../images/logo/header-Air.svg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + height: 28px; + width: 46px; + transition: transform 0.3s; +} +.navigation__logo:hover { + transform: scale(1.1); +} +.navigation__burger { + background-image: url(../images/logo/header-burger.svg); + background-position: center; + background-repeat: no-repeat; + height: 24px; + width: 24px; +} +@media (min-width: 1024px) { + .navigation__burger { + display: none; + } +} +.navigation__menu { + display: none; +} +@media (min-width: 1024px) { + .navigation__menu { + display: flex; + justify-content: center; + align-items: center; + } +} +.navigation__paragraph { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 5px; + text-transform: uppercase; +} +.navigation__link { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 5px; + text-transform: uppercase; + text-decoration: none; + text-align: center; + color: rgb(255, 255, 255); + position: relative; + transition: transform 0.3s; +} +.navigation__link:hover { + transform: scale(1.1); +} +.navigation__link::before { + content: ""; + width: 100%; + height: 2px; + background-color: rgb(32, 96, 246); + position: absolute; + bottom: -8px; +} + +.top__bar { + display: none; +} +@media (min-width: 1024px) { + .top__bar { + display: flex; + justify-content: center; + align-items: center; + } + .top__bar__box { + display: flex; + justify-content: center; + align-items: center; + } + .top__bar__list { + display: flex; + justify-content: space-between; + gap: 48px; + } + .top__bar__item { + display: flex; + justify-content: center; + align-items: center; + } + .top__bar__link { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + color: rgb(255, 255, 255); + text-decoration: none; + text-transform: uppercase; + transition: color 0.3s; + } + .top__bar__link:hover { + color: rgb(32, 96, 246); + } +} + +.home { + box-sizing: border-box; + padding-inline: 20px; +} +@media (min-width: 640px) { + .home { + padding-inline: 41px; + } +} +@media (min-width: 1024px) { + .home { + grid-column: 1/7; + padding-inline: 54px; + } +} +.home__paragraph { + font-family: "Open Sans", sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 27px; + text-align: left; + color: rgb(255, 255, 255); + margin-bottom: 49px; +} +@media (min-width: 640px) { + .home__paragraph { + width: 362px; + margin-bottom: 56px; + } +} +@media (min-width: 1024px) { + .home__paragraph { + margin-bottom: 84px; + } +} +.home__link { + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + height: 50px; + background-color: rgb(32, 96, 246); + color: rgb(255, 255, 255); + border-radius: 8px; + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + letter-spacing: 1px; + text-align: center; + text-decoration: none; +} +.home__link--text { + display: flex; + justify-content: center; + align-items: center; + transition: transform 0.3s; + width: 100%; + height: 100%; +} +.home__link--text:hover { + transform: scale(1.1); +} +@media (min-width: 640px) { + .home__link { + width: 264px; + } +} +@media (min-width: 1024px) { + .home__link { + width: 264px; + } +} +.home__title { + margin-bottom: 32px; + font-family: Poppins, sans-serif; + font-size: 52px; + font-weight: 600; + line-height: 62px; + letter-spacing: -2px; + text-align: left; + text-underline-position: from-font; + text-decoration-skip-ink: none; + color: rgb(255, 255, 255); +} +@media (min-width: 640px) { + .home__title { + font-size: 64px; + line-height: 68px; + grid-column: 1/7; + margin-bottom: 24px; + } +} +@media (min-width: 1024px) { + .home__title { + letter-spacing: 1px; + margin-block: 120px 32px; + } +} + +.intro { + display: flex; + flex-direction: column; + justify-content: flex-end; + position: relative; +} +@media (min-width: 1024px) { + .intro { + grid-column: 7/13; + height: 676px; + } +} +.intro__container { + z-index: 1; + display: flex; + flex-direction: column; + justify-content: flex-end; + box-sizing: border-box; + padding-inline: 32px; +} +@media (min-width: 1024px) { + .intro__container { + padding-inline: 78px; + flex-direction: row; + gap: 24px; + } +} +.intro__images__image { + opacity: 0; + object-fit: cover; + border-radius: 30px; + width: 100%; + height: 390px; + transition: all 0.5s; + position: absolute; + bottom: 0; + right: 0; +} +@media (min-width: 1024px) { + .intro__images__image { + height: 680px; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + } +} +.intro__images__image--active { + opacity: 1; +} +.intro__arrows { + display: flex; + gap: 16px; + margin-bottom: 16px; +} +.intro__info { + text-align: left; + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + margin-bottom: 24px; +} +.intro__title { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-transform: uppercase; + margin-bottom: 8px; +} +.intro__text { + font-family: "Open Sans", sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + text-align: left; + color: rgb(255, 255, 255); +} + +.arrow { + width: 32px; + height: 32px; + cursor: pointer; + transition: transform 0.3s; +} +.arrow--left { + background-image: url(../images/slider/slide-left.svg); + background-position: center; + background-repeat: no-repeat; + background-color: white; + border-radius: 50%; +} +.arrow--right { + background-image: url(../images/slider/slide-right.svg); + background-position: center; + background-repeat: no-repeat; + background-color: white; + border-radius: 50%; +} +.arrow:hover { + transform: scale(1.2); +} + +.main { + padding: 0 20px; +} +@media (min-width: 640px) { + .main { + padding: 0; + } +} + +.section { + box-sizing: border-box; +} +.section--first { + justify-content: center; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 20px; +} +@media (min-width: 640px) { + .section--first { + grid-template-columns: repeat(6, 1fr); + grid-column-gap: 30px; + } +} +@media (min-width: 1024px) { + .section--first { + grid-template-columns: repeat(12, 1fr); + grid-column-gap: 20px; + } +} +@media (min-width: 1280px) { + .section--first { + grid-template-columns: repeat(12, 1fr); + grid-column-gap: 30px; + } +} +.section--second { + border-radius: 30px; + background-color: white; +} +.section--third { + padding: 120px 20px 0; +} +@media (min-width: 640px) { + .section--third { + padding-top: 148px; + padding-inline: 41px; + } +} +@media (min-width: 1024px) { + .section--third { + padding-top: 250px; + padding-inline: 52px; + } +} +.section--fourth { + padding: 0; +} +@media (min-width: 1024px) { + .section--fourth { + padding-inline: 52px; + } +} +.section--fiveth { + background-color: rgb(255, 255, 255); + padding: 72px 20px; +} +@media (min-width: 640px) { + .section--fiveth { + background-image: url(../images/vision/background-img.png); + background-position: center; + background-repeat: no-repeat; + } +} + +.about__us { + display: flex; + flex-direction: column; + justify-content: center; + grid-column: 1/3; + padding: 148px 0; +} +@media (min-width: 640px) { + .about__us { + grid-column: 1/7; + padding-inline: 41px; + } +} +@media (min-width: 1024px) { + .about__us { + grid-column: 1/13; + padding-inline: 52px; + } +} +.about__us__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 48px; + text-align: center; + margin-bottom: 24px; + color: rgb(37, 55, 87); +} +.about__us__paragraph { + font-family: "Open Sans", sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 33px; + text-align: center; + text-underline-position: from-font; + text-decoration-skip-ink: none; + color: rgb(108, 120, 139); +} +@media (min-width: 1024px) { + .about__us__paragraph { + margin-inline: 102px; + } +} + +.our__expertise { + box-sizing: border-box; + justify-content: center; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 20px; +} +@media (min-width: 640px) { + .our__expertise { + grid-template-columns: repeat(6, 1fr); + grid-column-gap: 30px; + } +} +@media (min-width: 1024px) { + .our__expertise { + grid-template-columns: repeat(12, 1fr); + grid-column-gap: 20px; + } +} +@media (min-width: 1280px) { + .our__expertise { + grid-template-columns: repeat(12, 1fr); + grid-column-gap: 30px; + } +} +.our__expertise__title { + font-family: Poppins, sans-serif; + font-size: 44px; + font-weight: 600; + line-height: 52.8px; + text-align: center; + color: rgb(37, 55, 87); + margin-top: 72px; + margin-bottom: 56px; + grid-column: 1/3; +} +@media (min-width: 640px) { + .our__expertise__title { + font-size: 52px; + grid-column: 1/7; + } +} +@media (min-width: 1024px) { + .our__expertise { + display: flex; + flex-direction: column; + justify-content: center; + padding-inline: 54px; + } +} + +.cards { + grid-column: 1/3; +} +@media (min-width: 640px) { + .cards { + grid-column: 2/6; + } +} +@media (min-width: 1024px) { + .cards { + display: flex; + justify-content: space-between; + } +} + +.card { + box-sizing: border-box; + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; +} +.card__image { + width: 166px; + height: 166px; + border-radius: 15px; + margin-bottom: 32px; + object-position: center; + object-fit: cover; + transition: all 0.3s; +} +.card__image:hover { + transform: scale(1.1); +} +.card__text { + display: flex; + flex-direction: column; + justify-content: center; +} +.card__title { + font-family: Poppins, sans-serif; + font-size: 20px; + font-weight: 600; + line-height: 28px; + text-align: center; + color: rgb(37, 55, 87); + margin-bottom: 16px; + letter-spacing: 0; +} +.card__paragraph { + font-family: "Open Sans", sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: center; + color: rgb(108, 120, 139); + margin-bottom: 56px; +} +@media (min-width: 1024px) { + .card__paragraph { + width: 214px; + margin-bottom: 134px; + } +} + +.services { + box-sizing: border-box; + justify-content: center; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 20px; +} +@media (min-width: 640px) { + .services { + grid-template-columns: repeat(6, 1fr); + grid-column-gap: 30px; + } +} +@media (min-width: 1024px) { + .services { + grid-template-columns: repeat(12, 1fr); + grid-column-gap: 20px; + } +} +@media (min-width: 1280px) { + .services { + grid-template-columns: repeat(12, 1fr); + grid-column-gap: 30px; + } +} +.services__service { + display: flex; + flex-direction: column; + gap: 24px; + grid-column: 1/3; +} +@media (min-width: 640px) { + .services__service { + grid-column: 1/7; + } +} +@media (min-width: 1024px) { + .services__service { + grid-column: 7/13; + margin-top: 36px; + } +} +.services__box { + display: flex; + flex-direction: column; + justify-content: start; + grid-column: 1/3; +} +@media (min-width: 640px) { + .services__box { + grid-column: 1/4; + } +} +@media (min-width: 1024px) { + .services__box { + grid-column: 1/5; + } +} +.services__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 41.6px; + text-align: left; + letter-spacing: 0.5px; + color: rgb(37, 55, 87); + margin-bottom: 24px; + grid-column: 1/3; +} +@media (min-width: 640px) { + .services__title { + letter-spacing: 0; + } +} +.services__title--small { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: start; + color: rgb(192, 205, 215); + text-transform: uppercase; + margin-bottom: 16px; +} +.services__text { + grid-column: 1/3; +} +@media (min-width: 640px) { + .services__text { + grid-column: 1/4; + } +} +@media (min-width: 1024px) { + .services__text { + grid-column: 1/5; + } +} +.services__paragraph { + font-family: "Open Sans", sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: left; + color: rgb(108, 120, 139); + margin-bottom: 48px; +} + +.service { + justify-content: center; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 20px; +} +@media (min-width: 640px) { + .service { + grid-template-columns: repeat(6, 1fr); + grid-column-gap: 30px; + } +} +@media (min-width: 1024px) { + .service { + grid-template-columns: repeat(12, 1fr); + grid-column-gap: 20px; + } +} +@media (min-width: 1280px) { + .service { + grid-template-columns: repeat(12, 1fr); + grid-column-gap: 30px; + } +} +@media (min-width: 640px) { + .service { + grid-gap: 30px; + } +} +@media (min-width: 1024px) { + .service { + display: flex; + flex-flow: row wrap; + } +} +.service__card { + display: flex; + flex-direction: column; + box-sizing: border-box; + padding: 32px; + border-radius: 16px; + background-color: rgb(255, 255, 255); + grid-column: span 2; + transition: all 0.3s; + margin-bottom: 24px; +} +@media (min-width: 640px) { + .service__card { + grid-column: span 3; + margin-bottom: 0; + } +} +@media (min-width: 1024px) { + .service__card { + width: 214px; + margin-bottom: 0; + } +} +.service__card:hover { + transform: scale(1.1); +} +.service__number { + box-sizing: border-box; + padding: 2px 20px; + width: 46px; + height: 24px; + border-radius: 23px; + background-color: rgb(233, 239, 254); + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 24px; +} +.service__number--text { + font-family: Poppins, sans-serif; + font-size: 16px; + font-weight: 600; + line-height: 19.5px; + text-align: center; + color: rgb(32, 96, 246); +} +.service__text { + margin-bottom: 32px; +} +.service__paragraph { + font-family: "Open Sans", sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + text-align: left; + color: rgb(108, 120, 139); +} +.service__box { + display: flex; + align-items: center; + gap: 16px; + text-decoration: none; +} +.service__box--text { + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: center; + color: rgb(51, 69, 99); +} +@media (min-width: 640px) { + .service--up { + transform: translateY(-50%); + } + .service--up:hover { + transform: translateY(-50%) scale(1.1); + box-shadow: 0 9px 18px 0 rgba(37, 41, 49, 0.03); + } +} +@media (min-width: 1024px) { + .service--up { + transform: translateY(-50%); + } + .service--up:hover { + transform: translateY(-50%) scale(1.1); + box-shadow: 0 9px 18px 0 rgba(37, 41, 49, 0.03); + } +} + +.box { + display: flex; + justify-content: center; + align-items: center; + background-color: rgb(32, 96, 246); + border-radius: 50%; + box-sizing: border-box; + padding: 12px; +} +.box__arrow { + background-image: url(../images/services/services-arrow-left.svg); + width: 16px; + height: 16px; +} + +.testimonials { + box-sizing: border-box; + padding: 0 20px; + margin: 120px 0; + justify-content: center; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 20px; +} +@media (min-width: 640px) { + .testimonials { + grid-template-columns: repeat(6, 1fr); + grid-column-gap: 30px; + } +} +@media (min-width: 1024px) { + .testimonials { + grid-template-columns: repeat(12, 1fr); + grid-column-gap: 20px; + } +} +@media (min-width: 1280px) { + .testimonials { + grid-template-columns: repeat(12, 1fr); + grid-column-gap: 30px; + } +} +@media (min-width: 1024px) { + .testimonials { + display: flex; + justify-content: center; + flex-direction: column; + } +} +.testimonials__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 48px; + letter-spacing: 0.5px; + color: rgb(37, 55, 87); + margin-bottom: 48px; + grid-column: 1/3; +} +@media (min-width: 640px) { + .testimonials__title { + grid-column: 1/7; + } +} +.testimonials__title--small { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 2px; + text-align: left; + text-transform: uppercase; + color: rgb(192, 205, 215); + margin-bottom: 16px; + grid-column: 1/3; +} +@media (min-width: 640px) { + .testimonials__title--small { + grid-column: 1/7; + } +} + +.people { + display: flex; + flex-direction: column; + justify-content: center; + gap: 24px; + grid-column: 1/3; +} +@media (min-width: 640px) { + .people { + grid-column: 1/7; + } +} +@media (min-width: 1024px) { + .people { + justify-content: center; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 20px; + } +} +@media (min-width: 1024px) and (min-width: 640px) { + .people { + grid-template-columns: repeat(6, 1fr); + grid-column-gap: 30px; + } +} +@media (min-width: 1024px) and (min-width: 1024px) { + .people { + grid-template-columns: repeat(12, 1fr); + grid-column-gap: 20px; + } +} +@media (min-width: 1024px) and (min-width: 1280px) { + .people { + grid-template-columns: repeat(12, 1fr); + grid-column-gap: 30px; + } +} + +.person { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + box-sizing: border-box; + padding-inline: 42px; + background-color: rgb(255, 255, 255); + border-radius: 16px; +} +@media (min-width: 640px) { + .person { + padding-inline: 98px; + } +} +@media (min-width: 1024px) { + .person { + padding-inline: 48px; + grid-column: span 4; + height: 456px; + } +} +.person__image { + z-index: 10; + position: relative; + margin-bottom: 68px; + margin-top: 75px; +} +.person__image::before { + content: ""; + z-index: -1; + width: 56px; + height: 140px; + background-color: rgb(32, 96, 246); + border-radius: 12px; + position: absolute; + top: -50px; + left: -46px; + transform: rotate(30deg); + transform-origin: 100% 100%; +} +@media (min-width: 1024px) { + .person__image::before { + width: 44px; + height: 110px; + top: -36px; + left: -36px; + } +} +.person__image::after { + content: ""; + z-index: -1; + width: 56px; + height: 140px; + background-color: rgb(32, 96, 246); + border-radius: 12px; + position: absolute; + bottom: -50px; + right: -46px; + transform: rotate(30deg); + transform-origin: 0 0; +} +@media (min-width: 1024px) { + .person__image::after { + width: 44px; + height: 110px; + bottom: -36px; + right: -36px; + } +} +.person__picture { + width: 140px; + height: 140px; + object-position: center; + object-fit: cover; + border-radius: 50%; +} +@media (min-width: 1024px) { + .person__picture { + width: 110px; + height: 110px; + } +} +.person:hover { + box-shadow: 0 8px 12px #2c2c2c; +} +.person:hover .person__image::before { + transform: translateX(0) translateY(0); + transition: 0.3s; +} +.person:hover .person__image::after { + transform: translateX(0) translateY(0); + transition: 0.3s; +} +.person:hover .person__picture { + transform: scale(1.2); + transition: 0.3s; +} +.person__quote { + width: 24px; + height: 24px; + background-image: url(../images/testimonials/testimonial-quote.svg); + background-position: center; + background-repeat: no-repeat; + margin-bottom: 10px; +} +.person__description { + box-sizing: border-box; + margin-bottom: 16px; +} +.person__paragraph { + font-family: "Open Sans", sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + text-align: center; + color: rgb(108, 120, 139); +} +.person__name { + font-family: "Open Sans", sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + text-align: center; + margin-bottom: 4px; +} +.person__specialization { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: center; + color: rgb(192, 205, 215); + margin-bottom: 32px; +} + +.vision { + align-items: center; + justify-content: center; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 20px; +} +@media (min-width: 640px) { + .vision { + grid-template-columns: repeat(6, 1fr); + grid-column-gap: 30px; + } +} +@media (min-width: 1024px) { + .vision { + grid-template-columns: repeat(12, 1fr); + grid-column-gap: 20px; + } +} +@media (min-width: 1280px) { + .vision { + grid-template-columns: repeat(12, 1fr); + grid-column-gap: 30px; + } +} +.vision__title { + font-family: Poppins, sans-serif; + font-size: 44px; + font-weight: 600; + line-height: 52.8px; + text-align: center; + color: rgb(37, 55, 87); + margin-bottom: 24px; + grid-column: 1/3; +} +@media (min-width: 640px) { + .vision__title { + grid-column: 1/7; + } +} +@media (min-width: 1024px) { + .vision__title { + grid-column: 1/13; + } +} +.vision__text { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 56px; + grid-column: 1/3; +} +@media (min-width: 640px) { + .vision__text { + grid-column: 1/7; + } +} +@media (min-width: 1024px) { + .vision__text { + grid-column: 3/11; + } +} +.vision__paragraph { + font-family: "Open Sans", sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 33px; + text-align: center; + color: rgb(108, 120, 139); +} +.vision__button { + display: flex; + justify-content: center; + align-items: center; + height: 56px; + width: 100%; + box-sizing: border-box; + border-radius: 8px; + background-color: rgb(32, 96, 246); + text-decoration: none; + grid-column: 1/3; +} +@media (min-width: 640px) { + .vision__button { + grid-column: 3/5; + } +} +@media (min-width: 1024px) { + .vision__button { + grid-column: 5/9; + } +} +.vision__button--text { + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + color: rgb(255, 255, 255); + transition: transform 0.3s; +} +.vision__button--text:hover { + transform: scale(1.1); +} + +.footer { + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: center; + padding-top: 120px; +} +.footer__elements { + background-color: rgb(44, 44, 44); + box-sizing: border-box; + padding: 72px 20px 80px; + border-top-left-radius: 24px; + border-top-right-radius: 24px; + justify-content: center; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 20px; +} +@media (min-width: 640px) { + .footer__elements { + grid-template-columns: repeat(6, 1fr); + grid-column-gap: 30px; + } +} +@media (min-width: 1024px) { + .footer__elements { + grid-template-columns: repeat(12, 1fr); + grid-column-gap: 20px; + } +} +@media (min-width: 1280px) { + .footer__elements { + grid-template-columns: repeat(12, 1fr); + grid-column-gap: 30px; + } +} +@media (min-width: 640px) { + .footer__elements { + padding-inline: 41px; + } +} +@media (min-width: 1024px) { + .footer__elements { + padding-top: 180px; + } +} +.footer__navigation { + display: flex; + flex-direction: column; + justify-content: center; + grid-column: 1/3; +} +@media (min-width: 640px) { + .footer__navigation { + grid-column: 1/7; + } +} +@media (min-width: 1024px) { + .footer__navigation { + flex-direction: row; + justify-content: space-between; + grid-column: 1/13; + } +} +.footer__navigation__logo { + background-image: url(../images/logo/header-Air.svg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + height: 28px; + width: 46px; + margin-bottom: 50px; +} +@media (min-width: 640px) { + .footer__navigation__logo { + margin-bottom: 24px; + } +} +.footer__navigation__list { + display: flex; + flex-direction: column; + justify-content: center; + align-items: start; + gap: 24px; +} +@media (min-width: 640px) { + .footer__navigation__list { + flex-direction: row; + justify-content: space-between; + } +} +@media (min-width: 1024px) { + .footer__navigation__list { + gap: 64px; + } +} +.footer__navigation__link { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + color: rgb(255, 255, 255); + text-decoration: none; + text-transform: uppercase; + transition: color 0.3s; +} +.footer__navigation__link:hover { + color: rgb(32, 96, 246); +} +.footer__navigation__item { + display: flex; + justify-content: center; + align-items: center; +} + +.forms { + display: flex; + flex-direction: column; + justify-content: center; + grid-column: 1/3; +} +@media (min-width: 640px) { + .forms { + grid-column: 1/5; + } +} +@media (min-width: 1024px) { + .forms { + grid-column: 1/6; + justify-content: start; + } +} +.forms__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 41.6px; + text-align: left; + color: rgb(255, 255, 255); + margin-bottom: 48px; +} + +.form { + display: flex; + flex-direction: column; + justify-content: center; +} +.form__inputs { + display: flex; + flex-direction: column; + justify-content: center; + gap: 40px; + margin-bottom: 56px; +} +.form__input { + background-color: rgb(44, 44, 44); + border: none; + border-bottom: 1px solid rgb(255, 255, 255); + box-sizing: border-box; + padding-bottom: 17px; + outline: none; + color: rgb(255, 255, 255); + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: left; +} +.form__input:focus { + border-color: rgb(20, 78, 212); +} +.form__button { + display: flex; + justify-content: center; + align-items: center; + height: 56px; + box-sizing: border-box; + border: none; + border-radius: 8px; + background-color: rgb(20, 78, 212); + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: center; + color: rgb(255, 255, 255); +} +@media (min-width: 640px) { + .form__button { + width: 264px; + } +} +.form__button:active { + background-color: rgb(44, 44, 44); + border: 2px solid rgb(20, 78, 212); +} + +.contact-us { + display: flex; + flex-direction: column; + justify-content: center; + padding: 80px 0; + grid-column: 1/3; +} +@media (min-width: 640px) { + .contact-us { + grid-column: 1/5; + padding-bottom: 140px; + } +} +@media (min-width: 1024px) { + .contact-us { + padding-top: 0; + grid-column: 7/12; + } +} +.contact-us__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 48px; + color: rgb(255, 255, 255); + margin-bottom: 48px; +} +.contact-us__title--small { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-transform: uppercase; + color: rgb(149, 149, 149); + margin-bottom: 8px; +} +.contact-us__elements { + display: flex; + flex-direction: column; + justify-content: center; + gap: 40px; +} + +.call__link { + font-family: "Open Sans", sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 36px; + color: rgb(255, 255, 255); + text-decoration: none; +} +.call__paragraph { + font-family: "Open Sans", sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 36px; + color: rgb(255, 255, 255); + transition: color 0.3s; +} +.call__paragraph:hover { + color: rgb(20, 78, 212); +} + +.visit__link { + font-family: "Open Sans", sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 36px; + color: rgb(255, 255, 255); + text-decoration: none; +} +.visit__paragraph { + font-family: "Open Sans", sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 36px; + color: rgb(255, 255, 255); + transition: color 0.3s; +} +.visit__paragraph:hover { + color: rgb(20, 78, 212); +} + +.socials { + display: flex; + flex-direction: column; + justify-content: center; +} +.socials:first-child { + margin-bottom: 16px; +} +.socials__icons { + display: flex; + gap: 41px; +} +.socials__icons--icon { + color: rgb(255, 255, 255); + transition: fill 0.3s; +} +.socials__icons--icon:hover { + fill: rgb(20, 78, 212); +} +.socials__icons--logo { + width: 32px; + height: 32px; + display: flex; + justify-content: center; + align-items: center; +} +.socials__icons--fb { + width: 24px; + height: 24px; +} +.socials__icons--x { + width: 24px; + height: 24px; +} +.socials__icons--ig { + width: 24px; + height: 24px; +} + +.menu { + display: flex; + flex-direction: column; + justify-content: flex-start; + box-sizing: border-box; + padding: 20px 20px 0; + position: fixed; + z-index: 10; + top: 0; + right: 0; + left: 0; + height: 100vh; + background-color: rgb(44, 44, 44); + transform: translateX(-100%); + opacity: 0; + transition: all 0.3s ease-in-out; + overflow-y: auto; +} +.menu__navigation { + display: flex; + justify-content: space-between; + margin-bottom: 48px; +} +.menu:target { + transform: translateX(0); + opacity: 1; +} + +.links { + display: flex; + flex-direction: column; + justify-content: center; +} +.links__list { + display: flex; + flex-direction: column; + gap: 24px; +} +.links__link { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: left; + text-decoration: none; + text-transform: uppercase; + color: rgb(255, 255, 255); +} + +/*# sourceMappingURL=style.css.map */ diff --git a/src/styles/style.css.map b/src/styles/style.css.map new file mode 100644 index 0000000000..6108389fc1 --- /dev/null +++ b/src/styles/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["utils/reset.scss","utils/_extends.scss","_fonts.scss","blocks/page.scss","blocks/body.scss","blocks/title.scss","blocks/paragraph.scss","blocks/header.scss","utils/_mixins.scss","blocks/navigation.scss","blocks/top__bar.scss","blocks/home.scss","blocks/intro.scss","blocks/arrow.scss","blocks/main.scss","blocks/section.scss","blocks/about__us.scss","blocks/our__expertise.scss","blocks/cards.scss","blocks/card.scss","blocks/services.scss","blocks/service.scss","blocks/box.scss","blocks/testimonials.scss","blocks/people.scss","blocks/person.scss","blocks/vision.scss","blocks/footer.scss","blocks/forms.scss","blocks/form.scss","blocks/contact-us.scss","blocks/call.scss","blocks/visit.scss","blocks/socials.scss","blocks/menu.scss","blocks/links.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAiFE;EACA;EACA;EACA;EACA;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;EACE;EACA;;;ACpIF;EACE;EACA;;;ACFF;EACE;EACA;EACA;EACA;;ACJF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;ACPF;EACE;EACA;;;AAGF;EACE;;;ACNF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACNF;EACE;EACA;EACA;EACA;EACA;;;ACHF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;ACKA;EDZF;IAUI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;ACPF;EDCA;ICuBA;IACA;IACA;IACA;IDfI;;;AClBJ;EDOA;IC6BE;IACA;;;AA/BF;EDCA;ICkCE;IACA;;;AA9BF;EDLA;ICuCE;IACA;;;;ACrDJ;EACE;EACA;EACA;EACA;EACA;EACA;;ADAA;ECNF;IASI;;;ADGF;ECZF;IAaI;IACA;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AD7BF;ECwBA;IAQI;;;AAIJ;EACE;;ADrCF;ECoCA;IAII;IACA;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AC1FN;EACE;;AFWA;EEZF;IAII;IACA;IACA;;EAEA;IACE;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACI;IACA;IACA;;EAGJ;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;;;ACtCR;EACE;EACA;;AHIA;EGNF;IAKI;;;AHOF;EGZF;IASI;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AHdF;EGOA;IAUI;IACA;;;AHZJ;EGCA;IAeI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AHpDN;EG0BA;IA+BI;;;AHnDJ;EGoBA;IAmCI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AH3EF;EGiEA;IAaI;IACA;IACA;IACA;;;AH3EJ;EG2DA;IAoBI;IACA;;;;AC9FN;EACE;EACA;EACA;EACA;;AJUA;EIdF;IAOI;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AJHF;EIHA;IASI;IACA;IACA;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AJtBJ;EIaE;IAYI;IACA;IACA;;;AAGF;EACE;;AAKN;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AClFJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;;ACrBJ;EACE;;ANKA;EMNF;IAII;;;;ACJJ;EACE;;AAGA;EPgCA;EACA;EACA;EACA;;AAjCA;EOFA;IPsCE;IACA;;;AA/BF;EORA;IP2CE;IACA;;;AA9BF;EOdA;IPgDE;IACA;;;AO7CF;EACE;EACA;;AAGF;EACE;;APRF;EOOA;IAII;IACA;;;APNJ;EOCA;IASI;IACA;;;AAIJ;EACE;;APhBF;EOeA;IAII;;;AAIJ;EACE;EACA;;AP/BF;EO6BA;IAKI;IACA;IACA;;;;AC5CN;EACE;EACA;EACA;EACA;EACA;;ARGA;EQRF;IAQI;IACA;;;ARKF;EQdF;IAaI;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ARrBF;EQaA;IAWI;;;;ACpCN;EACE;ETmCA;EACA;EACA;EACA;;AAjCA;ESNF;IT0CI;IACA;;;AA/BF;ESZF;IT+CI;IACA;;;AA9BF;ESlBF;IToDI;IACA;;;AShDF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ATRF;ESDA;IAYI;IACA;;;ATNJ;ESZF;IAuBI;IACA;IACA;IACA;;;;AC5BJ;EACE;;AVOA;EURF;IAII;;;AVUF;EUdF;IAQI;IACA;;;;ACTJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AX/BF;EWwBA;IAUI;IACA;;;;AC/CN;EACA;EZmCE;EACA;EACA;EACA;;AAjCA;EYNF;IZ0CI;IACA;;;AA/BF;EYZF;IZ+CI;IACA;;;AA9BF;EYlBF;IZoDI;IACA;;;AYhDF;EACE;EACA;EACA;EACA;;AZHF;EYDA;IAOI;;;AZAJ;EYPA;IAWI;IACA;;;AAIJ;EACE;EACA;EACA;EACA;;AZnBF;EYeA;IAOI;;;AZhBJ;EYSA;IAWI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AZvCF;EY8BA;IAYI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AZ3DF;EY0DA;IAII;;;AZxDJ;EYoDA;IAQI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;ACrFJ;EbsCE;EACA;EACA;EACA;;AAjCA;EaRF;Ib4CI;IACA;;;AA/BF;EadF;IbiDI;IACA;;;AA9BF;EapBF;IbsDI;IACA;;;AA/CF;EaRF;IAII;;;AbUF;EadF;IAQI;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AbbF;EaIA;IAYI;IACA;;;AbXJ;EaFA;IAiBI;IACA;;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;Ab7EJ;EaiFA;IAEI;;EAEA;IACE;IACA;;;AbjFN;Ea2EA;IAWI;;EAEA;IACE;IACA;;;;ACxGR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;ACVJ;EACE;EACA;EACA;EfiCA;EACA;EACA;EACA;;AAjCA;EeNF;If0CI;IACA;;;AA/BF;EeZF;If+CI;IACA;;;AA9BF;EelBF;IfoDI;IACA;;;AAzCF;EeZF;IAQI;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AffF;EeOA;IAWI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;Af/BJ;EeqBE;IAaI;;;;AC1CR;EACE;EACA;EACA;EACA;EACA;;AhBGA;EgBRF;IAQI;;;AhBMF;EgBdF;IhBsCE;IACA;IACA;IACA;;;AAjCA;EgBRF;IhB4CI;IACA;;;AA/BF;EgBdF;IhBiDI;IACA;;;AA9BF;EgBpBF;IhBsDI;IACA;;;;AiBvDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AjBAA;EiBRF;IAWI;;;AjBGF;EiBdF;IAeI;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AjBvBJ;EiBYE;IAcI;IACA;IACA;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AjB5CJ;EiBiCE;IAcI;IACA;IACA;IACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AjB5DF;EiBuDA;IAQI;IACA;;;AAIJ;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC3IJ;EACE;ElBmCA;EACA;EACA;EACA;;AAjCA;EkBNF;IlB0CI;IACA;;;AA/BF;EkBZF;IlB+CI;IACA;;;AA9BF;EkBlBF;IlBoDI;IACA;;;AkBhDF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AlBPF;EkBDA;IAWI;;;AlBJJ;EkBPA;IAeI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AlBvBF;EkBkBA;IAQI;;;AlBpBJ;EkBYA;IAYI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AlBrDF;EkB2CA;IAaI;;;AlBlDJ;EkBqCA;IAiBI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;ACpFR;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EnBwBF;EACA;EACA;EACA;;AAjCA;EmBCA;InBmCE;IACA;;;AA/BF;EmBLA;InBwCE;IACA;;;AA9BF;EmBXA;InB6CE;IACA;;;AA/CF;EmBCA;IAUI;;;AnBLJ;EmBLA;IAcI;;;AAIJ;EACE;EACA;EACA;EACA;;AnBvBF;EmBmBA;IAOI;;;AnBpBJ;EmBaA;IAWI;IACA;IACA;;;AAGF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AnB1CF;EmBmCE;IAUE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;AnBtDJ;EmBiDE;IAQI;IACA;;;AnBpDN;EmB2CE;IAaI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;;AC7FN;EACE;EACA;EACA;EACA;;ApBIA;EoBRF;IAOI;;;ApBOF;EoBdF;IAWI;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;ACtBJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;ArBxCF;EqByBA;IAkBI;;;AAGF;EACE;EACA;;;ACxDN;EACE;EACA;EACA;EACA;EACA;;AtBGA;EsBRF;IAQI;IACA;;;AtBKF;EsBdF;IAaI;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;;ACxCF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AClBJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;ACnBN;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AC1CN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AC1BJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"style.css"} \ No newline at end of file diff --git a/src/styles/styles.css.map b/src/styles/styles.css.map new file mode 100644 index 0000000000..2057a6cc34 --- /dev/null +++ b/src/styles/styles.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["utils/reset.scss","utils/_extends.scss","_fonts.scss","blocks/header.scss","blocks/navigation.scss","blocks/home.scss","blocks/title.scss","blocks/paragraph.scss","blocks/intro.scss","blocks/arrow.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAiFE;EACA;EACA;EACA;EACA;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;EACE;EACA;;;ACpIF;EACE;EACA;;;ACFF;EACE;EACA;EACA;EACA;;ACJF;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AClBJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACjCJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;;;ACxCJ;EACE;EACA;EACA;EACA;EACA;EACA;;;ACNF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACJA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AC9DJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"styles.css"} \ No newline at end of file diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..9f667d49c4 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,75 @@ #{$_property}: $_toValue; } } + +@mixin for-tablet { + @media (min-width: 640px) { + @content; + } +} + +@mixin for-small-desktop { + @media (min-width: 1024px) { + @content; + } +} + +@mixin for-desktop { + @media (min-width: 1280px) { + @content; + } +} + +@mixin the-design { + @media (min-width: 1600px) { + @content; + } +} + +@mixin large-screens { + @media (min-width: 2560px) { + @content; + } +} + +@mixin grid() { + justify-content: center; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + + @include for-tablet { + grid-template-columns: repeat(6, 1fr); + gap: 30px; + } + + @include for-small-desktop { + grid-template-columns: repeat(12, 1fr); + gap: 20px; + } + + @include for-desktop { + grid-template-columns: repeat(12, 1fr); + gap: 30px; + } +} + +@mixin padding-inline { + padding-inline: 20px; + + @include for-tablet { + padding-inline: 41px; + } + + @include for-small-desktop { + padding-inline: 54px; + } + + @include the-design { + padding-inline: 227px; + } + + @include large-screens { + padding-inline: 707px; + } +} diff --git a/src/styles/utils/reset.scss b/src/styles/utils/reset.scss new file mode 100644 index 0000000000..2f1a2e9528 --- /dev/null +++ b/src/styles/utils/reset.scss @@ -0,0 +1,134 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote::before, +blockquote::after, +q::before, +q::after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +}