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..bea4f6c6 100644 --- a/README.md +++ b/README.md @@ -1,35 +1,13 @@ # Digits landing page -Implement landing page according to [Figma design](https://www.figma.com/file/yM9iS3NKeGOII5Bl7LOooG/Digits-Demo-%26-Preview-(Copy)?node-id=0%3A1) - Use BEM and SCSS -- Large screens 2560px -- Full HD 1920px -- The design 1600px -- Notebook 1280px -- Tablet 1024 -- Mobile (> 320px) -1. Implement the header with `nav`. -1. Implement `Good design meets great user experience` block. -1. Implement `Whatever work you do, we're able to help` block with reused 3 cards. -1. Implement `Simplicity meets innovative design` block. -1. Implement `What others are saying` block. -1. Implement `Ready to launch your next website?` block. -1. Implement footer with `Pages`, `Demos`, `Resources`. +landing page was implement according to [Figma design]() - Use BEM, SCSS, JS -## Instructions -1. **Fork** the repo. -2. **Clone** the forked one. (The project link should have your name but not `mate-academy`) -3. Run `npm install` (or just `npm i`). -4. Run `npm start`. -5. Open one more terminal window for the next steps. -6. `git checkout -b develop` - to create new branch and switch on it. -7. Write you code in `src` folder. -8. Run `npm run lint` and fix code style errors. -9. Run `npm run deploy` to deploy your solution to `gh-pages`. -10. `git add . && git commit -m 'solution'` to save your changes. -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/). -14. Copy `DEMO LINK` to the PR description. +1. Implemented the header with `nav`. +2. Implemented `Good design meets great user experience` block. +3. Implemented `Whatever work you do, we're able to help` block with reused 3 cards. +4. Implemented `Simplicity meets innovative design` block. +5. Implemented `What others are saying` block. +6. Implemented `Ready to launch your next website?` block. +7. Implemented footer with `Pages`, `Demos`, `Resources`. -> To update you PR repeat steps 7-11. +[DEMO LINK](https://Dmytryi-Bashlai.github.io/Digits/). diff --git a/package.json b/package.json index 39ef54b8..5bbd5f49 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.7", "@mate-academy/stylelint-config": "0.0.9", "colors": "^1.3.3", "eslint": "^5.16.0", diff --git a/src/fonts/Halyard/Halyard Display Black Italic.ttf b/src/fonts/Halyard/Halyard Display Black Italic.ttf deleted file mode 100644 index 0d08a71d..00000000 Binary files a/src/fonts/Halyard/Halyard Display Black Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Display Black.ttf b/src/fonts/Halyard/Halyard Display Black.ttf deleted file mode 100644 index 4fe590df..00000000 Binary files a/src/fonts/Halyard/Halyard Display Black.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Display Bold Italic.ttf b/src/fonts/Halyard/Halyard Display Bold Italic.ttf deleted file mode 100644 index 3a7ee4cf..00000000 Binary files a/src/fonts/Halyard/Halyard Display Bold Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Display Bold.ttf b/src/fonts/Halyard/Halyard Display Bold.ttf deleted file mode 100644 index e9f0d26b..00000000 Binary files a/src/fonts/Halyard/Halyard Display Bold.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Display Book Italic.ttf b/src/fonts/Halyard/Halyard Display Book Italic.ttf deleted file mode 100644 index 28c1741b..00000000 Binary files a/src/fonts/Halyard/Halyard Display Book Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Display Book.ttf b/src/fonts/Halyard/Halyard Display Book.ttf deleted file mode 100644 index 454de523..00000000 Binary files a/src/fonts/Halyard/Halyard Display Book.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Display ExtraLight Italic.ttf b/src/fonts/Halyard/Halyard Display ExtraLight Italic.ttf deleted file mode 100644 index 3493652a..00000000 Binary files a/src/fonts/Halyard/Halyard Display ExtraLight Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Display ExtraLight.ttf b/src/fonts/Halyard/Halyard Display ExtraLight.ttf deleted file mode 100644 index f87784a8..00000000 Binary files a/src/fonts/Halyard/Halyard Display ExtraLight.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Display Italic.ttf b/src/fonts/Halyard/Halyard Display Italic.ttf deleted file mode 100644 index e1bd1227..00000000 Binary files a/src/fonts/Halyard/Halyard Display Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Display Light Italic.ttf b/src/fonts/Halyard/Halyard Display Light Italic.ttf deleted file mode 100644 index 7832a1c4..00000000 Binary files a/src/fonts/Halyard/Halyard Display Light Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Display Light.ttf b/src/fonts/Halyard/Halyard Display Light.ttf deleted file mode 100644 index 9de8b698..00000000 Binary files a/src/fonts/Halyard/Halyard Display Light.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Display Medium Italic.ttf b/src/fonts/Halyard/Halyard Display Medium Italic.ttf deleted file mode 100644 index 8fe9e4c3..00000000 Binary files a/src/fonts/Halyard/Halyard Display Medium Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Display Medium.ttf b/src/fonts/Halyard/Halyard Display Medium.ttf deleted file mode 100644 index 235e0510..00000000 Binary files a/src/fonts/Halyard/Halyard Display Medium.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Display Regular.ttf b/src/fonts/Halyard/Halyard Display Regular.ttf deleted file mode 100644 index 0c736304..00000000 Binary files a/src/fonts/Halyard/Halyard Display Regular.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Display SemiBold Italic.ttf b/src/fonts/Halyard/Halyard Display SemiBold Italic.ttf deleted file mode 100644 index b8875c6b..00000000 Binary files a/src/fonts/Halyard/Halyard Display SemiBold Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Display SemiBold.ttf b/src/fonts/Halyard/Halyard Display SemiBold.ttf deleted file mode 100644 index f0a69397..00000000 Binary files a/src/fonts/Halyard/Halyard Display SemiBold.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Micro Black Italic.ttf b/src/fonts/Halyard/Halyard Micro Black Italic.ttf deleted file mode 100644 index bbc1b1d4..00000000 Binary files a/src/fonts/Halyard/Halyard Micro Black Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Micro Black.ttf b/src/fonts/Halyard/Halyard Micro Black.ttf deleted file mode 100644 index 1a40e2eb..00000000 Binary files a/src/fonts/Halyard/Halyard Micro Black.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Micro Bold Italic.ttf b/src/fonts/Halyard/Halyard Micro Bold Italic.ttf deleted file mode 100644 index ee660b5e..00000000 Binary files a/src/fonts/Halyard/Halyard Micro Bold Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Micro Bold.ttf b/src/fonts/Halyard/Halyard Micro Bold.ttf deleted file mode 100644 index 98c02d25..00000000 Binary files a/src/fonts/Halyard/Halyard Micro Bold.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Micro Book Italic.ttf b/src/fonts/Halyard/Halyard Micro Book Italic.ttf deleted file mode 100644 index 9677b30e..00000000 Binary files a/src/fonts/Halyard/Halyard Micro Book Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Micro Book.ttf b/src/fonts/Halyard/Halyard Micro Book.ttf deleted file mode 100644 index fea84d15..00000000 Binary files a/src/fonts/Halyard/Halyard Micro Book.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Micro ExtraLight Italic.ttf b/src/fonts/Halyard/Halyard Micro ExtraLight Italic.ttf deleted file mode 100644 index b4281891..00000000 Binary files a/src/fonts/Halyard/Halyard Micro ExtraLight Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Micro ExtraLight.ttf b/src/fonts/Halyard/Halyard Micro ExtraLight.ttf deleted file mode 100644 index 4489646f..00000000 Binary files a/src/fonts/Halyard/Halyard Micro ExtraLight.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Micro Italic.ttf b/src/fonts/Halyard/Halyard Micro Italic.ttf deleted file mode 100644 index 06a530b2..00000000 Binary files a/src/fonts/Halyard/Halyard Micro Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Micro Light Italic.ttf b/src/fonts/Halyard/Halyard Micro Light Italic.ttf deleted file mode 100644 index f5e6b3a2..00000000 Binary files a/src/fonts/Halyard/Halyard Micro Light Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Micro Light.ttf b/src/fonts/Halyard/Halyard Micro Light.ttf deleted file mode 100644 index ec6555e5..00000000 Binary files a/src/fonts/Halyard/Halyard Micro Light.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Micro Medium Italic.ttf b/src/fonts/Halyard/Halyard Micro Medium Italic.ttf deleted file mode 100644 index 66b2225a..00000000 Binary files a/src/fonts/Halyard/Halyard Micro Medium Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Micro Medium.ttf b/src/fonts/Halyard/Halyard Micro Medium.ttf deleted file mode 100644 index 8e04d09f..00000000 Binary files a/src/fonts/Halyard/Halyard Micro Medium.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Micro Regular.ttf b/src/fonts/Halyard/Halyard Micro Regular.ttf deleted file mode 100644 index add23a06..00000000 Binary files a/src/fonts/Halyard/Halyard Micro Regular.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Micro SemiBold Italic.ttf b/src/fonts/Halyard/Halyard Micro SemiBold Italic.ttf deleted file mode 100644 index c556bc2f..00000000 Binary files a/src/fonts/Halyard/Halyard Micro SemiBold Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Micro SemiBold.ttf b/src/fonts/Halyard/Halyard Micro SemiBold.ttf deleted file mode 100644 index 3505aa55..00000000 Binary files a/src/fonts/Halyard/Halyard Micro SemiBold.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Text Bold Italic.ttf b/src/fonts/Halyard/Halyard Text Bold Italic.ttf deleted file mode 100644 index 5fdd86b4..00000000 Binary files a/src/fonts/Halyard/Halyard Text Bold Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Text Bold.ttf b/src/fonts/Halyard/Halyard Text Bold.ttf deleted file mode 100644 index e8094a69..00000000 Binary files a/src/fonts/Halyard/Halyard Text Bold.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Text Book Italic.ttf b/src/fonts/Halyard/Halyard Text Book Italic.ttf deleted file mode 100644 index e353ac61..00000000 Binary files a/src/fonts/Halyard/Halyard Text Book Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Text Book Regular.ttf b/src/fonts/Halyard/Halyard Text Book Regular.ttf deleted file mode 100644 index 1f5041f2..00000000 Binary files a/src/fonts/Halyard/Halyard Text Book Regular.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Text ExtraLight Italic.ttf b/src/fonts/Halyard/Halyard Text ExtraLight Italic.ttf deleted file mode 100644 index 98957edc..00000000 Binary files a/src/fonts/Halyard/Halyard Text ExtraLight Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Text ExtraLight.ttf b/src/fonts/Halyard/Halyard Text ExtraLight.ttf deleted file mode 100644 index 020d5496..00000000 Binary files a/src/fonts/Halyard/Halyard Text ExtraLight.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Text Italic.ttf b/src/fonts/Halyard/Halyard Text Italic.ttf deleted file mode 100644 index 4a6336cf..00000000 Binary files a/src/fonts/Halyard/Halyard Text Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Text Light Italic.ttf b/src/fonts/Halyard/Halyard Text Light Italic.ttf deleted file mode 100644 index 49714d85..00000000 Binary files a/src/fonts/Halyard/Halyard Text Light Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Text Light.ttf b/src/fonts/Halyard/Halyard Text Light.ttf deleted file mode 100644 index 6e1a3376..00000000 Binary files a/src/fonts/Halyard/Halyard Text Light.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Text Medium Italic.ttf b/src/fonts/Halyard/Halyard Text Medium Italic.ttf deleted file mode 100644 index 809f37af..00000000 Binary files a/src/fonts/Halyard/Halyard Text Medium Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Text Medium.ttf b/src/fonts/Halyard/Halyard Text Medium.ttf deleted file mode 100644 index 8323a061..00000000 Binary files a/src/fonts/Halyard/Halyard Text Medium.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Text Regular.ttf b/src/fonts/Halyard/Halyard Text Regular.ttf deleted file mode 100644 index f3efafd3..00000000 Binary files a/src/fonts/Halyard/Halyard Text Regular.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Text SemiBold Italic.ttf b/src/fonts/Halyard/Halyard Text SemiBold Italic.ttf deleted file mode 100644 index 9ad9e3d0..00000000 Binary files a/src/fonts/Halyard/Halyard Text SemiBold Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/Halyard Text SemiBold.ttf b/src/fonts/Halyard/Halyard Text SemiBold.ttf deleted file mode 100644 index 079cfaa3..00000000 Binary files a/src/fonts/Halyard/Halyard Text SemiBold.ttf and /dev/null differ diff --git a/src/fonts/Halyard/HalyardText Black Italic.ttf b/src/fonts/Halyard/HalyardText Black Italic.ttf deleted file mode 100644 index 52bc246e..00000000 Binary files a/src/fonts/Halyard/HalyardText Black Italic.ttf and /dev/null differ diff --git a/src/fonts/Halyard/HalyardText Black.ttf b/src/fonts/Halyard/HalyardText Black.ttf deleted file mode 100644 index 644047ae..00000000 Binary files a/src/fonts/Halyard/HalyardText Black.ttf and /dev/null differ diff --git a/src/index.html b/src/index.html index 5d357bd6..faf4cd94 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,731 @@ - + - Title + Digits + + - -

