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{ .TrustContainer{
margin-top:25px; margin:50px 0px;
display: flex; display: flex;
direction: rtl; direction: rtl;
align-items: center; align-items: center;
width:85%; width:85%;
} }
.TrustContainer div{
margin: 15px;
}
.TrustContainer .TrustTitle{ .TrustContainer .TrustTitle{
width:20%; width:18%;
font-size: 18px; font-size: 16px;
font-weight: bold; font-weight: bold;
padding-right: 10px; padding-right: 10px;
border-right:5px solid gray; border-right:5px solid gray;
} }
.TrustContainer .TrustCostumersContainer{ .TrustContainer .TrustCostumersContainer{
display: flex; display: flex;
width: 80%; width: 82%;
justify-content: space-between; 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'; import ravinoLogo from '../../assets/images/ravino.svg';
const trustLogos = [
samanBankLogo,
iranKhodro,
bimehDayLogo,
toseSaderat,
danovinLogo,
bimehSaman,
vaziranDana,
khaneRoshanLogo,
ravinoLogo
];
const TrustUsContainer = () => { const TrustUsContainer = () => {
return( return (
<div className="TrustContainer"> <div className="TrustContainer">
<div className="TrustTitle"> <div className="TrustTitle">
مورد اعتماد مورد اعتماد
<br /> <br />
کسب و کارهای کوچک و بزرگ کسب و کارهای کوچک و بزرگ
</div> </div>
<div className="TrustCostumersContainer"> <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>
</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; export default TrustUsContainer;
Loading…
Cancel
Save