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..5d26af97 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://eugenekh81.github.io/Digits/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/package.json b/package.json index 39ef54b8..472020fa 100644 --- a/package.json +++ b/package.json @@ -21,15 +21,17 @@ "@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.13", "@mate-academy/stylelint-config": "0.0.9", "colors": "^1.3.3", "eslint": "^5.16.0", "eslint-plugin-node": "^9.0.1", "gh-pages": "2.0.0", "gulp-htmllint": "0.0.16", + "jest": "^27.4.4", "node-sass": "^4.14.1", "parcel": "^1.12.4", + "parcel-bundler": "^1.12.3", "stylelint": "^13.5.0", "stylelint-config-recommended-scss": "^3.3.0", "stylelint-scss": "^3.17.2" diff --git a/src/images/about/bolt-icon.png b/src/images/about/bolt-icon.png new file mode 100644 index 00000000..b435c7cd Binary files /dev/null and b/src/images/about/bolt-icon.png differ diff --git a/src/images/about/content-icon.png b/src/images/about/content-icon.png new file mode 100644 index 00000000..d79a0f41 Binary files /dev/null and b/src/images/about/content-icon.png differ diff --git a/src/images/about/figma-icon.png b/src/images/about/figma-icon.png new file mode 100644 index 00000000..6fc8d8d8 Binary files /dev/null and b/src/images/about/figma-icon.png differ diff --git a/src/images/about/image2.png b/src/images/about/image2.png new file mode 100644 index 00000000..f89d949c Binary files /dev/null and b/src/images/about/image2.png differ diff --git a/src/images/about/image3.png b/src/images/about/image3.png new file mode 100644 index 00000000..200b4125 Binary files /dev/null and b/src/images/about/image3.png differ diff --git a/src/images/about/image4.png b/src/images/about/image4.png new file mode 100644 index 00000000..c63a3b10 Binary files /dev/null and b/src/images/about/image4.png differ diff --git a/src/images/about/triangle.png b/src/images/about/triangle.png new file mode 100644 index 00000000..1511404d Binary files /dev/null and b/src/images/about/triangle.png differ diff --git a/src/images/cta/fwd-mail.png b/src/images/cta/fwd-mail.png new file mode 100644 index 00000000..8dbd9ba1 Binary files /dev/null and b/src/images/cta/fwd-mail.png differ diff --git a/src/images/cta/send-mail.png b/src/images/cta/send-mail.png new file mode 100644 index 00000000..4448dd6f Binary files /dev/null and b/src/images/cta/send-mail.png differ diff --git a/src/images/design/avatar.png b/src/images/design/avatar.png new file mode 100644 index 00000000..c0311903 Binary files /dev/null and b/src/images/design/avatar.png differ diff --git a/src/images/design/background.png b/src/images/design/background.png new file mode 100644 index 00000000..2170a6ef Binary files /dev/null and b/src/images/design/background.png differ diff --git a/src/images/design/chat-corner-left.jpg b/src/images/design/chat-corner-left.jpg new file mode 100644 index 00000000..5de81f66 Binary files /dev/null and b/src/images/design/chat-corner-left.jpg differ diff --git a/src/images/design/chat-corner-left.png b/src/images/design/chat-corner-left.png new file mode 100644 index 00000000..04cc712f Binary files /dev/null and b/src/images/design/chat-corner-left.png differ diff --git a/src/images/design/person.png b/src/images/design/person.png new file mode 100644 index 00000000..d6f1abf0 Binary files /dev/null and b/src/images/design/person.png differ diff --git a/src/images/design/send.png b/src/images/design/send.png new file mode 100644 index 00000000..910c399f Binary files /dev/null and b/src/images/design/send.png differ diff --git a/src/images/design/smiley.png b/src/images/design/smiley.png new file mode 100644 index 00000000..a651decc Binary files /dev/null and b/src/images/design/smiley.png differ diff --git a/src/images/design/triangle.png b/src/images/design/triangle.png new file mode 100644 index 00000000..e3480fc0 Binary files /dev/null and b/src/images/design/triangle.png differ diff --git a/src/images/nav/arrow-down.png b/src/images/nav/arrow-down.png new file mode 100644 index 00000000..4afc18ba Binary files /dev/null and b/src/images/nav/arrow-down.png differ diff --git a/src/images/nav/menu-cross.png b/src/images/nav/menu-cross.png new file mode 100644 index 00000000..36ec9c33 Binary files /dev/null and b/src/images/nav/menu-cross.png differ diff --git a/src/images/nav/menu-opener.png b/src/images/nav/menu-opener.png new file mode 100644 index 00000000..e99358e5 Binary files /dev/null and b/src/images/nav/menu-opener.png differ diff --git a/src/images/portfolio/browser-1-1.png b/src/images/portfolio/browser-1-1.png new file mode 100644 index 00000000..c78967d0 Binary files /dev/null and b/src/images/portfolio/browser-1-1.png differ diff --git a/src/images/portfolio/browser-1-2.png b/src/images/portfolio/browser-1-2.png new file mode 100644 index 00000000..2753330e Binary files /dev/null and b/src/images/portfolio/browser-1-2.png differ diff --git a/src/images/portfolio/browser-1-3.png b/src/images/portfolio/browser-1-3.png new file mode 100644 index 00000000..0a12376e Binary files /dev/null and b/src/images/portfolio/browser-1-3.png differ diff --git a/src/images/portfolio/browser-2-1.png b/src/images/portfolio/browser-2-1.png new file mode 100644 index 00000000..a9f1e1fc Binary files /dev/null and b/src/images/portfolio/browser-2-1.png differ diff --git a/src/images/portfolio/browser-2-2.png b/src/images/portfolio/browser-2-2.png new file mode 100644 index 00000000..631dab64 Binary files /dev/null and b/src/images/portfolio/browser-2-2.png differ diff --git a/src/images/portfolio/browser-3-1.png b/src/images/portfolio/browser-3-1.png new file mode 100644 index 00000000..c7cfbef1 Binary files /dev/null and b/src/images/portfolio/browser-3-1.png differ diff --git a/src/images/portfolio/browser-3-2.png b/src/images/portfolio/browser-3-2.png new file mode 100644 index 00000000..90bde399 Binary files /dev/null and b/src/images/portfolio/browser-3-2.png differ diff --git a/src/images/portfolio/browser-4-1.png b/src/images/portfolio/browser-4-1.png new file mode 100644 index 00000000..1fe92a21 Binary files /dev/null and b/src/images/portfolio/browser-4-1.png differ diff --git a/src/images/portfolio/browser-4-2.png b/src/images/portfolio/browser-4-2.png new file mode 100644 index 00000000..de3be87a Binary files /dev/null and b/src/images/portfolio/browser-4-2.png differ diff --git a/src/images/portfolio/browser-5-1.png b/src/images/portfolio/browser-5-1.png new file mode 100644 index 00000000..0ce14836 Binary files /dev/null and b/src/images/portfolio/browser-5-1.png differ diff --git a/src/images/portfolio/browser-5-2.png b/src/images/portfolio/browser-5-2.png new file mode 100644 index 00000000..ca1912f9 Binary files /dev/null and b/src/images/portfolio/browser-5-2.png differ diff --git a/src/images/social/Envato.png b/src/images/social/Envato.png new file mode 100644 index 00000000..7c501536 Binary files /dev/null and b/src/images/social/Envato.png differ diff --git a/src/images/social/icon-dribbble.png b/src/images/social/icon-dribbble.png new file mode 100644 index 00000000..15819411 Binary files /dev/null and b/src/images/social/icon-dribbble.png differ diff --git a/src/images/social/icon-facebook.png b/src/images/social/icon-facebook.png new file mode 100644 index 00000000..06e08f00 Binary files /dev/null and b/src/images/social/icon-facebook.png differ diff --git a/src/images/social/icon-instagram.png b/src/images/social/icon-instagram.png new file mode 100644 index 00000000..cc9cb59f Binary files /dev/null and b/src/images/social/icon-instagram.png differ diff --git a/src/images/social/icon-twitter.png b/src/images/social/icon-twitter.png new file mode 100644 index 00000000..c777cfc4 Binary files /dev/null and b/src/images/social/icon-twitter.png differ diff --git a/src/images/testimonials/Boris_business2-1.jpg b/src/images/testimonials/Boris_business2-1.jpg new file mode 100644 index 00000000..30c56f95 Binary files /dev/null and b/src/images/testimonials/Boris_business2-1.jpg differ diff --git a/src/images/testimonials/alessandra.jpg b/src/images/testimonials/alessandra.jpg new file mode 100644 index 00000000..28273908 Binary files /dev/null and b/src/images/testimonials/alessandra.jpg differ diff --git a/src/images/testimonials/alex.jpg b/src/images/testimonials/alex.jpg new file mode 100644 index 00000000..582d0f8e Binary files /dev/null and b/src/images/testimonials/alex.jpg differ diff --git a/src/images/trusted/cinemax.png b/src/images/trusted/cinemax.png new file mode 100644 index 00000000..ed076914 Binary files /dev/null and b/src/images/trusted/cinemax.png differ diff --git a/src/images/trusted/disney.png b/src/images/trusted/disney.png new file mode 100644 index 00000000..d43d8267 Binary files /dev/null and b/src/images/trusted/disney.png differ diff --git a/src/images/trusted/drawkit.png b/src/images/trusted/drawkit.png new file mode 100644 index 00000000..ca5676dd Binary files /dev/null and b/src/images/trusted/drawkit.png differ diff --git a/src/images/trusted/figma.png b/src/images/trusted/figma.png new file mode 100644 index 00000000..d50d3913 Binary files /dev/null and b/src/images/trusted/figma.png differ diff --git a/src/images/trusted/google.png b/src/images/trusted/google.png new file mode 100644 index 00000000..ccfadddf Binary files /dev/null and b/src/images/trusted/google.png differ diff --git a/src/images/trusted/netflix.png b/src/images/trusted/netflix.png new file mode 100644 index 00000000..e8078013 Binary files /dev/null and b/src/images/trusted/netflix.png differ diff --git a/src/images/trusted/stripe.png b/src/images/trusted/stripe.png new file mode 100644 index 00000000..6d9e579a Binary files /dev/null and b/src/images/trusted/stripe.png differ diff --git a/src/index.html b/src/index.html index 5d357bd6..1310f8ef 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,613 @@ - - + + - - Title + + Digits - -

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

