diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000000000000000000000000000000000..6b665aaa0c07365dc517c34e20d0ac4aaa3993f2
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5501
+}
diff --git a/images/Filters.png b/images/Filters.png
new file mode 100644
index 0000000000000000000000000000000000000000..33b191ef063e4bd6c32fd4d106b0be821eea28b3
Binary files /dev/null and b/images/Filters.png differ
diff --git a/images/Form dropdown open.png b/images/Form dropdown open.png
new file mode 100644
index 0000000000000000000000000000000000000000..f8353182eb3e7529206c824de515f82e957656f0
Binary files /dev/null and b/images/Form dropdown open.png differ
diff --git a/images/Form.png b/images/Form.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b3fd8134fc642b137c3cc9c5328bc0eb84e751b
Binary files /dev/null and b/images/Form.png differ
diff --git a/images/Logo.png b/images/Logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..51f4a145d69d0852fde32cf5f9ba38deaf702851
Binary files /dev/null and b/images/Logo.png differ
diff --git a/images/Responsive Form.png b/images/Responsive Form.png
new file mode 100644
index 0000000000000000000000000000000000000000..104f484c40ab89bc918a6938cbb999b4262f5751
Binary files /dev/null and b/images/Responsive Form.png differ
diff --git a/images/Responsive Menu.png b/images/Responsive Menu.png
new file mode 100644
index 0000000000000000000000000000000000000000..389baa795cbf9004246e71527826fde059b50c04
Binary files /dev/null and b/images/Responsive Menu.png differ
diff --git a/images/Responsive.png b/images/Responsive.png
new file mode 100644
index 0000000000000000000000000000000000000000..40cdb69130613f1badf91c515ade5bcc666dc2b2
Binary files /dev/null and b/images/Responsive.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..3c49b6a71ae3f5e772c0396fdd233b09cae22ea6
--- /dev/null
+++ b/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <link
+ rel="stylesheet"
+ href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
+ integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
+ crossorigin="anonymous"
+ />
+ <link rel="stylesheet" href="./style.css" />
+ <title>Project-01</title>
+ </head>
+ <body>
+ <nav>
+ <a href="./index.html" class="brand-logo"
+ ><img src="./images/logo.png" alt="Brainster Logo" />
+ <p class="black">BRAINSTER</p>
+ </a>
+ <button class="navbar-toggle">
+ <span class="top bar"></span>
+ <span class="middle bar"></span>
+ <span class="bottom bar"></span>
+ </button>
+ <div class="menu-wrapper">
+ <div class="close-btn">
+ <span class="bar one">
+ <span class="bar two"></span>
+ </span>
+ </div>
+ <ul class="menu">
+ <li class="nav-item">
+ <a
+ href="https://marketpreneurs.brainster.co"
+ target="_blank"
+ class="nav-link"
+ >Ðкадемија за маркетинг</a
+ >
+ </li>
+ <li class="nav-item">
+ <a
+ href="https://codepreneurs.brainster.co"
+ target="_blank"
+ class="nav-link"
+ >Ðкадемија за програмирање</a
+ >
+ </li>
+ <li class="nav-item">
+ <a
+ href="https://datascience.brainster.co"
+ target="_blank"
+ class="nav-link"
+ >Ðкадемија за data science</a
+ >
+ </li>
+ <li class="nav-item">
+ <a
+ href="https://design.brainster.co"
+ target="_blank"
+ class="nav-link"
+ >Ðкадемија за дизајн</a
+ >
+ </li>
+ <li class="nav-item">
+ <a href="./form.html" class="nav-btn">Вработи наш Ñтудент</a>
+ </li>
+ </ul>
+ </div>
+ </nav>
+ <script src="./js/navbar.js"></script>
+ </body>
+</html>
diff --git a/js/navbar.js b/js/navbar.js
new file mode 100644
index 0000000000000000000000000000000000000000..48289ec70f69662efb5514894a7b89b185c90c63
--- /dev/null
+++ b/js/navbar.js
@@ -0,0 +1,15 @@
+"use strict";
+
+// ----------------------NAVBAR----------------- //
+
+const navBtn = document.querySelector(".navbar-toggle");
+const menu = document.querySelector(".menu-wrapper");
+const closeBtn = document.querySelector(".close-btn");
+
+navBtn.addEventListener("click", () => {
+ menu.classList.add("open");
+});
+
+closeBtn.addEventListener("click", () => {
+ menu.classList.remove("open");
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..b29126f67fde584c6c28e66db74d18d5ccaa96b1
--- /dev/null
+++ b/style.css
@@ -0,0 +1,290 @@
+body {
+ font-family: sans-serif;
+ margin: 0;
+ background-color: #fcd232;
+}
+* {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+img {
+ max-width: 100%;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+ margin-top: 0;
+}
+
+a {
+ text-decoration: none;
+}
+
+ul {
+ padding: 0;
+}
+
+li {
+ list-style: none;
+}
+
+nav {
+ background-color: #fcd232;
+ padding: 0.5em 1.5em;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-shadow: 2px 3px 8px 2px rgba(30, 30, 30, 0.3);
+ box-shadow: 2px 3px 8px 2px rgba(30, 30, 30, 0.3);
+}
+
+nav .brand-logo {
+ display: block;
+ width: 50px;
+}
+
+nav .navbar-toggle {
+ padding: 5px 0;
+ background-color: transparent;
+ border: none;
+ width: 40px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: end;
+ -ms-flex-align: end;
+ align-items: flex-end;
+}
+
+nav .navbar-toggle .bar {
+ display: block;
+ background-color: #302f38;
+ height: 6px;
+ border-radius: 3px;
+}
+
+nav .navbar-toggle .bar:not(:last-child) {
+ margin-bottom: 5px;
+}
+
+nav .navbar-toggle .top {
+ width: 100%;
+}
+
+nav .navbar-toggle .middle {
+ width: 75%;
+}
+
+nav .navbar-toggle .bottom {
+ width: 50%;
+}
+
+nav .menu-wrapper {
+ visibility: hidden;
+ background-color: #302f38;
+ position: fixed;
+ height: 100vh;
+ width: 100%;
+ top: 0;
+ right: 0;
+ -webkit-transition: all 0.3s linear;
+ transition: all 0.3s linear;
+ -webkit-clip-path: circle(100px at 100% -20%);
+ clip-path: circle(100px at 100% -20%);
+ z-index: 999;
+}
+
+nav .menu-wrapper.open {
+ visibility: visible;
+ -webkit-clip-path: circle(2100px at 90% -10%);
+ clip-path: circle(2100px at 90% -10%);
+}
+
+nav .menu {
+ padding: 0 1.4em;
+}
+.black {
+ color: black;
+ font-size: 10px;
+ font-weight: bold;
+}
+
+nav .close-btn {
+ width: 45px;
+ height: 45px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ padding: 0.3em;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin: 0.4em 0.5em 4em auto;
+}
+
+nav .close-btn .bar {
+ width: 100%;
+ height: 5px;
+ background-color: white;
+ display: block;
+ border-radius: 3px;
+}
+
+nav .close-btn .bar.one {
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+
+nav .close-btn .bar.two {
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+}
+
+nav .nav-item {
+ padding: 0.5em 0;
+}
+
+nav .nav-link {
+ display: inline-block;
+ color: white;
+ font-weight: 600;
+ padding: 0.5em 0;
+ position: relative;
+}
+
+nav .nav-link::after {
+ content: "";
+ width: 0;
+ height: 2px;
+ background-color: white;
+ position: absolute;
+ bottom: -1px;
+ left: 50%;
+ -webkit-transition: all 0.3s ease;
+ transition: all 0.3s ease;
+}
+
+nav .nav-link:hover::after {
+ width: 100%;
+ left: 0;
+}
+
+nav .nav-btn {
+ display: inline-block;
+ background-color: #e91009;
+ border-radius: 5px;
+ padding: 0.5em 1em;
+ color: white;
+ font-weight: 600;
+ margin: 0.5em 0;
+ -webkit-transition: all 0.2s ease;
+ transition: all 0.2s ease;
+ border: 2px solid #e91009;
+}
+
+nav .nav-btn:hover {
+ background-color: transparent;
+}
+
+@media (min-width: 1024px) {
+ nav {
+ font-size: 15px;
+ padding: 1.5em 2.5em 1.5em 3em;
+ }
+ nav .brand-logo {
+ width: 60px;
+ margin-right: 1.5em;
+ }
+ nav .menu-wrapper {
+ position: static;
+ visibility: visible;
+ height: auto;
+ -webkit-clip-path: none;
+ clip-path: none;
+ width: auto;
+ background-color: transparent;
+ text-align: left;
+ }
+
+ nav .navbar-toggle {
+ display: none;
+ }
+ nav .close-btn {
+ display: none;
+ }
+ nav .nav-link {
+ color: #302f38;
+ padding: 0;
+ }
+ nav .nav-link::after {
+ background-color: #302f38;
+ }
+ nav .nav-item {
+ padding: 0;
+ }
+ nav .nav-link::after {
+ bottom: -7px;
+ }
+ nav .nav-btn {
+ font-weight: bold;
+ margin-left: 1em;
+ margin: 0;
+ }
+ nav .nav-btn:hover {
+ color: #302f38;
+ }
+ nav .menu {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ padding: 0;
+ margin: 0;
+ text-align: center;
+ }
+ nav .menu .nav-item:not(:last-child) {
+ margin-right: 1.5em;
+ }
+ nav .menu .nav-item:last-child {
+ margin-left: 1.5em;
+ }
+}
+
+@media (min-width: 1200px) {
+ nav .menu {
+ text-align: left;
+ }
+}
+
+@media (min-width: 1440px) {
+ nav {
+ font-size: 16px;
+ }
+ nav .menu .nav-item:not(:last-child) {
+ margin-right: 2em;
+ }
+}