diff --git a/.eslintignore b/.eslintignore index 89f52aaca..fbf58cfb9 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,3 @@ /backstop_data /dist +/src/styles/main.css 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/.gitignore b/.gitignore index 1558091fd..71131d0ad 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,5 @@ backstop_data dist .cache .parcel-cache +src/styles/main.css +src/styles/main.css.map diff --git a/.stylelintrc.js b/.stylelintrc.js index 2e345321d..3220c489d 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -1,7 +1,6 @@ module.exports = { - extends: "@mate-academy/stylelint-config", - plugins: [ - "stylelint-scss" - ], - rules: {} + extends: '@mate-academy/stylelint-config', + plugins: ['stylelint-scss'], + rules: {}, + ignoreFiles: ['src/styles/main.css'], }; diff --git a/README.md b/README.md index 3a2fb5928..1506081fc 100644 --- a/README.md +++ b/README.md @@ -7,8 +7,8 @@ Implement landing page according to [Figma design](https://www.figma.com/file/dY - 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`). @@ -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://Patryk91sz.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..fa36e321b 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,661 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + + + + + Creative bakery -

Hello Mate Academy

+ +
+ + + Open Menu + + + +
+ +
+
+

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

+

Creative bakery

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

What we bake

+

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

+
+ +
+
+ + + + + Photo + +
+

Cakes

+

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

+
+ + Arrow + Order + +
+
+ + + + + Photo + +
+

Cakes

+

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

+
+ + Arrow + Order + +
+
+ +
+
+ + + + + Photo + +
+

Donuts

+

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

+
+ + Arrow + Order + +
+
+ + + + + Photo + +
+

Donuts

+

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

+
+ + Arrow + Order + +
+
+ +
+
+ + + + + Photo + +
+

Cakes

+

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

+
+ + Arrow + Order + +
+
+ + + + + Photo + +
+

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+

+

Clientss

+
+
+
+
+ + diff --git a/package-lock.json b/package-lock.json index d5f989323..ae57ddc2c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,8 +13,9 @@ "@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", + "concurrently": "^9.2.1", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "prettier": "^3.3.2", @@ -52,6 +53,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 +524,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": ">=18" }, @@ -563,6 +566,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": ">=18" } @@ -1510,10 +1514,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 +1595,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 +1623,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 +1636,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 +1649,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 +1711,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 +1727,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 +1914,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 +2695,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 +3069,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 +3123,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", @@ -3475,6 +3474,77 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dev": true }, + "node_modules/concurrently": { + "version": "9.2.1", + "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.2.1.tgz", + "integrity": "sha512-fsfrO0MxV64Znoy8/l1vVIjjHa29SZyyqPgQBwhiDcaW8wJc2W3XWVOGx4M3oJBnv/zdUZIIp1gDeS98GzP8Ng==", + "dev": true, + "license": "MIT", + "dependencies": { + "chalk": "4.1.2", + "rxjs": "7.8.2", + "shell-quote": "1.8.3", + "supports-color": "8.1.1", + "tree-kill": "1.2.2", + "yargs": "17.7.2" + }, + "bin": { + "conc": "dist/bin/concurrently.js", + "concurrently": "dist/bin/concurrently.js" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/open-cli-tools/concurrently?sponsor=1" + } + }, + "node_modules/concurrently/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/concurrently/node_modules/chalk/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/concurrently/node_modules/supports-color": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", + "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/supports-color?sponsor=1" + } + }, "node_modules/convert-source-map": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", @@ -4180,8 +4250,7 @@ "type": "opencollective", "url": "https://opencollective.com/fastify" } - ], - "peer": true + ] }, "node_modules/fast-deep-equal": { "version": "3.1.3", @@ -5925,6 +5994,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 +6791,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -6799,6 +6870,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 +7384,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", @@ -7369,6 +7442,19 @@ "node": ">=8" } }, + "node_modules/shell-quote": { + "version": "1.8.3", + "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz", + "integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/signal-exit": { "version": "3.0.7", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", @@ -7645,6 +7731,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 +8168,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 +8294,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 +8471,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 +8809,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..e96c266ab 100644 --- a/package.json +++ b/package.json @@ -6,15 +6,16 @@ "scripts": { "init": "mate-scripts init", "start": "mate-scripts start", - "style-format": "npx stylelint 'src/**/*.scss' --fix --allow-empty-input", - "format": "prettier --ignore-path .prettierignore --write './src/**/*.{html,css,scss}'", + "style-format": "npx stylelint 'src/**/*.scss' --fix --allow-empty-input --ignore-pattern '**/*.css'", + "format": "prettier --ignore-path .prettierignore --write './src/**/*.{html,scss}'", "lint": "npm run style-format && npm run format && mate-scripts lint", "test:only": "mate-scripts test", "build": "mate-scripts build", "deploy": "mate-scripts deploy", "update": "mate-scripts update", "postinstall": "npm run update", - "test": "npm run lint && npm run test:only" + "test": "npm run lint && npm run test:only", + "sass": "sass --watch src/styles/main.scss src/styles/main.css" }, "keywords": [], "author": "Mate Academy", @@ -23,8 +24,9 @@ "@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", + "concurrently": "^9.2.1", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "prettier": "^3.3.2", diff --git a/src/images/Crumbs-1200.png b/src/images/Crumbs-1200.png new file mode 100644 index 000000000..fa073287d Binary files /dev/null and b/src/images/Crumbs-1200.png differ diff --git a/src/images/Crumbs-320.png b/src/images/Crumbs-320.png new file mode 100644 index 000000000..7b3a0efa0 Binary files /dev/null and b/src/images/Crumbs-320.png differ diff --git a/src/images/Crumbs-768.png b/src/images/Crumbs-768.png new file mode 100644 index 000000000..d4523842d Binary files /dev/null and b/src/images/Crumbs-768.png differ diff --git a/src/images/card_button-arrow.svg b/src/images/card_button-arrow.svg new file mode 100644 index 000000000..139e70319 --- /dev/null +++ b/src/images/card_button-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/facebook_logo.svg b/src/images/facebook_logo.svg new file mode 100644 index 000000000..d629cfa5d --- /dev/null +++ b/src/images/facebook_logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer__logo.svg b/src/images/footer__logo.svg new file mode 100644 index 000000000..733596f1f --- /dev/null +++ b/src/images/footer__logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/header/close.svg b/src/images/header/close.svg new file mode 100644 index 000000000..65ae950c8 --- /dev/null +++ b/src/images/header/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/header/logo.svg b/src/images/header/logo.svg new file mode 100644 index 000000000..c3a0f20e6 --- /dev/null +++ b/src/images/header/logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/header/menu.svg b/src/images/header/menu.svg new file mode 100644 index 000000000..4f2194a84 --- /dev/null +++ b/src/images/header/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/header/menu__phone.svg b/src/images/header/menu__phone.svg new file mode 100644 index 000000000..b3c49f859 --- /dev/null +++ b/src/images/header/menu__phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/hero_icon-cookie.svg b/src/images/hero_icon-cookie.svg new file mode 100644 index 000000000..5bf16c613 --- /dev/null +++ b/src/images/hero_icon-cookie.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/instagram_logo.svg b/src/images/instagram_logo.svg new file mode 100644 index 000000000..87e645f62 --- /dev/null +++ b/src/images/instagram_logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/photos/hero_cookie-+1200.png b/src/images/photos/hero_cookie-+1200.png new file mode 100644 index 000000000..dd8b56e48 Binary files /dev/null and b/src/images/photos/hero_cookie-+1200.png differ diff --git a/src/images/photos/hero_cookie-1200.png b/src/images/photos/hero_cookie-1200.png new file mode 100644 index 000000000..b0bb4e8e6 Binary files /dev/null and b/src/images/photos/hero_cookie-1200.png differ diff --git a/src/images/photos/hero_cookie-320.png b/src/images/photos/hero_cookie-320.png new file mode 100644 index 000000000..a1a428dab Binary files /dev/null and b/src/images/photos/hero_cookie-320.png differ diff --git a/src/images/photos/hero_cookie-768.png b/src/images/photos/hero_cookie-768.png new file mode 100644 index 000000000..b488d963d Binary files /dev/null and b/src/images/photos/hero_cookie-768.png differ diff --git a/src/images/photos/main__cake1-1200+.jpg b/src/images/photos/main__cake1-1200+.jpg new file mode 100644 index 000000000..2963382c8 Binary files /dev/null and b/src/images/photos/main__cake1-1200+.jpg differ diff --git a/src/images/photos/main__cake1-1200.jpg b/src/images/photos/main__cake1-1200.jpg new file mode 100644 index 000000000..d3334ca84 Binary files /dev/null and b/src/images/photos/main__cake1-1200.jpg differ diff --git a/src/images/photos/main__cake1-320.jpg b/src/images/photos/main__cake1-320.jpg new file mode 100644 index 000000000..b50ac4e83 Binary files /dev/null and b/src/images/photos/main__cake1-320.jpg differ diff --git a/src/images/photos/main__cake1-640.jpg b/src/images/photos/main__cake1-640.jpg new file mode 100644 index 000000000..fefaa88f9 Binary files /dev/null and b/src/images/photos/main__cake1-640.jpg differ diff --git a/src/images/photos/main__cake2-1200+.jpg b/src/images/photos/main__cake2-1200+.jpg new file mode 100644 index 000000000..0bad5881d Binary files /dev/null and b/src/images/photos/main__cake2-1200+.jpg differ diff --git a/src/images/photos/main__cake2-1200.jpg b/src/images/photos/main__cake2-1200.jpg new file mode 100644 index 000000000..739259a78 Binary files /dev/null and b/src/images/photos/main__cake2-1200.jpg differ diff --git a/src/images/photos/main__cake2-320.jpg b/src/images/photos/main__cake2-320.jpg new file mode 100644 index 000000000..50732ed59 Binary files /dev/null and b/src/images/photos/main__cake2-320.jpg differ diff --git a/src/images/photos/main__cake2-640.jpg b/src/images/photos/main__cake2-640.jpg new file mode 100644 index 000000000..5962442a3 Binary files /dev/null and b/src/images/photos/main__cake2-640.jpg differ diff --git a/src/images/photos/main__cookies1-1200+.jpg b/src/images/photos/main__cookies1-1200+.jpg new file mode 100644 index 000000000..e013ad0a2 Binary files /dev/null and b/src/images/photos/main__cookies1-1200+.jpg differ diff --git a/src/images/photos/main__cookies1-1200.jpg b/src/images/photos/main__cookies1-1200.jpg new file mode 100644 index 000000000..ea16a9204 Binary files /dev/null and b/src/images/photos/main__cookies1-1200.jpg differ diff --git a/src/images/photos/main__cookies1-320.jpg b/src/images/photos/main__cookies1-320.jpg new file mode 100644 index 000000000..b4ad31be2 Binary files /dev/null and b/src/images/photos/main__cookies1-320.jpg differ diff --git a/src/images/photos/main__cookies1-640.jpg b/src/images/photos/main__cookies1-640.jpg new file mode 100644 index 000000000..ee8211c8c Binary files /dev/null and b/src/images/photos/main__cookies1-640.jpg differ diff --git a/src/images/photos/main__cookies2-1200+.jpg b/src/images/photos/main__cookies2-1200+.jpg new file mode 100644 index 000000000..fbf427665 Binary files /dev/null and b/src/images/photos/main__cookies2-1200+.jpg differ diff --git a/src/images/photos/main__cookies2-1200.jpg b/src/images/photos/main__cookies2-1200.jpg new file mode 100644 index 000000000..c7f695d55 Binary files /dev/null and b/src/images/photos/main__cookies2-1200.jpg differ diff --git a/src/images/photos/main__cookies2-320.jpg b/src/images/photos/main__cookies2-320.jpg new file mode 100644 index 000000000..78ccdf7a0 Binary files /dev/null and b/src/images/photos/main__cookies2-320.jpg differ diff --git a/src/images/photos/main__cookies2-640.jpg b/src/images/photos/main__cookies2-640.jpg new file mode 100644 index 000000000..7e77ebc7f Binary files /dev/null and b/src/images/photos/main__cookies2-640.jpg differ diff --git a/src/images/photos/main__donut1-1200+.jpg b/src/images/photos/main__donut1-1200+.jpg new file mode 100644 index 000000000..4e3159828 Binary files /dev/null and b/src/images/photos/main__donut1-1200+.jpg differ diff --git a/src/images/photos/main__donut1-1200.jpg b/src/images/photos/main__donut1-1200.jpg new file mode 100644 index 000000000..fe4dde35e Binary files /dev/null and b/src/images/photos/main__donut1-1200.jpg differ diff --git a/src/images/photos/main__donut1-320.jpg b/src/images/photos/main__donut1-320.jpg new file mode 100644 index 000000000..27d31491f Binary files /dev/null and b/src/images/photos/main__donut1-320.jpg differ diff --git a/src/images/photos/main__donut1-640.jpg b/src/images/photos/main__donut1-640.jpg new file mode 100644 index 000000000..efd1d361e Binary files /dev/null and b/src/images/photos/main__donut1-640.jpg differ diff --git a/src/images/photos/main__donut2-1200+.jpg b/src/images/photos/main__donut2-1200+.jpg new file mode 100644 index 000000000..d3e2cd661 Binary files /dev/null and b/src/images/photos/main__donut2-1200+.jpg differ diff --git a/src/images/photos/main__donut2-1200.jpg b/src/images/photos/main__donut2-1200.jpg new file mode 100644 index 000000000..0d2b8e3f6 Binary files /dev/null and b/src/images/photos/main__donut2-1200.jpg differ diff --git a/src/images/photos/main__donut2-320.jpg b/src/images/photos/main__donut2-320.jpg new file mode 100644 index 000000000..126e53c7e Binary files /dev/null and b/src/images/photos/main__donut2-320.jpg differ diff --git a/src/images/photos/main__donut2-640.jpg b/src/images/photos/main__donut2-640.jpg new file mode 100644 index 000000000..52e2db2d2 Binary files /dev/null and b/src/images/photos/main__donut2-640.jpg differ diff --git a/src/images/twitter_logo.svg b/src/images/twitter_logo.svg new file mode 100644 index 000000000..0ca15e705 --- /dev/null +++ b/src/images/twitter_logo.svg @@ -0,0 +1,3 @@ + + + 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 deleted file mode 100644 index 1837eb46e..000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe1..000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/blocks/footer/_contact.scss b/src/styles/blocks/footer/_contact.scss new file mode 100644 index 000000000..a3efde3bb --- /dev/null +++ b/src/styles/blocks/footer/_contact.scss @@ -0,0 +1,102 @@ +@use '../../utils/mixins' as *; + +.footer { + &__title { + color: rgba(255, 255, 255, 1); + grid-column: 5 / 8; + grid-row: 1 / 2; + + @include tablet { + width: 328px; + } + + @include desktop1024 { + width: 450px; + } + } + + &__call { + display: flex; + flex-direction: column; + gap: 16px; + width: 288px; + grid-column: 5 / 8; + + &-title { + color: rgba(127, 128, 150, 1); + } + + &-list { + width: 288px; + display: flex; + flex-direction: column; + gap: 16px; + list-style: none; + + &-link { + text-decoration: none; + color: rgba(255, 255, 255, 1); + } + } + } + + &__email { + display: flex; + flex-direction: column; + gap: 16px; + + &-title { + color: rgba(127, 128, 150, 1); + } + + &-link { + color: rgba(255, 255, 255, 1); + text-decoration: none; + } + } + + &__copyright { + color: rgba(127, 128, 150, 1); + + @include tablet { + width: 328px; + grid-column: 5 / 8; + grid-row: 3 / 3; + } + } +} + +.social { + @include tablet { + grid-column: 1 / 2; + } + + &__container { + display: flex; + gap: 34px; + } + + @include desktop1024 { + &__link { + &:hover, + &:focus { + filter: brightness(0) invert(1); + } + } + } +} + +.contact { + display: flex; + flex-direction: column; + gap: 40px; + @include tablet { + grid-column: 5 / 8; + } + + @include desktop1024 { + max-width: 1200px; + flex-direction: row; + grid-column: 5 / 8; + } +} diff --git a/src/styles/blocks/footer/_menu.scss b/src/styles/blocks/footer/_menu.scss new file mode 100644 index 000000000..937981f4f --- /dev/null +++ b/src/styles/blocks/footer/_menu.scss @@ -0,0 +1,27 @@ +@use '../../utils/mixins' as *; + +.footer__menu { + display: flex; + flex-direction: column; + gap: 16px; + align-content: flex-start; + + @include tablet { + width: 328px; + grid-column: 1 / 4; + } + + &-list { + display: flex; + flex-direction: column; + gap: 16px; + list-style: none; + } + &-title { + color: rgba(127, 128, 150, 1); + } + &-link { + color: rgba(255, 255, 255, 1); + text-decoration: none; + } +} diff --git a/src/styles/blocks/footer/footer.scss b/src/styles/blocks/footer/footer.scss new file mode 100644 index 000000000..7f9d39a9f --- /dev/null +++ b/src/styles/blocks/footer/footer.scss @@ -0,0 +1,31 @@ +@use '../../utils/mixins' as *; + +.footer { + display: flex; + flex-direction: column; + gap: 40px; + background-color: #1c1a26; + padding: 56px 16px; + + @include tablet { + display: grid; + justify-content: center; + grid-template-columns: repeat(8, 64px); + gap: 40px 24px; + padding: 88px 44px; + } + + @include desktop1024 { + margin: 0 auto; + grid-template-columns: repeat(8, 1fr); + gap: 40px 24px; + padding: 88px 44px; + } + + @include desktop1024 { + margin: 0 auto; + grid-template-columns: repeat(8, 1fr); + gap: 40px 24px; + padding: 88px 124px; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..53519c945 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,102 @@ +@use '../utils/mixins' as *; + +.header { + display: flex; + justify-content: space-between; + padding: 20px 18px 20px 20px; + + &__button { + width: 20px; + height: 8px; + + @include desktop1024 { + display: none; + } + } + + @include tablet { + padding: 16px 18px 20px 20px; + } + + @include desktop1024 { + padding: 32px 32px 28px 36px; + } +} + +.menu { + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translateX(-100%); + z-index: 2; + + display: flex; + flex-direction: column; + gap: 132px; + + height: 100dvh; + overflow: hidden; + overscroll-behavior: contain; + padding: 20px 16px 20px 20px; + + background-color: rgba(255, 238, 252, 1); + + transition: transform 0.3s ease; + + &:target { + transform: translateX(0); + } + + @include desktop1024 { + position: static; + transform: translate(0); + height: auto; + justify-self: flex-end; + padding: 0; + } + + &__top { + display: flex; + justify-content: space-between; + + @include desktop1024 { + display: none; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 24px; + align-items: center; + justify-self: center; + + list-style: none; + + @include desktop1024 { + flex-direction: row; + gap: 64px; + } + + &-link { + color: rgba(28, 26, 38, 1); + text-decoration: none; + } + + &-phone-link { + display: flex; + gap: 8px; + align-items: center; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + font-style: Medium; + line-height: 100%; + color: rgba(249, 81, 46, 1); + text-transform: uppercase; + letter-spacing: 2%; + } + } +} diff --git a/src/styles/blocks/main/_about.scss b/src/styles/blocks/main/_about.scss new file mode 100644 index 000000000..63b000c9c --- /dev/null +++ b/src/styles/blocks/main/_about.scss @@ -0,0 +1,83 @@ +@use '../../utils/mixins' as *; + +.about { + display: flex; + flex-direction: column; + align-items: center; + gap: 64px; + padding: 0 16px 72px; + margin: 0 auto; + max-width: 1440px; + + background-image: url(../images/Crumbs-320.png); + background-repeat: no-repeat; + background-position: 50% 72%; + + @include tablet { + width: auto; + gap: 72px; + padding: 0 44px 152px; + background-image: url(../images/Crumbs-768.png); + background-position: 50% 20%; + } + + @include desktop1024 { + gap: 144px; + height: 750px; + padding: 0 44px 56px; + background-image: url(../images/Crumbs-1200.png); + background-position: 71% 10%; + } + + @include desktop1200 { + gap: 144px; + height: 750px; + padding: 0 124px 56px; + background-image: url(../images/Crumbs-1200.png); + background-position: 75% 0; + } +} + +.aboutUs { + display: flex; + flex-direction: column; + gap: 32px; + width: auto; + + @include tablet { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 24px; + } + + &__title { + width: 288px; + color: #f9512e; + + @include tablet { + min-width: 328px; + max-width: 456px; + width: auto; + letter-spacing: -0.6px; + } + } + + &__text { + min-width: 288px; + color: #1c1a26; + + @include tablet { + min-width: 328px; + max-width: 456px; + width: auto; + } + + @include desktop1024 { + max-width: 544px; + } + + @include desktop1200 { + max-width: 584px; + } + } +} diff --git a/src/styles/blocks/main/_hero.scss b/src/styles/blocks/main/_hero.scss new file mode 100644 index 000000000..09230e7a5 --- /dev/null +++ b/src/styles/blocks/main/_hero.scss @@ -0,0 +1,161 @@ +@use '../../utils/mixins' as *; + +.hero { + display: flex; + flex-direction: column; + padding: 0 16px; + + @include tablet { + padding: 80px 44px 0; + position: relative; + } + + @include desktop1024 { + height: 612px; + padding: 0 44px; + } + + @include desktop1200 { + padding: 0 124px; + } + + &__text { + width: 281px; + text-align: center; + align-self: flex-start; + + @include tablet { + text-align: left; + } + + @include desktop1024 { + align-self: flex-start; + position: absolute; + top: 24.5%; + width: 260px; + padding: 0; + } + + @include desktop1200 { + width: 290px; + top: 23%; + } + } + + &__title { + width: auto; + display: flex; + place-self: center; + + font-family: Inter, sans-serif; + font-size: 64px; + font-weight: 400; + font-style: normal; + line-height: 85%; + letter-spacing: -0.5px; + color: #f9512e; + text-align: center; + text-transform: uppercase; + padding-top: 32px; + + @include tablet { + z-index: 1; + position: absolute; + top: 45%; + font-size: 80px; + padding-top: 0; + } + + @include desktop1024 { + font-size: 111px; + top: 39%; + } + + @include desktop1200 { + font-size: clamp(112px, 9.4vw, 144px); + top: 39%; + } + } + + &__image { + display: flex; + justify-content: center; + align-self: center; + width: auto; + + @include tablet { + padding: 16px 0 80px; + } + + @include desktop1024 { + padding: 0; + } + } + + &__button { + display: flex; + gap: 6px; + align-items: center; + justify-content: center; + place-self: center; + width: 288px; + height: 56px; + border: 2px solid #f9512e; + border-radius: 32px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + font-style: Medium; + line-height: 100%; + color: #f9512e; + text-transform: uppercase; + letter-spacing: 2%; + text-decoration: none; + + @include tablet { + width: 326px; + } + + @include desktop1024 { + width: 260px; + margin: 0; + position: absolute; + left: 44px; + bottom: 32%; + &:hover, + &:focus { + background-color: rgba(249, 81, 46, 1); + color: rgba(255, 255, 255, 1); + border-bottom: 2px solid white; + + .hero__button-icon { + filter: brightness(0) invert(1); + } + } + + &::after { + content: ''; + position: absolute; + width: 130px; + height: 1px; + background-color: rgba(255, 255, 255, 1); + bottom: 9px; + left: 25%; + transform: scaleX(0); + } + + &:hover::after, + &:focus::after { + transform: scaleX(1); + } + } + + @include desktop1200 { + width: 280px; + margin: 0; + left: 124px; + bottom: 22%; + } + } +} diff --git a/src/styles/blocks/main/_main.scss b/src/styles/blocks/main/_main.scss new file mode 100644 index 000000000..b5d290aec --- /dev/null +++ b/src/styles/blocks/main/_main.scss @@ -0,0 +1,113 @@ +@use '../../utils/mixins' as *; + +.main-section { + display: flex; + flex-direction: column; + margin: 0 auto; + max-width: 1440px; + gap: 56px; + padding: 64px 16px 72px; + + @include tablet { + padding: 228px 44px 152px; + } + + @include desktop1024 { + gap: 80px; + padding: 152px 44px 178px; + } + + @include desktop1200 { + gap: 80px; + padding: 152px 124px 178px; + } +} + +.main { + &__description { + display: flex; + flex-direction: column; + gap: 24px; + max-width: 386px; + + @include tablet { + max-width: none; + } + + &-title { + color: rgba(249, 81, 46, 1); + } + } + + &__cards { + display: flex; + flex-direction: column; + gap: 56px; + align-items: center; + + @include tablet { + flex-flow: row wrap; + gap: 24px; + row-gap: 80px; + &-cakes { + justify-content: flex-start; + } + + &-donuts { + justify-content: flex-end; + } + + &-cookies { + justify-content: flex-start; + } + } + } + + &__card { + display: flex; + flex-direction: column; + gap: 16px; + width: auto; + + @include desktop1024 { + &-picture { + transition: transform 0.3s ease; + &:hover, + &:focus { + transform: scale(1.08); + } + } + } + + &-description { + display: flex; + flex-direction: column; + gap: 8px; + } + + &-title { + color: rgba(127, 128, 150, 1); + } + + &-text { + width: 280px; + letter-spacing: -0.5px; + + @include tablet { + width: 320px; + } + + @include desktop1024 { + width: 380px; + } + } + + &-button { + display: flex; + gap: 8px; + align-self: flex-start; + text-decoration: none; + color: rgba(249, 81, 46, 1); + } + } +} diff --git a/src/styles/blocks/main/_stats.scss b/src/styles/blocks/main/_stats.scss new file mode 100644 index 000000000..fa3c67e21 --- /dev/null +++ b/src/styles/blocks/main/_stats.scss @@ -0,0 +1,51 @@ +@use '../../utils/mixins' as *; + +.stats { + display: flex; + flex-direction: column; + justify-content: center; + gap: 48px; + width: 100%; + + @include tablet { + flex-flow: row wrap; + gap: 24px; + margin: 0 auto; + row-gap: 80px; + } + + &__values { + display: flex; + flex-direction: column; + gap: 8px; + + @include tablet { + min-width: 328px; + width: auto; + } + + @include desktop1024 { + min-width: 216px; + width: 23%; + } + + &-number { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: normal; + font-size: 96px; + line-height: 85%; + text-transform: uppercase; + color: #f9512e; + } + + &-type { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: normal; + font-size: 16px; + line-height: 150%; + color: #1c1a26; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..3d8c11d0f 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,38 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; +@use 'utils/reset'; +@use 'utils/mixins'; +@use 'utils/fonts'; + +@use 'blocks/header'; + +@use 'blocks/main/hero'; +@use 'blocks/main/main'; +@use 'blocks/main/about'; +@use 'blocks/main/stats'; + +@use 'blocks/footer/footer'; +@use 'blocks/footer/menu'; +@use 'blocks/footer/contact'; body { - background: $c-gray; + background: rgba(255, 238, 252, 1); +} + +@media (min-width: 1024px) { + a { + border-bottom: 1px solid transparent; + transition: + color 0.3s ease, + border-bottom 0.3s ease; + &:hover, + &:focus { + border-bottom: 1px solid currentColor; + color: rgba(249, 81, 46, 1); + } + } +} + +.logo--hover:hover, +.logo--hover:focus { + filter: invert(39%) sepia(86%) saturate(2100%) hue-rotate(346deg) + brightness(101%) contrast(96%); } diff --git a/src/styles/utils/_fonts.scss b/src/styles/utils/_fonts.scss new file mode 100644 index 000000000..9b3e38b4e --- /dev/null +++ b/src/styles/utils/_fonts.scss @@ -0,0 +1,45 @@ +@use 'mixins' as *; + +.fs-16-normal { + font-family: Inter, sans-serif; + font-size: 16px; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; + line-height: 150%; +} + +.h3-48-400 { + font-family: Inter, sans-serif; + font-size: 48px; + font-weight: 400; + font-style: normal; + line-height: 85%; + text-transform: uppercase; + + @include tablet { + font-size: 56px; + } + + @include desktop1024 { + font-size: 72px; + } +} + +.h4-16-500 { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 100%; + text-transform: uppercase; + letter-spacing: 2%; + font-style: normal; +} + +.h4-16-400 { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 150%; + font-style: normal; +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..bd960b0a4 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,17 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; +@mixin tablet { + @media (min-width: 768px) { + @content; + } +} + +@mixin desktop1024 { + @media (min-width: 1024px) { + @content; + } +} + +@mixin desktop1200 { + @media (min-width: 1200px) { + @content; } } diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 000000000..b1fa50f90 --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,21 @@ +// @use 'mixins' as *; +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +// a { +// text-decoration: none; +// @include s-desktop { +// &:hover { +// color: #688fe9; +// } +// } +// }