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..6f89be48 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://Oleksii25.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/fonts/Halyard/Halyard Display Black.ttf b/src/fonts/Halyard/Halyard_Display_Black.ttf similarity index 100% rename from src/fonts/Halyard/Halyard Display Black.ttf rename to src/fonts/Halyard/Halyard_Display_Black.ttf diff --git a/src/fonts/Halyard/Halyard Display Bold.ttf b/src/fonts/Halyard/Halyard_Display_Bold.ttf similarity index 100% rename from src/fonts/Halyard/Halyard Display Bold.ttf rename to src/fonts/Halyard/Halyard_Display_Bold.ttf diff --git a/src/images/Vector 1.png b/src/images/Vector 1.png new file mode 100644 index 00000000..e916b705 Binary files /dev/null and b/src/images/Vector 1.png differ diff --git a/src/images/block-feedback/image1.png b/src/images/block-feedback/image1.png new file mode 100644 index 00000000..438911c7 Binary files /dev/null and b/src/images/block-feedback/image1.png differ diff --git a/src/images/block-feedback/image2.png b/src/images/block-feedback/image2.png new file mode 100644 index 00000000..c66fd62e Binary files /dev/null and b/src/images/block-feedback/image2.png differ diff --git a/src/images/block-feedback/image3.png b/src/images/block-feedback/image3.png new file mode 100644 index 00000000..0919b276 Binary files /dev/null and b/src/images/block-feedback/image3.png differ diff --git a/src/images/block-footer/BasBall.svg b/src/images/block-footer/BasBall.svg new file mode 100644 index 00000000..8ab3b05b --- /dev/null +++ b/src/images/block-footer/BasBall.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/block-footer/Egg.svg b/src/images/block-footer/Egg.svg new file mode 100644 index 00000000..06701f65 --- /dev/null +++ b/src/images/block-footer/Egg.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/block-footer/Twitter.svg b/src/images/block-footer/Twitter.svg new file mode 100644 index 00000000..fdd57973 --- /dev/null +++ b/src/images/block-footer/Twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/block-footer/fb.svg b/src/images/block-footer/fb.svg new file mode 100644 index 00000000..69a4d990 --- /dev/null +++ b/src/images/block-footer/fb.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/block-footer/insta.svg b/src/images/block-footer/insta.svg new file mode 100644 index 00000000..727c9605 --- /dev/null +++ b/src/images/block-footer/insta.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/block-good_design/3angle.svg b/src/images/block-good_design/3angle.svg new file mode 100644 index 00000000..221da4a1 --- /dev/null +++ b/src/images/block-good_design/3angle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/block-good_design/Ellipse pink.svg b/src/images/block-good_design/Ellipse pink.svg new file mode 100644 index 00000000..8eddc5b5 --- /dev/null +++ b/src/images/block-good_design/Ellipse pink.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/block-good_design/Ellipse small.svg b/src/images/block-good_design/Ellipse small.svg new file mode 100644 index 00000000..f2612f63 --- /dev/null +++ b/src/images/block-good_design/Ellipse small.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/block-good_design/Rectangle.svg b/src/images/block-good_design/Rectangle.svg new file mode 100644 index 00000000..610e7e28 --- /dev/null +++ b/src/images/block-good_design/Rectangle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/block-good_design/avatar.svg b/src/images/block-good_design/avatar.svg new file mode 100644 index 00000000..43aecf90 --- /dev/null +++ b/src/images/block-good_design/avatar.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/block-good_design/browser.svg b/src/images/block-good_design/browser.svg new file mode 100644 index 00000000..67d9533f --- /dev/null +++ b/src/images/block-good_design/browser.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/block-good_design/gd-logos/Netflix.svg b/src/images/block-good_design/gd-logos/Netflix.svg new file mode 100644 index 00000000..6c5dba72 --- /dev/null +++ b/src/images/block-good_design/gd-logos/Netflix.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/block-good_design/gd-logos/cinemax.svg b/src/images/block-good_design/gd-logos/cinemax.svg new file mode 100644 index 00000000..0243a195 --- /dev/null +++ b/src/images/block-good_design/gd-logos/cinemax.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/block-good_design/gd-logos/disney.svg b/src/images/block-good_design/gd-logos/disney.svg new file mode 100644 index 00000000..3f25070b --- /dev/null +++ b/src/images/block-good_design/gd-logos/disney.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/block-good_design/gd-logos/drawkit.svg b/src/images/block-good_design/gd-logos/drawkit.svg new file mode 100644 index 00000000..21f0d83f --- /dev/null +++ b/src/images/block-good_design/gd-logos/drawkit.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/block-good_design/gd-logos/figma.svg b/src/images/block-good_design/gd-logos/figma.svg new file mode 100644 index 00000000..cdb18fb7 --- /dev/null +++ b/src/images/block-good_design/gd-logos/figma.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/block-good_design/gd-logos/google.svg b/src/images/block-good_design/gd-logos/google.svg new file mode 100644 index 00000000..c8e73ded --- /dev/null +++ b/src/images/block-good_design/gd-logos/google.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/block-good_design/gd-logos/stripe.svg b/src/images/block-good_design/gd-logos/stripe.svg new file mode 100644 index 00000000..9dced6c4 --- /dev/null +++ b/src/images/block-good_design/gd-logos/stripe.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/block-good_design/girl.svg b/src/images/block-good_design/girl.svg new file mode 100644 index 00000000..5932cd1f --- /dev/null +++ b/src/images/block-good_design/girl.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/images/block-good_design/ui.svg b/src/images/block-good_design/ui.svg new file mode 100644 index 00000000..1fbe9166 --- /dev/null +++ b/src/images/block-good_design/ui.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/images/block-help/bman.png b/src/images/block-help/bman.png new file mode 100644 index 00000000..0f9a2c6e Binary files /dev/null and b/src/images/block-help/bman.png differ diff --git a/src/images/block-help/girl.png b/src/images/block-help/girl.png new file mode 100644 index 00000000..4f814a14 Binary files /dev/null and b/src/images/block-help/girl.png differ diff --git a/src/images/block-help/help-icons/Icon1.svg b/src/images/block-help/help-icons/Icon1.svg new file mode 100644 index 00000000..5c8314c0 --- /dev/null +++ b/src/images/block-help/help-icons/Icon1.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/images/block-help/help-icons/Icon2.svg b/src/images/block-help/help-icons/Icon2.svg new file mode 100644 index 00000000..9e4adb78 --- /dev/null +++ b/src/images/block-help/help-icons/Icon2.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/block-help/help-icons/Icon3.svg b/src/images/block-help/help-icons/Icon3.svg new file mode 100644 index 00000000..113d83ad --- /dev/null +++ b/src/images/block-help/help-icons/Icon3.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/block-help/pink3angle.svg b/src/images/block-help/pink3angle.svg new file mode 100644 index 00000000..b0249831 --- /dev/null +++ b/src/images/block-help/pink3angle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/block-help/wman.png b/src/images/block-help/wman.png new file mode 100644 index 00000000..42f621a7 Binary files /dev/null and b/src/images/block-help/wman.png differ diff --git a/src/images/block-launch-website/send.svg b/src/images/block-launch-website/send.svg new file mode 100644 index 00000000..49ec839a --- /dev/null +++ b/src/images/block-launch-website/send.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/images/block-navigation/arrow-down.svg b/src/images/block-navigation/arrow-down.svg new file mode 100644 index 00000000..7b826796 --- /dev/null +++ b/src/images/block-navigation/arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/block-navigation/menu-X.svg b/src/images/block-navigation/menu-X.svg new file mode 100644 index 00000000..615bcf68 --- /dev/null +++ b/src/images/block-navigation/menu-X.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/block-navigation/menu.svg b/src/images/block-navigation/menu.svg new file mode 100644 index 00000000..dff8d218 --- /dev/null +++ b/src/images/block-navigation/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/block-simplicity/browser1.png b/src/images/block-simplicity/browser1.png new file mode 100644 index 00000000..3c23ea60 Binary files /dev/null and b/src/images/block-simplicity/browser1.png differ diff --git a/src/images/block-simplicity/browser10.png b/src/images/block-simplicity/browser10.png new file mode 100644 index 00000000..6d8f290a Binary files /dev/null and b/src/images/block-simplicity/browser10.png differ diff --git a/src/images/block-simplicity/browser11.png b/src/images/block-simplicity/browser11.png new file mode 100644 index 00000000..2ce063f1 Binary files /dev/null and b/src/images/block-simplicity/browser11.png differ diff --git a/src/images/block-simplicity/browser2.png b/src/images/block-simplicity/browser2.png new file mode 100644 index 00000000..30a4fcfe Binary files /dev/null and b/src/images/block-simplicity/browser2.png differ diff --git a/src/images/block-simplicity/browser3.png b/src/images/block-simplicity/browser3.png new file mode 100644 index 00000000..bdef3fbf Binary files /dev/null and b/src/images/block-simplicity/browser3.png differ diff --git a/src/images/block-simplicity/browser4.png b/src/images/block-simplicity/browser4.png new file mode 100644 index 00000000..655a4000 Binary files /dev/null and b/src/images/block-simplicity/browser4.png differ diff --git a/src/images/block-simplicity/browser44.jpg b/src/images/block-simplicity/browser44.jpg new file mode 100644 index 00000000..822e4d04 Binary files /dev/null and b/src/images/block-simplicity/browser44.jpg differ diff --git a/src/images/block-simplicity/browser5.png b/src/images/block-simplicity/browser5.png new file mode 100644 index 00000000..16e8f4a6 Binary files /dev/null and b/src/images/block-simplicity/browser5.png differ diff --git a/src/images/block-simplicity/browser6.png b/src/images/block-simplicity/browser6.png new file mode 100644 index 00000000..80fcf563 Binary files /dev/null and b/src/images/block-simplicity/browser6.png differ diff --git a/src/images/block-simplicity/browser7.png b/src/images/block-simplicity/browser7.png new file mode 100644 index 00000000..59bfce2c Binary files /dev/null and b/src/images/block-simplicity/browser7.png differ diff --git a/src/images/block-simplicity/browser8.png b/src/images/block-simplicity/browser8.png new file mode 100644 index 00000000..7e8333a7 Binary files /dev/null and b/src/images/block-simplicity/browser8.png differ diff --git a/src/images/block-simplicity/browser9.png b/src/images/block-simplicity/browser9.png new file mode 100644 index 00000000..9cb08648 Binary files /dev/null and b/src/images/block-simplicity/browser9.png differ diff --git a/src/index.html b/src/index.html index 5d357bd6..ca1c4844 100644 --- a/src/index.html +++ b/src/index.html @@ -3,11 +3,467 @@ - Title + Digits + -

