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