diff --git a/.bemlintrc.json b/.bemlintrc.json new file mode 100644 index 0000000..f356635 --- /dev/null +++ b/.bemlintrc.json @@ -0,0 +1,15 @@ +{ + "elementDivider": "__", + "modifierDivider": "--", + "ignore": [ + "node_modules", + "dist" + ], + "rules": { + "one-block": true, + "one-element": true, + "no-double-element": true, + "no-neighbour-parent-block": true, + "modifiable-class": true + } +} diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index a64ccfa..f3065d3 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -19,5 +19,11 @@ jobs: uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - - run: npm ci - - run: npm start & sleep 5 && npm test + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/.gitignore b/.gitignore index 0f8d3cf..549c139 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,4 @@ node_modules # Generated files backstop_data dist +.cache diff --git a/.linthtmlrc.json b/.linthtmlrc.json index 0f2047a..774726e 100644 --- a/.linthtmlrc.json +++ b/.linthtmlrc.json @@ -1,3 +1,49 @@ { - "extends": "@mate-academy/linthtml-config" + "attr-bans": [ + "align", + "background", + "bgcolor", + "border", + "frameborder", + "style" + ], + "attr-name-ignore-regex": "viewBox", + "attr-no-dup": true, + "attr-quote-style": "double", + "attr-req-value": true, + "class-no-dup": true, + "doctype-first": true, + "doctype-html5": true, + "fig-req-figcaption": true, + "head-req-title": true, + "html-req-lang": true, + "id-class-style": false, + "id-no-dup": true, + "img-req-src": true, + "img-req-alt": "allownull", + "indent-width": 2, + "indent-style": "spaces", + "indent-width-cont": true, + "input-radio-req-name": true, + "spec-char-escape": true, + "tag-bans": [ + "b", + "i", + "u", + "center", + "style", + "marquee", + "font", + "s" + ], + "tag-name-lowercase": true, + "tag-name-match": true, + "tag-self-close": "never", + "tag-close": true, + "text-ignore-regex": "&", + "title-no-dup": true, + "line-end-style": "lf", + "attr-new-line": 2, + "attr-name-style": "dash", + "attr-no-unsafe-char": true } diff --git a/README.md b/README.md index 7fa4acc..6f415ee 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ # Base layout template with Gulp, SCSS and Stylelint 1. Create a repo using this template 1. Replace `` and `` with your Github username and the new repo name - - [DEMO LINK](https://.github.io//) + - [DEMO LINK](https://YevaDrach.github.io/richard_landing__page/) diff --git a/package-lock.json b/package-lock.json index f6e6caa..f6c8c3e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1544,13 +1544,35 @@ "dev": true }, "@mate-academy/scripts": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-0.2.0.tgz", - "integrity": "sha512-17i1Kdc+8D6CqypX+0MsHXIt299nA90JVUU2CyNb/Rrw2oPMUVwImbHCK6dJYJlZ6GRF2CV5zRBauVHLmldPFw==", + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.2.3.tgz", + "integrity": "sha512-clsxVN4sQap5pgFev+WOEi9GVSYU5/C6puBgwGFmwePMTK+ssFFw+tdE5agrKkqmRsEgT38+wRbzITh+rZs1Yw==", "dev": true, "requires": { + "@octokit/rest": "^17.11.2", + "@types/get-port": "^4.2.0", "commander": "^5.1.0", - "fs-extra": "^9.0.0" + "cross-env": "^7.0.3", + "dotenv": "^8.6.0", + "fs-extra": "^9.1.0", + "get-port": "^5.1.1", + "open": "^7.4.2", + "sinon": "^9.2.4", + "tree-kill": "^1.2.2" + }, + "dependencies": { + "dotenv": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz", + "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==", + "dev": true + }, + "get-port": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/get-port/-/get-port-5.1.1.tgz", + "integrity": "sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==", + "dev": true + } } }, "@mate-academy/stylelint-config": { @@ -1624,6 +1646,235 @@ "fastq": "^1.6.0" } }, + "@octokit/auth-token": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-2.5.0.tgz", + "integrity": "sha512-r5FVUJCOLl19AxiuZD2VRZ/ORjp/4IN98Of6YJoJOkY75CIBuYfmiNHGrDwXr+aLGG55igl9QrxX3hbiXlLb+g==", + "dev": true, + "requires": { + "@octokit/types": "^6.0.3" + }, + "dependencies": { + "@octokit/types": { + "version": "6.34.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz", + "integrity": "sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==", + "dev": true, + "requires": { + "@octokit/openapi-types": "^11.2.0" + } + } + } + }, + "@octokit/core": { + "version": "2.5.4", + "resolved": "https://registry.npmjs.org/@octokit/core/-/core-2.5.4.tgz", + "integrity": "sha512-HCp8yKQfTITYK+Nd09MHzAlP1v3Ii/oCohv0/TW9rhSLvzb98BOVs2QmVYuloE6a3l6LsfyGIwb6Pc4ycgWlIQ==", + "dev": true, + "requires": { + "@octokit/auth-token": "^2.4.0", + "@octokit/graphql": "^4.3.1", + "@octokit/request": "^5.4.0", + "@octokit/types": "^5.0.0", + "before-after-hook": "^2.1.0", + "universal-user-agent": "^5.0.0" + } + }, + "@octokit/endpoint": { + "version": "6.0.12", + "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-6.0.12.tgz", + "integrity": "sha512-lF3puPwkQWGfkMClXb4k/eUT/nZKQfxinRWJrdZaJO85Dqwo/G0yOC434Jr2ojwafWJMYqFGFa5ms4jJUgujdA==", + "dev": true, + "requires": { + "@octokit/types": "^6.0.3", + "is-plain-object": "^5.0.0", + "universal-user-agent": "^6.0.0" + }, + "dependencies": { + "@octokit/types": { + "version": "6.34.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz", + "integrity": "sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==", + "dev": true, + "requires": { + "@octokit/openapi-types": "^11.2.0" + } + }, + "is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", + "dev": true + }, + "universal-user-agent": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz", + "integrity": "sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==", + "dev": true + } + } + }, + "@octokit/graphql": { + "version": "4.8.0", + "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-4.8.0.tgz", + "integrity": "sha512-0gv+qLSBLKF0z8TKaSKTsS39scVKF9dbMxJpj3U0vC7wjNWFuIpL/z76Qe2fiuCbDRcJSavkXsVtMS6/dtQQsg==", + "dev": true, + "requires": { + "@octokit/request": "^5.6.0", + "@octokit/types": "^6.0.3", + "universal-user-agent": "^6.0.0" + }, + "dependencies": { + "@octokit/types": { + "version": "6.34.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz", + "integrity": "sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==", + "dev": true, + "requires": { + "@octokit/openapi-types": "^11.2.0" + } + }, + "universal-user-agent": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz", + "integrity": "sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==", + "dev": true + } + } + }, + "@octokit/openapi-types": { + "version": "11.2.0", + "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-11.2.0.tgz", + "integrity": "sha512-PBsVO+15KSlGmiI8QAzaqvsNlZlrDlyAJYcrXBCvVUxCp7VnXjkwPoFHgjEJXx3WF9BAwkA6nfCUA7i9sODzKA==", + "dev": true + }, + "@octokit/plugin-paginate-rest": { + "version": "2.17.0", + "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.17.0.tgz", + "integrity": "sha512-tzMbrbnam2Mt4AhuyCHvpRkS0oZ5MvwwcQPYGtMv4tUa5kkzG58SVB0fcsLulOZQeRnOgdkZWkRUiyBlh0Bkyw==", + "dev": true, + "requires": { + "@octokit/types": "^6.34.0" + }, + "dependencies": { + "@octokit/types": { + "version": "6.34.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz", + "integrity": "sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==", + "dev": true, + "requires": { + "@octokit/openapi-types": "^11.2.0" + } + } + } + }, + "@octokit/plugin-request-log": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz", + "integrity": "sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==", + "dev": true + }, + "@octokit/plugin-rest-endpoint-methods": { + "version": "3.17.0", + "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-3.17.0.tgz", + "integrity": "sha512-NFV3vq7GgoO2TrkyBRUOwflkfTYkFKS0tLAPym7RNpkwLCttqShaEGjthOsPEEL+7LFcYv3mU24+F2yVd3npmg==", + "dev": true, + "requires": { + "@octokit/types": "^4.1.6", + "deprecation": "^2.3.1" + }, + "dependencies": { + "@octokit/types": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-4.1.10.tgz", + "integrity": "sha512-/wbFy1cUIE5eICcg0wTKGXMlKSbaAxEr00qaBXzscLXpqhcwgXeS6P8O0pkysBhRfyjkKjJaYrvR1ExMO5eOXQ==", + "dev": true, + "requires": { + "@types/node": ">= 8" + } + } + } + }, + "@octokit/request": { + "version": "5.6.3", + "resolved": "https://registry.npmjs.org/@octokit/request/-/request-5.6.3.tgz", + "integrity": "sha512-bFJl0I1KVc9jYTe9tdGGpAMPy32dLBXXo1dS/YwSCTL/2nd9XeHsY616RE3HPXDVk+a+dBuzyz5YdlXwcDTr2A==", + "dev": true, + "requires": { + "@octokit/endpoint": "^6.0.1", + "@octokit/request-error": "^2.1.0", + "@octokit/types": "^6.16.1", + "is-plain-object": "^5.0.0", + "node-fetch": "^2.6.7", + "universal-user-agent": "^6.0.0" + }, + "dependencies": { + "@octokit/types": { + "version": "6.34.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz", + "integrity": "sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==", + "dev": true, + "requires": { + "@octokit/openapi-types": "^11.2.0" + } + }, + "is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", + "dev": true + }, + "universal-user-agent": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz", + "integrity": "sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==", + "dev": true + } + } + }, + "@octokit/request-error": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-2.1.0.tgz", + "integrity": "sha512-1VIvgXxs9WHSjicsRwq8PlR2LR2x6DwsJAaFgzdi0JfJoGSO8mYI/cHJQ+9FbN21aa+DrgNLnwObmyeSC8Rmpg==", + "dev": true, + "requires": { + "@octokit/types": "^6.0.3", + "deprecation": "^2.0.0", + "once": "^1.4.0" + }, + "dependencies": { + "@octokit/types": { + "version": "6.34.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz", + "integrity": "sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==", + "dev": true, + "requires": { + "@octokit/openapi-types": "^11.2.0" + } + } + } + }, + "@octokit/rest": { + "version": "17.11.2", + "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-17.11.2.tgz", + "integrity": "sha512-4jTmn8WossTUaLfNDfXk4fVJgbz5JgZE8eCs4BvIb52lvIH8rpVMD1fgRCrHbSd6LRPE5JFZSfAEtszrOq3ZFQ==", + "dev": true, + "requires": { + "@octokit/core": "^2.4.3", + "@octokit/plugin-paginate-rest": "^2.2.0", + "@octokit/plugin-request-log": "^1.0.0", + "@octokit/plugin-rest-endpoint-methods": "3.17.0" + } + }, + "@octokit/types": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-5.5.0.tgz", + "integrity": "sha512-UZ1pErDue6bZNjYOotCNveTXArOMZQFG6hKJfOnGnulVCMcVVi7YIIuuR4WfBhjo7zgpmzn/BkPDnUXtNx+PcQ==", + "dev": true, + "requires": { + "@types/node": ">= 8" + } + }, "@parcel/fs": { "version": "1.11.0", "resolved": "https://registry.npmjs.org/@parcel/fs/-/fs-1.11.0.tgz", @@ -1696,6 +1947,41 @@ "physical-cpu-count": "^2.0.0" } }, + "@sinonjs/commons": { + "version": "1.8.3", + "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.3.tgz", + "integrity": "sha512-xkNcLAn/wZaX14RPlwizcKicDk9G3F8m2nU3L7Ukm5zBgTwiT0wsoFAHx9Jq56fJA1z/7uKGtCRu16sOUCLIHQ==", + "dev": true, + "requires": { + "type-detect": "4.0.8" + } + }, + "@sinonjs/fake-timers": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz", + "integrity": "sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==", + "dev": true, + "requires": { + "@sinonjs/commons": "^1.7.0" + } + }, + "@sinonjs/samsam": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/@sinonjs/samsam/-/samsam-5.3.1.tgz", + "integrity": "sha512-1Hc0b1TtyfBu8ixF/tpfSHTVWKwCBLY4QJbkgnE7HcwyvT2xArDxb4K7dMgqRm3szI+LJbzmW/s4xxEhv6hwDg==", + "dev": true, + "requires": { + "@sinonjs/commons": "^1.6.0", + "lodash.get": "^4.4.2", + "type-detect": "^4.0.8" + } + }, + "@sinonjs/text-encoding": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz", + "integrity": "sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==", + "dev": true + }, "@stylelint/postcss-css-in-js": { "version": "0.37.1", "resolved": "https://registry.npmjs.org/@stylelint/postcss-css-in-js/-/postcss-css-in-js-0.37.1.tgz", @@ -1721,12 +2007,27 @@ "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==", "dev": true }, + "@types/get-port": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/@types/get-port/-/get-port-4.2.0.tgz", + "integrity": "sha512-Iv2FAb5RnIk/eFO2CTu8k+0VMmIR15pKbcqRWi+s3ydW+aKXlN2yemP92SrO++ERyJx+p6Ie1ggbLBMbU1SjiQ==", + "dev": true, + "requires": { + "get-port": "*" + } + }, "@types/minimist": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY=", "dev": true }, + "@types/node": { + "version": "17.0.41", + "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.41.tgz", + "integrity": "sha512-xA6drNNeqb5YyV5fO3OAEsnXLfO7uF0whiOfPTz5AeDo8KeZFmODKnvwPymMNO8qE/an8pVY/O50tig2SQCrGw==", + "dev": true + }, "@types/normalize-package-data": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz", @@ -2295,6 +2596,12 @@ "tweetnacl": "^0.14.3" } }, + "before-after-hook": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.2.tgz", + "integrity": "sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ==", + "dev": true + }, "binary-extensions": { "version": "1.13.1", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz", @@ -3117,6 +3424,58 @@ "sha.js": "^2.4.8" } }, + "cross-env": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz", + "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==", + "dev": true, + "requires": { + "cross-spawn": "^7.0.1" + }, + "dependencies": { + "cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "requires": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + } + }, + "path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true + }, + "shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "requires": { + "shebang-regex": "^3.0.0" + } + }, + "shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true + }, + "which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "requires": { + "isexe": "^2.0.0" + } + } + } + }, "cross-spawn": { "version": "6.0.5", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", @@ -3592,6 +3951,12 @@ "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=", "dev": true }, + "deprecation": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz", + "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==", + "dev": true + }, "des.js": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz", @@ -3608,6 +3973,12 @@ "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=", "dev": true }, + "diff": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", + "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", + "dev": true + }, "diffie-hellman": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", @@ -3818,6 +4189,15 @@ "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=", "dev": true }, + "end-of-stream": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", + "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==", + "dev": true, + "requires": { + "once": "^1.4.0" + } + }, "entities": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz", @@ -4249,6 +4629,21 @@ "safe-buffer": "^5.1.1" } }, + "execa": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz", + "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==", + "dev": true, + "requires": { + "cross-spawn": "^6.0.0", + "get-stream": "^4.0.0", + "is-stream": "^1.1.0", + "npm-run-path": "^2.0.0", + "p-finally": "^1.0.0", + "signal-exit": "^3.0.0", + "strip-eof": "^1.0.0" + } + }, "execall": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/execall/-/execall-2.0.0.tgz", @@ -4653,15 +5048,15 @@ "dev": true }, "fs-extra": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.0.tgz", - "integrity": "sha512-pmEYSk3vYsG/bF651KPUXZ+hvjpgWYw/Gc7W9NFUe3ZVLczKKWIij3IKpOrQcdw4TILtibFslZ0UmR8Vvzig4g==", + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz", + "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==", "dev": true, "requires": { "at-least-node": "^1.0.0", "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", - "universalify": "^1.0.0" + "universalify": "^2.0.0" } }, "fs.realpath": { @@ -4785,6 +5180,15 @@ "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=", "dev": true }, + "get-stream": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", + "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==", + "dev": true, + "requires": { + "pump": "^3.0.0" + } + }, "get-value": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz", @@ -5604,6 +6008,12 @@ "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=", "dev": true }, + "is-docker": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", + "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==", + "dev": true + }, "is-extendable": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz", @@ -5722,6 +6132,12 @@ "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==", "dev": true }, + "is-stream": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", + "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==", + "dev": true + }, "is-string": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.5.tgz", @@ -5954,13 +6370,13 @@ } }, "jsonfile": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.0.1.tgz", - "integrity": "sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", "dev": true, "requires": { "graceful-fs": "^4.1.6", - "universalify": "^1.0.0" + "universalify": "^2.0.0" } }, "jsprim": { @@ -5975,6 +6391,12 @@ "verror": "1.10.0" } }, + "just-extend": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-4.2.1.tgz", + "integrity": "sha512-g3UB796vUFIY90VIv/WX3L2c8CS2MdWUww3CNrYmqza1Fg0DURc2K/O4YrnklBdQarSJ/y8JnJYDGc+1iumQjg==", + "dev": true + }, "kebabcase": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/kebabcase/-/kebabcase-1.0.1.tgz", @@ -6058,6 +6480,12 @@ "integrity": "sha1-GVhwRQ9aExkkeN9Lw9I9LeoZB7Y=", "dev": true }, + "lodash.get": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", + "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==", + "dev": true + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -6126,6 +6554,12 @@ "yallist": "^2.1.2" } }, + "macos-release": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.5.0.tgz", + "integrity": "sha512-EIgv+QZ9r+814gjJj0Bt5vSLJLzswGmSUbUpbi9AIr/fsN2IWFBl2NucV9PAiek+U1STK468tEkxmVYUtuAN3g==", + "dev": true + }, "magic-string": { "version": "0.22.5", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.22.5.tgz", @@ -6604,12 +7038,58 @@ "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==", "dev": true }, + "nise": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/nise/-/nise-4.1.0.tgz", + "integrity": "sha512-eQMEmGN/8arp0xsvGoQ+B1qvSkR73B1nWSCh7nOt5neMCtwcQVYQGdzQMhcNscktTsWB54xnlSQFzOAPJD8nXA==", + "dev": true, + "requires": { + "@sinonjs/commons": "^1.7.0", + "@sinonjs/fake-timers": "^6.0.0", + "@sinonjs/text-encoding": "^0.7.1", + "just-extend": "^4.0.2", + "path-to-regexp": "^1.7.0" + } + }, "node-addon-api": { "version": "1.7.1", "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-1.7.1.tgz", "integrity": "sha512-2+DuKodWvwRTrCfKOeR24KIc5unKjOh8mz17NCzVnHWfjAdDqbfbjqh7gUT+BkXBRQM52+xCHciKWonJ3CbJMQ==", "dev": true }, + "node-fetch": { + "version": "2.6.7", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz", + "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==", + "dev": true, + "requires": { + "whatwg-url": "^5.0.0" + }, + "dependencies": { + "tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=", + "dev": true + }, + "webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=", + "dev": true + }, + "whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=", + "dev": true, + "requires": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + } + } + }, "node-forge": { "version": "0.7.6", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.6.tgz", @@ -6964,6 +7444,15 @@ "sort-keys": "^1.0.0" } }, + "npm-run-path": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz", + "integrity": "sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==", + "dev": true, + "requires": { + "path-key": "^2.0.0" + } + }, "npmlog": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", @@ -7137,6 +7626,27 @@ "mimic-fn": "^1.0.0" } }, + "open": { + "version": "7.4.2", + "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz", + "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==", + "dev": true, + "requires": { + "is-docker": "^2.0.0", + "is-wsl": "^2.1.1" + }, + "dependencies": { + "is-wsl": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", + "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", + "dev": true, + "requires": { + "is-docker": "^2.0.0" + } + } + } + }, "opn": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/opn/-/opn-5.3.0.tgz", @@ -7299,6 +7809,16 @@ "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", "dev": true }, + "os-name": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/os-name/-/os-name-3.1.0.tgz", + "integrity": "sha512-h8L+8aNjNcMpo/mAIBPn5PXCM16iyPGjHNWo6U1YO8sJTMHtEtyczI6QJnLoplswm6goopQkqc7OAnjhWcugVg==", + "dev": true, + "requires": { + "macos-release": "^2.2.0", + "windows-release": "^3.1.0" + } + }, "os-tmpdir": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", @@ -7315,6 +7835,12 @@ "os-tmpdir": "^1.0.0" } }, + "p-finally": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz", + "integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==", + "dev": true + }, "p-limit": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz", @@ -7568,6 +8094,23 @@ "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==", "dev": true }, + "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==", + "dev": true, + "requires": { + "isarray": "0.0.1" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==", + "dev": true + } + } + }, "path-type": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz", @@ -8467,6 +9010,16 @@ } } }, + "pump": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", + "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", + "dev": true, + "requires": { + "end-of-stream": "^1.1.0", + "once": "^1.3.1" + } + }, "punycode": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", @@ -9507,6 +10060,37 @@ } } }, + "sinon": { + "version": "9.2.4", + "resolved": "https://registry.npmjs.org/sinon/-/sinon-9.2.4.tgz", + "integrity": "sha512-zljcULZQsJxVra28qIAL6ow1Z9tpattkCTEJR4RBP3TGc00FcttsP5pK284Nas5WjMZU5Yzy3kAIp3B3KRf5Yg==", + "dev": true, + "requires": { + "@sinonjs/commons": "^1.8.1", + "@sinonjs/fake-timers": "^6.0.1", + "@sinonjs/samsam": "^5.3.1", + "diff": "^4.0.2", + "nise": "^4.0.4", + "supports-color": "^7.1.0" + }, + "dependencies": { + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -9995,6 +10579,12 @@ "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=", "dev": true }, + "strip-eof": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", + "integrity": "sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==", + "dev": true + }, "strip-indent": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz", @@ -10805,6 +11395,12 @@ "punycode": "^2.1.0" } }, + "tree-kill": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz", + "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==", + "dev": true + }, "trim": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz", @@ -10883,6 +11479,12 @@ "prelude-ls": "~1.1.2" } }, + "type-detect": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz", + "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==", + "dev": true + }, "type-fest": { "version": "0.21.3", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", @@ -11106,10 +11708,19 @@ "unist-util-is": "^4.0.0" } }, + "universal-user-agent": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-5.0.0.tgz", + "integrity": "sha512-B5TPtzZleXyPrUMKCpEHFmVhMN6EhmJYjG5PQna9s7mXeSqGTLap4OpqLl5FCEFUI3UBmllkETwKf/db66Y54Q==", + "dev": true, + "requires": { + "os-name": "^3.1.0" + } + }, "universalify": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz", - "integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", "dev": true }, "unquote": { @@ -11405,6 +12016,15 @@ "string-width": "^1.0.2 || 2" } }, + "windows-release": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/windows-release/-/windows-release-3.3.3.tgz", + "integrity": "sha512-OSOGH1QYiW5yVor9TtmXKQvt2vjQqbYS+DqmsZw+r7xDwLXEeT3JGW0ZppFmHx4diyXmxt238KFR3N9jzevBRg==", + "dev": true, + "requires": { + "execa": "^1.0.0" + } + }, "word-wrap": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", diff --git a/package.json b/package.json index 9e26204..fd034b0 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "@mate-academy/bemlint": "^0.1.1", "@mate-academy/eslint-config": "*", "@mate-academy/linthtml-config": "0.0.2", - "@mate-academy/scripts": "^0.2.0", + "@mate-academy/scripts": "^1.2.3", "@mate-academy/stylelint-config": "0.0.9", "colors": "^1.3.3", "eslint": "^5.16.0", diff --git a/src/fonts/.gitkeep b/src/fonts/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d7..0000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/.gitkeep b/src/images/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/images/Scan of intenational passport (Drach Yeva).pdf b/src/images/Scan of intenational passport (Drach Yeva).pdf new file mode 100644 index 0000000..7bb6c5d Binary files /dev/null and b/src/images/Scan of intenational passport (Drach Yeva).pdf differ diff --git a/src/images/about-1.jpg b/src/images/about-1.jpg new file mode 100644 index 0000000..8768ad5 Binary files /dev/null and b/src/images/about-1.jpg differ diff --git a/src/images/about-2.jpg b/src/images/about-2.jpg new file mode 100644 index 0000000..da532d8 Binary files /dev/null and b/src/images/about-2.jpg differ diff --git a/src/images/bitcoin-logo.png b/src/images/bitcoin-logo.png new file mode 100644 index 0000000..2ff7f6b Binary files /dev/null and b/src/images/bitcoin-logo.png differ diff --git a/src/images/black-screen-image.png b/src/images/black-screen-image.png new file mode 100644 index 0000000..5aa1a07 Binary files /dev/null and b/src/images/black-screen-image.png differ diff --git a/src/images/bottom-image.png b/src/images/bottom-image.png new file mode 100644 index 0000000..0d1e2a7 Binary files /dev/null and b/src/images/bottom-image.png differ diff --git a/src/images/favicon.svg b/src/images/favicon.svg new file mode 100644 index 0000000..0051a02 --- /dev/null +++ b/src/images/favicon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/features-1.svg b/src/images/features-1.svg new file mode 100644 index 0000000..e244d6c --- /dev/null +++ b/src/images/features-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/features-2.svg b/src/images/features-2.svg new file mode 100644 index 0000000..baac410 --- /dev/null +++ b/src/images/features-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/features-3.svg b/src/images/features-3.svg new file mode 100644 index 0000000..18de796 --- /dev/null +++ b/src/images/features-3.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer-logo.svg b/src/images/footer-logo.svg new file mode 100644 index 0000000..0051a02 --- /dev/null +++ b/src/images/footer-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/header-image.svg b/src/images/header-image.svg new file mode 100644 index 0000000..50aa2ef --- /dev/null +++ b/src/images/header-image.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/how-to-use-1.jpg b/src/images/how-to-use-1.jpg new file mode 100644 index 0000000..84e9290 Binary files /dev/null and b/src/images/how-to-use-1.jpg differ diff --git a/src/images/how-to-use-2.jpg b/src/images/how-to-use-2.jpg new file mode 100644 index 0000000..46191b6 Binary files /dev/null and b/src/images/how-to-use-2.jpg differ diff --git a/src/images/how-to-use-3.jpg b/src/images/how-to-use-3.jpg new file mode 100644 index 0000000..5e16a1e Binary files /dev/null and b/src/images/how-to-use-3.jpg differ diff --git a/src/images/icons/cross.svg b/src/images/icons/cross.svg new file mode 100644 index 0000000..75c57fb --- /dev/null +++ b/src/images/icons/cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/menu.svg b/src/images/icons/menu.svg new file mode 100644 index 0000000..b5ea4b2 --- /dev/null +++ b/src/images/icons/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo-microsoft.jpg b/src/images/logo-microsoft.jpg new file mode 100644 index 0000000..1824c09 Binary files /dev/null and b/src/images/logo-microsoft.jpg differ diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 0000000..c484c33 Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/microsoft-logo.png b/src/images/microsoft-logo.png new file mode 100644 index 0000000..fc65baa Binary files /dev/null and b/src/images/microsoft-logo.png differ diff --git a/src/images/product-hunt-logo.png b/src/images/product-hunt-logo.png new file mode 100644 index 0000000..8dbb823 Binary files /dev/null and b/src/images/product-hunt-logo.png differ diff --git a/src/images/quotes.svg b/src/images/quotes.svg new file mode 100644 index 0000000..9228c6c --- /dev/null +++ b/src/images/quotes.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/uber-eats.svg b/src/images/uber-eats.svg new file mode 100644 index 0000000..00eafa9 --- /dev/null +++ b/src/images/uber-eats.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/vector.svg b/src/images/vector.svg new file mode 100644 index 0000000..7ba1fef --- /dev/null +++ b/src/images/vector.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/webflow-logo.png b/src/images/webflow-logo.png new file mode 100644 index 0000000..9d59597 Binary files /dev/null and b/src/images/webflow-logo.png differ diff --git a/src/index.html b/src/index.html index 5d357bd..c894752 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,394 @@ - + + - Title + + + Richard - -

