diff --git a/.bemlintrc.json b/.bemlintrc.json new file mode 100644 index 00000000..22a597e5 --- /dev/null +++ b/.bemlintrc.json @@ -0,0 +1,16 @@ +{ + "elementDivider": "__", + "modifierDivider": "--", + "ignore": [ + "node_modules", + "dist" + ], + "rules": { + "one-block": true, + "one-element": true, + "element-inside-parent-block": true, + "no-double-element": true, + "no-neighbour-parent-block": true, + "modifiable-class": true + } +} diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index a64ccfac..340cff5c 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -19,5 +19,11 @@ jobs: uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - - run: npm ci + - run: npm install - run: npm start & sleep 5 && npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/.gitignore b/.gitignore index 0f8d3cf7..549c139a 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,4 @@ node_modules # Generated files backstop_data dist +.cache diff --git a/README.md b/README.md index 9c2dbad5..f2874dfb 100644 --- a/README.md +++ b/README.md @@ -1,41 +1,7 @@ -# Thrive_talk landing page -Implement landing page according to [Figma design](https://www.figma.com/file/aHd2rHMrnzDXhowLuIQjIyVQ/ThriveTalk-Landing-Page?node-id=0%3A1) - Use BEM and SCSS -- Large screens 2560px -- Full HD 1920px -- The design 1600px -- Notebook 1280px -- Tablet 1024 -- Mobile (> 320px) +# Thrive-talk -1. Implement the header with `nav`. -1. Implement `Helping you thrive in all areas of life` block. -1. Implement `Why Thrive?` block. -1. Implement `About us` block. -1. Implement `We can help you with` block with the card reused 3 times. -1. Implement block with 6 cards (`Physical Health`, `Mental Health`, `Nutrition`, - `Gymnastics`, `Crossfit`, `Aerobics`). -1. Implement block with 6 text-cards (`Nutritional Plans`, `Weight Loss`, `Mental Peace`, - `Home Training`, `Work/Life Balance`, `Cardio`). -1. Implement `You should also know` block. -1. Implement `Contact us` block. -1. Implement blocks: `Some info`, `Enfold health`, `Office hourse`. -1. Implement footer. +1. Stack: HTML5, CSS3, SASS(SCSS), JS. +2. Fully responsive layout. +3. [DEMO LINK](https://volodymyrklepykov.github.io/Thrive-talk/) +4. [Figma design](https://www.figma.com/file/aHd2rHMrnzDXhowLuIQjIyVQ/ThriveTalk-Landing-Page?node-id=0%3A1) -## Instructions -1. **Fork** the repo. -2. **Clone** the forked one. (The project link should have your name but not `mate-academy`) -3. Run `npm install` (or just `npm i`). -4. Run `npm start`. -5. Open one more terminal window for the next steps. -6. `git checkout -b develop` - to create new branch and switch on it. -7. Write you code in `src` folder. -8. Run `npm run lint` and fix code style errors. -9. Run `npm run deploy` to deploy your solution to `gh-pages`. -10. `git add . && git commit -m 'write a short description of the changes you made'` to save your changes. -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/). -14. Copy `DEMO LINK` to the PR description. - -> To update you PR repeat steps 7-11. diff --git a/package-lock.json b/package-lock.json index e330c949..5c6d7699 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1186,6 +1186,131 @@ } } }, + "@mate-academy/bemlint": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@mate-academy/bemlint/-/bemlint-0.1.1.tgz", + "integrity": "sha512-fhY7PfaUDZpe/DU1qJRW3AO5Tuua9HLm8ZIgVD7HijerZi8QIsC/R+NfcGPQfo9eVD4FDf4Jba0vTzSAO5ayJg==", + "dev": true, + "requires": { + "chalk": "^4.1.0", + "commander": "^7.1.0", + "cosmiconfig": "^7.0.0", + "parse5": "^6.0.1", + "table-layout": "^1.0.1" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "array-back": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/array-back/-/array-back-4.0.2.tgz", + "integrity": "sha512-NbdMezxqf94cnNfWLL7V/im0Ub+Anbb0IoZhvzie8+4HJ4nMQuzHuy49FkGYCJK2yAloZ3meiB6AVMClbrI1vg==", + "dev": true + }, + "chalk": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz", + "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "dev": true + }, + "cosmiconfig": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz", + "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==", + "dev": true, + "requires": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + } + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + } + }, + "parse5": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", + "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==", + "dev": true + }, + "path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + }, + "table-layout": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/table-layout/-/table-layout-1.0.2.tgz", + "integrity": "sha512-qd/R7n5rQTRFi+Zf2sk5XVVd9UQl6ZkduPFC3S7WEGJAmetDTjY3qPN50eSKzwuzEyQKy5TN2TiZdkIjos2L6A==", + "dev": true, + "requires": { + "array-back": "^4.0.1", + "deep-extend": "~0.6.0", + "typical": "^5.2.0", + "wordwrapjs": "^4.0.0" + } + } + } + }, "@mate-academy/eslint-config": { "version": "0.0.12", "resolved": "https://registry.npmjs.org/@mate-academy/eslint-config/-/eslint-config-0.0.12.tgz", @@ -1206,13 +1331,25 @@ "dev": true }, "@mate-academy/scripts": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-0.2.0.tgz", - "integrity": "sha512-17i1Kdc+8D6CqypX+0MsHXIt299nA90JVUU2CyNb/Rrw2oPMUVwImbHCK6dJYJlZ6GRF2CV5zRBauVHLmldPFw==", + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-0.9.0.tgz", + "integrity": "sha512-3RUTNaNY5m+h1NSoiMpJVTZ/odDBAZEaIDPiiVkaJZlc+mvCTtNdGH/qUc/R5nauYEdCXALJQeXE94ZnwmGQog==", "dev": true, "requires": { + "@types/get-port": "^4.2.0", "commander": "^5.1.0", - "fs-extra": "^9.0.0" + "cross-env": "^7.0.3", + "fs-extra": "^9.1.0", + "get-port": "^5.1.1", + "open": "^7.4.2" + }, + "dependencies": { + "get-port": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/get-port/-/get-port-5.1.1.tgz", + "integrity": "sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==", + "dev": true + } } }, "@mate-academy/stylelint-config": { @@ -1389,6 +1526,15 @@ "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==", "dev": true }, + "@types/get-port": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/@types/get-port/-/get-port-4.2.0.tgz", + "integrity": "sha512-Iv2FAb5RnIk/eFO2CTu8k+0VMmIR15pKbcqRWi+s3ydW+aKXlN2yemP92SrO++ERyJx+p6Ie1ggbLBMbU1SjiQ==", + "dev": true, + "requires": { + "get-port": "*" + } + }, "@types/glob": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz", @@ -2774,6 +2920,58 @@ "sha.js": "^2.4.8" } }, + "cross-env": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz", + "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==", + "dev": true, + "requires": { + "cross-spawn": "^7.0.1" + }, + "dependencies": { + "cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "requires": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + } + }, + "path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true + }, + "shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "requires": { + "shebang-regex": "^3.0.0" + } + }, + "shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true + }, + "which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "requires": { + "isexe": "^2.0.0" + } + } + } + }, "cross-spawn": { "version": "6.0.5", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", @@ -4310,15 +4508,15 @@ "dev": true }, "fs-extra": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.0.tgz", - "integrity": "sha512-pmEYSk3vYsG/bF651KPUXZ+hvjpgWYw/Gc7W9NFUe3ZVLczKKWIij3IKpOrQcdw4TILtibFslZ0UmR8Vvzig4g==", + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz", + "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==", "dev": true, "requires": { "at-least-node": "^1.0.0", "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", - "universalify": "^1.0.0" + "universalify": "^2.0.0" } }, "fs.realpath": { @@ -5252,6 +5450,12 @@ "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=", "dev": true }, + "is-docker": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", + "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==", + "dev": true + }, "is-extendable": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz", @@ -5556,6 +5760,12 @@ "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==", "dev": true }, + "json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "dev": true + }, "json-schema": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz", @@ -5590,13 +5800,13 @@ } }, "jsonfile": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.0.1.tgz", - "integrity": "sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", "dev": true, "requires": { "graceful-fs": "^4.1.6", - "universalify": "^1.0.0" + "universalify": "^2.0.0" } }, "jsprim": { @@ -6741,6 +6951,27 @@ "mimic-fn": "^1.0.0" } }, + "open": { + "version": "7.4.2", + "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz", + "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==", + "dev": true, + "requires": { + "is-docker": "^2.0.0", + "is-wsl": "^2.1.1" + }, + "dependencies": { + "is-wsl": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", + "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", + "dev": true, + "requires": { + "is-docker": "^2.0.0" + } + } + } + }, "opn": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/opn/-/opn-5.3.0.tgz", @@ -10768,9 +10999,9 @@ } }, "universalify": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz", - "integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", "dev": true }, "unquote": { diff --git a/package.json b/package.json index fe21228a..b8a32c93 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.0", "@mate-academy/stylelint-config": "0.0.9", "colors": "^1.3.3", "eslint": "^5.16.0", diff --git a/src/images/autumn-goodman.png b/src/images/autumn-goodman.png new file mode 100644 index 00000000..e609caee Binary files /dev/null and b/src/images/autumn-goodman.png differ diff --git a/src/images/charles-etoroma.png b/src/images/charles-etoroma.png new file mode 100644 index 00000000..66d149c0 Binary files /dev/null and b/src/images/charles-etoroma.png differ diff --git a/src/images/christopher-campbell.png b/src/images/christopher-campbell.png new file mode 100644 index 00000000..1099015b Binary files /dev/null and b/src/images/christopher-campbell.png differ diff --git a/src/images/close-x.svg b/src/images/close-x.svg new file mode 100644 index 00000000..8cdeca10 --- /dev/null +++ b/src/images/close-x.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/favicon.ico b/src/images/favicon.ico new file mode 100644 index 00000000..04260643 Binary files /dev/null and b/src/images/favicon.ico differ diff --git a/src/images/hamburger-menu.svg b/src/images/hamburger-menu.svg new file mode 100644 index 00000000..b83a7f67 --- /dev/null +++ b/src/images/hamburger-menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/ice-strawberry.png b/src/images/ice-strawberry.png new file mode 100644 index 00000000..d37e833e Binary files /dev/null and b/src/images/ice-strawberry.png differ diff --git a/src/images/linkedin-sales-navigator.png b/src/images/linkedin-sales-navigator.png new file mode 100644 index 00000000..fbfaecb1 Binary files /dev/null and b/src/images/linkedin-sales-navigator.png differ diff --git a/src/images/linkedin-sales.png b/src/images/linkedin-sales.png new file mode 100644 index 00000000..ce13a38c Binary files /dev/null and b/src/images/linkedin-sales.png differ diff --git a/src/index.html b/src/index.html index 5d357bd6..be599e40 100644 --- a/src/index.html +++ b/src/index.html @@ -3,11 +3,329 @@ - Title + Thrivetalk + -

