From 063c6a0b9b10f4b77d730a70d0562657305c270b Mon Sep 17 00:00:00 2001 From: Khatwangadhareddy Date: Sun, 6 Oct 2024 11:06:31 +0530 Subject: [PATCH 1/2] added navbar --- ...ng.rf.d0110a95e348ee9996561ef220e29313.jpg | Bin 20902 -> 0 bytes index.html | 366 +-- script.js | 198 +- styles.css | 2401 +++++++++-------- 4 files changed, 1484 insertions(+), 1481 deletions(-) delete mode 100644 Waste_Classification/Waste_Classification_data/Harzardous/pngtree-shattered-light-bulb-bright-power-broken-photo-picture-image_4909190_png.rf.d0110a95e348ee9996561ef220e29313.jpg diff --git a/Waste_Classification/Waste_Classification_data/Harzardous/pngtree-shattered-light-bulb-bright-power-broken-photo-picture-image_4909190_png.rf.d0110a95e348ee9996561ef220e29313.jpg b/Waste_Classification/Waste_Classification_data/Harzardous/pngtree-shattered-light-bulb-bright-power-broken-photo-picture-image_4909190_png.rf.d0110a95e348ee9996561ef220e29313.jpg deleted file mode 100644 index b9180d9e80624e633ee244996fc80c960a6a1843..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 20902 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

