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..185bb9a26b 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://AngelaStrechen.github.io/layout_dia/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/index.html b/index.html index 1eca937738..a9e3fe3c2f 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,686 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Dia + Air + + + + + + + - -

Dia

+ +
+
+
+
+ +
+ +
+ +
+ + + Hire us + +
+
+ + +
+
+
+
+

Strategic Agency

+

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

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

Intro

+

+ By the same illusion which lifts the +
+ horizon. +

+
+
+
+
+
+
+ +
+
+
+

Who we are

+

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

+
+ +
+
+

Our expertise

+
+
+ Branding +

Branding

+

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

+
+ +
+ Communication +

Communication

+

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

+
+ +
+ Strategy +

Strategy

+

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

+
+
+
+
+ +
+
+
+

Services

+

+ Air is a full service creative agency +

+

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

+

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

+
+ +
+
+ 001 +
+

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

+ + + Learn more + +
+ +
+
+ 002 +
+

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

+ + + Learn more + +
+ +
+
+ 003 +
+

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

+ + + Learn more + +
+ +
+
+ 004 +
+

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

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

testimonials

+

+ What + people say +

+ +
+
+
+
+
+ Tal Gilad +
+
+ +

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

+
+
+ +
+
+
+
+ Tal Gilad +
+
+ +

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

+

Azadeh Hawkins

+

+ Hawkins Consulting +

+
+
+ +
+
+
+
+ Tal Gilad +
+
+ +

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

+

Michel Grover

+

Hulu

+
+
+
+
+
+ +
+
+

Vision, Passion, Results

+

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

