diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 000000000..8b5743ecb --- /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/index.html b/index.html index d339e6856..1f81ecde9 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,266 @@ - + - Title + Creative bakery + + + + - -

Hello Mate Academy

+ + + +
+
+

What we bake

+

+ We can customize our cookies right for your needs. Just imagine it +

+
+
+ Oatmeal cookies + Cakes +

+ Oatmeal cookies with golden raisins, orange zest and chocolate chips +

+ +
+
+ Chocolate biscuit + Cakes +

+ Chocolate biscuit coffee cake topped with a buttercream and powder +

+ +
+
+
+
+ Multi-layered croissant + Donuts +

+ Light multi-layered croissant strewn with cinammon and almond “petals” +

+ +
+
+ Multi-layered croissant + Donuts +

+ Light multi-layered croissant strewn with coconut and nuts +

+ +
+
+
+
+ Chocolate salted caramel, Vanilla frutti pebbles + Cakes +

+ Chocolate salted caramel, Vanilla frutti pebbles +

+ +
+
+ Oatmeal cookies + Cookies +

+ Oatmeal cookies with golden raisins, orange zest and chocolate chips +

+ +
+
+
+ +
+
+

Few words About us

+

Like many design teams, Onfido made the transition from Abstract + Sketch, to Figma in the last couple of years. One of the common resistance points internally before making that switch, was Figma’s lack of Git-style branching that Abstract enabled. The design team had come to rely on branching and had built a lot of our processes around it. +

+
+
+
+
+

2015

+

Founded

+
+
+

23

+

Stores

+
+
+
+
+

155

+

Companies

+
+
+

10k+

+

Clients

