From 674f4600e72c1a86d8b1dae79fbb47fcb29917cd Mon Sep 17 00:00:00 2001 From: Evgen Gulevaty Date: Sat, 9 May 2026 14:22:46 +0300 Subject: [PATCH 1/5] add solution --- .github/workflows/test.yml-template | 29 + README.md | 2 +- index.html | 289 +++++- package-lock.json | 23 +- package.json | 2 +- src/images/Arrow.svg | 11 + src/images/Arrow_aqua.svg | 11 + src/images/Arrow_green.svg | 11 + src/images/Arrow_red.svg | 11 + src/images/Arrow_yellow.svg | 11 + src/images/bg_shapes.png | Bin 0 -> 36664 bytes src/images/facebook.svg | 10 + src/images/instagram.svg | 3 + src/images/quote_aqua.svg | 3 + src/images/quote_red.svg | 3 + src/images/quote_yellow.svg | 3 + src/images/twitter.svg | 3 + src/scripts/main.js | 51 ++ src/styles/main.scss | 1302 +++++++++++++++++++++++++++ 19 files changed, 1755 insertions(+), 23 deletions(-) create mode 100644 .github/workflows/test.yml-template create mode 100644 src/images/Arrow.svg create mode 100644 src/images/Arrow_aqua.svg create mode 100644 src/images/Arrow_green.svg create mode 100644 src/images/Arrow_red.svg create mode 100644 src/images/Arrow_yellow.svg create mode 100644 src/images/bg_shapes.png create mode 100644 src/images/facebook.svg create mode 100644 src/images/instagram.svg create mode 100644 src/images/quote_aqua.svg create mode 100644 src/images/quote_red.svg create mode 100644 src/images/quote_yellow.svg create mode 100644 src/images/twitter.svg 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..8652917a35 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://Evg3n22.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..4ebfb4cd48 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,297 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Dia + Air -

Dia

