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
+
+
+
+
+
+
+
+ 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
+
+
+
+
+
+
+
+
+
+
Design and Assets
+
+ Make your brand stand out with pixel-perfect design
+ crafted to perfection.
+
+
+
+
+
+
+
+
Easy Content
+
+ Import your demos or build pages visually. Bonus: All
+ images and illustrations included!
+
+
+
+
+
+
+
+
Fast and Reliable
+
+ No heavy-weight plugins. No builders. No unneccesary
+ file loading. Pure WordPress.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Simplicity meets innovative design
+
+
+ It's really easy to start using Digits.
+ Install the theme, choose a demo and
+ start designing the future of your business!
+
+
+
+
+
+
+
+
+
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?
+
+
+
+
+
+
+
+
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;E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;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;
+ }
+}