From 3ed77a8aa4784133babed2a1fb927af79fd4e9b1 Mon Sep 17 00:00:00 2001 From: vivi29 Date: Wed, 16 Oct 2024 15:36:41 +0530 Subject: [PATCH 1/2] I'm ensuring the website is fully responsive by optimizing it for different screen sizes and devices, so it works properly on desktops, tablets, and mobile phones. --- .vscode/settings.json | 3 + index.html | 531 +++++------- script.js | 272 ++++-- styles.css | 1851 ++++++++++------------------------------- 4 files changed, 846 insertions(+), 1811 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index d095baa..285d4a7 100644 --- a/index.html +++ b/index.html @@ -12,52 +12,30 @@ - +
- +
- -

Waste Management

- - +

Waste Management

 +
+ + +
+

Efficient Waste Management

@@ -66,6 +44,8 @@

Efficient Waste Management

+ +
@@ -82,330 +62,233 @@

Upload Your Files

+
+

Waste Classification

+

+
-

- -
-
-
-

Upload Your Files Here


- -
-
- -
-
-
- -
-

Waste Classification

-

-
- -
-

Disposal Information

-

-
+
+

Disposal Information

+

+
-
-

Waste Categories

-
-
-
-
- Biodegradable Waste -
-
-

Biodegradable Waste

-

Includes food remains and garden waste. These can be composted to create manure and - naturally decompose over time.

-
+
+

Waste Categories

+
+
+
+
+ Biodegradable Waste
-
-
-
-
- Non-Biodegradable Waste -
-
-

Non-Biodegradable Waste

-

Items like old newspapers, broken glass, and plastics. These do not decompose and are - major pollutants, but can be recycled and reused.

-
+
+

Biodegradable Waste

+

Includes food remains and garden waste. These can be composted to create manure and naturally decompose over time.

-
- -
-

Waste Classification

-
-
-
-
- Biodegradable Waste -
-
-

Biodegradable Waste

-

These wastes come from our kitchen and include food remains, garden waste, etc. They - can be composted to obtain manure and decompose over time.

-
+
+
+
+ Non-Biodegradable Waste
-
-
-
-
- Non-Biodegradable Waste -
-
-

Non-Biodegradable Waste

-

This type includes old newspapers, broken glass, plastics, etc. They do not decompose - and are major pollutants but can be recycled and reused.

-
+
+

Non-Biodegradable Waste

+

Items like old newspapers, broken glass, and plastics. These do not decompose and are major pollutants, but can be recycled and reused.

-
- -
-

Discover Our Features

-
- -
- -
- -
-
-
- -
-

Eco-Friendly Tips

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

Make a difference by embracing eco-friendly practices from home. Learn tips to help manage - waste efficiently and reduce your environmental impact.

- Get Tips! -
-
-
-
-
- -
-

Real-time Monitoring

-

Keep track of your waste management activities instantly, with up-to-the-minute updates.

-
- -
-

Community Engagement

-

Join community efforts to promote effective waste management.

- Join Community -
- -
- - -
- -
- -

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

+
+

Discover Our Features

+
+
+
+
- -
-

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.

+

Eco-Friendly Tips

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

Make a difference by embracing eco-friendly practices from home. Learn tips to help manage waste efficiently and reduce your environmental impact.

+ Get Tips! +
+ +
+
+
- -
-

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.

+

Real-time Monitoring

+

Keep track of your waste management activities instantly, with up-to-the-minute updates.

+
+ +
+
+
+

Community Engagement

+

Join our community and participate in group efforts for more effective waste management and environmental care.

+
+
+
+ -
-

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.

-
+
+

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.

+
+
-
-

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.

-
-
+
+
+ +
+

About Us

+
+ +
+

At Waste Management, we are passionate about creating a sustainable + future through effective waste disposal solutions. Our goal is to not only reduce + environmental pollution but also educate communities and empower + individuals with sustainable waste practices.

+
+

By leveraging our state-of-the-art waste classification system 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.

+
- -
-
- -
-

About Us

-
+ +
+ Waste Management team working towards sustainability +
- -
-

At Waste Management, we are passionate about creating a sustainable - future through effective waste disposal solutions. Our goal is to not only reduce - environmental pollution but also educate communities and empower - individuals with sustainable waste practices.

-

By leveraging our state-of-the-art waste classification system 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.

+
+

Our Mission

+
+
+

Reduce Waste

+

Minimize waste generation through innovative technologies and education.

- - -
- Waste Management team working towards sustainability +
+

Promote Recycling

+

Encourage responsible disposal and recycling practices in every community.

- - -
-

Our Mission

-
-
-

Reduce Waste

-

Minimize waste generation through innovative technologies and education.

-
-
-

Promote Recycling

-

Encourage responsible disposal and recycling practices in every community.

-
-
-

Empower Communities

-

Equip individuals with knowledge and tools for sustainable living.

-
-
-

Build a Cleaner Future

-

Protect the environment for future generations.

-
-
+
+

Empower Communities

+

Equip individuals with knowledge and tools for sustainable living.

-
-
- - -
-
-

Our Core Values

-
-
-

Innovation

-

We believe in continually evolving our waste management practices with cutting-edge - technologies to improve efficiency and reduce our environmental footprint.

-
-
-

Sustainability

-

Environmental sustainability is at the heart of everything we do. We prioritize - reducing waste, reusing materials, and promoting recycling initiatives globally.

-
-
-

Community

-

Collaboration is key. By working together with communities, we aim to foster - eco-consciousness and sustainable living across the globe.

-
-
-

Responsibility

-

We are committed to acting with integrity and accountability, ensuring that our - practices positively impact both the environment and society.

-
+
+

Build a Cleaner Future

+

Protect the environment for future generations.

-
- - - - -
- -
-

Stay Connected

-
- - -
- + + + +
+
+