Hello Mate Academy

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

+ Momentum +

+

+ Launch your product — and savor the momentum. +

+ + Get the App + +
+
+
+ Header image +
+
+
+
+
+
+ + + +
+
+
+

+ Aenean Consectetur Porta +

+

+ Nullam quis risus eget urna mollis
+ ornare vel eu leo. +

+
+ Orders +
+
+
+ +
+ +
+
+
+

+ Aenean Consectetur +

+

+ Cay sociis nato
+ que penatibus et +

+

+ Lorem ipsum dolor sit amet, consectetur
+ adipiscing elit. Suspendisse varius enim in
+ eros elementum tristique. +

+
+
+ How to use image 1 +
+
+ + +
+
+ How to use image 2 +
+
+

ConsectUltricies

+

Amet Ipsum

+

+ Lorem ipsum dolor sit amet, consectetur
+ adipiscing elit. Suspendisse varius enim in
+ eros elementum tristique. +

+
+
+ + +
+
+

+ Aenean Consectetur Porta +

+

+ Magna Porta Sit
+ Bibendum +

+

+ Lorem ipsum dolor sit amet, consectetur
+ adipiscing elit. Suspendisse varius enim in
+ eros elementum tristique. +

+
+
+ How to use image 3 +
+
+
+ +
+
+ Activity Notifications +
Activity Notifications
+

Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Suspendisse varius enim in eros elementum
tristique.

