Emakanat List Nearly Completed

Container Lacking The Background Floating Cubes

src/Containers/EmkanatList/EmakanatList.js

@@ -18,8 +18,11 @@ const EmkanatList = () =>{
                     {
                         EmkanatListData.map((e, 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>
+                                </div>
                             </li>
                         ))
                     }

src/Containers/EmkanatList/EmkanatList.css

@@ -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;
+}