Code Studio: Landing Page

1. Header (Bagian Atas)

Logo: PORTALNEWS.ID – “Menyajikan Fakta, Bukan Opini”
Menu Navigasi Utama:
- Home
- Nasional
- Internasional
- Ekonomi
- Sport
- Teknologi
- Lifestyle
- Opini
Search Bar: "Cari berita terbaru..."
Login/Daftar: Masuk untuk pengalaman personal

2. Breaking News / Top Bar

Breaking News: “Presiden RI Resmikan Pabrik Baterai EV Pertama di Asia Tenggara | Gempa 6,2 SR Guncang Sulawesi Utara, Tak Berpotensi Tsunami | Bursa Saham IHSG Dibuka Menguat 1,2%”

3. Hero Section (Berita Utama)

Headline Utama (gambar besar + judul besar):
“Transformasi Energi Nasional: Indonesia Masuki Era Kendaraan Listrik”
➝ Foto: Presiden meresmikan pabrik baterai EV.
Berita Populer (thumbnail kecil):
1. “Harga Beras Stabil, Pemerintah Jamin Pasokan Hingga Akhir Tahun”
2. “Lionel Messi Cetak Hattrick, Bawa Argentina Menang 3-0 atas Brasil”
3. “Startup Lokal Raup Pendanaan Rp 200 Miliar untuk Kembangkan AI”

4. Category Highlights

Nasional:
- “Menteri Pendidikan Luncurkan Kurikulum Digital Skills”
- “Tol Trans Jawa Segmen Baru Siap Beroperasi”
- “Pilkada Serentak Digelar Desember 2025”
Internasional:
- “Pemilu Amerika Serikat 2025: Kandidat Mulai Adu Strategi”
- “Konflik Perdagangan Eropa–China Memanas”
- “WHO: Vaksin Flu Baru Capai 90% Efektivitas”
Ekonomi / Bisnis:
- “IHSG Naik 1,2%, Investor Optimis Hadapi Kuartal IV”
- “Rupiah Menguat ke Rp 14.800/USD”
- “Bank Digital Tumbuh Pesat, Capai 50 Juta Nasabah”
Teknologi / Lifestyle / Sport (slider horizontal):
- “Google Rilis Fitur AI Baru untuk Gmail”
- “Tren Fashion Ramah Lingkungan 2025”
- “Jadwal Liga Champions Pekan Ini”

5. Featured / Special Content

Carousel artikel opini/editorial:
- “Opini: Tantangan Transisi Energi di Indonesia”
- “Editorial: Pentingnya Literasi Digital di Era AI”
- “Investigasi: Jejak Bisnis Ilegal di Kawasan Industri”

6. Video / Multimedia Section

Video Terkini:
Embed YouTube: “Highlights: Indonesia vs Thailand AFF Cup 2025”
Podcast:
“Ngobrol Ekonomi – Prospek Startup 2025”

7. Newsletter Subscription / Call-to-Action

📩 Dapatkan berita terbaru setiap pagi!
Form:

Input email → [Subscribe]
Pesan: “Berlangganan gratis, langsung ke inbox Anda.”

8. Sidebar (opsional, layout 2 kolom)

Berita Terpopuler:
1. “Resmi! Pemerintah Umumkan Cuti Bersama Lebaran 2025”
2. “Jakarta Masuk Daftar Kota Terpadat Dunia”
3. “Apple iPhone 17 Pro Rilis dengan Kamera AI”
4. “Bali Targetkan 10 Juta Wisatawan Tahun Ini”
5. “Timnas Indonesia U-20 Lolos ke Piala Dunia”
Iklan Banner:
Banner 300x250 – “Promo Tiket Pesawat Murah 2025”
Widget:
- Cuaca: Jakarta 31°C, Cerah
- Kurs: USD/IDR Rp 14.800
- Jadwal Bola: Liga 1 – Persija vs Persebaya, 19.00 WIB
Sosial Media Feed:
- Twitter/X feed @portalnewsid
- Facebook page embed

9. Footer

Navigasi Tambahan:
Tentang Kami | Redaksi | Pedoman Media Siber | Privacy Policy | Kontak
Logo Partner/Afiliasi:
Logo asosiasi pers, logo sponsor
Copyright:
© 2025 PORTALNEWS.ID – Semua Hak Dilindungi Undang-Undang

<!DOCTYPE html>

<head>

<title>PORTALNEWS.ID - Menyajikan Fakta, Bukan Opini</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body { font-family: 'Inter', sans-serif; }

.breaking-news-scroll {

animation: scroll-left 60s linear infinite;

}

@keyframes scroll-left {

0% { transform: translateX(100%); }

100% { transform: translateX(-100%); }

}

.hero-gradient {

background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);

}

