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/README.md b/README.md index 3a2fb5928..28855c4b7 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/dY 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_creativeBakery/). + [DEMO LINK](https://AngelaStrechen.github.io/layout_creativeBakery/). 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 d339e6856..6fa33cc6e 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,566 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + Creative Bakery + + + + - -

Hello Mate Academy

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

+ We bake your fantasies — croissants, cakes, cookies, and cupcakes. +

+ +

Creative bakery

+ +
+ Cookie +
+ + + + Learn more + +
+
+ +
+
+

What we bake

+ +

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

+ +
+
+ + +

Cakes

+ +

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

+ + + + + + Order + +
+ +
+ + +

Cakes

+ +

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

+ + + + + + Order + +
+ +
+ + +

Cakes

+ +

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

+ + + + + + Order + +
+ +
+ + +

Cakes

+ +

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

+ + + + + + Order + +
+ +
+ + +

Cakes

+ +

+ Chocolate salted caramel, Vanilla frutti pebbles +

+ + + + + + Order + +
+ +
+ + +

Cakes

+ +

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

+ + + + + + Order + +
+
+
+ +
+

+ 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

+

Foundation year

+
+ +
+

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/fonts/.gitkeep b/src/fonts/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d731..000000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/Crumbs.png b/src/images/Crumbs.png new file mode 100644 index 000000000..6f2c2d4e5 Binary files /dev/null and b/src/images/Crumbs.png differ diff --git a/src/images/card/Cake_1.jpg b/src/images/card/Cake_1.jpg new file mode 100644 index 000000000..a0c79585b Binary files /dev/null and b/src/images/card/Cake_1.jpg differ diff --git a/src/images/card/Cake_2.jpg b/src/images/card/Cake_2.jpg new file mode 100644 index 000000000..f73020652 Binary files /dev/null and b/src/images/card/Cake_2.jpg differ diff --git a/src/images/card/Cake_3.jpg b/src/images/card/Cake_3.jpg new file mode 100644 index 000000000..18e607ac4 Binary files /dev/null and b/src/images/card/Cake_3.jpg differ diff --git a/src/images/card/Cookies.jpg b/src/images/card/Cookies.jpg new file mode 100644 index 000000000..e25505913 Binary files /dev/null and b/src/images/card/Cookies.jpg differ diff --git a/src/images/card/Donut_1.jpg b/src/images/card/Donut_1.jpg new file mode 100644 index 000000000..b8a43f0bb Binary files /dev/null and b/src/images/card/Donut_1.jpg differ diff --git a/src/images/card/Donut_2.jpg b/src/images/card/Donut_2.jpg new file mode 100644 index 000000000..f9a569c39 Binary files /dev/null and b/src/images/card/Donut_2.jpg differ diff --git a/src/images/cookie.png b/src/images/cookie.png new file mode 100644 index 000000000..5effcf148 Binary files /dev/null and b/src/images/cookie.png differ diff --git a/src/images/icons/Bakerlab.svg b/src/images/icons/Bakerlab.svg new file mode 100644 index 000000000..c3a0f20e6 --- /dev/null +++ b/src/images/icons/Bakerlab.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/contact_us.svg b/src/images/icons/contact_us.svg new file mode 100644 index 000000000..b3c49f859 --- /dev/null +++ b/src/images/icons/contact_us.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-cookie.svg b/src/images/icons/icon-cookie.svg new file mode 100644 index 000000000..992115b32 --- /dev/null +++ b/src/images/icons/icon-cookie.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..6ed9992a5 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,56 @@ 'use strict'; + +const burger = document.querySelector('.burger'); +const menu = document.querySelector('.header__menu'); +const body = document.body; + +if (burger && menu) { + function openMenu() { + burger.classList.add('is-open'); + menu.classList.add('is-open'); + body.classList.add('no-scroll'); + + burger.setAttribute('aria-expanded', 'true'); + } + + function closeMenu() { + burger.classList.remove('is-open'); + menu.classList.remove('is-open'); + body.classList.remove('no-scroll'); + + burger.setAttribute('aria-expanded', 'false'); + } + + function toggleMenu() { + const isOpen = burger.classList.contains('is-open'); + + if (isOpen) { + closeMenu(); + } else { + openMenu(); + } + } + + // клік по бургеру + burger.addEventListener('click', (e) => { + e.stopPropagation(); + toggleMenu(); + }); + + // клік по документу (закриття якщо клік поза меню) + document.addEventListener('click', (e) => { + const isClickInsideMenu = menu.contains(e.target); + const isClickOnBurger = burger.contains(e.target); + + if (!isClickInsideMenu && !isClickOnBurger) { + closeMenu(); + } + }); + + // Esc для закриття + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape') { + closeMenu(); + } + }); +} diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd5400..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/base/_reset.scss b/src/styles/base/_reset.scss new file mode 100644 index 000000000..335158f56 --- /dev/null +++ b/src/styles/base/_reset.scss @@ -0,0 +1,76 @@ +/* 1. Box sizing */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* 2. Скидання відступів */ +* { + margin: 0; + padding: 0; +} + +/* 3. Базові налаштування html/body */ +html { + scroll-behavior: smooth; +} + +html, +body { + height: 100%; +} + +body { + -webkit-font-smoothing: antialiased; + + &.no-scroll { + overflow: hidden; + } +} + +/* 5. Форми */ +input, +button, +textarea, +select { + font: inherit; +} + +/* 6. Кнопки */ +button { + border: none; + background: none; +} + +/* 7. Списки */ +ul, +ol { + list-style: none; +} + +/* 8. Посилання */ +a { + color: inherit; + text-decoration: none; +} + +a, +button, +input[type='submit'], +input[type='button'], +input[type='checkbox'], +input[type='radio'], +label[for] { + cursor: pointer; +} + +/* 9. Заголовки */ +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: inherit; +} diff --git a/src/styles/_typography.scss b/src/styles/base/_typography.scss similarity index 100% rename from src/styles/_typography.scss rename to src/styles/base/_typography.scss diff --git a/src/styles/components/_about.scss b/src/styles/components/_about.scss new file mode 100644 index 000000000..404b687ae --- /dev/null +++ b/src/styles/components/_about.scss @@ -0,0 +1,148 @@ +.about { + position: relative; + overflow: hidden; + padding: 36px 16px 72px; + + &::before { + content: ''; + + position: absolute; + z-index: -2; + top: 190px; + + width: 100%; + height: 100%; + + background-image: url('/src/images/Crumbs.png'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + @include on-tablet { + inset: 0; + } + } + + @include on-tablet { + @include page-grid; + + padding: 0 44px 152px; + } + + @include on-desktop { + padding-bottom: 349px; + padding-inline: 124px; + } + + &__title { + margin-bottom: 32px; + + font-size: 48px; + line-height: 85%; + color: $accent-orange; + text-transform: uppercase; + letter-spacing: -5%; + + @include on-tablet { + grid-column: 1 /5; + font-size: 56px; + } + + @include on-desktop { + font-size: 72px; + } + } + + &__description { + margin-bottom: 64px; + + font-size: 16px; + line-height: 150%; + color: $black; + letter-spacing: -1%; + + @include on-tablet { + grid-column: 5 /-1; + margin-bottom: 72px; + } + + @include on-desktop { + margin-bottom: 146px; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 48px; + + @include on-small-tablet { + @include page-grid; + + grid-column: 1 / -1; + column-gap: 112px; + } + + @include on-desktop { + row-gap: 24px; + } + } + + &__item { + &-1, + &-3 { + @include on-tablet { + grid-column: 1 /5; + } + } + + &-2, + &-4 { + @include on-tablet { + grid-column: 5 /-1; + } + } + + &-1 { + @include on-desktop { + grid-column: 1/3; + } + } + + &-2 { + @include on-desktop { + grid-column: 3/5; + } + } + + &-3 { + @include on-desktop { + grid-column: 5/7; + } + } + + &-4 { + @include on-desktop { + grid-column: 7/-1; + } + } + } + + &__number { + margin-bottom: 8px; + + font-size: 96px; + font-style: normal; + line-height: 85%; + color: $accent-orange; + text-transform: uppercase; + letter-spacing: -5%; + } + + &__label { + font-size: 16px; + line-height: 150%; + color: $black; + letter-spacing: -1%; + } +} diff --git a/src/styles/components/_body.scss b/src/styles/components/_body.scss new file mode 100644 index 000000000..391b203f7 --- /dev/null +++ b/src/styles/components/_body.scss @@ -0,0 +1,6 @@ +.page_body { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: normal; + background: $light-pink; +} diff --git a/src/styles/components/_burger.scss b/src/styles/components/_burger.scss new file mode 100644 index 000000000..a19310534 --- /dev/null +++ b/src/styles/components/_burger.scss @@ -0,0 +1,44 @@ +.burger { + position: relative; + width: 24px; + height: 24px; + + @include on-desktop { + display: none; + } + + &__line { + position: absolute; + left: 2px; + transform-origin: center; + + width: 20px; + height: 2px; + + background-color: $black; + + transition: $effectDuration; + + &:nth-child(1) { + top: 6px; + } + + &:nth-child(2) { + top: 14px; + } + } + + &.is-open { + .burger__line { + &:nth-child(1) { + top: 11px; + transform: rotate(45deg); + } + + &:nth-child(2) { + top: 11px; + transform: rotate(-45deg); + } + } + } +} diff --git a/src/styles/components/_cards.scss b/src/styles/components/_cards.scss new file mode 100644 index 000000000..e9d08a7eb --- /dev/null +++ b/src/styles/components/_cards.scss @@ -0,0 +1,113 @@ +.card { + overflow: hidden; + + &-1, + &-3, + &-5 { + @include on-tablet { + grid-column: 1 /5; + } + } + + &-2, + &-4, + &-6 { + @include on-tablet { + grid-column: 5 /-1; + } + } + + &-1, + &-5 { + @include on-desktop { + grid-column: 1 /4; + } + } + + &-2, + &-6 { + @include on-desktop { + grid-column: 4 /7; + } + } + + &-3 { + @include on-desktop { + grid-column: 3 /6; + } + } + + &-4 { + @include on-desktop { + grid-column: 6 /-1; + } + } + + &__image { + aspect-ratio: 288 / 356; + width: 100%; + height: auto; + margin-bottom: 16px; + + object-fit: cover; + + transition: transform $effectDuration ease; + + @include on-tablet { + aspect-ratio: 328 / 424; + } + + @include on-desktop { + aspect-ratio: 402 / 512; + } + + @include on-large-desktop { + aspect-ratio: 432 / 560; + } + } + + &:hover &__image { + transform: scale(1.05); + } + + &__title { + margin-bottom: 8px; + + font-size: 16px; + font-weight: 500; + line-height: 100%; + color: $grey; + text-transform: uppercase; + letter-spacing: 2%; + } + + &__description { + margin-bottom: 16px; + + font-size: 16px; + line-height: 150%; + color: $black; + letter-spacing: -1%; + } + + &__button { + display: inline-flex; + gap: 8px; + align-items: center; + + font-size: 16px; + font-weight: 500; + line-height: 100%; + color: $accent-orange; + text-transform: uppercase; + letter-spacing: 2%; + + transition: + transform $effectDuration ease, + color $effectDuration ease; + + &:hover { + transform: translateX(4px); + } + } +} diff --git a/src/styles/components/_footer.scss b/src/styles/components/_footer.scss new file mode 100644 index 000000000..49c13b561 --- /dev/null +++ b/src/styles/components/_footer.scss @@ -0,0 +1,189 @@ +.footer { + padding: 56px 16px; + background-color: $black; + + @include on-tablet { + @include page-grid; + + padding: 93px 44px 88px; + } + + @include on-desktop { + padding: 88px 44px; + } + + @include on-desktop { + padding-inline: 124px; + } + + &__menu { + margin-bottom: 64px; + + @include on-tablet { + grid-column: 1 /4; + } + } + + &__logo { + display: inline-block; + margin-bottom: 45px; + + @include on-tablet { + margin-bottom: 101px; + } + + @include on-desktop { + margin-bottom: 66px; + } + + @include on-desktop { + padding-inline: 124px; + } + } + + &__phones { + margin-bottom: 40px; + } + + &__contacts { + @include on-tablet { + grid-column: 5 /-1; + } + + &-info { + @include on-desktop { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 24px; + } + } + + &-label { + margin-bottom: 16px; + + font-size: 16px; + font-weight: 500; + font-style: normal; + line-height: 100%; + color: $grey; + text-transform: uppercase; + letter-spacing: 2%; + } + + &-title { + margin-bottom: 40px; + padding-right: 100px; + + font-size: 48px; + line-height: 85%; + color: $white; + text-transform: uppercase; + letter-spacing: -5%; + + @include on-tablet { + font-size: 56px; + } + + @include on-desktop { + padding-right: 0; + font-size: 72px; + } + } + + &-link { + display: block; + + margin-bottom: 16px; + + font-size: 16px; + font-style: normal; + line-height: 150%; + color: $white; + letter-spacing: -1%; + + transition: color $effectDuration ease; + + &:hover, + &:focus-visible { + color: $light-orange; + } + } + } + + &__item { + margin-bottom: 16px; + } + + &__link { + position: relative; + + display: inline-block; + + font-size: 16px; + font-weight: 400; + line-height: 150%; + color: $white; + letter-spacing: -1%; + + &::after { + content: ''; + + position: absolute; + bottom: -4px; + left: 0; + transform-origin: center; + transform: scaleX(0); + + width: 100%; + height: 1px; + + background: currentColor; + + transition: transform $effectDuration ease; + } + + &:hover::after, + &:focus-visible::after { + transform: scaleX(1); + } + } + + &__email { + margin-bottom: 40px; + } + + &__social { + @include on-tablet { + grid-column: 1 /3; + } + + &-link { + display: inline-block; + + width: 24px; + margin-right: 32px; + margin-bottom: 40px; + + color: $accent-orange; + text-align: center; + + transition: color $effectDuration ease; + + &:hover, + &:focus-visible { + color: $light-orange; + } + } + } + + &__copyright { + font-size: 16px; + line-height: 150%; + color: $grey; + letter-spacing: -1%; + + @include on-tablet { + grid-column: 5 /-1; + } + } +} diff --git a/src/styles/components/_header.scss b/src/styles/components/_header.scss new file mode 100644 index 000000000..7839dac00 --- /dev/null +++ b/src/styles/components/_header.scss @@ -0,0 +1,334 @@ +.header { + @include on-desktop { + position: static; + } + + &__top { + position: relative; + + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + padding: 20px; + + @include on-desktop { + padding: 28px 32px; + } + } + + &__logo { + &-img { + width: auto; + height: 24px; + } + } + + &__menu { + pointer-events: none; + + position: absolute; + z-index: 10; + top: 100%; + left: 0; + transform: translateY(-20px); + + width: 100%; + + visibility: hidden; + opacity: 0; + + transition: $effectDuration ease; + + @include on-desktop { + pointer-events: auto; + + position: static; + transform: none; + + width: auto; + + visibility: visible; + opacity: 1; + background: transparent; + } + + &.is-open { + pointer-events: auto; + + transform: translateY(0); + + padding-top: 132px; + padding-bottom: 196px; + + visibility: visible; + opacity: 1; + background-color: $light-pink; + + @include on-desktop { + padding-top: 0; + padding-bottom: 0; + } + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 24px; + align-items: center; + + @include on-desktop { + flex-direction: row; + gap: 64px; + align-items: center; + } + } + + &__link { + position: relative; + + display: inline-block; + + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + + transition: color $effectDuration ease; + + &::after { + content: ''; + + position: absolute; + bottom: -4px; + left: 0; + transform-origin: center; + transform: scaleX(0); + + width: 100%; + height: 1px; + + background: currentColor; + + transition: transform $effectDuration ease; + } + + &:hover::after, + &:focus-visible::after { + transform: scaleX(1); + } + + &--contact { + display: flex; + gap: 7px; + align-items: center; + color: $accent-orange; + } + } + + &__icon { + width: 18px; + height: 18px; + } + + @include on-desktop { + grid-column: 1 /5; + } + &__hero { + position: relative; + + display: flex; + flex-direction: column; + align-items: center; + + padding: 32px 16px 40px; + + @include on-tablet { + @include page-grid; + + padding-top: 80px; + padding-inline: 44px; + } + + @include on-desktop { + padding-top: 135px; + } + } + + &__text { + margin-bottom: 32px; + + font-size: 16px; + line-height: 150%; + text-align: center; + letter-spacing: -1%; + + @include on-tablet { + grid-column: 1 /5; + margin-bottom: 146px; + text-align: left; + } + + @include on-small-desktop { + grid-column: 1 /3; + } + + @include on-desktop { + margin-bottom: 8px; + } + + @include on-large-desktop { + margin-bottom: 40px; + } + } + + &__title { + position: relative; + z-index: 1; + + font-size: 64px; + line-height: 85%; + color: $accent-orange; + text-align: center; + text-transform: uppercase; + letter-spacing: -5%; + + @include on-tablet { + z-index: 2; + grid-column: 1 /-1; + font-size: 80px; + } + + @include on-small-desktop { + font-size: 100px; + } + + @include on-desktop { + font-size: 136px; + white-space: nowrap; + } + + @include on-large-desktop { + font-size: 144px; + } + } + + &__image-wrapper { + position: relative; + + @include on-tablet { + grid-column: 3/7; + } + } + + &__image { + position: relative; + z-index: 2; + width: 288px; + + @include on-tablet { + position: absolute; + z-index: 1; + top: 50%; + left: 50%; + transform: translate(-50%, -60%); + + width: 326px; + } + + @include on-small-desktop { + transform: translate(-50%, -54%); + width: 500px; + } + + @include on-desktop { + transform: translate(-50%, -60%); + width: 544px; + } + + @include on-large-desktop { + width: 584px; + } + } + + &__button { + display: flex; + gap: 8px; + align-items: center; + justify-content: center; + + width: 288px; + height: 56px; + margin-top: 20px; + border: 2px solid $accent-orange; + border-radius: 32px; + + font-size: 16px; + font-weight: 500; + line-height: 100%; + color: $accent-orange; + text-transform: uppercase; + letter-spacing: 2%; + + transition: + background-color $effectDuration ease, + color $effectDuration ease, + border-color $effectDuration ease; + + &-icon { + width: 20px; + height: 20px; + } + + &:disabled, + &--disabled { + cursor: not-allowed; + border-color: #fba28f; + color: #fba28f; + background-color: #fff; + } + + &--disabled .header__button-icon, + &:disabled .header__button-icon { + opacity: 0.5; + } + + &:hover { + color: #fff; + background-color: $accent-orange; + } + + &:hover .header__button-icon { + filter: brightness(0) invert(1); + } + + &:focus { + border-color: #b2341a; + color: #fff; + background-color: #b2341a; + outline: none; + } + + &:focus .header__button-icon { + filter: brightness(0) invert(1); + } + + @include on-tablet { + grid-column: 1/-1; + width: 326px; + margin: 0 auto; + margin-top: 210px; + } + + @include on-small-desktop { + width: 260px; + } + + @include on-desktop { + grid-column: 1/3; + width: 280px; + margin-top: 64px; + } + } +} diff --git a/src/styles/components/_products.scss b/src/styles/components/_products.scss new file mode 100644 index 000000000..89796d607 --- /dev/null +++ b/src/styles/components/_products.scss @@ -0,0 +1,57 @@ +.products { + padding-top: 64px; + padding-bottom: 36px; + padding-inline: 16px; + + @include on-tablet { + padding-top: 228px; + padding-bottom: 152px; + padding-inline: 44px; + } + + @include on-desktop { + padding-bottom: 178px; + padding-inline: 124px; + } + + &__title { + margin-bottom: 24px; + + font-size: 48px; + line-height: 85%; + color: $accent-orange; + text-transform: uppercase; + letter-spacing: -5%; + + @include on-tablet { + font-size: 56px; + } + + @include on-desktop { + font-size: 72px; + } + } + + &__description { + margin-bottom: 56px; + + font-size: 16px; + line-height: 150%; + color: $black; + letter-spacing: -1%; + + @include on-tablet { + margin-bottom: 80px; + } + } + + &__cards { + display: flex; + flex-direction: column; + gap: 56px; + + @include on-tablet { + @include page-grid; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..8042f6412 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,11 @@ @import 'utils'; -@import 'fonts'; -@import 'typography'; +@import 'base/typography'; +@import 'base/reset'; -body { - background: $c-gray; -} +@import 'components/body'; +@import 'components/header'; +@import 'components/burger'; +@import 'components/products'; +@import 'components/cards'; +@import 'components/about'; +@import 'components/footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..44db1ab4e 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,4 @@ %h1 { - font-family: Roboto, sans-serif; + font-family: Inter, sans-serif; font-weight: 400; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..bed5a4099 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,47 @@ #{$_property}: $_toValue; } } + +@mixin on-small-tablet() { + @media (min-width: $small-tablet-min-width) { + @content; + } +} + +@mixin on-tablet() { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-small-desktop() { + @media (min-width: $small-desktop-min-width) { + @content; + } +} + +@mixin on-desktop() { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-large-desktop() { + @media (min-width: $large-desktop-min-width) { + @content; + } +} + +@mixin page-grid() { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 16px; + + @include on-tablet { + --columns: 8; + + column-gap: 24px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..030ab2765 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,14 @@ -$c-gray: #eee; +$light-pink: #ffeefc; +$accent-orange: #f9512e; +$black: #1c1a26; +$grey: #7f8096; +$white: #fff; +$dark-orange: #b2341a; +$light-orange: #fba28f; +$font-size-small: 14px; +$small-tablet-min-width: 568px; +$tablet-min-width: 768px; +$small-desktop-min-width: 1024px; +$desktop-min-width: 1200px; +$large-desktop-min-width: 1440px; +$effectDuration: 0.3s;