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 302783df5..6c0d0e16d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # KateVR landing page (HARD) -**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** +**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** Implement landing page according to [Figma design](https://www.figma.com/file/Blpg4iapsI7fRqJeSp6DvK/KatVR?node-id=1%3A370) - Use BEM and SCSS @@ -25,7 +25,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/Bl 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_KateVR/). + [DEMO LINK](https://SerhiiSemennikov.github.io/layout_KateVR/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/package-lock.json b/package-lock.json index a1958a200..9d1446654 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.2", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "cypress": "^13.13.0", @@ -55,80 +55,20 @@ } }, "node_modules/@babel/code-frame": { - "version": "7.22.13", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz", - "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz", + "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/highlight": "^7.22.13", - "chalk": "^2.4.2" + "@babel/helper-validator-identifier": "^7.27.1", + "js-tokens": "^4.0.0", + "picocolors": "^1.1.1" }, "engines": { "node": ">=6.9.0" } }, - "node_modules/@babel/code-frame/node_modules/ansi-styles": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", - "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, - "dependencies": { - "color-convert": "^1.9.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/code-frame/node_modules/chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, - "dependencies": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/code-frame/node_modules/color-convert": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, - "dependencies": { - "color-name": "1.1.3" - } - }, - "node_modules/@babel/code-frame/node_modules/color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "dev": true - }, - "node_modules/@babel/code-frame/node_modules/has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/code-frame/node_modules/supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, - "dependencies": { - "has-flag": "^3.0.0" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/@babel/compat-data": { "version": "7.23.3", "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.3.tgz", @@ -393,19 +333,21 @@ } }, "node_modules/@babel/helper-string-parser": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz", - "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz", + "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==", "dev": true, + "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.22.20", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz", - "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz", + "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==", "dev": true, + "license": "MIT", "engines": { "node": ">=6.9.0" } @@ -420,100 +362,28 @@ } }, "node_modules/@babel/helpers": { - "version": "7.23.2", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.2.tgz", - "integrity": "sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==", + "version": "7.28.4", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz", + "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/template": "^7.22.15", - "@babel/traverse": "^7.23.2", - "@babel/types": "^7.23.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/highlight": { - "version": "7.22.20", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz", - "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==", - "dev": true, - "dependencies": { - "@babel/helper-validator-identifier": "^7.22.20", - "chalk": "^2.4.2", - "js-tokens": "^4.0.0" + "@babel/template": "^7.27.2", + "@babel/types": "^7.28.4" }, "engines": { "node": ">=6.9.0" } }, - "node_modules/@babel/highlight/node_modules/ansi-styles": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", - "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, - "dependencies": { - "color-convert": "^1.9.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/highlight/node_modules/chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, - "dependencies": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/highlight/node_modules/color-convert": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, - "dependencies": { - "color-name": "1.1.3" - } - }, - "node_modules/@babel/highlight/node_modules/color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "dev": true - }, - "node_modules/@babel/highlight/node_modules/has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/highlight/node_modules/supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "node_modules/@babel/parser": { + "version": "7.28.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz", + "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==", "dev": true, + "license": "MIT", "dependencies": { - "has-flag": "^3.0.0" + "@babel/types": "^7.28.4" }, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/parser": { - "version": "7.23.3", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.3.tgz", - "integrity": "sha512-uVsWNvlVsIninV2prNz/3lHCb+5CJ+e+IUBfbjToAHODtfGYLfCFuY4AU7TskI+dAKk+njsPiBjq1gKTvZOBaw==", - "dev": true, "bin": { "parser": "bin/babel-parser.js" }, @@ -699,14 +569,15 @@ } }, "node_modules/@babel/template": { - "version": "7.22.15", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz", - "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==", + "version": "7.27.2", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz", + "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.22.13", - "@babel/parser": "^7.22.15", - "@babel/types": "^7.22.15" + "@babel/code-frame": "^7.27.1", + "@babel/parser": "^7.27.2", + "@babel/types": "^7.27.1" }, "engines": { "node": ">=6.9.0" @@ -766,14 +637,14 @@ "dev": true }, "node_modules/@babel/types": { - "version": "7.23.3", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.3.tgz", - "integrity": "sha512-OZnvoH2l8PK5eUvEcUyCt/sXgr/h+UWpVuBbOljwcrAgUl6lpchoQ++PHGyQy1AtYnVA6CEq3y5xeEI10brpXw==", + "version": "7.28.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz", + "integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/helper-string-parser": "^7.22.5", - "@babel/helper-validator-identifier": "^7.22.20", - "to-fast-properties": "^2.0.0" + "@babel/helper-string-parser": "^7.27.1", + "@babel/helper-validator-identifier": "^7.27.1" }, "engines": { "node": ">=6.9.0" @@ -1095,6 +966,28 @@ "deprecated": "Use @eslint/object-schema instead", "dev": true }, + "node_modules/@inquirer/external-editor": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@inquirer/external-editor/-/external-editor-1.0.2.tgz", + "integrity": "sha512-yy9cOoBnx58TlsPrIxauKIFQTiyH+0MK4e97y4sV9ERbI+zDxw7i2hxHLCIEGIE/8PPvDxGhgzIOTSOWcs6/MQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "chardet": "^2.1.0", + "iconv-lite": "^0.7.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -1783,10 +1676,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.1.tgz", - "integrity": "sha512-Tf97p/jZ/ZRsQSPGcZf2FpvxgUCl8DiUOsiDFHj7HBN8gMK0iZOBQEtyqcFsauVUAvPP8Ayo8cAiC12MMp45iQ==", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", + "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", @@ -5749,10 +5643,11 @@ "dev": true }, "node_modules/brace-expansion": { - "version": "1.1.11", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", - "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "version": "1.1.12", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz", + "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==", "dev": true, + "license": "MIT", "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6024,10 +5919,11 @@ } }, "node_modules/chardet": { - "version": "0.7.0", - "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz", - "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", - "dev": true + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/chardet/-/chardet-2.1.0.tgz", + "integrity": "sha512-bNFETTG/pM5ryzQ9Ad0lJOTa6HWD/YsScAR3EnCPZRPlQh77JocYktSHOUHelyhm8IARL+o4c4F1bP5KVOjiRA==", + "dev": true, + "license": "MIT" }, "node_modules/check-more-types": { "version": "2.24.0", @@ -6337,10 +6233,11 @@ } }, "node_modules/cross-env/node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dev": true, + "license": "MIT", "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", @@ -6713,15 +6610,6 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, - "node_modules/cypress/node_modules/tmp": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz", - "integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==", - "dev": true, - "engines": { - "node": ">=14.14" - } - }, "node_modules/cypress/node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", @@ -7709,10 +7597,11 @@ "dev": true }, "node_modules/eslint/node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dev": true, + "license": "MIT", "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", @@ -8105,20 +7994,6 @@ "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", "dev": true }, - "node_modules/external-editor": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz", - "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==", - "dev": true, - "dependencies": { - "chardet": "^0.7.0", - "iconv-lite": "^0.4.24", - "tmp": "^0.0.33" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/extract-zip": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz", @@ -8500,10 +8375,11 @@ } }, "node_modules/form-data": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.3.tgz", - "integrity": "sha512-qsITQPfmvMOSAdeyZ+12I1c+CKSstAFAwu+97zrnWAbIr5u8wfsExUzCesVLC8NgHuRUqNN4Zy6UPWUTRGslcA==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz", + "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==", "dev": true, + "license": "MIT", "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", @@ -9153,15 +9029,20 @@ } }, "node_modules/iconv-lite": { - "version": "0.4.24", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", - "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.0.tgz", + "integrity": "sha512-cf6L2Ds3h57VVmkZe+Pn+5APsT7FpqJtEhhieDCvrE2MK5Qk9MyffgQyuxQTm6BChfeZNtcOLHp9IcWRVcIcBQ==", "dev": true, + "license": "MIT", "dependencies": { - "safer-buffer": ">= 2.1.2 < 3" + "safer-buffer": ">= 2.1.2 < 3.0.0" }, "engines": { "node": ">=0.10.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" } }, "node_modules/ieee754": { @@ -9295,16 +9176,17 @@ "dev": true }, "node_modules/inquirer": { - "version": "8.2.6", - "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.6.tgz", - "integrity": "sha512-M1WuAmb7pn9zdFRtQYk26ZBoY043Sse0wVDdk4Bppr+JOXyQYybdtvK+l9wUibhtjdjvtoiNy8tk+EgsYIUqKg==", + "version": "8.2.7", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.7.tgz", + "integrity": "sha512-UjOaSel/iddGZJ5xP/Eixh6dY1XghiBw4XK13rCCIJcJfyhhoul/7KhLLUGtebEj6GDYM6Vnx/mVsjx2L/mFIA==", "dev": true, + "license": "MIT", "dependencies": { + "@inquirer/external-editor": "^1.0.0", "ansi-escapes": "^4.2.1", "chalk": "^4.1.1", "cli-cursor": "^3.1.0", "cli-width": "^3.0.0", - "external-editor": "^3.0.3", "figures": "^3.0.0", "lodash": "^4.17.21", "mute-stream": "0.0.8", @@ -9866,10 +9748,11 @@ } }, "node_modules/jest-changed-files/node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dev": true, + "license": "MIT", "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", @@ -12459,15 +12342,6 @@ "node": ">=6" } }, - "node_modules/os-tmpdir": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", - "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/ospath": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz", @@ -12696,10 +12570,11 @@ "peer": true }, "node_modules/path-to-regexp": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", - "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz", + "integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==", "dev": true, + "license": "MIT", "dependencies": { "isarray": "0.0.1" } @@ -14509,15 +14384,13 @@ "dev": true }, "node_modules/tmp": { - "version": "0.0.33", - "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", - "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==", + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.5.tgz", + "integrity": "sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==", "dev": true, - "dependencies": { - "os-tmpdir": "~1.0.2" - }, + "license": "MIT", "engines": { - "node": ">=0.6.0" + "node": ">=14.14" } }, "node_modules/tmpl": { @@ -14526,15 +14399,6 @@ "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==", "dev": true }, - "node_modules/to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", - "dev": true, - "engines": { - "node": ">=4" - } - }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -15122,10 +14986,11 @@ } }, "node_modules/ws": { - "version": "8.13.0", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz", - "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==", + "version": "8.18.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz", + "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==", "dev": true, + "license": "MIT", "engines": { "node": ">=10.0.0" }, diff --git a/package.json b/package.json index 2fa16c0c4..0a5c5658f 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.2", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "cypress": "^13.13.0", diff --git a/src/images/2a189eaf3e07822c7a183fd855bb6d66dbd25dea.png b/src/images/2a189eaf3e07822c7a183fd855bb6d66dbd25dea.png new file mode 100644 index 000000000..ad4bcca01 Binary files /dev/null and b/src/images/2a189eaf3e07822c7a183fd855bb6d66dbd25dea.png differ diff --git a/src/images/Group 19.svg b/src/images/Group 19.svg new file mode 100644 index 000000000..8f894e165 --- /dev/null +++ b/src/images/Group 19.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/Group 2.jpg b/src/images/Group 2.jpg new file mode 100644 index 000000000..63c5ed747 Binary files /dev/null and b/src/images/Group 2.jpg differ diff --git a/src/images/Group 2.png b/src/images/Group 2.png new file mode 100644 index 000000000..3b450f835 Binary files /dev/null and b/src/images/Group 2.png differ diff --git a/src/images/Image.svg b/src/images/Image.svg new file mode 100644 index 000000000..2ca73c35c --- /dev/null +++ b/src/images/Image.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/Image6about.svg b/src/images/Image6about.svg new file mode 100644 index 000000000..8e7ca7cd7 --- /dev/null +++ b/src/images/Image6about.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/Image6aboutCenter.svg b/src/images/Image6aboutCenter.svg new file mode 100644 index 000000000..96c9d4f48 --- /dev/null +++ b/src/images/Image6aboutCenter.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/ImageKat.png b/src/images/ImageKat.png new file mode 100644 index 000000000..267b0b658 Binary files /dev/null and b/src/images/ImageKat.png differ diff --git a/src/images/ImageKat.svg b/src/images/ImageKat.svg new file mode 100644 index 000000000..f449cddb7 --- /dev/null +++ b/src/images/ImageKat.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/images/Title 2.svg b/src/images/Title 2.svg new file mode 100644 index 000000000..dd0ea1c10 --- /dev/null +++ b/src/images/Title 2.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/Title.svg b/src/images/Title.svg new file mode 100644 index 000000000..f74a3495a --- /dev/null +++ b/src/images/Title.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/aboutUs.svg b/src/images/aboutUs.svg new file mode 100644 index 000000000..1e7b4f91e --- /dev/null +++ b/src/images/aboutUs.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/b127e5f411055ca62953e6bbb6d387da006af088.png b/src/images/b127e5f411055ca62953e6bbb6d387da006af088.png new file mode 100644 index 000000000..a24bc7710 Binary files /dev/null and b/src/images/b127e5f411055ca62953e6bbb6d387da006af088.png differ diff --git a/src/images/icons/1.svg b/src/images/icons/1.svg new file mode 100644 index 000000000..4c51f19b4 --- /dev/null +++ b/src/images/icons/1.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/images/icons/2 (1).png b/src/images/icons/2 (1).png new file mode 100644 index 000000000..a7fcd3443 Binary files /dev/null and b/src/images/icons/2 (1).png differ diff --git a/src/images/icons/face.svg b/src/images/icons/face.svg new file mode 100644 index 000000000..e4de883e6 --- /dev/null +++ b/src/images/icons/face.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/facebook-hover.svg b/src/images/icons/facebook-hover.svg new file mode 100644 index 000000000..83cb06e1f --- /dev/null +++ b/src/images/icons/facebook-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/iconClose.svg b/src/images/icons/iconClose.svg new file mode 100644 index 000000000..9ebfb1b96 --- /dev/null +++ b/src/images/icons/iconClose.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/iconCloseHover.svg b/src/images/icons/iconCloseHover.svg new file mode 100644 index 000000000..b5e212800 --- /dev/null +++ b/src/images/icons/iconCloseHover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/insta.svg b/src/images/icons/insta.svg new file mode 100644 index 000000000..53bade5b8 --- /dev/null +++ b/src/images/icons/insta.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/language-close-hover.svg b/src/images/icons/language-close-hover.svg new file mode 100644 index 000000000..8f8dd42de --- /dev/null +++ b/src/images/icons/language-close-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/language-close.svg b/src/images/icons/language-close.svg new file mode 100644 index 000000000..6d4ea0730 --- /dev/null +++ b/src/images/icons/language-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/logoKatVr.svg b/src/images/icons/logoKatVr.svg new file mode 100644 index 000000000..105f9e7f1 --- /dev/null +++ b/src/images/icons/logoKatVr.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/icons/magistr.svg b/src/images/icons/magistr.svg new file mode 100644 index 000000000..ed2e4f006 --- /dev/null +++ b/src/images/icons/magistr.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/images/icons/masterCard.svg b/src/images/icons/masterCard.svg new file mode 100644 index 000000000..2ce8f2dab --- /dev/null +++ b/src/images/icons/masterCard.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/menuWhite.svg b/src/images/icons/menuWhite.svg new file mode 100644 index 000000000..31499720c --- /dev/null +++ b/src/images/icons/menuWhite.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/minusR.png b/src/images/icons/minusR.png new file mode 100644 index 000000000..db4dafa01 Binary files /dev/null and b/src/images/icons/minusR.png differ diff --git a/src/images/icons/minusR.svg b/src/images/icons/minusR.svg new file mode 100644 index 000000000..f3e455cf1 --- /dev/null +++ b/src/images/icons/minusR.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/more.svg b/src/images/icons/more.svg new file mode 100644 index 000000000..1782f2a77 --- /dev/null +++ b/src/images/icons/more.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/moreHover.svg b/src/images/icons/moreHover.svg new file mode 100644 index 000000000..a750c32e3 --- /dev/null +++ b/src/images/icons/moreHover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/muscle.svg b/src/images/icons/muscle.svg new file mode 100644 index 000000000..b93107ada --- /dev/null +++ b/src/images/icons/muscle.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/network.svg b/src/images/icons/network.svg new file mode 100644 index 000000000..81f8ef946 --- /dev/null +++ b/src/images/icons/network.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/play-video-tri-hover.svg b/src/images/icons/play-video-tri-hover.svg new file mode 100644 index 000000000..d7e14469a --- /dev/null +++ b/src/images/icons/play-video-tri-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/play-video-tri.svg b/src/images/icons/play-video-tri.svg new file mode 100644 index 000000000..9a2ff4ef8 --- /dev/null +++ b/src/images/icons/play-video-tri.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/play-video-wrapper.svg b/src/images/icons/play-video-wrapper.svg new file mode 100644 index 000000000..9be748e05 --- /dev/null +++ b/src/images/icons/play-video-wrapper.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/images/icons/playVideo.svg b/src/images/icons/playVideo.svg new file mode 100644 index 000000000..fbdf596c1 --- /dev/null +++ b/src/images/icons/playVideo.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/playVideoHover.svg b/src/images/icons/playVideoHover.svg new file mode 100644 index 000000000..39b113b6c --- /dev/null +++ b/src/images/icons/playVideoHover.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/plusR.png b/src/images/icons/plusR.png new file mode 100644 index 000000000..081c67db0 Binary files /dev/null and b/src/images/icons/plusR.png differ diff --git a/src/images/icons/plusR.svg b/src/images/icons/plusR.svg new file mode 100644 index 000000000..c1c91e514 --- /dev/null +++ b/src/images/icons/plusR.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/reddit-hover.svg b/src/images/icons/reddit-hover.svg new file mode 100644 index 000000000..13b3dc748 --- /dev/null +++ b/src/images/icons/reddit-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/skyline.svg b/src/images/icons/skyline.svg new file mode 100644 index 000000000..68a503781 --- /dev/null +++ b/src/images/icons/skyline.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/specsMinus.png b/src/images/icons/specsMinus.png new file mode 100644 index 000000000..19de3a13b Binary files /dev/null and b/src/images/icons/specsMinus.png differ diff --git a/src/images/icons/specsPlus.png b/src/images/icons/specsPlus.png new file mode 100644 index 000000000..be2f7a05f Binary files /dev/null and b/src/images/icons/specsPlus.png differ diff --git a/src/images/icons/twitter-hover.svg b/src/images/icons/twitter-hover.svg new file mode 100644 index 000000000..99f1c656f --- /dev/null +++ b/src/images/icons/twitter-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/twitter.svg b/src/images/icons/twitter.svg new file mode 100644 index 000000000..084900b8e --- /dev/null +++ b/src/images/icons/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/up.svg b/src/images/icons/up.svg new file mode 100644 index 000000000..f246f3acc --- /dev/null +++ b/src/images/icons/up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/upHover (2).svg b/src/images/icons/upHover (2).svg new file mode 100644 index 000000000..38bdbf705 --- /dev/null +++ b/src/images/icons/upHover (2).svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/videoIcon.svg b/src/images/icons/videoIcon.svg new file mode 100644 index 000000000..d0756ed2d --- /dev/null +++ b/src/images/icons/videoIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/vr.svg b/src/images/icons/vr.svg new file mode 100644 index 000000000..6188346d2 --- /dev/null +++ b/src/images/icons/vr.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icons/vrBig.svg b/src/images/icons/vrBig.svg new file mode 100644 index 000000000..a42594520 --- /dev/null +++ b/src/images/icons/vrBig.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/vrSmall.svg b/src/images/icons/vrSmall.svg new file mode 100644 index 000000000..61cb0d549 --- /dev/null +++ b/src/images/icons/vrSmall.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/wifi.svg b/src/images/icons/wifi.svg new file mode 100644 index 000000000..7850ac025 --- /dev/null +++ b/src/images/icons/wifi.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/images/icons/xkomp.svg b/src/images/icons/xkomp.svg new file mode 100644 index 000000000..37e8765f1 --- /dev/null +++ b/src/images/icons/xkomp.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/youtube-hover.svg b/src/images/icons/youtube-hover.svg new file mode 100644 index 000000000..c678f0af3 --- /dev/null +++ b/src/images/icons/youtube-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/image 3.jpg b/src/images/image 3.jpg new file mode 100644 index 000000000..068526199 Binary files /dev/null and b/src/images/image 3.jpg differ diff --git a/src/images/image.png b/src/images/image.png new file mode 100644 index 000000000..0fd5ca8d8 Binary files /dev/null and b/src/images/image.png differ diff --git a/src/images/imageVideo.png b/src/images/imageVideo.png new file mode 100644 index 000000000..a5ab68d9b Binary files /dev/null and b/src/images/imageVideo.png differ diff --git a/src/images/imageVideo.svg b/src/images/imageVideo.svg new file mode 100644 index 000000000..fc44daa2c --- /dev/null +++ b/src/images/imageVideo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/katWalkC2.jpg b/src/images/katWalkC2.jpg new file mode 100644 index 000000000..d21b7617d Binary files /dev/null and b/src/images/katWalkC2.jpg differ diff --git a/src/images/katvr1.webp b/src/images/katvr1.webp new file mode 100644 index 000000000..d1c2b4be6 Binary files /dev/null and b/src/images/katvr1.webp differ diff --git a/src/images/katvr2.webp b/src/images/katvr2.webp new file mode 100644 index 000000000..a3fd50ed2 Binary files /dev/null and b/src/images/katvr2.webp differ diff --git a/src/images/katvr3.webp b/src/images/katvr3.webp new file mode 100644 index 000000000..60362e9ec Binary files /dev/null and b/src/images/katvr3.webp differ diff --git a/src/images/katvr4.webp b/src/images/katvr4.webp new file mode 100644 index 000000000..d80e38516 Binary files /dev/null and b/src/images/katvr4.webp differ diff --git a/src/images/niceToM.svg b/src/images/niceToM.svg new file mode 100644 index 000000000..e0038a62a --- /dev/null +++ b/src/images/niceToM.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/tech-specs.png b/src/images/tech-specs.png new file mode 100644 index 000000000..50d670ac8 Binary files /dev/null and b/src/images/tech-specs.png differ diff --git a/src/images/techSpecs.svg b/src/images/techSpecs.svg new file mode 100644 index 000000000..bdde85560 --- /dev/null +++ b/src/images/techSpecs.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/whiKatLocoSmall.svg b/src/images/whiKatLocoSmall.svg new file mode 100644 index 000000000..d4d6b1c66 --- /dev/null +++ b/src/images/whiKatLocoSmall.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/whyKatLocoBig.svg b/src/images/whyKatLocoBig.svg new file mode 100644 index 000000000..dfa15288c --- /dev/null +++ b/src/images/whyKatLocoBig.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/index.html b/src/index.html index 8019b83ec..8dce6eecf 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,2085 @@ - + - Title + KatVR + + + + + + + + + - -

