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.

Sign up for GitHub

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

Jump to bottom

Section-Specific Styling (Home, Features, About, etc.) #416

Closed
Mohitranag18 opened this issue Nov 10, 2024 · 2 comments · Fixed by #419
Closed

Section-Specific Styling (Home, Features, About, etc.) #416

Mohitranag18 opened this issue Nov 10, 2024 · 2 comments · Fixed by #419
Labels
gssoc-ext hacktoberfest hacktoberfest-accepted

Comments

@Mohitranag18
Copy link
Contributor

Description:

Each of the seven sections (Home, Upload, Features, Feedback, About Me, Sign Up, and Contact) lacks proper styling and structure. These sections should be styled individually to match the theme of the website and enhance user experience.

Tasks:

  • Style each section with appropriate background colors, fonts, and borders.
  • Add spacing between sections to prevent them from blending together.
  • Style the text and images to ensure readability and visual appeal.
  • Ensure the content in each section is well-aligned and visually balanced.
@github-actions GitHub Actions
Copy link

Thank you for creating this issue! 🎉 We'll look into it as soon as possible.

@Mohitranag18 Mohitranag18 mentioned this issue Nov 10, 2024
Merged
GarimaSingh0109 added a commit that referenced this issue Nov 10, 2024
@GarimaSingh0109
Add Section-Specific Styling for Enhanced Structure and Visual Appeal (…
9b28062 
…#419)

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
![Screenshot 2024-11-10 at 01-37-14 Waste
Management](https://github.com/user-attachments/assets/1bce9ad3-c869-4128-a572-6ec079295078)


### 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.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## 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.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
@github-actions GitHub Actions
Copy link

Hello @Mohitranag18! Your issue #416 has been closed. Thank you for your contribution!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
gssoc-ext hacktoberfest hacktoberfest-accepted
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add Section-Specific Styling for Enhanced Structure and Visual Appeal Mohitranag18/WasteManagment
1 participant
@Mohitranag18