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/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.ttf b/src/fonts/Halyard/HalyardDisplayBlack.ttf similarity index 100% rename from src/fonts/Halyard/Halyard Display Black.ttf rename to src/fonts/Halyard/HalyardDisplayBlack.ttf 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/HalyardText Black.ttf b/src/fonts/Halyard/HalyardTextBlack.ttf similarity index 100% rename from src/fonts/Halyard/HalyardText Black.ttf rename to src/fonts/Halyard/HalyardTextBlack.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/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff new file mode 100644 index 00000000..6ff6afd8 Binary files /dev/null and b/src/fonts/Roboto-Regular-webfont.woff differ diff --git a/src/images/arrow.svg b/src/images/arrow.svg new file mode 100644 index 00000000..7b826796 --- /dev/null +++ b/src/images/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/cross.svg b/src/images/cross.svg new file mode 100644 index 00000000..08f1f27c --- /dev/null +++ b/src/images/cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/design/browser_image.png b/src/images/design/browser_image.png new file mode 100644 index 00000000..883b8081 Binary files /dev/null and b/src/images/design/browser_image.png differ diff --git a/src/images/footer/icon-dribbble.svg b/src/images/footer/icon-dribbble.svg new file mode 100644 index 00000000..cabc51f5 --- /dev/null +++ b/src/images/footer/icon-dribbble.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/footer/icon-envato.svg b/src/images/footer/icon-envato.svg new file mode 100644 index 00000000..06701f65 --- /dev/null +++ b/src/images/footer/icon-envato.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/icon-facebook.svg b/src/images/footer/icon-facebook.svg new file mode 100644 index 00000000..69a4d990 --- /dev/null +++ b/src/images/footer/icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/icon-instagram.svg b/src/images/footer/icon-instagram.svg new file mode 100644 index 00000000..727c9605 --- /dev/null +++ b/src/images/footer/icon-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/icon-twitter.svg b/src/images/footer/icon-twitter.svg new file mode 100644 index 00000000..fdd57973 --- /dev/null +++ b/src/images/footer/icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo/dia-logo.svg b/src/images/logo/dia-logo.svg new file mode 100644 index 00000000..a8193329 --- /dev/null +++ b/src/images/logo/dia-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo/logo.svg b/src/images/logo/logo.svg new file mode 100644 index 00000000..918ade33 --- /dev/null +++ b/src/images/logo/logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/main/Ellipse.svg b/src/images/main/Ellipse.svg new file mode 100644 index 00000000..8eddc5b5 --- /dev/null +++ b/src/images/main/Ellipse.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/main/Group 5.svg b/src/images/main/Group 5.svg new file mode 100644 index 00000000..437bbae0 --- /dev/null +++ b/src/images/main/Group 5.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/main/chat1.svg b/src/images/main/chat1.svg new file mode 100644 index 00000000..cfb0c598 --- /dev/null +++ b/src/images/main/chat1.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/main/chat2.svg b/src/images/main/chat2.svg new file mode 100644 index 00000000..2f83e1cf --- /dev/null +++ b/src/images/main/chat2.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/main/person.svg b/src/images/main/person.svg new file mode 100644 index 00000000..0d911e06 --- /dev/null +++ b/src/images/main/person.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/images/main/portrait.svg b/src/images/main/portrait.svg new file mode 100644 index 00000000..effc862e --- /dev/null +++ b/src/images/main/portrait.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/main/smiley.svg b/src/images/main/smiley.svg new file mode 100644 index 00000000..a6109764 --- /dev/null +++ b/src/images/main/smiley.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/main/triangle.svg b/src/images/main/triangle.svg new file mode 100644 index 00000000..221da4a1 --- /dev/null +++ b/src/images/main/triangle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/menu.svg b/src/images/menu.svg new file mode 100644 index 00000000..5d6b5a0b --- /dev/null +++ b/src/images/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/menu_hover.svg b/src/images/menu_hover.svg new file mode 100644 index 00000000..39263b75 --- /dev/null +++ b/src/images/menu_hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/others/image5.png b/src/images/others/image5.png new file mode 100644 index 00000000..438911c7 Binary files /dev/null and b/src/images/others/image5.png differ diff --git a/src/images/others/image6.png b/src/images/others/image6.png new file mode 100644 index 00000000..c66fd62e Binary files /dev/null and b/src/images/others/image6.png differ diff --git a/src/images/others/image7.png b/src/images/others/image7.png new file mode 100644 index 00000000..0919b276 Binary files /dev/null and b/src/images/others/image7.png differ diff --git a/src/images/others/letter.png b/src/images/others/letter.png new file mode 100644 index 00000000..b625b226 Binary files /dev/null and b/src/images/others/letter.png differ diff --git a/src/images/simplicity/browser1.png b/src/images/simplicity/browser1.png new file mode 100644 index 00000000..b29765b9 Binary files /dev/null and b/src/images/simplicity/browser1.png differ diff --git a/src/images/simplicity/browser10.png b/src/images/simplicity/browser10.png new file mode 100644 index 00000000..017b30fa Binary files /dev/null and b/src/images/simplicity/browser10.png differ diff --git a/src/images/simplicity/browser11.png b/src/images/simplicity/browser11.png new file mode 100644 index 00000000..5a5a2d09 Binary files /dev/null and b/src/images/simplicity/browser11.png differ diff --git a/src/images/simplicity/browser2.png b/src/images/simplicity/browser2.png new file mode 100644 index 00000000..b862e94b Binary files /dev/null and b/src/images/simplicity/browser2.png differ diff --git a/src/images/simplicity/browser3.png b/src/images/simplicity/browser3.png new file mode 100644 index 00000000..3aedfd8a Binary files /dev/null and b/src/images/simplicity/browser3.png differ diff --git a/src/images/simplicity/browser4.png b/src/images/simplicity/browser4.png new file mode 100644 index 00000000..c251c89c Binary files /dev/null and b/src/images/simplicity/browser4.png differ diff --git a/src/images/simplicity/browser5.png b/src/images/simplicity/browser5.png new file mode 100644 index 00000000..d058bdc1 Binary files /dev/null and b/src/images/simplicity/browser5.png differ diff --git a/src/images/simplicity/browser5q.png b/src/images/simplicity/browser5q.png new file mode 100644 index 00000000..16e8f4a6 Binary files /dev/null and b/src/images/simplicity/browser5q.png differ diff --git a/src/images/simplicity/browser6.png b/src/images/simplicity/browser6.png new file mode 100644 index 00000000..ffde4fc9 Binary files /dev/null and b/src/images/simplicity/browser6.png differ diff --git a/src/images/simplicity/browser7.png b/src/images/simplicity/browser7.png new file mode 100644 index 00000000..b4a1c99c Binary files /dev/null and b/src/images/simplicity/browser7.png differ diff --git a/src/images/simplicity/browser8.png b/src/images/simplicity/browser8.png new file mode 100644 index 00000000..20ed0dbf Binary files /dev/null and b/src/images/simplicity/browser8.png differ diff --git a/src/images/simplicity/browser9.png b/src/images/simplicity/browser9.png new file mode 100644 index 00000000..b525d728 Binary files /dev/null and b/src/images/simplicity/browser9.png differ diff --git a/src/images/trusted/logo-1.svg b/src/images/trusted/logo-1.svg new file mode 100644 index 00000000..6c5dba72 --- /dev/null +++ b/src/images/trusted/logo-1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/trusted/logo-2.svg b/src/images/trusted/logo-2.svg new file mode 100644 index 00000000..21f0d83f --- /dev/null +++ b/src/images/trusted/logo-2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/trusted/logo-3.svg b/src/images/trusted/logo-3.svg new file mode 100644 index 00000000..cdb18fb7 --- /dev/null +++ b/src/images/trusted/logo-3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/trusted/logo-4.jpg b/src/images/trusted/logo-4.jpg new file mode 100644 index 00000000..0f822c8a Binary files /dev/null and b/src/images/trusted/logo-4.jpg differ diff --git a/src/images/trusted/logo-4.png b/src/images/trusted/logo-4.png new file mode 100644 index 00000000..720d39c8 Binary files /dev/null and b/src/images/trusted/logo-4.png differ diff --git a/src/images/trusted/logo-4.svg b/src/images/trusted/logo-4.svg new file mode 100644 index 00000000..cc192921 --- /dev/null +++ b/src/images/trusted/logo-4.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/trusted/logo-41.svg b/src/images/trusted/logo-41.svg new file mode 100644 index 00000000..0243a195 --- /dev/null +++ b/src/images/trusted/logo-41.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/trusted/logo-5.svg b/src/images/trusted/logo-5.svg new file mode 100644 index 00000000..9dced6c4 --- /dev/null +++ b/src/images/trusted/logo-5.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/trusted/logo-6.svg b/src/images/trusted/logo-6.svg new file mode 100644 index 00000000..c8e73ded --- /dev/null +++ b/src/images/trusted/logo-6.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/trusted/logo-7.svg b/src/images/trusted/logo-7.svg new file mode 100644 index 00000000..3f25070b --- /dev/null +++ b/src/images/trusted/logo-7.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/whatever/Icon1.png b/src/images/whatever/Icon1.png new file mode 100644 index 00000000..acb4fd5e Binary files /dev/null and b/src/images/whatever/Icon1.png differ diff --git a/src/images/whatever/Icon2.png b/src/images/whatever/Icon2.png new file mode 100644 index 00000000..b2261d10 Binary files /dev/null and b/src/images/whatever/Icon2.png differ diff --git a/src/images/whatever/Icon3.png b/src/images/whatever/Icon3.png new file mode 100644 index 00000000..432e9ed9 Binary files /dev/null and b/src/images/whatever/Icon3.png differ diff --git a/src/images/whatever/graphic.png b/src/images/whatever/graphic.png new file mode 100644 index 00000000..204f9db1 Binary files /dev/null and b/src/images/whatever/graphic.png differ diff --git a/src/images/whatever/image2.png b/src/images/whatever/image2.png new file mode 100644 index 00000000..80f32f0b Binary files /dev/null and b/src/images/whatever/image2.png differ diff --git a/src/images/whatever/image3.png b/src/images/whatever/image3.png new file mode 100644 index 00000000..0f9a2c6e Binary files /dev/null and b/src/images/whatever/image3.png differ diff --git a/src/images/whatever/image4.png b/src/images/whatever/image4.png new file mode 100644 index 00000000..8a1370a3 Binary files /dev/null and b/src/images/whatever/image4.png differ diff --git a/src/index.html b/src/index.html index 5d357bd6..cd9e9c30 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,432 @@ - + - Title + Digits landing page - -

Hello Mate Academy

+ + +
+
+
digits
+
:
+ + + + + + + + +
+
+
+
+
+

+ Good design meets +
+ great user experience +

