navbar or header section done

Razib2019 · May 14, 2024 · e2cb12c · e2cb12c
1 parent 961dfd2
commit e2cb12c
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -1,19 +1,83 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="light">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Smart Ticketing</title>
+    <!-- Css Link-->
+    <link rel="stylesheet" href="./styles/styles.css" />
+    <!-- DaisyUI And Tailwind CSS -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/daisyui@4.11.1/dist/full.min.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <script src="https://cdn.tailwindcss.com"></script>
   </head>
   <body>
     <!-- Header Section Start From Here -->
-    <header></header>
+    <header class="container mx-auto lg:px-24 my-8">
+      <div class="navbar bg-base-100 font-raleway">
+        <div class="navbar-start">
+          <div class="dropdown">
+            <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M4 6h16M4 12h8m-8 6h16"
+                />
+              </svg>
+            </div>
+            <ul
+              tabindex="0"
+              class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52 text-xs font-normal"
+            >
+              <li><a>Home</a></li>
+              <li><a>About</a></li>
+              <li><a>Destination</a></li>
+              <li><a>Search</a></li>
+            </ul>
+          </div>
+          <a
+            class="btn btn-ghost lg:text-4xl text-xl lg:font-extrabold font-semibold text-[#030712]"
+            >P-Ticket</a
+          >
+        </div>
+        <div class="navbar-center hidden lg:flex">
+          <ul class="menu menu-horizontal px-1 lg:text-lg lg:font-medium">
+            <li><a>Home</a></li>
+            <li><a>About</a></li>
+            <li><a>Destination</a></li>
+            <li><a>Search</a></li>
+          </ul>
+        </div>
+        <div class="navbar-end">
+          <a class="btn lg:px-8 bg-[#1DD1000A] border-[#1DD100]">
+            <span
+              class="text-[#1DD100] lg:text-xl text-lg lg:font-bold font-semibold"
+              >Bus</span
+            >
+            <img src="./images/bus-icon.png" alt=""
+          /></a>
+        </div>
+      </div>
+    </header>
     <!-- Header Section End Here -->
     <!-- Main Section Start From Here -->
     <main></main>
     <!-- Main Section End Here -->
     <!-- Footer Section Start From Here -->
     <footer></footer>
     <!-- Footer Section End Here -->
+    <!-- Script -->
+    <script src="./scripts/app.js"></script>
   </body>
 </html>
diff --git a/scripts/app.js b/scripts/app.js
@@ -0,0 +1 @@
+
diff --git a/styles/styles.css b/styles/styles.css
@@ -0,0 +1,8 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");
+
+.font-inter {
+  font-family: "Inter", sans-serif;
+}
+.font-raleway {
+  font-family: "Raleway", sans-serif;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,js}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};