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/.linthtmlrc.json b/.linthtmlrc.json index 774726eb..0f2047a7 100644 --- a/.linthtmlrc.json +++ b/.linthtmlrc.json @@ -1,49 +1,3 @@ { - "attr-bans": [ - "align", - "background", - "bgcolor", - "border", - "frameborder", - "style" - ], - "attr-name-ignore-regex": "viewBox", - "attr-no-dup": true, - "attr-quote-style": "double", - "attr-req-value": true, - "class-no-dup": true, - "doctype-first": true, - "doctype-html5": true, - "fig-req-figcaption": true, - "head-req-title": true, - "html-req-lang": true, - "id-class-style": false, - "id-no-dup": true, - "img-req-src": true, - "img-req-alt": "allownull", - "indent-width": 2, - "indent-style": "spaces", - "indent-width-cont": true, - "input-radio-req-name": true, - "spec-char-escape": true, - "tag-bans": [ - "b", - "i", - "u", - "center", - "style", - "marquee", - "font", - "s" - ], - "tag-name-lowercase": true, - "tag-name-match": true, - "tag-self-close": "never", - "tag-close": true, - "text-ignore-regex": "&", - "title-no-dup": true, - "line-end-style": "lf", - "attr-new-line": 2, - "attr-name-style": "dash", - "attr-no-unsafe-char": true + "extends": "@mate-academy/linthtml-config" } diff --git a/README.md b/README.md index 1f753740..cab7cf57 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://7dimnik.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..a4799853 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.14", "@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/Halyard-Display-Medium.ttf similarity index 100% rename from src/fonts/Halyard/Halyard Display Medium.ttf rename to src/fonts/Halyard/Halyard-Display-Medium.ttf diff --git a/src/fonts/Halyard/Halyard Text Regular.ttf b/src/fonts/Halyard/Halyard-Text-Regular.ttf similarity index 100% rename from src/fonts/Halyard/Halyard Text Regular.ttf rename to src/fonts/Halyard/Halyard-Text-Regular.ttf diff --git a/src/fonts/roboto-regular-webfont.woff b/src/fonts/roboto-regular-webfont.woff new file mode 100644 index 00000000..cd733104 Binary files /dev/null and b/src/fonts/roboto-regular-webfont.woff differ diff --git a/src/images/Ellipse1.svg b/src/images/Ellipse1.svg new file mode 100644 index 00000000..8eddc5b5 --- /dev/null +++ b/src/images/Ellipse1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Ellipse2.svg b/src/images/Ellipse2.svg new file mode 100644 index 00000000..f2612f63 --- /dev/null +++ b/src/images/Ellipse2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Rectangle-green.svg b/src/images/Rectangle-green.svg new file mode 100644 index 00000000..ebe55b4e --- /dev/null +++ b/src/images/Rectangle-green.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Rectangle-red.svg b/src/images/Rectangle-red.svg new file mode 100644 index 00000000..73abe227 --- /dev/null +++ b/src/images/Rectangle-red.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Rectangle-rose.svg b/src/images/Rectangle-rose.svg new file mode 100644 index 00000000..89838cea --- /dev/null +++ b/src/images/Rectangle-rose.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Vector-1.svg b/src/images/Vector-1.svg new file mode 100644 index 00000000..704b060c --- /dev/null +++ b/src/images/Vector-1.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/images/Vector-2.svg b/src/images/Vector-2.svg new file mode 100644 index 00000000..be899a0e --- /dev/null +++ b/src/images/Vector-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Vector-3.svg b/src/images/Vector-3.svg new file mode 100644 index 00000000..dd8fa986 --- /dev/null +++ b/src/images/Vector-3.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Vector-4.svg b/src/images/Vector-4.svg new file mode 100644 index 00000000..c8f83ae9 --- /dev/null +++ b/src/images/Vector-4.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Vector-tr.svg b/src/images/Vector-tr.svg new file mode 100644 index 00000000..221da4a1 --- /dev/null +++ b/src/images/Vector-tr.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Vector.svg b/src/images/Vector.svg new file mode 100644 index 00000000..3206f5f1 --- /dev/null +++ b/src/images/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/avatar/ava1.svg b/src/images/avatar/ava1.svg new file mode 100644 index 00000000..fafe28ad --- /dev/null +++ b/src/images/avatar/ava1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/avatar/ava2.svg b/src/images/avatar/ava2.svg new file mode 100644 index 00000000..d038591d --- /dev/null +++ b/src/images/avatar/ava2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/avatar/ava3.svg b/src/images/avatar/ava3.svg new file mode 100644 index 00000000..5b51b45a --- /dev/null +++ b/src/images/avatar/ava3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/browser/browser11.png b/src/images/browser/browser11.png new file mode 100644 index 00000000..fd9dcfad Binary files /dev/null and b/src/images/browser/browser11.png differ diff --git a/src/images/browser/browser11.svg b/src/images/browser/browser11.svg new file mode 100644 index 00000000..aff6930c --- /dev/null +++ b/src/images/browser/browser11.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/browser/browser12.svg b/src/images/browser/browser12.svg new file mode 100644 index 00000000..b2bd7425 --- /dev/null +++ b/src/images/browser/browser12.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/browser/browser13.svg b/src/images/browser/browser13.svg new file mode 100644 index 00000000..3618342d --- /dev/null +++ b/src/images/browser/browser13.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/browser/browser21.png b/src/images/browser/browser21.png new file mode 100644 index 00000000..2d258ef4 Binary files /dev/null and b/src/images/browser/browser21.png differ diff --git a/src/images/browser/browser21.svg b/src/images/browser/browser21.svg new file mode 100644 index 00000000..46e011bf --- /dev/null +++ b/src/images/browser/browser21.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/browser/browser22.svg b/src/images/browser/browser22.svg new file mode 100644 index 00000000..2b22f594 --- /dev/null +++ b/src/images/browser/browser22.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/browser/browser31.svg b/src/images/browser/browser31.svg new file mode 100644 index 00000000..fae4e2c0 --- /dev/null +++ b/src/images/browser/browser31.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/browser/browser32.svg b/src/images/browser/browser32.svg new file mode 100644 index 00000000..0853ec10 --- /dev/null +++ b/src/images/browser/browser32.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/browser/browser41.svg b/src/images/browser/browser41.svg new file mode 100644 index 00000000..02cfd13c --- /dev/null +++ b/src/images/browser/browser41.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/browser/browser42.svg b/src/images/browser/browser42.svg new file mode 100644 index 00000000..98b7a36a --- /dev/null +++ b/src/images/browser/browser42.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/browser/browser51.svg b/src/images/browser/browser51.svg new file mode 100644 index 00000000..24b4a8b8 --- /dev/null +++ b/src/images/browser/browser51.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/browser/browser52.svg b/src/images/browser/browser52.svg new file mode 100644 index 00000000..aa715b5a --- /dev/null +++ b/src/images/browser/browser52.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/image1.svg b/src/images/image1.svg new file mode 100644 index 00000000..7f8cad5d --- /dev/null +++ b/src/images/image1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/image2.svg b/src/images/image2.svg new file mode 100644 index 00000000..eaaa6deb --- /dev/null +++ b/src/images/image2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/image3.svg b/src/images/image3.svg new file mode 100644 index 00000000..c0a59eb6 --- /dev/null +++ b/src/images/image3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/image4.svg b/src/images/image4.svg new file mode 100644 index 00000000..09fc4abd --- /dev/null +++ b/src/images/image4.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/imoticon2.svg b/src/images/imoticon2.svg new file mode 100644 index 00000000..fc801500 --- /dev/null +++ b/src/images/imoticon2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/letter/letter-down.svg b/src/images/letter/letter-down.svg new file mode 100644 index 00000000..7945dfbf --- /dev/null +++ b/src/images/letter/letter-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/letter/letter-left.svg b/src/images/letter/letter-left.svg new file mode 100644 index 00000000..a8fc5525 --- /dev/null +++ b/src/images/letter/letter-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/letter/letter-line.svg b/src/images/letter/letter-line.svg new file mode 100644 index 00000000..100e7f99 --- /dev/null +++ b/src/images/letter/letter-line.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/letter/letter-right.svg b/src/images/letter/letter-right.svg new file mode 100644 index 00000000..5c1ba1a0 --- /dev/null +++ b/src/images/letter/letter-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/letter/letter-up.svg b/src/images/letter/letter-up.svg new file mode 100644 index 00000000..b329db7e --- /dev/null +++ b/src/images/letter/letter-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo-cinemax.svg b/src/images/logo-cinemax.svg new file mode 100644 index 00000000..9551c956 --- /dev/null +++ b/src/images/logo-cinemax.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo-disney.svg b/src/images/logo-disney.svg new file mode 100644 index 00000000..98023fb6 --- /dev/null +++ b/src/images/logo-disney.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo-drawkit.svg b/src/images/logo-drawkit.svg new file mode 100644 index 00000000..7a29d206 --- /dev/null +++ b/src/images/logo-drawkit.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo-figma.svg b/src/images/logo-figma.svg new file mode 100644 index 00000000..75c79a7d --- /dev/null +++ b/src/images/logo-figma.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo-google.svg b/src/images/logo-google.svg new file mode 100644 index 00000000..4a0f845c --- /dev/null +++ b/src/images/logo-google.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo-netflix.svg b/src/images/logo-netflix.svg new file mode 100644 index 00000000..ae7ba85b --- /dev/null +++ b/src/images/logo-netflix.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo-stripe.svg b/src/images/logo-stripe.svg new file mode 100644 index 00000000..486cb087 --- /dev/null +++ b/src/images/logo-stripe.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/networks/dribbble.svg b/src/images/networks/dribbble.svg new file mode 100644 index 00000000..8c4f317b --- /dev/null +++ b/src/images/networks/dribbble.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/images/networks/envato.svg b/src/images/networks/envato.svg new file mode 100644 index 00000000..06701f65 --- /dev/null +++ b/src/images/networks/envato.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/networks/facebook.svg b/src/images/networks/facebook.svg new file mode 100644 index 00000000..69a4d990 --- /dev/null +++ b/src/images/networks/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/networks/instagram.svg b/src/images/networks/instagram.svg new file mode 100644 index 00000000..727c9605 --- /dev/null +++ b/src/images/networks/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/networks/twitter.svg b/src/images/networks/twitter.svg new file mode 100644 index 00000000..fdd57973 --- /dev/null +++ b/src/images/networks/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/person/Body.svg b/src/images/person/Body.svg new file mode 100644 index 00000000..7f5142d7 --- /dev/null +++ b/src/images/person/Body.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/person/Book.svg b/src/images/person/Book.svg new file mode 100644 index 00000000..e97513bd --- /dev/null +++ b/src/images/person/Book.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/person/Brush.svg b/src/images/person/Brush.svg new file mode 100644 index 00000000..25f223fe --- /dev/null +++ b/src/images/person/Brush.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/person/Ear.svg b/src/images/person/Ear.svg new file mode 100644 index 00000000..db05389f --- /dev/null +++ b/src/images/person/Ear.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/person/Face.svg b/src/images/person/Face.svg new file mode 100644 index 00000000..4a22a2e0 --- /dev/null +++ b/src/images/person/Face.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/person/Hair.svg b/src/images/person/Hair.svg new file mode 100644 index 00000000..c7060352 --- /dev/null +++ b/src/images/person/Hair.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/person/Hand-left.svg b/src/images/person/Hand-left.svg new file mode 100644 index 00000000..883a1a24 --- /dev/null +++ b/src/images/person/Hand-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/person/Hand-right.svg b/src/images/person/Hand-right.svg new file mode 100644 index 00000000..c038e087 --- /dev/null +++ b/src/images/person/Hand-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/person/Leg-left.svg b/src/images/person/Leg-left.svg new file mode 100644 index 00000000..2e419ba0 --- /dev/null +++ b/src/images/person/Leg-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/person/Leg-right.svg b/src/images/person/Leg-right.svg new file mode 100644 index 00000000..3881df2e --- /dev/null +++ b/src/images/person/Leg-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/person/Neck.svg b/src/images/person/Neck.svg new file mode 100644 index 00000000..8f7269a2 --- /dev/null +++ b/src/images/person/Neck.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/person/Shoulder-left.svg b/src/images/person/Shoulder-left.svg new file mode 100644 index 00000000..5dbfa087 --- /dev/null +++ b/src/images/person/Shoulder-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/person/Shoulder-right.svg b/src/images/person/Shoulder-right.svg new file mode 100644 index 00000000..2bdd4f83 --- /dev/null +++ b/src/images/person/Shoulder-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/index.html b/src/index.html index 5d357bd6..add4eaf9 100644 --- a/src/index.html +++ b/src/index.html @@ -3,11 +3,1030 @@ - 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 + +
+ +
+ Triangle +
+ +
+ Ellipse +
+ +
+ Image +
+ +
+ Rectangle +
+ +
+ Ellipse +
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ Ellipse2 +
+ +
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+ +
+ Ellipse +
+ +
+
+
+
+
+
+
+
+ +
+ Ellipse +
+ +
+ Imoticon + +
+
+
+ +
+
+ Hair +
+ +
+ Face +
+ +
+ Ear +
+ +
+ Neck +
+ +
+ Body +
+ +
+ Shoulder left +
+ +
+ Hand left +
+ +
+ Brush +
+ +
+ Book +
+
+ Shoulder right +
+ +
+ /Hand right +
+ +
+ person__item--Leg right +
+ +
+ Leg left +
+
+
+
+ +
+
+
+

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