Hello Mate Academy

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

+ MORE THAN + GAMING! +

+ +

+ This also made for people who are interested in... +

+ +
+
+
+ EDUCATION +
+ +

EDUCATION

+ +

+ Create aducational simulations, trainings and much more with + unlimited virtual space and minimum physical space +

+
+ +
+
+ REAL ESTATE +
+ +

REAL ESTATE

+ +

+ Desighn architectural projects in a deeply realistic environment + allowing visitors to freely walk around, and feel their vibe +

+
+ +
+
+ FITNESS +
+ +

FITNESS

+ +

+ Combine business with pleasure, and discover countless ways to + stay fit while playing your favorite VR Games! +

+
+ +
+
+ SOCIAL INTERACTIONS +
+ +

+ SOCIAL INTERACTIONS +

+ +

+ Hang out with your friends in the virtual world when you can’t + meet space requirements +

+
+
+
+
+
+ +
+
+
+
+

+ ABOUT + PRODUCT! +

+ +
+
+ +
+
+
+ image-1 + 111 +
+
+ image-2 + 222 +
+
+ image-3 + 333 +
+
+ image-4 + 444 +
+
+ image-5 + 555 +
+
+
+
+
+
+ Previous +
+
Next
+
+
+
+ +
+
+ +

+ KAT loco is a foot-based VR locomotion system that gives complete + physical control over lower-body actions, allowing you to freely + walk, run, and carry out just any other movement in virtual + reality +

+ +
+ + +
+ + + + +
+ +
+
+

Uniwersally compatible

+

User friendly hardware

+

+ Complete SDK for Developers +

+
+
+ center +
+
+
+
+ Smart wireless sensor +
+
+ Multifunctional software +
+
+
+
+
+ Complete SDK for Developers +
+
+ User friendly hardware +
+
+ Uniwersally compatible +
+
+
+
+
+ Complete locomotion system +
+
+
+
+

+ Complete locomotion system +

+

Smart wireless sensor

+

+ Multifunctional software +

+
+
+
+
+ +
+

+ NICE TO MEET + YOU! +

+
+

+ KAT VR is an independent company dedicated to the research, + development, and sales of VR Locomotion products and solutions. + Founded in 2013, we have quickly grown to become one of the world’s + leading professional suppliers of VR games’ & simulations’ equipment +

+
+
+ +
+
+
+

+ TECH + SPECS +

+ +
+
+
+ +
+

+ SENSOR +

+ +
    +
  • Weight: 35g/1.23oz each
    • +
  • + Dimension: 50mm/1.97in 24mm/0.94in +
    • +
  • Light: LED lights
    • +
+
+
+ +
+
+
+

+ CONNECTION +