Hello Mate Academy

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

+ Good design meets + great user experience +

+

For everyone, from beginners to experts

+
+ + Buy Digits + + + See the Features + +
+
+
+ Graphic image social network +
+
+
+
+
+

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

+
+ + Netflix + + + DrawKit + + + Figma + + + Cinemax + + + Stripe + + + Gogle + + + Disney + +
+
+
+
+
+

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

+
+
+
+
+ employee photo +
+
+
+
+ employee photo +
+
+
+
+ employee photo +
+
+
+
+
+ + icon + +
+ + Design and Assets + + + Make your brand stand out with pixel-perfect design crafted to perfection. + +
+
+
+ + icon + +
+ + Easy Content + + + Import your demos or build pages visually. Bonus: All images and illustrations included! + +
+
+
+ + icon + +
+ + 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 + +
+
+
+ Design templates +
+
+
+
+

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

+ + User photo + + + Happy User + + + tempy.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! +

+ + User photo + + + Happy User + + + tempy.club + +
+
+
+
+

+ Really pleasing to look at! Documentation (including installationinstructions) are clear and that is + coming from a relatively newWordPress user. +

+ + User photo + + + Happy User + + + tempy.club + +
+
+
+
+
+
+
+
+
+

+ Ready to launch
your next website? +

+
+ + Get in touch now + +

