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..f3065d38 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -19,5 +19,11 @@ jobs: uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - - run: npm ci - - run: npm start & sleep 5 && npm test + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/.gitignore b/.gitignore index 0f8d3cf7..549c139a 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,4 @@ node_modules # Generated files backstop_data dist +.cache diff --git a/.linthtmlrc.json b/.linthtmlrc.json index 774726eb..0f2047a7 100644 --- a/.linthtmlrc.json +++ b/.linthtmlrc.json @@ -1,49 +1,3 @@ { - "attr-bans": [ - "align", - "background", - "bgcolor", - "border", - "frameborder", - "style" - ], - "attr-name-ignore-regex": "viewBox", - "attr-no-dup": true, - "attr-quote-style": "double", - "attr-req-value": true, - "class-no-dup": true, - "doctype-first": true, - "doctype-html5": true, - "fig-req-figcaption": true, - "head-req-title": true, - "html-req-lang": true, - "id-class-style": false, - "id-no-dup": true, - "img-req-src": true, - "img-req-alt": "allownull", - "indent-width": 2, - "indent-style": "spaces", - "indent-width-cont": true, - "input-radio-req-name": true, - "spec-char-escape": true, - "tag-bans": [ - "b", - "i", - "u", - "center", - "style", - "marquee", - "font", - "s" - ], - "tag-name-lowercase": true, - "tag-name-match": true, - "tag-self-close": "never", - "tag-close": true, - "text-ignore-regex": "&", - "title-no-dup": true, - "line-end-style": "lf", - "attr-new-line": 2, - "attr-name-style": "dash", - "attr-no-unsafe-char": true + "extends": "@mate-academy/linthtml-config" } diff --git a/package-lock.json b/package-lock.json index e330c949..7c67bc3a 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.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "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.1", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz", + "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==", + "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", @@ -5556,6 +5681,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", diff --git a/package.json b/package.json index 8bbaf296..b501b6ba 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "@mate-academy/bemlint": "^0.1.1", "@mate-academy/eslint-config": "*", "@mate-academy/linthtml-config": "0.0.1", - "@mate-academy/scripts": "^0.2.0", + "@mate-academy/scripts": "^0.9.14", "@mate-academy/stylelint-config": "0.0.9", "colors": "^1.3.3", "eslint": "^5.16.0", diff --git a/src/fonts/Halyard/Halyard Display Black Italic.ttf b/src/fonts/Halyard/Halyard Display Black Italic.ttf new file mode 100644 index 00000000..0d08a71d Binary files /dev/null and b/src/fonts/Halyard/Halyard Display Black Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Display Black.ttf b/src/fonts/Halyard/Halyard Display Black.ttf new file mode 100644 index 00000000..4fe590df Binary files /dev/null and b/src/fonts/Halyard/Halyard Display Black.ttf differ diff --git a/src/fonts/Halyard/Halyard Display Bold Italic.ttf b/src/fonts/Halyard/Halyard Display Bold Italic.ttf new file mode 100644 index 00000000..3a7ee4cf Binary files /dev/null and b/src/fonts/Halyard/Halyard Display Bold Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Display Bold.ttf b/src/fonts/Halyard/Halyard Display Bold.ttf new file mode 100644 index 00000000..e9f0d26b Binary files /dev/null and b/src/fonts/Halyard/Halyard Display Bold.ttf differ diff --git a/src/fonts/Halyard/Halyard Display Book Italic.ttf b/src/fonts/Halyard/Halyard Display Book Italic.ttf new file mode 100644 index 00000000..28c1741b Binary files /dev/null and b/src/fonts/Halyard/Halyard Display Book Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Display Book.ttf b/src/fonts/Halyard/Halyard Display Book.ttf new file mode 100644 index 00000000..454de523 Binary files /dev/null and b/src/fonts/Halyard/Halyard Display Book.ttf differ diff --git a/src/fonts/Halyard/Halyard Display ExtraLight Italic.ttf b/src/fonts/Halyard/Halyard Display ExtraLight Italic.ttf new file mode 100644 index 00000000..3493652a Binary files /dev/null and b/src/fonts/Halyard/Halyard Display ExtraLight Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Display ExtraLight.ttf b/src/fonts/Halyard/Halyard Display ExtraLight.ttf new file mode 100644 index 00000000..f87784a8 Binary files /dev/null and b/src/fonts/Halyard/Halyard Display ExtraLight.ttf differ diff --git a/src/fonts/Halyard/Halyard Display Italic.ttf b/src/fonts/Halyard/Halyard Display Italic.ttf new file mode 100644 index 00000000..e1bd1227 Binary files /dev/null and b/src/fonts/Halyard/Halyard Display Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Display Light Italic.ttf b/src/fonts/Halyard/Halyard Display Light Italic.ttf new file mode 100644 index 00000000..7832a1c4 Binary files /dev/null and b/src/fonts/Halyard/Halyard Display Light Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Display Light.ttf b/src/fonts/Halyard/Halyard Display Light.ttf new file mode 100644 index 00000000..9de8b698 Binary files /dev/null and b/src/fonts/Halyard/Halyard Display Light.ttf differ diff --git a/src/fonts/Halyard/Halyard Display Medium Italic.ttf b/src/fonts/Halyard/Halyard Display Medium Italic.ttf new file mode 100644 index 00000000..8fe9e4c3 Binary files /dev/null and b/src/fonts/Halyard/Halyard Display Medium Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Display Medium.ttf b/src/fonts/Halyard/Halyard Display Medium.ttf new file mode 100644 index 00000000..235e0510 Binary files /dev/null and b/src/fonts/Halyard/Halyard Display Medium.ttf differ diff --git a/src/fonts/Halyard/Halyard Display Regular.ttf b/src/fonts/Halyard/Halyard Display Regular.ttf new file mode 100644 index 00000000..0c736304 Binary files /dev/null and b/src/fonts/Halyard/Halyard Display Regular.ttf differ diff --git a/src/fonts/Halyard/Halyard Display SemiBold Italic.ttf b/src/fonts/Halyard/Halyard Display SemiBold Italic.ttf new file mode 100644 index 00000000..b8875c6b Binary files /dev/null and b/src/fonts/Halyard/Halyard Display SemiBold Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Display SemiBold.ttf b/src/fonts/Halyard/Halyard Display SemiBold.ttf new file mode 100644 index 00000000..f0a69397 Binary files /dev/null and b/src/fonts/Halyard/Halyard Display SemiBold.ttf differ diff --git a/src/fonts/Halyard/Halyard Micro Black Italic.ttf b/src/fonts/Halyard/Halyard Micro Black Italic.ttf new file mode 100644 index 00000000..bbc1b1d4 Binary files /dev/null and b/src/fonts/Halyard/Halyard Micro Black Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Micro Black.ttf b/src/fonts/Halyard/Halyard Micro Black.ttf new file mode 100644 index 00000000..1a40e2eb Binary files /dev/null and b/src/fonts/Halyard/Halyard Micro Black.ttf differ diff --git a/src/fonts/Halyard/Halyard Micro Bold Italic.ttf b/src/fonts/Halyard/Halyard Micro Bold Italic.ttf new file mode 100644 index 00000000..ee660b5e Binary files /dev/null and b/src/fonts/Halyard/Halyard Micro Bold Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Micro Bold.ttf b/src/fonts/Halyard/Halyard Micro Bold.ttf new file mode 100644 index 00000000..98c02d25 Binary files /dev/null and b/src/fonts/Halyard/Halyard Micro Bold.ttf differ diff --git a/src/fonts/Halyard/Halyard Micro Book Italic.ttf b/src/fonts/Halyard/Halyard Micro Book Italic.ttf new file mode 100644 index 00000000..9677b30e Binary files /dev/null and b/src/fonts/Halyard/Halyard Micro Book Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Micro Book.ttf b/src/fonts/Halyard/Halyard Micro Book.ttf new file mode 100644 index 00000000..fea84d15 Binary files /dev/null and b/src/fonts/Halyard/Halyard Micro Book.ttf differ diff --git a/src/fonts/Halyard/Halyard Micro ExtraLight Italic.ttf b/src/fonts/Halyard/Halyard Micro ExtraLight Italic.ttf new file mode 100644 index 00000000..b4281891 Binary files /dev/null and b/src/fonts/Halyard/Halyard Micro ExtraLight Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Micro ExtraLight.ttf b/src/fonts/Halyard/Halyard Micro ExtraLight.ttf new file mode 100644 index 00000000..4489646f Binary files /dev/null and b/src/fonts/Halyard/Halyard Micro ExtraLight.ttf differ diff --git a/src/fonts/Halyard/Halyard Micro Italic.ttf b/src/fonts/Halyard/Halyard Micro Italic.ttf new file mode 100644 index 00000000..06a530b2 Binary files /dev/null and b/src/fonts/Halyard/Halyard Micro Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Micro Light Italic.ttf b/src/fonts/Halyard/Halyard Micro Light Italic.ttf new file mode 100644 index 00000000..f5e6b3a2 Binary files /dev/null and b/src/fonts/Halyard/Halyard Micro Light Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Micro Light.ttf b/src/fonts/Halyard/Halyard Micro Light.ttf new file mode 100644 index 00000000..ec6555e5 Binary files /dev/null and b/src/fonts/Halyard/Halyard Micro Light.ttf differ diff --git a/src/fonts/Halyard/Halyard Micro Medium Italic.ttf b/src/fonts/Halyard/Halyard Micro Medium Italic.ttf new file mode 100644 index 00000000..66b2225a Binary files /dev/null and b/src/fonts/Halyard/Halyard Micro Medium Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Micro Medium.ttf b/src/fonts/Halyard/Halyard Micro Medium.ttf new file mode 100644 index 00000000..8e04d09f Binary files /dev/null and b/src/fonts/Halyard/Halyard Micro Medium.ttf differ diff --git a/src/fonts/Halyard/Halyard Micro Regular.ttf b/src/fonts/Halyard/Halyard Micro Regular.ttf new file mode 100644 index 00000000..add23a06 Binary files /dev/null and b/src/fonts/Halyard/Halyard Micro Regular.ttf differ diff --git a/src/fonts/Halyard/Halyard Micro SemiBold Italic.ttf b/src/fonts/Halyard/Halyard Micro SemiBold Italic.ttf new file mode 100644 index 00000000..c556bc2f Binary files /dev/null and b/src/fonts/Halyard/Halyard Micro SemiBold Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Micro SemiBold.ttf b/src/fonts/Halyard/Halyard Micro SemiBold.ttf new file mode 100644 index 00000000..3505aa55 Binary files /dev/null and b/src/fonts/Halyard/Halyard Micro SemiBold.ttf differ diff --git a/src/fonts/Halyard/Halyard Text Bold Italic.ttf b/src/fonts/Halyard/Halyard Text Bold Italic.ttf new file mode 100644 index 00000000..5fdd86b4 Binary files /dev/null and b/src/fonts/Halyard/Halyard Text Bold Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Text Bold.ttf b/src/fonts/Halyard/Halyard Text Bold.ttf new file mode 100644 index 00000000..e8094a69 Binary files /dev/null and b/src/fonts/Halyard/Halyard Text Bold.ttf differ diff --git a/src/fonts/Halyard/Halyard Text Book Italic.ttf b/src/fonts/Halyard/Halyard Text Book Italic.ttf new file mode 100644 index 00000000..e353ac61 Binary files /dev/null and b/src/fonts/Halyard/Halyard Text Book Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Text Book Regular.ttf b/src/fonts/Halyard/Halyard Text Book Regular.ttf new file mode 100644 index 00000000..1f5041f2 Binary files /dev/null and b/src/fonts/Halyard/Halyard Text Book Regular.ttf differ diff --git a/src/fonts/Halyard/Halyard Text ExtraLight Italic.ttf b/src/fonts/Halyard/Halyard Text ExtraLight Italic.ttf new file mode 100644 index 00000000..98957edc Binary files /dev/null and b/src/fonts/Halyard/Halyard Text ExtraLight Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Text ExtraLight.ttf b/src/fonts/Halyard/Halyard Text ExtraLight.ttf new file mode 100644 index 00000000..020d5496 Binary files /dev/null and b/src/fonts/Halyard/Halyard Text ExtraLight.ttf differ diff --git a/src/fonts/Halyard/Halyard Text Italic.ttf b/src/fonts/Halyard/Halyard Text Italic.ttf new file mode 100644 index 00000000..4a6336cf Binary files /dev/null and b/src/fonts/Halyard/Halyard Text Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Text Light Italic.ttf b/src/fonts/Halyard/Halyard Text Light Italic.ttf new file mode 100644 index 00000000..49714d85 Binary files /dev/null and b/src/fonts/Halyard/Halyard Text Light Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Text Light.ttf b/src/fonts/Halyard/Halyard Text Light.ttf new file mode 100644 index 00000000..6e1a3376 Binary files /dev/null and b/src/fonts/Halyard/Halyard Text Light.ttf differ diff --git a/src/fonts/Halyard/Halyard Text Medium Italic.ttf b/src/fonts/Halyard/Halyard Text Medium Italic.ttf new file mode 100644 index 00000000..809f37af Binary files /dev/null and b/src/fonts/Halyard/Halyard Text Medium Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Text Medium.ttf b/src/fonts/Halyard/Halyard Text Medium.ttf new file mode 100644 index 00000000..8323a061 Binary files /dev/null and b/src/fonts/Halyard/Halyard Text Medium.ttf differ diff --git a/src/fonts/Halyard/Halyard Text Regular.ttf b/src/fonts/Halyard/Halyard Text Regular.ttf new file mode 100644 index 00000000..f3efafd3 Binary files /dev/null and b/src/fonts/Halyard/Halyard Text Regular.ttf differ diff --git a/src/fonts/Halyard/Halyard Text SemiBold Italic.ttf b/src/fonts/Halyard/Halyard Text SemiBold Italic.ttf new file mode 100644 index 00000000..9ad9e3d0 Binary files /dev/null and b/src/fonts/Halyard/Halyard Text SemiBold Italic.ttf differ diff --git a/src/fonts/Halyard/Halyard Text SemiBold.ttf b/src/fonts/Halyard/Halyard Text SemiBold.ttf new file mode 100644 index 00000000..079cfaa3 Binary files /dev/null and b/src/fonts/Halyard/Halyard Text SemiBold.ttf differ diff --git a/src/fonts/Halyard/HalyardText Black Italic.ttf b/src/fonts/Halyard/HalyardText Black Italic.ttf new file mode 100644 index 00000000..52bc246e Binary files /dev/null and b/src/fonts/Halyard/HalyardText Black Italic.ttf differ diff --git a/src/fonts/Halyard/HalyardText Black.ttf b/src/fonts/Halyard/HalyardText Black.ttf new file mode 100644 index 00000000..644047ae Binary files /dev/null and b/src/fonts/Halyard/HalyardText Black.ttf differ diff --git a/src/images/Ellipse1.png b/src/images/Ellipse1.png new file mode 100644 index 00000000..104868a3 Binary files /dev/null and b/src/images/Ellipse1.png differ diff --git a/src/images/Ellipse2.png b/src/images/Ellipse2.png new file mode 100644 index 00000000..017cf90f Binary files /dev/null and b/src/images/Ellipse2.png differ diff --git a/src/images/Graphic2.png b/src/images/Graphic2.png new file mode 100644 index 00000000..f104c92f Binary files /dev/null and b/src/images/Graphic2.png differ diff --git a/src/images/Graphic_all.png b/src/images/Graphic_all.png new file mode 100644 index 00000000..a3094090 Binary files /dev/null and b/src/images/Graphic_all.png differ diff --git a/src/images/Group.svg b/src/images/Group.svg new file mode 100644 index 00000000..f4b7edde --- /dev/null +++ b/src/images/Group.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/images/Icon2.png b/src/images/Icon2.png new file mode 100644 index 00000000..a3489763 Binary files /dev/null and b/src/images/Icon2.png differ diff --git a/src/images/Icon3.png b/src/images/Icon3.png new file mode 100644 index 00000000..d147fd6c Binary files /dev/null and b/src/images/Icon3.png differ diff --git a/src/images/arrow-down.png b/src/images/arrow-down.png new file mode 100644 index 00000000..c561c7cb Binary files /dev/null and b/src/images/arrow-down.png differ diff --git a/src/images/autumn-goodman-242825.svg b/src/images/autumn-goodman-242825.svg new file mode 100644 index 00000000..41cb2998 --- /dev/null +++ b/src/images/autumn-goodman-242825.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/burger.png b/src/images/burger.png new file mode 100644 index 00000000..570a2ae0 Binary files /dev/null and b/src/images/burger.png differ diff --git a/src/images/c.svg b/src/images/c.svg new file mode 100644 index 00000000..15680766 --- /dev/null +++ b/src/images/c.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/card1.png b/src/images/card1.png new file mode 100644 index 00000000..925ef919 Binary files /dev/null and b/src/images/card1.png differ diff --git a/src/images/card2.png b/src/images/card2.png new file mode 100644 index 00000000..3cc04a40 Binary files /dev/null and b/src/images/card2.png differ diff --git a/src/images/cards/card1.png b/src/images/cards/card1.png new file mode 100644 index 00000000..438911c7 Binary files /dev/null and b/src/images/cards/card1.png differ diff --git a/src/images/cards/card2.png b/src/images/cards/card2.png new file mode 100644 index 00000000..c66fd62e Binary files /dev/null and b/src/images/cards/card2.png differ diff --git a/src/images/cards/card3.png b/src/images/cards/card3.png new file mode 100644 index 00000000..0919b276 Binary files /dev/null and b/src/images/cards/card3.png differ diff --git a/src/images/charles-etoroma-390119.svg b/src/images/charles-etoroma-390119.svg new file mode 100644 index 00000000..26cc87af --- /dev/null +++ b/src/images/charles-etoroma-390119.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/christopher-campbell-40367.svg b/src/images/christopher-campbell-40367.svg new file mode 100644 index 00000000..cc0b0d65 --- /dev/null +++ b/src/images/christopher-campbell-40367.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/cube.png b/src/images/cube.png new file mode 100644 index 00000000..03246a83 Binary files /dev/null and b/src/images/cube.png differ diff --git a/src/images/face.png b/src/images/face.png new file mode 100644 index 00000000..f9f488a6 Binary files /dev/null and b/src/images/face.png differ diff --git a/src/images/favicon.png b/src/images/favicon.png new file mode 100644 index 00000000..78474695 Binary files /dev/null and b/src/images/favicon.png differ diff --git a/src/images/fon.png b/src/images/fon.png new file mode 100644 index 00000000..e213bb11 Binary files /dev/null and b/src/images/fon.png differ diff --git a/src/images/icon/icon-dribbble.png b/src/images/icon/icon-dribbble.png new file mode 100644 index 00000000..462b8a8a Binary files /dev/null and b/src/images/icon/icon-dribbble.png differ diff --git a/src/images/icon/icon-envato.png b/src/images/icon/icon-envato.png new file mode 100644 index 00000000..9fcf7575 Binary files /dev/null and b/src/images/icon/icon-envato.png differ diff --git a/src/images/icon/icon-facebook.png b/src/images/icon/icon-facebook.png new file mode 100644 index 00000000..a5b766f5 Binary files /dev/null and b/src/images/icon/icon-facebook.png differ diff --git a/src/images/icon/icon-instagram.png b/src/images/icon/icon-instagram.png new file mode 100644 index 00000000..bbdccdf4 Binary files /dev/null and b/src/images/icon/icon-instagram.png differ diff --git a/src/images/icon/icon-twitter.png b/src/images/icon/icon-twitter.png new file mode 100644 index 00000000..cb4c3eb9 Binary files /dev/null and b/src/images/icon/icon-twitter.png differ diff --git a/src/images/icon1.png b/src/images/icon1.png new file mode 100644 index 00000000..69020b4c Binary files /dev/null and b/src/images/icon1.png differ diff --git a/src/images/joanna-kosinska-340748.svg b/src/images/joanna-kosinska-340748.svg new file mode 100644 index 00000000..5b67fc4a --- /dev/null +++ b/src/images/joanna-kosinska-340748.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/linkedin-sales-navigator-402831.svg b/src/images/linkedin-sales-navigator-402831.svg new file mode 100644 index 00000000..0382201e --- /dev/null +++ b/src/images/linkedin-sales-navigator-402831.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/linkedin-sales-navigator-406825.svg b/src/images/linkedin-sales-navigator-406825.svg new file mode 100644 index 00000000..9639fd48 --- /dev/null +++ b/src/images/linkedin-sales-navigator-406825.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 00000000..e94e9478 Binary files /dev/null and b/src/images/logo.png differ 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/mail.png b/src/images/mail.png new file mode 100644 index 00000000..b625b226 Binary files /dev/null and b/src/images/mail.png differ diff --git a/src/images/oval.png b/src/images/oval.png new file mode 100644 index 00000000..54c14849 Binary files /dev/null and b/src/images/oval.png differ diff --git a/src/images/sert/sert1.png b/src/images/sert/sert1.png new file mode 100644 index 00000000..2db4ce3f Binary files /dev/null and b/src/images/sert/sert1.png differ diff --git a/src/images/sert/sert10.png b/src/images/sert/sert10.png new file mode 100644 index 00000000..61027255 Binary files /dev/null and b/src/images/sert/sert10.png differ diff --git a/src/images/sert/sert11.png b/src/images/sert/sert11.png new file mode 100644 index 00000000..245729a1 Binary files /dev/null and b/src/images/sert/sert11.png differ diff --git a/src/images/sert/sert2.png b/src/images/sert/sert2.png new file mode 100644 index 00000000..0523c752 Binary files /dev/null and b/src/images/sert/sert2.png differ diff --git a/src/images/sert/sert3.png b/src/images/sert/sert3.png new file mode 100644 index 00000000..35486000 Binary files /dev/null and b/src/images/sert/sert3.png differ diff --git a/src/images/sert/sert4.png b/src/images/sert/sert4.png new file mode 100644 index 00000000..d8063039 Binary files /dev/null and b/src/images/sert/sert4.png differ diff --git a/src/images/sert/sert5.png b/src/images/sert/sert5.png new file mode 100644 index 00000000..aca2e631 Binary files /dev/null and b/src/images/sert/sert5.png differ diff --git a/src/images/sert/sert6.png b/src/images/sert/sert6.png new file mode 100644 index 00000000..ccd31fb0 Binary files /dev/null and b/src/images/sert/sert6.png differ diff --git a/src/images/sert/sert7.png b/src/images/sert/sert7.png new file mode 100644 index 00000000..edd206dc Binary files /dev/null and b/src/images/sert/sert7.png differ diff --git a/src/images/sert/sert8.png b/src/images/sert/sert8.png new file mode 100644 index 00000000..8f72db14 Binary files /dev/null and b/src/images/sert/sert8.png differ diff --git a/src/images/sert/sert9.png b/src/images/sert/sert9.png new file mode 100644 index 00000000..09e0d582 Binary files /dev/null and b/src/images/sert/sert9.png differ diff --git a/src/images/sert/sert_all.png b/src/images/sert/sert_all.png new file mode 100644 index 00000000..b144d861 Binary files /dev/null and b/src/images/sert/sert_all.png differ diff --git a/src/images/sert_all.png b/src/images/sert_all.png new file mode 100644 index 00000000..90620d3c Binary files /dev/null and b/src/images/sert_all.png differ diff --git a/src/images/sites/logo-1.png b/src/images/sites/logo-1.png new file mode 100644 index 00000000..fea5de09 Binary files /dev/null and b/src/images/sites/logo-1.png differ diff --git a/src/images/sites/logo-2.png b/src/images/sites/logo-2.png new file mode 100644 index 00000000..ab761db5 Binary files /dev/null and b/src/images/sites/logo-2.png differ diff --git a/src/images/sites/logo-3.png b/src/images/sites/logo-3.png new file mode 100644 index 00000000..a515024a Binary files /dev/null and b/src/images/sites/logo-3.png differ diff --git a/src/images/sites/logo-4.png b/src/images/sites/logo-4.png new file mode 100644 index 00000000..720d39c8 Binary files /dev/null and b/src/images/sites/logo-4.png differ diff --git a/src/images/sites/logo-5.png b/src/images/sites/logo-5.png new file mode 100644 index 00000000..3fe064b0 Binary files /dev/null and b/src/images/sites/logo-5.png differ diff --git a/src/images/sites/logo-6.png b/src/images/sites/logo-6.png new file mode 100644 index 00000000..dc903666 Binary files /dev/null and b/src/images/sites/logo-6.png differ diff --git a/src/images/sites/logo-7.png b/src/images/sites/logo-7.png new file mode 100644 index 00000000..937071be Binary files /dev/null and b/src/images/sites/logo-7.png differ diff --git a/src/images/title_photo.png b/src/images/title_photo.png new file mode 100644 index 00000000..5c67c69a Binary files /dev/null and b/src/images/title_photo.png differ diff --git a/src/images/triangle.png b/src/images/triangle.png new file mode 100644 index 00000000..b24b4894 Binary files /dev/null and b/src/images/triangle.png differ diff --git a/src/images/ui.png b/src/images/ui.png new file mode 100644 index 00000000..84a69562 Binary files /dev/null and b/src/images/ui.png differ diff --git a/src/images/woman.png b/src/images/woman.png new file mode 100644 index 00000000..1ced6c7c Binary files /dev/null and b/src/images/woman.png differ diff --git a/src/index.html b/src/index.html index 5d357bd6..ebfd428c 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,213 @@ - + - Title + Thrivetalk + - -

