diff --git a/ecotips.html b/ecotips.html index 7badc67..3982239 100644 --- a/ecotips.html +++ b/ecotips.html @@ -13,16 +13,22 @@ +
+
+
-

Waste Management

 +
+ + +
@@ -43,12 +49,13 @@

Its NOW or NEVER!

Remember, we are all together in this journey and every single contribution counts!

Cuz, You matter and so does our Environment!
-
+ +
- +

Waste Segregation

@@ -58,84 +65,79 @@

Waste Segregation

Waste Segregation
- -
+ +

Composting Tips

Convert organic waste into nutrient-rich compost by setting up a small compost bin in your garden.

- + Composting Tips
- +

Reduce Plastic Usage

Opt for reusable items like metal water bottles and cloth bags to reduce plastic waste and pollution.

- Reduce Plastic Usage + Reduce Plastic Usage
- +

Avoid Single-Use Plastics

- Reduce your dependence on single-use plastics by switching to reusable straws, utensils, and food - containers. + Reduce your dependence on single-use plastics by switching to reusable straws, utensils, and food containers.

- Avoid Single-Use Plastics + Avoid Single-Use Plastics
- +

Switch to Cloth Napkins

Replace paper napkins with reusable cloth napkins to cut down on disposable paper waste in your daily life.

- Cloth Napkins + Switch to Cloth Napkins
- +

Eco-Friendly Cleaning Products

Choose biodegradable, non-toxic cleaning products to minimize chemical runoff and pollution in waterways.

- Eco-Friendly Cleaning Products + Eco-Friendly Cleaning Products
- +

DIY Household Cleaners

- Make your own natural cleaning solutions using ingredients like vinegar and baking soda to reduce chemical - waste. + Make your own natural cleaning solutions using ingredients like vinegar and baking soda to reduce chemical waste.

- DIY Household Cleaners + DIY Household Cleaners
- -
+ +

Switch to Solar Energy

- Reduce your carbon footprint by installing solar panels or using solar-powered devices. Harnessing renewable - energy from the sun lowers energy bills and decreases reliance on fossil fuels. + Reduce your carbon footprint by installing solar panels or using solar-powered devices. Harnessing renewable energy from the sun lowers energy bills and decreases reliance on fossil fuels.

- +

Buy in Bulk

- Purchase items in bulk to minimize packaging waste and reduce the environmental impact of frequent shopping - trips. + Purchase items in bulk to minimize packaging waste and reduce the environmental impact of frequent shopping trips.

Buy in Bulk
- +

Upcycling Old Items

- Repurpose old or broken household items instead of throwing them away. This reduces waste and promotes - creativity. + Repurpose old or broken household items instead of throwing them away. This reduces waste and promotes creativity.

Upcycling Old Items
- +

Donate Instead of Disposing

@@ -143,7 +145,7 @@

Donate Instead of Disposing

Donate Instead of Disposing
- +

Reduce Food Waste

@@ -151,155 +153,122 @@

Reduce Food Waste

Reduce Food Waste
- +

Choose Recycled Products

Opt for products made from recycled materials, such as paper, plastic, and glass, to support sustainable production.

- Recycled Products + Choose Recycled Products
- +

Grow Your Own Food

- Start a home garden or grow herbs indoors to reduce your carbon footprint and minimize packaging waste from - store-bought produce. + Start a home garden or grow herbs indoors to reduce your carbon footprint and minimize packaging waste from store-bought produce.

Grow Your Own Food
- +
-
- - -
-

Essential Eco Blogs: Your Guide to a Greener Tomorrow!

-
- -
-
-
-

The Future of Waste Management

-

- Explore how modern technologies are transforming the way we manage waste, promoting sustainability for - future generations. -

- Read more + + +
+

Essential Eco Blogs: Your Guide to a Greener Tomorrow!

+
+
+
+
+

The Future of Waste Management

+

+ Explore how modern technologies are transforming the way we manage waste, promoting sustainability for + future generations. +

+ Read more +
-
- -
-
-
-

Composting: Nature’s Recycling

-

- Learn how composting organic waste can enrich soil, reduce landfill use, and contribute to a greener - environment. -

- Read more + +
+
+
+

Composting: Nature’s Recycling

+

+ Learn how composting organic waste can enrich soil, reduce landfill use, and contribute to a greener + environment. +