+ +
+ + Netflix + + + + DrawKit + + + + Figma + + + + Cinemax + + + + Stripe + + + + Google + + + + Disney + +
+ +

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

+ +
+
+
+
+ + Women + Rectangle +
+ +
+
+ + Man + Ellipse +
+ +
+
+ + Man + Ellipse +
+
+ +
+
+
+ Rectangle green + Figma + +

+ Design and Assets +

+
+ +

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

+
+ +
+
+ Rectangle rose + Vector + Vector + Vector + Vector + +

+ Easy Content +

+
+ +

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

+
+ +
+
+ Rectangle red + Lightning + +

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

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

+ +
+ photo1 +
+ +

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

+ +
+ photo1 +
+ +

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

+ +
+ photo1 +
+ +

+ Happy User +

+ +
+ tempy.club +
+
+
+
+
+
+
+ +
+
+
+

+ Ready to launch your next website? +

+ +
+
+
+ +
+
+ letter +
+ +
+ letter +
+ +
+ letter +
+ +
+ letter +
+ +
+ letter +
+
+ + Get in touch now + +
+ +
+ Or, take a peek inside our design studio +
+
+
+
+
+
+ +
+
+
+
+
+ + +

+ Digits is a website template built to work seamlesly with the WordPress block editor to create beautifully designed pages in minutes. +

