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