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/header.9043c5b2.png b/header.9043c5b2.png new file mode 100644 index 00000000..dc8ff91f Binary files /dev/null and b/header.9043c5b2.png differ diff --git a/package-lock.json b/package-lock.json index e330c949..7c67bc3a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1186,6 +1186,131 @@ } } }, + "@mate-academy/bemlint": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@mate-academy/bemlint/-/bemlint-0.1.1.tgz", + "integrity": "sha512-fhY7PfaUDZpe/DU1qJRW3AO5Tuua9HLm8ZIgVD7HijerZi8QIsC/R+NfcGPQfo9eVD4FDf4Jba0vTzSAO5ayJg==", + "dev": true, + "requires": { + "chalk": "^4.1.0", + "commander": "^7.1.0", + "cosmiconfig": "^7.0.0", + "parse5": "^6.0.1", + "table-layout": "^1.0.1" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "array-back": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/array-back/-/array-back-4.0.2.tgz", + "integrity": "sha512-NbdMezxqf94cnNfWLL7V/im0Ub+Anbb0IoZhvzie8+4HJ4nMQuzHuy49FkGYCJK2yAloZ3meiB6AVMClbrI1vg==", + "dev": true + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "dev": true + }, + "cosmiconfig": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz", + "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==", + "dev": true, + "requires": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + } + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + } + }, + "parse5": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", + "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==", + "dev": true + }, + "path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + }, + "table-layout": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/table-layout/-/table-layout-1.0.2.tgz", + "integrity": "sha512-qd/R7n5rQTRFi+Zf2sk5XVVd9UQl6ZkduPFC3S7WEGJAmetDTjY3qPN50eSKzwuzEyQKy5TN2TiZdkIjos2L6A==", + "dev": true, + "requires": { + "array-back": "^4.0.1", + "deep-extend": "~0.6.0", + "typical": "^5.2.0", + "wordwrapjs": "^4.0.0" + } + } + } + }, "@mate-academy/eslint-config": { "version": "0.0.12", "resolved": "https://registry.npmjs.org/@mate-academy/eslint-config/-/eslint-config-0.0.12.tgz", @@ -5556,6 +5681,12 @@ "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==", "dev": true }, + "json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "dev": true + }, "json-schema": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz", diff --git a/package.json b/package.json index 8bbaf296..bae1638d 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.7", "@mate-academy/stylelint-config": "0.0.9", "colors": "^1.3.3", "eslint": "^5.16.0", diff --git a/src/images/boxes.png b/src/images/boxes.png new file mode 100644 index 00000000..d37e833e Binary files /dev/null and b/src/images/boxes.png differ diff --git a/src/images/contact-us.png b/src/images/contact-us.png new file mode 100644 index 00000000..66d149c0 Binary files /dev/null and b/src/images/contact-us.png differ diff --git a/src/images/contacts.png b/src/images/contacts.png new file mode 100644 index 00000000..e609caee Binary files /dev/null and b/src/images/contacts.png differ diff --git a/src/images/ellipse.png b/src/images/ellipse.png new file mode 100644 index 00000000..c448853c Binary files /dev/null and b/src/images/ellipse.png differ diff --git a/src/images/favicon.jpg b/src/images/favicon.jpg new file mode 100644 index 00000000..870568e3 Binary files /dev/null and b/src/images/favicon.jpg differ diff --git a/src/images/header/mainHeaderPict.png b/src/images/header/mainHeaderPict.png new file mode 100644 index 00000000..dc8ff91f Binary files /dev/null and b/src/images/header/mainHeaderPict.png differ diff --git a/src/images/know.png b/src/images/know.png new file mode 100644 index 00000000..fbfaecb1 Binary files /dev/null and b/src/images/know.png differ diff --git a/src/images/phone.svg b/src/images/phone.svg new file mode 100644 index 00000000..62ea425c --- /dev/null +++ b/src/images/phone.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + diff --git a/src/images/why.png b/src/images/why.png new file mode 100644 index 00000000..b08901cc Binary files /dev/null and b/src/images/why.png differ diff --git a/src/index.html b/src/index.html index 5d357bd6..5033823d 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,365 @@ - + - Title + ThriveTalk + - -

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 AM I + + + + WHAT DO I DO + +
+
+ +
+ + ThriveTalk +
+ +
+
+

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

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

