feat(contact): update image and layout responsive

assets/css/site.css

@@ -716,6 +716,18 @@ video {
   gap: 1.5rem;
 }
 
+.gap-12 {
+  gap: 3rem;
+}
+
+.gap-24 {
+  gap: 6rem;
+}
+
+.gap-60 {
+  gap: 15rem;
+}
+
 .overflow-y-auto {
   overflow-y: auto;
 }

contact.html

@@ -40,23 +40,33 @@ <h1>Contact</h1>
     </div>
 </header>
 
-<main class="grid grid-cols-2 mx-auto bg-green-500 items-center justify-center h-screen mt-auto mb-auto">
-    <img src="" alt="Your Image" class="mx-auto w-full h-auto sm:w-1/2 sm:float-left sm:mr-6"/>
-    <div class="flex flex-col gap-4 text-3xl ">
+<main class="grid grid-rows-2 mx-auto bg-green-500 items-center justify-center h-full md:flex md:gap-12 md:p-12 md:h-screen">
+    <img src="./assets/img/profilepic.jpg" alt="Your Image" class="mx-auto h-auto w-60 md:w-80 md:h-auto"/>
+    <section class="flex flex-col gap-4 text-xl ">
         <h1 class="font-serif font-semibold underline">Contact</h1>
-        <div>
-            <p class="font-serif border border-dotted bg-white bg-opacity-70">Phone Number: XXX XXX XXX</p>
-            <a href="https://www.facebook.com/lim.yangtyin/">
-                <img src="" alt="Facebook Icon">
+        <div class="flex flex-col gap-6">
+            <a class="flex flex-row gap-4">
+                <img src="./assets/img/phone.png" alt="Phone Icon" class="w-6 h-6">
+                <p class="font-serif border border-dotted bg-white bg-opacity-70">0405 129 246</p>
             </a>
-            <a href="https://www.instagram.com/limyangtyin/">
-                <img src="" alt="Instagram Icon">
+            <a class="flex flex-row gap-4">
+                <img src="./assets/img/gmail.png" alt="Email Icon" class="w-6 h-6">
+                <p class="font-serif border border-dotted bg-white bg-opacity-70">[email protected] / [email protected]</p>
             </a>
-            <a href="https://wa.me/qr/4Z5G3XVNRTTOP1">
-                <img src="" alt="Whatsapp Icon">
+            <a class="flex flex-row gap-4" href="https://www.facebook.com/lim.yangtyin/">
+                <img src="./assets/img/facebook.png" alt="Facebook Icon" class="w-6 h-6">
+                <p class="font-serif border border-dotted bg-white bg-opacity-70">https://www.facebook.com/lim.yangtyin/</p>
+            </a>
+            <a class="flex flex-row gap-4" href="https://www.instagram.com/limyangtyin/">
+                <img src="./assets/img/instagram.png" alt="Instagram Icon" class="w-6 h-6">
+                <p class="font-serif border border-dotted bg-white bg-opacity-70">https://www.instagram.com/limyangtyin/</p>
+            </a>
+            <a class="flex flex-row gap-4" href="https://wa.me/qr/4Z5G3XVNRTTOP1">
+                <img src="./assets/img/whatsapp.png" alt="Whatsapp Icon" class="w-6 h-6">
+                <p class="font-serif border border-dotted bg-white bg-opacity-70">Whatsapp</p>
             </a>
         </div>
-    </div>
+    </section>
 </main>
 <footer class="sticky bottom-0 bg-yellow-300 flex flex-col gap-4 p-6 md:flex-row md:items-center">
     <p>Copyright: 2023 Lim Yang Tyin. All rights reserved.</p>