- +
+ + +
+
+ + +
+ + + +
+
+ +
+ about us + services + work + contact us +
+ +
hire us
+
+ +
+
+
Strategic Agency
+
We believe in the power of bold ideas that
can solve business challenges.
+ +
+
+
+
+ + + + + +
+ Architecture +
+ + +
+ City +
+ + +
+ Nature +
+ +
+ + +
+
+ + +
+ +
+
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
+
+ We create additional value for companies, products, services as well as verbal and visual ways to deliver it to the audience. +
+
+
+ +
Communication
+
+ We strive to create communications that can increase media performance. We use everything — words, meanings, stories, art, movies. +
+
+
+ +
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
+
+ Сontent Production
+ Graphic Design
+ Video Production
+ Post Production +
+
+ + Learn more +
+
+ +
+
002
+
+ Brand Development
+ Copywriting
+ Logo & Webite Design
+ Packaging +
+
+ + Learn more +
+
+ +
+
003
+
+ Digital Communications
+ Influencer Marketing
+ Product Placements
+ Strategic Partnerships +
+
+ + Learn more +
+
+ +
+
004
+
+ Marketing Strategy
+ Email Marketing
+ Paid Advertising
+ Blog Content & SEO +
+
+ + Learn more +
+
+
+ +
+
Testimonials
+
+ What
+ people say +
+
+
+
+ +
+ +
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
+
+
+
+ +
+ +
AIR’s ideas are refreshing and out of the box. Authentic team that focuses on the important path of the brand.
+
Azadeh Hawkins
+
Hawkins Consulting
+
+
+
+ +
+ +
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.
+ +
+ +
+
+
+
Send us a message
+
+ +
+ +
+
+ +
+
+ +
+
+
Contact us
+
+
+ Call us +
+ 654 321 987 +
+
+
+ Visit us +
+ 2905 West Drive, Buffalo Grove +
+
+
Our socials
+
+ facebook_icon + twitter_icon + instagram_icon +
+
+
+
+
+ +
+ +
+ about us + services + work + contact us +
+
+ + diff --git a/package-lock.json b/package-lock.json index 1b7e1f550b..37ec2f69ee 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", @@ -8721,20 +8722,6 @@ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true }, - "node_modules/yaml": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz", - "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==", - "dev": true, - "optional": true, - "peer": true, - "bin": { - "yaml": "bin.mjs" - }, - "engines": { - "node": ">= 14.6" - } - }, "node_modules/yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", 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/Arrow.svg b/src/images/Arrow.svg new file mode 100644 index 0000000000..cf83738e1d --- /dev/null +++ b/src/images/Arrow.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/Arrow_aqua.svg b/src/images/Arrow_aqua.svg new file mode 100644 index 0000000000..b2434bccda --- /dev/null +++ b/src/images/Arrow_aqua.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/Arrow_green.svg b/src/images/Arrow_green.svg new file mode 100644 index 0000000000..108e861db5 --- /dev/null +++ b/src/images/Arrow_green.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/Arrow_red.svg b/src/images/Arrow_red.svg new file mode 100644 index 0000000000..a23bdb6006 --- /dev/null +++ b/src/images/Arrow_red.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/Arrow_yellow.svg b/src/images/Arrow_yellow.svg new file mode 100644 index 0000000000..f81d6cef5a --- /dev/null +++ b/src/images/Arrow_yellow.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/bg_shapes.png b/src/images/bg_shapes.png new file mode 100644 index 0000000000000000000000000000000000000000..ac0b5ad3f7c50651beee8fbc002ca4b30cd7402c GIT binary patch literal 36664 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 + + + + + + + + + diff --git a/src/images/instagram.svg b/src/images/instagram.svg new file mode 100644 index 0000000000..76a83d304d --- /dev/null +++ b/src/images/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/quote_aqua.svg b/src/images/quote_aqua.svg new file mode 100644 index 0000000000..743f109c3e --- /dev/null +++ b/src/images/quote_aqua.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/quote_red.svg b/src/images/quote_red.svg new file mode 100644 index 0000000000..2746bae722 --- /dev/null +++ b/src/images/quote_red.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/quote_yellow.svg b/src/images/quote_yellow.svg new file mode 100644 index 0000000000..cda67af32b --- /dev/null +++ b/src/images/quote_yellow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/twitter.svg b/src/images/twitter.svg new file mode 100644 index 0000000000..093058837e --- /dev/null +++ b/src/images/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..e05ada4136 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,52 @@ 'use strict'; + +document.addEventListener('DOMContentLoaded', () => { + + const slides = document.querySelectorAll('.hero__carousel__slide'); + const labels = ['Intro', 'Town', 'Nature']; + const descs = [ + 'By the same illusion which lifts the horizon.', + 'Architecture and rhythm of urban space.', + 'Calm and beauty of infinite landscapes.' + ]; + + let current = 0; + + function goTo(index) { + slides[current].classList.remove('active'); + current = (index + slides.length) % slides.length; + slides[current].classList.add('active'); + document.getElementById('slideLabel').textContent = labels[current]; + document.getElementById('slideDesc').textContent = descs[current]; + } + + document.getElementById('prevBtn').addEventListener('click', () => goTo(current - 1)); + document.getElementById('nextBtn').addEventListener('click', () => goTo(current + 1)); + + // setInterval(() => goTo(current + 1), 4000); +}); + + +const burger = document.getElementById('burger'); +const menu = document.getElementById('menu'); + +burger.addEventListener('click', () => { + burger.classList.toggle('is-open'); + menu.classList.toggle('is-open'); +}); + +// закриття меню при кліку на пункт +document.querySelectorAll('.header__menu-item').forEach(item => { + item.addEventListener('click', () => { + burger.classList.remove('is-open'); + menu.classList.remove('is-open'); + }); +}); + +// закриття при кліку поза меню +document.addEventListener('click', (e) => { + if (!e.target.closest('.header')) { + burger.classList.remove('is-open'); + menu.classList.remove('is-open'); + } +}); \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..d48d20534d 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -2,6 +2,1308 @@ @import 'fonts'; @import 'typography'; +// On phone gap is 20px, 2 columns. +// Tablet - 30px, 6 columns. +// Desktop - 20px, 12 columns. + +html { + scroll-behavior: smooth; +} + +* { + box-sizing: border-box; +} + +$primary-color: #008AFF; +$white-color: #FFFFFF; +$secondary-color: #FF9C8E; +$dark-blue: #253757; +$light-gray: #6C788B; +$c-gray: #f2f9ff; +$text-gray: #C0CDD7; + +$yellow: #FCC91D; +$aqua: #56CCF2; +$red: #F36363; +$green: #7ED321; + + +$border-radius: 80px; + body { background: $c-gray; + margin: 0; + padding: 0; +} + +.container{ + display: grid; + grid-template-columns: repeat(12, 1fr); + // gap: 20px; + + @media (max-width: 1024px) { + grid-template-columns: repeat(6, 1fr); + // gap: 30px; + } +} + +// .header { +// grid-column: 1 / -1; +// display: flex; +// justify-content: space-around; +// align-items: center; +// padding: 48px 0; + +// background-color: $primary-color; +// color: $white-color; + +// font-family: Poppins; +// font-weight: 700; +// font-size: 13px; +// line-height: 150%; +// letter-spacing: 3px; +// text-align: center; +// text-transform: uppercase; + + +// &__logo { +// font-size: 24px; +// } + +// &__menu { +// display: flex; +// gap: 48px; +// } + +// &__hire-us { +// position: relative; + +// &::after { +// position: absolute; +// content: ''; +// width: 100%; +// height: 2px; +// background-color: $secondary-color; +// top: calc(100% + 8px); +// left: 0; +// } +// } +// } + +.header { + grid-column: 1 / -1; + display: flex; + justify-content: space-around; + align-items: center; + padding: 48px 0; + + background-color: $primary-color; + color: $white-color; + + font-family: Poppins; + font-weight: 700; + font-size: 13px; + line-height: 150%; + letter-spacing: 3px; + text-align: center; + text-transform: uppercase; + + a { + color: $white-color; + text-decoration: none; + } + + &__left { + display: flex; + align-items: center; + gap: 16px; + } + + &__logo { + font-size: 24px; + } + + &__burger { + display: none; + flex-direction: column; + justify-content: center; + gap: 5px; + cursor: pointer; + width: 24px; + + span { + display: block; + width: 100%; + height: 2px; + background-color: $white-color; + border-radius: 2px; + transition: all 0.3s ease; + } + + // анімація в хрестик коли відкрито + &.is-open span:nth-child(1) { + transform: translateY(7px) rotate(45deg); + } + &.is-open span:nth-child(2) { + opacity: 0; + } + &.is-open span:nth-child(3) { + transform: translateY(-7px) rotate(-45deg); + } + } + + &__menu { + display: flex; + gap: 48px; + + // мобільне меню (приховане за замовчуванням) + &.is-open { + display: flex; + } + } + + &__hire-us { + position: relative; + + &::after { + position: absolute; + content: ''; + width: 100%; + height: 2px; + background-color: $secondary-color; + top: calc(100% + 8px); + left: 0; + } + } + + // ─── 1024px ─────────────────────────────────────────────── + @media (max-width: 1024px) { + padding: 32px 24px; + + &__menu { + gap: 24px; + } + } + + // ─── 768px ──────────────────────────────────────────────── + @media (max-width: 768px) { + padding: 24px calc(100% / 12); + justify-content: space-between; + position: relative; + + padding-bottom: 50px; + + &__burger { + display: flex; + } + + &__menu { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + flex-direction: column; + align-items: center; + gap: 0; + background-color: $primary-color; + padding: 0; + z-index: 100; + + &.is-open { + display: flex; + } + } + + &__menu-item { + width: 100%; + padding: 14px calc(100% / 12); + text-align: left; + + &:hover { + background-color: rgba(255, 255, 255, 0.05); + } + } + } + + // ─── 320px ──────────────────────────────────────────────── + @media (max-width: 480px) { + padding: 20px 16px; + + &__logo { + font-size: 20px; + } + } } + +.hero { + grid-column: 1 / -1; + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 20px; + + height: auto; + align-items: stretch; + + background-color: $primary-color; + color: $white-color; + + border-bottom-left-radius: $border-radius; + + &__info { + display: flex; + flex-direction: column; + justify-content: center; + align-items: start; + + grid-column: 2 / 6; + + &__title { + font-family: Poppins; + font-weight: 600; + font-size: 64px; + line-height: 68px; + letter-spacing: -2px; + + margin-bottom: 32px; + } + + &__desc { + font-family: Open Sans; + font-weight: 400; + font-size: 18px; + line-height: 150%; + letter-spacing: 0px; + + margin-bottom: 85px; + } + + &__btn { + font-family: Poppins; + font-weight: 600; + font-size: 15px; + line-height: 100%; + letter-spacing: 0px; + text-align: center; + + background-color: $secondary-color; + color: $white-color; + + border-radius: 20px; + border: none; + + display: flex; + justify-content: center; + align-items: center; + padding: 14px 90px; + } + } + + &__carousel { + position: relative; + grid-column: 7 / -1; + + &__card { + border-top-left-radius: $border-radius; + overflow: hidden; + box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); + } + + &__slides { + position: relative; + display: grid; // всі слайди в одній клітинці grid + } + + &__slide { + grid-area: 1 / 1; + opacity: 0; + transition: opacity 0.6s ease; + pointer-events: none; + height: auto; + + &.active { + opacity: 1; + pointer-events: auto; + } + + img { + // width: 100%; + height: 100%; + display: block; + border-top-left-radius: $border-radius; + } + } + + &__footer { + position: absolute; + bottom: 32px; + left: 32px; + right: 32px; + display: flex; + align-items: center; + gap: 20px; + z-index: 2; + } + + &__controls { + display: flex; + gap: 8px; + flex-shrink: 0; + } + + &__btn { + width: 40px; + height: 40px; + border-radius: 50%; + border: none; + background: rgba(255, 255, 255, 0.9); + color: #111; + font-size: 14px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: background 0.2s, transform 0.15s; + backdrop-filter: blur(4px); + + &:hover { + background: #fff; + transform: scale(1.08); + } + + svg { + width: 14px; + height: 14px; + stroke: #111; + stroke-width: 2.5; + fill: none; + stroke-linecap: round; + stroke-linejoin: round; + } + } + + &__text { + color: #fff; + } + + &__label { + font-size: 11px; + font-weight: 700; + letter-spacing: 0.18em; + text-transform: uppercase; + margin-bottom: 6px; + opacity: 0.9; + } + + &__desc { + font-size: 14px; + line-height: 1.55; + opacity: 0.85; + max-width: 220px; + } + } + + @media (max-width: 1024px) { + &__info { + grid-column: 1 / -1; + padding: 0 calc(100% / 12); + + margin-bottom: 150px; + + &__desc { + margin-bottom: 50px; + } + } + &__carousel { + grid-column: 1 / -1; + + &__slide { + img { + width: 100%; + border-top-right-radius: $border-radius; + } + } + &__footer { + left: 16px; + right: 16px; + } + } + } + + @media (max-width: 480px) { + &__info { + padding: 0 calc(100% / 12); + + margin-bottom: 46px; + + &__desc { + margin-bottom: 50px; + } + } + + &__carousel { + &__slide { + img { + height: auto; + width: 100%; + aspect-ratio: 1 / 1; + } + } + } + } +} + +.who-we-are { + grid-column: 4 / -4; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 16px; + + margin: 150px 0; + + background-color: $c-gray; + + @media (max-width: 1024px) { + grid-column: 2 / -2; + } + + &__title { + font-family: Poppins; + font-weight: 600; + font-size: 32px; + line-height: 150%; + letter-spacing: 0px; + text-align: center; + vertical-align: middle; + + margin: 0; + + color: $dark-blue; + } + + &__desc { + font-family: Open Sans; + font-weight: 600; + font-size: 24px; + line-height: 150%; + letter-spacing: 0px; + text-align: center; + + width: 90%; + margin: 0; + + color: $light-gray; + } +} + +.our-expertise { + grid-column: 1 / -1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + padding: 130px 0; + + background-color: $white-color; + + &__title { + font-family: Poppins; + font-weight: 600; + font-size: 52px; + line-height: 150%; + letter-spacing: 0px; + text-align: center; + vertical-align: middle; + + color: $dark-blue; + } + + &__items { + display: flex; + justify-content: space-evenly; + gap: 20px; + margin-top: 50px; + } + + &__item { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + + &__image { + width: 160px; + height: 160px; + border-radius: 20%; + background-color: $primary-color; + margin-bottom: 40px; + } + + &__title { + font-family: Poppins; + font-weight: 600; + font-size: 20px; + line-height: 140%; + letter-spacing: 0px; + text-align: center; + + margin-bottom: 16px; + + color: $dark-blue; + } + + &__desc { + font-family: Open Sans; + font-weight: 400; + font-size: 14px; + line-height: 150%; + letter-spacing: 0px; + text-align: center; + + width: 50%; + + color: $light-gray; + } + } + + @media (max-width: 768px) { + &__items { + flex-direction: column; + align-items: center; + } + + &__item { + &__desc { + width: 60%; + } + } + + } +} + +.services { + grid-column: 1 / -1; + display: grid; + grid-template-columns: 1fr repeat(3, 2fr) repeat(3, 1fr) repeat(4, 2fr) 1fr; + grid-template-rows: repeat(5, 1fr); + grid-column-gap: 20px; + grid-row-gap: 20px; + + padding: 150px 0; + + &__info { + grid-area: 2 / 2 / 4 / 5; + display: flex; + flex-direction: column; + justify-content: center; + + &__sub-title { + font-family: Poppins; + font-weight: 700; + font-size: 13px; + line-height: 100%; + letter-spacing: 3px; + text-transform: uppercase; + margin-bottom: 16px; + color: $text-gray; + } + + &__title { + font-family: Poppins; + font-weight: 600; + font-size: 32px; + line-height: 130%; + letter-spacing: 0px; + vertical-align: middle; + margin-bottom: 24px; + color: $dark-blue; + } + + &__desc { + font-family: Open Sans; + font-weight: 400; + font-size: 14px; + line-height: 150%; + letter-spacing: 0px; + color: $text-gray; + } + } + + &__item { + display: flex; + justify-content: space-between; + flex-direction: column; + gap: 16px; + + background-color: $white-color; + border-radius: 24px; + padding: 32px; + width: 100%; + height: 100%; + aspect-ratio: 1 / 1; + + box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); + + &__number { + width: min-content; + padding: 2px 10px; + border-radius: 20px; + } + + &__desc { + font-family: Open Sans; + font-weight: 600; + font-size: 13px; + line-height: 150%; + letter-spacing: 0px; + color: $light-gray; + } + + &__footer { + display: flex; + align-items: center; + gap: 16px; + } + + &__btn { + aspect-ratio: 1 / 1; + width: 40px; + height: 40px; + } + } + + .item-1 { + grid-area: 1 / 10 / 3 / 12; + .services__item__number { + background-color: #FCC91D10; + color: $yellow; + } + } + .item-2 { + grid-area: 2 / 8 / 4 / 10; + .services__item__number { + background-color: #56CCF210; + color: $aqua; + } + } + .item-3 { + grid-area: 3 / 10 / 5 / 12; + .services__item__number { + background-color: #F3636310; + color: $red; + } + } + .item-4 { + grid-area: 4 / 8 / 6 / 10; + .services__item__number { + background-color: #15D85010; + color: $green; + } + } + + // ─── 1024px ─────────────────────────────────────────────── + @media (max-width: 1024px) { + grid-template-columns: 1fr 2fr 2fr 2fr 2fr 1fr; + grid-template-rows: repeat(5, 1fr); + padding: 100px 0; + + &__info { + grid-area: 2 / 2 / 4 / 4; + + &__title { + font-size: 26px; + } + } + + &__item { + gap: 10px; + } + + .item-1 { grid-area: 1 / 5 / 3 / 6; } + .item-2 { grid-area: 2 / 4 / 4 / 5; } + .item-3 { grid-area: 3 / 5 / 5 / 6; } + .item-4 { grid-area: 4 / 4 / 6 / 5; } + } + + // ─── 768px ──────────────────────────────────────────────── + @media (max-width: 768px) { + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(6, auto); + grid-column-gap: 20px; + grid-row-gap: 20px; + padding: 60px 24px; + + &__info { + grid-area: 1 / 1 / 3 / 2; + + &__title { + font-size: 28px; + } + } + + .item-1 { grid-area: 3 / 1 / 5 / 2; } + .item-2 { grid-area: 2 / 2 / 4 / 3; } + .item-3 { grid-area: 5 / 1 / 7 / 2; } + .item-4 { grid-area: 4 / 2 / 6 / 3; } + + &__item { + aspect-ratio: auto; + min-height: 200px; + } + } + + // ─── 320px ──────────────────────────────────────────────── + @media (max-width: 480px) { + grid-template-columns: 1fr; + padding: 40px 16px; + + &__info { + grid-area: auto; + &__title { font-size: 24px; } + } + + .item-1, .item-2, .item-3, .item-4 { + grid-area: auto; + margin-top: 0; + } + + &__item { + aspect-ratio: auto; + padding: 24px; + } + } +} + +.testimonials { + grid-column: 2 / -2; + display: flex; + flex-direction: column; + padding: 150px 0; + + &__sub-title { + font-family: Poppins; + font-weight: 700; + font-size: 13px; + line-height: 100%; + letter-spacing: 3px; + text-transform: uppercase; + margin-bottom: 16px; + color: $text-gray; + } + + &__title { + font-family: Poppins; + font-weight: 600; + font-size: 32px; + line-height: 150%; + letter-spacing: 0px; + vertical-align: middle; + margin-bottom: 85px; + color: $dark-blue; + } + + &__list { + display: flex; + justify-content: center; + gap: 30px; + } + + &__item { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + background-color: $white-color; + border-radius: 20px; + padding: 90px 0 0; + + .avatar-wrapper { + position: relative; + width: min-content; + z-index: 1; + margin-bottom: 80px; + + &::after { + z-index: -1; + bottom: -30px; + transform: rotate(40deg); + right: 0px; + content: ""; + position: absolute; + border-radius: 12px; + width: 60px; + height: 140px; + } + &::before { + z-index: -1; + top: -30px; + left: 0px; + transform: rotate(40deg); + content: ""; + position: absolute; + border-radius: 12px; + width: 60px; + height: 140px; + } + } + + .aqua-wrapper::after { background-color: $aqua; } + .aqua-wrapper::before { background-color: $aqua; } + .yellow-wrapper::after { background-color: $yellow; } + .yellow-wrapper::before { background-color: $yellow; } + .red-wrapper::after { background-color: $red; } + .red-wrapper::before { background-color: $red; } + + &__avatar { + width: 140px; + height: 140px; + border-radius: 50%; + margin-bottom: 16px; + object-fit: cover; + z-index: 3; + } + + &__quote { + width: 24px; + height: 24px; + margin-bottom: 8px; + } + + &__text { + font-family: Open Sans; + font-weight: 600; + font-size: 13px; + line-height: 150%; + letter-spacing: 0px; + text-align: center; + width: 60%; + color: $light-gray; + margin-bottom: 16px; + } + + &__author { + font-family: Open Sans; + font-weight: 600; + font-size: 13px; + line-height: 150%; + letter-spacing: 0px; + text-align: center; + color: $dark-blue; + margin-bottom: 4px; + } + + &__position { + font-family: Poppins; + font-weight: 700; + font-size: 13px; + line-height: 100%; + letter-spacing: 3px; + text-align: center; + text-transform: uppercase; + margin-bottom: 16px; + color: $text-gray; + } + } + + // ─── 1024px ─────────────────────────────────────────────── + @media (max-width: 1024px) { + grid-column: 1 / -1; + padding: 100px 0; + margin: 0 50px; + + &__title { + font-size: 28px; + margin-bottom: 60px; + } + + &__list { + gap: 20px; + } + + &__item { + padding: 70px 0 0; + + &__text { + width: 75%; + } + } + } + + // ─── 768px ──────────────────────────────────────────────── + @media (max-width: 768px) { + margin: 0; + padding: 80px 24px; + + &__title { + font-size: 26px; + margin-bottom: 40px; + } + + &__list { + flex-direction: column; + gap: 20px; + } + + &__item { + flex: none; + width: 100%; + padding: 70px 0 24px; + + &__text { + width: 70%; + } + } + } + + // ─── 320px ──────────────────────────────────────────────── + @media (max-width: 480px) { + padding: 60px 16px; + + br { + display: none; + } + + &__title { + font-size: 22px; + margin-bottom: 32px; + } + + &__list { + gap: 16px; + } + + &__item { + padding: 60px 0 20px; + + &__text { + width: 80%; + } + + .avatar-wrapper { + margin-bottom: 60px; + + &::after, + &::before { + width: 48px; + height: 110px; + } + } + + &__avatar { + width: 110px; + height: 110px; + } + } + } +} + +.shapes{ + grid-column: 1 / -1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + background-color: $white-color; + + background-image: url('/Users/evg3n/projects/Mate_academy/layout_dia/src/images/bg_shapes.png'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + padding: 130px 0; + + &__title { + font-family: Poppins; + font-weight: 600; + font-size: 32px; + line-height: 150%; + letter-spacing: 0px; + text-align: center; + vertical-align: middle; + + margin-bottom: 24px; + + color: $dark-blue; + } + + &__desc { + font-family: Open Sans; + font-weight: 600; + font-size: 24px; + line-height: 150%; + letter-spacing: 0px; + text-align: center; + + width: 40%; + margin-bottom: 64px; + + color: $light-gray; + } + + &__btn { + background-color: $secondary-color; + color: $white-color; + border-radius: 80px; + border:none; + padding: 16px 100px; + + font-family: Poppins; + font-weight: 600; + font-size: 15px; + line-height: 100%; + letter-spacing: 0px; + text-align: center; + } + + @media (max-width: 768px) { + &__desc { + width: 70%; + } + } +} + +.info-wrapper { + grid-column: 1 / -1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + background-color: $white-color; + + + .info { + width: 100%; + padding: 130px 0; + background-color: $primary-color; + color: $white-color; + border-top-right-radius: $border-radius; + + display: grid; + grid-template-columns: repeat(12, 1fr); + + &__message { + grid-column: 2 / 7; + display: flex; + flex-direction: column; + justify-content: center; + align-items: start; + + font-family: Poppins; + font-weight: 600; + font-size: 15px; + line-height: 100%; + letter-spacing: 0px; + + padding: 16px 0; + + + &__title { + font-family: Poppins; + font-weight: 600; + font-size: 32px; + line-height: 150%; + letter-spacing: 0px; + vertical-align: middle; + + margin-bottom: 60px; + + color: $white-color; + } + + + &__inputs { + display: flex; + flex-direction: column; + gap: 48px; + width: 100%; + } + + input { + background-color: transparent; + border:none; + border-bottom: 1px solid $white-color; + padding: 12px 16px 12px 0; + color: $white-color; + font-size: 14px; + width: 100%; + + &:focus { + outline: none; + border-bottom: 2px solid $white-color; + } + + &::placeholder { + color: $white-color; + opacity: 0.7; + } + } + + &__btn { + background-color: $secondary-color; + color: $white-color; + border-radius: 80px; + border:none; + padding: 16px 100px; + margin-top: 80px; + } + + @media (max-width: 768px) { + grid-column: 2 / 12; + } + } + + &__contact { + grid-column: 8 / 12; + display: flex; + flex-direction: column; + align-items: start; + + font-family: Poppins; + font-weight: 600; + font-size: 15px; + line-height: 100%; + letter-spacing: 0px; + + padding: 16px 0; + + &__title { + font-family: Poppins; + font-weight: 600; + font-size: 32px; + line-height: 150%; + letter-spacing: 0px; + vertical-align: middle; + + margin-bottom: 60px; + } + + &__call-us { + margin-bottom: 48px; + } + + &__visit-us { + margin-bottom: 60px; + } + + &__call-us, &__visit-us { + display: flex; + flex-direction: column; + + &__label { + opacity: 0.7; + font-family: Poppins; + font-weight: 700; + font-size: 13px; + line-height: 100%; + letter-spacing: 3px; + text-transform: uppercase; + } + } + + &__phone, &__address { + font-family: Open Sans; + font-weight: 600; + font-size: 24px; + line-height: 150%; + letter-spacing: 0px; + text-decoration: none; + + color: $white-color; + } + + &__socials { + display: flex; + flex-direction: column; + gap: 16px; + + &__title { + opacity: 0.7; + font-family: Poppins; + font-weight: 700; + font-size: 13px; + line-height: 100%; + letter-spacing: 3px; + text-transform: uppercase; + + } + + &__icons { + display: flex; + gap: 16px; + } + } + + @media (max-width: 768px) { + grid-column: 2 / 12; + } + } + @media (max-width: 768px) { + padding: 50px 0; + } + } + +} + +.footer { + grid-column: 1 / -1; + display: flex; + justify-content: space-around; + align-items: center; + padding: 48px 0; + + background-color: $primary-color; + color: $white-color; + + font-family: Poppins; + font-weight: 700; + font-size: 13px; + line-height: 150%; + letter-spacing: 3px; + text-align: center; + text-transform: uppercase; + + a { + color: $white-color; + text-decoration: none; + } + + &__logo { + font-size: 24px; + } + + &__menu { + display: flex; + gap: 48px; + } + + @media (max-width: 768px) { + flex-direction: column; + align-items: start; + gap: 16px; + padding: 0 calc(100% / 10); + } + + @media (max-width: 480px) { + gap: 48px; + &__menu { + gap: 16px; + flex-direction: column; + align-items: start; + } + } +} + +.hero__info__btn, .shapes__btn, .info__message__btn { + transition: all 0.3s ease; + + &:hover { + cursor: pointer; + background-color: darken($secondary-color, 10%); + } +} \ No newline at end of file From 28fcd25c2bb3ca2ae55e832ef53b90c1954eccd5 Mon Sep 17 00:00:00 2001 From: Evgen Gulevaty Date: Sun, 10 May 2026 13:53:50 +0300 Subject: [PATCH 2/5] fix: footer gaps, add links to social media, set fonts, change menu at header and add cursor: pointer to some objects --- index.html | 27 +- src/scripts/main.js | 58 ++- src/styles/_fonts.scss | 2 +- src/styles/main.scss | 863 ++++++++++++++++++++++------------------- 4 files changed, 518 insertions(+), 432 deletions(-) diff --git a/index.html b/index.html index 4ebfb4cd48..5a3223a9db 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,9 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> + + + Air

- - +
@@ -278,9 +271,15 @@

Who We Are

Our socials
- facebook_icon - twitter_icon - instagram_icon + + facebook_icon + + + twitter_icon + + + instagram_icon +
diff --git a/src/scripts/main.js b/src/scripts/main.js index e05ada4136..c109aaba87 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -26,27 +26,57 @@ document.addEventListener('DOMContentLoaded', () => { // setInterval(() => goTo(current + 1), 4000); }); - const burger = document.getElementById('burger'); const menu = document.getElementById('menu'); +// створюємо overlay динамічно +const overlay = document.createElement('div'); +overlay.id = 'menu-overlay'; +overlay.style.cssText = ` + display: none; + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 999; + transition: opacity 0.35s ease; + opacity: 0; +`; +document.body.appendChild(overlay); + +function openMenu() { + burger.classList.add('is-open'); + menu.classList.add('is-open'); + overlay.style.display = 'block'; + // невеликий delay щоб transition спрацював + requestAnimationFrame(() => { + overlay.style.opacity = '1'; + }); + document.body.style.overflow = 'hidden'; // блокуємо скрол +} + +function closeMenu() { + burger.classList.remove('is-open'); + menu.classList.remove('is-open'); + overlay.style.opacity = '0'; + setTimeout(() => { + overlay.style.display = 'none'; + }, 350); + document.body.style.overflow = ''; +} + burger.addEventListener('click', () => { - burger.classList.toggle('is-open'); - menu.classList.toggle('is-open'); + menu.classList.contains('is-open') ? closeMenu() : openMenu(); }); -// закриття меню при кліку на пункт +// закриття при кліку на overlay +overlay.addEventListener('click', closeMenu); + +// закриття при кліку на пункт меню document.querySelectorAll('.header__menu-item').forEach(item => { - item.addEventListener('click', () => { - burger.classList.remove('is-open'); - menu.classList.remove('is-open'); - }); + item.addEventListener('click', closeMenu); }); -// закриття при кліку поза меню -document.addEventListener('click', (e) => { - if (!e.target.closest('.header')) { - burger.classList.remove('is-open'); - menu.classList.remove('is-open'); - } +// закриття по Escape +document.addEventListener('keydown', (e) => { + if (e.key === 'Escape') closeMenu(); }); \ No newline at end of file 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/main.scss b/src/styles/main.scss index d48d20534d..3de4269718 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -2,8 +2,10 @@ @import 'fonts'; @import 'typography'; -// On phone gap is 20px, 2 columns. -// Tablet - 30px, 6 columns. +@import 'https://fonts.googleapis.com/css2?family=Poppins, sans-serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'; + +// On phone gap is 20px, 2 columns. +// Tablet - 30px, 6 columns. // Desktop - 20px, 12 columns. html { @@ -14,99 +16,56 @@ html { box-sizing: border-box; } -$primary-color: #008AFF; -$white-color: #FFFFFF; -$secondary-color: #FF9C8E; +$primary-color: #008aff; +$white-color: #fff; +$secondary-color: #ff9c8e; $dark-blue: #253757; -$light-gray: #6C788B; +$light-gray: #6c788b; $c-gray: #f2f9ff; -$text-gray: #C0CDD7; - -$yellow: #FCC91D; -$aqua: #56CCF2; -$red: #F36363; -$green: #7ED321; - - +$text-gray: #c0cdd7; +$yellow: #fcc91d; +$aqua: #56ccf2; +$red: #f36363; +$green: #7ed321; $border-radius: 80px; body { - background: $c-gray; margin: 0; padding: 0; + background: $c-gray; } -.container{ +.container { display: grid; grid-template-columns: repeat(12, 1fr); + // gap: 20px; @media (max-width: 1024px) { grid-template-columns: repeat(6, 1fr); + // gap: 30px; } } -// .header { -// grid-column: 1 / -1; -// display: flex; -// justify-content: space-around; -// align-items: center; -// padding: 48px 0; - -// background-color: $primary-color; -// color: $white-color; - -// font-family: Poppins; -// font-weight: 700; -// font-size: 13px; -// line-height: 150%; -// letter-spacing: 3px; -// text-align: center; -// text-transform: uppercase; - - -// &__logo { -// font-size: 24px; -// } - -// &__menu { -// display: flex; -// gap: 48px; -// } - -// &__hire-us { -// position: relative; - -// &::after { -// position: absolute; -// content: ''; -// width: 100%; -// height: 2px; -// background-color: $secondary-color; -// top: calc(100% + 8px); -// left: 0; -// } -// } -// } - .header { - grid-column: 1 / -1; display: flex; - justify-content: space-around; + grid-column: 1 / -1; align-items: center; - padding: 48px 0; + justify-content: space-around; - background-color: $primary-color; - color: $white-color; + padding: 48px 0; - font-family: Poppins; - font-weight: 700; + font-family: Poppins, sans-serif; font-size: 13px; + font-weight: 700; line-height: 150%; - letter-spacing: 3px; + color: $white-color; text-align: center; text-transform: uppercase; + letter-spacing: 3px; + + background-color: $primary-color; a { color: $white-color; @@ -115,8 +74,8 @@ body { &__left { display: flex; - align-items: center; gap: 16px; + align-items: center; } &__logo { @@ -124,19 +83,24 @@ body { } &__burger { + cursor: pointer; + display: none; flex-direction: column; - justify-content: center; gap: 5px; - cursor: pointer; + justify-content: center; + width: 24px; span { display: block; + width: 100%; height: 2px; - background-color: $white-color; border-radius: 2px; + + background-color: $white-color; + transition: all 0.3s ease; } @@ -163,16 +127,20 @@ body { } &__hire-us { + cursor: pointer; position: relative; &::after { - position: absolute; content: ''; + + position: absolute; + top: calc(100% + 8px); + left: 0; + width: 100%; height: 2px; + background-color: $secondary-color; - top: calc(100% + 8px); - left: 0; } } @@ -187,37 +155,47 @@ body { // ─── 768px ──────────────────────────────────────────────── @media (max-width: 768px) { - padding: 24px calc(100% / 12); justify-content: space-between; - position: relative; - - padding-bottom: 50px; + padding: 24px; &__burger { display: flex; } &__menu { - display: none; - position: absolute; - top: 100%; - left: 0; + // шторка збоку + position: fixed; + z-index: 1000; + top: 0; right: 0; + + // прихована за правим краєм + transform: translateX(100%); + + display: flex; flex-direction: column; - align-items: center; gap: 0; + align-items: flex-start; + + width: 280px; + height: 100vh; + padding: 80px 0 40px; + background-color: $primary-color; - padding: 0; - z-index: 100; + box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3); + + transition: transform 0.35s ease; + // видима коли відкрито &.is-open { + transform: translateX(0); display: flex; } } &__menu-item { width: 100%; - padding: 14px calc(100% / 12); + padding: 16px 32px; text-align: left; &:hover { @@ -233,69 +211,72 @@ body { &__logo { font-size: 20px; } + + &__menu { + width: 100%; // на зовсім маленьких — на весь екран + } } } .hero { - grid-column: 1 / -1; display: grid; + grid-column: 1 / -1; grid-template-columns: repeat(12, 1fr); gap: 20px; + align-items: stretch; height: auto; - align-items: stretch; + border-bottom-left-radius: $border-radius; - background-color: $primary-color; color: $white-color; - border-bottom-left-radius: $border-radius; + background-color: $primary-color; &__info { display: flex; + grid-column: 2 / 6; flex-direction: column; - justify-content: center; align-items: start; - - grid-column: 2 / 6; + justify-content: center; &__title { - font-family: Poppins; - font-weight: 600; + margin-bottom: 32px; + + font-family: Poppins, sans-serif; font-size: 64px; + font-weight: 600; line-height: 68px; letter-spacing: -2px; - - margin-bottom: 32px; } &__desc { - font-family: Open Sans; - font-weight: 400; + margin-bottom: 85px; + + font-family: Poppins, sans-serif; font-size: 18px; + font-weight: 400; line-height: 150%; - letter-spacing: 0px; - - margin-bottom: 85px; + letter-spacing: 0; } &__btn { - font-family: Poppins; - font-weight: 600; + display: flex; + align-items: center; + justify-content: center; + + padding: 14px 90px; + border: none; + border-radius: 20px; + + font-family: Poppins, sans-serif; font-size: 15px; + font-weight: 600; line-height: 100%; - letter-spacing: 0px; - text-align: center; - - background-color: $secondary-color; color: $white-color; + text-align: center; + letter-spacing: 0; - border-radius: 20px; - border: none; - - display: flex; - justify-content: center; - align-items: center; - padding: 14px 90px; + background-color: $secondary-color; } } @@ -303,9 +284,9 @@ body { position: relative; grid-column: 7 / -1; - &__card { - border-top-left-radius: $border-radius; + &__card { overflow: hidden; + border-top-left-radius: $border-radius; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); } @@ -315,70 +296,84 @@ body { } &__slide { + pointer-events: none; + grid-area: 1 / 1; + + height: auto; + opacity: 0; + transition: opacity 0.6s ease; - pointer-events: none; - height: auto; &.active { - opacity: 1; pointer-events: auto; + opacity: 1; } img { + display: block; + // width: 100%; height: 100%; - display: block; border-top-left-radius: $border-radius; } } &__footer { position: absolute; + z-index: 2; + right: 32px; bottom: 32px; left: 32px; - right: 32px; + display: flex; - align-items: center; gap: 20px; - z-index: 2; + align-items: center; } &__controls { display: flex; - gap: 8px; flex-shrink: 0; + gap: 8px; } &__btn { - width: 40px; - height: 40px; - border-radius: 50%; - border: none; - background: rgba(255, 255, 255, 0.9); - color: #111; - font-size: 14px; cursor: pointer; + display: flex; align-items: center; justify-content: center; - transition: background 0.2s, transform 0.15s; + + width: 40px; + height: 40px; + border: none; + border-radius: 50%; + + font-size: 14px; + color: #111; + + background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(4px); + transition: + background 0.2s, + transform 0.15s; + &:hover { - background: #fff; transform: scale(1.08); + background: #fff; } svg { width: 14px; height: 14px; - stroke: #111; - stroke-width: 2.5; + fill: none; + stroke: #111; stroke-linecap: round; stroke-linejoin: round; + stroke-width: 2.5; } } @@ -387,28 +382,29 @@ body { } &__label { + margin-bottom: 6px; + font-size: 11px; font-weight: 700; - letter-spacing: 0.18em; text-transform: uppercase; - margin-bottom: 6px; + letter-spacing: 0.18em; + opacity: 0.9; } &__desc { + max-width: 220px; font-size: 14px; line-height: 1.55; opacity: 0.85; - max-width: 220px; } } @media (max-width: 1024px) { &__info { grid-column: 1 / -1; - padding: 0 calc(100% / 12); - margin-bottom: 150px; + padding: 0 calc(100% / 12); &__desc { margin-bottom: 50px; @@ -423,18 +419,17 @@ body { border-top-right-radius: $border-radius; } } - &__footer { - left: 16px; + &__footer { right: 16px; - } + left: 16px; + } } } @media (max-width: 480px) { &__info { - padding: 0 calc(100% / 12); - margin-bottom: 46px; + padding: 0 calc(100% / 12); &__desc { margin-bottom: 50px; @@ -444,129 +439,124 @@ body { &__carousel { &__slide { img { - height: auto; - width: 100%; aspect-ratio: 1 / 1; + width: 100%; + height: auto; } - } + } } } } .who-we-are { - grid-column: 4 / -4; display: flex; + grid-column: 4 / -4; flex-direction: column; - justify-content: center; - align-items: center; gap: 16px; + align-items: center; + justify-content: center; margin: 150px 0; background-color: $c-gray; - @media (max-width: 1024px) { - grid-column: 2 / -2; - } - &__title { - font-family: Poppins; - font-weight: 600; + margin: 0; + + font-family: Poppins, sans-serif; font-size: 32px; + font-weight: 600; line-height: 150%; - letter-spacing: 0px; + color: $dark-blue; text-align: center; + letter-spacing: 0; vertical-align: middle; - - margin: 0; - - color: $dark-blue; } &__desc { - font-family: Open Sans; - font-weight: 600; - font-size: 24px; - line-height: 150%; - letter-spacing: 0px; - text-align: center; - width: 90%; margin: 0; + font-family: Poppins, sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 150%; color: $light-gray; + text-align: center; + letter-spacing: 0; + } + + @media (max-width: 1024px) { + grid-column: 2 / -2; } } .our-expertise { - grid-column: 1 / -1; display: flex; + grid-column: 1 / -1; flex-direction: column; - justify-content: center; align-items: center; + justify-content: center; padding: 130px 0; background-color: $white-color; &__title { - font-family: Poppins; - font-weight: 600; + font-family: Poppins, sans-serif; font-size: 52px; + font-weight: 600; line-height: 150%; - letter-spacing: 0px; + color: $dark-blue; text-align: center; + letter-spacing: 0; vertical-align: middle; - - color: $dark-blue; } &__items { display: flex; - justify-content: space-evenly; gap: 20px; + justify-content: space-evenly; margin-top: 50px; } &__item { display: flex; flex-direction: column; - justify-content: center; align-items: center; - + justify-content: center; &__image { width: 160px; height: 160px; + margin-bottom: 40px; border-radius: 20%; + background-color: $primary-color; - margin-bottom: 40px; } &__title { - font-family: Poppins; - font-weight: 600; - font-size: 20px; - line-height: 140%; - letter-spacing: 0px; - text-align: center; - margin-bottom: 16px; + font-family: Poppins, sans-serif; + font-size: 20px; + font-weight: 600; + line-height: 140%; color: $dark-blue; + text-align: center; + letter-spacing: 0; } &__desc { - font-family: Open Sans; - font-weight: 400; + width: 50%; + + font-family: Poppins, sans-serif; font-size: 14px; + font-weight: 400; line-height: 150%; - letter-spacing: 0px; - text-align: center; - - width: 50%; - color: $light-gray; + text-align: center; + letter-spacing: 0; } } @@ -581,71 +571,71 @@ body { width: 60%; } } - } } .services { - grid-column: 1 / -1; display: grid; + grid-column: 1 / -1; + grid-gap: 20px; grid-template-columns: 1fr repeat(3, 2fr) repeat(3, 1fr) repeat(4, 2fr) 1fr; grid-template-rows: repeat(5, 1fr); - grid-column-gap: 20px; - grid-row-gap: 20px; padding: 150px 0; &__info { - grid-area: 2 / 2 / 4 / 5; display: flex; + grid-area: 2 / 2 / 4 / 5; flex-direction: column; justify-content: center; &__sub-title { - font-family: Poppins; - font-weight: 700; + margin-bottom: 16px; + + font-family: Poppins, sans-serif; font-size: 13px; + font-weight: 700; line-height: 100%; - letter-spacing: 3px; + color: $text-gray; text-transform: uppercase; - margin-bottom: 16px; - color: $text-gray; + letter-spacing: 3px; } &__title { - font-family: Poppins; - font-weight: 600; + margin-bottom: 24px; + + font-family: Poppins, sans-serif; font-size: 32px; + font-weight: 600; line-height: 130%; - letter-spacing: 0px; - vertical-align: middle; - margin-bottom: 24px; color: $dark-blue; + letter-spacing: 0; + vertical-align: middle; } &__desc { - font-family: Open Sans; - font-weight: 400; + font-family: Poppins, sans-serif; font-size: 14px; + font-weight: 400; line-height: 150%; - letter-spacing: 0px; color: $text-gray; + letter-spacing: 0; } } &__item { display: flex; - justify-content: space-between; flex-direction: column; gap: 16px; + justify-content: space-between; - background-color: $white-color; - border-radius: 24px; - padding: 32px; + aspect-ratio: 1 / 1; width: 100%; height: 100%; - aspect-ratio: 1 / 1; + padding: 32px; + border-radius: 24px; + background-color: $white-color; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); &__number { @@ -655,53 +645,63 @@ body { } &__desc { - font-family: Open Sans; - font-weight: 600; + font-family: Poppins, sans-serif; font-size: 13px; + font-weight: 600; line-height: 150%; - letter-spacing: 0px; color: $light-gray; + letter-spacing: 0; } &__footer { display: flex; - align-items: center; gap: 16px; + align-items: center; } &__btn { + cursor: pointer; aspect-ratio: 1 / 1; width: 40px; height: 40px; } + + &__btn-text { + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 100%; + text-align: center; + letter-spacing: 0; + } } .item-1 { grid-area: 1 / 10 / 3 / 12; .services__item__number { - background-color: #FCC91D10; color: $yellow; + background-color: #fcc91d10; } } .item-2 { grid-area: 2 / 8 / 4 / 10; .services__item__number { - background-color: #56CCF210; color: $aqua; + background-color: #56ccf210; } } .item-3 { grid-area: 3 / 10 / 5 / 12; .services__item__number { - background-color: #F3636310; color: $red; + background-color: #f3636310; } } .item-4 { grid-area: 4 / 8 / 6 / 10; .services__item__number { - background-color: #15D85010; color: $green; + background-color: #15d85010; } } @@ -723,32 +723,47 @@ body { gap: 10px; } - .item-1 { grid-area: 1 / 5 / 3 / 6; } - .item-2 { grid-area: 2 / 4 / 4 / 5; } - .item-3 { grid-area: 3 / 5 / 5 / 6; } - .item-4 { grid-area: 4 / 4 / 6 / 5; } + .item-1 { + grid-area: 1 / 5 / 3 / 6; + } + .item-2 { + grid-area: 2 / 4 / 4 / 5; + } + .item-3 { + grid-area: 3 / 5 / 5 / 6; + } + .item-4 { + grid-area: 4 / 4 / 6 / 5; + } } // ─── 768px ──────────────────────────────────────────────── @media (max-width: 768px) { + grid-gap: 20px; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(6, auto); - grid-column-gap: 20px; - grid-row-gap: 20px; padding: 60px 24px; &__info { grid-area: 1 / 1 / 3 / 2; - + &__title { font-size: 28px; } } - .item-1 { grid-area: 3 / 1 / 5 / 2; } - .item-2 { grid-area: 2 / 2 / 4 / 3; } - .item-3 { grid-area: 5 / 1 / 7 / 2; } - .item-4 { grid-area: 4 / 2 / 6 / 3; } + .item-1 { + grid-area: 3 / 1 / 5 / 2; + } + .item-2 { + grid-area: 2 / 2 / 4 / 3; + } + .item-3 { + grid-area: 5 / 1 / 7 / 2; + } + .item-4 { + grid-area: 4 / 2 / 6 / 3; + } &__item { aspect-ratio: auto; @@ -763,10 +778,15 @@ body { &__info { grid-area: auto; - &__title { font-size: 24px; } + &__title { + font-size: 24px; + } } - .item-1, .item-2, .item-3, .item-4 { + .item-1, + .item-2, + .item-3, + .item-4 { grid-area: auto; margin-top: 0; } @@ -779,92 +799,114 @@ body { } .testimonials { - grid-column: 2 / -2; display: flex; + grid-column: 2 / -2; flex-direction: column; padding: 150px 0; &__sub-title { - font-family: Poppins; - font-weight: 700; + margin-bottom: 16px; + + font-family: Poppins, sans-serif; font-size: 13px; + font-weight: 700; line-height: 100%; - letter-spacing: 3px; - text-transform: uppercase; - margin-bottom: 16px; color: $text-gray; + text-transform: uppercase; + letter-spacing: 3px; } &__title { - font-family: Poppins; - font-weight: 600; + margin-bottom: 85px; + + font-family: Poppins, sans-serif; font-size: 32px; + font-weight: 600; line-height: 150%; - letter-spacing: 0px; - vertical-align: middle; - margin-bottom: 85px; color: $dark-blue; + letter-spacing: 0; + vertical-align: middle; } &__list { display: flex; - justify-content: center; gap: 30px; + justify-content: center; } &__item { - flex: 1; display: flex; + flex: 1; flex-direction: column; align-items: center; - background-color: $white-color; - border-radius: 20px; + padding: 90px 0 0; + border-radius: 20px; + + background-color: $white-color; .avatar-wrapper { position: relative; - width: min-content; z-index: 1; + width: min-content; margin-bottom: 80px; &::after { + content: ''; + + position: absolute; z-index: -1; + right: 0; bottom: -30px; transform: rotate(40deg); - right: 0px; - content: ""; - position: absolute; - border-radius: 12px; + width: 60px; height: 140px; + border-radius: 12px; } &::before { + content: ''; + + position: absolute; z-index: -1; top: -30px; - left: 0px; + left: 0; transform: rotate(40deg); - content: ""; - position: absolute; - border-radius: 12px; + width: 60px; height: 140px; + border-radius: 12px; } } - .aqua-wrapper::after { background-color: $aqua; } - .aqua-wrapper::before { background-color: $aqua; } - .yellow-wrapper::after { background-color: $yellow; } - .yellow-wrapper::before { background-color: $yellow; } - .red-wrapper::after { background-color: $red; } - .red-wrapper::before { background-color: $red; } + .aqua-wrapper::after { + background-color: $aqua; + } + .aqua-wrapper::before { + background-color: $aqua; + } + .yellow-wrapper::after { + background-color: $yellow; + } + .yellow-wrapper::before { + background-color: $yellow; + } + .red-wrapper::after { + background-color: $red; + } + .red-wrapper::before { + background-color: $red; + } &__avatar { + z-index: 3; + width: 140px; height: 140px; - border-radius: 50%; margin-bottom: 16px; + border-radius: 50%; + object-fit: cover; - z-index: 3; } &__quote { @@ -874,50 +916,53 @@ body { } &__text { - font-family: Open Sans; - font-weight: 600; + width: 60%; + margin-bottom: 16px; + + font-family: Poppins, sans-serif; font-size: 13px; + font-weight: 600; line-height: 150%; - letter-spacing: 0px; - text-align: center; - width: 60%; color: $light-gray; - margin-bottom: 16px; + text-align: center; + letter-spacing: 0; } &__author { - font-family: Open Sans; - font-weight: 600; + margin-bottom: 4px; + + font-family: Poppins, sans-serif; font-size: 13px; + font-weight: 600; line-height: 150%; - letter-spacing: 0px; - text-align: center; color: $dark-blue; - margin-bottom: 4px; + text-align: center; + letter-spacing: 0; } &__position { - font-family: Poppins; - font-weight: 700; + margin-bottom: 16px; + + font-family: Poppins, sans-serif; font-size: 13px; + font-weight: 700; line-height: 100%; - letter-spacing: 3px; + color: $text-gray; text-align: center; text-transform: uppercase; - margin-bottom: 16px; - color: $text-gray; + letter-spacing: 3px; } } // ─── 1024px ─────────────────────────────────────────────── @media (max-width: 1024px) { grid-column: 1 / -1; - padding: 100px 0; margin: 0 50px; + padding: 100px 0; &__title { - font-size: 28px; margin-bottom: 60px; + font-size: 28px; } &__list { @@ -939,8 +984,8 @@ body { padding: 80px 24px; &__title { - font-size: 26px; margin-bottom: 40px; + font-size: 26px; } &__list { @@ -968,8 +1013,8 @@ body { } &__title { - font-size: 22px; margin-bottom: 32px; + font-size: 22px; } &__list { @@ -1001,63 +1046,61 @@ body { } } -.shapes{ - grid-column: 1 / -1; +.shapes { display: flex; + grid-column: 1 / -1; flex-direction: column; - justify-content: center; align-items: center; + justify-content: center; - background-color: $white-color; + padding: 130px 0; + background-color: $white-color; background-image: url('/Users/evg3n/projects/Mate_academy/layout_dia/src/images/bg_shapes.png'); background-repeat: no-repeat; background-position: center; background-size: contain; - padding: 130px 0; - &__title { - font-family: Poppins; - font-weight: 600; + margin-bottom: 24px; + + font-family: Poppins, sans-serif; font-size: 32px; + font-weight: 600; line-height: 150%; - letter-spacing: 0px; + color: $dark-blue; text-align: center; + letter-spacing: 0; vertical-align: middle; - - margin-bottom: 24px; - - color: $dark-blue; } &__desc { - font-family: Open Sans; - font-weight: 600; - font-size: 24px; - line-height: 150%; - letter-spacing: 0px; - text-align: center; - width: 40%; margin-bottom: 64px; + font-family: Poppins, sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 150%; color: $light-gray; + text-align: center; + letter-spacing: 0; } &__btn { - background-color: $secondary-color; - color: $white-color; - border-radius: 80px; - border:none; padding: 16px 100px; + border: none; + border-radius: 80px; - font-family: Poppins; - font-weight: 600; + font-family: Poppins, sans-serif; font-size: 15px; + font-weight: 600; line-height: 100%; - letter-spacing: 0px; + color: $white-color; text-align: center; + letter-spacing: 0; + + background-color: $secondary-color; } @media (max-width: 768px) { @@ -1067,56 +1110,64 @@ body { } } +.hero__info__btn, +.shapes__btn { + transition: all 0.3s ease; + + &:hover { + cursor: pointer; + background-color: #f55d5d; + } +} + .info-wrapper { - grid-column: 1 / -1; display: flex; + grid-column: 1 / -1; flex-direction: column; - justify-content: center; align-items: center; + justify-content: center; background-color: $white-color; - .info { + display: grid; + grid-template-columns: repeat(12, 1fr); + width: 100%; padding: 130px 0; - background-color: $primary-color; - color: $white-color; border-top-right-radius: $border-radius; - display: grid; - grid-template-columns: repeat(12, 1fr); + color: $white-color; + + background-color: $primary-color; &__message { - grid-column: 2 / 7; display: flex; + grid-column: 2 / 7; flex-direction: column; - justify-content: center; align-items: start; - - font-family: Poppins; - font-weight: 600; - font-size: 15px; - line-height: 100%; - letter-spacing: 0px; + justify-content: center; padding: 16px 0; + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 100%; + letter-spacing: 0; &__title { - font-family: Poppins; - font-weight: 600; - font-size: 32px; - line-height: 150%; - letter-spacing: 0px; - vertical-align: middle; - margin-bottom: 60px; + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 150%; color: $white-color; + letter-spacing: 0; + vertical-align: middle; } - &__inputs { display: flex; flex-direction: column; @@ -1125,32 +1176,43 @@ body { } input { - background-color: transparent; - border:none; - border-bottom: 1px solid $white-color; + width: 100%; padding: 12px 16px 12px 0; - color: $white-color; + border: none; + border-bottom: 1px solid $white-color; + font-size: 14px; - width: 100%; + color: $white-color; + + background-color: transparent; + + &::placeholder { + color: $white-color; + opacity: 0.7; + } &:focus { + border-bottom: 2px solid $white-color; outline: none; - border-bottom: 2px solid $white-color; } - - &::placeholder { - color: $white-color; - opacity: 0.7; - } } &__btn { - background-color: $secondary-color; - color: $white-color; - border-radius: 80px; - border:none; - padding: 16px 100px; margin-top: 80px; + padding: 16px 100px; + border: none; + border-radius: 80px; + + color: $white-color; + + background-color: $secondary-color; + + transition: all 0.3s ease; + + &:hover { + cursor: pointer; + background-color: #f55d5d; + } } @media (max-width: 768px) { @@ -1159,28 +1221,28 @@ body { } &__contact { - grid-column: 8 / 12; display: flex; + grid-column: 8 / 12; flex-direction: column; align-items: start; - font-family: Poppins; - font-weight: 600; + padding: 16px 0; + + font-family: Poppins, sans-serif; font-size: 15px; + font-weight: 600; line-height: 100%; - letter-spacing: 0px; - - padding: 16px 0; + letter-spacing: 0; &__title { - font-family: Poppins; - font-weight: 600; + margin-bottom: 60px; + + font-family: Poppins, sans-serif; font-size: 32px; + font-weight: 600; line-height: 150%; - letter-spacing: 0px; + letter-spacing: 0; vertical-align: middle; - - margin-bottom: 60px; } &__call-us { @@ -1191,30 +1253,32 @@ body { margin-bottom: 60px; } - &__call-us, &__visit-us { + &__call-us, + &__visit-us { display: flex; flex-direction: column; &__label { - opacity: 0.7; - font-family: Poppins; - font-weight: 700; + font-family: Poppins, sans-serif; font-size: 13px; + font-weight: 700; line-height: 100%; - letter-spacing: 3px; text-transform: uppercase; + letter-spacing: 3px; + + opacity: 0.7; } } - &__phone, &__address { - font-family: Open Sans; - font-weight: 600; + &__phone, + &__address { + font-family: Poppins, sans-serif; font-size: 24px; + font-weight: 600; line-height: 150%; - letter-spacing: 0px; - text-decoration: none; - color: $white-color; + text-decoration: none; + letter-spacing: 0; } &__socials { @@ -1223,14 +1287,14 @@ body { gap: 16px; &__title { - opacity: 0.7; - font-family: Poppins; - font-weight: 700; + font-family: Poppins, sans-serif; font-size: 13px; + font-weight: 700; line-height: 100%; - letter-spacing: 3px; text-transform: uppercase; + letter-spacing: 3px; + opacity: 0.7; } &__icons { @@ -1243,30 +1307,31 @@ body { grid-column: 2 / 12; } } + @media (max-width: 768px) { padding: 50px 0; } } - } .footer { - grid-column: 1 / -1; display: flex; - justify-content: space-around; + grid-column: 1 / -1; align-items: center; + justify-content: space-around; + padding: 48px 0; - - background-color: $primary-color; - color: $white-color; - font-family: Poppins; - font-weight: 700; + font-family: Poppins, sans-serif; font-size: 13px; + font-weight: 700; line-height: 150%; - letter-spacing: 3px; + color: $white-color; text-align: center; text-transform: uppercase; + letter-spacing: 3px; + + background-color: $primary-color; a { color: $white-color; @@ -1284,26 +1349,18 @@ body { @media (max-width: 768px) { flex-direction: column; - align-items: start; gap: 16px; + align-items: start; padding: 0 calc(100% / 10); } @media (max-width: 480px) { gap: 48px; &__menu { - gap: 16px; flex-direction: column; + gap: 24px; align-items: start; + margin-bottom: 80px; } } } - -.hero__info__btn, .shapes__btn, .info__message__btn { - transition: all 0.3s ease; - - &:hover { - cursor: pointer; - background-color: darken($secondary-color, 10%); - } -} \ No newline at end of file From 998dfe92d9951a5813e265206af40229bce580b3 Mon Sep 17 00:00:00 2001 From: Evgen Gulevaty Date: Mon, 11 May 2026 18:07:17 +0300 Subject: [PATCH 3/5] fix: add hover to elements, remove autofills style, fix submit form --- index.html | 12 +-- src/scripts/main.js | 5 + src/styles/main.scss | 234 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 245 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 5a3223a9db..7f75b736e8 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@
- +
@@ -39,7 +39,7 @@
hire us
-
+
Strategic Agency
We believe in the power of bold ideas that
can solve business challenges.
@@ -239,7 +239,7 @@

Who We Are

-
+
Send us a message
- -
+ +
Contact us
@@ -287,7 +287,7 @@

Who We Are

- +
about us services diff --git a/src/scripts/main.js b/src/scripts/main.js index c109aaba87..13fb4f3349 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -79,4 +79,9 @@ document.querySelectorAll('.header__menu-item').forEach(item => { // закриття по Escape document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeMenu(); +}); + +document.querySelector('.info__message').addEventListener('submit', (e) => { + e.preventDefault(); + e.target.reset(); }); \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 3de4269718..b5de8c22a1 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -4,6 +4,9 @@ @import 'https://fonts.googleapis.com/css2?family=Poppins, sans-serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'; +// stylelint-disable no-descending-specificity +// stylelint-disable no-duplicate-selectors + // On phone gap is 20px, 2 columns. // Tablet - 30px, 6 columns. // Desktop - 20px, 12 columns. @@ -80,6 +83,10 @@ body { &__logo { font-size: 24px; + + &:hover { + cursor: pointer; + } } &__burger { @@ -1191,6 +1198,16 @@ body { opacity: 0.7; } + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + -webkit-box-shadow: 0 0 0 1000px $primary-color inset; + caret-color: $white-color; + transition: background-color 5000s ease-in-out 0s; + + -webkit-text-fill-color: $white-color; + } + &:focus { border-bottom: 2px solid $white-color; outline: none; @@ -1364,3 +1381,220 @@ body { } } } + + + +// ─── Hovers ───────────────────────────────────── +a, button, [class*="__btn"], [class*="__burger"], [class*="__hire-us"] { + cursor: pointer; +} + +// ─── Header ─────────────────────────────────────────────── +.header { + &__menu-item { + position: relative; + transition: opacity 0.2s ease; + + &::after { + content: ''; + + position: absolute; + bottom: -4px; + left: 0; + + width: 0; + height: 2px; + + background-color: $white-color; + + transition: width 0.3s ease; + } + + &:hover { + opacity: 0.8; + + &::after { + width: 100%; + } + } + } + + &__hire-us { + transition: opacity 0.2s ease; + + &:hover { + opacity: 0.8; + } + } + + &__logo { + transition: opacity 0.2s ease; + + &:hover { + opacity: 0.7; + } + } +} + +// ─── Hero ───────────────────────────────────────────────── +.hero { + &__info__btn { + transition: background-color 0.3s ease, transform 0.2s ease; + + &:hover { + transform: translateY(-2px); + background-color: #f55d5d; + } + + &:active { + transform: translateY(0); + } + } + + &__carousel__btn { + &:active { + transform: scale(0.95); + } + } +} + +// ─── Services ───────────────────────────────────────────── +.services { + &__item { + transition: transform 0.25s ease, box-shadow 0.25s ease; + + &:hover { + transform: translateY(-4px); + box-shadow: 4px 8px 20px rgba(0, 0, 0, 0.12); + } + + &__btn { + transition: transform 0.2s ease, opacity 0.2s ease; + + &:hover { + transform: scale(1.1); + opacity: 0.85; + } + } + + &__footer:hover &__btn-text { + opacity: 0.7; + } + + &__btn-text { + transition: opacity 0.2s ease; + } + } +} + +// ─── Testimonials ───────────────────────────────────────── +.testimonials { + &__item { + transition: transform 0.25s ease, box-shadow 0.25s ease; + + &:hover { + transform: translateY(-4px); + box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.08); + } + } +} + +// ─── Shapes ─────────────────────────────────────────────── +.shapes { + &__btn { + transition: background-color 0.3s ease, transform 0.2s ease; + + &:hover { + transform: translateY(-2px); + background-color: #f55d5d; + } + + &:active { + transform: translateY(0); + } + } +} + +// ─── Contact form ───────────────────────────────────────── +.info { + &__message { + input { + transition: border-bottom 0.2s ease, padding-bottom 0.2s ease; + } + + &__btn { + transition: background-color 0.3s ease, transform 0.2s ease; + + &:hover { + transform: translateY(-2px); + background-color: #f55d5d; + } + + &:active { + transform: translateY(0); + } + } + } + + &__contact { + &__phone, + &__address { + transition: opacity 0.2s ease; + + &:hover { + opacity: 0.7; + } + } + + &__socials { + img { + transition: transform 0.2s ease, opacity 0.2s ease; + + &:hover { + transform: scale(1.15); + opacity: 0.8; + } + } + } + } +} + +// ─── Footer ─────────────────────────────────────────────── +.footer { + &__menu-item, + a { + position: relative; + transition: opacity 0.2s ease; + + &::after { + content: ''; + + position: absolute; + bottom: -4px; + left: 0; + + width: 0; + height: 2px; + + background-color: $white-color; + + transition: width 0.3s ease; + } + + &:hover { + opacity: 0.8; + + &::after { + width: 100%; + } + } + } + + &__logo { + transition: opacity 0.2s ease; + + &:hover { + opacity: 0.7; + } + } +} \ No newline at end of file From eda93153c08abfdc8c5e6349f07c07a4fb90e8b7 Mon Sep 17 00:00:00 2001 From: Evgen Gulevaty Date: Tue, 12 May 2026 08:20:12 +0300 Subject: [PATCH 4/5] fix: decrease space after services block, make required field for form and make font the same at number services --- index.html | 8 ++++---- src/styles/main.scss | 47 +++++++++++++++++++++++++++++++------------- 2 files changed, 37 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 7f75b736e8..03e453fcdf 100644 --- a/index.html +++ b/index.html @@ -243,13 +243,13 @@

Who We Are

Send us a message
- +
- +
@@ -266,7 +266,7 @@

Who We Are

Visit us
- 2905 West Drive, Buffalo Grove + 2905 West Drive, Buffalo Grove
Our socials
diff --git a/src/styles/main.scss b/src/styles/main.scss index b5de8c22a1..e58a7febf5 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -588,7 +588,7 @@ body { grid-template-columns: 1fr repeat(3, 2fr) repeat(3, 1fr) repeat(4, 2fr) 1fr; grid-template-rows: repeat(5, 1fr); - padding: 150px 0; + padding: 130px 0; &__info { display: flex; @@ -649,6 +649,7 @@ body { width: min-content; padding: 2px 10px; border-radius: 20px; + font-family: Poppins, sans-serif; } &__desc { @@ -809,7 +810,7 @@ body { display: flex; grid-column: 2 / -2; flex-direction: column; - padding: 150px 0; + padding-bottom: 100px; &__sub-title { margin-bottom: 16px; @@ -1382,10 +1383,12 @@ body { } } - - // ─── Hovers ───────────────────────────────────── -a, button, [class*="__btn"], [class*="__burger"], [class*="__hire-us"] { +a, +button, +[class*='__btn'], +[class*='__burger'], +[class*='__hire-us'] { cursor: pointer; } @@ -1439,7 +1442,9 @@ a, button, [class*="__btn"], [class*="__burger"], [class*="__hire-us"] { // ─── Hero ───────────────────────────────────────────────── .hero { &__info__btn { - transition: background-color 0.3s ease, transform 0.2s ease; + transition: + background-color 0.3s ease, + transform 0.2s ease; &:hover { transform: translateY(-2px); @@ -1461,7 +1466,9 @@ a, button, [class*="__btn"], [class*="__burger"], [class*="__hire-us"] { // ─── Services ───────────────────────────────────────────── .services { &__item { - transition: transform 0.25s ease, box-shadow 0.25s ease; + transition: + transform 0.25s ease, + box-shadow 0.25s ease; &:hover { transform: translateY(-4px); @@ -1469,7 +1476,9 @@ a, button, [class*="__btn"], [class*="__burger"], [class*="__hire-us"] { } &__btn { - transition: transform 0.2s ease, opacity 0.2s ease; + transition: + transform 0.2s ease, + opacity 0.2s ease; &:hover { transform: scale(1.1); @@ -1490,7 +1499,9 @@ a, button, [class*="__btn"], [class*="__burger"], [class*="__hire-us"] { // ─── Testimonials ───────────────────────────────────────── .testimonials { &__item { - transition: transform 0.25s ease, box-shadow 0.25s ease; + transition: + transform 0.25s ease, + box-shadow 0.25s ease; &:hover { transform: translateY(-4px); @@ -1502,7 +1513,9 @@ a, button, [class*="__btn"], [class*="__burger"], [class*="__hire-us"] { // ─── Shapes ─────────────────────────────────────────────── .shapes { &__btn { - transition: background-color 0.3s ease, transform 0.2s ease; + transition: + background-color 0.3s ease, + transform 0.2s ease; &:hover { transform: translateY(-2px); @@ -1519,11 +1532,15 @@ a, button, [class*="__btn"], [class*="__burger"], [class*="__hire-us"] { .info { &__message { input { - transition: border-bottom 0.2s ease, padding-bottom 0.2s ease; + transition: + border-bottom 0.2s ease, + padding-bottom 0.2s ease; } &__btn { - transition: background-color 0.3s ease, transform 0.2s ease; + transition: + background-color 0.3s ease, + transform 0.2s ease; &:hover { transform: translateY(-2px); @@ -1548,7 +1565,9 @@ a, button, [class*="__btn"], [class*="__burger"], [class*="__hire-us"] { &__socials { img { - transition: transform 0.2s ease, opacity 0.2s ease; + transition: + transform 0.2s ease, + opacity 0.2s ease; &:hover { transform: scale(1.15); @@ -1597,4 +1616,4 @@ a, button, [class*="__btn"], [class*="__burger"], [class*="__hire-us"] { opacity: 0.7; } } -} \ No newline at end of file +} From 9f914e336903f1c6812605114cb5a8de32bccac5 Mon Sep 17 00:00:00 2001 From: Evgen Gulevaty Date: Tue, 12 May 2026 16:33:08 +0300 Subject: [PATCH 5/5] fix: form reloading, add favicon, fix fonts at carousel --- index.html | 12 +++------- src/images/logo.svg | 5 +++++ src/scripts/main.js | 52 +++++++++++++++++++++++++++++++++++--------- src/styles/main.scss | 39 +++++++++++++++++++++++++++++++++ 4 files changed, 89 insertions(+), 19 deletions(-) create mode 100644 src/images/logo.svg diff --git a/index.html b/index.html index 03e453fcdf..d18815ad8b 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> + @@ -21,7 +22,6 @@
-
@@ -30,6 +30,7 @@
+ about us services work @@ -49,13 +50,6 @@
- - -
Architecture @@ -239,7 +233,7 @@

Who We Are

-
+
Send us a message