.news-card:hover {

transform: translateY(-2px);

transition: all 0.3s ease;

}

.carousel-container {

scroll-behavior: smooth;

}

</style>

</head>

<span class="font-semibold mr-4 whitespace-nowrap">🔴 BREAKING NEWS:</span>

Presiden RI Resmikan Pabrik Baterai EV Pertama di Asia Tenggara | Gempa 6,2 SR Guncang Sulawesi Utara, Tak Berpotensi Tsunami | Bursa Saham IHSG Dibuka Menguat 1,2%

</div>

<div class="text-2xl font-bold text-blue-600">PORTALNEWS.ID</div>

<div class="ml-2 text-sm text-gray-600 hidden md:block">Menyajikan Fakta, Bukan Opini</div>

</div>

</div>

<i class="fas fa-user mr-2"></i>Masuk

</button>

</div>

<li><a href="#" class="hover:text-blue-600">Nasional</a></li>

<li><a href="#" class="hover:text-blue-600">Internasional</a></li>

<li><a href="#" class="hover:text-blue-600">Ekonomi</a></li>

<li><a href="#" class="hover:text-blue-600">Sport</a></li>

<li><a href="#" class="hover:text-blue-600">Teknologi</a></li>

<li><a href="#" class="hover:text-blue-600">Lifestyle</a></li>

<li><a href="#" class="hover:text-blue-600">Opini</a></li>

</ul>

</nav>

</div>

</header>

<h1 class="text-3xl md:text-4xl font-bold mb-4">Transformasi Energi Nasional: Indonesia Masuki Era Kendaraan Listrik</h1>

<p class="text-blue-100 mb-4">Presiden Joko Widodo meresmikan pabrik baterai kendaraan listrik pertama di Asia Tenggara, menandai langkah besar Indonesia menuju transisi energi berkelanjutan.</p>

<button class="bg-white text-blue-600 px-6 py-2 rounded-lg font-semibold hover:bg-gray-100 transition">Baca Selengkapnya</button>

</div>

</div>

</div>

<h3 class="font-semibold text-sm">Harga Beras Stabil, Pemerintah Jamin Pasokan Hingga Akhir Tahun</h3>

</div>

</div>

<h3 class="font-semibold text-sm">Lionel Messi Cetak Hattrick, Bawa Argentina Menang 3-0 atas Brasil</h3>

</div>

</div>

<h3 class="font-semibold text-sm">Startup Lokal Raup Pendanaan Rp 200 Miliar untuk Kembangkan AI</h3>

</div>

</section>

<h2 class="text-2xl font-bold mb-4 text-gray-800 border-l-4 border-red-500 pl-4">Nasional</h2>

</div>

<h3 class="font-semibold mb-2">Menteri Pendidikan Luncurkan Kurikulum Digital Skills</h3>

<p class="text-gray-600 text-sm">Program baru untuk mempersiapkan generasi digital...</p>

</div>

</div>

<h3 class="font-semibold mb-2">Tol Trans Jawa Segmen Baru Siap Beroperasi</h3>

<p class="text-gray-600 text-sm">Konektivitas antar kota semakin membaik...</p>

</div>

</div>

<h3 class="font-semibold mb-2">Pilkada Serentak Digelar Desember 2025</h3>

<p class="text-gray-600 text-sm">KPU tetapkan jadwal pemilihan kepala daerah...</p>

</div>

<h2 class="text-2xl font-bold mb-4 text-gray-800 border-l-4 border-blue-500 pl-4">Internasional</h2>

<h3 class="font-semibold mb-2">Pemilu Amerika Serikat 2025: Kandidat Mulai Adu Strategi</h3>

<p class="text-gray-600 text-sm mb-2">Kampanye politik mulai memanas menjelang pemilu...</p>

</div>

<h3 class="font-semibold mb-2">Konflik Perdagangan Eropa–China Memanas</h3>

<p class="text-gray-600 text-sm mb-2">Tarif baru diberlakukan untuk produk teknologi...</p>

</div>

<h3 class="font-semibold mb-2">WHO: Vaksin Flu Baru Capai 90% Efektivitas</h3>

<p class="text-gray-600 text-sm mb-2">Terobosan baru dalam pencegahan influenza...</p>

</div>

<h2 class="text-2xl font-bold mb-4 text-gray-800 border-l-4 border-green-500 pl-4">Ekonomi</h2>

<h3 class="font-semibold">IHSG Naik 1,2%, Investor Optimis Hadapi Kuartal IV</h3>

</div>

<p class="text-gray-600 text-sm">Bursa saham Indonesia menguat di pembukaan...</p>

</div>

<h3 class="font-semibold">Rupiah Menguat ke Rp 14.800/USD</h3>

