page comanda e barra navegação resposivo

gestaoRaul/templates/static/base.css

@@ -1,36 +1,116 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap');
 body {
-    margin: 15px;
+    margin: 0px 0px 0px 0px;
     padding: 15px;
     font-family: Arial, sans-serif;
 }
 
-/* .sidebar {
-    height: 100vh;
-    width: 200px;
-    background-color: #f1f1f1;
-    padding: 20px;
-    position: fixed;
-    top: 0;
-    left: 0;
-}
-
-.content {
-    margin-left: 220px; 
-    padding: 20px;
-}
-
-ul {
-    list-style-type: none;
+/* * {
     padding: 0;
-}
-
-li a {
-    display: block;
-    padding: 15px;
-    text-decoration: none;
-    color: #333;
-}
-
-li a:hover {
-    background-color: #ccc;
+    margin: 0;
+    font-family: 'Inter', sans-serif;
 } */
+
+.p-header {
+    background-color: #24252a;
+    box-shadow: 0px 3px 10px #464646;
+}
+
+.nav-bar {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.1rem 2rem;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+}
+
+.logo h1 {
+    color: #fff;
+}
+
+.nav-list {
+    display: flex;
+    align-items: center;
+}
+
+.nav-list ul {
+    display: flex;
+    justify-content: center;
+    list-style: none;
+}
+
+.nav-item {
+    margin: 0 15px;
+}
+
+.nav-link {
+    text-decoration: none;
+    font-size: 1.15rem;
+    color: #fff;
+    font-weight: 400;
+}
+
+.login-button button {
+    border: none;
+    padding: 10px 15px;
+    border-radius: 5px;
+    background-color: #0187a7;
+}
+
+.login-button button a {
+    text-decoration: none;
+    color: #fff;
+    font-weight: 500;
+    font-size: 1.1rem;
+}
+
+.mobile-menu-icon {
+    display: none;
+}
+
+.mobile-menu {
+    display: none;
+}
+
+@media screen and (max-width: 730px) {
+    .nav-bar {
+        padding: 0.1rem 2rem;
+    }
+    .nav-item {
+        display: none;
+    }
+    .login-button {
+        display: none;
+    }
+    .mobile-menu-icon {
+        display: block;
+    }
+    .mobile-menu-icon button {
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+    }
+    .mobile-menu ul {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        padding-bottom: 1rem;
+    }
+    .mobile-menu .nav-item {
+        display: block;
+        padding-top: 1.2rem;
+    }
+    .mobile-menu .login-button {
+        display: block;
+        padding: 1rem 2rem;
+    }
+    .mobile-menu .login-button button {
+        width: 100%;
+    }
+    .open {
+        display: block;
+    }
+}