Gray Scaling for Trust Logos Done

master
Pedram Keshavarzi 3 years ago
parent 7e746ded59
commit cde382de8a
  1. 29
      src/Containers/TrustUs/trustUs.css
  2. 72
      src/Containers/TrustUs/trustUs.js

@ -1,22 +1,37 @@
.TrustContainer{
margin-top:25px;
margin:50px 0px;
display: flex;
direction: rtl;
align-items: center;
width:85%;
}
.TrustContainer div{
margin: 15px;
}
.TrustContainer .TrustTitle{
width:20%;
font-size: 18px;
width:18%;
font-size: 16px;
font-weight: bold;
padding-right: 10px;
border-right:5px solid gray;
}
.TrustContainer .TrustCostumersContainer{
display: flex;
width: 80%;
width: 82%;
justify-content: space-between;
align-items: center;
}
.TrustContainer .TrustCostumersContainer img{
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%);
cursor: pointer;
transition: all 0.2s;
}
.TrustContainer .TrustCostumersContainer img:hover{
filter: none; /* IE6-9 */
-webkit-filter: grayscale(0%);
}
.TrustContainer .TrustCostumersContainer img.active{
filter: none; /* IE6-9 */
-webkit-filter: grayscale(0%);
}

@ -13,33 +13,73 @@ import khaneRoshanLogo from '../../assets/images/khaneRoshanLogo.svg';
import ravinoLogo from '../../assets/images/ravino.svg';
const trustLogos = [
samanBankLogo,
iranKhodro,
bimehDayLogo,
toseSaderat,
danovinLogo,
bimehSaman,
vaziranDana,
khaneRoshanLogo,
ravinoLogo
];
const TrustUsContainer = () => {
return(
return (
<div className="TrustContainer">
<div className="TrustTitle">
مورد اعتماد
<br />
کسب و کارهای کوچک و بزرگ
کسب و کارهای کوچک و بزرگ
</div>
<div className="TrustCostumersContainer">
{
trustLogos.map((logo, index) => <img src={logo} key={`logo${index}`} />)
}
{
trustLogos.map((e, index) => <a href={e.websiteUrl} key={`logo${index}`}><img src={e.logo} className={e.className}/></a>)
}
</div>
</div>
);
};
const trustLogos = [
{
logo: iranKhodro,
websiteUrl: '#',
className: null
},
{
logo: samanBankLogo,
websiteUrl: '#',
className: 'active'
},
{
logo: bimehDayLogo,
websiteUrl: '#',
className: null
},
{
logo: toseSaderat,
websiteUrl: '#',
className: null
},
{
logo: danovinLogo,
websiteUrl: '#',
className: null
},
{
logo: bimehSaman,
websiteUrl: '#',
className: null
},
{
logo: vaziranDana,
websiteUrl: '#',
className: null
},
{
logo: khaneRoshanLogo,
websiteUrl: '#',
className: null
},
{
logo: ravinoLogo,
websiteUrl: '#',
className: null
},
];
export default TrustUsContainer;
Loading…
Cancel
Save