change: added icons

ramonortegajr · May 29, 2024 · 78dead4 · 78dead4
1 parent ad47ecb
commit 78dead4
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 4 deletions.
diff --git a/public/css/home.css b/public/css/home.css
@@ -42,9 +42,18 @@ header {
     display: flex; 
     align-items: center;
     padding: 8px; 
-    font-family: Arial, sans-serif; 
+    font-family: Arial, sans-serif;
+    margin-left: 20px; 
+  }
+.header-icons {
+    display: flex;
+    margin-left: auto;
+    margin-right: 30px; 
 }
 
+.icon {
+    margin-right: 10px;  
+  }
 .menu-icon {
     margin-right: 20px; 
     cursor: pointer;
@@ -53,7 +62,10 @@ header {
 h1 {
     margin: 0;
 }
-
+i {
+    font-size: 20px; 
+    color: black;
+  }
 .container {
     display: flex;
     flex-wrap: wrap;

diff --git a/views/index.ejs b/views/index.ejs
@@ -16,7 +16,6 @@
             <i class="fa fa-question-circle" aria-hidden="true"></i>
         </div>
     </nav>
-    <a href="https://imgbb.com/"><img src="https://i.ibb.co/whXCdQT/LOGO.png" alt="LOGO" border="0"></a>
     <header>
         <h1>Tube To GO!</h1>
         <p style="font-size: 80%;">Dahil sa Tube To Go, YouTube Mo, Madaling Kopyahin!</p>

diff --git a/views/partials/header.ejs b/views/partials/header.ejs
@@ -4,11 +4,25 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><%= title %></title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <link rel="stylesheet" href="/css/home.css">
 </head>
 
 <header>
     <div class="menu-icon">&#9776;</div>
     <h1>Tools To Go</h1>
-</header>
+    <div class="header-icons">
+      <a href="https://www.facebook.com/" target="_blank" class="icon fb" style="font-size: 20px; color: black;">
+        <i class="fab fa-facebook-f"></i>
+      </a>
+      <a href="https://github.com/" target="_blank" class="icon github" style="font-size: 20px; color: black;">
+        <i class="fab fa-github"></i>
+      </a>
+      <a href="https://www.instagram.com/" target="_blank" class="icon instagram" style="font-size: 20px; color: black;">
+        <i class="fab fa-instagram"></i>
+      </a>
+      <i id="light-dark-toggle" class="fas fa-moon" style="font-size: 20px; color: black;"></i> </div>
+      <span class="buy-me-coffee">Buy Me a Coffee</span>
+  </header>
+
 <body>