diff --git a/.bemlintrc.json b/.bemlintrc.json new file mode 100644 index 00000000..22a597e5 --- /dev/null +++ b/.bemlintrc.json @@ -0,0 +1,16 @@ +{ + "elementDivider": "__", + "modifierDivider": "--", + "ignore": [ + "node_modules", + "dist" + ], + "rules": { + "one-block": true, + "one-element": true, + "element-inside-parent-block": true, + "no-double-element": true, + "no-neighbour-parent-block": true, + "modifiable-class": true + } +} diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index a64ccfac..f3065d38 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -19,5 +19,11 @@ jobs: uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - - run: npm ci - - run: npm start & sleep 5 && npm test + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/.gitignore b/.gitignore index 0f8d3cf7..549c139a 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,4 @@ node_modules # Generated files backstop_data dist +.cache diff --git a/README.md b/README.md index 9c2dbad5..7b959138 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://Oleksiy-Lyashenko.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..a20a78c0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1186,6 +1186,131 @@ } } }, + "@mate-academy/bemlint": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@mate-academy/bemlint/-/bemlint-0.1.1.tgz", + "integrity": "sha512-fhY7PfaUDZpe/DU1qJRW3AO5Tuua9HLm8ZIgVD7HijerZi8QIsC/R+NfcGPQfo9eVD4FDf4Jba0vTzSAO5ayJg==", + "dev": true, + "requires": { + "chalk": "^4.1.0", + "commander": "^7.1.0", + "cosmiconfig": "^7.0.0", + "parse5": "^6.0.1", + "table-layout": "^1.0.1" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "array-back": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/array-back/-/array-back-4.0.2.tgz", + "integrity": "sha512-NbdMezxqf94cnNfWLL7V/im0Ub+Anbb0IoZhvzie8+4HJ4nMQuzHuy49FkGYCJK2yAloZ3meiB6AVMClbrI1vg==", + "dev": true + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "dev": true + }, + "cosmiconfig": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz", + "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==", + "dev": true, + "requires": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + } + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + } + }, + "parse5": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", + "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==", + "dev": true + }, + "path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + }, + "table-layout": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/table-layout/-/table-layout-1.0.2.tgz", + "integrity": "sha512-qd/R7n5rQTRFi+Zf2sk5XVVd9UQl6ZkduPFC3S7WEGJAmetDTjY3qPN50eSKzwuzEyQKy5TN2TiZdkIjos2L6A==", + "dev": true, + "requires": { + "array-back": "^4.0.1", + "deep-extend": "~0.6.0", + "typical": "^5.2.0", + "wordwrapjs": "^4.0.0" + } + } + } + }, "@mate-academy/eslint-config": { "version": "0.0.12", "resolved": "https://registry.npmjs.org/@mate-academy/eslint-config/-/eslint-config-0.0.12.tgz", @@ -5556,6 +5681,12 @@ "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==", "dev": true }, + "json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "dev": true + }, "json-schema": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz", @@ -8788,6 +8919,116 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "sass": { + "version": "1.39.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.39.0.tgz", + "integrity": "sha512-F4o+RhJkNOIG0b6QudYU8c78ZADKZjKDk5cyrf8XTKWfrgbtyVVXImFstJrc+1pkQDCggyidIOytq6gS4gCCZg==", + "dev": true, + "requires": { + "chokidar": ">=3.0.0 <4.0.0" + }, + "dependencies": { + "anymatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", + "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", + "dev": true, + "requires": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + } + }, + "binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true + }, + "braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, + "requires": { + "fill-range": "^7.0.1" + } + }, + "chokidar": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz", + "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==", + "dev": true, + "requires": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "fsevents": "~2.3.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + } + }, + "fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, + "requires": { + "to-regex-range": "^5.0.1" + } + }, + "fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "optional": true + }, + "glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "requires": { + "is-glob": "^4.0.1" + } + }, + "is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "requires": { + "binary-extensions": "^2.0.0" + } + }, + "is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true + }, + "readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "requires": { + "picomatch": "^2.2.1" + } + }, + "to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "requires": { + "is-number": "^7.0.0" + } + } + } + }, "sass-graph": { "version": "2.2.5", "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz", diff --git a/package.json b/package.json index 8bbaf296..ee7de1c2 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.2", "@mate-academy/stylelint-config": "0.0.9", "colors": "^1.3.3", "eslint": "^5.16.0", @@ -31,6 +31,7 @@ "gulp-htmllint": "0.0.16", "node-sass": "^4.14.1", "parcel": "^1.12.4", + "sass": "^1.39.0", "stylelint": "^13.5.0", "stylelint-config-recommended-scss": "^3.3.0", "stylelint-scss": "^3.17.2" diff --git a/src/images/Mask Group.png b/src/images/Mask Group.png new file mode 100644 index 00000000..bfed877c Binary files /dev/null and b/src/images/Mask Group.png differ diff --git a/src/images/Rectangle 3.1.png b/src/images/Rectangle 3.1.png new file mode 100644 index 00000000..1510245b Binary files /dev/null and b/src/images/Rectangle 3.1.png differ diff --git a/src/images/Rectangle-header.png b/src/images/Rectangle-header.png new file mode 100644 index 00000000..1510245b Binary files /dev/null and b/src/images/Rectangle-header.png differ diff --git a/src/images/about-img.png b/src/images/about-img.png new file mode 100644 index 00000000..a4d86d3f Binary files /dev/null and b/src/images/about-img.png differ diff --git a/src/images/cda-image.png b/src/images/cda-image.png new file mode 100644 index 00000000..11cd3a8e Binary files /dev/null and b/src/images/cda-image.png differ diff --git a/src/images/contact_us-image.png b/src/images/contact_us-image.png new file mode 100644 index 00000000..96c40b97 Binary files /dev/null and b/src/images/contact_us-image.png differ diff --git a/src/images/cross.svg b/src/images/cross.svg new file mode 100644 index 00000000..e30283ce --- /dev/null +++ b/src/images/cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer-image.png b/src/images/footer-image.png new file mode 100644 index 00000000..07540192 Binary files /dev/null and b/src/images/footer-image.png differ diff --git a/src/images/main-block-photo.png b/src/images/main-block-photo.png new file mode 100644 index 00000000..0b1007c9 Binary files /dev/null and b/src/images/main-block-photo.png differ diff --git a/src/images/menu.svg b/src/images/menu.svg new file mode 100644 index 00000000..3c4db35a --- /dev/null +++ b/src/images/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/index.html b/src/index.html index 5d357bd6..98371135 100644 --- a/src/index.html +++ b/src/index.html @@ -6,8 +6,465 @@ Title - -

