membuat navigation mulaidev#10

Pugud19 · Aug 16, 2021 · 80548dd · 80548dd
1 parent e0d99b1
commit 80548dd
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,9 @@
 # build output
 dist
 public/*.css
+_cacache
+_npx
+_update-notifier-last-checked
 
 # dependencies
 node_modules/
@@ -16,4 +19,5 @@ yarn-error.log*
 .env.production
 
 # macOS-specific files
-.DS_Store
+.DS_Store
+
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -67,6 +67,42 @@ const navigationButton = "Try Free";
       <span slot="badge" class="items-center justify-center px-2 py-1 text-xs font-regular leading-none text-white bg-indigo-500 rounded-md">Badge</span>
     </Card>
 
+    <!-- Navigation  -->
+    <div class="w-full px-4 mx-auto max-w-screen-2xl sm:px-6 md:px-8 ">
+      <div class="flex items-center justify-between h-16 px-12">
+      <span class="font-semibold text-xl leading-none tracking-light text-blue-600 px-16
+       ">Mulai</span>
+      <ul class="items-center hidden text-sm space-x-5 font-medium text-gray-400 md:flex">
+      <li><a class="p-4 px-2 transition rounded-lg focus:outline-none hover:text-gray-700" href="#">Home</a></li>
+      <li><a class="p-4 px-2 transition rounded-lg focus:outline-none hover:text-gray-700" href="#">Massages</a></li>
+      <li><a class="p-4 px-2 transition rounded-lg focus:outline-none hover:text-gray-700" href="#">Orders</a></li>
+      <li><a class="p-4 px-2 transition rounded-lg focus:outline-none hover:text-gray-700" href="#">Balance</a></li>
+      <li><a class="p-4 px-2 transition rounded-lg focus:outline-none hover:text-gray-700" href="#">Groups</a></li>
+      <div>
+      <button type="button" class="px-3 py-2 text-black bg-white shadow-lg rounded-md focus:outline-none">Log in</button></div>
+      <div>
+      <button type="button" class="px-3 py-2 text-white bg-blue-600 shadow-lg rounded-md focus:outline-none">Sign Up</button></div>
+      </ul>
+      </div>
+    </div>
+
+     <div class="w-full px-4 mx-auto max-w-screen-2xl sm:px-6 md:px-8 ">
+      <div class="flex items-center h-16 px-12">
+      <span class="font-semibold text-xl leading-none tracking-light text-blue-600 px-16
+       ">Mulai</span>
+      <form class="px-5">
+        <input name="q" type="text" size="15" placeholder="search..." />
+      </form>
+      <ul class="items-center hidden text-sm space-x-4 font-medium text-gray-400 md:flex">
+      <li><a class="p-4 px-2 transition rounded-lg focus:outline-none hover:text-gray-700" href="#">Home</a></li>
+      <li><a class="p-4 px-2 transition rounded-lg focus:outline-none hover:text-gray-700" href="#">Massages</a></li>
+      <li><a class="p-4 px-2 transition rounded-lg focus:outline-none hover:text-gray-700" href="#">Orders</a></li>
+      <li><a class="p-4 px-2 transition rounded-lg focus:outline-none hover:text-gray-700" href="#">Balance</a></li>
+      <li><a class="p-4 px-2 transition rounded-lg focus:outline-none hover:text-gray-700" href="#">Groups</a></li>
+      </ul>
+
+      </div>
+    </div>
 
   </body>
 </html>