</div>

<p class="text-gray-600 text-sm">Nilai tukar rupiah terus menunjukkan tren positif...</p>

</div>

<h3 class="font-semibold">Bank Digital Tumbuh Pesat, Capai 50 Juta Nasabah</h3>

</div>

<p class="text-gray-600 text-sm">Transformasi digital perbankan semakin masif...</p>

</div>

<h2 class="text-2xl font-bold mb-4 text-gray-800 border-l-4 border-purple-500 pl-4">Teknologi • Lifestyle • Sport</h2>

<span class="bg-purple-100 text-purple-600 px-2 py-1 rounded text-xs font-medium mr-2">TEKNOLOGI</span>

</div>

<h3 class="font-semibold mb-2">Google Rilis Fitur AI Baru untuk Gmail</h3>

<p class="text-gray-600 text-sm">Fitur pintar untuk membantu menulis email lebih efisien...</p>

</div>

<span class="bg-pink-100 text-pink-600 px-2 py-1 rounded text-xs font-medium mr-2">LIFESTYLE</span>

</div>

<h3 class="font-semibold mb-2">Tren Fashion Ramah Lingkungan 2025</h3>

<p class="text-gray-600 text-sm">Sustainable fashion menjadi pilihan utama konsumen...</p>

</div>

<span class="bg-blue-100 text-blue-600 px-2 py-1 rounded text-xs font-medium mr-2">SPORT</span>

</div>

<h3 class="font-semibold mb-2">Jadwal Liga Champions Pekan Ini</h3>

<p class="text-gray-600 text-sm">Pertandingan seru menanti di babak 16 besar...</p>

</div>

</section>

<h2 class="text-2xl font-bold mb-4 text-gray-800 border-l-4 border-orange-500 pl-4">Konten Pilihan</h2>

<span class="bg-orange-500 text-white px-2 py-1 rounded text-xs font-medium mb-3 inline-block">OPINI</span>

<h3 class="font-bold mb-2">Tantangan Transisi Energi di Indonesia</h3>

<p class="text-gray-700 text-sm mb-3">Analisis mendalam tentang persiapan Indonesia menghadapi era energi terbarukan...</p>

<span>Dr. Ahmad Susanto</span>

</div>

<span class="bg-blue-500 text-white px-2 py-1 rounded text-xs font-medium mb-3 inline-block">EDITORIAL</span>

<h3 class="font-bold mb-2">Pentingnya Literasi Digital di Era AI</h3>

<p class="text-gray-700 text-sm mb-3">Mengapa masyarakat perlu memahami teknologi AI untuk masa depan yang lebih baik...</p>

<span>Tim Redaksi</span>

</div>

<span class="bg-red-500 text-white px-2 py-1 rounded text-xs font-medium mb-3 inline-block">INVESTIGASI</span>

<h3 class="font-bold mb-2">Jejak Bisnis Ilegal di Kawasan Industri</h3>

<p class="text-gray-700 text-sm mb-3">Laporan khusus mengungkap praktik bisnis yang merugikan lingkungan...</p>

<span>Tim Investigasi</span>

</div>

</section>

<h2 class="text-2xl font-bold mb-4 text-gray-800 border-l-4 border-red-500 pl-4">Video & Multimedia</h2>

<p class="font-semibold">Video Terkini</p>

</div>

<h3 class="font-semibold mb-2">Highlights: Indonesia vs Thailand AFF Cup 2025</h3>

<p class="text-gray-600 text-sm">Saksikan momen-momen terbaik pertandingan spektakuler Timnas Indonesia...</p>

</div>

<p class="font-semibold">Podcast</p>

</div>

<h3 class="font-semibold mb-2">Ngobrol Ekonomi – Prospek Startup 2025</h3>

<p class="text-gray-600 text-sm">Diskusi mendalam dengan para ahli tentang masa depan startup Indonesia...</p>

</div>

</section>

<h2 class="text-2xl font-bold mb-2">📩 Dapatkan berita terbaru setiap pagi!</h2>

<p class="mb-6 text-blue-100">Berlangganan gratis, langsung ke inbox Anda.</p>

<button class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">Subscribe</button>

</div>

</section>

</div>

<h3 class="text-xl font-bold mb-4 text-gray-800 border-b pb-2">Berita Terpopuler</h3>

<div>

<h4 class="font-semibold text-sm mb-1">Resmi! Pemerintah Umumkan Cuti Bersama Lebaran 2025</h4>

</div>

<div>

<h4 class="font-semibold text-sm mb-1">Jakarta Masuk Daftar Kota Terpadat Dunia</h4>

</div>

<div>

<h4 class="font-semibold text-sm mb-1">Apple iPhone 17 Pro Rilis dengan Kamera AI</h4>