Our Core Values

+
+
+

Innovation

+

We believe in continually evolving our waste management practices with cutting-edge technologies to improve efficiency and reduce our environmental footprint.

+
+
+

Sustainability

+

Environmental sustainability is at the heart of everything we do. We prioritize reducing waste, reusing materials, and promoting recycling initiatives globally.

+
+
+

Community

+

Collaboration is key. By working together with communities, we aim to foster eco-consciousness and sustainable living across the globe.

+
+
+

Responsibility

+

We are committed to acting with integrity and accountability, ensuring that our practices positively impact both the environment and society.

+
+
+
+ -
-

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.

- - - - - - - - - - - - - - -
- -

© 2024 Waste Management. All rights reserved.

-
- - +
- - - - + - - - + - - \ No newline at end of file + diff --git a/script.js b/script.js index 85068e7..c645339 100644 --- a/script.js +++ b/script.js @@ -1,99 +1,215 @@ -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)); -}); +function validateSignup() { + const fullName = document.querySelector('input[name="fullName"]').value; + const email = document.querySelector('input[name="email"]').value; + const password1 = document.querySelector('input[name="password1"]').value; + const password2 = document.querySelector('input[name="password2"]').value; + const errorMessage = document.getElementById('error-message'); -// FAQ functionality -const faqItems = document.querySelectorAll('.faq-item h3'); + // Clear previous error message + errorMessage.innerText = ''; -faqItems.forEach(item => { - item.addEventListener('click', function() { - const parent = this.parentElement; - parent.classList.toggle('active'); - }); -}); + // Check if fields are empty + if (!fullName || !email || !password1 || !password2) { + errorMessage.innerText = 'Please fill all the details.'; + return false; // Prevent form submission + } + + // Password validation: at least 8 characters, one uppercase, one lowercase, and one special character + const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).{8,}$/; + if (!passwordRegex.test(password1)) { + errorMessage.innerText = 'Password must be at least 8 characters long, including uppercase, lowercase, and special characters.'; + return false; // Prevent form submission + } -// Optional: Check the initial mode on page load -if (localStorage.getItem('dark-mode') === 'enabled') { - enableDarkMode(); + // Check if passwords match + if (password1 !== password2) { + errorMessage.innerText = 'Passwords do not match.'; + return false; // Prevent form submission + } + + return true; // Allow form submission } -// 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'); +function validateLogin() { + const email = document.querySelector('input[name="email"]').value; + const password1 = document.querySelector('input[name="password1"]').value; + const errorMessage = document.getElementById('error-message'); + + // Clear previous error message + errorMessage.innerText = ''; -feedbackForm.addEventListener('submit', (event) => { - event.preventDefault(); // Prevent the form from submitting + // Check if fields are empty + if (!email || !password1) { + errorMessage.innerText = 'Please fill all the details.'; + return false; // Prevent form submission + } - const name = feedbackName.value.trim(); - const email = feedbackEmail.value.trim(); - const message = feedbackMessage.value.trim(); - let valid = true; + return true; // Allow form submission +} - // Clear previous error messages - feedbackName.setCustomValidity(''); - feedbackEmail.setCustomValidity(''); +document.addEventListener('DOMContentLoaded', (event) => { + const menuToggle = document.getElementById('menu-toggle'); + const navMenu = document.getElementById('nav-menu'); + const themeToggle = document.getElementById('theme-toggle'); + const body = document.body; + + // Menu toggle functionality + if (menuToggle && navMenu) { + menuToggle.addEventListener('click', () => { + navMenu.classList.toggle('show'); + }); + } - // Name validation - if (name.length < 2) { - feedbackName.setCustomValidity('Name must be at least 2 characters long.'); - valid = false; + // Theme toggle functionality + if (themeToggle) { + themeToggle.addEventListener('click', () => { + body.classList.toggle('dark-mode'); + themeToggle.textContent = body.classList.contains('dark-mode') ? '☀️' : '🌓'; + }); } - // Email validation - const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - if (!emailPattern.test(email)) { - feedbackEmail.setCustomValidity('Please enter a valid email address.'); - valid = false; + // FAQ toggle functionality + const faqItems = document.querySelectorAll('.faq-item'); + faqItems.forEach(item => { + const question = item.querySelector('h3'); + const answer = item.querySelector('p'); + + if (question && answer) { + // Initially hide the answer + answer.style.display = 'none'; + + question.addEventListener('click', () => { + answer.style.display = answer.style.display === 'block' ? 'none' : 'block'; + }); + } + }); + + // Progress bar functionality + const progressBar = document.getElementById('progress-bar'); + if (progressBar) { + window.addEventListener('scroll', () => { + const windowHeight = window.innerHeight; + const documentHeight = document.documentElement.scrollHeight; + const scrollTop = window.pageYOffset || document.documentElement.scrollTop; + const scrollPercentage = (scrollTop / (documentHeight - windowHeight)) * 100; + + progressBar.style.width = scrollPercentage + '%'; + }); } - // Message validation - if (message.length < 10) { - alert('Message must be at least 10 characters long.'); - valid = false; + // Image upload functionality + const imageInput = document.getElementById('image-input'); + const uploadButton = document.getElementById('upload-button'); + const classificationResult = document.getElementById('classification-result'); + const disposalInformation = document.getElementById('disposal-information'); + + if (uploadButton) { + 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)); + }); } - if (valid) { - alert('Feedback submitted successfully!'); - feedbackForm.reset(); // Reset the form after successful submission - } else { - feedbackName.reportValidity(); - feedbackEmail.reportValidity(); + // Feedback form validation + const feedbackForm = document.getElementById('feedback-form'); + if (feedbackForm) { + 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'); + // Newsletter form validation + const newsletterForm = document.getElementById('newsletter-form'); + if (newsletterForm) { + 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 + newsletterForm.addEventListener('submit', (event) => { + event.preventDefault(); // Prevent the form from submitting - const email = newsletterEmail.value.trim(); - const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + const email = newsletterEmail.value.trim(); + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - // Clear previous error message - newsletterErrorMessage.textContent = ''; + // Clear previous error message + newsletterErrorMessage.textContent = ''; - if (!emailPattern.test(email)) { - newsletterErrorMessage.textContent = 'Please enter + if (!emailPattern.test(email)) { + newsletterErrorMessage.textContent = 'Please enter a valid email address.'; + } else { + alert('Subscribed successfully!'); + newsletterForm.reset(); + } + }); + } + + // Attach form validation to respective forms + const signupForm = document.getElementById('form1'); + if (signupForm) { + signupForm.addEventListener('submit', (event) => { + if (!validateSignup()) { + event.preventDefault(); // Prevent form submission + } + }); + } + + const loginForm = document.getElementById('form2'); + if (loginForm) { + loginForm.addEventListener('submit', (event) => { + if (!validateLogin()) { + event.preventDefault(); // Prevent form submission + } + }); + } +}); diff --git a/styles.css b/styles.css index 3e6ce6e..bc6d09f 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,24 @@ -/* Progress Bar Container */ +/* Reset and Base Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Poppins', sans-serif; + background-color: #e0f7fa; + color: #333; + line-height: 1.6; + transition: background-color 0.3s, color 0.3s; +} + +a { + text-decoration: none; + color: inherit; +} + +/* Progress Bar */ #progress-container { position: fixed; top: 0; @@ -8,10 +28,8 @@ z-index: 99990; } -/* Progress Bar Styling */ #progress-bar { height: 9px; - /* Changed from 53% to 9px */ width: 0; background: linear-gradient(90deg, rgb(38, 166, 154) 0%, rgb(102, 187, 106) 50%, rgb(76, 175, 80) 100%); box-shadow: 0 0 4px rgba(38, 166, 154, 0.7), 0 0 10px rgba(76, 175, 80, 0.7); @@ -19,253 +37,95 @@ 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%); - box-shadow: 0 0 4px rgba(0, 204, 204, 0.7), 0 0 10px rgba(0, 150, 150, 0.7); -} - -body { - font-family: 'Poppins', sans-serif; - margin: 0; - padding: 0; - background-color: #e0f7fa; - transition: background-color 0.3s, color 0.3s; -} - -:root { - --primary-color: #00796b; - --secondary-color: #26a69a; - --accent-color: #e6f4f1; - --dark-bg: #1f1f1f; - --light-bg: #ffffff; -} - -body { - background-color: var(--accent-color); - transition: background-color 0.3s, color 0.3s; -} - -a { - text-decoration: none; -} - -h1 { - font-size: 2.5rem; - font-weight: bold; - color: #333; - margin: 0; - padding: 0; -} - -.dark-mode { - background-color: var(--dark-bg); - color: var(--light-bg); -} - -.dark-mode { - background-color: #00796b; - color: #ffffff; -} - -.theme-switch { - display: inline-block; - width: 60px; - height: 30px; - border-radius: 30px; - background: linear-gradient(82deg, #ffffff, #00796b); - position: relative; - cursor: pointer; - transition: background 0.3s ease-in-out; - vertical-align: middle; -} - +/* Header and Navigation */ header { background-color: #00796b; - /* Teal color */ color: white; - padding: 20px; - display: flex; - text-align: center; - justify-content: space-between; + padding: 15px; position: sticky; top: 0; - z-index: 999; - width: 100%; -} - - -.theme-switch::before { - content: ''; - position: absolute; - top: 3px; - left: 3px; - width: 24px; - height: 24px; - background-size: contain; - background-repeat: no-repeat; - background-position: center; - transition: left 0.3s ease-in-out, background-image 0.3s ease-in-out; - background-image: url('assets/moon.png'); -} - -.theme-switch.dark-theme { - background: linear-gradient(82deg, #ffffff, #1f1f1f); -} - -.theme-switch.dark-theme::before { - left: 33px; - background-image: url('assets/sun.png'); -} - -header { - background-color: #00796b; - color: white; - padding: 15px; + z-index: 1000; display: flex; - text-align: center; justify-content: space-between; - position: sticky; - top: 0; - z-index: 999; - width: 100%; + align-items: center; } -nav { - margin: auto; - margin-right: 0; +header h1 { + font-size: 1.5rem; + margin: 0; } nav ul { list-style-type: none; - padding: 0; + display: flex; } nav ul li { - display: inline; - margin: 0 15px; + margin-left: 20px; } nav ul li a { color: white; - text-decoration: none; + transition: color 0.3s; } nav ul li a:hover { color: #e0f7fa; - /* Change text color on hover */ background-color: rgba(255, 255, 255, 0.2); - /* Optional: add background on hover */ - border-radius: 5px; - /* Optional: round corners */ + border-radius: 7px; +} + +.nav-controls { + display: flex; + align-items: center; +} + +#theme-toggle, #menu-toggle { + background: none; + border: none; + color: white; + font-size: 1.5rem; + cursor: pointer; + margin-left: 15px; +} + +#menu-toggle { + display: none; } +/* Hero Section */ .hero { background: linear-gradient(rgba(0, 77, 64, 0.7), rgba(0, 77, 64, 0.8)), url('./assets/header.jpg') 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; + padding: 80px 20px; } .hero h2 { 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 { + display: inline-block; 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); + transition: background-color 0.3s; } .hero-btn:hover { background-color: #004d40; } -@media (max-width: 768px) { - .hero h2 { - font-size: 2rem; - } - - .hero p { - font-size: 1rem; - margin-top: 100px; - /* Create space for fixed header */ - } -} - -nav ul { - list-style-type: none; - padding: 0; - margin: 0; - display: flex; - justify-content: center; -} - -nav ul li { - margin: 0 15px; -} - -nav ul li a { - text-decoration: none; - color: #333; - /* Text color */ -} - -.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; -} - -/* Styling for the upload section */ +/* Upload Section */ .upload { background-color: #f5f9ff; padding: 20px; @@ -273,102 +133,45 @@ main { 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; + margin: 0 auto 30px; } -/* Custom file input styling */ .custom-file-upload { + display: inline-block; background-color: #44bf49; color: white; - padding: 9px; - /* Adjusted for better height control */ - height: 50px; - /* Set specific height */ - width: 95%; - /* Set width to 60% */ + padding: 10px 20px; 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 */ + transition: background-color 0.3s; 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 { +#upload-button { 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%; + transition: background-color 0.3s; + margin-top: 10px; } -/* Hover effect for submit button */ -.upload-submit #upload-button:hover { +#upload-button:hover { background-color: #0056b3; } -.features { - display: flex; - flex-wrap: wrap; - justify-content: center; - margin-bottom: 5px; -} -body { - font-family: Arial, sans-serif; - background-color: #f5f5f5; - margin: 0; - padding: 20px; -} - +/* Card Section */ .classification-info { max-width: 1200px; margin: 0 auto; padding: 20px; - /* background-color: #58e178; */ - border-radius: 10px; - /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); */ } .classification-info h2 { @@ -381,26 +184,26 @@ body { display: flex; flex-wrap: wrap; justify-content: space-around; - gap: 20px; + gap: 20px; } .card { position: relative; - width: 400px; + width: 400px; height: 300px; - perspective: 1000px; + perspective: 1000px; } .card-inner { position: relative; width: 100%; height: 100%; - transform-style: preserve-3d; + transform-style: preserve-3d; transition: transform 0.6s; } .card:hover .card-inner { - transform: rotateY(180deg); + transform: rotateY(180deg); } .card-front, @@ -408,33 +211,24 @@ body { position: absolute; width: 100%; height: 100%; - display: flex; - flex-direction: column; - backface-visibility: hidden; + backface-visibility: hidden; + border: 2px solid #ddd; + border-radius: 10px; + background-color: #99e4ab; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; - border: 2px solid #ddd; - border-radius: 10px; - background-color: #99e4ab; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .card-front { color: #333; font-size: 30px; } -@media (max-width:500px) { - .card-front { - color: #333; - font-size: 20px; - } - -} .card-back { - transform: rotateY(180deg); - padding: 10px; + transform: rotateY(180deg); + padding: 10px; color: #444; } @@ -443,674 +237,167 @@ body { } .card-back p { - text-align: justify; -} - - -.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; + text-align: justify; } +/* FAQs Section */ .faqs { - padding: 25px; - border-radius: 10px; - margin: 20px auto; - max-width: 900px; + margin-bottom: 30px; } .faqs h2 { + font-size: 2rem; text-align: center; - font-size: 2em; - margin-bottom: 20px; + font-family: 'Poppins', sans-serif; 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); + margin-bottom: 10px; border-radius: 5px; + overflow: hidden; +} - font-size: 1.4em; - color: #000000; +.faq-item h3 { + padding: 15px; 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; + padding: 15px; 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 */ +/* Mission */ +.mission-container { + max-width: 1200px; + margin: 0 auto; + padding: 50px 20px; + text-align: center; } -/* Eco-tips-features */ -/* Button */ - - -.hero-btn { - background-color: #e0f7fa; - color: black; - padding: 10px 20px; - border: none; - border-radius: 5px; - text-decoration: none; - transition: background-color 0.3s, color 0.3s; - cursor: pointer; - +.mission-container h3 { + font-size: 2.5rem; + color: #333; + margin-bottom: 40px; + font-family: 'Poppins', sans-serif; } -/* Hover effect */ -.hero-btn:hover { - background-color: darkgreen; /* Change to dark green */ - color: white; /* Change text color to white */ - cursor: pointer; /* Pointer on hover */ -} - -#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-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; +/* Mission Box (Container for Items) */ +.mission-box { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; } -/*Ecoblog Page*/ -.hero-container { - display: flex; - align-items: center; - justify-content: space-between; - padding: 40px; - background-color: #EDF6F9; +/* Individual Mission Items (Card Style) */ +.mission-item { + background-color: #fff; + padding: 20px; border-radius: 10px; - max-width: 1200px; - margin: 20px auto; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; + text-align: left; } -.hero-text { - flex: 1; - margin-right: 20px; +/* Hover Effect for Mission Items */ +.mission-item:hover { + transform: translateY(-10px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } -.hero-text h3 { - font-size: 2.5rem; - font-weight: 700; - color: #006D77; +.mission-item h4 { + font-size: 1.5rem; + color: #3b82f6; margin-bottom: 10px; - text-transform: uppercase; + font-family: 'Poppins', sans-serif; } -.hero-text p { - font-size: 1.2rem; +.mission-item p { + font-size: 1rem; + color: black; 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; +/* Responsive */ +@media (max-width: 768px) { + .mission-box { + grid-template-columns: 1fr; + } } -.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; +/* Sign Up Section */ +.signup { + background-color: #f9f9f9; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + max-width: 400px; + margin: 0 auto 30px; } -/*Ecoblog Page*/ -.hero-container { +.signup form { 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; + flex-direction: column; } -#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; +.signup input { + margin: 10px 0; + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; } -.slider-control { - background: none; +.signup button { + background-color: #007b5f; + color: white; + padding: 10px; border: none; - font-size: 2rem; - color: #006D77; + border-radius: 4px; 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; + transition: background-color 0.3s; } -.eco-tips-content { - display: flex; - transition: transform 0.5s ease-in-out; - width: 100%; +.signup button:hover { + background-color: #005f46; } -.eco-tip { - min-width: 100%; - padding: 2rem; - box-sizing: border-box; - /* background-color: #FFDDD2; */ - border-radius: 10px; +/*About Us */ +.about-us { + max-width: 800px; /* Limit the width */ + margin: 0 auto; /* Center the section */ + padding: 20px; 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; -} - -.eco-tip img, -.eco-tip video { - max-width: 90%; - border-radius: 8px; - margin-top: 1rem; } -.fa-chevron-left, -.fa-chevron-right { +/* About Us Heading */ +.about-us h2 { 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: #006D; -} - -.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; + margin-bottom: 20px; color: #333; } -.card-content p { - font-size: 1rem; - line-height: 1.5; - color: #666; - color: #83C5BE; +/* About Us Text */ +.about-us p { + font-size: 1.2rem; /* Increased font size */ + line-height: 1.6; + color: #555; 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; - } +/* About Us Image */ +.about-image img { + width: 100%; /* Responsive image */ + height: auto; + margin-top: 20px; + border-radius: 8px; /* Optional: Rounded corners */ } - -/*End of ECO-FRIENDLY TIPS Styling*/ - +/* feedback */ .feedback { margin-bottom: 30px; background-color: #ffffff; @@ -1129,309 +416,45 @@ blockquote { 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; - /* Light mode button color (same as header) */ - color: white; - /* Text color for contrast */ - 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; -} - -#newsletter-form input { - margin: 10px 0; - padding: 10px; - border: 1px solid #fff; - border-radius: 5px; -} - -.social-media { - margin: 10px 0; -} - -.social-media a { - color: white; - margin: 0 10px; - text-decoration: none; -} - -.social-media a:hover { - color: #26a69a; - /* Change to a teal color on hover */ -} - -.toggle-button { - background-color: #26a69a; - color: white; - padding: 10px 20px; - border: none; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s ease; -} - -.dark-mode header { - background-color: #1f1f1f; - /* Darker header */ -} - -.dark-mode .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; -} - -.dark-mode .feature-card { - background-color: #00796b; - /* Card color in dark mode */ -} - -.dark-mode .feedback { - background-color: #1f1f1f; - /* Feedback section background */ -} - -.dark-mode .feedback button { - background-color: #1c1c1c; - /* Dark mode button color (matches dark header) */ - color: #ffffff; - /* Light text color for contrast */ -} - -#newsletter-form input:focus { - outline: none; -} - -.moon-icon { - font-size: 30px; - /* Adjust size of the moon icon */ - margin-right: 8px; - /* Match the header color */ - color: white; - /* Set the icon color to white for contrast */ - border-radius: 50%; - /* Optional: add rounded corners */ - padding: 5px; - /* Optional: add some padding */ -} - -body.dark-mode { - background-color: black; - /* Dark background matching navbar */ - color: white; - /* Light text color */ -} - -#dark-mode-toggle { - background-color: #00796b; - /* Match the navbar color */ - color: white; - /* White text for contrast */ - - border: none; - - cursor: pointer; - transition: background-color 0.3s ease; -} - -body.dark-mode #dark-mode-toggle { - background-color: #1c1c1c; - /* Dark mode button color */ - color: white; - /* Keep text white */ -} - -.social-media a:hover { - scale: 1.01; - transition: all 0.3s ease-in-out; -} - - - - - - - - - -#newsletter-form { - display: flex; - align-items: center; - justify-content: center; - gap: 6px; -} - -#newsletter-form input { - border: 1.2px solid #e0f7fa; - border-radius: 5px; -} - -header.dark-mode { - background-color: #1c1c1c; - /* Dark header background */ -} - -footer.dark-mode { - background-color: #1c1c1c; - /* Dark footer background */ -} - -.feature-card.dark-mode { - background-color: #333; - /* Dark feature cards */ -} - -.feedback.dark-mode { - background-color: #444; - /* Dark feedback section */ -} - -#newsletter-form button { - background-color: #00796b; - /* Teal color to match the theme */ - color: white; - padding: 12px 20px; - border: none; - border-radius: 5px; - font-size: 16px; - cursor: pointer; - transition: background-color 0.3s ease, transform 0.2s; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); -} - - -#newsletter-form button:hover { - background-color: #004d40; - /* Darker teal on hover */ - transform: scale(1.05); - /* Slight zoom effect on hover */ -} - - - -/* signup page styles */ -.container-register { - width: 90%; - max-width: 400px; - margin: 7% auto 5%; - background-color: #fff; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -} - -.buttons-register { - display: flex; -} - -.button_1 { - font-size: 1rem; - flex-grow: 1; - padding: 10px; - border: none; - background-color: #f0f0f0; - cursor: pointer; - text-align: center; - transition: background-color 0.3s ease; -} - -.buttons-register .button_1.button-active { - background-color: #008c85; - color: #fff; -} - -.button_1.button-active:hover { - background-color: #006d77; -} - -.form-register { - display: none; - padding: 20px; -} - -.form-register.button-active { - display: block; +.feedback form { + display: flex; + flex-direction: column; } -.label_1 { - display: block; - margin-bottom: 5px; - font-weight: bold; +.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 */ } -.input_1 { - width: calc(100% - 12px); - padding: 6px; - margin-bottom: 10px; - border: 1px solid #ccc; - border-radius: 5px; +.feedback textarea { + min-height: 100px; + /* Larger space for feedback text */ } -.button_2[type="submit"] { - font-family: 'Poppins', sans-serif; - width: 100%; - margin-top: 1.2rem; - padding: 10px; +.feedback button { + background-color: #00796b; + /* Light mode button color (same as header) */ + color: white; + /* Text color for contrast */ + padding: 12px; border: none; - background-color: #008c85; - color: #fff; border-radius: 5px; + font-size: 16px; cursor: pointer; - text-align: center; - transition: background-color 0.2s ease; -} - -.button_2[type="submit"]:hover { - background-color: #83C5BE; -} - -.indv-signUp { - width: 40%; - padding: 20px; - border-radius: 4px; - margin: 20px; + transition: background-color 0.3s ease; } -#signup-submitButton { - align-items: center; - padding-left: 0%; - justify-content: space-around; +.feedback button:hover { + background-color: #004d40; + /* Darker teal on hover */ } -/* Container Styling */ .values-container { max-width: 1200px; margin: 0 auto; @@ -1454,334 +477,344 @@ footer.dark-mode { gap: 20px; } -/* General Section Styling */ +/* Card View Style for Individual Value Cards */ +.value-card { + background-color: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; + text-align: left; +} + +/* Hover effect for cards */ +.value-card:hover { + transform: translateY(-10px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); +} + +.value-card h4 { + font-size: 1.5rem; + color: #3b82f6; + margin-bottom: 10px; + font-family: 'Poppins', sans-serif; +} + +.value-card p { + font-size: 1rem; + color: #666; + line-height: 1.6; +} +/* feature section */ + .features { - padding: 60px 20px; - background-color: #f4f4f4; + padding: 50px 20px; + background-color: #f4f4f9; text-align: center; } .features h2 { font-size: 2.5rem; + margin-bottom: 40px; color: #333; - margin-bottom: 50px; - font-weight: bold; + font-family: 'Arial', sans-serif; } -/* Features Container */ .features-container { display: flex; - justify-content: space-between; flex-wrap: wrap; - gap: 20px; + justify-content: center; + gap: 30px; } -/* Feature Card Styling */ -.feature-card { - background-color: white; - border-radius: 12px; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); +/* Common styling for all feature cards */ +.feature-card, .feature-card1 { + background-color: #fff; padding: 20px; + border: 2px solid #28a745; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + max-width: 350px; text-align: center; - transition: transform 0.3s ease, box-shadow 0.3s ease; - flex: 1 1 30%; - min-width: 280px; - max-width: 30%; + transition: transform 0.3s ease; } -/* Card Hover Effect */ -.feature-card:hover { +.feature-card:hover, .feature-card1:hover { transform: translateY(-10px); - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } -/* Feature Icon */ -.feature-card .icon { +.feature-card .icon, .feature-card1 .icon { font-size: 3rem; - color: #007bff; margin-bottom: 20px; + color: #43a047; } -/* Feature Title */ -.feature-card h3 { - font-size: 1.7rem; - color: #333; +.feature-card h3, .feature-card1 h3 { + font-size: 1.8rem; margin-bottom: 15px; + color: #2e7d32; } -/* Feature Description */ -.feature-card p { - font-size: 1rem; - color: #666; +.feature-card p, .feature-card1 p { + font-size: 1.1rem; + color: #555; line-height: 1.6; + margin-bottom: 20px; } -/* Special Styling for Eco-Friendly Section */ -#eco-friendly { - background-color: #eaf9e7; - border: 2px solid #28a745; -} - -#eco-friendly h3 { - color: #28a745; -} - -/* Blockquote Styling */ -#eco-fact { - background-color: #f9f9f9; - border-left: 5px solid #007bff; - padding: 15px; - font-size: 1rem; - color: #555; - margin-bottom: 20px; +/* Specific styling for the blockquote in eco-friendly card */ +.feature-card blockquote { + font-size: 1.25rem; font-style: italic; + color: #333; + background-color: #c8e6c9; + padding: 1rem; + margin-bottom: 1.5rem; + border-radius: 5px; } -/* Highlighted Fact */ #fact-highlight { - color: #ff6347; font-weight: bold; + color: #e53935; } -/* Call-to-Action Button */ +/* Button styling */ .cta-button { display: inline-block; padding: 10px 20px; + font-size: 1.1rem; background-color: #007bff; color: white; text-decoration: none; - border-radius: 8px; - font-size: 1rem; + border-radius: 5px; transition: background-color 0.3s ease; - margin-top: 20px; } .cta-button:hover { - background-color: #0056b3; + background-color: #388e3c; } -/* Responsive Design */ +/* Responsive layout */ @media (max-width: 768px) { .features-container { flex-direction: column; - gap: 40px; } - .feature-card { + .feature-card, .feature-card1 { max-width: 100%; } } -.value-card { - background-color: #fff; - border-radius: 10px; - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); - padding: 20px; - transition: transform 0.3s ease, box-shadow 0.3s ease; + +#eco-fact { + background-color: #f9f9f9; + border-left: 5px solid #007bff; + padding: 15px; + font-size: 1rem; + color: #555; + margin-bottom: 20px; + font-style: italic; } +body.dark-mode { + background-color: #1f1f1f; + color: #ffffff; /* Default text color */ +} -.value-card:hover { - transform: translateY(-10px); - box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); +/* Header styling */ +.dark-mode header { + background-color: #00796b; } +/* Feature cards */ +.dark-mode .feature-card, +.dark-mode .feature-card1 { + border-color: #fff; /* Card border color */ +} -.value-card h4 { - font-size: 1.5rem; - color: #3b82f6; - margin-bottom: 10px; - font-family: 'Poppins', sans-serif; +/* Feedback and signup sections */ +.dark-mode .feedback, +.dark-mode .signup { + background-color: #fff; /* Feedback and signup background */ } +/* Footer styling */ +.dark-mode #footer { + background-color: #1c1c1c; /* Footer background color */ +} -.value-card p { - font-size: 1rem; - color: #555; - line-height: 1.6; - font-family: 'Roboto', sans-serif; +/* Headings */ +.dark-mode h1 { + color: #fff; /* H1 color */ +} +.dark-mode .feedback h2{ + color: #00796b; +} +.dark-mode h2{ + color: #fff; /* H2 color */ +} +.dark-mode .features h2{ + color: #28a745; } -@media (max-width: 768px) { - .values-cards { - grid-template-columns: 1fr; - } +.dark-mode h3 { + color: #fff; /* H3 color */ +} +.dark-mode .feature-card1 h3{ + color:#004d40; +} - .values-container h3 { - font-size: 2rem; - } +.dark-mode h4 { + color: #3b82f6; /* H4 color */ +} +.dark-mode .signup h2{ + color:#007b5f; +} +.dark-mode h5 { + color: #66ff66; /* H5 color */ } -.feature-card1 { - background-color: #f7faf7; - border: 2px solid #e2e8e2; - border-radius: 10px; - padding: 1.5rem; - margin: 1rem; - text-align: center; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; +.dark-mode h6 { + color: #cccccc; /* H6 color */ } +/* Paragraphs */ +.dark-mode p { + color: black; +} +.dark-mode .about-us p{ + color: white; +} -.feature-card1 .icon { - font-size: 3rem; - color: #32cd32; - margin-bottom: 1rem; +/* Additional element styles for dark mode */ +.dark-mode a { + color: #fff; /* Link color */ } -.feature-card1 .icon i { - transition: color 0.3s ease-in-out; +.dark-mode .hero { + background-color: white; /* Hero section background */ } +.dark-mode .mission-item h4 { + color: #00bcd4; /* Mission item headings */ +} +.dark-mode .mission-item p{ + color: black; +} +.dark-mode .community-message p{ + color: #fff; +} +.dark-mode .upload-text h2{ + color:black; +} -.feature-card1:hover { - transform: translateY(-10px); - box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); + +/* Footer */ +#footer { + background-color: #00796b; + color: white; + text-align: center; + padding: 20px; } -.feature-card1 h3 { - font-size: 1.8rem; - color: #2a662e; - margin-bottom: 1rem; +#newsletter-form { + display: flex; + justify-content: center; + gap: 10px; + margin: 20px 0; } +#newsletter-form input { + padding: 10px; + border: 1px solid #e0f7fa; + border-radius: 5px; +} -.feature-card1 p { - font-size: 1rem; - color: #67ed679d; - line-height: 1.5; +#newsletter-form button { + background-color: #26a69a; + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s, transform 0.2s; +} + +#newsletter-form button:hover { + background-color: #004d40; + transform: scale(1.05); } +.social-media { + margin: 20px 0; +} -.feature-card1:hover .icon { - color: #28a428; +.social-media a { + color: white; + margin: 0 10px; } +/* Responsive Design */ +@media (max-width: 768px) { + header { + flex-wrap: wrap; + } + + nav { + order: 3; + width: 100%; + margin-top: 15px; + } + nav ul { + flex-direction: column; + display: none; + } -.btn-nav{ - display: flex; - gap: 20px; + nav ul.show { + display: flex; + } + + nav ul li { + margin: 10px 0; + } + + #menu-toggle { + display: block; + } + + .hero h2 { + font-size: 2rem; + } + + .feature-card, + .feature-card1 { + width: 100%; + } + + .card { + width: 100%; + } + + .mission-box { + grid-template-columns: 1fr; + } + + #newsletter-form { + flex-direction: column; + } + + #newsletter-form input, + #newsletter-form button { + width: 100%; + } } -.btn-nav a{ - color: wheat; + +@media (max-width: 480px) { + .hero h2 { + font-size: 1.5rem; + } + + .custom-file-upload, + #upload-button { + width: 100%; + } } -/* From Uiverse.io by nikk7007 */ -.button { - --color: #00A97F; - padding: 0.8em 1.7em; - background-color: transparent; - border-radius: .3em; - position: relative; - overflow: hidden; - cursor: pointer; - transition: .5s; - font-weight: 400; - font-size: 17px; - border: 1px solid; - font-family: inherit; - text-transform: uppercase; - color: var(--color); - z-index: 1; - } - - .button::before, .button::after { - content: ''; - display: block; - width: 50px; - height: 50px; - transform: translate(-50%, -50%); - position: absolute; - border-radius: 50%; - z-index: -1; - background-color: var(--color); - transition: 1s ease; - } - - .button::before { - top: -1em; - left: -1em; - } - - .button::after { - left: calc(100% + 1em); - top: calc(100% + 1em); - } - - .button:hover::before, .button:hover::after { - height: 410px; - width: 410px; - } - - .button:hover { - color: rgb(10, 25, 30); - } - - .button:active { - filter: brightness(.8); - } - -.checkbox-con { - margin: 10px; - display: flex; - align-items: center; - color: white; - } - - .checkbox-con input[type="checkbox"] { - appearance: none; - width: 48px; - height: 27px; - border: 2px solid #ff0000; - border-radius: 20px; - background: #f1e1e1; - position: relative; - box-sizing: border-box; - } - - .checkbox-con input[type="checkbox"]::before { - content: ""; - width: 14px; - height: 14px; - background: rgba(234, 7, 7, 0.5); - border: 2px solid #ea0707; - border-radius: 50%; - position: absolute; - top: 0; - left: 0; - transform: translate(13%, 15%); - transition: all 0.3s ease-in-out; - } - - .checkbox-con input[type="checkbox"]::after { - content: url("data:image/svg+xml,%3Csvg xmlns='://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 23 23' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.55021 5.84315L17.1568 16.4498L16.4497 17.1569L5.84311 6.55026L6.55021 5.84315Z' fill='%23EA0707' fill-opacity='0.89'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.1567 6.55021L6.55012 17.1568L5.84302 16.4497L16.4496 5.84311L17.1567 6.55021Z' fill='%23EA0707' fill-opacity='0.89'/%3E%3C/svg%3E"); - position: absolute; - top: 0; - left: 20px; - } - - .checkbox-con input[type="checkbox"]:checked { - border: 2px solid #02c202; - background: #e2f1e1; - } - - .checkbox-con input[type="checkbox"]:checked::before { - background: rgba(2, 194, 2, 0.5); - border: 2px solid #02c202; - transform: translate(133%, 13%); - transition: all 0.3s ease-in-out; - } - - .checkbox-con input[type="checkbox"]:checked::after { - content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='13' viewBox='0 0 15 13' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.8185 0.114533C15.0314 0.290403 15.0614 0.605559 14.8855 0.818454L5.00187 12.5L0.113036 6.81663C-0.0618274 6.60291 -0.0303263 6.2879 0.183396 6.11304C0.397119 5.93817 0.71213 5.96967 0.886994 6.18339L5.00187 11L14.1145 0.181573C14.2904 -0.0313222 14.6056 -0.0613371 14.8185 0.114533Z' fill='%2302C202' fill-opacity='0.9'/%3E%3C/svg%3E"); - position: absolute; - top: 5px; - left: 5px; - } - - .checkbox-con label { - margin-left: 10px; - cursor: pointer; - user-select: none; - } - \ No newline at end of file From 0b2946f394982e110d45edb1a1d9ba2dfafd91ed Mon Sep 17 00:00:00 2001 From: vivi29 Date: Wed, 16 Oct 2024 16:08:09 +0530 Subject: [PATCH 2/2] Change in css code --- styles.css | 127 +++++++++++++++++++++++++++++++---------------------- 1 file changed, 75 insertions(+), 52 deletions(-) diff --git a/styles.css b/styles.css index bc6d09f..34dc021 100644 --- a/styles.css +++ b/styles.css @@ -230,6 +230,11 @@ nav ul li a:hover { transform: rotateY(180deg); padding: 10px; color: #444; + display: flex; /* Add this */ + flex-direction: column; /* Add this */ + align-items: center; /* Center horizontally */ + justify-content: center; /* Center vertically */ + text-align: center; /* Center text */ } .card-back h3 { @@ -507,114 +512,132 @@ nav ul li a:hover { } /* feature section */ +/* General styling for the section */ .features { - padding: 50px 20px; - background-color: #f4f4f9; + padding: 60px 20px; + background-color: #f9f9f9; text-align: center; } .features h2 { - font-size: 2.5rem; + font-size: 36px; margin-bottom: 40px; color: #333; - font-family: 'Arial', sans-serif; } +/* Container for feature cards */ .features-container { display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 30px; + flex-direction: column; + align-items: center; + gap: 20px; /* Adds space between each card */ } - -/* Common styling for all feature cards */ +.feature-card{ + background-color: #28a745; +} +/* Styling for each feature card */ .feature-card, .feature-card1 { - background-color: #fff; + background-color: #f4f4f4; /* Background color for the cards */ padding: 20px; - border: 2px solid #28a745; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); - max-width: 350px; + border-radius: 8px; + width: 80%; /* Make the cards take up 80% of the container width */ + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Adding shadow for card effect */ text-align: center; - transition: transform 0.3s ease; } - .feature-card:hover, .feature-card1:hover { - transform: translateY(-10px); + transform: translateY(-5px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } +/* Styling for icons inside feature cards */ .feature-card .icon, .feature-card1 .icon { - font-size: 3rem; + font-size: 50px; + color: #4CAF50; margin-bottom: 20px; - color: #43a047; + text-align: center; } -.feature-card h3, .feature-card1 h3 { - font-size: 1.8rem; - margin-bottom: 15px; - color: #2e7d32; +.feature-card .icon i, .feature-card1 .icon i { + font-size: inherit; } +/* Heading for each card */ +.feature-card h2, .feature-card1 h3 { + font-size: 24px; + color: #45a049; + margin-bottom: 10px; +} + +/* Paragraph styling */ .feature-card p, .feature-card1 p { - font-size: 1.1rem; - color: #555; + font-size: 16px; + color: black; line-height: 1.6; - margin-bottom: 20px; } -/* Specific styling for the blockquote in eco-friendly card */ +/* Blockquote styling */ .feature-card blockquote { - font-size: 1.25rem; - font-style: italic; - color: #333; - background-color: #c8e6c9; - padding: 1rem; - margin-bottom: 1.5rem; - border-radius: 5px; + font-size: 16px; + color: #555; + background-color: #f0f8e8; + padding: 10px; + border-left: 4px solid #007bff; + margin-bottom: 15px; } #fact-highlight { font-weight: bold; - color: #e53935; + color: red; } -/* Button styling */ +/* Call-to-action button */ .cta-button { display: inline-block; padding: 10px 20px; - font-size: 1.1rem; - background-color: #007bff; - color: white; + background-color: #0056b3; + color: #fff; text-decoration: none; border-radius: 5px; - transition: background-color 0.3s ease; + margin-top: 15px; } .cta-button:hover { - background-color: #388e3c; + background-color: #45a049; } -/* Responsive layout */ +/* Responsive Design */ @media (max-width: 768px) { .features-container { - flex-direction: column; + flex-direction: column; + align-items: center; } .feature-card, .feature-card1 { - max-width: 100%; + width: 100%; + max-width: 100%; /* Full-width for smaller screens */ } -} + .features h2 { + font-size: 28px; + } -#eco-fact { - background-color: #f9f9f9; - border-left: 5px solid #007bff; - padding: 15px; - font-size: 1rem; - color: #555; - margin-bottom: 20px; - font-style: italic; + .feature-card h2, .feature-card1 h3 { + font-size: 20px; + } + + .cta-button { + font-size: 14px; + padding: 8px 16px; + } +} + +@media (min-width: 769px) and (max-width: 1024px) { + .feature-card, .feature-card1 { + max-width: 45%; /* Slightly narrower for medium screens */ + } } + body.dark-mode { background-color: #1f1f1f; color: #ffffff; /* Default text color */