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..4c7589b67 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,3 @@ # Creative Bakery landing page -Implement landing page according to [Figma design](https://www.figma.com/file/dY3izAm0Vspsmra4lQWQIP/Bakerlab-FE-students?node-id=0%3A1) - Use BEM and SCSS - -- The design 1440px -- Desktop 1280px -- Tablet 640px -- Mobile (> 320px) - - -## Github flow -1. **Fork** the repo. -2. **Clone** the forked one. (The project link should have your name but not `mate-academy`) -3. Run `npm install` (or just `npm i`). -4. Run `npm start`. -5. Open one more terminal window for the next steps. -6. `git checkout -b develop` - to create new branch and switch on it. -7. Write you code in `src` folder. -8. Run `npm run lint` and fix code style errors. -9. Run `npm run deploy` to deploy your solution to `gh-pages`. -10. `git add . && git commit -m 'solution'` to save your changes. -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/). -14. Copy `DEMO LINK` to the PR description. - -> To update you PR repeat steps 7-11. - -15. Check yourself using the [CHECKLIST](https://github.com/mate-academy/layout_creativeBakery/blob/master/checklist.md) when finished; + [DEMO LINK](https://Roma-Ivashchenko.github.io/layout_creativeBakery/). diff --git a/index.html b/index.html index d339e6856..a3e82202c 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,565 @@ 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

+ +
+ main-Img +
+ + + icon-cookie + Learn more + +
+
+ +
+
+

What we bake

+

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

