120 lines
5.8 KiB
PHP
120 lines
5.8 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<!-- SEO & Meta Tags -->
|
|
<title>Recycle Hero</title>
|
|
<meta name="description" content="Recycle Hero: A fun game teaching kids aged 8+ the art of recycling and reducing waste contamination.">
|
|
<meta name="keywords" content="recycling game, garbage sorting, eco-friendly, kids education, environmental game, waste management, recycling for kids, how to recycle, contamination, sustainability">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="Recycle Hero">
|
|
<meta property="og:description" content="Recycle Hero: A fun game teaching kids aged 8+ the art of recycling and reducing waste contamination.">
|
|
<meta property="og:image" content="https://project-screens.s3.amazonaws.com/screenshots/34670/app-hero-20251004-183400.png">
|
|
|
|
<!-- Twitter -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="Recycle Hero">
|
|
<meta name="twitter:description" content="Recycle Hero: A fun game teaching kids aged 8+ the art of recycling and reducing waste contamination.">
|
|
<meta name="twitter:image" content="https://project-screens.s3.amazonaws.com/screenshots/34670/app-hero-20251004-183400.png">
|
|
|
|
<!-- Bootstrap 5 CDN -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/custom.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Header -->
|
|
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
|
|
<div class="container">
|
|
<a class="navbar-brand fw-bold" href="#">Recycle Hero</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#game">Game</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#blogs">Blogs</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<header id="home" class="hero">
|
|
<div class="container">
|
|
<h1 class="display-3">Be a Recycle Hero</h1>
|
|
<p class="lead mb-4">Learn to sort trash correctly and save our planet, one bin at a time!</p>
|
|
<a href="#game" class="btn btn-primary btn-lg">Play the Game</a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main>
|
|
<!-- About Section -->
|
|
<section id="about" class="section">
|
|
<div class="container">
|
|
<div class="row align-items-center fade-in">
|
|
<div class="col-lg-6">
|
|
<div class="section-card">
|
|
<h2>The Problem of Contamination</h2>
|
|
<p>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.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 text-center">
|
|
<img src="https://picsum.photos/seed/recyclehero-about/500/350" class="img-fluid rounded shadow-lg" alt="A colorful pile of sorted recyclable materials like plastic bottles, paper, and glass.">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Game Section -->
|
|
<section id="game" class="section bg-light">
|
|
<div class="container">
|
|
<div class="row align-items-center fade-in">
|
|
<div class="col-lg-6 text-center">
|
|
<img src="https://picsum.photos/seed/recyclehero-game/500/350" class="img-fluid rounded shadow-lg" alt="An illustration of the Recycle Hero game interface showing different bins for sorting.">
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="section-card">
|
|
<h2>The Recycle Hero Game</h2>
|
|
<p>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!</p>
|
|
<a href="#game" class="btn btn-outline-primary mt-3">I'm Ready!</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Blog Placeholder Section -->
|
|
<section id="blogs" class="section">
|
|
<div class="container text-center fade-in">
|
|
<div class="section-card p-5">
|
|
<h2>Latest from Our Blog</h2>
|
|
<p class="lead">Stay updated with tips, news, and stories about recycling and sustainability. Our blog is your go-to resource for becoming a true Recycle Hero.</p>
|
|
<p><em>New articles coming soon!</em></p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2025 Recycle Hero - Free Use</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap 5 JS Bundle -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- Custom JS -->
|
|
<script src="assets/js/main.js"></script>
|
|
</body>
|
|
</html> |