528 lines
26 KiB
Plaintext
528 lines
26 KiB
Plaintext
@{
|
|
ViewBag.title = "Daftar Artikel";
|
|
ViewBag.menu = "Artikel";
|
|
}
|
|
|
|
|
|
<!-- List Article -->
|
|
<div class="container">
|
|
<div class="row mt-5">
|
|
<div class="col">
|
|
<div class="blog-posts">
|
|
<div class="text-center mb-5">
|
|
<h1 class="fw-bold mb-2">Berita Lingkungan Hidup</h1>
|
|
<p class="fs-6">Ikuti program, kegiatan, dan informasi terbaru tentang Dinas Lingkungan Hidup
|
|
Provinsi DKI
|
|
Jakarta</p>
|
|
</div>
|
|
<!--
|
|
Max Character Title: 78 Char (3 Lines)
|
|
Max Character Description: 119 Char (3 Lines)
|
|
-->
|
|
<div id="list-article" class="row">
|
|
<div class="col-md-4">
|
|
<article class="border-0 pb-0 mb-5">
|
|
<div class="post-image">
|
|
<div class="position-relative placeholder-glow">
|
|
<a href="#" class="ratio ratio-16x9 placeholder rounded-4 text-dark">
|
|
<div class="rounded-4" style="object-fit: cover"></div>
|
|
</a>
|
|
<div class="badges position-absolute" style="top: 4px; right:10px">
|
|
<span class="placeholder col-6"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post-content placeholder-glow">
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-0 placeholder col-10"></h2>
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-2 mb-3 placeholder col-12"></h2>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12 mb-2"></p>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12"></p>
|
|
|
|
<div class="post-meta placeholder-glow">
|
|
<div class="d-flex align-items-center">
|
|
<div class="placeholder rounded-circle me-1" style="width: 30px; height: 30px;">
|
|
</div>
|
|
<a href="#" class="fw-semibold placeholder col-4 ms-1 text-dark"></a><span
|
|
class="ms-2 placeholder col-3"></span>
|
|
<div class="ms-2 placeholder col-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<article class="border-0 pb-0 mb-5">
|
|
<div class="post-image">
|
|
<div class="position-relative placeholder-glow">
|
|
<a href="#" class="ratio ratio-16x9 placeholder rounded-4 text-dark">
|
|
<div class="rounded-4" style="object-fit: cover"></div>
|
|
</a>
|
|
<div class="badges position-absolute" style="top: 4px; right:10px">
|
|
<span class="placeholder col-6"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post-content placeholder-glow">
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-0 placeholder col-10"></h2>
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-2 mb-3 placeholder col-12"></h2>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12 mb-2"></p>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12"></p>
|
|
|
|
<div class="post-meta placeholder-glow">
|
|
<div class="d-flex align-items-center">
|
|
<div class="placeholder rounded-circle me-1" style="width: 30px; height: 30px;">
|
|
</div>
|
|
<a href="#" class="fw-semibold placeholder col-4 ms-1 text-dark"></a><span
|
|
class="ms-2 placeholder col-3"></span>
|
|
<div class="ms-2 placeholder col-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<article class="border-0 pb-0 mb-5">
|
|
<div class="post-image">
|
|
<div class="position-relative placeholder-glow">
|
|
<a href="#" class="ratio ratio-16x9 placeholder rounded-4 text-dark">
|
|
<div class="rounded-4" style="object-fit: cover"></div>
|
|
</a>
|
|
<div class="badges position-absolute" style="top: 4px; right:10px">
|
|
<span class="placeholder col-6"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post-content placeholder-glow">
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-0 placeholder col-10"></h2>
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-2 mb-3 placeholder col-12"></h2>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12 mb-2"></p>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12"></p>
|
|
|
|
<div class="post-meta placeholder-glow">
|
|
<div class="d-flex align-items-center">
|
|
<div class="placeholder rounded-circle me-1" style="width: 30px; height: 30px;">
|
|
</div>
|
|
<a href="#" class="fw-semibold placeholder col-4 ms-1 text-dark"></a><span
|
|
class="ms-2 placeholder col-3"></span>
|
|
<div class="ms-2 placeholder col-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<article class="border-0 pb-0 mb-5">
|
|
<div class="post-image">
|
|
<div class="position-relative placeholder-glow">
|
|
<a href="#" class="ratio ratio-16x9 placeholder rounded-4 text-dark">
|
|
<div class="rounded-4" style="object-fit: cover"></div>
|
|
</a>
|
|
<div class="badges position-absolute" style="top: 4px; right:10px">
|
|
<span class="placeholder col-6"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post-content placeholder-glow">
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-0 placeholder col-10"></h2>
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-2 mb-3 placeholder col-12"></h2>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12 mb-2"></p>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12"></p>
|
|
|
|
<div class="post-meta placeholder-glow">
|
|
<div class="d-flex align-items-center">
|
|
<div class="placeholder rounded-circle me-1" style="width: 30px; height: 30px;">
|
|
</div>
|
|
<a href="#" class="fw-semibold placeholder col-4 ms-1 text-dark"></a><span
|
|
class="ms-2 placeholder col-3"></span>
|
|
<div class="ms-2 placeholder col-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<article class="border-0 pb-0 mb-5">
|
|
<div class="post-image">
|
|
<div class="position-relative placeholder-glow">
|
|
<a href="#" class="ratio ratio-16x9 placeholder rounded-4 text-dark">
|
|
<div class="rounded-4" style="object-fit: cover"></div>
|
|
</a>
|
|
<div class="badges position-absolute" style="top: 4px; right:10px">
|
|
<span class="placeholder col-6"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post-content placeholder-glow">
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-0 placeholder col-10"></h2>
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-2 mb-3 placeholder col-12"></h2>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12 mb-2"></p>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12"></p>
|
|
|
|
<div class="post-meta placeholder-glow">
|
|
<div class="d-flex align-items-center">
|
|
<div class="placeholder rounded-circle me-1" style="width: 30px; height: 30px;">
|
|
</div>
|
|
<a href="#" class="fw-semibold placeholder col-4 ms-1 text-dark"></a><span
|
|
class="ms-2 placeholder col-3"></span>
|
|
<div class="ms-2 placeholder col-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<article class="border-0 pb-0 mb-5">
|
|
<div class="post-image">
|
|
<div class="position-relative placeholder-glow">
|
|
<a href="#" class="ratio ratio-16x9 placeholder rounded-4 text-dark">
|
|
<div class="rounded-4" style="object-fit: cover"></div>
|
|
</a>
|
|
<div class="badges position-absolute" style="top: 4px; right:10px">
|
|
<span class="placeholder col-6"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post-content placeholder-glow">
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-0 placeholder col-10"></h2>
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-2 mb-3 placeholder col-12"></h2>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12 mb-2"></p>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12"></p>
|
|
|
|
<div class="post-meta placeholder-glow">
|
|
<div class="d-flex align-items-center">
|
|
<div class="placeholder rounded-circle me-1" style="width: 30px; height: 30px;">
|
|
</div>
|
|
<a href="#" class="fw-semibold placeholder col-4 ms-1 text-dark"></a><span
|
|
class="ms-2 placeholder col-3"></span>
|
|
<div class="ms-2 placeholder col-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<ul class="pagination justify-content-center">
|
|
<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-left"></i></a></li>
|
|
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-right"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@* <div class="alert alert-danger position-fixed appear-animation animated fadeInRight appear-animation-visible" data-appear-animation="fadeInRight" data-appear-animation-delay="0" data-appear-animation-duration="1s" style="animation-duration: 1s; animation-delay: 0ms; bottom: 10px; right: 10px; z-index: 999">
|
|
Anda sedang <strong>Offline</strong>
|
|
</div> *@
|
|
|
|
<script>
|
|
const data = [
|
|
{
|
|
"id": 1,
|
|
"title": "Manfaat Meditasi untuk Kesehatan Mental",
|
|
"description": "Menjelajahi manfaat meditasi dalam meningkatkan kesehatan mental dan kebahagiaan sehari-hari.",
|
|
"image": "650x700",
|
|
"badge": "health",
|
|
"color_badge": "#27ae60"
|
|
},
|
|
{
|
|
"id": 2,
|
|
"title": "Inovasi Terbaru dalam Teknologi Gadget",
|
|
"description": "Mengulas perkembangan terkini dalam dunia teknologi gadget dan perangkat pintar.",
|
|
"image": "600x550",
|
|
"badge": "technology",
|
|
"color_badge": "#3498db"
|
|
},
|
|
{
|
|
"id": 3,
|
|
"title": "Tips Efektif Mengelola Waktu di Era Digital",
|
|
"description": "Memberikan strategi praktis untuk mengoptimalkan pengelolaan waktu dalam rutinitas harian.",
|
|
"image": "700x600",
|
|
"badge": "productivity",
|
|
"color_badge": "#f39c12"
|
|
},
|
|
{
|
|
"id": 4,
|
|
"title": "Mengenal Kesehatan Jantung: Fakta dan Mitos",
|
|
"description": "Memisahkan fakta dari mitos seputar kesehatan jantung untuk hidup yang lebih sehat.",
|
|
"image": "750x550",
|
|
"badge": "health",
|
|
"color_badge": "#e74c3c"
|
|
},
|
|
{
|
|
"id": 5,
|
|
"title": "Belajar Bahasa Asing: Panduan untuk Pemula",
|
|
"description": "Langkah-langkah praktis untuk memulai perjalanan belajar bahasa asing dengan sukses.",
|
|
"image": "800x600",
|
|
"badge": "education",
|
|
"color_badge": "#9b59b6"
|
|
},
|
|
{
|
|
"id": 6,
|
|
"title": "Keajaiban Alam Semesta: Lubang Hitam dan Galaksi",
|
|
"description": "Eksplorasi fenomena alam semesta, dari lubang hitam hingga keindahan galaksi.",
|
|
"image": "720x480",
|
|
"badge": "science",
|
|
"color_badge": "#e74c3c"
|
|
},
|
|
{
|
|
"id": 7,
|
|
"title": "Resep Sehat dan Lezat untuk Sarapan Pagi",
|
|
"description": "Ide-ide resep sarapan yang sehat dan lezat untuk memulai hari dengan energi.",
|
|
"image": "600x700",
|
|
"badge": "food",
|
|
"color_badge": "#27ae60"
|
|
},
|
|
{
|
|
"id": 8,
|
|
"title": "Cara Efektif Menangani Stres di Tempat Kerja",
|
|
"description": "Strategi untuk mengatasi stres di lingkungan kerja dan meningkatkan kesejahteraan.",
|
|
"image": "650x600",
|
|
"badge": "health",
|
|
"color_badge": "#e74c3c"
|
|
},
|
|
{
|
|
"id": 9,
|
|
"title": "Teknologi Blockchain: Masa Depan Keamanan Digital",
|
|
"description": "Mengulas konsep blockchain dan dampaknya pada keamanan digital di era modern.",
|
|
"image": "700x550",
|
|
"badge": "technology",
|
|
"color_badge": "#3498db"
|
|
},
|
|
{
|
|
"id": 10,
|
|
"title": "Seni Digital: Eksplorasi Kreativitas di Era Digital",
|
|
"description": "Menjelajahi dunia seni digital dan cara teknologi memengaruhi kreativitas seniman.",
|
|
"image": "720x620",
|
|
"badge": "art",
|
|
"color_badge": "#9b59b6"
|
|
},
|
|
{
|
|
"id": 11,
|
|
"title": "Pentingnya Hidrasi: Manfaat Air Putih untuk Tubuh",
|
|
"description": "Mendiskusikan manfaat kesehatan dari minum air putih secara cukup setiap hari.",
|
|
"image": "700x600",
|
|
"badge": "health",
|
|
"color_badge": "#27ae60"
|
|
},
|
|
{
|
|
"id": 12,
|
|
"title": "Serunya Bersepeda: Aktivitas Olahraga yang Menyenangkan",
|
|
"description": "Mengajak pembaca untuk menikmati manfaat olahraga sepeda dan tips memilih sepeda yang tepat.",
|
|
"image": "650x550",
|
|
"badge": "sport",
|
|
"color_badge": "#e74c3c"
|
|
},
|
|
{
|
|
"id": 13,
|
|
"title": "Cara Membuat Smoothie Sehat dan Bergizi",
|
|
"description": "Berbagai resep smoothie yang lezat dan menyehatkan untuk dinikmati di pagi hari atau sebagai camilan.",
|
|
"image": "750x700",
|
|
"badge": "food",
|
|
"color_badge": "#f39c12"
|
|
},
|
|
{
|
|
"id": 14,
|
|
"title": "Exploring the Wonders of Deep Sea Creatures",
|
|
"description": "Discovering the fascinating world of deep-sea creatures and their unique adaptations.",
|
|
"image": "720x480",
|
|
"badge": "science",
|
|
"color_badge": "#3498db"
|
|
},
|
|
{
|
|
"id": 15,
|
|
"title": "Strategi Sukses dalam Belajar Online",
|
|
"description": "Memberikan tips dan trik untuk sukses dalam pembelajaran online dan meningkatkan produktivitas belajar.",
|
|
"image": "600x650",
|
|
"badge": "education",
|
|
"color_badge": "#9b59b6"
|
|
},
|
|
{
|
|
"id": 16,
|
|
"title": "Menjadi Pekerja Lebih Fleksibel: Keuntungan dan Tips",
|
|
"description": "Mengulas manfaat menjadi pekerja yang lebih fleksibel dan cara mencapainya dalam lingkungan kerja.",
|
|
"image": "700x600",
|
|
"badge": "career",
|
|
"color_badge": "#f39c12"
|
|
},
|
|
{
|
|
"id": 17,
|
|
"title": "Perjalanan Kuliner: Menikmati Kelezatan Makanan Lokal",
|
|
"description": "Menjelajahi aneka makanan lokal yang lezat dan menggugah selera dari berbagai penjuru dunia.",
|
|
"image": "800x600",
|
|
"badge": "food",
|
|
"color_badge": "#e74c3c"
|
|
},
|
|
{
|
|
"id": 18,
|
|
"title": "Mengapa Kucing adalah Hewan Peliharaan yang Menyenangkan",
|
|
"description": "Mendiskusikan pesona dan manfaat memiliki kucing sebagai hewan peliharaan.",
|
|
"image": "650x550",
|
|
"badge": "pets",
|
|
"color_badge": "#3498db"
|
|
},
|
|
{
|
|
"id": 19,
|
|
"title": "Cara Memulai Usaha Kecil yang Sukses",
|
|
"description": "Panduan langkah demi langkah untuk memulai usaha kecil dengan sukses dan berkembang.",
|
|
"image": "720x620",
|
|
"badge": "business",
|
|
"color_badge": "#f39c12"
|
|
},
|
|
{
|
|
"id": 20,
|
|
"title": "Menjelajahi Keindahan Alam: Destinasi Wisata Outdoor",
|
|
"description": "Merinci destinasi wisata outdoor yang menawarkan pemandangan alam yang luar biasa dan petualangan seru.",
|
|
"image": "700x550",
|
|
"badge": "travel",
|
|
"color_badge": "#27ae60"
|
|
},
|
|
{
|
|
"id": 21,
|
|
"title": "Tips Menata Ruang Kerja yang Nyaman di Rumah",
|
|
"description": "Memberikan saran tentang cara menciptakan ruang kerja yang nyaman dan produktif di rumah.",
|
|
"image": "700x600",
|
|
"badge": "home",
|
|
"color_badge": "#f39c12"
|
|
},
|
|
{
|
|
"id": 22,
|
|
"title": "Exploring the Marvels of Underwater Photography",
|
|
"description": "Discovering the art and challenges of capturing breathtaking moments through underwater photography.",
|
|
"image": "650x550",
|
|
"badge": "art",
|
|
"color_badge": "#9b59b6"
|
|
},
|
|
{
|
|
"id": 23,
|
|
"title": "Kiat Sukses dalam Menjalani Hidup Sehat",
|
|
"description": "Tips praktis untuk menjalani gaya hidup sehat dengan keseimbangan antara makanan, olahraga, dan istirahat.",
|
|
"image": "750x700",
|
|
"badge": "health",
|
|
"color_badge": "#27ae60"
|
|
},
|
|
{
|
|
"id": 24,
|
|
"title": "Mengenal Budaya Teh: Sejarah dan Manfaatnya",
|
|
"description": "Menjelajahi sejarah teh dan berbagai budaya teh di seluruh dunia, serta manfaatnya untuk kesehatan.",
|
|
"image": "720x480",
|
|
"badge": "food",
|
|
"color_badge": "#e74c3c"
|
|
},
|
|
{
|
|
"id": 25,
|
|
"title": "Strategi Investasi untuk Pemula: Mulai Dengan Bijak",
|
|
"description": "Panduan langkah demi langkah untuk pemula dalam berinvestasi dan membangun portofolio keuangan yang kokoh.",
|
|
"image": "600x650",
|
|
"badge": "finance",
|
|
"color_badge": "#3498db"
|
|
},
|
|
{
|
|
"id": 26,
|
|
"title": "Panduan Membuat Kebun Sayur di Halaman Belakang",
|
|
"description": "Langkah-langkah praktis untuk memulai kebun sayur di halaman belakang rumah Anda.",
|
|
"image": "700x600",
|
|
"badge": "home",
|
|
"color_badge": "#27ae60"
|
|
},
|
|
{
|
|
"id": 27,
|
|
"title": "Mengenali Jenis-jenis Kucing yang Unik dan Langka",
|
|
"description": "Menjelajahi dunia kucing dengan merinci jenis-jenis kucing yang unik dan langka.",
|
|
"image": "800x600",
|
|
"badge": "pets",
|
|
"color_badge": "#e74c3c"
|
|
},
|
|
{
|
|
"id": 28,
|
|
"title": "Manfaat Seni Terapi: Melukis untuk Kesehatan Mental",
|
|
"description": "Mengulas bagaimana melukis dapat menjadi bentuk terapi untuk meningkatkan kesehatan mental.",
|
|
"image": "650x550",
|
|
"badge": "art",
|
|
"color_badge": "#9b59b6"
|
|
},
|
|
{
|
|
"id": 29,
|
|
"title": "Teknologi 5G: Revolusi Koneksi Internet",
|
|
"description": "Mendiskusikan dampak teknologi 5G dalam merubah cara kita terhubung dengan internet.",
|
|
"image": "720x620",
|
|
"badge": "technology",
|
|
"color_badge": "#3498db"
|
|
},
|
|
{
|
|
"id": 30,
|
|
"title": "Rahasia Rasa dalam Masakan Tradisional",
|
|
"description": "Mengungkap rahasia rasa dalam masakan tradisional dari berbagai belahan dunia.",
|
|
"image": "700x550",
|
|
"badge": "food",
|
|
"color_badge": "#e74c3c"
|
|
}
|
|
];
|
|
|
|
generateArticle(data)
|
|
|
|
|
|
function generateArticle(data) {
|
|
sliceData(data, 0, 9)
|
|
}
|
|
|
|
function sliceData(data, start, end) {
|
|
const newData = data.slice(start, end)
|
|
|
|
let articles = ""
|
|
|
|
let delay = 0
|
|
for (const [index, element] of newData.entries()) {
|
|
const dynamicDelay = index % 2 === 0 ? delay : (delay + 300);
|
|
|
|
articles += `
|
|
<div class="col-md-4 col-lg-3 ${index % 9 == 0 ? "d-lg-none" : "d-block"} appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay=${delay}>
|
|
<article class="post post-medium border-0 pb-0 mb-5">
|
|
<div class="post-image">
|
|
<div class="position-relative">
|
|
<a href="/2023/12/12/inovasi-terbaru-dalam-teknologi-gadget" class="d-block ratio ratio-16x9 rounded-4">
|
|
<img data-lazy="https://source.unsplash.com/random/${element.image}/?${element.badge}"
|
|
style="object-fit: cover" class="rounded-4 lazy" alt="${element.title}" />
|
|
</a>
|
|
<div class="badges position-absolute" style="top: 4px; right:10px">
|
|
<span class="badge" style="background-color: ${element.color_badge}">${element.badge}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post-content">
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-2"><a href="/2023/12/12/inovasi-terbaru-dalam-teknologi-gadget"
|
|
class="text-break overflow-ellipsis-3">${element.title}</a>
|
|
</h2>
|
|
<p class="text-break overflow-ellipsis-3">
|
|
${element.description}
|
|
</p>
|
|
|
|
<div class="post-meta">
|
|
<span><i class="far fa-calendar"></i> 20 Des 2023 </span>
|
|
<span><i class="far fa-clock"></i> 3 min baca</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
`
|
|
|
|
delay += 300;
|
|
}
|
|
const container_post = document.querySelector("#list-article")
|
|
container_post.innerHTML = articles
|
|
}
|
|
</script> |