Berikut adalah gambar dari portal berita saya :
Berikut adalah kodingan html dari portal berita saya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>WartaNews</title>
</head>
<body>
<div class="header">
<div class="jarak">
<h2 class="judul">PortalNews</h2>
</div>
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Dunia</a></li>
<li><a href="#">Indonesia</a></li>
<li><a href="#">Surabaya</a></li>
</ul>
</div>
<div class="content">
<div class="jarak">
<!--kiri-->
<div class="kiri">
<!--blog-->
<div class="border">
<div class="jarak">
<h3>Jelang Penghapusan Pegawai Non ASN, BKPSDM Maros Lakukan Pendataan hingga Akhir...</h3>
<p>Andi Sri wahyuni AB menjelaskan tenaga honorer yang masuk pendataan adalah kategori II yang masih aktif hingga saat ini.</p>
<button class="btn">Read More ..</button>
</div>
</div>
<!--end blog-->
<!--blog-->
<div class="border">
<div class="jarak">
<h3>Mengapa Kombes Budhi Haryanto Ingin Ganti Nama Batalyon 120 Usai Digerebek?</h3>
<p>Kombes Pol Budhi Haryanto bakal mengganti nama Batalyon 120 setelah penggerebekan di di Jl Korban 40.000 jiwa, Kecamatan Tallo.</p>
<button class="btn">Read More ..</button>
</div>
</div>
<!--end blog-->
</div>
<!--end kiri-->
<!--kanan-->
<div class="kanan">
<div class="jarak">
<h3>CATEGORY</h3>
<hr/>
<p><a href="#" class="undercor">Politik</a></p>
<p><a href="#" class="undercor">Ekonomi</a></p>
<p><a href="#" class="undercor">Pendidikan</a></p>
<p><a href="#" class="undercor">Budaya</a></p>
<p><a href="#" class="undercor">Teknologi</a></p>
<p><a href="#" class="undercor">Kuliner</a></p>
<p><a href="#" class="undercor">Olahraga</a></p>
</div>
</div>
<!--end kanan-->
</div>
</div>
<div class="footer">
<div class="jarak">
<p>copyright 2022 Jabalnur - 5025201241</p>
</div>
</div>
</body>
</html>
Berikut adalah kodingan css dari portal berita saya :
body{
background: #f3f3f3;
color: #333;
width: 100%;
font-family: sans-serif;
margin: 0 auto;
}
.header{
width: 90%;
margin: auto;
height: 120px;
line-height: 120px;
background: #e28743;
color: #fff;
}
.content{
width: 90%;
margin: auto;
height: 420px;
padding: 0.1px;
background: #fff;
color: #333;
}
.kiri{
width: 70%;
float: left;
margin: auto;
background: #fff;
height: 420px;
}
.kanan{
width: 30%;
float: left;
margin: auto;
background: #fff;
height: 420px;
}
.border{
border: 2px solid #eab676;
margin-top: 1pc;
padding-bottom: 1pc;
padding-left: 2pc;
padding-right: 2pc;
}
.undercor{
text-decoration: none;
color: #e28743;
}
.footer{
width: 90%;
margin: auto;
height: 40px;
line-height: 40px;
background: #eab676;
color: #fff;
}
.menu{
background-color: #eab676;
height: 50px;
line-height: 50px;
position: relative;
width: 90%;
margin: 0 auto;
padding: 0 auto;
}
.jarak{
padding: 0 2pc;
}
.judul{
text-align: center;
}
.menu ul{
list-style: none;
}
.menu ul li a{
float: left;
width: 70px;
display: block;
text-align: center;
color: #FFF;
text-decoration: none;
margin-left: 4px;
margin-right: 4px;
}
.menu ul li a:hover{
background-color: #eab676;
display: block;
}
Comments
Post a Comment