feat(DetailPublikasi): add responsive
Kevin Hendrawan
parent
2cf478bc3a
commit
808301b1c5
|
|
@ -27,15 +27,27 @@
|
|||
</style>
|
||||
}
|
||||
<!-- Hero Section -->
|
||||
<section id="home" class="relative bg-white pt-20 pb-72 px-28 mt-28">
|
||||
<section id="home" class="relative bg-white pt-20 pb-20 px-4 sm:px-10 lg:px-28 mt-10 sm:mt-20">
|
||||
<div class="flex flex-col gap-20">
|
||||
<div class="flex flex-col gap-4 justfy-center px-28 text-center">
|
||||
<div class="text-green-600 text-lg font-jakarta text-center">Berita</div>
|
||||
<h2 class="font-semibold font-jakarta text-5xl leading-[60px]">Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform</h2>
|
||||
<span class="text-gray-400 text-lg">21 November 2024 | 14:53 WIB</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4 justify-center
|
||||
px-4 sm:px-10 lg:px-28
|
||||
text-center">
|
||||
|
||||
<div class="text-green-600 text-base sm:text-lg font-jakarta">Berita</div>
|
||||
|
||||
<img class="w-full mx-auto" src="/images/publikasi/image-03.png"
|
||||
<h2 class="font-semibold font-jakarta
|
||||
text-2xl sm:text-4xl lg:text-5xl
|
||||
leading-snug sm:leading-tight lg:leading-[60px]">
|
||||
Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi,<br/>
|
||||
DLH Luncurkan Platform
|
||||
</h2>
|
||||
|
||||
<span class="text-gray-400 text-sm sm:text-lg">
|
||||
21 November 2024 | 14:53 WIB
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<img class="w-full max-w-5xl mx-auto rounded-lg" src="/images/publikasi/image-03.png"
|
||||
alt="Article Image" />
|
||||
|
||||
<div class="flex flex-col gap-8">
|
||||
|
|
@ -83,54 +95,67 @@
|
|||
</div>
|
||||
|
||||
<div class="flex flex-col gap-10">
|
||||
<div class="font-bold text-4xl">Berita Lainnya</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
|
||||
<div class="card bg-base-100 w-96 h-80 overflow-hidden">
|
||||
<figure class="h-40 overflow-hidden">
|
||||
<img
|
||||
src="/images/publikasi/image-03.png"
|
||||
alt="Article image"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</figure>
|
||||
|
||||
<div class="card-body p-4">
|
||||
<h2 class="card-title line-clamp-2">
|
||||
Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-base-100 w-96 h-80 overflow-hidden">
|
||||
<figure class="h-40 overflow-hidden">
|
||||
<img
|
||||
src="/images/publikasi/image-03.png"
|
||||
alt="Article image"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</figure>
|
||||
<!-- Title -->
|
||||
<div class="font-bold text-2xl sm:text-3xl lg:text-4xl">
|
||||
Berita Lainnya
|
||||
</div>
|
||||
|
||||
<div class="card-body p-4">
|
||||
<h2 class="card-title line-clamp-2">
|
||||
Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-base-100 w-96 h-80 overflow-hidden">
|
||||
<figure class="h-40 overflow-hidden">
|
||||
<img
|
||||
src="/images/publikasi/image-03.png"
|
||||
alt="Article image"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</figure>
|
||||
<!-- Grid -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">
|
||||
<!-- Card 1 -->
|
||||
<div class="card bg-base-100 w-full h-auto overflow-hidden rounded-xl shadow-sm">
|
||||
<figure class="h-48 sm:h-52 lg:h-56 overflow-hidden">
|
||||
<img
|
||||
src="/images/publikasi/image-03.png"
|
||||
alt="Article image"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</figure>
|
||||
|
||||
<div class="card-body p-4">
|
||||
<h2 class="card-title line-clamp-2">
|
||||
Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<h2 class="card-title text-lg sm:text-xl line-clamp-2">
|
||||
Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="card bg-base-100 w-full h-auto overflow-hidden rounded-xl shadow-sm">
|
||||
<figure class="h-48 sm:h-52 lg:h-56 overflow-hidden">
|
||||
<img
|
||||
src="/images/publikasi/image-03.png"
|
||||
alt="Article image"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</figure>
|
||||
|
||||
<div class="card-body p-4">
|
||||
<h2 class="card-title text-lg sm:text-xl line-clamp-2">
|
||||
Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="card bg-base-100 w-full h-auto overflow-hidden rounded-xl shadow-sm">
|
||||
<figure class="h-48 sm:h-52 lg:h-56 overflow-hidden">
|
||||
<img
|
||||
src="/images/publikasi/image-03.png"
|
||||
alt="Article image"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</figure>
|
||||
|
||||
<div class="card-body p-4">
|
||||
<h2 class="card-title text-lg sm:text-xl line-clamp-2">
|
||||
Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in New Issue