+ +
    +
  • +
    +
    + card-image +
    + Cakes +

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

    + +
    + arrow + ORDER +
    +     +
    +
    • + +
  • +
    +
    + card-image +
    + Cakes +

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

    + +
    + arrow + ORDER +
    +     +
    +
    • + +
  • +
    +
    + card-image +
    + Donuts +

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

    + +
    + arrow + ORDER +
    +     +
    +
    • + +
  • +
    +
    + card-image +
    + Donuts +

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

    + +
    + arrow + ORDER +
    +     +
    +
    • + +
  • +
    +
    + card-image +
    + Cakes +

    + Cake with chocolate salted caramel, Vanilla frutti pebbles + inside +

    + +
    + arrow + ORDER +
    +     +
    +
    • + +
  • +
    +
    + card-image +
    + Cookies +

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

    + +
    + arrow + 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..024f685e4 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", @@ -52,6 +52,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz", "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, + "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -522,6 +523,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": ">=18" }, @@ -563,6 +565,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": ">=18" } @@ -1510,10 +1513,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", @@ -1590,7 +1594,6 @@ "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-6.0.0.tgz", "integrity": "sha512-P4YJBPdPSpWTQ1NU4XYdvHvXJJDxM6YwpS0FZHRgP7YFkdVxsWcpWGy/NVqlAA7PcPCnMacXlRm1y2PFZRWL/w==", "dev": true, - "peer": true, "engines": { "node": ">= 20" } @@ -1619,7 +1622,6 @@ "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-11.0.2.tgz", "integrity": "sha512-4zCpzP1fWc7QlqunZ5bSEjxc6yLAlRTnDwKtgXfcI/FxxGoqedDG8V2+xJ60bV2kODqcGB+nATdtap/XYq2NZQ==", "dev": true, - "peer": true, "dependencies": { "@octokit/types": "^16.0.0", "universal-user-agent": "^7.0.2" @@ -1633,7 +1635,6 @@ "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-9.0.3.tgz", "integrity": "sha512-grAEuupr/C1rALFnXTv6ZQhFuL1D8G5y8CN04RgrO4FIPMrtm+mcZzFG7dcBm+nq+1ppNixu+Jd78aeJOYxlGA==", "dev": true, - "peer": true, "dependencies": { "@octokit/request": "^10.0.6", "@octokit/types": "^16.0.0", @@ -1647,8 +1648,7 @@ "version": "27.0.0", "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-27.0.0.tgz", "integrity": "sha512-whrdktVs1h6gtR+09+QsNk2+FO+49j6ga1c55YZudfEG+oKJVvJLQi3zkOm5JjiUXAagWK2tI2kTGKJ2Ys7MGA==", - "dev": true, - "peer": true + "dev": true }, "node_modules/@octokit/plugin-paginate-rest": { "version": "2.21.3", @@ -1710,7 +1710,6 @@ "resolved": "https://registry.npmjs.org/@octokit/request/-/request-10.0.7.tgz", "integrity": "sha512-v93h0i1yu4idj8qFPZwjehoJx4j3Ntn+JhXsdJrG9pYaX6j/XRz2RmasMUHtNgQD39nrv/VwTWSqK0RNXR8upA==", "dev": true, - "peer": true, "dependencies": { "@octokit/endpoint": "^11.0.2", "@octokit/request-error": "^7.0.2", @@ -1727,7 +1726,6 @@ "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-7.1.0.tgz", "integrity": "sha512-KMQIfq5sOPpkQYajXHwnhjCC0slzCNScLHs9JafXc4RAJI+9f+jNDlBNaIMTvazOPLgb4BnlhGJOTbnN0wIjPw==", "dev": true, - "peer": true, "dependencies": { "@octokit/types": "^16.0.0" }, @@ -1915,7 +1913,6 @@ "resolved": "https://registry.npmjs.org/@octokit/types/-/types-16.0.0.tgz", "integrity": "sha512-sKq+9r1Mm4efXW1FCk7hFSeJo4QKreL/tTbR0rz/qx/r1Oa2VV83LTA/H/MuCOX7uCIJmQVRKBcbmWoySjAnSg==", "dev": true, - "peer": true, "dependencies": { "@octokit/openapi-types": "^27.0.0" } @@ -2697,6 +2694,7 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz", "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==", "dev": true, + "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -3070,8 +3068,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-4.0.0.tgz", "integrity": "sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ==", - "dev": true, - "peer": true + "dev": true }, "node_modules/bl": { "version": "4.1.0", @@ -3125,6 +3122,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", @@ -4180,8 +4178,7 @@ "type": "opencollective", "url": "https://opencollective.com/fastify" } - ], - "peer": true + ] }, "node_modules/fast-deep-equal": { "version": "3.1.3", @@ -5925,6 +5922,7 @@ "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.5.4.tgz", "integrity": "sha512-eohl3hKTiVyD1ilYdw9T0OiB4hnjef89e3dMYKz+mVKDzj+5IteTseASUsOB+EU9Tf6VNTCjDePcP6wkDGmLKQ==", "dev": true, + "peer": true, "dependencies": { "@keyv/serialize": "^1.1.1" } @@ -6721,6 +6719,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -6799,6 +6798,7 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz", "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==", "dev": true, + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -7312,6 +7312,7 @@ "resolved": "https://registry.npmjs.org/sass/-/sass-1.94.2.tgz", "integrity": "sha512-N+7WK20/wOr7CzA2snJcUSSNTCzeCGUTFY3OgeQP3mZ1aj9NMQ0mSTXwlrnd89j33zzQJGqIN52GIOmYrfq46A==", "dev": true, + "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", @@ -7645,6 +7646,7 @@ "url": "https://github.com/sponsors/stylelint" } ], + "peer": true, "dependencies": { "@csstools/css-parser-algorithms": "^3.0.5", "@csstools/css-syntax-patches-for-csstree": "^1.0.19", @@ -8081,6 +8083,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, + "peer": true, "engines": { "node": ">=12" }, @@ -8206,8 +8209,7 @@ "version": "7.0.3", "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-7.0.3.tgz", "integrity": "sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==", - "dev": true, - "peer": true + "dev": true }, "node_modules/universalify": { "version": "2.0.1", @@ -8384,6 +8386,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, + "peer": true, "engines": { "node": ">=12" }, @@ -8721,20 +8724,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 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/icons/Bakerlab.svg b/src/icons/Bakerlab.svg new file mode 100644 index 000000000..a0595e7ae --- /dev/null +++ b/src/icons/Bakerlab.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/icons/Favicon.png b/src/icons/Favicon.png new file mode 100644 index 000000000..cf8c5252e Binary files /dev/null and b/src/icons/Favicon.png differ diff --git a/src/icons/Icon-arrow.svg b/src/icons/Icon-arrow.svg new file mode 100644 index 000000000..a1bd54079 --- /dev/null +++ b/src/icons/Icon-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/Icon-close.svg b/src/icons/Icon-close.svg new file mode 100644 index 000000000..1225a6256 --- /dev/null +++ b/src/icons/Icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/Icon-cookie.svg b/src/icons/Icon-cookie.svg new file mode 100644 index 000000000..992115b32 --- /dev/null +++ b/src/icons/Icon-cookie.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/Icon-facebook.svg b/src/icons/Icon-facebook.svg new file mode 100644 index 000000000..93b3835e8 --- /dev/null +++ b/src/icons/Icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/Icon-instagram.svg b/src/icons/Icon-instagram.svg new file mode 100644 index 000000000..a94faeecf --- /dev/null +++ b/src/icons/Icon-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/Icon-menu.svg b/src/icons/Icon-menu.svg new file mode 100644 index 000000000..b74cb0beb --- /dev/null +++ b/src/icons/Icon-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/Icon-phone.svg b/src/icons/Icon-phone.svg new file mode 100644 index 000000000..39b157356 --- /dev/null +++ b/src/icons/Icon-phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/Icon-twitter.svg b/src/icons/Icon-twitter.svg new file mode 100644 index 000000000..097a19058 --- /dev/null +++ b/src/icons/Icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/Logo.svg b/src/icons/Logo.svg new file mode 100644 index 000000000..4eb4c54f3 --- /dev/null +++ b/src/icons/Logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/Cookie.png b/src/images/Cookie.png new file mode 100644 index 000000000..a4b458a81 Binary files /dev/null and b/src/images/Cookie.png differ diff --git a/src/images/Crumbs.png b/src/images/Crumbs.png new file mode 100644 index 000000000..1db01b6da Binary files /dev/null and b/src/images/Crumbs.png differ diff --git a/src/images/Crumbs.svg b/src/images/Crumbs.svg new file mode 100644 index 000000000..aeab6b6b9 --- /dev/null +++ b/src/images/Crumbs.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/photo-product-01.png b/src/images/photo-product-01.png new file mode 100644 index 000000000..4050a3f89 Binary files /dev/null and b/src/images/photo-product-01.png differ diff --git a/src/images/photo-product-02.png b/src/images/photo-product-02.png new file mode 100644 index 000000000..39b814fef Binary files /dev/null and b/src/images/photo-product-02.png differ diff --git a/src/images/photo-product-03.png b/src/images/photo-product-03.png new file mode 100644 index 000000000..3bd95f76f Binary files /dev/null and b/src/images/photo-product-03.png differ diff --git a/src/images/photo-product-04.png b/src/images/photo-product-04.png new file mode 100644 index 000000000..fb4758fa4 Binary files /dev/null and b/src/images/photo-product-04.png differ diff --git a/src/images/photo-product-05.png b/src/images/photo-product-05.png new file mode 100644 index 000000000..a668bed6c Binary files /dev/null and b/src/images/photo-product-05.png differ diff --git a/src/images/photo-product-06.png b/src/images/photo-product-06.png new file mode 100644 index 000000000..5c3ca65cb Binary files /dev/null and b/src/images/photo-product-06.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..a8bd7fa7b 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,22 @@ 'use strict'; +const menu = document.querySelector('#mobile-menu'); +const openBtn = document.querySelector('#open-menu-btn'); +const closeBtn = document.querySelector('#close-menu-btn'); +const menuLinks = document.querySelectorAll('.menu__link'); + +openBtn.addEventListener('click', () => { + menu.classList.add('menu--is-open'); + document.body.style.overflow = 'hidden'; +}); + +closeBtn.addEventListener('click', () => { + menu.classList.remove('menu--is-open'); + document.body.style.overflow = ''; +}); + +menuLinks.forEach((link) => { + link.addEventListener('click', () => { + menu.classList.remove('menu--is-open'); + document.body.style.overflow = ''; + }); +}); 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/_typography.scss b/src/styles/_typography.scss index 1837eb46e..ff844da91 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,5 @@ -h1 { - @extend %h1; +$font-main: 'Inter', sans-serif; + +body { + font-family: $font-main; } diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe1..f1078dced 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,2 @@ @import 'utils/vars'; @import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 000000000..63feb41a7 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,123 @@ +.about-us { + margin: 72px 0; + + @include on-tablet { + margin: 152px 0; + } + + @include on-desktop { + margin: 178px 0 56px; + } + + &__container { + @include on-tablet { + display: grid; + grid-template-columns: repeat(8, 1fr); + column-gap: 24px; + background-image: url(/src/images/Crumbs.svg); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + } + + @include on-desktop { + padding-bottom: 293px; + } + } + + &__title { + margin: 0; + font-weight: 400; + font-size: 48px; + line-height: 85%; + letter-spacing: -5%; + text-transform: uppercase; + color: $main-text-color; + + @include on-tablet { + font-size: 56px; + grid-column: 1 / 5; + } + + @include on-tablet { + font-size: 72px; + grid-column: 1 / 4; + } + } + + &__description { + margin: 0; + padding-top: 32px; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + + @include on-tablet { + padding-top: 0; + grid-column: -5 / -1; + } + } + + &__list { + background-image: url(/src/images/Crumbs.svg); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + list-style: none; + margin: 0; + padding: 0; + padding-top: 64px; + display: grid; + grid-template-columns: 1fr 1fr; + row-gap: 48px; + + @include on-tablet { + padding-top: 72px; + background: none; + grid-column: 1 / -1; + grid-template-columns: repeat(8, 1fr); + gap: 80px 24px; + } + + @include on-desktop { + padding-top: 144px; + } + } + + &__item { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 2; + } + } +} + +.statistic { + display: flex; + flex-direction: column; + gap: 8px; + + &__number { + font-weight: 400; + font-size: 96px; + line-height: 85%; + letter-spacing: -5%; + text-transform: uppercase; + color: $main-text-color; + } + + &__label { + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + } + + @include hover(transform, scale(1.2)); +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..392e8d0e5 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,185 @@ +.footer { + background-color: $text-color; + + &__container { + padding: 56px 16px 40px; + + max-width: 1200px; + margin: 0 auto; + width: 100%; + + @include on-tablet { + padding: 88px 44px; + display: grid; + grid-template-columns: repeat(8, 1fr); + column-gap: 24px; + } + } + + &__inner { + @include on-tablet { + grid-column: 1 / 3; + } + } + + &__logo-link { + display: block; + } + + &__logo { + display: block; + width: 168px; + height: 40px; + + @include hover(transform, scale(1.2)); + } + + &__menu { + padding-top: 40px; + display: flex; + flex-direction: column; + gap: 16px; + + @include on-tablet { + padding-top: 94px; + } + + @include on-desktop { + padding-top: 61px; + } + } + + &__label { + margin: 0; + font-weight: 500; + font-style: Medium; + font-size: 16px; + line-height: 100%; + letter-spacing: 2%; + text-transform: uppercase; + color: $grey-color; + } + + &__list { + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 16px; + + list-style: none; + } + + &__link { + text-decoration: none; + color: $link-color; + + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + transition: color $effectDuration; + @include hover(transform, scale(1.05)); + + &:hover { + color: $main-text-color; + } + + &:active { + color: $grey-color; + } + } + + &__contacts { + padding-top: 64px; + + @include on-tablet { + padding: 0; + grid-column: -5 / -3; + } + + @include on-desktop { + grid-column: 5 / -1; + } + } + + &__title { + margin: 0; + padding-bottom: 40px; + + font-weight: 400; + font-size: 48px; + line-height: 85%; + letter-spacing: -5%; + text-transform: uppercase; + color: $link-color; + + @include on-tablet { + font-size: 56px; + } + + @include on-desktop { + font-size: 72px; + } + } + + &__contact-container { + @include on-desktop { + display: flex; + justify-content: space-between; + } + } + + &__contact-group { + display: flex; + flex-direction: column; + gap: 16px; + padding-bottom: 40px; + } + + &__socials { + display: flex; + gap: 32px; + + @include on-tablet { + grid-column: 1 / 3; + margin-top: auto; + } + + @include on-desktop { + padding-top: 48px; + } + } + + &__copy { + margin: 0; + padding-top: 40px; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + color: $grey-color; + + @include on-tablet { + padding-top: 0; + grid-column: -5 / -1; + margin-top: auto; + } + } +} + +.social { + &__icon { + display: block; + width: 24px; + height: 24px; + transition: filter $effectDuration; + + @include hover(transform, scale(1.1)); + + &:hover { + color: $link-color; + filter: brightness(0) invert(1); + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..dd3c1d4ca --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,99 @@ +.header { + padding: 16px; + + position: sticky; + top: 0; + z-index: 10; + background-color: $background-color; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + + @include on-desktop { + padding: 28px 32px; + } +} + +.top-bar { + display: flex; + justify-content: space-between; + align-items: center; + + &__logo { + width: 136px; + height: 32px; + @include hover(transform, scale(1.2)); + } + + &__menu { + display: none; + + @include on-desktop { + display: flex; + } + } + + &__nav-list { + display: flex; + align-items: center; + gap: 64px; + + margin: 0; + padding: 0; + } + + &__nav-item { + list-style: none; + } + + &__link { + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + color: $text-color; + text-decoration: none; + transition: color $effectDuration; + + @include hover(transform, scale(1.05)); + + &:hover { + color: $main-text-color; + } + + &:active { + color: $grey-color; + } + + &--contact { + display: flex; + align-items: center; + gap: 4px; + + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 2%; + text-transform: uppercase; + color: $main-text-color; + } + } + + &__icon { + display: block; + background-image: url(../icons/Icon-menu.svg); + width: 24px; + height: 24px; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + + cursor: pointer; + + &--close { + background-image: url(../icons/Icon-close.svg); + } + + @include on-desktop { + display: none; + } + } +} diff --git a/src/styles/blocks/hero.scss b/src/styles/blocks/hero.scss new file mode 100644 index 000000000..e3c1021df --- /dev/null +++ b/src/styles/blocks/hero.scss @@ -0,0 +1,183 @@ +.hero { + padding-bottom: 40px; + + @include on-tablet { + padding-bottom: 228px; + } + + @include on-desktop { + padding-bottom: 66px; + } + + &__container { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 16px; + width: 100%; + + @include on-tablet { + grid-template-columns: repeat(8, 1fr); + grid-template-rows: auto; + column-gap: 24px; + } + } + + &__text { + margin: 0; + padding: 32px 0; + grid-column: 1 / -1; + + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + text-align: center; + + @include on-tablet { + padding: 80px 0 16px; + grid-column: 1 / 5; + text-align: left; + } + + @include on-desktop { + padding-top: 135px; + padding-bottom: 0; + grid-column: 1 / 3; + grid-row: 1; + } + } + + &__title { + margin: 0; + grid-column: 1 / -1; + + font-weight: 400; + font-size: 64px; + line-height: 85%; + letter-spacing: -5%; + text-align: center; + text-transform: uppercase; + color: $main-text-color; + + @include on-tablet { + width: 100%; + grid-column: 1 / -1; + grid-row: 2; + align-self: center; + z-index: 2; + + font-size: 80px; + } + + @include on-desktop { + grid-row: 1; + font-size: clamp(80px, 10vw, 136px); + white-space: nowrap; + } + } + + &__image-wrapper { + grid-column: 1 / -1; + + display: flex; + justify-content: center; + + @include on-tablet { + grid-column: 1 / 9; + grid-row: 2; + z-index: 1; + } + + @include on-desktop { + grid-row: 1; + } + } + + &__image { + width: 100%; + max-width: 300px; + height: auto; + object-fit: cover; + + @include on-tablet { + max-width: 500px; + } + + @include on-desktop { + max-width: 550px; + } + } + + &__button { + grid-column: 1 / -1; + cursor: pointer; + z-index: 2; + text-decoration: none; + + @include on-tablet { + grid-column: 3 / 7; + } + + @include on-desktop { + grid-column: 1 / 3; + grid-row: 1; + align-self: end; + } + } +} + +.button { + display: flex; + justify-content: center; + align-items: center; + gap: 4px; + padding: 20px 0; + + font-weight: 500; + + font-size: 16px; + line-height: 100%; + letter-spacing: 2%; + text-transform: uppercase; + color: inherit; + cursor: pointer; + + border-radius: 50px; + background: none; + border: 2px solid $main-text-color; + transition: all, $effectDuration; + + &:hover { + background-color: $main-text-color; + + .button__text { + color: $link-color; + } + + .button__icon { + filter: brightness(0) invert(1); + } + } + + &:active, + &:focus { + background-color: $focused-button; + border: 2px solid $focused-button; + + .button__text { + color: $link-color; + } + + .button__icon { + filter: brightness(0) invert(1); + } + } + + @include on-tablet { + margin-top: 80px; + } + + @include on-desktop { + margin-top: 0; + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 000000000..08e9ae3fa --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,13 @@ +.main { + padding: 0 16px; + + &__container { + max-width: 1200px; + margin: 0 auto; + width: 100%; + } + + @include on-tablet { + padding: 0 44px; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..098002b79 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,72 @@ +.menu { + position: fixed; + top: 0; + right: 0; + width: 100%; + height: 100vh; + background-color: $background-color; + z-index: 1000; + box-sizing: border-box; + + transform: translateX(100%); + transition: transform $effectDuration ease-in-out; + + &--is-open { + transform: translateX(0); + } + + &__container { + position: relative; + display: flex; + flex-direction: column; + height: 100%; + } + + &__top { + padding: 16px; + } + + &__bottom { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + } + + &__nav-list { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 32px; + + margin: 0; + padding: 0; + } + + &__nav-item { + list-style: none; + } + + &__link { + font-weight: 400; + font-size: 20px; + line-height: 150%; + color: $text-color; + text-decoration: none; + + &--contact { + display: flex; + align-items: center; + gap: 4px; + + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 2%; + text-transform: uppercase; + color: $main-text-color; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..2d211922b --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,20 @@ +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + background-color: $background-color; +} + +section { + scroll-margin-top: 80px; + + @include on-desktop { + scroll-margin-top: 100px; + } +} diff --git a/src/styles/blocks/products.scss b/src/styles/blocks/products.scss new file mode 100644 index 000000000..4d92c7684 --- /dev/null +++ b/src/styles/blocks/products.scss @@ -0,0 +1,161 @@ +.products { + margin-top: 64px; + + @include on-tablet { + margin-top: 0; + } + + @include on-desktop { + margin-top: 152px; + } + + &__title { + margin: 0; + font-weight: 400; + font-size: 48px; + line-height: 85%; + letter-spacing: -5%; + text-transform: uppercase; + color: $main-text-color; + + @include on-tablet { + font-size: 56px; + } + + @include on-desktop { + font-size: 72px; + } + } + + &__text { + padding-top: 24px; + margin: 0; + + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + } + + &__list { + margin: 0; + padding: 0; + + display: grid; + grid-template-columns: 1fr; + + @include on-tablet { + grid-template-columns: repeat(8, 1fr); + grid-template-rows: auto; + column-gap: 24px; + } + } +} + +.product__item { + padding-top: 56px; + list-style: none; + + @include on-tablet { + padding-top: 80px; + + grid-column: span 4; + } + + @include on-desktop { + padding-top: 80px; + + grid-column: span 3; + + &--end { + grid-column: -7/ -4; + justify-self: end; + } + } +} + +.button { + &__container { + display: flex; + justify-content: center; + align-items: center; + gap: 4px; + } + + &__icon { + display: block; + width: 24px; + height: 24px; + } + + &__text { + font-weight: 500; + + font-size: 16px; + line-height: 100%; + letter-spacing: 2%; + text-transform: uppercase; + color: $main-text-color; + } +} + +.product-card { + &__wrapper { + display: flex; + } + + &__image { + display: block; + width: 100%; + height: auto; + object-fit: contain; + @include hover(transform, scale(1.05)); + } + + &__category { + display: inline-block; + padding-top: 16px; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 2%; + text-transform: uppercase; + color: $grey-color; + } + + &__description { + margin: 0; + padding-top: 8px; + + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -1%; + } + + &__button { + display: inline-block; + margin-top: 16px; + border: none; + background: none; + padding: 0; + text-decoration: none; + cursor: pointer; + transition: + transform $effectDuration, + color $effectDuration, + filter $effectDuration; + + @include hover(transform, scale(1.05)); + + &:hover { + .button__text { + color: $text-color; + } + + .button__icon { + filter: brightness(0); + } + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..3a83df080 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,11 @@ @import 'utils'; -@import 'fonts'; @import 'typography'; -body { - background: $c-gray; -} +@import './blocks/page'; +@import './blocks/main'; +@import './blocks/header'; +@import './blocks/hero'; +@import './blocks/menu'; +@import './blocks/products'; +@import './blocks/about-us'; +@import './blocks/footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3..000000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..cc41b9151 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,3 +1,15 @@ +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + @mixin hover($_property, $_toValue) { transition: #{$_property} 0.3s; &:hover { diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..ddfe65477 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,10 @@ -$c-gray: #eee; +$tablet-min-width: 640px; +$desktop-min-width: 1024px; +$background-color: #ffeefc; +$main-text-color: #f9512e; +$link-color: rgba(255, 255, 255, 1); +$text-color: #1c1a26; +$grey-color: rgba(127, 128, 150, 1); +$disabled-button: #fba28f; +$focused-button: #b2341a; +$effectDuration: 0.3s ease;