+
+ +
+ Custom Timing +
Custom Timing
+

Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Suspendisse varius enim in eros elementum
tristique.

+
+ +
+ Mobile Optimized +
Mobile Optimized
+

Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Suspendisse varius enim in eros elementum
tristique.

+
+
+ +
+
+

+12k

+

Nibh Elit Tristique

+
+ +
+

84

+

Aenean Condimentum

+
+ +
+

3,07

+

Quam Inceptos

+
+ +
+

24h

+

Ullamcorper

+
+
+ +
+
+
+
+

Aenean Consectetur Porta

+

+ Sem Risus Elit
+ Vestibulum +

+

Nulla vitae elit libero, a pharetra augue. Duis
+ mollis, est non commodo luctus, nisi erat
+ porttitor ligula, eget lacinia odio sem nec elit.
+ Cras mattis consectetur purus sit amet
+ fermentum. Donec id elit non mi porta
+ gravida at eget metus. Etiam porta sem
+ malesuada magna mollis euismod. +

+
+ +
+ Burgers +
+
+ +
+
+ Sandwich +
+
+

Aenean Consectetur Porta

+

+ Parturient Tortor +

+

Nulla vitae elit libero, a pharetra augue. Duis
+ mollis, est non commodo luctus, nisi erat
+ porttitor ligula, eget lacinia odio sem nec elit.
+ Cras mattis consectetur purus sit amet
+ fermentum. Donec id elit non mi porta
+ gravida at eget metus. Etiam porta sem
+ malesuada magna mollis euismod. +

