Emakanat List Nearly Completed

Container Lacking The Background Floating Cubes
master
Pedram Keshavarzi 3 years ago
parent 90ec0b5887
commit dd18900382
  1. 5
      src/Containers/EmkanatList/EmakanatList.js
  2. 44
      src/Containers/EmkanatList/EmkanatList.css

@ -18,8 +18,11 @@ const EmkanatList = () =>{
{ {
EmkanatListData.map((e, index) => ( EmkanatListData.map((e, index) => (
<li key={`emkanNo${index}`}> <li key={`emkanNo${index}`}>
<h4>{e.title}</h4> <div className='bluryBackground'></div>
<div className='emkanText'>
<h4> <span></span> {e.title}</h4>
<p>{e.description}</p> <p>{e.description}</p>
</div>
</li> </li>
)) ))
} }

@ -0,0 +1,44 @@
.EmkanatList{
width:85%;
direction: rtl;
margin-bottom: 5em;
}
.EmkanatDes{
width: 50%;
margin-bottom: 50px;
}
.EmkanatDes p{
font-size: 13px;
}
.EmkanatListList ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
list-style: none;
}
.EmkanatListList ul li{
width:250px;
height: 130px;
margin-bottom: 35px;
backdrop-filter: blur(20px);
padding: 15px;
border:1px solid #F5F3F3;
border-radius: 11px;
}
.EmkanatListList ul li h4{
display: flex;
align-items: center;
}
.EmkanatListList ul li h4 span{
width:13px;
height: 13px;
border-radius: 50%;
margin-left: 5px;
background-color: #FBFB0D;
}
.EmkanatListList ul li p{
font-size: 12px;
}
Loading…
Cancel
Save