+ +
    +
  • Wireless: Bluetooth 4.2
    • +
  • Signal range: 5m
    • +
  • Receiver: USB 2.0 and above
    • +
+
+
+ +
+
+
+

+ BATTERRIES +

+ +
    +
  • + Type: Lthium-lon polymer batteries +
    • +
  • Capacity: 370mAh
    • +
  • + Battery life: 10h of continuous use 150 hours on stand by +
    • +
  • + Charging: Fast charging - 1 hour +
    • +
  • + Charging voltage and current: 5V = 0.5A +
    • +
+
+
+ +
+ tech +
+
+
+
+
+ +
+
+
+

+ WHY + KAT LOCO? +

+ +
+
+
+ UNIVERSALLY COMPATIBLE +
+ +

+ UNIVERSALLY COMPATIBLE +

+ +

+ KAT Loco offers universal compatibility across all major VR + headsets and platforms allowing you to play any VR game with + support for Free Locomotion +

+
+ +
+
+ VR/PC CONTROL PANEL +
+ +

VR/PC CONTROL PANEL

+ +

+ Our Multifunctional Software allows for quick access to KAT + Loco’s control panel both from a computer desktop, and directly + from your VR headset. +

+
+ +
+
+ WIRELESS SENSORS +
+ +

WIRELESS SENSORS

+ +

+ What makes it even more advanced, KAT Loco is entirely wireless, + and comes with a complete system of algorithms, super durable + batteries and more! +

+
+
+
+
+
+ +
+
+
+

Have any questions?

+ +

+ GET + IN TOUCH +

+ +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+ + +
+ + + +
+ + +

+ Our manager will reply you within 15 minutes +

