diff --git a/src/assets/css/aboutapp.css b/src/assets/css/aboutapp.css index 1db033b..83a1191 100644 --- a/src/assets/css/aboutapp.css +++ b/src/assets/css/aboutapp.css @@ -1,10 +1,11 @@ @media screen and (max-width:1200px) { + /* about app section */ .about_app_section .about_text .app_statstic li { width: 210px; padding-left: 20px; } - + .about_app_section .about_text .app_statstic li p:first-child { font-size: 30px; } @@ -13,76 +14,84 @@ @media screen and (max-width:992px) { - -/* about app section */ -.about_app_section .row { - flex-direction: column-reverse; -} -.about_app_section .about_img { - justify-content: flex-start; - margin-top: 75px; - margin-left: 0; -} + /* about app section */ + .about_app_section .row { + flex-direction: column-reverse; + } -.about_app_section .about_img::before { - left: 50%; -} + .about_app_section .about_img { + justify-content: flex-start; + margin-top: 75px; + margin-left: 0; + } -.about_app_section .about_img .screen_img { - margin-left: -170px; -} + .about_app_section .about_img::before { + left: 50%; + } -.about_app_section .about_text .app_statstic { - justify-content: flex-start; -} + .about_app_section .about_img .screen_img { + margin-left: -170px; + } -.about_app_section .about_text .app_statstic li { - width: 35%; - margin-right: 30px; -} + .about_app_section .about_text .app_statstic { + justify-content: flex-start; + } -.about_app_section .about_img::before { - left: 35%; -} + .about_app_section .about_text .app_statstic li { + width: 35%; + margin-right: 30px; + } + + .about_app_section .about_img::before { + left: 35%; + } } @media screen and (max-width:767px) { -/* about app section */ -.about_app_section .about_text, -.about_app_section .about_text .section_title { - text-align: center; + + /* about app section */ + .about_app_section .about_text, + .about_app_section .about_text .section_title { + text-align: center; + } + + .about_app_section .about_text .app_statstic { + margin-top: 0; + justify-content: space-between; + } + + .about_app_section .about_text .app_statstic li { + width: 48%; + margin-right: 0; + } + + .about_app_section .about_text .app_statstic li p:first-child { + font-size: 18px; + } + + .about_app_section .about_img { + margin: 0; + margin-top: 50px; + justify-content: center; + } + + .about_app_section .about_img::before { + width: 350px; + height: 350px; + } } -.about_app_section .about_text .app_statstic { - margin-top: 0; - justify-content: space-between; -} - -.about_app_section .about_text .app_statstic li { - width: 48%; - margin-right: 0; -} - -.about_app_section .about_text .app_statstic li p:first-child { - font-size: 18px; -} - -.about_app_section .about_img { - margin: 0; - margin-top: 50px; - justify-content: center; -} - -.about_app_section .about_img::before { - width: 350px; - height: 350px; -} +.row_am.about_app_section._ { + background: #fbf4fe; } @media screen and (max-width:479px) { + /* about app section */ - .about_app_section .about_img::before {left: 49%;} + .about_app_section .about_img::before { + left: 49%; + } } /* about app section */ @@ -153,7 +162,10 @@ } .section_title h2 { - font-size: 40px; + font-size: 44px; + letter-spacing: 2px; + line-height: 54px; + text-shadow: 0 4px 10px #0000004d; font-weight: 700; color: #32236F; } @@ -282,11 +294,27 @@ } @media screen and (max-width:767px) { + /* modern ui section */ - .modern_ui_section .ui_images {margin-top: 10px;} - .modern_ui_section .section_title {text-align: center;} - .modern_ui_section .design_block li {padding-left: 0; margin-bottom: 30px;} - .modern_ui_section .design_block li::before {position: relative; left: auto; top: auto; display: inline-block;} + .modern_ui_section .ui_images { + margin-top: 10px; + } + + .modern_ui_section .section_title { + text-align: center; + } + + .modern_ui_section .design_block li { + padding-left: 0; + margin-bottom: 30px; + } + + .modern_ui_section .design_block li::before { + position: relative; + left: auto; + top: auto; + display: inline-block; + } } @@ -328,9 +356,12 @@ } .modern_ui_section .design_block li h4 { - font-size: 20px; + font-size: 24px; + font-weight: 700; + padding-bottom: 7px; + text-shadow: 3px 4px 10px #0000004d; + color: #32236F; - font-weight: 600; margin-bottom: 8px; } diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 16588c9..6d940e3 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -166,7 +166,7 @@ transform: translate(-50%, -50%); width: 500px; height: 500px; - background-color: var(--bg-white); + background-color: #ffffff; border-radius: 100%; z-index: -1; } @@ -195,7 +195,7 @@ .about_app_section .about_text .app_statstic li { width: 248px; - background-color: var(--bg-white); + background-color: #fff; margin-bottom: 30px; display: flex; align-items: center; @@ -212,7 +212,7 @@ .about_app_section .about_text .app_statstic li p { margin-bottom: 0; line-height: 1; - color: var(--dark-purple); + color: #32236F; } .about_app_section .about_text .app_statstic li p:first-child { @@ -229,3 +229,7 @@ margin-top: 45px; margin-bottom: 45px; } + +.about_text{ + margin-top: 2rem; +} diff --git a/src/components/lnd/LndParts/AboutApp/Main.js b/src/components/lnd/LndParts/AboutApp/Main.js index 68dc44b..77375f1 100644 --- a/src/components/lnd/LndParts/AboutApp/Main.js +++ b/src/components/lnd/LndParts/AboutApp/Main.js @@ -10,7 +10,7 @@ import img4 from '../../../../assets/images/countries.png' const Main = ({ video, dark }) => { return ( <> -
+