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

Improved Footer's UI to match modern styles #228

Closed
wants to merge 1 commit into 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):

Before:
old-footer-look

After:
new-footer-look

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.

Thank You

@Piyusss Piyusss changed the base branch from master to main February 22, 2025 13:17
@Piyusss Piyusss changed the base branch from main to master February 22, 2025 13:23
@Piyusss
Copy link
Author

Piyusss commented Feb 22, 2025

I created this PR in master branch, but since it is guided to perform any change in the main branch only from now onwards. So, I will be creating the same for main branch.
Hence, closing this PR for now.

@Piyusss Piyusss closed this Feb 22, 2025
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.

Enhance Footer UI for a More Modern Look
1 participant