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