7Nu(OP@+yBveZQwV?_%eP|F~EB%`5xUU%eZ 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 - - - - - Waste Management - - - - - - -

- - - - -
- -
-
-

Manage Your Waste Effectively

-

Join us in making a cleaner, greener planet.

- Explore Features -
-
- - -
-
-

Upload Image

- - -
- - -

-
-
-
-

Upload Your Files Here


- -
-
- -
-
-
- - -
-

Classification

-

-
- -
-

Disposal Information

-

-
- - -
-

Our Features

-
-

Real-time Monitoring

-

Track your waste management activities in real-time.

-
-
-

Eco-Friendly Tips

-
Do you know only 9% of plastic ever produced has been recycled?
-

- Be Eco-savvy 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 - be the change you want to see in the world!. -

- I'm in! - -
-
-

Community Engagement

-

Join community efforts to promote waste management.

-
-
-
-

Frequently Asked Questions (FAQs)

- -
-

What is the difference between biodegradable and non-biodegradable waste?

-

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.

-
- -
-

How can I reduce household waste?

-

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.

-
- -
-

What should I do with hazardous waste?

-

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.

-
- -
-

Can all plastics be recycled?

-

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.

-
- -
-

How do I start composting at home?

-

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.

-
- -
-

Why is it important to sort waste?

-

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.

-
-
- - - - - -
- -
-

Our Commitment to Sustainability

-

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.

-
- -
-

Stay Connected

-
- - - -
- - -

© 2024 Waste Management. All rights reserved.

-
- - - + + + + + + Waste Management + + + + + + +
+ + + + +
+ +
+
+

Manage Your Waste Effectively

+

Join us in making a cleaner, greener planet.

+ Explore Features +
+
+ + +
+
+

Upload Image

+ + +
+ + +

+
+
+
+

Upload Your Files Here


+ +
+
+ +
+
+
+ + +
+

Classification

+

+
+ +
+

Disposal Information

+

+
+ + +
+

Our Features

+
+

Real-time Monitoring

+

Track your waste management activities in real-time.

+
+
+

Eco-Friendly Tips

+
Do you know only 9% of plastic ever produced has been recycled?
+

+ Be Eco-savvy 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 + be the change you want to see in the world!. +

+ I'm in! + +
+
+

Community Engagement

+

Join community efforts to promote waste management.

+
+
+
+

Frequently Asked Questions (FAQs)

+ +
+

What is the difference between biodegradable and non-biodegradable waste?

+

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.

+
+ +
+

How can I reduce household waste?

+

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.

+
+ +
+

What should I do with hazardous waste?

+

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.

+
+ +
+

Can all plastics be recycled?

+

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.

+
+ +
+

How do I start composting at home?

+

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.

+
+ +
+

Why is it important to sort waste?

+

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.

+
+
+ + + + + +
+ +
+

Our Commitment to Sustainability

+

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.

+
+ +
+

Stay Connected

+
+ + + +
+ + +

© 2024 Waste Management. All rights reserved.

+
+ + + diff --git a/script.js b/script.js index 85068e7..e4a189f 100644 --- a/script.js +++ b/script.js @@ -1,99 +1,99 @@ -const imageInput = document.getElementById('image-input'); -const uploadButton = document.getElementById('upload-button'); -const classificationResult = document.getElementById('classification-result'); -const disposalInformation = document.getElementById('disposal-information'); - -uploadButton.addEventListener('click', () => { - const image = imageInput.files[0]; - const formData = new FormData(); - formData.append('image', image); - - fetch('/classify', { - method: 'POST', - body: formData - }) - .then(response => response.json()) - .then(data => { - classificationResult.textContent = data.classification; - disposalInformation.textContent = data.disposalInformation; - }) - .catch(error => console.error(error)); -}); - -// FAQ functionality -const faqItems = document.querySelectorAll('.faq-item h3'); - -faqItems.forEach(item => { - item.addEventListener('click', function() { - const parent = this.parentElement; - parent.classList.toggle('active'); - }); -}); - -// Optional: Check the initial mode on page load -if (localStorage.getItem('dark-mode') === 'enabled') { - enableDarkMode(); -} - -// Feedback form validation -const feedbackForm = document.getElementById('feedback-form'); -const feedbackName = feedbackForm.querySelector('input[type="text"]'); -const feedbackEmail = feedbackForm.querySelector('input[type="email"]'); -const feedbackMessage = feedbackForm.querySelector('textarea'); - -feedbackForm.addEventListener('submit', (event) => { - event.preventDefault(); // Prevent the form from submitting - - const name = feedbackName.value.trim(); - const email = feedbackEmail.value.trim(); - const message = feedbackMessage.value.trim(); - let valid = true; - - // Clear previous error messages - feedbackName.setCustomValidity(''); - feedbackEmail.setCustomValidity(''); - - // Name validation - if (name.length < 2) { - feedbackName.setCustomValidity('Name must be at least 2 characters long.'); - valid = false; - } - - // Email validation - const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - if (!emailPattern.test(email)) { - feedbackEmail.setCustomValidity('Please enter a valid email address.'); - valid = false; - } - - // Message validation - if (message.length < 10) { - alert('Message must be at least 10 characters long.'); - valid = false; - } - - if (valid) { - alert('Feedback submitted successfully!'); - feedbackForm.reset(); // Reset the form after successful submission - } else { - feedbackName.reportValidity(); - feedbackEmail.reportValidity(); - } -}); - -// Newsletter form validation -const newsletterForm = document.getElementById('newsletter-form'); -const newsletterEmail = newsletterForm.querySelector('input[type="email"]'); -const newsletterErrorMessage = document.getElementById('newsletter-error-message'); - -newsletterForm.addEventListener('submit', (event) => { - event.preventDefault(); // Prevent the form from submitting - - const email = newsletterEmail.value.trim(); - const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - - // Clear previous error message - newsletterErrorMessage.textContent = ''; - - if (!emailPattern.test(email)) { - newsletterErrorMessage.textContent = 'Please enter +const imageInput = document.getElementById('image-input'); +const uploadButton = document.getElementById('upload-button'); +const classificationResult = document.getElementById('classification-result'); +const disposalInformation = document.getElementById('disposal-information'); + +uploadButton.addEventListener('click', () => { + const image = imageInput.files[0]; + const formData = new FormData(); + formData.append('image', image); + + fetch('/classify', { + method: 'POST', + body: formData + }) + .then(response => response.json()) + .then(data => { + classificationResult.textContent = data.classification; + disposalInformation.textContent = data.disposalInformation; + }) + .catch(error => console.error(error)); +}); + +// FAQ functionality +const faqItems = document.querySelectorAll('.faq-item h3'); + +faqItems.forEach(item => { + item.addEventListener('click', function() { + const parent = this.parentElement; + parent.classList.toggle('active'); + }); +}); + +// Optional: Check the initial mode on page load +if (localStorage.getItem('dark-mode') === 'enabled') { + enableDarkMode(); +} + +// Feedback form validation +const feedbackForm = document.getElementById('feedback-form'); +const feedbackName = feedbackForm.querySelector('input[type="text"]'); +const feedbackEmail = feedbackForm.querySelector('input[type="email"]'); +const feedbackMessage = feedbackForm.querySelector('textarea'); + +feedbackForm.addEventListener('submit', (event) => { + event.preventDefault(); // Prevent the form from submitting + + const name = feedbackName.value.trim(); + const email = feedbackEmail.value.trim(); + const message = feedbackMessage.value.trim(); + let valid = true; + + // Clear previous error messages + feedbackName.setCustomValidity(''); + feedbackEmail.setCustomValidity(''); + + // Name validation + if (name.length < 2) { + feedbackName.setCustomValidity('Name must be at least 2 characters long.'); + valid = false; + } + + // Email validation + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailPattern.test(email)) { + feedbackEmail.setCustomValidity('Please enter a valid email address.'); + valid = false; + } + + // Message validation + if (message.length < 10) { + alert('Message must be at least 10 characters long.'); + valid = false; + } + + if (valid) { + alert('Feedback submitted successfully!'); + feedbackForm.reset(); // Reset the form after successful submission + } else { + feedbackName.reportValidity(); + feedbackEmail.reportValidity(); + } +}); + +// Newsletter form validation +const newsletterForm = document.getElementById('newsletter-form'); +const newsletterEmail = newsletterForm.querySelector('input[type="email"]'); +const newsletterErrorMessage = document.getElementById('newsletter-error-message'); + +newsletterForm.addEventListener('submit', (event) => { + event.preventDefault(); // Prevent the form from submitting + + const email = newsletterEmail.value.trim(); + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + + // Clear previous error message + newsletterErrorMessage.textContent = ''; + + if (!emailPattern.test(email)) { + newsletterErrorMessage.textContent = 'Please enter diff --git a/styles.css b/styles.css index 4823e2b..604e986 100644 --- a/styles.css +++ b/styles.css @@ -1,1199 +1,1202 @@ -/* Progress Bar Container */ -#progress-container { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 9px; - z-index: 99990; -} - -/* Progress Bar Styling */ -#progress-bar { - height: 53%; - width: 0; - background: linear-gradient( - 90deg, - rgb(38, 166, 154) 0%, - rgb(102, 187, 106) 50%, - rgb(76, 175, 80) 100% - ); /* Light theme with teal/green */ - box-shadow: 0 0 4px rgba(38, 166, 154, 0.7), 0 0 10px rgba(76, 175, 80, 0.7); - transition: width 0.09s ease-in-out; - border-radius: 10px; -} - -/* Dark Mode Progress Bar */ -.dark-mode #progress-bar { - background: linear-gradient( - 90deg, - rgb(0, 204, 204) 0%, - rgb(153, 255, 255) 50%, - rgb(0, 150, 150) 100% - ); /* Dark mode */ - box-shadow: 0 0 4px rgba(0, 204, 204, 0.7), 0 0 10px #009696b3; -} - -body { - font-family: "Poppins", sans-serif; - margin: 0; - padding: 0; - background-color: #e0f7fa; /* Light blue background */ -} - -header { - - background-color: #00796b; /* Teal color */ - color: white; - padding: 20px; - display: flex; - text-align: center; - justify-content: space-between; - position: fixed; - top: 0; - width: 100%; - z-index: 1000; - - background-color: #00796b; /* Teal color */ - color: white; - padding: 20px; - display: flex; - text-align: center; - justify-content: space-between; - position: sticky; - top: 0; - z-index: 999; - position: fixed; - top: 0; - width: 100%; - z-index: 1000; - -} - -nav { - margin: auto; - margin-right: 0; -} - -nav ul { - list-style-type: none; - padding: 0; -} - -nav ul li { - display: inline; - margin: 0 15px; -} - -nav ul li a { - color: white; - text-decoration: none; -} - -.hero { - background: linear-gradient(rgba(0, 77, 64, 0.7), rgba(0, 77, 64, 0.8)), - url("https://images.unsplash.com/photo-1628638428099-48fc6fdb98c2?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") - center/cover no-repeat; - color: white; - padding: 80px 20px; - text-align: center; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: 55vh; -} - -.hero h2 { - - font-size: 2.5rem; - margin-bottom: 20px; - -/* Ecoblog Page */ -.hero-contain { - text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); - - font-size: 2.5rem; - margin-bottom: 20px; - text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); - -} - -.hero p { - font-size: 1.2rem; - margin-bottom: 30px; - max-width: 600px; -} - -.hero-btn { - background-color: #26a69a; - color: white; - padding: 12px 24px; - text-decoration: none; - border-radius: 25px; - font-size: 1.1rem; - transition: background-color 0.3s ease; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); -} - -.hero-btn:hover { - background-color: #004d40; -} - -@media (max-width: 768px) { - - .hero h2 { - font-size: 2rem; - } - - .hero p { - font-size: 1rem; - } - - .hero-btn { - padding: 10px 20px; - font-size: 1rem; - } -} - -@media (max-width: 480px) { - .hero { - padding: 60px 15px; - } - - .hero h2 { - font-size: 1.8rem; - } - - .hero p { - font-size: 0.9rem; - } - - .hero-btn { - padding: 8px 18px; - font-size: 0.9rem; - } - - .hero h2 { - font-size: 2rem; - } - - .hero p { - font-size: 1rem; - } - - .hero-btn { - padding: 10px 20px; - font-size: 1rem; - } -} - -@media (max-width: 480px) { - .hero { - padding: 60px 15px; - } - - .hero h2 { - font-size: 1.8rem; - } - - .hero p { - font-size: 0.9rem; - } - - .hero-btn { - padding: 8px 18px; - font-size: 0.9rem; - } - -} - -main { - padding: 20px; -} - -.upload, -.classification, -.disposal, -.feedback { - - margin-bottom: 30px; - - margin-bottom: 30px; - -} - -/* Styling for the upload section */ -.upload { - - background-color: #f5f9ff; - padding: 20px; - border-radius: 10px; - text-align: center; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - max-width: 400px; - margin: 0 auto; - display: flex; - flex-direction: column; - gap: 20px; - - background-color: #f5f9ff; - padding: 20px; - border-radius: 10px; - text-align: center; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - max-width: 400px; - - margin: 0 auto; - display: flex; - flex-direction: column; - gap: 20px; - -} - -/* Container to hold the two rows */ -.upload-container { - display: flex; - flex-direction: column; - align-items: center; /* Center items horizontally */ - gap: 15px; -} - -/* Text section styling */ -.upload-text h2 { - font-size: 1.6em; - color: #333; - margin: 0; -} - -/* Custom file input styling */ -.custom-file-upload { - background-color: #44bf49; - color: white; - padding: 9px; /* Adjusted for better height control */ - height: 50px; /* Set specific height */ - width: 95%; /* Set width to 60% */ - border-radius: 5px; - font-size: 16px; - cursor: pointer; - transition: background-color 0.3s ease; - display: flex; /* Allows centering of text */ - align-items: center; /* Center vertically */ - justify-content: center; /* Center horizontally */ - margin-top: 10px; -} - -/* Hidden input field */ -.custom-file-upload input { - display: none; -} - -/* Hover effect for file upload button */ -.custom-file-upload:hover { - background-color: #3a873d; -} - -/* Submit button styling */ -.upload-submit #upload-button { - - background-color: #007bff; - color: white; - height: 40px; /* Set specific height */ - padding: 10px 20px; - border: none; - border-radius: 5px; - font-size: 16px; - cursor: pointer; - transition: background-color 0.3s ease; - width: 100%; - - background-color: #007bff; - color: white; - height: 40px; /* Set specific height */ - /*width: 95%; */ - padding: 10px 20px; - border: none; - border-radius: 5px; - font-size: 16px; - cursor: pointer; - transition: background-color 0.3s ease; - width: 100%; - -} - -/* Hover effect for submit button */ -.upload-submit #upload-button:hover { - background-color: #0056b3; -} - -.features { - display: flex; - flex-wrap: wrap; - justify-content: center; - margin-bottom: 5px; -} - -.features h2 { - text-align: center; - width: 100%; -} - -.feature-card { - background-color: #a5d6a7; /* Light green */ - padding: 20px; - margin: 10px; - border-radius: 8px; - transition: transform 0.2s; - display: inline-block; - width: calc(33% - 20px); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); -} - -.feature-card:hover { - transform: scale(1.05); - cursor: pointer; -} - -.faqs { - padding: 25px; - border-radius: 10px; - margin: 20px auto; - max-width: 900px; -} - -.faqs h2 { - text-align: center; - font-size: 2em; - margin-bottom: 20px; - color: black; -} - -.faq-item { - margin-bottom: 20px; -} - -.faq-item h3 { - - font-size: 1.4em; - color: #000000; - cursor: pointer; - margin: 0; - padding: 10px; - background-color: #a5d6a7; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - color: rgb(53, 53, 53); - border-radius: 5px; - - font-size: 1.4em; - color: #000000; - cursor: pointer; - margin: 0; - padding: 10px; - background-color: #a5d6a7; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - color: rgb(53, 53, 53); - border-radius: 5px; - -} - -.faq-item p { - font-size: 1em; - color: #555; - padding: 10px; - background-color: white; - border: 1px solid #a5d6a7; - border-radius: 5px; - display: none; /* Hide the answer initially */ -} - -.faq-item.active p { - - display: block; /* Show the answer when the question is clicked */ -} - -/* Eco-tips-features */ -/* Button */ -#eco-friendly { - padding: 2rem; - text-align: center; - border-radius: 8px; - margin: 2rem auto; - max-width: 800px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); -} - -#eco-friendly #eco-tips { - display: inline-block; - padding: 10px 20px; - font-size: 1.1rem; - background-color: #4caf50; - color: white; - text-decoration: none; - border-radius: 5px; - transition: background-color 0.3s ease; - - display: block; /* Show the answer when the question is clicked */ -} - -/*eco-tips-features*/ -/*button*/ -#eco-friendly { - padding: 2rem; - text-align: center; - border-radius: 8px; - margin: 2rem auto; - max-width: 800px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); -} -#eco-friendly #eco-tips { - display: inline-block; - padding: 10px 20px; - font-size: 1.1rem; - background-color: #4caf50; - color: white; - text-decoration: none; - border-radius: 5px; - transition: background-color 0.3s ease; -} - -#eco-friendly #eco-tips:hover { - background: none; - background-image: linear-gradient(to right, #006d77, #edf6f9); - animation: pulsate 1s ease-in-out; - -} - -#eco-friendly #eco-tips:hover { - background: none; - background-image: linear-gradient(to right, #006D77, #EDF6F9); - animation: pulsate 1s ease-in-out; -} - -.eco-friendly-content h3 { - font-size: 2rem; - color: #2e7d32; - margin-bottom: 1rem; -} - -blockquote { - font-size: 1.25rem; - font-style: italic; - color: #333; - background-color: #c8e6c9; - padding: 1rem; - border-left: 4px solid #43a047; - margin-bottom: 1.5rem; - border-radius: 5px; -} - -#fact-highlight { - font-weight: bold; - color: #e53935; -} - -.highlight { - font-weight: bold; - color: #2e7d32; -} - -.eco-friendly-content p { - font-size: 1.1rem; - color: #555; - line-height: 1.6; - margin-bottom: 2rem; -} - - -.main { - display: flex; - align-items: center; - justify-content: space-between; - padding: 40px; - background-color: #EDF6F9; - border-radius: 10px; - max-width: 1200px; - margin: 20px auto; -} - -.hero-text { - flex: 1; - margin-right: 20px; -} - -.hero-text h3 { - font-size: 2.5rem; - font-weight: 700; - color: #006D77; - margin-bottom: 10px; - text-transform: uppercase; -} - -.hero-text p { - font-size: 1.2rem; - line-height: 1.6; -} - -.hero-image { - flex: 1; - text-align: right; -} - -.hero-image img { - max-width: 100%; - height: auto; - border-radius: 10px; -} - -#eco-tips-container { - overflow: hidden; - padding: 2rem; - width: 100%; - max-width: 1200px; - margin: 5.2rem auto; - border-top: 4px solid #006D77; - border-top-left-radius: 24px; - border-top-right-radius: 24px; -} - -.eco-tips-header { - background-color: #EDF6F9; - padding: 2rem; - border-radius: 10px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - text-align: center; - margin: 2rem auto; - max-width: 800px; - font-family: 'Arial', sans-serif; -} - -.eco-tips-header h3 { - color: #006D77; - font-size: 2.2rem; - margin-bottom: 1rem; - font-weight: 700; -} - -.eco-tips-header p { - font-size: 1.1rem; - color: #333; - line-height: 1.5; -} - -/*Ecoblog Page*/ -.hero-container { - display: flex; - align-items: center; - justify-content: space-between; - padding: 40px; - background-color: #edf6f9; - border-radius: 10px; - max-width: 1200px; - margin: 20px auto; -} - -.hero-text { - flex: 1; - margin-right: 20px; -} - -.hero-text h3 { - font-size: 2.5rem; - font-weight: 700; - color: #006d77; - margin-bottom: 10px; - text-transform: uppercase; -} - -.hero-text p { - font-size: 1.2rem; - line-height: 1.6; -} - -.hero-image { - flex: 1; - text-align: right; -} - -.hero-image img { - max-width: 100%; - height: auto; - border-radius: 10px; -} - -#eco-tips-container { - /* position: relative; */ - overflow: hidden; - padding: 2rem; - width: 100%; - max-width: 1200px; - margin: 5.2rem auto; - border-top: 4px solid #006d77; - border-top-left-radius: 24px; - border-top-right-radius: 24px; -} - -.eco-tips-header { - background-color: #edf6f9; - padding: 2rem; - border-radius: 10px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - text-align: center; - margin: 2rem auto; - max-width: 800px; - font-family: "Arial", sans-serif; -} - -.eco-tips-header h3 { - color: #006d77; - font-size: 2.2rem; - margin-bottom: 1rem; - font-weight: 700; -} - -.eco-tips-header p { - color: #333; - font-size: 1.2rem; - margin-bottom: 1rem; - line-height: 1.6; -} - -.eco-tips-header p span { - color: #83c5be; - font-weight: bold; -} - -.eco-tips-header em { - color: #e29578; - font-size: 1.1rem; - font-style: normal; - display: block; - margin-top: 1.5rem; - background-color: #006d77; - padding: 0.5rem 1rem; - border-radius: 5px; - font-weight: 600; -} - -#eco-tips-container { - padding: 2rem; - background-color: #edf6f9; - border-radius: 10px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - max-width: 1200px; - margin: 3.4rem auto; - position: relative; -} - -.slider-control { - background: none; - border: none; - font-size: 2rem; - color: #006d77; - cursor: pointer; - transition: color 0.3s ease; - position: absolute; - top: 50%; - transform: translateY(-50%); - z-index: 1; -} - -#prev-slide { - left: 10px; -} - -#next-slide { - right: 10px; -} - -/* Eco Tips Slider Content */ -.eco-tips-slider { - display: flex; - align-items: center; - position: relative; - overflow: hidden; -} - -.eco-tips-content { - display: flex; - transition: transform 0.5s ease-in-out; - width: 100%; -} - -.eco-tip { - min-width: 100%; - padding: 2rem; - box-sizing: border-box; - /* background-color: #FFDDD2; */ - border-radius: 10px; - text-align: center; - /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); */ -} - -.eco-tip h3 { - color: #006d77; - font-size: 1.8rem; - margin-bottom: 1rem; -} - -.eco-tip p { - color: #333; - font-size: 1.1rem; - margin-bottom: 1.5rem; -} - -feature/your-new-feature .eco-tip img, -.eco-tip video { - max-width: 90%; - border-radius: 8px; - margin-top: 1rem; -} - -.fa-chevron-left, -.fa-chevron-right { - font-size: 2rem; - color: #e29578; - cursor: pointer; - transition: color 0.3s ease; -} - -.fa-chevron-left:hover, -.fa-chevron-right:hover { - color: #006d77; -} - -/*Eco-blog-cards*/ -.eco-blogs { - margin: 5rem 2.4rem 2.4rem 5rem; - padding: 2.4rem; -} -.blogs-section-title { - text-align: center; - font-size: 2.5rem; - - color: #006d77; - font-weight: 600; -} - -.eco-blogs-container { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 20px; - padding-top: 4.4rem; - margin: 3.1rem; - max-width: 1200px; - margin: 20px auto; - border-top: 4px solid #006d77; - border-top-left-radius: 24px; - border-top-right-radius: 24px; -} - -.eco-blogs-card { - border-radius: 10px; - border: 2px solid #83c5be; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); - overflow: hidden; - transition: transform 0.3s ease, box-shadow 0.3s ease; -} - -.eco-blogs-card:hover { - transform: translateY(-10px); - box-shadow: 0 24px 15px #006d77; - cursor: pointer; - background-color: #006d77; -} -.card-header { - height: 200px; - background-size: cover; - background-position: center; -} -.card-content { - padding: 20px; - text-align: left; -} - -.card-content h4 { - font-size: 1.5rem; - margin-bottom: 15px; - color: #333; -} - -.card-content p { - font-size: 1rem; - line-height: 1.5; - color: #666; - color: #83c5be; - margin-bottom: 20px; -} - -.read-more { - text-decoration: none; - color: #28a745; - font-weight: bold; - border-bottom: 2px solid transparent; - transition: border-bottom 0.3s ease; -} - -.read-more:hover { - border-bottom: 2px solid #28a745; -} - -/* Responsive media query */ -@media (max-width: 768px) { - .hero-container { - flex-direction: column; - text-align: center; - } - - .hero-text { - margin: 0; - } - - .hero-image { - margin-top: 20px; - } - .eco-friendly-tips { - padding: 1.5rem; - } - - .eco-friendly-content h3 { - font-size: 1.75rem; - } - - blockquote { - font-size: 1.1rem; - } - - .eco-friendly-content p { - font-size: 1rem; - } - - .cta-button { - padding: 8px 16px; - font-size: 1rem; - } - - .eco-tips-header { - padding: 1.5rem; - } - - .eco-tips-header h3 { - font-size: 1.8rem; - } - - .eco-tips-header p { - font-size: 1rem; - } - - .eco-tips-header em { - font-size: 1rem; - } - .eco-tip h3 { - font-size: 1.5rem; - } - .eco-tip p { - font-size: 1rem; - } - - .slider-control { - font-size: 1.8rem; - } - - .card-header { - height: 150px; - } - - .card-content h4 { - font-size: 1.3rem; - } - - .card-content p { - font-size: 0.9rem; - } - .eco-tip h3 { - font-size: 1.5rem; - } - - .eco-tip p { - font-size: 0.9rem; - } - - .fa-chevron-left, - .fa-chevron-right { - font-size: 1.5rem; - } -} - -@media (max-width: 480px) { - .eco-tips-header { - padding: 1rem; - } - .eco-tip h3 { - font-size: 1.3rem; - } - .eco-tip p { - font-size: 0.9rem; - } - - .slider-control { - font-size: 1.5rem; - } - - .eco-tips-header h3 { - font-size: 1.5rem; - } - - .eco-tips-header p { - font-size: 0.9rem; - } - - .eco-tips-header em { - font-size: 0.9rem; - } - .card-header { - height: 120px; - } - - .card-content h4 { - font-size: 1.1rem; - } - - .card-content p { - font-size: 0.85rem; - } -} - -/*End of ECO-FRIENDLY TIPS Styling*/ - -main .feedback { - margin-bottom: 30px; - background-color: #ffffff; /* White background for better contrast */ - padding: 20px; - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - max-width: 500px; - margin: 0 auto; -} - -.feedback h2 { - text-align: center; - color: #00796b; /* Consistent color with the theme */ - margin-bottom: 20px; -} - -.feedback form { - display: flex; - flex-direction: column; -} - -.feedback input, -.feedback textarea { - margin: 10px 0; - padding: 12px; - border: 1px solid #00796b; - border-radius: 5px; - font-size: 16px; - background-color: #e0f7fa; /* Matches the background theme */ -} - -.feedback textarea { - min-height: 100px; /* Larger space for feedback text */ -} - -.feedback button { - background-color: #00796b; - color: white; - padding: 12px; - border: none; - border-radius: 5px; - font-size: 16px; - cursor: pointer; - transition: background-color 0.3s ease; -} - -.feedback button:hover { - background-color: #004d40; /* Darker teal on hover */ -} - -#footer { - background-color: #00796b; - color: white; - text-align: center; - padding: 20px; - border-radius: 0.2rem; -} - -#newsletter-form input { - margin: 10px 0; - padding: 10px; - border: 1px solid #fff; - border-radius: 5px; -} - -.social-media { - display: flex; - flex-direction: row; - justify-content: center; /* Align items in the center horizontally */ - margin: 10px 0; -} - -.social-media a { - display: grid; - place-items: center; - position: relative; /* Positioning context for the pseudo-element */ - margin: 0 10px; /* Spacing between icons */ - fill: #fff; - margin: 0 10px; - text-decoration: none; - padding: 10px 0px; -} - -.social-media a box-icon { - height: 2rem; - width: 2rem; - position: relative; /* Allows stacking above the pseudo-element */ - z-index: 1; /* Bring the icon above the background */ - transition: color 0.3s ease-in-out; -} - -.social-media a::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 40px; - height: 40px; - background-color: transparent; - border-radius: 50%; - transform: translate(-50%, -50%); - transition: background-color 0.3s ease-in-out; - z-index: 0; -} - -.social-media a:hover::after { - background-color: #004d40; -} -.social-media a:hover { - scale: 1.01; - transition: all 0.3s ease-in-out; -} - - -.signup { - background-color: #f9f9f9; - padding: 20px; - border-radius: 8px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - margin: 20px 0; -} - -.signup h2 { - color: #007b5f; - text-align: center; -} - -.signup form { - display: flex; - flex-direction: column; -} - -.signup input { - padding: 10px; - margin: 10px 0; - border: 1px solid #ccc; - border-radius: 4px; - font-size: 16px; -} - -.signup input:focus { - border-color: #007b5f; - outline: none; -} - -.signup button { - background-color: #007b5f; - color: white; - padding: 10px; - border: none; - border-radius: 4px; - cursor: pointer; - font-size: 16px; -} - -.signup button:hover { - background-color: #005f46; - transition: background-color 0.3s ease; -} - -#newsletter-form { - display: flex; - align-items: center; - justify-content: center; - gap: 6px; -} -#newsletter-form input{ - border: 1.2px solid #e0f7fa; - border-radius: 5px; -} - -#newsletter-form input:focus { - outline: none; -} - -#newsletter-form button:hover { - background-color: #004d40; /* Darker teal on hover */ - transform: scale(1.05); /* Slight zoom effect on hover */ - cursor: pointer; -} - -#newsletter-form button { - border: 1px solid #005f46; /* Adjust border color */ - border-radius: 0.3rem; - overflow: hidden; - position: relative; - background-color: #26a69a; - color: white; - font-size: 16px; - letter-spacing: 1px; - transition: all 170ms linear; - height: 2.3rem; - padding: 10px; -} - -#newsletter-form button span { - z-index: 20; -} - -#newsletter-form button:after { - background: #fff; - content: ""; - height: 155px; - left: -75px; - opacity: 0.2; - position: absolute; - top: -50px; - transform: rotate(35deg); - transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); - width: 50px; - z-index: -10; -} - -#newsletter-form button:hover:after { - left: 120%; - transition: all 750ms cubic-bezier(0.19, 1, 0.22, 1); -} - -.logo { - position: absolute; - left: 83px; - font-size: 35px; - color: #ffffff; - font-weight: bold; - img { - position: absolute; - top: -15px; - left: -77px; - width: 80px; - height: 80px; - } -} - +/* Progress Bar Container */ +#progress-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 9px; + z-index: 99990; +} + +/* Progress Bar Styling */ +#progress-bar { + height: 53%; + width: 0; + background: linear-gradient( + 90deg, + rgb(38, 166, 154) 0%, + rgb(102, 187, 106) 50%, + rgb(76, 175, 80) 100% + ); /* Light theme with teal/green */ + box-shadow: 0 0 4px rgba(38, 166, 154, 0.7), 0 0 10px rgba(76, 175, 80, 0.7); + transition: width 0.09s ease-in-out; + border-radius: 10px; +} + +/* Dark Mode Progress Bar */ +.dark-mode #progress-bar { + background: linear-gradient( + 90deg, + rgb(0, 204, 204) 0%, + rgb(153, 255, 255) 50%, + rgb(0, 150, 150) 100% + ); /* Dark mode */ + box-shadow: 0 0 4px rgba(0, 204, 204, 0.7), 0 0 10px #009696b3; +} + +body { + font-family: "Poppins", sans-serif; + margin: 0; + padding: 0; + background-color: #e0f7fa; /* Light blue background */ +} + +/* Basic reset for padding and margins */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Styling the nav and its contents */ +nav { + background-color: #333; /* Dark background for the nav */ + padding: 10px 0; + text-align: center; /* Centers the navigation items */ +} + +nav ul { + list-style-type: none; /* Removes bullets from the list */ + margin: 0; + padding: 0; +} + +nav ul li { + display: inline-block; /* Makes the list horizontal */ + margin-right: 20px; /* Adds space between items */ +} + +nav ul li:last-child { + margin-right: 0; /* Removes margin on the last item */ +} + +nav ul li a { + color: white; /* White text */ + text-decoration: none; /* Removes the underline */ + font-size: 16px; /* Sets font size */ + font-family: Arial, sans-serif; /* Sets a clean font */ + padding: 10px 20px; /* Adds padding inside links */ + transition: background-color 0.3s ease; /* Smooth hover effect */ +} + +nav ul li a:hover { + background-color: #575757; /* Darker background on hover */ + border-radius: 5px; /* Rounded corners on hover */ +} + +/* Media query for smaller screens */ +@media (max-width: 768px) { + nav ul li { + display: block; /* Makes the list vertical on small screens */ + margin: 10px 0; + } +} + + +.hero { + background: linear-gradient(rgba(0, 77, 64, 0.7), rgba(0, 77, 64, 0.8)), + url("https://images.unsplash.com/photo-1628638428099-48fc6fdb98c2?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") + center/cover no-repeat; + color: white; + padding: 80px 20px; + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 55vh; +} + +.hero h2 { + + font-size: 2.5rem; + margin-bottom: 20px; + +/* Ecoblog Page */ +.hero-contain { + text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); + + font-size: 2.5rem; + margin-bottom: 20px; + text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); + +} + +.hero p { + font-size: 1.2rem; + margin-bottom: 30px; + max-width: 600px; +} + +.hero-btn { + background-color: #26a69a; + color: white; + padding: 12px 24px; + text-decoration: none; + border-radius: 25px; + font-size: 1.1rem; + transition: background-color 0.3s ease; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); +} + +.hero-btn:hover { + background-color: #004d40; +} + +@media (max-width: 768px) { + + .hero h2 { + font-size: 2rem; + } + + .hero p { + font-size: 1rem; + } + + .hero-btn { + padding: 10px 20px; + font-size: 1rem; + } +} + +@media (max-width: 480px) { + .hero { + padding: 60px 15px; + } + + .hero h2 { + font-size: 1.8rem; + } + + .hero p { + font-size: 0.9rem; + } + + .hero-btn { + padding: 8px 18px; + font-size: 0.9rem; + } + + .hero h2 { + font-size: 2rem; + } + + .hero p { + font-size: 1rem; + } + + .hero-btn { + padding: 10px 20px; + font-size: 1rem; + } +} + +@media (max-width: 480px) { + .hero { + padding: 60px 15px; + } + + .hero h2 { + font-size: 1.8rem; + } + + .hero p { + font-size: 0.9rem; + } + + .hero-btn { + padding: 8px 18px; + font-size: 0.9rem; + } + +} + +main { + padding: 20px; +} + +.upload, +.classification, +.disposal, +.feedback { + + margin-bottom: 30px; + + margin-bottom: 30px; + +} + +/* Styling for the upload section */ +.upload { + + background-color: #f5f9ff; + padding: 20px; + border-radius: 10px; + text-align: center; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + max-width: 400px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 20px; + + background-color: #f5f9ff; + padding: 20px; + border-radius: 10px; + text-align: center; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + max-width: 400px; + + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 20px; + +} + +/* Container to hold the two rows */ +.upload-container { + display: flex; + flex-direction: column; + align-items: center; /* Center items horizontally */ + gap: 15px; +} + +/* Text section styling */ +.upload-text h2 { + font-size: 1.6em; + color: #333; + margin: 0; +} + +/* Custom file input styling */ +.custom-file-upload { + background-color: #44bf49; + color: white; + padding: 9px; /* Adjusted for better height control */ + height: 50px; /* Set specific height */ + width: 95%; /* Set width to 60% */ + border-radius: 5px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; + display: flex; /* Allows centering of text */ + align-items: center; /* Center vertically */ + justify-content: center; /* Center horizontally */ + margin-top: 10px; +} + +/* Hidden input field */ +.custom-file-upload input { + display: none; +} + +/* Hover effect for file upload button */ +.custom-file-upload:hover { + background-color: #3a873d; +} + +/* Submit button styling */ +.upload-submit #upload-button { + + background-color: #007bff; + color: white; + height: 40px; /* Set specific height */ + padding: 10px 20px; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; + width: 100%; + + background-color: #007bff; + color: white; + height: 40px; /* Set specific height */ + /*width: 95%; */ + padding: 10px 20px; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; + width: 100%; + +} + +/* Hover effect for submit button */ +.upload-submit #upload-button:hover { + background-color: #0056b3; +} + +.features { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-bottom: 5px; +} + +.features h2 { + text-align: center; + width: 100%; +} + +.feature-card { + background-color: #a5d6a7; /* Light green */ + padding: 20px; + margin: 10px; + border-radius: 8px; + transition: transform 0.2s; + display: inline-block; + width: calc(33% - 20px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +.feature-card:hover { + transform: scale(1.05); + cursor: pointer; +} + +.faqs { + padding: 25px; + border-radius: 10px; + margin: 20px auto; + max-width: 900px; +} + +.faqs h2 { + text-align: center; + font-size: 2em; + margin-bottom: 20px; + color: black; +} + +.faq-item { + margin-bottom: 20px; +} + +.faq-item h3 { + + font-size: 1.4em; + color: #000000; + cursor: pointer; + margin: 0; + padding: 10px; + background-color: #a5d6a7; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + color: rgb(53, 53, 53); + border-radius: 5px; + + font-size: 1.4em; + color: #000000; + cursor: pointer; + margin: 0; + padding: 10px; + background-color: #a5d6a7; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + color: rgb(53, 53, 53); + border-radius: 5px; + +} + +.faq-item p { + font-size: 1em; + color: #555; + padding: 10px; + background-color: white; + border: 1px solid #a5d6a7; + border-radius: 5px; + display: none; /* Hide the answer initially */ +} + +.faq-item.active p { + + display: block; /* Show the answer when the question is clicked */ +} + +/* Eco-tips-features */ +/* Button */ +#eco-friendly { + padding: 2rem; + text-align: center; + border-radius: 8px; + margin: 2rem auto; + max-width: 800px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +} + +#eco-friendly #eco-tips { + display: inline-block; + padding: 10px 20px; + font-size: 1.1rem; + background-color: #4caf50; + color: white; + text-decoration: none; + border-radius: 5px; + transition: background-color 0.3s ease; + + display: block; /* Show the answer when the question is clicked */ +} + +/*eco-tips-features*/ +/*button*/ +#eco-friendly { + padding: 2rem; + text-align: center; + border-radius: 8px; + margin: 2rem auto; + max-width: 800px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +} +#eco-friendly #eco-tips { + display: inline-block; + padding: 10px 20px; + font-size: 1.1rem; + background-color: #4caf50; + color: white; + text-decoration: none; + border-radius: 5px; + transition: background-color 0.3s ease; +} + +#eco-friendly #eco-tips:hover { + background: none; + background-image: linear-gradient(to right, #006d77, #edf6f9); + animation: pulsate 1s ease-in-out; + +} + +#eco-friendly #eco-tips:hover { + background: none; + background-image: linear-gradient(to right, #006D77, #EDF6F9); + animation: pulsate 1s ease-in-out; +} + +.eco-friendly-content h3 { + font-size: 2rem; + color: #2e7d32; + margin-bottom: 1rem; +} + +blockquote { + font-size: 1.25rem; + font-style: italic; + color: #333; + background-color: #c8e6c9; + padding: 1rem; + border-left: 4px solid #43a047; + margin-bottom: 1.5rem; + border-radius: 5px; +} + +#fact-highlight { + font-weight: bold; + color: #e53935; +} + +.highlight { + font-weight: bold; + color: #2e7d32; +} + +.eco-friendly-content p { + font-size: 1.1rem; + color: #555; + line-height: 1.6; + margin-bottom: 2rem; +} + + +.main { + display: flex; + align-items: center; + justify-content: space-between; + padding: 40px; + background-color: #EDF6F9; + border-radius: 10px; + max-width: 1200px; + margin: 20px auto; +} + +.hero-text { + flex: 1; + margin-right: 20px; +} + +.hero-text h3 { + font-size: 2.5rem; + font-weight: 700; + color: #006D77; + margin-bottom: 10px; + text-transform: uppercase; +} + +.hero-text p { + font-size: 1.2rem; + line-height: 1.6; +} + +.hero-image { + flex: 1; + text-align: right; +} + +.hero-image img { + max-width: 100%; + height: auto; + border-radius: 10px; +} + +#eco-tips-container { + overflow: hidden; + padding: 2rem; + width: 100%; + max-width: 1200px; + margin: 5.2rem auto; + border-top: 4px solid #006D77; + border-top-left-radius: 24px; + border-top-right-radius: 24px; +} + +.eco-tips-header { + background-color: #EDF6F9; + padding: 2rem; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + text-align: center; + margin: 2rem auto; + max-width: 800px; + font-family: 'Arial', sans-serif; +} + +.eco-tips-header h3 { + color: #006D77; + font-size: 2.2rem; + margin-bottom: 1rem; + font-weight: 700; +} + +.eco-tips-header p { + font-size: 1.1rem; + color: #333; + line-height: 1.5; +} + +/*Ecoblog Page*/ +.hero-container { + display: flex; + align-items: center; + justify-content: space-between; + padding: 40px; + background-color: #edf6f9; + border-radius: 10px; + max-width: 1200px; + margin: 20px auto; +} + +.hero-text { + flex: 1; + margin-right: 20px; +} + +.hero-text h3 { + font-size: 2.5rem; + font-weight: 700; + color: #006d77; + margin-bottom: 10px; + text-transform: uppercase; +} + +.hero-text p { + font-size: 1.2rem; + line-height: 1.6; +} + +.hero-image { + flex: 1; + text-align: right; +} + +.hero-image img { + max-width: 100%; + height: auto; + border-radius: 10px; +} + +#eco-tips-container { + /* position: relative; */ + overflow: hidden; + padding: 2rem; + width: 100%; + max-width: 1200px; + margin: 5.2rem auto; + border-top: 4px solid #006d77; + border-top-left-radius: 24px; + border-top-right-radius: 24px; +} + +.eco-tips-header { + background-color: #edf6f9; + padding: 2rem; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + text-align: center; + margin: 2rem auto; + max-width: 800px; + font-family: "Arial", sans-serif; +} + +.eco-tips-header h3 { + color: #006d77; + font-size: 2.2rem; + margin-bottom: 1rem; + font-weight: 700; +} + +.eco-tips-header p { + color: #333; + font-size: 1.2rem; + margin-bottom: 1rem; + line-height: 1.6; +} + +.eco-tips-header p span { + color: #83c5be; + font-weight: bold; +} + +.eco-tips-header em { + color: #e29578; + font-size: 1.1rem; + font-style: normal; + display: block; + margin-top: 1.5rem; + background-color: #006d77; + padding: 0.5rem 1rem; + border-radius: 5px; + font-weight: 600; +} + +#eco-tips-container { + padding: 2rem; + background-color: #edf6f9; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + max-width: 1200px; + margin: 3.4rem auto; + position: relative; +} + +.slider-control { + background: none; + border: none; + font-size: 2rem; + color: #006d77; + cursor: pointer; + transition: color 0.3s ease; + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 1; +} + +#prev-slide { + left: 10px; +} + +#next-slide { + right: 10px; +} + +/* Eco Tips Slider Content */ +.eco-tips-slider { + display: flex; + align-items: center; + position: relative; + overflow: hidden; +} + +.eco-tips-content { + display: flex; + transition: transform 0.5s ease-in-out; + width: 100%; +} + +.eco-tip { + min-width: 100%; + padding: 2rem; + box-sizing: border-box; + /* background-color: #FFDDD2; */ + border-radius: 10px; + text-align: center; + /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); */ +} + +.eco-tip h3 { + color: #006d77; + font-size: 1.8rem; + margin-bottom: 1rem; +} + +.eco-tip p { + color: #333; + font-size: 1.1rem; + margin-bottom: 1.5rem; +} + +feature/your-new-feature .eco-tip img, +.eco-tip video { + max-width: 90%; + border-radius: 8px; + margin-top: 1rem; +} + +.fa-chevron-left, +.fa-chevron-right { + font-size: 2rem; + color: #e29578; + cursor: pointer; + transition: color 0.3s ease; +} + +.fa-chevron-left:hover, +.fa-chevron-right:hover { + color: #006d77; +} + +/*Eco-blog-cards*/ +.eco-blogs { + margin: 5rem 2.4rem 2.4rem 5rem; + padding: 2.4rem; +} +.blogs-section-title { + text-align: center; + font-size: 2.5rem; + + color: #006d77; + font-weight: 600; +} + +.eco-blogs-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; + padding-top: 4.4rem; + margin: 3.1rem; + max-width: 1200px; + margin: 20px auto; + border-top: 4px solid #006d77; + border-top-left-radius: 24px; + border-top-right-radius: 24px; +} + +.eco-blogs-card { + border-radius: 10px; + border: 2px solid #83c5be; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + overflow: hidden; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.eco-blogs-card:hover { + transform: translateY(-10px); + box-shadow: 0 24px 15px #006d77; + cursor: pointer; + background-color: #006d77; +} +.card-header { + height: 200px; + background-size: cover; + background-position: center; +} +.card-content { + padding: 20px; + text-align: left; +} + +.card-content h4 { + font-size: 1.5rem; + margin-bottom: 15px; + color: #333; +} + +.card-content p { + font-size: 1rem; + line-height: 1.5; + color: #666; + color: #83c5be; + margin-bottom: 20px; +} + +.read-more { + text-decoration: none; + color: #28a745; + font-weight: bold; + border-bottom: 2px solid transparent; + transition: border-bottom 0.3s ease; +} + +.read-more:hover { + border-bottom: 2px solid #28a745; +} + +/* Responsive media query */ +@media (max-width: 768px) { + .hero-container { + flex-direction: column; + text-align: center; + } + + .hero-text { + margin: 0; + } + + .hero-image { + margin-top: 20px; + } + .eco-friendly-tips { + padding: 1.5rem; + } + + .eco-friendly-content h3 { + font-size: 1.75rem; + } + + blockquote { + font-size: 1.1rem; + } + + .eco-friendly-content p { + font-size: 1rem; + } + + .cta-button { + padding: 8px 16px; + font-size: 1rem; + } + + .eco-tips-header { + padding: 1.5rem; + } + + .eco-tips-header h3 { + font-size: 1.8rem; + } + + .eco-tips-header p { + font-size: 1rem; + } + + .eco-tips-header em { + font-size: 1rem; + } + .eco-tip h3 { + font-size: 1.5rem; + } + .eco-tip p { + font-size: 1rem; + } + + .slider-control { + font-size: 1.8rem; + } + + .card-header { + height: 150px; + } + + .card-content h4 { + font-size: 1.3rem; + } + + .card-content p { + font-size: 0.9rem; + } + .eco-tip h3 { + font-size: 1.5rem; + } + + .eco-tip p { + font-size: 0.9rem; + } + + .fa-chevron-left, + .fa-chevron-right { + font-size: 1.5rem; + } +} + +@media (max-width: 480px) { + .eco-tips-header { + padding: 1rem; + } + .eco-tip h3 { + font-size: 1.3rem; + } + .eco-tip p { + font-size: 0.9rem; + } + + .slider-control { + font-size: 1.5rem; + } + + .eco-tips-header h3 { + font-size: 1.5rem; + } + + .eco-tips-header p { + font-size: 0.9rem; + } + + .eco-tips-header em { + font-size: 0.9rem; + } + .card-header { + height: 120px; + } + + .card-content h4 { + font-size: 1.1rem; + } + + .card-content p { + font-size: 0.85rem; + } +} + +/*End of ECO-FRIENDLY TIPS Styling*/ + +main .feedback { + margin-bottom: 30px; + background-color: #ffffff; /* White background for better contrast */ + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + max-width: 500px; + margin: 0 auto; +} + +.feedback h2 { + text-align: center; + color: #00796b; /* Consistent color with the theme */ + margin-bottom: 20px; +} + +.feedback form { + display: flex; + flex-direction: column; +} + +.feedback input, +.feedback textarea { + margin: 10px 0; + padding: 12px; + border: 1px solid #00796b; + border-radius: 5px; + font-size: 16px; + background-color: #e0f7fa; /* Matches the background theme */ +} + +.feedback textarea { + min-height: 100px; /* Larger space for feedback text */ +} + +.feedback button { + background-color: #00796b; + color: white; + padding: 12px; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.feedback button:hover { + background-color: #004d40; /* Darker teal on hover */ +} + +#footer { + background-color: #00796b; + color: white; + text-align: center; + padding: 20px; + border-radius: 0.2rem; +} + +#newsletter-form input { + margin: 10px 0; + padding: 10px; + border: 1px solid #fff; + border-radius: 5px; +} + +.social-media { + display: flex; + flex-direction: row; + justify-content: center; /* Align items in the center horizontally */ + margin: 10px 0; +} + +.social-media a { + display: grid; + place-items: center; + position: relative; /* Positioning context for the pseudo-element */ + margin: 0 10px; /* Spacing between icons */ + fill: #fff; + margin: 0 10px; + text-decoration: none; + padding: 10px 0px; +} + +.social-media a box-icon { + height: 2rem; + width: 2rem; + position: relative; /* Allows stacking above the pseudo-element */ + z-index: 1; /* Bring the icon above the background */ + transition: color 0.3s ease-in-out; +} + +.social-media a::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 40px; + height: 40px; + background-color: transparent; + border-radius: 50%; + transform: translate(-50%, -50%); + transition: background-color 0.3s ease-in-out; + z-index: 0; +} + +.social-media a:hover::after { + background-color: #004d40; +} +.social-media a:hover { + scale: 1.01; + transition: all 0.3s ease-in-out; +} + + +.signup { + background-color: #f9f9f9; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + margin: 20px 0; +} + +.signup h2 { + color: #007b5f; + text-align: center; +} + +.signup form { + display: flex; + flex-direction: column; +} + +.signup input { + padding: 10px; + margin: 10px 0; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 16px; +} + +.signup input:focus { + border-color: #007b5f; + outline: none; +} + +.signup button { + background-color: #007b5f; + color: white; + padding: 10px; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 16px; +} + +.signup button:hover { + background-color: #005f46; + transition: background-color 0.3s ease; +} + +#newsletter-form { + display: flex; + align-items: center; + justify-content: center; + gap: 6px; +} +#newsletter-form input{ + border: 1.2px solid #e0f7fa; + border-radius: 5px; +} + +#newsletter-form input:focus { + outline: none; +} + +#newsletter-form button:hover { + background-color: #004d40; /* Darker teal on hover */ + transform: scale(1.05); /* Slight zoom effect on hover */ + cursor: pointer; +} + +#newsletter-form button { + border: 1px solid #005f46; /* Adjust border color */ + border-radius: 0.3rem; + overflow: hidden; + position: relative; + background-color: #26a69a; + color: white; + font-size: 16px; + letter-spacing: 1px; + transition: all 170ms linear; + height: 2.3rem; + padding: 10px; +} + +#newsletter-form button span { + z-index: 20; +} + +#newsletter-form button:after { + background: #fff; + content: ""; + height: 155px; + left: -75px; + opacity: 0.2; + position: absolute; + top: -50px; + transform: rotate(35deg); + transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); + width: 50px; + z-index: -10; +} + +#newsletter-form button:hover:after { + left: 120%; + transition: all 750ms cubic-bezier(0.19, 1, 0.22, 1); +} + +.logo { + position: absolute; + left: 83px; + font-size: 35px; + color: #ffffff; + font-weight: bold; + img { + position: absolute; + top: -15px; + left: -77px; + width: 80px; + height: 80px; + } +} + From 4cddc2f3f4e8645b73d81c3eb25aa21dbed92e8c Mon Sep 17 00:00:00 2001 From: Khatwangadhareddy Date: Sun, 6 Oct 2024 11:14:55 +0530 Subject: [PATCH 2/2] feat: Implement accessible and mission-aligned theme with high contrast and eye-friendly palette - Applied soft beige background with dark blue text for high contrast readability. - Integrated eco-friendly color scheme using soft greens, browns, and off-whites for natural, calming effect. - Added light gray backgrounds with blue and green accents to ensure a comfortable viewing experience. - Enhanced hover states for buttons and links to improve user interaction and accessibility. --- styles.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/styles.css b/styles.css index 604e986..d8f11b0 100644 --- a/styles.css +++ b/styles.css @@ -35,10 +35,11 @@ } body { - font-family: "Poppins", sans-serif; - margin: 0; - padding: 0; - background-color: #e0f7fa; /* Light blue background */ + background-color: #f5f5dc; /* Soft beige background */ + color: #003366; /* Dark blue text */ + font-family: 'Arial', sans-serif; + font-size: 18px; + line-height: 1.6; /* Comfortable line height for readability */ } /* Basic reset for padding and margins */