Add Section-Specific Styling for Enhanced Structure and Visual Appeal

[Mohitranag18]

Issue Closed: #416

Description

This PR addresses the styling issues for individual sections as described in #416. Each section (Home, Upload, Features, Feedback, About Me, Sign Up, and Contact) has been styled to create a cohesive theme and enhance readability and user experience. Key improvements include background colors, section spacing, text alignment, and image styling.

Changes Made

• Styled each section with unique background colors and fonts to maintain consistency with the website's theme.
• Added appropriate padding and spacing between sections to prevent visual overlap and enhance clarity.
• Improved text and image styling to ensure readability, especially for sections with dense content.
• Ensured content alignment within each section for a balanced and visually appealing layout.

Implementation Details

• Updated styles.css with new section-specific classes for each of the seven sections.
• Applied unique background colors and font styles in line with the theme of the website.
• Added spacing (padding and margin) to separate sections and avoid blending.
• Styled images to ensure they are well-aligned with the text and scaled appropriately across different screen sizes.
• Enhanced section borders and heading styles to make each section easily distinguishable and visually appealing.

Screenshots

Testing

• Verified that each section is properly styled and separated on mobile, tablet, and desktop devices.
• Checked text readability and image alignment across all sections.
• Ensured each section's content remains visually balanced and consistent with the overall design.

Summary by CodeRabbit

• New Features

  • Introduced new sections for "Disposal Information" and "Waste Categories," including details on "Biodegradable Waste."
  • Enhanced footer with additional links and a community sustainability message.
  • Restructured "Features" section to emphasize eco-friendly tips and community engagement.

• Style Improvements

  • Comprehensive updates to the visual design, including new layouts, color schemes, and responsive adjustments for better usability.

• Documentation

  • FAQ section reorganized for improved clarity and accessibility.

[coderabbitai[bot]]

Walkthrough

The changes involve significant updates to both the index.html and styles.css files. New sections such as "Disposal Information" and "Waste Categories" have been added to the HTML, along with enhancements to existing sections like the footer and FAQ. The CSS has been overhauled to improve layout, color schemes, and component styling, ensuring a modern aesthetic and better usability. Overall, these modifications aim to enhance content organization and user experience.

Changes

File	Change Summary
index.html	Added new sections: "Disposal Information," "Waste Categories," and "FAQ." Enhanced footer with links and community message. Updated "Features" section and reorganized FAQ for clarity.
styles.css	Comprehensive CSS overhaul including layout updates, color scheme changes, responsive design adjustments, and improved styling for various sections.

Assessment against linked issues

Objective	Addressed	Explanation
Section-specific styling for various sections (416)	✅

Possibly related PRs

• #108: Enhances styles for eco-related sections, potentially relevant to the new "Disposal Information" and "Waste Categories."
• #342: Updates to the footer and eco-tips section, connecting with footer enhancements in index.html.
• #375: Involves restructuring of index.html, closely aligning with changes made in the main PR.
• #379: Addresses CSS styling on ecotips.html, relating to overall improvements in user experience.
• #398: Updates to the Mission and Signup sections in index.html, directly related to the changes in the main PR.

Suggested labels

gssoc-ext, hacktoberfest, level3, hacktoberfest-accepted

Suggested reviewers

• GarimaSingh0109

Poem

In the garden of waste, we now find,
New sections and styles, beautifully aligned.
With tips that are green and a footer so bright,
Our commitment to earth shines ever so bright! 🌍✨
Let's share the message, let it be known,
Together we thrive, in this eco-friendly zone!

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

🪧 Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (Invoked using PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### CodeRabbit Configuration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

[github-actions[bot]]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. 😊

[github-actions[bot]]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. 😊

[netlify[bot]]

❌ Deploy Preview for manageyourwaste failed. Why did it fail? →

Name	Link
🔨 Latest commit	6b808bc3e94c189cc0542666ec4698524a7c3f80
🔍 Latest deploy log	https://app.netlify.com/sites/manageyourwaste/deploys/6730555bc089680008086aab