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

color palette #170

Closed
wants to merge 2 commits into from
Closed

color palette #170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
063c6a0
added navbar
Khatwangadhareddy Oct 6, 2024
4cddc2f
feat: Implement accessible and mission-aligned theme with high contra…
Khatwangadhareddy Oct 6, 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
Binary file removed ...-broken-photo-picture-image_4909190_png.rf.d0110a95e348ee9996561ef220e29313.jpg
View file
Open in desktop
Binary file not shown.
366 changes: 183 additions & 183 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,183 +1,183 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Waste Management</title>
<link rel="icon" href="./assets/logo.png">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap" rel="stylesheet">
<script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
</head>
<body>
<header>
<a href="#" class="logo">
<img src="logo.png" >
Waste Management
</a>
<nav>
<ul>
<li><a href="#upload">Upload</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#feedback">Feedback</a></li>
<li><a href="#signup">Signup</a></li>
<li><a href="#footer">Contact</a></li>
</ul>
</nav>
</header>
<section class="hero">
<div class="hero-content">
<h2>Manage Your Waste Effectively</h2>
<p>Join us in making a cleaner, greener planet.</p>
<a href="#features" class="hero-btn">Explore Features</a>
</div>
</section>
<main>
<section class="upload" id="upload">
<h2>Upload Image</h2>
<input type="file" id="image-input" accept="image/*">
<button id="upload-button">Upload</button>
</section>
<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>
<section class="classification">
<h2>Classification</h2>
<p id="classification-result"></p>
</section>
<section class="disposal">
<h2>Disposal Information</h2>
<p id="disposal-information"></p>
</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">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>
<div class="faq-item">
<h3>What is the difference between biodegradable and non-biodegradable waste?</h3>
<p>Biodegradable waste refers to organic materials such as food scraps and garden waste that decompose naturally over time. Non-biodegradable waste includes plastics, metals, and other materials that do not decompose easily and require recycling or special disposal methods.</p>
</div>
<div class="faq-item">
<h3>How can I reduce household waste?</h3>
<p>You can reduce waste by buying reusable products, composting organic waste, recycling materials like plastic and paper, and avoiding single-use items. Participating in community waste reduction programs is also helpful.</p>
</div>
<div class="faq-item">
<h3>What should I do with hazardous waste?</h3>
<p>Hazardous waste, such as batteries, chemicals, and electronic waste, should be taken to designated disposal sites or collection events. Do not dispose of them in regular household trash as they can be harmful to the environment.</p>
</div>
<div class="faq-item">
<h3>Can all plastics be recycled?</h3>
<p>No, not all plastics are recyclable. Look for recycling symbols with numbers on plastic products. Most recycling centers accept plastics marked with numbers 1 and 2, but it's important to check with your local center for specific guidelines.</p>
</div>
<div class="faq-item">
<h3>How do I start composting at home?</h3>
<p>To start composting, collect food scraps like fruit peels, vegetable leftovers, and coffee grounds. Combine them with yard waste like leaves and grass clippings in a compost bin. Turn the compost regularly to ensure proper aeration and decomposition.</p>
</div>
<div class="faq-item">
<h3>Why is it important to sort waste?</h3>
<p>Sorting waste ensures that recyclable materials like paper, glass, and plastics are properly processed, reducing the amount of waste sent to landfills. Proper sorting helps reduce pollution, conserve resources, and protect the environment.</p>
</div>
</section>
<section class="feedback" id="feedback">
<h2>Your Feedback</h2>
<form id="feedback-form">
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Feedback" required></textarea>
<button type="submit">Submit</button>
</form>
</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>
</form>
</section>
</main>
<!-- Community and Sustainability Section -->
<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>
</div>
<footer id="footer">
<h2>Stay Connected</h2>
<form id="newsletter-form">
<input type="email" placeholder="email@example.com" 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="#">
<box-icon type="logo" name="facebook"></box-icon>
</a>
<a href="#">
<box-icon type="logo" name="twitter"></box-icon>
</a>
<a href="#">
<box-icon type="logo" name="instagram"></box-icon>
</a>
</div>
<p>&copy; 2024 Waste Management. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Waste Management</title>
<link rel="icon" href="./assets/logo.png">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap" rel="stylesheet">
<script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
</head>
<body>
<header>