Hello Mate Academy

- + +
+
+ + Thrivetalk + + +
+
+
+ +
+ Home + About + Services + Blog +
+ contact us +
+
+ +
HELPING YOU THRIVE IN ALL AREAS OF LIFE
+
+ Our highly talented therapists can help you with a range of issues including relationships, sex, PTSD, depression, social anxiety, or even just caring for yourself more. +
+
+ who am i + what do i do +
+
+
+
+
+
+
+
+ +
+
+
+
Why Thrive? +
+
+ Want to improve your well-being from the comfort of your own couch? Are you having trouble finding the right therapist? + Here at ThriveTalk, our licensed therapists provide the same quality care you would get in office from anywhere you can access your laptop or mobile phone. Become your best self with ThriveTalk. Start therapy now with a licensed therapist!
+
+
+
+
+
+
+
about us
+
+ We want to help you thrive! Whether you are just looking for someone to talk to, or are struggling with a mental wellness issue we’re here to help. Our highly talented therapists can help you with a range of issues including relationships, sex, PTSD, depression, social anxiety, or even just caring for yourself more. +
+
+
+
+
+
we can help you with
+
+
+
+ Weight Lifting +
+
+
+ Running & Spinning +
+
+
+ Pumping Iron +
+
+
+ Pumping Iron +
+
+
+
+
+ Physical Health +
+
+
+ Mental Health +
+
+
+ Nutrition +
+
+
+ Gymnastics +
+
+
+ Crossfit +
+
+
+ Aerobics +
+
+
+
+ Nutritional Plans +
Nutritional Facts on some shitty things that you don’t care about and even we don’t , I need to replace this copy.
+
+
+ Weight Loss +
Nutritional Facts on some shitty things that you don’t care about and even we don’t , I need to replace this copy.
+
+
+ Mental Peace +
Nutritional Facts on some shitty things that you don’t care about and even we don’t , I need to replace this copy.
+
+
+ Home Training +
Nutritional Facts on some shitty things that you don’t care about and even we don’t , I need to replace this copy.
+
+
+ Work/Life Balance +
Nutritional Facts on some shitty things that you don’t care about and even we don’t , I need to replace this copy.
+
+
+ Cardio +
Nutritional Facts on some shitty things that you don’t care about and even we don’t , I need to replace this copy.
+
+
+
+
+
+
+
+
+
you should also know
+
MDD affects more than 16.1 million American adults, or about 6.7%of the U.S. population age 18 and older in a given year. We at ThriveTalk can help you.
+ get help now +
+
+
+
+
+
+
contact us
+
Ready. Set. Smile
+
Take the free online assessment to see if you are a candidate and get started on your journey.
+ get help now +
+
+
+
+
+
+
+
+
+
some info
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.
+
+
+
enfold health
+
+ Main Street 1, Olcott
+ Buffalo, United States