+
+ +
+
+

+ Pages +

+ + +
+ +
+

+ Demos +

+ + +
+
+ +
+

+ Resources +

+ +
+ + + + + + + + + instagram + + + + + + + + + + + + twitter + + + + + + envato + + +
+ + +
+
+ +
+ + +

+ Copyright © 2020 tempy.club +

+
+
+
+
+
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 2067b3fc..a351074c 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-weight: normal; + font-family: "Halyard Text"; + src: url("../fonts/Halyard/Halyard-Text-Regular.ttf") format("truetype"); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: "Halyard Display"; + src: url("../fonts/Halyard/Halyard-Display-Medium.ttf") format("truetype"); + font-weight: 500; font-style: normal; } diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46..00000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 1366a06a..1fc77b56 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,2 @@ @import "utils/vars"; @import "utils/mixins"; -@import "utils/extends"; diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 00000000..3ded5b05 --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,100 @@ +.about { + &__content { + margin: 41px auto 150px; + + max-width: 1180px; + + @include titleSize { + margin: 68px auto 150px; + } + } + + &__paragraph { + margin: 0 auto 49px; + + max-width: 300px; + text-align: center; + line-height: 27px; + color: rgba(69, 88, 128, 0.5); + + @include titleSize { + max-width: 560px; + } + } + + &__clients { + margin: 0 auto 80px; + + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: center; + gap: 6%; + + @include onMobile { + margin: 0 auto 121px; + } + + @include menuTop { + margin-bottom: 162px; + } + + @include onLaptop { + flex-wrap: nowrap; + } + + &--netflix { + width: 110px; + height: 34px; + } + + &--drawkit { + width: 95px; + height: 33px; + } + + &--figma { + width: 80px; + height: 34px; + } + + &--cinemax { + width: 174px; + height: 33px; + } + + &--stripe { + width: 115px; + height: 33px; + } + + &--google { + width: 102px; + height: 34px; + } + + &--disney { + width: 71px; + height: 34px; + } + } + + &__title { + margin: 0 auto 126px; + + max-width: 350px; + text-align: center; + + @include title1; + + @include titleSize { + line-height: 163%; + } + + @include onTablet { + max-width: 460px; + + @include title1Mobile; + } + } +} diff --git a/src/styles/blocks/browsers.scss b/src/styles/blocks/browsers.scss new file mode 100644 index 00000000..76f7fe18 --- /dev/null +++ b/src/styles/blocks/browsers.scss @@ -0,0 +1,76 @@ +.browsers { + width: 100%; + max-height: 714px; + + position: absolute; + left: 0; + bottom: 0; + + &__items { + position: relative; + + &--item { + max-width: 540px; + width: 21%; + line-height: 100%; + filter: drop-shadow(0 4px 4px rgba(135, 146, 161, 0.08)) + drop-shadow(0 14px 25px rgba(135, 146, 161, 0.06)); + } + + &--item-11 { + position: absolute; + transform: translateY(-196%); + } + + &--item-12 { + position: absolute; + transform: translateY(-106%); + + } + + &--item-13 { + position: absolute; + transform: translateY(-100%); + } + + &--item-21 { + position: absolute; + transform: translate(93%, -156%); + } + + &--item-22 { + position: absolute; + transform: translate(93%, -100%); + } + + &--item-31 { + position: absolute; + transform: translate(188%, -136%); + } + + &--item-32 { + position: absolute; + transform: translate(188%, -100%); + } + + &--item-41 { + position: absolute; + transform: translate(283%, -116%); + } + + &--item-42 { + position: absolute; + transform: translate(283%, -100%); + } + + &--item-51 { + position: absolute; + transform: translate(376%, -164%); + } + + &--item-52 { + position: absolute; + transform: translate(376%, -100%); + } + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 00000000..0b5c97e6 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,9 @@ +.button { + display: flex; + justify-content: center; + align-items: center; + color: $c-white; + background-color: $c-blue; + border-radius: 100px; + cursor: pointer; +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 00000000..112d86fc --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,28 @@ +.contact-us { + height: 80px; + display: flex; + justify-content: space-between; + align-items: center; + + &__number { + display: none; + font-size: 15px; + line-height: 80px; + width: 197px; + text-align: center; + color: $c-title; + + @include onMobile { + display: block; + } + } + + &__button { + &--header-top { + margin: 0 auto; + + width: 113px; + height: 40px; + } + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 00000000..51ccfe5f --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,8 @@ +.container { + margin: 0 5%; + max-width: 1600px; + + @include onLaptop { + margin: 0 auto; + } +} diff --git a/src/styles/blocks/design.scss b/src/styles/blocks/design.scss new file mode 100644 index 00000000..b431a80f --- /dev/null +++ b/src/styles/blocks/design.scss @@ -0,0 +1,65 @@ +.design { + margin: 0 auto; + + position: relative; + background-color: #fff9ea; + height: 100%; + + &__content { + margin: 0 auto; + padding: 139px 0 38%; + } + + &__title { + margin: 0 auto 40px; + + text-align: center; + + @include title1; + + @include titleSize { + line-height: 163%; + } + + @include onTablet { + max-width: 700px; + + @include title1Mobile; + } + } + + &__paragraph { + margin: 0 auto 40px; + + text-align: center; + max-width: 307px; + font-size: 21px; + line-height: 150%; + color: $c-paragraph; + + br { + display: none; + } + + @include onMobile { + max-width: 405px; + + br { + display: block; + } + } + } + + &__button { + margin: 0 auto; + display: flex; + justify-content: center; + align-items: center; + + &--blue { + width: 148px; + height: 50px; + line-height: 100%; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 00000000..21f5a1cf --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,172 @@ +.footer { + &__content { + margin: 124px auto 107px; + padding: 0 10px; + max-width: 1180px; + + @include onTablet { + padding: 0; + } + } + + &__container { + margin: 0 0 53px; + padding-bottom: 77px; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + row-gap: 66px; + + border-bottom: 1px solid rgba(135, 146, 161, 0.08); + + @include menuTop { + flex-direction: row; + flex-wrap: wrap; + align-items: start; + } + + @include onDesign { + justify-content: space-between; + } + + &--down { + margin: 0 0 107px; + + display: flex; + flex-direction: column; + justify-content: center; + + @include menuTop { + flex-direction: row-reverse; + justify-content: space-around; + } + + @include onDesign { + justify-content: space-between; + } + + &-copyright { + margin: 0 auto; + width: max-content; + font-size: 14px; + line-height: 27px; + color: rgba(69, 88, 128, 0.5); + + @include menuTop { + margin: 0; + } + } + } + } + + &__digits { + display: flex; + flex-direction: column; + align-items: start; + + @include onTablet { + height: 252px; + } + + &--logo { + margin: 0 0 34px; + } + + &--paragraph { + margin: 0; + max-width: 310px; + line-height: 145%; + + @include paragraph; + + @include minTitleSize { + width: 310px; + } + } + } + + &__title { + margin: 0 0 22px; + @include title3; + + &--resources { + margin: 0 0 34px; + } + } + + &__pages-demos { + display: flex; + justify-content: space-around; + align-items: start; + width: 310px; + + @include onTablet { + justify-content: space-around; + } + } + + &__networks { + display: flex; + flex-direction: column; + align-items: start; + max-width: 310px; + + @include onTablet { + width: 180px; + } + + @include onLaptop { + width: 210px; + } + } + + &__resources { + margin: 0 0 22px; + + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + gap: 26px; + width: 180px; + + &--link { + line-height: 100%; + text-decoration: none; + } + + &--image { + transition: transform 0.3s linear; + + &:hover { + transform: scale(1.5); + } + } + + &--facebook { + width: 14px; + height: 14px; + } + + &--instagram { + width: 14px; + height: 14px; + } + + &--twitter { + width: 16px; + height: 13px; + } + + &--dribbble { + width: 16px; + height: 16px; + } + + &--envato { + width: 14px; + height: 16px; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 00000000..bba64ffc --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,268 @@ +.header { + max-height: 960px; + background: linear-gradient( + 180deg, #fff 0%, #f2f9ff 100%); + + &__mobile-nav { + position: fixed; + padding:40px 0 0 105px; + height: 100%; + min-height: 260px; + width: 80vw; + background: #d9e5f0; + z-index: 7; + + top: 0; + left: 0; + + transform: translateX(-100%); + transition: transform 0.3s; + + &:target { + transform: translateX(0); + } + } + + &__content { + margin: 0 auto; + max-width: 1180px; + } + + &__top { + display: flex; + justify-content: space-between; + min-height: 80px; + + &--container { + display: flex; + align-items: center; + } + + &--mobile { + &-link { + margin: 0 0 0 20px; + display: flex; + flex-direction: column; + justify-content: center; + gap: 2px; + + @include menuTop { + display: none; + } + } + + &-item { + width: 20px; + height: 2px; + background: $c-title; + border-radius: 2px; + } + } + + &--close-link { + margin: 0 0 30px; + + position: relative; + display: flex; + flex-direction: column; + justify-content: start; + + &-1 { + position: absolute; + transform: rotate(45deg); + } + + &-2 { + transform: rotate(-45deg); + } + + } + } + + &__section { + padding: 117px 0 0; + max-height: 878px; + + @include minTitleSize { + padding: 156px 0 0; + } + + @include onMobile { + padding: 144px 0 0; + } + } + + &__title { + margin: 0 auto 27px; + + text-align: center; + + @include title1; + + @include onMobile { + @include title1Mobile; + } + + @include titleSize { + max-width: 560px; + } + + @include onTablet { + @include title1Tablet; + } + } + + &__paragraph { + margin: 0 auto 29px; + + text-align: center; + max-width: 307px; + line-height: 150%; + + @include paragraph; + + @include onMobile { + max-width: 560px; + } + } + + &__buttons { + margin: 0 0 32px; + + display: flex; + justify-content: center; + align-items: center; + gap: 22px; + } + + &__button { + &--blue { + width: 148px; + height: 50px; + line-height: 100%; + } + + &--white { + display: flex; + justify-content: center; + align-items: center; + width: 200px; + height: 50px; + line-height: 50px; + color: $c-paragraph; + background-color: $c-white; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + border-radius: 100px; + } + } + + &__image { + &--1 { + margin: 0 0 12px; + + line-height: 100%; + + @include onTablet { + margin-left: 5.3%; + } + + @include onLaptop { + margin-left: 132px; + } + } + + &--triangle { + width: 66px; + height: 71px; + } + + &--2 { + margin: 0 0 47px; + + text-align: right; + line-height: 100%; + + @include onTablet { + margin-right: 4.9%; + } + + @include onLaptop { + margin-right: 128px; + } + } + + &--ellipse2 { + width: 32px; + height: 32px; + } + + &--3 { + position: relative; + + margin: 0 0 6px; + + width: 56px; + height: 56px; + z-index: 1; + line-height: 100%; + + @include onTablet { + margin-left: 12%; + } + + @include onLaptop { + margin-left: 206px; + } + } + + &--image1 { + width: 38px; + height: 38px; + border-radius: 50%; + + @include titleSize { + width: 56px; + height: 56px; + } + } + + &--4 { + margin: 0 0 5px; + + text-align: right; + line-height: 100%; + + @include onTablet { + margin-right: 10.6%; + } + + @include onLaptop { + margin-right: 203px; + } + } + + &--rectangle-green { + width: 64px; + height: 64px; + } + + &--5 { + margin: 0; + + line-height: 100%; + + @include onTablet { + margin-left: 6.45%; + } + + @include onLaptop { + margin-left: 144px; + } + } + + &--ellipse1 { + width: 180px; + height: 180px; + } + } +} diff --git a/src/styles/blocks/info.scss b/src/styles/blocks/info.scss new file mode 100644 index 00000000..9463ec0f --- /dev/null +++ b/src/styles/blocks/info.scss @@ -0,0 +1,330 @@ +.info { + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 22%; + + @include onTablet { + flex-direction: row; + } + + &__images { + margin: 0 auto 20px; + + width: 280px; + height: 675px; + + @include titleSize { + margin: 0 auto 90px; + max-width: 590px; + } + + @include menuTop { + margin: 0 0 20px 116px ; + } + + @include onTablet { + margin: 0 auto; + } + + &--1 { + margin: 0 auto; + + position: relative; + display: inline-block; + + @include onLaptop { + margin: 0 0 0 207px; + } + + &-rectangle { + display: inline-block; + width: 214px; + height: 231px; + background-color: #999fe3; + border-radius: 4px; + + @include titleSize { + width: 266px; + height: 287px; + } + + @include onLaptop { + width: 329px; + height: 355px; + } + } + + &-women { + position: absolute; + left: -20px; + bottom: -42px; + width: 266px; + height: 495px; + overflow: hidden; + + @include titleSize { + bottom: 6px; + width: 330px; + } + + @include onLaptop { + width: 409px; + height: 612px; + } + } + + &-rectangle-green { + position: absolute; + right: -16px; + bottom: 56px; + width: 52px; + height: 52px; + z-index: -1; + + @include onLaptop { + right: -20px; + bottom: 69px; + width: 64px; + height: 64px; + } + } + } + + &--2 { + margin: 0 0 0 5px; + position: relative; + display: inline-block; + + @include onLaptop { + margin: -103px 0 0 21px; + } + + &-rectangle { + display: inline-block; + width: 170px; + height: 197px; + background-color: #fed892; + border-radius: 4px; + + @include titleSize { + width: 226px; + height: 262px; + } + + @include onLaptop { + width: 266px; + height: 308px; + } + } + + &-menafro { + position: absolute; + left: -5px; + bottom: 6px; + width: 300px; + height: 200px; + + @include titleSize { + width: 400px; + height: 266px; + } + + @include onLaptop { + width: 470px; + height: 313px; + } + } + + &-ellipse1 { + position: absolute; + left: -24px; + bottom: 43px; + width: 65px; + height: 65px; + z-index: -1; + + @include titleSize { + left: -32px; + bottom: 57px; + width: 87px; + height: 87px; + } + + @include onLaptop { + left: -38px; + bottom: 67px; + width: 102px; + height: 102px; + } + } + } + + &--3 { + margin: 0 0 0 70px; + position: relative; + display: inline-block; + + @include titleSize { + margin: -123px 0 0 180px; + } + + @include onLaptop { + margin: -130px 0 0 227px; + } + + &-rectangle { + display: inline-block; + width: 162px; + height: 162px; + background-color: #f47b9e; + border-radius: 4px; + + @include titleSize { + width: 170px; + height: 170px; + } + + @include onLaptop { + width: 200px; + height: 200px; + } + } + + &-men { + position: absolute; + left: 17px; + bottom: 6px; + width: 147px; + height: 207px; + border-radius: 0 0 4px; + + @include titleSize { + width: 155px; + height: 218px; + } + + @include onLaptop { + width: 182px; + height: 256px; + } + } + + &-triangle { + position: absolute; + right: -28px; + bottom: -24px; + width: 56px; + height: 57px; + transform: rotate(180deg); + z-index: -1; + + @include onLaptop { + right: -35px; + bottom: -30px; + width: 69px; + height: 71px; + } + } + } + } + + &__servises { + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 45px; + width: 290px; + + @include titleSize { + width: 405px; + } + + &--item { + width: 100%; + height: max-content; + border-bottom: 1px solid rgba(69, 88, 128, 0.2); + + &:last-child { + border-bottom: transparent; + } + + &-head { + position: relative; + display: flex; + } + + &-back { + width: 58px; + height: 58px; + } + + &-front { + &-1 { + position: absolute; + width: 29px; + height: 40px; + left: 17px; + top: 13px; + } + + &-2 { + position: absolute; + width: 10px; + height: 12.5px; + left: 16.5px; + top: 17.5px; + + &-down { + left: 31.5px; + top: 30px; + } + } + + &-3 { + position: absolute; + width: 25px; + height: 27px; + left: 17px; + top: 17px; + } + + &-4 { + position: absolute; + width: 10px; + height: 7.5px; + left: 31.5px; + top: 17.5px; + + &-down { + left: 16.5px; + top: 35px; + } + } + } + + &-title { + margin: 0 0 0 14px; + + @include title3; + + @include titleSize { + margin: 0 0 0 47px; + } + } + + &-paragraph { + margin: 0 0 40px 72px; + max-width: 275px; + line-height: 27px; + + @include paragraph; + + @include titleSize { + margin: 0 0 40px 105px; + width: 275px; + } + } + } + } +} diff --git a/src/styles/blocks/launch.scss b/src/styles/blocks/launch.scss new file mode 100644 index 00000000..e20ea8b6 --- /dev/null +++ b/src/styles/blocks/launch.scss @@ -0,0 +1,158 @@ +.launch { + background-color: #3751ff; + + &__content { + margin: 0 auto; + padding: 0 10px; + + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + max-width: 1180px; + height: 323px; + + @include menuTop { + padding: 0; + flex-direction: row; + } + + @include onLaptop { + justify-content: space-around; + } + + @include onDesign { + justify-content: space-between; + } + } + + &__title { + margin: 0; + max-width: 300px; + text-align: center; + + @include title1; + color: $c-white; + + @include menuTop { + text-align: left; + } + + @include onTablet { + max-width: 370px; + + @include title1Mobile; + color: $c-white; + } + } + + &__block-button { + max-width: 300px; + + &--container { + display: flex; + flex-direction: column; + gap: 19px; + } + + &--button { + position: relative; + display: flex; + justify-content: center; + + + @include menuTop { + justify-content: end; + } + } + + &--letter { + &-items { + position: absolute; + top: 37%; + left: 27%; + + @include menuTop { + left: 32%; + } + } + + &-item { + position: relative; + } + + &-up { + position: absolute; + width: 20px; + height: 8px; + top: 0; + right: 0; + } + + &-right { + position: absolute; + width: 8px; + height: 13px; + top: 0; + right: 0; + } + + &-down { + position: absolute; + width: 22px; + height: 8px; + top: 7px; + right: -1px; + } + + &-left { + position: absolute; + width: 11px; + height: 13px; + top: 0; + right: 12px; + } + + &-line { + position: absolute; + width: 8px; + height: 1px; + top: 7px; + right: 16px; + } + } + + &--white { + display: flex; + padding-right: 45px; + justify-content: end; + align-items: center; + width: 245px; + height: 55px; + font-family: "Halyard Display", Arial, Helvetica, sans-serif; + font-weight: 500; + font-size: 18px; + line-height: 110%; + color: $c-paragraph; + background-color: $c-white; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + border-radius: 100px; + } + + &--paragraph { + margin: 0; + + line-height: 125%; + text-align: center; + color: #dfe0eb; + + &-colortext { + color: #fed385; + } + + @include menuTop { + text-align: right; + } + } + } +} diff --git a/src/styles/blocks/link.scss b/src/styles/blocks/link.scss new file mode 100644 index 00000000..d5960b4c --- /dev/null +++ b/src/styles/blocks/link.scss @@ -0,0 +1,3 @@ +.link { + text-decoration: none; +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 00000000..545eda0e --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,33 @@ +.logo { + display: flex; + align-items: flex-end; + width: max-content; + height: 24px; + + &__text { + font-family: "Halyard Display", Arial, Helvetica, sans-serif; + font-weight: 600; + font-size: 31px; + line-height: 100%; + color: $c-title; + } + + &__points { + margin: 0 2.8px 3.8px 3px; + + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + width: 5px; + height: 15px; + } + + &__point { + display: flex; + justify-content: center; + align-items: center; + width: 5px; + height: 5px; + } +} diff --git a/src/styles/blocks/menu-footer.scss b/src/styles/blocks/menu-footer.scss new file mode 100644 index 00000000..7aef8fc1 --- /dev/null +++ b/src/styles/blocks/menu-footer.scss @@ -0,0 +1,35 @@ +.menu-footer { + margin: 0; + padding: 0; + + display: flex; + flex-direction: column; + list-style: none; + white-space: nowrap; + + &--down { + margin: 0 auto; + flex-direction: row; + justify-content: space-between; + max-width: 310px; + + @include minTitleSize { + width: 310px; + } + + @include menuTop { + margin: 0; + } + } + + &__link { + @include paragraph; + line-height: 225%; + + &--down { + font-size: 14px; + line-height: 27px; + color: $c-paragraph; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 00000000..6fd15182 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,52 @@ +.menu { + margin: 0 auto; + + display: none; + justify-content: space-between; + align-items: center; + gap: 3%; + padding: 0 8%; + line-height: 80px; + list-style: none; + white-space: nowrap; + + max-width: 521px; + + @include menuTop { + display: flex; + } + + @include onTablet { + padding: 0 82px; + gap: 40px; + + &__link { + padding-bottom: 5px; + color: $c-title; + border-bottom: 2px solid transparent; + + @include hover(border-color, $c-title); + } + } + + &-mobile { + margin: 0; + padding: 20px 0; + + display: flex; + flex-direction: column; + gap: 20px; + list-style: none; + white-space: nowrap; + + &__link { + padding-bottom: 5px; + border-bottom: 2px solid transparent; + text-transform: uppercase; + + @include title3; + + @include hover(border-color, $c-title); + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 00000000..87a553db --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,18 @@ +.page { + margin: 0; + background: $c-white; + + scroll-behavior: smooth; + + font-family: "Halyard Text", Arial, Helvetica, sans-serif; + font-weight: 400; + font-size: 16px; + + &__section { + margin: 0; + } + + * { + box-sizing: border-box; + } +} diff --git a/src/styles/blocks/person.scss b/src/styles/blocks/person.scss new file mode 100644 index 00000000..6b94c289 --- /dev/null +++ b/src/styles/blocks/person.scss @@ -0,0 +1,143 @@ +.person { + margin: -60.8% 0 0 73%; + // margin: -441px 0 0 525px; + + max-width: 129px; + width: 18%; + max-height: 447px; + // height: 447px; + + &__item { + position: relative; + + &--hair { + position: absolute; + max-width: 172px; + width: 133%; + max-height: 92px; + transform: translateX(19.8%); + // transform: translateX(34px); + z-index: 6; + } + + &--face { + position: absolute; + max-width: 46px; + width: 35.6%; + max-height: 81px; + transform: translate(82.6% ,11.11%); + // transform: translate(38px,9px); + z-index: 4; + } + + &--ear { + position: absolute; + max-width: 13px; + width: 10%; + max-height: 13px; + transform: translate(600%,377%); + // transform: translate(78px,49px); + z-index: 5; + } + + &--neck { + position: absolute; + max-width: 23px; + width: 17.8%; + max-height: 40px; + transform: translate(247.8%, 167.5%); + // transform: translate(57px, 67px); + z-index: 3; + } + + &--body { + position: absolute; + max-width: 123px; + width: 95.3%; + max-height: 207px; + transform: translate(7.3%, 45.4%); + // transform: translate(9px, 94px); + z-index: 2; + } + + &--shoulder-left { + position: absolute; + max-width: 66px; + width: 51.2%; + max-height: 77px; + transform: translate(125.8%, 132.5%); + // transform: translate(83px, 102px); + z-index: 3; + } + + &--hand-left { + position: absolute; + max-width: 111px; + width: 86%; + max-height: 95px; + transform: translate(47.7%, 162%); + // transform: translate(53px, 154px); + z-index: 4; + } + + &--brush { + position: absolute; + max-width: 33px; + width: 25.6%; + max-height: 33px; + transform: translate(106.1%, 560%); + // transform: translate(35px, 161px); + z-index: 5; + } + + &--book { + position: absolute; + max-width: 36px; + width: 27.9%; + max-height: 52px; + transform: translate(52.8%, 267.3%); + // transform: translate(19px, 139px); + z-index: 4; + } + + &--shoulder-right { + position: absolute; + max-width: 60px; + width: 46.5%; + max-height: 77px; + transform: translateY(139%); + // transform: translateY(107px); + z-index: 1; + } + + &--hand-right { + position: absolute; + max-width: 18px; + width: 14%; + max-height: 148px; + transform: translateY(111.5%); + // transform: translateY(169px); + z-index: 1; + } + + &--leg-right { + position: absolute; + max-width: 67px; + width: 51.8%; + max-height: 155px; + transform: translate(22%, 188.8%); + // transform: translate(14px, 290px); + z-index: 2; + } + + &--leg-left { + position: absolute; + max-width: 101px; + width: 77.8%; + max-height: 154px; + transform: translate(27.7%, 187.5%); + // transform: translate(28px, 290px); + z-index: 3; + } + } +} diff --git a/src/styles/blocks/site.scss b/src/styles/blocks/site.scss new file mode 100644 index 00000000..436fbe76 --- /dev/null +++ b/src/styles/blocks/site.scss @@ -0,0 +1,232 @@ +.site { + position: relative; + margin: -415px auto 0; + + max-width: 720px; + width: 85%; + height: 533px; + background-color: $c-white; + box-shadow: 0 4px 4px rgba(135, 146, 161, 0.08), + 0 14px 25px rgba(135, 146, 161, 0.06); + border-radius: 18px; + + @include onTablet { + width: 720px; + } + + &__top { + margin-bottom: 38px; + + &--field { + width: 100%; + height: 32px; + background-color: $c-sitegray; + border-radius: 18px 18px 0 0; + } + + &--points { + margin: -20px 0 0 16px; + display: flex; + gap: 6px; + } + + &--point { + width: 8px; + height: 8px; + background-color: $c-white; + border-radius: 50%; + } + } + + &__blocks { + margin: 0 263px 57px 7.6%; + max-width: 400px; + min-width: 165px; + + &--top { + margin-bottom: 71px; + display: flex; + gap: 9%; + align-items: center; + line-height: 100%; + + &-ellipse { + width: 48px; + height: 48px; + } + + &-2 { + width: 72.5%; + min-width: 100px; + } + + &-row1 { + margin-bottom: 15px; + width: 100%; + height: 12px; + background-color: $c-sitegray; + } + + &-row2 { + width: 69%; + height: 6px; + background-color: $c-sitegray; + } + } + + &--middle { + margin: 0 0 16px 6.5%; + display: flex; + flex-direction: column; + width: 43%; + min-width: 90px; + + &::after { + content: ""; + margin-left: 20px; + width: 0; + height: 0; + border-top: 0 solid transparent; + border-bottom: 8.5px solid transparent; + border-left: 19px solid $c-sitegray; + } + + &-content { + display: flex; + height: 65px; + background-color: $c-sitegray; + border-radius: 8px; + } + + &-row { + margin: 19px 28px 0; + width: 67%; + } + + &-row1 { + margin-bottom: 6px; + width: 100%; + height: 6px; + background-color: $c-white; + } + + &-row2 { + width: 74%; + height: 6px; + background-color: $c-white; + } + } + + &--ellipse { + line-height: 100%; + + &-left { + margin-bottom: 4px; + } + + &-right { + margin-bottom: 31px; + text-align: right; + } + } + + &--ellipse1 { + width: 24px; + height: 24px; + } + + &--down { + position: relative; + margin: 0 25px 16px 39%; + display: flex; + flex-direction: column; + width: 54.5%; + min-width: 95px; + + &::after { + content: ""; + position: absolute; + right: 20px; + bottom: -8.5px; + width: 0; + height: 0; + border-top: 0 solid transparent; + border-bottom: 8.5px solid transparent; + border-right: 19px solid $c-sitegray; + } + + &-content { + display: flex; + height: 65px; + background-color: $c-sitegray; + border-radius: 8px; + } + + &-row { + margin: 22px 31px 0; + width: 71%; + } + + &-row1 { + margin-bottom: 6px; + width: 100%; + height: 6px; + background-color: $c-white; + } + + &-row2 { + width: 35%; + height: 6px; + background-color: $c-white; + } + } + + &--search { + position: relative; + display: flex; + align-items: center; + width: 100%; + height: 28px; + background-color: $c-sitegray; + border-radius: 8px; + + &::before { + content: ""; + position: absolute; + right: 9px; + top: 8.5px; + width: 0; + height: 0; + border-top: 4.5px solid transparent; + border-bottom: 0 solid transparent; + border-left: 14px solid $c-white; + } + + &::after { + content: ""; + position: absolute; + right: 9px; + bottom: 8.5px; + width: 0; + height: 0; + border-top: 0 solid transparent; + border-bottom: 4.5px solid transparent; + border-left: 14px solid $c-white; + } + + &-imoticon { + margin-left: 9px; + display: inline-block; + width: 17px; + height: 17px; + } + + &-column { + margin-left: 9px; + width: 3px; + height: 17px; + background-color: $c-white; + } + } + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 00000000..ea7af2bf --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,99 @@ +.testimonials { + &__content { + margin: 139px auto 150px; + max-width: 1180px; + } + + &__title { + margin: 0 auto 56px; + + text-align: center; + + @include title1; + + @include titleSize { + line-height: 163%; + } + + @include onTablet { + max-width: 470px; + + @include title1Mobile; + } + } + + &__cards { + display: flex; + flex-direction: column; + justify-content: space-between; + row-gap: 30px; + + @include onTablet { + flex-direction: row; + } + } + + &__card { + margin: 0 auto; + + display: flex; + flex-direction: column; + + max-width: 370px; + border: 1px solid rgba(69, 88, 128, 0.2); + border-radius: 4px; + + @include onMobile { + width: 370px; + } + + @include onTablet { + width: 340px; + } + + @include onLaptop { + width: 370px; + } + + &--container { + margin: 38px auto 32px; + padding: 0 20px; + } + + &--paragraph { + margin: 0 auto 38px; + + max-width: 286px; + height: 210px; + line-height: 180%; + + @include paragraph; + } + + &--photo-container { + margin: 0 auto 23px; + text-align: center; + line-height: 100%; + } + + &--photo { + width: 64px; + height: 64px; + } + + &--title { + margin: 0 auto; + text-align: center; + @include title3; + } + + &--subtitle { + margin: 0 auto; + + text-align: center; + line-height: 180%; + + @include paragraph; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e4..3de1024a 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,22 @@ @import "utils"; @import "fonts"; -@import "typography"; -body { - background: $c-gray; -} +@import "./blocks/container.scss"; +@import "./blocks/logo.scss"; +@import "./blocks/link.scss"; +@import "./blocks/button.scss"; + +@import "./blocks/page.scss"; +@import "./blocks/menu.scss"; +@import "./blocks/contact-us.scss"; +@import "./blocks/header.scss"; +@import "./blocks/site.scss"; +@import "./blocks/person.scss"; +@import "./blocks/about.scss"; +@import "./blocks/info.scss"; +@import "./blocks/design.scss"; +@import "./blocks/browsers.scss"; +@import "./blocks/testimonials.scss"; +@import "./blocks/launch.scss"; +@import "./blocks/footer.scss"; +@import "./blocks/menu-footer.scss"; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index a1a5dd0e..00000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: "Roboto", sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780..02a6d865 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,82 @@ #{$_property}: $_toValue; } } + +@mixin minTitleSize { + @media (min-width: 335px) { + @content; + } +} + +@mixin onMobile { + @media (min-width: 482px) { + @content; + } +} + +@mixin titleSize { + @media (min-width: 570px) { + @content; + } +} + +@mixin menuTop { + @media (min-width: 773px) { + @content; + } +} + +@mixin onTablet { + @media (min-width: 1024px) { + @content; + } +} + +@mixin onLaptop { + @media (min-width: 1180px) { + @content; + } +} + +@mixin onDesign { + @media (min-width: 1600px) { + @content; + } +} + +@mixin title1 { + font-family: "Halyard Display", Arial, Helvetica, sans-serif; + font-weight: 500; + font-size: 36px; + line-height: 109%; + color: $c-title; +} + +@mixin title1Mobile { + font-family: "Halyard Display", Arial, Helvetica, sans-serif; + font-weight: 500; + font-size: 48px; + line-height: 122.5%; + color: $c-title; +} + +@mixin title1Tablet { + font-family: "Halyard Display", Arial, Helvetica, sans-serif; + font-weight: 500; + font-size: 56px; + line-height: 105%; + color: $c-title; +} + +@mixin title3 { + font-family: "Halyard Display", Arial, Helvetica, sans-serif; + font-weight: 500; + font-size: 22px; + line-height: 125%; + color: $c-title; +} + +@mixin paragraph { + font-size: 18px; + color: $c-paragraph; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ff..cf64ea09 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,7 @@ -$c-gray: #eee; +// $c-gray: #f0f2f6; +$c-title: #1e266d; +$c-paragraph: #455880; +$c-blue: #3751ff; +$c-sitetopgray: #bdc2d5; +$c-white: #fff; +$c-sitegray:#dfe0eb;