change: added support me button

ramonortegajr · May 29, 2024 · 0c8c17f · 0c8c17f
1 parent 7e731b3
commit 0c8c17f
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 19 deletions.
diff --git a/netlify.toml b/netlify.toml
diff --git a/public/css/home.css b/public/css/home.css
@@ -174,9 +174,9 @@ i {
     background-color: #4267B2; /* Blue color like Facebook */
 }
 
-.buy-me-coffee {
-    background-color: #FFDD00; /* Yellow color like "Buy Me a Coffee" */
-    color: #000000; /* Black text color */
+.support-me {
+    background-color: #097FFF; /* Yellow color like "Buy Me a Coffee" */
+    color: #ffffff; /* Black text color */
     border: none;
     padding: 10px 20px;
     font-size: 1em;
@@ -185,14 +185,20 @@ i {
     cursor: pointer;
     transition: background-color 0.3s;
     text-decoration: none; /* Remove underline for link appearance */
-    display: inline-block; /* Ensure button appears inline with text */
-    padding-left: 30px; /* Add padding on the left for icon */
-    position: relative; /* Set position to relative for absolute positioning of the icon */
-    margin-right: 2.0em;
+    display: inline-flex; /* Ensure button appears inline with icon */
+    align-items: center; /* Vertically center the icon and text */
+    margin-right: 1.5em;
 }
 
-.buy-me-coffee:hover {
-    background-color: #FFCC00; /* Darker yellow on hover */
+.support-me:hover {
+    background-color: #06072c; /* Darker yellow on hover */
+    color: #ffffff;
+}
+
+.gcash-icon {
+    width: 24px; /* Adjust the size of the icon */
+    height: 24px; /* Adjust the size of the icon */
+    margin-right: 8px; /* Space between icon and text */
 }
 
 /* Adjustments for mobile devices */
@@ -205,7 +211,7 @@ i {
         width: 100%; 
         padding: 10px; 
     }
-    .buy-me-coffee {
+    .support-me {
         display: none; /* Hide "Buy Me a Coffee" on smaller screens */
     }
 

diff --git a/public/images/32991d57f8466447865d7da039621694.jpg b/public/images/32991d57f8466447865d7da039621694.jpg
diff --git a/public/images/gcash.png b/public/images/gcash.png
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
@@ -22,7 +22,9 @@
         <i class="fab fa-instagram"></i>
       </a>
       <i id="light-dark-toggle" class="fas fa-moon" style="font-size: 20px; color: black;"></i> </div>
-      <a href="https://www.buymeacoffee.com/yourusername" class="buy-me-coffee">Buy Me a Coffee</a>
+      <a href="#" class="support-me">
+        <img src="/images/gcash.png" alt="GCash Icon" class="gcash-icon"> Support Me
+    </a>    
   </header>
 
 <body>