Skip to content

Commit

Permalink
added global styling in the website
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mohitranag18
Mohitranag18 committed Nov 10, 2024
1 parent 02a8a47 commit 5d905a3
Show file tree
Hide file tree
Showing 2 changed files with 263 additions and 2,600 deletions.
159 changes: 82 additions & 77 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,13 @@

<!-- Progress Bar -->


<!-- part 1 start-->
<div id="progress-container">
<div id="progress-bar"></div>
</div>
<header>


<a href="index.html">
<h1>Waste Management</h1>
</a>

<a href="index.html">
<h1>Waste Management</h1>
</a>
Expand Down Expand Up @@ -93,19 +89,22 @@ <h2>Upload Your Files</h2>
<h2>Waste Classification</h2>
<p id="classification-result">Your classification result will appear here.</p>
</section>
<!-- part 2 start-->

<section class="disposal">
<h2>Disposal Information</h2>
<p id="disposal-information">Disposal information will be displayed here.</p>
</section>
<div>
<div class="Categories">
<h2>Waste Categories</h2>
<div class="card-container">
<div class="card">
<div class="card-inner">
<div class="card-front">
<img src="./assets/arrangement-cooked-fish-leftovers-recycle-symbol.jpg"
alt="Biodegradable Waste">
<h3>Biodegradable Waste</h3>
<p>Items like fruit peels, vegetable scraps, and paper. These decompose naturally over time, enriching the soil and reducing waste.</p>
<span>Biodegradable Waste</span>
</div>

Expand Down Expand Up @@ -378,79 +377,78 @@ <h3>Biodegradable Waste</h3>
decompose over time.</p>
</div>
</div>
</div>

<div class="card">
<div class="card-inner">
<div class="card-front">
<img src="./assets/front-view-recycling-basket-grass-with-trash.jpg" alt="Non-Biodegradable Waste">
<span>Non-Biodegradable Waste</span>
</div>
<div class="card-back">
<h3>Non-Biodegradable Waste</h3>
<p>Items like old newspapers, broken glass, and plastics. These do not decompose and are major
pollutants, but can be recycled and reused.</p>
</div>
</div>


</main>



<footer id="footer">
<h2>Stay Connected</h2>
<form id="newsletter-form">
<input type="email" placeholder="Your Email" required>
<span id="newsletter-error-message" style="color: red;"></span>
<!-- Error message for newsletter -->
<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>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="24" height="24">
<path
d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
</svg>
</a>

<a href="#">
<box-icon type="logo" name="instagram"></box-icon>
</a>
<div class="card">
<div class="card-inner">
<div class="card-front">
<img src="./assets/front-view-recycling-basket-grass-with-trash.jpg" alt="Non-Biodegradable Waste">
<span>Non-Biodegradable Waste</span>
</div>
<div class="card-back">
<h3>Non-Biodegradable Waste</h3>
<p>Items like old newspapers, broken glass, and plastics. These do not decompose and are major
pollutants, but can be recycled and reused.</p>
</div>
</div>

<p>&copy; 2024 Waste Management. All rights reserved.</p>
<button id="BacktoTop">
<div class="circle1">
<svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30"
fill="currentColor" class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z">
</path>
</svg>


</main>



<footer id="footer">
<h2>Stay Connected</h2>
<form id="newsletter-form">
<input type="email" placeholder="Your Email" required>
<span id="newsletter-error-message" style="color: red;"></span>
<!-- Error message for newsletter -->
<button type="submit">Subscribe</button>
</form>
<div class="social-media">
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">Instagram</a>
</div>
</button>
</footer>


<p>&copy; 2024 Waste Management. All rights reserved.</p>
</footer>

<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>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="24" height="24">
<path
d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
</svg>
</a>

<a href="#">
<box-icon type="logo" name="instagram"></box-icon>
</a>
</div>

<p>&copy; 2024 Waste Management. All rights reserved.</p>
<button id="BacktoTop">
<div class="circle1">
<svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30"
fill="currentColor" class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z">
</path>
</svg>
</div>
</button>
</footer>


<p>&copy; 2024 Waste Management. All rights reserved.</p>
</footer>

</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -488,6 +486,9 @@ <h3>Community Engagement</h3>
</div>
</div>
</section>

<!-- part 3 start -->

<section class="faqisection">
<section class="faqs" id="faqs">
<div>
Expand Down Expand Up @@ -701,6 +702,10 @@ <h4>Responsibility</h4>
</div><a class="link" href="">
</a>
</div>

<!-- part 4 start -->


<footer id="footer">
<h2>Stay Connected</h2>
<form id="newsletter-form" name="newsletter-form">
Expand Down
Loading

0 comments on commit 5d905a3

Please sign in to comment.