05-colors-and-backgrounds: Add practical color formats, gradients, and background examples

[darshan-totagi]

Because
This PR adds a new exercise to help learners practice and visualize different CSS color formats, gradients, opacity, and background techniques.
It enhances the “Foundations” section by providing a hands-on, visual example-based learning experience.

This PR

• Added new folder /foundations/colors-and-backgrounds
• Created index.html and style.css files
• Demonstrated color formats (HEX, RGB, RGBA, HSL)
• Added practical gradient examples (linear, radial, conic)
• Included opacity, transparency, and background overlay demonstrations
• Designed visually clear layout with real-world styling examples
• Ensured consistent formatting and readability for learners

Additional Information
This exercise aligns with the existing visual format of the Foundations lessons and provides a practical project for understanding CSS color and background properties.

Pull Request Requirements

• I have thoroughly read and understand The Odin Project Contributing Guide
• The title of this PR follows the location of change: brief description of change format, e.g. 05-colors-and-backgrounds: Add practical color and background examples
• The Because section summarizes the reason for this PR
• The This PR section has a bullet point list describing the changes in this PR
• If this PR addresses an open issue, it is linked in the Issue section
• The solution matches the expected visual outcome and structure for Foundations lessons