Hello Mate Academy

+
+
+
+ + + +

Thrivetalk

+ + Contact us +
+
+
+ Thrivetalk +
+
+ 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 I AM + WHAT DO I DO +
+
+
+
+ boy with teacher +
+
+
+
+
+
+
+
+ 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! +
+
+
+ woman doing yoga +
+
+
+
+
+ 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 +
+ +
+
+ +
+ + 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. +
+
+
+
+
+ bissness partners +
+
+
+ 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 + +
+
+ man laughs +
+
+
+
+ Woman laughs on her head with a wreath of flowers + +
+
+
+
+
+ © +
+
+ Copyright - ThriveTalk 2021 +
+
+
diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7..59a55e15 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,13 @@ 'use strict'; + +const list = document.querySelector('.nav__list'); +const button = document.querySelector('.header__button'); +const checkbox = document.querySelector('.header__toggler'); + +list.addEventListener('click', () => { + checkbox.checked = false; +}); + +button.addEventListener('click', () => { + checkbox.checked = false; +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 2067b3fc..00000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: "Roboto"; - src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46..00000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 1366a06a..00000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "utils/vars"; -@import "utils/mixins"; -@import "utils/extends"; diff --git a/src/styles/blocks/_about-us.scss b/src/styles/blocks/_about-us.scss new file mode 100644 index 00000000..1efa81cd --- /dev/null +++ b/src/styles/blocks/_about-us.scss @@ -0,0 +1,41 @@ +.about-us { + position: relative; + padding-top: 75px; + display: flex; + justify-content: center; + align-items: center; + margin: 0 auto 75px; + max-width: 1200px; + + &__title { + position: absolute; + @include font (16px, 23px, 0.06em); + left: 60px; + top: 80px; + + color: $color-text-and-contact-us; + } + + &__content { + display: block; + max-width: 550px; + @include font (24px, 34px, 0.05em); + + color: $color-text-and-contact-us; + } + + @media (max-width: 955px) { + &__title { + position: static; + margin-bottom: 30px; + } + & { + flex-direction: column; + padding: 5vw 6vw; + margin: 3vw 0; + } + &__content { + padding-bottom: 4vw; + } + } +} diff --git a/src/styles/blocks/_contact-us.scss b/src/styles/blocks/_contact-us.scss new file mode 100644 index 00000000..b8af4e4e --- /dev/null +++ b/src/styles/blocks/_contact-us.scss @@ -0,0 +1,81 @@ +.contact-us { + background: #22356f; + width: 100%; + + &__container { + display: flex; + justify-content: space-between; + margin: 0 auto; + max-width: 1200px; + } + + &__content { + padding: 7vw 6vw; + } + &__item { + @include font (16px, 12px, 0.06em); + + color: $white-color; + } + &__title { + @include font (64px, 94px, -0.01em); + + padding: 15vw 0 0; + color: $white-color; + + } + + &__text { + @include font (36px, 54px, -0.01em); + + padding: 5vw 0; + color: $white-color; + } + + &__link { + @include font (16px, 23px, 0.01em); + display: flex; + align-items: center; + + color: $why-thrive; + } + + &__img { + object-fit: cover; + height: 100%; + } + + @media (max-width: 955px) { + &__container { + position: relative; + flex-direction: column; + justify-content: center; + align-items: center; + } + &__title { + @include font (30px, 94px, -0.01em); + } + + &__text { + @include font (20px, 34px, -0.01em); + } + + &__content { + z-index: 1; + background: rgba(34, 53, 111, 0.5); + } + &__img { + position: absolute; + top: 50%; + left: 50%; + + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + + opacity: 0.5; + transform: translate(-50%, -50%); + } + } +} diff --git a/src/styles/blocks/_course.scss b/src/styles/blocks/_course.scss new file mode 100644 index 00000000..d016ccc6 --- /dev/null +++ b/src/styles/blocks/_course.scss @@ -0,0 +1,48 @@ +.course { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 200px); + align-items: center; + margin: 40px auto 0; + max-width: 1200px; + + &__item { + padding: 0 30px 0 70px; + + } + + &__title { + @include font (28px, 33px, -0.03em); + + color: $color-text-and-contact-us; + margin: 20px 0; + + } + + &__text { + max-width: 280px; + @include font (16px, 25px, -0.03em); + + color: rgba(34, 53, 111, 0.5); + } + + @media (max-width: 955px) { + grid-template-columns: repeat(2, 50%); + grid-template-rows: repeat(3, 200px); + &__item { + padding: 0 35px; + + } + } + + @media (max-width: 670px) { + grid-template-columns: repeat(1, 100%); + grid-template-rows: repeat(6, 200px); + &__item { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + } +} diff --git a/src/styles/blocks/_footer.scss b/src/styles/blocks/_footer.scss new file mode 100644 index 00000000..5ecb8b94 --- /dev/null +++ b/src/styles/blocks/_footer.scss @@ -0,0 +1,22 @@ +.footer { + height: 80px; + background: $why-thrive; + width: 100%; + position: relative; + + &__content { + max-width: 1200px; + margin: 0 auto; + padding: 0 6vw; + height: 100%; + display: flex; + justify-content: flex-start; + align-items: center; + @include font (14px, 11px, -0.01em); + color: $white-color; + } + + &__item { + margin-left: 10px; + } +} diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss new file mode 100644 index 00000000..4219cf16 --- /dev/null +++ b/src/styles/blocks/_header.scss @@ -0,0 +1,193 @@ +.header { + width: 100%; + background: linear-gradient(to right, $color-header 80%, $white-color 20%); + + &__hidden { + position: absolute; + overflow: hidden; + height: 1px; + width: 1px; + padding: 0; + border: 0; + color: $color-header; + } + &__container { + margin: 0 auto; + max-height: 70vw; + max-width: 1200px; + position: relative; + padding: 27px 6vw 75px; + } + + &__top { + display: flex; + align-items: center; + justify-content: space-between; + height: 70px; + } + + &__logo { + @extend %title; + } + + &__ellipse { + top: 100px; + right: 0; + position: absolute; + width: 600px; + height: 350px; + background: #edfdff; + border-radius: 312px; + transform: matrix(-0.5, 0.87, 0.87, 0.5, 0, 0); + } + + &__image { + top: 150px; + right: -30px; + position: absolute; + width: 600px; + height: 350px; + border-radius: 312px; + object-fit: contain; + object-position: left; + overflow: hidden; + transform: rotate(-30deg); + + } + + &__img { + position: absolute; + left: 10px; + top: -90px; + width: 850px; + height: 640px; + object-fit: contain; + object-position: left; + transform: rotate(30deg); + } + + &__button { + width: 150px; + height: 50px; + display: flex; + justify-content: center; + align-items: center; + + background: #62d0df; + border-radius: 50px; + @include font (14px, 16px, normal); + color: $white-color; + text-transform: uppercase; + z-index: 1; + } + + @media (max-width: 1150px) { + background: $color-header; + position: relative; + min-height: 750px; + + &__ellipse { + display: none; + } + &__image { + display: none; + } + + } + + &__burger { + position: absolute; + top: 35px; + right: 10vw; + + width: 18px; + height: 12px; + + background-image: url(../images/hamburger-menu.svg); + background-position: center; + background-size: contain; + background-repeat: no-repeat; + visibility: hidden; + + cursor: pointer; + transition: transform 0.3s; + + &:hover { + transform: scale(1.4); + } + } + + &__toggler { + display: none; + &:checked ~ .header__burger { + width: 26px; + height: 20px; + z-index: 2; + + background-image: url(../images/close-x.svg); + background-position: center; + background-size: contain; + background-repeat: no-repeat; + } + + &:checked ~ .header__menu { + padding: 0; + display: block; + width: 100%; + height: 100vh; + position: absolute; + top: 0; + left: 0; + background-color: #cde5e9; + } + + &:checked ~ .header__top { + padding-bottom: 20px; + } + &:checked ~ .header__button { + position: absolute; + top: 350px; + left: 50.5%; + height: 30px; + width: 100px; + margin-left: -50px; + @include font (14px, 16px, normal); + visibility: visible; + } + } + @media (max-width: 670px) { + &__top { + display: block; + } + + &__menu { + display: none; + } + + &__button { + visibility: hidden; + } + + &__burger { + visibility: visible; + } + } + @media (max-width: 670px) { + min-height: 700px; + } + @media (max-width: 400px) { + &__container { + padding: 27px 6vw 20px; + } + min-height: 800px; + } + @media (max-width: 530px) { + min-height: 730px; + } + @media (max-width: 520px) { + min-height: 780px; + } + @media (max-width: 320px) { + min-height: 870px; + } +} diff --git a/src/styles/blocks/_health.scss b/src/styles/blocks/_health.scss new file mode 100644 index 00000000..98c8b688 --- /dev/null +++ b/src/styles/blocks/_health.scss @@ -0,0 +1,82 @@ +.health { + display: grid; + grid-template-columns: repeat(3, minmax(200px , 1fr)); + grid-template-rows: repeat(2, minmax(200px , 400px)); + justify-content: center; + margin: 0 auto; + max-width: 1200px; + + @media (max-width: 955px) { + grid-template-columns: repeat(2, 50%); + grid-template-rows: repeat(3, 300px); + } + + @media (max-width: 670px) { + grid-template-columns: 100%; + grid-template-rows: repeat(6, 300px); + + } + + &__box-empty { + border-bottom: 1px solid $white-color; + box-shadow: inset 0 -1px 0 $white-color; + width: 80%; + margin: 75px auto 23px; + } + + &__list { + position: absolute; + @include font (32px, 34px, -0.01em); + + color: $white-color; + display: block; + max-width: 157px; + top: 95px; + left: 20%; + + } + + &__item { + position: relative; + + &:hover { + animation: decrease 0.5s linear 1; + border-radius: 10px; + } + + &:before { + content: ""; + position: absolute; + left: 12%; + top: 105px; + + width: 9px; + height: 9px; + + background-color: #e9b730; + border-radius: 50%; + } + + &:nth-child(1) { + background-color: #22356f; + } + &:nth-child(2) { + background-color: #0052c1; + } + &:nth-child(3) { + background-image: url(../images/ice-strawberry.png); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + } + &:nth-child(4) { + background-color: #62d0df; + } + &:nth-child(5) { + background-color: #dee1ff; + } + &:nth-child(6) { + background-color: #8f00ff; + } + } +} diff --git a/src/styles/blocks/_help-you.scss b/src/styles/blocks/_help-you.scss new file mode 100644 index 00000000..ede3340e --- /dev/null +++ b/src/styles/blocks/_help-you.scss @@ -0,0 +1,85 @@ +.help-you { + margin: 0 auto; + max-width: 1200px; + + &__title { + @include font (16px, 19px, 0.06em); + text-align: center; + + color: rgba(34, 53, 111, 0.5); + margin-bottom: 24px; + } + + &__cards { + position: relative; + width: 100%; + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: minmax(300px, 1fr); + margin-bottom: 120px; + + @media (max-width: 955px) { + grid-template-columns: repeat(2, 50%); + grid-template-rows: repeat(2, 250px); + } + + @media (max-width: 670px) { + grid-template-columns: 1fr; + grid-template-rows: repeat(4, 200px); + } + } + + &__item { + position: relative; + list-style-type: disc; + @include font (32px, 34px, -0.01em); + + color: #fff; + + &:hover { + border-radius: 10px; + z-index: 1; + animation: sway 1s linear 1; + } + + &:before { + content: ""; + position: absolute; + left: 9%; + top: 90px; + + width: 9px; + height: 9px; + + background-color: #e9b730; + border-radius: 50%; + } + + &:nth-child(1) { + background-color: #ffe2de; + } + &:nth-child(2) { + background-color: #c4e769; + } + &:nth-child(3) { + background-color: #62d0df; + } + &:nth-child(4) { + background-color: #0052c1; + } + + } + + &__box-empty { + border-bottom: 1px solid $white-color; + width: 80%; + margin: 55px auto 23px; + } + + &__list { + position: absolute; + max-width: 200px; + top: 75px; + left: 20%; + } +} diff --git a/src/styles/blocks/_info.scss b/src/styles/blocks/_info.scss new file mode 100644 index 00000000..9c07dd25 --- /dev/null +++ b/src/styles/blocks/_info.scss @@ -0,0 +1,64 @@ +.info { + max-width: 485px; + margin-top: 75px; + + &__title { + @extend %title; + margin: 107px 0 3vw; + } + + &__item { + @include font (48px, 53px, -0.03em); + font-weight: bold; + color: $color-text-and-contact-us; + margin-bottom: 70px; + } + + &__text { + @include font (24px, 42px, normal); + max-width: 470px; + + color: $color-text-and-contact-us; + } + + &__link { + margin-top: 3vw; + display: flex; + + } + + &__link-element { + @include font (16px, 23px, 0.1em); + align-items: center; + color: $color-link; + width: 150px; + height: 50px; + display: flex; + justify-content: center; + + &:nth-child(2) { + margin-left: 25px; + } + &:nth-child(1) { + background: $color-button; + padding: 10px 30px; + + color: $white-color; + } + } + + @media (max-width: 400px) { + margin-top: 20px; + &__title { + margin: 1px 0 3vw; + } + &__link { + flex-direction: column; + } + &__link-element { + &:nth-child(2) { + margin-left: 0; + } + } + } +} diff --git a/src/styles/blocks/_nav.scss b/src/styles/blocks/_nav.scss new file mode 100644 index 00000000..70f30480 --- /dev/null +++ b/src/styles/blocks/_nav.scss @@ -0,0 +1,80 @@ +.nav { + z-index: 1; + position: relative; + + &__list { + display: flex; + } + + &__item { + position: relative; + margin-left: 50px; + @include font (14px, 16px, normal); + padding-bottom: 10px; + + color: $color-text-and-contact-us; + + &:first-child { + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + + width: 100%; + height: 2px; + + background-color: $color-text-and-contact-us; + border-radius: 8px; + } + } + } + + @media (max-width: 850px) { + &__item:nth-child(1) { + margin: 0; + } + + &__list { + padding: 0; + } + } + @media (max-width: 670px) { + + &__list { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: absolute; + top: 100px; + left: 50%; + margin-left: -36.5px; + row-gap: 20px; + + z-index: 1; + } + &__item { + margin: 0; + + &:first-child { + &::after { + content: ""; + position: absolute; + bottom: 10px; + left: 0; + + width: 100%; + height: 2px; + + background-color: $color-text-and-contact-us; + border-radius: 8px; + } + } + } + + &__link { + @include font (20px, 24px, normal); + } + } +} diff --git a/src/styles/blocks/_office.scss b/src/styles/blocks/_office.scss new file mode 100644 index 00000000..1049696d --- /dev/null +++ b/src/styles/blocks/_office.scss @@ -0,0 +1,91 @@ +.office { + display: flex; + max-width: 1200px; + margin: 0 auto; + + &__img { + width: 40%; + object-fit: cover; + } + + &__content { + display: flex; + padding-left: 3vw; + } + + &__item { + max-width: 210px; + padding: 8vw 2vw 4vw 0; + + &:nth-child(3) { + min-width: 140px; + } + } + + &__title { + @include font (14px, 16px, -0.01em); + + color: $color-text-and-contact-us; + padding-bottom: 3vw; + } + + &__text { + max-width: 210px; + @include font (14px, 23px, -0.01em); + padding-right: 1vw; + + color: rgba(34, 53, 111, 0.5); + &-active { + margin-top: 20px; + } + } + + @media (max-width: 955px) { + position: relative; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0 4vw; + + &__img { + position: absolute; + top: 50%; + left: 50%; + + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + + opacity: 0.2; + transform: translate(-50%, -50%); + } + + } + + @media (max-width: 500px) { + position: relative; + + &__content { + display: flex; + flex-direction: column; + justify-content: start; + z-index: 1; + padding-right: 45vw; + } + + &__img { + position: absolute; + top: 50%; + left: 50%; + + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + + opacity: 0.2; + transform: translate(-50%, -50%); + } + } +} diff --git a/src/styles/blocks/_why-thrive.scss b/src/styles/blocks/_why-thrive.scss new file mode 100644 index 00000000..e8d7a26e --- /dev/null +++ b/src/styles/blocks/_why-thrive.scss @@ -0,0 +1,70 @@ +.why-thrive { + background: $why-thrive; + width: 100%; + + &__container { + margin: 0 auto; + max-width: 1200px; + display: flex; + justify-content: space-between; + } + + &__content { + padding: 0 6vw; + } + + &__title { + @include font (36px, 27px, -0.01em); + padding: 75px 0; + margin-top: 75px; + + color: $white-color; + } + + &__text { + @include font (24px, 35px, normal); + padding-bottom: 75px; + color: $white-color; + + } + + &__text_bold { + font-size: 24px; + font-weight: bold; + } + + &__img { + object-fit: cover; + object-position: left; + height: 100%; + } + + @media (max-width: 955px) { + position: relative; + justify-content: center; + align-items: center; + &__content { + padding: 0 6vw; + background: $why-thrive; + width: 100%; + } + &__img { + position: absolute; + top: 50%; + left: 50%; + + width: 100%; + height: 100%; + + opacity: 0.2; + transform: translate(-50%, -50%); + } + + &__text { + z-index: 1; + } + &__title { + z-index: 1; + } + } +} diff --git a/src/styles/blocks/_you-know.scss b/src/styles/blocks/_you-know.scss new file mode 100644 index 00000000..46f419ab --- /dev/null +++ b/src/styles/blocks/_you-know.scss @@ -0,0 +1,70 @@ +.you-know { + display: flex; + justify-content: space-between; + margin: 50px auto 0; + max-width: 1200px; + + &__content { + padding: 4vw; + } + + &__img { + object-fit: cover; + height: 100%; + } + + &__title { + @include font (16px, 20px, 0.06em); + + color: $color-text-and-contact-us; + } + + &__text { + @include font (36px, 53px, -0.01em); + padding: 9vw 0 8vw; + + color: $color-text-and-contact-us; + + &_active { + color: $why-thrive; + } + } + + &__link { + @include font (16px, 23px, 0.01em); + display: flex; + align-items: center; + + color: $color-link; + } + + @media (max-width: 955px) { + position: relative; + flex-direction: column; + justify-content: center; + align-items: center; + + &__text { + @include font (20px, 34px, -0.01em); + } + + &__content { + z-index: 1; + padding: 4vw 6vw; + } + &__img { + position: absolute; + top: 50%; + left: 50%; + + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + + opacity: 0.2; + transform: translate(-50%, -50%); + } + + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e4..482bbfe8 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,19 @@ -@import "utils"; -@import "fonts"; -@import "typography"; - -body { - background: $c-gray; -} +@import "./utils/variables.scss"; +@import "./utils/normalize.scss"; +@import "./utils/reset.scss"; +@import "./utils/mixin.scss"; +@import "./utils/extends.scss"; +@import "./utils/keyframes.scss"; +@import "./utils/fonts.scss"; +@import "./blocks/health.scss"; +@import "./blocks/help-you.scss"; +@import "./blocks/about-us.scss"; +@import "./blocks/why-thrive.scss"; +@import "./blocks/course.scss"; +@import "./blocks/you-know.scss"; +@import "./blocks/contact-us.scss"; +@import "./blocks/office.scss"; +@import "./blocks/footer.scss"; +@import "./blocks/nav.scss"; +@import "./blocks/info.scss"; +@import "./blocks/header.scss"; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index a1a5dd0e..6751c988 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,4 @@ -%h1 { - font-family: "Roboto", sans-serif; - font-weight: 400; +%title { + @include font (24px, 27px, -0.04em); + color: $why-thrive; } diff --git a/src/styles/utils/_fonts.scss b/src/styles/utils/_fonts.scss new file mode 100644 index 00000000..c127c598 --- /dev/null +++ b/src/styles/utils/_fonts.scss @@ -0,0 +1,6 @@ +@font-face { + font-family: "Larsseit"; + src: url("../fonts/Larsseit family/Larsseit-Medium.ttf"); + src: url("../fonts/Larsseit family/Larsseit-Bold.ttf"); + src: url("../fonts/Larsseit family/Larsseit-Light.ttf"); +} diff --git a/src/styles/utils/_keyframes.scss b/src/styles/utils/_keyframes.scss new file mode 100644 index 00000000..61f26f6c --- /dev/null +++ b/src/styles/utils/_keyframes.scss @@ -0,0 +1,26 @@ +@keyframes sway { + 0% { + transform: rotate(5deg); + } + 33% { + transform: rotate(-10deg); + } + 66% { + transform: rotate(10deg); + } + 100% { + transform: rotate(0deg); + } +} + +@keyframes decrease { + from { + transform: scale(100%); + } + 50% { + transform: scale(90%); + } + to { + transform: scale(100%); + } +} diff --git a/src/styles/utils/_mixin.scss b/src/styles/utils/_mixin.scss new file mode 100644 index 00000000..27aca9b8 --- /dev/null +++ b/src/styles/utils/_mixin.scss @@ -0,0 +1,5 @@ +@mixin font ($font-size, $line-height, $letter-spacing) { + font-size: $font-size; + line-height: $line-height; + letter-spacing: $letter-spacing; +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss deleted file mode 100644 index 80c79780..00000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_normalize.scss b/src/styles/utils/_normalize.scss new file mode 100644 index 00000000..c7b7575a --- /dev/null +++ b/src/styles/utils/_normalize.scss @@ -0,0 +1,17 @@ +* { + box-sizing: border-box; +} + +html { + font-family: "Larsseit", sans-serif; + font-size: 24px; + font-weight: normal; + line-height: 34px; + font-style: normal; + overflow-y: scroll; + scroll-behavior: smooth; +} + +body { + overflow: hidden; +} diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 00000000..3e3eb2b7 --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,13 @@ +a, +a:visited { + text-decoration: none; +} + +body { + margin: 0; + padding: 0; +} + +ul { + list-style: none; +} diff --git a/src/styles/utils/_variables.scss b/src/styles/utils/_variables.scss new file mode 100644 index 00000000..df8cdc16 --- /dev/null +++ b/src/styles/utils/_variables.scss @@ -0,0 +1,9 @@ +$color-header: #f4f9e2; +$white-color: #fff; +$why-thrive: #62d0df; +$color-text-and-contact-us: #22356f; +$color-text-light: rgba(34, 53, 111, 0.5); +$color-button: #f9b640; +$color-link: #fab63e; +$middle-screen: 950px; +$small-screen: 650px; diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006ff..00000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee;