Code Studio: Landing Page

Prompt

Buatkan desain landing page website berita online modern dan profesional dengan fokus pada kecepatan akses, keterbacaan, dan kredibilitas informasi. Tujuan Website: Menyajikan berita aktual, terpercaya, dan mudah diakses oleh berbagai kalangan (umum, pelajar, profesional). Gaya Desain: Clean, modern, minimalis Dominasi warna netral (putih/abu) dengan aksen merah atau biru Tipografi jelas dan nyaman dibaca Layout responsif (mobile-first) Struktur Landing Page: Header / Navbar Logo portal berita Menu: Beranda, Nasional, Daerah, Internasional, Ekonomi, Teknologi, Pendidikan, Opini Search bar Hero Section (Headline Utama) Berita utama hari ini dengan gambar besar Judul berita tegas dan ringkas Ringkasan singkat (lead berita) Tombol “Baca Selengkapnya” Breaking News / Trending Slider atau ticker berita terbaru Penanda waktu publikasi Berita Terbaru Grid atau list berita (thumbnail + judul + ringkasan) Kategori dan tanggal Kategori Unggulan Nasional Ekonomi Teknologi Pendidikan Berita Populer Sidebar atau section khusus Berdasarkan jumlah pembaca Opini & Editorial Foto penulis Judul artikel opini Footer Tentang Kami Redaksi Pedoman Media Siber Kontak Media Sosial Fitur Tambahan: SEO friendly Fast loading Siap integrasi API / CMS / Google Apps Script Cocok untuk SPA (Single Page Application) Output yang Diharapkan: Struktur HTML landing page Rekomendasi UI/UX Copywriting headline berita Desain profesional setara portal berita nasional

Index.html

<!doctype html>

<head>

<title>PortalBerita — Berita Aktual & Terpercaya</title>

<style>

:root{

--bg: #ffffff;

--text: #111827;

--muted: #6b7280;

--border: #e5e7eb;

--card: #ffffff;

--accent: #dc2626; /* merah; ganti #2563eb untuk biru */

--accent-soft: rgba(220,38,38,.10);

}

body{ background: var(--bg); color: var(--text); }

.text-muted{ color: var(--muted)!important; }

.border-soft{ border: 1px solid var(--border); }

.shadow-soft{ box-shadow: 0 6px 20px rgba(17,24,39,.06); }

.badge-accent{ background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(220,38,38,.25); }

.btn-accent{ background: var(--accent); border-color: var(--accent); color: #fff; }

.btn-accent:hover{ filter: brightness(.95); color:#fff; }

.nav-link{ color: #111827; }

.nav-link:hover{ color: var(--accent); }

.brand-dot{ color: var(--accent); }

.hero-img{

aspect-ratio: 16/9; width: 100%;

object-fit: cover; border-radius: 14px;

background: #f3f4f6;

}

.news-thumb{

width: 96px; height: 72px; object-fit: cover;

border-radius: 10px; background: #f3f4f6; flex: 0 0 auto;

}

.tick{

white-space: nowrap; overflow: hidden;

mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);

}

.tick > .track{

display: inline-block; padding-left: 100%;

animation: marquee 26s linear infinite;

}

@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-100%)} }

.section-title{

font-weight: 700; letter-spacing: -.02em;

}

/* Mobile-first spacing */

.container{ max-width: 1140px; }

</style>

</head>

<body>

<span class="me-2">Update cepat.</span>

<span class="badge badge-accent rounded-pill px-2 py-1">Terverifikasi</span>

<span class="ms-2">Sumber jelas • Judul tidak clickbait • Koreksi terbuka</span>

</div>

<span id="todayDate">Sabtu, 27 Desember 2025</span>

</div>

<span style="font-size: 1.15rem;">PortalBerita<span class="brand-dot">.</span></span>

<span class="badge badge-accent rounded-pill">Cepat & Kredibel</span>

</a>

</button>

