188 lines
5.9 KiB
PHP
188 lines
5.9 KiB
PHP
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>
|
|
BPS-RW Jakarta
|
|
</title>
|
|
<script src="https://cdn.tailwindcss.com">
|
|
</script>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"/>
|
|
</head>
|
|
<body class="font-roboto">
|
|
<header class="bg-white shadow-md">
|
|
<div class="container mx-auto flex justify-between items-center py-4 px-6">
|
|
<div class="flex items-center">
|
|
<img alt="BPS RW Logo" class="h-10 w-10" height="50" src="https://storage.googleapis.com/a1aa/image/x7vzw-tjvixYtVsvcMO00x9ZOdd7G2z1Fi0CPjo2lS0.jpg" width="50"/>
|
|
<span class="ml-3 text-xl font-bold">
|
|
BPS RW
|
|
</span>
|
|
</div>
|
|
<nav class="flex space-x-6">
|
|
<a class="text-gray-700 hover:text-green-600" href="#">
|
|
Beranda
|
|
</a>
|
|
<a class="text-gray-700 hover:text-green-600" href="#">
|
|
Rumah Memilah
|
|
</a>
|
|
<a class="text-gray-700 hover:text-green-600" href="#">
|
|
Regulasi
|
|
</a>
|
|
</nav>
|
|
<button class="bg-green-600 text-white px-4 py-2 rounded">
|
|
LOGIN
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<section class="bg-blue-100 py-12">
|
|
<div class="container mx-auto text-center">
|
|
<h1 class="text-4xl font-bold">
|
|
Portal Resmi
|
|
</h1>
|
|
<h2 class="text-5xl font-bold text-blue-600 mt-2">
|
|
BPS-RW Jakarta
|
|
</h2>
|
|
<p class="text-lg text-gray-700 mt-2">
|
|
Dinas Lingkungan Hidup Provinsi DKI Jakarta
|
|
</p>
|
|
<div class="relative mt-8">
|
|
<img alt="Jakarta Cityscape" class="w-full h-auto" height="400" src="https://storage.googleapis.com/a1aa/image/y6I_kLcXY8GtoLKd11AOlWX22vFuoVEsZdRnKSmOa5Y.jpg" width="1200"/>
|
|
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
|
|
<span class="bg-red-600 text-white px-4 py-2 rounded-full">
|
|
RW 004
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="bg-gray-100 py-12">
|
|
<div class="container mx-auto text-center">
|
|
<h2 class="text-3xl font-bold text-green-600">
|
|
Tentang BPS-RW
|
|
</h2>
|
|
<p class="text-gray-700 mt-4 max-w-2xl mx-auto">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
<div class="mt-8">
|
|
<img alt="House illustration" class="mx-auto" height="300" src="https://storage.googleapis.com/a1aa/image/TlwyhHyOkCakVXxTsA1OAW_zJ-Y7f9b1lRP2pIjOGr0.jpg" width="400"/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="bg-teal-700 py-12 text-white">
|
|
<div class="container mx-auto text-center">
|
|
<h2 class="text-3xl font-bold">
|
|
Jumlah Rumah Memilah
|
|
</h2>
|
|
<div class="flex flex-wrap justify-center mt-8 space-x-4">
|
|
<div class="bg-teal-800 p-6 rounded-lg w-64">
|
|
<h3 class="text-2xl font-bold">
|
|
12,500+
|
|
</h3>
|
|
<p class="mt-2">
|
|
Rumah terdaftar di program Rumah Memilah
|
|
</p>
|
|
</div>
|
|
<div class="bg-teal-800 p-6 rounded-lg w-64">
|
|
<h3 class="text-2xl font-bold">
|
|
185 ton
|
|
</h3>
|
|
<p class="mt-2">
|
|
Sampah terpilah diproses setiap bulan
|
|
</p>
|
|
</div>
|
|
<div class="bg-teal-800 p-6 rounded-lg w-64">
|
|
<h3 class="text-2xl font-bold">
|
|
30%
|
|
</h3>
|
|
<p class="mt-2">
|
|
Pengurangan sampah ke TPA dari rumah tangga
|
|
</p>
|
|
</div>
|
|
<div class="bg-teal-800 p-6 rounded-lg w-64">
|
|
<h3 class="text-2xl font-bold">
|
|
Rp250 juta
|
|
</h3>
|
|
<p class="mt-2">
|
|
Nilai ekonomi yang dihasilkan per bulan
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<footer class="bg-gray-200 py-12">
|
|
<div class="container mx-auto flex flex-wrap justify-between">
|
|
<div class="w-full md:w-1/3 mb-8 md:mb-0">
|
|
<h3 class="text-xl font-bold">
|
|
BPS-RW
|
|
</h3>
|
|
<p class="text-gray-700 mt-4">
|
|
Platform yang menyediakan data dan informasi terkini mengenai lingkungan dan kebersihan di Provinsi DKI Jakarta untuk mendukung pengambilan keputusan dan partisipasi masyarakat.
|
|
</p>
|
|
</div>
|
|
<div class="w-full md:w-1/3 mb-8 md:mb-0">
|
|
<h3 class="text-xl font-bold">
|
|
Kontak Kami
|
|
</h3>
|
|
<p class="text-gray-700 mt-4">
|
|
Jl. Mandala V No.67, RT.1/RW.2, Cililitan, Kramatjati, Jakarta Timur 13640
|
|
</p>
|
|
<p class="text-gray-700 mt-2">
|
|
(021) 8092744
|
|
</p>
|
|
<p class="text-gray-700 mt-2">
|
|
dinaslh@jakarta.go.id
|
|
</p>
|
|
</div>
|
|
<div class="w-full md:w-1/3">
|
|
<h3 class="text-xl font-bold">
|
|
Tautan Cepat
|
|
</h3>
|
|
<ul class="text-gray-700 mt-4 space-y-2">
|
|
<li>
|
|
<a class="hover:text-green-600" href="#">
|
|
Beranda
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="hover:text-green-600" href="#">
|
|
Rumah Memilah
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="hover:text-green-600" href="#">
|
|
Regulasi
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="hover:text-green-600" href="#">
|
|
Udara
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="hover:text-green-600" href="#">
|
|
Jakarta Rendah Emisi
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="hover:text-green-600" href="#">
|
|
Uji Emisi
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="hover:text-green-600" href="#">
|
|
Kontak
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="text-center text-gray-600 mt-12">
|
|
<p>
|
|
Copyright © 2025 Dinas Lingkungan Hidup Provinsi DKI Jakarta. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|