diff --git a/.bemlintrc.json b/.bemlintrc.json new file mode 100644 index 00000000..22a597e5 --- /dev/null +++ b/.bemlintrc.json @@ -0,0 +1,16 @@ +{ + "elementDivider": "__", + "modifierDivider": "--", + "ignore": [ + "node_modules", + "dist" + ], + "rules": { + "one-block": true, + "one-element": true, + "element-inside-parent-block": 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 a64ccfac..340cff5c 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 install - run: npm start & sleep 5 && 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 0f8d3cf7..549c139a 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,4 @@ node_modules # Generated files backstop_data dist +.cache diff --git a/README.md b/README.md index 1f753740..3e69e26f 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/yM 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/Digits/). + [DEMO LINK](https://grynkiv0x001.github.io/Digits/). 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 e330c949..5c6d7699 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1186,6 +1186,131 @@ } } }, + "@mate-academy/bemlint": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@mate-academy/bemlint/-/bemlint-0.1.1.tgz", + "integrity": "sha512-fhY7PfaUDZpe/DU1qJRW3AO5Tuua9HLm8ZIgVD7HijerZi8QIsC/R+NfcGPQfo9eVD4FDf4Jba0vTzSAO5ayJg==", + "dev": true, + "requires": { + "chalk": "^4.1.0", + "commander": "^7.1.0", + "cosmiconfig": "^7.0.0", + "parse5": "^6.0.1", + "table-layout": "^1.0.1" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "array-back": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/array-back/-/array-back-4.0.2.tgz", + "integrity": "sha512-NbdMezxqf94cnNfWLL7V/im0Ub+Anbb0IoZhvzie8+4HJ4nMQuzHuy49FkGYCJK2yAloZ3meiB6AVMClbrI1vg==", + "dev": true + }, + "chalk": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz", + "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "dev": true + }, + "cosmiconfig": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz", + "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==", + "dev": true, + "requires": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + } + }, + "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 + }, + "parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + } + }, + "parse5": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", + "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==", + "dev": true + }, + "path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "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" + } + }, + "table-layout": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/table-layout/-/table-layout-1.0.2.tgz", + "integrity": "sha512-qd/R7n5rQTRFi+Zf2sk5XVVd9UQl6ZkduPFC3S7WEGJAmetDTjY3qPN50eSKzwuzEyQKy5TN2TiZdkIjos2L6A==", + "dev": true, + "requires": { + "array-back": "^4.0.1", + "deep-extend": "~0.6.0", + "typical": "^5.2.0", + "wordwrapjs": "^4.0.0" + } + } + } + }, "@mate-academy/eslint-config": { "version": "0.0.12", "resolved": "https://registry.npmjs.org/@mate-academy/eslint-config/-/eslint-config-0.0.12.tgz", @@ -1206,13 +1331,25 @@ "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": "0.9.0", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-0.9.0.tgz", + "integrity": "sha512-3RUTNaNY5m+h1NSoiMpJVTZ/odDBAZEaIDPiiVkaJZlc+mvCTtNdGH/qUc/R5nauYEdCXALJQeXE94ZnwmGQog==", "dev": true, "requires": { + "@types/get-port": "^4.2.0", "commander": "^5.1.0", - "fs-extra": "^9.0.0" + "cross-env": "^7.0.3", + "fs-extra": "^9.1.0", + "get-port": "^5.1.1", + "open": "^7.4.2" + }, + "dependencies": { + "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": { @@ -1389,6 +1526,15 @@ "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==", "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/glob": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz", @@ -2774,6 +2920,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", @@ -4310,15 +4508,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": { @@ -5252,6 +5450,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", @@ -5556,6 +5760,12 @@ "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==", "dev": true }, + "json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "dev": true + }, "json-schema": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz", @@ -5590,13 +5800,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": { @@ -6741,6 +6951,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", @@ -10768,9 +10999,9 @@ } }, "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": { diff --git a/package.json b/package.json index b4878db6..b8a32c93 100644 --- a/package.json +++ b/package.json @@ -19,9 +19,10 @@ "license": "GPL-3.0", "devDependencies": { "@linthtml/linthtml": "^0.3.2", + "@mate-academy/bemlint": "^0.1.1", "@mate-academy/eslint-config": "*", "@mate-academy/linthtml-config": "0.0.1", - "@mate-academy/scripts": "^0.2.0", + "@mate-academy/scripts": "^0.9.0", "@mate-academy/stylelint-config": "0.0.9", "colors": "^1.3.3", "eslint": "^5.16.0", diff --git a/src/images/arrow-down.svg b/src/images/arrow-down.svg new file mode 100644 index 00000000..7b826796 --- /dev/null +++ b/src/images/arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/cancel.svg b/src/images/cancel.svg new file mode 100644 index 00000000..f5684e9e --- /dev/null +++ b/src/images/cancel.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/cover.png b/src/images/cover.png new file mode 100644 index 00000000..8c3f433f Binary files /dev/null and b/src/images/cover.png differ diff --git a/src/images/icon-1.svg b/src/images/icon-1.svg new file mode 100644 index 00000000..5c8314c0 --- /dev/null +++ b/src/images/icon-1.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/images/icon-2.svg b/src/images/icon-2.svg new file mode 100644 index 00000000..9e4adb78 --- /dev/null +++ b/src/images/icon-2.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icon-3.svg b/src/images/icon-3.svg new file mode 100644 index 00000000..113d83ad --- /dev/null +++ b/src/images/icon-3.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icon-dribbble.svg b/src/images/icon-dribbble.svg new file mode 100644 index 00000000..c535da20 --- /dev/null +++ b/src/images/icon-dribbble.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/images/icon-envato.svg b/src/images/icon-envato.svg new file mode 100644 index 00000000..dc204e2e --- /dev/null +++ b/src/images/icon-envato.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon-facebook.svg b/src/images/icon-facebook.svg new file mode 100644 index 00000000..4eed9444 --- /dev/null +++ b/src/images/icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon-instagram.svg b/src/images/icon-instagram.svg new file mode 100644 index 00000000..081274da --- /dev/null +++ b/src/images/icon-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon-twitter.svg b/src/images/icon-twitter.svg new file mode 100644 index 00000000..6b8f39e1 --- /dev/null +++ b/src/images/icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/letter.svg b/src/images/letter.svg new file mode 100644 index 00000000..690ffda5 --- /dev/null +++ b/src/images/letter.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/images/logo-1.svg b/src/images/logo-1.svg new file mode 100644 index 00000000..6c5dba72 --- /dev/null +++ b/src/images/logo-1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo-2.svg b/src/images/logo-2.svg new file mode 100644 index 00000000..21f0d83f --- /dev/null +++ b/src/images/logo-2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo-3.svg b/src/images/logo-3.svg new file mode 100644 index 00000000..cdb18fb7 --- /dev/null +++ b/src/images/logo-3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo-4.svg b/src/images/logo-4.svg new file mode 100644 index 00000000..0243a195 --- /dev/null +++ b/src/images/logo-4.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo-5.svg b/src/images/logo-5.svg new file mode 100644 index 00000000..9dced6c4 --- /dev/null +++ b/src/images/logo-5.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo-6.svg b/src/images/logo-6.svg new file mode 100644 index 00000000..c8e73ded --- /dev/null +++ b/src/images/logo-6.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo-7.svg b/src/images/logo-7.svg new file mode 100644 index 00000000..3f25070b --- /dev/null +++ b/src/images/logo-7.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 00000000..918ade33 --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/menu.svg b/src/images/menu.svg new file mode 100644 index 00000000..5781d617 --- /dev/null +++ b/src/images/menu.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/people.png b/src/images/people.png new file mode 100644 index 00000000..f208d2cc Binary files /dev/null and b/src/images/people.png differ diff --git a/src/images/user-1.png b/src/images/user-1.png new file mode 100644 index 00000000..29f7cf35 Binary files /dev/null and b/src/images/user-1.png differ diff --git a/src/images/user-2.png b/src/images/user-2.png new file mode 100644 index 00000000..238843f3 Binary files /dev/null and b/src/images/user-2.png differ diff --git a/src/images/user-3.png b/src/images/user-3.png new file mode 100644 index 00000000..c3630cb9 Binary files /dev/null and b/src/images/user-3.png differ diff --git a/src/images/websites.png b/src/images/websites.png new file mode 100644 index 00000000..e22bdafd Binary files /dev/null and b/src/images/websites.png differ diff --git a/src/index.html b/src/index.html index 5d357bd6..166de2d8 100644 --- a/src/index.html +++ b/src/index.html @@ -3,11 +3,473 @@ - Title + Digits -

Hello Mate Academy

- + +
+
+
+

+ Good design meets
+ great user experience +

+

+ For everyone, from beginners to experts +

+
+ Buy Digits + See the Features +
+
+
+ Cover image +
+
+
+

Trusted by forward-thinking software teams around the world

+
+ Toggle compamies list +
+
+
+ Netflix logo +
+
+ Drawkit logo +
+
+ Figma logo +
+
+ Cinemax logo +
+
+ Stripe logo +
+
+ Google logo +
+
+ Disney logo +
+
+ +
+
+

+ Whatever work you do,
+ we're able to help +

+
+
+ People that using our services +
+
+
    +
  • + Design and assets icon +
    +
    Design and Assets
    +

    + Make your brand stand out with pixel-perfect design crafted to perfection. +

    +
    +
    • +
  • + Easy content icon +
    +
    Easy Content
    +

    + Import your demos or build pages visually. Bonus: All images and illustrations included! +

    +
    +
    • +
  • + Fast and reliable +
    +
    Fast and Reliable
    +

    + No heavy-weight plugins. No builders. No unneccesary file loading. Pure WordPress. +

    +
    +
    • +
+
+
+
+ ↑ +
+ +
+
+

Simplicity meets innovative design

+

+ It's really easy to start using Digits.
+ Install the theme, choose a demo and
+ start designing the future of your business! +

+ Buy Digits +
+ Examples of websites developed +
+
+
+

What others are saying

+
+
+

+ Completely beautiful website and + amazing support! This is my second + website from this author and I love + both of the sites so much and she + has helped me so well when I + needed it! +

+
+ Happy user avatar +
Happy User
+

tempy.club

+
+
+
+

+ Really easy to use and customize. + easy to understand. Darinka helped + me with my site! She answers very + quickly, a good service! Thank you + very much! +

+
+ Happy user avatar +
Happy User
+

tempy.club

+
+
+
+

+ Really pleasing to look at! + Documentation (including + installation instructions) are clear + and that is coming from a relatively + new WordPress user. +

+
+ Happy user avatar +
Happy User
+

tempy.club

+
+
+
+
+
+

+ Ready to launch
+ your next website? +

+
+ + Letter sending icon + Get in touch now + +

+ Or, take a peek inside our + + design studio + +

+
+
+
+ diff --git a/src/scripts/logosToggler.js b/src/scripts/logosToggler.js new file mode 100644 index 00000000..33064243 --- /dev/null +++ b/src/scripts/logosToggler.js @@ -0,0 +1,14 @@ +'use strict'; + +const toggler = document.querySelector('.logos__toggler'); +const logos = document.querySelector('.logos__list'); + +toggler.addEventListener('click', function(event) { + if (logos.style.display === 'none') { + toggler.style.transform = 'rotateX(180deg)'; + logos.style.display = 'flex'; + } else { + toggler.style.transform = 'rotateX(0)'; + logos.style.display = 'none'; + } +}); diff --git a/src/scripts/menuToggler.js b/src/scripts/menuToggler.js new file mode 100644 index 00000000..783fbeac --- /dev/null +++ b/src/scripts/menuToggler.js @@ -0,0 +1,18 @@ +'use strict'; + +const toggler = document.querySelector('.nav__toggler'); +const togglerStatus = document.querySelector('.nav__toggler--menu'); +const menu = document.querySelector('.nav__list'); +const contact = document.querySelector('.nav__contacts-phone'); + +toggler.addEventListener('click', function(event) { + if (menu.style.display === 'flex') { + togglerStatus.className = 'nav__toggler nav__toggler--menu'; + menu.style.display = 'none'; + contact.style.display = 'none'; + } else { + togglerStatus.className = 'nav__toggler nav__toggler--cancel'; + menu.style.display = 'flex'; + contact.style.display = 'block'; + } +}); diff --git a/src/scripts/scrollUp.js b/src/scripts/scrollUp.js new file mode 100644 index 00000000..d4906672 --- /dev/null +++ b/src/scripts/scrollUp.js @@ -0,0 +1,15 @@ +'use strict'; + +const aboveButton = document.querySelector('.above'); + +window.onscroll = function() { + scrollFunction(); +}; + +function scrollFunction() { + if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) { + aboveButton.style.display = 'block'; + } else { + aboveButton.style.display = 'none'; + } +} diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 2067b3fc..51c5ac33 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,13 @@ @font-face { - font-family: "Roboto"; - src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); - font-weight: normal; + font-family: "Halyard Display"; + src: url("../fonts/Halyard/Halyard\ Display\ Medium.ttf"); font-style: normal; + font-weight: 500; +} + +@font-face { + font-family: "Halyard Text"; + src: url("../fonts/Halyard/Halyard\ Text\ Regular.ttf"); + font-style: normal; + font-weight: 400; } diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss new file mode 100644 index 00000000..7879123a --- /dev/null +++ b/src/styles/_reset.scss @@ -0,0 +1,6 @@ +body, +h5, +p { + margin: 0; + padding: 0; +} diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 00000000..d2b49888 --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,48 @@ +.about { + padding-top: 100px; + height: 932px; + + &__heading { + @include heading; + } + + &__content { + display: flex; + align-items: center; + justify-content: space-evenly; + + top: 35%; + + &-image { + transform: translateY(-150px); + } + } + + @media (max-width: $tablet-screen) { + padding-top: 0; + + &__content { + padding-top: 80px; + + &-people { + display: none; + } + } + } + + @media (max-width: 700px) { + height: 780px; + + &__heading { + margin: 0; + padding-top: 20px; + font-size: 40px; + } + } + + @media (max-width: 500px) { + &__content { + padding-top: 0; + } + } +} diff --git a/src/styles/blocks/above.scss b/src/styles/blocks/above.scss new file mode 100644 index 00000000..c3b6129e --- /dev/null +++ b/src/styles/blocks/above.scss @@ -0,0 +1,25 @@ +.above { + display: none; + + &__button { + @include colored-button; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + padding: 12px 20px; + position: fixed; + bottom: 20px; + right: 30px; + z-index: 99; + font-size: 24px; + transition: transform 0.1s linear; + text-align: center; + height: 30px; + width: 15px; + + &:hover { + transform: scale(1.05); + } + } +} diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 00000000..8f2ee8a4 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,60 @@ +.card { + border: 1px solid $color-border; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: column; + height: 390px; + width: 290px; + margin: 15px; + padding: 20px 40px; + transition: transform 0.3s linear; + + &__text { + @include description; + } + + &__user { + text-align: center; + + &-image { + padding-bottom: 20px; + transform: scale(1.1); + } + + &-name { + @include description; + font-size: 22px; + padding: 0; + } + + &-company { + color: $color-content; + font-family: "Halyard Text", sans-serif; + font-size: 18px; + } + } + + &:hover { + box-shadow: rgba(60, 64, 67, 0.3) 0 1px 2px 0, + rgba(60, 64, 67, 0.15) 0 2px 6px 2px; + transform: scale(1.1); + } + + @media (max-width: 900px) { + &:hover { + box-shadow: none; + transform: none; + } + } + + @media (max-width: 500px) { + width: 250px; + + &:hover { + box-shadow: none; + transform: none; + } + } +} diff --git a/src/styles/blocks/column.scss b/src/styles/blocks/column.scss new file mode 100644 index 00000000..96bfba56 --- /dev/null +++ b/src/styles/blocks/column.scss @@ -0,0 +1,41 @@ +.column { + + &__info { + &-logo { + padding-top: 25px; + } + + &-text { + @include description; + width: 310px; + } + } + + &__title { + @include heading; + font-size: 22px; + text-align: left; + } + + &__list { + padding-left: 0; + + &-item { + list-style: none; + padding-bottom: 10px; + } + + &-link { + @include description; + text-decoration: none; + padding-top: 0; + } + } + + @media (max-width: 650px) { + + &__title { + text-align: center; + } + } +} diff --git a/src/styles/blocks/columns.scss b/src/styles/blocks/columns.scss new file mode 100644 index 00000000..fb169162 --- /dev/null +++ b/src/styles/blocks/columns.scss @@ -0,0 +1,42 @@ +.columns { + display: grid; + grid-template-columns: repeat(4, 1fr); + justify-items: center; + + margin: 0 auto; + padding: 0 50px; + + max-width: $notebook-screen; + + &__resources { + justify-self: end; + } + + @media (max-width: 900px) { + grid-template-columns: repeat(2, 1fr); + + &__pages { + display: none; + } + + &__demos { + display: none; + } + } + + @media (max-width: 650px) { + display: flex; + flex-direction: column; + align-items: center; + + &__info { + display: none; + } + + &__resources { + justify-self: start; + align-self: center; + text-align: center; + } + } +} diff --git a/src/styles/blocks/cta.scss b/src/styles/blocks/cta.scss new file mode 100644 index 00000000..797b9f78 --- /dev/null +++ b/src/styles/blocks/cta.scss @@ -0,0 +1,82 @@ +.cta { + background-color: $color-button; + display: flex; + align-items: center; + justify-content: space-around; + margin-top: 100px; + padding: 30px; + + &__heading { + @include heading; + color: #fff; + text-align: left; + } + + &__links { + display: flex; + flex-direction: column; + align-items: flex-end; + + &-button { + @include white-button; + display: flex; + align-items: center; + border: none; + border-radius: 100px; + color: $color-content; + cursor: pointer; + font-family: "Halyard Display", sans-serif; + font-size: 18px; + padding: 10px 20px; + padding-right: 40px; + text-decoration: none; + } + + &-icon { + padding-right: 15px; + transition: transform 0.2s linear; + } + + &-button:hover &-icon { + transform: scale(1.1); + } + + &-extra { + color: #fff; + font-family: "Halyard Text", sans-serif; + font-size: 16px; + padding-top: 15px; + } + + &-link { + color: #fed385; + text-decoration: none; + } + } + + @media (max-width: 800px) { + flex-direction: column; + align-items: center; + + &__heading { + text-align: center; + } + + &__links { + display: flex; + flex-direction: column; + align-items: center; + } + } + + @media (max-width: 700px) { + &__heading { + font-size: 40px; + } + } + + @media (max-width: 500px) { + margin-top: 0; + padding-top: 0; + } +} diff --git a/src/styles/blocks/demos.scss b/src/styles/blocks/demos.scss new file mode 100644 index 00000000..20c4d583 --- /dev/null +++ b/src/styles/blocks/demos.scss @@ -0,0 +1,35 @@ +.demos { + display: none; + background-color: #fff; + box-shadow: #0003 0 18px 50px -10px; + position: absolute; + right: -20px; + z-index: 1; + + &__list { + cursor: pointer; + padding-left: 0; + text-align: center; + + &-item { + list-style: none; + transition: background-color 0.2s linear; + + &:hover { + background-color: $color-button; + } + } + + &-link { + @include description; + cursor: pointer; + font-size: 16px; + padding: 0 20px; + text-decoration: none; + } + + &-item:hover &-link { + color: #fff; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 00000000..7d208304 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,68 @@ +.footer { + box-sizing: border-box; + margin-top: 130px; + padding: 20px; + + width: 100%; + + &__copyright { + display: grid; + grid-template-columns: repeat(4, 1fr); + align-items: center; + margin: 0 auto; + padding: 50px; + + max-width: $notebook-screen; + + &-text { + @include description; + font-size: 16px; + padding-top: 0; + } + + &-links { + grid-column: 4 / 5; + justify-self: end; + } + } + + @media (max-width: $tablet-screen) { + &__copyright { + display: flex; + flex-direction: column-reverse; + justify-content: center; + align-items: center; + + &-text { + padding-top: 30px; + } + } + } + + @media (max-width: 900px) { + margin-top: 30px; + } + + @media (max-width: 650px) { + margin-top: 30px; + padding-top: 0; + + &__copyright { + align-items: start; + padding: 0; + + &-text { + align-self: center; + } + + &-links { + display: none; + } + } + } +} + +.container { + margin: 0 auto; + max-width: $large-screen; +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 00000000..171de273 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,3 @@ +.header { + height: 80px; +} diff --git a/src/styles/blocks/hero.scss b/src/styles/blocks/hero.scss new file mode 100644 index 00000000..f47e2d20 --- /dev/null +++ b/src/styles/blocks/hero.scss @@ -0,0 +1,83 @@ +.hero { + display: flex; + flex-direction: column; + align-items: center; + + height: 870px; + + position: relative; + + &__gradient { + background: linear-gradient(180deg, rgba(242, 249, 255, 0.12), #f2f9ff); + height: 100%; + width: 100%; + } + + &__heading { + @include heading; + } + + &__description { + color: $color-content; + font-family: "Halyard Text", sans-serif; + font-size: 18px; + line-height: 0; + text-align: center; + overflow-wrap: break-word; + } + + &__buttons { + display: flex; + justify-content: center; + padding-top: 46px; + + &-buy { + @include colored-button; + } + + &-features { + margin-left: 22px; + @include white-button; + } + } + + &__graphic { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 40%; + } + + @media (max-width: $tablet-screen) { + + &__gradient { + height: 750px; + } + + &__graphic { + top: 35%; + transform: scale(0.8); + } + } + + @media (min-width: $mobile-screen) and (max-width: 800px) { + height: max-content; + + &__gradient { + background: #fff; + height: max-content; + padding-bottom: 20px; + } + + &__graphic { + display: none; + } + } + + @media (max-width: 700px) { + &__heading { + font-size: 40px; + } + } +} diff --git a/src/styles/blocks/icons-list.scss b/src/styles/blocks/icons-list.scss new file mode 100644 index 00000000..7d65b6a8 --- /dev/null +++ b/src/styles/blocks/icons-list.scss @@ -0,0 +1,18 @@ +.icons-list { + display: flex; + padding-left: 0; + + &__item { + list-style: none; + padding-right: 20px; + } + + &__item:last-child { + padding-right: 0; + } + + &__link { + @include description; + padding-top: 0; + } +} diff --git a/src/styles/blocks/logos.scss b/src/styles/blocks/logos.scss new file mode 100644 index 00000000..f3e7617d --- /dev/null +++ b/src/styles/blocks/logos.scss @@ -0,0 +1,91 @@ +.logos { + display: flex; + flex-direction: column; + align-items: center; + + padding-top: 80px; + + &__description { + color: $color-content; + font-family: "Halyard Text", sans-serif; + opacity: 0.5; + padding-top: 30px; + text-align: center; + } + + &__toggler { + cursor: pointer; + display: none; + padding: 20px 40px; + width: 80%; + text-align: center; + + &-image { + height: 20px; + width: 20px; + } + } + + &__list { + display: flex; + justify-content: space-around; + + padding: 30px; + } + + &__list-item { + padding-right: 72px; + text-align: center; + transition: transform 0.2s linear; + } + + &__list-item:hover { + cursor: pointer; + transform: scale(1.1); + } + + &__list-item:last-child { + padding-right: 0; + } + + @media (max-width: $notebook-screen) { + &__list { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 40px; + } + + &__list-item { + padding-right: 0; + } + } + + @media (max-width: $tablet-screen) { + padding-top: 0; + + &__description { + padding-top: 0; + } + + &__list { + grid-template-columns: 1fr 1fr; + justify-content: center; + } + } + + @media (max-width: 700px) { + &__description { + padding-top: 20px; + } + + &__list { + display: none; + flex-direction: column; + align-items: center; + } + + &__toggler { + display: block; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 00000000..f5480dc0 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,136 @@ +.nav { + display: flex; + align-items: center; + justify-content: space-around; + line-height: 40px; + + &__menu { + display: flex; + align-items: center; + } + + &__logo { + line-height: 0; + } + + &__list { + display: flex; + list-style: none; + } + + &__item:nth-child(3) { + position: relative; + } + + &__item:nth-child(3):hover .demos { + display: block; + } + + &__item:nth-child(3)::after { + content: ""; + cursor: pointer; + background-image: url("../images/arrow-down.svg"); + background-size: cover; + right: -20px; + top: 15px; + height: 10px; + width: 10px; + position: absolute; + } + + &__item:nth-child(4) { + margin-left: 20px; + } + + &__link { + color: $color-accent-blue; + font-family: $font-nav; + font-size: 16px; + margin-left: 50px; + text-decoration: none; + } + + &__contacts-phone { + color: $color-accent-blue; + font-family: $font-nav; + font-size: 16px; + padding-right: 34px; + text-decoration: none; + } + + &__contacts-button { + @include colored-button; + } + + &__toggler { + display: none; + padding-right: 0; + margin-right: 25px; + + &--menu { + background-image: url("../images/menu.svg"); + color: #000; + height: 30px; + } + + &--cancel { + background-image: url("../images/cancel.svg"); + color: #000; + height: 30px; + } + } + + @media (max-width: $tablet-screen) { + justify-content: space-between; + padding-top: 10px; + + &__list { + background-color: #fff; + display: none; + flex-direction: column; + align-items: center; + padding-left: 0; + position: absolute; + top: 30px; + width: 100%; + z-index: 1; + } + + &__logo { + padding-left: 25px; + } + + &__link { + margin-left: 0; + } + + &__item:nth-child(4) { + margin-left: 0; + } + + &__contacts-phone { + display: none; + position: absolute; + padding-left: 30px; + right: 50%; + top: 5px; + transform: translateX(50%); + } + + &__contacts-button { + display: none; + } + + &__toggler { + display: block; + line-height: 0; + width: 30px; + } + } + + @media (min-width: $tablet-screen) and (max-width: $notebook-screen) { + &__contacts-phone { + display: none; + } + } +} diff --git a/src/styles/blocks/portfolio.scss b/src/styles/blocks/portfolio.scss new file mode 100644 index 00000000..469ebd88 --- /dev/null +++ b/src/styles/blocks/portfolio.scss @@ -0,0 +1,59 @@ +.portfolio { + background-color: #fff9ea; + margin-top: 180px; + padding-top: 100px; + + display: flex; + flex-direction: column; + align-items: center; + box-shadow: rgba(0, 0, 0, 0.1) 0 10px 50px; + + &__heading { + @include heading; + margin: 0; + padding-bottom: 20px; + } + + &__text { + @include description; + padding-bottom: 40px; + text-align: center; + } + + &__button { + @include colored-button; + } + + &__mask { + align-self: stretch; + padding-top: 100px; + + &-image { + width: 100%; + } + } + + @media (max-width: $tablet-screen) { + margin-top: 0; + padding-top: 0; + } + + @media (max-width: 900px) { + background-color: #fff; + box-shadow: none; + margin-top: 0; + padding-bottom: 20px; + padding-top: 0; + + &__mask { + display: none; + } + } + + @media (max-width: 700px) { + &__heading { + font-size: 40px; + padding: 0 10px; + } + } +} diff --git a/src/styles/blocks/privacy-list.scss b/src/styles/blocks/privacy-list.scss new file mode 100644 index 00000000..f20fe022 --- /dev/null +++ b/src/styles/blocks/privacy-list.scss @@ -0,0 +1,34 @@ +.privacy-list { + display: flex; + align-items: center; + + padding-left: 0; + + &__item { + list-style: none; + padding-right: 20px; + } + + &__item:last-child { + padding-right: 0; + } + + &__link { + @include description; + font-size: 16px; + text-decoration: none; + } + + @media (max-width : 900px) { + padding-left: 0; + } + + @media (max-width: 500px) { + display: none; + + &__item { + padding: 0; + padding-bottom: 10px; + } + } +} diff --git a/src/styles/blocks/reviews.scss b/src/styles/blocks/reviews.scss new file mode 100644 index 00000000..92fae671 --- /dev/null +++ b/src/styles/blocks/reviews.scss @@ -0,0 +1,40 @@ +.reviews { + display: flex; + flex-direction: column; + align-items: center; + padding-top: 110px; + + &__heading { + @include heading; + text-align: center; + } + + &__cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + padding: 20px; + } + + @media (max-width: 900px) { + padding-top: 0; + } + + @media (max-width: 700px) { + &__heading { + font-size: 40px; + } + } + + @media (max-width: 500px) { + padding-top: 0; + + &__heading { + font-size: 40px; + } + + &__cards { + padding: 0; + } + } +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 00000000..3844da23 --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,51 @@ +.services { + display: flex; + transform: translateY(-105px); + + &__list { + display: block; + + &-item { + border-bottom: 1px solid $color-border; + display: flex; + align-items: start; + list-style: none; + padding-bottom: 30px; + padding-top: 40px; + } + + &-item:last-child { + border: none; + padding-bottom: 0; + } + + &-icon { + padding-top: 10px; + transition: transform 0.2s linear; + } + + &-item:hover &-icon { + transform: scale(1.1); + } + + &-description { + padding-left: 40px; + } + + &-heading { + color: $color-accent-blue; + font-family: "Halyard Display", sans-serif; + font-size: 22px; + font-weight: normal; + } + + &-text { + @include description; + width: 300px; + } + } + + @media (max-width: 500px) { + transform: scale(0.8) translateY(0); + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e4..a1ffe213 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,36 @@ -@import "utils"; -@import "fonts"; -@import "typography"; +@import "./utils"; +@import "./fonts"; +@import "./typography"; +@import "./reset"; + +@import "./blocks/header.scss"; +@import "./blocks/nav.scss"; +@import "./blocks/demos.scss"; +@import "./blocks/above.scss"; + +@import "./blocks/hero.scss"; +@import "./blocks/logos.scss"; + +@import "./blocks/about.scss"; +@import "./blocks/services.scss"; + +@import "./blocks/portfolio.scss"; + +@import "./blocks/reviews.scss"; +@import "./blocks/card.scss"; + +@import "./blocks/cta.scss"; + +@import "./blocks/footer.scss"; +@import "./blocks/columns.scss"; +@import "./blocks/column.scss"; +@import "./blocks/icons-list.scss"; +@import "./blocks/privacy-list.scss"; + +html { + scroll-behavior: smooth; +} body { - background: $c-gray; + background: #fff; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780..a95ffc52 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,39 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } +@mixin colored-button { + background-color: $color-button; + border: none; + border-radius: 100px; + color: #fff; + cursor: pointer; + font-family: $font-nav; + font-size: 16px; + padding: 10px 16px; + text-decoration: none; +} + +@mixin white-button { + background-color: #fff; + border: none; + border-radius: 100px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + color: $color-content; + cursor: pointer; + font-family: $font-nav; + font-size: 16px; + padding: 10px 16px; + text-decoration: none; +} + +@mixin heading { + color: $color-accent-blue; + font-family: "Halyard Display", sans-serif; + font-size: 56px; + line-height: 59px; + text-align: center; +} + +@mixin description { + color: $color-content; + font-family: "Halyard Text", sans-serif; + font-size: 18px; + padding-top: 20px; } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ff..b2b06df4 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,13 @@ -$c-gray: #eee; +$color-accent-blue: #1e266d; +$color-button: #3751ff; +$color-content: #455880; +$color-border: #4558802f; + +$font-nav: "Halyard Text", sans-serif; + +$large-screen: 2560px; +$fullhd-sreen: 1920px; +$design-screen: 1600px; +$notebook-screen: 1280px; +$tablet-screen: 1024px; +$mobile-screen: 320px;