From 6d799ebd794688397e900830c3bfadae7821ac0b Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sun, 15 Sep 2024 00:57:17 +0500
Subject: [PATCH] feat: add button to header

---
 index.html          | 8 ++++++--
 static/tailwind.css | 9 +++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)
diff --git a/index.html b/index.html
index 1c651e6..9a8692a 100644
--- a/index.html
+++ b/index.html
@@ -8,13 +8,17 @@
 </head>
 <body class="overflow-x-hidden bg-bg-black">
     <header class="fixed top-0 left-0 right-0 z-10 w-full text-white opacity-[var(--header-opacity,0)] bg-bg-pink" id="header">
-        <div class="container mx-auto">
+        <div class="container flex items-center justify-between gap-1 mx-auto">
             <a href="#section_landing">
                 <div class="flex items-center gap-4 px-4 py-4">
                     <img src="./static/avatar_512.png" alt="" class="w-[64px] lg:w-[64px] 2xl:w-[64px]"/>
                     <h1 class="text-xl font-semibold lg:text-2xl xl:text-3xl 2xl:text-4xl">KENTAI RADIQUUM</h1>
                 </div>
             </a>
+            <div class="flex gap-2">
+                <a class="px-4 py-2 text-xl hover:underline bg-bg-gray" href="#section_about">ABOUT ME</a>
+                <a class="px-4 py-2 text-xl hover:underline bg-bg-gray" href="#section_links">LINKS</a>
+            </div>
         </div>
     </header>
     <div class="h-screen" id="section_landing">
@@ -46,7 +50,7 @@
                 </div>
             </div>
             <div class="flex items-end justify-end w-full max-w-[45%] gap-4 p-8 font-medium text-4xl mb-[3%]">
-                <a class="border-black border-4 hover:translate-x-2 hover:-translate-y-2 shadow-transparent hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[320px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue" href="#section_about">READ MORE</a>
+                <a class="border-black border-4 hover:translate-x-2 hover:-translate-y-2 shadow-transparent hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[320px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue" href="#section_about">ABOUT ME</a>
                 <a class="border-black border-4 hover:translate-x-2 hover:-translate-y-2 shadow-transparent hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[300px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue" href="#section_links">LINKS</a>
             </div>
         </div>
diff --git a/static/tailwind.css b/static/tailwind.css
index 6aaa3d2..46a53e8 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -766,6 +766,10 @@ video {
   gap: 2rem;
 }
 
+.gap-1 {
+  gap: 0.25rem;
+}
+
 .overflow-x-hidden {
   overflow-x: hidden;
 }
@@ -844,6 +848,11 @@ video {
   padding-bottom: 2rem;
 }
 
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
