62 lines
3.6 KiB
Plaintext
62 lines
3.6 KiB
Plaintext
<section class="delay-[300ms] duration-[600ms] taos:translate-y-[100%] taos:opacity-0" data-taos-offset="300">
|
|
<div class="container mx-auto px-4 py-12 max-w-6xl">
|
|
<div class="flex flex-col md:flex-row justify-between items-start mb-6">
|
|
<div>
|
|
<h2 class="text-3xl font-bold text-gray-900">Berita Terkini</h2>
|
|
<p class="text-gray-600 mt-2">
|
|
Ikuti akun resmi DLH untuk berita, edukasi, dan ajakan aksi lingkungan langsung dari sumber terpercaya.
|
|
</p>
|
|
</div>
|
|
<a href="#" class="mt-4 md:mt-0 bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-full flex items-center">
|
|
Lihat Semua
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-6 md:flex-row">
|
|
<!-- Main news item (large) -->
|
|
<div class="w-full md:w-2/3">
|
|
<div class="overflow-hidden rounded-lg">
|
|
<img src="@Url.Content("~/assets/images/home/berita1.jpg")" alt="Perayaan Malam Tahun Baru" class="w-full h-auto object-cover" />
|
|
</div>
|
|
<div class="mt-4">
|
|
<span class="bg-orange-500 text-white text-sm px-3 py-1 rounded-md">Artikel</span>
|
|
<span class="text-gray-600 ml-2 text-sm">17 Mei 2025</span>
|
|
<h3 class="text-gray-900 text-xl font-bold mt-2">Perayaan Malam Tahun Baru di Jakarta Hasilkan 132 Ton Sampah</h3>
|
|
<p class="text-gray-600">
|
|
Ikuti akun resmi DLH untuk berita, edukasi, dan ajakan aksi lingkungan langsung dari sumber terpercaya.
|
|
</p>
|
|
<a href="#" class="text-green-500 flex items-center mt-2 font-medium hover:text-green-600 transition-colors duration-300">
|
|
Baca Selengkapnya
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right side news items (smaller) -->
|
|
<div class="w-full md:w-1/3 flex flex-col gap-4">
|
|
@for (var i = 0; i < 4; i++)
|
|
{
|
|
<div class="flex space-x-4 border-b border-gray-100 pb-4">
|
|
<img src="@Url.Content("~/assets/images/home/berita1.jpg")" alt="Berita" class="w-32 h-24 object-cover rounded-lg" />
|
|
<a href="#" class="flex flex-col justify-center">
|
|
<div class="flex items-center mb-1">
|
|
<span class="bg-orange-500 text-white text-xs px-2 py-1 rounded">Artikel</span>
|
|
<span class="text-gray-500 text-xs ml-2">17 Mei 2025</span>
|
|
</div>
|
|
<h3 class="font-bold text-gray-900 hover:text-orange-500 transition-colors duration-300">
|
|
Perayaan Malam Tahun Baru di Jakarta Hasilkan 132 Ton Sampah
|
|
</h3>
|
|
</a>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|