From 7f0fe5342f80f2f9b1efe89e5f9ae7db69b7aae3 Mon Sep 17 00:00:00 2001
From: Xperior28 <rohithraichu@gmail.com>
Date: Sat, 20 May 2023 02:54:48 +0530
Subject: [PATCH] Added header and footer

---
 src/App.js                    |  42 +++++++++++++++++++---------------
 src/assets/logo.png           | Bin 0 -> 2482 bytes
 src/components/LandingPage.js |   8 +++++++
 src/index.css                 |   5 +++-
 src/styles/LandingPage.css    |  40 +++++++++++++++++++++++++++++---
 5 files changed, 72 insertions(+), 23 deletions(-)
 create mode 100644 src/assets/logo.png

diff --git a/src/App.js b/src/App.js
index c13cb74..6f542c2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,6 @@
 
+import './styles/LandingPage.css'
+
 import React, { useContext, useEffect } from 'react';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import axios from 'axios';
@@ -47,27 +49,29 @@ function App() {
   }
 
   return (
+      <div>
+        <LandingPage />
 
-    <BrowserRouter>
-      <div className="App">
-        <Routes>
-          <Route path="/" element={<LandingPage />} />
-          <Route path="/login" element={<LoginPage />} />
-          <Route path="/register" element={<RegisterPage />} />
-          <Route path="/home" element={<HomePage />} />
-          {/* Add the following route with the authentication check */}
-          <Route
-            path="/createNew"
-            element=<CreateBlogPage />
-          />
-          <Route path="/created" element={<CreatedBlogPage />} />
-          <Route path="/profile" element={<ProfilePage />} />
-          <Route path="/blogs/:id" element={<BlogsDetailPage />} />
-        </Routes>
-        <Toaster />
+        <BrowserRouter>
+          <div className="App">
+            <Routes>
+              <Route path="/" element={<LandingPage />} />
+              <Route path="/login" element={<LoginPage />} />
+              <Route path="/register" element={<RegisterPage />} />
+              <Route path="/home" element={<HomePage />} />
+              {/* Add the following route with the authentication check */}
+              <Route
+                path="/createNew"
+                element= <CreateBlogPage />
+              />
+              <Route path="/created" element={<CreatedBlogPage />} />
+              <Route path="/profile" element={<ProfilePage />} />
+              <Route path="/blogs/:id" element={<BlogsDetailPage />} />
+            </Routes>
+            <Toaster />
+          </div>
+        </BrowserRouter>
       </div>
-    </BrowserRouter>
-
   );
 }
 
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..56bd13fab837e86cee1c5da172afaf469dbad32d
GIT binary patch
literal 2482
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
IZ@4`C519v_VgLXD

literal 0
HcmV?d00001

diff --git a/src/components/LandingPage.js b/src/components/LandingPage.js
index 314556a..0f20e03 100644
--- a/src/components/LandingPage.js
+++ b/src/components/LandingPage.js
@@ -4,6 +4,10 @@ import { MDBBtn } from 'mdb-react-ui-kit';
 function LandingPage() {
   return (
     <div className="downPage">
+      <header className="lp_header">
+        <div className="header_logo"></div>
+        <h3>IEEEBlogs</h3>
+      </header>
     <nav className="lp_navbar">
         {/* <img src={logo} alt="logo" className="logo" /> */}
         <div className="lp_buttons">
@@ -21,6 +25,10 @@ function LandingPage() {
       </div>
       <footer className="lp_footer">
         &copy; 2023 Career Development Website
+        <div className="links">
+          <a href="https://www.youtube.com/watch?v=oHg5SJYRHA0">Youtube</a>
+          <a href="https://github.com/IEEE-BlogApp/frontend">Github</a>
+        </div>
       </footer>
     </div>
   );
diff --git a/src/index.css b/src/index.css
index aac2572..821a14b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,4 @@
-/* <<<<<<< HEAD */
+
 body {
     font-family: Roboto, Helvetica, Arial, sans-serif;
   }
@@ -26,6 +26,9 @@ body {
   position: fixed;
 }
 
+
+
+
  */
 
 
diff --git a/src/styles/LandingPage.css b/src/styles/LandingPage.css
index 5e25d88..42b5496 100644
--- a/src/styles/LandingPage.css
+++ b/src/styles/LandingPage.css
@@ -54,15 +54,49 @@
   }
 
   .lp_footer {
-    background-color: black;
+    background-color: rgb(12, 12, 12);
     color: white;
     padding: 1rem;
-    text-align: center;
     position: absolute;
     bottom: 0;
     width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
   }
 
   .lp_a{
     color:white;
-  }
\ No newline at end of file
+  }
+
+.lp_header {
+  background-color: rgb(12, 12, 12);
+  color: white;
+  padding: 1rem;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  
+}
+
+.lp_header > .header_logo {
+  background-image: url("../assets/logo.png");
+  background-size:cover;
+  padding: 1.5rem;
+  margin-top: -10px;
+  margin-left: -10px;
+}
+
+.lp_header > h3 {
+  margin-left: 30px;
+}
+
+.links > a {
+  margin-left: 40px;
+  margin-right: 20px;
+}
+
+
+