diff --git a/index.html b/index.html
index 083bfd220bdddc3204f5dbf74f7d1b5799ec2cd0..05e2222977dde49998c455d1acc537c81385a87b 100644
--- a/index.html
+++ b/index.html
@@ -72,4 +72,338 @@
                 </div>
         </div>
      </div>
-       <!-- HERO -->
\ No newline at end of file
+       <!-- HERO -->
+        <!-- FILTERS -->
+        <div class="container-fluid filters-container">
+            <div class="row filters bg-dark-gray">
+                 <div id="bg-coding" class="col-12 col-lg-4 filter-border checkbox-container active p-3">
+                  
+                        <input type="checkbox" id="filter-coding">
+                        <label for="filter-coding">
+    
+                            <div class="row">
+                                <div class="col-9 ml-3 mt-2">
+                              <h4 class="t-white  text-capitalize">проект на студентите по академија за програмирање</h4>
+                          </div>
+                          <div class="col-1 ml-5 mt-2">
+                              <i class="fa-solid fa-circle-check fa-3x"></i>
+                          </div>
+                          
+                        </label> 
+                  
+                </div>
+                    </div>
+                          
+                    <div id="bg-design" class="col-12 col-lg-4 filter-border checkbox-container active p-3">
+                  
+                        <input type="checkbox" id="filter-design">
+                        
+    
+                        <label for="filter-design">
+    
+                            <div class="row">
+                                <div class="col-9 ml-3 mt-2">
+                              <h4 class="t-white text-capitalize">проекти на студентите по академија за дизајн</h4>
+                          </div>
+                          <div class="col-1 ml-5 mt-2">
+                              <i class="fa-solid fa-circle-check fa-3x"></i>
+                          </div>
+                          
+                        </label> 
+                  
+                </div>
+                    </div>
+    
+    
+                    <div id="bg-marketing" class="col-12 col-lg-4 checkbox-container active p-3">
+                  
+                        <input type="checkbox" id="filter-marketing">
+                        
+    
+                        <label for="filter-marketing">
+    
+                            <div class="row">
+                                <div class="col-9 ml-3 mt-2">
+                              <h4 class="t-white text-capitalize">проекти на студентите по академија за маркетинг</h4>
+                          </div>
+                          <div class="col-1 ml-5 mt-2">
+                              <i class="fa-solid fa-circle-check fa-3x"></i>
+                          </div>
+                          
+                        </label> 
+                  
+                </div>
+                    </div>
+    
+                 </div>
+                 </div>
+             <!-- FILTERS -->
+           <!-- CARDS -->
+    
+        <div class="cards container-fluid p-4 bg-warning">
+            <h2 class="proekti text-capitalize text-center m-5">проекти</h2>
+            <div class="row justify-content-center">
+               
+          <a href="#">  <div class="card coding col-10 col-md-5 col-lg-3 mr-5 mb-5 p-0">
+            <img src="./images/coding/coding-1.jpeg" class="card-img-top w-100" alt="Card Image">
+            <div class="card-body">
+                <div class="badge bg-warning p-2 mb-3">Академиза за programiranje</div>
+                <h5 class="card-title text-capitalize mb-3">име на проектот за програмирање<br> во две линии</h5>
+                <h6 class="card-text mb-3">краток опис во кој студентите ке можат да опишат за што се работи во проектот. </h6>
+               <p> <small class="bold mb-3">октомври-јануари 2023</small></p>
+               <div class="text-right mt-4 mb-3">
+                <a href="vraboti.html" class="button text-white text-capitalize px-5 py-3">дознај повеќе</a>
+               </div>
+            </div>
+        </div></a>
+           
+            <a href="#"><div class="card coding col-10 col-md-5 col-lg-3 mr-5 mb-5 p-0">
+                <img src="./images/coding/coding-2.jpeg" class="card-img-top" alt="Card Image">
+                <div class="card-body">
+                    <div class="badge bg-warning p-2 mb-3">Академиза за programiranje</div>
+                    <h5 class="card-title text-capitalize mb-3">име на проектот за програмирање<br> во две линии</h5>
+                    <h6 class="card-text mb-3">краток опис во кој студентите ке можат да опишат за што се работи во проектот. </h6>
+                   <p> <small class="bold mb-3">октомври-јануари 2023</small></p>
+                   <div class="text-right mt-4 mb-3">
+                    <a href="vraboti.html" class="button text-white text-capitalize px-5 py-3">дознај повеќе</a>
+                   </div>
+                </div>
+            </div></a>
+    
+           <a href="#"> <div class="card coding col-10 col-md-5 col-lg-3 mr-5 mb-5 p-0">
+            <img src="./images/coding/coding-3.jpg" class="card-img-top w-100" alt="Card Image">
+            <div class="card-body">
+                <div class="badge bg-warning p-2 mb-3">Академиза за programiranje</div>
+                <h5 class="card-title text-capitalize mb-3">име на проектот за програмирање<br> во две линии</h5>
+                <h6 class="card-text mb-3">краток опис во кој студентите ке можат да опишат за што се работи во проектот. </h6>
+               <p> <small class="bold mb-3">октомври-јануари 2023</small></p>
+               <div class="text-right mt-4 mb-3">
+                <a href="vraboti.html" class="button text-white text-capitalize px-5 py-3">дознај повеќе</a>
+               </div>
+            </div>
+        </div></a>
+    
+           <a href="#"> <div class="card coding col-10 col-md-5 col-lg-3 mr-5 mb-5 p-0">
+            <img src="./images/coding/coding-4.jpeg" class="card-img-top w-100" alt="Card Image">
+            <div class="card-body">
+                <div class="badge bg-warning p-2 mb-3">Академиза за programiranje</div>
+                <h5 class="card-title text-capitalize mb-3">име на проектот за програмирање<br> во две линии</h5>
+                <h6 class="card-text mb-3">краток опис во кој студентите ке можат да опишат за што се работи во проектот. </h6>
+               <p> <small class="bold mb-3">октомври-јануари 2023</small></p>
+               <div class="text-right mt-4 mb-3">
+                <a href="vraboti.html" class="button text-white text-capitalize px-5 py-3">дознај повеќе</a>
+               </div>
+            </div>
+        </div></a>
+    
+            <a href="#"><div class="card coding col-10 col-md-5 col-lg-3 mr-5 mb-5 p-0">
+                <img src="./images/coding/coding-5.png" class="card-img-top w-100" alt="Card Image">
+                <div class="card-body">
+                    <div class="badge bg-warning p-2 mb-3">Академиза за programiranje</div>
+                    <h5 class="card-title text-capitalize mb-3">име на проектот за програмирање<br> во две линии</h5>
+                    <h6 class="card-text mb-3">краток опис во кој студентите ке можат да опишат за што се работи во проектот. </h6>
+                   <p> <small class="bold mb-3">октомври-јануари 2023</small></p>
+                   <div class="text-right mt-4 mb-3">
+                    <a href="vraboti.html" class="button text-white text-capitalize px-5 py-3">дознај повеќе</a>
+                   </div>
+                </div>
+            </div></a>
+    
+            <a href="#"><div class="card coding col-10 col-md-5 col-lg-3 mr-5 mb-5 p-0">
+                <img src="./images/coding/coding-6.jpeg" class="card-img-top w-100" alt="Card Image">
+                <div class="card-body">
+                    <div class="badge bg-warning p-2 mb-3">Академиза за programiranje</div>
+                    <h5 class="card-title text-capitalize mb-3">име на проектот за програмирање<br> во две линии</h5>
+                    <h6 class="card-text mb-3">краток опис во кој студентите ке можат да опишат за што се работи во проектот. </h6>
+                   <p> <small class="bold mb-3">октомври-јануари 2023</small></p>
+                   <div class="text-right mt-4 mb-3">
+                    <a href="vraboti.html" class="button text-white text-capitalize px-5 py-3">дознај повеќе</a>
+                   </div>
+                </div>
+            </div></a>
+    
+            <a href="#"><div class="card coding col-10 col-md-5 col-lg-3 mr-5 mb-5 p-0">
+                <img src="./images/coding/coding-7.jpeg" class="card-img-top w-100" alt="Card Image">
+                <div class="card-body">
+                    <div class="badge bg-warning p-2 mb-3">Академиза за programiranje</div>
+                    <h5 class="card-title text-capitalize mb-3">име на проектот за програмирање<br> во две линии</h5>
+                    <h6 class="card-text mb-3">краток опис во кој студентите ке можат да опишат за што се работи во проектот. </h6>
+                   <p> <small class="bold mb-3">октомври-јануари 2023</small></p>
+                   <div class="text-right mt-4 mb-3">
+                    <a href="vraboti.html" class="button text-white text-capitalize px-5 py-3">дознај повеќе</a>
+                   </div>
+                </div>
+            </div></a>
+    
+            <a href="#"><div class="card coding col-10 col-md-5 col-lg-3 mr-5 mb-5 p-0">
+                <img src="./images/coding/coding-8.jpeg" class="card-img-top w-100" alt="Card Image">
+                <div class="card-body">
+                    <div class="badge bg-warning p-2 mb-3">Академиза за programiranje</div>
+                    <h5 class="card-title text-capitalize mb-3">име на проектот за програмирање<br> во две линии</h5>
+                    <h6 class="card-text mb-3">краток опис во кој студентите ке можат да опишат за што се работи во проектот. </h6>
+                   <p> <small class="bold mb-3">октомври-јануари 2023</small></p>
+                   <div class="text-right mt-4 mb-3">
+                    <a href="vraboti.html" class="button text-white text-capitalize px-5 py-3">дознај повеќе</a>
+                   </div>
+                </div>
+            </div></a>
+            <a href="#"><div class="card coding col-10 col-md-5 col-lg-3 mr-5 mb-5 p-0">
+                <img src="./images/coding/coding-9.avif" class="card-img-top w-100" alt="Card Image">
+                <div class="card-body">
+                    <div class="badge bg-warning p-2 mb-3">Академиза за programiranje</div>
+                    <h5 class="card-title text-capitalize mb-3">име на проектот за програмирање<br> во две линии</h5>
+                    <h6 class="card-text mb-3">краток опис во кој студентите ке можат да опишат за што се работи во проектот. </h6>
+                   <p> <small class="bold mb-3">октомври-јануари 2023</small></p>
+                   <div class="text-right mt-4 mb-3">
+                    <a href="vraboti.html" class="button text-white text-capitalize px-5 py-3">дознај повеќе</a>
+                   </div>
+                </div>
+            </div></a>
+    
+           <a href="#"> <div class="card coding col-10 col-md-5 col-lg-3 mr-5 mb-5 p-0">
+            <img src="./images/coding/coding-10.jpeg" class="card-img-top w-100" alt="Card Image">
+            <div class="card-body">
+                <div class="badge bg-warning p-2 mb-3">Академиза за programiranje</div>
+                <h5 class="card-title text-capitalize mb-3">име на проектот за програмирање<br> во две линии</h5>
+                <h6 class="card-text mb-3">краток опис во кој студентите ке можат да опишат за што се работи во проектот. </h6>
+               <p> <small class="bold mb-3">октомври-јануари 2023</small></p>
+               <div class="text-right mt-4 mb-3">
+                <a href="vraboti.html" class="button text-white text-capitalize px-5 py-3">дознај повеќе</a>
+               </div>
+            </div>
+        </div></a>
+           
+            <a href="#"><div class="card marketing col-10 col-md-5 col-lg-3 mr-5 mb-5 p-0">
+                <img src="./images/marketing/marketing-1.jpeg" class="card-img-top w-100" alt="Card Image">
+                <div class="card-body">
+                    <div class="badge bg-warning p-2 mb-3"><small>Академиза за Маркетинг</small></div>
+                    <h5 class="card-title text-capitalize mb-3">име на проектот за Маркетинг<br> во две линии</h5>
+                    <p class="card-text mb-3">краток опис во кој студентите ке можат да опишат за што се работи во проектот.</p>
+                   <p> <small class="bold mb-3">октомври-јануари 2023</small></p>
+                   <div class="text-right mt-4 mb-3">
+                    <a href="vraboti.html" class="button text-white text-capitalize px-5 py-3">дознај повеќе</a>
+                   </div>
+                </div>
+            </div></a>
+           
+            <a href="#"><div class="card marketing col-10 col-md-5 col-lg-3 mr-5 mb-5 p-0">
+                <img src="./images/marketing/marketing-2.webp" class="card-img-top w-100" alt="Card Image">
+                <div class="card-body">
+                    <div class="badge bg-warning p-2 mb-3"><small>Академиза за Маркетинг</small></div>
+                    <h5 class="card-title text-capitalize mb-3">име на проектот за Маркетинг<br> во две линии</h5>
+                    <p class="card-text mb-3">краток опис во кој студентите ке можат да опишат за што се работи во проектот.</p>
+                   <p> <small class="bold mb-3">октомври-јануари 2023</small></p>
+                   <div class="text-right mt-4 mb-3">
+                    <a href="vraboti.html" class="button text-white text-capitalize px-5 py-3">дознај повеќе</a>
+                   </div>
+                </div>
+            </div></a>
+    
+            <a href="#"><div class="card marketing col-10 col-md-5 col-lg-3 mr-5 mb-5 p-0">
+                <img src="./images/marketing/marketing-3.webp" class="card-img-top w-100" alt="Card Image">
+                <div class="card-body">
+                    <div class="badge bg-warning p-2 mb-3"><small>Академиза за Маркетинг</small></div>
+                    <h5 class="card-title text-capitalize mb-3">име на проектот за Маркетинг<br> во две линии</h5>
+                    <p class="card-text mb-3">краток опис во кој студентите ке можат да опишат за што се работи во проектот.</p>
+                   <p> <small class="bold mb-3">октомври-јануари 2023</small></p>
+                   <div class="text-right mt-4 mb-3">
+                 <a href="vraboti.html" class="button text-white text-capitalize px-5 py-3">дознај повеќе</a>
+                   </div>
+                </div>
+            </div></a>
+    
+            <a href="#"><div class="card marketing col-10 col-md-5 col-lg-3 mr-5 mb-5 p-0">
+                <img src="./images/marketing/marketing-4.jpeg" class="card-img-top w-100" alt="Card Image">
+                <div class="card-body">
+                    <div class="badge bg-warning p-2 mb-3"><small>Академиза за Маркетинг</small></div>
+                    <h5 class="card-title text-capitalize mb-3">име на проектот за Маркетинг<br> во две линии</h5>
+                    <p class="card-text mb-3">краток опис во кој студентите ке можат да опишат за што се работи во проектот.</p>
+                   <p> <small class="bold mb-3">октомври-јануари 2023</small></p>
+                   <div class="text-right mt-4 mb-3">
+                    <a href="vraboti.html" class="button text-white text-capitalize px-5 py-3">дознај повеќе</a>
+                   </div>
+                </div>
+            </div></a>
+    
+            <a href="#"><div class="card marketing col-10 col-md-5 col-lg-3 mr-5 mb-5 p-0">
+                <img src="./images/marketing/marketing-5.jpeg" class="card-img-top w-100" alt="Card Image">
+                <div class="card-body">
+                    <div class="badge bg-warning p-2 mb-3"><small>Академиза за Маркетинг</small></div>
+                    <h5 class="card-title text-capitalize mb-3">име на проектот за Маркетинг<br> во две линии</h5>
+                    <p class="card-text mb-3">краток опис во кој студентите ке можат да опишат за што се работи во проектот.</p>
+                   <p> <small class="bold mb-3">октомври-јануари 2023</small></p>
+                   <div class="text-right mt-4 mb-3">
+                    <a href="vraboti.html" class="button text-white text-capitalize px-5 py-3">дознај повеќе</a>
+                   </div>
+                </div>
+            </div></a>
+    
+        <a href="#">    <div class="card marketing col-10 col-md-5 col-lg-3 mr-5 mb-5 p-0">
+            <img src="./images/marketing/marketing-6.jpeg" class="card-img-top w-100" alt="Card Image">
+            <div class="card-body">
+                <div class="badge bg-warning p-2 mb-3"><small>Академиза за Маркетинг</small></div>
+                <h5 class="card-title text-capitalize mb-3">име на проектот за Маркетинг<br> во две линии</h5>
+                <p class="card-text mb-3">краток опис во кој студентите ке можат да опишат за што се работи во проектот.</p>
+               <p> <small class="bold mb-3">октомври-јануари 2023</small></p>
+               <div class="text-right mt-4 mb-3">
+                <a href="vraboti.html" class="button text-white text-capitalize px-5 py-3">дознај повеќе</a>
+               </div>
+            </div>
+        </div></a>
+    
+          <a href="#">  <div class="card design col-10 col-md-5 col-lg-3 mr-5 mb-5 p-0">
+            <img src="./images/design/design-1.webp" class="card-img-top w-100" alt="Card Image">
+            <div class="card-body">
+                <div class="badge bg-warning p-2 mb-3"><small>Академија за дизајн</small></div>
+                <h5 class="card-title text-capitalize mb-3">име на проектот за дизајн<br> во две линии</h5>
+                <p class="card-text mb-3">краток опис во кој студентите ке можат да опишат за што се работи во проектот.</p>
+               <p> <small class="bold mb-3">октомври-јануари 2023</small></p>
+               <div class="text-right mt-4 mb-3">
+                <a href="vraboti.html" class="button text-white text-capitalize px-5 py-3">дознај повеќе</a>
+               </div>
+            </div>
+        </div></a>
+    
+           <a href="#"> <div class="card design col-10 col-md-5 col-lg-3 mr-5 mb-5 p-0">
+            <img src="./images/design/design-2.webp" class="card-img-top w-100" alt="Card Image">
+            <div class="card-body">
+                <div class="badge bg-warning p-2 mb-3"><small>Академија за дизајн</small></div>
+                <h5 class="card-title text-capitalize mb-3">име на проектот за дизајн<br> во две линии</h5>
+                <p class="card-text mb-3">краток опис во кој студентите ке можат да опишат за што се работи во проектот.</p>
+               <p> <small class="bold mb-3">октомври-јануари 2023</small></p>
+               <div class="text-right mt-4 mb-3">
+                <a href="vraboti.html" class="button text-white text-capitalize px-5 py-3">дознај повеќе</a>
+               </div>
+            </div>
+        </div></a>
+    
+            <a href="#"><div class="card design col-10 col-md-5 col-lg-3 mr-5 mb-5 p-0">
+                <img src="./images/design/design-3.jpeg" class="card-img-top w-100" alt="Card Image">
+                <div class="card-body">
+                    <div class="badge bg-warning p-2 mb-3"><small>Академија за дизајн</small></div>
+                    <h5 class="card-title text-capitalize mb-3">име на проектот за дизајн<br> во две линии</h5>
+                    <p class="card-text mb-3">краток опис во кој студентите ке можат да опишат за што се работи во проектот.</p>
+                   <p> <small class="bold mb-3">октомври-јануари 2023</small></p>
+                   <div class="text-right mt-4 mb-3">
+                    <a href="vraboti.html" class="button text-white text-capitalize px-5 py-3">дознај повеќе</a>
+                   </div>
+                </div>
+            </div></a>
+    
+            <a href="#"><div class="card design col-10 col-md-5 col-lg-3 mr-5 mb-5 p-0">
+                <img src="./images/design/design-4.jpeg" class="card-img-top w-100" alt="Card Image">
+                <div class="card-body">
+                    <div class="badge bg-warning p-2 mb-3"><small>Академија за дизајн</small></div>
+                    <h5 class="card-title text-capitalize mb-3">име на проектот за дизајн<br> во две линии</h5>
+                    <p class="card-text mb-3">краток опис во кој студентите ке можат да опишат за што се работи во проектот.</p>
+                   <p> <small class="bold mb-3">октомври-јануари 2023</small></p>
+                   <div class="text-right mt-4 mb-3">
+                    <a href="vraboti.html" class="button text-white text-capitalize px-5 py-3">дознај повеќе</a>
+                   </div>
+                </div>
+            </div></a>
+          
+           </div>
+        <div class="text-center text-white bold" id="loadMoreBtn" ><button class="button bold text-white">Load More</button></div>
+        </div>
+         <!-- CARDS -->
\ No newline at end of file