diff --git a/.eslintrc.js b/.eslintrc.js index 66c1bb9901..47218ce135 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,3 +1,7 @@ module.exports = { extends: '@mate-academy/eslint-config', + parserOptions: { + ecmaVersion: 2018, + sourceType: 'module', + } }; diff --git a/README.md b/README.md index 93d9738cc4..b5a2c536de 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://Softjey.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 b0a5d005c5..ddede4660f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2538,14 +2538,15 @@ "dev": true }, "asn1.js": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.10.1.tgz", - "integrity": "sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==", + "version": "5.4.1", + "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz", + "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==", "dev": true, "requires": { "bn.js": "^4.0.0", "inherits": "^2.0.1", - "minimalistic-assert": "^1.0.0" + "minimalistic-assert": "^1.0.0", + "safer-buffer": "^2.1.0" }, "dependencies": { "bn.js": { @@ -2566,12 +2567,41 @@ "util": "^0.10.4" }, "dependencies": { + "define-properties": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz", + "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==", + "dev": true, + "requires": { + "define-data-property": "^1.0.1", + "has-property-descriptors": "^1.0.0", + "object-keys": "^1.1.1" + } + }, + "has-symbols": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", + "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", + "dev": true + }, "inherits": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==", "dev": true }, + "object.assign": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz", + "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "define-properties": "^1.1.4", + "has-symbols": "^1.0.3", + "object-keys": "^1.1.1" + } + }, "util": { "version": "0.10.4", "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz", @@ -3624,9 +3654,9 @@ "dev": true }, "dotenv-expand": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz", - "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-4.2.0.tgz", + "integrity": "sha512-pHWVt6L/YkqbBCMb1hG6e7oO0WdMhlapDIibl+BZ9PncVE3i+G77uvNr8GUxW2ItSituOK8QOYC9oOJjwWD94A==", "dev": true }, "electron-to-chromium": { @@ -3679,6 +3709,15 @@ "once": "^1.4.0" } }, + "end-of-stream": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", + "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==", + "dev": true, + "requires": { + "once": "^1.4.0" + } + }, "entities": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz", @@ -4017,6 +4056,15 @@ "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", "dev": true }, + "globalthis": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz", + "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==", + "dev": true, + "requires": { + "define-properties": "^1.1.3" + } + }, "globby": { "version": "11.1.0", "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", @@ -4329,12 +4377,32 @@ "wrap-ansi": "^6.0.1" } }, + "is-array-buffer": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz", + "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "get-intrinsic": "^1.2.0", + "is-typed-array": "^1.1.10" + } + }, "is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", "dev": true }, + "is-bigint": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz", + "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==", + "dev": true, + "requires": { + "has-bigints": "^1.0.1" + } + }, "is-binary-path": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", @@ -5838,6 +5906,16 @@ "windows-release": "^3.1.0" } }, + "os-name": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/os-name/-/os-name-3.1.0.tgz", + "integrity": "sha512-h8L+8aNjNcMpo/mAIBPn5PXCM16iyPGjHNWo6U1YO8sJTMHtEtyczI6QJnLoplswm6goopQkqc7OAnjhWcugVg==", + "dev": true, + "requires": { + "macos-release": "^2.2.0", + "windows-release": "^3.1.0" + } + }, "os-tmpdir": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", diff --git a/package.json b/package.json index 1a04fa0c9c..29cad1b2dd 100644 --- a/package.json +++ b/package.json @@ -41,4 +41,4 @@ "backstop": false } } -} +} \ No newline at end of file diff --git a/src/images/Shapes.png b/src/images/Shapes.png deleted file mode 100644 index 26ed3e89b0..0000000000 Binary files a/src/images/Shapes.png and /dev/null differ diff --git a/src/images/Shapes.svg b/src/images/Shapes.svg new file mode 100644 index 0000000000..0b6a3d2107 --- /dev/null +++ b/src/images/Shapes.svg @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/arrow-icon.svg b/src/images/icons/arrow-icon.svg new file mode 100644 index 0000000000..c535a27bf9 --- /dev/null +++ b/src/images/icons/arrow-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/burger-menu-icon.svg b/src/images/icons/burger-menu-icon.svg new file mode 100644 index 0000000000..374d372c5a --- /dev/null +++ b/src/images/icons/burger-menu-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/close-cross-icon.svg b/src/images/icons/close-cross-icon.svg new file mode 100644 index 0000000000..33f304d6a2 --- /dev/null +++ b/src/images/icons/close-cross-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/socials/facebook-icon.svg b/src/images/icons/socials/facebook-icon.svg new file mode 100644 index 0000000000..9979d2608a --- /dev/null +++ b/src/images/icons/socials/facebook-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/socials/instagram-icon.svg b/src/images/icons/socials/instagram-icon.svg new file mode 100644 index 0000000000..76a83d304d --- /dev/null +++ b/src/images/icons/socials/instagram-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/socials/twitter-icon.svg b/src/images/icons/socials/twitter-icon.svg new file mode 100644 index 0000000000..74cbdbf5d4 --- /dev/null +++ b/src/images/icons/socials/twitter-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/testimonails-quotes/testimonail-quote-1-icon.svg b/src/images/icons/testimonails-quotes/testimonail-quote-1-icon.svg new file mode 100644 index 0000000000..743f109c3e --- /dev/null +++ b/src/images/icons/testimonails-quotes/testimonail-quote-1-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/testimonails-quotes/testimonail-quote-2-icon.svg b/src/images/icons/testimonails-quotes/testimonail-quote-2-icon.svg new file mode 100644 index 0000000000..cda67af32b --- /dev/null +++ b/src/images/icons/testimonails-quotes/testimonail-quote-2-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/testimonails-quotes/testimonail-quote-3-icon.svg b/src/images/icons/testimonails-quotes/testimonail-quote-3-icon.svg new file mode 100644 index 0000000000..2746bae722 --- /dev/null +++ b/src/images/icons/testimonails-quotes/testimonail-quote-3-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo/air-logo.svg b/src/images/logo/air-logo.svg new file mode 100644 index 0000000000..e26dfea4ae --- /dev/null +++ b/src/images/logo/air-logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/logo/dia-logo.svg b/src/images/logo/dia-logo.svg deleted file mode 100644 index a81933296e..0000000000 --- a/src/images/logo/dia-logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/our-expertise/img-branding.jpg b/src/images/our-expertise/img-branding.jpg new file mode 100644 index 0000000000..b4062b6beb Binary files /dev/null and b/src/images/our-expertise/img-branding.jpg differ diff --git a/src/images/our-expertise/img-communication.jpg b/src/images/our-expertise/img-communication.jpg new file mode 100644 index 0000000000..b11ea7d2ef Binary files /dev/null and b/src/images/our-expertise/img-communication.jpg differ diff --git a/src/images/our-expertise/img-strategy.jpg b/src/images/our-expertise/img-strategy.jpg new file mode 100644 index 0000000000..323f82d435 Binary files /dev/null and b/src/images/our-expertise/img-strategy.jpg differ 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/arrow.svg b/src/images/slider/arrow.svg new file mode 100644 index 0000000000..d4c22a725b --- /dev/null +++ b/src/images/slider/arrow.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/slider/slide-img-1.jpg b/src/images/slider/slide-img-1.jpg index 98c4188508..89a112b071 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..acf468d07a 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..3ac97999e8 Binary files /dev/null and b/src/images/slider/slide-img-3.jpg differ diff --git a/src/images/testimonials/testimonail-avatar-bg-1.svg b/src/images/testimonials/testimonail-avatar-bg-1.svg new file mode 100644 index 0000000000..ab47ac2aee --- /dev/null +++ b/src/images/testimonials/testimonail-avatar-bg-1.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/testimonials/testimonail-avatar-bg-2.svg b/src/images/testimonials/testimonail-avatar-bg-2.svg new file mode 100644 index 0000000000..9c7e89bab3 --- /dev/null +++ b/src/images/testimonials/testimonail-avatar-bg-2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/testimonials/testimonail-avatar-bg-3.svg b/src/images/testimonials/testimonail-avatar-bg-3.svg new file mode 100644 index 0000000000..1f9032abb7 --- /dev/null +++ b/src/images/testimonials/testimonail-avatar-bg-3.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/testimonials/testimonial-ava-1.jpg b/src/images/testimonials/testimonial-ava-1.jpg index d487a51ddf..07dd3a1d99 100644 Binary files a/src/images/testimonials/testimonial-ava-1.jpg and b/src/images/testimonials/testimonial-ava-1.jpg differ diff --git a/src/images/testimonials/testimonial-ava-2.jpg b/src/images/testimonials/testimonial-ava-2.jpg index 04288940f3..2e44dbf6e5 100644 Binary files a/src/images/testimonials/testimonial-ava-2.jpg and b/src/images/testimonials/testimonial-ava-2.jpg differ diff --git a/src/images/testimonials/testimonial-ava-3.jpg b/src/images/testimonials/testimonial-ava-3.jpg index 24c0f2b94b..b1590dd23e 100644 Binary files a/src/images/testimonials/testimonial-ava-3.jpg and b/src/images/testimonials/testimonial-ava-3.jpg differ diff --git a/src/images/what-we-do/what-we-do-1.jpg b/src/images/what-we-do/what-we-do-1.jpg deleted file mode 100644 index 9481d8eeb2..0000000000 Binary files a/src/images/what-we-do/what-we-do-1.jpg and /dev/null differ diff --git a/src/images/what-we-do/what-we-do-2.jpg b/src/images/what-we-do/what-we-do-2.jpg deleted file mode 100644 index 724e65566f..0000000000 Binary files a/src/images/what-we-do/what-we-do-2.jpg and /dev/null differ diff --git a/src/images/what-we-do/what-we-do-3.jpg b/src/images/what-we-do/what-we-do-3.jpg deleted file mode 100644 index 7a69cc03f1..0000000000 Binary files a/src/images/what-we-do/what-we-do-3.jpg and /dev/null differ diff --git a/src/index.html b/src/index.html index 9a8c6db8f9..b616bf9ee8 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,500 @@ - + + - - - Dia - + + + Air + + + + + + - -