+ +
+
+
+
+ + diff --git a/package-lock.json b/package-lock.json index 1b7e1f550b..0d916d7b41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", @@ -1510,10 +1510,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", - "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index aebda906fc..ffc8ac6e62 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", diff --git a/src/images/expertise/branding.jpg b/src/images/expertise/branding.jpg new file mode 100644 index 0000000000..aad45ad4c2 Binary files /dev/null and b/src/images/expertise/branding.jpg differ diff --git a/src/images/expertise/communication.jpg b/src/images/expertise/communication.jpg new file mode 100644 index 0000000000..fdad645903 Binary files /dev/null and b/src/images/expertise/communication.jpg differ diff --git a/src/images/expertise/strategy.jpg b/src/images/expertise/strategy.jpg new file mode 100644 index 0000000000..ebe824729c Binary files /dev/null and b/src/images/expertise/strategy.jpg differ diff --git a/src/images/features/features-bg.jpg b/src/images/features/features-bg.jpg deleted file mode 100644 index 36b7a748d3..0000000000 Binary files a/src/images/features/features-bg.jpg and /dev/null differ diff --git a/src/images/features/features-item-icon-1.svg b/src/images/features/features-item-icon-1.svg deleted file mode 100644 index 2eb2ee14c3..0000000000 --- a/src/images/features/features-item-icon-1.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/images/features/features-item-icon-2.svg b/src/images/features/features-item-icon-2.svg deleted file mode 100644 index 194e788e11..0000000000 --- a/src/images/features/features-item-icon-2.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/images/features/features-item-icon-3.svg b/src/images/features/features-item-icon-3.svg deleted file mode 100644 index b278d8d16f..0000000000 --- a/src/images/features/features-item-icon-3.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/images/icons/Arrow.svg b/src/images/icons/Arrow.svg new file mode 100644 index 0000000000..14283291fa --- /dev/null +++ b/src/images/icons/Arrow.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/icons/facebook.svg b/src/images/icons/facebook.svg new file mode 100644 index 0000000000..ce2478fe7b --- /dev/null +++ b/src/images/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/favicon-dark.png b/src/images/icons/favicon-dark.png new file mode 100644 index 0000000000..474e501ab8 Binary files /dev/null and b/src/images/icons/favicon-dark.png differ diff --git a/src/images/icons/favicon-light.png b/src/images/icons/favicon-light.png new file mode 100644 index 0000000000..ce83bf86f5 Binary files /dev/null and b/src/images/icons/favicon-light.png differ diff --git a/src/images/icons/icon-close.svg b/src/images/icons/icon-close.svg new file mode 100644 index 0000000000..29f7735357 --- /dev/null +++ b/src/images/icons/icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/instagram.svg b/src/images/icons/instagram.svg new file mode 100644 index 0000000000..769fcd5763 --- /dev/null +++ b/src/images/icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/menu.svg b/src/images/icons/menu.svg new file mode 100644 index 0000000000..374d372c5a --- /dev/null +++ b/src/images/icons/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/quote.svg b/src/images/icons/quote.svg new file mode 100644 index 0000000000..14efa5df60 --- /dev/null +++ b/src/images/icons/quote.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/twitter.svg b/src/images/icons/twitter.svg new file mode 100644 index 0000000000..b27c847d77 --- /dev/null +++ b/src/images/icons/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo/Air.svg b/src/images/logo/Air.svg new file mode 100644 index 0000000000..70e90d9356 --- /dev/null +++ b/src/images/logo/Air.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/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-next.svg b/src/images/slider/arrow-next.svg new file mode 100644 index 0000000000..4319096bd3 --- /dev/null +++ b/src/images/slider/arrow-next.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/slider/arrow-prev.svg b/src/images/slider/arrow-prev.svg new file mode 100644 index 0000000000..e0e78c500f --- /dev/null +++ b/src/images/slider/arrow-prev.svg @@ -0,0 +1,3 @@ + + + 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/header-photo-2.jpg b/src/images/slider/header-photo-2.jpg new file mode 100644 index 0000000000..ee71ea372b Binary files /dev/null and b/src/images/slider/header-photo-2.jpg differ diff --git a/src/images/slider/header-photo-3.jpg b/src/images/slider/header-photo-3.jpg new file mode 100644 index 0000000000..7fe477cfd9 Binary files /dev/null and b/src/images/slider/header-photo-3.jpg differ diff --git a/src/images/slider/header-photo-4.jpg b/src/images/slider/header-photo-4.jpg new file mode 100644 index 0000000000..8f68354408 Binary files /dev/null and b/src/images/slider/header-photo-4.jpg differ diff --git a/src/images/slider/header-photo.jpg b/src/images/slider/header-photo.jpg new file mode 100644 index 0000000000..2579d74417 Binary files /dev/null and b/src/images/slider/header-photo.jpg differ diff --git a/src/images/slider/slide-img-1.jpg b/src/images/slider/slide-img-1.jpg deleted file mode 100644 index 98c4188508..0000000000 Binary files a/src/images/slider/slide-img-1.jpg and /dev/null differ diff --git a/src/images/sub-title/sub-title-icon-dark.svg b/src/images/sub-title/sub-title-icon-dark.svg deleted file mode 100644 index 9fcdfa10cd..0000000000 --- a/src/images/sub-title/sub-title-icon-dark.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/images/sub-title/sub-title-icon-light.svg b/src/images/sub-title/sub-title-icon-light.svg deleted file mode 100644 index 5ec041c15e..0000000000 --- a/src/images/sub-title/sub-title-icon-light.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/images/testimonial/photo-1.jpg b/src/images/testimonial/photo-1.jpg new file mode 100644 index 0000000000..98ba54b757 Binary files /dev/null and b/src/images/testimonial/photo-1.jpg differ diff --git a/src/images/testimonial/photo-2.jpg b/src/images/testimonial/photo-2.jpg new file mode 100644 index 0000000000..8277ff633b Binary files /dev/null and b/src/images/testimonial/photo-2.jpg differ diff --git a/src/images/testimonial/photo-3.jpg b/src/images/testimonial/photo-3.jpg new file mode 100644 index 0000000000..10f3809518 Binary files /dev/null and b/src/images/testimonial/photo-3.jpg differ diff --git a/src/images/testimonials/testimonial-ava-1.jpg b/src/images/testimonials/testimonial-ava-1.jpg deleted file mode 100644 index d487a51ddf..0000000000 Binary files a/src/images/testimonials/testimonial-ava-1.jpg and /dev/null differ diff --git a/src/images/testimonials/testimonial-ava-2.jpg b/src/images/testimonials/testimonial-ava-2.jpg deleted file mode 100644 index 04288940f3..0000000000 Binary files a/src/images/testimonials/testimonial-ava-2.jpg and /dev/null differ diff --git a/src/images/testimonials/testimonial-ava-3.jpg b/src/images/testimonials/testimonial-ava-3.jpg deleted file mode 100644 index 24c0f2b94b..0000000000 Binary files a/src/images/testimonials/testimonial-ava-3.jpg and /dev/null differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..c55d632531 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,57 @@ 'use strict'; +document.addEventListener('DOMContentLoaded', () => { + const sliderBg = document.querySelector('.header__slider-bg'); + const titleEl = document.querySelector('.header__slider-title'); + const textEl = document.querySelector('.header__slider-text'); + + const prevBtn = document.querySelector('.js-prev'); + const nextBtn = document.querySelector('.js-next'); + + const slides = [ + { + image: './src/images/slider/header-photo.jpg', + title: 'Intro', + text: 'By the same illusion which lifts the horizon.', + }, + { + image: './src/images/slider/header-photo-2.jpg', + title: 'Strategy', + text: 'We build strong ideas for strong brands.', + }, + { + image: './src/images/slider/header-photo-3.jpg', + title: 'Design', + text: 'Creative solutions that work in real life.', + }, + { + image: './src/images/slider/header-photo-4.jpg', + title: 'Design', + text: 'Creative solutions that work in real life.', + }, + ]; + + let currentIndex = 0; + + function renderSlide() { + const slide = slides[currentIndex]; + + sliderBg.style.backgroundImage = `url(${slide.image})`; + titleEl.textContent = slide.title; + textEl.textContent = slide.text; + } + + function nextSlide() { + currentIndex = (currentIndex + 1) % slides.length; + renderSlide(); + } + + function prevSlide() { + currentIndex = (currentIndex - 1 + slides.length) % slides.length; + renderSlide(); + } + + nextBtn.addEventListener('click', nextSlide); + prevBtn.addEventListener('click', prevSlide); + + renderSlide(); +}); diff --git "a/src/styles/_about-us \320\272\320\276\320\277\321\226\321\217.scss" "b/src/styles/_about-us \320\272\320\276\320\277\321\226\321\217.scss" new file mode 100644 index 0000000000..68019f0911 --- /dev/null +++ "b/src/styles/_about-us \320\272\320\276\320\277\321\226\321\217.scss" @@ -0,0 +1,74 @@ +.about-us { + @include page-grid; + + margin-top: 34px; + margin-bottom: 30px; + padding: 120px 20px; + + @include on-laptop { + margin-top: 30px; + padding: 148px 41px; + } + + @include on-laptop { + margin-top: 0; + padding-right: 154px; + padding-left: 100px; + } + + @include on-large-desktop { + display: block; + max-width: 754px; + margin: 0 auto; + padding-bottom: 178px; + } + + &__title { + grid-column: 1 / -1; + + margin-bottom: 24px; + + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 150%; + color: #253757; + text-align: center; + + @include on-laptop { + grid-column: 1 / -1; + margin-bottom: 16px; + } + + @include on-laptop { + grid-column: 2 / 12; + } + + @include on-large-desktop { + grid-column: 3 / 11; + } + } + + &__text { + grid-column: 1 / -1; + + font-family: 'Open Sans', sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 150%; + color: #6c788b; + text-align: center; + + @include on-laptop { + font-size: 24px; + } + + @include on-laptop { + grid-column: 2 / 12; + } + + @include on-large-desktop { + grid-column: 3 / 11; + } + } +} diff --git a/src/styles/_about-us.scss b/src/styles/_about-us.scss new file mode 100644 index 0000000000..61189c340d --- /dev/null +++ b/src/styles/_about-us.scss @@ -0,0 +1,51 @@ +.about-us { + display: block; + margin-top: 34px; + margin-bottom: 30px; + padding: 120px 20px; + + @include on-laptop { + margin-top: 30px; + padding: 148px 41px; + } + + @include on-desktop { + margin-top: 0; + padding-right: 154px; + padding-left: 154px; + } + + @include on-large-desktop { + max-width: 754px; + margin: 0 auto; + padding-bottom: 178px; + } + + &__title { + margin-bottom: 24px; + + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 150%; + color: #253757; + text-align: center; + + @include on-laptop { + margin-bottom: 16px; + } + } + + &__text { + font-family: 'Open Sans', sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 150%; + color: #6c788b; + text-align: center; + + @include on-laptop { + font-size: 24px; + } + } +} diff --git a/src/styles/_contacts-menu.scss b/src/styles/_contacts-menu.scss new file mode 100644 index 0000000000..7c30d0420d --- /dev/null +++ b/src/styles/_contacts-menu.scss @@ -0,0 +1,49 @@ +.contacts-menu { + @include on-laptop { + text-align: center; + } + + &__nav { + @include on-laptop { + display: block; + } + } + + &__link { + cursor: pointer; + color: $white; + text-decoration: none; + transition: $effectDuration; + + &:hover { + color: $blue; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 24px; + + margin: 0; + padding: 0; + + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 150%; + text-align: left; + text-transform: uppercase; + letter-spacing: 3px; + list-style: none; + + @include on-laptop { + flex-direction: row; + justify-content: space-between; + } + + @include on-desktop { + gap: 64px; + } + } +} diff --git a/src/styles/_contacts.scss b/src/styles/_contacts.scss new file mode 100644 index 0000000000..870fd7907c --- /dev/null +++ b/src/styles/_contacts.scss @@ -0,0 +1,271 @@ +.contacts { + padding: 72px 20px 80px; + border-radius: 30px 30px 0 0; + background-color: #2c2c2c; + + @include on-laptop { + padding: 184px 40px 80px; + } + + @include on-desktop { + padding: 184px 54px 80px; + + @include page-grid; + } + + @include on-large-desktop { + padding: 180px 227px 80px; + } + + @include on-xxl-desktop { + padding: 184px 707px 80px; + } + + &__form { + margin-bottom: 80px; + + @include on-laptop { + margin-bottom: 120px; + } + + @include on-desktop { + grid-column: 1 / 6; + } + } + + &__title { + margin-bottom: 48px; + + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 1.3; + color: #fff; + + @include on-laptop { + line-height: 1.5; + letter-spacing: 0.5px; + } + + @include on-desktop { + margin-bottom: 56px; + } + } + + &__title--2 { + line-height: 1.5; + + @include on-laptop { + margin-bottom: 56px; + } + + @include on-large-desktop { + margin-bottom: 60px; + } + } + + &__form-wrapper { + background-color: inherit; /* фон контейнера */ + + @include on-laptop { + @include page-grid; + } + + @include on-desktop { + display: block; + } + } + + &__field { + display: block; + width: 100%; + margin-bottom: 40px; + + @include on-laptop { + grid-column: 1 / 5; + margin-bottom: 48px; + } + + @include on-desktop { + margin-bottom: 48px; + } + } + + &__message { + display: block; + width: 100%; + margin-bottom: 56px; + + @include on-laptop { + grid-column: 1 / 5; + margin-bottom: 80px; + } + + @include on-large-desktop { + margin-bottom: 68px; + } + } + + &__input { + resize: none; + + box-sizing: border-box; + width: 100%; + padding: 0; + padding-bottom: 17px; + border: none; /* прибираємо стандартний бордер */ + border-bottom: 1px solid #fff; + + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 1; + color: #fff; + + background-color: inherit; /* фон як у контейнера */ + outline: none; + + transition: border-color $effectDuration; + + @include on-laptop { + grid-column: 1 / 4; + } + } + + &__input::placeholder { + color: rgba(255, 255, 255, 0.7); /* колір placeholder */ + } + + &__input:focus, + &__input:not(:placeholder-shown) { + border-bottom-color: #144ed4; /* колір нижньої лінії при фокусі або введенні тексту */ + outline: none; /* прибираємо синю рамку браузера */ + } + + &__input--message { + resize: vertical; /* дозволяємо вертикальне змінення розміру */ + } + + &__button { + height: 56px; + + @include on-laptop { + max-width: 264px; + margin: 0; + } + } + + &__info { + text-align: left; + + @include on-laptop { + grid-column: 7 / 12; + } + + @include on-large-desktop { + grid-column: 8 / 12; + } + } + + &__subtitle { + margin-bottom: 8px; + opacity: 0.5; + + &--spaced { + margin-bottom: 16px; + + @include on-laptop { + margin-bottom: 21px; + } + } + } + + &__text { + margin-bottom: 48px; + + font-family: 'Open Sans', sans-serif; + font-size: 24px; + font-weight: normal; + line-height: 1.5; + color: #fff; + + transition: color $effectDuration ease; + + @include on-large-desktop { + margin-bottom: 56px; + } + } + + &__link { + color: #fff; + text-decoration: none; + transition: color $effectDuration; + + &:hover { + color: #144ed4; + } + } + + &__socials { + display: flex; + gap: 32px; + align-items: center; + + margin-bottom: 80px; + + text-align: center; + + @include on-laptop { + margin-bottom: 139px; + } + + @include on-large-desktop { + gap: 42px; + margin-bottom: 190px; + } + } + + &__social { + display: inline-flex; + align-items: center; + justify-content: center; + + width: 32px; + height: 32px; + + color: $white; + text-decoration: none; + } + + &__icon { + cursor: pointer; + font-size: 24px; + color: $white; + transition: $effectDuration; + + &:hover { + color: $blue; + } + } + + &__menu { + @include on-laptop { + display: flex; + grid-column: 1 / -1; + flex-direction: row; + justify-content: space-between; + } + } + &__logo { + display: block; + margin-bottom: 48px; + + @include on-laptop { + margin-bottom: 24px; + } + + @include on-desktop { + margin-bottom: 0; + } + } +} diff --git a/src/styles/_expertise.scss b/src/styles/_expertise.scss new file mode 100644 index 0000000000..ea2d67ee5e --- /dev/null +++ b/src/styles/_expertise.scss @@ -0,0 +1,110 @@ +.expertise { + overflow: hidden; + + box-sizing: border-box; + margin-top: -30px; + padding: 72px 0; + border-radius: 30px; + + background-color: #fff; + + @include on-laptop { + padding: 128px 0; + } + + @include on-laptop { + padding: 128px 0 134px; + } + + @include on-large-desktop { + padding-bottom: 153px; + } + + &__title { + margin-bottom: 56px; + + font-family: Poppins, sans-serif; + font-size: 44px; + font-weight: 600; + line-height: 120%; + text-align: center; + + @include on-laptop { + margin-bottom: 64px; + font-size: 52px; + line-height: 150%; + } + } + + &__list { + @include on-laptop { + display: flex; + flex-direction: row; + gap: 137px; + } + } + + &__card { + display: flex; + flex-direction: column; + align-items: center; + + @include on-laptop { + grid-column: 2 / 6; + } + } + + &__card:not(:last-child) { + margin-bottom: 56px; + + @include on-laptop { + margin-bottom: 72px; + } + + @include on-laptop { + margin-bottom: 0; + } + } + + &__card-photo { + cursor: pointer; + + width: 166px; + height: 166px; + margin-bottom: 32px; + + transition: transform $effectDuration ease; + + &:hover { + transform: scale(1.05); + } + + @include on-laptop { + margin-bottom: 40px; + } + } + + &__card-title { + margin-bottom: 16px; + + font-family: Poppins, sans-serif; + font-size: 20px; + font-weight: 600; + line-height: 140%; + color: #253757; + text-align: center; + } + + &__card-text { + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 150%; + color: #6c788b; + text-align: center; + + @include on-laptop { + margin-bottom: 0; + } + } +} diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd54008..5cfc5b4d05 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,6 @@ @font-face { font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; + src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); } diff --git a/src/styles/_header-menu.scss b/src/styles/_header-menu.scss new file mode 100644 index 0000000000..5556681011 --- /dev/null +++ b/src/styles/_header-menu.scss @@ -0,0 +1,50 @@ +.header-menu { + @include on-laptop { + text-align: center; + } + + &__nav { + display: none; + margin-bottom: 40px; + + @include on-laptop { + display: block; + margin-bottom: 0; + } + } + + &__link { + cursor: pointer; + color: $white; + text-decoration: none; + transition: $effectDuration; + + &:hover { + color: $blue; + } + } + + &__list { + display: flex; + gap: 48px; + align-items: center; + justify-content: space-between; + + margin: 0; + padding: 0; + + font-size: 13px; + font-weight: 700; + line-height: 150%; + text-align: center; + text-transform: uppercase; + letter-spacing: 3px; + list-style: none; + + @include on-laptop { + gap: 30px; + font-size: 12px; + line-height: 120%; + } + } +} diff --git a/src/styles/_header.scss b/src/styles/_header.scss new file mode 100644 index 0000000000..4128e1313e --- /dev/null +++ b/src/styles/_header.scss @@ -0,0 +1,327 @@ +.header { + box-sizing: border-box; + + font-family: Poppins, sans-serif; + font-weight: 400; + font-style: normal; + line-height: 100%; + color: $white; + text-align: left; + letter-spacing: 0; + + background-color: #2c2c2c; + + @include on-laptop { + overflow: hidden; + margin-bottom: 20px; + border-bottom-right-radius: 30px; + border-bottom-left-radius: 30px; + } + + &__content { + @include on-laptop { + height: 100px; + } + + @include on-small-desktop { + height: 140px; + } + } + + &-menu { + letter-spacing: 3px; + } + + &__titles { + grid-column: 1 / -1; // на мобілці на всю ширину + margin-bottom: 48px; + padding: 0 20px; + + @include on-laptop { + margin-bottom: 147px; + padding: 0 41px; + } + + @include on-small-desktop { + grid-column: 1 / 6; + margin-bottom: 205px; + margin-left: 54px; + padding: 0; + } + + @include on-large-desktop { + min-width: 362px; + margin-right: 324px; + margin-left: 227px; + } + + @include on-xxl-desktop { + margin-left: 707px; + } + } + + &__title { + grid-column: 1 /-1; + + margin-bottom: 32px; + + font-family: Poppins, sans-serif; + font-size: 52px; + font-weight: 600; + line-height: 1.2; + letter-spacing: -2px; + + @include on-laptop { + margin-bottom: 24px; + font-size: 64px; + line-height: 68px; + } + + @include on-laptop { + margin-top: 120px; + margin-bottom: 32px; + } + } + + &__text { + margin-bottom: 72px; + font-family: 'Open Sans', sans-serif; + font-size: 18px; + line-height: 1.5; + + @include on-laptop { + grid-column: 1 / 5; + margin-bottom: 56px; + } + + @include on-laptop { + margin-bottom: 83px; + } + } + + &__button { + max-width: 264px; + margin: 0; + } + + &__list { + display: flex; + flex-direction: column; + gap: 32px; + + margin: 0; + padding: 0; + + list-style: none; + + @include on-laptop { + display: flex; + flex-direction: row; + gap: 48px; + align-items: center; + justify-content: space-between; + + margin: 0; + padding: 0; + + font-size: 13px; + font-weight: 700; + line-height: 1.5; + text-align: center; + text-transform: uppercase; + letter-spacing: 3px; + list-style: none; + } + } + + &__link { + position: relative; + + font-size: 22px; + line-height: 22px; + color: #1d1d1d; + text-decoration: none; + letter-spacing: 2px; + + @include on-laptop { + color: $white; + text-decoration: none; + letter-spacing: 3px; + } + + &::after { + content: ''; + + position: absolute; + bottom: -8px; + transform-origin: left; + transform: scale(0); + + display: block; + + width: 100%; + height: 1px; + + background-color: #1d1d1d; + + transition: transform $effectDuration; + } + + &:hover::after { + transform: scale(1); + } + } + + &__bottom { + @include page-grid; + + align-items: stretch; + padding-top: 50px; + + @include on-laptop { + padding-top: 56px; + } + + @include on-laptop { + padding-top: 0; + } + + @include on-large-desktop { + display: flex; + gap: 0; + } + } + + &__slider { + grid-column: 1 / -1; // на мобілці на всю ширину + + @include on-laptop { + grid-column: 1 / -1; + } + + @include on-laptop { + grid-column: 7 / 13; + } + + @include on-large-desktop { + width: 100%; + } + } + + &__slider-bg { + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: flex-end; + + box-sizing: border-box; + padding: 250px 20px 24px; + border-radius: 30px; + + background-image: url(../images/slider/header-photo.jpg); + background-position: center; + background-size: cover; + + @include on-laptop { + padding-top: 248px; + padding-bottom: 32px; + padding-left: 41px; + } + + @include on-laptop { + height: 100%; + padding: 48px 78px; + border-radius: 0; + border-top-left-radius: 30px; + border-bottom-right-radius: 30px; + } + + @include on-large-desktop { + padding-left: 50px; + } + } + + &__slider-container { + display: flex; + flex-direction: column; + justify-content: flex-end; + + @include on-laptop { + flex-direction: row; + gap: 24px; + align-items: center; + justify-content: flex-start; + + height: 68px; + } + } + + &__slider-arrows { + display: flex; + flex-direction: row; + gap: 16px; + align-items: center; + justify-content: left; + + margin-bottom: 16px; + + @include on-laptop { + margin-bottom: 0; + } + } + + &__slider-title { + margin-bottom: 8px; + + font-size: 13px; + font-weight: 700; + line-height: 1; + text-transform: uppercase; + letter-spacing: 3px; + } + + &__slider-text { + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 140%; + } +} + +.circle-arrow { + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + width: 32px; + height: 32px; + border: none; + border-radius: 50%; + + background: #fff; + + transition: all $effectDuration ease; + + &:hover { + transform: scale(1.1); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + } + + &:active { + transform: scale(0.95); + background-color: #1542b8; + } + + &:focus-visible { + outline: none; + box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2); + } + + &__icon { + display: block; + width: 5.56px; + height: 9px; + } +} diff --git a/src/styles/_menu.scss b/src/styles/_menu.scss new file mode 100644 index 0000000000..898222eb1d --- /dev/null +++ b/src/styles/_menu.scss @@ -0,0 +1,34 @@ +.menu { + @include on-laptop { + text-align: center; + } + + &__nav { + @include on-laptop { + display: block; + } + } + + &__link { + color: $white; + text-decoration: none; + } + + &__list { + display: flex; + gap: 48px; + align-items: center; + justify-content: space-between; + + margin: 0; + padding: 0; + + font-size: 13px; + font-weight: 700; + line-height: 150%; + text-align: center; + text-transform: uppercase; + letter-spacing: 3px; + list-style: none; + } +} diff --git a/src/styles/_nav.scss b/src/styles/_nav.scss new file mode 100644 index 0000000000..b2b67076f0 --- /dev/null +++ b/src/styles/_nav.scss @@ -0,0 +1,68 @@ +.nav { + &__list { + display: flex; + flex-direction: column; + gap: 32px; + + margin: 0; + padding: 0; + + list-style: none; + + @include on-laptop { + display: flex; + flex-direction: row; + gap: 48px; + align-items: center; + justify-content: space-between; + + margin: 0; + padding: 0; + + font-size: 13px; + font-weight: 700; + line-height: 150%; + text-align: center; + text-transform: uppercase; + letter-spacing: 3px; + list-style: none; + } + } + + &__link { + position: relative; + + font-size: 22px; + line-height: 22px; + color: #1d1d1d; + text-decoration: none; + letter-spacing: 2px; + + @include on-laptop { + color: $white; + text-decoration: none; + } + + &::after { + content: ''; + + position: absolute; + bottom: -8px; + transform-origin: left; + transform: scale(0); + + display: block; + + width: 100%; + height: 1px; + + background-color: #1d1d1d; + + transition: transform $effectDuration; + } + + &:hover::after { + transform: scale(1); + } + } +} diff --git a/src/styles/_page.scss b/src/styles/_page.scss new file mode 100644 index 0000000000..ca5e84d5c9 --- /dev/null +++ b/src/styles/_page.scss @@ -0,0 +1,197 @@ +html { + scroll-behavior: smooth; +} + +.page { + scroll-behavior: smooth; + overflow-x: hidden; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__body { + box-sizing: border-box; + margin: 0; + background: $c-gray; + } + + &__menu { + pointer-events: none; + + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translateX(-100%); + + opacity: 0; + background-color: #c2c2c2; + + transition: all $effectDuration; + + &:target { + pointer-events: all; + transform: translateX(0); + opacity: 1; + } + } +} + +.container { + padding-inline: 20px; + + @include on-laptop { + padding-inline: 41px; + } + + @include on-laptop { + padding-inline: 54px; + } + + @include on-large-desktop { + padding-inline: 227px; + } + + @include on-xxl-desktop { + padding-inline: 707px; + } +} + +.menu { + overflow: auto; + + box-sizing: border-box; + height: 100vh; + + font-weight: 600; + text-transform: uppercase; + + &__lists { + text-align: center; + } + + &__top { + position: sticky; + z-index: 1; + top: 0; + + margin-bottom: 48px; + + background-color: #c2c2c2; + } +} + +.icon { + width: 24px; + height: 24px; + background-position: center; + background-size: cover; + + &--menu { + background-image: url(../images/icons/menu.svg); + + @include on-laptop { + display: none; + } + } + + &--close { + background-image: url(../images/icons/icon-close.svg); + } +} + +.title { + margin: 0; +} + +.text { + margin: 0; +} + +.subtitle { + margin: 0; + margin-bottom: 16px; + + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 100%; + color: #c0cdd7; + text-align: left; + text-transform: uppercase; + letter-spacing: 3px; +} + +.button { + cursor: pointer; + + display: block; + grid-column: 1 / -1; // на мобілці на всю ширину + + width: 100%; // ← дозволяє розтягуватися в гріді + max-width: 280px; + height: 50px; + margin: 0 auto; + border: 0; + border-radius: 8px; + + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 100%; + color: $white; + text-align: center; + + background-color: $blue; + + transition: all $effectDuration ease; + + &:hover { + background-color: #1a4ed8; + } + + &:active { + transform: scale(0.97); + background-color: #1542b8; + } + + &:focus { + outline: none; + box-shadow: 0 0 0 3px rgba(32, 96, 246, 0.4); + } + + @include on-laptop { + grid-column: 1 / 5; + } + + @include on-large-desktop { + grid-column: 1 / 4; + } +} + +.main { + margin-top: -30px; + background-color: #f2f6fa; + + &__content { + display: grid; + } + + @include on-laptop { + margin-top: -20px; + } +} + +.services { + padding: 126px 0; + + @include on-laptop { + padding-top: 155px; + padding-bottom: 154px; + } +} + +.footer { + background-color: #fff; +} diff --git a/src/styles/_results.scss b/src/styles/_results.scss new file mode 100644 index 0000000000..3b7af16a39 --- /dev/null +++ b/src/styles/_results.scss @@ -0,0 +1,322 @@ +.results { + position: relative; + + padding: 72px 20px; + + background-color: $white; + background-image: url('../images/Shapes.png'); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @include on-laptop { + overflow: hidden; + padding: 200px 0; + } + + @include on-laptop { + padding: 205px 0; + } + + &__wrapper { + position: relative; + z-index: 1; + + @include on-laptop { + @include page-grid; + } + } + + &__title { + margin-bottom: 24px; + + font-family: Poppins, sans-serif; + font-size: 44px; + font-weight: 600; + line-height: 120%; + text-align: center; + + @include on-laptop { + grid-column: 2 / 6; + font-size: 52px; + } + + @include on-desktop { + grid-column: 3 / 11; + margin-bottom: 33px; + } + } + + &__text { + grid-column: 1 / -1; + + margin-bottom: 56px; + + font-family: 'Open Sans', sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 150%; + color: #6c788b; + text-align: center; + + @include on-laptop { + margin-bottom: 61px; + padding: 0 30px; + font-size: 24px; + } + + @include on-desktop { + margin-bottom: 64px; + padding: 0 135px; + } + + @include on-large-desktop { + padding: 0 423px; + } + + @include on-xxl-desktop { + padding: 0 903px; + } + } + + &__button { + @include on-laptop { + grid-column: 2 / 6; + max-width: 264px; + height: 56px; + } + + @include on-desktop { + grid-column: 5 / 9; + } + } +} + +.rectangle { + @include on-laptop { + position: absolute; + transform: rotate(115deg); + + box-sizing: border-box; + border-color: $blue; + border-style: solid; + + opacity: 0.5; + + &--1, + &--2, + &--3 { + width: 40px; + height: 16px; + border-width: 3px; + border-radius: 6px; + + @include on-large-desktop { + width: 45px; + height: 18px; + } + } + + &--1 { + bottom: 259px; + left: 120px; + + @include on-laptop { + bottom: 234px; + left: 215px; + } + + @include on-large-desktop { + bottom: 200px; + left: 476px; + } + } + + &--2 { + top: 300px; + right: 152px; + + @include on-laptop { + top: 491px; + right: 294px; + } + + @include on-large-desktop { + top: 525px; + right: 547px; + } + } + + &--3 { + top: 112px; + left: 102px; + + @include on-laptop { + top: 100px; + left: 183px; + } + + @include on-large-desktop { + top: 89px; + left: 442px; + } + } + + &--4, + &--5 { + width: 127px; + height: 56px; + border-width: 5px; + border-radius: 12px; + + @include on-laptop { + height: 50px; + } + + @include on-large-desktop { + width: 143px; + height: 57px; + } + } + + &--4 { + bottom: 355px; + left: -70px; + + @include on-laptop { + bottom: 333px; + left: 16px; + } + + @include on-large-desktop { + bottom: 316px; + left: 253px; + } + } + + &--5 { + top: 105px; + right: -74px; + + @include on-laptop { + top: 178px; + right: -17px; + } + + @include on-large-desktop { + top: 174px; + right: 201px; + } + } + + &--6, + &--7 { + width: 76px; + height: 30px; + border-width: 3px; + border-radius: 12px; + + @include on-large-desktop { + width: 86px; + height: 34px; + } + } + + &--6 { + right: 20px; + bottom: 272px; + + @include on-laptop { + right: 77px; + bottom: 280px; + } + + @include on-large-desktop { + right: 57px; + bottom: 359px; + } + } + + &--7 { + top: 146px; + left: 124px; + + @include on-laptop { + top: 108px; + left: -10px; + } + + @include on-large-desktop { + top: 98px; + left: 221px; + } + } + + &--8 { + @include on-laptop { + right: -83px; + bottom: 210px; + + width: 137px; + height: 54px; + border-width: 5px; + border-radius: 12px; + } + + @include on-large-desktop { + right: 126px; + bottom: 175px; + width: 154px; + height: 61px; + } + } + + &--9 { + @include on-large-desktop { + right: 306px; + bottom: 255px; + + width: 86px; + height: 34px; + border-width: 3px; + border-radius: 12px; + } + } + + &--10 { + @include on-large-desktop { + bottom: 111px; + left: 121px; + + width: 94px; + height: 37px; + border-width: 5px; + border-radius: 12px; + } + } + + &--11 { + @include on-large-desktop { + bottom: 283px; + left: 73px; + + width: 67px; + height: 27px; + border-width: 5px; + border-radius: 12px; + } + } + + &--12 { + @include on-large-desktop { + top: 126px; + right: 105px; + + width: 54px; + height: 21px; + border-width: 3px; + border-radius: 8px; + } + } + } +} diff --git a/src/styles/_services.scss b/src/styles/_services.scss new file mode 100644 index 0000000000..9dfa49d39e --- /dev/null +++ b/src/styles/_services.scss @@ -0,0 +1,210 @@ +.service { + overflow: hidden; + + box-sizing: border-box; + max-width: 280px; + height: 264px; + margin: 0 auto; + padding: 32px; + border-radius: 16px; + + background-color: $white; + box-shadow: 0 9px 18px #25293108; + + transition: transform $effectDuration; + + &:hover { + transform: scale(1.05); + } + + @include on-laptop { + margin-right: 0; + margin-left: 0; + padding: 31px; + } + + &__container { + @include on-laptop { + @include page-grid; + } + } + + &__wrapper { + margin-bottom: 48px; + + @include on-laptop { + grid-column: 1 / 4; + margin-bottom: 55px; + } + + @include on-laptop { + grid-column: 1 / 5; + margin-top: 103px; + } + } + + &--1, + &--2 { + margin-bottom: 24px; + + @include on-tablet { + margin-bottom: 30px; + } + + @include on-small-desktop { + margin-bottom: 20px; + } + + @include on-large-desktop { + margin-bottom: 30px; + } + } + + &--1 { + @include on-laptop { + margin-top: 139px; + } + + @include on-large-desktop { + margin-top: 129px; + } + } + + &--2 { + @include on-laptop { + margin-top: -130px; + } + + @include on-laptop { + margin-top: 0; + } + } + + &--3 { + margin-bottom: 24px; + + @include on-laptop { + margin-bottom: 0; + } + } + + &--1, + &--3 { + @include on-laptop { + grid-column: 1 / 4; + } + + @include on-laptop { + grid-column: 7 / 10; + } + } + + &--2, + &--4 { + @include on-laptop { + grid-column: 4 / 7; + } + + @include on-laptop { + grid-column: 10 / 13; + } + } + + &--4 { + @include on-laptop { + margin-top: -132px; + } + + @include on-laptop { + margin-top: -139px; + } + } + + &__title { + margin-bottom: 24px; + + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 130%; + color: #253757; + vertical-align: middle; + } + + &__text { + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 150%; + color: #6c788b; + + @include on-laptop { + margin-right: 2px; + } + + &:not(:last-child) { + margin-bottom: 24px; + } + } + + &__number { + display: flex; + align-items: center; + justify-content: center; + + width: 22px; + height: 20px; + margin-bottom: 26px; + padding: 2px 12px; + border-radius: 23px; + + background-color: rgba(32, 96, 246, 0.1); + } + + &__number-value { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 1; + color: $blue; + text-transform: uppercase; + } + + &__info { + margin-bottom: 32px; + + font-family: 'Open Sans', sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 150%; + color: #6c788b; + } + + &__link { + cursor: pointer; + + display: flex; + gap: 16px; + align-items: center; + + text-decoration: none; + + &-text { + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 100%; + color: #334563; + text-align: center; + } + } + + &__icon { + width: 40px; + height: 40px; + + background-image: url(../images/icons/Arrow.svg); + background-position: center; + background-size: cover; + } +} diff --git a/src/styles/_testimonial-image.scss b/src/styles/_testimonial-image.scss new file mode 100644 index 0000000000..31a9861f49 --- /dev/null +++ b/src/styles/_testimonial-image.scss @@ -0,0 +1,68 @@ +.bg-square { + position: absolute; + z-index: 1; + transform: rotate(120deg); + + width: 109px; + height: 44px; + border-radius: 12px; + + background-color: $blue; + + @include on-laptop { + width: 139px; + height: 56px; + } + + @include on-laptop { + width: 109px; + height: 44px; + } + + @include on-large-desktop { + width: 139px; + height: 56px; + } +} + +.square-1 { + top: 37px; + left: 7px; + + @include on-laptop { + top: 47px; + left: 8px; + } + + @include on-laptop { + top: 36px; + } + + @include on-large-desktop { + top: 46px; + } +} + +.square-2 { + top: 109px; + right: 4px; + + @include on-laptop { + top: 141px; + right: 6px; + } + + @include on-laptop { + top: 108px; + } + + @include on-large-desktop { + top: 139px; + } +} + +.decor-quote { + width: 21px; + height: 21px; + margin-bottom: 6px; +} diff --git a/src/styles/_testimonials.scss b/src/styles/_testimonials.scss new file mode 100644 index 0000000000..fd77f6bf9f --- /dev/null +++ b/src/styles/_testimonials.scss @@ -0,0 +1,208 @@ +.testimonial { + cursor: pointer; + + overflow: hidden; + + box-sizing: border-box; + max-width: 362px; + margin: 0 auto; + padding: 35px 37px; + border-radius: 16px; + + background-color: $white; + box-shadow: 0 9px 18px #25293108; + + @include on-laptop { + padding-right: 98px; + padding-left: 98px; + } + + @include on-small-desktop { + min-width: 292px; + min-height: 456px; + padding-right: 48px; + padding-left: 48px; + } + + @include on-large-desktop { + min-width: 362px; + padding-right: 56px; + padding-left: 56px; + } + + &__container { + @include on-laptop { + @include page-grid; + } + } + + &__subtitle { + @include on-laptop { + grid-column: 1 / 3; + } + } + + &__title { + margin-bottom: 48px; + + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 150%; + color: #253757; + white-space: nowrap; // мобілка-щдин рядок + + @include on-laptop { + grid-column: 1 / -1; + margin-bottom: 56px; + white-space: normal; + + span { + display: block; // перенос після першого слова + } + } + + @include on-laptop { + grid-column: 1 / 4; + margin-bottom: 85px; + } + } + + &__image { + position: relative; + + width: 196px; + height: 196px; + margin: 0 auto; + margin-bottom: 24px; + + @include on-laptop { + width: 250px; + height: 250px; + } + + @include on-laptop { + width: 196px; + height: 196px; + } + + @include on-large-desktop { + width: 250px; + height: 250px; + } + } + + &__photo { + position: relative; + z-index: 2; + top: 40px; + + display: block; + + width: 110px; + height: 110px; + margin: 0 auto; + border-radius: 50%; + + object-fit: cover; + + @include on-laptop { + top: 52px; + width: 140px; + height: 140px; + } + + @include on-laptop { + top: 39px; + width: 110px; + height: 110px; + } + + @include on-large-desktop { + top: 52px; + width: 140px; + height: 140px; + } + } + + @include on-laptop { + margin-right: 0; + margin-left: 0; + } + + &__info { + text-align: center; + } + + &__wrapper { + display: flex; + flex-direction: column; + gap: 24px; + align-items: center; + + margin-bottom: 120px; + + @include on-laptop { + grid-column: 1 / -1; + gap: 30px; + margin: 0 auto; + margin-bottom: 148px; + } + + @include on-small-desktop { + display: grid; + flex-direction: row; + margin-bottom: 190px; + } + + @include on-large-desktop { + margin-bottom: 148px; + } + } + + &--1 { + @include on-laptop { + grid-column: 1 / 5; + } + } + + &--2 { + @include on-laptop { + grid-column: 5 / 9; + } + } + + &--3 { + @include on-laptop { + grid-column: 9 / 13; + } + } + + &__text { + margin-bottom: 16px; + + font-family: 'Open Sans', sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 150%; + color: #6c788b; + } + + &__name { + margin-bottom: 9px; + + font-family: 'Open Sans', sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 150%; + + @include on-laptop { + margin-bottom: 9px; + } + } + + &__position { + margin: 0; + text-align: center; + } +} diff --git a/src/styles/_top-bar.scss b/src/styles/_top-bar.scss new file mode 100644 index 0000000000..a643678cc4 --- /dev/null +++ b/src/styles/_top-bar.scss @@ -0,0 +1,56 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 20px; + + @include on-laptop { + padding-top: 20px; + } + + @include on-laptop { + padding-top: 30px; + } + + @include on-small-desktop { + padding-top: 48px; + } + + &__icons { + display: flex; + align-items: center; + justify-content: space-between; + + width: 100%; + padding-left: 32px; + + @include on-laptop { + width: auto; + margin: 0; + padding-top: 8px; + } + } + + &__link { + padding-bottom: 8px; + border-bottom: 2px solid $blue; + + font-size: 13px; + font-weight: 700; + line-height: 150%; + color: $white; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 3px; + } + + &__logo { + display: flex; + + @include hover(transform, scale(1.2)); + + @include on-laptop { + margin-right: 24px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..e274536aa8 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,19 @@ -@import 'utils'; +@import 'utils/mixins'; +@import 'utils/extends'; +@import 'utils/vars'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import 'page'; +@import 'header'; +@import 'menu'; +@import 'header-menu'; +@import 'top-bar'; +@import 'nav'; +@import 'about-us'; +@import 'expertise'; +@import 'services'; +@import 'testimonials'; +@import 'testimonial-image'; +@import 'results'; +@import 'contacts'; +@import 'contacts-menu'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..a0efaceada 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,80 @@ @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} $effectDuration; &:hover { #{$_property}: $_toValue; } } + +@mixin on-tablet() { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-laptop() { + @media (min-width: $laptop-min-width) { + @content; + } +} + +@mixin on-desktop() { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-small-desktop() { + @media (min-width: $small-desktop-min-width) { + @content; + } +} + +@mixin on-large-desktop() { + @media (min-width: $large-desktop-min-width) { + @content; + } +} + +@mixin on-xxl-desktop() { + @media (min-width: $xxl-desktop-min-width) { + @content; + } +} + +@mixin page-grid() { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-laptop { + --columns: 6; + + column-gap: 30px; + } + + @include on-laptop { + // --columns: 12; + + // column-gap: 15px; + } + + @include on-desktop { + --columns: 12; + + column-gap: 20px; + } + + @include on-large-desktop { + --columns: 12; + + column-gap: 30px; + } + + @include on-xxl-desktop { + --columns: 12; + + column-gap: 30px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..98d311702f 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,10 @@ $c-gray: #eee; +$white: #fff; +$blue: #2060f6; +$tablet-min-width: 640px; +$laptop-min-width: 992px; +$small-desktop-min-width: 1024px; +$desktop-min-width: 1280px; +$large-desktop-min-width: 1600px; +$xxl-desktop-min-width: 2560px; +$effectDuration: 0.3s;