Fix issue #issue-number: 1575 MAKE THIS NAVBAR TO REFLECTING EFFECT O…

[RacharlaSanjana]

Pull Request: Navbar Reflective Black Background with Shadow Effect

Related Issue

Fixes: #1575

Description

This pull request improves the navbar by giving it a reflective black background and shadow effect for enhanced visual appeal. The changes in style.css ensure that the navbar reflects light subtly and transitions smoothly when scrolling.

Changes made:

• Reflective Background: Set navbar background to black (#000000), with an option to adjust to a semi-transparent black (rgba(0, 0, 0, 0.7)), allowing a shadow effect when scrolled.
• Reflection Effect: Added a light reflection effect at the bottom of the navbar using a pseudo-element, providing a polished, mirrored look.
• Hover Effect: Added hover effects to navbar links, changing their color to a highlight yellow (#ffde59) for a more interactive user experience.

Type of PR

• Bug fix
• Feature enhancement
• Documentation update
• Other (specify): _______________

Screenshots / Videos

Checklist

• I have made this change on my own.
• I have taken help from some online resources.
• My code follows the style guidelines of this project.
• I have performed a self-review of my own code.
• I have commented on complex code sections where necessary.
• My changes generate no new warnings.
• I have tested the changes thoroughly before submitting this pull request.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
buddy-trail	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 27, 2024 7:05am

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our contributing.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[netlify]

✅ Deploy Preview for buddytrail ready!

Name	Link
🔨 Latest commit	9c7a0e9
🔍 Latest deploy log	https://app.netlify.com/sites/buddytrail/deploys/671de63ccad1400008976d62
😎 Deploy Preview	https://deploy-preview-1653--buddytrail.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[PriyaGhosal]

@RacharlaSanjana Sorry, This issue has already been addressed Find another issue or feature to contribute to. Thank you!