Merge pull request #11 from e20178dulanga/main

Footer added

README.md

@@ -1,18 +1,9 @@
-<img src ="https://github.com/wethmiranasinghe/e20-co200-Erasmus-plus-Project-Web-and-MIS/blob/main/docs/images/erasmus-plus-logo.jpg" width="256" height="144" align="left"/> <img src ="https://github.com/wethmiranasinghe/e20-co200-Erasmus-plus-Project-Web-and-MIS/blob/main/docs/images/CYCLE%20logo.png" width="256" height="144" align="centre"/>
-
 ___
 # Erasmus+ Project Web and MIS
 ___
 
-
 ## Overview
 
 The Erasmus+ Project Web and Management Information System (MIS) is a comprehensive software solution designed to support the management and coordination of Erasmus+ projects. It serves as a centralized platform for stakeholders involved in Erasmus+ projects to collaborate, track progress, manage documents, and facilitate communication.
 
-## Team
--  E/20/316, Wethmi Ranasinghe, [[email protected]](mailto:[email protected])
--  E/20/122, Rashmi Gunathilake, [[email protected]](mailto:[email protected])
--  E/20/178, Dulanga Jayawardena, [[email protected]](mailto:[email protected])
--  E/20/148, Kasundie Hewawasam, [[email protected]](mailto:[email protected])
-
-
+abc

front-end/src/App.jsx

@@ -1,9 +1,13 @@
 import Header from "./Header"
+import Footer from "./Footer"
 import './Header.css'
+import './Footer.css'
 
 function App() {
   return(
-    <><Header></Header></>
+    <><Header></Header>
+    <Footer></Footer>
+    </>
   );
 }
 

front-end/src/Footer.css

@@ -0,0 +1,77 @@
+/* footer.css */
+
+.footer { /* all the items in tne footer */
+    background-color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.footer-card { /* pera logo and Content below the pera logo */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    margin-bottom: 10px;
+    order: 2;
+}
+
+.pera-logo { /* pera logo */
+    max-width: 100px;
+    margin-bottom: 10px;
+}
+
+.footer-card p { /* Content below the pera logo */
+    margin: 5px 0;
+    font-size: 14px;
+    color: #353637;
+    font-family: Sans-Serif;
+}
+
+.footer-nav {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    width: 100%;  /* Ensure it takes the full width for better alignment */
+    order: 1;
+}
+
+.footer-nav nav {
+    margin: 0 15px;
+    text-align: center;  /* Center the text and links */
+    color: #353637;
+    font-family: Sans-Serif;
+}
+
+.footer-nav p {
+    font-size: 14px;
+    margin-bottom: 5px;
+
+}
+
+.footer-nav ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.footer-nav ul li {
+    margin-bottom: 5px;
+    font-size: 14px;
+}
+
+.footer-nav ul li a {
+    text-decoration: none;
+    color: #4e94de;
+
+}
+
+.footer-nav ul li a:hover {
+    text-decoration: underline;
+}
+
+.footer-websiteName {
+    font-size: 12px;
+    color: #535353;
+    font-family: Sans-Serif;
+    order: 3;
+}

front-end/src/Footer.jsx

@@ -0,0 +1,50 @@
+import peraLogo from './assets/pera.png';
+
+function Footer() {
+
+    return (
+
+        <footer className="footer"> 
+            <div className="footer-card">
+                <img className="pera-logo" src={peraLogo} alt="pera logo" /> 
+                <p><p>University of Peradeniya</p>
+                <p>ERASMUS+ CYCLE Project</p>
+                <p>Project Number: GAP-101128627</p></p>
+            </div>
+
+            <div className="footer-nav">
+                <nav>
+                    <p>Main Navigation</p>
+
+                    <ul>
+                        <li><a href="#">Home</a></li>
+                        <li><a href="#">Log in</a></li>
+                        <li><a href="#">Project Overview</a></li>
+                        <li><a href="#">Contact</a></li>
+                    </ul>
+                </nav>
+
+                <nav>
+                    <p>Links to other Projects</p>
+                    <ul>
+                        <li><a href="#">Link1</a></li>
+                        <li><a href="#">Link2</a></li>
+                        <li><a href="#">Link3</a></li>
+                    </ul>
+                </nav>
+
+                <nav>
+                    <p>Quick Links</p>
+                    <ul>
+                        <li><a href="#">Quick Link1</a></li>
+                        <li><a href="#">Quick Link2</a></li>
+                        <li><a href="#">Quick Link3</a></li>
+                    </ul>
+                </nav>
+            </div>
+            <p className = "footer-websiteName">&copy; {new Date().getFullYear()} ERASMUS+ CYCLE PROJECT</p>
+        </footer>
+    );
+}
+
+export default Footer;