+ Read more +
-
- -
-
-
-

Eco-Friendly Packaging Trends

-

- Uncover the latest innovations in sustainable packaging that reduce environmental impact while meeting - consumer needs. -

- Read more + +
+
+
+

Eco-Friendly Packaging Trends

+

+ Uncover the latest innovations in sustainable packaging that reduce environmental impact while meeting + consumer needs. +

+ Read more +
-
- -
-
-
-

Zero Waste Living: A Beginner’s Guide

-

- A comprehensive guide to adopting a zero-waste lifestyle, including simple steps to minimize waste and live - sustainably. -

- Read more + +
+
+
+

Zero Waste Living: A Beginner’s Guide

+

+ A comprehensive guide to adopting a zero-waste lifestyle, including simple steps to minimize waste and live + sustainably. +

+ Read more +
-
- -
-
-
-

Plastic Alternatives You Should Know

-

- Discover eco-friendly alternatives to plastics and how you can incorporate them into your daily life to - reduce pollution. -

- Read more + +
+
+
+

Plastic Alternatives You Should Know

+

+ Discover eco-friendly alternatives to plastics and how you can incorporate them into your daily life to + reduce pollution. +

+ Read more +
- - -
-
- +
+
- - - + + \ No newline at end of file diff --git a/script.js b/script.js index c645339..049556e 100644 --- a/script.js +++ b/script.js @@ -213,3 +213,50 @@ document.addEventListener('DOMContentLoaded', (event) => { }); } }); + + + +//Ecotips.html + +const tipsSlider = document.querySelector('.eco-tips-content'); +const slides = document.querySelectorAll('.eco-tip'); +const prevSlide = document.getElementById('prev-slide'); +const nextSlide = document.getElementById('next-slide'); +let currentIndex = 0; + +// Function to update the slider's position +const updateSlider = () => { + const slideWidth = slides[0].clientWidth; // Calculate the width of a single slide + tipsSlider.style.transform = `translateX(-${currentIndex * slideWidth}px)`; +}; + +// Set the transition for smooth sliding +tipsSlider.style.transition = 'transform 0.3s ease-in-out'; + +// Handle next slide button click +nextSlide.addEventListener('click', () => { + if (currentIndex < slides.length - 1) { + currentIndex++; + } else { + currentIndex = 0; // Loop back to the first slide + } + updateSlider(); +}); + +// Handle previous slide button click +prevSlide.addEventListener('click', () => { + if (currentIndex > 0) { + currentIndex--; + } else { + currentIndex = slides.length - 1; // Loop back to the last slide + } + updateSlider(); +}); + +// Update slider position on window resize to ensure it adapts to the new slide width +window.addEventListener('resize', () => { + updateSlider(); +}); + +// Make sure the slider position is correct when the page loads +window.addEventListener('load', updateSlider); diff --git a/styles.css b/styles.css index a648a53..7fddd89 100644 --- a/styles.css +++ b/styles.css @@ -729,7 +729,9 @@ body.dark-mode { .dark-mode .upload-text h2{ color:black; } - +.dark-mode .hero-text h3{ + color: #004d40; +} /* Footer */ #footer { @@ -759,89 +761,9 @@ body.dark-mode { border: none; border-radius: 5px; cursor: pointer; - user-select: none; - } - - - -.container { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - text-align: center; -} - -.form_area { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - background-color: #eaf9e7; - height: auto; - width: auto; - border: 2px solid #264143; - border-radius: 20px; - box-shadow: 3px 4px 0px 1px #f7faf7; -} - -.title { - color: #418270; - font-weight: 900; - font-size: 1.5em; - margin-top: 20px; -} - -.sub_title { - font-weight: 600; - margin: 5px 0; -} - -.form_group { - display: flex; - flex-direction: column; - align-items: baseline; - margin: 10px; -} - -.form_style { - outline: none; - border: 2px solid #264143; - box-shadow: 3px 4px 0px 1px #94cf3a; - width: 420px; - padding: 20px; - border-radius: 4px; - font-size: 15px; -} - -.form_style:focus, .btn:focus { - transform: translateY(4px); - box-shadow: 1px 2px 0px 0px #bfe98c; -} - -.btn { - padding: 15px; - margin: 25px 0px; - width: 290px; - font-size: 15px; - background: #DE5499; - border-radius: 10px; - font-weight: 800; - box-shadow: 3px 3px 0px 0px #E99F4C; -} - -.btn:hover { - opacity: .9; -} - -.link { - font-weight: 800; - color: #264143; - padding: 5px; transition: background-color 0.3s, transform 0.2s; } - #newsletter-form button:hover { background-color: #004d40; transform: scale(1.05); @@ -922,119 +844,397 @@ body.dark-mode { } } -/* Global styling */ -body { - margin: 0; - font-family: 'Arial', sans-serif; - background-color: #f9f9f9; /* Light background to make the mission section stand out */ + +/* ecotips.html */ +/* Hero Section */ +.hero-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + background-color: #f5f5f5; /* Light grey background */ + padding: 40px 20px; + width: 100%; + box-sizing: border-box; } -.mission-container { - padding: 50px; +.hero-text { + font-size: 2.5em; + color: #2c3e50; /* Dark grey text */ + font-weight: bold; + margin-bottom: 20px; +} + +.hero-image { + max-width: 100%; + height: auto; /* Responsive image with full width */ + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */ +} + +/* Eco Tips Slider */ +/* .eco-tips-slider { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px; + margin: 40px 0; background-color: #f4f4f4; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + overflow: hidden; +} */ +/* Header Styling */ +.eco-tips-header h3 { + color: #388e3c; + font-size: 28px; + margin-bottom: 10px; text-align: center; } -.mission-container h3 { - font-size: 2.5rem; - margin-bottom: 40px; - color: #333; +.eco-tips-header p { + color: #555; + font-size: 16px; + line-height: 1.6; + margin-bottom: 10px; + text-align: justify; } -.mission-box { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */ - gap: 20px; +.eco-tips-header p span { + font-weight: bold; + color: #2e7d32; } -.mission-item { - background-color: #fff; - padding: 20px; - border-radius: 15px; - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); +.eco-tips-header em { + display: block; + margin-top: 15px; + font-style: italic; + font-size: 14px; + color: #9e9e9e; text-align: center; - transition: transform 0.3s, box-shadow 0.3s; } -.mission-item:hover { - transform: translateY(-10px); - box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15); +/* Hover effect for entire container */ +#eco-tips-container:hover { + border-color: #4caf50; + box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15); } -.mission-item img { - max-width: 80px; - margin-bottom: 20px; - transition: transform 0.3s; +/* Media Queries for Responsiveness */ +@media (max-width: 600px) { + #eco-tips-container { + padding: 15px; + } + + .eco-tips-header h3 { + font-size: 24px; + } + + .eco-tips-header p { + font-size: 14px; + } } -.mission-item:hover img { - transform: scale(1.1); +.eco-tips-container { + max-width: 1200px; + margin: 40px auto; + padding: 0 20px; } -.mission-item h4 { - font-size: 1.5rem; +.eco-tips-slider { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #f4f4f4; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + overflow: hidden; + position: relative; +} + +.slider-control { + background-color: #27ae60; + color: white; + border: none; + width: 40px; + height: 40px; + font-size: 1.2em; + cursor: pointer; + transition: background-color 0.3s ease; + z-index: 2; + position: absolute; + top: 50%; + transform: translateY(-50%); + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; +} + +.slider-control:hover { + background-color: #1e8449; +} + +#prev-slide { + left: 10px; +} + +#next-slide { + right: 10px; +} + +.eco-tips-content { + display: flex; + overflow-x: hidden; + scroll-snap-type: x mandatory; + scroll-behavior: smooth; + -webkit-overflow-scrolling: touch; + width: 100%; +} + +.eco-tip { + flex: 0 0 100%; + max-width: 100%; + scroll-snap-align: start; + padding: 40px; + background-color: white; + border-radius: 10px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); + text-align: center; +} + +.eco-tip h3 { + color: #27ae60; + font-size: 1.5em; + margin-bottom: 10px; +} + +.eco-tip p { + font-size: 1em; margin-bottom: 15px; - color: #333; + line-height: 1.6; } -.mission-item p { - font-size: 1rem; - color: #666; - line-height: 1.5; +.eco-tip img, +.eco-tip video { + max-width: 100%; + height: auto; + border-radius: 8px; + object-fit: cover; + max-height: 300px; + width: 100%; } -/* Responsive grid layout for smaller screens */ -@media (max-width: 768px) { - .mission-box { - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); +@media (min-width: 768px) { + .eco-tip { + flex: 0 0 50%; + max-width: 50%; } } -.btn-nav .button { - background: linear-gradient(135deg, #98c6a7, #629584); - border: none; - border-radius: 8px; - padding: 12px 25px; - margin: 5px; - color: white; - font-size: 16px; - cursor: pointer; - transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +@media (min-width: 1024px) { + .eco-tip { + flex: 0 0 33.333%; + max-width: 33.333%; + } } -.btn-nav .button a { - color: white; +@media (max-width: 767px) { + .slider-control { + width: 15px; + height: 25px; + font-size: 0.8em; + } + + #prev-slide { + left: 2px; + width: 25px; + height: 30px; + } + + #next-slide { + right: 5px; + width: 25px; + height: 30px; + } + + .eco-tip { + padding: 20px 40px; + } + .eco-tip h3 { + font-size: 1.2em; + } + + .eco-tip p { + font-size: 0.9em; + } +} +/* Eco Blogs Section */ +.eco-blogs { + padding: 40px 20px; + background-color: #f9f9f9; +} + +.blogs-section-title { + text-align: center; + color: #2c3e50; + font-size: 2.5em; + margin-bottom: 30px; + font-weight: bold; +} + +.eco-blogs-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; +} + +.eco-blogs-card { + background-color: white; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + overflow: hidden; + transition: transform 0.3s ease; +} + +.eco-blogs-card:hover { + transform: translateY(-10px); +} + +.card-header { + height: 200px; + background-size: cover; + background-position: center; +} + +.card-content { + padding: 20px; + text-align: center; +} + +.card-content h4 { + font-size: 1.5em; + color: #27ae60; + margin-bottom: 15px; +} + +.card-content p { + font-size: 1em; + color: #2c3e50; + margin-bottom: 20px; +} + +.read-more { text-decoration: none; + color: white; + background-color: #27ae60; + padding: 10px 20px; + border-radius: 5px; + transition: background-color 0.3s ease; } -.btn-nav .button:hover { - background: linear-gradient(135deg, #0056b3, #003f7f); - transform: translateY(-2px); - box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); +.read-more:hover { + background-color: #1e8449; } -.btn-nav .button:active { - transform: translateY(0); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +/* Responsive Design */ + +/* Medium Screens (Tablets) */ +@media (max-width: 768px) { + .slider-control { + font-size: 1.2em; + } + + .eco-tip { + min-width: 200px; + max-width: 200px; + } + + .eco-blogs-container { + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + } + + .card-header { + height: 150px; + } +} + +/* Small Screens (Mobile) */ +@media (max-width: 480px) { + .eco-tips-slider { + flex-direction: column; + padding: 10px; + } + + .eco-tips-content { + margin: 0; + } + + .slider-control { + margin-bottom: 15px; + width: 100%; + text-align: center; + } + + .eco-tip { + min-width: 100%; + max-width: 100%; + margin-bottom: 15px; + } + + .blogs-section-title { + font-size: 2em; + } + + .eco-blogs-container { + grid-template-columns: 1fr; + } + + .card-content h4 { + font-size: 1.2em; + } + + .card-content p { + font-size: 0.9em; + } + + .read-more { + font-size: 0.9em; + } } -.btn-nav .button:focus { - outline: none; - box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.5); +.eco-tips-container { + background-color: #e9f7ef; /* Light green background */ + padding: 30px; + margin: 40px 0; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Box shadow */ + max-width: 1200px; + margin-left: auto; + margin-right: auto; } -.btn-nav .checkbox-con { - display: flex; - align-items: center; +.eco-tips-header { + font-size: 2em; + color: #27ae60; /* Green color for header */ + font-weight: bold; + text-align: center; + margin-bottom: 20px; } -.btn-nav #checkbox { - margin-left: 10px; - transform: scale(1.5); - transition: transform 0.2s ease; +.eco-tips { + list-style: none; + padding: 0; } -.btn-nav #checkbox:hover { - transform: scale(1.7); -} \ No newline at end of file +.eco-tips li { + background-color: white; + padding: 15px; + margin-bottom: 10px; + border-left: 4px solid #27ae60; /* Green border on the left */ + border-radius: 6px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* Light shadow */ + font-size: 1.2em; +}