fixed bug and interface in navbar

redbrickboard/static/css/custom.css

 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inria+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
 
 :root {
      --theme-prusian-blue: #003049;
@@ -6,6 +7,7 @@
      --theme-orange: #F77F00;
      --theme-yellow-red: #FCBF49;
      --theme-dutch-white: #EAE2B7;
+     --theme-white: ##F8F9FA;
 }
 
 * {
@@ -14,6 +16,7 @@
 }
 
 body {
+     font-family: "Inter";
      background-color: var(--theme-dutch-white);
      background-image: url("/static/images/Continuous Background.png");
      background-position: left top;
@@ -21,6 +24,96 @@ body {
      background-size: 80%;
 }
 
+.navbar-brand {
+     display: contents;
+}
+
+
+.nav-item {
+
+    #nav-signup {
+         width: 120%;
+         font-size: 1vw;
+         margin-top: 0.45rem;
+         color: #fff;
+         background-color: var(--theme-bright-red);
+         border-color: var(--theme-bright-red);
+
+         &:hover {
+              transition: all 0.3s ease-in;
+              font-size: 1.0vw;
+              color: #fff;
+              background-color: var(--theme-prusian-blue);
+              border-color: var(--theme-prusian-blue);
+              box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
+         }
+    }
+     #nav-event {
+          font-size: 1vw;
+          margin-top: 0.45rem;
+          color: #fff;
+          background-color: var(--theme-prusian-blue);
+          border-color: var(--theme-prusian-blue);
+
+          &:hover {
+               transition: all 0.3s ease-in;
+               font-size: 1.0vw;
+               color: #fff;
+               background-color: var(--theme-bright-red);
+               border-color: var(--theme-bright-red);
+               box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
+          }
+     }
+
+     #login-register{
+         width: 100%;
+         color: #fff;
+         background-color: var(--theme-bright-red);
+         border-color: var(--theme-bright-red);
+     }
+
+     .nav-link {
+          transition: all 0.3s ease-in;
+          color: var(--theme-bright-red) !important;
+          font-size: 1.2vw;
+          white-space: nowrap;
+
+          &:hover{
+              transition: all 0.3s ease-in;
+              font-size: 1.3vw;
+              color: var(--theme-prusian-blue) !important;
+              text-decoration: underline;
+          }
+     }
+}
+
+.btn {
+     transition: all 0.3s ease-in;
+     font-size: 1vw;
+     color: #000;
+     background-color: var(--theme-white);
+     border-color: var(--theme-white);
+     border-radius: 0.3125rem;
+     white-space: nowrap;
+}
+
+@media (max-width: 576px) {
+     .logo {
+          width:100px;
+          height:auto;
+     }
+}
+
+@media (min-width: 577px) {
+     .logo {
+          width:20%;
+          max-width:200px;
+          height:auto;
+     }
+}
+
+
+/*
 .btn-red {
      transition: all 0.3s ease-in;
      font-size: 1.5vw;
@@ -38,6 +131,8 @@ body {
      border-color: var(--theme-prusian-blue);
 }
 
+---
+
 @media (max-width: 950px) {
      .navbar-brand {
         width: 90%;
@@ -109,6 +204,7 @@ body {
      border: 1px solid #000 !important;
      background: #FFF !important;
 }
+*/
 
 .login-btn {
      margin-top: 1.62rem;
@@ -117,3 +213,37 @@ body {
      background: #DF4E4E;
      border-color: #DF4E4E;
 }
+
+
+#trial {
+     align-items: center;
+     background-color: white;
+}
+
+
+#featured-events-div {
+     margin-top: 7.5rem;
+     height: 100vh;
+}
+
+#login-container {
+     align-items: center;
+     justify-content: center;
+}
+
+#login-form {
+     border-radius: 0.625rem;
+     border: 1px solid #000;
+     background: #FFF;
+     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+.form-group > label {
+     margin-top: 1.19rem;
+}
+
+.form-group > input:not([type="submit"]) {
+     border-radius: 0.625rem !important;
+     border: 1px solid #000 !important;
+     background: #FFF !important;
+}

redbrickboard/templates/base.html

@@ -17,34 +17,67 @@
 
 </head>
 <body>
-  <nav class="px-5 navbar navbar-expand-lg navbar-light bg-light">
-  <div class="container-fluid justify-content-end">
-    <a class="navbar-brand" href="/">
-          <img src="{% static '/images/Logo with Name.png' %}" alt="Red Brick Board" style="width:30%; height:auto;">
+  <nav class="navbar navbar-expand-md navbar-light bg-light px-5">
+  <div class="container-fluid">
+
+    <a class="navbar-brand" href="/#">
+          <img src="{% static '/images/Logo with Name.png' %}" alt="Red Brick Board" class="logo">
     </a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav" aria-controls="nav" aria-expanded="false" aria-label="Toggle Navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
-      <ul class="navbar-nav d-flex">
+
+    <div class="nav-item me-4">
+    </div>
+
+    <div class="collapse navbar-collapse justify-content align-items-right" id="nav">
+      <ul class="navbar-nav">
+
+          <li class="nav-item">
+              <a href="/eventcatalog" class="nav-link mt-1">Events</a>
+          </li>
+          <li class="nav-item">
+              <a href="/#" class="nav-link mt-1">Featured</a>
+          </li>
           <li class="nav-item">
-          <a class="nav-link" href="/eventcatalog" style="margin-right: 2.94rem;">Event Catalog</a>
+              <a href="/#" class="nav-link mt-1">Create</a>
           </li>
+          <li class="nav-item">
+              <a href="/#" class="nav-link mt-1">Bump</a>
+          </li>
+      </ul>
+    </div>
+
+    <div class="collapse navbar-collapse justify-content-end align-items-center" id="nav">
+        <ul class="navbar-nav">
+
             <li class="nav-item">
             {% if user.is_authenticated %}
                   <form role="Log Out" action="{% url 'accounts:logout' %}" method="post">
                       {% csrf_token %}
-                  <button class="btn btn-red" type="submit">Log Out</button>
+                      <button class="btn me-3 mt-2" type="submit">Log Out</button>
                   </form>
+
+                  <li class="nav-item">
+                    <!--<a class="nav-link" href="/eventcatalog" style="margin-right: 2.94rem;">Event Catalog</a>-->
+                    <a href="/#" class="btn me-3" id="nav-signup">My Profile</a>
+                  </li>
             {% else %}
                   <form role="Log In" action="{% url 'accounts:login' %}" method="post">
                       {% csrf_token %}
-                  <button class="btn btn-red" type="submit">Log In</button>
+                      <button class="btn me-3 mt-2" type="submit">Log In</button>
                   </form>
+
+                  <li class="nav-item">
+                    <!--<a class="nav-link" href="/eventcatalog" style="margin-right: 2.94rem;">Event Catalog</a>-->
+                    <a href="/accounts/register" class="btn me-3" id="nav-signup">Sign Up</a>
+                  </li>
             {% endif %}
             </li>
         </ul>
     </div>
+
+  </div>
 </nav>
   {% block content %}
   {% endblock %}