Dia

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

Strategic Agency

+

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

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

Intro

+

+ By the same illusion which lifts the horizon. +

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

Who we are

+

We embrace a strategic approach to creative ideas. We are interested in people and human relationships. This is the main thing you need to know about us. We believe in the power of bold ideas that can solve business challenges.

+
+ +
+

Our expertise

+
+
+ Branding +

Branding

+

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

+
+ +
+ Communication +

Communication

+

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

+
+ +
+ Strategy +

Strategy

+

+ We create business growth strategies, from the moment of its birth to the achievement of the necessary business indicators. +

+
+
+
+ +
+
+

Services

+

+ Air is a full service creative agency +

+ +
+

+ Deep analytics, strong strategy and bright creative ideas. +

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

+
+
+ +
+ +
+

002

+
    +
  • Сontent Production
    • +
  • Graphic Design
    • +
  • Video Production
    • +
  • Post Production
    • +
+ +
+ arrow +
+

Learn more

+ +
+
+

003

+
    +
  • Marketing Strategy
    • +
  • Email Marketing
    • +
  • Paid Advertising
    • +
  • Blog Content & SEO
    • +
+ +
+ arrow +
+

Learn more

+ +
+
+

004

+
    +
  • Digital Communications
    • +
  • Influencer Marketing
    • +
  • Product Placements
    • +
  • Strategic Partnerships
    • +
