reza added about mobile

master
Reza_ashrafi 3 years ago
parent 35713c49e2
commit 1fb55dd23f
  1. 62
      src/views/About/index.js
  2. 115
      src/views/About/index.scss

@ -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 {
<div className="mobile-about d-flex flex-column">
<Navbar page={"about"} />
<div className="mobile-about__fury d-flex flex-column">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{fury.title}</h1>
<p style={{ fontSize: fontSize.desktop.p }}>{fury.text}</p>
<div>
<h1 style={{ fontSize: fontSize.mobile.h1 }}>{fury.title}</h1>
</div>
<p style={{ fontSize: fontSize.mobile.p }}>{fury.text}</p>
</div>
<div className="mobile-about__images-- d-flex">
<div className="mobile-about__images d-flex">
{this.props.absoluteImages.map((item, i) => (
<img src={item.imageUrl} className={item.class} alt="عکس" />
))}
</div>
<div className="right-bottom align-self-end">
<h2 style={{ fontSize: fontSize.desktop.h2 }}>
<div className="mobile-about__keys align-self-end">
<div>
<h2 style={{ fontSize: fontSize.mobile.h2 }}>
{keywords.title}
</h2>
</div>
<ul>
{keywords.list.map((item, i) => (
<Fragment key={i}>
<li style={{ fontSize: fontSize.desktop.li }}>{item}</li>
<li style={{ fontSize: fontSize.mobile.li }}>{item}</li>
<br />
</Fragment>
))}
@ -145,14 +155,16 @@ export default class About extends Component {
<div className="mobile-about__video d-flex">
<img src={pic} alt={"عکس"} />
</div>
<div className="mobile-about__advantages--left">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>
<div className="mobile-about__advantages d-flex flex-column">
<div>
<h1 style={{ fontSize: fontSize.mobile.h1 }}>
{advantages.title}
</h1>
</div>
<ul>
{advantages.list.map((item, i) => (
<Fragment key={i}>
<li style={{ fontSize: fontSize.desktop.li }}>{item}</li>
<li style={{ fontSize: fontSize.mobile.li }}>{item}</li>
<br />
</Fragment>
))}
@ -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,
},
],
};

@ -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;
}
}
}
}
Loading…
Cancel
Save