Hello Mate Academy

+ +
+
+
+
+ +
+ +
+ +
+ +
+ + +

+ 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 i do + +
+
+
+
+
+ + + +
+
+
+

+ Why Thrive? +

+ +

Want to improve your well-being from the comfort of your own couch? Are you having trouble finding the right therapist? Here at ThriveTalk, our licensed therapists provide the same quality care you would get in office from anywhere you can access your laptop or mobile phone. Become your best self with ThriveTalk. Start therapy now with a licensed therapist!

+
+ +
+ +
+
+

+ about us +

+ +

+ We want to help you thrive! Whether you are just looking for someone to talk to, or are struggling with a mental wellness issue we’re here to help. Our highly talented therapists can help you with a range of issues including relationships, sex, PTSD, depression, social anxiety, or even just caring for yourself more. +

+ +

+ we can help you with +

+ +
+ +
+
+
+
+ +
    +
  • + + Weight Lifting + +
    • +
+
+ +
+
+
+ +
    +
  • + + Running +
    + & Spinning +     +
    • +
+
+ +
+
+
+ +
    +
  • + + Pumping Iron + +
    • +
+
+ +
+
+
+ +
    +
  • + + Pumping Iron + +
    • +
+
+
+ +
+
+
+
+ +
    +
  • + + Physical +
    + Health +     +
    • +
+
+ +
+
+
+ +
    +
  • + + Mental +
    + Health +     +
    • +
+
+ +
+
+
+ +
    +
  • + + Nutrition + +
    • +
+
+ +
+
+
+ +
    +
  • + + Gymnastics + +
    • +
+
+ +
+
+
+ +
    +
  • + + Crossfit + +
    • +
+
+ +
+
+
+ +
    +
  • + + Aerobics + +
    • +
+
+
+ +
+
+

+ Nutritional Plans +

+ +

+ Nutritional Facts on some shitty things that you don’t care about and even we don’t , I need to replace this copy. +

+
+ +
+

+ Weight Loss +

+ +

+ Nutritional Facts on some shitty things that you don’t care about and even we don’t , I need to replace this copy. +

+
+ +
+

+ Mental Peace +

+ +

+ Nutritional Facts on some shitty things that you don’t care about and even we don’t , I need to replace this copy. +

+
+ +
+

+ Home Training +

+ +