<li class="nav-item"><a class="nav-link fw-semibold" href="#beranda">Beranda</a></li>

<li class="nav-item"><a class="nav-link" href="#nasional">Nasional</a></li>

<li class="nav-item"><a class="nav-link" href="#daerah">Daerah</a></li>

<li class="nav-item"><a class="nav-link" href="#internasional">Internasional</a></li>

<li class="nav-item"><a class="nav-link" href="#ekonomi">Ekonomi</a></li>

<li class="nav-item"><a class="nav-link" href="#teknologi">Teknologi</a></li>

<li class="nav-item"><a class="nav-link" href="#pendidikan">Pendidikan</a></li>

<li class="nav-item"><a class="nav-link" href="#opini">Opini</a></li>

</ul>

</form>

</div>

</nav>

</header>

<span class="badge text-bg-danger rounded-pill px-3 py-2">BREAKING</span>

<span class="me-4">17:10 • Pemerintah rilis pembaruan kebijakan energi bersih untuk 2026</span>

<span class="me-4">16:58 • Pasar saham menguat, sektor teknologi pimpin kenaikan</span>

<span class="me-4">16:40 • Cuaca ekstrem: BNPB imbau kesiapsiagaan di wilayah rawan</span>

<span class="me-4">16:15 • Pendidikan: kurikulum adaptif dan literasi digital jadi fokus sekolah</span>

</div>

<a class="small text-decoration-none fw-semibold" href="#terbaru" style="color: var(--accent);">Lihat semua</a>

</div>

</section>

<span class="badge badge-accent rounded-pill px-3 py-2">Headline Hari Ini</span>

<span class="small text-muted">Nasional • <time datetime="2025-12-27T16:30">27 Des 2025, 16:30</time></span>

</div>

Pemerataan Ekonomi Digital Meningkat: UMKM Daerah Mulai Kuasai Pasar Nasional

</h1>

Laporan terbaru menunjukkan adopsi pembayaran digital dan logistik terpadu mendorong kenaikan transaksi UMKM di luar kota besar. Apa dampaknya bagi lapangan kerja dan harga?

</p>

<a href="#!" class="btn btn-accent px-4">Baca Selengkapnya</a>

<a href="#!" class="btn btn-outline-secondary px-4">Ringkasan 30 detik</a>

<span>✅ Fakta dicek</span>

<span>🕒 6 menit baca</span>

</div>

</section>

<h2 class="h5 section-title mb-0">Berita Terbaru</h2>

<a class="small text-decoration-none fw-semibold" href="#!" style="color: var(--accent);">Muat lebih banyak</a>

</div>

<div>

<span class="badge bg-light text-dark border rounded-pill">Ekonomi</span>

</div>

<h3 class="h6 fw-bold mb-1">Harga Pangan Stabil, Distribusi Antar-Daerah Dipercepat</h3>

<p class="small text-muted mb-0">Optimalisasi rantai pasok menekan lonjakan harga di musim liburan…</p>

</div>

</article>

</div>

<div>

<span class="badge bg-light text-dark border rounded-pill">Teknologi</span>

</div>

<h3 class="h6 fw-bold mb-1">Keamanan Data: 5 Kebiasaan Kecil yang Mencegah Kebocoran Akun</h3>

<p class="small text-muted mb-0">Mulai dari passkey hingga verifikasi dua langkah, ini yang paling efektif…</p>

</div>

</article>

</div>

<div>

<span class="badge bg-light text-dark border rounded-pill">Pendidikan</span>

</div>

<h3 class="h6 fw-bold mb-1">Sekolah Mulai Terapkan Literasi AI, Fokus Etika & Cara Verifikasi</h3>

<p class="small text-muted mb-0">Tujuannya agar siswa mampu membedakan informasi valid dan hoaks…</p>

</div>

</article>

</div>

<div>

<span class="badge bg-light text-dark border rounded-pill">Internasional</span>