+
+
+
+
+
+ + diff --git a/package-lock.json b/package-lock.json index d5f989323..b0712f389 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 2500d08d2..946d86d78 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/Cookie-header.png b/src/images/Cookie-header.png new file mode 100644 index 000000000..b06b20c1f Binary files /dev/null and b/src/images/Cookie-header.png differ diff --git a/src/images/Crumbs-background.png b/src/images/Crumbs-background.png new file mode 100644 index 000000000..5a73a1a9e Binary files /dev/null and b/src/images/Crumbs-background.png differ diff --git a/src/images/Icon-arrow.png b/src/images/Icon-arrow.png new file mode 100644 index 000000000..6a7c66766 Binary files /dev/null and b/src/images/Icon-arrow.png differ diff --git a/src/images/Icon-cookie-disabled.png b/src/images/Icon-cookie-disabled.png new file mode 100644 index 000000000..956bcb92a Binary files /dev/null and b/src/images/Icon-cookie-disabled.png differ diff --git a/src/images/Icon-cookie-hover.png b/src/images/Icon-cookie-hover.png new file mode 100644 index 000000000..43373c333 Binary files /dev/null and b/src/images/Icon-cookie-hover.png differ diff --git a/src/images/Icon-cookie.png b/src/images/Icon-cookie.png new file mode 100644 index 000000000..e87ecb3a0 Binary files /dev/null and b/src/images/Icon-cookie.png differ diff --git a/src/images/Icon-facebook.png b/src/images/Icon-facebook.png new file mode 100644 index 000000000..699cb3af4 Binary files /dev/null and b/src/images/Icon-facebook.png differ diff --git a/src/images/Icon-instagram.png b/src/images/Icon-instagram.png new file mode 100644 index 000000000..f89529f43 Binary files /dev/null and b/src/images/Icon-instagram.png differ diff --git a/src/images/Icon-phone.png b/src/images/Icon-phone.png new file mode 100644 index 000000000..7c4997a06 Binary files /dev/null and b/src/images/Icon-phone.png differ diff --git a/src/images/Icon-twitter.png b/src/images/Icon-twitter.png new file mode 100644 index 000000000..1151a8ae4 Binary files /dev/null and b/src/images/Icon-twitter.png differ diff --git a/src/images/Products/Cake-1.png b/src/images/Products/Cake-1.png new file mode 100644 index 000000000..eff690b3d Binary files /dev/null and b/src/images/Products/Cake-1.png differ diff --git a/src/images/Products/Cake-2.png b/src/images/Products/Cake-2.png new file mode 100644 index 000000000..997b3b76c Binary files /dev/null and b/src/images/Products/Cake-2.png differ diff --git a/src/images/Products/Cake-5.png b/src/images/Products/Cake-5.png new file mode 100644 index 000000000..4df8c1794 Binary files /dev/null and b/src/images/Products/Cake-5.png differ diff --git a/src/images/Products/Cookie-6.png b/src/images/Products/Cookie-6.png new file mode 100644 index 000000000..bc7243875 Binary files /dev/null and b/src/images/Products/Cookie-6.png differ diff --git a/src/images/Products/Donuts-3.png b/src/images/Products/Donuts-3.png new file mode 100644 index 000000000..325b88c4c Binary files /dev/null and b/src/images/Products/Donuts-3.png differ diff --git a/src/images/Products/Donuts-4.png b/src/images/Products/Donuts-4.png new file mode 100644 index 000000000..55ed73983 Binary files /dev/null and b/src/images/Products/Donuts-4.png differ diff --git a/src/images/favicon.png b/src/images/favicon.png new file mode 100644 index 000000000..38b615615 Binary files /dev/null and b/src/images/favicon.png differ diff --git a/src/images/top-bar/Icon-close.png b/src/images/top-bar/Icon-close.png new file mode 100644 index 000000000..6d98dc3af Binary files /dev/null and b/src/images/top-bar/Icon-close.png differ diff --git a/src/images/top-bar/Icon-menu.png b/src/images/top-bar/Icon-menu.png new file mode 100644 index 000000000..08b73fd64 Binary files /dev/null and b/src/images/top-bar/Icon-menu.png differ diff --git a/src/images/top-bar/Logo-white.png b/src/images/top-bar/Logo-white.png new file mode 100644 index 000000000..00846af4c Binary files /dev/null and b/src/images/top-bar/Logo-white.png differ diff --git a/src/images/top-bar/Logo.png b/src/images/top-bar/Logo.png new file mode 100644 index 000000000..5e4d2f130 Binary files /dev/null and b/src/images/top-bar/Logo.png differ diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe1..57df54497 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,73 @@ @import 'utils/vars'; @import 'utils/mixins'; @import 'utils/extends'; + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-dekstop { + @media (min-width: $dekstop-min-width) { + @content; + } +} + +@mixin on-max { + @media (min-width: $max-min-width) { + @content; + } +} + +@mixin margin-inline { + margin-inline: 16px; + + @media (min-width: $tablet-min-width) { + margin-inline: 44px; + } + + @media (min-width: $max-min-width) { + margin-inline: 124px; + } +} + +@mixin padding-inline { + padding-inline: 16px; + + @media (min-width: $tablet-min-width) { + padding-inline: 44px; + } + + @media (min-width: $max-min-width) { + padding-inline: 124px; + } +} + +@mixin top-bar-margin-inline { + margin-inline: 16px; + + @media (min-width: $dekstop-min-width) { + margin-inline: 32px; + } +} + +@mixin product-img-size { + width: 100%; + aspect-ratio: 326 / 328; // 🔥 як у твоєму макеті + height: auto; // можна лишити, але не обов’язково + object-fit: cover; + display: block; + + @include on-dekstop { + width: 402px; + height: 648px; + } +} + +@mixin icon-size { + width: 24px; + height: 24px; +} + + diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 000000000..c6f98f93f --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,135 @@ +.about-us { + @include padding-inline; + + padding-bottom: 72px; + + @include on-tablet { + padding-bottom: 152px; + } + + background-image: url(../images/Crumbs-background.png); + background-size: cover; + background-repeat: no-repeat; + background-position: 0 450px; + height: 100vh; + + @include on-tablet { + background-position: 0 50px; + } + + &__main { + @include on-tablet { + display: flex; + gap: 24px; + + padding-top: 152px; + + @include on-dekstop { + padding-top: 178px; + } + } + } + + &__title { + margin: 72px 0 0; + + font-family: $font-family; + font-weight: 400; + font-size: 48px; + line-height: 85%; + letter-spacing: -5%; + text-transform: uppercase; + color: $accent-orange; + + @include on-tablet { + width: 328px; + margin: 0; + } + + @include on-dekstop { + width: 544px; + font-size: 72px; + } + } + + &__description { + margin: 32px 0 0; + + font-family: $font-family; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + color: $main-text-color; + + @include on-tablet { + width: 328px; + margin: 0; + } + + @include on-dekstop { + width: 550px; + } + } + + &__statistic { + display: flex; + flex-direction: column; + gap: 48px; + + margin-top: 64px; + + @include on-tablet { + gap: 80px; + } + + @include on-dekstop { + flex-direction: row; + + margin-top: 144px; + } + } + + &__tablet { + display: flex; + flex-direction: column; + gap: 48px; + + @include on-tablet{ + display: flex; + flex-direction: row; + gap: 24px; + } + } + + &__content { + width: 328px; + + @include on-dekstop { + width: 260px; + } + } + + &__number { + margin: 0; + + font-family: $font-family; + font-weight: 400; + font-size: 96px; + line-height: 85%; + letter-spacing: -5%; + text-transform: uppercase; + color: $accent-orange; + } + + &__text { + margin: 0; + + font-family: $font-family; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + color: $main-text-color; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..b9ed0e523 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,225 @@ +.header { + min-height: 100vh; + + &__content { + @include padding-inline; + + @include on-tablet { + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 178px; + } + } + + &__description { + font-family: $font-family; + font-size: 16px; + font-weight: 400; + font-style: normal; + line-height: 150%; + text-align: center; + letter-spacing: -0.01em; + + margin-top: 32px; + margin-bottom: 0; + + @include on-tablet { + text-align: left; + width: 280px; + + margin-top: 80px; + + @include on-dekstop { + transform: translateY(100px); + } + } + } + + &__title { + display: flex; + flex-wrap: wrap; + place-content: center; + + font-family: $font-family; + font-weight: 400; + font-size: 64px; + font-style: normal; + line-height: 85%; + text-align: center; + letter-spacing: -5%; + color: $accent-orange; + text-transform: uppercase; + + margin-top: 32px; + margin-bottom: 0; + + @include on-tablet { + transform: translateY(-60px); + font-size: 80px; + } + + @include on-dekstop { + transform: translateY(-90px); + font-size: 136px; + } + } + + &__img--desktop { + display: none; + + @include on-tablet { + display: block; + + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -40%); + width: 326px; + height: 328px; + + background-image: url(../images/Cookie-header.png); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + pointer-events: none; + + @include on-dekstop { + width: 544px; + height: 546px; + } + } + } + + &__img--mobile { + width: 100%; + height: auto; + + @include on-tablet { + display: none; + } + } + + &__button { + display: flex; + justify-content: center; + + @include on-dekstop { + justify-content: flex-start; + transform: translateY(-200px); + } + } + + &__button-more { + position: relative; + + display: flex; + align-items: center; + justify-content: center; + + width: 288px; + height: 56px; + padding: 0; + + border: 2px solid $accent-orange; + border-radius: 32px; + background: none; + + cursor: pointer; + + color: $accent-orange; + + font-family: $font-family; + font-weight: 500; + font-size: 16px; + font-style: normal; + line-height: 100%; + text-transform: uppercase; + letter-spacing: 2%; + + transition: all $transition-duration; + } + + &__button-more::before { + content: ''; + + @include icon-size; + + display: inline-block; + + margin-right: 4px; + + background-image: url(../images/Icon-cookie.png); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + + transition: all $transition-duration; + } + + &__button-more:hover { + background-color: $accent-orange; + color: $white; + } + + &__button-more:hover::before { + content: ''; + + @include icon-size; + + display: inline-block; + + margin-right: 4px; + + background-image: url(../images/Icon-cookie-hover.png); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + } + + &__button-more:focus { + background-color: $focused-button-color; + border-color: $focused-button-color; + outline: none; + color: $white; + } + + &__button-more:focus::before { + content: ''; + + @include icon-size; + + display: inline-block; + + margin-right: 4px; + + background-image: url(../images/Icon-cookie-hover.png); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + } + + &__button-more:disabled { + color: $disabled-button-color; + background-color: transparent; + border-color: $disabled-button-color; + } + + &__button-more:disabled::before { + content: ''; + + @include icon-size; + + display: inline-block; + + margin-right: 4px; + + background-image: url(../images/Icon-cookie-disabled.png); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + } +} + diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..3b5685ac9 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,117 @@ +.page__menu { + position: fixed; + inset: 0; // це = top:0 right:0 bottom:0 left:0 + opacity: 0; + pointer-events: none; + + display: grid; + + background-color: $page-color; + + transition: all $transition-duration ease-in-out; + transform: translateX(-100%); + + @include on-dekstop { + display: none; + } +} + +.page__menu:target { + opacity: 1; + pointer-events: auto; + transform: translateX(0); +} + +.menu__nav { + position: absolute; + inset: 0; + + display: grid; + place-items: center; +} + +.nav { + &__list { + display: flex; + flex-direction: column; + gap: 24px; + padding: 0; + + margin: 0; +} + + &__item { + list-style: none; + text-align: center; + } + + &__link { + display: flex; + justify-content: center; + + position: relative; + text-decoration: none; + color: $main-text-color; + + font-family: $font-family; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + + &::after { + content: ''; + position: absolute; + display: block; + justify-content: center; + height: 1px; + width: 100%; + bottom: -8px; + background-color: $main-text-color; + + transition: transform $transition-duration; + transform: scale(0); + transform-origin: center; + } + + &:hover::after { + transform: scale(1); + } + } + + &__link--contact { + display: flex; + align-items: center; + gap: 4px; + + font-family: $font-family; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 2%; + text-transform: uppercase; + color: $accent-orange; + + margin-top: 8px; + } + + &__link--contact::before { + content: ''; + + @include icon-size; + + display: inline-block; + + background-image: url(../images/Icon-phone.png); + background-size: contain; + } +} + +html:has(.page__menu:target), +body:has(.page__menu:target) { + overflow: hidden; // прибирає скрол сторінки + height: 100%; +} + +// якщо всередині сторінки є .page__menu:target (тобто URL = #menu) → html і body перестають скролитись. + diff --git a/src/styles/blocks/products.scss b/src/styles/blocks/products.scss new file mode 100644 index 000000000..c128dbebe --- /dev/null +++ b/src/styles/blocks/products.scss @@ -0,0 +1,144 @@ +.product { + @include margin-inline; + + &__content--tablet { + display: flex; + gap: 24px; + } + + &__content--desktop { + display: flex; + justify-content: flex-end; + } + + &__title { + margin: 104px 0 0; + + @include on-tablet { + margin-top: 200px; + + font-size: 56px; + } + + @include on-dekstop { + font-size: 72px; + } + + font-family: $font-family; + font-weight: 400; + font-size: 48px; + line-height: 85%; + letter-spacing: -5%; + text-transform: uppercase; + color: $accent-orange; + } + + &__description { + margin: 24px 0 0; + + font-family: $font-family; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + color: $main-text-color; + } +} + +.goods { + margin-top: 56px; + + @include on-tablet { + margin-top: 80px; + } + + @include on-dekstop { + max-width: 402px; + } + + &__img{ + @include product-img-size; + + object-fit: cover; + border-radius: 8px; + + margin-bottom: 16px; + transition: transform $transition-duration ease; + } + + &__img:hover { + transform: scale($scale); + } + + &__category { + font-family: $font-family; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 2%; + text-transform: uppercase; + color: $text-color-grey; + + text-decoration: none; + } + + &__description { + font-family: $font-family; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + color: $main-text-color; + } + + &__button { + display: flex; + align-items: center; + gap: 4px; + justify-content: flex-start; + margin-top: 16px; + padding: 0; + + border: none; + background: none; + + cursor: pointer; + + font-family: $font-family; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 2%; + text-transform: uppercase; + color: $accent-orange; + } + + &__button::before { + content: ''; + + @include icon-size; + + display: inline-block; + + background-image: url(../images/Icon-arrow.png); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + } + + &__button:hover { + @keyframes order { + 0%{ + transform: translateX(0); + } + 50% { + transform: translateX(10px); + } + 100% { + transform: translateX(0); + } + } + + animation: order 0.6s ease-in-out; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..7774da081 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,137 @@ +.top-bar { + display: flex; + justify-content: space-between; + padding-block: 16px; + + @include top-bar-margin-inline; + + &__logo { + background-image: url(../images/top-bar/Logo.png); + width: 136px; + height: 32px; + background-size: contain; + + transition: all $transition-duration ease; + } + + &__logo:hover { + transform: scale($scale); + } + + &__icon-menu { + display: block; + background-image: url(../images/top-bar/Icon-menu.png); + + @include icon-size; + + background-size: contain; + + align-self: center; + + transition: all $transition-duration ease; + + @include on-dekstop { + display: none; + } + } + + &__icon-menu:hover { + transform: scale($scale); + } + + &__icon-close { + background-image: url(../images/top-bar/Icon-close.png); + + @include icon-size; + + background-size: contain; + + align-self: center; + } + + &__icon-close:hover { + transform: scale($scale); + } + + &__nav { + display: none; + + @include on-dekstop { + display: block; + } + } + + &__nav-list { + display: flex; + flex-direction: row; + gap: 64px; + + list-style: none; + } + + &__nav-item { + display: flex; + flex-wrap: wrap; + place-content: center; + } + + &__nav-link { + text-decoration: none; + + font-family: $font-family; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + color: $main-text-color; + + transition: transform $transition-duration; + + &:hover { + transform: scale($scale); + } + } + + &__nav-link--contact { + display: flex; + justify-content: center; + align-items: center; + gap: 4px; + + font-family: $font-family; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 2%; + text-transform: uppercase; + color: $accent-orange; + + &::before { + content: ''; + + @include icon-size; + + display: inline-block; + background-image: url(../images/Icon-phone.png); + background-size: contain; + } + } + + + +} + +.menu__top-bar { + position: absolute; + top: 0; + left: 0; + right: 0; + + z-index: 2; + + @include top-bar-margin-inline; +} + +.footer__top-bar { + margin: 0; +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..b8d819b54 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,287 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import 'blocks/top-bar'; +@import 'blocks/header'; +@import 'blocks/menu'; +@import 'blocks/products'; +@import 'blocks/about-us'; -body { - background: $c-gray; +.page { + scroll-behavior: smooth; +} + +.page__body { + margin: 0; + background: $page-color; +} + +.footer { + @include padding-inline; + + background-color: $main-text-color; + + @include on-tablet { + display: grid; + grid-template-columns: auto auto; + } + + + &__top-bar { + padding: 0; + } + + &__nav { + display: flex; + flex-direction: column; + gap: 16px; + + padding-top: 40px; + + @include on-tablet { + padding-top: 64px; + } + } +} + +.top-bar { + + &__logo--white { + background-image: url(../images/top-bar/Logo-white.png); + } +} + +.nav { + + &__title { + font-family: $font-family; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 2%; + text-transform: uppercase; + color: $text-color-grey; + + margin: 0; + } + + &__list-footer { + display: flex; + flex-direction: column; + justify-content: flex-start; + gap: 16px; + list-style: none; + padding: 0; + margin: 0; + } + + &__link-footer { + position: relative; + color: $white; + text-decoration: none; + + font-family: $font-family; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + + &::after { + content: ''; + position: absolute; + bottom: -8px; + background-color: $white; + height: 1px; + display: block; + width: 100%; + + transition: transform $transition-duration; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + } + +} + +.contact-us { + margin-top: 64px; + + @include on-tablet { + display: flex; + flex-direction: column; + } + + &__title { + font-family: $font-family; + font-weight: 400; + font-size: 48px; + line-height: 85%; + letter-spacing: -5%; + text-transform: uppercase; + color: $white; + + margin: 0; + + max-width: 270px; + + @include on-tablet { + font-size: 56px; + } + + @include on-dekstop { + font-size: 72px; + max-width: 544px; + } + } + + &__information { + @include on-dekstop { + display: flex; + flex-direction: row; + gap: 24px; + } + } + + &__content { + display: flex; + flex-direction: column; + gap: 16px; + margin-top: 40px; + width: 260px; + + @include on-dekstop { + margin-top: 50px; + } + } + + &__description { + margin: 0; + + font-family: $font-family; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 2%; + text-transform: uppercase; + color: $text-color-grey; + } + + &__number { + position: relative; + width: max-content; + margin: 0; + + &::after { + content: ''; + position: absolute; + bottom: -8px; + background-color: $white; + height: 1px; + display: block; + width: 100%; + + transition: transform $transition-duration; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + } + + &__tel { + margin: 0; + + font-family: $font-family; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + color: $white; + text-decoration: none; + } + + &__info { + margin-top: 40px; + + display: flex; + flex-direction: column; + gap: 16px; + + @include on-dekstop { + margin-top: 50px; + } + } + + &__email { + margin: 0; + } + + &__link { + position: relative; + + font-family: $font-family; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + color: $white; + text-decoration: none; + + &::after { + content: ''; + position: absolute; + bottom: -8px; + background-color: $white; + height: 1px; + display: block; + width: 100%; + + transition: transform $transition-duration; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + } + + &__icons { + margin-top: 40px; + + display: flex; + gap: 32px; + + @include on-tablet { + align-self: flex-start + } + } + + &__icon { + @include icon-size; + + transition: transform $transition-duration; + + &:hover { + transform: scale(1.2); + } + } + + &__copy { + font-family: $font-family; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + color: $text-color-grey; + + margin: 0; + padding: 40px 0 56px; + } } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..958887168 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,14 @@ $c-gray: #eee; +$page-color: #FFEEFC; +$accent-orange: #F9512E; +$focused-button-color: #B2341A; +$disabled-button-color: #FBA28F; +$font-family: Inter, sans-serif; +$main-text-color: #1C1A26; +$text-color-grey: #7F8096; +$white: #fff; +$transition-duration: 0.3s; +$scale: 1.05; +$tablet-min-width: 576px; +$dekstop-min-width: 1024px; +$max-min-width: 1200px;