Skip to content

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