Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhanced Footer UI for a more Clean look #229

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

Piyusss
Copy link

@Piyusss Piyusss commented Feb 22, 2025

Purpose of this PR

Currently, the footer design is very basic and old-style. I modified it to give it a modern and glassy look with hover features added.

Description Of Changes

Before:

  1. Unwanted extra padding between all 3-sections(About, Help and Contact).
  2. Divider was covering whole screen, extending from left to right completely.
  3. Font was not looking good at first sight.
  4. Background color was complete white thereby making it hard to distinguish the main body of site with the footer.
  5. No hover-effect on hyper links.

After:

  1. Optimized extra padding and made it more compact and professional.
  2. Divider is covering only middle part thereby making it attractive with a light yellowish-color.
  3. Font changed (similar to Poppins) to make it eye appealing.
  4. Changed background color to a dark palette, making it easy to distinguish the same without compromising its aesthetics.
  5. Added hover effect so that the color of text changes smoothly and returns to original color when cursor is removed.

Related Issue

Fixes #227

Motivation and Context

As i said before, the footer was looking so basic without extra effects. I modified it with the changes described above.
Motivation:- Whenever we visit a new site today, its footer looks literally attractive and is generally made by using modern UI's like shadCN/Material etc. I implemented the same trend through this PR.

How Has This Been Tested?

Tested locally on my machine on different Web-Browsers and the result was fine everytime.
Some of these browsers are:- Chrome, Brave, Mozilla and Edge.

Screenshots or GIF (In case of UI changes):

Old Footer:
old-footer

New Footer:
new-footer

Hover-Effect(For Reference):

footer-hover-effect.mp4

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • My code follows the code style of this project.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant