diff --git a/.bemlintrc.json b/.bemlintrc.json new file mode 100644 index 00000000..22a597e5 --- /dev/null +++ b/.bemlintrc.json @@ -0,0 +1,16 @@ +{ + "elementDivider": "__", + "modifierDivider": "--", + "ignore": [ + "node_modules", + "dist" + ], + "rules": { + "one-block": true, + "one-element": true, + "element-inside-parent-block": true, + "no-double-element": true, + "no-neighbour-parent-block": true, + "modifiable-class": true + } +} diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index a64ccfac..f3065d38 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -19,5 +19,11 @@ jobs: uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - - run: npm ci - - run: npm start & sleep 5 && npm test + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/.gitignore b/.gitignore index 0f8d3cf7..549c139a 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,4 @@ node_modules # Generated files backstop_data dist +.cache diff --git a/README.md b/README.md index 1f753740..46612af7 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://Oleksiy-Lyashenko.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..34dd1ed9 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "@linthtml/linthtml": "^0.3.2", "@mate-academy/eslint-config": "*", "@mate-academy/linthtml-config": "0.0.1", - "@mate-academy/scripts": "^0.2.0", + "@mate-academy/scripts": "^0.9.2", "@mate-academy/stylelint-config": "0.0.9", "colors": "^1.3.3", "eslint": "^5.16.0", diff --git a/src/fonts/Halyard/Halyard Display Medium.ttf b/src/fonts/Halyard/HalyardDisplayMedium.ttf similarity index 100% rename from src/fonts/Halyard/Halyard Display Medium.ttf rename to src/fonts/Halyard/HalyardDisplayMedium.ttf diff --git a/src/fonts/Halyard/Halyard Display SemiBold.ttf b/src/fonts/Halyard/HalyardDisplaySemiBold.ttf similarity index 100% rename from src/fonts/Halyard/Halyard Display SemiBold.ttf rename to src/fonts/Halyard/HalyardDisplaySemiBold.ttf diff --git a/src/fonts/Halyard/Halyard Micro Regular.ttf b/src/fonts/Halyard/HalyardMicroRegular.ttf similarity index 100% rename from src/fonts/Halyard/Halyard Micro Regular.ttf rename to src/fonts/Halyard/HalyardMicroRegular.ttf diff --git a/src/fonts/Halyard/Halyard Text Light.ttf b/src/fonts/Halyard/HalyardTextLight.ttf similarity index 100% rename from src/fonts/Halyard/Halyard Text Light.ttf rename to src/fonts/Halyard/HalyardTextLight.ttf diff --git a/src/fonts/Halyard/Halyard Text Medium.ttf b/src/fonts/Halyard/HalyardTextMedium.ttf similarity index 100% rename from src/fonts/Halyard/Halyard Text Medium.ttf rename to src/fonts/Halyard/HalyardTextMedium.ttf diff --git a/src/fonts/Halyard/Halyard Text Regular.ttf b/src/fonts/Halyard/HalyardTextRegular.ttf similarity index 100% rename from src/fonts/Halyard/Halyard Text Regular.ttf rename to src/fonts/Halyard/HalyardTextRegular.ttf diff --git a/src/images/Graphic-main.png b/src/images/Graphic-main.png new file mode 100644 index 00000000..164ccfa5 Binary files /dev/null and b/src/images/Graphic-main.png differ diff --git a/src/images/Graphic.png b/src/images/Graphic.png new file mode 100644 index 00000000..2a024be4 Binary files /dev/null and b/src/images/Graphic.png differ diff --git a/src/images/Icon__main-1.svg b/src/images/Icon__main-1.svg new file mode 100644 index 00000000..8780c763 --- /dev/null +++ b/src/images/Icon__main-1.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/images/Icon__main-2.svg b/src/images/Icon__main-2.svg new file mode 100644 index 00000000..121ae182 --- /dev/null +++ b/src/images/Icon__main-2.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/Icon__main-3.svg b/src/images/Icon__main-3.svg new file mode 100644 index 00000000..27c7393d --- /dev/null +++ b/src/images/Icon__main-3.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/bg.png b/src/images/bg.png new file mode 100644 index 00000000..95954a74 Binary files /dev/null and b/src/images/bg.png differ diff --git a/src/images/cross.svg b/src/images/cross.svg new file mode 100644 index 00000000..4711512d --- /dev/null +++ b/src/images/cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/digits.png b/src/images/digits.png new file mode 100644 index 00000000..e141e8cf Binary files /dev/null and b/src/images/digits.png differ diff --git a/src/images/icon-dribbble.svg b/src/images/icon-dribbble.svg new file mode 100644 index 00000000..679d7513 --- /dev/null +++ b/src/images/icon-dribbble.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/images/icon-envato.svg b/src/images/icon-envato.svg new file mode 100644 index 00000000..dc204e2e --- /dev/null +++ b/src/images/icon-envato.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon-facebook.svg b/src/images/icon-facebook.svg new file mode 100644 index 00000000..4eed9444 --- /dev/null +++ b/src/images/icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon-instagram.svg b/src/images/icon-instagram.svg new file mode 100644 index 00000000..081274da --- /dev/null +++ b/src/images/icon-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon-twitter.svg b/src/images/icon-twitter.svg new file mode 100644 index 00000000..6b8f39e1 --- /dev/null +++ b/src/images/icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/iconfinder_Contat_Us_15-Send_Mail_4211845 1.svg b/src/images/iconfinder_Contat_Us_15-Send_Mail_4211845 1.svg new file mode 100644 index 00000000..690ffda5 --- /dev/null +++ b/src/images/iconfinder_Contat_Us_15-Send_Mail_4211845 1.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/images/logo-1.svg b/src/images/logo-1.svg new file mode 100644 index 00000000..6c5dba72 --- /dev/null +++ b/src/images/logo-1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo-2.svg b/src/images/logo-2.svg new file mode 100644 index 00000000..21f0d83f --- /dev/null +++ b/src/images/logo-2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo-3.svg b/src/images/logo-3.svg new file mode 100644 index 00000000..cdb18fb7 --- /dev/null +++ b/src/images/logo-3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo-4.svg b/src/images/logo-4.svg new file mode 100644 index 00000000..0243a195 --- /dev/null +++ b/src/images/logo-4.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo-5.svg b/src/images/logo-5.svg new file mode 100644 index 00000000..9dced6c4 --- /dev/null +++ b/src/images/logo-5.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo-6.svg b/src/images/logo-6.svg new file mode 100644 index 00000000..c8e73ded --- /dev/null +++ b/src/images/logo-6.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo-7.svg b/src/images/logo-7.svg new file mode 100644 index 00000000..3f25070b --- /dev/null +++ b/src/images/logo-7.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 00000000..a0fb9f4f Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 00000000..918ade33 --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/menu.svg b/src/images/menu.svg new file mode 100644 index 00000000..073e61f7 --- /dev/null +++ b/src/images/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/portfolio-1.png b/src/images/portfolio-1.png new file mode 100644 index 00000000..9801164f Binary files /dev/null and b/src/images/portfolio-1.png differ diff --git a/src/images/portfolio-1.svg b/src/images/portfolio-1.svg new file mode 100644 index 00000000..189b5a71 --- /dev/null +++ b/src/images/portfolio-1.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/portfolio-10.png b/src/images/portfolio-10.png new file mode 100644 index 00000000..df6dab80 Binary files /dev/null and b/src/images/portfolio-10.png differ diff --git a/src/images/portfolio-11.png b/src/images/portfolio-11.png new file mode 100644 index 00000000..9a917c5b Binary files /dev/null and b/src/images/portfolio-11.png differ diff --git a/src/images/portfolio-2.png b/src/images/portfolio-2.png new file mode 100644 index 00000000..4bdbef2e Binary files /dev/null and b/src/images/portfolio-2.png differ diff --git a/src/images/portfolio-2.svg b/src/images/portfolio-2.svg new file mode 100644 index 00000000..5bd987f7 --- /dev/null +++ b/src/images/portfolio-2.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/portfolio-3.png b/src/images/portfolio-3.png new file mode 100644 index 00000000..8ffd3a5f Binary files /dev/null and b/src/images/portfolio-3.png differ diff --git a/src/images/portfolio-4.png b/src/images/portfolio-4.png new file mode 100644 index 00000000..e168c17e Binary files /dev/null and b/src/images/portfolio-4.png differ diff --git a/src/images/portfolio-5.png b/src/images/portfolio-5.png new file mode 100644 index 00000000..a9eec050 Binary files /dev/null and b/src/images/portfolio-5.png differ diff --git a/src/images/portfolio-6.png b/src/images/portfolio-6.png new file mode 100644 index 00000000..4402bd2b Binary files /dev/null and b/src/images/portfolio-6.png differ diff --git a/src/images/portfolio-7.png b/src/images/portfolio-7.png new file mode 100644 index 00000000..de3351de Binary files /dev/null and b/src/images/portfolio-7.png differ diff --git a/src/images/portfolio-8.png b/src/images/portfolio-8.png new file mode 100644 index 00000000..c38d3648 Binary files /dev/null and b/src/images/portfolio-8.png differ diff --git a/src/images/portfolio-9.png b/src/images/portfolio-9.png new file mode 100644 index 00000000..11850205 Binary files /dev/null and b/src/images/portfolio-9.png differ diff --git a/src/images/portfolio-image.svg b/src/images/portfolio-image.svg new file mode 100644 index 00000000..22efdcb6 --- /dev/null +++ b/src/images/portfolio-image.svg @@ -0,0 +1,235 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/testimonials-1.svg b/src/images/testimonials-1.svg new file mode 100644 index 00000000..d7df4625 --- /dev/null +++ b/src/images/testimonials-1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/testimonials-2.svg b/src/images/testimonials-2.svg new file mode 100644 index 00000000..0c2bf6ae --- /dev/null +++ b/src/images/testimonials-2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/testimonials-3.svg b/src/images/testimonials-3.svg new file mode 100644 index 00000000..d0182a05 --- /dev/null +++ b/src/images/testimonials-3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/index.html b/src/index.html index 5d357bd6..077e4c67 100644 --- a/src/index.html +++ b/src/index.html @@ -6,8 +6,498 @@ Title - -