+
+
+
+ +
+ ThriveTalk + +
+

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

+ SOME INFO +

+ +

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

+
+ +
+

+ ENFOLD HEALTH +

+ +

+ + Main Street 1, Olcott +
+ Buffalo, United States + +

+ + + +555 283 784 333 + + +
+ +
+
+ +
+

+ OFFICE HOURS +

+ +

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

+
+
+
+ + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 2067b3fc..91cc15ec 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,11 @@ @font-face { - font-family: "Roboto"; - src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); + font-family: "Larsseit"; + src: url("../fonts/Larsseit\ family/Larsseit.woff") format("woff"); font-weight: normal; - font-style: normal; +} + +@font-face { + font-family: "Larsseit"; + src: url("../fonts/Larsseit\ family/Larsseit-Bold.woff") format("woff"); + font-weight: bold; } 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 index 1366a06a..f49ec6ae 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,4 @@ @import "utils/vars"; @import "utils/mixins"; -@import "utils/extends"; +@import "utils/_normalize.scss"; +@import "utils/_typography"; diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 00000000..cafee9ce --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,43 @@ +.about { + &__container { + display: flex; + padding-top: 150px; + margin-bottom: 76px; + + @include onTablet { + flex-direction: column; + align-items: center; + padding-top: 50px; + } + } + + &__title { + margin-left: 105px; + margin-right: 225px; + + min-width: fit-content; + word-wrap: normal; + font-size: 16px; + line-height: 23px; + letter-spacing: 0.06em; + font-weight: normal; + color: $colorViolet; + + @include onTablet { + margin: 0 auto 50px; + } + } + + &__text { + max-width: 592px; + + line-height: 34px; + letter-spacing: 0.01em; + font-weight: bold; + color: $colorViolet; + + @include onTablet { + padding: 0 50px; + } + } +} diff --git a/src/styles/blocks/boxes.scss b/src/styles/blocks/boxes.scss new file mode 100644 index 00000000..dc070c6b --- /dev/null +++ b/src/styles/blocks/boxes.scss @@ -0,0 +1,45 @@ +.boxes { + margin-bottom: 22px; + + &__cards { + display: grid; + grid-template-columns: repeat(3,1fr); + + @include onTablet { + grid-template-columns: repeat(2, 1fr); + } + } + + &__card { + height: 480px; + + @include onTablet { + height: 350px; + } + + @include onMobile { + height: 150px; + } + + &--image { + background-image: url(../images/boxes.png); + } + + @each $index, $color in $colors-boxes { + &:nth-child(#{$index}) { + background-color: #{$color}; + } + } + + &::before { + content: ""; + margin-bottom: 30px; + + height: 96px; + + @include onMobile { + height: 35px; + } + } + } +} diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 00000000..ddbf70a7 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,48 @@ +.card { + display: flex; + flex-direction: column; + align-items: center; + + height: 360px; + + text-align: center; + font-size: 32px; + line-height: 34px; + letter-spacing: -0.01em; + color: #fff; + + transition: 1s; + + @include onTablet { + height: 300px; + } + + @include onMobile { + font-size: 16px; + height: 150px; + line-height: 16px; + } + + &:hover { + border-radius: 50px; + } + + @each $index, $color in $colors-help { + &:nth-child(#{$index}) { + background-color: $color; + } + } + + &::before { + content: ""; + margin-bottom: 23px; + + height: 72px; + width: 80%; + border-bottom: 1px solid #fff; + + @include onMobile { + height: 35px; + } + } +} diff --git a/src/styles/blocks/cards.scss b/src/styles/blocks/cards.scss new file mode 100644 index 00000000..05ee6666 --- /dev/null +++ b/src/styles/blocks/cards.scss @@ -0,0 +1,60 @@ +.cards { + &__container { + display: grid; + grid-template-columns: repeat(3, 1fr); + + margin-bottom: 40px; + + @include onTablet { + grid-template-columns: repeat(2, 1fr); + } + + @include onMobile { + grid-template-columns: 1fr; + } + } + + &__card { + display: flex; + flex-direction: column; + padding: 55px 77px 37px 105px; + height: 240px; + + transition: 0.5s; + + @include onTablet { + padding: 0; + margin: 20px; + } + + @include onMobile { + height: 130px; + } + } + + &__title { + font-size: 28px; + line-height: 33px; + letter-spacing: -0.03em; + color: $colorViolet; + margin-bottom: 28px; + + @include onTablet { + text-align: center; + } + } + + &__text { + max-width: 300px; + font-size: 16px; + line-height: 25px; + letter-spacing: -0.03em; + color: $colorViolet; + opacity: 0.5; + + @include onTablet { + margin: 0 auto; + text-align: center; + } + } +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 00000000..6dada0b5 --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,95 @@ +.contact-us { + display: flex; + justify-content: space-between; + + background-color: $colorViolet; + + &__text-container { + display: flex; + flex-direction: column; + + margin-left: 180px; + + @include onTablet { + margin: 0 50px; + } + } + + &__subtitle { + font-size: 16px; + line-height: 12px; + letter-spacing: 0.06em; + color: #fff; + + margin-top: 102px; + + margin-bottom: 230px; + + @include onTablet { + margin-bottom: 50px; + } + } + + &__title { + font-size: 64px; + line-height: 94px; + letter-spacing: -0.01em; + color: #fff; + + margin-bottom: 75px; + + @include onMobile { + font-size: 32px; + line-height: 47px; + } + } + + &__text { + font-size: 36px; + line-height: 53px; + letter-spacing: -0.01em; + color: #fff; + + margin-bottom: 94px; + + @include onMobile { + font-size: 24px; + line-height: 34px; + } + } + + &__get { + font-size: 16px; + line-height: 23px; + letter-spacing: 0.1em; + color: $colorAzure; + text-decoration: none; + + margin-bottom: 42px; + + transition: 0.3s; + + @include onMobile { + margin: 0 auto 42px; + } + + &:hover { + opacity: 0.7; + } + } + + &__image { + max-width: 580px; + margin-left: 100px; + + transition: 0.3s; + + @include onTablet { + display: none; + } + + &:hover { + transform: scale(0.9); + } + } +} diff --git a/src/styles/blocks/contacts.scss b/src/styles/blocks/contacts.scss new file mode 100644 index 00000000..6b30747c --- /dev/null +++ b/src/styles/blocks/contacts.scss @@ -0,0 +1,51 @@ +.contacts { + display: flex; + + @include onTablet { + flex-direction: column; + } + + &__image { + object-fit: cover; + transition: 0.3s; + + @include onTablet { + height: 400px; + width: 100%; + } + } + + &__blocks { + display: grid; + grid-template-columns: repeat(3,1fr); + + gap: 20px; + + padding: 98px 40px 74px 68px; + + &:not(:last-child) { + margin-right: 48px; + } + + @include onTablet { + padding: 0; + margin: 50px; + } + + @include onMobile { + grid-template-columns: 1fr; + } + } + + &__block { + @include onTablet { + display: flex; + flex-direction: column; + align-items: center; + } + } + + &__location { + padding-bottom: 20px; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 00000000..605eea79 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,22 @@ +.footer { + display: flex; + align-items: center; + + background-color: $colorAzure; + + height: 80px; + + &__text { + margin-left: 179px; + + font-size: 14px; + font-weight: bold; + line-height: 11px; + letter-spacing: -0.01em; + color: #fff; + + @include onTablet { + margin: 0 auto; + } + } +} diff --git a/src/styles/blocks/hamburger.scss b/src/styles/blocks/hamburger.scss new file mode 100644 index 00000000..dd4f5a57 --- /dev/null +++ b/src/styles/blocks/hamburger.scss @@ -0,0 +1,50 @@ +#hamburger__toggler { + opacity: 0; + + &:checked ~ .hamburger__check > span { + transform: rotate(45deg); + } + &:checked ~ .hamburger__check > span::before { + top: 0; + transform: rotate(0); + } + &:checked ~ .hamburger__check > span::after { + top: 0; + transform: rotate(90deg); + } + &:checked ~ .nav__list { + gap: 30px; + margin: 0 auto; + visibility: visible; + } +} + +.hamburger { + @include onMobile { + &__check { + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 50px; + + & > span, + & > span::before, + & > span::after { + display: block; + position: absolute; + width: 50px; + height: 2px; + background-color: $colorViolet; + transition: 0.3s; + } + & > span::before { + content: ""; + top: -8px; + } + & > span::after { + content: ""; + top: 8px; + } + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 00000000..a90d379b --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,208 @@ +.header { + position: relative; + + background-color: #f4f9e2; + + &__text-container { + max-width: 1130px; + + margin: 0 auto; + + padding: 0 30px 75px; + } + + &__nav { + padding-top: 30px; + margin-bottom: 180px; + + @include onMobile { + margin-bottom: 100px; + } + } + + &__title { + position: relative; + + font-size: 48px; + line-height: 54px; + font-weight: bold; + letter-spacing: -0.04em; + color: $colorViolet; + + margin-bottom: 58px; + z-index: 1; + + @include onTablet { + text-align: center; + } + + @include onMobile { + font-size: 38px; + } + } + + &__logo { + margin-bottom: 36px; + + @include onTablet { + text-align: center; + } + } + + &__about { + position: relative; + + max-width: 470px; + + margin-bottom: 63px; + + font-family: Larsseit, sans-serif; + line-height: 42px; + color: $colorViolet; + + z-index: 1; + + @include onTablet { + text-align: center; + margin: 0 auto 63px; + } + } + + &__links { + display: flex; + + @include onTablet { + justify-content: space-evenly; + } + } + + &__link { + display: flex; + align-items: center; + justify-content: center; + + width: 150px; + height: 50px; + background-color: $colorOrange; + + text-decoration: none; + font-family: Larsseit, sans-serif; + color: #fff; + font-size: 16px; + line-height: 23px; + font-weight: bold; + letter-spacing: 0.1em; + + transition: 0.3s; + + @include onTablet { + width: 200px; + } + + @include onMobile { + line-height: 16px; + font-size: 12px; + } + + &:hover { + color: $colorOrange; + background-color: #f4f9e2; + border: 2px solid $colorOrange; + } + + &--inversive { + margin-left: 38px; + + color: $colorOrange; + background-color: #f4f9e2; + + &:hover { + border: 2px solid $colorOrange; + } + } + } + + &__elips { + position: absolute; + top: 0; + left: 50%; + height: 100%; + width: 50%; + + background-image: url(../images/ellipse.png); + background-repeat: no-repeat; + + @include onTablet { + display: none; + } + } + + &__image { + position: absolute; + top: 0; + right: 0; + transition: 0.3s; + + &:hover { + transform: scale(1.1); + } + + @include onTablet { + display: none; + } + } + + &__button { + display: flex; + align-items: center; + justify-content: center; + + width: 150px; + height: 50px; + border-radius: 50px; + background-color: $colorAzure; + z-index: 1; + + font-family: Larsseit, sans-serif; + font-size: 14px; + line-height: 16px; + font-weight: bold; + color: #fff; + text-decoration: none; + + transition: 0.3s; + + @include onTablet { + position: fixed; + bottom: 40px; + right: 20px; + + width: 50px; + + background-color: rgba(0,0,0,0); + } + + &-text { + @include onTablet { + display: none; + } + } + + &-image { + display: none; + + @include onTablet { + display: block; + object-fit: contain; + width: 50px; + border-radius: 50px; + } + } + + &:hover { + color: $colorAzure; + background-color: #f4f9e2; + border: 2px solid $colorAzure; + } + } +} diff --git a/src/styles/blocks/help.scss b/src/styles/blocks/help.scss new file mode 100644 index 00000000..4082d62a --- /dev/null +++ b/src/styles/blocks/help.scss @@ -0,0 +1,25 @@ +.help { + &__title { + padding-bottom: 24px; + + opacity: 50%; + font-size: 16px; + line-height: 19px; + text-align: center; + letter-spacing: 0.06em; + font-weight: normal; + + color: $colorViolet; + } + + &__cards { + display: grid; + grid-template-columns: repeat(4,1fr); + + @include onTablet { + grid-template-columns: repeat(2, 1fr); + } + + margin-bottom: 120px; + } +} diff --git a/src/styles/blocks/know.scss b/src/styles/blocks/know.scss new file mode 100644 index 00000000..f6485e5a --- /dev/null +++ b/src/styles/blocks/know.scss @@ -0,0 +1,88 @@ +.know { + display: flex; + + @include onTablet { + flex-direction: column; + justify-content: center; + } + + &__text-container { + padding-right: 175px; + + @include onTablet { + padding: 0 50px; + } + } + + &__image { + margin-right: 106px; + object-fit: cover; + + transition: 0.3s; + + @include onTablet { + height: 300px; + width: 100%; + margin-bottom: 50px; + } + + &:hover { + transform: scale(0.9); + } + } + + &__title { + margin-top: 100px; + margin-bottom: 225px; + + font-size: 16px; + line-height: 12px; + letter-spacing: 0.06em; + color: $colorViolet; + + @include onTablet { + margin: 0 auto 50px; + } + + @include onMobile { + line-height: 16px; + } + } + + &__text { + max-width: 675px; + margin-bottom: 110px; + + font-size: 36px; + line-height: 53px; + letter-spacing: -0.01em; + font-weight: bold; + color: $colorViolet; + + &--azure { + color: $colorAzure; + } + + @include onMobile { + font-size: 24px; + line-height: 34px; + } + } + + &__get { + display: block; + color: $colorOrange; + font-size: 16px; + line-height: 23px; + letter-spacing: 0.1em; + text-decoration: none; + + margin-bottom: 42px; + + transition: 0.3s; + + &:hover { + opacity: 0.7; + } + } +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 00000000..10ae3e08 --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,16 @@ +.logo { + transition: 0.3s; + + &:hover { + opacity: 0.7; + } + + &__link { + color: $colorAzure; + text-decoration: none; + font-family: Larsseit, sans-serif; + font-weight: bold; + line-height: 27px; + letter-spacing: -0.04em; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 00000000..7ef4d3ae --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,97 @@ +.nav { + display: flex; + justify-content: space-between; + align-items: center; + + padding: 0; + + @include onTablet { + flex-direction: column; + } + + &__logo { + display: flex; + align-items: center; + + @include onTablet { + margin: 0 auto 80px; + + font-size: 40px; + } + } + + &__list { + display: flex; + align-items: center; + + list-style: none; + + @include onTablet { + margin: 0 auto; + } + + @media (max-width: 545px) { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 30px; + } + + @include onMobile { + grid-template-columns: 1fr; + gap: 0; + margin: 0; + + transition: 0.3s; + visibility: hidden; + } + } + + &__link { + color: $colorViolet; + text-decoration: none; + font-family: Larsseit, sans-serif; + font-size: 14px; + line-height: 16px; + + padding: 0 10px; + + transition: 0.3s; + + @include onTablet { + font-size: 30px; + line-height: 32px; + } + } + + &__item { + position: relative; + + margin: 0 10px; + + text-decoration: none; + z-index: 1; + + @media (max-width: 545px) { + margin: 20 10; + text-align: center; + } + + &::after { + content: ""; + + position: absolute; + bottom: 0; + display: block; + width: 100%; + height: 5px; + opacity: 0; + transition: opacity 0.3s; + + box-shadow: inset 0 -1px 0 $colorViolet; + } + + &:hover::after { + opacity: 1; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 00000000..069dfef6 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,6 @@ +.page { + &__body { + max-width: 1440px; + margin: 0 auto; + } +} diff --git a/src/styles/blocks/text.scss b/src/styles/blocks/text.scss new file mode 100644 index 00000000..39c6ca24 --- /dev/null +++ b/src/styles/blocks/text.scss @@ -0,0 +1,24 @@ +.text { + font-size: 14px; + line-height: 23px; + letter-spacing: -0.01em; + color: $colorViolet; + text-decoration: none; + + opacity: 0.5; + + transition: 0.3s; + + @include onTablet { + text-align: center; + } + + &--email { + color: #0052c1; + opacity: 100%; + + &:hover { + color: #5383d8; + } + } +} diff --git a/src/styles/blocks/title.scss b/src/styles/blocks/title.scss new file mode 100644 index 00000000..14d8c69d --- /dev/null +++ b/src/styles/blocks/title.scss @@ -0,0 +1,13 @@ +.title { + padding-bottom: 48px; + font-size: 14px; + line-height: 16px; + letter-spacing: -0.01em; + font-weight: bold; + color: $colorViolet; + + @include onMobile { + line-height: 24px; + text-align: center; + } +} diff --git a/src/styles/blocks/why.scss b/src/styles/blocks/why.scss new file mode 100644 index 00000000..38094420 --- /dev/null +++ b/src/styles/blocks/why.scss @@ -0,0 +1,62 @@ +.why { + display: flex; + justify-content: space-between; + + background-color: $colorAzure; + + padding-left: 178px; + + @include onTablet { + flex-direction: column; + padding: 0; + } + + &__text-container { + padding-bottom: 95px; + margin-right: 50px; + + @include onTablet { + padding: 0 50px; + margin: 0 auto 50px; + } + } + + &__title { + margin-top: 151px; + margin-bottom: 75px; + font-size: 36px; + line-height: 27px; + letter-spacing: -0.01em; + color: #fff; + + @include onMobile { + line-height: 46px; + } + } + + &__text { + color: #fff; + font-size: 20px; + line-height: 30px; + + &--bold { + font-size: 24px; + line-height: 36px; + font-weight: bold; + } + } + + &__image { + transition: 0.3s; + + @include onTablet { + object-fit: cover; + height: 400px; + width: 100%; + } + + &:hover { + transform: scale(0.9); + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e4..e4ffee76 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,21 @@ @import "utils"; @import "fonts"; -@import "typography"; -body { - background: $c-gray; -} +@import "blocks/logo.scss"; +@import "blocks/hamburger.scss"; +@import "blocks/nav.scss"; +@import "blocks/text.scss"; +@import "blocks/card.scss"; +@import "blocks/title.scss"; + +@import "blocks/page.scss"; +@import "blocks/header.scss"; +@import "blocks/why.scss"; +@import "blocks/about.scss"; +@import "blocks/help.scss"; +@import "blocks/boxes.scss"; +@import "blocks/cards.scss"; +@import "blocks/know.scss"; +@import "blocks/contact-us.scss"; +@import "blocks/contacts.scss"; +@import "blocks/footer.scss"; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index a1a5dd0e..00000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: "Roboto", sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780..e3c69556 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,15 @@ #{$_property}: $_toValue; } } + +@mixin onMobile { + @media (max-width:320px) { + @content; + } +} + +@mixin onTablet { + @media (max-width: 1024px) { + @content; + } +} diff --git a/src/styles/utils/_normalize.scss b/src/styles/utils/_normalize.scss new file mode 100644 index 00000000..5369d68e --- /dev/null +++ b/src/styles/utils/_normalize.scss @@ -0,0 +1,10 @@ +body, +ul, +p, +h1, +h2, +h3, +h4 { + margin: 0; + padding: 0; +} diff --git a/src/styles/utils/_typography.scss b/src/styles/utils/_typography.scss new file mode 100644 index 00000000..a230111b --- /dev/null +++ b/src/styles/utils/_typography.scss @@ -0,0 +1,13 @@ +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; + font-family: "Larsseit", sans-serif; + font-size: 24px; + + @include onMobile { + font-size: 18px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ff..0fb67b6c 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,16 @@ -$c-gray: #eee; +$colorAzure: #62d0df; +$colorViolet:#22356f; +$colorOrange:#f9b640; + +$colors-help: + "1"#FFE2DE, + "2"#C4E769, + "3"#0052C1, + "4" $colorViolet; + + $colors-boxes: + "1"$colorViolet, + "2"#0052C1, + "4" $colorAzure, + "5" #DEE1FF, + "6" #8F00FF;