Improve Global Styling and Layout for Consistency and Responsiveness

Mohitranag18 commented 1 week ago

Issue Closed: #415

Description

This PR addresses the styling issues outlined in #415. It standardizes global styles, implements a responsive layout, and enhances the overall look and feel of the website. By applying consistent font styles, background colors, padding, and margins, this update aims to create a cohesive and user-friendly design across all pages and devices.

Changes Made

Applied global font styles for headings and body text to ensure consistency.
Set a cohesive background color across all pages to enhance visual appeal.
Used Flexbox and CSS Grid to create a responsive layout for mobile, tablet, and desktop.
Standardized padding and margins to maintain consistent spacing across elements.

Implementation Details

Updated styles.css with global font family selections for headings (font-family: 'Roboto', sans-serif;) and body text (font-family: 'Open Sans', sans-serif;).
Added a primary background color and subtle gradient for visual consistency.
Utilized Flexbox for primary layout structures and CSS Grid in sections requiring detailed grid alignment.
Added responsive media queries to ensure layout adapts to different screen sizes, enhancing usability on mobile and tablet devices.

Screenshots

Screenshot 2024-11-10 at 01-18-46 Waste Management

Testing

Verified layout and styling on mobile, tablet, and desktop.
Tested alignment and spacing across all sections to ensure consistent padding and margin implementation.
Ensured font styles and background colors apply consistently throughout the site.

Summary by CodeRabbit

New Features
- Added a "Disposal Information" section with details on waste categories.
- Introduced a "Biodegradable Waste" card with descriptions.
- Updated FAQ section for better organization.
- Enhanced feedback form layout.
Style Improvements
- Comprehensive redesign of CSS for improved layout and responsiveness.
- New styles for buttons and navigation elements.
- Updated hero section for better alignment and spacing.
Bug Fixes
- Improved footer organization and navigation links.

coderabbitai[bot] commented 1 week ago

Walkthrough

The pull request introduces significant updates to the layout and design of the website, primarily through modifications to index.html and styles.css. A new "Disposal Information" section and a "Categories" div for "Biodegradable Waste" are added in the HTML file. The CSS file undergoes a comprehensive overhaul, enhancing global styles, responsive design, and visual consistency. The changes aim to improve the overall user experience and maintainability of the website.

Changes

File	Change Summary
`index.html`	Added sections for "Disposal Information" and "Categories", updated FAQ and feedback form, reorganized footer, improved structure with comments.
`styles.css`	Overhauled styles for layout, colors, and responsive design; added button styles, refined media queries, and improved organization.

Assessment against linked issues

Objective	Addressed	Explanation
Apply global font styles for headings and body text (#415)	✅
Set a background color or image for the website (#415)	✅
Use Flexbox or CSS Grid to ensure responsive layout (#415)	✅
Add consistent padding and margins across elements (#415)	✅

Possibly related PRs

#108: Modifies styles.css to introduce new styles for eco-related sections, relevant to the design changes in this PR.
#342: Enhances layout and presentation of eco-tips in ecotips.html and script.js, aligning with updates in index.html.
#375: Involves restructuring of index.html, directly related to the changes made in this PR.
#379: Addresses CSS styling in ecotipes.html, relevant to the overall layout enhancements in this PR.
#398: Updates index.html with new sections and improved layout, directly connected to this PR's modifications.

Suggested labels

gssoc-ext, hacktoberfest, level3, hacktoberfest-accepted

Suggested reviewers

GarimaSingh0109

Poem

In the garden of code, we hop and play,
With sections and styles, we brighten the day.
Disposal info shines, categories bloom,
A responsive layout dispels all the gloom.
So come take a look, let your worries take flight,
Our website's now ready, all polished and bright! 🐇✨

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] commented 1 week ago

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

github-actions[bot] commented 1 week ago

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

netlify[bot] commented 1 week ago

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

Name	Link
Latest commit	5d905a371cf0e6d8c2e3e4ff4b46710183e6ac4f
Latest deploy log	https://app.netlify.com/sites/manageyourwaste/deploys/6730529119a40100082066a0

GarimaSingh0109 / WasteManagment