+ Nutritional Facts on some shitty things that you don’t care about and even we don’t , I need to replace this copy. +

+
+ +
+

+ Work/Life Balance +

+ +

+ Nutritional Facts on some shitty things that you don’t care about and even we don’t , I need to replace this copy. +

+
+ +
+

+ Cardio +

+ +

+ Nutritional Facts on some shitty things that you don’t care about and even we don’t , I need to replace this copy. +

+
+
+
+ +
+ +
+
+

+ you should also know +

+ +

+ MDD affects more than 16.1 million American adults, or about 6.7%of the U.S. population age 18 and older in a given year. We at ThriveTalk can help you. +

+ + + get help now + +
+
+
+ +
+ +
+
+

+ contact us +

+ + + Ready. Set. Smile + + +

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

+ + + get help now + +
+
+
+
+ + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 2067b3fc..0bc323a8 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,34 @@ @font-face { - font-family: "Roboto"; - src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); + font-family: "Larsseit"; + src: url("../fonts/Larsseit family/Larsseit-Light.eot"); + src: url("../fonts/Larsseit family/Larsseit-Light.ttf") format("wolf"), + url("../fonts/Larsseit family/Larsseit-Light.ttf") format("truetype"); font-weight: normal; font-style: normal; } + +@font-face { + font-family: "Larsseit"; + src: url("../fonts/Larsseit family/Larsseit-Medium.eot"); + src: url("../fonts/Larsseit family/Larsseit-Medium.woff") format("wolf"), + url("../fonts/Larsseit family/Larsseit-Medium.ttf") format("truetype"); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: "Larsseit"; + src: url("../fonts/Larsseit family/Larsseit-Bold.eot"); + src: url("../fonts/Larsseit family/Larsseit-Bold.woff") format("wolf"), + url("../fonts/Larsseit family/Larsseit-Bold.ttf") format("truetype"); + font-weight: bold; + font-style: normal; +} + +// @mixin medium { +// font-family: "Larsseit Medium", sans-serif; +// } + +// @mixin bold { +// font-family: "Larsseit Bold", sans-serif; +// } diff --git a/src/styles/_mixin.scss b/src/styles/_mixin.scss new file mode 100644 index 00000000..353a4bcc --- /dev/null +++ b/src/styles/_mixin.scss @@ -0,0 +1,23 @@ +@mixin onDesktop { + @media (min-width: 1023px) { + @content; + } +} + +@mixin onNotebook { + @media (min-width: 1279px) { + @content; + } +} + +@mixin onTab { + @media (min-width: 768px) { + @content; + } +} + +@mixin onPhone { + @media (min-width: 576px) { + @content; + } +} diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 00000000..7b097e03 --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,223 @@ +.about { + position: relative; + + &__sign { + text-align: center; + font-size: 16px; + line-height: 23px; + letter-spacing: 0.06em; + text-transform: uppercase; + + color: #c4c4c4; + + @media (min-width: 860px) { + position: absolute; + top: 145px; + } + } + + &__subtitle { + display: flex; + justify-content: center; + margin: 0 auto; + margin-bottom: 70px; + max-width: 592px; + + font-weight: 500; + font-size: 18px; + line-height: 28px; + letter-spacing: 0.01em; + + color: #22356f; + + @include onTab { + font-size: 24px; + line-height: 34px; + } + } + + &__title { + margin: 0; + margin-bottom: 24px; + + font-size: 16px; + line-height: 19px; + text-align: center; + letter-spacing: 0.06em; + text-transform: uppercase; + + color: rgba(34, 53, 111, 0.5); + } + + &__block { + display: flex; + justify-content: center; + flex-wrap: wrap; + + margin-bottom: 60px; + + @include onTab { + margin-bottom: 120px; + } + + &-menu { + list-style-position: outside; + } + + &-item { + &::marker { + color: #e9b730; + font-size: 40px; + } + } + + &-title { + font-weight: 500; + font-size: 32px; + line-height: 34px; + letter-spacing: -0.01em; + + color: #fff; + } + } + + &__square { + box-sizing: border-box; + + flex-basis: 100%; + flex-grow: 1; + + &--small { + padding: 30px 15px; + height: 240px; + max-width: 360px; + + @include onTab { + padding: 70px 52px 0; + height: 360px; + } + + &-1 { + background-color: #ffe2de; + } + + &-2 { + background-color: #c4e769; + } + + &-3 { + background-color: #62d0df; + } + + &-4 { + background-color: #0052c1; + } + + @media (min-width: 768px) { + max-width: 100%; + flex-basis: 50%; + } + + @media (min-width: 1100px) { + flex-basis: 25%; + } + } + + &--big { + padding: 40px 20px; + height: 240px; + max-width: 480px; + + @include onTab { + padding: 92px 70px 0; + height: 480px; + } + + &-1 { + background-color: #22356f; + } + + &-2 { + background-color: #0052c1; + } + + &-3 { + background-image: url("../images/main-block-photo.png"); + background-repeat: no-repeat; + background-size: cover; + } + + &-4 { + background-color: #62d0df; + } + + &-5 { + background-color: #dde1ff; + } + + &-6 { + background-color: #8f00ff; + } + + @media (min-width: 768px) { + max-width: 100%; + flex-basis: 50%; + } + + @media (min-width: 1200px) { + flex-basis: 33.3%; + } + } + + &--text { + height: 240px; + padding: 10px 20px; + + @include onTab { + padding-top: 55px; + padding-left: 105px; + padding-right: 77px; + } + + @media (min-width: 768px) { + flex-basis: 50%; + } + + @media (min-width: 1200px) { + flex-basis: 33.3%; + } + } + + &-rectangle { + height: 1px; + width: 100%; + margin-bottom: 35px; + + background-color: #fff; + } + } + + &__text { + + &-title { + margin: 0; + margin-bottom: 28px; + + font-size: 28px; + line-height: 33px; + letter-spacing: -0.03em; + + color: #22356f; + } + + &-subtitle { + margin: 0; + + font-size: 16px; + line-height: 25px; + letter-spacing: -0.03em; + + color: rgba(34, 53, 111, 0.5); + } + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 00000000..4d4568df --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,52 @@ +.button { + border: none; + background-color: #62d0df; + border-radius: 50px; + padding: 15px 30px 13px; + text-decoration: none; + font-weight: 500; + + color: #fff; + font-size: 14px; + line-height: 14px; + + &__yellow { + display: block; + background-color: #f9b640; + text-decoration: none; + padding: 12px 30px 10px; + border: 1px solid #f9b640; + + font-weight: 500; + text-transform: uppercase; + font-size: 12px; + line-height: 12px; + letter-spacing: 0.1em; + + @include onTab { + font-size: 16px; + line-height: 16px; + } + + color: #fff; + + &:last-of-type { + margin-left: 10px; + } + + &:hover { + background-color: transparent; + color: #f9b640; + } + + &--transparent { + background-color: transparent; + border: 1px solid transparent; + color: #f9b640; + + &:hover { + border: 1px solid #f9b640; + } + } + } +} diff --git a/src/styles/blocks/cda.scss b/src/styles/blocks/cda.scss new file mode 100644 index 00000000..ea247338 --- /dev/null +++ b/src/styles/blocks/cda.scss @@ -0,0 +1,90 @@ +.cda { + background: #fff; + + @include onTab { + background: #fff url("../images/cda-image.png"); + background-repeat: no-repeat; + background-position: center left; + background-size: 40% 100%; + + @include onDesktop { + background-size: contain; + } + } + + &__text { + padding-bottom: 20px; + + @include onTab { + padding: 70px 0 20px; + padding-left: 40%; + } + + @include onNotebook { + padding-top: 100px; + padding-bottom: 42px; + padding-left: 45%; + } + } + + &__title { + margin: 0; + margin-bottom: 50px; + + font-size: 16px; + line-height: 12px; + letter-spacing: 0.06em; + text-transform: uppercase; + color: #22356f; + + @include onTab { + margin-bottom: 180px; + } + + @include onNotebook { + margin-bottom: 225px; + } + } + + &__subtitle { + margin: 0; + margin-bottom: 80px; + max-width: 680px; + + + font-weight: bold; + font-size: 30px; + line-height: 45px; + letter-spacing: -0.01em; + -webkit-text-stroke-width: 0.2px; + -webkit-text-stroke-color: #fab63e; + + color: #22356f; + + @include onTab { + margin-bottom: 152px; + } + + @include onNotebook { + font-size: 36px; + line-height: 53px; + } + } + + &__sign { + margin: 0; + font-size: 16px; + line-height: 23px; + display: flex; + align-items: center; + letter-spacing: 0.1em; + text-transform: uppercase; + font-weight: bold; + + color: #0052c1; + + @include onTab { + color: #fab63e; + } + } +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 00000000..a6c291b3 --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,92 @@ +.contact-us { + background: #22356f; + + @include onTab { + background: #22356f url("../images/contact_us-image.png"); + background-repeat: no-repeat; + background-position: right; + background-size: 40% 100%; + + @include onDesktop { + background-size: contain; + } + } + + &__text { + padding: 40px 0; + + @include onTab { + padding: 102px 0 42px; + } + + &-top { + margin: 0; + margin-bottom: 60px; + + font-size: 16px; + line-height: 12px; + letter-spacing: 0.06em; + text-transform: uppercase; + + color: #fff; + + @include onTab { + margin-bottom: 180px; + } + + @include onNotebook { + margin-bottom: 230px; + } + } + } + + &__title { + margin: 0; + margin-bottom: 40px; + + font-weight: bold; + font-size: 50px; + line-height: 80px; + letter-spacing: -0.01em; + + color: #fff; + + @include onTab { + margin-bottom: 75px; + } + + @include onNotebook { + font-size: 64px; + line-height: 94px; + } + } + + &__subtitle { + margin: 0; + max-width: 580px; + margin-bottom: 50px; + + font-size: 28px; + line-height: 45px; + letter-spacing: -0.01em; + + color: #fff; + + @include onNotebook { + font-size: 36px; + line-height: 53px; + } + } + + &__sign { + margin: 0; + + font-size: 16px; + line-height: 23px; + letter-spacing: 0.1em; + text-transform: uppercase; + font-weight: bold; + + color: #62d0df; + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 00000000..882e739e --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,33 @@ +.container { + max-width: 1200px; + margin: 0 auto; + box-sizing: border-box; + padding: 0 20px; + + @include onTab { + padding: 0 40px; + } + + @include onNotebook { + padding: 0; + } + + &--why { + position: relative; + padding-top: 60px; + padding-bottom: 60px; + + @include onTab { + padding-top: 150px; + padding-bottom: 95px; + } + } + + &--about { + padding-top: 70px; + + @include onTab { + padding-top: 150px; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 00000000..18839ddf --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,102 @@ +.footer { + &__info { + background: #fff; + + @include onTab { + background: #fff url("../images/footer-image.png"); + background-repeat: no-repeat; + background-position: left; + background-size: contain; + } + } + + &__block { + box-sizing: border-box; + padding: 40px 0 20px; + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + + @include onTab { + flex-direction: row; + justify-content: space-between; + padding: 100px 0 74px; + } + + @include onNotebook { + padding-left: 450px; + } + } + + &__text { + margin-bottom: 50px; + + @include onTab { + margin-bottom: 0; + } + } + + &__title { + margin: 0; + margin-bottom: 20px; + + font-weight: 500; + font-size: 14px; + line-height: 11px; + letter-spacing: -0.01em; + text-transform: uppercase; + color: #22356f; + + @include onTab { + margin-bottom: 50px; + } + } + + &__subtitle { + display: block; + margin: 0; + max-width: 200px; + + font-size: 14px; + line-height: 23px; + letter-spacing: -0.01em; + + color: rgba(34, 53, 111, 0.5); + + &--address { + text-decoration: none; + margin-bottom: 30px; + } + + &--phone { + text-decoration: none; + } + + &--email { + color: #006dff; + } + } + + &__legal { + background: #62d0df; + + &-text { + padding: 24px 0 18px; + + @include onTab { + padding: 32px 0 26px; + } + } + } + + &__copyright { + margin: 0; + font-weight: 500; + font-size: 14px; + line-height: 11px; + letter-spacing: -0.01em; + + color: #fff; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 00000000..4426c80d --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,97 @@ +.header { + position: relative; + background: #f4f9e2; + + @include onTab { + background: linear-gradient(to right, #f4f9e2 80%, #fff 20%); + } + + &__block { + display: flex; + flex-direction: column; + justify-content: space-between; + position: relative; + } + + &__container { + box-sizing: border-box; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: space-between; + padding-bottom: 20px; + + @include onTab { + padding-bottom: 75px; + } + } + + &__button { + display: flex; + } + + &__title { + margin: 0; + margin-bottom: 50px; + + font-weight: bold; + text-transform: uppercase; + font-size: 28px; + line-height: 36px; + letter-spacing: -0.04em; + + color: #22356f; + + @include onTab { + font-size: 40px; + line-height: 48px; + } + + @include onNotebook { + font-size: 48px; + line-height: 53px; + } + } + + &__subtitle { + margin: 0; + margin-bottom: 63px; + + font-size: 12px; + line-height: 24px; + + color: #22356f; + + @include onTab { + font-size: 18px; + line-height: 34px; + } + + @include onNotebook { + font-size: 24px; + line-height: 42px; + } + } + + &__photo { + display: none; + + @include onPhone { + display: block; + position: absolute; + top: 60px; + right: 0; + z-index: 0; + height: 80%; + } + + @include onTab { + height: 100%; + } + + &-container { + overflow: hidden; + z-index: 0; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 00000000..d01f0fc5 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,21 @@ +.icon { + display: block; + width: 24px; + height: 24px; + + background-size: contain; + background-repeat: no-repeat; + background-position: center; + + @include onPhone { + display: none; + } + + &--menu { + background-image: url(../images/menu.svg); + } + + &--cross { + background-image: url(../images/cross.svg); + } +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 00000000..ff5c5fcb --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,26 @@ +.logo { + display: flex; + align-self: left; + margin: 0; + font-weight: bold; + font-size: 24px; + line-height: 27px; + + letter-spacing: -0.04em; + + color: #62d0df; + + &__text { + display: none; + text-align: left; + margin-bottom: 35px; + + @include onTab { + display: block; + } + } + + &--text { + color: #62d0df; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 00000000..9773e1f1 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,36 @@ +.menu { + background-color: #f4f9e2; + + &__content { + height: 100vh; + z-index: 2; + } + + &__nav { + margin-bottom: 30px; + } + + &__list { + margin: 0; + padding: 0; + list-style: none; + margin-bottom: 68px; + } + + &__item { + margin-bottom: 24px; + } + + &__link { + font-size: 24px; + text-transform: uppercase; + color: #22356f; + text-decoration: none; + } + + &__contact-us { + font-weight: bold; + padding-bottom: 8px; + border-bottom: 1px solid #22356f; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 00000000..7c15c467 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,55 @@ +.nav { + display: flex; + justify-content: space-between; + align-items: center; + min-height: 80px; + + &__list { + margin: 0; + padding: 0; + + display: none; + justify-content: center; + align-items: center; + column-gap: 20px; + list-style: none; + + @media (min-width: 576px) { + display: flex; + } + } + + &__contact { + display: none; + + @include onPhone { + display: block; + } + } + + &__item { + display: block; + } + + &__link { + width: 200%; + font-size: 14px; + line-height: 16px; + padding: 0 5px; + padding-bottom: 10px; + border-bottom: transparent; + + color: #22356f; + text-decoration: none; + + &:hover { + font-weight: bold; + border-bottom: 1px solid #000; + } + + &:active { + font-weight: bold; + border-bottom: 1px solid #000; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 00000000..212e3c39 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,28 @@ +a { + cursor: pointer; +} + +.page { + margin: 0; + padding: 0; + + font-family: "Larsseit", sans-serif; + font-weight: normal; + box-sizing: border-box; + + scroll-behavior: smooth; + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + + transform: translateX(100%); + transition: 0.4s; + + &:target { + transform: translateX(0); + } + } +} diff --git a/src/styles/blocks/why.scss b/src/styles/blocks/why.scss new file mode 100644 index 00000000..197ce5d5 --- /dev/null +++ b/src/styles/blocks/why.scss @@ -0,0 +1,54 @@ +.why { + position: relative; + background: #62d0df; + + @include onTab { + background: #62d0df url("../images/about-img.png"); + background-repeat: no-repeat; + background-position: center right; + background-size: contain; + } + + &__title { + margin: 0; + margin-bottom: 75px; + + font-weight: bold; + font-size: 36px; + line-height: 27px; + letter-spacing: -0.01em; + + color: #fff; + } + + &__subtitle { + margin: 0; + max-width: 555px; + + font-size: 15px; + line-height: 25px; + + color: #fff; + + @include onNotebook { + font-size: 20px; + line-height: 30px; + } + + &--bold { + font-weight: bold; + font-size: 20px; + line-height: 30px; + + @include onNotebook { + font-size: 24px; + line-height: 35px; + } + } + } + + &__photo { + position: absolute; + right: 0; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e4..c3e89373 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -2,6 +2,18 @@ @import "fonts"; @import "typography"; -body { - background: $c-gray; -} +@import "mixin"; + +@import "blocks/page"; +@import "blocks/container"; +@import "blocks/header"; +@import "blocks/nav"; +@import "blocks/button"; +@import "blocks/why"; +@import "blocks/about"; +@import "blocks/cda"; +@import "blocks/contact-us"; +@import "blocks/footer"; +@import "blocks/logo"; +@import "blocks/icon"; +@import "blocks/menu";