Or, take a peek inside our design studio

+
+
+
+
+
+ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7..24bd40ad 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,95 @@ 'use strict'; + +const isMobile = { + Android: function() { + return navigator.userAgent.match(/Android/i); + }, + BlackBerry: function() { + return navigator.userAgent.match(/BlackBerry/i); + }, + iOS: function() { + return navigator.userAgent.match(/iPhone|iPad|iPod/i); + }, + Opera: function() { + return navigator.userAgent.match(/Opera Mini/i); + }, + Windows: function() { + return navigator.userAgent.match(/IEMobile/i); + }, + any: function() { + return ( + isMobile.Android() + || isMobile.BlackBerry() + || isMobile.iOS() + || isMobile.Opera() + || isMobile.Windows() + ); + }, +}; + +if (isMobile.any()) { + document.body.classList.add('_touch'); + + const menuArrows = document.querySelectorAll('.menu__arrow'); + const footerArrow = document.querySelectorAll('.menu-footer__title'); + + toggleClasses(menuArrows); + toggleClasses(footerArrow); +} + +function toggleClasses(el) { + if (el.length > 0) { + for (let i = 0; i < el.length; i++) { + const menuArrow = el[i]; + + menuArrow.addEventListener('click', function(e) { + menuArrow.parentElement.classList.toggle('_active'); + }); + } + } +} + +// Menu +const iconMenu = document.querySelector('.icon-menu'); +const menuBody = document.querySelector('.menu__body'); + +if (iconMenu) { + iconMenu.addEventListener('click', function(e) { + document.body.classList.toggle('_lock'); + iconMenu.classList.toggle('_active'); + menuBody.classList.toggle('_active'); + }); +} + +// Прокрутка при клике +const menuLinks = document.querySelectorAll('.menu__link[data-goto]'); + +function onMenuLinkClick(e) { + const menuLink = e.target; + + if (menuLink.dataset.goto && document.querySelector(menuLink.dataset.goto)) { + const gotoBlock = document.querySelector(menuLink.dataset.goto); + const gotoBlockValue + = gotoBlock.getBoundingClientRect().top + + window.pageYOffset + - document.querySelector('.header__body').offsetHeight; + + if (iconMenu.classList.contains('_active')) { + document.body.classList.remove('_lock'); + iconMenu.classList.remove('_active'); + menuBody.classList.remove('_active'); + } + + window.scrollTo({ + top: gotoBlockValue, + behavior: 'smooth', + }); + e.preventDefault(); + } +} + +if (menuLinks.length > 0) { + menuLinks.forEach((menuLink) => { + menuLink.addEventListener('click', onMenuLinkClick); + }); +} diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 2067b3fc..38366488 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,29 @@ @font-face { - font-family: "Roboto"; - src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); + font-family: "Halyard Display"; + src: url("../fonts/HalyardDisplay-Medium.woff2") format("woff2"), + url("../fonts/HalyardDisplay-Medium.woff") format("woff"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Halyard Text"; + src: url("../fonts/HalyardText-Regular.woff2") format("woff2"), + url("../fonts/HalyardText-Regular.woff") format("woff"); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "icons-font"; + src: url("../fonts/icons-font.eot?jm7dph"); + src: url("../fonts/icons-font.eot?jm7dph#iefix") format("embedded-opentype"), + url("../fonts/icons-font.ttf?jm7dph") format("truetype"), + url("../fonts/icons-font.woff?jm7dph") format("woff"), + url("../fonts/icons-font.svg?jm7dph#icons-font") format("svg"); font-weight: normal; font-style: normal; + font-display: block; } diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e4..a8dc105d 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,1214 @@ +@import "typography"; @import "utils"; @import "fonts"; -@import "typography"; -body { - background: $c-gray; +//#region reset +*, +*::before, +*::after { + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; +} + +button { + cursor: pointer; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: inherit; + font-size: inherit; +} + +ol li, +ul li { + list-style: none; +} + +img { + vertical-align: top; +} + +a, +a:visited, +a:hover { + text-decoration: none; +} +//#endregion + +//#region icons-font +%ic { + font-family: "icons-font", sans-serif; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +[class^="_icon-"], +[class*=" _icon-"] { + &::before { + @extend %ic; + display: block; + } +} + +._icon-arrow:before { + content: "\e900"; +} + +._icon-dribbble:before { + content: "\e901"; +} + +._icon-envato:before { + content: "\e902"; +} + +._icon-facebook:before { + content: "\e903"; +} + +._icon-instagram:before { + content: "\e904"; +} + +._icon-send:before { + content: "\e905"; + font-size: 15px; + color: #53c07e; + margin-right: 18px; +} + +._icon-twitter:before { + content: "\e906"; +} +//#endregion + +.page, +.page__body { + height: 100%; + font-family: $mainFont; + font-size: 18px; + color: $textColorMain; + scroll-behavior: smooth; +} + +.page__body { + &._lock { + overflow: hidden; + } +} + +.ibg { + position: relative; + &__img { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + object-fit: cover; + } +} + +._container { + max-width: $maxWidthContainer + px; + margin: 0 auto; + padding: 0 15px; +} + +.button { + display: inline-flex; + align-items: center; + height: 50px; + padding: 0 12px; + color: #fff; + font-family: inherit; + font-size: $secondaryFont; + border-radius: 100px; + border: 1px solid transparent; + background-color: $mainBlue; + transition: all 0.3s ease 0s; + + &--white { + color: $textColorMain; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + background-color: #fff; + } + + &--big { + height: 56px; + font-family: $secondaryFont; + } + + &--small { + height: 40px; + } + + @media (any-hover: hover) { + &:hover { + border: 1px solid $mainBlue; + color: $mainBlue; + box-shadow: 4px 4px 10px 2px rgba(34, 60, 80, 0.2); + background: #fff; + } + } + + &:active { + box-shadow: 0 0 10px 2px rgba(34, 60, 80, 0.2); + } +} + +.icon-menu { + display: none; + @media (max-width: ($md3+px)) { + display: block; + position: relative; + z-index: 5; + flex: 0 0 26px; + height: 16px; + cursor: pointer; + span { + transition: all 0.3s ease 0s; + top: calc(50% - 1px); + left: 0; + position: absolute; + width: 100%; + height: 2px; + background-color: #000; + &:first-child { + top: 0; + } + &:last-child { + top: auto; + bottom: 0; + } + } + &._active { + span { + transform: scale(0); + &:first-child { + transform: rotate(-45deg); + top: calc(50% - 1px); + } + &:last-child { + transform: rotate(45deg); + bottom: calc(50% - 1px); + } + } + } + } +} + +//#region header +.header { + position: absolute; + width: 100%; + top: 0; + left: 0; + + &__wrapper { + position: fixed; + width: 100%; + top: 0; + left: 0; + z-index: 50; + background-color: rgba(255, 255, 255, 0.7); + } + + &__body { + display: flex; + align-items: center; + min-height: 50px; + padding: 5px 0; + + @media (min-width: ($md3+px)) { + min-height: 80px; + } + } + + &__logo { + position: relative; + z-index: 5; + margin-right: 85 / 1180 * 100%; + } +} + +.menu { + width: 100%; + + &__body { + @media (max-width: ($md3+px)) { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: -100%; + padding: 60px 15px 30px; + background: linear-gradient( + 180deg, + rgba(242, 249, 255, 0.65) 0%, + #f2f9ff 100% + ); + overflow: auto; + transition: left 0.3s ease 0s; + + &::before { + content: ""; + position: fixed; + z-index: 2; + width: 100%; + min-height: 80px; + top: 0; + left: -100%; + background-color: #fff; + transition: left 0.3s ease 0s; + + @media (max-width: ($md3+px)) { + min-height: 50px; + } + } + &._active { + left: 0; + &::before { + left: 0; + } + } + } + + @media (min-width: ($md3+px)) { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + } + } + + &__list { + @media (min-width: ($md3+px)) { + display: flex; + flex-wrap: wrap; + flex: 1 0 auto; + } + + @media (max-width: ($md3+px)) { + margin-bottom: 10px; + } + } + + &__item { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + &:not(:last-child) { + margin-bottom: 5px; + } + + @media (min-width: ($md3+px)) { + position: relative; + margin-right: 24px; + &:not(:last-child) { + margin-bottom: 0; + } + } + + @media (min-width: ($md2+px)) { + margin-right: 47px; + + &:last-child { + margin-right: 24px; + } + } + + @media (max-width: ($md3+px)) { + &._active { + .menu__sub-list { + position: relative; + opacity: 1; + visibility: visible; + } + + .menu__arrow { + transform: rotate(-180deg); + } + + .menu__arrow, + .menu__link { + color: $mainBlue; + } + } + } + + @media (any-hover: hover) { + &:hover { + .menu__sub-list { + opacity: 1; + visibility: visible; + pointer-events: auto; + transform: translateY(0); + } + + .menu__arrow { + transform: rotate(-180deg); + } + + ._icon-arrow:before, + .menu__link { + color: $mainBlue; + } + } + } + } + + &__link { + padding: 5px 0; + font-size: 16px; + color: $textColorSecond; + transition: color 0.3s ease 0s; + + @media (max-width: ($md3+px)) { + font-size: 22px; + font-weight: 600; + } + } + + &__arrow { + display: flex; + align-items: center; + padding: 8px; + font-size: 7px; + color: $textColorSecond; + background: transparent; + transition: transform 0.3s ease 0s; + + @media (max-width: ($md3+px)) { + font-size: 12px; + &._active { + transform: rotate(-180deg); + } + } + } + + &__wrap { + @media (max-width: ($md3+px)) { + position: relative; + flex: 1 1 100%; + margin: 0 -15px; + overflow: hidden; + } + } + + &__sub-list { + padding: 10px; + background-color: #999fe3; + transition: all 0.3s ease 0s; + + @media (max-width: ($md3+px)) { + position: absolute; + opacity: 0; + visibility: hidden; + } + + @media (min-width: ($md3+px)) { + position: absolute; + top: 100%; + right: 0; + z-index: 5; + min-width: 200px; + opacity: 0; + visibility: hidden; + pointer-events: none; + border-radius: 10px; + transform: translateY(10px); + } + } + + &__sub-item { + &:not(:last-child) { + margin-bottom: 5px; + } + } + + &__sub-link { + font-size: 16px; + color: #fff; + padding: 5px; + + @media (max-width: ($md3+px)) { + font-size: 18px; + } + + @media (any-hover: hover) { + &:hover { + text-decoration: underline; + } + } + } +} + +.contacts { + @media (min-width: ($md3+px)) { + display: flex; + flex-wrap: wrap; + justify-content: end; + align-items: center; + } + + @media (max-width: ($md3+px)) { + max-width: 200px; + } + + &__phone { + display: inline-flex; + padding: 5px; + margin: 0 0 0 -5px; + font-size: 16px; + color: $textColorSecond; + transition: color 0.3s ease 0s; + + @media (max-width: ($md3+px)) { + font-style: 18px; + font-weight: 600; + margin-bottom: 10px; + } + + @media (max-width: 883px) { + margin-bottom: 3px; + } + + @media (any-hover: hover) { + &:hover { + color: $mainBlue; + } + } + } + + &__button { + transition: all 0.3s ease 0s; + + @media (min-width: ($md3+px)) { + @include adaptiv-value("margin-left", 24, 16, 1); + } + } +} +//#endregion + +.page__body._touch { + .menu__item._active { + .menu__sub-list { + opacity: 1; + visibility: visible; + pointer-events: auto; + transform: translateY(0); + } + + .menu__arrow { + transform: rotate(-180deg); + } + + .menu__arrow, + .menu__link { + color: $mainBlue; + } + } +} + +.section { + &__home { + margin-bottom: 52px; + } + + &__company { + @include adaptiv-value("margin-bottom", 150, 20, 1); + } + + &__products { + @include adaptiv-value("margin-bottom", 232, 40, 1); + } +} + +.title-section { + font-family: $secondaryFont; + text-align: center; + font-weight: 500; + @include adaptiv-value("font-size", 48, 30, 1); + line-height: 125%; + color: $textColorSecond; + + &--white { + color: #fff; + } +} + +//#region home +.home { + @media (max-width: ($md3+px)) { + padding-top: 194px; + } + + @include adaptiv-value("padding-top", 224, 70, 1); + background: linear-gradient( + 180deg, + rgba(242, 249, 255, 0.12) 0%, + #f2f9ff 100% + ); + &__body { + max-width: 500px; + margin: 0 auto; + } + + &__title { + @include adaptiv-value("font-size", 56, 28, 1); + line-height: 105%; + @include adaptiv-value("margin-bottom", 27, 12, 1); + } + + &__text { + text-align: center; + line-height: 150%; + @include adaptiv-value("margin-bottom", 29, 12, 1); + } + + &__buttons { + display: flex; + flex-direction: column; + align-items: center; + + @media (min-width: ($md4+px)) { + flex-direction: row; + justify-content: center; + align-items: center; + } + } + + &__button { + padding: 0 40px; + &:not(:last-child) { + margin-bottom: 16px; + } + + @media (min-width: ($md4+px)) { + &:not(:last-child) { + margin-right: 22px; + margin-bottom: 0; + } + } + } + + &__image { + padding-bottom: 49.6%; + transform: translateY(32px); + + & > img { + object-fit: contain; + } + } +} +//#endregion + +//#region company +.company { + text-align: center; + + &__text { + font-size: 16px; + line-height: 27 / 16 * 100%; + color: rgba(69, 88, 128, 0.5); + @include adaptiv-value("margin-bottom", 29, 4, 1); + } + + &__list { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + @media (min-width: ($md4+px)) { + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: wrap; + } + } + + &__link { + @include adaptiv-value("margin-top", 20, 16, 1); + + @media (min-width: ($md4+px)) { + &:not(:last-child) { + @include adaptiv-value("margin-right", 72, 10, 1); + } + } + + @include any-hover(transform, scale(1.1)); + } +} + +//#endregion + +//#region benefits +.benefits { + @include adaptiv-value("padding-bottom", 150, 30, 1); + + &__title { + max-width: 500px; + margin: 0 auto; + @include adaptiv-value("margin-bottom", 126, 70, 1); + } + + &__body { + position: relative; + @media (min-width: ($md2+px)) { + display: flex; + justify-content: space-between; + } + } + + &__photos { + position: relative; + min-height: 677px; + flex: 0 1 574px; + margin-bottom: 30px; + + @media (min-width: ($md4+px)) { + background: url("../images/about/Graphic.png") 0 100% no-repeat; + background-size: contain; + } + + @media (min-width: ($md2+px)) { + margin-bottom: 0; + margin-right: 20px; + } + } + + &__rectangle { + border-radius: 4px; + + @media (max-width: ($md4+px)) { + margin: 0 auto; + &:not(:last-child) { + margin-bottom: 15px; + } + } + + @media (min-width: ($md4+px)) { + position: absolute; + margin-bottom: 0; + } + + &--1 { + @media (max-width: (365px)) { + position: relative; + left: 0; + width: 100%; + } + + top: 0; + right: 22 / 574 * 100%; + width: 331px; + height: 357px; + background: #999fe3; + } + + &--2 { + bottom: 110px; + left: 38 / 574 * 100%; + width: 266px; + height: 308px; + background: #fed892; + } + + &--3 { + right: 134 / 574 * 100%; + bottom: 33px; + width: 201px; + height: 200px; + background: #f47b9e; + } + } + + &__image { + & > img { + object-fit: contain; + } + + &--1 { + bottom: 76px; + left: 28px; + padding-bottom: 131%; + + @media (max-width: (365px)) { + position: absolute; + left: 0; + width: 100%; + bottom: 0; + } + } + + &--2 { + bottom: -13px; + left: -21px; + padding-bottom: 111%; + } + + &--3 { + bottom: 41px; + right: -20px; + padding-bottom: 120%; + + @media (max-width: ($md4+px)) { + right: -31px; + bottom: 9px; + padding-bottom: 104%; + } + } + } + + &__column { + flex: 0 1 405px; + } + + &__item { + &:not(:last-child) { + @include adaptiv-value("margin-bottom", 46, 20, 1); + } + } +} + +.item-benefits { + display: flex; + justify-content: flex-start; + + &:not(:last-child) { + @include adaptiv-value("padding-bottom", 46, 20, 1); + border-bottom: 1px solid rgba(69, 88, 128, 0.2); + } + + @media (any-hover: hover) { + &:hover { + .item-benefits__title, + .item-benefits__text { + color: $mainBlue; + } + + .item-benefits__icon { + box-shadow: 0 0 20px 2px rgba(34, 60, 80, 0.2); + transform: scale(1.1); + } + } + } + + &__icon { + display: block; + flex-shrink: 0; + @include adaptiv-value("flex-basis", 58, 38, 1); + @include adaptiv-value("height", 58, 38, 1); + @include adaptiv-value("margin-right", 42, 10, 1); + transition: all 0.3s ease 0s; + } + + &__title { + display: block; + @include adaptiv-value("padding-bottom", 34, 16, 1); + font-family: $secondaryFont; + font-weight: 500; + font-size: 22px; + line-height: 125%; + color: $textColorSecond; + transition: color 0.3s ease 0s; + } + + &__text { + display: block; + line-height: 150%; + transition: color 0.3s ease 0s; + } +} +//#endregion + +//#region products +.products { + background: #fff9ea; + @include adaptiv-value("padding-top", 150, 20, 1); + max-height: 1001px; + overflow: hidden; + + &__container { + @include adaptiv-value("margin-bottom", 37, 16, 1); + } + + &__body { + text-align: center; + } + + &__title, + &__text { + @include adaptiv-value("margin-bottom", 40, 16, 1); + } + + &__text { + font-size: 21px; + line-height: 150%; + max-width: 410px; + margin-left: auto; + margin-right: auto; + } + + &__button { + padding: 0 18px; + } + + &__image { + padding-bottom: 39%; + } +} +//#endregion + +//#region blog +.blog { + &__title { + @include adaptiv-value("margin-bottom", 56, 20, 1); + } + + &__body { + @include adaptiv-value("padding-bottom", 150, 30, 1); + } + + &__cards { + display: flex; + flex-wrap: wrap; + margin: 0 -14 / 1180 * 100%; + } + + &__card { + padding: 0 14 / 1180 * 100%; + + @media (max-width: ($md2+px)) { + &:not(:last-child) { + @include adaptiv-value("margin-bottom", 30, 14, 1); + } + } + + @media (min-width: ($md3+px)) { + flex: 0 1 50%; + } + + @media (min-width: ($md2+px)) { + flex: 0 1 33.33%; + } + } +} + +.card { + &__body { + display: flex; + flex-direction: column; + align-items: center; + height: 100%; + @include adaptiv-value("padding-top", 36, 20, 1); + @include adaptiv-value("padding-bottom", 36, 20, 1); + @include adaptiv-value("padding-left", 43, 26, 1); + @include adaptiv-value("padding-right", 43, 26, 1); + border: 1px solid rgba(69, 88, 128, 0.2); + border-radius: 4px; + transition: box-shadow 0.3s ease 0s; + + @media (any-hover: hover) { + &:hover { + box-shadow: 0 0 20px 2px rgba(34, 60, 80, 0.2); + } + } + } + + &__text { + flex: 1 1 auto; + line-height: 180%; + @include adaptiv-value("margin-bottom", 39, 20, 1); + } + + &__user-photo { + display: flex; + @include adaptiv-value("padding-bottom", 23, 16, 1); + @include any-hover(transform, scale(1.1)); + } + + &__user-name { + display: block; + font-size: 22px; + line-height: 125%; + font-weight: 500; + color: $textColorSecond; + @include any-hover(color, $mainBlue); + } + + &__user-from { + display: block; + line-height: 180%; + @include any-hover(color, $mainBlue); + } +} +//#endregion + +//#region contact-us +.contact-us { + background-color: #3751ff; + @include adaptiv-value("padding-top", 88, 30, 1); + @include adaptiv-value("padding-bottom", 113, 30, 1); + + &__body { + @media (min-width: ($md3+px)) { + display: flex; + justify-content: space-between; + align-items: center; + } + } + + &__title { + margin-bottom: 20px; + } + + &__content { + display: flex; + flex-direction: column; + align-items: center; + + @media (min-width: ($md3+px)) { + align-items: end; + justify-content: center; + } + } + + &__button { + margin-bottom: 19px; + padding: 0 50px 0 28px; + font-family: $secondaryFont; + font-size: 18px; + font-weight: 500; + line-height: 110%; + color: $textColorSecond; + transition: all 0.3s ease 0s; + + @media (any-hover: hover) { + &:hover { + background-color: $mainBlue; + color: #fff; + border: 1px solid #fff; + + &::before { + transform: scale(1.2); + } + } + } + } + + &__text { + font-size: 16px; + line-height: 125%; + text-align: right; + color: #dfe0eb; + } +} +//#endregion + +//#region footer +.footer { + &__body { + @include adaptiv-value("padding-top", 112, 30, 1); + @include adaptiv-value("padding-bottom", 100, 30, 1); + } + + &__bottom { + text-align: center; + + @media (min-width: ($md3+px)) { + display: flex; + justify-content: space-between; + } + } +} + +.main-footer { + @include adaptiv-value("margin-bottom", 130, 20, 1); + + @media (min-width: ($md3+px)) { + display: flex; + } + + &__about-us { + @media (max-width: ($md3+px)) { + margin-bottom: 20px; + } + + @media (min-width: ($md3+px)) { + flex: 1 1 488px; + @include adaptiv-value("padding-right", 203, 15, 1); + } + } + + &__logo { + display: inline-block; + @include adaptiv-value("margin-bottom", 20, 6, 1); + } +} + +.menu-footer { + @media (min-width: ($md3+px)) { + display: flex; + } + + @media (min-width: ($md3+px)) { + flex: 1 1 692px; + flex-wrap: no-wrap; + } + + &__title { + @include adaptiv-value("padding-bottom", 20, 8, 1); + @extend ._icon-arrow; + &::before { + display: none; + @extend %ic; + font-size: 10px; + transition: all 0.3s ease 0s; + } + + @media (max-width: ($md3+px)) { + display: flex; + width: 100%; + flex-direction: row-reverse; + justify-content: space-between; + align-items: center; + transition: all 0.3s ease 0s; + + &._icon-arrow::before { + display: block; + } + } + + &._active { + color: $mainBlue; + + &::before { + transform: rotate(-180deg); + color: $mainBlue; + } + } + } + + &__list { + @media (max-width: ($md3+px)) { + position: absolute; + top: 100%; + opacity: 0; + visibility: hidden; + margin-bottom: 8px; + transition: all 0.3s ease 0s; + } + } + + &__item { + width: max-content; + + &:not(:last-child) { + @include adaptiv-value("margin-bottom", 11, 0, 1); + } + + @media (any-hover: hover) { + &:hover { + .menu-footer__link { + color: $mainBlue; + } + } + } + } + + &__link { + display: block; + width: max-content; + color: inherit; + transition: color 0.3s ease 0s; + } +} + +.title-footer { + font-family: $secondaryFont; + font-size: 22px; + line-height: 125%; + font-weight: 500; + color: $textColorSecond; + background: transparent; +} + +.soc-footer { + display: flex; + padding: 6px 0; + @include adaptiv-value("margin-bottom", 24, 8, 1); +} + +.soc-footer > .icon { + font-size: 16px; + color: $textColorSecond; + transition: all 0.3s ease 0s; + + @media (max-width: ($md4+px)) { + font-size: 18px; + } + + &:not(:last-child) { + margin-right: 24px; + } + + @media (any-hover: hover) { + &:hover { + color: $mainBlue; + transform: scale(1.2); + } + } +} + +.bottom-footer { + &__copy { + font-size: 14px; + } + + &__link { + font-size: 14px; + color: inherit; + padding: 5px 0; + transition: color 0.3s ease 0s; + &:not(:last-child) { + @include adaptiv-value("margin-right", 38, 16, 1); + } + + @include any-hover(color, $mainBlue); + } +} +//#endregion + +.menu-footer__column._active { + .menu-footer__list { + position: relative; + top: 0; + opacity: 1; + visibility: visible; + } + + ._icon-arrow::before { + color: $mainBlue; + transform: rotate(-180deg); + } + + .menu-footer__title { + color: $mainBlue; + } } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780..68c60e90 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,44 @@ -@mixin hover($_property, $_toValue) { +@mixin any-hover($_property, $_toValue) { transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; + @media (any-hover: hover) { + &:hover { + #{$_property}: $_toValue; + } + } +} + +@mixin onDesktop { + @media (min-width: 1054px) { + @content; + } +} + +//Адаптивное свойство +@mixin adaptiv-value($property, $startSize, $minSize, $type) { + $addSize: $startSize - $minSize; + @if $type==1 { + //Только если меньше контейнера + #{$property}: $startSize + px; + @media (max-width: #{$maxWidthContainer + px}) { + #{$property}: calc( + #{$minSize + px} + #{$addSize} * + ((100vw - 320px) / #{$maxWidthContainer - 320}) + ); + } + } + @else if $type==2 { + //Только если больше контейнера + #{$property}: $startSize + px; + @media (min-width: #{$maxWidthContainer + px}) { + #{$property}: calc( + #{$minSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth - 320}) + ); + } + } + @else { + //Всегда + #{$property}: calc( + #{$minSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth - 320}) + ); } } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ff..946f97cb 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,14 @@ -$c-gray: #eee; +// $minWidth: 320px; +$maxWidth: 1600; +$maxWidthContainer: 1210; +$md1: $maxWidthContainer + px; +$md2: 991.98; +$md3: 767.98; +$md4: 479.98; + +$mainFont: "Halyard Text", sans-serif; +$secondaryFont: "Halyard Display", sans-serif; +$fontSize: 18px; +$mainBlue: #3751ff; +$textColorMain: #455880; +$textColorSecond:#1e266d;