Merge pull request #165 from YadlaMani/dev

Footer section Added
Avdhesh-Varshney · May 19, 2024 · fb302fd · fb302fd
2 parents ccc355a + c63243c
commit fb302fd
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Web Master Log - Website of All type of Projects</title>
   </head>

diff --git a/src/App.jsx b/src/App.jsx
@@ -6,6 +6,7 @@ import './App.css';
 import SideBar from './components/Sidebar/SideBar';
 import Links from './components/Links';
 import MainPage from './components/Pages/MainPage';
+import Footer from './components/Footer/Footer';
 
 const categories = ['angular', '', 'frontend', 'next', 'node', 'react', 'vanilla', 'vue'];
 const routes = Links();
@@ -27,6 +28,7 @@ function App() {
         </SideBar>
 
       </Router>
+      <Footer/>
     </div>
   );
 }

diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css
@@ -0,0 +1,24 @@
+footer {
+  position: fixed;
+  background-color: black;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 8px;
+  text-align: center;
+  width: 100%;
+
+  border-top: 2px solid white;
+}
+.social-section {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+.social ul li {
+  display: inline;
+  padding-left: 30px;
+}
+.shoutout {
+  padding-right: 5px;
+}
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
@@ -0,0 +1,38 @@
+import "./Footer.css";
+const Footer = () => {
+  const year = new Date().getFullYear();
+
+  return (
+    <footer>
+      <div class="social-section">
+        <div>
+          <div>
+            <b>Made with ♡ by Avdhesh </b>
+          </div>
+        </div>
+        <div class="social">
+          <ul>
+            <li>
+              <a href="https://www.linkedin.com/in/avdhesh-varshney-5314a4233/">
+                <i class="fa-brands fa-linkedin fa-lg"></i>
+              </a>
+            </li>
+            <li>
+              <a href="https://twitter.com/__Avdhesh__">
+                <i class="fa-brands fa-square-x-twitter fa-lg"></i>
+              </a>
+            </li>
+            <li>
+              <a href="https://github.com/Avdhesh-Varshney">
+                <i class="fa-brands fa-square-github fa-lg"></i>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div>{`Copyright © Web Master Log ${year}`}</div>
+    </footer>
+  );
+};
+
+export default Footer;