Hello Mate Academy

- + +
+
+

+ Good design meets great user experience +

+

+ For everyone, from beginners to experts +

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ Trusted by forward-thinking software teams around the world +
+
+ netflix + DrawKit + Figma + cinemax + stripe + google + disney +
+
+
+

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

+
+
+
+ a girl +
+
+ a man +
+
+ a man +
+
+
+
+ +

+ Design and Assets +

+

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

+
+
+ +

+ Easy Content +

+

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

+
+
+ +

+ 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 + +
+
+
+ site example + site example + site example +
+
+ site example + site example +
+
+ site example + site example +
+
+ site example + site example +
+
+ site example + site example +
+
+
+ +
+

+ Ready to launch your next website? +

+
+ + Get in touch now + +

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

+
+
+
+ + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7..9e9594ce 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,8 @@ 'use strict'; + +const list = document.querySelector('.menu-maxwidth1050__list'); +const checkbox = document.querySelector('.menu-maxwidth1050__toggler'); + +list.addEventListener('click', () => { + checkbox.checked = false; +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 2067b3fc..00000000 --- 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 1837eb46..00000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 1366a06a..00000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "utils/vars"; -@import "utils/mixins"; -@import "utils/extends"; diff --git a/src/styles/blocks/block-digits-navigation.scss b/src/styles/blocks/block-digits-navigation.scss new file mode 100644 index 00000000..ece3537b --- /dev/null +++ b/src/styles/blocks/block-digits-navigation.scss @@ -0,0 +1,160 @@ +.digits-navigation { + display: flex; + align-items: center; + min-height: 5em; + background-color: #fff; + color: $H-color; + justify-content: space-evenly; + padding: 0 20px; + + &__pages { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__logo { + display: flex; + position: relative; + font-weight: 600; + font-size: 2em; + margin-right: 5.13em; + padding-bottom: 7px; + + &::after, + &::before { + position: absolute; + display: block; + background-color: #ff2e6a; + width: 0.16em; + height: 0.16em; + border-radius: 50%; + content: ""; + right: -12%; + } + &::after { + top: 37%; + } + &::before { + top: 57%; + } + } + + &__headline { + position: relative; + + &::before { + content: ""; + position: absolute; + background: #fff; + width: 0.97em; + height: 0.2em; + left: 25%; + top: 28%; + } + } + + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + font-weight: normal; + font-family: $ff-h-text; + } + + &__item { + display: flex; + margin-right: 2.5em; + &:nth-child(3) { + position: relative; + } + + &:nth-child(3)::after { + content: ""; + background-image: url(/images/block-navigation/arrow-down.svg); + background-size: cover; + position: absolute; + right: -0.7rem; + bottom: 0.35rem; + width: 10px; + height: 10px; + cursor: pointer; + } + } + &__link { + color: inherit; + text-decoration: none; + + &:hover { + color: yellowgreen; + } + } + &__contacts { + display: flex; + height: 100%; + align-items: center; + } + &__telephone-num { + margin-right: 1em; + color: $H-color; + font-family: $ff-h-text; + font-weight: normal; + + &:hover { + color: yellowgreen; + } + } + &__button { + text-decoration: none; + width: 7.06em; + height: 2.5em; + background-color: $ready-and-button-bg; + border-radius: 100px; + text-align: center; + line-height: 2.5em; + color: #fff; + + &:hover { + display: block; + box-shadow: 0 0 15px rgba(17, 17, 255, 1); + } + } + + @media (min-width:2000px) { + & { + font-size: 22px; + } + + &__logo { + margin-bottom: 0; + } + + &__item:nth-child(3)::after { + top: 0.6rem; + right: -1.3rem; + width: 15px; + height: 15px; + } + } + + @media (max-width:1050px) { + &__list { + display: none; + } + + &__logo { + margin-right: 30px; + } + + &__pages { + display: flex; + width: 90%; + justify-content: space-between; + } + + &__contacts { + display: none; + } + } +} diff --git a/src/styles/blocks/block-menu1050width.scss b/src/styles/blocks/block-menu1050width.scss new file mode 100644 index 00000000..51213ae3 --- /dev/null +++ b/src/styles/blocks/block-menu1050width.scss @@ -0,0 +1,122 @@ +.menu-maxwidth1050 { + display: none; + position: relative; + + &__label { + display: inline-block; + cursor: pointer; + background: url(/images/block-navigation/menu.svg); + width: 20px; + height: 20px; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + position: relative; + z-index: 1; + } + + &__toggler { + opacity: 0; + } + + &__list { + font-family: $ff-h-text; + font-weight: normal; + line-height: 200%; + + padding: 50px 150px 20px 20px; + width: 350px; + border-radius: 15px; + + position: absolute; + right: -55px; + top: -15px; + + background: rgba(248, 174, 195, 1); + + + transition: opacity 1s, z-index 3s; + + z-index: -1; + opacity: 0; + } + + &__link { + display: block; + color: $h2-color; + transition: color 0.3s; + width: 100%; + + &:hover { + color: greenyellow; + } + } + + &__contacts { + display: flex; + height: 100%; + align-items: flex-start; + flex-direction: column; + } + &__telephone-num { + margin-top: 15px; + margin-right: 1em; + color: $H-color; + font-family: $ff-h-text; + font-weight: normal; + transition: font-size 1s; + + &:hover { + font-size: 18px; + } + } + &__button { + text-decoration: none; + width: 7.06em; + height: 2.5em; + background-color: $ready-and-button-bg; + border-radius: 100px; + text-align: center; + line-height: 2.5em; + color: #fff; + margin-top: 5px; + + &:hover { + display: block; + box-shadow: 0 0 15px rgba(17, 17, 255, 1); + } + } + + @media (max-width: 1050px) { + & { + display: block; + } + + &__toggler:checked ~ &__list { + position: absolute; + z-index: 1; + opacity: 1; + transition: z-index 0s, opacity 1s; + } + + &__toggler:checked + &__label { + background: url(/images/block-navigation/menu-X.svg); + background-size: cover; + height: 25px; + width: 25px; + padding-top: 0; + z-index: 2; + } + + &__toggler:checked ~ &__contacts { + display: flex; + } + } + @media (max-width: 600px) { + &__list { + right: -25px; + width: 300px; + padding-right: 10px; + } + } +} diff --git a/src/styles/blocks/block_feedback.scss b/src/styles/blocks/block_feedback.scss new file mode 100644 index 00000000..af617a19 --- /dev/null +++ b/src/styles/blocks/block_feedback.scss @@ -0,0 +1,119 @@ +@use "../utils/variables"; + +.feedback { + display: flex; + flex-direction: column; + align-items: center; + padding: 232px 0 150px; + background-color: #fff; + + &__tittle { + font-size: 3em; + line-height: 3.75em; + align-items: center; + margin-bottom: 56px; + } + + &__reviews { + display: flex; + justify-content: space-evenly; + } + + &__review { + display: flex; + flex-direction: column; + border: 1px solid rgba(69, 88, 128, 0.2); + margin: 0 15px; + padding: 38px 32px; + flex-basis: 373px; + font-family: $ff-h-text; + font-size: 1.13em; + color: $h2-color; + line-height: 32.4px; + justify-content: space-between; + } + + &__profile { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 39px; + } + + &__user-name { + position: relative; + text-align: center; + font-family: "Halyard Display", sans-serif; + font-weight: 500; + font-size: 1.38em; + line-height: 27.5px; + color: $H-color; + margin-top: 23px; + } + + &__user-name-avatar-left { + background-image: url(/images/block-feedback/image1.png); + } + + &__user-name-avatar-mid { + background-image: url(/images/block-feedback/image2.png); + } + + &__user-name-avatar-rgt { + background-image: url(/images/block-feedback/image3.png); + } + + &__user-name-avatar-left, + &__user-name-avatar-mid, + &__user-name-avatar-rgt { + width: 4em; + height: 4em; + background-size: cover; + transition: transform 500ms; + + &:hover { + transform: scale(1.2); + } + } + + &__website { + text-align: center; + } + + @media (min-width: 2000px) { + & { + font-size: 22px; + } + + &__reviews { + max-width: 1600px; + } + + &__review { + flex-basis: 450px; + } + } + + @media (max-width: 900px) { + & { + padding: 50px 0 0; + } + &__reviews { + flex-direction: column; + align-items: center; + } + + &__review { + width: 75%; + margin-bottom: 20px; + } + } + + @media (max-width: 700px) { + &__tittle { + font-size: 1.8em; + text-align: center; + line-height: 1em; + } + } +} diff --git a/src/styles/blocks/block_footer.scss b/src/styles/blocks/block_footer.scss new file mode 100644 index 00000000..a295d609 --- /dev/null +++ b/src/styles/blocks/block_footer.scss @@ -0,0 +1,224 @@ +.footer { + height: 660px; + background-color: #fff; + padding: 124px 212px 107px 204px; + + &__nav { + display: flex; + margin: 0 auto 130px; + justify-content: space-between; + max-width: 1800px; + } + + &__logo { + display: inline-block; + font-size: 1.64em; + font-weight: 600; + line-height: 125%; + position: relative; + + &::after, + &::before { + position: absolute; + display: block; + background-color: #ff2e6a; + width: 0.16em; + height: 0.16em; + border-radius: 50%; + content: ""; + right: -12%; + } + + &::after { + top: 40%; + } + + &::before { + top: 68%; + } + } + + &__about, + &__link { + font-family: $ff-h-text; + font-size: 1.13em; + color: $h2-color; + font-weight: normal; + } + + &__about { + width: 16em; + line-height: 145%; + margin-top: 34px; + } + + &__lists-container { + flex-grow: 1; + display: flex; + justify-content: space-evenly; + } + + &__list { + font-size: 1.38em; + } + + &__list-item { + &--margin-bot { + margin-bottom: 20px; + } + } + + &__list-item:first-child { + margin-top: 20px; + } + + &__link { + font-size: 1.13rem; + line-height: 225%; + transition: color 0.3s; + + &:hover { + color: rgba(69, 88, 128, 0.5); + } + + &--fb { + background-image: url(/images/block-footer/fb.svg); + + } + + &--inst { + background-image: url(/images/block-footer/insta.svg); + } + + &--twit { + background-image: url(/images/block-footer/Twitter.svg); + } + + &--ball { + background-image: url(/images/block-footer/BasBall.svg); + } + + &--egg { + background-image: url(/images/block-footer/Egg.svg); + margin-right: 44px; + } + } + + &--fb, + &--inst, + &--twit, + &--ball, + &--egg { + display: inline-block; + width: 1.4em; + height: 1.4em; + margin: 0 20px 0 5px; + background-size: cover; + background-position: center; + transition: transform 500ms; + background-repeat: no-repeat; + + &:hover { + transform: scale(1.2); + } + } + + &__terms-and-conditions { + display: flex; + align-items: center; + justify-content: space-between; + max-width: 1800px; + margin: 0 auto; + } + + &__copyright, + &__rules { + font-family: $ff-h-text; + font-weight: normal; + font-size: 0.88em; + } + + &__copyright { + color: rgba(69, 88, 128, 0.5); + } + + &__rules { + display: flex; + flex-basis: 23em; + justify-content: space-between; + color: $h2-color; + } + + @media (min-width:2000px) { + & { + font-size: 22px; + } + } + @media (max-width:1300px) { + & { + padding-right: 30px; + padding-left: 30px; + } + } + @media (max-width:900px) { + & { + height: auto; + padding-bottom: 10px; + } + &__nav { + flex-direction: column; + align-items: center; + } + &__digits-about { + display: flex; + flex-direction: column; + align-items: center; + } + &__lists-container { + width: 100%; + margin-top: 40px; + } + } + @media (max-width:600px) { + & { + padding: 50px 30px; + } + + &__lists-container { + flex-wrap: wrap; + gap: 20px 20px; + } + + &__about { + width: auto; + } + + &__terms-and-conditions { + flex-direction: column-reverse; + justify-content: flex-start; + } + + &__rules { + width: 100%; + flex-basis: auto; + justify-content: space-between; + margin-bottom: 30px; + } + + &__rules > a { + font-size: 16px; + } + } + + @media (max-width: 486px) { + &__list:last-child { + display: flex; + flex-direction: column; + align-items: center; + } + + &__link--egg { + margin: 0 0 0 5px; + } + } +} diff --git a/src/styles/blocks/block_good-design.scss b/src/styles/blocks/block_good-design.scss new file mode 100644 index 00000000..1117755c --- /dev/null +++ b/src/styles/blocks/block_good-design.scss @@ -0,0 +1,296 @@ +@use "../utils/_variables.scss"; + +.good-design { + display: flex; + font-size: 16px; + flex-direction: column; + align-items: center; + padding: 146px 20px 0; + width: 100%; + background: linear-gradient(180deg, rgba(242, 249, 255, 0.12) 0%, + #f2f9ff 100%); + height: 58.13rem; + + &:nth-child(n) { + text-align: center; + } + + &__item-tittle { + width: 10em; + font-size: 3em; + line-height: 1.7em; + margin-bottom: 27px; + } + + &__item-subtittle { + font-family: $ff-h-text; + font-size: 1.3em; + color: $h2-color; + margin-bottom: 1.68rem; + } + + &__item-links { + display: flex; + justify-content: center; + margin: 4.25rem; + } + + &__item-buy { + display: block; + text-align: center; + text-decoration: none; + font-family: $ff-h-text; + color: #fff; + font-weight: 400; + line-height: 3.13em; + + background-color: $ready-and-button-bg; + border-radius: 100px; + height: 3.13em; + width: 9.25em; + margin-right: 1.41em; + + &:hover { + box-shadow: 0 0 15px blue; + } + } + + &__item-see { + display: block; + text-decoration: none; + font-family: $ff-h-text; + color: $h2-color; + font-weight: 400; + line-height: 3.13em; + + width: 9.25em; + height: 3.13em; + border-radius: 100px; + background-color: #fff; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + + &:hover { + box-shadow: 0 0 15px grey; + } + } + + &__item-images { + display: flex; + flex-direction: column; + margin: 0 auto; + position: relative; + margin-bottom: 4.25em; + } + + &__item-images-window { + position: relative; + height: 33.31rem; + width: 44.94rem; + border-radius: 40px; + background-image: url("/images/block-good_design/browser.svg"); + z-index: 1; + background-position: center; + + &::after { + content: ""; + position: absolute; + width: 44.94rem; + height: 2rem; + background-image: url(/images/block-good_design/Rectangle.svg); + top: 0; + left: 0; + z-index: 1; + } + + &::before { + content: ""; + position: absolute; + width: 25em; + height: 25.5em; + background-image: url(/images/block-good_design/ui.svg); + background-repeat: no-repeat; + top: 4.38em; + left: 3.63em; + z-index: 1; + } + } + + &__item-images-avatar { + width: 3.75rem; + height: 3.56rem; + background-image: url(/images/block-good_design/avatar.svg); + border-radius: 50%; + position: absolute; + top: 7.81rem; + left: -2.63rem; + z-index: 1; + } + + &__item-images-3angle { + width: 69px; + height: 71px; + background-image: url(/images/block-good_design/3angle.svg); + background-repeat: no-repeat; + position: absolute; + top: -35px; + left: -115px; + + } + + &__item-images-ellipse-p-b { + width: 179px; + height: 179px; + background-image: url("/images/block-good_design/Ellipse\ pink.svg"); + position: absolute; + top: 261px; + left: -103px; + } + + &__item-images-ellipse-y-s { + width: 32px; + height: 32px; + background-image: url("/images/block-good_design/Ellipse\ small.svg"); + position: absolute; + right: -84px; + top: 47px; + } + + &__item-images-square { + width: 64px; + height: 64px; + background: #b5f2e3; + border-radius: 4px; + position: absolute; + right: -27px; + top: 192px; + } + + &__item-images-girl { + width: 208px; + height: 447px; + background-image: url(/images/block-good_design/girl.svg); + position: absolute; + z-index: 1; + bottom: 13px; + right: -13.5px; + } + + &__item-images-dot1, + &__item-images-dot2, + &__item-images-dot3 { + width: 8px; + height: 8px; + position: absolute; + border-radius: 50%; + background-color: #fff; + z-index: 1; + top: 12px; + } + + &__item-images-dot1 { + left: 1rem; + } + + &__item-images-dot2 { + left: 2rem; + } + + &__item-images-dot3 { + left: 3rem; + } + + &__item-down-subtittle { + font-family: $ff-h-text; + color: $h2-color; + opacity: 0.5; + line-height: 27px; + margin-bottom: 50px; + font-size: 1.3em; + } + + &__item-logos { + display: flex; + flex-wrap: wrap; + width: 100%; + justify-content: space-evenly; + z-index: 1; + } + + &__item-logos > img { + margin: 10px 30px; + transition: transform 500ms; + + &:hover { + transform: scale(1.2); + } + } + + @media (max-width:600px) { + & { + padding-top: 50px; + height: auto; + } + + &__item-images { + display: none; + } + + &__item-logos { + flex-direction: column; + padding: 0; + min-width: 200px; + + & > img { + margin-bottom: 15px; + } + } + + &__item-tittle { + width: 90%; + font-size: 1.8rem; + line-height: 24.4px; + margin-bottom: 27px; + } + + &__item-links { + margin: 30px; + flex-direction: column; + align-items: center; + justify-content: center; + } + + &__item-buy { + margin-bottom: 10px; + margin-right: 0; + } + + &-down-subtittle { + padding: 0 10px; + } + } + + @media (max-width:950px) { + & { + padding-top: 100px; + height: auto; + } + + &__item-images { + display: none; + } + + &__item-logos { + flex-wrap: wrap; + } + } + @media (min-width:2000px) { + & { + font-size: 22px; + height: 48.5em; + } + + &__item-logos { + max-width: 1800px; + } + } +} diff --git a/src/styles/blocks/block_launch-website.scss b/src/styles/blocks/block_launch-website.scss new file mode 100644 index 00000000..bdf6b9de --- /dev/null +++ b/src/styles/blocks/block_launch-website.scss @@ -0,0 +1,91 @@ +.launch-website { + display: flex; + justify-content: space-evenly; + align-items: center; + background-color: $ready-and-button-bg; + height: 20em; + padding: 0 211px 0 205px; + + &__title { + font-size: 3em; + color: #fff; + flex-basis: 10em; + } + + &__container-link { + display: flex; + flex-direction: column; + align-items: flex-end; + flex-shrink: 0; + } + + &__link-launch-now { + font-size: 1.13em; + line-height: 3.5em; + padding: 0 31px 0 3.3em; + background-color: #fff; + color: $h2-color; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 5%); + border-radius: 100px; + margin-bottom: 1.2em; + position: relative; + + &:hover { + box-shadow: 0 0 15px 5px #fff; + color: green; + } + + &::before { + content: ""; + background-image: url(/images/block-launch-website/send.svg); + background-size: cover; + width: 1.64em; + height: 1em; + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 1em; + } + } + + &__another-variant { + font-family: $ff-h-text; + font-weight: 400; + font-size: 1em; + color: #dfe0eb; + line-height: 125%; + } + + &__link-design-studio { + font-family: inherit; + color: rgb(255, 200, 0); + } + + @media (max-width:1000px) { + & { + flex-direction: column; + height: auto; + padding: 20px; + } + + &__title { + flex-basis: auto; + margin-bottom: 30px; + } + + &__container-link { + align-items: center; + } + } + + @media (min-width:2000px) { + & { + font-size: 22px; + } + } + @media (max-width: 700px) { + &__title { + font-size: 1.8rem; + } + } +} diff --git a/src/styles/blocks/block_main.scss b/src/styles/blocks/block_main.scss new file mode 100644 index 00000000..e0494888 --- /dev/null +++ b/src/styles/blocks/block_main.scss @@ -0,0 +1,6 @@ +.main { + display: flex; + justify-content: center; + flex-direction: column; + +} diff --git a/src/styles/blocks/block_simplicity.scss b/src/styles/blocks/block_simplicity.scss new file mode 100644 index 00000000..74a1aeb1 --- /dev/null +++ b/src/styles/blocks/block_simplicity.scss @@ -0,0 +1,114 @@ +@use "../utils/variables"; + +.simplicity { + display: flex; + flex-direction: column; + align-items: center; + background-color: $simplicity-bg; + padding: 139px 30px 0; + &__tittle { + font-size: 3em; + line-height: 3.75rem; + margin-bottom: 40px; + text-align: center; + } + + &__subtittle { + font-family: $ff-h-text; + color: $h2-color; + font-size: 1.31em; + line-height: 2rem; + width: 25em; + text-align: center; + margin-bottom: 40px; + } + + &__sent { + margin: 0; + } + + &__button { + text-align: center; + margin-bottom: 37px; + } + + &__link { + display: inline-block; + text-decoration: none; + color: #fff; + font-family: $ff-h-text; + line-height: 3.13em; + width: 9.25em; + height: 3.13em; + background-color: $ready-and-button-bg; + border-radius: 100px; + + &:hover { + box-shadow: 0 0 15px blue; + } + } + + &__images { + display: flex; + align-items: flex-end; + width: 100%; + justify-content: space-between; + } + + &__columns { + display: flex; + flex-direction: column; + justify-content: space-between; + } + + &__columns:last-child { + margin: 0; + } + + &__foto { + display: block; + width: 100%; + transition: transform 500ms; + + &:hover { + transform: scale(1.2); + } + } + + &__foto:not(:last-child) { + max-height: 237px; + } + + @media (min-width:2000px) { + & { + font-size: 22px; + } + + &__images { + max-width: 2000px; + } + } + + @media (max-width:600px) { + & { + padding-top: 50px; + } + &__tittle { + padding: 0 1em; + font-size: 1.8rem; + text-align: center; + } + + &__subtittle { + width: 90%; + } + + &__images { + justify-content: center; + } + + &__columns:not(:nth-child(3)) { + display: none; + } + } +} diff --git a/src/styles/blocks/block_we-help.scss b/src/styles/blocks/block_we-help.scss new file mode 100644 index 00000000..52feec72 --- /dev/null +++ b/src/styles/blocks/block_we-help.scss @@ -0,0 +1,216 @@ +@use "../utils/variables"; + +.help { + display: flex; + flex-direction: column; + align-items: center; + padding: 30em 0 0; + width: 100%; + background-color: #fff; + padding-bottom: 180px; + + &__tittle { + width: 34.38rem; + font-size: 3em; + line-height: 3.75rem; + margin-bottom: 126px; + text-align: center; + } + + &__content { + display: flex; + width: 100%; + justify-content: space-evenly; + } + + &__image { + position: relative; + width: 430px; + height: 650px; + z-index: 1; + } + + &__image-girl { + position: absolute; + width: 331px; + height: 357px; + background-color: #999fe3; + border-radius: 4px; + right: -70px; + transition: transform 500ms; + + &:hover { + transform: scale(1.2); + } + + &::after { + content: ""; + width: 64px; + height: 64px; + border-radius: 4px; + background-color: #b5f2e3; + position: absolute; + right: -20px; + bottom: 73px; + z-index: -1; + } + } + + &__image-girl-foto { + position: absolute; + top: -255px; + } + + &__image-b-man { + width: 266px; + height: 308px; + background-color: #fed892; + position: absolute; + border-radius: 4px; + left: 10px; + top: 260px; + transition: transform 500ms; + + &:hover { + transform: scale(1.2); + } + + &::after { + content: ""; + width: 102px; + height: 102px; + background-color: #facfca; + border-radius: 50%; + position: absolute; + left: -38px; + bottom: 67px; + z-index: -1; + } + } + + &__image-b-man-foto { + position: absolute; + top: -5px; + } + + &__image-w-man { + width: 201px; + height: 200px; + background-color: #f47b9e; + border-radius: 4px; + position: absolute; + bottom: 5px; + right: 15px; + transition: transform 500ms; + + &:hover { + transform: scale(1.2); + } + + &::after { + content: ""; + width: 66px; + height: 66px; + background-image: url(/images/block-help/pink3angle.svg); + position: absolute; + right: -33px; + bottom: -33px; + z-index: -1; + } + } + + &__image-w-man-foto { + position: absolute; + top: -56px; + left: 19px; + } + + &__info { + display: flex; + flex-direction: column; + margin-left: 6.25em; + } + + .logo { + transition: transform 500ms; + + &:hover { + transform: scale(1.2); + } + } + + &__info-des, + &__info-easycontent, + &__info-fast { + display: flex; + flex-wrap: wrap; + align-content: flex-start; + max-width: 25.13em; + border-bottom: 1px solid rgba(69, 88, 128, 0.2); + margin-bottom: 45px; + } + + &__info-des-tittle, + &__info-easycontent-tittle, + &__info-fast-tittle { + font-size: 1.38em; + line-height: 1.72em; + padding-left: 47px; + } + + &__info-des-text, + &__info-easycontent-text, + &__info-fast-text { + margin: 0 0 0 105px; + color: $h2-color; + font-family: $ff-h-text; + width: 13.75em; + padding-bottom: 45px; + } + + &__info-fast { + border: none; + margin-bottom: 0; + } + + &__info-fast-text { + padding-bottom: 0; + } + + @media (max-width:600px) { + & { + padding-bottom: 50px; + } + &__tittle { + font-size: 1.8rem; + width: 60%; + line-height: 10px; + } + } + + @media (max-width:950px) { + & { + padding-top: 50px; + } + &__tittle { + width: 60%; + line-height: 1em; + } + &__image { + display: none; + } + &__content { + justify-content: center; + } + &__info { + margin: 0; + max-width: 90%; + } + } + + @media (min-width:2000px) { + & { + font-size: 22px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e4..e19e11a0 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,30 @@ -@import "utils"; -@import "fonts"; -@import "typography"; +@import "utils/reset"; +@import "utils/variables"; +@import "utils/palette"; +@import "utils/fonts"; + +* { + box-sizing: border-box; +} + +html { + font-family: "Halyard Display", sans-serif; + font-weight: 500; + font-size: 16px; + color: $H-color; + scroll-behavior: smooth; +} body { - background: $c-gray; + margin: 0; } + +@import "blocks/block-digits-navigation.scss"; +@import "blocks/block-menu1050width.scss"; +@import "blocks/block_good-design.scss"; +@import "blocks/block_main.scss"; +@import "blocks/block_we-help.scss"; +@import "blocks/block_simplicity.scss"; +@import "blocks/block_feedback.scss"; +@import "blocks/block_launch-website.scss"; +@import "blocks/block_footer.scss"; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index a1a5dd0e..00000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: "Roboto", sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_fonts.scss b/src/styles/utils/_fonts.scss new file mode 100644 index 00000000..ecbbddc1 --- /dev/null +++ b/src/styles/utils/_fonts.scss @@ -0,0 +1,55 @@ +@font-face { + font-family: "Halyard Display"; + src: url("../fonts/Halyard/Halyard_Display_Black.ttf"); + font-weight: 800; + font-style: normal; +} +@font-face { + font-family: "Halyard Display"; + src: url("../fonts/Halyard/Halyard_Display_Bold.ttf") format("truetype"); + font-weight: 700; + font-style: normal; +} +@font-face { + font-family: "Halyard Display"; + src: url("../fonts/Halyard/Halyard\ Display\ SemiBold.ttf"); + font-weight: 600; + font-style: normal; +} +@font-face { + font-family: "Halyard Display"; + src: url("../fonts/Halyard/Halyard\ Display\ Medium.ttf"); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: "Halyard Display"; + src: url("../fonts/Halyard/Halyard\ Display\ Regular.ttf"); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: "Halyard Display"; + src: url("../fonts/Halyard/Halyard\ Display\ Book.ttf"); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: "Halyard Text"; + src: url("../fonts/Halyard/Halyard\ Text\ SemiBold.ttf"); + font-weight: 600; + font-style: normal; +} +@font-face { + font-family: "Halyard Text"; + src: url("../fonts/Halyard/Halyard\ Text\ Medium.ttf"); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: "Halyard Text"; + src: url("../fonts/Halyard/Halyard\ Text\ Book\ Regular.ttf"); + font-weight: normal; + font-style: normal; +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss deleted file mode 100644 index 80c79780..00000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_palette.scss b/src/styles/utils/_palette.scss new file mode 100644 index 00000000..aaa86a0c --- /dev/null +++ b/src/styles/utils/_palette.scss @@ -0,0 +1,6 @@ +$H-color:#1e266d; +$h2-color:#455880; +$good-design-bg:linear-gradient(#f2f9ff 12%, #f2f9ff 100%); +$work-you-do-bg:#f0f2f6; +$simplicity-bg:#fff9ea; +$ready-and-button-bg:#3751ff; diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 00000000..d958c009 --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,16 @@ +p, +h1, +h2, +h3, +ul { + margin-block-start: 0; + margin-block-end: 0; + font-size: inherit; + font-weight: inherit; + list-style: none; + padding: 0; +} + +a { + text-decoration: none; +} diff --git a/src/styles/utils/_variables.scss b/src/styles/utils/_variables.scss new file mode 100644 index 00000000..b6e04970 --- /dev/null +++ b/src/styles/utils/_variables.scss @@ -0,0 +1 @@ +$ff-h-text:"Halyard Text",sans-serif; diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006ff..00000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee;