diff --git a/src/views/About/index.js b/src/views/About/index.js
index c19b105..5205732 100644
--- a/src/views/About/index.js
+++ b/src/views/About/index.js
@@ -20,6 +20,12 @@ const fontSize = {
h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
li: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
},
+ mobile: {
+ h1: window.innerWidth > maxMobileSize ? 30 : window.innerWidth / 18,
+ p: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 28,
+ h2: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 23,
+ li: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 28,
+ },
};
export default class About extends Component {
@@ -121,22 +127,26 @@ export default class About extends Component {
-
{fury.title}
-
{fury.text}
+
+
{fury.title}
+
+
{fury.text}
-
+
{this.props.absoluteImages.map((item, i) => (
))}
-
-
- {keywords.title}
-
+
+
+
+ {keywords.title}
+
+
{keywords.list.map((item, i) => (
- - {item}
+ - {item}
))}
@@ -145,14 +155,16 @@ export default class About extends Component {
-
-
- {advantages.title}
-
+
+
+
+ {advantages.title}
+
+
{advantages.list.map((item, i) => (
- - {item}
+ - {item}
))}
@@ -167,9 +179,33 @@ export default class About extends Component {
About.defaultProps = {
absoluteImages: [
- { class: "about__fury--left__1", imageUrl: aboutLg },
- { class: "about__fury--left__2", imageUrl: aboutMd },
- { class: "about__fury--left__3", imageUrl: aboutXs1 },
- { class: "about__fury--left__4", imageUrl: aboutXs2 },
+ {
+ class:
+ window.innerWidth > 1000
+ ? "about__fury--left__1"
+ : "mobile-about__images--1",
+ imageUrl: aboutLg,
+ },
+ {
+ class:
+ window.innerWidth > 1000
+ ? "about__fury--left__2"
+ : "mobile-about__images--2",
+ imageUrl: aboutMd,
+ },
+ {
+ class:
+ window.innerWidth > 1000
+ ? "about__fury--left__3"
+ : "mobile-about__images--3",
+ imageUrl: aboutXs1,
+ },
+ {
+ class:
+ window.innerWidth > 1000
+ ? "about__fury--left__4"
+ : "mobile-about__images--4",
+ imageUrl: aboutXs2,
+ },
],
};
diff --git a/src/views/About/index.scss b/src/views/About/index.scss
index e41f8f5..9c0baaa 100644
--- a/src/views/About/index.scss
+++ b/src/views/About/index.scss
@@ -138,6 +138,119 @@
margin: 0px auto;
padding : 0px 10px 40px;
direction: rtl;
- padding-top: 70px;
+ padding-top: 90px;
overflow-x: hidden;
+ &__fury{
+ h1 {
+ display: inline;
+ letter-spacing: -2px;
+ font-family: numeralBold;
+ background-color: #00CC69;
+ color: white;
+ }
+ p {
+ margin-top: 10px;
+ text-align: justify;
+ font-family: numeralLight;
+ color: #6d6d6d;
+ letter-spacing: -1px;
+ }
+ }
+ &__images{
+ position: relative;
+ height: 330px;
+ width: 100%;
+ & img{
+ position: absolute;
+
+ }
+ &--1{
+ top:0px;
+ left: calc(100vw / 8);
+ z-index: 100;
+ height: calc(100vw - 100px);
+ width: calc(100vw - 100px);
+ max-width: 275px;
+ max-height: 275px;
+
+ }
+ &--2{
+ right: -20px;
+ bottom: 70px;
+ z-index: 150;
+ height: calc(100vw / 2.5);
+ width: calc(100vw / 2.5);
+ max-width: 150px;
+ max-height: 150px;
+
+ }
+ &--3{
+ bottom: -10px;
+ right: -10px;
+ z-index: 200;
+ height: calc(100vw / 3);
+ width: calc(100vw / 3);
+ max-width: 125px;
+ max-height: 125px;
+
+ }
+ &--4{
+ top: 50px;
+ left: -20px;
+ z-index: 150;
+ height: calc(100vw / 3);
+ width: calc(100vw / 3);
+ max-width: 125px;
+ max-height: 125px;
+ }
+ }
+ &__keys{
+ transform : translateY(-40px);
+ h2 {
+ display: inline;
+ font-family: numeralBold;
+ background-color: #00CC69;
+ color: white;
+ }
+ ul {
+ margin: 0px;
+ list-style: none;
+ padding: 0px;
+ margin-top: 5px;
+ li {
+ display: inline;
+ border-bottom: 2px solid #00CC69;
+ font-family: numeralLight;
+ color: #6d6d6d;
+ }
+ }
+ }
+ &__video{
+ img {
+ width: 100%;
+ }
+ }
+ &__advantages{
+ margin-top: 30px;
+ h1 {
+ display: inline;
+ font-family: numeralBold;
+ background-color: #00CC69;
+ color: white;
+ // margin-bottom: 20px;
+ }
+ ul {
+ margin: 0px;
+ list-style: none;
+ padding: 0px;
+ margin-top: 5px;
+ li {
+ display: inline;
+ text-align: justify;
+ font-family: numeralLight;
+ color: #6d6d6d;
+ margin-bottom: 5px;
+ }
+ }
+ }
}
\ No newline at end of file