Portal Berita Sederhana HTML
Halaman “Dashboard Portal Berita” adalah antarmuka admin yang dirancang untuk mengelola berbagai aspek portal berita. Fitur utama halaman ini meliputi:
- Header: Menampilkan judul utama sebagai identitas halaman dashboard.
- Navigasi: Terdapat menu navigasi horizontal dengan tautan ke berbagai halaman utama seperti Dashboard, Berita, Kategori, Pengaturan, dan Logout.
- Kontainer Dashboard: Menyediakan informasi penting dalam bentuk kartu statistik, seperti:
- Total Berita: Menampilkan jumlah keseluruhan berita yang telah diterbitkan.
- Berita Baru: Menginformasikan jumlah berita terbaru dalam minggu berjalan.
- Kategori: Menunjukkan jumlah kategori berita yang tersedia.
- Pengguna Aktif: Menghitung jumlah pengguna aktif saat ini.
- Desain Responsif: Tata letak kartu dalam kontainer dirancang fleksibel untuk menyesuaikan ukuran layar perangkat.
- Footer: Berisi informasi hak cipta portal berita.
Halaman ini memberikan tampilan profesional dengan warna yang kontras dan animasi sederhana saat kursor diarahkan ke kartu statistik. Anda dapat menggunakan halaman ini untuk memantau performa portal berita secara cepat dan mudah.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portal Berita</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #007bff;
color: white;
padding: 15px 20px;
text-align: center;
}
nav {
display: flex;
justify-content: center;
background-color: #0056b3;
padding: 10px;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
.container {
max-width: 1200px;
margin: 20px auto;
padding: 15px;
background: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.headline {
display: flex;
flex-direction: column;
align-items: center;
}
.headline img {
max-width: 100%;
height: auto;
border-radius: 10px;
}
.headline h1 {
margin-top: 15px;
font-size: 2rem;
}
.articles {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}
.article {
flex: 1 1 calc(33.333% - 20px);
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}
.article:hover {
transform: scale(1.05);
}
.article img {
width: 100%;
height: auto;
}
.article h2 {
font-size: 1.5rem;
margin: 15px;
}
.article p {
margin: 15px;
color: #555;
}
footer {
text-align: center;
background-color: #007bff;
color: white;
padding: 10px 0;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<h1>Portal Berita Terkini</h1>
</header>
<nav>
<a href="#">Beranda</a>
<a href="#">Nasional</a>
<a href="#">Internasional</a>
<a href="#">Ekonomi</a>
<a href="#">Olahraga</a>
<a href="#">Teknologi</a>
</nav>
<div class="container">
<div class="headline">
<img src="headline-image.jpg" alt="Berita Utama">
<h1>Judul Berita Utama</h1>
</div>
<div class="articles">
<div class="article">
<img src="article1.jpg" alt="Berita 1">
<h2>Judul Berita 1</h2>
<p>Ringkasan singkat berita 1...</p>
</div>
<div class="article">
<img src="article2.jpg" alt="Berita 2">
<h2>Judul Berita 2</h2>
<p>Ringkasan singkat berita 2...</p>
</div>
<div class="article">
<img src="article3.jpg" alt="Berita 3">
<h2>Judul Berita 3</h2>
<p>Ringkasan singkat berita 3...</p>
</div>
</div>
</div>
<footer>
<p>© 2025 Portal Berita. Semua Hak Dilindungi.</p>
</footer>
</body>
</html>
