Skip to content

Commit

Permalink
Merge pull request #17 from e20178dulanga/main
Browse files Browse the repository at this point in the history
Update footer
  • Loading branch information
wethmiranasinghe authored Jun 15, 2024
2 parents cb3fa41 + 3706fa6 commit 1d9e2c6
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 55 deletions.
Binary file added front-end/src/assets/footerBackground.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
104 changes: 70 additions & 34 deletions front-end/src/components/Footer.css
Original file line number Diff line number Diff line change
@@ -1,62 +1,57 @@
/* 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;
.footer { /* all the items in tne footer - footer background color and padding */
background-image: url(../assets/footerBackground.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 10px;
}

.pera-logo { /* pera logo */
.pera-logo { /* pera logo - size and spaces */
margin-top: 20px;
max-width: 100px;
margin-bottom: 10px;
}

.footer-card p { /* Content below the pera logo */
.logo-content { /* Content below the pera logo */
margin: 5px 0;
font-size: 14px;
color: #353637;
font-family: Sans-Serif;
font-weight: bold;
color: #4e4e51;
text-align: left;
font-size: 16px; /* Changed font size */
}

.footer-nav {
.footer-nav { /* all the content of the footer excpet copyright statement */
display: flex;
flex-direction: row;
align-items: flex-start;
text-align: left;
justify-content: space-around;
flex-wrap: wrap;
width: 100%; /* Ensure it takes the full width for better alignment */
order: 1;
}

.footer-nav nav {
.footer-nav nav { /* topics and their links are divided in to 3 nav parts */
margin: 0 15px;
text-align: center; /* Center the text and links */
color: #353637;
text-align: left; /* Center the text and links */
color: #4e4e51;
font-family: Sans-Serif;
}

.footer-nav p {
font-size: 14px;
.footer-nav h6 { /* topics of the links */
margin-top: 30px;
font-size: 16px;
margin-bottom: 5px;

}

.footer-nav ul {
.footer-nav ul { /* links under the topics */
list-style-type: none;
padding: 0;
}

.footer-nav ul li {
.footer-nav ul li { /* lists of links under the topics */
margin-bottom: 5px;
font-size: 14px;
font-size: 16px;
}

.footer-nav ul li a {
Expand All @@ -69,9 +64,50 @@
text-decoration: underline;
}

.footer-websiteName {
font-size: 12px;
color: #535353;
.footer-websiteName { /* Copyright statement of the webpage */
text-align: center;
font-size: 14px;
color: #4e4e51;
font-family: Sans-Serif;
order: 3;
}

/* Media query for small screens */
@media (max-width: 800px) {

.footer { /* small screens adjustments with padding*/
align-items: flex-start;
padding: 30px;
}

.footer-nav {
flex-direction: column; /* Stack navigation sections vertically */
}

.footer-nav nav {
margin: 10px 0; /* Add some margin for spacing between sections */
}

/* font size adjustments for smaller screens */
.footer-nav h6 {
margin-top: 10px;
font-size: 16px;
margin-bottom: 5px;
font-weight: bold;
}

.footer-nav ul li {
font-size: 16px;
font-weight: bold;
}

.footer-nav ul li a {
text-decoration: none;
color: #4e94de;
font-weight: bold;
}

.footer-websiteName {
font-size: 14px;
}
}
54 changes: 33 additions & 21 deletions front-end/src/components/Footer.jsx
Original file line number Diff line number Diff line change
@@ -1,48 +1,60 @@
import peraLogo from '../assets/pera.png';
import peraLogo from '../assets/pera.png'; /* import pera logo from assets folder */
import {Link, Outlet} from 'react-router-dom'; /* To link the Main navigation links to the respective pages */

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>
<div className="footer-nav">
<div classname = "footer-logo">
<img className="pera-logo" src={peraLogo} alt="pera logo" /> {/* UoP logo */}
{/* Content which comes under (Uni Name, Project, Project Number) UoP logo */}
<p className= "logo-content"><p>University of Peradeniya</p>
<p>ERASMUS+ CYCLE Project</p>
<p>Project Number: GAP-101128627</p></p>
</div>
</div>

<div className="footer-nav">
<nav>
<p>Main Navigation</p>
{/* Topics Followed by the respective links */}

<h6>Main Navigation</h6>

<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>
<li><Link to = '/'>Home</Link></li>
<li><Link to = '/project overview'>Log in</Link></li>
<li><Link to = '/project overview'>Project Overview</Link></li>
<li><Link to = '/contact'>Contact</Link></li>
</ul>
</nav>

<nav>
<p>Links to other Projects</p>
<h6>Quick Links</h6>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="https://erasmus-plus.ec.europa.eu/projects/search/details/101128627">Erasmus+ CYCLE</a></li>
<li><a href="http://www.pgis.pdn.ac.lk/">Postgraduate Institute of Science</a></li>
<li><a href="https://www.ce.pdn.ac.lk/">Department of Computer Engineering</a></li>
<li><a href="https://sci.pdn.ac.lk/scs/">Department of Statics & Computer Science</a></li>
<li><a href="https://inro.pdn.ac.lk/">International Relations Office</a></li>
<li><a href="https://www.ugc.ac.lk/">University Grants Commission</a></li>
</ul>
</nav>

<nav>
<p>Quick Links</p>
<h6>Contact</h6>
<ul>
<li><a href="#">Quick Link1</a></li>
<li><a href="#">Quick Link2</a></li>
<li><a href="#">Quick Link3</a></li>
<li>Manager: <a href="https://people.ce.pdn.ac.lk/staff/academic/upul/">Dr. Upul Jayasinghe</a></li>
<li>Tel: <a href="tel:+94760416590">+94 76 0416 590</a></li>
<li>Email: <a href="mailto:[email protected]">[email protected]</a></li>

<li> Coordinator: <a href="https://sci.pdn.ac.lk/scs/staff/Erunika-Dayaratna">Dr. Erunika Dayaratna</a></li>
<li>Tel: <a href="tel:+94766986500">+94 76 698 6500</a></li>
<li>Email: <a href="mailto:[email protected]">[email protected]</a></li>
</ul>
</nav>

</div>
<p className = "footer-websiteName">&copy; {new Date().getFullYear()} ERASMUS+ CYCLE PROJECT</p>
{/* Copyright for the website */}
<p className = "footer-websiteName">Erasmus+ CYCLE Project &copy; {new Date().getFullYear()} - All Rights Reserved</p>
</footer>
);
}
Expand Down

0 comments on commit 1d9e2c6

Please sign in to comment.