+
+ For everyone, from beginers to expert +
+ +
+
+
+
+
+
+ Trusted by forward-thinking software teams around the world +
+ +
+
+
+
+
+ Whatever work you do, +
+ we're able to help +
+
+
+
+
+
+
+
+
+ card icon 1 +
+
Design and Assets
+
+ Make your brand stand out with pixel-perfect design + crafted to perfection. +
+
+
+ +
+ card icon 1 +
+
Easy Content
+
+ Import your demos or build pages visually. Bonus: All + images and illustrations included! +
+
+
+ +
+ card icon 1 +
+
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! +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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? +
+
+ +
+
+ letter +
Get in touch now
+
+
+
+ +
+ Or, take a peek inside our + design studio +
+
+
+
+
+
+ +
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 2067b3fc..00000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: "Roboto"; - src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/design.scss b/src/styles/design.scss new file mode 100644 index 00000000..145a2320 --- /dev/null +++ b/src/styles/design.scss @@ -0,0 +1,282 @@ +.design { + background: linear-gradient(180deg, + rgba(242, 249, 255, 0.12) 0%, + #f2f9ff 100%); + padding-top: 146px; + @include Mobile { + padding-top: 20px; + height: 570px; + } + @include SmallPhone { + height: 530px; + } + @include Tablet { + padding-top: 28px; + height: 580px; + } + @include Notebook { + height: 870px; + } + @include TheDesign { + height: 1100px; + } + @include FullHD { + height: 1100px; + } + @include LargeScreens { + height: 1100px; + } +} + +.desing__image_container { + content: ""; + background-image: url(/images/design/browser_image.png); + background-size: cover; + width: 260px; + height: 200px; + margin: 0 auto; + @include Mobile { + margin-top: 20px; + width: 260px; + height: 200px; + } + @include Tablet { + width: 1024px; + height: 400px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + margin: 20px auto; + } + + @include Notebook { + width: 1280px; + height: 600px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + margin: 40px auto; + } + @include TheDesign { + width: 1600px; + height: 800px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + margin: 68px auto; + } + @include FullHD { + width: 1600px; + height: 800px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + margin: 80px auto; + } + @include LargeScreens { + width: 1600px; + height: 800px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + margin: 100px auto; + } +} + +.design__container { + display: flex; + flex-direction: column; + margin: 0 auto; +} + +.design__title { + font-family: Halyard Display, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 56px; + line-height: 105%; + /* or 59px */ + + text-align: center; + + color: $darkBlue; + margin: 0; + @include Mobile { + width: 320px; + } +} + +.design__phrase { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 150%; + /* identical to box height, or 27px */ + + text-align: center; + + color: $lightBlue; + + padding-top: 27px; +} + +.design__browser { + display: flex; + flex-direction: column; + margin: 0 auto; + position: relative; + + &_person { + position: absolute; + width: 533px; + height: 533px; + left: 340px; + top: 15px; + } + + &_upper_block { + position: absolute; + width: 374px; + height: 48px; + margin-top: 38px; + margin-left: 57px; + } + + &_chat1 { + position: absolute; + width: 172px; + height: 73px; + margin-top: 157px; + margin-left: 83px; + + background: #dfe0eb; + } + + &_chat2 { + position: absolute; + width: 172px; + height: 73px; + margin-top: 274px; + margin-left: 213px; + + background: #dfe0eb; + } + + &_smiley { + position: absolute; + width: 399px; + height: 28px; + left: 57px; + top: 418px; + + background: #dfe0eb; + border-radius: 8px; + } + + &_portrait { + position: absolute; + width: 56px; + height: 60px; + left: -40px; + top: 121px; + background-color: black; + } + + &_ellipse { + position: absolute; + width: 179px; + height: 179px; + left: -95px; + top: 261px; + } +} + +.browser__top { + display: flex; + align-items: center; + width: 720px; + height: 32px; + + background: #bdc2d5; + border-radius: 18px 18px 0 0; +} + +.circles { + display: flex; + padding-left: 17px; +} + +.browser__top-circle { + width: 8px; + height: 8px; + + background: $white; + border-radius: 5px; + margin-right: 6px; +} + +.browser__body { + width: 719px; + height: 500px; + left: 457px; + top: 545px; + + background: $white; + box-shadow: 0 4px 4px rgba(135, 146, 161, 0.08); + border-radius: 18px; +} + +.design__links { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + padding-top: 29px; + margin: 0 auto; +} + +.design__button { + width: 199px; + @include Mobile { + width: 120px; + } + @include Tablet { + width: 199px; + } + @include TheDesign { + width: 148px; + } +} + +.design__link { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 16px; + width: 199px; + height: 40px; + /* identical to box height, or 312% */ + + text-align: center; + + color: $lightBlue; + + background: $white; + box-shadow: 0 2px 2px rgba(0,0,0,0.1); + border-radius: 100px; + display: flex; + align-items: center; + justify-content: center; + margin-left: 40px; + + @include Mobile { + width: 120px; + padding-left: 0; + font-size: 12px; + } + &:hover { + transform: scale(1.1); + box-shadow: 5px 9px 18px #2060f6; + } +} diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss new file mode 100644 index 00000000..0dfaaabf --- /dev/null +++ b/src/styles/fonts.scss @@ -0,0 +1,15 @@ +@font-face { + font-family: "Halyard Display"; + src: url("/fonts/Halyard/HalyardDisplayMedium.ttf"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Halyard Text"; + src: url("/fonts/Halyard/HalyardTextRegular.ttf"); + font-weight: normal; + font-style: normal; + font-display: swap; +} diff --git a/src/styles/footer.scss b/src/styles/footer.scss new file mode 100644 index 00000000..67d3bfbc --- /dev/null +++ b/src/styles/footer.scss @@ -0,0 +1,376 @@ +.footer { + display: flex; + @include Mobile { + margin-top: 20px; + display: flex; + flex-direction: column; + } + @include SmallPhone { + margin-top: 20px; + display: flex; + flex-direction: column; + } + @include Tablet { + margin-top: 48px; + display: flex; + flex-direction: column; + } + @include Notebook { + display: flex; + flex-direction: column; + } + + @include TheDesign { + display: flex; + flex-direction: column; + } + @include FullHD { + display: flex; + flex-direction: column; + } + @include LargeScreens { + display: flex; + flex-direction: column; + } +} + +.footer__copyright { + display: flex; + margin: 0 auto; + @include Mobile { + margin: 0; + display: block; + padding: 0 20px; + } + @include SmallPhone { + margin: 0; + display: block; + padding: 30px 80px; + } + + @include Tablet { + margin: 0; + justify-content: space-between; + padding: 0 20px; + } + + @include Notebook { + margin: 0; + padding: 0 40px; + justify-content: space-between; + } + + @include TheDesign { + margin: 0; + padding: 0 220px; + justify-content: space-between; + } + + @include FullHD { + margin: 0; + padding: 0 400px; + justify-content: space-between; + } + + @include LargeScreens { + margin: 0; + padding: 0 720px; + justify-content: space-between; + } +} + +.footer__container { + display: flex; + flex-direction: row; + margin: 0 auto; + padding-top: 126px; + + @include Mobile { + display: flex; + flex-direction: column; + margin: 0; + padding: 0 20px; + } + @include SmallPhone { + display: flex; + flex-direction: column; + margin: 0 auto; + padding-top: 60px; + height: 940px; + } + @include Tablet { + padding: 0 20px; + } + @include Notebook { + padding: 120px 20px; + justify-content: space-between; + } + @include TheDesign { + margin: 0 auto; + } +} + +.footer__left_text { + box-sizing: border-box; + padding-right: 184px; + @include Mobile { + width: 260px; + } + @include Tablet { + padding-right: 30px; + } + @include Notebook { + padding-right: 240px; + } + @include TheDesign { + padding-right: 205px; + } +} + +.footer__title { + display: flex; +} + +.footer__info { + margin-top: 34px; + width: 290px; + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 145%; + + color: $lightBlue; + @include Mobile { + width: 260px; + } +} + +.footer__pages { + @include Mobile { + padding-top: 20px; + } + @include SmallPhone { + padding-top: 24px; + } +} + +.footer__pages_title { + font-family: Halyard Display, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 22px; + line-height: 125%; + + color: $darkBlue; + width: 212px; + height: 28px; +} + +.nav__footer { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 225%; + + color: $lightBlue; + margin-top: 22px; +} + +.nav__list_footer { + list-style: none; +} + +.footer__resources { + @include Mobile { + padding-top: 30px; + } +} + +.footer__resources_title { + font-family: Halyard Display, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 22px; + line-height: 125%; + + color: $darkBlue; +} + +.socials__container { + display: flex; +} + +.socials__image { + width: 16px; + height: 16px; + padding-right: 26px; + background: no-repeat; + margin-top: 32px; + cursor: pointer; + transition: all 0.5s; + &:hover { + transform: scale(1.1); + } +} + +.facebook { + background-image: url(/images/footer/icon-facebook.svg); + width: 16px; + height: 16px; + &:hover { + filter: invert(80%) sepia(60%) saturate(3207%) hue-rotate(130deg) + brightness(95%) contrast(80%); + } +} + +.instagram { + background-image: url(/images/footer/icon-instagram.svg); + &:hover { + filter: invert(80%) sepia(60%) saturate(3207%) hue-rotate(130deg) + brightness(95%) contrast(80%); + } +} + +.twitter { + background-image: url(/images/footer/icon-twitter.svg); + &:hover { + filter: invert(80%) sepia(60%) saturate(3207%) hue-rotate(130deg) + brightness(95%) contrast(80%); + } +} + +.dribbble { + background-image: url(/images/footer/icon-dribbble.svg); + &:hover { + filter: invert(80%) sepia(60%) saturate(3207%) hue-rotate(130deg) + brightness(95%) contrast(80%); + } +} + +.envato { + background-image: url(/images/footer/icon-envato.svg); + &:hover { + filter: invert(80%) sepia(60%) saturate(3207%) hue-rotate(130deg) + brightness(95%) contrast(80%); + } +} + +.footer__resources_links { + width: 217px; + height: 161px; + @include Mobile { + margin: 0; + height: 80px; + } + &:last-child { + margin-top: 0; + } +} + +.footer__resources_link { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 225%; + + color: $lightBlue; + margin-top: 28px; + @include Mobile { + margin-top: 10px; + } +} + +.footer__resources_link2 { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 225%; + + color: $lightBlue; +} + +.copyright__container { + @include Mobile { + padding: 10px 20px; + display: flex; + flex-direction: column; + } + @include Tablet { + padding: 0 20px; + margin: 0 auto; + display: flex; + } + + @include Notebook { + flex-direction: row; + margin: 0 auto; + display: flex; + } + @include TheDesign { + flex-direction: row; + margin: 0 auto; + display: flex; + } + @include FullHD { + flex-direction: row; + margin: 0 auto; + display: flex; + } + @include LargeScreens { + flex-direction: row; + margin: 0 auto; + display: flex; + } +} + +.copyright__title { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 27px; + + color: rgba(69, 88, 128, 0.5); +} + +.copyright__links { + display: flex; + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 27px; + + text-align: right; + + color: $lightBlue; + right: 0; + @include Mobile { + position: relative; + display: flex; + flex-direction: column; + text-align: left; + } + @include Tablet { + padding-right: 20px; + } + + @include Notebook { + position: relative; + } +} + +.copyright__link { + margin-left: 30px; + @include Mobile { + margin-left: 0; + } + @include SmallPhone { + margin-left: 0; + padding-right: 20px; + } +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 00000000..98d99a82 --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,246 @@ +.header__container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin: 0 auto; + padding: 21px; + + @include Tablet { + margin: 0 auto; + } +} + +.menu-btn { + cursor: pointer; + position: relative; + display: none; + margin: auto; + height: 15px; + width: 20px; + z-index: 0; + padding: 10px; + border-radius: 10px; + box-sizing: content-box; + @include Mobile { + display: block; + } + @include SmallPhone { + display: block; + } + @include Tablet { + display: block; + } +} + +.menu-btn .menu { + display: block; + width: 20px; + height: 2px; + border-radius: 2px; + background: #111; +} + +.menu-btn .menu:nth-child(2) { + margin-top: 4px; + opacity: 1; +} + +.menu-btn .menu:nth-child(3) { + margin-top: 4px; +} + +.header__phone { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 16px; + + text-align: right; + + color: $darkBlue; + + text-decoration: none; + transition: all 0.5s; + border-radius: 10px; + &:hover { + transform: scale(1.1); + } + @include Mobile { + display: none; + } + @include SmallPhone { + display: none; + } + @include Tablet { + display: none; + } +} + +.header__contact-us { + display: flex; + align-items: center; + line-height: 18px; + padding-left: 202px; + @include Mobile { + padding-left: 20px; + } + @include SmallPhone { + padding-left: 10px; + } + @include Tablet { + justify-content: right; + padding: 0; + } +} + +.button { + width: 113px; + height: 40px; + background: #3751ff; + border-radius: 25px; + border: #3751ff; + + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 40px; + + text-align: center; + + color: $white; + + margin-left: 34px; + text-decoration: none; + + transition: all 0.3s; + @include SmallPhone { + margin-left: 0; + } + &:hover { + transform: scale(1.1); + box-shadow: 1px 3px 5px #2060f6; + } + + @include Mobile { + margin-left: 10px; + } + @include Tablet { + margin-left: 10px; + } +} + +.contact-us__button { + @include Tablet { + margin-left: 80px; + } +} + +.nav { + @include Mobile { + padding-left: 0; + } +} + +.nav__list { + display: flex; + gap: 30px; + list-style: none; + @include Mobile { + display: none; + } + @include SmallPhone { + display: none; + } + @include Tablet { + display: none; + } +} + +.list__item { + transition: all 0.5s; + border-radius: 8px; + &:hover { + transform: scale(1.15); + } +} + +.header__image { + font-family: Halyard Display, sans-serif; + font-style: normal; + font-weight: 600; + font-size: 30.96px; + line-height: 100%; + + color: $darkBlue; +} + +.header__image_dots { + color: #ff2e6a; + font-size: 30px; + line-height: 100%; + @include Mobile { + margin-right: 30px; + } + @include Notebook { + margin-right: 180px; + } + @include Tablet { + margin-right: 50px; + } + @include TheDesign { + margin-right: 200px; + } + @include FullHD { + margin-right: 90px; + } + @include LargeScreens { + margin-right: 125px; + } +} + +.header__link { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 16px; + + color: $darkBlue; +} + +.menu__link--arrow::after { + content: url(/images/arrow.svg); +} + +.header__link, +.link { + text-decoration: none; +} + +.icon { + display: none; + + width: 25px; + height: 25px; + background-repeat: no-repeat; + background-size: contain; + + @include TheDesign { + display: none; + } + + @include SmallPhone { + display: block; + } + + @include Mobile { + display: block; + } + @include Tablet { + display: block; + } + .menu--top { + margin-top: 10px; + } +} diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 00000000..902e6e2d --- /dev/null +++ b/src/styles/main.css @@ -0,0 +1,2591 @@ +h1 { + font-family: "Roboto", sans-serif; + font-weight: 400; +} + +@font-face { + font-family: "Halyard Display"; + src: url("/fonts/Halyard/HalyardDisplayMedium.ttf"); + font-weight: 500; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Halyard Text"; + src: url("/fonts/Halyard/HalyardTextRegular.ttf"); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +.header__container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin: 0 auto; + padding: 21px; +} +@media (min-width: 1024px) and (max-width: 1279px) { + .header__container { + margin: 0 auto; + } +} + +.menu-btn { + cursor: pointer; + position: relative; + display: none; + margin: auto; + height: 15px; + width: 20px; + z-index: 0; + padding: 10px; + border-radius: 10px; + box-sizing: content-box; +} +@media (min-width: 320px) and (max-width: 639px) { + .menu-btn { + display: block; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .menu-btn { + display: block; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .menu-btn { + display: block; + } +} + +.menu-btn .menu { + display: block; + width: 20px; + height: 2px; + border-radius: 2px; + background: #111; +} + +.menu-btn .menu:nth-child(2) { + margin-top: 4px; + opacity: 1; +} + +.menu-btn .menu:nth-child(3) { + margin-top: 4px; +} + +.header__phone { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 16px; + text-align: right; + color: #1e266d; + text-decoration: none; + transition: all 0.5s; + border-radius: 10px; +} + +.header__phone:hover { + transform: scale(1.1); +} +@media (min-width: 320px) and (max-width: 639px) { + .header__phone { + display: none; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .header__phone { + display: none; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .header__phone { + display: none; + } +} + +.header__contact-us { + display: flex; + align-items: center; + line-height: 18px; + padding-left: 202px; +} +@media (min-width: 320px) and (max-width: 639px) { + .header__contact-us { + padding-left: 20px; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .header__contact-us { + padding-left: 10px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .header__contact-us { + justify-content: right; + padding: 0; + } +} + +.button { + width: 113px; + height: 40px; + background: #3751ff; + border-radius: 25px; + border: #3751ff; + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 40px; + text-align: center; + color: #fff; + margin-left: 34px; + text-decoration: none; + transition: all 0.3s; +} +@media (min-width: 640px) and (max-width: 1023px) { + .button { + margin-left: 0; + } +} + +.button:hover { + transform: scale(1.1); + box-shadow: 1px 3px 5px #2060f6; +} +@media (min-width: 320px) and (max-width: 639px) { + .button { + margin-left: 10px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .button { + margin-left: 10px; + } +} + +@media (min-width: 1024px) and (max-width: 1279px) { + .contact-us__button { + margin-left: 80px; + } +} + +@media (min-width: 320px) and (max-width: 639px) { + .nav { + padding-left: 0; + } +} + +.nav__list { + display: flex; + gap: 30px; + list-style: none; +} +@media (min-width: 320px) and (max-width: 639px) { + .nav__list { + display: none; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .nav__list { + display: none; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .nav__list { + display: none; + } +} + +.list__item { + transition: all 0.5s; + border-radius: 8px; +} + +.list__item:hover { + transform: scale(1.15); +} + +.header__image { + font-family: Halyard Display, sans-serif; + font-style: normal; + font-weight: 600; + font-size: 30.96px; + line-height: 100%; + color: #1e266d; +} + +.header__image_dots { + color: #ff2e6a; + font-size: 30px; + line-height: 100%; +} +@media (min-width: 320px) and (max-width: 639px) { + .header__image_dots { + margin-right: 30px; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .header__image_dots { + margin-right: 180px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .header__image_dots { + margin-right: 50px; + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .header__image_dots { + margin-right: 200px; + } +} +@media (min-width: 1920px) and (max-width: 2559px) { + .header__image_dots { + margin-right: 90px; + } +} +@media (min-width: 2560px) { + .header__image_dots { + margin-right: 125px; + } +} + +.header__link { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 16px; + color: #1e266d; +} + +.menu__link--arrow::after { + content: url(/images/arrow.svg); +} + +.header__link, +.link { + text-decoration: none; +} + +.icon { + display: none; + width: 25px; + height: 25px; + background-repeat: no-repeat; + background-size: contain; +} +@media (min-width: 1600px) and (max-width: 1919px) { + .icon { + display: none; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .icon { + display: block; + } +} +@media (min-width: 320px) and (max-width: 639px) { + .icon { + display: block; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .icon { + display: block; + } +} + +.icon .menu--top { + margin-top: 10px; +} + +.design { + background: linear-gradient(180deg, rgba(242, 249, 255, 0.12) + 0%, + #f2f9ff + 100%); + padding-top: 146px; +} +@media (min-width: 320px) and (max-width: 639px) { + .design { + padding-top: 20px; + height: 570px; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .design { + height: 530px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .design { + padding-top: 28px; + height: 580px; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .design { + height: 870px; + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .design { + height: 1100px; + } +} +@media (min-width: 1920px) and (max-width: 2559px) { + .design { + height: 1100px; + } +} +@media (min-width: 2560px) { + .design { + height: 1100px; + } +} + +.desing__image_container { + content: ""; + background-image: url(/images/design/browser_image.png); + background-size: cover; + width: 260px; + height: 200px; + margin: 0 auto; +} +@media (min-width: 320px) and (max-width: 639px) { + .desing__image_container { + margin-top: 20px; + width: 260px; + height: 200px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .desing__image_container { + width: 1024px; + height: 400px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + margin: 20px auto; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .desing__image_container { + width: 1280px; + height: 600px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + margin: 40px auto; + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .desing__image_container { + width: 1600px; + height: 800px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + margin: 68px auto; + } +} +@media (min-width: 1920px) and (max-width: 2559px) { + .desing__image_container { + width: 1600px; + height: 800px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + margin: 80px auto; + } +} +@media (min-width: 2560px) { + .desing__image_container { + width: 1600px; + height: 800px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + margin: 100px auto; + } +} + +.design__container { + display: flex; + flex-direction: column; + margin: 0 auto; +} + +.design__title { + font-family: Halyard Display, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 56px; + line-height: 105%; + /* or 59px */ + text-align: center; + color: #1e266d; + margin: 0; +} +@media (min-width: 320px) and (max-width: 639px) { + .design__title { + width: 320px; + } +} + +.design__phrase { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 150%; + /* identical to box height, or 27px */ + text-align: center; + color: #455880; + padding-top: 27px; +} + +.design__browser { + display: flex; + flex-direction: column; + margin: 0 auto; + position: relative; +} + +.design__browser_person { + position: absolute; + width: 533px; + height: 533px; + left: 340px; + top: 15px; +} + +.design__browser_upper_block { + position: absolute; + width: 374px; + height: 48px; + margin-top: 38px; + margin-left: 57px; +} + +.design__browser_chat1 { + position: absolute; + width: 172px; + height: 73px; + margin-top: 157px; + margin-left: 83px; + background: #dfe0eb; +} + +.design__browser_chat2 { + position: absolute; + width: 172px; + height: 73px; + margin-top: 274px; + margin-left: 213px; + background: #dfe0eb; +} + +.design__browser_smiley { + position: absolute; + width: 399px; + height: 28px; + left: 57px; + top: 418px; + background: #dfe0eb; + border-radius: 8px; +} + +.design__browser_portrait { + position: absolute; + width: 56px; + height: 60px; + left: -40px; + top: 121px; + background-color: black; +} + +.design__browser_ellipse { + position: absolute; + width: 179px; + height: 179px; + left: -95px; + top: 261px; +} + +.browser__top { + display: flex; + align-items: center; + width: 720px; + height: 32px; + background: #bdc2d5; + border-radius: 18px 18px 0 0; +} + +.circles { + display: flex; + padding-left: 17px; +} + +.browser__top-circle { + width: 8px; + height: 8px; + background: #fff; + border-radius: 5px; + margin-right: 6px; +} + +.browser__body { + width: 719px; + height: 500px; + left: 457px; + top: 545px; + background: #fff; + box-shadow: 0 4px 4px rgba(135, 146, 161, 0.08); + border-radius: 18px; +} + +.design__links { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + padding-top: 29px; + margin: 0 auto; +} + +.design__button { + width: 199px; +} +@media (min-width: 320px) and (max-width: 639px) { + .design__button { + width: 120px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .design__button { + width: 199px; + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .design__button { + width: 148px; + } +} + +.design__link { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 16px; + width: 199px; + height: 40px; + /* identical to box height, or 312% */ + text-align: center; + color: #455880; + background: #fff; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); + border-radius: 100px; + display: flex; + align-items: center; + justify-content: center; + margin-left: 40px; +} +@media (min-width: 320px) and (max-width: 639px) { + .design__link { + width: 120px; + padding-left: 0; + font-size: 12px; + } +} + +.design__link:hover { + transform: scale(1.1); + box-shadow: 5px 9px 18px #2060f6; +} + +.trusted { + display: flex; + margin: 0 auto; + background: #fff; +} +@media (min-width: 320px) and (max-width: 639px) { + .trusted { + width: 280px; + } +} + +.trusted__logos { + display: flex; + margin: 0 auto; + align-items: center; + margin-top: 48px; + justify-content: center; +} +@media (min-width: 320px) and (max-width: 639px) { + .trusted__logos { + display: flex; + flex-direction: column; + width: 220px; + margin: 48px auto; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .trusted__logos { + display: flex; + width: 220px; + flex-direction: column; + margin: 48px auto; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .trusted__logos { + display: flex; + flex-wrap: wrap; + justify-content: center; + } +} + +.logos { + padding-right: 72px; + transition: all 0.5s ease-in-out; +} + +.logos:hover { + transform: scale(1.3); +} +@media (min-width: 320px) and (max-width: 639px) { + .logos { + padding-right: 0; + padding-bottom: 25px; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .logos { + align-items: center; + justify-content: center; + padding-bottom: 25px; + padding-right: 0; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .logos { + padding-bottom: 20px; + } +} + +.trusted__container { + display: flex; + flex-direction: column; + margin: 90px auto 0; +} +@media (min-width: 320px) and (max-width: 639px) { + .trusted__container { + padding: 0 20px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .trusted__container { + width: 1024px; + display: flex; + flex-wrap: wrap; + margin: 150px auto 0; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .trusted__container { + margin: 200px auto 0; + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .trusted__container { + margin: 200px auto 0; + } +} +@media (min-width: 1920px) and (max-width: 2559px) { + .trusted__container { + margin: 200px auto 0; + } +} +@media (min-width: 2560px) { + .trusted__container { + margin: 200px auto 0; + } +} + +.trusted__title { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 27px; + /* identical to box height, or 169% */ + text-align: center; + color: rgba(69, 88, 128, 0.5); +} +@media (min-width: 320px) and (max-width: 639px) { + .trusted__title { + width: 220px; + } +} + +.trusted__links { + align-items: center; + justify-content: center; + margin: 0 auto; +} + +.whatever { + background: #fff; +} +@media (min-width: 320px) and (max-width: 639px) { + .whatever { + display: flex; + margin: 0 auto; + width: 280px; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .whatever { + display: flex; + margin: 0 auto; + width: 620px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .whatever { + display: flex; + margin: 0 auto; + } +} + +.whatever__container { + margin-top: 160px; + display: flex; + flex-direction: column; + height: 1000px; +} +@media (min-width: 320px) and (max-width: 639px) { + .whatever__container { + width: 280px; + margin-top: 48px; + height: 1180px; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .whatever__container { + width: 620px; + margin-top: 48px; + height: 1280px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .whatever__container { + width: 1024px; + margin-top: 80px; + } +} + +.whatever__title { + font-family: Halyard Display, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 48px; + line-height: 60px; + text-align: center; + color: #1e266d; +} +@media (min-width: 320px) and (max-width: 639px) { + .whatever__title { + font-size: 32px; + width: 280px; + } +} + +.whatever__photos { + display: flex; +} + +.whatever__block1 { + height: 1000px; + width: 800px; +} +@media (min-width: 320px) and (max-width: 639px) { + .whatever__block1 { + width: 280px; + height: 300px; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .whatever__block1 { + width: 280px; + height: 300px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .whatever__block1 { + height: 700px; + width: 600px; + } +} + +.whatever__block2 { + height: 1000px; + width: 800px; +} +@media (min-width: 320px) and (max-width: 639px) { + .whatever__block2 { + width: 280px; + height: 300px; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .whatever__block2 { + width: 280px; + height: 300px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .whatever__block2 { + height: 700px; + width: 400px; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .whatever__block2 { + width: 480px; + } +} + +.whatever__images { + position: relative; + margin: 0 auto; + background-image: url(/images/whatever/graphic.png); + height: 930px; + width: 580px; + transform: translate(0, -25%); +} +@media (min-width: 320px) and (max-width: 639px) { + .whatever__images { + width: 280px; + background-size: 280px; + background-repeat: no-repeat; + margin-top: 50px; + height: 440px; + transform: translate(0, -55%); + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .whatever__images { + width: 280px; + background-size: 280px; + background-repeat: no-repeat; + margin-top: 50px; + height: 440px; + transform: translate(0, -55%); + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .whatever__images { + margin: 0; + } +} + +.whatever__image_2 { + position: absolute; + width: 182px; + height: 256px; + left: 420px; +} + +.whatever__image_3 { + position: absolute; + width: 470px; + height: 313px; + left: 280px; + top: 380px; +} + +.whatever__image_4 { + position: absolute; + width: 409px; + height: 612px; + left: 390px; + top: -60px; +} + +.whatever__positioning { + display: flex; + content: ""; + margin: 0 auto; + margin-top: 120px; +} +@media (min-width: 320px) and (max-width: 639px) { + .whatever__positioning { + display: flex; + flex-direction: column; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .whatever__positioning { + display: flex; + flex-direction: column; + } +} + +.card__icon { + width: 58px; + height: 58px; +} + +.block2__card { + display: flex; + margin-bottom: 100px; +} +@media (min-width: 320px) and (max-width: 639px) { + .block2__card { + margin-bottom: 26px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .block2__card { + width: 300px; + } +} + +.card__text { + margin-left: 47px; +} +@media (min-width: 320px) and (max-width: 639px) { + .card__text { + margin-left: 20px; + width: 240px; + } +} + +.card__title { + font-family: Halyard Display, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 22px; + color: #1e266d; + width: 300px; +} +@media (min-width: 320px) and (max-width: 639px) { + .card__title { + width: 200px; + } +} + +.card__paragraph { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 18px; + color: #455880; + width: 300px; + margin-top: 26px; +} +@media (min-width: 320px) and (max-width: 639px) { + .card__paragraph { + width: 200px; + margin-top: 8px; + } +} + +.simplicity { + background: #fff9ea; + margin: 0 auto; +} +@media (min-width: 320px) and (max-width: 639px) { + .simplicity { + height: 740px; + width: 280px; + display: flex; + margin: 0 auto; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .simplicity { + height: 740px; + width: 640px; + display: flex; + margin: 0 auto; + } +} + +.simplicity__container { + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 139px; +} +@media (min-width: 320px) and (max-width: 639px) { + .simplicity__container { + width: 280px; + display: flex; + flex-direction: column; + height: 740px; + margin-top: 20px; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .simplicity__container { + width: 620px; + display: flex; + flex-direction: column; + height: 740px; + margin-top: 40px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .simplicity__container { + padding-top: 60px; + width: 1024px; + } +} + +.simplicity__title { + font-family: Halyard Display, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 48px; + line-height: 60px; + text-align: center; + color: #1e266d; +} + +.simplicity__text { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 21px; + line-height: 150%; + text-align: center; + color: #455880; + margin-top: 40px; +} + +.button__container { + display: flex; + margin: 0 auto; + width: 148px; + margin-top: 40px; + height: 50px; + background: #3751ff; + align-items: center; + justify-content: center; +} +@media (min-width: 320px) and (max-width: 639px) { + .button__container { + margin-top: 20px; + } +} + +.button__link { + text-decoration: none; + color: #fff; +} + +.simplicity__images { + display: flex; + margin-top: 37px; + overflow: hidden; +} +@media (min-width: 320px) and (max-width: 639px) { + .simplicity__images { + height: 190px; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .simplicity__images { + height: 190px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .simplicity__images { + height: 540px; + padding: 0 20px; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .simplicity__images { + height: 540px; + overflow: hidden; + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .simplicity__images { + height: 510px; + overflow: hidden; + width: 1500px; + } +} +@media (min-width: 1920px) and (max-width: 2559px) { + .simplicity__images { + height: 450px; + overflow: hidden; + width: 1920px; + justify-content: center; + } +} +@media (min-width: 2560px) { + .simplicity__images { + overflow: hidden; + height: 600px; + width: 2560px; + justify-content: center; + } +} + +.images__examples { + height: 231px; + width: 311px; + filter: drop-shadow(0 4px 4px rgba(135, 146, 161, 0.08)); + border-radius: 18px; + -webkit-transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -o-transition: all 0.5s ease; + -ms-transition: all 0.5s ease; + transition: all 0.9s ease-in-out; +} + +.images__examples:hover { + border-radius: 50%; + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); +} +@media (min-width: 320px) and (max-width: 639px) { + .images__examples { + height: 65px; + width: 90px; + border-radius: 10px; + margin-bottom: 5px; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .images__examples { + height: 65px; + width: 90px; + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .images__examples { + width: 311px; + height: 250px; + } +} +@media (min-width: 1920px) and (max-width: 2559px) { + .images__examples { + width: 380px; + height: 200px; + } +} +@media (min-width: 2560px) { + .images__examples { + width: 500px; + height: 350px; + } +} + +@media (min-width: 1280px) and (max-width: 1599px) { + .images__column_first { + margin-top: 20px; + } +} + +.images__column_second { + margin-top: 120px; +} +@media (min-width: 320px) and (max-width: 639px) { + .images__column_second { + margin-top: 50px; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .images__column_second { + margin-top: 40px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .images__column_second { + margin-top: 130px; + overflow: hidden; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .images__column_second { + margin-top: 150px; + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .images__column_second { + margin-top: 120px; + } +} + +.images__column_third { + margin-top: 160px; +} +@media (min-width: 320px) and (max-width: 639px) { + .images__column_third { + margin-top: 80px; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .images__column_third { + margin-top: 90px; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .images__column_third { + margin-top: 220px; + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .images__column_third { + margin-top: 190px; + } +} + +@media (min-width: 320px) and (max-width: 639px) { + .images__column_fourth { + display: none; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .images__column_fourth { + margin-top: 40px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .images__column_fourth { + display: none; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .images__column_fourth { + margin-top: 160px; + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .images__column_fourth { + margin-top: 120px; + } +} +@media (min-width: 1920px) and (max-width: 2559px) { + .images__column_fourth { + margin-top: 100px; + } +} +@media (min-width: 2560px) { + .images__column_fourth { + margin-top: 50px; + } +} + +@media (min-width: 320px) and (max-width: 639px) { + .images__column_fifth { + display: none; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .images__column_fifth { + margin-top: 30px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .images__column_fifth { + display: none; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .images__column_fifth { + display: none; + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .images__column_fifth { + margin-top: 50px; + } +} +@media (min-width: 1920px) and (max-width: 2559px) { + .images__column_fifth { + margin-top: 80px; + } +} +@media (min-width: 2560px) { + .images__column_fifth { + margin-top: 20px; + } +} + +.image1 { + background: url(/images/simplicity/browser1.png); + background-size: cover; +} + +.image2 { + background: url(/images/simplicity/browser2.png); + background-size: cover; +} + +.image3 { + background: url(/images/simplicity/browser3.png); +} +@media (min-width: 320px) and (max-width: 639px) { + .image3 { + height: 29px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .image3 { + height: 50px; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .image3 { + background-repeat: no-repeat; + } +} +@media (min-width: 1920px) and (max-width: 2559px) { + .image3 { + background-repeat: no-repeat; + } +} +@media (min-width: 2560px) { + .image3 { + background-repeat: no-repeat; + } +} + +.image4 { + background: url(/images/simplicity/browser4.png); + background-size: cover; +} + +.image5 { + background: url(/images/simplicity/browser5.png); + background-size: contain; + background-repeat: no-repeat; +} + +.image7 { + background: url(/images/simplicity/browser6.png); + background-size: cover; +} + +.image8 { + background: url(/images/simplicity/browser7.png); +} +@media (min-width: 320px) and (max-width: 639px) { + .image8 { + background: url(/images/simplicity/browser8.png); + background-size: cover; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .image8 { + background-repeat: no-repeat; + } +} +@media (min-width: 2560px) { + .image8 { + background-repeat: no-repeat; + background-size: 500px; + } +} + +@media (min-width: 320px) and (max-width: 639px) { + .image6 { + display: none; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .image6 { + display: none; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .image6 { + background: url(/images/simplicity/browser6.png); + } +} + +@media (min-width: 320px) and (max-width: 639px) { + .image9 { + display: none; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .image9 { + display: none; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .image9 { + background: url(/images/simplicity/browser9.png); + background-repeat: no-repeat; + } +} + +@media (min-width: 640px) and (max-width: 1023px) { + .image10 { + background: url(/images/simplicity/browser10.png); + background-repeat: no-repeat; + object-fit: cover; + background-size: 100%; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .image10 { + background: url(/images/simplicity/browser10.png); + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .image10 { + background: url(/images/simplicity/browser10.png); + } +} +@media (min-width: 1920px) and (max-width: 2559px) { + .image10 { + background: url(/images/simplicity/browser10.png); + object-fit: contain; + background-repeat: no-repeat; + } +} +@media (min-width: 2560px) { + .image10 { + background: url(/images/simplicity/browser10.png); + background-size: cover; + } +} + +@media (min-width: 640px) and (max-width: 1023px) { + .image11 { + background: url(/images/simplicity/browser8.png); + background-size: 100%; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .image11 { + background: url(/images/simplicity/browser8.png); + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .image11 { + background: url(/images/simplicity/browser8.png); + } +} +@media (min-width: 1920px) and (max-width: 2559px) { + .image11 { + background: url(/images/simplicity/browser8.png); + background-repeat: no-repeat; + } +} +@media (min-width: 2560px) { + .image11 { + background: url(/images/simplicity/browser8.png); + background-size: cover; + } +} + +@media (min-width: 640px) and (max-width: 1023px) { + .image13 { + background: url(/images/simplicity/browser11.png); + background-repeat: no-repeat; + object-fit: cover; + background-size: 100%; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .image13 { + background: url(/images/simplicity/browser11.png); + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .image13 { + background: url(/images/simplicity/browser11.png); + background-repeat: no-repeat; + } +} +@media (min-width: 1920px) and (max-width: 2559px) { + .image13 { + background: url(/images/simplicity/browser11.png); + background-repeat: no-repeat; + } +} +@media (min-width: 2560px) { + .image13 { + background: url(/images/simplicity/browser11.png); + background-size: cover; + } +} + +@media (min-width: 640px) and (max-width: 1023px) { + .image14 { + background: url(/images/simplicity/browser6.png); + background-size: 100%; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .image14 { + background: url(/images/simplicity/browser6.png); + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .image14 { + background: url(/images/simplicity/browser6.png); + } +} +@media (min-width: 1920px) and (max-width: 2559px) { + .image14 { + background: url(/images/simplicity/browser6.png); + } +} +@media (min-width: 2560px) { + .image14 { + background: url(/images/simplicity/browser6.png); + background-size: cover; + } +} + +.others { + display: flex; + margin: 0 auto; +} +@media (min-width: 320px) and (max-width: 639px) { + .others { + width: 280px; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .others { + margin: 0 auto; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .others { + display: flex; + margin: 0; + } +} + +.others__title { + font-family: Halyard Display, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 48px; + line-height: 60px; + text-align: center; + color: #1e266d; +} + +.others__container { + display: flex; + flex-direction: column; + margin: 0 auto; + padding-top: 200px; + justify-content: center; +} +@media (min-width: 320px) and (max-width: 639px) { + .others__container { + width: 270px; + padding-top: 80px; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .others__container { + width: 100%; + padding-top: 130px; + margin: 0 auto; + justify-content: center; + align-items: center; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .others__container { + box-sizing: border-box; + width: 1024px; + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .others__container { + width: 1600px; + } +} + +.others__cards { + display: flex; + margin: 0 auto; + padding-top: 56px; +} +@media (min-width: 320px) and (max-width: 639px) { + .others__cards { + margin: 0; + width: 270px; + display: flex; + flex-direction: column; + padding: 20px 0; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .others__cards { + margin: 0; + width: 390px; + display: flex; + flex-direction: column; + padding: 20px 0; + justify-content: center; + align-items: center; + } +} + +.others__card { + display: flex; + flex-direction: column; + align-items: center; + width: 372px; + height: 467px; + border: 1px solid rgba(69, 88, 128, 0.2); + border-radius: 4px; + margin: 0 14px; + transition: all 0.5s; +} + +.others__card:hover { + transform: scale(1.05); +} +@media (min-width: 320px) and (max-width: 639px) { + .others__card { + width: 270px; + margin: 14px 0; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .others__card { + margin: 20px 0; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .others__card { + width: 300px; + } +} + +.card__info { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 180%; + box-sizing: border-box; + /* or 32px */ + color: #455880; + padding: 38px 44px 0; + height: 250px; +} +@media (min-width: 320px) and (max-width: 639px) { + .card__info { + padding: 30px 20px; + width: 250px; + height: 250px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .card__info { + padding: 28px 26px 0; + height: 250px; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .card__info { + padding: 28px 26px 0; + width: 300px; + height: 248px; + } +} + +.card__photo { + width: 64px; + height: 64px; + background-image: url(/images/others/image5.png); + margin-top: 39px; +} +@media (min-width: 320px) and (max-width: 639px) { + .card__photo { + margin-top: 60px; + } +} + +.card__photo2 { + width: 64px; + height: 64px; + background-image: url(/images/others/image6.png); + margin-top: 39px; +} + +.card__photo3 { + width: 64px; + height: 64px; + background-image: url(/images/others/image7.png); + margin-top: 39px; +} + +.card__name { + font-family: Halyard Display, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 22px; + line-height: 125%; + /* identical to box height, or 27px */ + text-align: center; + color: #1e266d; + margin-top: 23px; +} + +.card__job { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 180%; + /* or 32px */ + text-align: center; + color: #455880; +} + +.buy { + background: #3751ff; + height: 323px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + overflow: hidden; + margin-top: 150px; +} +@media (min-width: 320px) and (max-width: 639px) { + .buy { + margin-top: 10px; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .buy { + margin-top: 20px; + width: 640px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .buy { + width: 1024px; + margin-top: 80px; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .buy { + width: 1280px; + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .buy { + width: 1600px; + } +} +@media (min-width: 1920px) and (max-width: 2559px) { + .buy { + width: 1920px; + } +} +@media (min-width: 2560px) { + .buy { + width: 2560px; + } +} + +.buy__container { + display: flex; + margin: 0 auto; + overflow: hidden; + align-items: center; +} +@media (min-width: 320px) and (max-width: 639px) { + .buy__container { + display: flex; + flex-direction: column; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .buy__container { + display: flex; + flex-direction: column; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .buy__container { + margin: 0; + } +} + +.buy__right_side { + padding-left: 480px; + display: flex; + flex-direction: column; + justify-content: flex-start; +} +@media (min-width: 320px) and (max-width: 639px) { + .buy__right_side { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 24px 20px; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .buy__right_side { + display: flex; + flex-direction: column; + align-items: center; + padding: 24px 20px; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .buy__right_side { + padding-left: 510px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .buy__right_side { + padding-left: 300px; + } +} + +.buy__button_container { + display: flex; + align-items: center; + background: #fff; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + border-radius: 100px; + width: 242px; + height: 56px; + transition: all 0.3s; +} + +.buy__button_container:hover { + transform: scale(1.02); + box-shadow: 5px 9px 18px #2060f6; +} + +.buy__link { + display: flex; + text-decoration: none; + padding-left: 20px; +} +@media (min-width: 320px) and (max-width: 639px) { + .buy__link { + padding-left: 0; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .buy__link { + padding-left: 30px; + } +} + +.buy__button_image { + display: flex; + flex-direction: row; + align-items: center; + margin-left: 28px; +} + +.buy__button_phrase { + margin-left: 15px; + font-style: normal; + font-weight: 500; + font-size: 18px; + line-height: 110%; + /* or 20px */ + text-align: center; + color: #455880; +} + +.buy__phrase { + font-family: Halyard Display, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 48px; + line-height: 60px; + /* or 125% */ + color: #fff; +} +@media (min-width: 320px) and (max-width: 639px) { + .buy__phrase { + text-align: center; + font-size: 32px; + padding: 0 10px; + } +} + +.buy__button_info { + margin-top: 19px; + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 125%; + text-align: right; + color: #dfe0eb; +} +@media (min-width: 320px) and (max-width: 639px) { + .buy__button_info { + width: 270px; + text-align: center; + } +} + +.buy__phrase_link { + color: yellow; + text-decoration: none; +} + +.footer { + display: flex; +} +@media (min-width: 320px) and (max-width: 639px) { + .footer { + margin-top: 20px; + display: flex; + flex-direction: column; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .footer { + margin-top: 20px; + display: flex; + flex-direction: column; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .footer { + margin-top: 48px; + display: flex; + flex-direction: column; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .footer { + display: flex; + flex-direction: column; + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .footer { + display: flex; + flex-direction: column; + } +} +@media (min-width: 1920px) and (max-width: 2559px) { + .footer { + display: flex; + flex-direction: column; + } +} +@media (min-width: 2560px) { + .footer { + display: flex; + flex-direction: column; + } +} + +.footer__copyright { + display: flex; + margin: 0 auto; +} +@media (min-width: 320px) and (max-width: 639px) { + .footer__copyright { + margin: 0; + display: block; + padding: 0 20px; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .footer__copyright { + margin: 0; + display: block; + padding: 30px 80px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .footer__copyright { + margin: 0; + justify-content: space-between; + padding: 0 20px; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .footer__copyright { + margin: 0; + padding: 0 40px; + justify-content: space-between; + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .footer__copyright { + margin: 0; + padding: 0 220px; + justify-content: space-between; + } +} +@media (min-width: 1920px) and (max-width: 2559px) { + .footer__copyright { + margin: 0; + padding: 0 400px; + justify-content: space-between; + } +} +@media (min-width: 2560px) { + .footer__copyright { + margin: 0; + padding: 0 720px; + justify-content: space-between; + } +} + +.footer__container { + display: flex; + flex-direction: row; + margin: 0 auto; + padding-top: 126px; +} +@media (min-width: 320px) and (max-width: 639px) { + .footer__container { + display: flex; + flex-direction: column; + margin: 0; + padding: 0 20px; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .footer__container { + display: flex; + flex-direction: column; + margin: 0 auto; + padding-top: 60px; + height: 940px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .footer__container { + padding: 0 20px; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .footer__container { + padding: 120px 20px; + justify-content: space-between; + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .footer__container { + margin: 0 auto; + } +} + +.footer__left_text { + box-sizing: border-box; + padding-right: 184px; +} +@media (min-width: 320px) and (max-width: 639px) { + .footer__left_text { + width: 260px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .footer__left_text { + padding-right: 30px; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .footer__left_text { + padding-right: 240px; + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .footer__left_text { + padding-right: 205px; + } +} + +.footer__title { + display: flex; +} + +.footer__info { + margin-top: 34px; + width: 290px; + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 145%; + color: #455880; +} +@media (min-width: 320px) and (max-width: 639px) { + .footer__info { + width: 260px; + } +} + +@media (min-width: 320px) and (max-width: 639px) { + .footer__pages { + padding-top: 20px; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .footer__pages { + padding-top: 24px; + } +} + +.footer__pages_title { + font-family: Halyard Display, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 22px; + line-height: 125%; + color: #1e266d; + width: 212px; + height: 28px; +} + +.nav__footer { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 225%; + color: #455880; + margin-top: 22px; +} + +.nav__list_footer { + list-style: none; +} + +@media (min-width: 320px) and (max-width: 639px) { + .footer__resources { + padding-top: 30px; + } +} + +.footer__resources_title { + font-family: Halyard Display, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 22px; + line-height: 125%; + color: #1e266d; +} + +.socials__container { + display: flex; +} + +.socials__image { + width: 16px; + height: 16px; + padding-right: 26px; + background: no-repeat; + margin-top: 32px; + cursor: pointer; + transition: all 0.5s; +} + +.socials__image:hover { + transform: scale(1.1); +} + +.facebook { + background-image: url(/images/footer/icon-facebook.svg); + width: 16px; + height: 16px; +} + +.facebook:hover { + filter: invert(80%) + sepia(60%) + saturate(3207%) + hue-rotate(130deg) + brightness(95%) + contrast(80%); +} + +.instagram { + background-image: url(/images/footer/icon-instagram.svg); +} + +.instagram:hover { + filter: invert(80%) + sepia(60%) + saturate(3207%) + hue-rotate(130deg) + brightness(95%) + contrast(80%); +} + +.twitter { + filter: invert(80%) + sepia(60%) + saturate(3207%) + hue-rotate(130deg) + brightness(95%) + contrast(80%); +} + +.twitter:hover { + filter: invert(80%) + sepia(60%) + saturate(3207%) + hue-rotate(130deg) + brightness(95%) + contrast(80%); +} + +.dribbble { + background-image: url(/images/footer/icon-dribbble.svg); +} + +.dribbble:hover { + filter: invert(80%) + sepia(60%) + saturate(3207%) + hue-rotate(130deg) + brightness(95%) + contrast(80%); +} + +.envato { + background-image: url(/images/footer/icon-envato.svg); +} + +.envato:hover { + filter: invert(80%) + sepia(60%) + saturate(3207%) + hue-rotate(130deg) + brightness(95%) + contrast(80%); +} + +.footer__resources_links { + width: 217px; + height: 161px; +} +@media (min-width: 320px) and (max-width: 639px) { + .footer__resources_links { + margin: 0; + height: 80px; + } +} + +.footer__resources_links:last-child { + margin-top: 0; +} + +.footer__resources_link { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 225%; + color: #455880; + margin-top: 28px; +} +@media (min-width: 320px) and (max-width: 639px) { + .footer__resources_link { + margin-top: 10px; + } +} + +.footer__resources_link2 { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 225%; + color: #455880; +} + +@media (min-width: 320px) and (max-width: 639px) { + .copyright__container { + padding: 10px 20px; + display: flex; + flex-direction: column; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .copyright__container { + padding: 0 20px; + margin: 0 auto; + display: flex; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .copyright__container { + flex-direction: row; + margin: 0 auto; + display: flex; + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .copyright__container { + flex-direction: row; + margin: 0 auto; + display: flex; + } +} +@media (min-width: 1920px) and (max-width: 2559px) { + .copyright__container { + flex-direction: row; + margin: 0 auto; + display: flex; + } +} +@media (min-width: 2560px) { + .copyright__container { + flex-direction: row; + margin: 0 auto; + display: flex; + } +} + +.copyright__title { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 27px; + color: rgba(69, 88, 128, 0.5); +} + +.copyright__links { + display: flex; + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 27px; + text-align: right; + color: #455880; + right: 0; +} +@media (min-width: 320px) and (max-width: 639px) { + .copyright__links { + position: relative; + display: flex; + flex-direction: column; + text-align: left; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .copyright__links { + padding-right: 20px; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .copyright__links { + position: relative; + } +} + +.copyright__link { + margin-left: 30px; +} +@media (min-width: 320px) and (max-width: 639px) { + .copyright__link { + margin-left: 0; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .copyright__link { + margin-left: 0; + padding-right: 20px; + } +} + +@font-face { + font-family: "Halyard Display"; + src: url("/fonts/Halyard/HalyardDisplayMedium.ttf"); + font-weight: 500; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Halyard Text"; + src: url("/fonts/Halyard/HalyardTextRegular.ttf"); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +.page { + margin: 0; + padding: 0; +} + +.page__body { + margin: 0; + padding: 0; + transition: translateX(-100%) 0.3s; +} + +.page__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + margin: 0; + padding: 0; + transition: all 0.3s; + transform: translateX(-100%); +} + +.page__menu:target { + transform: translateX(0); +} + +.menu__content { + background-color: #5a5454; + height: 100vh; + padding-left: 20px; +} + +.menu__link { + font-family: "Halyard", sans-serif; + font-style: normal; + font-weight: bold; + font-size: 13px; + text-align: center; + letter-spacing: 3px; + text-transform: uppercase; + color: #fff; + transition: all 0.3s; + margin-right: 48px; + text-decoration: none; +} + +.menu__item { + padding-top: 10px; + list-style: none; +} + +body { + background: #eee; + margin: 0 auto; + padding: 0; + background-color: #fff; +} +@media (min-width: 320px) and (max-width: 639px) { + body { + width: 320px; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + body { + width: 640px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + body { + width: 1024px; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + body { + width: 1280px; + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + body { + width: 1600px; + } +} +@media (min-width: 1920px) and (max-width: 2559px) { + body { + width: 1920px; + } +} +@media (min-width: 2560px) { + body { + width: 2560px; + } +} + +.main { + margin: 0 auto; + display: flex; + flex-direction: column; +} +@media (min-width: 320px) and (max-width: 639px) { + .main { + width: 320px; + } +} +@media (min-width: 640px) and (max-width: 1023px) { + .main { + width: 640px; + } +} +@media (min-width: 1024px) and (max-width: 1279px) { + .main { + width: 1024px; + } +} +@media (min-width: 1280px) and (max-width: 1599px) { + .main { + width: 1280px; + } +} +@media (min-width: 1600px) and (max-width: 1919px) { + .main { + width: 1600px; + } +} +@media (min-width: 1920px) and (max-width: 2559px) { + .main { + width: 1920px; + } +} +@media (min-width: 2560px) { + .main { + width: 2560px; + } +} + +ul { + margin: 0; + padding: 0; + margin-block-start: 0; + padding-inline-start: 0; +} + +* { + box-sizing: border-box; + scroll-behavior: smooth; + margin: 0; + padding: 0; +} + +/*# sourceMappingURL=main.css.map */ diff --git a/src/styles/main.css.map b/src/styles/main.css.map new file mode 100644 index 00000000..3b22c792 --- /dev/null +++ b/src/styles/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["utils/_extends.scss","fonts.scss","header.scss","utils/_mixins.scss","utils/_vars.scss","design.scss","trusted.scss","whatever.scss","simplicity.scss","others.scss","footer.scss","page.scss","main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;ACFF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;ACbF;EACE;EACA;EACA;EACA;EACA;EACA;;ACcA;EDpBF;IASI;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACfA;EDKF;IAYI;;;ACXF;EDDF;IAeI;;;ACRF;EDPF;IAkBI;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EAEA,OE3DS;EF6DT;EACA;EACA;;AACA;EACE;;AC1DF;ED4CF;IAiBI;;;ACvDF;EDsCF;IAoBI;;;ACpDF;EDgCF;IAuBI;;;;AAIJ;EACE;EACA;EACA;EACA;;AC3EA;EDuEF;IAMI;;;ACvEF;EDiEF;IASI;;;ACpEF;ED2DF;IAYI;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EAEA,OE7GM;EF+GN;EACA;EAEA;;ACtGA;EDkFF;IAsBI;;;AAEF;EACE;EACA;;AClHF;EDwFF;IA8BI;;;AC1GF;ED4EF;IAiCI;;;;AC7GF;EDiHF;IAEI;;;;AC/HF;EDmIF;IAEI;;;;AAIJ;EACE;EACA;EACA;;AC5IA;EDyIF;IAKI;;;ACxIF;EDmIF;IAQI;;;ACrIF;ED6HF;IAWI;;;;AAIJ;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EAEA,OE9KS;;;AFiLX;EACE;EACA;EACA;;AC7KA;ED0KF;IAKI;;;AC7JF;EDwJF;IAQI;;;ACtKF;ED8JF;IAWI;;;AC7JF;EDkJF;IAcI;;;AC1JF;ED4IF;IAiBI;;;ACvJF;EDsIF;IAoBI;;;;AAIJ;EACE;EACA;EACA;EACA;EAEA,OE/MS;;;AFkNX;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EAEA;EACA;EACA;EACA;;AClMA;ED4LF;IASI;;;ACvNF;ED8MF;IAaI;;;ACjOF;EDoNF;IAiBI;;;ACzNF;EDwMF;IAoBI;;;AAEF;EACE;;;AGnPJ;EACE;EAGA;;AFIA;EERF;IAMI;IACA;;;AFOF;EEdF;IAUI;;;AFUF;EEpBF;IAaI;IACA;;;AFYF;EE1BF;IAiBI;;;AFeF;EEhCF;IAoBI;;;AFkBF;EEtCF;IAuBI;;;AFqBF;EE5CF;IA0BI;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AF5BA;EEsBF;IAQI;IACA;IACA;;;AFpBF;EEUF;IAaI;IACA;IACA;IACA;IACA;IACA;;;AFtBF;EEIF;IAsBI;IACA;IACA;IACA;IACA;IACA;;;AFzBF;EEFF;IA8BI;IACA;IACA;IACA;IACA;IACA;;;AF3BF;EERF;IAsCI;IACA;IACA;IACA;IACA;IACA;;;AF7BF;EEdF;IA8CI;IACA;IACA;IACA;IACA;IACA;;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;AACA;EAEA;EAEA,ODpGS;ECqGT;;AF9FA;EEmFF;IAaI;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;AACA;EAEA;EAEA,ODnHU;ECqHV;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EAEA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EAEA,YDnNM;ECoNN;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA,YD9NM;EC+NN;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;AFvOA;EEsOF;IAGI;;;AF7NF;EE0NF;IAMI;;;AFpNF;EE8MF;IASI;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;AACA;EAEA;EAEA,ODnQU;ECqQV,YDtQM;ECuQN;EACA;EACA;EACA;EACA;EACA;;AFtQA;EEmPF;IAsBI;IACA;IACA;;;AAEF;EACE;EACA;;;ACvRJ;EACE;EACA;EACA,YFDM;;ADMN;EGRF;IAKI;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AHNA;EGCF;IAOI;IACA;IACA;IACA;;;AHLF;EGLF;IAaI;IACA;IACA;IACA;;;AHLF;EGXF;IAmBI;IACA;IACA;;;;AAIJ;EACE;EACA;;AACA;EACE;;AH9BF;EG0BF;IAOI;IACA;;;AH5BF;EGoBF;IAWI;IACA;IACA;IACA;;;AH5BF;EGcF;IAiBI;;;;AAIJ;EACE;EACA;EACA;;AHlDA;EG+CF;IAKI;;;AHxCF;EGmCF;IAQI;IACA;IACA;IACA;;;AHxCF;EG6BF;IAcI;;;AHrCF;EGuBF;IAiBI;;;AHlCF;EGiBF;IAoBI;;;AH/BF;EGWF;IAuBI;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;AACA;EAEA;EAEA;;AHpFA;EG0EF;IAYI;;;;AAIJ;EACE;EACA;EACA;;;ACrGF;EACE,YHCM;;ADMN;EIRF;IAGI;IACA;IACA;;;AJSF;EIdF;IAQI;IACA;IACA;;;AJUF;EIpBF;IAaI;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;;AJdA;EIUF;IAMI;IACA;IACA;;;AJZF;EIIF;IAWI;IACA;IACA;;;AJXF;EIFF;IAgBI;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EAEA;EAEA,OH/CS;;ADOT;EI+BF;IAWI;IACA;;;;AAIJ;EACE;;;AAGF;EACE;EACA;;AJrDA;EImDF;IAII;IACA;;;AJlDF;EI6CF;IAQI;IACA;;;AJhDF;EIuCF;IAYI;IACA;;;;AAIJ;EACE;EACA;;AJtEA;EIoEF;IAII;IACA;;;AJnEF;EI8DF;IAQI;IACA;;;AJjEF;EIwDF;IAYI;IACA;;;AJ/DF;EIkDF;IAgBI;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AJ9FA;EIwFF;IAQI;IACA;IACA;IACA;IACA;IACA;;;AJ/FF;EIkFF;IAgBI;IACA;IACA;IACA;IACA;IACA;;;AJjGF;EI4EF;IAwBI;;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AJ/IA;EI2IF;IAMI;IACA;;;AJ5IF;EIqIF;IAUI;IACA;;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;AJjKA;EI+JF;IAII;;;AJvJF;EImJF;IAOI;;;;AAIJ;EACE;;AJ3KA;EI0KF;IAGI;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;EAEA,OH/LS;EGiMT;;AJ1LA;EIkLF;IAUI;;;;AAIJ;EACE;EACA;EACA;EACA;EAEA,OH3MU;EG4MV;EACA;;AJxMA;EIgMF;IAUI;IACA;;;;ACnNJ;EACE;EACA;;ALMA;EKRF;IAII;IACA;IACA;IACA;;;ALOF;EKdF;IAUI;IACA;IACA;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;ALdA;EKSF;IAOI;IACA;IACA;IACA;IACA;;;ALdF;EKGF;IAcI;IACA;IACA;IACA;IACA;;;ALfF;EKHF;IAqBI;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EAEA;EAEA,OJnDS;;;AIsDX;EACE;EACA;EACA;EACA;EACA;EAEA;EAEA,OJ7DU;EI8DV;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;ALrEA;EK4DF;IAWI;;;;AAIJ;EACE;EACA,OJnFM;;;AIsFR;EACE;EACA;EACA;;ALnFA;EKgFF;IAMI;;;ALhFF;EK0EF;IASI;;;AL7EF;EKoEF;IAYI;IACA;;;AL3EF;EK8DF;IAgBI;IACA;;;ALzEF;EKwDF;IAoBI;IACA;IACA;;;ALxEF;EKkDF;IAyBI;IACA;IACA;IACA;;;ALxEF;EK4CF;IA+BI;IACA;IACA;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;ALvIF;EKsHF;IAoBI;IACA;IACA;IACA;;;ALvIF;EKgHF;IA0BI;IACA;;;ALzHF;EK8FF;IA8BI;IACA;;;ALvHF;EKwFF;IAkCI;IACA;;;ALrHF;EKkFF;IAsCI;IACA;;;;AL3IF;EK+IF;IAEI;;;;AAIJ;EACE;;ALxKA;EKuKF;IAGI;;;ALpKF;EKiKF;IAMI;;;ALjKF;EK2JF;IASI;IACA;;;AL/JF;EKqJF;IAaI;;;AL5JF;EK+IF;IAgBI;;;;AAIJ;EACE;;AL5LA;EK2LF;IAGI;;;ALxLF;EKqLF;IAMI;;;AL/KF;EKyKF;IASI;;;AL5KF;EKmKF;IAYI;;;;ALvMF;EK2MF;IAEI;;;ALvMF;EKqMF;IAKI;;;ALpMF;EK+LF;IAQI;;;ALjMF;EKyLF;IAWI;;;AL9LF;EKmLF;IAcI;;;AL3LF;EK6KF;IAiBI;;;ALxLF;EKuKF;IAoBI;;;;AL/NF;EKmOF;IAEI;;;AL/NF;EK6NF;IAKI;;;AL5NF;EKuNF;IAQI;;;ALzNF;EKiNF;IAWI;;;ALtNF;EK2MF;IAcI;;;ALnNF;EKqMF;IAiBI;;;ALhNF;EK+LF;IAoBI;;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;ALtQA;EKqQF;IAGI;;;AL5PF;EKyPF;IAMI;;;ALzPF;EKmPF;IASI;;;ALhPF;EKuOF;IAYI;;;AL7OF;EKiOF;IAeI;;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;ALzSA;EKwSF;IAGI;IACA;;;ALhSF;EK4RF;IAOI;;;AL3QF;EKoQF;IAUI;IACA;;;;ALnTF;EKuTF;IAEI;;;AL7SF;EK2SF;IAKI;;;AL1SF;EKqSF;IAQI;;;;AL/TF;EKmUF;IAEI;;;ALzTF;EKuTF;IAKI;;;ALtTF;EKiTF;IAQI;IACA;;;;ALtUF;EK0UF;IAEI;IACA;IACA;IACA;;;ALnUF;EK8TF;IASI;;;ALjUF;EKwTF;IAaI;;;AL/TF;EKkTF;IAgBI;IACA;IACA;;;AL9TF;EK4SF;IAqBI;IACA;;;;ALhWF;EKoWF;IAEI;IACA;;;AL3VF;EKwVF;IAMI;;;ALxVF;EKkVF;IASI;;;ALrVF;EK4UF;IAYI;IACA;;;ALnVF;EKsUF;IAiBI;IACA;;;;ALtXF;EK0XF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","file":"main.css"} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e4..8c975542 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -2,6 +2,83 @@ @import "fonts"; @import "typography"; +@import "header.scss"; +@import "design.scss"; +@import "trusted.scss"; +@import "whatever.scss"; +@import "simplicity.scss"; +@import "others.scss"; +@import "footer.scss"; +@import "fonts.scss"; +@import "page.scss"; +@import "utils/mixins"; + body { background: $c-gray; + margin: 0 auto; + padding: 0; + background-color: $white; + + @include Mobile { + width: 320px; + } + @include SmallPhone { + width: 640px; + } + @include Tablet { + width: 1024px; + } + @include Notebook { + width: 1280px; + } + @include TheDesign { + width: 1600px; + } + @include FullHD { + width: 1920px; + } + @include LargeScreens { + width: 2560px; + } +} + +.main { + margin: 0 auto; + display: flex; + flex-direction: column; + @include Mobile { + width: 320px; + } + @include SmallPhone { + width: 640px; + } + @include Tablet { + width: 1024px; + } + @include Notebook { + width: 1280px; + } + @include TheDesign { + width: 1600px; + } + @include FullHD { + width: 1920px; + } + @include LargeScreens { + width: 2560px; + } +} + +ul { + margin: 0; + padding: 0; + margin-block-start: 0; + padding-inline-start: 0; +} + +* { + box-sizing: border-box; + scroll-behavior: smooth; + margin: 0; + padding: 0; } diff --git a/src/styles/others.scss b/src/styles/others.scss new file mode 100644 index 00000000..07aeae23 --- /dev/null +++ b/src/styles/others.scss @@ -0,0 +1,347 @@ +.others { + display: flex; + margin: 0 auto; + @include Mobile { + width: 280px; + } + @include SmallPhone { + margin: 0 auto; + } + + @include Tablet { + display: flex; + margin: 0; + } + &__title { + font-family: Halyard Display, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 48px; + line-height: 60px; + + text-align: center; + + color: $darkBlue; + } +} + +.others__container { + display: flex; + flex-direction: column; + margin: 0 auto; + padding-top: 200px; + justify-content: center; + @include Mobile { + width: 270px; + padding-top: 80px; + } + @include SmallPhone { + width: 100%; + padding-top: 130px; + margin: 0 auto; + justify-content: center; + align-items: center; + } + @include Tablet { + box-sizing: border-box; + width: 1024px; + } + @include TheDesign { + width: 1600px; + } +} + +.others__cards { + display: flex; + margin: 0 auto; + padding-top: 56px; + @include Mobile { + margin: 0; + width: 270px; + display: flex; + flex-direction: column; + padding: 20px 0; + } + @include SmallPhone { + margin: 0; + width: 390px; + display: flex; + flex-direction: column; + padding: 20px 0; + justify-content: center; + align-items: center; + } +} + +.others__card { + display: flex; + flex-direction: column; + align-items: center; + width: 372px; + height: 467px; + + border: 1px solid rgba(69, 88, 128, 0.2); + border-radius: 4px; + margin: 0 14px; + transition: all 0.5s; + &:hover { + transform: scale(1.05); + } + @include Mobile { + width: 270px; + margin: 14px 0; + } + @include SmallPhone { + margin: 20px 0; + } + @include Tablet { + width: 300px; + } +} + +.card__info { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 180%; + box-sizing: border-box; + + /* or 32px */ + + color: $lightBlue; + padding: 38px 44px 0; + height: 250px; + @include Mobile { + padding: 30px 20px; + width: 250px; + height: 250px; + } + @include Tablet { + padding: 28px 26px 0; + height: 250px; + } + @include Notebook { + padding: 28px 26px 0; + width: 300px; + height: 248px; + } +} + +.card__photo { + width: 64px; + height: 64px; + background-image: url(/images/others/image5.png); + margin-top: 39px; + @include Mobile { + margin-top: 60px; + } +} + +.card__photo2 { + width: 64px; + height: 64px; + background-image: url(/images/others/image6.png); + margin-top: 39px; +} + +.card__photo3 { + width: 64px; + height: 64px; + background-image: url(/images/others/image7.png); + margin-top: 39px; +} + +.card__name { + font-family: Halyard Display, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 22px; + line-height: 125%; + + /* identical to box height, or 27px */ + text-align: center; + + color: $darkBlue; + margin-top: 23px; +} + +.card__job { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 180%; + + /* or 32px */ + text-align: center; + + color: $lightBlue; +} + +.buy { + background: #3751ff; + height: 323px; + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + overflow: hidden; + margin-top: 150px; + @include Mobile { + margin-top: 10px; + } + @include SmallPhone { + margin-top: 20px; + width: 640px; + } + @include Tablet { + width: 1024px; + margin-top: 80px; + } + @include Notebook { + width: 1280px; + } + @include TheDesign { + width: 1600px; + } + @include FullHD { + width: 1920px; + } + @include LargeScreens { + width: 2560px; + } +} + +.buy__container { + display: flex; + margin: 0 auto; + overflow: hidden; + align-items: center; + + @include Mobile { + display: flex; + flex-direction: column; + } + @include SmallPhone { + display: flex; + flex-direction: column; + } + @include Tablet { + margin: 0; + } +} + +.buy__right_side { + padding-left: 480px; + display: flex; + flex-direction: column; + justify-content: flex-start; + + @include Mobile { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 24px 20px; + } + @include SmallPhone { + display: flex; + flex-direction: column; + align-items: center; + padding: 24px 20px; + } + @include Notebook { + padding-left: 510px; + } + @include Tablet { + padding-left: 300px; + } +} + +.buy__button_container { + display: flex; + align-items: center; + background: $white; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + border-radius: 100px; + width: 242px; + height: 56px; + transition: all 0.3s; + + &:hover { + transform: scale(1.02); + box-shadow: 5px 9px 18px #2060f6; + } +} + +.buy__link { + display: flex; + text-decoration: none; + padding-left: 20px; + @include Mobile { + padding-left: 0; + } + @include SmallPhone { + padding-left: 30px; + } +} + +.buy__button_image { + display: flex; + flex-direction: row; + align-items: center; + margin-left: 28px; +} + +.buy__button_phrase { + margin-left: 15px; + font-style: normal; + font-weight: 500; + font-size: 18px; + line-height: 110%; + + /* or 20px */ + text-align: center; + + color: $lightBlue; +} + +.buy__phrase { + font-family: Halyard Display, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 48px; + line-height: 60px; + + /* or 125% */ + + color: $white; + @include Mobile { + text-align: center; + font-size: 32px; + padding: 0 10px; + } +} + +.buy__button_info { + margin-top: 19px; + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 125%; + text-align: right; + + color: #dfe0eb; + @include Mobile { + width: 270px; + text-align: center; + } +} + +.buy__phrase_link { + color: yellow; + text-decoration: none; +} diff --git a/src/styles/page.scss b/src/styles/page.scss new file mode 100644 index 00000000..2fee7fe2 --- /dev/null +++ b/src/styles/page.scss @@ -0,0 +1,53 @@ +.page { + margin: 0; + padding: 0; + &__body { + margin: 0; + padding: 0; + transition: translateX(-100%) 0.3s; + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + margin: 0; + padding: 0; + + transition: all 0.3s; + + transform: translateX(-100%); + + &:target { + transform: translateX(0); + } + } +} + +.menu__content { + background-color: rgb(90, 84, 84); + height: 100vh; + padding-left: 20px; +} + +.menu__link { + font-family: "Halyard", sans-serif; + font-style: normal; + font-weight: bold; + font-size: 13px; + text-align: center; + letter-spacing: 3px; + text-transform: uppercase; + + color: $white; + transition: all 0.3s; + + margin-right: 48px; + text-decoration: none; +} + +.menu__item { + padding-top: 10px; + list-style: none; +} diff --git a/src/styles/simplicity.scss b/src/styles/simplicity.scss new file mode 100644 index 00000000..5bed0751 --- /dev/null +++ b/src/styles/simplicity.scss @@ -0,0 +1,435 @@ +.simplicity { + background: #fff9ea; + margin: 0 auto; + @include Mobile { + height: 740px; + width: 280px; + display: flex; + margin: 0 auto; + } + @include SmallPhone { + height: 740px; + width: 640px; + display: flex; + margin: 0 auto; + } +} + +.simplicity__container { + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 139px; + @include Mobile { + width: 280px; + display: flex; + flex-direction: column; + height: 740px; + margin-top: 20px; + } + @include SmallPhone { + width: 620px; + display: flex; + flex-direction: column; + height: 740px; + margin-top: 40px; + } + @include Tablet { + padding-top: 60px; + width: 1024px; + } +} + +.simplicity__title { + font-family: Halyard Display, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 48px; + line-height: 60px; + + text-align: center; + + color: $darkBlue; +} + +.simplicity__text { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 21px; + line-height: 150%; + + text-align: center; + + color: $lightBlue; + margin-top: 40px; +} + +.button__container { + display: flex; + margin: 0 auto; + width: 148px; + margin-top: 40px; + + height: 50px; + background: #3751ff; + align-items: center; + justify-content: center; + @include Mobile { + margin-top: 20px; + } +} + +.button__link { + text-decoration: none; + color: $white; +} + +.simplicity__images { + display: flex; + margin-top: 37px; + overflow: hidden; + + @include Mobile { + height: 190px; + } + @include SmallPhone { + height: 190px; + } + @include Tablet { + height: 540px; + padding: 0 20px; + } + @include Notebook { + height: 540px; + overflow: hidden; + } + @include TheDesign { + height: 510px; + overflow: hidden; + width: 1500px; + } + @include FullHD { + height: 450px; + overflow: hidden; + width: 1920px; + justify-content: center; + } + @include LargeScreens { + overflow: hidden; + height: 600px; + width: 2560px; + justify-content: center; + } +} + +.images__examples { + height: 231px; + width: 311px; + filter: drop-shadow(0 4px 4px rgba(135, 146, 161, 0.08)); + border-radius: 18px; + -webkit-transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -o-transition: all 0.5s ease; + -ms-transition: all 0.5s ease; + transition: all 0.9s ease-in-out; + + &:hover { + border-radius: 50%; + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } + @include Mobile { + height: 65px; + width: 90px; + border-radius: 10px; + margin-bottom: 5px; + } + @include SmallPhone { + height: 65px; + width: 90px; + } + @include TheDesign { + width: 311px; + height: 250px; + } + @include FullHD { + width: 380px; + height: 200px; + } + @include LargeScreens { + width: 500px; + height: 350px; + } +} + +.images__column_first { + @include Notebook { + margin-top: 20px; + } +} + +.images__column_second { + margin-top: 120px; + @include Mobile { + margin-top: 50px; + } + @include SmallPhone { + margin-top: 40px; + } + @include Tablet { + margin-top: 130px; + overflow: hidden; + } + @include Notebook { + margin-top: 150px; + } + @include TheDesign { + margin-top: 120px; + } +} + +.images__column_third { + margin-top: 160px; + @include Mobile { + margin-top: 80px; + } + @include SmallPhone { + margin-top: 90px; + } + @include Notebook { + margin-top: 220px; + } + @include TheDesign { + margin-top: 190px; + } +} + +.images__column_fourth { + @include Mobile { + display: none; + } + @include SmallPhone { + margin-top: 40px; + } + @include Tablet { + display: none; + } + @include Notebook { + margin-top: 160px; + } + @include TheDesign { + margin-top: 120px; + } + @include FullHD { + margin-top: 100px; + } + @include LargeScreens { + margin-top: 50px; + } +} + +.images__column_fifth { + @include Mobile { + display: none; + } + @include SmallPhone { + margin-top: 30px; + } + @include Tablet { + display: none; + } + @include Notebook { + display: none; + } + @include TheDesign { + margin-top: 50px; + } + @include FullHD { + margin-top: 80px; + } + @include LargeScreens { + margin-top: 20px; + } +} + +.image1 { + background: url(/images/simplicity/browser1.png); + background-size: cover; +} + +.image2 { + background: url(/images/simplicity/browser2.png); + background-size: cover; +} + +.image3 { + background: url(/images/simplicity/browser3.png); + @include Mobile { + height: 29px; + } + @include Tablet { + height: 50px; + } + @include Notebook { + background-repeat: no-repeat; + } + @include FullHD { + background-repeat: no-repeat; + } + @include LargeScreens { + background-repeat: no-repeat; + } +} + +.image4 { + background: url(/images/simplicity/browser4.png); + background-size: cover; +} + +.image5 { + background: url(/images/simplicity/browser5.png); + background-size: contain; + background-repeat: no-repeat; +} + +.image7 { + background: url(/images/simplicity/browser6.png); + background-size: cover; +} + +.image8 { + background: url(/images/simplicity/browser7.png); + @include Mobile { + background: url(/images/simplicity/browser8.png); + background-size: cover; + } + @include Tablet { + background-repeat: no-repeat; + } + @include LargeScreens { + background-repeat: no-repeat; + background-size: 500px; + } +} + +.image6 { + @include Mobile { + display: none; + } + @include Tablet { + display: none; + } + @include Notebook { + background: url(/images/simplicity/browser6.png); + } +} + +.image9 { + @include Mobile { + display: none; + } + @include Tablet { + display: none; + } + @include Notebook { + background: url(/images/simplicity/browser9.png); + background-repeat: no-repeat; + } +} + +.image10 { + @include SmallPhone { + background: url(/images/simplicity/browser10.png); + background-repeat: no-repeat; + object-fit: cover; + background-size: 100%; + } + + @include Notebook { + background: url(/images/simplicity/browser10.png); + } + + @include TheDesign { + background: url(/images/simplicity/browser10.png); + } + @include FullHD { + background: url(/images/simplicity/browser10.png); + object-fit: contain; + background-repeat: no-repeat; + } + @include LargeScreens { + background: url(/images/simplicity/browser10.png); + background-size: cover; + } +} + +.image11 { + @include SmallPhone { + background: url(/images/simplicity/browser8.png); + background-size: 100%; + } + @include Notebook { + background: url(/images/simplicity/browser8.png); + } + @include TheDesign { + background: url(/images/simplicity/browser8.png); + } + @include FullHD { + background: url(/images/simplicity/browser8.png); + background-repeat: no-repeat; + } + + @include LargeScreens { + background: url(/images/simplicity/browser8.png); + background-size: cover; + } +} + +.image13 { + @include SmallPhone { + background: url(/images/simplicity/browser11.png); + background-repeat: no-repeat; + object-fit: cover; + background-size: 100%; + } + @include Notebook { + background: url(/images/simplicity/browser11.png); + } + @include TheDesign { + background: url(/images/simplicity/browser11.png); + background-repeat: no-repeat; + } + @include FullHD { + background: url(/images/simplicity/browser11.png); + background-repeat: no-repeat; + } + @include LargeScreens { + background: url(/images/simplicity/browser11.png); + background-size: cover; + } +} + +.image14 { + @include SmallPhone { + background: url(/images/simplicity/browser6.png); + background-size: 100%; + } + @include Notebook { + background: url(/images/simplicity/browser6.png); + } + @include TheDesign { + background: url(/images/simplicity/browser6.png); + } + @include FullHD { + background: url(/images/simplicity/browser6.png); + } + @include LargeScreens { + background: url(/images/simplicity/browser6.png); + background-size: cover; + } +} diff --git a/src/styles/trusted.scss b/src/styles/trusted.scss new file mode 100644 index 00000000..d4ad900b --- /dev/null +++ b/src/styles/trusted.scss @@ -0,0 +1,103 @@ +.trusted { + display: flex; + margin: 0 auto; + background: $white; + @include Mobile { + width: 280px; + } +} + +.trusted__logos { + display: flex; + margin: 0 auto; + align-items: center; + margin-top: 48px; + justify-content: center; + @include Mobile { + display: flex; + flex-direction: column; + width: 220px; + margin: 48px auto; + } + @include SmallPhone { + display: flex; + width: 220px; + flex-direction: column; + margin: 48px auto; + } + @include Tablet { + display: flex; + flex-wrap: wrap; + justify-content: center; + } +} + +.logos { + padding-right: 72px; + transition: all 0.5s ease-in-out; + &:hover { + transform: scale(1.3); + } + @include Mobile { + padding-right: 0; + padding-bottom: 25px; + } + @include SmallPhone { + align-items: center; + justify-content: center; + padding-bottom: 25px; + padding-right: 0; + } + @include Tablet { + padding-bottom: 20px; + } +} + +.trusted__container { + display: flex; + flex-direction: column; + margin: 90px auto 0; + @include Mobile { + padding: 0 20px; + } + @include Tablet { + width: 1024px; + display: flex; + flex-wrap: wrap; + margin: 150px auto 0; + } + @include Notebook { + margin: 200px auto 0; + } + @include TheDesign { + margin: 200px auto 0; + } + @include FullHD { + margin: 200px auto 0; + } + @include LargeScreens { + margin: 200px auto 0; + } +} + +.trusted__title { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 27px; + /* identical to box height, or 169% */ + + text-align: center; + + color: rgba(69, 88, 128, 0.5); + @include Mobile { + width: 220px; + } +} + +.trusted__links { + align-items: center; + justify-content: center; + margin: 0 auto; +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780..f29d7a80 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,45 @@ #{$_property}: $_toValue; } } + +@mixin Mobile { + @media (min-width: 320px) and (max-width: 639px) { + @content; + } +} + +@mixin SmallPhone { + @media (min-width: 640px) and (max-width: 1023px) { + @content; + } +} + +@mixin Tablet { + @media (min-width: 1024px) and (max-width: 1279px) { + @content; + } +} + +@mixin Notebook { + @media (min-width: 1280px) and (max-width: 1599px) { + @content; + } +} + +@mixin TheDesign { + @media (min-width: 1600px) and (max-width: 1919px) { + @content; + } +} + +@mixin FullHD { + @media (min-width: 1920px) and (max-width: 2559px) { + @content; + } +} + +@mixin LargeScreens { + @media (min-width: 2560px) { + @content; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ff..083c8f3d 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,4 @@ $c-gray: #eee; +$darkBlue: #1e266d; +$white: #fff; +$lightBlue: #455880; diff --git a/src/styles/whatever.scss b/src/styles/whatever.scss new file mode 100644 index 00000000..7beaaf5d --- /dev/null +++ b/src/styles/whatever.scss @@ -0,0 +1,214 @@ +.whatever { + background: $white; + @include Mobile { + display: flex; + margin: 0 auto; + width: 280px; + } + @include SmallPhone { + display: flex; + margin: 0 auto; + width: 620px; + } + @include Tablet { + display: flex; + margin: 0 auto; + } +} + +.whatever__container { + margin-top: 160px; + display: flex; + flex-direction: column; + height: 1000px; + @include Mobile { + width: 280px; + margin-top: 48px; + height: 1180px; + } + @include SmallPhone { + width: 620px; + margin-top: 48px; + height: 1280px; + } + @include Tablet { + width: 1024px; + margin-top: 80px; + } +} + +.whatever__title { + font-family: Halyard Display, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 48px; + line-height: 60px; + + text-align: center; + + color: $darkBlue; + @include Mobile { + font-size: 32px; + width: 280px; + } +} + +.whatever__photos { + display: flex; +} + +.whatever__block1 { + height: 1000px; + width: 800px; + @include Mobile { + width: 280px; + height: 300px; + } + @include SmallPhone { + width: 280px; + height: 300px; + } + @include Tablet { + height: 700px; + width: 600px; + } +} + +.whatever__block2 { + height: 1000px; + width: 800px; + @include Mobile { + width: 280px; + height: 300px; + } + @include SmallPhone { + width: 280px; + height: 300px; + } + @include Tablet { + height: 700px; + width: 400px; + } + @include Notebook { + width: 480px; + } +} + +.whatever__images { + position: relative; + margin: 0 auto; + background-image: url(/images/whatever/graphic.png); + height: 930px; + width: 580px; + transform: translate(0, -25%); + @include Mobile { + width: 280px; + background-size: 280px; + background-repeat: no-repeat; + margin-top: 50px; + height: 440px; + transform: translate(0, -55%); + } + @include SmallPhone { + width: 280px; + background-size: 280px; + background-repeat: no-repeat; + margin-top: 50px; + height: 440px; + transform: translate(0, -55%); + } + @include Tablet { + margin: 0; + } +} + +.whatever__image_2 { + position: absolute; + width: 182px; + height: 256px; + left: 420px; +} + +.whatever__image_3 { + position: absolute; + width: 470px; + height: 313px; + left: 280px; + top: 380px; +} + +.whatever__image_4 { + position: absolute; + width: 409px; + height: 612px; + left: 390px; + top: -60px; +} + +.whatever__positioning { + display: flex; + content: ""; + margin: 0 auto; + margin-top: 120px; + @include Mobile { + display: flex; + flex-direction: column; + } + @include SmallPhone { + display: flex; + flex-direction: column; + } +} + +.card__icon { + width: 58px; + height: 58px; +} + +.block2__card { + display: flex; + margin-bottom: 100px; + @include Mobile { + margin-bottom: 26px; + } + @include Tablet { + width: 300px; + } +} + +.card__text { + margin-left: 47px; + @include Mobile { + margin-left: 20px; + width: 240px; + } +} + +.card__title { + font-family: Halyard Display, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 22px; + + color: $darkBlue; + + width: 300px; + @include Mobile { + width: 200px; + } +} + +.card__paragraph { + font-family: Halyard Text, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 18px; + + color: $lightBlue; + width: 300px; + margin-top: 26px; + @include Mobile { + width: 200px; + margin-top: 8px; + } +}