</div>

<h3 class="h6 fw-bold mb-1">Perundingan Iklim: Negara G20 Sepakati Arah Pendanaan Transisi</h3>

<p class="small text-muted mb-0">Kunci utama ada pada transparansi dan target pengurangan emisi…</p>

</div>

</article>

</div>

</section>

<h2 class="h5 section-title mb-3">Kategori Unggulan</h2>

<h3 class="h6 fw-bold mb-0">Nasional</h3>

<a href="#!" class="small text-decoration-none fw-semibold" style="color: var(--accent);">Lihat</a>

</div>

<a class="text-decoration-none text-dark fw-semibold" href="#!">Reformasi layanan publik: antrean digital diperluas</a>

</li>

<a class="text-decoration-none text-dark fw-semibold" href="#!">Transportasi: evaluasi keselamatan di jalur padat</a>

</li>

<a class="text-decoration-none text-dark fw-semibold" href="#!">Kesehatan: langkah pencegahan saat musim hujan</a>

</li>

</ul>

</div>

<h3 class="h6 fw-bold mb-0">Ekonomi</h3>

<a href="#!" class="small text-decoration-none fw-semibold" style="color: var(--accent);">Lihat</a>

</div>

<a class="text-decoration-none text-dark fw-semibold" href="#!">Sektor ritel tumbuh, perilaku belanja berubah</a>

</li>

<a class="text-decoration-none text-dark fw-semibold" href="#!">UMKM: strategi bertahan di biaya logistik</a>

</li>

<a class="text-decoration-none text-dark fw-semibold" href="#!">Ketenagakerjaan: skill digital paling dicari</a>

</li>

</ul>

</div>

<h3 class="h6 fw-bold mb-0">Teknologi</h3>

<a href="#!" class="small text-decoration-none fw-semibold" style="color: var(--accent);">Lihat</a>

</div>

<a class="text-decoration-none text-dark fw-semibold" href="#!">AI untuk produktivitas: panduan aman untuk pemula</a>

</li>

<a class="text-decoration-none text-dark fw-semibold" href="#!">Privasi: apa itu passkey dan kenapa lebih aman</a>

</li>

<a class="text-decoration-none text-dark fw-semibold" href="#!">Gadget: cara memilih perangkat yang tahan lama</a>

</li>

</ul>

</div>

<h3 class="h6 fw-bold mb-0">Pendidikan</h3>

<a href="#!" class="small text-decoration-none fw-semibold" style="color: var(--accent);">Lihat</a>

</div>

<a class="text-decoration-none text-dark fw-semibold" href="#!">Metode belajar mendalam: fokus, latihan, dan refleksi</a>

</li>

<a class="text-decoration-none text-dark fw-semibold" href="#!">Tips anti menunda: sistem 2 menit untuk tugas</a>

</li>

<a class="text-decoration-none text-dark fw-semibold" href="#!">Beasiswa: dokumen yang sering terlupa</a>

</li>

</ul>

</div>

</section>

<h2 class="h5 section-title mb-0">Opini & Editorial</h2>

<a class="small text-decoration-none fw-semibold" href="#!" style="color: var(--accent);">Lihat semua</a>

</div>

<div>

<div class="small text-muted mb-1">Oleh <strong>R. Aulia</strong> • Editorial</div>

<h3 class="h6 fw-bold mb-1">Kredibilitas Berita di Era Cepat: Mengapa Verifikasi Tak Bisa Ditinggalkan</h3>

<p class="small text-muted mb-0">Kecepatan penting, tapi akurasi tetap fondasi kepercayaan publik…</p>

</div>

</article>

</div>

<div>

<div class="small text-muted mb-1">Oleh <strong>D. Pratama</strong> • Opini</div>

<h3 class="h6 fw-bold mb-1">Pendidikan Digital: Dari Sekadar Alat Menjadi Keterampilan Hidup</h3>

