diff --git a/index.html b/index.html index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..a757929c6803103157f816c48bd68a05ec69bab0 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,415 @@ +<!DOCTYPE html> +<html> + <head> + <title>Brainster Labs</title> + <meta charset="utf-8" /> + <meta name="keywords" content="" /> + <meta name="description" content="" /> + <meta name="author" content="" /> + <meta name="viewport" content="width=device-width,initial-scale=1.0" /> + + <!-- Latest compiled and minified Bootstrap 4.6 CSS --> + <link + rel="stylesheet" + href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" + integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" + crossorigin="anonymous" + /> + <!-- CSS script --> + <link rel="stylesheet" href="./css/main.css" /> + <!-- Latest Font-Awesome CDN --> + <link + rel="stylesheet" + href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" + integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" + crossorigin="anonymous" + referrerpolicy="no-referrer" + /> + </head> + <body> + <header> + <nav class="navbar navbar-expand-lg"> + <a class="navbar-brand" href="index.html" + ><img src="./img/Logo.png" id="navbarLogo" class="logo" alt="logo" + /></a> + <button + class="navbar-toggler" + type="button" + data-toggle="collapse" + data-target="#navbarSupportedContent" + aria-controls="navbarSupportedContent" + aria-expanded="false" + aria-label="Toggle navigation" + > + <span><i class="fa-solid fa-bars fa-2x"></i></span> + </button> + + <div class="collapse navbar-collapse" id="navbarSupportedContent"> + <ul class="navbar-nav text-lg-center m-auto"> + <li class="nav-item"> + <a + class="nav-link transition" + href="./comming-soon.html" + target="_blank" + >Ðкадемија за Маркетинг</a + > + </li> + <li class="nav-item"> + <a + class="nav-link transition" + href="./comming-soon.html" + target="_blank" + >Ðкадемија за Програмирање</a + > + </li> + <li class="nav-item"> + <a + class="nav-link transition" + href="./comming-soon.html" + target="_blank" + >Ðкадемија за Data Science</a + > + </li> + <li class="nav-item"> + <a + class="nav-link transition" + href="./comming-soon.html" + target="_blank" + >Ðкадемија за Дизајн</a + > + </li> + </ul> + <ul class="navbar-nav"> + <li class="nav-item"> + <a class="btn" href="./form.html" target="_blank" + >Вработи наш Ñтудент</a + > + </li> + </ul> + </div> + </nav> + <div class="banner"> + <div class="inner-banner"> + <h1>Brainster Labs</h1> + </div> + </div> + </header> + <main> + <div class="filter" id="filter-cards"> + <label for="marketing-cards" + >Проекти на Ñтуденти по академијата за Маркетинг + <input type="checkbox" id="marketing-cards" /> + <i class="fas fa-check-circle fa-lg"></i> + </label> + <label for="coding-cards"> + Проекти на Ñтуденти по академијата за Програмирање + <input type="checkbox" id="coding-cards" /> + <i class="fas fa-check-circle fa-lg"></i + ></label> + <label for="design-cards" + >Проекти на Ñтуденти по академијата за Дизајн + <input type="checkbox" id="design-cards" /> + <i class="fas fa-check-circle fa-lg"></i + ></label> + </div> + <div class="projects"> + <div class="projects-inner"> + <h2>Проекти</h2> + <div class="card-container"> + <a href="#" target="_blank" class="marketing cards"> + <img src="./img/marketing1.jpeg" alt="Marketing project" /> + <div class="card-inner"> + <p class="badge">Ðкадемија за Маркетинг</p> + <h3>Име на проектот Ñтои овде во две линии</h3> + <p> + Краток Ð¾Ð¿Ð¸Ñ Ð²Ð¾ кој Ñтудентите ќе можат да опишат за што Ñе + работи во проектот + </p> + <small>Ðприл - Октомври 2019</small> + <button class="btn">Дознај повеќе</button> + </div> + </a> + <a href="#" target="_blank" class="marketing cards"> + <img src="./img/marketing2.jpeg" alt="marketing card" /> + <div class="card-inner"> + <p class="badge">Ðкадемија за Маркетинг</p> + <h3>Име на проектот Ñтои овде во две линии</h3> + <p> + Краток Ð¾Ð¿Ð¸Ñ Ð²Ð¾ кој Ñтудентите ќе можат да опишат за што Ñе + работи во проектот + </p> + <small>Ðприл - Октомври 2019</small> + <button class="btn">Дознај повеќе</button> + </div> + </a> + <a href="#" target="_blank" class="marketing cards"> + <img src="./img/marketing3.jpeg" alt="marketing card" /> + <div class="card-inner"> + <p class="badge">Ðкадемија за Маркетинг</p> + <h3>Име на проектот Ñтои овде во две линии</h3> + <p> + Краток Ð¾Ð¿Ð¸Ñ Ð²Ð¾ кој Ñтудентите ќе можат да опишат за што Ñе + работи во проектот + </p> + <small>Ðприл - Октомври 2019</small> + <button class="btn">Дознај повеќе</button> + </div> + </a> + <a href="#" target="_blank" class="marketing cards"> + <img src="./img/marketing4.jpeg" alt="marketing card" /> + <div class="card-inner"> + <badge class="badge">Ðкадемија за Маркетинг</badge> + <h3>Име на проектот Ñтои овде во две линии</h3> + <p> + Краток Ð¾Ð¿Ð¸Ñ Ð²Ð¾ кој Ñтудентите ќе можат да опишат за што Ñе + работи во проектот + </p> + <small>Ðприл - Октомври 2019</small> + <button class="btn">Дознај повеќе</button> + </div> + </a> + <a href="#" target="_blank" class="marketing cards"> + <img src="./img/marketing5.jpeg" alt="marketing card" /> + <div class="card-inner"> + <p class="badge">Ðкадемија за Маркетинг</p> + <h3>Име на проектот Ñтои овде во две линии</h3> + <p> + Краток Ð¾Ð¿Ð¸Ñ Ð²Ð¾ кој Ñтудентите ќе можат да опишат за што Ñе + работи во проектот + </p> + <small>Ðприл - Октомври 2019</small> + <button class="btn">Дознај повеќе</button> + </div> + </a> + <a href="#" target="_blank" class="marketing cards"> + <img src="./img/marketing6.jpeg" alt="marketing card" /> + <div class="card-inner"> + <p class="badge">Ðкадемија за Маркетинг</p> + <h3>Име на проектот Ñтои овде во две линии</h3> + <p> + Краток Ð¾Ð¿Ð¸Ñ Ð²Ð¾ кој Ñтудентите ќе можат да опишат за што Ñе + работи во проектот + </p> + <small>Ðприл - Октомври 2019</small> + <button class="btn">Дознај повеќе</button> + </div> + </a> + <a href="#" target="_blank" class="coding cards"> + <img src="./img/coding1.jpeg" alt="coding card" /> + <div class="card-inner"> + <p class="badge">Ðкадемија за Програмирање</p> + <h3>Име на проектот Ñтои овде во две линии</h3> + <p> + Краток Ð¾Ð¿Ð¸Ñ Ð²Ð¾ кој Ñтудентите ќе можат да опишат за што Ñе + работи во проектот + </p> + <small>Ðприл - Октомври 2019</small> + <button class="btn">Дознај повеќе</button> + </div> + </a> + <a href="#" target="_blank" class="coding cards"> + <img src="./img/coding2.jpeg" alt="coding card" /> + <div class="card-inner"> + <p class="badge">Ðкадемија за Програмирање</p> + <h3>Име на проектот Ñтои овде во две линии</h3> + <p> + Краток Ð¾Ð¿Ð¸Ñ Ð²Ð¾ кој Ñтудентите ќе можат да опишат за што Ñе + работи во проектот + </p> + <small>Ðприл - Октомври 2019</small> + <button class="btn">Дознај повеќе</button> + </div> + </a> + <a href="#" target="_blank" class="coding cards"> + <img src="./img/coding3.jpeg" alt="coding card" /> + <div class="card-inner"> + <p class="badge">Ðкадемија за Програмирање</p> + <h3>Име на проектот Ñтои овде во две линии</h3> + <p> + Краток Ð¾Ð¿Ð¸Ñ Ð²Ð¾ кој Ñтудентите ќе можат да опишат за што Ñе + работи во проектот + </p> + <small>Ðприл - Октомври 2019</small> + <button class="btn">Дознај повеќе</button> + </div> + </a> + <a href="#" target="_blank" class="coding cards"> + <img src="./img/coding4.jpeg" alt="coding card" /> + <div class="card-inner"> + <p class="badge">Ðкадемија за Програмирање</p> + <h3>Име на проектот Ñтои овде во две линии</h3> + <p> + Краток Ð¾Ð¿Ð¸Ñ Ð²Ð¾ кој Ñтудентите ќе можат да опишат за што Ñе + работи во проектот + </p> + <small>Ðприл - Октомври 2019</small> + <button class="btn">Дознај повеќе</button> + </div> + </a> + <a href="#" target="_blank" class="coding cards"> + <img src="./img/coding5.jpeg" alt="coding card" /> + <div class="card-inner"> + <p class="badge">Ðкадемија за Програмирање</p> + <h3>Име на проектот Ñтои овде во две линии</h3> + <p> + Краток Ð¾Ð¿Ð¸Ñ Ð²Ð¾ кој Ñтудентите ќе можат да опишат за што Ñе + работи во проектот + </p> + <small>Ðприл - Октомври 2019</small> + <button class="btn">Дознај повеќе</button> + </div> + </a> + <a href="#" target="_blank" class="coding cards"> + <img src="./img/coding6.jpeg" alt="coding card" /> + <div class="card-inner"> + <p class="badge">Ðкадемија за Програмирање</p> + <h3>Име на проектот Ñтои овде во две линии</h3> + <p> + Краток Ð¾Ð¿Ð¸Ñ Ð²Ð¾ кој Ñтудентите ќе можат да опишат за што Ñе + работи во проектот + </p> + <small>Ðприл - Октомври 2019</small> + <button class="btn">Дознај повеќе</button> + </div> + </a> + <a href="#" target="_blank" class="coding cards"> + <img src="./img/coding7.jpeg" alt="coding card" /> + <div class="card-inner"> + <p class="badge">Ðкадемија за Програмирање</p> + <h3>Име на проектот Ñтои овде во две линии</h3> + <p> + Краток Ð¾Ð¿Ð¸Ñ Ð²Ð¾ кој Ñтудентите ќе можат да опишат за што Ñе + работи во проектот + </p> + <small>Ðприл - Октомври 2019</small> + <button class="btn">Дознај повеќе</button> + </div> + </a> + <a href="#" target="_blank" class="coding cards"> + <img src="./img/coding8.jpeg" alt="coding card" /> + <div class="card-inner"> + <p class="badge">Ðкадемија за Програмирање</p> + <h3>Име на проектот Ñтои овде во две линии</h3> + <p> + Краток Ð¾Ð¿Ð¸Ñ Ð²Ð¾ кој Ñтудентите ќе можат да опишат за што Ñе + работи во проектот + </p> + <small>Ðприл - Октомври 2019</small> + <button class="btn">Дознај повеќе</button> + </div> + </a> + <a href="#" target="_blank" class="coding cards"> + <img src="./img/coding9.jpeg" alt="coding card" /> + <div class="card-inner"> + <p class="badge">Ðкадемија за Програмирање</p> + <h3>Име на проектот Ñтои овде во две линии</h3> + <p> + Краток Ð¾Ð¿Ð¸Ñ Ð²Ð¾ кој Ñтудентите ќе можат да опишат за што Ñе + работи во проектот + </p> + <small>Ðприл - Октомври 2019</small> + <button class="btn">Дознај повеќе</button> + </div> + </a> + <a href="#" target="_blank" class="coding cards"> + <img src="./img/coding10.jpeg" alt="coding card" /> + <div class="card-inner"> + <p class="badge">Ðкадемија за Програмирање</p> + <h3>Име на проектот Ñтои овде во две линии</h3> + <p> + Краток Ð¾Ð¿Ð¸Ñ Ð²Ð¾ кој Ñтудентите ќе можат да опишат за што Ñе + работи во проектот + </p> + <small>Ðприл - Октомври 2019</small> + <button class="btn">Дознај повеќе</button> + </div> + </a> + <a href="#" target="_blank" class="design cards"> + <img src="./img/design1.jpeg" alt="design card" /> + <div class="card-inner"> + <p class="badge">Ðкадемија за Дизајн</p> + <h3>Име на проектот Ñтои овде во две линии</h3> + <p> + Краток Ð¾Ð¿Ð¸Ñ Ð²Ð¾ кој Ñтудентите ќе можат да опишат за што Ñе + работи во проектот + </p> + <small>Ðприл - Октомври 2019</small> + <button class="btn">Дознај повеќе</button> + </div> + </a> + <a href="#" target="_blank" class="design cards"> + <img src="./img/design2.jpeg" alt="design card" /> + <div class="card-inner"> + <p class="badge">Ðкадемија за Дизајн</p> + <h3>Име на проектот Ñтои овде во две линии</h3> + <p> + Краток Ð¾Ð¿Ð¸Ñ Ð²Ð¾ кој Ñтудентите ќе можат да опишат за што Ñе + работи во проектот + </p> + <small>Ðприл - Октомври 2019</small> + <button class="btn">Дознај повеќе</button> + </div> + </a> + <a href="#" target="_blank" class="design cards"> + <img src="./img/design3.jpeg" alt="design card" /> + <div class="card-inner"> + <p class="badge">Ðкадемија за Дизајн</p> + <h3>Име на проектот Ñтои овде во две линии</h3> + <p> + Краток Ð¾Ð¿Ð¸Ñ Ð²Ð¾ кој Ñтудентите ќе можат да опишат за што Ñе + работи во проектот + </p> + <small>Ðприл - Октомври 2019</small> + <button class="btn">Дознај повеќе</button> + </div> + </a> + <a href="#" target="_blank" class="design cards"> + <img src="./img/design4.jpeg" alt="design card" /> + <div class="card-inner"> + <p class="badge">Ðкадемија за Програмирање</p> + <h3>Име на проектот Ñтои овде во две линии</h3> + <p> + Краток Ð¾Ð¿Ð¸Ñ Ð²Ð¾ кој Ñтудентите ќе можат да опишат за што Ñе + работи во проектот + </p> + <small>Ðприл - Октомври 2019</small> + <button class="btn">Дознај повеќе</button> + </div> + </a> + </div> + <div class="show-more"> + <button class="btn" class="load" id="load-more"> + Прикажи повеќе + </button> + </div> + </div> + </div> + </main> + <footer> + <footer> + <p> + <small>Изработено Ñо ❤ од Ñтудентите на Brainster </small> + </p> + </footer> + </footer> + <!-- jQuery library --> + <script + src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" + integrity="ha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" + crossorigin="anonymous" + ></script> + + <!-- Latest Compiled Bootstrap 4.6 JavaScript --> + <script + src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" + integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" + crossorigin="anonymous" + ></script> + <script + src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" + integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" + crossorigin="anonymous" + ></script> + <script src="./index.js"></script> + </body> +</html>