+ +
+ +
+
+
+
+ + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..199259960 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,648 @@ +/* eslint-disable no-undef */ + +/* eslint-disable no-unused-vars */ +/* eslint-disable max-len */ 'use strict'; + +const body = document.body; +const page = document.documentElement; + +const menu = document.getElementById('menu1'); +const openMenuButton = document.getElementById('menu-button'); +const closeMenuButton = document.getElementById('menu-close'); + +openMenuButton.addEventListener('click', () => { + openMenu(); +}); + +closeMenuButton.addEventListener('click', () => { + closeMenu(); +}); + +function openMenu() { + menu.classList.add('menu1--open'); + body.style.overflowY = 'hidden'; + // page.style.paddingRight = getScrollbarWidth() + 'px'; +} + +function closeMenu() { + menu.classList.remove('menu1--open'); + body.style.overflowY = 'auto'; + page.style.paddingRight = 0; +} + +// Function to get all href attributes from elements in the document +function getAllHrefLinks() { + // Use document.querySelectorAll to select all elements + const parentElement = document.getElementById('menu1'); + const links = parentElement.querySelectorAll('a'); + + // Extract the href attributes into an array + const hrefs = Array.from(links) // Convert NodeList to Array + .map(link => link.getAttribute('href')) // Get the href attribute + .filter(href => href !== null && href.trim() !== ''); // Filter out null or empty hrefs + + return hrefs; +} + +// Example usage +const allLinks = getAllHrefLinks(); + +document.addEventListener('click', function(e) { + const target = e.target; + const targetId = target.getAttribute('href'); + const targetElement = document.querySelector(targetId); + + if (allLinks.some( + (element) => element === targetId, + ) + ) { + e.preventDefault(); + closeMenu(); + + if (targetElement) { + targetElement.scrollIntoView({ + behavior: 'smooth', + }); + } + } +}); + +const language = document.getElementById('language'); +const openLanguageButton = document.querySelector('.language-link'); +const closeLanguageButton = document.getElementById('language-close'); + +function openLanguage() { + language.classList.add('language--open'); + body.style.overflowY = 'hidden'; + // page.style.paddingRight = getScrollbarWidth() + 'px'; +} + +function closeLanguage() { + language.classList.remove('language--open'); + body.style.overflowY = 'auto'; + page.style.paddingRight = 0; +} + +openLanguageButton.addEventListener('click', () => { + openLanguage(); +}); + +closeLanguageButton.addEventListener('click', () => { + closeLanguage(); +}); + +language.addEventListener('click', (e) => { + if (e.target.closest('li')) { + closeLanguage(); + } + + e.stopPropagation(); +}); + +document.addEventListener('click', (e) => { + if ( + !language.contains(e.target) + && language.classList.contains('language--open') + && e.target !== openLanguageButton + ) { + closeLanguage(); + } +}); + +const dropdown = document.querySelector('.dropdown'); +const dropdownBtn = document.querySelector('.dropdown__btn'); +const dropdownContent = document.querySelector('.dropdown__content'); +const options = dropdownContent.querySelectorAll('li'); + +dropdownBtn.addEventListener('click', function() { + dropdown.classList.toggle('dropdown--active'); +}); + +document.addEventListener('click', function(event) { + if (!dropdown.contains(event.target)) { + dropdown.classList.remove('dropdown--active'); + } +}); + +options.forEach((option) => { + option.addEventListener('click', function() { + dropdownBtn.textContent = this.textContent; + dropdown.classList.remove('dropdown--active'); + }); +}); + +const help = document.getElementById('help'); +const openHelpButtons = document.querySelectorAll('.help-link'); +const closeHelpButton = document.getElementById('help-close'); +const helpServiceBtn = help.querySelectorAll('.help__service-btn'); + +function openHelp() { + help.classList.add('help--open'); + body.style.overflowY = 'hidden'; + // page.style.paddingRight = getScrollbarWidth() + 'px'; +} + +function closeHelp() { + help.classList.remove('help--open'); + body.style.overflowY = 'auto'; + page.style.paddingRight = 0; +} + +openHelpButtons.forEach( + (btn) => + btn.addEventListener('click', () => { + openHelp(); + // pageMenuContent; + }), + // eslint-disable-next-line function-paren-newline +); + +closeHelpButton.addEventListener('click', () => { + closeHelp(); +}); + +helpServiceBtn.forEach( + (btn) => + btn.addEventListener('click', () => { + closeHelp(); + }), + // eslint-disable-next-line function-paren-newline +); + +const faq = document.getElementById('faq'); +const openFaqButtons = document.querySelectorAll('.faq-link'); +const closeFaqButton = document.getElementById('faq-close'); + +function openFaq() { + faq.classList.add('faq--open'); + body.style.overflowY = 'hidden'; + // page.style.paddingRight = getScrollbarWidth() + 'px'; +} + +function closeFaq() { + faq.classList.remove('faq--open'); + body.style.overflowY = 'auto'; + page.style.paddingRight = 0; +} + +openFaqButtons.forEach( + (btn) => + btn.addEventListener('click', () => { + openFaq(); + }), + // eslint-disable-next-line function-paren-newline +); + +closeFaqButton.addEventListener('click', () => { + closeFaq(); +}); + +const accordions = document.querySelectorAll('.accordion'); + +accordions.forEach((accordion) => { + accordion.addEventListener('click', function() { + this.classList.toggle('accordion--open'); + }); +}); + +if (window.innerWidth >= 1280) { + // eslint-disable-next-line no-shadow + const swiper = new Swiper('.swiper-header', { + loop: true, + autoplay: { + delay: 5000, + }, + + navigation: { + prevEl: '.slider__navigation--prev', + nextEl: '.slider__navigation--next', + }, + + scrollbar: { + el: '.header__swiper-scrollbar', + dragClass: 'header__swiper-scrollbar-drag', + }, + }); +} + +const swiper = new Swiper('.about__swiper', { + loop: true, + autoplay: { + delay: 5000, + }, + + navigation: { + prevEl: '.slider__navigation--prev', + nextEl: '.slider__navigation--next', + }, + + scrollbar: { + el: '.about__swiper-scrollbar', + dragClass: 'about__swiper-scrollbar-drag', + }, + + pagination: { + el: '.about__swiper-pagination--bullet', + clickable: true, + bulletActiveClass: 'about__swiper-pagination-bullet-active', + bulletClass: 'about__swiper-pagination-bullet', + }, + + breakpoints: { + 1280: { + pagination: { + el: '.about__slider-pagination--fraction', + type: 'fraction', + currentClass: 'pagination-current', + totalClass: 'pagination-total', + }, + }, + }, +}); + +const techSpecButtons = document.querySelectorAll('.tech__spec-button'); + +techSpecButtons.forEach((button) => { + button.addEventListener('click', () => { + const parent = button.closest('.tech__spec'); + const info = parent.querySelector('.tech__spec-info'); + const specButton = parent.querySelector('.tech__spec-button'); + + info.classList.toggle('tech__spec-info--show'); + specButton.classList.toggle('tech__spec-button--active'); + }); +}); + +const frm = document.forms.contact__form; + +const name1 = frm.name; +const nameLabel = document.querySelector('label[for="name1"]'); +const nameLabelText = nameLabel.innerText; + +const email = frm.email; +const emailLabel = document.querySelector('label[for="email"]'); +const emailLabelText = emailLabel.innerText; + +const phone = frm.phone; +const phoneLabel = document.querySelector('label[for="phone"]'); +const phoneLabelText = phoneLabel.innerText; + +const submitBtn = document.querySelector('.form__submit-btn'); + +frm.addEventListener('submit', (e) => { + e.preventDefault(); + + let err = false; + + if (!name1.value) { + nameField.setError(nameField.msg); + err = true; + } + + if (!email.value) { + emailField.setError(emailField.msg); + err = true; + } + + if (!phone.value) { + phoneField.setError(phoneField.msg); + err = true; + } + + if (err) { + return; + } + + const elements = [...frm.elements]; + + elements.forEach((element) => { + element.disabled = true; + }); + + const btnText = submitBtn.firstElementChild; + + const text = btnText.innerText; + + btnText.innerText = ''; + + wait() + .then(() => { + frm.reset(); + }) + .finally(() => { + elements.forEach((element) => { + element.disabled = ''; + }); + btnText.innerText = text; + }); +}); + +function wait(delay) { + return new Promise((resolve) => setTimeout(resolve, delay)); +} + +class Field { + constructor(input, label, labelText, msg) { + this.input = input; + this.label = label; + this.labelText = labelText; + this.errMsg = ''; + this.msg = msg; + } + + setError(msg) { + this.label.innerText = msg; + this.label.style.color = '#860404'; + this.input.style.borderBottomColor = '#860404'; + } + + clearError() { + this.label.innerText = this.labelText; + this.label.style.color = ''; + this.input.style.borderBottomColor = ''; + } +} + +const nameField = new Field( + name1, + nameLabel, + nameLabelText, + 'Please, fill your name*', +); +const emailField = new Field( + email, + emailLabel, + emailLabelText, + 'Please, fill your email*', +); +const phoneField = new Field( + phone, + phoneLabel, + phoneLabelText, + 'Please, fill your phone*', +); + +const createHandlers = (field) => { + field.input.addEventListener('blur', (e) => { + if (!e.target.value.trim()) { + field.setError(field.msg); + } + }); + + field.input.addEventListener('input1', () => { + field.clearError(); + }); +}; + +createHandlers(nameField); +createHandlers(emailField); +createHandlers(phoneField); + +// Get references to the video and button elements + +const playButton = document.getElementById('playButton'); +const buttonsPlay = document.querySelectorAll('.my-button-play'); +const existingIframe = document.getElementById('myIframe'); +const closeButton = document.getElementById('close-button'); +const videoContainer = document.getElementById('video-container'); + +// Add a click event listener to the button +buttonsPlay.forEach((button, index) => { + button.addEventListener('click', () => { + videoContainer.append(existingIframe); + videoContainer.style.display = 'block'; + + if (index === 0) { + videoContainer.style.top = '130px'; + } else if (index === 1) { + if (window.innerWidth > 1280) { + videoContainer.style.top = '1380px'; + } else if (window.innerWidth > 768) { + videoContainer.style.top = '1130px'; + } else if (window.innerWidth <= 768) { + videoContainer.style.top = '1530px'; + } + } + }); +}); + +// playButton.addEventListener('click', () => { +// videoContainer.append(existingIframe); +// Check if the video is paused +/* + const newIframe = document.createElement('iframe'); // Create new iframe + + newIframe.id = 'myIframe'; + + newIframe.src + = 'https://www.youtube.com/embed/SvTbB19bvIw?si=l7gxztTxlRT-R5oJ'; // Set iframe source + newIframe.title = 'YouTube video player'; + newIframe.className = 'video'; + + newIframe.allow + = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'; + newIframe.referrerPolicy = 'strict-origin-when-cross-origin'; + newIframe.allowFullscreen = 'true'; + + videoContainer.appendChild(newIframe); */ +// videoContainer.style.display = 'block'; +// }); + +// Get references to the video player and close button + +// Add event listener to the close button +closeButton.addEventListener('click', () => { + // Hide the video container + + // Call the function to pause the video + // closeIFrame(); + // existingIframe.remove(); + if (player) { + stopVideo(); // Stops the video + } + closeIFrame(); + videoContainer.style.display = 'none'; +}); + +function closeIFrame() { + if (existingIframe) { + existingIframe.remove(); + } +} + +// Dynamically load the YouTube Iframe API script +const tag = document.createElement('script'); + +tag.src = 'https://www.youtube.com/iframe_api'; +// document.head.appendChild(tag); + +const firstScriptTag = document.getElementsByTagName('script')[0]; + +firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); + +// Load the YouTube Iframe API +let player; + +function onYouTubeIframeAPIReady() { + player = new YT.Player('myIframe', { + videoId: 'SvTbB19bvIw?si=l7gxztTxlRT-R5oJ', + playerVars: { + 'playsinline': 1, + 'autoplay': 1, + 'controls': 1, + }, + events: { + 'onReady': onPlayerReady(), + 'onStateChange': onPlayerStateChange(), + }, + }); +} + +function onPlayerReady(event) { + videoContainer.style.borderColor = '#0760c5ff'; + event.target.playVideo(); + + if (event.data === YT.PlayerState.PLAYING) { + videoContainer.style.borderColor = '#dfee0dff'; + } +} + +// let done = false; + +function onPlayerStateChange(event) { + /* if (event.data === YT.PlayerState.PLAYING && !done) { + done = true; + stopVideo(); + } */ + if (event.data === YT.PlayerState.PLAYING) { + videoContainer.style.borderColor = '#dfee0dff'; + } + // const embedCode = event.target.getVideoEmbedCode(); + // const state = player.getPlayerState(); + + // const statusText = getPlayerStateText(state); + const st = event.data; + + changeBorderColor(st); +} + +function changeBorderColor(status) { + let color; + + if (status === -1) { + color = '#37474F'; // unstarted = gray + } else if (status === 0) { + color = '#FFFF00'; // ended = yellow + } else if (status === 1) { + color = '#33691E'; // playing = green + } else if (status === 2) { + color = '#DD2C00'; // paused = red + } else if (status === 3) { + color = '#AA00FF'; // buffering = purple + } else if (status === 5) { + color = '#FF6DOO'; // video cued = orange + } + + if (color) { + videoContainer.style.borderColor + = color; + } +} + +function stopVideo() { + player.stopVideo(); +} + +document + .getElementById('form-pay') + .addEventListener('submit', function(e) { + e.preventDefault(); + document.getElementById('pay').scrollIntoView({ behavior: 'smooth' }); + + const formData = new FormData(this); + + fetch('/submit-url', { + method: 'POST', + body: formData, + }).then((response) => { + if (response.ok) { + // eslint-disable-next-line no-console + console.log('Form sent succesfully!'); + } + }); + }); + +document + .getElementById('go-to-pay') + .addEventListener('click', function(e) { + const form = document.getElementById('form-place-order'); + + if (form.checkValidity()) { + window.location.href = '#pay'; + } else { + form.reportValidity(); + } + + e.preventDefault(); + }); + +const quantityPay = document.getElementById('quantity-pay'); +const quantityPlace = document.getElementById('quantity-place-order'); + +quantityPay.addEventListener('change', () => { + quantityPlace.value = quantityPay.value; +}); + +quantityPlace.addEventListener('change', () => { + quantityPay.value = quantityPlace.value; +}); + +if (quantityPay && quantityPlace) { + quantityPay.addEventListener('change', () => { + quantityPlace.value = quantityPay.value; + }); + + quantityPlace.addEventListener('change', () => { + quantityPay.value = quantityPlace.value; + }); +} + +const inputs = document.querySelectorAll('.form__input--card'); + +inputs.forEach((input, index) => { + input.addEventListener('input', () => { + input.value = input.value.replace(/\D/g, ''); + + if (input.value.length === 4 && index < inputs.length - 1) { + inputs[index + 1].focus(); + } + }); +}); + +const expiryInput = document.getElementById('expiry'); + +expiryInput.addEventListener('input', (e) => { + let value = e.target.value.replace(/[^\d]/g, ''); // digits only + const cursorPosition = expiryInput.selectionStart; + + if (value.length > 4) { + value = value.slice(0, 4); // 4 digits max + } + + if (value.length > 2) { + value = value.slice(0, 2) + '/' + value.slice(2); + } + + expiryInput.value = value; + + if (cursorPosition === 3 && !value.includes('/')) { + expiryInput.setSelectionRange(4, 4); // after insert "/" + } +}); + +const cvvInput = document.getElementById('cvv'); + +cvvInput.addEventListener('input', (e) => { + e.target.value = e.target.value.replace(/\D/g, ''); // digits only +}); 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/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 000000000..8b400ecfa --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,251 @@ +.about { + background: $background-gradient; + background-repeat: no-repeat; + + @include section-padding-block; + + &__content { + display: grid; + row-gap: 100px; + + @include tablet { + row-gap: 80px; + } + } + + &__block { + @include grid-markup; + + margin: 50px; + + @include desktop { + height: 400px; + margin: 0; + } + + // margin-top: 100px; + // padding-right: 50px; + // margin: 50px; + } + + &__headline { + margin-bottom: 20px; + grid-column: 1/-1; + + @include tablet { + margin-bottom: 32px; + } + + &--first { + @include tablet { + grid-column: span 3; + } + + @include desktop { + grid-column: -5/-1; + } + } + + &--second { + position: relative; + + @include tablet { + padding-top: 50px; + grid-column: span 4; + } + + @include desktop { + // grid-column: span 5; + margin-bottom: 0; + grid-column: span 5/-1; + } + + &::before { + content: 'Hello,'; + margin: 0; + padding: 0; + font-size: 14px; + line-height: 120%; + font-weight: 400; + color: $contrast-color; + text-transform: capitalize; + position: absolute; + top: -25px; + + @include tablet { + top: 20px; + } + } + } + } + + &__img-wrapper { + height: 190px; + width: 100%; + overflow: hidden; + + @include tablet { + height: 270px; + } + } + + &__img { + height: 100%; + width: 100%; + object-fit: cover; + } + + &__slider { + padding-bottom: 18px; + margin-bottom: 20px; + grid-column: 1/-1; + width: 100%; + + @include tablet { + grid-area: span 4 / span 3; + order: -1; + margin-bottom: 15px; + } + + @include desktop { + grid-area: 1 / 3 / 4 / 8; + position: relative; + } + } + + &__slider-navigation-wrapper { + margin-top: 20px; + display: none; + + @include desktop { + display: flex; + } + } + + &__swiper-scrollbar { + position: unset !important; + display: block; + background-color: #212121; + height: 2px !important; + } + + &__swiper-scrollbar-drag { + background-color: $contrast-color; + height: 1px; + } + + &__slider-pagination--fraction { + position: absolute; + top: -2%; + left: -10%; + } + + &__swiper-pagination--bullet { + bottom: 0 !important; + display: flex; + justify-content: center; + gap: 6px; + position: unset; + padding-top: 15px; + } + + &__swiper-pagination-bullet { + width: 4px; + height: 4px; + display: block; + border-radius: 50%; + background-color: #484848; + } + + &__swiper-pagination-bullet-active { + background-color: #ababab; + } + + &__description { + grid-column: 1/-1; + + @include tablet { + grid-column: span 3; + grid-column: 2/6; + } + + &--first { + margin-bottom: 40px; + + @include tablet { + grid-column: span 3; + margin-bottom: 20px; + } + + @include desktop { + grid-column: -5/-1; + } + } + + &--second { + @include tablet { + grid-column: span 3; + + padding-bottom: 35px; // 25px; + } + + @include desktop { + // grid-column: span 3; + grid-column: -6/-2; + + // margin-top: 32px; + padding-bottom: 100px; // 40px; + } + } + } + + &__button-play-video { + grid-column: 1 / -1; + + @include tablet { + grid-column: span 3; + margin-bottom: 0; + } + + @include desktop { + grid-column: -5/-1; + } + } + + &__hello { + margin-bottom: 11px; + grid-column: 1/5; + } + + &__background { + @include tablet { + // grid-area: span 3 / span 2; + grid-area: 1 / 5 / 3 / 12; + background-image: url(../images/aboutUs.svg); + + // grid-column: 5 / 12; + background-repeat: no-repeat; + background-size: cover; // contain; + + // margin-bottom: -50px; + } + + @media (min-width: 1024px) { + background-size: contain; + } + + @include desktop { + background-image: url(../images/Group\ 2.png); + background-size: 430px 430px; + grid-column: 3 / 7; + margin: -70px 0; + + // width: 430px; + // height: 100vh; + // background-position: 0 0; + // grid-column: 7/-1; + // background-size: 352px 361px; + // background-position: center center; + } + } +} diff --git a/src/styles/blocks/accordion.scss b/src/styles/blocks/accordion.scss new file mode 100644 index 000000000..105344895 --- /dev/null +++ b/src/styles/blocks/accordion.scss @@ -0,0 +1,55 @@ +.accordion { + width: 100%; + padding: 12px 20px; + border-radius: 4px; + border: 1px solid $contrast-color; + box-sizing: border-box; + cursor: pointer; + + &__content { + max-height: 0; + overflow: hidden; + transition: $effect-duration; + } + + &--open &__content { + max-height: 1000px; + } + + &__title-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__title { + color: $contrast-color; + } + + &__arrow { + height: 9px; + width: 6px; + background-size: cover; + background-position: center; + background-image: url(../images/icons/play-video-tri.svg); + transition: $effect-duration; + display: none; + + @include tablet { + display: block; + } + } + + &--open &__arrow { + transform: rotate(90deg); + } + + &__text { + margin: 18px 0 24px; + } + + &__date { + color: #545454; + line-height: 150%; + } +} diff --git a/src/styles/blocks/benefit.scss b/src/styles/blocks/benefit.scss new file mode 100644 index 000000000..f2dbed86a --- /dev/null +++ b/src/styles/blocks/benefit.scss @@ -0,0 +1,14 @@ +.benefit { + @include section-item-style; + @include hover(transform, scale(1), '.benefit__headline::after'); + + &__headline { + @include tablet { + min-height: 38px; + } + + @include desktop { + min-height: unset; + } + } +} diff --git a/src/styles/blocks/benefits.scss b/src/styles/blocks/benefits.scss new file mode 100644 index 000000000..84c3eee43 --- /dev/null +++ b/src/styles/blocks/benefits.scss @@ -0,0 +1,33 @@ +.benefits { + @include section-padding-block; + + background: $background-gradient; + background-repeat: no-repeat; + + &__headline { + margin-bottom: 32px; + + @include desktop { + margin-bottom: 84px; + text-align: center; + } + } + + &__items { + @include grid-markup; + + row-gap: 20px; + } + + &__benefit { + grid-column: 1/-1; + + @include tablet { + grid-column: span 2; + } + + @include desktop { + grid-column: span 4; + } + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..86cd37612 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,17 @@ +.button { + text-align: center; + background-color: $contrast-color; + border: none; + border-radius: 4px; + line-height: 40px; + text-decoration: none; + justify-content: center; + cursor: pointer; + + &--form { + line-height: 48px; + } + + @include hover(background-color, #fff); + @include hover(color, $contrast-color); +} diff --git a/src/styles/blocks/buy-now.scss b/src/styles/blocks/buy-now.scss new file mode 100644 index 000000000..b3768520c --- /dev/null +++ b/src/styles/blocks/buy-now.scss @@ -0,0 +1,51 @@ +.buy-now { + // max-width: 1060px; + margin-inline: auto; + + @include desktop { + display: flex; + gap: 191px; + align-items: center; + padding: 64px 110px 102px; + } + + &__top-bar { + margin-bottom: 13px; + + @include padding-inline; + + @include tablet { + margin-bottom: 0; + } + + @include desktop { + padding: 0; + } + } + + &__menu { + display: flex; + align-items: center; + justify-content: stretch; + + @include desktop { + gap: 192px; + } + } + + &__menu-link { + width: 100%; + padding-bottom: 17px; + + font-size: 12px; + line-height: 130%; + color: $dark-grey-text; + text-align: center; + text-decoration: none; + + @include desktop { + width: 100px; + padding-bottom: 10px; + } + } +} diff --git a/src/styles/blocks/cicle.scss b/src/styles/blocks/cicle.scss new file mode 100644 index 000000000..f6c5dae9b --- /dev/null +++ b/src/styles/blocks/cicle.scss @@ -0,0 +1,303 @@ +.cicle { + &__block6 { + display: none; + + // width: 519px; + // height: 464px; + // background-size: 298px 294px 519px 464px; + background-image: + url(../images/Image6about.svg), url(../images/Image6aboutCenter.svg); + background-repeat: no-repeat; + background-position: center center; + + // padding-left: 374px; + // padding-right: 387px; + // padding-inline: 100px; + // width: 100%; + + margin-left: auto; + margin-right: auto; + } + + &__left { + // height: 0px; + gap: 110px; + display: flex; + + // padding-left: 238px; + + flex-direction: column; + font-family: Inter, Arial, Helvetica, sans-serif; + font-weight: 500; + font-size: 16px; + color: #fff; + line-height: 100%; + letter-spacing: 0%; + + // padding-inline: 130px; + + &--item1 { + width: 97px; + height: 42px; + } + &--item2 { + width: 102px; + height: 40px; + } + &--item3 { + width: 116px; + height: 40px; + } + } + &__right { + // height: 0px; + gap: 110px; + display: flex; + + // padding-right: 238px; + // margin-right: 193px; + flex-direction: column; + font-family: Inter, Arial, Helvetica, sans-serif; + font-weight: 500; + font-size: 16px; + color: #fff; + line-height: 100%; + letter-spacing: 0%; + + // padding-right: 0px; + + &--item4 { + width: 160px; + height: 40px; + } + &--item5 { + width: 160px; + height: 40px; + } + &--item6 { + width: 160px; + height: 40px; + } + } +} + +.circle-container { + @include on-circle( + $item-count: 12, + $circle-size: 650px, + $item-width: 30px, + $item-height: 0 + ); + + // position: relative; + // margin: 60px 60px; + + left: -30px; + + // margin: auto; + // border: solid 5px tomato; + + .item { + // position: absolute; + display: none; + + // max-width: 100%; + // margin-left: -50px; + // margin-top: -120px; + // margin: auto; + // filter: grayscale(100%); + // background-image: url(../images/icons/2\ \(1\).png); + // background-repeat: no-repeat; + // border: solid 5px tomato; + + transition: 0.15s; + + &:hover, + &:active { + filter: grayscale(0); + } + } + .item1 { + // transform: rotate(-45deg); /* Rotates the text 45 degrees */ + // display: inline-block; + + /* Ensures proper rotation */ + + width: 116px; + height: 40px; + color: white; + font-family: Inter, Arial, Helvetica, sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + + // padding-inline: 0; + // padding-right: 10px; + } +} + +.circle-container1 { + position: absolute; + + @include on-circle-wo($item-count: 8, $circle-size: 500px, $item-size: 100px); + + margin: 5em auto 0; + + // border: solid 5px tomato; + + .item1 { + display: none; + } + .itemS { + position: absolute; + display: block; + max-width: 100%; + + // margin-left: 0px; + // margin-top: 0px; + filter: grayscale(100%); + + // background-image: url(../images/icons/2\ \(1\).png); + // background-repeat:no-repeat; + // border: solid 5px tomato; + transition: 0.15s; + + &:hover, + &:active { + filter: grayscale(0); + } + } +} + +.cicle-wrapper { + display: none; + + @include desktop { + // width: 849px; + // background-image: url(../images/Image6aboutCenter.svg); + // width: 849px; + height: 464px; + display: flex; + align-items: center; + + // text-align: center; + position: relative; + + // justify-content: center; + margin: auto; + + // margin-left: auto; + // margin-right: auto; + column-gap: 38px; + + // padding-left: 50px; + // padding-right: 50px; + // background-repeat: no-repeat; + // background-position: 50% 50%; + // background-size: 100%; + + margin-bottom: 200px; + + &__center1 { + // margin: 0px 38px; + + width: 519px; + height: 464px; + background-image: url(../images/Image6about.svg); + background-repeat: no-repeat; + + // background-size: 519px 464px; + // background-position: center center ; + + &--center { + // position: relative; + display: block; + + // position: absolute; + // top: 50%; + // left: 50%; + // transform: translate(-50%, -50%); + margin-top: 84px; + + // margin: auto; + max-height: 100%; + margin-left: auto; + margin-right: auto; + + // vertical-align: middle; + // display: inline-block; + // padding: 0; + // width: 298px; + // height: 294px; + // transform: translateY(-435px); + } + } + + &__left { + // height: 0px; + row-gap: 77px; + display: flex; + + // margin-top: -300px; + // padding-left: 238px; + // margin-right: 38px; + flex-direction: column; + font-family: Inter, Arial, Helvetica, sans-serif; + font-weight: 500; + font-size: 16px; + color: #fff; + line-height: 100%; + letter-spacing: 0%; + + // padding-inline: 130px; + + &--item1 { + width: 97px; + height: 42px; + } + &--item2 { + width: 102px; + height: 40px; + } + &--item3 { + width: 116px; + height: 40px; + } + } + &__right { + // height: 0px; + margin-left: 15px; + row-gap: 77px; + + // row-gap: 50px; + // margin-top: -300px; + display: flex; + + // padding-left: 38px; + // margin-left: 38px; + flex-direction: column; + font-family: Inter, Arial, Helvetica, sans-serif; + font-weight: 500; + font-size: 16px; + color: #fff; + line-height: 100%; + letter-spacing: 0%; + + // padding-right: -20px; + // text-align: left; + &--item4 { + width: 160px; + height: 40px; + } + &--item5 { + width: 160px; + height: 40px; + } + &--item6 { + width: 160px; + height: 40px; + } + } + } +} diff --git a/src/styles/blocks/complete.scss b/src/styles/blocks/complete.scss new file mode 100644 index 000000000..f2a0e9e95 --- /dev/null +++ b/src/styles/blocks/complete.scss @@ -0,0 +1,53 @@ +.complete { + height: 100%; + background-image: $linear-gradient; + + @include padding-inline; + &__content { + @include grid-markup; + + padding-top: 90px; + + @include tablet { + padding-top: 180px; + } + + @include desktop { + padding-top: 38px; + } + } + + &__title { + grid-column: 1/-1; + margin-bottom: 16px; + text-align: center; + + @include tablet { + margin-bottom: 20px; + } + + @include desktop { + margin-top: 36px; + } + } + + &__description { + grid-column: 1/-1; + + margin-bottom: 30px; + + line-height: 130%; + color: $main-white; + text-align: center; + + @include tablet { + margin-bottom: 50px; + font-size: 18px; + } + } + + &__button { + grid-column: 1/-1; + justify-self: center; + } +} diff --git a/src/styles/blocks/contact.scss b/src/styles/blocks/contact.scss new file mode 100644 index 000000000..4cddce528 --- /dev/null +++ b/src/styles/blocks/contact.scss @@ -0,0 +1,95 @@ +.contact { + background: $background-black; + + @include section-padding-block; + + &__content { + @include grid-markup; + + position: relative; + } + + &__label { + margin-bottom: 11px; + grid-column: 1/-1; + + @include tablet { + grid-column: span 3; + } + + @include desktop { + grid-column: span 6; + } + } + + &__headline { + margin-bottom: 32px; + grid-column: 1/-1; + + @include tablet { + grid-column: 1/4; + margin-bottom: 50px; + } + + @include desktop { + grid-column: 1/7; + margin-bottom: 26px; + } + } + + &__form { + grid-column: 1/-1; + + @include tablet { + grid-area: span 4 / 4 / auto / -1; + } + + @include desktop { + grid-column: 7/-1; + } + } + + &__scroll-up-link { + position: absolute; + bottom: 0; + right: 0; + } + + &__icon-wrapper { + width: 48px; + height: 48px; + border: 1px solid $contrast-color; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + + @include hover(background-color, $contrast-color); + } + + &__description { + grid-column: 1/-1; + margin-top: 30px; + color: $text-color; + + @include tablet { + grid-column: span 3; + margin-top: 0; + } + + @include desktop { + grid-column: span 6; + margin-top: 0; + } + } + + &__contacts { + display: none; + + @include tablet { + grid-column: 1/4; + display: flex; + margin-top: 76px; + } + } +} diff --git a/src/styles/blocks/contacts.scss b/src/styles/blocks/contacts.scss new file mode 100644 index 000000000..32643d51d --- /dev/null +++ b/src/styles/blocks/contacts.scss @@ -0,0 +1,34 @@ +.contacts { + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 10px; + + &--help { + gap: 25px; + } + } + + &__contact { + font-size: 13px; + line-height: 130%; + font-weight: 400; + color: $text-color; + text-decoration: none; + + @include hover(color, #fff); + + &--help { + font-size: 16px; + line-height: 120%; + } + + &--contact { + font-size: 14px; + line-height: 120%; + } + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 000000000..5bcad1a91 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,12 @@ +.container { + @include padding-inline; + + max-width: 1060px; + margin-inline: auto; + + &--aside { + @include on-desktop { + padding-inline: 90px; + } + } +} diff --git a/src/styles/blocks/dropdown.scss b/src/styles/blocks/dropdown.scss new file mode 100644 index 000000000..a4e8cb232 --- /dev/null +++ b/src/styles/blocks/dropdown.scss @@ -0,0 +1,78 @@ +.dropdown { + position: relative; + width: 45px; + + &__content { + background-color: #191536; + border-radius: 4px; + position: absolute; + width: 100%; + transition: $effect-duration; + top: 40px; + left: 5px; + padding: 10px 0; + box-sizing: border-box; + pointer-events: none; + border-right: 1px solid #014954; + overflow: hidden; + transform: translateY(-5%); + transform-origin: top center; + opacity: 0; + } + + &--active &__content { + pointer-events: all; + transform: translateY(0); + opacity: 1; + overflow-y: auto; + } + + &__btn { + margin: 0; + padding: 0; + color: $contrast-color; + background-color: unset; + border: none; + cursor: pointer; + height: 100%; + width: 100%; + background-image: url(../images/icons/more.svg); + background-position: right 60%; + background-repeat: no-repeat; + + @include hover(color, #fff); + @include hover(background-image, url(../images/icons/moreHover.svg)); + } + + &--active &__btn { + color: #fff; + background-image: url(../images/icons/moreHover.svg); + } + + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + } + + &__item { + width: 15px; + + color: $contrast-color; + text-decoration: none; + display: block; + cursor: pointer; + + &:hover { + border-left: 2px solid transparent; + border-right: 2px solid #05c2df; + padding: 0 10px; + } + + @include hover(color, #fff); + } +} diff --git a/src/styles/blocks/faq.scss b/src/styles/blocks/faq.scss new file mode 100644 index 000000000..8d7d3c631 --- /dev/null +++ b/src/styles/blocks/faq.scss @@ -0,0 +1,48 @@ +.faq { + @include aside-style; + + @include desktop { + display: flex; + align-items: center; + + @include grid-markup; + } + + &__container { + padding-bottom: 12px; + + @include tablet { + padding-bottom: 240px; + } + + @include desktop { + grid-column: 3/-3; + padding-bottom: 50px; + } + } + + &__top { + justify-content: right; + + @include aside-top-style; + } + + &__headline { + margin-bottom: 30px; + } + + &__articles { + display: flex; + flex-direction: column; + gap: 13px; + } + + &__more-button { + margin-top: 50px; + display: none; + + @include tablet { + display: flex; + } + } +} diff --git a/src/styles/blocks/first-screen-item.scss b/src/styles/blocks/first-screen-item.scss new file mode 100644 index 000000000..2d32a326a --- /dev/null +++ b/src/styles/blocks/first-screen-item.scss @@ -0,0 +1,4 @@ +.hero-item { + @include section-item-style; + @include hover(transform, scale(1), '.hero-item__headline::after'); +} diff --git a/src/styles/blocks/first-screen.scss b/src/styles/blocks/first-screen.scss new file mode 100644 index 000000000..8a31ff658 --- /dev/null +++ b/src/styles/blocks/first-screen.scss @@ -0,0 +1,44 @@ +.hero { + background: $background-black; + + @include section-padding-block; + + &__headline { + margin-bottom: 12px; + + @include tablet { + text-align: center; + } + } + + &__subtitle { + margin-bottom: 45px; + + @include tablet { + text-align: center; + margin-bottom: 55px; + } + + @include desktop { + margin-bottom: 83px; + } + } + + &__items { + @include grid-markup; + + row-gap: 20px; + + @include tablet { + row-gap: 40px; + } + } + + &__item { + grid-column: 1/-1; + + @include tablet { + grid-column: span 3; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..2ee226328 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,59 @@ +.footer { + background-color: #000; + padding-block: 50px; + + @include tablet { + padding-block: 25px; + } + + @include desktop { + padding-block: 40px; + } + + &__content { + @include grid-markup; + + row-gap: 22px; + + @include tablet { + display: flex; + align-items: center; + justify-content: space-between; + } + } + + &__logo-link { + height: 14px; + width: 69px; + display: flex; + align-items: center; + grid-column: 1/-1; + + @include desktop { + height: 14px; + width: 72px; + } + } + + &__logo { + width: 100%; + height: 100%; + } + + &__nav { + grid-area: span 2 / span 1; + display: flex; + } + + &__contacts { + grid-area: span 1 / span 1; + + @include tablet { + display: none; + } + } + + &__socials { + grid-area: span 1 / span 1; + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 000000000..42b632f7d --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,271 @@ +.form { + display: flex; + flex-direction: column; + gap: 24px; + + &__fields { + display: flex; + flex-direction: column; + gap: 24px; + } + + &__label1 { + transition: $effect-duration; + color: $text-color; + } + + &__input1 { + @include form-styles; + @include autofill; + + &:disabled { + cursor: not-allowed; + } + } + + &__textarea { + @include form-styles; + @include autofill; + + resize: none; + + &:disabled { + cursor: not-allowed; + } + } + + &__field { + display: flex; + flex-direction: column; + gap: 4px; + + &:focus-within .form__label1 { + color: $contrast-color; + } + + &:focus-within .form__input1 { + border-bottom-color: $contrast-color; + } + + &:focus-within .form__textarea { + border-bottom-color: $contrast-color; + } + } + + &__submit-btn { + margin-top: 30px; + + @include tablet { + width: 200px; + margin-top: 48px; + } + + @include desktop { + margin-top: 90px; + } + } + + &--buy-now { + display: grid; + grid-column: 1/-1; + gap: 30px 19px; + + @include tablet { + grid-template-columns: repeat(2, 1fr); + row-gap: 40px; + } + + @include desktop { + grid-column: 7/-1; + grid-row: 1/3; + } + } + + &--pay { + grid-template-columns: repeat(2, 1fr); + + @include tablet { + grid-column: 2/6; + } + + @include desktop { + grid-column: 7/12; + grid-row: 1/3; + } + } + + &__element { + display: flex; + grid-column: 1/-1; + flex-direction: column; + gap: 4px; + + @include tablet { + grid-column: span 1; + } + + &--select { + position: relative; + gap: 13px; + + &::after { + content: ' '; + + position: absolute; + z-index: 2; + top: 70%; + right: 10px; + transform: translateY(-50%); + + display: block; + + width: 9px; + height: 6px; + + background-image: url(../images/icons/more.svg); + background-repeat: no-repeat; + background-size: cover; + } + } + + &--card { + gap: 17px; + + @include tablet { + grid-column: 1/-1; + } + } + + &--exp-date { + grid-column: span 1; + } + + &:has(input:focus) label, + &:has(input:hover) label, + &:has(input:active) label { + color: $main-turquoise; + } + } + + &__label { + font-size: 14px; + line-height: 130%; + color: $grey-text; + } + + &__input { + all: unset; + + padding-bottom: 6px; + border-bottom: 1px solid $dark-grey-text; + + font-size: 16px; + font-weight: 400; + line-height: 150%; + color: $main-white; + + &:active, + &:focus, + &:hover { + border-color: $main-turquoise; + } + + &:invalid { + color: $form-invalid; + } + + &--card { + width: 60px; + padding-bottom: 9px; + + font-size: 18px; + line-height: 130%; + text-align: center; + letter-spacing: 3.6px; + + @include tablet { + grid-column: 1/-1; + width: 70px; + font-size: 20px; + } + + &::placeholder { + font-size: 18px; + line-height: 130%; + color: $dark-grey-text; + letter-spacing: 3.6px; + } + + &:active, + &:focus, + &:hover { + border-color: $main-turquoise; + } + } + + &--card-name { + grid-column: 1/-1; + } + + &--expiration-date { + width: 80px; + } + + &--cvv { + width: 45px; + } + + &--message { + resize: none; + } + } + + &__card-cvv { + grid-column: span 1; + } + + &__select { + display: block; + + padding-left: 24px; + padding-block: 13px; + border: none; + + font-size: 16px; + font-weight: 400; + line-height: 130%; + color: $main-white; + + appearance: none; + background-color: $main-purple; + outline: none; + } + + &__quantity { + box-sizing: border-box; + width: 90px; + height: 41px; + padding: 0; + border-bottom: 0; + + font-size: 20px; + text-align: center; + } + + &__card-number { + display: flex; + gap: 19px; + + @include tablet { + gap: 32px; + } + + @include desktop { + gap: 20px; + } + } + + &__card-container { + grid-column: 1/-1; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..3926dcda1 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,358 @@ +.header { + background: $background-gradient; + background-repeat: no-repeat; + + @include desktop { + padding-bottom: 85px; + } + + &__top { + display: flex; + height: 48px; + align-items: center; + justify-content: space-between; + + @include tablet { + height: 74px; + } + + @include desktop { + height: 144px; + } + } + + &__top-right, + &__top-left { + display: flex; + align-items: center; + gap: 35px; + } + + &__logo { + height: 12px; + width: 58px; + display: flex; + align-items: center; + + @include tablet { + height: 14px; + width: 67px; + } + + @include desktop { + height: 16px; + width: 78px; + } + } + + &__dropdown { + display: none; + height: 40px; + align-items: center; + flex-direction: column; + + @include desktop { + display: flex; + + &__btn { + padding: 10px 20px; + background-color: #007bff; + color: white; + border: none; + cursor: pointer; + } + &__list { + position: absolute; + top: 100%; + left: 0; + background-color: white; + border: 1px solid #ddd; + padding: 10px; + z-index: 1000; + } + } + } + + &__nav { + display: none; + height: 40px; + + @include desktop { + display: flex; + align-items: center; + height: 40px; + } + } + + &__button-top { + display: none; + + @include desktop { + display: flex; + width: 200px; + } + } + + &__center-wrapper { + background-image: url(../images/image.png); + background-repeat: no-repeat; + background-size: 100%; + + @include tablet { + background-image: url(../images/image.png); + background-position: center right; + background-size: 64%; + } + + @include desktop { + background-image: unset; + } + } + + &__center { + @include desktop { + @include grid-markup; + + padding-bottom: 10%; + } + } + + &__center-left { + @include grid-markup; + + padding-top: 60%; + + @include tablet { + padding-block: 25px; + } + + @include desktop { + padding: 0; + grid-column: span 6; + } + } + + &__img-wrapper { + height: 54%; + width: 100%; + overflow: hidden; + } + + &__img { + height: 100%; + width: 100%; + object-fit: cover; + } + + &__center-right { + grid-column: span 6; + } + + &__headline { + grid-column: 1/-1; + margin-bottom: 17px; + + @include tablet { + grid-column: 1/4; + } + + @include desktop { + grid-column: span 12; + margin-bottom: 20px; + } + } + + &__description-price-wrapper { + grid-column: 1/-1; + + @include tablet { + grid-column: 1/4; + } + + @include desktop { + grid-column: 2/10; + } + } + + &__description { + grid-column: 1/-1; + + margin-bottom: 8px; + + @include tablet { + grid-column: 1/4; + margin-bottom: 18px; + } + } + + &__price { + grid-column: 1/-1; + + text-align: center; + margin-bottom: 16px; + + @include tablet { + text-align: start; + margin-bottom: 24px; + } + } + + &__button { + grid-column: 1/-1; + transform: translateY(50%); + display: flex; + + @include tablet { + grid-column: 2/-2; + transform: translateY(0); + margin-top: 25px; + } + + @include desktop { + display: none; + } + } + + &__button-play-video { + grid-column: 1/-1; + + @include tablet { + grid-column: 1/4; + } + } + + &__slide-img-wrapper { + height: 320px; + width: 100%; + overflow: hidden; + } + + &__slide-img { + height: 100%; + width: 100%; + object-fit: cover; + } + + &__bottom-wrapper { + display: none; + justify-content: space-between; + height: 40px; + + @include desktop { + display: flex; + } + } + + &__bottom-left { + display: flex; + gap: 40px; + } + + &__faq, + &__help { + text-decoration: none; + + @include hover(color, $contrast-color); + } + + &__slider { + display: none; + + @include desktop { + display: block; + } + } + + &__swiper-scrollbar { + position: unset !important; + display: block; + background-color: #212121; + height: 2px !important; + } + + &__swiper-scrollbar-drag { + background-color: $contrast-color; + height: 1px; + } +} + +.video-container { + display: none; + position: absolute; + + // min-width: 100%; + background: #000; + border: 1px solid #ccc; + border-radius: 8px; + overflow: hidden; + z-index: 55; + width: 80%; + + @include tablet { + top: 130px; + left: 54px; + + // width: 80%; + } + + @include desktop { + top: 130px; + left: 204px; + + // left: 0; + // width: 100%; + // margin-left: auto; + // margin-right: auto; + // width: 876px; + } +} + +.video { + width: 100%; + height: 286px; + + @include tablet { + height: 386px; + } + + @media (min-width: 900px) { + height: 486px; + } + + @include desktop { + height: 586px; + } + + border-radius: 4px; +} + +.close-button { + z-index: 3; + position: absolute; + top: 15px; + right: 13px; + background: none; + + // color: white; + border: none; + + // border-radius: 4px; + // padding: 5px 10px; + cursor: pointer; + + // font-size: 14px; + background-image: url('../images/icons/iconClose.svg'); + background-repeat: no-repeat; + width: 18px; + height: 18px; + + // top: 145px; + // left: 1050px; + // border-width: 1px; +} + +.close-button:hover { + background-image: url('../images/icons/iconCloseHover.svg'); + + // background: darkred; +} diff --git a/src/styles/blocks/help.scss b/src/styles/blocks/help.scss new file mode 100644 index 000000000..e260dee9c --- /dev/null +++ b/src/styles/blocks/help.scss @@ -0,0 +1,84 @@ +.help { + @include aside-style; + + @include desktop { + display: flex; + align-items: center; + + @include grid-markup; + } + + &__container { + @include tablet { + padding-bottom: 124px; + } + + @include desktop { + grid-column: 3/-3; + padding-bottom: 80px; + } + } + + &__top { + justify-content: right; + + @include aside-top-style; + } + + &__headline { + margin-bottom: 30px; + + @include desktop { + margin-bottom: 60px; + } + } + + &__description { + &--contact-us { + margin-top: 25px; + + @include tablet { + margin: 28px 0 30px; + } + } + } + + &__description-link { + color: $contrast-color; + text-decoration: none; + + @include hover(color, #fff); + } + + &__bottom { + @include tablet { + @include grid-markup; + } + } + + &__links { + margin-top: 32px; + + @include tablet { + grid-column: span 3; + margin-top: 0; + } + + @include desktop { + grid-column: span 5; + } + } + + &__contacts { + margin-top: 30px; + + @include tablet { + grid-column: span 3; + margin-top: 0; + } + + @include desktop { + grid-column: span 5; + } + } +} diff --git a/src/styles/blocks/icons.scss b/src/styles/blocks/icons.scss new file mode 100644 index 000000000..27b141050 --- /dev/null +++ b/src/styles/blocks/icons.scss @@ -0,0 +1,107 @@ +.icon { + display: block; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + + &__wrapper { + position: relative; + + @include hover(opacity, 0, '.icon--static'); + @include hover(opacity, 1, '.icon--hover'); + } + + &--menu { + height: 20px; + width: 20px; + background-image: url(../images/icons/menuWhite.svg); + + @include tablet { + height: 30px; + width: 30px; + } + + @include desktop { + display: none; + } + } + + &--menu-hover { + @include accent(url(../images/icons/menuWhite.svg)); + } + + &--close { + height: 17px; + width: 17px; + background-image: url(../images/icons/iconClose.svg); + } + + &--close-hover { + @include accent(url(../images/icons/iconCloseHover.svg)); + } + + &--language-close { + height: 17px; + width: 17px; + background-image: url(../images/icons/language-close.svg); + } + + &--language-close-hover { + @include accent(url(../images/icons/language-close-hover.svg)); + } + + &--social { + height: 15px; + width: 15px; + } + + &--facebook { + background-image: url(../images/icons/face.svg); + } + + &--facebook-hover { + @include accent(url(../images/icons/facebook-hover.svg)); + } + + &--twitter { + background-image: url(../images/icons/twitter.svg); + } + + &--twitter-hover { + @include accent(url(../images/icons/twitter-hover.svg)); + } + + &--youtube { + background-image: url(../images/icons/videoIcon.svg); + } + + &--youtube-hover { + @include accent(url(../images/icons/youtube-hover.svg)); + } + + &--reddit { + background-image: url(../images/icons/insta.svg); + } + + &--reddit-hover { + @include accent(url(../images/icons/reddit-hover.svg)); + } + + &--scroll-up { + // height: 9px; + // width: 16px; + height: 48px; + width: 48px; + background-image: url(../images/icons/up.svg); + } + + &--scroll-up-hover { + // height: 9px; + // width: 16px; + @include accent(url(../images/icons/upHover\ \(2\).svg)); + + // background-image: url(../images/icons/upHover\ \(2\).svg); + // top: unset; + } +} diff --git a/src/styles/blocks/language.scss b/src/styles/blocks/language.scss new file mode 100644 index 000000000..81faaccd7 --- /dev/null +++ b/src/styles/blocks/language.scss @@ -0,0 +1,42 @@ +.language { + @include aside-style; + + &__container { + @include tablet { + padding-bottom: 80px; + } + } + + &__top { + @include aside-top-style; + } + + &__center { + display: flex; + flex-direction: column; + } + + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + color: #fff; + height: 100%; + } + + &__item { + height: 100%; + } + + &__link { + display: flex; + align-items: center; + box-sizing: border-box; + height: 100%; + + @include aside-link-style; + @include hover(color, $contrast-color); + } +} diff --git a/src/styles/blocks/links.scss b/src/styles/blocks/links.scss new file mode 100644 index 000000000..2d9cb1552 --- /dev/null +++ b/src/styles/blocks/links.scss @@ -0,0 +1,20 @@ +.links { + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 20px; + } + + &__link { + font-size: 16px; + line-height: 150%; + font-weight: 400; + color: $contrast-color; + text-decoration: none; + + @include hover(color, #fff); + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..682241c64 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,34 @@ +.menu1 { + @include aside-style; + + &__container { + @include tablet { + padding-bottom: 140px; + } + } + + &--auto-hight { + height: auto; + } + + &__top { + @include aside-top-style; + + justify-content: right; + } + + &__center { + display: flex; + flex-direction: column; + } + + &__nav { + margin-top: 18px; + } + + &__language, + &__faq, + &__help { + @include aside-link-style; + } +} diff --git a/src/styles/blocks/more-button.scss b/src/styles/blocks/more-button.scss new file mode 100644 index 000000000..794cc7141 --- /dev/null +++ b/src/styles/blocks/more-button.scss @@ -0,0 +1,36 @@ +.more-button { + display: flex; + flex-direction: column; + align-items: center; + gap: 7px; + text-decoration: none; + cursor: pointer; + + @include hover(color, #fff, '.more-button__text'); + @include hover(opacity, 0, '.more-button__arrow--static'); + @include hover(opacity, 1, '.more-button__arrow--hover'); + + &__text { + color: $contrast-color; + } + + &__arrow-wrapper { + position: relative; + } + + &__arrow { + display: block; + height: 6px; + width: 9px; + background-size: cover; + background-position: center; + + &--static { + background-image: url(../images/icons/more.svg); + } + + &--hover { + @include accent(url(../images/icons/moreHover.svg)); + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..281cee925 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,52 @@ +.nav { + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + color: #fff; + height: 100%; + + @include desktop { + flex-direction: row; + align-items: center; + } + + &--header { + @include desktop { + gap: 36px; + } + } + + &--footer { + gap: 15px; + + @include tablet { + flex-direction: row; + gap: 43px; + } + } + } + + &__item { + height: 100%; + } + + &__link { + display: flex; + align-items: center; + box-sizing: border-box; + height: 100%; + + @include hover(color, $contrast-color); + + &--menu { + @include aside-link-style; + + @include desktop { + padding-inline: 0; + } + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..83d59ac50 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,103 @@ +.page { + font-family: $font-inter; + color: $text-color; + scroll-behavior: smooth; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__body { + margin: 0; + min-width: 320px; + + &--no-scroll { + overflow: hidden; + height: 100vh; + } + } + + &__container { + @include container; + } + + &__mobile-hidden { + display: none; + + @include tablet { + display: block; + } + } + + &__place-order, + &__pay, + &__complete { + pointer-events: none; + + position: fixed; + z-index: 4; + inset: 0; + transform: translateX(-100%); + + overflow: auto; + + opacity: 0; + + transition: all 300ms; + } + + &:has(.page__place-order:target) .page__place-order, + &:has(.page__pay:target) .page__pay, + &:has(.page__complete:target) .page__complete { + pointer-events: all; + transform: translateX(0); + opacity: 1; + } + + &:has(.place-order:target) .buy-now__menu-link--order { + border-bottom: 1px solid $main-turquoise; + color: $main-turquoise; + + @include desktop { + position: relative; + border-bottom: none; + + @include green-step; + } + } + + &:has(.pay:target) .buy-now__menu-link--pay { + border-bottom: 1px solid $main-turquoise; + color: $main-turquoise; + + @include desktop { + position: relative; + border-bottom: none; + + @include green-step; + } + } + + &:has(.complete:target) .buy-now__menu-link--complete { + border-bottom: 1px solid $main-turquoise; + color: $main-turquoise; + + @include desktop { + position: relative; + border-bottom: none; + + @include green-step; + } + } + + &:has(.page__place-order:target), + &:has(.page__pay:target), + &:has(.page__complete:target) { + overflow: hidden; + } + + &:has(.page__place-order:target) .header, + &:has(.page__pay:target) .header { + opacity: 0.4; + } +} diff --git a/src/styles/blocks/pay.scss b/src/styles/blocks/pay.scss new file mode 100644 index 000000000..73a59cf15 --- /dev/null +++ b/src/styles/blocks/pay.scss @@ -0,0 +1,49 @@ +.pay { + background-image: $linear-gradient; + + @include padding-inline; + + &__content { + position: relative; + padding-bottom: 37px; + + @include grid-markup; + + @include tablet { + padding-top: 40px; + padding-bottom: 43px; + } + + @include desktop { + padding-top: 33px; + } + } + + &__photo { + display: none; + + @include tablet { + display: block; + grid-column: 1/-1; + + width: 524px; + height: 277px; + margin-inline: auto; + + background-image: url(../images/image.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + } + + @include desktop { + position: absolute; + + // top: 80px; + // left: -660px; + // grid-column: 7/-1; + // width: 701px; + // height: 279px; + } + } +} diff --git a/src/styles/blocks/place-order.scss b/src/styles/blocks/place-order.scss new file mode 100644 index 000000000..bfaf5f55c --- /dev/null +++ b/src/styles/blocks/place-order.scss @@ -0,0 +1,51 @@ +.place-order { + background-image: $linear-gradient; + + @include padding-inline; + + &__content { + position: relative; + padding-bottom: 37px; + + @include grid-markup; + + @include tablet { + padding-top: 40px; + padding-bottom: 43px; + } + + @include desktop { + padding-top: 0; + padding-bottom: 97px; + } + } + + &__photo { + display: none; + + @include tablet { + display: block; + grid-column: 1/-1; + + width: 524px; + height: 277px; + margin-inline: auto; + + background-image: url(../images/image.png); + + background-repeat: no-repeat; + background-position: center; + background-size: cover; + } + + @include desktop { + position: absolute; + + // top: 80px; + // grid-column: 7/-1; + // width: 601px; + // height: 350px; + // background-size: cover; + } + } +} diff --git a/src/styles/blocks/play-video-button.scss b/src/styles/blocks/play-video-button.scss new file mode 100644 index 000000000..67e680507 --- /dev/null +++ b/src/styles/blocks/play-video-button.scss @@ -0,0 +1,45 @@ +.button-play-video { + // background-image: url(../images/icons/play-video-wrapper.svg); + background-image: url(../images/icons/playVideo.svg); + display: flex; + height: 66px; + background-repeat: no-repeat; + text-decoration: none; + cursor: pointer; + align-items: center; + gap: 45px; + padding-left: 7px; + width: 236px; + background-size: 97%; + + // @include hover(opacity, 0, '.button-play-video__arrow'); + // @include hover(opacity, 1, '.button-play-video__arrow--hover'); + &:hover { + background-image: url(../images/icons/playVideoHover.svg); + } + + &__arrow-wrapper { + position: relative; + } + + &__arrow { + display: none; // flex; + width: 50px; + height: 50px; + border-radius: 50%; + background-image: url(../images/icons/play-video-tri.svg); + background-position: center; + background-repeat: no-repeat; + border: 1px solid $contrast-color; + background-position-x: 55%; + background-size: 19px; + + &--static { + background-image: url(../images/icons/play-video-tri.svg); + } + + &--hover { + @include accent(url(../images/icons/play-video-tri-hover.svg)); + } + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 000000000..8f9070be4 --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,21 @@ +.slider { + &__navigation-wrapper { + display: flex; + flex-direction: column; + gap: 15px; + width: 207px; + } + + &__navigation { + display: flex; + justify-content: space-between; + width: 207px; + + &--prev, + &--next { + cursor: pointer; + + @include hover(color, $contrast-color); + } + } +} diff --git a/src/styles/blocks/socials.scss b/src/styles/blocks/socials.scss new file mode 100644 index 000000000..506adf942 --- /dev/null +++ b/src/styles/blocks/socials.scss @@ -0,0 +1,14 @@ +.socials { + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: space-between; + + @include tablet { + gap: 18px; + } + } +} diff --git a/src/styles/blocks/tech.scss b/src/styles/blocks/tech.scss new file mode 100644 index 000000000..531730118 --- /dev/null +++ b/src/styles/blocks/tech.scss @@ -0,0 +1,208 @@ +.tech { + background: $background-black; + + @include section-padding-block; + + &__headline { + margin-bottom: 45px; + + @include tablet { + margin-bottom: 60px; + } + + @include desktop { + text-align: right; + } + } + + &__specs { + position: relative; + + @include desktop { + background-image: url('../images/tech-specs.png'); + background-repeat: no-repeat; + background-size: contain; + background-position: 32% bottom; + padding-bottom: 15px; + box-sizing: border-box; + + @include grid-markup; + } + } + + &__spec { + &--sensor { + @include desktop { + grid-column: 1/4; + } + } + + &--connection { + @include desktop { + grid-column: 2/5; + } + } + + &--batterries { + @include desktop { + grid-column: 10/-1; + grid-row: 2/-1; + } + } + } + + &__spec-button { + position: absolute; + + // width: 12%; + // height: 17%; + cursor: pointer; + + // background-color: $contrast-color; + // border: 2px solid rgba(255, 255, 255, 0.14); + // border-radius: 50%; + // box-sizing: border-box; + z-index: 3; + transition: opacity $effect-duration ease; + + @include tablet { + width: 9%; + height: 18%; + } + + @include desktop { + display: none; + } + + /* &--active { + background-color: #07798b; + } */ + + &::before, + &::after { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-repeat: no-repeat; + background-position: center; + background-size: 100%; + transition: opacity $effect-duration ease; + } + + &::before { + // background-image: url('../images/icons/specsPlus.png'); + background-image: url('../images/icons/plusR.svg'); + + opacity: 1; + } + + &::after { + // background-image: url('../images/icons/specsMinus.png'); + background-image: url('../images/icons/minusR.svg'); + opacity: 0; + } + + &--active::before { + opacity: 0; + } + + &--active::after { + opacity: 1; + } + + &--sensor { + top: -5%; + left: 36%; + } + + &--connection { + top: 78%; + left: 10%; + } + + &--batterries { + top: 40%; + left: 62%; + } + } + + &__spec-info { + position: absolute; + background-color: #191536; + padding: 17px 10px; + border-radius: 4px; + opacity: 0; + visibility: hidden; + transition: $effect-duration; + z-index: 2; + width: 51%; + max-width: 240px; + + @include desktop { + opacity: 1; + visibility: visible; + background-color: unset; + position: unset; + width: 100%; + padding: 0; + } + + &--sensor { + top: 14%; + left: 13%; + } + + &--connection { + bottom: 24%; + left: 11%; + } + + &--batterries { + right: 39%; + bottom: 13%; + } + + &--show { + opacity: 1; + visibility: visible; + z-index: 4; + } + } + + &__spec-heading { + display: none; + + @include desktop { + display: block; + margin-bottom: 21px; + } + } + + &__spec-list { + list-style: none; + color: #929292; + line-height: 150%; + } + + &__img-wrapper { + width: 70%; + overflow: hidden; + margin-inline: auto; + position: relative; + + @include tablet { + width: 51%; + } + + @include desktop { + display: none; + } + } + + &__img { + width: 100%; + height: 100%; + object-fit: cover; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..c3742bcf8 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,93 @@ +.top-bar { + display: flex; + grid-column: 1/-1; + justify-content: space-between; + + padding-block: 20px; + + // @include padding-inline; + @include tablet { + padding-block: 30px; + } + + @include desktop { + padding-block: 47px; + } + + &--menu { + @include padding-inline; + + justify-content: end; + margin-bottom: 18px; + + @include tablet { + margin-bottom: 12px; + padding-block: 34px; + } + } + + &--smaller-padding { + margin: 0; + + @include desktop { + padding: 18px; + } + } + + &--language { + justify-self: start; + } + + &__left-side { + display: flex; + gap: 35px; + align-items: center; + } + + &__right-side { + display: flex; + gap: 37px; + align-items: center; + } + + &__language-change { + display: none; + gap: 4px; + align-items: center; + + color: $main-turquoise; + list-style: 130%; + + @include desktop { + display: flex; + } + } + + &__nav { + display: none; + + @include desktop { + display: block; + } + } + + &__list { + display: flex; + gap: 32px; + padding: 0; + list-style: none; + } + + &__item { + @include hover(scale, 1.1); + } + + &__link { + color: $main-white; + text-decoration: none; + + &:hover { + color: $main-turquoise; + } + } +} diff --git a/src/styles/blocks/total.scss b/src/styles/blocks/total.scss new file mode 100644 index 000000000..e021d6dbc --- /dev/null +++ b/src/styles/blocks/total.scss @@ -0,0 +1,87 @@ +.total { + display: flex; + grid-column: 1/-1; + gap: 75px; + justify-content: center; + + padding-block: 30px; + + @include tablet { + gap: 149px; + justify-content: start; + padding-top: 3px; + padding-bottom: 48px; + } + + @include desktop { + grid-column: 1/5; + grid-row: 2/3; + gap: 86px; + + padding-top: 340px; + padding-bottom: 0; + } + + &--pay { + padding-bottom: 53px; + + @include tablet { + grid-column: 2/6; + padding-top: 0; + padding-bottom: 60px; + } + + @include desktop { + grid-column: 1/7; + padding-bottom: 0; + } + } + + &__title { + margin-bottom: 10px; + line-height: 130%; + color: $grey-text; + text-align: center; + + @include tablet { + margin-bottom: 20px; + text-align: start; + } + } + + &__price-amount { + font-size: 26px; + font-weight: 500; + line-height: 100%; + color: $main-turquoise; + + @include tablet { + font-size: 36px; + } + } + + &__quantity-form { + position: relative; + display: inline-block; + background-color: $main-purple; + + &::after { + content: ' '; + + position: absolute; + z-index: 3; + top: 50%; + right: 10px; + transform: translateY(-50%); + + display: block; + + width: 9px; + height: 6px; + + background-image: url(../images/icons/more.svg); + background-repeat: no-repeat; + background-size: cover; + } + } +} diff --git a/src/styles/_fonts.scss b/src/styles/fonts.scss similarity index 100% rename from src/styles/_fonts.scss rename to src/styles/fonts.scss diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..8f1600ded 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,36 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import '../styles/utils'; +@import '../styles/fonts'; +@import '../styles/typography'; +@import '../styles/blocks/page'; +@import '../styles/blocks/header'; +@import '../styles/blocks/dropdown'; +@import '../styles/blocks/icons'; +@import '../styles/blocks/button'; +@import '../styles/blocks/slider'; +@import '../styles/blocks/more-button'; +@import '../styles/blocks/menu'; +@import '../styles/blocks/nav'; +@import '../styles/blocks/language'; +@import '../styles/blocks/faq'; +@import '../styles/blocks/accordion'; +@import '../styles/blocks/help'; +@import '../styles/blocks/links'; +@import '../styles/blocks/first-screen'; +@import '../styles/blocks/first-screen-item'; +@import '../styles/blocks/about'; +@import '../styles/blocks/tech'; +@import '../styles/blocks/benefits'; +@import '../styles/blocks/benefit'; +@import '../styles/blocks/play-video-button'; +@import '../styles/blocks/contact'; +@import '../styles/blocks/form'; +@import '../styles/blocks/footer'; +@import '../styles/blocks/contacts'; +@import '../styles/blocks/socials'; +@import '../styles/blocks/cicle'; +@import '../styles/blocks/place-order'; +@import '../styles/blocks/buy-now'; +@import '../styles/blocks/complete'; +@import '../styles/blocks/total'; +@import '../styles/blocks/top-bar'; +@import '../styles/blocks/pay'; diff --git a/src/styles/typography.scss b/src/styles/typography.scss new file mode 100644 index 000000000..f7110d51c --- /dev/null +++ b/src/styles/typography.scss @@ -0,0 +1,157 @@ +h1 { + @extend %h1; +} + +.headline-1 { + margin: 0; + padding: 0; + font-size: 26px; + line-height: 130%; + font-weight: 900; + color: #fff; + text-transform: uppercase; + + @include desktop { + font-size: 46px; + line-height: 130%; + } + + &--subtitle { + margin: 0; + padding: 0; + font-weight: 400; + color: $contrast-color; + } +} + +.headline-2 { + margin: 0; + padding: 0; + font-size: 21px; + line-height: 130%; + font-weight: 900; + color: #fff; + text-transform: uppercase; + + @include desktop { + font-size: 36px; + line-height: 130%; + } + + &--subtitle { + font-weight: 400; + color: $contrast-color; + } +} + +.headline-3 { + margin: 0; + padding: 0; + font-size: 16px; + line-height: 120%; + font-weight: 900; + color: #fff; + text-transform: uppercase; +} + +.headline-4 { + margin: 0; + padding: 0; + font-size: 18px; + line-height: 120%; + font-weight: 900; + color: #fff; + text-transform: uppercase; +} + +.text-1 { + margin: 0; + padding: 0; + font-size: 18px; + line-height: 120%; + font-weight: 500; + color: #fff; +} + +.text-2 { + margin: 0; + padding: 0; + font-size: 16px; + line-height: 150%; + font-weight: 500; +} + +.text-3 { + margin: 0; + padding: 0; + font-size: 12px; + line-height: 120%; + font-weight: 400; + color: $contrast-color; + + @include tablet { + font-size: 14px; + line-height: 120%; + } + + @include desktop { + font-size: 16px; + line-height: 150%; + } +} + +.text-4 { + margin: 0; + padding: 0; + font-size: 16px; + line-height: 150%; + font-weight: 400; +} + +.text-5 { + margin: 0; + padding: 0; + font-size: 14px; + line-height: 150%; + font-weight: 400; +} + +.text-buttons { + margin: 0; + padding: 0; + font-size: 14px; + line-height: 130%; + font-weight: 500; + color: #fff; + + @include desktop { + font-size: 16px; + line-height: 150%; + } +} + +.text-links { + margin: 0; + padding: 0; + font-size: 21px; + line-height: 130%; + font-weight: 500; + color: #fff; + text-decoration: none; + + @include desktop { + font-size: 16px; + line-height: 130%; + } + + &--footer { + font-weight: 400; + font-size: 13px; + line-height: 150%; + + @include desktop { + font-size: 14px; + line-height: 130%; + } + } +} diff --git a/src/styles/utils.scss b/src/styles/utils.scss new file mode 100644 index 000000000..d56de94e4 --- /dev/null +++ b/src/styles/utils.scss @@ -0,0 +1,3 @@ +@import '../styles/utils/vars'; +@import '../styles/utils/mixins'; +@import '../styles/utils/extends'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss deleted file mode 100644 index 80c79780d..000000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006ffb..000000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/extends.scss similarity index 100% rename from src/styles/utils/_extends.scss rename to src/styles/utils/extends.scss diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 000000000..c81b06a74 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,323 @@ +@mixin tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin container() { + padding-inline: 20px; + margin: 0 auto; + + @include tablet { + padding-inline: 34px; + } + + @include desktop { + padding-inline: 110px; + max-width: 1452px; + } +} + +@mixin grid-markup { + --columns: 2; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include tablet { + --columns: 6; + } + + @include desktop { + --columns: 12; + } +} + +@mixin section-padding-block { + padding-block: 50px; + + @include tablet { + padding-block: 70px; + } + + @include desktop { + padding-block: 100px; + } +} + +@mixin padding-inline { + padding-inline: 20px; + + @include tablet { + padding-inline: 34px; + } + + @include desktop { + padding-inline: 110px; + } +} + +@mixin section-item-style { + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; + + &__headline { + margin-bottom: 11px; + position: relative; + align-self: center; + + &::after { + content: ''; + background-color: #fff; + width: 100%; + height: 3px; + transition: transform 0.3s; + display: block; + position: absolute; + bottom: -8px; + transform-origin: 0; + transform: scale(0); + } + + @include tablet { + margin-bottom: 20px; + text-align: center; + } + } + + &__img-wrapper { + width: 80px; + height: 80px; + display: none; + + @include tablet { + display: block; + margin-bottom: 25px; + } + } + + &__img { + width: 100%; + height: 100%; + object-position: center; + } + + &__description { + @include tablet { + text-align: center; + } + } +} + +@mixin aside-style { + background-color: #000000b3; + position: fixed; + inset: 0; + opacity: 0; + transform: translateX(-100%); + transition: $effect-duration ease-in-out; + z-index: 10; + box-sizing: border-box; + overflow-y: scroll; + + &--open { + transform: translateX(0); + opacity: 1; + visibility: visible; + } + + &__container { + background-color: $background-dark-blue; + min-height: 100vh; + + @include tablet { + min-height: auto; + } + } +} + +@mixin aside-top-style { + display: flex; + align-items: center; + padding: 20px 20px 32px; + + @include tablet { + padding: 34px 34px 32px 46px; + } + + @include desktop { + padding: 20px 20px 25px; + } +} + +@mixin aside-link-style { + display: flex; + align-items: center; + padding-inline: 20px; + height: 49px; + box-sizing: border-box; + + @include tablet { + padding-inline: 150; + } + + &:hover { + background-color: #110e25; + color: $contrast-color; + } +} + +@mixin hover($property, $toValue, $element: false) { + @if $element { + #{$element} { + transition: #{$property} $effect-duration; + } + &:hover #{$element} { + #{$property}: $toValue; + } + } @else { + transition: #{$property} $effect-duration; + &:hover { + #{$property}: $toValue; + } + } +} + +@mixin pressed($property, $toValue, $element: false) { + @if $element { + #{$element} { + transition: #{$property} 0.3s; + } + &:active #{$element} { + #{$property}: $toValue; + } + } @else { + transition: #{$property} 0.3s; + &:active { + #{$property}: $toValue; + } + } +} + +@mixin accent($bg-image) { + position: absolute; + top: 0; + background-image: $bg-image; + opacity: 0; +} + +@mixin autofill { + &:-webkit-autofill { + transition: + background-color 5000s ease-in-out 0s, + color 5000s ease-in-out 0s; + } +} + +@mixin form-styles { + color: #fff; + background-color: #05040b; + border: none; + outline: none; + border-bottom: 1px solid $text-color; + padding-bottom: 6px; + transition: $effect-duration; + + &:focus-visible { + outline: none; + color: #fff; + border-bottom: 1px solid $text-color; + background-color: transparent; + } +} + +@mixin on-circle($item-count, $circle-size, $item-width, $item-height) { + position: relative; + width: $circle-size; + height: $circle-size; + padding: 0; + border-radius: 50%; + list-style: none; + + > * { + display: block; + position: absolute; + top: 50%; + left: 50%; + width: $item-width; + height: $item-height; + margin: -($item-width / 2); + + $angle: (360 / $item-count); + $rotate: 0; + + @for $i from 1 through $item-count { + &:nth-of-type(#{$i}) { + transform: rotate($rotate * 1deg) + translate($circle-size / 2) + rotate($rotate * -1deg); + } + + $rotate: $rotate + $angle; + } + } +} + +@mixin on-circle-wo($item-count, $circle-size, $item-size) { + position: relative; + width: $circle-size; + height: $circle-size; + padding: 0; + border-radius: 50%; + list-style: none; + + > * { + display: block; + position: absolute; + top: 50%; + left: 50%; + width: $item-size; + height: $item-size; + margin: -($item-size / 2); + + $angle: (360 / $item-count); + $rotate: 0; + + @for $i from 1 through $item-count { + &:nth-of-type(#{$i}) { + transform: rotate($rotate * 1deg) translate($circle-size / 2); + + // rotate($rotate * -1deg); + } + + $rotate: $rotate + $angle; + } + } +} + +@mixin green-step { + &::after { + content: ' '; + + position: absolute; + bottom: 0; + left: 50%; + + display: block; + + width: 4px; + height: 4px; + border-radius: 50%; + + background-color: rgba(5, 194, 223, 1); + } +} diff --git a/src/styles/utils/vars.scss b/src/styles/utils/vars.scss new file mode 100644 index 000000000..fdc66a91a --- /dev/null +++ b/src/styles/utils/vars.scss @@ -0,0 +1,22 @@ +$c-gray: #eee; +$grey-text: rgb(146, 146, 146); +$tablet-min-width: 640px; +$desktop-min-width: 1280px; +$font-inter: 'Inter', sans-serif; +$background-gradient: linear-gradient(90deg, #191536, #000); +$background-black: #05040b; +$background-dark-blue: #191536; +$contrast-color: #05c2df; +$dark-grey: #2f2f2f; +$form-invalid: rgba(134, 4, 4, 1); +$dark-grey-text: rgb(47, 47, 47); +$main-turquoise: rgba(5, 194, 223, 1); +$text-color: #929292; +$main-white: rgba(255, 255, 255, 1); +$main-purple: rgba(25, 21, 54, 1); +$linear-gradient: linear-gradient( + to right bottom, + rgba(25, 21, 54, 1), + rgba(0, 0, 0, 1) +); +$effect-duration: 0.3s;