<p class="small text-muted mb-0">Literasi digital bukan hanya bisa pakai aplikasi, tapi memahami dampaknya…</p>

</div>

</article>

</div>

</section>

</div>

<h2 class="h6 section-title mb-0">Berita Populer</h2>

</div>

<div class="fw-semibold">Cara Membaca Data: Bedakan Fakta, Opini, dan Spekulasi</div>

<div class="small text-muted">Teknologi • 12.4k pembaca</div>

</div>

</li>

<div class="fw-semibold">Ekonomi Rumah Tangga: 7 Pos yang Wajib Dipantau</div>

<div class="small text-muted">Ekonomi • 10.8k pembaca</div>

</div>

</li>

<div class="fw-semibold">Panduan Anti Hoaks: 5 Langkah Verifikasi Cepat</div>

<div class="small text-muted">Nasional • 9.1k pembaca</div>

</div>

</li>

<div class="fw-semibold">Kampus & Karier: Portofolio yang Disukai HR</div>

<div class="small text-muted">Pendidikan • 8.3k pembaca</div>

</div>

</li>

<div class="fw-semibold">Cuaca Ekstrem: Checklist Kesiapsiagaan Keluarga</div>

<div class="small text-muted">Daerah • 7.9k pembaca</div>

</div>

</li>

</ol>

</section>

<h3 class="h6 fw-bold mb-2">Dapatkan Ringkasan Harian</h3>

<p class="small text-muted mb-3">Tanpa spam. Fokus berita penting + tautan sumber.</p>

<button class="btn btn-accent" type="button">Berlangganan</button>

</div>

<div class="small text-muted mt-2">Dengan mendaftar, Anda setuju pada kebijakan privasi.</div>

</section>

</div>

</aside>

</div>

</main>

<div class="fw-bold mb-2">PortalBerita<span class="brand-dot">.</span></div>

Berita aktual, ringkas, dan kredibel. Mengutamakan verifikasi, transparansi koreksi, dan keterbacaan.

</p>

</div>

<div class="fw-semibold mb-2">Informasi</div>

<li><a href="#!" class="text-decoration-none text-muted">Tentang Kami</a></li>

<li><a href="#!" class="text-decoration-none text-muted">Redaksi</a></li>

<li><a href="#!" class="text-decoration-none text-muted">Pedoman Media Siber</a></li>

<li><a href="#!" class="text-decoration-none text-muted">Kontak</a></li>

</ul>

</div>

<div class="fw-semibold mb-2">Kategori</div>

<li><a href="#nasional" class="text-decoration-none text-muted">Nasional</a></li>

<li><a href="#ekonomi" class="text-decoration-none text-muted">Ekonomi</a></li>

<li><a href="#teknologi" class="text-decoration-none text-muted">Teknologi</a></li>

<li><a href="#pendidikan" class="text-decoration-none text-muted">Pendidikan</a></li>

</ul>

</div>

<div class="fw-semibold mb-2">Media Sosial</div>

<a href="#!" class="btn btn-outline-secondary btn-sm">Instagram</a>

<a href="#!" class="btn btn-outline-secondary btn-sm">YouTube</a>

<a href="#!" class="btn btn-outline-secondary btn-sm">TikTok</a>

</div>

</footer>

// tanggal footer & topbar

const now = new Date();

document.getElementById("yearNow").textContent = now.getFullYear();

// Demo search hook (untuk SPA nanti tinggal fetch API)

document.getElementById("searchBtn").addEventListener("click", () => {

const q = document.getElementById("searchInput").value.trim();

if(!q) return alert("Masukkan kata kunci pencarian.");

alert("Pencarian: " + q + " (hook siap diintegrasikan ke API)");

});

</script>

</body>

</html>

Code Studio

Sabtu, 27 Desember 2025

Landing Page - News

Prompt

Index.html

Tidak ada komentar:

Posting Komentar

Landing Page - News

Laporkan Penyalahgunaan