<a href="#" class="logo">
<img src="logo.png" >
Waste Management
</a>

<nav>
<ul>
<li><a href="#upload">Upload</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#feedback">Feedback</a></li>
<li><a href="#signup">Signup</a></li>
<li><a href="#footer">Contact</a></li>
</ul>
</nav>
</header>

<section class="hero">
<div class="hero-content">
<h2>Manage Your Waste Effectively</h2>
<p>Join us in making a cleaner, greener planet.</p>
<a href="#features" class="hero-btn">Explore Features</a>
</div>
</section>


<main>
<section class="upload" id="upload">
<h2>Upload Image</h2>
<input type="file" id="image-input" accept="image/*">
<button id="upload-button">Upload</button>
</section>


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


<section class="classification">
<h2>Classification</h2>
<p id="classification-result"></p>
</section>

<section class="disposal">
<h2>Disposal Information</h2>
<p id="disposal-information"></p>
</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">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>

<div class="faq-item">
<h3>What is the difference between biodegradable and non-biodegradable waste?</h3>
<p>Biodegradable waste refers to organic materials such as food scraps and garden waste that decompose naturally over time. Non-biodegradable waste includes plastics, metals, and other materials that do not decompose easily and require recycling or special disposal methods.</p>
</div>

<div class="faq-item">
<h3>How can I reduce household waste?</h3>
<p>You can reduce waste by buying reusable products, composting organic waste, recycling materials like plastic and paper, and avoiding single-use items. Participating in community waste reduction programs is also helpful.</p>
</div>

<div class="faq-item">
<h3>What should I do with hazardous waste?</h3>
<p>Hazardous waste, such as batteries, chemicals, and electronic waste, should be taken to designated disposal sites or collection events. Do not dispose of them in regular household trash as they can be harmful to the environment.</p>
</div>

<div class="faq-item">
<h3>Can all plastics be recycled?</h3>
<p>No, not all plastics are recyclable. Look for recycling symbols with numbers on plastic products. Most recycling centers accept plastics marked with numbers 1 and 2, but it's important to check with your local center for specific guidelines.</p>
</div>

<div class="faq-item">
<h3>How do I start composting at home?</h3>
<p>To start composting, collect food scraps like fruit peels, vegetable leftovers, and coffee grounds. Combine them with yard waste like leaves and grass clippings in a compost bin. Turn the compost regularly to ensure proper aeration and decomposition.</p>
</div>

<div class="faq-item">
<h3>Why is it important to sort waste?</h3>
<p>Sorting waste ensures that recyclable materials like paper, glass, and plastics are properly processed, reducing the amount of waste sent to landfills. Proper sorting helps reduce pollution, conserve resources, and protect the environment.</p>
</div>
</section>


<section class="feedback" id="feedback">
<h2>Your Feedback</h2>
<form id="feedback-form">
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Feedback" required></textarea>
<button type="submit">Submit</button>
</form>
</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>
</form>
</section>
</main>
<!-- Community and Sustainability Section -->
<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>
</div>

<footer id="footer">
<h2>Stay Connected</h2>
<form id="newsletter-form">
<input type="email" placeholder="email@example.com" 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="#">
<box-icon type="logo" name="facebook"></box-icon>
</a>
<a href="#">
<box-icon type="logo" name="twitter"></box-icon>
</a>
<a href="#">
<box-icon type="logo" name="instagram"></box-icon>
</a>
</div>

<p>&copy; 2024 Waste Management. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
Loading