+ +555 283 784 333
+ +
+
+
+
office hours
+
+ Mo-Fr: 8:00-19:00
Sa: 8:00-14:00
Su: closed +
+
+
+
+
+
+
+
Copyright - ThriveTalk 2017
+
+
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 2067b3fc..1f6d29cd 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,6 @@ @font-face { - font-family: "Roboto"; - src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); + font-family: "Larsseit"; + src: url("../fonts/Larsseit family/Larsseit.woff") format("woff"); font-weight: normal; font-style: normal; } diff --git a/src/styles/blocks/Mdd.scss b/src/styles/blocks/Mdd.scss new file mode 100644 index 00000000..8f556fe9 --- /dev/null +++ b/src/styles/blocks/Mdd.scss @@ -0,0 +1,106 @@ +.MDD { + background-color: #fff; + + &__content { + display: flex; + max-width: 1560px; + + @include mobile { + flex-direction: column; + } + + @include miniTablet { + flex-direction: column; + } + + &--photo { + background-image: url(../images/linkedin-sales-navigator-402831.svg); + background-repeat: no-repeat; + width: 100%; + height: 800px; + background-size: contain; + max-width: 100%; + + @include mobile { + background-size: 100% auto; + } + + @include miniTablet { + width: 100%; + background-size: 100% auto; + height: 1200px; + background-position: 0 50%; + } + } + + &--description { + display: flex; + flex-direction: column; + justify-content: space-between; + margin-top: 105px; + margin-left: 105px; + margin-bottom: 45px; + max-width: 680px; + + @include mobile { + margin-left: 20px; + margin-right: 20px; + text-align: justify; + } + + @include miniTablet { + align-self: end; + text-align: justify; + margin-right: 100px; + min-height: 500px; + } + + @include Tablet { + max-width: 400px; + min-width: 300px; + margin-left: auto; + margin-right: 50px; + } + + &-title { + font-size: 16px; + line-height: 12px; + letter-spacing: 0.06em; + color: #22356f; + text-transform: uppercase; + } + + &-text { + font-size: 36px; + line-height: 53px; + letter-spacing: -0.01em; + color: #22356f; + min-width: 300px; + + @include mobile { + margin: 40px 0; + font-size: 30px; + } + + &__link { + text-decoration: none; + color: #62d0df; + } + } + + &-link { + font-size: 16px; + line-height: 23px; + display: flex; + align-items: center; + letter-spacing: 0.1em; + color: #fab63e; + text-decoration: none; + + &:hover { + color: #62d111; + } + } + } + } +} diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 00000000..5f5f14d7 --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,44 @@ +.about { + background-color: #fff; + + &__content { + display: flex; + padding: 156px 100px 76px; + + @include mobile { + flex-direction: column; + padding: 100px 20px 76px; + } + + @include miniTablet { + flex-direction: column; + } + + &--title { + font-size: 16px; + line-height: 23px; + letter-spacing: 0.06em; + color: #22356f; + text-transform: uppercase; + margin-right: 220px; + min-width: 100px; + + @include mobile { + margin-bottom: 40px; + } + + @include miniTablet { + margin-bottom: 40px; + } + } + + &--text { + font-size: 24px; + line-height: 34px; + letter-spacing: 0.01em; + color: #22356f; + text-align: justify; + max-width: 592px; + } + } +} diff --git a/src/styles/blocks/all.scss b/src/styles/blocks/all.scss new file mode 100644 index 00000000..40df6ab9 --- /dev/null +++ b/src/styles/blocks/all.scss @@ -0,0 +1,9 @@ +* { + box-sizing: border-box; + scroll-behavior: smooth; +} + +a:hover { + transform: scale(1.05); + transition-duration: 0.5s; +} diff --git a/src/styles/blocks/burgerMenu.scss b/src/styles/blocks/burgerMenu.scss new file mode 100644 index 00000000..de07f528 --- /dev/null +++ b/src/styles/blocks/burgerMenu.scss @@ -0,0 +1,19 @@ +.burgerMenu { + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translateX(-100%); + transition: transform 0.3s; + background-color: #fff; + z-index: 1; + overflow-y: auto; + + &:target { + transform: translateX(0); + } + + @include Tablet { + display: none; + } +} diff --git a/src/styles/blocks/contact.scss b/src/styles/blocks/contact.scss new file mode 100644 index 00000000..c5f39f31 --- /dev/null +++ b/src/styles/blocks/contact.scss @@ -0,0 +1,112 @@ +.contact { + background-color: #22356f; + max-width: 1560px; + + &__content { + display: flex; + justify-content: space-between; + + @include mobile { + flex-direction: column; + } + + @include miniTablet { + flex-direction: column; + } + + &--description { + display: flex; + flex-direction: column; + max-width: 550px; + margin: 105px 0 0 180px; + + @include mobile { + margin: 100px 20px 50px; + } + + @include miniTablet { + margin: 180px 105px 30px; + max-width: 600px; + } + + @include Tablet { + max-width: 350px; + margin: 105px 20px 0 100px; + width: 430px; + } + + &-name { + font-size: 16px; + line-height: 12px; + letter-spacing: 0.06em; + color: #fff; + text-transform: uppercase; + } + + &-title { + font-size: 64px; + line-height: 94px; + letter-spacing: -0.01em; + color: #fff; + margin-top: 230px; + margin-bottom: 75px; + + @include mobile { + margin-top: 180px; + } + + @include Tablet { + margin-top: 180px; + margin-bottom: 30px; + font-size: 56px; + width: 430px; + } + } + + &-text { + font-size: 36px; + line-height: 53px; + letter-spacing: -0.01em; + color: #fff; + + @include mobile { + text-align: justify; + } + + @include miniTablet { + text-align: justify; + } + + @include Tablet { + width: 430px; + } + } + + &-link { + font-size: 16px; + line-height: 23px; + display: flex; + align-items: center; + letter-spacing: 0.1em; + color: #62d0df; + margin-top: 70px; + text-decoration: none; + + &:hover { + color: #62d111; + } + } + } + + &--photo { + background-image: url(../images/charles-etoroma-390119.svg); + width: 480px; + height: 800px; + background-repeat: no-repeat; + background-size: contain; + max-width: 100%; + margin: 0 auto; + margin-right: 0; + } + } +} diff --git a/src/styles/blocks/design.scss b/src/styles/blocks/design.scss new file mode 100644 index 00000000..18dfcf9b --- /dev/null +++ b/src/styles/blocks/design.scss @@ -0,0 +1,68 @@ +.design { + background-color: #fff9ea; + display: flex; + flex-direction: column; + width: 100%; + align-items: center; + + &__title { + font-family: "Halyard Display", sans-serif; + font-size: 48px; + line-height: 60px; + text-align: center; + color: #1e266d; + max-width: 1180px; + margin-top: 139px; + + @include miniTablet { + font-size: 40px; + } + } + + &__text { + font-style: normal; + font-weight: normal; + font-size: 21px; + line-height: 150%; + text-align: center; + color: #455880; + margin-top: 40px; + + @include miniTablet { + font-size: 18px; + } + } + + &__button { + background-color: #3751ff; + text-decoration: none; + border-radius: 25px; + height: 50px; + width: 148px; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 100%; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + margin-top: 40px; + } + + &__sertificates { + display: flex; + width: 1600px; + height: 539px; + margin-top: 37px; + box-sizing: border-box; + background-image: url(../images/sert/sert_all.png); + background-size: cover; + background-repeat: no-repeat; + + @include miniTablet { + width: 640px; + height: 200px; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 00000000..98cba9bb --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,29 @@ +.footer { + background-color: #62d0df; + + &__content { + display: flex; + height: 80px; + max-width: 1560px; + align-items: center; + margin-left: 180px; + + &--text { + font-size: 14px; + line-height: 11px; + letter-spacing: -0.01em; + color: #fff; + + &::before { + content: ""; + background-image: url(../images/c.svg); + background-repeat: no-repeat; + width: 9px; + height: 12px; + display: inline-block; + margin-bottom: -3px; + margin-right: 6px; + } + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 00000000..d81c5ef0 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,165 @@ +.header { + background-color: #f4f9e2; + position: relative; + + &__info { + display: flex; + flex-direction: column; + margin-left: 179px; + width: 480px; + + @include mobile { + margin: 0 20px; + width: 90%; + } + + @include miniTablet { + margin-left: 40px; + } + + &--logo { + font-size: 24px; + line-height: 27px; + letter-spacing: -0.04em; + color: #62d0df; + margin-bottom: 37px; + z-index: 1; + } + + &--title { + font-size: 48px; + line-height: 53px; + letter-spacing: -0.04em; + color: #22356f; + margin-bottom: 73px; + z-index: 1; + + @include mobile { + font-size: 36px; + margin-bottom: 35px; + text-align: center; + } + } + + &--text { + font-size: 24px; + line-height: 42px; + color: #22356f; + margin-bottom: 60px; + z-index: 1; + text-align: justify; + + @include mobile { + font-size: 20px; + margin-bottom: 30px; + text-align: center; + } + } + + &--button { + display: flex; + margin-bottom: 75px; + font-size: 16px; + line-height: 23px; + align-items: center; + letter-spacing: 0.1em; + + @include mobile { + flex-direction: column; + } + + &-1 { + width: 150px; + background-color: #f9b640; + height: 50px; + color: #fff; + margin-right: 35px; + text-decoration: none; + text-transform: uppercase; + display: flex; + justify-content: center; + align-items: center; + + @include mobile { + margin-bottom: 30px; + margin-right: 0; + } + } + + &-2 { + text-decoration: none; + color: #fab63e; + width: 150px; + height: 50px; + display: flex; + justify-content: center; + align-items: center; + text-transform: uppercase; + + &:hover { + background-color: #fff; + } + } + } + } + + &__images { + + &--white { + width: 320px; + height: 860px; + background-color: #fff; + position: absolute; + top: 0; + right: 0; + + @include mobile { + display: none; + } + + @include miniTablet { + display: none; + } + } + + &--oval { + background-image: url(../images/oval.png); + background-repeat: no-repeat; + width: 605px; + height: 705px; + background-size: contain; + position: absolute; + top: 0; + right: 0; + + @include mobile { + display: none; + } + + @include miniTablet { + width: 545px; + height: 635px; + } + } + + &--photo { + background-image: url(../images/Group.svg); + background-repeat: no-repeat; + width: 743px; + height: 824px; + background-size: contain; + position: absolute; + top: 0; + right: 0; + + @include mobile { + display: none; + } + + @include miniTablet { + width: 670px; + height: 742px; + } + } + } +} diff --git a/src/styles/blocks/help.scss b/src/styles/blocks/help.scss new file mode 100644 index 00000000..70a7ee5c --- /dev/null +++ b/src/styles/blocks/help.scss @@ -0,0 +1,200 @@ +.help { + background-color: #fff; + + &__content { + display: flex; + flex-direction: column; + + &--title { + text-transform: uppercase; + font-size: 16px; + line-height: 19px; + text-align: center; + letter-spacing: 0.06em; + color: rgba(34, 53, 111, 0.5); + margin-bottom: 24px; + } + + &--container { + width: 100%; + margin-bottom: 120px; + display: grid; + grid-template-columns: repeat(4, minmax(auto, 1fr)); + + @include mobile { + display: flex; + flex-direction: column; + } + + @include miniTablet { + grid-template-columns: repeat(2, minmax(auto, 1fr)); + } + + &-box { + height: 360px; + + &__shadow { + content: ""; + box-shadow: inset 0 -1px 0 #fff; + height: 72px; + margin-left: 50px; + margin-right: 50px; + } + + &__item { + font-size: 32px; + line-height: 34px; + letter-spacing: -0.01em; + color: #fff; + margin-top: 23px; + margin-left: 50px; + margin-right: 50px; + display: flex; + text-decoration: none; + + &::before { + content: ""; + width: 9px; + height: 9px; + background-color: #e9b730; + border-radius: 4.5px; + display: inline-block; + text-align: center; + margin-right: 20px; + margin-top: 12px; + } + } + + &__title { + font-size: 28px; + line-height: 33px; + letter-spacing: -0.03em; + color: #22356f; + text-decoration: none; + } + + &__text { + font-size: 16px; + line-height: 25px; + letter-spacing: -0.03em; + color: rgba(34, 53, 111, 0.5); + margin-top: 28px; + } + + &_1 { + background-color: #ffe2de; + + &:hover { + background-color: #ffe2d1; + } + } + + &_2 { + background-color: #c4e769; + + &:hover { + background-color: #c4e7ff; + } + } + + &_3 { + background-color: #62d0df; + + &:hover { + background-color: #62d000; + } + } + + &_4 { + background-color: #0052c1; + + &:hover { + background-color: #005200; + } + } + + &_5 { + background-color: #22356f; + height: 480px; + + &:hover { + background-color: #005200; + } + } + + &_6 { + background-color: #0052c1; + height: 480px; + + &:hover { + background-color: #005200; + } + } + + &_7 { + background-image: url(../images/joanna-kosinska-340748.svg); + background-size: cover; + background-repeat: no-repeat; + height: 480px; + + &:hover { + background-color: #005200; + } + } + + &_8 { + background-color: #62d0df; + height: 480px; + + &:hover { + background-color: #62d000; + } + } + + &_9 { + background-color: #dee1ff; + height: 480px; + + &:hover { + background-color: #dee100; + } + } + + &_10 { + background-color: #8f00ff; + height: 480px; + + &:hover { + background-color: #8f0011; + } + } + + &_11 { + background-color: #fff; + height: 240px; + padding: 55px 80px 0; + + &:hover { + background-color: #ffa; + } + } + } + } + + &--container2 { + width: 100%; + margin-bottom: 120px; + display: grid; + grid-template-columns: repeat(3, minmax(auto, 1fr)); + + @include mobile { + display: flex; + flex-direction: column; + } + + @include miniTablet { + grid-template-columns: repeat(2, minmax(auto, 1fr)); + } + } + } +} diff --git a/src/styles/blocks/info.scss b/src/styles/blocks/info.scss new file mode 100644 index 00000000..cb3e46d6 --- /dev/null +++ b/src/styles/blocks/info.scss @@ -0,0 +1,132 @@ +.info { + background-color: #fff; + max-width: 1560px; + display: flex; + position: relative; + // flex-direction: column; + justify-content: space-between; + + // @include Tablet { + // justify-content: center; + // } + @include mobile { + justify-content: center; + } + + @include miniTablet { + justify-content: center; + } + + &__photo { + background-image: url(../images/autumn-goodman-242825.svg); + width: 570px; + height: 380px; + background-repeat: no-repeat; + background-size: cover; + // position: absolute; + // top: 0; + // left: 0; + + @include mobile { + display: none; + } + + @include miniTablet { + display: none; + } + + @include Tablet { + display: none; + } + } + + &__content { + display: flex; + position: relative; + height: 380px; + align-items: center; + + + @include mobile { + height: 500px; + width: 300px; + justify-content: center; + align-items: center; + } + + @include miniTablet { + justify-content: center; + align-items: center; + } + + @include Tablet { + position: relative; + justify-content: center; + width: 100%; + } + + &--container { + display: flex; + // column-gap: 24px; + position: absolute; + right: 0; + // margin: 0 auto; + width: 700px; + + @include mobile { + flex-direction: column; + width: 250px; + } + + @include miniTablet { + position: relative; + width: 600px; + } + + @include Tablet { + position: relative; + } + + &-column { + display: flex; + flex-direction: column; + width: 240px; + margin-right: 20px; + border-right: 1px solid rgba(34, 53, 111, 0.5); + + @include mobile { + margin-bottom: 30px; + } + + &__title { + font-size: 14px; + line-height: 11px; + letter-spacing: -0.01em; + color: #22356f; + margin-bottom: 60px; + text-transform: uppercase; + + @include mobile { + margin-bottom: 10px; + } + } + + &__text { + font-size: 14px; + line-height: 23px; + letter-spacing: -0.01em; + color: rgba(34, 53, 111, 0.5); + text-decoration: none; + } + + &__email { + font-size: 14px; + line-height: 23px; + letter-spacing: -0.01em; + color: blue; + text-decoration: none; + } + } + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 00000000..757c84b1 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,129 @@ +.menu { + display: flex; + justify-content: space-between; + padding: 27px 179px 187px; + z-index: 1; + + @include mobile { + padding: 27px 20px 147px; + } + + @include miniTablet { + padding: 27px 40px 187px; + } + + &__nav { + height: 100vh; + background-color: #f4f9e2; + } + + &__button { + color: #62d0df; + display: flex; + flex-direction: column; + + @include miniTablet { + display: none; + } + + @include Tablet { + display: none; + } + + @include Notebook { + display: none; + } + + @include TheDesign { + display: none; + } + + @include FullHD { + display: none; + } + + &--item { + content: ""; + display: block; + border-bottom: 2px solid #62d0df; + height: 2px; + width: 25px; + padding-top: 4px; + } + } + + &__left { + font-size: 24px; + line-height: 27px; + letter-spacing: -0.04em; + color: #62d0df; + text-decoration: none; + + @include mobile { + font-size: 20px; + display: none; + } + } + + &__center { + display: flex; + justify-content: space-between; + width: 233px; + align-self: center; + z-index: 1; + height: 50px; + + @include mobile { + flex-direction: column; + align-items: center; + display: none; + } + + &-1 { + display: flex; + flex-direction: column; + } + + &--text { + font-size: 14px; + line-height: 16px; + color: #22356f; + text-decoration: none; + + &:hover { + box-shadow: inset 0 -1px 0 #22356f; + margin-bottom: 15px; + } + + @include mobile { + font-size: 16px; + margin-bottom: 30px; + } + + @include miniTablet { + font-size: 16px; + } + } + } + + &__right { + color: #fff; + background-color: #62d0df; + width: 150px; + height: 50px; + border-radius: 25px; + font-size: 14px; + line-height: 16px; + display: flex; + align-items: center; + justify-content: center; + text-transform: uppercase; + z-index: 1; + text-decoration: none; + + @include mobile { + font-size: 11px; + height: 40px; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 00000000..7466078a --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,18 @@ +.page { + font-family: "Larsseit", sans-serif; + font-weight: normal; + font-style: normal; + font-size: 24px; + margin: 0; + width: 100%; + overflow-x: hidden; + + &__body { + margin: 0 auto; + width: 100%; + min-width: 320px; + max-width: 1560px; + overflow-x: hidden; + background-color: rgb(201, 188, 188); + } +} diff --git a/src/styles/blocks/ready.scss b/src/styles/blocks/ready.scss new file mode 100644 index 00000000..9857b88d --- /dev/null +++ b/src/styles/blocks/ready.scss @@ -0,0 +1,86 @@ +.ready { + background-color: #3751ff; + display: flex; + width: 100%; + align-items: center; + justify-content: center; + + &__content { + display: flex; + width: 1180px; + justify-content: space-between; + margin: 88px 20px 115px; + + @include miniTablet { + flex-direction: column; + margin: 40px 20px 60px; + align-items: center; + justify-content: center; + } + } + + &__title { + font-family: "Halyard Display", sans-serif; + font-size: 48px; + line-height: 60px; + color: #fff; + + @include miniTablet { + font-size: 40px; + margin-bottom: 30px; + } + + @include Tablet { + font-size: 40px; + margin-bottom: 30px; + width: 330px; + } + } + + &__connect { + display: flex; + flex-direction: column; + + @include Tablet { + justify-content: center; + } + + &--button { + font-family: "Halyard Display", sans-serif; + font-size: 18px; + line-height: 110%; + display: flex; + align-items: center; + color: #455880; + width: 245px; + height: 56px; + background: #fff; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + border-radius: 28px; + text-decoration: none; + padding-left: 30px; + + &::before { + content: ""; + display: block; + background-image: url(../images/mail.png); + width: 29px; + height: 29px; + margin-right: 15px; + } + } + + &--text { + font-size: 16px; + line-height: 125%; + text-align: right; + color: #dfe0eb; + margin-top: 19px; + + &-studio { + color: yellow; + text-decoration: none; + } + } + } +} diff --git a/src/styles/blocks/talk.scss b/src/styles/blocks/talk.scss new file mode 100644 index 00000000..a1b4c36c --- /dev/null +++ b/src/styles/blocks/talk.scss @@ -0,0 +1,109 @@ +.talk { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + &__title { + font-family: "Halyard Display", sans-serif; + font-style: normal; + font-weight: 500; + font-size: 48px; + line-height: 60px; + text-align: center; + color: #1e266d; + margin-top: 232px; + + @include miniTablet { + font-size: 44px; + width: 280px; + } + } + + &__cards { + display: flex; + max-width: 1180px; + justify-content: center; + align-items: center; + column-gap: 30px; + margin-top: 56px; + margin-bottom: 150px; + + @include miniTablet { + flex-direction: column; + row-gap: 30px; + } + + @include Tablet { + flex-direction: column; + row-gap: 30px; + } + } + + &__card { + display: flex; + flex-direction: column; + align-items: center; + max-width: 373px; + height: 467px; + border: 1px solid rgba(69, 88, 128, 0.2); + border-radius: 4px; + + @include miniTablet { + margin: 0 20px; + height: 550px; + } + + &--text { + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 180%; + color: #455880; + padding: 38px 43px 0; + margin-bottom: 55px; + height: 195px; + + @include miniTablet { + height: 250px; + } + } + + &--photo { + width: 64px; + height: 64px; + + &-1 { + background-image: url(../images/cards/card1.png); + } + + &-2 { + background-image: url(../images/cards/card2.png); + } + + &-3 { + background-image: url(../images/cards/card3.png); + } + } + + &--name { + font-family: "Halyard Display", sans-serif; + font-size: 22px; + line-height: 125%; + text-align: center; + color: #1e266d; + margin-top: 23px; + } + + &--work { + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 180%; + text-align: center; + color: #455880; + margin-bottom: 32px; + text-decoration: none; + } + } +} diff --git a/src/styles/blocks/title.scss b/src/styles/blocks/title.scss new file mode 100644 index 00000000..7abd509f --- /dev/null +++ b/src/styles/blocks/title.scss @@ -0,0 +1,7 @@ +.title { + background-color: #f43333; + height: 840px; + margin-right: 0; + background-image: url(../images/fon.png); + background-size: cover; +} diff --git a/src/styles/blocks/titlePage.scss b/src/styles/blocks/titlePage.scss new file mode 100644 index 00000000..f9de5155 --- /dev/null +++ b/src/styles/blocks/titlePage.scss @@ -0,0 +1,365 @@ +.titlePage { + background: linear-gradient(180deg, rgba(242, 249, 255, 0.12) 0%, #fff 100%); + border-radius: 0; + width: 100%; + margin: 0 auto; + display: flex; + flex-direction: column; + + &__title { + font-family: "Halyard Display", sans-serif; + font-size: 56px; + line-height: 105%; + text-align: center; + color: #1e266d; + max-width: 1180px; + margin: 144px auto 0; + + @include miniTablet { + font-size: 40px; + margin: 100px 20px 0; + } + } + + &__text { + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 150%; + text-align: center; + color: #455880; + margin-top: 27px; + + @include miniTablet { + font-size: 14px; + } + } + + &__menu { + display: flex; + margin-top: 29px; + justify-content: center; + + @include miniTablet { + margin: 29px 20px 0; + } + + &--buy { + background-color: #3751ff; + border-radius: 25px; + width: 148px; + height: 50px; + text-decoration: none; + font-weight: normal; + font-size: 16px; + line-height: 100%; + display: flex; + justify-content: center; + align-items: center; + color: #fff; + margin-right: 22px; + } + + &--see { + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 50px; + text-align: center; + color: #455880; + background: #fff; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + border-radius: 25px; + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; + width: 200px; + height: 50px; + } + } + + &__images { + display: block; + width: 920px; + height: 570px; + margin: 32px auto 0; + + @include miniTablet { + background-image: url(../images/graphic_all.png); + background-repeat: no-repeat; + width: 90%; + background-size: contain; + } + + @include Tablet { + background-image: url(../images/graphic_all.png); + background-repeat: no-repeat; + width: 90%; + background-size: contain; + } + + &--layer1 { + + @include miniTablet { + display: none; + } + + @include Tablet { + display: none; + } + + &--1 { + display: inline-block; + background-image: url(../images/cube.png); + background-repeat: no-repeat; + width: 64px; + height: 64px; + position: relative; + top: 113px; + left: 760px; + } + + &--2 { + display: inline-block; + background-image: url(../images/triangle.png); + background-repeat: no-repeat; + background-size: contain; + width: 69px; + height: 71px; + position: relative; + top: -108px; + left: -68px; + } + + &--3 { + display: inline-block; + background-image: url(../images/ellipse1.png); + background-repeat: no-repeat; + background-size: contain; + width: 179px; + height: 179px; + position: relative; + top: 297px; + left: -130px; + } + + &--4 { + display: inline-block; + background-image: url(../images/ellipse2.png); + background-repeat: no-repeat; + background-size: cover; + width: 32px; + height: 32px; + position: relative; + top: -64px; + left: 540px; + } + } + + &--layer2 { + + @include miniTablet { + display: none; + } + + @include Tablet { + display: none; + } + + &--1 { + display: inline-block; + background-image: url(../images/card1.png); + background-repeat: no-repeat; + background-size: contain; + width: 800px; + height: 550px; + position: relative; + top: -720px; + left: 92px; + } + + &--2 { + display: inline-block; + background-image: url(../images/ui.png); + background-repeat: no-repeat; + background-size: cover; + width: 339px; + height: 408px; + position: relative; + top: -1247px; + left: 172px; + } + + &--3 { + display: inline-block; + background-image: url(../images/woman.png); + background-repeat: no-repeat; + background-size: contain; + width: 208px; + height: 450px; + position: relative; + top: -1212px; + left: 260px; + } + + &--4 { + display: inline-block; + background-image: url(../images/card2.png); + background-repeat: no-repeat; + background-size: contain; + width: 800px; + height: 550px; + position: relative; + top: -164px; + left: 92px; + } + + &--5 { + display: inline-block; + background-image: url(../images/face.png); + background-repeat: no-repeat; + background-size: cover; + width: 56px; + height: 56px; + position: relative; + top: -1540px; + left: -480px; + border-radius: 28px; + } + } + } + + &__trust { + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 27px; + text-align: center; + color: rgba(69, 88, 128, 0.5); + margin-top: 20px; + + @include miniTablet { + font-size: 14px; + margin: 20px; + } + } + + &__sites { + display: flex; + justify-content: center; + margin: 50px 20px 0; + + @include miniTablet { + flex-direction: column; + align-items: center; + margin-top: 20px; + row-gap: 20px; + } + + @include Tablet { + flex-direction: column; + align-items: center; + margin-top: 20px; + row-gap: 20px; + } + + &--1 { + background-image: url(../images/sites/logo-1.png); + height: 34px; + width: 110px; + background-size: contain; + background-repeat: no-repeat; + margin-right: 70px; + + @include miniTablet { + width: 80px; + margin-right: 0; + } + } + + &--2 { + background-image: url(../images/sites/logo-2.png); + height: 33px; + width: 95px; + display: inline-block; + background-size: contain; + background-repeat: no-repeat; + margin-right: 70px; + + @include miniTablet { + width: 80px; + margin-right: 0; + } + } + + &--3 { + background-image: url(../images/sites/logo-3.png); + height: 34px; + width: 80px; + background-size: contain; + background-repeat: no-repeat; + margin-right: 70px; + + @include miniTablet { + width: 80px; + margin-right: 0; + } + } + + &--4 { + background-image: url(../images/sites/logo-4.png); + height: 33px; + width: 174px; + background-size: contain; + background-repeat: no-repeat; + margin-right: 70px; + + @include miniTablet { + width: 80px; + margin-right: 0; + } + } + + &--5 { + background-image: url(../images/sites/logo-5.png); + height: 33px; + width: 115px; + background-size: contain; + background-repeat: no-repeat; + margin-right: 70px; + + @include miniTablet { + width: 80px; + margin-right: 0; + } + } + + &--6 { + background-image: url(../images/sites/logo-6.png); + height: 34px; + width: 102px; + background-size: contain; + background-repeat: no-repeat; + margin-right: 70px; + + @include miniTablet { + width: 80px; + margin-right: 0; + } + } + + &--7 { + background-image: url(../images/sites/logo-7.png); + height: 34px; + width: 71px; + background-size: contain; + background-repeat: no-repeat; + + @include Tablet { + margin-right: 0; + width: 80px; + } + } + } +} diff --git a/src/styles/blocks/why.scss b/src/styles/blocks/why.scss new file mode 100644 index 00000000..64022f3b --- /dev/null +++ b/src/styles/blocks/why.scss @@ -0,0 +1,86 @@ +.why { + background-color: #62d0df; + max-width: 1560px; + + &__content { + display: flex; + justify-content: space-between; + + @include mobile { + flex-direction: column; + } + + @include miniTablet { + flex-direction: column; + } + + &--description { + display: flex; + flex-direction: column; + max-width: 550px; + margin: 180px 0 0 180px; + + @include mobile { + margin: 100px 20px 50px; + } + + @include miniTablet { + margin: 180px 40px 0; + max-width: 600px; + } + + @include Tablet { + max-width: 350px; + margin: 70px 20px 0 100px; + } + + &-title { + font-size: 36px; + line-height: 27px; + letter-spacing: -0.01em; + color: #fff; + margin-bottom: 75px; + + @include Tablet { + margin-bottom: 30px; + } + } + + &-text { + font-size: 24px; + line-height: 35px; + color: #fff; + text-align: justify; + + &--1 { + font-size: 20px; + line-height: 29.3px; + } + + @include miniTablet { + margin-bottom: 60px; + } + } + } + + &--photo { + background-image: url(../images/christopher-campbell-40367.svg); + width: 525px; + height: 604px; + background-repeat: no-repeat; + background-size: contain; + max-width: 100%; + + @include mobile { + display: none; + } + + @include miniTablet { + width: 525px; + height: 604px; + margin: 0 auto; + margin-right: 0; + } + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e4..8d1b0067 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -2,6 +2,18 @@ @import "fonts"; @import "typography"; -body { - background: $c-gray; -} +// body { +// background: $c-gray; +// } +@import "blocks/page.scss"; +@import "blocks/header.scss"; +@import "blocks/all.scss"; +@import "blocks/menu.scss"; +@import "blocks/burgerMenu.scss"; +@import "blocks/why.scss"; +@import "blocks/about.scss"; +@import "blocks/help.scss"; +@import "blocks/MDD.scss"; +@import "blocks/contact.scss"; +@import "blocks/info.scss"; +@import "blocks/footer.scss"; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780..add8ee91 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,44 @@ #{$_property}: $_toValue; } } + +@mixin mobile { + @media (max-width: 639px) { + @content; + } +} + +@mixin miniTablet { + @media (min-width: 640px) and (max-width: 1023px) { + @content; + } +} + +@mixin Tablet { + @media (min-width: 1024px) and (max-width: 1279px) { + @content; + } +} + +@mixin Notebook { + @media (min-width: 1280px) and (max-width: 1599px) { + @content; + } +} + +@mixin TheDesign { + @media (min-width: 1600px) and (max-width:1919px) { + @content; + } +} + +@mixin FullHD { + @media (min-width: 1920px) { + @content; + } +} +@mixin LargeScreens { + @media (min-width: 2560px) { + @content; + } +}