Skip to content

Commit

Permalink
[BUG] Fix Content Overflow and Misalignment in Waste Management Secti…
Browse files Browse the repository at this point in the history 
…on (#241)

<!-- Thank you for sending a pull request ❤️ -->

[BUG] Fix Content Overflow and Misalignment in Waste Management Section

Closes: #165

The "Waste Management" section had issues with content overflowing and
misaligning, particularly on smaller screen sizes. This disrupted the
layout and negatively affected the user experience, causing some text
and elements to overflow outside their containers.

-Card Layout Adjustment: Updated the card structure to use flexbox for
better alignment and dynamic resizing.

-Text Overflow Handling: Applied CSS properties like overflow-wrap and
text-overflow to handle potential text overflow issues.

-Spacing & Padding: Adjusted margins and padding for better consistency
across cards and between elements.

-Mobile Optimization: Added media queries to ensure the layout is
responsive and readable on smaller screens, preventing
  any misalignment or overflow issues.


_Please check the boxes that apply_

- [x] Bugfix (non-breaking change that fixes an issue)
- [x] New feature (non-breaking change that adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Documentation update (Documentation content changed)
- [ ] Other (please describe):

## Checklist

_Please check the boxes that apply_

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] My changes do not break the current system and pass all existing
test cases
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules



https://github.com/user-attachments/assets/c7fcec2d-398b-4e1c-ac9d-18ae13005c27

Please assign this issue to me as I would like to work on fixing it.
also add the label GSSoC 2024 Extd relaevant and lvl .
  • Loading branch information
@GarimaSingh0109
GarimaSingh0109 authored Oct 9, 2024
2 parents 6aa0a79 + 1c33c93 commit 4745d51
Show file tree
Hide file tree
Showing 2 changed files with 483 additions and 246 deletions.
259 changes: 154 additions & 105 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,41 +148,48 @@ <h3>Non-Biodegradable Waste</h3>
</section>

<section class="features" id="features">
<h2>Our Features</h2>
<div class="feature-card">
<h3>Real-time Monitoring</h3>
<p>Track your waste management activities in real-time.</p>
</div>
<div class="feature-card" id="eco-friendly">
<h3>Eco-Friendly Tips</h3>

<blockquote id="eco-fact">Did you know <span id="fact-highlight">only 9% of all plastic ever
produced has been recycled?</span></blockquote>
<p>Be <span class="highlight">eco-savvy</span> by embracing simple, comprehensive solutions from the
comfort of your home. Contribute to managing the overwhelming burden of waste generation. Get
personalized tips to manage waste sustainably and <strong>be the change you want to see in the
world!</strong></p>
<a href="ecotips.html" id="eco-tips" class="cta-button">Join Us!</a>

<blockquote id="eco-fact">Do you know <span id="fact-highlight">only 9% of plastic ever produced has
been recycled?</span></blockquote>
<p>
Be <span class="highlight">Eco-savvy</span> by embracing simple, comprehensive, and quick
solutions from the comfort of your home.
Contribute in managing the overwhelming burden of waste generation. Get personalized tips to
manage waste sustainably and
<strong>be the change you want to see in the world!</strong>.
</p>
<a href="ecotips.html" id="eco-tips" class="cta-button">I'm in!</a>
<h2>Discover Our Features</h2>
<div class="features-container">


<div class="feature-card" id="eco-friendly">
<div class="icon">
<i class="fas fa-leaf"></i>
</div>
<h3>Eco-Friendly Tips</h3>
<blockquote id="eco-fact">
Did you know <span id="fact-highlight">only 9% of all plastic ever produced has been
recycled?</span>
</blockquote>
<p>Make a difference by embracing eco-friendly practices from home. Learn tips to help manage
waste efficiently and reduce your environmental impact.</p>
<a href="ecotips.html" class="cta-button">Get Tips!</a>
</div>
</div>
<div class="feature-card">
<h3>Community Engagement</h3>
<p>Join community efforts to promote effective waste management.</p>
<div>
<div class="feature-card1">
<div class="icon">
<i class="fas fa-chart-line"></i>
</div>
<h3>Real-time Monitoring</h3>
<p>Keep track of your waste management activities instantly, with up-to-the-minute updates.</p>
</div>

<div class="feature-card1">
<div class="icon">
<i class="fas fa-users"></i>
</div>
<h3>Community Engagement</h3>
<p>Join our community and participate in group efforts for more effective waste management and
environmental care.</p>
</div>

</div>

</section>



<section class="faqs" id="faqs">

<section class="faqs" id="faqs">
Expand Down Expand Up @@ -234,88 +241,125 @@ <h3>Why is it important to sort waste?</h3>
</section>


<section class="feedback" id="feedback">
<h2>Your Feedback</h2>
<form id="feedback-form">
<input type="text" placeholder="Your Name" required>
<textarea placeholder="Your Feedback" required></textarea>
<button type="submit">Submit</button>
</form>
</section>
<section class="feedback" id="feedback">
<h2>Your Feedback</h2>
<form id="feedback-form">
<input type="text" placeholder="Your Name" required>
<textarea placeholder="Your Feedback" required></textarea>
<button type="submit">Submit</button>
</form>
</section>
<section id="about" class="about-us">
<div class="about-container">
<!-- About Us Heading -->
<div class="about-heading">
<h2>About Us</h2>
</div>

<section id="about" class="about-us">
<div class="about-container">
<div class="about-text">
<h2>About Us</h2>
<p><strong>At Waste Management</strong>, we are passionate about creating a sustainable future through effective waste disposal solutions. Our goal is to not only reduce environmental pollution but to also <strong>educate communities</strong> and empower individuals with sustainable waste practices.</p>
<p>By leveraging our <strong>state-of-the-art waste classification system</strong> and encouraging community engagement, we aim to inspire everyone to adopt eco-friendly habits. Together, we can make a significant impact in reducing waste, promoting recycling, and preserving the environment for future generations.</p>
<h3>Our Mission</h3>
<ul>
<li><strong>Reduce Waste:</strong> Minimize waste generation through innovative technologies and education.</li>
<li><strong>Promote Recycling:</strong> Encourage responsible disposal and recycling practices in every community.</li>
<li><strong>Empower Communities:</strong> Equip individuals with knowledge and tools for sustainable living.</li>
<li><strong>Build a Cleaner Future:</strong> Protect the environment for future generations.</li>
</ul>
</div>
<div class="about-image">
<img src="./assets/about-us.jpg" alt="Waste Management team working towards sustainability">
</div>
</div>

<div class="values-container">
<h3>Our Core Values</h3>
<div class="values-cards">
<div class="value-card">
<h4>Innovation</h4>
<p>We believe in continually evolving our waste management practices with cutting-edge technologies to improve efficiency and reduce our environmental footprint.</p>
</div>
<div class="value-card">
<h4>Sustainability</h4>
<p>Environmental sustainability is at the heart of everything we do. We prioritize reducing waste, reusing materials, and promoting recycling initiatives globally.</p>
</div>
<div class="value-card">
<h4>Community</h4>
<p>Collaboration is key. By working together with communities, we aim to foster eco-consciousness and sustainable living across the globe.</p>
<!-- About Content -->
<div class="about-text">
<p><strong>At Waste Management</strong>, we are passionate about creating a sustainable
future through effective waste disposal solutions. Our goal is to not only reduce
environmental pollution but also <strong>educate communities</strong> and empower
individuals with sustainable waste practices.</p>
<p>By leveraging our <strong>state-of-the-art waste classification system</strong> and
encouraging community engagement, we aim to inspire everyone to adopt eco-friendly
habits. Together, we can make a significant impact in reducing waste, promoting
recycling, and preserving the environment for future generations.</p>
</div>

<!-- About Image -->
<div class="about-image">
<img src="./assets/about-us.jpg" alt="Waste Management team working towards sustainability">
</div>

<!-- Mission Section -->
<div class="mission-container">
<h3>Our Mission</h3>
<div class="mission-box">
<div class="mission-item">
<h4>Reduce Waste</h4>
<p>Minimize waste generation through innovative technologies and education.</p>
</div>
<div class="mission-item">
<h4>Promote Recycling</h4>
<p>Encourage responsible disposal and recycling practices in every community.</p>
</div>
<div class="mission-item">
<h4>Empower Communities</h4>
<p>Equip individuals with knowledge and tools for sustainable living.</p>
</div>
<div class="mission-item">
<h4>Build a Cleaner Future</h4>
<p>Protect the environment for future generations.</p>
</div>
</div>
</div>
</div>
<div class="value-card">
<h4>Responsibility</h4>
<p>We are committed to acting with integrity and accountability, ensuring that our practices positively impact both the environment and society.</p>
</section>


<section>
<div class="values-container">
<h3>Our Core Values</h3>
<div class="values-cards">
<div class="value-card">
<h4>Innovation</h4>
<p>We believe in continually evolving our waste management practices with cutting-edge
technologies to improve efficiency and reduce our environmental footprint.</p>
</div>
<div class="value-card">
<h4>Sustainability</h4>
<p>Environmental sustainability is at the heart of everything we do. We prioritize
reducing waste, reusing materials, and promoting recycling initiatives globally.</p>
</div>
<div class="value-card">
<h4>Community</h4>
<p>Collaboration is key. By working together with communities, we aim to foster
eco-consciousness and sustainable living across the globe.</p>
</div>
<div class="value-card">
<h4>Responsibility</h4>
<p>We are committed to acting with integrity and accountability, ensuring that our
practices positively impact both the environment and society.</p>
</div>
</div>
</div>
</div>
</div>
</section>

</section>



<section class="signup" id="signup">
<h2>Sign Up</h2>
<form id="signup-form">
<input type="text" placeholder="Full Name" required aria-label="Full Name">
<input type="email" placeholder="Email Address" required aria-label="Email Address">
<input type="password" placeholder="Password" required aria-label="Password">
<input type="password" placeholder="Confirm Password" required aria-label="Confirm Password">
<button type="submit">Create Account</button>
<section class="signup" id="signup">
<h2>Sign Up</h2>
<form id="signup-form">
<input type="text" placeholder="Full Name" required aria-label="Full Name">
<input type="email" placeholder="Email Address" required aria-label="Email Address">
<input type="password" placeholder="Password" required aria-label="Password">
<input type="password" placeholder="Confirm Password" required aria-label="Confirm Password">
<button type="submit">Create Account</button>
</form>
</section>

</main>

<footer id="footer">
<h2>Stay Connected</h2>
<form id="newsletter-form">
<input type="email" placeholder="Your Email" required>
<button type="submit">Subscribe</button>
</form>
</section>
<div class="social-media">

</main>

<footer id="footer">
<h2>Stay Connected</h2>
<form id="newsletter-form">
<input type="email" placeholder="Your Email" required>
<button type="submit">Subscribe</button>
</form>
<div class="social-media">

<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">Instagram</a>
</div>

<div class="community-message">
<h3>Our Commitment to Sustainability</h3>
<p>At Waste Management, we are dedicated to building a greener future. Through our community recycling programs and sustainability initiatives, we strive to reduce waste and protect the environment for generations to come. Join us in our mission to create a cleaner, healthier planet.</p>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">Instagram</a>
</div>

<div class="community-message">
<h3>Our Commitment to Sustainability</h3>
<p>At Waste Management, we are dedicated to building a greener future. Through our community recycling
programs and sustainability initiatives, we strive to reduce waste and protect the environment for
generations to come. Join us in our mission to create a cleaner, healthier planet.</p>

<a href="#">
<box-icon type="logo" name="facebook"></box-icon>
Expand All @@ -328,7 +372,6 @@ <h3>Our Commitment to Sustainability</h3>
</a>

</div>

<div class="community-message">
<h3>Our Commitment to Sustainability</h3>
<p>At Waste Management, we are dedicated to building a greener future. Through our community recycling
Expand All @@ -340,6 +383,12 @@ <h3>Our Commitment to Sustainability</h3>
</footer>

<script src="script.js"></script>
</section>
</main>


<script src="script.js"></script>


</body>

Expand Down
Loading

0 comments on commit 4745d51

Please sign in to comment.