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/package-lock.json b/package-lock.json index e330c949..f3298e72 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", @@ -5556,6 +5681,12 @@ "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==", "dev": true }, + "json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "dev": true + }, "json-schema": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz", diff --git a/package.json b/package.json index 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-242825.png b/src/images/autumn-goodman-242825.png new file mode 100644 index 00000000..e609caee Binary files /dev/null and b/src/images/autumn-goodman-242825.png differ diff --git a/src/images/charles-etoroma-390119.png b/src/images/charles-etoroma-390119.png new file mode 100644 index 00000000..66d149c0 Binary files /dev/null and b/src/images/charles-etoroma-390119.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/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-402831.png b/src/images/linkedin-sales-navigator-402831.png new file mode 100644 index 00000000..fbfaecb1 Binary files /dev/null and b/src/images/linkedin-sales-navigator-402831.png differ diff --git a/src/images/linkedin-sales-navigator.png b/src/images/linkedin-sales-navigator.png new file mode 100644 index 00000000..ce13a38c Binary files /dev/null and b/src/images/linkedin-sales-navigator.png differ diff --git a/src/index.html b/src/index.html index 5d357bd6..6b3c6879 100644 --- a/src/index.html +++ b/src/index.html @@ -7,7 +7,300 @@ -

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. +
+ +
+
+
+ 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 +
+
+
+
+ + 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. +
+
+
+
+
+ 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 +
+
+
+ SOME INFO +
+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula. +
+
+
+
+ ENFOLD HEALTH +
+
+ Main Street 1, Olcott Buffalo, United States +555 283 784 333 office@enfold-health.com +
+
+
+
+ OFFICE HOURS +
+
+
+ Mo-Fr: 8:00-19:00 +
+
+ Sa: 8:00-14:00 +
+
+ Su: closed +
+
+
+
+
+
+ + diff --git a/src/styles/blocks/_about-us.scss b/src/styles/blocks/_about-us.scss new file mode 100644 index 00000000..7d72c22c --- /dev/null +++ b/src/styles/blocks/_about-us.scss @@ -0,0 +1,49 @@ +.about-us { + position: relative; + margin-bottom: 75px; + padding-top: 75px; + display: flex; + justify-content: center; + align-items: center; + + &__title { + position: absolute; + @include font (16px, 23px, 0.06em); + font-family: "Larsseit"; + left: 60px; + top: 80px; + // font-size: 16px; + // line-height: 23px; + // letter-spacing: 0.06em; + + color: $color-text-and-contact-us; + } + + &__content { + display: block; + max-width: 550px; + @include font (24px, 34px, 0.05em); + // font-family: "Larsseit"; + // font-size: 24px; + // line-height: 34px; + // letter-spacing: 0.005em; + + color: $color-text-and-contact-us; + } + + @media (max-width: 955px) { + &__title { + position: static; + margin-bottom: 30px; + } + & { + flex-direction: column; + padding: 5vw 4vw; + margin: 3vw 0; + } + &__content { + padding-bottom: 4vw; + } + //flex-direction: column; + } +} diff --git a/src/styles/blocks/_contact-us.scss b/src/styles/blocks/_contact-us.scss new file mode 100644 index 00000000..e3d1ca3f --- /dev/null +++ b/src/styles/blocks/_contact-us.scss @@ -0,0 +1,86 @@ +.contact-us { + display: flex; + justify-content: space-between; + + &__content { + padding: 7vw 6vw; + background: #22356f; + } + &__item { + @include font (16px, 12px, 0.06em); + // font-family: "Larsseit"; + // font-size: 16px; + // line-height: 12px; + // letter-spacing: 0.06em; + + color: $white-color; + } + &__title { + @include font (64px, 94px, -0.01em); + // font-family: "Larsseit"; + // font-size: 64px; + // line-height: 94px; + // letter-spacing: -0.01em; + padding: 15vw 0 0; + color: $white-color; + + } + + &__text { + @include font (36px, 54px, -0.01em); + // font-family: "Larsseit"; + // font-size: 36px; + // line-height: 53px; + // letter-spacing: -0.005em; + padding: 5vw 0; + color: $white-color; + } + + &__link { + @include font (16px, 23px, 0.01em); + // font-family: "Larsseit"; + // font-size: 16px; + // line-height: 23px; + display: flex; + align-items: center; + //letter-spacing: 0.1em; + + color: $why-thrive; + } + + &__box-image { + + } + + &__img { + object-fit: cover; + //object-position: left; + height: 100%; + } + + @media (max-width: 955px) { + position: relative; + flex-direction: column; + justify-content: center; + align-items: center; + + &__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..b0cb6c6a --- /dev/null +++ b/src/styles/blocks/_course.scss @@ -0,0 +1,51 @@ +.course { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 200px); + align-items: center; + margin: 40px 0; + + &__item { + padding: 0 30px; + + } + + &__title { + @include font (28px, 33px, -0.03em); + // font-family: "Larsseit"; + // font-size: 28px; + // line-height: 33px; + //letter-spacing: -0.03em; + + color: $color-text-and-contact-us; + margin: 20px 0; + + } + + &__text { + max-width: 280px; + @include font (16px, 25px, -0.03em); + // font-family: "Larsseit"; + // font-size: 16px; + // line-height: 25px; + // letter-spacing: -0.03em; + + color: rgba(34, 53, 111, 0.5); + } + + @media (max-width: 955px) { + grid-template-columns: repeat(2, 50%); + grid-template-rows: repeat(4, 200px); + } + + @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..7e2c2ceb --- /dev/null +++ b/src/styles/blocks/_footer.scss @@ -0,0 +1,33 @@ +.footer { + height: 80px; + background: $why-thrive; + position: relative; + + &__content { + padding: 0 6vw; + //position: relative; + } + + &__item { + position: absolute; + display: inline-block; + @include font (14px, 11px, -0.01em); + // font-family: "Larsseit"; + // font-size: 14px; + // line-height: 11px; + // letter-spacing: -0.006em; + margin-left: 20px; + + color: $white-color; + top: 50%; + transform: translateY(-50%); + } + + &__icon { + position: absolute; + display: inline-block; + color: $white-color; + top: 50%; + transform: translateY(-50%); + } +} diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss new file mode 100644 index 00000000..2d68f76f --- /dev/null +++ b/src/styles/blocks/_header.scss @@ -0,0 +1,92 @@ +.header { + position: relative; + padding: 27px 6vw 75px; + background: linear-gradient(to right, $color-header 80%, $white-color 20%); + //overflow: hidden; + &__hidden { + position: absolute; + overflow: hidden; + height: 1px; + width: 1px; + padding: 0; + border: 0; + color: $color-header; + } + &__container { + //max-width: 1200px; + margin: 0 auto; + max-height: 700px; + } + + &__top { + display: flex; + align-items: center; + justify-content: space-between; + height: 70px; + } + + &__logo { + @extend %title; + //text-decoration: none; + } + + &__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 { + bottom: 550px; + left: 550px; + position: relative; + 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); + } + + @media (max-width: 1100px) { + position: relative; + + &__ellipse { + display: none; + } + &__image { + display: none; + + } + + } + @media (max-width: 850px) { + &__top { + flex-direction: column; + justify-content: center; + align-items: center; + } + + & { + padding: 7vw 5vw 75px; + } + } +} diff --git a/src/styles/blocks/_health.scss b/src/styles/blocks/_health.scss new file mode 100644 index 00000000..54a0a5a6 --- /dev/null +++ b/src/styles/blocks/_health.scss @@ -0,0 +1,80 @@ +.health { + display: grid; + grid-template-columns: repeat(3, minmax(200px , 1fr)); + grid-template-rows: repeat(2, minmax(200px , 400px)); + justify-content: center; + + @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); + // font-family: "Larsseit"; + // font-size: 32px; + // line-height: 34px; + // letter-spacing: -0.006em; + + color: $white-color; + display: block; + max-width: 157px; + top: 95px; + left: 20%; + + } + + &__item { + + position: relative; + + &: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..8e5e1d2b --- /dev/null +++ b/src/styles/blocks/_help-you.scss @@ -0,0 +1,88 @@ +.help-you { + + &__title { + @include font (16px, 19px, 0.06em); + // font-family: "Larsseit"; + // font-size: 16px; + // line-height: 19px; + text-align: center; + //letter-spacing: 0.06em; + + 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); + // font-family: "Larsseit"; + // font-size: 32px; + // line-height: 34px; + // letter-spacing: -0.006em; + //text-align: center; + + color: #fff; + + &: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 { + //margin-top: 55px; + 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..3c84a9c8 --- /dev/null +++ b/src/styles/blocks/_info.scss @@ -0,0 +1,68 @@ +.info { + //padding: 0 2vw; + max-width: 485px; + margin-top: 75px; + + &__title { + @extend %title; + margin: 107px 0 37px; + } + + &__item { + @include font (48px, 53px, -0.03em); + // font-family: "Larsseit"; + // font-size: 48px; + // line-height: 53px; + // letter-spacing: -0.035em; + + color: $color-text-and-contact-us; + margin-bottom: 70px; + } + + &__text { + @include font (24px, 42px, normal); + max-width: 470px; + // font-family: "Larsseit"; + // font-size: 24px; + // line-height: 42px; + + color: $color-text-and-contact-us; + } + + &__link { + margin-top: 63px; + display: flex; + } + + &__link-wrapper { + width: 150px; + height: 50px; + display: flex; + justify-content: center; + align-items: center; + &:last-child { + margin-left: 35px; + } + } + + &__link-element { + @include font (16px, 23px, 0.1em); + // font-size: 16px; + // line-height: 23px; + align-items: center; + // letter-spacing: 0.1em; + + color: $color-link; + } + + &__link-element_active { + background: $color-button; + padding: 10px 30px; + + color: $white-color; + } + + @media (max-width: $small-screen) { + padding: 0; + } +} diff --git a/src/styles/blocks/_nav.scss b/src/styles/blocks/_nav.scss new file mode 100644 index 00000000..d8757ffa --- /dev/null +++ b/src/styles/blocks/_nav.scss @@ -0,0 +1,62 @@ +.nav { + + &__list { + display: flex; + } + + &__item { + position: relative; + margin-left: 50px; + @include font (14px, 16px, normal); + // font-family: "Larsseit"; + // font-size: 14px; + // line-height: 16px; + padding-bottom: 10px; + + color: $color-text-and-contact-us; + + &_active { + + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + + width: 100%; + height: 2px; + + background-color: $color-text-and-contact-us; + border-radius: 8px; + } + } + } + + &__button { + width: 150px; + height: 50px; + display: flex; + justify-content: center; + align-items: center; + + background: #62d0df; + border-radius: 50px; + @include font (14px, 16px, normal); + // font-family: "Larsseit"; + // font-size: 14px; + // line-height: 16px; + color: $white-color; + text-transform: uppercase; + z-index: 1; + } + + @media (max-width: 850px) { + &__item:nth-child(1) { + margin: 0; + } + + &__list { + padding: 0; + } + } +} diff --git a/src/styles/blocks/_office.scss b/src/styles/blocks/_office.scss new file mode 100644 index 00000000..16370a8e --- /dev/null +++ b/src/styles/blocks/_office.scss @@ -0,0 +1,97 @@ +.office { + display: flex; + //position: relative; + + &__image-box { + + } + + &__img { + width: 50%; + object-fit: cover; + } + + &__content { + display: flex; + padding-left: 3vw; + } + + &__item { + max-width: 210px; + padding: 8vw 2vw 4vw 0; + + } + + &__title { + @include font (14px, 16px, -0.01em); + // font-family: "Larsseit"; + // font-size: 14px; + // line-height: 16px; + // letter-spacing: -0.006em; + + color: $color-text-and-contact-us; + padding-bottom: 3vw; + } + + &__text { + max-width: 210px; + @include font (14px, 23px, -0.01em); + // font-family: "Larsseit"; + // font-size: 14px; + // line-height: 23px; + // letter-spacing: -0.006em; + padding-right: 1vw; + + color: rgba(34, 53, 111, 0.5); + + } + + @media (max-width: 955px) { + position: relative; + flex-direction: column; + justify-content: center; + align-items: center; + + &__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..ff795c22 --- /dev/null +++ b/src/styles/blocks/_why-thrive.scss @@ -0,0 +1,80 @@ +.why-thrive { + display: flex; + justify-content: space-between; + + &__content { + padding: 0 6vw; + background: $why-thrive; + //padding-bottom: 75px; + } + + &__title { + @include font (36px, 27px, -0.01em); + // font-family: "Larsseit"; + // font-size: 36px; + // line-height: 27px; + // letter-spacing: -0.006em; + padding: 75px 0; + margin-top: 75px; + + color: $white-color; + } + + &__text { + max-width: 540px; + @include font (24px, 35px, normal); + // font-family: "Larsseit"; + // font-size: 24px; + // line-height: 35px; + //font-weight: 300px; + padding-bottom: 75px; + color: $white-color; + + } + + &__text_bold { + font-size: 24px; + font-weight: bold; + } + + // &__box-image { + // object-fit: cover; + // object-position: left; + // } + &__img { + object-fit: cover; + object-position: left; + height: 100%; + } + + @media (max-width: 955px) { + position: relative; + justify-content: center; + align-items: center; + &__content { + padding: 0 8vw; + background: $why-thrive; + width: 100%; + //margin: 0 auto; + //padding-bottom: 75px; + } + &__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..62df0bed --- /dev/null +++ b/src/styles/blocks/_you-know.scss @@ -0,0 +1,77 @@ +.you-know { + display: flex; + justify-content: space-between; + + &__content { + padding: 4vw; + } + + &__img { + object-fit: cover; + //object-position: left; + height: 100%; + } + + &__title { + @include font (16px, 20px, 0.06em); + // font-family: "Larsseit"; + // font-size: 16px; + // line-height: 20px; + // letter-spacing: 0.06em; + + color: $color-text-and-contact-us; + + } + + &__text { + @include font (36px, 53px, -0.01em); + // font-family: "Larsseit"; + // font-size: 36px; + // line-height: 53px; + // letter-spacing: -0.01em; + padding: 9vw 0 8vw; + + color: $color-text-and-contact-us; + + &_active { + color: $why-thrive; + } + } + + &__link { + @include font (16px, 23px, 0.01em); + // font-family: "Larsseit"; + // font-size: 16px; + // line-height: 23px; + display: flex; + align-items: center; + //letter-spacing: 0.1em; + + color: $color-link; + } + + @media (max-width: 955px) { + position: relative; + flex-direction: column; + justify-content: center; + align-items: center; + + &__content { + z-index: 1; + } + &__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..6af2d429 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,37 @@ -@import "utils"; -@import "fonts"; -@import "typography"; +@import "./utils/variables.scss"; +@import "./utils/reset.scss"; +@import "./utils/mixin.scss"; +@import "./utils/extends.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"; + +@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"); +} + +html { + font-family: "Larsseit", sans-serif; + font-size: 24px; + font-weight: normal; + line-height: 34px; + font-style: normal; + overflow-y: scroll; +} body { - background: $c-gray; + max-width: 1200px; + margin: 0 auto; } diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index a1a5dd0e..fd285014 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,6 @@ -%h1 { - font-family: "Roboto", sans-serif; - font-weight: 400; +%title { + font-size: 24px; + line-height: 27px; + letter-spacing: -0.03em; + color: $why-thrive; } diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 00000000..7b857fa9 --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,12 @@ +a, +a:visited { + text-decoration: none; +} + +ul { + list-style: none; +} + +* { + box-sizing: border-box; +} 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/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;