diff --git a/html template/navbar.html b/html template/navbar.html
new file mode 100644
index 0000000..9027d90
--- /dev/null
+++ b/html template/navbar.html	
@@ -0,0 +1,42 @@
+<header>
+  <div class="nav-left">
+    <span class="about"><a href="https://about.google/?fg=1&utm_source=google-US&utm_medium=referral&utm_campaign=hp-header">About</a></span>
+    <span class="store"><a href="https://store.google.com/US?utm_source=hp_header&utm_medium=google_ooo&utm_campaign=GS100042&hl=en-US">Store</a></span>
+  </div>
+  <div class="nav-right">
+    <span class="gmail"><a href="https://www.google.com/intl/zh-TW/gmail/about/">Gmail</a></span>
+    <span class="pic"><a href="https://www.google.com.tw/imghp?hl=en&ogbl">Images</a></span>
+    <span class="apps"><i class="fa-solid fa-list"></i></span>
+    <button class="btn-login">Sign in</button>
+  </div>
+</header>
+<main>
+  <div class="logo">
+    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Google_logo_%282013-2015%29.svg/1024px-Google_logo_%282013-2015%29.svg.png" alt="">
+  </div>
+  <div class="search-bar">
+    <i class="fa-solid fa-magnifying-glass"></i>
+    <input id="search-key" type="text">
+  </div>
+  <div class="btns">
+    <button class="btn-search">Google Search</button>
+    <button class="btn-lucky">I'm feeling lucky</button>
+  </div>
+</main>
+<footer>
+  <div class="country">
+    <span>Taiwan</span>
+  </div>
+  <div class="other">
+    <div class="other-left">
+      <span class="other-business"><a href="https://ads.google.com/intl/en_us/home/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1#!/">Advertising</a></span>
+      <span class="other-business"><a href="https://www.google.com/business/">Business</a></span>
+      <span class="other-business"><a href="https://www.google.com/search/howsearchworks/?fg=1">How Search works</a></span>
+    </div>
+    <div class="other-right">
+      <span class="other-info"><a href="https://policies.google.com/privacy?hl=en&fg=1">Privacy</a></span>
+      <span class="other-info"><a href="https://policies.google.com/terms?hl=en&fg=1">Terms</a></span>
+      <span class="other-info"><a href="#">Settings</a></span>
+    </div>
+  </div>
+</footer>