+ Trusted by forward-thinking software teams around the world +

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

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

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

+ Design and Assets +

+

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

+
+
+
+ +
+

+ Easy Content +

+

+ Import your demos or build pages visually. Bonus: All images and illustrations included! +

+
+
+
+ +
+

+ 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, choose a demo and +
+ start designing the future of your business! +

+ + Buy Digits + +
+
+
+
+ + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ +
+
+

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

+
+ Happy client 1 +
+ +

+ Boris NazirOFF +

+

+ NazirOFF & Style +

+
+ +
+

+ Really easy to use and customize. easy to understand. Eugene helped me with my site! He answers very quickly, a good service! Thank you very much! +

+
+ Happy client 1 +
+ +

+ Alessandra Nitti +

+

+ Cocai Italiano +

+
+ +
+

+ Really pleasing to look at! Documentation (including installation instructions) are clear and that is coming from a relatively new WordPress user. +

+
+ Happy client 1 +
+ +

+ Alex Kolesnichenko +

+

+ Grey Cat Studio +

+
+
+
+
+ +
+
+
+

+ Ready to launch +
+ your next website? +

+
+ +
+
+ Get in touch now + +

+ Or take a peek inside our + + design studio + +

+
+
+
+
+
+ + + diff --git a/src/styles/_blocks.scss b/src/styles/_blocks.scss new file mode 100644 index 00000000..f1c5c093 --- /dev/null +++ b/src/styles/_blocks.scss @@ -0,0 +1,19 @@ +@import "blocks/container"; +@import "blocks/page"; +@import "blocks/header"; +@import "blocks/nav-page"; + +@import "blocks/top-menu"; +@import "blocks/button"; + +@import "blocks/design"; +@import "blocks/graphic"; +@import "blocks/trusted"; +@import "blocks/about"; +@import "blocks/portfolio"; + +@import "blocks/testimonials"; + +@import "blocks/cta"; +@import "blocks/footer"; +@import "blocks/icon"; diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 2067b3fc..436304ed 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 Display"; + src: url("../fonts/Halyard/Halyard\ Display\ Regular.ttf") format("truetype"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Halyard Text"; + src: url("../fonts/Halyard/Halyard\ Text\ Book\ Regular.ttf") format("truetype"); 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..e02ad976 --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,350 @@ +.about { +margin: 0 0 24px; + +@include onTablet { + margin: 0 0 74px; +} + + &__title { + margin: 0 auto 86px; + + font-family: 'Halyard Display'; + font-style: normal; + font-weight: 500; + + text-align: center; + + color: #1E266D; + + font-size: 30px; + line-height: 36px; + width: 320px; + + @include onTablet-1024 { + margin: 0 auto 126px; + width: 500px; + font-size: 48px; + line-height: 60px; + } + } + + &__content { + display: flex; + justify-content: space-between; + position: relative; + height: 678px; + + + &--pictures { + display: none; + + @include onTablet { + display: flex; + position: relative; + height: 678px; + width: 568px; + } + } + + &--items { + display: flex; + flex-direction: column; + align-items: flex-end; + width: 100%; + + + @include onTablet-1024 { + width: 400px; + } + } + + &--item { + position: relative; + display: flex; + + @include onTablet-1024 { + flex-direction: row; + } + gap: 26px; + + @include onTablet-1024 { + gap: 32px; + } + + flex-grow: 1; + justify-content: space-between; + height: 404px; + + &::after { + position: absolute; + content: ''; + + width: 100%; + left: 0; + + @include onTablet-1024 { + left: 0; + width: 100%; + } + + bottom: 46px; + height: 1px; + background-color: rgba(69, 88, 128, 0.2); + } + + &--logo { + position: absolute; + top: 0; + right: 0; + height: 58px; + width: 58px; + border-radius: 4px; + background-repeat: no-repeat; + background-position: center; + + @include onTablet { + position: relative; + height: 58px; + width: 58px; + border-radius: 4px; + background-repeat: no-repeat; + background-position: center; + } + + + &--1 { + background-color: #B5F2E3; + background-image: url(../images/about/figma-icon.png); + } + + &--2 { + background-color: #FACFCA; + background-image: url(../images/about/content-icon.png); + } + + &--3 { + background-color: #F8AEC3; + background-image: url(../images/about/bolt-icon.png); + } + } + + &--text { + &--group { + display: flex; + flex-direction: column; + gap: 32px; + } + + &--title { + margin: 0 0 28px; + + @include onTablet { + margin: 0; + } + + font-family: 'Halyard Display'; + font-style: normal; + font-weight: 500; + font-size: 22px; + line-height: 125%; + + color: #1E266D; + } + + &--description { + margin: 0; + + width: 268px; + + font-family: 'Halyard Text'; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 27px; + + color: #455880; + } + } + } + } + + &__shapes { + position: relative; + width: 570px; + + &--rectangle { + position: absolute; + top: 146px; + left: 126px; + + @include onTablet-1024 { + top: 220px; + left: 506px; + } + + height: 64px; + width: 64px; + border-radius: 4px; + background-color: rgba(181, 242, 227, 1); + } + + &--circle { + position: absolute; + top: 284px; + left: -48px; + + @include onTablet-1024 { + top: 398px; + left: 0; + } + + height: 102px; + width: 102px; + border-radius: 50%; + background-color: rgba(250, 207, 202, 1); + } + + &--triangle { + position: absolute; + bottom: 20px; + left: 126px; + + @include onTablet-1024 { + left: unset; + right: 100px; + bottom: 0; + } + + height: 70px; + width: 70px; + background-image: url(../images/about/triangle.png); + background-repeat: no-repeat; + background-size: contain; + } + } + + &__pictures { + + &--block { + border-radius: 4px; + position: absolute; + + &--1 { + top: 0; + left: 0; + + height: 180px; + width: 154px; + + @include onTablet-1024 { + top: 0; + left: 216px; + + height: 358px; + width: 332px; + } + + background-color: #999FE3; + } + + &--2 { + top: 226px; + left: 0; + + height: 180px; + width: 154px; + + @include onTablet-1024 { + left: 32px; + top: 260px; + + height: 308px; + width: 266px; + } + + background-color: #fed892; + } + + &--3 { + top: 452px; + left: 0; + + height: 180px; + width: 154px; + + @include onTablet-1024 { + height: 200px; + width: 200px; + + left: unset; + right: 132px; + bottom: 32px; + } + + background-color: #F47B9E; + } + } + + &--person { + position: absolute; + background-repeat: no-repeat; + background-size: contain; + + @include onTablet-1024 { + background-size: unset; + } + + &--1 { + background-image: url(../images/about/image4.png); + background-position: bottom; + bottom: 0; + left: -16px; + + height: 280px; + width: 200px; + + @include onTablet-1024 { + bottom: 0; + left: -18px; + + height: 612px; + width: 408px; + } + } + + &--2 { + background-image: url(../images/about/image3.png); + bottom: 0; + + height: 216px; + width: 360px; + + @include onTablet-1024 { + left: 0; + + height: 100%; + width: 100%; + } + } + + &--3 { + background-image: url(../images/about/image2.png); + background-position: bottom; + transform: scaleX(-1); + + + bottom: 0; + height: 220px; + width: 100%; + + @include onTablet-1024 { + + background-position: right; + height: 256px; + width: 100%; + transform: scaleX(1); + } + } + } + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 00000000..0053e6a7 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,40 @@ +.button { + box-sizing: border-box; + text-decoration: none; + display: flex; + justify-content: center; + align-items: center; + align-self: center; + text-align: center; + height: 36px; + border: 1px solid transparent; + transition: all .3s; + + &:hover { + color: $colorButton; + background-color: #fff; + border-color: $colorButton; + } + + @include onTablet { + height: 40px; + } + + @include onNotebook { + height: 50px; + } + + width: 112px; + background-color: #3751FF; + border-radius: 100px; + + font-family: 'Halyard Display'; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 40px; + + text-align: center; + + color: #fff; +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 00000000..50116344 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,21 @@ +.container { + margin: 0 auto; + max-width: 280px; + + + @include onTablet { + max-width: 560px; + } + + @include onTablet-1024 { + max-width: 944px; + } + + @include onNotebook { + max-width: 984px; + } + + @include onDesktop { + max-width: 1180px; + } +} diff --git a/src/styles/blocks/cta.scss b/src/styles/blocks/cta.scss new file mode 100644 index 00000000..b8e32d0f --- /dev/null +++ b/src/styles/blocks/cta.scss @@ -0,0 +1,101 @@ +.cta { + padding: 48px 0 24px; + + background-color: #3751FF; + + &__content { + display: flex; + flex-direction: column; + align-items: center; + + @include onTablet-1024 { + flex-direction: row; + height: 324px; + justify-content: space-between; + } + + } + + &__title { + margin: 0 0 24px; + + font-family: 'Halyard Display'; + font-style: normal; + text-align: center; + font-weight: 500; + font-size: 24px; + line-height: 125%; + + @include onTablet-1024 { + text-align: left; + font-size: 48px; + line-height: 60px; + } + + color: #FFFFFF; + } + + &__get-in-touch { + display: flex; + align-items: flex-end; + flex-direction: column; + gap: 18px; + + &--button { + display: flex; + width: 244px; + height: 56px; + background-color: #fff; + border-radius: 100px; + + justify-content: center; + align-items: center; + gap: 14px; + + text-decoration: none; + font-family: 'Halyard Display'; + font-style: normal; + font-weight: 500; + font-size: 18px; + line-height: 110%; + + text-align: center; + + color: #455880; + + &--icon { + height: 28px; + width: 28px; + display: block; + + background-image: url(../images/cta/send-mail.png); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + transition: all .3s; + + &:hover { + background-image: url(../images/cta/fwd-mail.png); + transform: translateX(12px); + } + } + } + + &--description { + font-family: 'Halyard Text'; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 125%; + + text-align: right; + + color: #DFE0EB; + + &--link { + text-decoration: none; + color: yellow; + } + } + } +} diff --git a/src/styles/blocks/design.scss b/src/styles/blocks/design.scss new file mode 100644 index 00000000..69b92b55 --- /dev/null +++ b/src/styles/blocks/design.scss @@ -0,0 +1,296 @@ +.design { + margin-bottom: 86px; + + @include onTablet-1024 { + background-image: url(../images/design/background.png); + background-repeat: no-repeat; + background-position: bottom; + background-size: cover; + } + + @include onTablet-1024 { + margin-bottom: 104px; + } + + @include onNotebook { + margin: 0 auto 204px; + } + + &__content { + display: flex; + flex-direction: column; + + margin: 0 auto 48px; + position: relative; + padding-top: 74px; + height: 468px; + + background-image: url(../images/design/background.png); + background-repeat: no-repeat; + background-position: bottom; + background-size: cover; + + @include onTablet-1024 { + max-width: 1024px; + height: 440px; + flex-direction: row; + } + + @include onNotebook { + margin: 0 auto 58px; + flex-direction: column; + align-items: center; + height: 722px; + width: 100%; + padding-top: 144px; + } + + + &--left-block { + @include onTablet-1024{ + margin-left: 70px; + width: 50%; + left: 0px; + } + + @include onNotebook { + width: unset; + margin-left: unset; + + } + } + + &--right-block { + @include onTablet-1024{ + position: relative; + width: 50%; + right: 0; + } + + @include onNotebook { + width: 100%; + right: unset; + } + } + } + + &__graphic-container { + position: absolute; + + left: 50%; + transform: translateX(-50%); + + @include onTablet-1024 { + width: 100%; + left: 30%; + transform: unset; + } + + @include onNotebook { + margin: 0 auto; + left: unset; + display: flex; + position: relative; + justify-content: center; + } + } + + &__title { + margin: 0 0 20px; + + font-family: 'Halyard Display'; + font-style: normal; + font-weight: 500; + + font-size: 24px; + line-height: 120%; + + + @include onTablet-1024 { + text-align: left; + font-size: 50px; + } + + @include onNotebook { + margin: 0 0 28px; + text-align: center; + font-size: 56px; + line-height: 105%; + } + + text-align: center; + color: $colorBlue; + } + + &__description { + margin: 0 auto 28px; + + width: 160px; + + font-family: 'Halyard Text'; + font-style: normal; + font-weight: normal; + font-size: 16px; + + + text-align: center; + color: #455880; + + @include onTablet-1024 { + margin: 0 0 28px; + text-align: left; + width: 50%; + font-size: 24px; + } + + @include onNotebook { + margin: 0 auto 28px; + text-align: center; + width: 100%; + font-size: 18px; + line-height: 150%; + } + } + + &__buttons { + margin: 0 0 28px; + + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + gap: 16px; + + @include onTablet-1024 { + align-items: start; + } + + @include onNotebook { + flex-direction: row; + gap: 28px; + } + } + + &__button { + + display: flex; + height: 36px; + text-decoration: none; + border-radius: 50px; + + font-family: 'Halyard Display'; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 100%; + + display: flex; + justify-content: center; + align-items: center; + text-align: center; + + @include onTablet-1024 { + height: 50px; + font-size: 16px; + } + + @include onNotebook { + height: 50px; + font-size: 16px; + } + + &--buy { + position: relative; + overflow: hidden; + box-sizing: border-box; + background-color: $colorButton; + color: #fff; + text-align: center; + border: 2px solid transparent; + + width: 108px; + + transition: all .3s; + + &:hover { + color: $colorButton; + } + + &::before { + position: absolute; + content: ""; + display: flex; + justify-content: center; + align-items: center; + top: 0; + bottom: 0; + left: 0; + width: 0; + border-radius: 50px; + background-color: #fff; + transform-origin: left; + + transition: all .3s; + } + + &:hover::before { + display: flex; + width: 100%; + color: $colorButton; + } + + @include onNotebook { + width: 148px; + } + } + + & span { + position: absolute; + z-index: 1; + } + + &--features { + position: relative; + box-sizing: border-box; + background-color: #fff; + color: #455880; + + box-shadow: 0px 4px 4px 0px #00000040; + width: 148px; + + overflow: hidden; + + + &::before { + position: absolute; + content: ""; + border-radius: 50px; + background-color: $colorButton; + top: 0; + right: 0; + bottom: 0; + width: 0; + + transition: all .3s; + } + + &:hover { + color: #fff; + } + + &:hover::before { + width: 100%; + } + + & span { + position: absolute; + z-index: 1; + } + + @include onNotebook { + width: 200px; + } + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 00000000..cceabf28 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,235 @@ +.footer { + &__content { + margin: 0 0 120px; + + display: flex; + justify-content: space-between; + flex-direction: column; + + @include onTablet-1024 { + flex-direction: row; + } + + &--left-block { + display: flex; + margin: 0 0 56px; + } + + &--right-block { + display: flex; + justify-content: space-between; + + flex-direction: column; + align-items: center; + + @include onTablet { + flex-direction: row; + align-items: start; + } + + @include onTablet-1024 { + width: 50%; + } + + @include onDesktop { + justify-content: space-around; + width: 100%; + } + } + } + + &__description { + display: flex; + flex-direction: column; + width: 280px; + + text-align: center; + + @include onTablet { + text-align: left; + } + + @include onDesktop { + width: 472px; + } + } + + &__logo { + margin: 0 0 32px; + + text-decoration: none; + font-family: 'Halyard Display'; + font-weight: 600; + font-size: 26px; + line-height: 100%; + + color: $colorBlue; + + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); + + + &::after { + content: ":"; + font-family: serif; + color: #FF2E6A; + } + } + + &__text { + font-family: 'Halyard Text'; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 26px; + + color: #455880; + + @include onTablet { + font-size: 18px; + } + + @include onDesktop { + width: 290px; + } + } + + &__block { + margin-bottom: 16px; + &:last-child { + margin-bottom: 0; + + @include onTablet { + margin-bottom: 0; + } + } + + &--title { + margin: 0 0 32px; + font-family: 'Halyard Display'; + font-style: normal; + font-weight: 500; + font-size: 22px; + line-height: 125%; + + color: #1E266D; + + text-align: center; + + @include onTablet { + text-align: left; + } + } + + &--list { + list-style: none; + margin: 0; + padding: 0; + text-align: center; + + @include onTablet { + text-align: left; + } + } + + &--item { + display: flex; + margin: 0 0 14px; + justify-content: center; + + @include onTablet { + justify-content: start; + } + } + + &--link { + position: relative; + text-decoration: none; + + font-family: 'Halyard Text'; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 26px; + + color: #455880; + + transition: color .3s; + + &:hover { + color: $colorButton; + } + + &::after { + position: absolute; + top: calc(100% + 4px); + content: ""; + display: block; + height: 1px; + width: 100%; + background-color: $colorBlue; + + transform: scaleX(0); + transform-origin: right bottom; + transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1); + } + + &:hover::after { + transform: scaleX(1); + transform-origin: left bottom; + } + } + + &--icon { + display: flex; + align-items: center; + gap: 24px; + height: 24px; + } + } + + &__bottom { + margin: 0 0 108px; + display: flex; + flex-direction: column; + justify-content: space-between; + + @include onTablet { + flex-direction: row; + } + + &--copyright { + font-family: 'Halyard Text'; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 27px; + + color: rgba(69, 88, 128, 0.5); + } + + &--legal { + display: flex; + gap: 20px; + + font-family: 'Halyard Text'; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 27px; + + text-align: right; + + color: #455880; + + &--link { + text-decoration: none; + color: #455880; + transition: color .3s; + + &:hover { + color: $colorButton; + } + } + } + } +} diff --git a/src/styles/blocks/graphic.scss b/src/styles/blocks/graphic.scss new file mode 100644 index 00000000..19dc465f --- /dev/null +++ b/src/styles/blocks/graphic.scss @@ -0,0 +1,563 @@ +.graphic { + position: relative; + + width: 320px; + height: 248px; + + @include onTablet-1024 { + transform: scale(1.4) translate(-12%, 60%);; + } + + @include onNotebook { + transform: unset; + height: 568px; + width: 920px; + + } + + &__triangle { + position: absolute; + background-image: url(../images/design/triangle.png); + height: 32px; + width: 32px; + + background-repeat: no-repeat; + background-size: contain; + background-position: center; + + @include onNotebook { + height: 70px; + width: 70px; + } + } + + &__avatar { + position: absolute; + z-index: 2; + + background-image: url(../images/design/avatar.png); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + + height: 32px; + width: 32px; + + top: 76px; + left: 10px; + + @include onNotebook { + height: 64px; + width: 64px; + top: 156px; + left: 80px; + } + } + + &__circle--big { + position: absolute; + border-radius: 50%; + background-color: #FACFCA; + + left: 2px; + top: 174px; + height: 40px; + width: 40px; + + @include onNotebook { + top: 300px; + left: 12px; + height: 180px; + width: 180px; + } + } + + &__circle--small { + position: absolute; + + border-radius: 50%; + background-color: #FED385; + top: 32px; + right: 0; + height: 16px; + width: 16px; + + @include onNotebook { + top: 82px; + right: 0; + + height: 32px; + width: 32px; + } + } + + &__rectangle { + position: absolute; + + background-color: #B5F2E3; + border-radius: 4px; + + right: 8px; + bottom: 120px; + height: 30px; + width: 30px; + + @include onNotebook { + top: 228px; + right: 60px; + + height: 64px; + width: 64px; + } + } + + &__browser { + position: relative; + z-index: 1; + // border: 1px solid blueviolet; + border-radius: 18px; + + top: 14px; + height: 236px; + width: 280px; + left: 50%; + transform: translateX(-50%); + + + + @include onNotebook { + height: 532px; + width: 720px; + top: 34px; + } + + box-shadow: 0px 14px 25px 0px rgba(135, 146, 161, 0.06); + box-shadow: 0px 4px 4px 0px rgba(135, 146, 161, 0.08); + + + &--bar { + display: flex; + gap: 6px; + + align-items: center; + + border-top-left-radius: 18px; + border-top-right-radius: 18px; + + height: 24px; + + @include onNotebook { + height: 32px; + } + + padding-left: 18px; + background-color: #BDC2D4; + + &--circle { + height: 8px; + width: 8px; + border-radius: 50px; + background-color: #fff; + } + } + + &--body { + // display: none; + background-color: #fff; + height: 210px; + // border: 1px solid darkgoldenrod; + + @include onNotebook { + height: calc(532px - 32px); + } + + border-bottom-left-radius: 18px; + border-bottom-right-radius: 18px; + } + + &--content { + position: relative; + + width: 100%; + height: 100%; + } + + &--chat { + position: absolute; + height: 180px; + width: 166px; + top: 14px; + left: 20px; + + @include onNotebook { + width: 400px; + height: 408px; + left: 58px; + top: 48px; + } + + &--header { + margin: 0 0 26px; + display: flex; + + gap: 12px; + + @include onNotebook { + gap: 36px; + margin: 0 0 74px; + } + } + + &--header--text { + display: flex; + align-items: start; + + justify-content: center; + flex-direction: column; + + gap: 4px; + + @include onNotebook { + gap: 16px; + } + } + + &--circle-big { + border-radius: 50%; + background-color: #FED892; + + height: 24px; + width: 24px; + + @include onNotebook { + height: 48px; + width: 48px; + } + } + + &--title { + display: block; + + height: 6px; + width: 116px; + + @include onNotebook { + height: 12px; + width: 290px; + } + + background-color: #DFE0EB; + } + + &--subtitle { + + width: 98px; + height: 4px; + + @include onNotebook { + height: 6px; + width: 200px; + } + background-color: #DFE0EB; + } + + &--chat-block--group { + margin: 0 0 12px; + position: relative; + + height: 96px; + + @include onNotebook { + margin: 0 0 30px; + height: 226px; + } + } + + &--chat-block--content { + position: absolute; + height: 46px; + width: 100%; + + @include onNotebook { + height: 112px; + } + + &--left { + top: 0; + left: 0; + } + + &--right { + right: 0; + bottom: 0; + } + } + + &--chat-bubble { + display: flex; + position: absolute; + height: 24px; + border-radius: 2px; + + @include onNotebook { + height: 64px; + } + + &--left { + left: 14px; + width: 74px; + border-radius: 2px; + + @include onNotebook { + left: 24px; + width: 172px; + border-radius: 8px; + } + + background-color: #DFE0EB; + + &::after { + display: block; + content: ''; + position: relative; + top: 100%; + left: 10%; + + width: 0; + height: 0; + + border-top: 6px solid #DFE0EB; + border-right: 12px solid transparent; + + @include onNotebook { + border-top: 10px solid #DFE0EB; + border-right: 20px solid transparent; + } + + transform: skewX(-30deg); + } + } + + &--right { + width: 104px; + right: 14px; + + @include onNotebook { + right: 26px; + width: 218px; + border-radius: 8px; + } + + background-color: #DFE0EB; + + &::after { + display: block; + content: ''; + position: relative; + top: 100%; + left: 80%; + + width: 0; + height: 0; + border-top: 6px solid #DFE0EB; + border-left: 12px solid transparent; + transform: skewX(30deg); + + @include onNotebook { + border-top: 10px solid #DFE0EB; + border-left: 20px solid transparent; + } + } + } + + &--title { + position: absolute; + + height: 4px; + + @include onNotebook { + height: 6px; + } + + background-color: #fff; + + &--left { + top: 6px; + left: 8px; + width: 50px; + + @include onNotebook { + top: 18px; + left: 28px; + width: 114px; + } + } + + &--right { + top: 6px; + width: 86px; + right: 8px; + + @include onNotebook { + top: 22px; + right: 32px; + width: 156px; + } + } + } + + &--subtitle { + position: absolute; + background-color: #fff; + + height: 4px; + + @include onNotebook { + height: 6px; + } + + &--left { + top: 14px; + left: 8px; + width: 30px; + + @include onNotebook { + top: 28px; + left: 28px; + width: 74px; + } + } + + &--right { + top: 14px; + right: 8px; + width: 54px; + + @include onNotebook { + top: 32px; + right: 32px; + width: 54px; + } + } + } + } + + &--chat-circle--small { + position: absolute; + height: 14px; + width: 14px; + + @include onNotebook { + height: 24px; + width: 24px; + } + background-color: #FACFCA; + border-radius: 50%; + + &--left { + bottom: 0; + left: 0; + } + + &--right { + bottom: 0; + right: 0; + } + } + + &--chat-input--group { + position: relative; + display: flex; + align-items: center; + height: 18px; + border-radius: 4px; + + width: 100%; + background-color: #DFE0EB; + + @include onNotebook { + height: 28px; + border-radius: 8px; + } + + + &--smile-pic { + position: absolute; + left: 6px; + background-image: url(../images/design/smiley.png); + + background-repeat: no-repeat; + background-size: contain; + background-position: center; + + height: 12px; + width: 12px; + + @include onNotebook { + height: 20px; + width: 20px; + left: 8px; + } + } + + &--cursor-pic { + position: absolute; + + left: 24px; + height: 14px; + width: 2px; + + @include onNotebook { + left: 36px; + height: 16px; + width: 2px; + } + background-color: #fff; + } + + &--send-pic { + position: absolute; + + right: 8px; + height: 10px; + width: 12px; + + + background-image: url(../images/design/send.png); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + + @include onNotebook { + right: 10px; + height: 12px; + width: 14px; + } + } + } + } + + + &--person { + display: block; + position: absolute; + z-index: 2; + background-image: url(../images/design/person.png); + + background-size: contain; + background-repeat: no-repeat; + + height: 200px; + width: 96px; + right: -10px; + bottom: 0; + + @include onNotebook { + height: 450px; + width: 208px; + right: -14px; + bottom: 0; + } + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 00000000..fb7e9c29 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,15 @@ +.header { + display: flex; + align-items: center; + height: 60px; + + @include onNotebook { + position: sticky; + top: 0; + left: 0; + right: 0; + + background-color: #fff; + z-index: 3; + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 00000000..afb2c967 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,30 @@ +.icon { + display: block; + height: 16px; + width: 16px; + transition: transform .3s; + + &:hover { + transform: scale(1.25); + } + + &__fb { + background-image: url(../images/social/icon-facebook.png); + } + + &__ig { + background-image: url(../images/social/icon-instagram.png); + } + + &__tw { + background-image: url(../images/social/icon-twitter.png); + } + + &__dr { + background-image: url(../images/social/icon-dribbble.png); + } + + &__ev { + background-image: url(../images/social/envato.png); + } +} diff --git a/src/styles/blocks/nav-page.scss b/src/styles/blocks/nav-page.scss new file mode 100644 index 00000000..dfaefe5d --- /dev/null +++ b/src/styles/blocks/nav-page.scss @@ -0,0 +1,100 @@ +.nav-page { + position: absolute; + transition: transform .7s; + + transform: translateX(-100%); + + &:target { + transform: translateX(0); + } + + z-index: 1; + top: 0; + bottom: 0; + left: 0; + right: 0; + height: 100vh; + background-color: #fff; + + &__top-content { + margin: 0 0 32px; + align-items: center; + justify-content: space-between; + display: flex; + height: 60px; + width: 100%; + } + + &__logo { + text-decoration: none; + font-family: 'Halyard Display'; + font-weight: 600; + font-size: 30px; + line-height: 100%; + + color: $colorBlue; + + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); + + + &::after { + content: ":"; + font-family: serif; + color: #FF2E6A; + } + } + + &__cross { + height: 18px; + width: 18px; + background-image: url(../images/nav/menu-cross.png); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + } + + &__list { + list-style: none; + display: flex; + flex-direction: column; + transition: all 0.3s; + } + + &__item { + margin: 0 0 16px; + } + + &__link { + display: block; + position: relative; + text-decoration: none; + width: max-content; + + font-family: 'Halyard Display'; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 125%; + + color: $colorBlue; + + &::after { + position: absolute; + top: calc(100% + 4px); + content: ""; + display: block; + height: 1px; + width: 100%; + background-color: $colorBlue; + + transform: scaleX(0); + transform-origin: right bottom; + transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1); + } + + &:hover::after { + transform: scaleX(1); + transform-origin: left bottom; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 00000000..ddc83890 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,22 @@ +* { + margin: 0; + padding: 0; + + scroll-behavior: smooth; +} + +.page { + &__body { + font-family: 'Halyard'; + background-color: #FFFFFF; + } + + &__section { + margin: 0 0 74px; + + + @include onDesktop { + margin: 0 0 148px; + } + } +} diff --git a/src/styles/blocks/portfolio.scss b/src/styles/blocks/portfolio.scss new file mode 100644 index 00000000..48cc1666 --- /dev/null +++ b/src/styles/blocks/portfolio.scss @@ -0,0 +1,232 @@ +.portfolio { + position: relative; + + display: flex; + flex-direction: column; + + padding: 86px 0 0; + height: 650px; + + @include onTablet { + padding: 36px 0 0; + height: 324px; + } + + @include onTablet-1024 { + padding: 46px 0 0; + height: 344px; + } + + @include onNotebook { + flex-direction: column; + justify-content: center; + height: 740px; + width: 100%; + } + + @include onDesktop { + flex-direction: column; + height: 860px; + padding: 140px 0 0; + } + + background-color: #FFF9EA; + overflow: hidden; + + + &__title { + margin: 0 auto 40px; + width: 50%; + + font-family: 'Halyard Display'; + font-size: 36px; + line-height: 150%; + + font-weight: 500; + text-align: center; + + color: #1E266D; + text-shadow: 0px 4px 4px #00000040; + + @include onTablet { + margin: 0 0 26px; + font-size: 36px; + text-align: left; + width: 300px; + } + + @include onNotebook { + margin: 0 auto 40px; + font-size: 48px; + line-height: 60px; + text-align: center; + width: unset; + } + } + + &__subtitle { + margin: 0 auto 36px; + + font-family: 'Halyard Text'; + font-weight: normal; + + font-size: 16px; + line-height: 125%; + + text-align: center; + + color: #455880; + + @include onTablet { + margin: 0 0 40px; + width: 300px; + font-size: 36px; + text-align: left; + font-size: 16px; + line-height: 150%; + } + + @include onTablet-1024 { + margin: 0 0 40px; + width: unset; + font-size: 21px; + } + + @include onNotebook { + font-size: 22px; + line-height: 150%; + text-align: center; + margin: 0 auto 40px; + } + } + + &__button { + position: relative; + margin: 0 auto 36px; + + @include onTablet { + position: absolute; + left: 0px; + bottom: -72px; + margin: 0 0 36px; + width: 160px; + } + + @include onNotebook { + position: relative; + bottom: unset; + } + } + + &__content { + display: flex; + gap: 20px; + + @include onTablet { + height: 360px; + } + + @include onDesktop { + margin: 0 auto; + height: 544px; + width: 1600px; + } + + justify-content: space-between; + + &--left-block { + position: relative; + + @include onTablet { + display: flex; + position: absolute; + flex-direction: column; + justify-content: start; + align-items: flex-start; + width:60%; + left: 80px; + } + + @include onNotebook { + margin: 0 auto; + position: relative; + width: unset; + height: unset; + left: unset; + } + } + + &--right-block { + position: relative; + + @include onTablet { + position: absolute; + width: 40%; + right: 0; + } + + @include onNotebook { + position: relative; + width: unset; + } + } + + &--item { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + + &--1 { + transform: translateY(0); + } + + &--2 { + display: none; + transform: translateY(10%); + + @include onNotebook { + display: flex; + transform: translateY(20%); + } + } + + &--3 { + transform: translateY(5%); + + @include onTablet { + display: flex; + transform: translateY(18%); + } + + @include onNotebook { + transform: translateY(33%); + } + } + + &--4 { + display: none; + transform: translateY(44%); + + @include onNotebook { + display: flex; + } + } + + &--5 { + display: none; + transform: translateY(17%); + + @include onNotebook { + display: flex; + } + } + } + + &--image { + border-radius: 18px; + margin: 0 0 20px; + width: 100%; + } + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 00000000..e85eb655 --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,138 @@ +.testimonials { + + &__title { + margin: 0 0 56px; + + font-family: 'Halyard Display'; + font-style: normal; + font-weight: 500; + font-size: 48px; + line-height: 60px; + + text-align: center; + + color: #1E266D; + } + + &__content { + margin: 0 0 48px; + + display: flex; + gap: 32px; + flex-direction: column; + justify-content: space-between; + + @include onTablet-1024 { + flex-direction: row; + justify-content: space-between; + } + } +} + +.testimonial { + +&:last-child { + margin: 0 auto 0; +} + + display: flex; + align-items: center; + flex-direction: column; + + padding: 26px 32px 32px; + + border: 1px solid #455880; + border-radius: 4px; + + + @include onTablet { + padding: 38px 42px 32px; + margin: 0 auto; + width: 360px; + height: 420px; + } + + @include onDesktop { + width: calc(374px - 2 * 42px); + height: calc(468px - 38px - 32px); + } + + transition: all .3s; + + &:hover { + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); + transform: translateY(-15px); + } + + &__text { + margin: 0 0 38px; + height: 230px; + + @include onTablet { + // height: 166px; + } + + font-family: 'Halyard Text'; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 180%; + + color: #455880; + } + + &__photo-container { + margin: 0 0 22px; + + height: 64px; + width: 64px; + border-radius: 50%; + overflow: hidden; + } + + &__photo { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + } + + &__name { + font-family: 'Halyard Display'; + font-style: normal; + font-weight: 500; + font-size: 22px; + line-height: 125%; + + text-align: center; + + color: #1E266D; + } + + &__company-name { + font-family: 'Halyard Text'; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 180%; + + text-align: center; + + color: #455880; + } +} + +.boris { + object-position: -3px 0; + transform: scale(1.6); +} + +.alessandra { + transform: scale(1.4); + object-position: 45% top; +} + +.alex { + transform: scale(1.75); + object-position: center -40%; +} diff --git a/src/styles/blocks/top-menu.scss b/src/styles/blocks/top-menu.scss new file mode 100644 index 00000000..a4b45434 --- /dev/null +++ b/src/styles/blocks/top-menu.scss @@ -0,0 +1,173 @@ +.top-menu { + display: flex; + justify-content: space-between; + align-items: center; + width: 280px; + + @include onTablet { + width: 560px + } + + @include onTablet-1024 { + width: 944px; + } + + @include onNotebook { + width: 984px; + } + + @include onDesktop { + width: 1180px; + } + + &__content { + display: none; + + @include onTablet-1024 { + display: flex; + align-items: baseline; + } + } + + &__logo { + + @include onTablet-1024 { + margin: 0 86px 0 0; + } + + text-decoration: none; + font-family: 'Halyard Display'; + font-weight: 600; + font-size: 30px; + line-height: 100%; + + color: $colorBlue; + + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); + + + &::after { + content: ":"; + font-family: serif; + color: #FF2E6A; + } + } + + &__buttons { + display: flex; + align-items: center; + gap: 20px; + + @include onTablet { + gap: 36px + } + } + + &__nav-opener { + height: 18px; + width: 18px; + background-image: url(../images/nav/menu-opener.png); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + + @include onTablet-1024 { + display: none; + } + } + + &__list { + list-style: none; + display: flex; + transition: all 0.3s; + + @include onTablet { + gap: 36px + } + + @include onDesktop { + gap: 48px; + width: 600px; + } + } + + &__link { + display: block; + position: relative; + text-decoration: none; + + font-family: 'Halyard Display'; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 125%; + + color: $colorBlue; + + transition: color .3s; + + &:hover { + color: $colorButton; + } + + &::after { + position: absolute; + top: calc(100% + 4px); + content: ""; + display: block; + height: 1px; + width: 100%; + background-color: $colorBlue; + + transform: scaleX(0); + transform-origin: right bottom; + transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1); + } + + &--is-active { + + &::before { + display: block; + position: absolute; + left: calc(100% + 8px); + top: 50%; + transform: translateY(-40%); + content: ""; + height: 10px; + width: 10px; + background-image: url(../images/nav/arrow-down.png); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + } + } + + &:hover::after { + transform: scaleX(1); + transform-origin: left bottom; + } + } + + &__contacts { + display: flex; + gap: 36px; + } + + &__phone-number { + display: none; + + @include onTablet { + display: flex; + align-self: center; + text-decoration: none; + font-family: 'Halyard Display'; + font-style: normal; + font-weight: normal; + font-size: 16px; + + text-align: right; + + color: #1E266D; + } + } +} diff --git a/src/styles/blocks/trusted.scss b/src/styles/blocks/trusted.scss new file mode 100644 index 00000000..b42f7622 --- /dev/null +++ b/src/styles/blocks/trusted.scss @@ -0,0 +1,90 @@ +.trusted { + margin: 0 0 86px; + + @include onTablet { + margin: 0 0 150px; + } + + &__title { + + margin: 0 auto 36px; + font-family: 'Halyard Display'; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 20px; + + width: 200px; + + text-align: center; + + color: rgba(69, 88, 128, 0.5); + + @include onTablet { + margin: 0 auto 50px; + + width: 100%; + font-size: 16px; + line-height: 27px; + } + } + + &__logos-container { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; + height: calc(48px * 7); + + gap: 18px; + + @include onTablet { + display: grid; + grid-template-columns: repeat(4, minmax(20%, 25%)); + height: 280px; + } + + @include onTablet-1024 { + display: flex; + flex-direction: row; + height: 34px; + } + } + + &__logo { + display: flex; + height: 200%; + width: 100%; + background-repeat: no-repeat; + background-size: contain; + background-position: center; + + &--netflix { + background-image: url(../images/trusted/netflix.png); + } + + &--drawkit { + background-image: url(../images/trusted/drawkit.png); + } + + &--figma { + background-image: url(../images/trusted/figma.png); + } + + &--cinemax { + background-image: url(../images/trusted/cinemax.png); + } + + &--stripe { + background-image: url(../images/trusted/stripe.png); + } + + &--google { + background-image: url(../images/trusted/google.png); + } + + &--disney { + background-image: url(../images/trusted/disney.png); + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e4..49c8a9fb 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,8 @@ @import "utils"; @import "fonts"; @import "typography"; +@import "blocks"; body { background: $c-gray; -} +} \ No newline at end of file diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780..6d2dace0 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,27 @@ #{$_property}: $_toValue; } } + +@mixin onTablet { + @media (min-width: 640px) { + @content; + } +} + +@mixin onTablet-1024 { + @media (min-width: 1024px) { + @content; + } +} + +@mixin onNotebook { + @media (min-width: 1280px) { + @content; + } +} + +@mixin onDesktop { + @media (min-width: 1600px) { + @content; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ff..f89cd0f4 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,3 @@ $c-gray: #eee; +$colorBlue: #1E266D; +$colorButton: #3751FF;