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 1f753740..79cfd451 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/yM 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/Digits/). + [DEMO LINK](https://RomanMinchenko.github.io/Digits/). 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..2767adc1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1206,13 +1206,25 @@ "dev": true }, "@mate-academy/scripts": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-0.2.0.tgz", - "integrity": "sha512-17i1Kdc+8D6CqypX+0MsHXIt299nA90JVUU2CyNb/Rrw2oPMUVwImbHCK6dJYJlZ6GRF2CV5zRBauVHLmldPFw==", + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-0.9.2.tgz", + "integrity": "sha512-SoCOaS3q2TLZSFlPr6PyxgP7gRg+UhaEitO1TygnaEHxNv1Zv9+VgYlwnSr0BjgQl0kMhow94m81DcBcE3dxbg==", "dev": true, "requires": { + "@types/get-port": "^4.2.0", "commander": "^5.1.0", - "fs-extra": "^9.0.0" + "cross-env": "^7.0.3", + "fs-extra": "^9.1.0", + "get-port": "^5.1.1", + "open": "^7.4.2" + }, + "dependencies": { + "get-port": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/get-port/-/get-port-5.1.1.tgz", + "integrity": "sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==", + "dev": true + } } }, "@mate-academy/stylelint-config": { @@ -1389,6 +1401,15 @@ "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==", "dev": true }, + "@types/get-port": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/@types/get-port/-/get-port-4.2.0.tgz", + "integrity": "sha512-Iv2FAb5RnIk/eFO2CTu8k+0VMmIR15pKbcqRWi+s3ydW+aKXlN2yemP92SrO++ERyJx+p6Ie1ggbLBMbU1SjiQ==", + "dev": true, + "requires": { + "get-port": "*" + } + }, "@types/glob": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz", @@ -2774,6 +2795,58 @@ "sha.js": "^2.4.8" } }, + "cross-env": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz", + "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==", + "dev": true, + "requires": { + "cross-spawn": "^7.0.1" + }, + "dependencies": { + "cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "requires": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + } + }, + "path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true + }, + "shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "requires": { + "shebang-regex": "^3.0.0" + } + }, + "shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true + }, + "which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "requires": { + "isexe": "^2.0.0" + } + } + } + }, "cross-spawn": { "version": "6.0.5", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", @@ -4310,15 +4383,15 @@ "dev": true }, "fs-extra": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.0.tgz", - "integrity": "sha512-pmEYSk3vYsG/bF651KPUXZ+hvjpgWYw/Gc7W9NFUe3ZVLczKKWIij3IKpOrQcdw4TILtibFslZ0UmR8Vvzig4g==", + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz", + "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==", "dev": true, "requires": { "at-least-node": "^1.0.0", "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", - "universalify": "^1.0.0" + "universalify": "^2.0.0" } }, "fs.realpath": { @@ -5252,6 +5325,12 @@ "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=", "dev": true }, + "is-docker": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", + "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==", + "dev": true + }, "is-extendable": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz", @@ -5590,13 +5669,13 @@ } }, "jsonfile": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.0.1.tgz", - "integrity": "sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", "dev": true, "requires": { "graceful-fs": "^4.1.6", - "universalify": "^1.0.0" + "universalify": "^2.0.0" } }, "jsprim": { @@ -6741,6 +6820,27 @@ "mimic-fn": "^1.0.0" } }, + "open": { + "version": "7.4.2", + "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz", + "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==", + "dev": true, + "requires": { + "is-docker": "^2.0.0", + "is-wsl": "^2.1.1" + }, + "dependencies": { + "is-wsl": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", + "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", + "dev": true, + "requires": { + "is-docker": "^2.0.0" + } + } + } + }, "opn": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/opn/-/opn-5.3.0.tgz", @@ -10768,9 +10868,9 @@ } }, "universalify": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz", - "integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", "dev": true }, "unquote": { diff --git a/package.json b/package.json index 39ef54b8..34dd1ed9 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "@linthtml/linthtml": "^0.3.2", "@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", diff --git a/src/images/abotu-us/about.png b/src/images/abotu-us/about.png new file mode 100644 index 00000000..56a653f0 Binary files /dev/null and b/src/images/abotu-us/about.png differ diff --git a/src/images/companies/Netflix.svg b/src/images/companies/Netflix.svg new file mode 100644 index 00000000..b5cd018e --- /dev/null +++ b/src/images/companies/Netflix.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/companies/cinemax.png b/src/images/companies/cinemax.png new file mode 100644 index 00000000..ad124f77 Binary files /dev/null and b/src/images/companies/cinemax.png differ diff --git a/src/images/companies/cinemax.svg b/src/images/companies/cinemax.svg new file mode 100644 index 00000000..f3f2d540 --- /dev/null +++ b/src/images/companies/cinemax.svg @@ -0,0 +1,326 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/companies/disney..png b/src/images/companies/disney..png new file mode 100644 index 00000000..98759c79 Binary files /dev/null and b/src/images/companies/disney..png differ diff --git a/src/images/companies/draw.png b/src/images/companies/draw.png new file mode 100644 index 00000000..56dada0c Binary files /dev/null and b/src/images/companies/draw.png differ diff --git a/src/images/companies/figma.png b/src/images/companies/figma.png new file mode 100644 index 00000000..a8ed1d31 Binary files /dev/null and b/src/images/companies/figma.png differ diff --git a/src/images/companies/figma.svg b/src/images/companies/figma.svg new file mode 100644 index 00000000..d5282083 --- /dev/null +++ b/src/images/companies/figma.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/companies/google.png b/src/images/companies/google.png new file mode 100644 index 00000000..c7134527 Binary files /dev/null and b/src/images/companies/google.png differ diff --git a/src/images/companies/stripe.png b/src/images/companies/stripe.png new file mode 100644 index 00000000..0f582309 Binary files /dev/null and b/src/images/companies/stripe.png differ diff --git a/src/images/header/header.png b/src/images/header/header.png new file mode 100644 index 00000000..f00d37f3 Binary files /dev/null and b/src/images/header/header.png differ diff --git a/src/images/logo/logo.svg b/src/images/logo/logo.svg new file mode 100644 index 00000000..2cae3df3 --- /dev/null +++ b/src/images/logo/logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/mailto/mailto.png b/src/images/mailto/mailto.png new file mode 100644 index 00000000..7677e82c Binary files /dev/null and b/src/images/mailto/mailto.png differ diff --git a/src/images/portfolio/portfolio.png b/src/images/portfolio/portfolio.png new file mode 100644 index 00000000..21586556 Binary files /dev/null and b/src/images/portfolio/portfolio.png differ diff --git a/src/images/social/Envato.svg b/src/images/social/Envato.svg new file mode 100644 index 00000000..06701f65 --- /dev/null +++ b/src/images/social/Envato.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social/drible.svg b/src/images/social/drible.svg new file mode 100644 index 00000000..8ab3b05b --- /dev/null +++ b/src/images/social/drible.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/social/facebook.svg b/src/images/social/facebook.svg new file mode 100644 index 00000000..4eed9444 --- /dev/null +++ b/src/images/social/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social/instagram.svg b/src/images/social/instagram.svg new file mode 100644 index 00000000..727c9605 --- /dev/null +++ b/src/images/social/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social/twitter.svg b/src/images/social/twitter.svg new file mode 100644 index 00000000..fdd57973 --- /dev/null +++ b/src/images/social/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/testimonials/testimonial-ava-1.jpg b/src/images/testimonials/testimonial-ava-1.jpg new file mode 100644 index 00000000..d487a51d Binary files /dev/null and b/src/images/testimonials/testimonial-ava-1.jpg differ diff --git a/src/images/testimonials/testimonial-ava-2.jpg b/src/images/testimonials/testimonial-ava-2.jpg new file mode 100644 index 00000000..04288940 Binary files /dev/null and b/src/images/testimonials/testimonial-ava-2.jpg differ diff --git a/src/images/testimonials/testimonial-ava-3.jpg b/src/images/testimonials/testimonial-ava-3.jpg new file mode 100644 index 00000000..24c0f2b9 Binary files /dev/null and b/src/images/testimonials/testimonial-ava-3.jpg differ diff --git a/src/images/work/design.png b/src/images/work/design.png new file mode 100644 index 00000000..75d08d88 Binary files /dev/null and b/src/images/work/design.png differ diff --git a/src/images/work/easy.png b/src/images/work/easy.png new file mode 100644 index 00000000..68b2a32f Binary files /dev/null and b/src/images/work/easy.png differ diff --git a/src/images/work/fast.png b/src/images/work/fast.png new file mode 100644 index 00000000..ee940b3e Binary files /dev/null and b/src/images/work/fast.png differ diff --git a/src/index.html b/src/index.html index 5d357bd6..f5286e8b 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,485 @@ - + Title - -

Hello Mate Academy

+ +
+
+
+ + +
+ +00 123 456 789 + + Contact us + +
+
+ +
+

+ Good design meets great user experience +

+

+ For everyone, from beginners to experts +

+
+ Buy Digits + See the Features +
+
+ +
+
+ header-image +
+
+ Trusted by forward-thinking software teams around tho world +
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ +
+
+
+

+ Whatever work you do, we're able to help +

+
+
+ about-us +
+ +
+
+
+ badge-design +
+ +
+

+ Design and Assets +

+

+ Make your brand stand out with pixel-perfect design crafted ti perfection. +

+
+
+ +
+
+ badge-easy-content +
+ +
+

+ Easy Content +

+

+ Import your or build pages visually. Bonus: All imahes and illustration includet! +

+
+
+ +
+
+ badge-fast-and-reliable +
+ +
+

+ Fast And Reliable +

+

+ No heavy-weight plugins. No builders. No unneccesary file loading. Pure WordPress. +

+
+
+
+
+
+
+ +
+

+ Simplicity meets innovative design +

+

+ It's really easy to start using Digits. Install the theme, chose a demo and start designing the future of your busines! +

+ Buy Digits +
+ portfolio-image +
+
+ +
+
+

+ What others are saying +

+
+
+
+ Completely beautiful website and amazing support! This is my second website from this author and I love both of the sites so much and she has helped me so well when I needed it! +
+
+
+ testimonial-1 +
+
+ Happy User +
+
+ tempty.club +
+
+
+
+
+ Really easy to use and customize. easy to understand. Darinka helped me with my site! She answers very quickly, a good service! Thank you very much! +
+
+
+ testimonial-1 +
+
+ Happy User +
+
+ tempty.club +
+
+
+
+
+ Really pleasing to look at! Documentation (including installation instructions) are clear and that is coming from a relatively new WordPress user. +
+
+
+ testimonial-1 +
+
+ Happy User +
+
+ tempty.club +
+
+
+
+
+
+ +
+
+
+
+ Ready to launch your next website? +
+
+ + mail-logo + Get in touch now + +
+ Or, take a peek inside our + + design studio + +
+
+
+
+
+
+ + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 2067b3fc..22729fff 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,13 @@ @font-face { - font-family: "Roboto"; - src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); + font-family: "Halyard text"; + src: url("../fonts/Halyard/Halyard\ Text\ Regular.ttf"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Halyard display"; + src: url("../fonts/Halyard/Halyard\ Display\ Regular.ttf"); font-weight: normal; font-style: normal; } diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 00000000..05efc18a --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,23 @@ +.about { + &__content { + display: flex; + justify-content: space-between; + } + + &__cards { + @include adaptiv-padding(96, 0.5, 0, 0.5, 1); + width: 100%; + + @include tablet() { + width: 35%; + } + } + + &__image-container { + width: 0; + + @include tablet() { + width: 65%; + } + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 00000000..678b0389 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,51 @@ +.button { + @include adaptiv-font(14); + @include adaptiv-size(95, 38); + @include adaptiv-radius(19); + + display: flex; + justify-content: center; + align-items: center; + + box-sizing: border-box; + background-color: $blueColor; + + font-weight: 400; + text-decoration: none; + color: #fff; + + cursor: pointer; + transition: all 0.3s; + + &:hover { + color: #fff; + // border-color: #005ecc; + background-color: $blueColor; + box-shadow: 0 13px 27px rgba(0, 83, 181, 0.46); + } + + &:active { + border-color: $blueColor; + background-color: $blueColor; + box-shadow: 0 8px 14px rgba(0, 83, 181, 0.48); + } + + &--white { + background-color: #fff; + color: $blueColor; + border: 1px solid $blueColor; + + &:hover { + color: $blueColor; + // border-color: $blueColor; + background-color: #fff; + box-shadow: 0 13px 27px rgba(0, 83, 181, 0.46); + } + + &:active { + border-color: $blueColor; + background-color: #fff; + box-shadow: 0 8px 14px rgba(0, 83, 181, 0.48); + } + } +} diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 00000000..124c4691 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,28 @@ +.card { + @include adaptiv-padding(64, 1, 0, 1, 0); + display: flex; + + &--midle { + border-top: 1px solid $textColor2; + border-bottom: 1px solid $textColor2; + } + + &__badge { + @include adaptiv-padding(64, 0, 1, 0, 0); + } + + &__title { + @include adaptiv-font(19); + + margin-top: 0; + margin-bottom: 38px; + color: $titleColor; + } + + &__description { + @include adaptiv-font(15); + + font-weight: 600; + color: $textColor2; + } +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 00000000..449ebe66 --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,50 @@ +.contact-us { + background-color: $blueColor; + + &__content { + @include adaptiv-padding(56, 1, 0, 1, 0); + + display: flex; + flex-direction: column; + align-items: center; + + @include tablet() { + flex-direction: row; + justify-content: space-between; + } + } + + &__title { + margin: 0; + width: 70%; + text-align: center; + line-height: 1.5; + + @include tablet() { + width: 30%; + text-align: left; + } + } + + &__button { + @include adaptiv-size(212, 48); + @include adaptiv-radius(24); + + margin: 18px auto; + + @include tablet() { + margin: 18px 0 18px auto; + } + } + + &__link-text { + @include adaptiv-font(14); + font-weight: 400; + color: #fff; + } + + &__link { + text-decoration: none; + color: #d3c9a4; + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 00000000..d1d610c0 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,11 @@ +.container { + margin: 0 auto; + width: 100%; + max-width: $viewportSize; + padding: 0 $containerPadding; + box-sizing: border-box; + + @include desktop() { + padding: 0 $containerPaddingDesk; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 00000000..b618054f --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,105 @@ +.footer { + margin: 0; + &__content { + @include adaptiv-padding(72, 1, 0, 1, 0); + + display: block; + text-align: center; + border-bottom: 1px solid $ligthGreyColor; + + @include tablet() { + display: flex; + justify-content: space-between; + text-align: left; + } + } + + &__section { + display: none; + + @include tablet() { + display: block; + } + } + + &__title { + @include adaptiv-font(22); + + margin-top: 0; + color: $titleColor; + } + + &__logo-content { + width: 40%; + margin: 0 auto; + + @include tablet() { + width: 25%; + margin: 0; + } + } + + &__socials { + padding: 14px 0; + } + + &__item { + padding-right: 12px; + transition: transform 0.3s; + + &:hover { + transform: perspective(100px) translateZ(20px); + } + + &:last-child { + padding: 0; + } + } + + &__copyright { + @include adaptiv-padding(48, 1, 0, 1, 0); + + display: block; + text-align: center; + + @include tablet() { + display: flex; + justify-content: space-between; + } + } + + &__copyright-text { + @include adaptiv-font(13); + color: $textColor2; + } + + &__copyright-link { + @include adaptiv-font(15); + + position: relative; + margin-right: 24px; + text-decoration: none; + color: $textColor; + + &:last-child { + margin: 0; + } + + &::after { + content: ""; + position: absolute; + bottom: -8px; + left: 0; + right: 0; + border-bottom: 2px solid transparent; + transition: border-color 0.3s; + } + + &:hover { + &::after { + border-color: $textColor; + transition: border-color 0.3s; + } + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 00000000..e09214e0 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,94 @@ +.header { + &::after { + content: ""; + position: absolute; + top: 0; + right: 0; + left: 0; + width: 100%; + height: 130vh; + background: linear-gradient(#fff, #eef4ff); + z-index: -2; + } + + &__content { + display: flex; + flex-direction: column; + align-items: center; + margin: 0 auto; + width: 50%; + margin-top: 48px; + + @include tablet() { + margin-top: 72px; + } + } + + &__title { + @include adaptiv-font(38); + font-family: "Halyard display", sans-serif; + line-height: 1.15; + font-weight: bold; + text-align: center; + margin: 0; + color: $titleColor; + } + + &__subtitle { + @include adaptiv-font(16); + margin: 1.5rem 0; + text-align: center; + color: $textColor; + } + + &__buttons { + display: flex; + flex-direction: row; + justify-content: space-evenly; + width: 160%; + + @include tablet() { + width: 80%; + } + } + + &__button { + @include adaptiv-size(156, 48); + @include adaptiv-radius(24); + } + + &__container { + text-align: center; + } + + &__companies-text { + @include adaptiv-font(14); + color: $textColor2; + margin: 32px 0; + } + + &__image-container { + width: 100%; + overflow: hidden; + } + + &__image { + top: 25%; + } + + &__companies-link { + text-decoration: none; + } + + &__companies-logo { + @include adaptiv-size(108, 30); + + object-fit: contain; + padding: 0 10px; + transition: all 0.3s; + + &:hover { + transform: perspective(100px) translateZ(10px); + } + } +} diff --git a/src/styles/blocks/image.scss b/src/styles/blocks/image.scss new file mode 100644 index 00000000..c1c10eb7 --- /dev/null +++ b/src/styles/blocks/image.scss @@ -0,0 +1,16 @@ +.image { + position: absolute; + left: 0; + width: 100%; + opacity: 0.1; + z-index: -1; + + @include tablet() { + position: relative; + width: 100%; + opacity: 1; + + object-fit: cover; + object-position: center; + } +} diff --git a/src/styles/blocks/link.scss b/src/styles/blocks/link.scss new file mode 100644 index 00000000..04eb5f60 --- /dev/null +++ b/src/styles/blocks/link.scss @@ -0,0 +1,30 @@ +.link { + @include adaptiv-font(16); + + font-family: "Halyard text", sans-serif; + + display: flex; + flex-direction: column; + position: relative; + + text-align: center; + text-decoration: none; + color: $titleColor; + + &::after { + content: ""; + position: absolute; + bottom: -8px; + left: 0; + right: 0; + border-bottom: 2px solid transparent; + transition: border-color 0.3s; + } + + &:hover { + &::after { + border-color: $titleColor; + transition: border-color 0.3s; + } + } +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 00000000..17a98cb4 --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,17 @@ +.logo { + height: $logoHeigth; + width: 81px; + z-index: 1; + + &:focus ~ .nav { + transform: translateX(0); + } + + &__link { + text-decoration: none; + } + + @include desktop() { + height: $logoHeigthDesk; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 00000000..82ea80a3 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,70 @@ +.nav { + &--menu { + display: flex; + flex-direction: column; + position: absolute; + top: 0; + right: 0; + left: -$containerPadding; + width: 40vw; + height: 50vh; + padding: #{$topActionHeigth} 40px; + margin: 0; + transform: translateX(-100%); + box-sizing: border-box; + background-color: #a3c3ff7e; + transition: translatex, 0.3s; + + @include tablet() { + justify-content: center; + background-color: #a3c3ff00; + } + } + + &__list { + display: flex; + flex-direction: column; + align-items: start; + list-style: none; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + + &--center { + align-items: center; + } + } + + &__item { + padding: 10px 0; + } + + @include tablet() { + display: flex; + position: relative; + align-items: center; + width: max-content; + height: max-content; + padding: 0; + transform: translateX(0); + z-index: 0; + + &__list { + display: flex; + flex-direction: row; + list-style: none; + padding: 0; + margin: 0; + + &--column { + display: flex; + flex-direction: column; + } + } + + &__item { + margin-right: 48px; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 00000000..f2506c7c --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,25 @@ +.page { + @include adaptiv-font(16); + + font-family: "Halyard text", sans-serif; + line-height: 150%; + font-weight: 600; + color: $textColor; + scroll-behavior: smooth; + + &__body { + margin: 0; + } + + &__section { + margin-bottom: 48px; + + @include tablet() { + margin-bottom: 96px; + } + + &:last-child { + margin: 0; + } + } +} diff --git a/src/styles/blocks/portfolio.scss b/src/styles/blocks/portfolio.scss new file mode 100644 index 00000000..ce24800b --- /dev/null +++ b/src/styles/blocks/portfolio.scss @@ -0,0 +1,35 @@ +.portfolio { + background-color: #fffae8; + padding-top: 48px; + text-align: center; + + @include tablet() { + padding-top: 96px; + } + + &__title { + width: 70%; + } + + &__description { + width: 70%; + margin: 0 auto; + + @include tablet() { + width: 30%; + } + } + + &__image-container { + overflow: hidden; + display: flex; + } + + &__image { + width: 100%; + } + + &__button { + margin: 24px auto; + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 00000000..644556f7 --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,83 @@ +.testimonials { + &__cards { + display: flex; + flex-direction: column; + + @include tablet() { + display: grid; + grid-template-columns: repeat(3, 1fr); + column-gap: 32px; + padding-top: 48px; + } + } + + &__card { + @include adaptiv-padding(42, 1, 1, 1, 1); + @include adaptiv-size(420, 550); + + display: flex; + flex-direction: column; + justify-content: space-between; + margin: 0 auto 32px; + box-sizing: border-box; + border: 3px solid $ligthGreyColor; + border-radius: 4px; + + @include tablet() { + margin: 0 auto; + width: 100%; + max-width: 420px; + height: 100%; + } + + &:last-child { + margin: 0 auto; + } + } + + &__coment { + @include adaptiv-padding(48, 0, 0, 1, 0); + + line-height: 2; + } + + &__photo-container { + width: 30%; + margin: 0 auto; + position: relative; + box-sizing: border-box; + + &::after { + content: ""; + display: block; + padding-bottom: 100%; + } + } + + &__photo { + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + object-fit: cover; + object-position: center; + transition: transform 0.3s; + + &:hover { + transform: perspective(100px) translateZ(10px); + } + } + + &__name { + @include adaptiv-font(18); + + text-align: center; + color: $titleColor; + padding-top: 24px; + } + + &__club { + text-align: center; + line-height: 2; + } +} diff --git a/src/styles/blocks/title.scss b/src/styles/blocks/title.scss new file mode 100644 index 00000000..ab1a2916 --- /dev/null +++ b/src/styles/blocks/title.scss @@ -0,0 +1,17 @@ +.title { + @include adaptiv-font(32); + + width: 70%; + margin: 24px auto; + line-height: 1.15; + text-align: center; + color: $titleColor; + + @include tablet() { + width: 40%; + } + + &--white { + color: #fff; + } +} diff --git a/src/styles/blocks/top-actions.scss b/src/styles/blocks/top-actions.scss new file mode 100644 index 00000000..fbae6621 --- /dev/null +++ b/src/styles/blocks/top-actions.scss @@ -0,0 +1,61 @@ +.top-actions { + display: flex; + justify-content: space-between; + align-items: center; + position: relative; + padding: $topActionPadding 0; + box-sizing: border-box; + + @include desktop() { + padding: $topActionPaddingDesk 0; + } + + &__logo { + cursor: pointer; + } + + &__nav { + @include tablet() { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 60%; + } + + @include desktop() { + width: 50%; + } + } + + &--footer { + justify-content: center; + + @include tablet() { + justify-content: space-between; + } + } + + &__callback { + display: flex; + align-items: center; + box-sizing: border-box; + + &--footer { + display: none; + + @include tablet() { + display: block; + } + } + } + + &__callback-number { + display: none; + padding-right: 30px; + color: $titleColor; + + @include desktop() { + display: inline; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e4..dcd249c8 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -2,6 +2,19 @@ @import "fonts"; @import "typography"; -body { - background: $c-gray; -} +@import "./blocks/page.scss"; +@import "./blocks/container.scss"; +@import "./blocks/button.scss"; +@import "./blocks/logo.scss"; +@import "./blocks/link.scss"; +@import "./blocks/nav.scss"; +@import "./blocks/top-actions.scss"; +@import "./blocks/header.scss"; +@import "./blocks/image.scss"; +@import "./blocks/title.scss"; +@import "./blocks/about.scss"; +@import "./blocks/card.scss"; +@import "./blocks/portfolio.scss"; +@import "./blocks/testimonials.scss"; +@import "./blocks/contact-us.scss"; +@import "./blocks/footer.scss"; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780..7caa7f41 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,130 @@ #{$_property}: $_toValue; } } + +@mixin adaptiv-font($font-size) { + $adaptiveFontDesktop: + calc( + #{$font-size * 0.75}px + + (#{$font-size} - (#{$font-size} * 0.75)) * + (100vw / #{$viewportSizeNoPX}) + ); + + $adaptiveFont: + calc( + #{$font-size * 0.75}px + + ((#{$font-size} - (#{$font-size} * 0.75)) + + (#{$font-size} - (#{$font-size} * 0.75) * 0.7)) * + ((100vw - 320px) / #{$viewportSizeNoPX}) + ); + + font-size: $adaptiveFontDesktop; + + @media (max-width: 767px) { + font-size: $adaptiveFont; + } +} + +@mixin adaptiv-radius($radius) { + $adaptiveRadiusDesktop: + calc( + #{$radius * 0.68}px + + (#{$radius} - (#{$radius} * 0.68)) * + (100vw / #{$viewportSizeNoPX}) + ); + + $adaptiveRadius: + calc( + #{$radius * 0.68}px + + ((#{$radius} - (#{$radius} * 0.68)) + + (#{$radius} - (#{$radius} * 0.68) * 0.7)) * + ((100vw - 320px) / #{$viewportSizeNoPX}) + ); + + border-radius: $adaptiveRadiusDesktop; + + @media (max-width: 767px) { + border-radius: $adaptiveRadius; + } +} + +@mixin adaptiv-size($width, $heigth) { + $widthSize: + calc( + #{$width * 0.65}px + + (#{$width} - (#{$width} * 0.65)) * + (100vw / #{$viewportSizeNoPX}) + ); + + $widthSizeDesktop: + calc( + #{$width * 0.65}px + + ((#{$width} - (#{$width} * 0.65)) + + (#{$width} - (#{$width} * 0.65) * 0.7)) * + ((100vw - 320px) / #{$viewportSizeNoPX}) + ); + + $heigthSize: + calc( + #{$heigth * 0.65}px + + (#{$heigth} - (#{$heigth} * 0.65)) * + (100vw / #{$viewportSizeNoPX}) + ); + + $heigthSizeDesktop: + calc( + #{$heigth * 0.65}px + + ((#{$heigth} - (#{$heigth} * 0.65)) + + (#{$heigth} - (#{$heigth} * 0.65) * 0.7)) * + ((100vw - 320px) / #{$viewportSizeNoPX}) + ); + + width: $widthSize; + height: $heigthSize; + + @media (max-width: 767px) { + width: $widthSizeDesktop; + height: $heigthSizeDesktop; + } +} + +@mixin adaptiv-padding($padding, $top, $right, $bottom, $left) { + $adaptivePadding: + calc( + #{$padding * 0.35}px + + (#{$padding} - (#{$padding} * 0.35)) * + (100vw / #{$viewportSizeNoPX}) + ); + + $adaptivePaddingDesktop: + calc( + #{$padding * 0.35}px + + ((#{$padding} - (#{$padding} * 0.35)) + + (#{$padding} - (#{$padding} * 0.35) * 0.7)) * + ((100vw - 320px) / #{$viewportSizeNoPX}) + ); + + padding-top: calc(#{$adaptivePadding} * #{$top}); + padding-right: calc(#{$adaptivePadding} * #{$right}); + padding-bottom: calc(#{$adaptivePadding} * #{$bottom}); + padding-left: calc(#{$adaptivePadding} * #{$left}); + + @media (max-width: 767px) { + padding: calc(#{$adaptivePaddingDesktop} * #{$top}); + padding-right: calc(#{$adaptivePaddingDesktop} * #{$right}); + padding-bottom: calc(#{$adaptivePaddingDesktop} * #{$bottom}); + padding-left: calc(#{$adaptivePaddingDesktop} * #{$left}); + } +} + +@mixin desktop { + @media (min-width: 1024px) { + @content; + } +} + +@mixin tablet { + @media (min-width: 768px) { + @content; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ff..c4deda37 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,15 @@ -$c-gray: #eee; +$blueColor: #2060f6; +$titleColor: #00226c; +$textColor: #88a; +$textColor2: #b6b6cc; +$ligthGreyColor: #dfe6eb; +$viewportSizeNoPX: 1600; +$viewportSize: #{$viewportSizeNoPX}px; +$logoHeigth: 22px; +$logoHeigthDesk: $logoHeigth * 1.3; +$topActionPadding: 18px; +$topActionPaddingDesk: $topActionPadding * 1.5; +$topActionHeigth: $topActionPadding * 2 + $logoHeigth; +$topActionHeigthDesk: $topActionPaddingDesk * 2 + $logoHeigthDesk; +$containerPadding: 8px; +$containerPaddingDesk: $containerPadding * 2;