instagram youtube
logo✖

Dukungan Muhammad Ilham dan Alfa Syahputra pada Survei Lanjutan Program Penataan Kumuh Danau Dipo Tahun 2025

index.html

<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Penabanten.com – Dari Banten Untuk Indonesia</title>
<style>
/* — RESET & BASIC STYLES — */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f4f6f9;
color: #333;
}
a {
text-transform: none;
text-decoration: none;
color: inherit;
}

/* — HEADER & NAV — */
header {
background-color: #ffffff;
border-bottom: 4px solid #cc0000;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.header-top {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo text {
font-weight: 800;
font-size: 32px;
letter-spacing: -1px;
}
.logo .pemberani { color: #cc0000; }
.logo .netral { color: #111111; }
.tagline {
font-size: 14px;
font-style: italic;
color: #666;
margin-top: -5px;
font-weight: 500;
}

nav {
background-color: #111111;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
}
.nav-container a {
color: #fff;
padding: 15px 20px;
font-size: 14px;
font-weight: 600;
transition: 0.3s;
}
.nav-container a:hover, .nav-container a.active {
background-color: #cc0000;
}

/* — CONTAINER MAIN — */
.main-container {
max-width: 1200px;
margin: 25px auto;
padding: 0 20px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
}

/* — ADVERTISING SPACE — */
.ads-space {
background-color: #e2e8f0;
border: 1px dashed #cbd5e1;
text-align: center;
padding: 15px;
font-size: 12px;
color: #64748b;
font-weight: bold;
margin-bottom: 25px;
border-radius: 4px;
}

/* — SECTION TITLE — */
.section-title {
font-size: 18px;
font-weight: 700;
border-left: 5px solid #cc0000;
padding-left: 10px;
margin-bottom: 20px;
text-transform: uppercase;
color: #111;
display: flex;
justify-content: space-between;
align-items: center;
}

/* — HEADLINE NEWS (LEFT) — */
.headline-wrapper {
background-color: #fff;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
margin-bottom: 30px;
}
.headline-img {
width: 100%;
height: 400px;
background-color: #ddd;
position: relative;
/* Simulasi Gambar Background */
background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.85) 100%);
display: flex;
align-items: flex-end;
padding: 30px;
}
.headline-badge {
position: absolute;
top: 20px;
left: 20px;
background-color: #cc0000;
color: #fff;
padding: 5px 12px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
border-radius: 3px;
}
.headline-info h2 {
color: #fff;
font-size: 28px;
line-height: 1.3;
margin-bottom: 10px;
}
.headline-meta {
color: #ccc;
font-size: 12px;
}

/* — NEWS GRID — */
.news-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 30px;
}
.news-card {
background-color: #fff;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
transition: 0.3s;
}
.news-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.card-img {
height: 180px;
background-color: #eee;
}
.card-content {
padding: 15px;
}
.card-category {
color: #cc0000;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 5px;
}
.card-content h3 {
font-size: 16px;
line-height: 1.4;
margin-bottom: 10px;
color: #111;
}
.card-meta {
font-size: 11px;
color: #888;
}

/* — SIDEBAR (RIGHT) — */
.sidebar-panel {
background-color: #fff;
padding: 20px;
border-radius: 6px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
margin-bottom: 25px;
}
.recent-list {
list-style: none;
}
.recent-item {
padding: 12px 0;
border-bottom: 1px solid #edf2f7;
display: flex;
gap: 15px;
}
.recent-item:last-child {
border-bottom: none;
}
.recent-thumb {
width: 70px;
height: 70px;
background-color: #eee;
flex-shrink: 0;
border-radius: 4px;
}
.recent-details h4 {
font-size: 13px;
line-height: 1.4;
margin-bottom: 5px;
color: #222;
}
.recent-details h4:hover {
color: #cc0000;
}

