Kali ini saya membuat laman berita menggunakan HTML dan CSS, sumber berita saya ambil dari "news.detik.com". Berikut adalah Source Codenya:
CSS:
HTML:
Berikut adalah hasil akhirnya.
Terima kasih, telah membaca.
CSS:
body{
background: rgb(236,236,236);
}
.bg{
background: rgb(236,236,236);
color: #333;
width: 75%;
font-family: sans-serif;
margin: 0 auto;
}
.header{
width: 100%;
margin: 0 auto;
font-size: 45px;
}
.menu{
background-color: rgb(32,64,154);
height: 40px;
line-height: 40px;
position: relative;
width: 100%;
margin: auto;
padding: 0;
color: #fff;
}
.menu ul {
list-style: none;
color: #fff;
}
.menu ul li{
float: left;
width: 70px;
display: block;
text-align: center;
color: #fff;
text-decoration: none;
color: #fff;
}
.menu ul li a{
color: #fff;
text-decoration: none;
font-weight: bold;
}
.menu ul li a:hover{
background-color: rgb(48, 89, 211);
display: block;
color: #fff;
text-decoration: none;
}
#jarak{
padding: 10px;
}
.hot{
width: 65%;
margin: auto;
float: left;
background: rgb(27, 54, 130);
height: auto;
color: #fff;
padding: 10px;
}
.hot h1 a{
text-decoration: none;
color: #fff;
}
.hot h1 a:hover{
color: rgb(239, 102, 37);
}
.hot img{
float: left;
width: 65%;
padding-right: 15px;
}
.hot h4{
float: left;
font-size: 15px;
width: 30%;
}
.hot ul a{
text-decoration: none;
color: #fff;
}
.tanggal{
color: rgb(192, 192, 192);
font-size: 13px;
}
.fokushead{
width: 32%;
float: right;
margin: auto;
background: rgb(27, 54, 130);
height: auto;
}
.fokushead h3{
color: #fff;
padding: 10px;
}
.fokus{
width: 32%;
float: right;
margin: auto;
background: #fff;
height: auto;
}
.fokus p a{
text-decoration: none;
color: #000;
}
#jarak2{
background: rgb(236,236,236);
height: 13px;
width: 100%;
float: left;
}
.newsfhead{
width: 65%;
margin: auto;
float: left;
background: rgb(27, 54, 130);
height: auto;
color: #fff;
padding: 10px;
}
.newsfhead ul img{
width: 150px;
float: left;
padding-right: 10px;
}
.newsfhead a{
text-decoration: none;
color: rgb(255, 255, 0);
}
.footer{
width: 100%;
margin: auto;
height: 40px;
background: rgb(27, 54, 130);
color: #fff;
float: left;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Coba News: Berita Teraktual</title>
<link rel="stylesheet" type="text/css" href="news.css">
</head>
<body>
<div class="bg">
<div class="header">
<h2><span style="color: rgb(33,67,150);">coba</span><span style="color: rgb(239, 102, 37);">News</span></h2>
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Berita</a></li>
<li><a href="#">Daerah</a></li>
<li style="width: 108px;"><a href="#">Internasional</a></li>
<li><a href="#">Fokus</a></li>
<li><a href="#">Kolom</a></li>
<li style="width: 100px;"><a href="#">Blak blakan</a></li>
<li style="width: 100px;"><a href="#">Pro Kontra</a></li>
<li style="width: 85px;"><a href="#">Infografis</a></li>
<li><a href="#">Foto</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Indeks</a></li>
</ul>
</div>
<div id="jarak"></div>
<div class="hot">
<div class="tanggal">Selasa, 25 September 2018, 10.09 WIB</div>
<h1><a href="#">Perempuan yang Terobos Konvoi Jokowi Acungkan Jari Tengah</a></h1>
<img src="5abe470a-49d1-4a25-8a22-3ef63aa0c809_43.jpeg">
<p>Seorang perempuan diamankan karena menerobos konvoi iring-iringan Jokowi. Perempuan itu dikabarkan sempat mengacungkan jari tengah.</p>
<br>
<hr>
<h4 style="color: rgb(239,102,37);">Berita Terkait</h4>
<ul><a href="#">Jokowi VS Prabowo di Bidang Hukum dan pemberantasan korupsi</a></ul>
<ul><a href="#">Perempuan Diamankan karena Terobos Konvoi Jokowi di Jaktim</a></ul>
</div>
<div class="fokushead">
<h3>FOKUS</h3>
</div>
<div class="fokus">
<p><a href="#"><span style="font-size: 20px; color: rgb(239, 102, 37);">1 </span> Suporter Persija Tewas Dikeroyok</a></p>
<p><a href="#"><span style="font-size: 20px; color: rgb(239, 102, 37);">2 </span> Mencari Pengganti Sandiaga</a></p>
<p><a href="#"><span style="font-size: 20px; color: rgb(239, 102, 37);">3 </span> Karen Agustiawan Ditangkap</a></p>
<p><a href="#"><span style="font-size: 20px; color: rgb(239, 102, 37);">4 </span> Mosaik Dunia Islam</a></p>
<p><a href="#"><span style="font-size: 20px; color: rgb(239, 102, 37);">5 </span> Masa Kampanye Damai</a></p>
<p><a href="#"><span style="font-size: 20px; color: rgb(239, 102, 37);">6 </span> MA Izinkan Eks Koruptor Nyaleg</a></p>
<p><a href="#"><span style="font-size: 20px; color: rgb(239, 102, 37);">7 </span> Misteri Tewasnya Janda Cantik</a></p>
<p><a href="#"><span style="font-size: 20px; color: rgb(239, 102, 37);">8 </span> Abu Tours Cuci Rp 1,2 T</a></p>
<p><a href="#"><span style="font-size: 20px; color: rgb(239, 102, 37);">9 </span> Sel Mewah Novanto di Sukamiskin</a></p>
</div>
<div id="jarak2"></div>
<div class="newsfhead">
<h3>News Feed</h3>
<hr>
<ul>
<img src="2c25d51c-edfd-4460-af97-5b0d177ec1b4_11.jpeg">
<h2><a href="#">Berdalih Bisa Mengobati, Pria Ngaku Dukun di Blitar Tipu Pasiennya</a></h2>
<div class="tanggal">COBANEWS| Selasa 25 September 2018, 10.02 WIB</div>
<p>Berdalih bisa mengobati, seorang pria yang mengaku sebagai dukun di Blitar menipu pasiennya.</p>
</ul>
<ul>
<img src="2415a642-ec33-4831-81f3-c76cb82db444_11.jpeg">
<h2><a href="#">Jokowi dan Prabowo di Bidang Hukum dan Pemberantasan Korupsi</a></h2>
<div class="tanggal">COBANEWS| Selasa 25 September 2018, 10.00 WIB</div>
<p>Kedua pasangan capres-cawapres telah menyusun visi dan misi untuk Pilpres 2019. Keduanya telah menyerahkan visi dan misi mereka ke KPU.</p>
</ul>
<ul>
<img src="971abdb6-eaff-407a-b0c0-e5ca574d66bf_11.jpeg">
<h2><a href="#">Perempuan Diamankan karena Terobos Konvoi Jokowi di Jaktim</a></h2>
<div class="tanggal">COBANEWS| Selasa 25 September 2018, 09.59 WIB</div>
<p>Seorang perempuan menerobos rangkaian iring-iringan Presiden Joko Widodo di Jakarta Timur. Perempuan itu lalu diamankan polisi.</p>
</ul>
<ul>
<img src="188d6155-051a-44eb-8f0c-aee0f79f16c1_11.jpeg">
<h2><a href="#">Gerindra: Tokoh-tokoh Berkelas Kubu Jokowi Akan Dukung Prabowo</a></h2>
<div class="tanggal">COBANEWS| Selasa 25 September 2018, 09.59 WIB</div>
<p>"Pertandingan ini marathon, bukan sprint, tak perlu buru-buru, nanti menghabiskan stamina. Kita akan keluarkan satu persatu sebagai kejutan untuk kubu sebelah"</p>
</ul>
</div>
<div id="jarak2"></div>
<div class="footer">
<p>Copyright @ 2018 PWEB C all reserved</p>
</div>
</div>
</body>
</html>
Berikut adalah hasil akhirnya.
Terima kasih, telah membaca.
Komentar
Posting Komentar