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..d214fe902 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://Radek-Ptak.github.io/layout_creativeBakery/). diff --git a/index.html b/index.html index d339e6856..25a05bce2 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,504 @@ 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

+
+ Creative Bakery +
+ + + Learn more + +
+
+
+
+
+

What we bake

+

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

+
+
+
+
+
+
+ Creative Bakery +
+
+

Cakes

+

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

+
+
+ Creative Bakery + + Order + +
+
+
+
+ Creative Bakery +
+
+

Cakes

+

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

+
+
+ Creative Bakery + + Order + +
+
+
+
+
+
+ Creative Bakery +
+
+

Donuts

+

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

+
+
+ Creative Bakery + + Order + +
+
+
+
+ Creative Bakery +
+
+

Donuts

+

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

+
+
+ Creative Bakery + + Order + +
+
+
+
+
+
+ Creative Bakery +
+
+

Cakes

+

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

+
+
+ Creative Bakery + + Order + +
+
+
+
+ Creative Bakery +
+
+

Cookies

+

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

+
+
+ Creative Bakery + + 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/fonts/Inter/inter-v20-latin-500.woff2 b/src/fonts/Inter/inter-v20-latin-500.woff2 new file mode 100644 index 000000000..54f0a595d Binary files /dev/null and b/src/fonts/Inter/inter-v20-latin-500.woff2 differ diff --git a/src/fonts/Inter/inter-v20-latin-regular.woff2 b/src/fonts/Inter/inter-v20-latin-regular.woff2 new file mode 100644 index 000000000..f15b025d6 Binary files /dev/null and b/src/fonts/Inter/inter-v20-latin-regular.woff2 differ diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto/Roboto-Regular-webfont.woff old mode 100755 new mode 100644 similarity index 100% rename from src/fonts/Roboto-Regular-webfont.woff rename to src/fonts/Roboto/Roboto-Regular-webfont.woff diff --git a/src/images/cookie.png b/src/images/cookie.png new file mode 100644 index 000000000..34844c932 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..e470d89c9 Binary files /dev/null and b/src/images/crumbs.png differ diff --git a/src/images/icon-arrow.svg b/src/images/icon-arrow.svg new file mode 100644 index 000000000..a1bd54079 --- /dev/null +++ b/src/images/icon-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon-close.svg b/src/images/icon-close.svg new file mode 100644 index 000000000..866686fd3 --- /dev/null +++ b/src/images/icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon-cookie.svg b/src/images/icon-cookie.svg new file mode 100644 index 000000000..3ee91aa3a --- /dev/null +++ b/src/images/icon-cookie.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon-facebook.svg b/src/images/icon-facebook.svg new file mode 100644 index 000000000..93b3835e8 --- /dev/null +++ b/src/images/icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon-instagram.svg b/src/images/icon-instagram.svg new file mode 100644 index 000000000..a94faeecf --- /dev/null +++ b/src/images/icon-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon-menu.svg b/src/images/icon-menu.svg new file mode 100644 index 000000000..2b82cbfa5 --- /dev/null +++ b/src/images/icon-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon-phone.svg b/src/images/icon-phone.svg new file mode 100644 index 000000000..39b157356 --- /dev/null +++ b/src/images/icon-phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon-twitter.svg b/src/images/icon-twitter.svg new file mode 100644 index 000000000..f069fea32 --- /dev/null +++ b/src/images/icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo-footer.svg b/src/images/logo-footer.svg new file mode 100644 index 000000000..733596f1f --- /dev/null +++ b/src/images/logo-footer.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 000000000..c3a0f20e6 --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/photo-product-01.jpg b/src/images/photo-product-01.jpg new file mode 100644 index 000000000..f19c4d457 Binary files /dev/null and b/src/images/photo-product-01.jpg differ diff --git a/src/images/photo-product-02.jpg b/src/images/photo-product-02.jpg new file mode 100644 index 000000000..a41b0e7c0 Binary files /dev/null and b/src/images/photo-product-02.jpg differ diff --git a/src/images/photo-product-03.jpg b/src/images/photo-product-03.jpg new file mode 100644 index 000000000..c40aa15de Binary files /dev/null and b/src/images/photo-product-03.jpg differ diff --git a/src/images/photo-product-04.jpg b/src/images/photo-product-04.jpg new file mode 100644 index 000000000..977b59f38 Binary files /dev/null and b/src/images/photo-product-04.jpg differ diff --git a/src/images/photo-product-05.jpg b/src/images/photo-product-05.jpg new file mode 100644 index 000000000..85b2dfe87 Binary files /dev/null and b/src/images/photo-product-05.jpg differ diff --git a/src/images/photo-product-06.jpg b/src/images/photo-product-06.jpg new file mode 100644 index 000000000..7ac02a5cf Binary files /dev/null and b/src/images/photo-product-06.jpg differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..5e522bade 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,60 @@ 'use strict'; + +const burger = document.querySelector('.burger'); +const nav = document.querySelector('.menu'); +const navLinks = document.querySelectorAll('.menu__link'); + +if (burger && nav) { + burger.addEventListener('click', (e) => { + e.preventDefault(); + const isMenuOpen = nav.classList.toggle('menu--active'); + burger.classList.toggle('burger--active'); + document.body.classList.toggle('body--with-menu'); + document.body.style.overflow = isMenuOpen ? 'hidden' : ''; + document.documentElement.style.overflow = isMenuOpen ? 'hidden' : ''; + }); + + navLinks.forEach((link) => { + link.addEventListener('click', () => { + nav.classList.remove('menu--active'); + burger.classList.remove('burger--active'); + document.body.classList.remove('body--with-menu'); + document.body.style.overflow = ''; + document.documentElement.style.overflow = ''; + }); + }); +} + +document.addEventListener('click', (event) => { + const link = event.target.closest('a'); + + if (!link) { + return; + } + + const href = link.getAttribute('href'); + + if (href && (href.startsWith('#') || href === '#')) { + if (link.classList.contains('burger')) { + return; + } + + event.preventDefault(); + history.replaceState(null, null, href); + + if (href !== '#') { + const targetElement = document.querySelector(href); + targetElement?.scrollIntoView({ behavior: 'smooth' }); + } else { + window.scrollTo({ top: 0, behavior: 'smooth' }); + } + } else if ( + href && + !link.target && + !href.startsWith('mailto:') && + !href.startsWith('tel:') + ) { + event.preventDefault(); + window.location.replace(href); + } +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..efd0182de 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,15 @@ @font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; + font-family: Inter; + font-weight: 400; font-style: normal; + font-display: swap; + src: url('../fonts/Inter/inter-v20-latin-regular.woff2') format('woff2'); +} + +@font-face { + font-family: Inter; + font-weight: 500; + font-style: normal; + font-display: swap; + src: url('../fonts/Inter/inter-v20-latin-500.woff2') format('woff2'); } diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..6df912ab1 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,19 @@ h1 { @extend %h1; } + +h2 { + @extend %h2; +} + +h3 { + @extend %uppercase-text; +} + +a { + @extend %link-reset; +} + +ul { + @extend %list-reset; +} diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 000000000..db5014fc2 --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,126 @@ +.about { + @include grid; + + row-gap: 0; + + margin-top: 72px; + margin-bottom: 72px; + + background-image: url('../images/crumbs.png'); + background-repeat: no-repeat; + background-position: center 72%; + background-size: 300px auto; + + @include tablet { + margin-top: 152px; + margin-bottom: 152px; + background-position: center; + background-size: 493px auto; + } + + @include desktop { + margin-top: 178px; + margin-bottom: 56px; + background-size: 673px auto; + } + + &__content { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 64px; + + @include tablet { + gap: 72px; + } + + @include desktop { + gap: 144px; + margin-bottom: 293px; + } + } + + &__header { + display: flex; + flex-direction: column; + gap: 32px; + + @include tablet { + flex-direction: row; + gap: 24px; + } + } + + &__title { + min-width: 328px; + color: $c-accent-orange; + + @include desktop { + flex: 1; + } + } + + &__description { + @include desktop { + flex: 1; + } + } + + &__stats { + display: flex; + flex-direction: column; + gap: 48px; + + @include tablet { + gap: 80px; + } + + @include desktop { + flex-direction: row; + gap: 24px; + } + } + + &__stats-group { + display: flex; + flex-direction: column; + gap: 48px; + + @include tablet { + flex-direction: row; + gap: 24px; + } + + @include desktop { + flex: 1; + flex-direction: row; + gap: 24px; + } + } + + &__stat { + display: flex; + flex-direction: column; + gap: 8px; + + @include tablet { + flex: 1; + } + } + + &__value { + @extend %big-text; + + display: inline-block; + color: $c-accent-orange; + transition: all 0.3s ease-in-out; + + &:hover { + transform: scale(1.1); + text-shadow: + 0 0 12px rgba($c-accent-orange, 0.7), + 0 0 25px rgba($c-accent-orange, 0.4); + filter: brightness(1.2); + } + } +} diff --git a/src/styles/blocks/arrow.scss b/src/styles/blocks/arrow.scss new file mode 100644 index 000000000..4e8cf45ae --- /dev/null +++ b/src/styles/blocks/arrow.scss @@ -0,0 +1,5 @@ +.arrow { + display: block; + width: 24px; + height: 24px; +} diff --git a/src/styles/blocks/burger.scss b/src/styles/blocks/burger.scss new file mode 100644 index 000000000..604d6c8e3 --- /dev/null +++ b/src/styles/blocks/burger.scss @@ -0,0 +1,26 @@ +.burger { + position: relative; + z-index: 200; + + display: block; + + width: 24px; + height: 24px; + + background-image: url('../images/icon-menu.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + &--active { + background-image: url('../images/icon-close.svg'); + } + + @include desktop { + display: none; + } + + &__label { + @include visually-hidden; + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..26da01da0 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,43 @@ +.button { + display: inline-flex; + gap: 4px; + align-items: center; + justify-content: center; + + width: 100%; + height: 56px; + border: 2px solid $c-accent-orange; + border-radius: 32px; + + @include tablet { + max-width: 326px; + } + + @include desktop { + max-width: 260px; + } + + transition: + background-color 0.3s ease, + color 0.3s ease; + + &__icon { + flex-shrink: 0; + + width: 24px; + height: 24px; + + fill: $c-accent-orange; + + transition: fill 0.3s ease; + } + + &:hover { + color: $c-white; + background-color: $c-accent-orange; + + .button__icon { + fill: $c-white; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..e2b0e7753 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,192 @@ +.footer { + overflow: hidden; + width: 100%; + background-color: $c-black; + + &__inner { + @include grid; + + row-gap: 0; + } + + &__content { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 64px; + + margin-top: 56px; + margin-bottom: 40px; + + @include tablet { + flex-direction: row; + gap: 24px; + margin-top: 88px; + margin-bottom: 48px; + } + + @include desktop { + gap: 308px; + } + } + + &__socials-links { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 40px; + + margin-bottom: 56px; + + @include tablet { + flex-direction: row; + gap: 24px; + margin-bottom: 88px; + } + + @include desktop { + gap: 308px; + } + } + + &__menu { + display: flex; + flex-direction: column; + gap: 40px; + + @include tablet { + flex: 1; + gap: 96px; + } + + @include desktop { + gap: 61px; + } + } + + &__image { + display: block; + width: 168px; + height: 40px; + } + + &__links { + display: flex; + flex-direction: column; + gap: 16px; + } + + &__menu-title { + @extend %uppercase-text; + + color: $c-grey-dark; + } + + &__list { + display: flex; + flex-direction: column; + gap: 16px; + } + + &__link { + color: $c-white; + transition: color 0.3s ease; + + &:hover { + color: $c-accent-orange; + } + } + + &__contacts { + display: flex; + flex-direction: column; + gap: 40px; + + @include tablet { + flex: 1; + } + } + + &__contacts-title { + color: $c-white; + + @include desktop { + min-width: 544px; + } + } + + &__contacts-inner { + display: flex; + flex-direction: column; + gap: 16px; + + @include desktop { + flex-direction: row; + gap: 24px; + } + } + + &__phone { + display: flex; + flex-direction: column; + gap: 16px; + + @include desktop { + flex: 1; + } + } + + &__email { + display: flex; + flex-direction: column; + gap: 16px; + + @include desktop { + flex: 1; + } + } + + &__label { + @extend %uppercase-text; + + color: $c-grey-dark; + } + + &__socials { + display: flex; + flex-direction: row; + gap: 32px; + + @include tablet { + flex: 1; + } + } + + &__social { + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.1); + } + } + + &__icon { + display: block; + width: 24px; + height: 24px; + transition: filter 0.3s ease; + + &:hover { + filter: brightness(0) invert(1); + } + } + + &__copyright { + color: $c-grey-dark; + + @include tablet { + flex: 1; + min-width: 544px; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..293b45686 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,15 @@ +.header { + padding: 16px 16px 0; + + @include desktop { + max-width: 1440px; + margin: 0 auto; + padding: 28px 32px 0; + } + + &__nav { + display: flex; + align-items: center; + justify-content: space-between; + } +} diff --git a/src/styles/blocks/hero.scss b/src/styles/blocks/hero.scss new file mode 100644 index 000000000..3c7d4ca9b --- /dev/null +++ b/src/styles/blocks/hero.scss @@ -0,0 +1,106 @@ +.hero { + @include grid; + + row-gap: 0; + margin-top: 48px; + + @include tablet { + margin-top: 96px; + } + + @include desktop { + grid-template-rows: 1fr auto 1fr; + margin-top: 28px; + } + + &__content { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + + @include tablet { + display: contents; + } + } + + &__description { + text-align: center; + + @include tablet { + grid-column: 1 / 5; + grid-row: 1; + text-align: left; + } + + @include desktop { + grid-column: 1 / 3; + grid-row: 1; + align-self: end; + margin-bottom: 8px; + } + } + + &__title { + margin-top: 32px; + color: $c-accent-orange; + text-align: center; + + @include tablet { + z-index: 1; + + grid-column: 1 / -1; + grid-row: 2; + align-self: center; + + margin-top: 0; + } + } + + &__picture { + @include tablet { + grid-column: 1 / -1; + grid-row: 2; + place-self: center; + margin-top: 16px; + } + + @include desktop { + grid-row: 1 / 4; + margin-top: 0; + } + } + + &__image { + display: block; + width: 100%; + height: 290px; + object-fit: contain; + + @include tablet { + height: 328px; + } + + @include desktop { + height: 546px; + } + } + + &__button { + @extend %uppercase-text; + + place-self: center; + color: $c-accent-orange; + + @include tablet { + grid-column: 1 / -1; + grid-row: 3; + margin-top: 80px; + } + + @include desktop { + grid-column: 1 / 3; + place-self: start; + margin-top: 64px; + } + } +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 000000000..b1df96b40 --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,10 @@ +.logo { + position: relative; + z-index: 200; + + &__image { + display: block; + width: 136px; + height: 32px; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..45c71310a --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,76 @@ +.menu { + position: fixed; + z-index: 100; + inset: 0; + transform: translateY(-100%); + + overflow-y: auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + padding: 0 16px; + + background: $c-light-pink; + + transition: transform 0.3s ease; + + &.menu--active { + transform: translateY(0); + } + + @include tablet { + padding: 0 44px; + } + + @include desktop { + position: static; + inset: auto; + transform: none; + + overflow-y: visible; + justify-content: center; + + width: auto; + height: auto; + padding: 0; + + background-color: transparent; + + transition: none; + } + + &__list { + display: flex; + flex-direction: column; + gap: 24px; + + @include desktop { + flex-direction: row; + gap: 64px; + } + } + + &__item { + display: flex; + flex-direction: row; + gap: 4px; + align-items: center; + align-self: center; + + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.1); + } + } + + &__link { + &--phone { + @extend %uppercase-text; + + color: $c-accent-orange; + } + } +} diff --git a/src/styles/blocks/phone.scss b/src/styles/blocks/phone.scss new file mode 100644 index 000000000..938455a1a --- /dev/null +++ b/src/styles/blocks/phone.scss @@ -0,0 +1,5 @@ +.phone { + display: block; + width: 24px; + height: 24px; +} diff --git a/src/styles/blocks/product.scss b/src/styles/blocks/product.scss new file mode 100644 index 000000000..23fdce70d --- /dev/null +++ b/src/styles/blocks/product.scss @@ -0,0 +1,136 @@ +.product { + display: flex; + flex-direction: column; + gap: 56px; + align-items: center; + + @include tablet { + gap: 80px; + } + + &__articles { + display: flex; + flex-direction: column; + gap: 56px; + + @include tablet { + flex-direction: row; + gap: 35px; + justify-content: center; + width: 100%; + + @include desktop { + width: fit-content; + } + } + + &--left { + @include desktop { + align-self: flex-start; + } + } + + &--right { + @include desktop { + align-self: flex-end; + } + } + } + + &__item { + isolation: isolate; + + overflow: hidden; + display: flex; + flex-direction: column; + + max-width: 408px; + border-radius: 8px; + + @include tablet { + flex: 1; + } + + transition: transform 0.3s ease; + + &:hover { + transform: translateY(-10px); + } + } + + &__picture { + overflow: hidden; + border-radius: 8px; + } + + &__image { + display: block; + + width: 100%; + height: 356px; + + object-fit: cover; + + transition: transform 0.3s ease; + + @include tablet { + height: 424px; + } + + @include desktop { + height: 512px; + } + } + + &__content { + display: flex; + flex-direction: column; + gap: 8px; + + margin-top: 16px; + margin-bottom: 16px; + } + + &__title { + color: $c-grey-dark; + } + + &__links { + position: relative; + + display: flex; + flex-direction: row; + gap: 4px; + align-items: center; + + width: fit-content; + padding-bottom: 8px; + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + + width: 0; + height: 1px; + + background-color: $c-accent-orange; + + transition: width 0.3s ease; + } + + &:hover { + &::after { + width: 100%; + } + } + } + + &__link { + @extend %uppercase-text; + + color: $c-accent-orange; + } +} diff --git a/src/styles/blocks/products.scss b/src/styles/blocks/products.scss new file mode 100644 index 000000000..fda2ed55b --- /dev/null +++ b/src/styles/blocks/products.scss @@ -0,0 +1,35 @@ +.products { + @include grid; + + row-gap: 0; + margin-top: 104px; + + @include tablet { + margin-top: 228px; + } + + @include desktop { + margin-top: 218px; + } + + &__content { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 56px; + + @include tablet { + gap: 80px; + } + } + + &__header { + display: flex; + flex-direction: column; + gap: 24px; + } + + &__title { + color: $c-accent-orange; + } +} diff --git a/src/styles/layout/container.scss b/src/styles/layout/container.scss new file mode 100644 index 000000000..83ac3cc3d --- /dev/null +++ b/src/styles/layout/container.scss @@ -0,0 +1,12 @@ +.container { + --container-padding: 16px; + + width: 100%; + max-width: $bp-desktop; + margin: 0 auto; + padding-inline: var(--container-padding); + + @include tablet { + --container-padding: 44px; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..5be32400a 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,45 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import '../styles/blocks/header'; +@import '../styles/layout/container'; +@import '../styles/blocks/menu'; +@import '../styles/blocks/logo'; +@import '../styles/blocks/burger'; +@import '../styles/blocks/phone'; +@import '../styles/blocks/arrow'; +@import '../styles/blocks/button'; +@import '../styles/blocks/hero'; +@import '../styles/blocks/products'; +@import '../styles/blocks/product'; +@import '../styles/blocks/about'; +@import '../styles/blocks/footer'; +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +html, body { - background: $c-gray; + @extend %body-text; + + overflow-x: hidden; + + width: 100%; + max-width: 100%; + + font-family: $font-primary; + color: $c-black; + + background: $c-light-pink; +} + +.body--with-menu { + overflow: hidden; } diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..18b0b22dc 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,63 @@ +%big-text { + font-size: 96px; + font-weight: $fw-regular; + line-height: 85%; + text-transform: uppercase; + letter-spacing: -0.05em; +} + %h1 { - font-family: Roboto, sans-serif; - font-weight: 400; + font-size: 64px; + font-weight: $fw-regular; + line-height: 85%; + text-transform: uppercase; + letter-spacing: -0.05em; + + @include tablet { + font-size: 80px; + } + + @include desktop { + font-size: 136px; + } +} + +%h2 { + font-size: 48px; + font-weight: $fw-regular; + line-height: 85%; + text-transform: uppercase; + letter-spacing: -0.05em; + + @include tablet { + font-size: 56px; + } + + @include desktop { + font-size: 72px; + } +} + +%body-text { + font-size: 16px; + font-weight: $fw-regular; + line-height: 1.5; + letter-spacing: -0.01em; +} + +%uppercase-text { + font-size: 16px; + font-weight: $fw-medium; + line-height: 100%; + text-transform: uppercase; + letter-spacing: 0.02em; +} + +%list-reset { + list-style: none; +} + +%link-reset { + color: inherit; + text-decoration: none; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..fc889ccdc 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,48 @@ +@mixin tablet { + @media (min-width: $bp-tablet) { + @content; + } +} + +@mixin desktop { + @media (min-width: $bp-desktop) { + @content; + } +} + +@mixin grid { + display: grid; + grid-template-columns: repeat($grid-columns-mobile, 1fr); + gap: $grid-gap-mobile; + + @include tablet { + grid-template-columns: repeat($grid-columns-tablet, 1fr); + gap: $grid-gap-tablet; + } + + @include desktop { + grid-template-columns: repeat($grid-columns-desktop, 1fr); + gap: $grid-gap-desktop; + } +} + @mixin hover($_property, $_toValue) { transition: #{$_property} 0.3s; &:hover { #{$_property}: $_toValue; } } + +@mixin visually-hidden { + position: absolute; + + overflow: hidden; + + width: 1px; + height: 1px; + + white-space: nowrap; + + clip: rect(0 0 0 0); + clip-path: inset(50%); +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..efe7d3931 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,23 @@ +$c-dark-orange: #b2341a; +$c-accent-orange: #f9512e; +$c-light-orange: #fba28f; +$c-light-pink: #ffeefc; +$c-light-blue: #eef7ff; +$c-black: #1c1a26; $c-gray: #eee; +$c-grey-dark: #7f8096; +$c-white: #fff; +$font-primary: Inter, sans-serif; +$fw-regular: 400; +$fw-medium: 500; +$fw-semibold: 600; +$bp-mobile: 320px; +$bp-tablet: 640px; +$bp-desktop: 1200px; +$bp-design: 1440px; +$grid-columns-mobile: 2; +$grid-columns-tablet: 8; +$grid-columns-desktop: 8; +$grid-gap-mobile: 16px; +$grid-gap-tablet: 24px; +$grid-gap-desktop: 24px;