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 9c2dbad5..56669506 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/aH 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/Thrive_talk/). + [DEMO LINK](https://Bogdan-Kotsupey.github.io/Thrive_talk/). 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..ffdb3283 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.1", + "resolved": "https://registry.npmjs.org/array-back/-/array-back-4.0.1.tgz", + "integrity": "sha512-Z/JnaVEXv+A9xabHzN43FiiiWEE7gPCRXMrVmRm00tWbjZRul1iHm7ECzlyNq1p4a4ATXz+G9FJ3GqGOkOV3fg==", + "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,15 @@ "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.8.10", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-0.8.10.tgz", + "integrity": "sha512-lKFXwHoZTg6Xd6eMS/82qSyjy79lfDTEbBcV/wgOkDqDJQXS9F4EXYO3ek1xEniNeX+AXrMcs57weumaJwGlJA==", "dev": true, "requires": { "commander": "^5.1.0", - "fs-extra": "^9.0.0" + "cross-env": "^7.0.3", + "fs-extra": "^9.1.0", + "open": "^7.4.2" } }, "@mate-academy/stylelint-config": { @@ -2774,6 +2901,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 +4489,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 +5431,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 +5741,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 +5781,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 +6932,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 +10980,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 fe21228a..cd3129ce 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.8.10", "@mate-academy/stylelint-config": "0.0.9", "colors": "^1.3.3", "eslint": "^5.16.0", diff --git a/src/fonts/Larsseit family/stylesheet.css b/src/fonts/Larsseit family/stylesheet.css index 03017ff8..cc1c0a22 100644 --- a/src/fonts/Larsseit family/stylesheet.css +++ b/src/fonts/Larsseit family/stylesheet.css @@ -1,144 +1,154 @@ @font-face { - font-family: 'Larsseit'; - src: url('Larsseit-MediumItalic.eot'); - src: local('Larsseit Medium Italic'), local('Larsseit-MediumItalic'), - url('Larsseit-MediumItalic.eot?#iefix') format('embedded-opentype'), - url('Larsseit-MediumItalic.woff2') format('woff2'), - url('Larsseit-MediumItalic.woff') format('woff'), - url('Larsseit-MediumItalic.ttf') format('truetype'); - font-weight: 500; - font-style: italic; + font-family: "Larsseit"; + src: url("Larsseit-MediumItalic.eot"); + src: local("Larsseit Medium Italic"), + local("Larsseit-MediumItalic"), + url("Larsseit-MediumItalic.eot?#iefix") format("embedded-opentype"), + url("Larsseit-MediumItalic.woff2") format("woff2"), + url("Larsseit-MediumItalic.woff") format("woff"), + url("Larsseit-MediumItalic.ttf") format("truetype"); + font-weight: 500; + font-style: italic; } @font-face { - font-family: 'Larsseit'; - src: url('Larsseit-Thin.eot'); - src: local('Larsseit Thin'), local('Larsseit-Thin'), - url('Larsseit-Thin.eot?#iefix') format('embedded-opentype'), - url('Larsseit-Thin.woff2') format('woff2'), - url('Larsseit-Thin.woff') format('woff'), - url('Larsseit-Thin.ttf') format('truetype'); - font-weight: 100; - font-style: normal; + font-family: "Larsseit"; + src: url("Larsseit-Thin.eot"); + src: local("Larsseit Thin"), + local("Larsseit-Thin"), + url("Larsseit-Thin.eot?#iefix") format("embedded-opentype"), + url("Larsseit-Thin.woff2") format("woff2"), + url("Larsseit-Thin.woff") format("woff"), + url("Larsseit-Thin.ttf") format("truetype"); + font-weight: 100; + font-style: normal; } @font-face { - font-family: 'Larsseit'; - src: url('Larsseit-LightItalic.eot'); - src: local('Larsseit Light Italic'), local('Larsseit-LightItalic'), - url('Larsseit-LightItalic.eot?#iefix') format('embedded-opentype'), - url('Larsseit-LightItalic.woff2') format('woff2'), - url('Larsseit-LightItalic.woff') format('woff'), - url('Larsseit-LightItalic.ttf') format('truetype'); - font-weight: 300; - font-style: italic; + font-family: "Larsseit"; + src: url("Larsseit-LightItalic.eot"); + src: local("Larsseit Light Italic"), + local("Larsseit-LightItalic"), + url("Larsseit-LightItalic.eot?#iefix") format("embedded-opentype"), + url("Larsseit-LightItalic.woff2") format("woff2"), + url("Larsseit-LightItalic.woff") format("woff"), + url("Larsseit-LightItalic.ttf") format("truetype"); + font-weight: 300; + font-style: italic; } @font-face { - font-family: 'Larsseit'; - src: url('Larsseit.eot'); - src: local('Larsseit'), - url('Larsseit.eot?#iefix') format('embedded-opentype'), - url('Larsseit.woff2') format('woff2'), - url('Larsseit.woff') format('woff'), - url('Larsseit.ttf') format('truetype'); - font-weight: normal; - font-style: normal; + font-family: "Larsseit"; + src: url("Larsseit.eot"); + src: local("Larsseit"), + url("Larsseit.eot?#iefix") format("embedded-opentype"), + url("Larsseit.woff2") format("woff2"), + url("Larsseit.woff") format("woff"), + url("Larsseit.ttf") format("truetype"); + font-weight: normal; + font-style: normal; } @font-face { - font-family: 'Larsseit'; - src: url('Larsseit-ExtraBold.eot'); - src: local('Larsseit ExtraBold'), local('Larsseit-ExtraBold'), - url('Larsseit-ExtraBold.eot?#iefix') format('embedded-opentype'), - url('Larsseit-ExtraBold.woff2') format('woff2'), - url('Larsseit-ExtraBold.woff') format('woff'), - url('Larsseit-ExtraBold.ttf') format('truetype'); - font-weight: 800; - font-style: normal; + font-family: "Larsseit"; + src: url("Larsseit-ExtraBold.eot"); + src: local("Larsseit ExtraBold"), + local("Larsseit-ExtraBold"), + url("Larsseit-ExtraBold.eot?#iefix") format("embedded-opentype"), + url("Larsseit-ExtraBold.woff2") format("woff2"), + url("Larsseit-ExtraBold.woff") format("woff"), + url("Larsseit-ExtraBold.ttf") format("truetype"); + font-weight: 800; + font-style: normal; } @font-face { - font-family: 'Larsseit'; - src: url('Larsseit-BoldItalic.eot'); - src: local('Larsseit Bold Italic'), local('Larsseit-BoldItalic'), - url('Larsseit-BoldItalic.eot?#iefix') format('embedded-opentype'), - url('Larsseit-BoldItalic.woff2') format('woff2'), - url('Larsseit-BoldItalic.woff') format('woff'), - url('Larsseit-BoldItalic.ttf') format('truetype'); - font-weight: bold; - font-style: italic; + font-family: "Larsseit"; + src: url("Larsseit-BoldItalic.eot"); + src: local("Larsseit Bold Italic"), + local("Larsseit-BoldItalic"), + url("Larsseit-BoldItalic.eot?#iefix") format("embedded-opentype"), + url("Larsseit-BoldItalic.woff2") format("woff2"), + url("Larsseit-BoldItalic.woff") format("woff"), + url("Larsseit-BoldItalic.ttf") format("truetype"); + font-weight: bold; + font-style: italic; } @font-face { - font-family: 'Larsseit'; - src: url('Larsseit-Light.eot'); - src: local('Larsseit Light'), local('Larsseit-Light'), - url('Larsseit-Light.eot?#iefix') format('embedded-opentype'), - url('Larsseit-Light.woff2') format('woff2'), - url('Larsseit-Light.woff') format('woff'), - url('Larsseit-Light.ttf') format('truetype'); - font-weight: 300; - font-style: normal; + font-family: "Larsseit"; + src: url("Larsseit-Light.eot"); + src: local("Larsseit Light"), + local("Larsseit-Light"), + url("Larsseit-Light.eot?#iefix") format("embedded-opentype"), + url("Larsseit-Light.woff2") format("woff2"), + url("Larsseit-Light.woff") format("woff"), + url("Larsseit-Light.ttf") format("truetype"); + font-weight: 300; + font-style: normal; } @font-face { - font-family: 'Larsseit'; - src: url('Larsseit-Bold.eot'); - src: local('Larsseit Bold'), local('Larsseit-Bold'), - url('Larsseit-Bold.eot?#iefix') format('embedded-opentype'), - url('Larsseit-Bold.woff2') format('woff2'), - url('Larsseit-Bold.woff') format('woff'), - url('Larsseit-Bold.ttf') format('truetype'); - font-weight: bold; - font-style: normal; + font-family: "Larsseit"; + src: url("Larsseit-Bold.eot"); + src: local("Larsseit Bold"), + local("Larsseit-Bold"), + url("Larsseit-Bold.eot?#iefix") format("embedded-opentype"), + url("Larsseit-Bold.woff2") format("woff2"), + url("Larsseit-Bold.woff") format("woff"), + url("Larsseit-Bold.ttf") format("truetype"); + font-weight: bold; + font-style: normal; } @font-face { - font-family: 'Larsseit'; - src: url('Larsseit-Italic.eot'); - src: local('Larsseit Italic'), local('Larsseit-Italic'), - url('Larsseit-Italic.eot?#iefix') format('embedded-opentype'), - url('Larsseit-Italic.woff2') format('woff2'), - url('Larsseit-Italic.woff') format('woff'), - url('Larsseit-Italic.ttf') format('truetype'); - font-weight: normal; - font-style: italic; + font-family: "Larsseit"; + src: url("Larsseit-Italic.eot"); + src: local("Larsseit Italic"), + local("Larsseit-Italic"), + url("Larsseit-Italic.eot?#iefix") format("embedded-opentype"), + url("Larsseit-Italic.woff2") format("woff2"), + url("Larsseit-Italic.woff") format("woff"), + url("Larsseit-Italic.ttf") format("truetype"); + font-weight: normal; + font-style: italic; } @font-face { - font-family: 'Larsseit'; - src: url('Larsseit-Medium.eot'); - src: local('Larsseit Medium'), local('Larsseit-Medium'), - url('Larsseit-Medium.eot?#iefix') format('embedded-opentype'), - url('Larsseit-Medium.woff2') format('woff2'), - url('Larsseit-Medium.woff') format('woff'), - url('Larsseit-Medium.ttf') format('truetype'); - font-weight: 500; - font-style: normal; + font-family: "Larsseit"; + src: url("Larsseit-Medium.eot"); + src: local("Larsseit Medium"), + local("Larsseit-Medium"), + url("Larsseit-Medium.eot?#iefix") format("embedded-opentype"), + url("Larsseit-Medium.woff2") format("woff2"), + url("Larsseit-Medium.woff") format("woff"), + url("Larsseit-Medium.ttf") format("truetype"); + font-weight: 500; + font-style: normal; } @font-face { - font-family: 'Larsseit'; - src: url('Larsseit-ExtraBoldItalic.eot'); - src: local('Larsseit ExtraBold Italic'), local('Larsseit-ExtraBoldItalic'), - url('Larsseit-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'), - url('Larsseit-ExtraBoldItalic.woff2') format('woff2'), - url('Larsseit-ExtraBoldItalic.woff') format('woff'), - url('Larsseit-ExtraBoldItalic.ttf') format('truetype'); - font-weight: 800; - font-style: italic; + font-family: "Larsseit"; + src: url("Larsseit-ExtraBoldItalic.eot"); + src: local("Larsseit ExtraBold Italic"), + local("Larsseit-ExtraBoldItalic"), + url("Larsseit-ExtraBoldItalic.eot?#iefix") format("embedded-opentype"), + url("Larsseit-ExtraBoldItalic.woff2") format("woff2"), + url("Larsseit-ExtraBoldItalic.woff") format("woff"), + url("Larsseit-ExtraBoldItalic.ttf") format("truetype"); + font-weight: 800; + font-style: italic; } @font-face { - font-family: 'Larsseit'; - src: url('Larsseit-ThinItalic.eot'); - src: local('Larsseit Thin Italic'), local('Larsseit-ThinItalic'), - url('Larsseit-ThinItalic.eot?#iefix') format('embedded-opentype'), - url('Larsseit-ThinItalic.woff2') format('woff2'), - url('Larsseit-ThinItalic.woff') format('woff'), - url('Larsseit-ThinItalic.ttf') format('truetype'); - font-weight: 100; - font-style: italic; + font-family: "Larsseit"; + src: url("Larsseit-ThinItalic.eot"); + src: local("Larsseit Thin Italic"), + local("Larsseit-ThinItalic"), + url("Larsseit-ThinItalic.eot?#iefix") format("embedded-opentype"), + url("Larsseit-ThinItalic.woff2") format("woff2"), + url("Larsseit-ThinItalic.woff") format("woff"), + url("Larsseit-ThinItalic.ttf") format("truetype"); + font-weight: 100; + font-style: italic; } - diff --git a/src/images/Rectangle 3.1.png b/src/images/Rectangle 3.1.png new file mode 100644 index 00000000..e31336bd Binary files /dev/null and b/src/images/Rectangle 3.1.png differ diff --git a/src/images/also-know.svg b/src/images/also-know.svg new file mode 100644 index 00000000..622760d0 --- /dev/null +++ b/src/images/also-know.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/footer-smile.svg b/src/images/footer-smile.svg new file mode 100644 index 00000000..04c64c5a --- /dev/null +++ b/src/images/footer-smile.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/girl.svg b/src/images/girl.svg new file mode 100644 index 00000000..41d7c737 --- /dev/null +++ b/src/images/girl.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..da05a62e --- /dev/null +++ b/src/images/linkedin-sales-navigator-406825.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/images/naclon.svg b/src/images/naclon.svg new file mode 100644 index 00000000..c3e4e04a --- /dev/null +++ b/src/images/naclon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/nutrition.svg b/src/images/nutrition.svg new file mode 100644 index 00000000..a7b13bc0 --- /dev/null +++ b/src/images/nutrition.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/oval.png b/src/images/oval.png new file mode 100644 index 00000000..1877da67 Binary files /dev/null and b/src/images/oval.png differ diff --git a/src/images/smile.svg b/src/images/smile.svg new file mode 100644 index 00000000..ee3eb222 --- /dev/null +++ b/src/images/smile.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/twoMan.png b/src/images/twoMan.png new file mode 100644 index 00000000..a35bd3f4 Binary files /dev/null and b/src/images/twoMan.png differ diff --git a/src/index.html b/src/index.html index 5d357bd6..439673e0 100644 --- a/src/index.html +++ b/src/index.html @@ -5,9 +5,324 @@ Title + -

Hello Mate Academy

+
+
+ + +
+ + 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! +

+
+
+ girl-on-the-streat +
+
+
+ +
+

+ 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. +

+
+ +
+
+
+ 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. +

+
+
+
+ +
+
+
+

+ 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 + + can help you. +

+ + GET HELP NOW + +
+
+ +
+
+
+

Ready. Set. Smile

+

+ Take the free online assessment to
see if you are a candidateand get
started on your journey. +

+ + GET HELP NOW + +
+
+
+
+
+ +
+
+
+
+
+

+ SOME INFO +

+

+ Lorem ipsum dolor sit amet,
consectetuer adipiscingelit.
Aenean commodo ligula. +

+
+
+

+ ENFOLD HEALTH +

+

+ Main Street 1, Olcott
+ Buffalo, United States

+ + +555 283 784 333
+ office@enfold-health.com + +

+
+
+

+ OFFICE HOURS +

+

+ Mo-Fr: 8:00-19:00
+ Sa: 8:00-14:00
+ Su: closed +

+
+
+
+
+

© Copyright - ThriveTalk 2017

+
+
diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7..704c8e2a 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,8 @@ 'use strict'; + +document.querySelector('.header__menu') + .addEventListener('click', function() { + document.querySelector('.header__menu div').classList.toggle('active'); + document.querySelector('.header__menu').classList.toggle('active'); + document.querySelector('.nav').classList.toggle('animate'); + }); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 2067b3fc..9a046e90 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"); + src: url("../fonts/Larsseit\ family/") format("woff"); font-weight: normal; font-style: normal; } diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 00000000..11e2366a --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,60 @@ +.about { + text-align: center; + + &__info { + padding: 10px; + + font-size: 18px; + // font-size: 24px; + // line-height: 34px; + line-height: 25px; + + &::before { + padding: 30px; + text-align: center; + display: block; + content: "ABOUT US"; + line-height: 23px; + font-size: 16px; + color: $veryDarkBlue; + } + + &::after { + display: block; + content: "WE CAN HELP YOU WITH"; + padding: 30px; + + font-size: 16px; + line-height: 19px; + text-align: center; + color: rgba(34, 53, 111, 0.5); + } + } +} + +@media (min-width: 600px) { + .about { + display: flex; + justify-content: center; + &__info { + max-width: 592px; + } + } +} + +@media (min-width: 1000px) { + .about { + &__info { + padding: 10px; + + font-size: 24px; + line-height: 34px; + + &::before { + position: relative; + right: 450px; + top: 60px; + } + } + } +} diff --git a/src/styles/blocks/additional-info.scss b/src/styles/blocks/additional-info.scss new file mode 100644 index 00000000..80e1bd0e --- /dev/null +++ b/src/styles/blocks/additional-info.scss @@ -0,0 +1,85 @@ +.additional-info { + max-width: 1600px; + margin: 0 auto; + display: flex; + flex-direction: column; + + &__photo { + height: 190px; + background: center/ cover no-repeat url(../images/footer-smile.svg); + } + + &__container { + display: flex; + flex-direction: column; + margin: 0 auto; + align-items: baseline; + padding: 40px; + } + + &__title { + font-size: 14px; + line-height: 11px; + padding-bottom: 20px; + } + + &__text { + margin: 0 auto; + padding-bottom: 40px; + font-size: 14px; + line-height: 23px; + color: rgba(34, 53, 111, 0.5); + } + + &__link { + text-decoration: none; + color: $softCyan; + } +} + +@media (min-width: 600px) { + .additional-info { + &__text { + padding-right: 20px; + } + + &__block { + display: inline-block; + } + + &__container { + display: flex; + flex-direction: row; + justify-content: space-evenly; + margin: 0; + } + } +} + +@media (min-width: 900px) { + .additional-info { + flex-direction: row; + + &__photo { + width: 50%; + height: 380px; + max-width: 560px; + } + + &__container { + width: 100%; + padding: 100px 10px; + display: flex; + flex-direction: row; + justify-content: space-evenly; + padding-left: 30px; + } + + &__text { + padding-bottom: 10px; + font-size: 14px; + line-height: 23px; + color: rgba(34, 53, 111, 0.5); + } + } +} diff --git a/src/styles/blocks/also-know.scss b/src/styles/blocks/also-know.scss new file mode 100644 index 00000000..0e862ff9 --- /dev/null +++ b/src/styles/blocks/also-know.scss @@ -0,0 +1,153 @@ +.also-know { + max-width: 1600px; + margin: 0 auto; + display: flex; + flex-direction: column; + + &__photo { + display: none; + } + + &__container { + padding: 20px; + } + + &__text { + width: 90%; + position: relative; + padding: 50px 0; + font-size: 16px; + line-height: 30px; + color: #22356f; + + &::before { + position: absolute; + content: "YOU SHOULD ALSO KNOW"; + top: 1px; + // left: 20px; + + font-size: 16px; + line-height: 12px; + } + } + + &__link { + font-size: 1em; + width: fit-content; + position: relative; + bottom: 20px; + text-decoration: none; + color: $brightOrange; + cursor: pointer; + border: $brightOrange 0.13em solid; + border-radius: 0.3em; + padding: 0.25em 1.2em; + + text-shadow: 0 0 0.13em hsl(0, 0%, 100% / 0.5), 0 0 0.45em $brightOrange; + box-shadow: inset 0 0 0.5em 0 $brightOrange, 0 0 0.5em 0 $brightOrange; + + &::before { + pointer-events: none; + content: ""; + position: absolute; + background: $brightOrange; + top: 120%; + left: 0; + width: 100%; + height: 100%; + + transform: perspective(1em) rotateX(40deg) scale(1, 0.35); + filter: blur(1em); + opacity: 0.7; + } + + &::after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + box-shadow: 0 0 1em 0.5em $brightOrange; + opacity: 0; + transition: opacity 100ms linear; + } + + &:hover::before, + &:focus::before { + opacity: 1; + } + + &:hover::after, + &:focus::after { + opacity: 1; + } + + &:hover, + &:focus { + background-color: $brightOrange; + color: $White; + text-shadow: none; + } + } + + &__logo { + text-decoration: none; + color: $softCyan; + } +} + +@media (min-width: 600px) { + .also-know { + flex-direction: row; + align-items: center; + + &__text { + &::before { + top: -50px; + } + } + + &__photo { + display: block; + height: 400px; + background: center/ cover no-repeat url("../images/also-know.svg"); + width: 100%; + max-width: 480px; + } + + &__link { + font-size: 20px; + top: 10px; + } + + &__container { + display: flex; + flex-direction: column; + justify-content: flex-end; + width: 100%; + } + } +} + +@media (min-width: 1024px) { + .also-know { + &__photo { + height: 800px; + } + + &__link { + font-size: 30px; + top: 50px; + } + + &__text { + font-size: 40px; + line-height: 50px; + &::before { + font-size: 20px; + top: -140px; + } + } + } +} diff --git a/src/styles/blocks/box--6.scss b/src/styles/blocks/box--6.scss new file mode 100644 index 00000000..54857251 --- /dev/null +++ b/src/styles/blocks/box--6.scss @@ -0,0 +1,34 @@ +.box-6 { + font-size: 32px; + line-height: 34px; + color: $White; + + &::before { + position: relative; + top: -24px; + right: 10px; + content: ""; + display: block; + width: 120%; + height: 1px; + background-color: $White; + } + + &::after { + position: relative; + top: -25px; + left: -15px; + content: ""; + display: block; + width: 9px; + height: 9px; + border-radius: 50%; + background-color: $brightOrange; + } + + &:hover, + &:focus { + transform: scale(1.1); + transition: linear 0.5s; + } +} diff --git a/src/styles/blocks/box-text.scss b/src/styles/blocks/box-text.scss new file mode 100644 index 00000000..259943d3 --- /dev/null +++ b/src/styles/blocks/box-text.scss @@ -0,0 +1,11 @@ +.box-text { + display: flex; + flex-direction: column; + // justify-content: center; + // align-content: center; + align-items: center; + font-size: 16px; + line-height: 25px; + + color: rgba(34, 53, 111, 0.5); +} diff --git a/src/styles/blocks/box.scss b/src/styles/blocks/box.scss new file mode 100644 index 00000000..6ee24dbd --- /dev/null +++ b/src/styles/blocks/box.scss @@ -0,0 +1,34 @@ +.box { + text-align: center; + font-size: 28px; + line-height: 34px; + color: $White; + + &::before { + position: relative; + top: -24px; + right: 10px; + content: ""; + display: block; + width: 100%; + height: 1px; + background-color: $White; + } + + &::after { + position: relative; + top: -25px; + left: -15px; + content: ""; + display: block; + width: 9px; + height: 9px; + border-radius: 50%; + background-color: $brightOrange; + } + + &:hover { + transform: scale(1.1); + transition: linear 0.5s; + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 00000000..61d7ebe6 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,11 @@ +.button { + width: 150px; + height: 50px; + + text-align: center; + + &__link { + color: $White; + text-decoration: none; + } +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 00000000..080d604e --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,180 @@ +.contact-us { + padding-left: 30px; + display: flex; + justify-content: center; + background-color: $veryDarkBlue; + + &__container { + width: 100%; + display: flex; + justify-content: flex-end; + max-width: 1600px; + position: relative; + } + + &__text-container { + margin: 0 auto; + } + + &__title { + padding-top: 60px; + color: $White; + + &::before { + position: relative; + bottom: 30px; + content: "CONTACT US"; + display: block; + color: $White; + font-size: 16px; + line-height: 12px; + } + } + + &__photo { + display: none; + } + + &__text { + font-size: 15px; + line-height: 30px; + + color: $White; + padding: 55px 0; + } + + &__link { + font-size: 1em; + width: fit-content; + position: relative; + bottom: 40px; + text-decoration: none; + color: $softCyan; + cursor: pointer; + border: $softCyan 0.13em solid; + border-radius: 0.3em; + padding: 0.25em 1.2em; + + text-shadow: 0 0 0.13em hsl(0, 0%, 100% / 0.5), 0 0 0.45em $softCyan; + box-shadow: inset 0 0 0.5em 0 $softCyan, 0 0 0.5em 0 $softCyan; + + &::before { + pointer-events: none; + content: ""; + position: absolute; + background: $softCyan; + top: 120%; + left: 0; + width: 100%; + height: 100%; + + transform: perspective(1em) rotateX(40deg) scale(1, 0.35); + filter: blur(1em); + opacity: 0.7; + } + + &::after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + box-shadow: 0 0 1em 0.5em $softCyan; + opacity: 0; + transition: opacity 100ms linear; + } + + &:hover::before, + &:focus::before { + opacity: 1; + } + + &:hover::after, + &:focus::after { + opacity: 1; + } + + &:hover, + &:focus { + background-color: $softCyan; + color: $veryDarkBlue; + text-shadow: none; + } + } +} + +@media (min-width: 600px) { + .contact-us { + &__text { + font-size: 35px; + line-height: 35px; + } + &__title { + padding-top: 60px; + + font-size: 35px; + line-height: 60px; + color: $White; + + &::before { + position: relative; + bottom: 30px; + content: "CONTACT US"; + display: block; + color: $White; + } + } + + &__text-container { + display: flex; + flex-direction: column; + justify-content: flex-end; + padding-bottom: 100px; + padding-right: 20px; + } + + &__photo { + display: block; + height: 100%; + width: 50%; + background: center/ cover no-repeat url(../images/smile.svg); + max-width: 480px; + max-height: 800px; + } + + &__link { + font-size: 2em; + bottom: 0; + } + } +} + +@media (min-width: 1024px) { + .contact-us { + &__photo { + width: 100%; + height: 800px; + } + + &__text { + font-size: 38px; + line-height: 50px; + padding: 55px 0; + } + + &__title { + font-size: 50px; + line-height: 60px; + &::before { + position: relative; + bottom: 130px; + content: "CONTACT US"; + display: block; + color: $White; + font-size: 16px; + line-height: 12px; + } + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 00000000..8cee27ba --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,11 @@ +.copyright { + height: 80px; + background-color: $softCyan; + color: $White; + + &__text { + text-align: center; + position: relative; + top: 35px; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 00000000..2aa078c8 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,138 @@ +.header { + padding: 0 40px; + background: #f4f9e2; + + &__container { + max-width: 1600px; + margin: 0 auto; + max-height: 840px; + display: flex; + justify-content: space-evenly; + } + + &__logo { + height: fit-content; + margin: 35px 0 180px; + text-decoration: none; + cursor: pointer; + + font-size: 24px; + line-height: 27px; + color: #62d0df; + + &:hover, + &:focus { + transition: 0.5s linear; + transform: scale(1.22); + } + } + + &__menu { + z-index: 1; + padding-top: 58px; + position: relative; + width: 30px; + height: 20px; + cursor: pointer; + + @media (min-width: 690px) { + display: none; + } + + div { + position: absolute; + bottom: 9px; + width: 100%; + height: 2px; + border-radius: 2px; + background-color: $softCyan; + } + + &::before, + &::after { + content: ""; + position: absolute; + width: 100%; + height: 2px; + border-radius: 2px; + background-color: $softCyan; + transition: 0.5s; + } + + &::before { + bottom: 18px; + } + + &::after { + bottom: 0; + } + } + + &__menu div.active { + visibility: hidden; + } + + &__menu.active::before { + transition: 0.5s; + bottom: 10px; + transform: rotate(45deg); + } + + &__menu.active::after { + transition: 0.5s; + bottom: 10px; + transform: rotate(-45deg); + } + + &__nav { + margin-top: 30px; + position: relative; + z-index: 1; + } + + &__button { + display: none; + padding: 19px 0; + text-align: center; + z-index: 1; + cursor: pointer; + background-color: $softCyan; + border-radius: 50px; + + &:hover, + &:focus { + transform: scale(1.22); + transition: 1s linear; + } + } +} + +@media (min-width: 690px) { + .header { + &__button { + display: block; + margin: 23px 0 0; + } + + &__container { + height: 150px; + } + } +} + +@media (min-width: 1024px) { + .header { + &__photo { + position: absolute; + right: 0; + bottom: 0; + width: 570px; + height: 590px; + background: center/ cover no-repeat url(../images/oval.png); + } + + &__button { + margin: 23px 20px 0 0; + } + } +} diff --git a/src/styles/blocks/health.scss b/src/styles/blocks/health.scss new file mode 100644 index 00000000..d723df28 --- /dev/null +++ b/src/styles/blocks/health.scss @@ -0,0 +1,51 @@ +.health { + max-width: 1600px; + margin: 0 auto; + display: flex; + flex-direction: column; + font-size: 32px; + line-height: 34px; + color: $White; + + &__container { + display: flex; + justify-content: center; + align-items: center; + height: 260px; + + &:nth-child(1) { + background: #22356f; + } + &:nth-child(2) { + background: #0052c1; + } + &:nth-child(3) { + background: center/ cover no-repeat url(../images/nutrition.svg); + } + &:nth-child(4) { + background-color: $softCyan; + } + &:nth-child(5) { + background-color: #dee1ff; + } + &:nth-child(6) { + background-color: #8f00ff; + } + } +} + +@media (min-width: 600px) { + .health { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(3, 1fr); + } +} + +@media (min-width: 850px) { + .health { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 1fr); + } +} diff --git a/src/styles/blocks/help-block.scss b/src/styles/blocks/help-block.scss new file mode 100644 index 00000000..d8a71df9 --- /dev/null +++ b/src/styles/blocks/help-block.scss @@ -0,0 +1,38 @@ +.help-block { + display: flex; + flex-direction: column; + + &__container { + display: flex; + justify-content: center; + align-items: center; + height: 260px; + + &:nth-child(1) { + background-color: #ffe2de; + } + &:nth-child(2) { + background-color: #c4e769; + } + &:nth-child(3) { + background-color: $softCyan; + } + &:nth-child(4) { + background-color: $strongBlue; + } + } +} + +@media (min-width: 520px) { + .help-block { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: auto; + } +} + +@media (min-width: 1150px) { + .help-block { + grid-template-columns: repeat(4, 1fr); + } +} diff --git a/src/styles/blocks/info-block.scss b/src/styles/blocks/info-block.scss new file mode 100644 index 00000000..c1b05b58 --- /dev/null +++ b/src/styles/blocks/info-block.scss @@ -0,0 +1,58 @@ +.info-block { + max-width: 1600px; + margin: 0 auto; + padding: 50px; + + &__container { + // padding: 30px 40px 20px; + padding-bottom: 30px; + } + + &__title { + text-align: center; + font-size: 28px; + line-height: 33px; + color: #22356f; + padding-bottom: 28px; + } + + &__text { + text-align: center; + width: 50%; + } +} + +@media (min-width: 900px) { + .info-block { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 1fr); + + &__container { + padding: 30px 40px 20px; + } + + &__title { + font-size: 25px; + line-height: 33px; + color: #22356f; + padding-bottom: 28px; + } + + &__text { + width: 100%; + } + } +} + +@media (min-width: 1024px) { + .info-block { + &__title { + white-space: nowrap; + } + &__text { + font-size: 16px; + line-height: 23px; + } + } +} diff --git a/src/styles/blocks/info.scss b/src/styles/blocks/info.scss new file mode 100644 index 00000000..e53fdfba --- /dev/null +++ b/src/styles/blocks/info.scss @@ -0,0 +1,95 @@ +.info { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + position: relative; + + &__title { + font-size: 24px; + // line-height: 54px; + line-height: 25px; + padding: 10px 0; + + @media (min-width: 510px) { + font-size: 34px; + line-height: 38px; + padding-bottom: 34px; + } + } + + &__button-container { + display: flex; + } + + &__text { + width: 80%; + font-size: 14px; + // line-height: 42px; + line-height: 24px; + + @media (min-width: 600px) { + font-size: 20px; + line-height: 30px; + width: 50%; + } + } + + &__box { + padding: 19px 0; + margin: 40px 0 80px; + background-color: $brightOrange; + cursor: pointer; + transition: transform 1s; + + &:hover, + &:focus { + transform: scale(1.22); + transition: 1s linear; + } + } + + &__button { + padding-top: 55px; + } + + &__link { + display: block; + text-decoration: none; + padding-left: 18px; + font-size: 14px; + line-height: 23px; + color: $brightOrange; + cursor: pointer; + + &:hover, + &:focus { + transform: scale(1.22); + transition: 1s linear; + } + } +} + +@media (min-width: 1024px) { + .info { + display: flex; + flex-direction: column; + align-items: flex-start; + + max-width: 1600px; + margin: 0 auto; + text-align: start; + + &__title { + font-size: 48px; + line-height: 54px; + padding-bottom: 80px; + } + + &__text { + font-size: 24px; + line-height: 42px; + width: 40%; + } + } +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 00000000..2e672abe --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,6 @@ +.logo { + font-size: 24px; + line-height: 27px; + color: $softCyan; + padding-bottom: 20px; +} diff --git a/src/styles/blocks/main__help-block.scss b/src/styles/blocks/main__help-block.scss new file mode 100644 index 00000000..bd5b7740 --- /dev/null +++ b/src/styles/blocks/main__help-block.scss @@ -0,0 +1,5 @@ +.main__help-block { + max-width: 1600px; + margin: 0 auto; + margin-bottom: 30px; +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 00000000..d7eb9693 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,76 @@ +.nav { + position: absolute; + visibility: hidden; + color: $veryDarkBlue; + width: 100%; + + &.animate { + visibility: visible; + } + + &__list { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 1fr); + justify-items: center; + padding-top: 90px; + list-style: none; + + font-size: 14px; + line-height: 16px; + + color: #22356f; + } + + &__item { + padding: 0 10px 20px; + height: max-content; + } + + &__link { + color: $veryDarkBlue; + padding: 10px; + text-decoration: none; + + font-size: 14px; + line-height: 16px; + + &:hover, + &:focus { + color: $softCyan; + transition: 0.5s linear; + } + } +} + +@media (min-width: 690px) { + .nav { + visibility: visible; + display: flex; + justify-content: space-evenly; + position: relative; + + &__list { + display: flex; + padding: 0; + } + + &__item { + padding: 10px 3px 0; + + &:hover, + &:focus { + transform: scale(1.22); + transition: 0.3s linear; + border-bottom: 1px solid $veryDarkBlue; + } + } + + &__link { + &:hover, + &:focus { + color: $veryDarkBlue; + } + } + } +} diff --git a/src/styles/blocks/reset.scss b/src/styles/blocks/reset.scss new file mode 100644 index 00000000..a1cc5756 --- /dev/null +++ b/src/styles/blocks/reset.scss @@ -0,0 +1,36 @@ +* { + box-sizing: border-box; +} + +@font-face { + font-family: "Larsseit"; + font-style: normal; + font-weight: 400; + src: local("Larsseit"), + url("../fonts/Larsseit\ family/Larsseit.woff2") format("woff2"), + url("../fonts/Larsseit\ family/Larsseit.woff") format("woff"); +} + +html { + font-family: "Larsseit", Arial, Helvetica, sans-serif; + color: $veryDarkBlue; + scroll-behavior: smooth; +} + +p, +h1, +h2, +h3, +ul, +li, +button, +a { + margin: 0; + padding: 0; +} + +body { + margin: 0; + font-size: 14px; + line-height: 16px; +} diff --git a/src/styles/blocks/why-thrive.scss b/src/styles/blocks/why-thrive.scss new file mode 100644 index 00000000..db63e193 --- /dev/null +++ b/src/styles/blocks/why-thrive.scss @@ -0,0 +1,94 @@ +.why-thrive { + display: flex; + justify-content: center; + background-color: $softCyan; + color: $White; + + &__title { + padding-top: 70px; + padding-left: 50px; + + font-size: 36px; + line-height: 10px; + color: $White; + } + + &__strong { + font-size: 20px; + font-weight: bold; + } + + &__text { + padding: 30px 30px 46px; + font-size: 18px; + line-height: 25px; + } + + &__girl { + display: none; + } +} + +@media (min-width: 650px) { + .why-thrive { + &__container { + position: relative; + display: grid; + grid-template-columns: 1fr 1fr; + justify-content: space-between; + max-width: 1600px; + } + + &__title { + padding-bottom: 30px; + } + + &__strong { + font-size: 18px; + font-weight: bold; + } + + &__text { + font-size: 14px; + line-height: 18px; + } + + &__girl { + display: block; + img { + object-fit: cover; + width: 100%; + + @media (max-width: 1300px) { + height: 100%; + } + } + } + } +} + +@media (min-width: 800px) { + .why-thrive { + &__title { + padding-top: 150px; + } + + &__strong { + font-size: 30px; + line-height: 50px; + font-weight: bold; + } + + &__text { + font-size: 30px; + line-height: 40px; + // width: 80%; + } + + &__girl { + img { + object-position: left; + } + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e4..e71c157f 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,22 @@ @import "utils"; -@import "fonts"; @import "typography"; - -body { - background: $c-gray; -} +// @import "fonts"; +@import "src/styles/blocks/reset"; +@import "src/styles/blocks/header"; +@import "src/styles/blocks/button"; +@import "src/styles/blocks/info"; +@import "src/styles/blocks/logo"; +@import "src/styles/blocks/nav"; +@import "src/styles/blocks/why-thrive"; +@import "src/styles/blocks/about"; +@import "src/styles/blocks/box"; +@import "src/styles/blocks/help-block"; +@import "src/styles/blocks/main__help-block"; +@import "src/styles/blocks/box--6"; +@import "src/styles/blocks/health"; +@import "src/styles/blocks/box-text"; +@import "src/styles/blocks/also-know"; +@import "src/styles/blocks/contact-us"; +@import "src/styles/blocks/additional-info"; +@import "src/styles/blocks/footer"; +@import "src/styles/blocks/info-block"; diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ff..930ef1e5 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,6 @@ $c-gray: #eee; +$softCyan: #62d0df; +$White: #fff; +$brightOrange: #fab63e; +$veryDarkBlue: #22356f; +$strongBlue: #bed9ff;