fix folder structure

static/css/navbar.css

@@ -0,0 +1,186 @@
+.top-navbar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 50px;
+  z-index: 99999;
+  -webkit-transition: all 0.4s ease-out;
+  transition: all 0.4s ease-out;
+  margin: 0;
+  padding-top: 0.1rem;
+  text-align: center;
+}
+
+/* --- initial state start ------ */
+
+.initial-navbar {
+  background-color: none;
+}
+
+.initial-navbar .navbar-brand {
+  color: #C0CCDA;
+  font-weight: 800;
+}
+
+.initial-navbar li a {
+  color: #C0CCDA;
+}
+
+.initial-navbar .navbar-nav .active,
+.initial-navbar li a:hover {
+  color: #F9FAFC;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.navbar-collapse.show,
+.navbar-collapse.collapsing {
+  background-color: #f9fafc;
+  padding-left: 1rem;
+}
+
+/* --- initial state end ------ */
+
+/* --- state after scroll start --- */
+
+.final-navbar {
+  background-color: #f9fafc;
+  color: #1C2D41;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.final-navbar .navbar-brand {
+  color: #1C2D41;
+  font-weight: 800;
+}
+
+.final-navbar li a {
+  color: #1C2D41;
+  font-weight: 500;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+  border-bottom: 2px solid#F9FAFC;
+}
+
+.final-navbar .navbar-nav .active,
+.final-navbar li a:hover {
+  color: #2098d1;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+  border-bottom: 2px solid #2098d1;
+  background: rgb(2, 0, 36);
+  background: linear-gradient(
+    90deg,
+    rgba(2, 0, 36, 1) 0%,
+    rgba(34, 136, 168, 0.1) 0%
+  );
+}
+
+.navbar-collapse.show li a,
+.navbar-collapse.collapsing li a {
+  color: #1C2D41;
+  font-weight: 500;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.navbar-collapse.show .navbar-nav .active,
+.navbar-collapse.show .navbar-nav a:hover {
+  color: #2098d1;
+  /* -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out; */
+}
+
+#top-navbar-divider {
+  margin-top: 10px;
+}
+
+/* --- state after scroll end --- */
+
+#top-navbar-divider {
+  background: rgba(192, 204, 218, 0.8);
+  height: 20px;
+  width: 2px;
+}
+.final-navbar #top-navbar-divider {
+  background: rgba(0, 0, 0, 0.6);
+  height: 20px;
+  width: 2px;
+}
+
+/*------ navbar on blog page start ----*/
+
+.final-navbar .navbar-toggler {
+  padding: 2px !important;
+}
+
+.blog-navbar .navbar-brand {
+  color: #1C2D41;
+  font-weight: 800;
+}
+
+.blog-navbar li a {
+  color: #1C2D41;
+  font-weight: 500;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.blog-navbar .navbar-nav .active,
+.blog-navbar li a:hover {
+  color: #2098d1;
+  /* -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out; */
+}
+
+/* ============= Device specific fixes ======= */
+
+/* Extra small devices (portrait phones, less than 576px) */
+
+/* No media query for `xs` since this is the default in Bootstrap */
+
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
+}
+
+@media (max-width: 1200px) {
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+  .final-navbar .navbar-nav .active,
+  .final-navbar li a:hover {
+    color: #2098d1;
+    -webkit-transition: none;
+    transition: none;
+    border-bottom: none;
+    background: transparent;
+  }
+
+  .final-navbar li a {
+    border-bottom: none;
+  }
+
+  .navbar-collapse.show {
+    box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
+    transition: all 0.3s ease-out;
+  }
+
+  .dropdown-divider {
+    border-top: 1px solid #c0ccda;
+  }
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+}