Skip to content

Commit

Permalink
Added the About us section (#105)
Browse files Browse the repository at this point in the history 
![image](https://github.com/user-attachments/assets/64cca26d-1a85-416b-8d6c-0a225ababdcb)

Issue #63
  • Loading branch information
@GarimaSingh0109
GarimaSingh0109 authored Oct 6, 2024
2 parents 53f4e07 + 7a34cd6 commit 30c5e1e
Show file tree
Hide file tree
Showing 3 changed files with 160 additions and 22 deletions.
Binary file added assets/about-us.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
134 changes: 112 additions & 22 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,11 @@
<li><a href="#upload">Upload</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#feedback">Feedback</a></li>

<li><a href="#about">About Me</a></li> <!-- New About Me link -->

<li><a href="#signup">Signup</a></li>

<li><a href="#footer">Contact</a></li>
</ul>
</nav>
Expand All @@ -46,20 +50,21 @@ <h2>Upload Image</h2>


<main><br>
<section class="upload" id="upload">
<div class="upload-container">
<div class="upload-text">
<h2> Upload Your Files Here </h2><br>
<label for="image-input" class="custom-file-upload">
<input type="file" id="image-input" accept="image/*" hidden>
<span> Select Image </span>
</label>
</div>
<div class="upload-submit">
<button id="upload-button"> Submit </button>
</div>
</div>
</section>
<!-- Existing sections remain unchanged -->
<section class="upload" id="upload">
<div class="upload-container">
<div class="upload-text">
<h2> Upload Your Files Here </h2><br>
<label for="image-input" class="custom-file-upload">
<input type="file" id="image-input" accept="image/*" hidden>
<span> Select Image </span>
</label>
</div>
<div class="upload-submit">
<button id="upload-button"> Submit </button>
</div>
</div>
</section>


<section class="classification">
Expand All @@ -73,6 +78,34 @@ <h2>Disposal Information</h2>
</section>


<section class="classification-info" id="classification-info">
<h2> Waste Classification</h2>
<div class="card-container">
<div class="card">
<div class="card-inner">
<div class="card-front">
<span>Biodegradable Waste</span>
</div>
<div class="card-back">
<h3>Biodegradable Waste</h3>
<p>These wastes come from our kitchen and include food remains, garden waste, etc. They can be composted to obtain manure and decompose over time.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-inner">
<div class="card-front">
<span>Non-Biodegradable Waste</span>
</div>
<div class="card-back">
<h3>Non-Biodegradable Waste</h3>
<p>This type includes old newspapers, broken glass, plastics, etc. They do not decompose and are major pollutants but can be recycled and reused.</p>
</div>
</div>
</div>
</div>
</section>

<section class="features" id="features">
<h2>Our Features</h2>
<div class="feature-card">
Expand All @@ -81,20 +114,20 @@ <h3>Real-time Monitoring</h3>
</div>
<div class="feature-card" id="eco-friendly">
<h3>Eco-Friendly Tips</h3>
<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>

<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>
</div>
<div class="feature-card">
<h3>Community Engagement</h3>
<p>Join community efforts to promote waste management.</p>
</div>
</section>

<section class="faqs" id="faqs">
<h2>Frequently Asked Questions (FAQs)</h2>

Expand Down Expand Up @@ -130,6 +163,7 @@ <h3>Why is it important to sort waste?</h3>
</section>



<section class="feedback" id="feedback">
<h2>Your Feedback</h2>
<form id="feedback-form">
Expand All @@ -140,6 +174,50 @@ <h2>Your Feedback</h2>
</form>
</section>

<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>
</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>
</section>



<section class="signup" id="signup">
<h2>Sign Up</h2>
<form id="signup-form">
Expand All @@ -150,6 +228,7 @@ <h2>Sign Up</h2>
<button type="submit">Create Account</button>
</form>
</section>

</main>
<!-- Community and Sustainability Section -->
<div class="community-message">
Expand All @@ -165,6 +244,16 @@ <h2>Stay Connected</h2>
<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="#">
<box-icon type="logo" name="facebook"></box-icon>
</a>
Expand All @@ -174,6 +263,7 @@ <h2>Stay Connected</h2>
<a href="#">
<box-icon type="logo" name="instagram"></box-icon>
</a>

</div>

<p>&copy; 2024 Waste Management. All rights reserved.</p>
Expand Down
48 changes: 48 additions & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1255,3 +1255,51 @@ main .feedback {
}
}


.about-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 40px 0;
}

.about-text {
flex: 1;
padding-right: 20px;
}

.about-image img {
width: 100%;
height: auto;
border-radius: 10px;
}

.values-container {
margin-top: 40px;
}

.values-cards {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

.value-card {
background-color: #f3f3f3;
padding: 20px;
border-radius: 8px;
margin: 10px;
width: 220px;
text-align: center;
}

.value-card h4 {
color: #2a9d8f;
font-size: 20px;
}

.value-card p {
font-size: 16px;
color: #333;
}

0 comments on commit 30c5e1e

Please sign in to comment.