/* — FOOTER — */
footer {
background-color: #111;
color: #fff;
padding: 40px 20px;
margin-top: 5px;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 40px;
}
.footer-about h3 {
font-size: 24px;
margin-bottom: 15px;
}
.footer-about p {
font-size: 14px;
color: #aaa;
line-height: 1.6;
}
.footer-links h4 {
border-bottom: 2px solid #cc0000;
padding-bottom: 8px;
margin-bottom: 15px;
font-size: 16px;
}
.footer-links ul {
list-style: none;
}
.footer-links ul li {
margin-bottom: 10px;
}
.footer-links ul li a {
color: #aaa;
font-size: 14px;
transition: 0.3s;
}
.footer-links ul li a:hover {
color: #fff;
padding-left: 5px;
}
.footer-bottom {
text-align: center;
padding-top: 30px;
margin-top: 30px;
border-top: 1px solid #222;
font-size: 12px;
color: #666;
}

/* — RESPONSIVE / HP — */
@media (max-width: 768px) {
.main-container {
grid-template-columns: 1fr;
}
.header-top {
flex-direction: column;
text-align: center;
gap: 15px;
}
.nav-container {
overflow-x: auto;
white-space: nowrap;
}
.news-grid {
grid-template-columns: 1fr;
}
.headline-img {
height: 280px;
padding: 15px;
}
.headline-info h2 {
font-size: 20px;
}
.footer-container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>

<header>
<div class=”header-top”>
<div class=”logo-area”>
<div class=”logo”><span class=”pemberani”>Pena</span><span class=”netral”>banten.com</span></div>
<div class=”tagline”>Dari Banten Untuk Indonesia</div>
</div>
<div style=”font-size: 12px; color: #666;” id=”live-date”>Kamis, 21 Mei 2026</div>
</div>

<nav>
<div class=”nav-container”>
<a href=”#” class=”active”>HOME</a>
<a href=”#”>BANTEN</a>
<a href=”#”>POLDA BANTEN</a>
<a href=”#”>HUKUM & KRIMINAL</a>
<a href=”#”>PEMERINTAHAN</a>
<a href=”#”>OPINI</a>
<a href=”#”>NASIONAL</a>
</div>
</nav>
</header>

<div class=”main-container”>

<main>
<div class=”ads-space”>
SPACE IKLAN UTAMA (BANNER 728 x 90)
</div>

<div class=”section-title”>Berita Utama Terbaru</div>

<a href=”#” class=”headline-wrapper”>
<div class=”headline-img” style=”background-image: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.9) 100%), url(‘https://images.unsplash.com/photo-1541872703-74c5e44368f9?w=800’); background-size: cover; background-position: center;”>
<span class=”headline-badge”>Polda Banten</span>
<div class=”headline-info”>
<h2>Usung Tema Tunas Bangsa, Polda Banten Gelar Upacara Peringatan Hari Kebangkitan Nasional</h2>
<div class=”headline-meta”>Oleh: Redaksi • 20 Mei 2026</div>
</div>
</div>
</a>

<div class=”news-grid”>
<div class=”news-card”>
<div class=”card-img” style=”background: url(‘https://images.unsplash.com/photo-1578328819058-b69f3a3b0f6s?w=400’) center/cover #ddd;”></div>
<div class=”card-content”>
<div class=”card-category”>Kabupaten Serang</div>
<h3><a href=”#”>Sidak OPD di Kabupaten Serang, Bupati Ratu Zakiyah Pantau Langsung Kinerja ASN</a></h3>
<div class=”card-meta”>21 Mei 2026</div>
</div>
</div>
<div class=”news-card”>
<div class=”card-img” style=”background: url(‘https://images.unsplash.com/photo-1557804506-669a67965ba0?w=400’) center/cover #ddd;”></div>
<div class=”card-content”>
<div class=”card-category”>Kriminal</div>
<h3><a href=”#”>Jaga Kondusivitas Pagi, Pasukan Turangga Polri Gelar Patroli Rutin di Wilayah Hukum</a></h3>
<div class=”card-meta”>20 Mei 2026</div>
</div>
</div>
<div class=”news-card”>
<div class=”card-img” style=”background: url(‘https://images.unsplash.com/photo-1590674899484-d5640e854abe?w=400’) center/cover #ddd;”></div>
<div class=”card-content”>
<div class=”card-category”>Pemerintahan</div>
<h3><a href=”#”>Masalah Sampah dan Miras di Ciruas Menjadi Sorotan Publik, Warga Minta Solusi Nyata</a></h3>
<div class=”card-meta”>20 Mei 2026</div>
</div>
</div>
<div class=”news-card”>
<div class=”card-img” style=”background: url(‘https://images.unsplash.com/photo-1506784983877-45594efa4cbe?w=400’) center/cover #ddd;”></div>
<div class=”card-content”>
<div class=”card-category”>Kab. Tangerang</div>
<h3><a href=”#”>Buka Festival Literasi 2026, Bupati Tangerang Harap Minat Baca Generasi Muda Meningkat</a></h3>
<div class=”card-meta”>19 Mei 2026</div>
</div>
</div>
</div>
</main>

<aside>
<div class=”ads-space” style=”height: 250px; display: flex; align-items: center; justify-content: center;”>
IKLAN BANNER BANNER (300 x 250)
</div>

<div class=”sidebar-panel”>
<div class=”section-title”>Berita Populer</div>
<ul class=”recent-list”>
<li class=”recent-item”>
<div class=”recent-thumb” style=”background: url(‘https://images.unsplash.com/photo-1541872703-74c5e44368f9?w=100’) center/cover;”></div>
<div class=”recent-details”>
<h4><a href=”#”>Dua Personel Polda Banten Terima Penghargaan Atas Loyalitas Tinggi</a></h4>
</div>
</li>
<li class=”recent-item”>
<div class=”recent-thumb” style=”background: url(‘https://images.unsplash.com/photo-1590674899484-d5640e854abe?w=100’) center/cover;”></div>
<div class=”recent-details”>
<h4><a href=”#”>Buka Dialog Literasi Digital, Wabup Tangerang Ingatkan Dampak Era Post-Truth</a></h4>
</div>
</li>
<li class=”recent-item”>
<div class=”recent-thumb” style=”background: url(‘https://images.unsplash.com/photo-1506784983877-45594efa4cbe?w=100’) center/cover;”></div>
<div class=”recent-details”>
<h4><a href=”#”>Kodim 0510/Tigaraksa Gelar Upacara Harkitnas, Teguhkan Kedaulatan Bangsa</a></h4>
</div>
</li>
</ul>
</div>
</aside>

</div>

<footer>
<div class=”footer-container”>
<div class=”footer-about”>
<h3>Penabanten.com</h3>
<p>Media online independen yang menyajikan informasi aktual, terpercaya, dan tajam seputar wilayah Banten dan Nasional. Berkomitmen menegakkan jurnalisme yang beretika.</p>
</div>
<div class=”footer-links”>
<h4>Kategori</h4>
<ul>
<li><a href=”#”>Polda Banten</a></li>
<li><a href=”#”>Hukum & Kriminal</a></li>
<li><a href=”#”>Pemerintahan Daerah</a></li>
<li><a href=”#”>Opini & Publik</a></li>
</ul>
</div>
<div class=”footer-links”>
<h4>Redaksi</h4>
<ul>
<li><a href=”#”>Tentang Kami</a></li>
<li><a href=”#”>Pedoman Media Siber</a></li>
<li><a href=”#”>Kontak / Redaksi</a></li>
<li><a href=”#”>Info Iklan Kerja Sama</a></li>
</ul>
</div>
</div>
<div class=”footer-bottom”>
&copy; 2026 Penabanten.com – Dari Banten Untuk Indonesia. All Rights Reserved.
</div>
</footer>

</body>
</html>