+
+
+
+
+ +
+
+ Quote + +

+ HeadNulla vitae elit libero, a pharetra augue. Duis mollis, est
+ non commodo luctus, nisi erat porttitor ligula, eget lacinia odio
+ sem nec elit. Pus sit amet fermentum. Donec id elit non mi porta
+ gravida at eget metus. Etiam porta sem malesuada magna
+ mollis euismod.ing +

+
+ Joshua Home - New York Times +
+
+
+ +
+ + + + + + + + + + + + + + + +
+ + Bottom image + +
+
+
+

Ready to get started?

+
+ Download Now + Get in Touch +
+
+
+
+ +
+
+
+

+ Get updates from Richard +

+

+ New course alerts, discounts and free lessons +

+
+ + +
+
+
+
+ + - + \ No newline at end of file diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a..4fd568a 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,9 @@ 'use strict'; + +window.addEventListener('hashchange', () => { + if (window.location.hash === '#menu') { + document.body.classList.add('page__body--with-menu'); + } else { + document.body.classList.remove('page__body--with-menu'); + } +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 2067b3f..0000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: "Roboto"; - src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb4..0000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 0000000..c52718b --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,83 @@ +.about { + display: flex; + flex-direction: column; + justify-content: center; + + &__item:not(:last-child) { + margin-bottom: 160px; + + @include onSmallScreen { + margin-bottom: 60px; + } + + @include onSuperSmallScreen { + margin-bottom: 60px; + } + } +} + +.about-item { + display: flex; + justify-content: center; + align-items: center; + + @include onSmallScreen { + display: grid; + justify-content: center; + align-items: center; + } + + @include onSuperSmallScreen { + display: grid; + justify-items: left; + align-items: center; + } + + &__info { + margin-right: 80px; + + @include onMobile { + margin-right: 50px; + } + + @include onSmallScreen { + order: 1; + margin: 0 0 30px; + } + + @include onSuperSmallScreen { + order: 1; + margin: 0 0 30px; + } + + &--second { + margin-right: 0; + } + } + + &__image-container { + &--second { + margin-right: 60px; + } + + @include onMobile { + height: 250px; + } + + @include onSmallScreen { + margin-right: 0; + order: 2; + height: 200px; + } + + @include onSuperSmallScreen { + margin-right: 0; + order: 2; + height: 150px; + } + } + + &__image { + height: 100%; + } +} diff --git a/src/styles/blocks/bottom-image.scss b/src/styles/blocks/bottom-image.scss new file mode 100644 index 0000000..b864ead --- /dev/null +++ b/src/styles/blocks/bottom-image.scss @@ -0,0 +1,18 @@ +.bottom-image { + display: block; + width: 100vw; + object-fit: cover; + height: 520px; + + @include onMobile { + height: 300px; + } + + @include onSmallScreen { + height: 200px; + } + + @include onSuperSmallScreen { + height: 150px; + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 0000000..2064f9b --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,33 @@ +.button { + height: 65px; + width: 170px; + display: flex; + justify-content: center; + text-align: center; + align-items: center; + box-sizing: border-box; + background-color: $color-pink; + + text-decoration: none; + color: #fff; + font-weight: 400; + font-size: 16px; + line-height: 162%; + cursor: pointer; + + @include onMobile { + font-size: 17px; + } + + @include onSmallScreen { + width: 130px; + height: 50px; + font-size: 15px; + } + + @include onSuperSmallScreen { + width: 130px; + height: 40px; + font-size: 13px; + } +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 0000000..38df315 --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,110 @@ +.contact-us { + background-color: #1b1b1b; + width: 100vw; + + &__content { + height: 450px; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + @include onMobile { + height: 400px; + } + + @include onSmallScreen { + height: 300px; + } + + @include onSuperSmallScreen { + height: 200px; + } + } + + &__text { + margin-bottom: 40px; + + @include onSmallScreen { + margin-bottom: 30px; + } + + @include onSuperSmallScreen { + margin-bottom: 25px; + } + } + + &__form { + display: flex; + align-items: center; + } + + &__input { + width: 300px; + min-height: 70px; + padding: 0 20px; + background-color: #fff; + box-sizing: border-box; + border-radius: 3px 0 0 3px; + color: #000; + border: 0; + + &::placeholder { + color: #000; + font-size: 16px; + font-weight: 400; + line-height: 162%; + + @include onSmallScreen { + font-size: 14px; + } + + @include onSuperSmallScreen { + font-size: 13px; + } + } + + @include onSmallScreen { + width: 200px; + min-height: 50px; + } + + @include onSuperSmallScreen { + width: 150px; + min-height: 40px; + } + } + + &__button { + background: $color-pink; + width: 150px; + display: flex; + min-height: 70px; + box-sizing: border-box; + justify-content: center; + align-items: center; + text-align: center; + border-radius: 0 3px 3px 0; + color: #000; + + font-size: 16px; + font-weight: 400; + line-height: 162%; + + padding: 0 22px; + border: 0; + + @include onSmallScreen { + font-size: 14px; + width: 100px; + min-height: 50px; + } + + @include onSuperSmallScreen { + font-size: 13px; + width: 100px; + min-height: 40px; + } + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 0000000..f6829be --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,17 @@ +.container { + max-width: 1140px; + margin: 0 auto; + padding: 0 130px; + + @include onMobile { + padding: 0 80px; + } + + @include onSmallScreen { + padding: 0 80px; + } + + @include onSuperSmallScreen { + padding: 0 20px; + } +} diff --git a/src/styles/blocks/features.scss b/src/styles/blocks/features.scss new file mode 100644 index 0000000..78d936d --- /dev/null +++ b/src/styles/blocks/features.scss @@ -0,0 +1,95 @@ +.features { + display: flex; + justify-content: center; + text-align: center; + padding: 0 100px; + + @include onMobile { + display: grid; + padding: 0; + grid-template-columns: 50% auto; + justify-items: center; + } + + @include onSmallScreen { + display: block; + padding: 0 50px; + } + + @include onSuperSmallScreen { + display: block; + padding: 0 30px; + } + + &__item { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + } + + &__item:not(:last-child) { + margin-right: 50px; + + @include onMobile { + margin: 0; + } + + @include onSmallScreen { + margin: 0 0 60px; + } + + @include onSuperSmallScreen { + margin: 0 0 50px; + } + } + + &__item:nth-child(-n+2) { + @include onMobile { + margin-bottom: 40px; + } + } + + &__icon { + margin-bottom: 40px; + + @include onMobile { + height: 25px; + margin-bottom: 30px; + } + + @include onSmallScreen { + height: 20px; + margin-bottom: 30px; + } + + @include onSuperSmallScreen { + height: 23px; + margin-bottom: 30px; + } + } + + &__title { + font-size: 18px; + font-weight: 700; + line-height: 133%; + color: #000; + margin: 0; + margin-bottom: 17px; + + @include onSmallScreen { + font-size: 15px; + } + + @include onSuperSmallScreen { + font-size: 15px; + } + } + + &__text { + @include onDesktop { + white-space: nowrap; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000..eb786e5 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,49 @@ +.footer { + background-color: #1b1b1b; + width: 100vw; + display: block; + flex-direction: column; + + &__content { + height: 240px; + padding: 20px 0 70px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + @include onMobile { + height: 150px; + padding: 20px 0 50px; + } + + @include onSmallScreen { + height: 100px; + padding: 20px 0 40px; + } + + @include onSuperSmallScreen { + height: 100px; + padding: 20px 0 30px; + } + } + + &__logo { + display: block; + margin-bottom: 30px; + + @include onMobile { + height: 90px; + } + + @include onSmallScreen { + height: 50px; + margin-bottom: 20px; + } + + @include onSuperSmallScreen { + height: 50px; + margin-bottom: 15px; + } + } +} diff --git a/src/styles/blocks/grid.scss b/src/styles/blocks/grid.scss new file mode 100644 index 0000000..9fe3847 --- /dev/null +++ b/src/styles/blocks/grid.scss @@ -0,0 +1,46 @@ +.grid { + display: grid; + grid-template-columns: repeat(12, 1fr); + column-gap: 20px; + + @include onMobile { + grid-template-columns: repeat(6, 1fr); + column-gap: 30px; + } + + &--center { + align-items: center; + } + + &--desktop { + display: grid; + + @include onSmallScreen { + display: block; + } + + @include onSuperSmallScreen { + display: block; + } + } + + &__item { + @for $start from 1 through 12 { + @for $end from $start through 12 { + &--#{$start}-#{$end} { + grid-column: #{$start} / #{$end + 1}; + } + + &--desktop-#{$start}-#{$end} { + @include onDesktop { + grid-column: #{$start} / #{$end + 1}; + } + + @include onMobile { + grid-column: #{$start} / #{$end + 1}; + } + } + } + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000..a754d33 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,195 @@ +.header { + background: linear-gradient(287.15deg, #450e4b 0%, + #3c0c41 24.48%, rgba(207, 0, 99, 0) 100%), + linear-gradient(0deg, #cf0063, #cf0063); + width: 100vw; + + + &__content { + overflow: hidden; + height: max-content; + padding: $header-top-padding 0 0; + + @include onDesktop { + padding: 20px 0; + } + + @include onSmallScreen { + padding: 15px 0; + } + + @include onSuperSmallScreen { + padding: 15px 0; + } + } + + &__top-actions { + margin-bottom: 80px; + + @include onSmallScreen { + margin-bottom: 50px; + } + + @include onSuperSmallScreen { + margin-bottom: 30px; + } + } +} + +.top-actions { + display: flex; + justify-content: space-between; + align-items: center; + box-sizing: border-box; + width: 100%; + + @include onSuperSmallScreen { + justify-content: flex-start; + } + + &--side-menu { + justify-content: space-between; + } +} + +.menu { + display: flex; + padding: 0; + + @include onSuperSmallScreen { + display: none; + } + + &__item { + list-style: none; + } + + &__item:not(:last-child) { + margin-right: 30px; + + @include onSmallScreen { + margin-right: 12px; + } + + @include onSuperSmallScreen { + margin-right: 12px; + } + } + + &__item-link { + color: #fff; + padding: 20px 0; + font-size: 20px; + line-height: 125%; + font-weight: 400; + white-space: nowrap; + text-decoration: none; + + @include onSmallScreen { + font-size: 12px; + } + + @include onSuperSmallScreen { + font-size: 12px; + } + } +} + +.header-main-info { + display: flex; + align-items: center; + justify-content: space-between; + + @include onSmallScreen { + display: grid; + justify-items: center; + } + + @include onSuperSmallScreen { + display: grid; + justify-items: center; + } + + &__user { + display: flex; + text-align: left; + flex-direction: column; + + @include onSmallScreen { + margin-bottom: 30px; + } + + @include onSuperSmallScreen { + margin-bottom: 30px; + } + } + + &__title { + font-size: 80px; + font-weight: 400; + line-height: 100%; + color: #fff; + margin: 0; + margin-bottom: 10px; + + @include onMobile { + font-size: 50px; + } + + @include onSmallScreen { + font-weight: 700; + font-size: 25px; + margin-bottom: 15px; + } + + @include onSuperSmallScreen { + font-size: 25px; + margin-bottom: 15px; + } + } + + &__subtitle { + width: 100%; + font-size: 30px; + line-height: 146%; + font-weight: 400; + color: #fff; + margin: 0; + margin-bottom: 25px; + + @include onMobile { + font-size: 20px; + } + + @include onSmallScreen { + font-size: 17px; + } + + @include onSuperSmallScreen { + font-size: 13px; + } + } + + &__image { + display: block; + object-fit: cover; + object-position: center; + height: 650px; + + @include onDesktop { + max-width: 1600px; + } + + @include onMobile { + height: 400px; + } + + @include onSmallScreen { + height: 350px; + } + + @include onSuperSmallScreen { + height: 250px; + } + } +} diff --git a/src/styles/blocks/how-to-use.scss b/src/styles/blocks/how-to-use.scss new file mode 100644 index 0000000..17ad524 --- /dev/null +++ b/src/styles/blocks/how-to-use.scss @@ -0,0 +1,112 @@ +.how-to-use { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + &__item:not(:last-child) { + margin-bottom: 160px; + + @include onSmallScreen { + margin-bottom: 120px; + } + + @include onSuperSmallScreen { + margin-bottom: 80px; + } + } +} + +.use-item { + display: flex; + align-items: center; + justify-content: center; + + @include onSmallScreen { + display: block; + text-align: center; + } + + @include onSuperSmallScreen { + display: block; + text-align: center; + } + + &--second { + @include onSmallScreen { + display: grid; + justify-content: center; + } + + @include onSuperSmallScreen { + display: grid; + justify-content: center; + } + } + + &__info { + margin-right: 180px; + + @include onMobile { + margin-right: 120px; + } + + @include onSmallScreen { + margin-right: 0; + margin-bottom: 60px; + } + + @include onSuperSmallScreen { + margin-right: 0; + margin-bottom: 50px; + } + + &--second { + margin-right: 0; + + @include onSmallScreen { + order: 1; + } + + @include onSuperSmallScreen { + order: 1; + } + } + } + + &__image-container { + &--second { + margin-right: 180px; + + @include onMobile { + margin-right: 40px; + } + + @include onSmallScreen { + margin: 0; + order: 2; + } + + @include onSuperSmallScreen { + margin-right: 0; + order: 2; + } + } + + @include onMobile { + height: 350px; + } + + @include onSmallScreen { + height: 300px; + } + + @include onSuperSmallScreen { + height: 270px; + } + } + + &__image { + height: 100%; + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 0000000..5fa8310 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,22 @@ +.icon { + display: none; + height: 15px; + width: 15px; + + background-size: contain; + background-position: center; + background-repeat: no-repeat; + + &--menu { + background-image: url(../images/icons/menu.svg); + + @include onSuperSmallScreen { + display: block; + } + } + + &--cross { + display: block; + background-image: url(../images/icons/cross.svg); + } +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 0000000..1756e02 --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,24 @@ +.logo { + display: block; +} + +.logo-image { + height: 43px; + + @include onMobile { + height: 35px; + } + + @include onSmallScreen { + height: 22px; + } + + @include onSuperSmallScreen { + height: 25px; + margin-right: 20px; + } + + &--side-menu { + margin-right: 0; + } +} diff --git a/src/styles/blocks/orders.scss b/src/styles/blocks/orders.scss new file mode 100644 index 0000000..65039e7 --- /dev/null +++ b/src/styles/blocks/orders.scss @@ -0,0 +1,72 @@ +.orders { + background-color: #1b1b1b; + width: 100vw; + + &__container { + overflow: hidden; + display: grid; + grid-template-rows: auto auto 90%; + justify-items: center; + justify-content: center; + text-align: center; + height: max-content; + box-sizing: border-box; + padding-top: 100px; + + @include onMobile { + padding-top: 50px; + } + + @include onSmallScreen { + padding-top: 30px; + } + + @include onSuperSmallScreen { + padding-top: 30px; + } + } + + &__text { + font-size: 38px; + font-weight: 400; + line-height: 126%; + color: #fff; + + margin: 0; + margin-bottom: 20px; + + @include onDesktop { + margin-bottom: 55px; + } + + @include onMobile { + font-size: 20px; + } + + @include onSmallScreen { + font-size: 17px; + } + } + + &__container-image { + width: 100%; + height: 656px; + + @include onMobile { + height: 300px; + } + + @include onSmallScreen { + height: 200px; + } + + @include onSuperSmallScreen { + height: 150px; + } + } + + &__image { + object-fit: cover; + height: 100%; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000..daf06dd --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,88 @@ +.page { + font-family: "Gothic A1", sans-serif; + background: #fff; + font-size: 16px; + font-weight: 400; + margin: 0; + padding: 0; + box-sizing: border-box; + overflow-x: hidden; + scroll-behavior: smooth; + + &__body { + margin: 0; + } + + &__side-menu { + position: fixed; + top: 0; + left: 0; + right: 0; + + transform: translateX(-100%); + transition: transform 0.5s; + + &:target { + transform: translateX(0); + } + } + + &__orders { + margin-bottom: 80px; + + @include onSmallScreen { + margin-bottom: 50px; + } + + @include onSmallScreen { + margin-bottom: 50px; + } + } + + &__section { + margin-bottom: 160px; + + @include onMobile { + margin-bottom: 100px; + } + + @include onSmallScreen { + margin-bottom: 100px; + } + + @include onSuperSmallScreen { + margin-bottom: 80px; + } + } + + &__quote { + margin-bottom: 130px; + + @include onMobile { + margin-bottom: 90px; + } + + @include onSmallScreen { + margin-bottom: 80px; + } + + @include onSuperSmallScreen { + margin-bottom: 50px; + } + } + + &__partners { + margin-bottom: 120px; + + @include onMobile { + margin-bottom: 80px; + } + + @include onSmallScreen { + margin-bottom: 50px; + } + @include onSuperSmallScreen { + margin-bottom: 30px; + } + } +} diff --git a/src/styles/blocks/partners.scss b/src/styles/blocks/partners.scss new file mode 100644 index 0000000..b84aa99 --- /dev/null +++ b/src/styles/blocks/partners.scss @@ -0,0 +1,31 @@ +.partners { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: baseline; + + &__logo-container { + height: 35px; + padding: 8px 15px; + text-align: center; + + flex: 0 1 16.67%; + width: max-content; + + @include onMobile { + height: 30px; + } + + @include onSmallScreen { + height: 20px; + } + + @include onSuperSmallScreen { + height: 20px; + } + } + + &__logo { + height: 100%; + } +} diff --git a/src/styles/blocks/quote.scss b/src/styles/blocks/quote.scss new file mode 100644 index 0000000..70dbc89 --- /dev/null +++ b/src/styles/blocks/quote.scss @@ -0,0 +1,75 @@ +.quote { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + + &__image { + display: block; + height: 50px; + margin: 0 auto; + margin-bottom: 60px; + + @include onMobile { + height: 40px; + margin-bottom: 40px; + } + + @include onSmallScreen { + height: 30px; + margin-bottom: 30px; + } + + @include onSuperSmallScreen { + height: 25px; + margin-bottom: 20px; + } + } + + &__text { + font-size: 24px; + font-weight: 400; + line-height: 166%; + color: #6b6b6b; + margin: 0; + margin-bottom: 15px; + + @include onMobile { + font-size: 16px; + } + + @include onSmallScreen { + width: 200px; + font-size: 13px; + margin-bottom: 17px; + } + + @include onSuperSmallScreen { + width: 200px; + font-size: 13px; + margin-bottom: 17px; + } + } + + &__sourse { + margin: 0; + color: #6b6b6b; + font-size: 16px; + font-weight: 400; + line-height: 30px; + text-align: center; + + @include onMobile { + font-size: 13px; + } + + @include onSmallScreen { + font-size: 12px; + } + + @include onSuperSmallScreen { + font-size: 12px; + } + } +} diff --git a/src/styles/blocks/ready-start.scss b/src/styles/blocks/ready-start.scss new file mode 100644 index 0000000..e1cedb0 --- /dev/null +++ b/src/styles/blocks/ready-start.scss @@ -0,0 +1,64 @@ +.ready-start { + background: linear-gradient(287.15deg, #450e4b 0%, + #3c0c41 24.48%, rgba(207, 0, 99, 0) 100%), + linear-gradient(0deg, #cf0063, #cf0063); + width: 100vw; + + &__content { + overflow: hidden; + height: 500px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + @include onMobile { + height: 400px; + } + + @include onSmallScreen { + height: 300px; + } + + @include onSuperSmallScreen { + height: 200px; + } + } + + &__title { + margin-bottom: 40px; + } + + &__buttons { + display: flex; + + @include onSmallScreen { + display: block; + } + + @include onSuperSmallScreen { + display: block; + } + } + + &__download { + margin-right: 10px; + + @include onDesktop { + width: 190px; + } + + @include onSmallScreen { + margin: 0 -10px 10px 0; + } + + @include onSuperSmallScreen { + margin: 0 -10px 10px 0; + } + } + + &__get-in-touch { + background-color: transparent; + border: 0.5px solid #91728c; + } +} diff --git a/src/styles/blocks/side-menu.scss b/src/styles/blocks/side-menu.scss new file mode 100644 index 0000000..a95ae7a --- /dev/null +++ b/src/styles/blocks/side-menu.scss @@ -0,0 +1,40 @@ +.side-menu { + display: none; + background-color: $color-pink; + + @include onSuperSmallScreen { + display: block; + } + + &__content { + box-sizing: border-box; + height: 100vh; + padding: $header-top-padding 0; + } + + &__top-actions { + margin-bottom: 40px; + } + + &__list { + list-style: none; + margin: 0 0 48px; + padding: 0; + } + + &__item:not(:last-child) { + margin-bottom: 15px; + } + + &__link { + display: inline-block; + color: #fff; + text-decoration: none; + font-size: 12px; + font-weight: 700; + font-family: inherit; + line-height: 22px; + letter-spacing: 1px; + text-align: left; + } +} diff --git a/src/styles/blocks/social-media.scss b/src/styles/blocks/social-media.scss new file mode 100644 index 0000000..285c7ee --- /dev/null +++ b/src/styles/blocks/social-media.scss @@ -0,0 +1,54 @@ +.social-media { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + text-align: center; + + @include onMobile { + width: max-content; + } + + &__item { + display: block; + + font-size: 11px; + font-weight: 400; + line-height: 181%; + text-decoration: none; + color: #6b6b6b; + white-space: nowrap; + + @include onDesktop { + font-size: 20px; + } + + @include onMobile { + font-size: 15px; + } + + @include onSmallScreen { + padding: 8px 6px; + } + + @include onSuperSmallScreen { + padding: 6px 4px; + } + } + + &__item:not(:last-child) { + margin-right: 30px; + + @include onMobile { + margin-right: 25px; + } + + @include onSmallScreen { + margin-right: 0; + } + + @include onSuperSmallScreen { + margin-right: 0; + } + } +} diff --git a/src/styles/blocks/statistics.scss b/src/styles/blocks/statistics.scss new file mode 100644 index 0000000..e16b1ce --- /dev/null +++ b/src/styles/blocks/statistics.scss @@ -0,0 +1,78 @@ +.statistics { + display: block; + padding: 0 80px; + + @include onDesktop { + display: flex; + justify-content: center; + // padding: 0 150px; + } + + @include onMobile { + display: grid; + grid-template-columns: 50% auto; + justify-items: center; + } + + &__item { + display: flex; + flex-direction: column; + justify-content: baseline; + align-items: center; + text-align: center; + } + + &__item:not(:last-child) { + @include onDesktop { + margin-right: 160px; + } + + @include onSmallScreen { + margin: 0 0 50px; + } + + @include onSuperSmallScreen { + margin: 0 0 50px; + } + } + + &__item:nth-child(-n+2) { + @include onMobile { + margin-bottom: 100px; + } + } + + &__title { + font-size: 59px; + font-weight: 400; + line-height: 152%; + color: #333; + margin: 0; + margin-bottom: 10px; + + @include onSmallScreen { + font-size: 40px; + } + + @include onSuperSmallScreen { + font-size: 40px; + } + } + + &__subtitle { + font-size: 18px; + font-weight: 700; + line-height: 133%; + margin: 0; + + @include onSmallScreen { + font-weight: 400; + font-size: 15px; + } + + @include onSuperSmallScreen { + font-weight: 400; + font-size: 13px; + } + } +} diff --git a/src/styles/blocks/subtitle.scss b/src/styles/blocks/subtitle.scss new file mode 100644 index 0000000..7da3549 --- /dev/null +++ b/src/styles/blocks/subtitle.scss @@ -0,0 +1,82 @@ +.subtitle { + font-size: 12px; + font-weight: 400; + line-height: 166%; + letter-spacing: 2px; + color: #a8a8a8; + text-transform: uppercase; + margin: 0; + margin-bottom: 30px; + + @include onDesktop { + font-size: 17px; + } + + @include onSmallScreen { + margin-bottom: 12px; + font-size: 9px; + } + + @include onSuperSmallScreen { + margin-bottom: 12px; + font-size: 7px; + } + + &--bold { + font-size: 38px; + font-weight: 400; + line-height: 126%; + letter-spacing: 0; + color: #000; + white-space: nowrap; + text-transform: none; + margin: 0; + margin-bottom: 20px; + + @include onMobile { + font-size: 25px; + } + + @include onSmallScreen { + font-size: 20px; + margin-bottom: 15px; + } + + @include onSuperSmallScreen { + font-size: 15px; + margin-bottom: 15px; + } + } + + &--text { + font-size: 16px; + line-height: 187%; + color: #6b6b6b; + white-space: nowrap; + + text-transform: none; + margin: 0; + letter-spacing: 0; + + @include onDesktop { + font-size: 18px; + } + + @include onMobile { + font-size: 14px; + } + + @include onSmallScreen { + font-size: 13px; + } + + @include onSuperSmallScreen { + font-size: 11px; + } + } + + &--white { + text-transform: none; + color: #fff; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e..0dde04a 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,22 @@ @import "utils"; -@import "fonts"; -@import "typography"; - -body { - background: $c-gray; -} +@import "./blocks/page.scss"; +@import "./blocks/icon.scss"; +@import "./blocks/subtitle.scss"; +@import "./blocks/logo.scss"; +@import "./blocks/container.scss"; +@import "./blocks/grid.scss"; +@import "./blocks/header.scss"; +@import "./blocks/side-menu.scss"; +@import "./blocks/button.scss"; +@import "./blocks/orders.scss"; +@import "./blocks/how-to-use.scss"; +@import "./blocks/features.scss"; +@import "./blocks/statistics.scss"; +@import "./blocks/about.scss"; +@import "./blocks/quote.scss"; +@import "./blocks/partners.scss"; +@import "./blocks/bottom-image.scss"; +@import "./blocks/ready-start.scss"; +@import "./blocks/contact-us.scss"; +@import "./blocks/footer.scss"; +@import "./blocks/social-media.scss"; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c7978..8b18ebf 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,27 @@ #{$_property}: $_toValue; } } + +@mixin onDesktop { + @media (min-width: 1330px) { + @content; + } +} + +@mixin onMobile { + @media (max-width: 1280px) and (min-width: 700px) { + @content; + } +} + +@mixin onSmallScreen { + @media (max-width: 700px) and (min-width: 500px) { + @content; + } +} + +@mixin onSuperSmallScreen { + @media (max-width: 500px) { + @content; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006f..0221c41 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,4 @@ -$c-gray: #eee; +@import "_mixins.scss"; + +$color-pink: #fc0a7e; +$header-top-padding: 15px;