+ +
+ arrow +
+

Learn more

+ +
+
+ +
+ +
+
+

testimonials

+

What people say

+
+ +
+
+
+ testimonials Photo +
+ + testimonail quote + +

+ AIRs 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 Photo +
+ + testimonail quote + +

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

+ +

+ Azadeh Hawkins +

+ +

+ Hawkins Consulting +

+
+ +
+
+ testimonials Photo +
+ + testimonail quote + +

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

+ +

+ Michel Grover +

+ +

+ Hulu +

+
+
+
+ +
+
+

+ Vision, Passion, Results +

+ +
+

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

+ + Apply +
+
+
+ +
+ + + + \ No newline at end of file diff --git a/src/scripts/hoverDelay.js b/src/scripts/hoverDelay.js new file mode 100644 index 0000000000..b4196de627 --- /dev/null +++ b/src/scripts/hoverDelay.js @@ -0,0 +1,17 @@ +const elements = document.querySelectorAll('[data-hover-delay]'); +let hoverTimeout; + +export function handleHoverDelay() { + elements.forEach(function(element) { + element.addEventListener('mouseenter', function() { + hoverTimeout = setTimeout(function() { + element.classList.add('delayed-hover'); + }, 500); + }); + + element.addEventListener('mouseleave', function() { + clearTimeout(hoverTimeout); + element.classList.remove('delayed-hover'); + }); + }); +} diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..e86057ff86 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,21 @@ -'use strict'; +import { + prevSlide, + nextSlide, + prevBtn, + nextBtn, +} from './slider.js'; +import { handleScrollSnap } from './scrollSnap.js'; +import { handleHoverDelay } from './hoverDelay.js'; +import { checkElementsInViewport } from './viewportChecker.js'; + +prevBtn.addEventListener('click', prevSlide); +nextBtn.addEventListener('click', nextSlide); + +handleScrollSnap(); +handleHoverDelay(); + +document.addEventListener('DOMContentLoaded', function() { + checkElementsInViewport(); + window.addEventListener('resize', checkElementsInViewport); + window.addEventListener('scroll', checkElementsInViewport); +}); diff --git a/src/scripts/scrollSnap.js b/src/scripts/scrollSnap.js new file mode 100644 index 0000000000..b60c634591 --- /dev/null +++ b/src/scripts/scrollSnap.js @@ -0,0 +1,28 @@ +let allowSnap = true; +const container = document.querySelector('html'); + +export function handleScrollSnap() { + window.addEventListener('wheel', function() { + allowSnap = false; + container.style.scrollSnapType = 'none'; + }); + + window.addEventListener('keydown', function(event) { + if (event.key === 'ArrowUp' || event.key === 'ArrowDown') { + allowSnap = true; + container.style.scrollSnapType = 'y mandatory'; + } + }); + + let checkScrollStop = null; + + window.addEventListener('scroll', function() { + clearTimeout(checkScrollStop); + + checkScrollStop = setTimeout(() => { + if (allowSnap) { + container.style.scrollSnapType = 'y mandatory'; + } + }, 100); + }); +} diff --git a/src/scripts/slider.js b/src/scripts/slider.js new file mode 100644 index 0000000000..a3efc786c7 --- /dev/null +++ b/src/scripts/slider.js @@ -0,0 +1,30 @@ +export const slider = document.querySelector('.slider'); +export const prevBtn = document.querySelector('.slider__button--left'); +export const nextBtn = document.querySelector('.slider__button--right'); + +const IMG_AMOUNT = 3; +let imgIndex = 1; + +export function prevSlide() { + if (imgIndex > 1) { + slider.classList.remove(`slider--slide-num--${imgIndex}`); + imgIndex--; + slider.classList.add(`slider--slide-num--${imgIndex}`); + } else { + slider.classList.remove(`slider--slide-num--${imgIndex}`); + imgIndex = IMG_AMOUNT; + slider.classList.add(`slider--slide-num--${imgIndex}`); + } +} + +export function nextSlide() { + if (imgIndex < IMG_AMOUNT) { + slider.classList.remove(`slider--slide-num--${imgIndex}`); + imgIndex++; + slider.classList.add(`slider--slide-num--${imgIndex}`); + } else { + slider.classList.remove(`slider--slide-num--${imgIndex}`); + imgIndex = 1; + slider.classList.add(`slider--slide-num--${imgIndex}`); + } +} diff --git a/src/scripts/viewportChecker.js b/src/scripts/viewportChecker.js new file mode 100644 index 0000000000..f86a110fe3 --- /dev/null +++ b/src/scripts/viewportChecker.js @@ -0,0 +1,26 @@ +export function isElementInViewport(el) { + const rect = el.getBoundingClientRect(); + const tolerance = 5; + + return ( + Math.abs(rect.top) <= tolerance + && rect.left >= 0 + && Math.abs(rect.bottom + - (window.innerHeight + || document.documentElement.clientHeight)) <= tolerance + && rect.right <= (window.innerWidth + || document.documentElement.clientWidth) + ); +} + +export function checkElementsInViewport() { + const elements = document.querySelectorAll('.header'); + + elements.forEach(function(element) { + if (isElementInViewport(element)) { + element.classList.add('header--inViewport'); + } else { + element.classList.remove('header--inViewport'); + } + }); +} diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd54008..f5eabf7e2e 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,2 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap"); diff --git a/src/styles/blocks.scss b/src/styles/blocks.scss new file mode 100644 index 0000000000..26f24d9403 --- /dev/null +++ b/src/styles/blocks.scss @@ -0,0 +1,27 @@ +@import "blocks/header"; +@import "blocks/strategic-agency"; +@import "blocks/nav"; +@import "blocks/slider"; +@import "blocks/menu"; +@import "blocks/second-nav"; +@import "blocks/button"; +@import "blocks/icon"; +@import "blocks/main"; +@import "blocks/who-we-are"; +@import "blocks/our-expertise"; +@import "blocks/section-title"; +@import "blocks/article-exp"; +@import "blocks/big-p"; +@import "blocks/small-p"; +@import "blocks/category-p"; +@import "blocks/services"; +@import "blocks/service-card"; +@import "blocks/learn-more-button"; +@import "blocks/testimonials"; +@import "blocks/reviews-cards"; +@import "blocks/review-card"; +@import "blocks/CTA"; +@import "blocks/footer"; +@import "blocks/send-us-message"; +@import "blocks/contact-us"; +@import "blocks/slide"; diff --git a/src/styles/blocks/CTA.scss b/src/styles/blocks/CTA.scss new file mode 100644 index 0000000000..8b8c813a0b --- /dev/null +++ b/src/styles/blocks/CTA.scss @@ -0,0 +1,51 @@ +.CTA { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + padding: 72px var(--page-padding); + width: 100%; + + background-size: cover; + + overflow: hidden; + background-color: $c-white; + background-image: url(/images/Shapes.svg); + background-repeat: no-repeat; + background-position: bottom; + + transition: 1s; + + &:has(.button.delayed-hover) { + background-size: 250% 250%; + } + + @include onTablet { + padding-block: 200px; + padding-inline: 0; + margin: 0; + } + + @include onDesktop { + background-size: 100% 100%; + } + + &__content { + display: flex; + flex-direction: column; + gap: 24px; + max-width: 680px; + } + + &__bottom { + display: flex; + flex-direction: column; + align-items: center; + gap: 56px; + + @include onTablet { + gap: 64px; + } + } +} diff --git a/src/styles/blocks/article-exp.scss b/src/styles/blocks/article-exp.scss new file mode 100644 index 0000000000..53dfe78962 --- /dev/null +++ b/src/styles/blocks/article-exp.scss @@ -0,0 +1,27 @@ +.article-exp { + display: flex; + flex-direction: column; + align-items: center; + max-width: 362px; + border-radius: 10px; + transition: 3s; + @include hover(transform, scale(1.25)); + + &__img { + width: $article__img-size; + height: $article__img-size; + border-radius: 16px; + } + + &__title { + @include title; + color: $c-section-title; + font-size: 20px; + line-height: 28px; + margin: 32px 0 16px; + } + + @include onDesktop { + max-width: 264px; + } +} diff --git a/src/styles/blocks/big-p.scss b/src/styles/blocks/big-p.scss new file mode 100644 index 0000000000..353610b85a --- /dev/null +++ b/src/styles/blocks/big-p.scss @@ -0,0 +1,9 @@ +.big-p { + @include paragraph(center); + font-size: 22px; + font-weight: 600; + + @include onTablet { + font-size: 24px; + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 0000000000..67b190fe1b --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,26 @@ +.button { + @include title; + display: flex; + justify-content: center; + align-items: center; + font-size: 15px; + line-height: 23px; + color: $c-white; + background-color: $c-salmon-pink; + border-radius: 64px; + max-width: 264px; + width: 100%; + min-width: max-content; + height: 50px; + border: 0; + cursor: pointer; + transition: 300ms; + + &:hover { + box-shadow: 0 0 20px rgba(255, 0, 0, 0.69), + 0 0 20px rgba(255, 255, 255, 0.2); + outline-color: rgba(255, 255, 255, 0); + outline-offset: 15px; + text-shadow: 1px 1px 40px #c4c4c4; + } +} diff --git a/src/styles/blocks/category-p.scss b/src/styles/blocks/category-p.scss new file mode 100644 index 0000000000..6f1f185135 --- /dev/null +++ b/src/styles/blocks/category-p.scss @@ -0,0 +1,8 @@ +.category-p { + font-family: $accent-font; + font-weight: 700; + font-size: 13px; + letter-spacing: 3px; + text-transform: uppercase; + color: $c-category; +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 0000000000..5af4c36969 --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,52 @@ +.contact-us { + display: flex; + flex-direction: column; + gap: 48px; + + @include onTablet { + grid-column: span 4; + } + + @include onDesktop { + grid-column: 8 / -1; + } + + &__list { + display: flex; + flex-direction: column; + gap: 40px; + list-style-type: none; + } + + &__item { + display: flex; + flex-direction: column; + gap: 8px; + } + + &__contact-method { + font-family: $accent-font; + font-weight: 700; + text-transform: uppercase; + color: $c-white; + font-size: 13px; + line-height: 20px; + letter-spacing: 3px; + opacity: 0.5; + } + + &__contact-info { + font-family: $main-font; + font-weight: 600; + font-size: 24px; + line-height: 36px; + color: $c-white; + + @include hover(opacity, 0.7); + } + + &__our-socials { + display: flex; + gap: 32px; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..aec4992781 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,46 @@ +.footer { + display: flex; + justify-content: center; + width: 100%; + background-color: $c-blue; + border-radius: 30px 30px 0 0; + padding: 72px var(--page-padding) 80px; + + @include onTablet { + padding-top: 120px; + padding-bottom: 80px; + } + + @include onDesktop { + border-radius: 0 100px 0 0; + } + + &__content { + display: grid; + --columns: 1; + grid-template-columns: repeat(var(--columns), 1fr); + row-gap: 80px; + max-width: $max-section-width; + + @include onTablet { + --columns: 6; + column-gap: 30px; + row-gap: 120px; + } + + @include onDesktop { + --columns: 12; + column-gap: 20px; + } + + @include onBigDesktop { + column-gap: 30px; + } + } + + &__nav { + @include onTablet { + grid-column: 1 / -1; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..f4613333a9 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,90 @@ +.header { + position: relative; + display: flex; + + background-color: $c-blue; + border-radius: 0 0 30px 30px; + + height: 100vh; + min-height: 900px; + transition: 2s; + + @include onDesktop { + border-radius: 0 0 0 200px; + min-height: auto; + max-height: 800px; + justify-content: center; + } + + &--inViewport { + border-radius: 0; + + & > .slider { + border-radius: 0 !important; + } + } + + &__content { + display: flex; + flex-direction: column; + + width: 100%; + max-width: $max-section-width; + } + + &__top { + padding-inline: var(--page-padding); + grid-column: 1 / -1; + + @include onBigDesktop { + padding-inline: 0; + } + } + + &__bottom { + flex-grow: 1; + + display: grid; + row-gap: 48px; + --columns: 1; + grid-template-columns: repeat(var(--columns), 1fr); + grid-template-rows: repeat(2, 1fr); + + @include onDesktop { + grid-template-rows: repeat(1, 1fr); + --columns: 12; + column-gap: 20px; + max-height: 736px; + } + + @include onBigDesktop { + column-gap: 30px; + } + } + + &__left { + display: flex; + flex-direction: column; + justify-content: center; + padding-left: var(--page-padding); + + @include onDesktop { + grid-column: span 5; + margin-bottom: 0; + } + + @include onBigDesktop { + padding-left: 0; + } + } + + &__right { + @include onDesktop { + position: absolute; + right: 0; + bottom: 0; + top: 120px; + grid-column: 7 / -1; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 0000000000..962212966b --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,32 @@ +.icon { + @include icon; + + &--burger-menu { + background-image: url(/images/icons/burger-menu-icon.svg); + } + + &--close-cross { + background-image: url(/images/icons/close-cross-icon.svg); + } + + &--arrow { + padding: 4px; + } + + &--social { + width: 32px; + @include hover(opacity, 0.5); + } + + &--facebook { + background-image: url(/images/icons/socials/facebook-icon.svg); + } + + &--twitter { + background-image: url(/images/icons/socials/twitter-icon.svg); + } + + &--instagram { + background-image: url(/images/icons/socials/instagram-icon.svg); + } +} diff --git a/src/styles/blocks/learn-more-button.scss b/src/styles/blocks/learn-more-button.scss new file mode 100644 index 0000000000..4498d762f7 --- /dev/null +++ b/src/styles/blocks/learn-more-button.scss @@ -0,0 +1,43 @@ +.learn-more-button { + display: flex; + align-items: center; + gap: 16px; + background-color: #efefef; + + color: inherit; + cursor: pointer; + height: 40px; + padding-right: 16px; + border: none; + border-radius: 20px; + + &__arrow { + position: absolute; + + display: flex; + padding: 8px; + justify-content: flex-end; + background-color: blue; + + border-radius: $learn-more_arrow-size / 2; + height: $learn-more_arrow-size; + width: $learn-more_arrow-size; + transition: 450ms; + } + + &__text { + @include title; + font-size: 15px; + line-height: 23px; + padding-left: $learn-more_arrow-size + 16px; + white-space: nowrap; + } + + &:hover { + position: relative; + } + + &:hover &__arrow { + width: 160px; + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 0000000000..34fbc44b6a --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,14 @@ +.main { + display: flex; + flex-direction: column; + align-items: center; + gap: 120px; + + padding-block: 120px; + background-color: $c-main ; + + @include onTablet { + gap: 148px; + padding-block: 148px 0; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..07e7e9ce34 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,34 @@ +.menu { + display: flex; + justify-content: space-around; + gap: 10px; + width: 100vw; + padding: 5% 0 0 var(--page-padding); + background-color: $c-category; + position: fixed; + top: 0; + left: 0; + bottom: 0; + z-index: 1; + transform: translateX(-100vw); + transition: transform 300ms ease-in-out; + + &:target { + transform: translate(0); + } + + body:has(&:target) { + overflow-y: hidden; + } + + &__close-cross { + @include icon; + height: max-content; + width: 10%; + margin-right: 10px; + } + + @include onDesktop { + display: none; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..798f55ae9a --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,84 @@ +.nav { + position: relative; + display: flex; + align-items: center; + + @include onDesktop { + justify-content: space-between; + } + + &__logo-link { + @include hover(opacity, 0.8); + @include hover(transform, scale(1.1)); + } + + &__list { + display: flex; + gap: 48px; + list-style-type: none; + margin-left: 32px; + + &-item { + display: none; + + @include onDesktop { + display: block; + } + + &--burger { + display: block; + padding-block: 20px; + + @include onDesktop { + display: none; + } + } + } + + &-link { + @include navlink; + padding-block: 20px; + display: block; + + @include onDesktop { + padding-block: 48px; + } + + @include hover(opacity, 0.8); + @include hover(transform, scale(1.2)); + } + } + + &__hire-us { + text-transform: uppercase; + position: absolute; + right: 0; + font-family: $accent-font; + font-size: 13px; + font-weight: 700; + line-height: 20px; + letter-spacing: 3px; + color: $c-white; + display: flex; + flex-direction: column; + + @include hover(opacity, 0.8); + @include hover(transform, scale(1.1)); + + @include onDesktop { + position: relative; + + } + + &::after { + content: ""; + position: absolute; + bottom: -8px; + height: 2px; + width: 100%; + background-color: $c-salmon-pink; + border-radius: 4px; + margin-top: 8px; + } + } +} diff --git a/src/styles/blocks/our-expertise.scss b/src/styles/blocks/our-expertise.scss new file mode 100644 index 0000000000..5677e824bc --- /dev/null +++ b/src/styles/blocks/our-expertise.scss @@ -0,0 +1,29 @@ +.our-expertise { + display: flex; + flex-direction: column; + align-items: center; + gap: 56px; + width: 100%; + background-color: $c-white; + padding: 72px var(--page-padding); + border-radius: 30px; + + @include onTablet { + padding-block: 128px; + gap: 64px; + } + + &__content { + display: flex; + flex-direction: column; + align-items: center; + gap: 56px; + width: 100%; + max-width: $max-section-width; + + @include onDesktop { + flex-direction: row; + justify-content: space-between; + } + } +} diff --git a/src/styles/blocks/review-card.scss b/src/styles/blocks/review-card.scss new file mode 100644 index 0000000000..902094d037 --- /dev/null +++ b/src/styles/blocks/review-card.scss @@ -0,0 +1,76 @@ +.review-card { + display: flex; + flex-direction: column; + align-items: center; + max-width: max-content; + + @include hover(transform, scale(1.05)); + + padding: 32px 37px; + + background-color: $c-white; + box-shadow: 0 9px 18px 0 #25293108; + border-radius: 16px; + + @include onDesktop { + grid-column: span 1; + max-width: 362px; + } + + &__avatar { + position: relative; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 24px; + background-size: cover; + /* stylelint-disable */ + aspect-ratio: 1 / 1; + /* stylelint-enable */ + min-width: $review-card__avatar-size; + width: 70%; + max-width: 250px; + + &--blue { + background-image: url(../images/testimonials/testimonail-avatar-bg-1.svg); + } + + &--yellow { + background-image: url(../images/testimonials/testimonail-avatar-bg-2.svg); + } + + &--red { + background-image: url(../images/testimonials/testimonail-avatar-bg-3.svg); + } + } + + &__photo { + position: absolute; + border-radius: 50%; + width: 56%; + /* stylelint-disable */ + aspect-ratio: 1 / 1; + /* stylelint-enable */ + @include hover(transform, scale(1.75)); + } + + &__p { + @include paragraph(center); + margin-top: 8px; + max-width: 400px; + font-size: 13px; + font-weight: 600; + line-height: 20px; + } + + &__people-name { + margin: 32px 0 4px; + + font-family: $main-font; + text-align: center; + font-weight: 600; + font-size: 13px; + line-height: 20px; + color: $c-section-title; + } +} diff --git a/src/styles/blocks/reviews-cards.scss b/src/styles/blocks/reviews-cards.scss new file mode 100644 index 0000000000..cc386c73f4 --- /dev/null +++ b/src/styles/blocks/reviews-cards.scss @@ -0,0 +1,17 @@ +.reviews-cards { + display: grid; + --columns: 1; + justify-items: center; + grid-template-columns: repeat(var(--columns), 1fr); + row-gap: 24px; + + @include onTablet { + row-gap: 30px; + } + + @include onDesktop { + justify-content: center; + column-gap: 30px; + --columns: 3; + } +} diff --git a/src/styles/blocks/second-nav.scss b/src/styles/blocks/second-nav.scss new file mode 100644 index 0000000000..647686c2a3 --- /dev/null +++ b/src/styles/blocks/second-nav.scss @@ -0,0 +1,60 @@ +.second-nav { + justify-self: start; + display: flex; + flex-direction: column; + gap: 48px; + height: min-content; + + @include onDesktop { + flex-direction: row; + justify-content: space-between; + } + + &__logo { + display: block; + max-width: max-content; + + &-image { + @include hover(opacity, 0.8); + @include hover(transform, scale(1.1)); + + &--width { + @include onTablet { + width: 70px; + } + } + } + } + + &__list { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + list-style-type: none; + gap: 24px; + + &--row { + @include onTablet { + flex-direction: row; + } + } + + &-item { + width: max-content; + @include hover(opacity, 0.8); + @include hover(transform, scale(1.1)); + } + + &-link { + @include navlink; + + &--biggerOnTablet { + @include onTablet { + font-size: 25px; + line-height: 180%; + } + } + } + } +} diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 0000000000..806d3c2d85 --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,33 @@ +.section-title { + @include title; + color: $c-section-title; + font-size: 32px; + line-height: 150%; + text-align: center; + + &--bigger { + font-size: 44px; + line-height: 120%; + } + + &--left { + text-align: left; + } + + &--white { + color: $c-white; + } + + &--nowrap { + @include onTablet { + width: max-content; + + } + } + + @include onTablet { + &--bigger { + font-size: 52px; + } + } +} diff --git a/src/styles/blocks/send-us-message.scss b/src/styles/blocks/send-us-message.scss new file mode 100644 index 0000000000..6018a03aeb --- /dev/null +++ b/src/styles/blocks/send-us-message.scss @@ -0,0 +1,57 @@ +.send-us-message { + display: flex; + flex-direction: column; + gap: 48px; + + @include onTablet { + grid-column: span 4; + } + + @include onDesktop { + grid-column: span 5; + } + + &__form { + display: flex; + flex-direction: column; + align-items: center; + gap: 40px; + + @include onTablet { + align-items: stretch; + } + } + + &__input { + align-self: stretch; + height: 40px; + font-family: $accent-font; + font-size: 15px; + font-weight: 600; + line-height: 23px; + color: $c-white; + background: none; + padding: 0 0 4px 4px; + border-bottom: 1px $c-white solid; + + @include hover(transform, scale(1.1)); + + &:focus { + @include hover(transform, scale(1.1)); + border-bottom: 2px solid $c-white; + } + + &::placeholder { + opacity: 0.7; + color: $c-white; + } + + &:-webkit-autofill { + color: $c-white; + // Властивість щоб перевизначити color в autofill + -webkit-text-fill-color: $c-white; + // Костиль щоб не мінявся колір фону в autofill + transition: background-color 5000s ease-in-out 0s; + } + } +} diff --git a/src/styles/blocks/service-card.scss b/src/styles/blocks/service-card.scss new file mode 100644 index 0000000000..798bca42a8 --- /dev/null +++ b/src/styles/blocks/service-card.scss @@ -0,0 +1,70 @@ +.service-card { + grid-column: span var(--columns); + + padding: 32px; + display: flex; + flex-direction: column; + align-items: flex-start; + + background-color: $c-white; + border-radius: 24px; + box-shadow: 0 9px 18px 0 #25293108; + + @include hover(transform, scale(1.1)); + + @include onTablet { + grid-column: span 1; + max-width: 264px; + + &--blue { + grid-row: 2 / 4; + } + &--yellow { + grid-row: 1 / 3; + grid-column: 2 / 3; + } + &--green { + grid-row: 4 / 6; + } + &--red { + grid-row: 3 / 5; + grid-column: 2 / 3; + } + } + + &__num { + @include title; + border-radius: 23px; + padding: 2px 12px; + background-color: aqua; + color: blue; + font-size: 13px; + line-height: 20px; + } + + + &__service-list { + @include paragraph(left); + list-style-type: none; + font-size: 13px; + font-weight: 600; + line-height: 20px; + margin: 24px 0 32px; + } + + @each $name, $color in $services-colors { + &--#{$name} > &__num { + background-color: rgba( + red($color), + green($color), + blue($color), + $c-service-b-opacity, + ); + color: $color; + } + &--#{$name} > .learn-more-button > .learn-more-button__arrow { + background-color: $color; + } + } + +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..3b35f167c2 --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,81 @@ +.services { + max-width: $max-section-width; + position: relative; + display: grid; + --columns: 1; + grid-template-columns: repeat(var(--columns), 1fr); + + row-gap: 24px; + + margin-inline: var(--page-padding); + + &__content { + --content-columns: 1; + grid-column: span var(--content-columns); + display: grid; + grid-template-columns: repeat(var(--content-columns), 1fr); + row-gap: 24px; + + @include onTablet { + --content-columns: 2; + grid-template-rows: repeat(5, 1fr); + column-gap: 30px; + row-gap: 30px; + } + + @include onDesktop { + column-gap: 20px; + grid-column: 7 / -1; + } + + @include onBigDesktop { + column-gap: 30px; + } + } + + @include onTablet { + --columns: 2; + column-gap: 30px; + } + + @include onDesktop { + --columns: 12; + column-gap: 20px; + } + + @include onBigDesktop { + column-gap: 30px; + } + + &__head { + @include hoverDelay(transform, scale(1.2) translate(80px, 80px)); + align-self: flex-start; + grid-column: span 2; + cursor: default; + + display: flex; + flex-direction: column; + gap: 16px; + + margin-bottom: 24px; + + @include onTablet { + max-width: 264px; + grid-column: span 1; + position: relative; + top: 100px; + margin-top: -100px; + margin-bottom: 0; + } + + @include onDesktop { + grid-column: span 4; + max-width: none; + } + } + + &__description { + margin-top: 8px; + } + +} diff --git a/src/styles/blocks/slide.scss b/src/styles/blocks/slide.scss new file mode 100644 index 0000000000..d2abd6b5f3 --- /dev/null +++ b/src/styles/blocks/slide.scss @@ -0,0 +1,5 @@ +.slide { + @media (hover: hover) and (pointer: fine) { + scroll-snap-align: center; + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 0000000000..d2a76346dd --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,95 @@ +.slider { + display: flex; + flex-direction: column; + justify-content: flex-end; + padding: 24px 20px; + width: 100%; + height: 100%; + border-radius: 30px; + background-size: cover; + background-position: bottom; + transition: background-image 300ms; + touch-action: pan-y pinch-zoom; + + $column-gap: 30px; + + @include onDesktop { + background-position: center; + padding: 48px; + border-radius: 200px 0 0; + width: calc(50vw - 18.1px); + } + + @for $img-index from 1 through $slider-img-amount { + &--slide-num--#{$img-index} { + background-image: url(../images/slider/slide-img-#{$img-index}.jpg); + } + } + + &__content { + display: flex; + flex-direction: column; + + @include onDesktop { + flex-direction: row; + gap: 24px; + flex-wrap: wrap; + align-items: center; + } + } + + &__buttons { + display: flex; + gap: 16px; + } + + &__button { + background-repeat: no-repeat; + background-position: center; + background-color: $c-white; + border: none; + border-radius: 50%; + width: 32px; + height: 32px; + + &--left { + background-image: url(../images/slider/arrow.svg); + transform: rotateY(180deg); + @include hover(transform, scale(1.2) rotateY(180deg)); + } + + &--right { + background-image: url(../images/slider/arrow.svg); + @include hover(transform, scale(1.2)); + } + } + + &__text { + display: flex; + flex-direction: column; + padding-top: 18px; + gap: 8px; + + @include onDesktop { + padding-top: 0; + } + } + + &__img-name { + color: $c-white; + text-transform: uppercase; + font-family: $accent-font; + font-size: 13px; + font-weight: 700; + line-height: 20px; + letter-spacing: 3px; + } + + &__img-desc { + max-width: 264px; + color: $c-white; + font-family: $main-font; + font-size: 14px; + line-height: 20px; + } +} diff --git a/src/styles/blocks/small-p.scss b/src/styles/blocks/small-p.scss new file mode 100644 index 0000000000..440bc6ae1b --- /dev/null +++ b/src/styles/blocks/small-p.scss @@ -0,0 +1,8 @@ +.small-p { + @include paragraph(center); + font-size: 14px; + + &--left { + text-align: left; + } +} diff --git a/src/styles/blocks/strategic-agency.scss b/src/styles/blocks/strategic-agency.scss new file mode 100644 index 0000000000..8c2c00531c --- /dev/null +++ b/src/styles/blocks/strategic-agency.scss @@ -0,0 +1,34 @@ +.strategic-agency { + display: flex; + flex-direction: column; + justify-content: space-between; + + &__title { + @include title; + font-size: 52px; + line-height: 62px; + letter-spacing: -2px; + color: $c-white; + + @include onTablet { + font-size: 64px; + line-height: 68px; + } + } + + &__p { + max-width: 362px; + font-family: $main-font; + font-size: 18px; + line-height: 27px; + color: $c-white; + margin-top: 32px; + margin-bottom: 72px; + cursor: default; + + @include hoverDelay( + transform, + scale(1.2) translateY(16px) translateX(60px), + ); + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..9c73fdc3bc --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,26 @@ +.testimonials { + max-width: $max-section-width; + width: 100%; + display: flex; + flex-direction: column; + gap: 48px; + padding-inline: var(--page-padding); + + @include onTablet { + gap: 56px; + } + + @include onDesktop { + gap: 85px; + } + + &__header { + display: flex; + flex-direction: column; + gap: 16px; + + @include onTablet { + width: min-content; + } + } +} diff --git a/src/styles/blocks/who-we-are.scss b/src/styles/blocks/who-we-are.scss new file mode 100644 index 0000000000..c138a9add0 --- /dev/null +++ b/src/styles/blocks/who-we-are.scss @@ -0,0 +1,10 @@ +.who-we-are { + display: flex; + max-width: 754px; + flex-direction: column; + align-items: center; + gap: 24px; + margin-inline: var(--page-padding); + cursor: default; + @include hoverDelay(transform, scale(1.2)); +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..370aca816c 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,6 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import 'normalize'; -body { - background: $c-gray; -} +@import "blocks"; diff --git a/src/styles/normalize.scss b/src/styles/normalize.scss new file mode 100644 index 0000000000..a374c8fb4f --- /dev/null +++ b/src/styles/normalize.scss @@ -0,0 +1,42 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-weight: 400; + scroll-behavior: smooth; + scroll-snap-type: y mandatory; +} + +body { + background: $c-white; + scroll-behavior: smooth; + background-color: $c-main; +} + +a { + text-decoration: none; +} + +textarea, +input { + outline: 0; + border: none; + resize: none; +} + +:root { + --page-padding: 20px; + + @include onTablet { + --page-padding: 40px; + } + + @include onDesktop { + --page-padding: 54px; + } + + scrollbar-gutter: stable; +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..2cb555d58f 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,67 @@ @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; + @media (hover: hover) and (pointer: fine) { + transition: #{$_property} 0.3s; + &:hover { + #{$_property}: $_toValue; + } } } + +@mixin hoverDelay($_property, $_toValue) { + @media (hover: hover) and (pointer: fine) { + transition: #{$_property} 0.3s; + &.delayed-hover { + #{$_property}: $_toValue; + } + } +} + +@mixin onTablet { + @media (min-width: $min-tablet-width) { + @content; + } +} + +@mixin onDesktop { + @media (min-width: $min-desktop-width) { + @content; + } +} + +@mixin onBigDesktop { + @media (min-width: $min-big-desktop-width) { + @content; + } +} + +@mixin title { + font-family: $accent-font; + font-weight: 600; +} + +@mixin paragraph($_align) { + font-family: $main-font; + color: $c-paragraph; + text-align: $_align; + line-height: 150%; +} + +@mixin navlink { + font-family: $accent-font; + font-size: 13px; + font-weight: 700; + line-height: 20px; + text-transform: uppercase; + letter-spacing: 3px; + text-align: center; + color: $c-white; +} + +@mixin icon { + display: block; + width: $icon-size; + background-size: cover; + /* stylelint-disable */ + aspect-ratio: 1 / 1; + /* stylelint-enable */ +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..1b3e6bcfc9 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,36 @@ -$c-gray: #eee; +$min-tablet-width: 640px; +$min-desktop-width: 1024px; +$min-big-desktop-width: 1600px; + +// $page-padding-mobile: 20px; +// $page-padding-tablet: 40px; +// $page-padding-desktop: 54px; + +$max-section-width: 1146px; + +$c-white: #fff; +$c-blue: #008aff; +$c-salmon-pink: #ff9c8e; +$c-section-title: #253757; +$c-paragraph: #6c788b; +$c-main: #f2f9ff; +$c-category: #c0cdd7; + +$services-colors: ( + "blue" rgb(86, 204, 242), + "yellow" rgb(252, 201, 29), + "green" rgb(21, 216, 80), + "red" rgb(243, 99, 99), +); +$c-service-b-opacity: 0.1; + +$accent-font: "Poppins"; +$main-font: "Open Sans"; + +$slider-img-amount: 3; + +$icon-size: 24px; + +$learn-more_arrow-size: 40px; +$review-card__avatar-size: 196px; +$article__img-size: 166px;