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

Enhance Form Styling for Improved Usability and Aesthetics #420

Merged
merged 3 commits into from
Nov 10, 2024
Merged

Enhance Form Styling for Improved Usability and Aesthetics #420

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5d905a3
added global styling in the website
Mohitranag18 Nov 10, 2024
6b808bc
added style in different section of the website
Mohitranag18 Nov 10, 2024
0157bef
added styling to the forms and footer section of website
Mohitranag18 Nov 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 82 additions & 77 deletions index.html
View file
Open in desktop
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
Loading