Hello Mate Academy

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

+ Good design meets +
+ great user experience +

+ +

For everyone, from beginners to experts

+ +
+ + Buy Digits + + + + See the Features + + +
+ +
+
+
+
+
+ + + +
+
+

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

+ +
+ +
+ +

+ Happy User +

+ +

+ tempy.club +

+
+
+
+
+

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

+ +
+ +
+ +

+ 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/styles/_fonts.scss b/src/styles/_fonts.scss index 2067b3fc..28f4cc34 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,12 @@ @font-face { - font-family: "Roboto"; - src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); - font-weight: normal; + font-family: "Halyard Text"; + src: url(../fonts/Halyard/HalyardTextLight.ttf); + font-weight: 400; font-style: normal; } + +@font-face { + font-family: "Halyard Text"; + src: url(../fonts/Halyard/HalyardDisplayMedium.ttf); + font-weight: 500; +} diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss new file mode 100644 index 00000000..e61167bc --- /dev/null +++ b/src/styles/_mixins.scss @@ -0,0 +1,11 @@ +@mixin onDesktop { + @media (min-width: 1024px) { + @content; + } +} + +@mixin onTab { + @media (min-width: 768px) { + @content; + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 00000000..72b9b2bc --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,77 @@ +.button { + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + width: 113px; + height: 40px; + background: #3751ff; + border-radius: 100px; + + text-decoration: none; + color: #fff; + + &--nav { + width: 170px; + height: 60px; + font-size: 22px; + } + + &--contact { + display: none; + + @include onTab { + display: flex; + } + + &:hover { + background-color: transparent; + border: 2px solid #3751ff; + color: #3751ff; + } + } + + &--blue { + width: 150px; + height: 50px; + + &:hover { + background-color: transparent; + border: 2px solid #3751ff; + color: #3751ff; + } + } + + &--white { + width: 200px; + height: 50px; + + color: #455880; + background-color: #fff; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + + &:hover { + background-color: transparent; + border: 2px solid #455880; + } + } + + &--cta { + width: 245px; + height: 56px; + margin-bottom: 20px; + background-color: #fff; + + font-weight: 500; + font-size: 18px; + line-height: 110%; + color: #455880; + + &:hover { + background-color: transparent; + border: 2px solid #fff; + color: #fff; + } + } + +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 00000000..288cdb89 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,52 @@ +.container { + margin: 0 auto; + max-width: 1200px; + padding: 0 20px; + + @include onDesktop { + padding: 0 40px; + } + + &--about { + padding: 0 20px; + padding-top: 50px; + + @include onTab { + padding: 0; + padding-top: 120px; + } + } + + &--portfolio { + padding-top: 60px; + + @include onTab { + padding-top: 140px; + } + } + + &--testimonials { + padding-top: 60px; + + @include onTab { + padding-top: 120px; + } + } + + &--cta { + padding: 60px 20px; + + @include onTab { + padding-top: 88px; + padding-bottom: 115px; + } + } + + &--footer { + padding-top: 60px; + + @include onTab { + padding-top: 117px; + } + } +} diff --git a/src/styles/blocks/cta.scss b/src/styles/blocks/cta.scss new file mode 100644 index 00000000..8e180590 --- /dev/null +++ b/src/styles/blocks/cta.scss @@ -0,0 +1,43 @@ +.cta { + background-color: #3751ff; + + &__block { + display: flex; + justify-content: space-between; + flex-direction: column; + align-items: center; + + @include onTab { + flex-direction: row; + justify-content: space-between; + } + } + + &__icon { + margin-right: 20px; + } + + &__button { + display: flex; + flex-direction: column; + align-items: center; + + @include onDesktop { + align-items: flex-end; + } + + &-sign { + margin: 0; + + font-size: 16px; + line-height: 125%; + + color: #dfe0ed; + + &-link { + text-decoration: none; + color: #fed385; + } + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 00000000..686739fe --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,168 @@ +.footer { + + &__container { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + + @include onDesktop { + display: grid; + } + } + + &__block { + display: none; + + @include onDesktop { + display: block; + } + } + + &__logo { + display: none; + height: 23px; + margin-bottom: 31px; + + @include onDesktop { + display: block; + } + } + + &__text { + display: none; + width: 400px; + text-align: center; + margin: 0; + + font-size: 23px; + line-height: 145%; + color: #455880; + + @include onDesktop { + display: block; + width: 100%; + text-align: left; + font-size: 18px; + } + } + + &__column { + display: flex; + justify-content: space-between; + + @include onDesktop { + display: grid; + } + } + + &__title { + font-weight: 500; + font-size: 26px; + line-height: 125%; + margin-bottom: 22px; + + color: #1e266d; + text-align: left; + + &--resources { + font-size: 22px; + margin-bottom: 32px; + } + } + + &__subtitle { + margin: 0; + padding: 0; + list-style: none; + text-align: left; + + margin-bottom: 80px; + + @include onDesktop { + margin-bottom: 130px; + } + } + + &__link { + text-decoration: none; + + line-height: 250%; + font-size: 22px; + color: #455880; + + @include onDesktop { + font-size: 18px; + } + } + + &--demos { + padding-left: 0; + + @include onDesktop { + padding-left: 20px; + } + } + + &--resourses { + padding-left: 0; + + @include onDesktop { + padding-left: 70px; + } + } + + &__icon { + display: flex; + justify-content: center; + column-gap: 24px; + + margin-bottom: 24px; + + @include onDesktop { + justify-content: left; + } + } + + &__copyright { + display: flex; + justify-content: space-between; + padding-bottom: 50px; + + @include onDesktop { + padding-bottom: 115px; + } + &-text { + margin: 0; + font-weight: normal; + font-size: 10px; + line-height: 27px; + color: rgba(69, 88, 128, 0.5); + + @include onTab { + font-size: 14px; + } + } + } + + &__privacy { + display: flex; + column-gap: 40px; + + &-text { + margin: 0; + font-weight: normal; + font-size: 10px; + line-height: 27px; + + color: #455880; + + @include onTab { + font-size: 14px; + } + } + + &-link { + text-decoration: none; + } + } +} diff --git a/src/styles/blocks/grid.scss b/src/styles/blocks/grid.scss new file mode 100644 index 00000000..d4d93110 --- /dev/null +++ b/src/styles/blocks/grid.scss @@ -0,0 +1,33 @@ +.grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 20px; + + @include onDesktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + column-gap: 24px; + } + + &--desktop { + display: block; + + @include onDesktop { + display: grid; + } + + &-footer { + display: grid; + } + } + + &__item { + @for $start from 1 through 12 { + @for $end from $start through 12 { + &--#{$start}-#{$end} { + grid-column: #{$start} / #{$end + 1}; + } + } + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 00000000..1ff6fbdd --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,73 @@ +.header { + background: linear-gradient(180deg, #fdfeff 0%, #f2f9ff 100%); + + &__nav { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__container { + height: 100vh; + display: flex; + flex-direction: column; + justify-content: space-between; + } + + &__content { + padding: 22px 0; + margin-bottom: 60px; + + @include onTab { + margin-bottom: 146px; + } + } + + &__main { + + + &-text { + margin: 0; + margin-bottom: 29px; + + font-size: 18px; + line-height: 150%; + text-align: center; + color: #455880; + } + + &-photo { + display: none; + height: 605px; + + background-image: url(../images/Graphic.png); + background-repeat: no-repeat; + background-position: center; + + @include onTab { + display: block; + } + } + } + + &__title { + margin: 0; + margin-bottom: 27px; + + font-weight: 500; + font-size: 56px; + line-height: 105%; + + text-align: center; + + color: #1e266d; + } + + &__button { + display: flex; + justify-content: center; + column-gap: 22px; + + margin-bottom: 32px; + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 00000000..4ff075d1 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,20 @@ +.icon { + width: 24px; + height: 24px; + + background-size: cover; + background-repeat: no-repeat; + background-position: center; + + @include onTab { + display: none; + } + + &--menu { + background-image: url(../images/menu.svg); + } + + &--cross { + background-image: url(../images/cross.svg); + } +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 00000000..2cdab1c9 --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,7 @@ +.logo { + display: block; + + &__image { + height: 32px; + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 00000000..ec6d1e12 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,94 @@ +.main { + background-color: #fff; + + &__photo { + display: none; + position: absolute; + + @include onDesktop { + display: block; + } + } + + &__subtitle { + margin: 0; + margin-bottom: 50px; + + font-size: 16px; + line-height: 27px; + text-align: center; + color: rgba(69, 88, 128, 0.5); + } + + &__logo { + display: flex; + justify-content: center; + column-gap: 72px; + row-gap: 72px; + flex-wrap: wrap; + + margin-bottom: 162px; + } + + &__text { + padding-top: 78px; + + &-block { + margin: 0 auto; + max-width: 405px; + min-height: 184px; + margin-bottom: 45px; + + box-sizing: border-box; + border-bottom: 1px solid rgba(69, 88, 128, 0.2); + + @include onDesktop { + width: 100%; + } + + &--last { + margin-bottom: 70px; + + @include onTab { + margin-bottom: 190px; + } + } + + &-photo { + width: 48px; + height: 58px; + } + + &-title { + display: flex; + } + + } + + &-photo { + width: 48px; + height: 58px; + + margin-right: 47px; + } + + &-title { + display: inline-block; + + margin: 0; + font-weight: bold; + font-size: 22px; + line-height: 125%; + color: #1e266d; + } + + &-subtitle { + margin: 0; + margin-left: 95px; + + font-size: 18px; + line-height: 27px; + color: #455880; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 00000000..55add10e --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,56 @@ +.menu { + + &__list { + display: none; + justify-content: space-between; + list-style: none; + padding: 0; + + + @include onTab { + display: flex; + } + } + + &__item { + margin-right: 40px; + + &:last-child { + margin-right: 0; + } + } + + &__link { + display: block; + color: #1e266d; + text-decoration: none; + } + + &__call { + display: none; + margin-right: 34px; + + color: #1e266d; + font-size: 16px; + text-decoration: none; + + &--nav { + display: block; + font-size: 22px; + margin-bottom: 20px; + } + + @include onDesktop { + display: block; + } + + &--contact { + color: #fff; + } + } + + &__contact-us { + display: flex; + align-items: center; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 00000000..54896363 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,38 @@ +.nav { + background-color: #f0f2f6; + + &__content { + box-sizing: border-box; + height: 100vh; + } + + &__menu { + padding-top: 22px; + margin-bottom: 48px; + } + + &__list { + margin: 0; + padding: 0; + list-style: none; + margin-bottom: 48px; + } + + &__item { + margin-bottom: 24px; + + &:last-child { + margin-bottom: 0; + } + + } + + &__link { + font-weight: bold; + font-size: 22px; + line-height: 22px; + text-transform: uppercase; + color: #1e266d; + text-decoration: none; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 00000000..924bb9d7 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,67 @@ +.page { + margin: 0; + font-family: "Halyard Text", sans-serif; + font-weight: normal; + background: $c-gray; + + &__title { + margin: 0; + + font-weight: bold; + font-size: 46px; + line-height: 105%; + text-align: center; + color: #1e266d; + + @include onTab { + font-size: 56px; + } + + &--header { + margin-bottom: 27px; + } + + &--main { + font-size: 48px; + margin-bottom: 50px; + } + + &--portfolio { + margin-bottom: 40px; + } + + &--testimonials { + margin-bottom: 56px; + } + + &--cta { + font-size: 36px; + color: #fff; + text-align: center; + margin-bottom: 30px; + + @include onTab { + text-align: left; + } + + @include onDesktop { + font-size: 48px; + margin-bottom: 0; + } + } + } + + &__nav { + position: fixed; + top: 0; + right: 0; + left: 0; + + transform: translateX(100%); + transition: transform 0.4s; + + &:target { + transform: translateX(0); + } + } +} diff --git a/src/styles/blocks/portfolio.scss b/src/styles/blocks/portfolio.scss new file mode 100644 index 00000000..5f8e43fe --- /dev/null +++ b/src/styles/blocks/portfolio.scss @@ -0,0 +1,35 @@ +.portfolio { + background-color: #fff9ea; + + &__subtitle { + margin: 0; + margin-bottom: 40px; + + font-size: 21px; + line-height: 150%; + + text-align: center; + + color: #455880; + } + + &__button { + display: flex; + justify-content: center; + + margin-bottom: 37px; + } + + &__image { + display: flex; + justify-content: flex-start; + overflow: hidden; + + height: 260px; + + @include onTab { + justify-content: center; + height: 100%; + } + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 00000000..a698a6c5 --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,65 @@ +.testimonials { + &__block { + max-width: 372px; + margin: 0 auto; + min-height: 470px; + padding: 0 43px; + box-sizing: border-box; + margin-bottom: 50px; + + border: 1px solid rgba(69, 88, 128, 0.2); + border-radius: 4px; + + @include onDesktop { + width: 100%; + margin: 0; + margin-bottom: 150px; + } + + &-name { + margin: 0; + + font-weight: 500; + font-size: 22px; + line-height: 125%; + + text-align: center; + + color: #1e266d; + } + } + + &__text { + margin: 38px 0; + + font-style: normal; + font-size: 18px; + line-height: 180%; + + color: #455880; + + &--site { + margin: 0; + margin-bottom: 32px; + text-align: center; + } + + &--2 { + margin-bottom: 70px; + } + + &--3 { + margin-bottom: 70px; + } + } + + &__photo { + + &-container { + display: flex; + justify-content: center; + + margin-bottom: 32px; + } + } +} diff --git a/src/styles/blocks/top-actions.scss b/src/styles/blocks/top-actions.scss new file mode 100644 index 00000000..dfee6aa9 --- /dev/null +++ b/src/styles/blocks/top-actions.scss @@ -0,0 +1,4 @@ +.top-actions { + display: flex; + justify-content: space-between; +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e4..9c91f511 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,20 @@ @import "utils"; @import "fonts"; @import "typography"; +@import "mixins"; -body { - background: $c-gray; -} +@import "blocks/page"; +@import "blocks/container"; +@import "blocks/header"; +@import "blocks/menu"; +@import "blocks/top-actions"; +@import "blocks/logo"; +@import "blocks/icon"; +@import "blocks/nav"; +@import "blocks/button"; +@import "blocks/main"; +@import "blocks/grid"; +@import "blocks/portfolio"; +@import "blocks/testimonials"; +@import "blocks/cta"; +@import "blocks/footer";