diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..5e1c23e --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,103 @@ + +:root { + --primary-color: #4CAF50; + --accent-color: #FFC107; + --bg-color: #F5F7FA; + --surface-color: #FFFFFF; + --text-color: #212529; + --heading-font: 'Georgia', 'Times New Roman', serif; + --body-font: 'Helvetica Neue', Arial, sans-serif; + --border-radius: 12px; +} + +body { + font-family: var(--body-font); + background-color: var(--bg-color); + color: var(--text-color); +} + +h1, h2, h3, h4, h5, h6 { + font-family: var(--heading-font); + font-weight: 700; +} + +.navbar { + background-color: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +.hero { + background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url('https://picsum.photos/seed/recyclehero-hero/1600/900') no-repeat center center; + background-size: cover; + color: white; + padding: 12rem 0; + text-align: center; +} + +.hero h1 { + font-size: 4.5rem; + font-weight: 900; + text-shadow: 2px 2px 4px rgba(0,0,0,0.5); +} + +.hero p { + font-size: 1.5rem; + text-shadow: 1px 1px 2px rgba(0,0,0,0.5); +} + +.btn-primary { + background-color: var(--primary-color); + border-color: var(--primary-color); + border-radius: var(--border-radius); + padding: 1rem 2rem; + font-weight: bold; + transition: transform 0.2s ease-in-out, box-shadow 0.2s ease; +} + +.btn-primary:hover { + transform: translateY(-3px); + box-shadow: 0 4px 12px rgba(0,0,0,0.2); + background-color: #45a049; + border-color: #45a049; +} + +.section { + padding: 6rem 0; +} + +.section-card { + background-color: var(--surface-color); + border-radius: var(--border-radius); + padding: 2rem; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.section-card:hover { + transform: translateY(-5px); + box-shadow: 0 12px 20px rgba(0,0,0,0.15); +} + +.section-card img { + border-radius: var(--border-radius); +} + +footer { + background-color: var(--text-color); + color: var(--bg-color); + padding: 2rem 0; + text-align: center; +} + +/* Animations */ +.fade-in { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.6s ease-out, transform 0.6s ease-out; +} + +.fade-in.visible { + opacity: 1; + transform: translateY(0); +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..1658699 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,33 @@ + +document.addEventListener('DOMContentLoaded', function () { + // Smooth scrolling for anchor links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); + }); + + // Fade-in animation on scroll + const faders = document.querySelectorAll('.fade-in'); + const appearOptions = { + threshold: 0.3, + rootMargin: "0px 0px -50px 0px" + }; + + const appearOnScroll = new IntersectionObserver(function (entries, appearOnScroll) { + entries.forEach(entry => { + if (!entry.isIntersecting) { + return; + } + entry.target.classList.add('visible'); + appearOnScroll.unobserve(entry.target); + }); + }, appearOptions); + + faders.forEach(fader => { + appearOnScroll.observe(fader); + }); +}); diff --git a/index.php b/index.php index 7205f3d..2550453 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,120 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + + + Recycle Hero + + + + + + + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + + + + + +
+
+

Be a Recycle Hero

+

Learn to sort trash correctly and save our planet, one bin at a time!

+ Play the Game +
+
+ + +
+ +
+
+
+
+
+

The Problem of Contamination

+

When the wrong items get mixed into the recycling bin, it can contaminate the whole batch! Food, plastic bags, or dirty containers can turn valuable recyclables into landfill trash. Our game teaches you how to sort like a pro, so more materials get a new life.

+
+
+
+ A colorful pile of sorted recyclable materials like plastic bottles, paper, and glass. +
+
+
+
+ + +
+
+
+
+ An illustration of the Recycle Hero game interface showing different bins for sorting. +
+
+
+

The Recycle Hero Game

+

Ready for a challenge? In our game, different types of garbage will drop, and it's your job to drag them to the correct bin—paper, plastic, glass, or compost. Score points for correct sorts and learn fun facts along the way. Coming soon!

+ I'm Ready! +
+
+
+
+
+ + +
+
+
+

Latest from Our Blog

+

Stay updated with tips, news, and stories about recycling and sustainability. Our blog is your go-to resource for becoming a true Recycle Hero.

+

New articles coming soon!

+
+
+
+ +
+ + + + + + + + - + \ No newline at end of file