</div>

<div>

<h4 class="font-semibold text-sm mb-1">Bali Targetkan 10 Juta Wisatawan Tahun Ini</h4>

</div>

<div>

<h4 class="font-semibold text-sm mb-1">Timnas Indonesia U-20 Lolos ke Piala Dunia</h4>

</div>

<h4 class="font-bold mb-2">✈️ Promo Tiket Pesawat Murah 2025</h4>

<p class="text-sm mb-3">Diskon hingga 50% untuk semua destinasi domestik</p>

<button class="bg-white text-purple-600 px-4 py-2 rounded-lg font-semibold text-sm hover:bg-gray-100 transition">Pesan Sekarang</button>

</div>

<h3 class="text-lg font-bold mb-4 text-gray-800">Info Terkini</h3>

<div>

<p class="font-semibold text-sm">Jakarta</p>

<p class="text-xs text-gray-600">Cerah</p>

</div>

</div>

<div>

</div>

</div>

<p class="font-semibold text-sm">Jadwal Bola</p>

</div>

<p class="text-xs text-gray-600">Liga 1 – Persija vs Persebaya</p>

</div>

<h3 class="text-lg font-bold mb-4 text-gray-800">Ikuti Kami</h3>

<div>

<p class="font-semibold text-sm">@portalnewsid</p>

<p class="text-xs text-gray-600">Follow untuk update terbaru</p>

</div>

</a>

<div>

<p class="font-semibold text-sm">PORTALNEWS.ID</p>

<p class="text-xs text-gray-600">Like halaman Facebook kami</p>

</div>

</a>

</div>

</main>

<div>

<h3 class="text-xl font-bold mb-4">PORTALNEWS.ID</h3>

<p class="text-gray-300 text-sm mb-4">Menyajikan Fakta, Bukan Opini</p>

</div>

<div>

<h4 class="font-semibold mb-4">Navigasi</h4>

<li><a href="#" class="text-gray-300 hover:text-white">Tentang Kami</a></li>

<li><a href="#" class="text-gray-300 hover:text-white">Redaksi</a></li>

<li><a href="#" class="text-gray-300 hover:text-white">Pedoman Media Siber</a></li>

<li><a href="#" class="text-gray-300 hover:text-white">Kontak</a></li>

</ul>

</div>

<div>

<h4 class="font-semibold mb-4">Kebijakan</h4>

<li><a href="#" class="text-gray-300 hover:text-white">Privacy Policy</a></li>

<li><a href="#" class="text-gray-300 hover:text-white">Terms of Service</a></li>

<li><a href="#" class="text-gray-300 hover:text-white">Disclaimer</a></li>

</ul>

</div>

<div>

<h4 class="font-semibold mb-4">Partner</h4>

<span class="bg-gray-700 px-3 py-1 rounded text-xs">Dewan Pers</span>

</div>

</div>

</footer>

// Simple carousel functionality

document.addEventListener('DOMContentLoaded', function() {

// Add click handlers for news cards

const newsCards = document.querySelectorAll('.news-card');

newsCards.forEach(card => {

card.addEventListener('click', function() {

// Simulate navigation to article

console.log('Navigating to article...');

});

// Newsletter subscription

const subscribeBtn = document.querySelector('button[type="button"]');

if (subscribeBtn && subscribeBtn.textContent.includes('Subscribe')) {

subscribeBtn.addEventListener('click', function() {

const emailInput = this.previousElementSibling;

if (emailInput && emailInput.value) {

alert('Terima kasih! Anda telah berlangganan newsletter kami.');

emailInput.value = '';

} else {

alert('Silakan masukkan alamat email yang valid.');

}

});

}

// Search functionality

const searchInput = document.querySelector('input[placeholder="Cari berita terbaru..."]');

if (searchInput) {

searchInput.addEventListener('keypress', function(e) {

if (e.key === 'Enter') {

if (this.value.trim()) {

alert(`Mencari: "${this.value}"`);

}

});

}

// Login button

const loginBtn = document.querySelector('button:has(i.fa-user)');

if (loginBtn) {

loginBtn.addEventListener('click', function() {

alert('Fitur login akan segera tersedia!');

});

}

});

</script>

</html>

Code Studio

Sabtu, 06 September 2025

Landing Page - Portal News

1. Header (Bagian Atas)

2. Breaking News / Top Bar

3. Hero Section (Berita Utama)

4. Category Highlights

5. Featured / Special Content

6. Video / Multimedia Section

7. Newsletter Subscription / Call-to-Action

8. Sidebar (opsional, layout 2 kolom)

9. Footer

Tidak ada komentar:

Posting Komentar

Google AI Studio

Laporkan Penyalahgunaan