NRP : 05111740000195
Kelas : PWEB C
Source Code html :
<!DOCTYPE html>
<html>
<head>
<title>Tugas berita Hafidz Firman Asqalany</title>
<link rel="stylesheet" href="index.css"/>
<style type="text/css">
.left { text-align: left;}
.right { text-align: right;}
.center { text-align: center;}
.justify { text-align: justify;}
</style>
</head>
<body>
<div class="header">
<div class="jarak">
<h2>Get Exclusive News In Here</h2>
</div>
</div>
<div class="menu">
<ul>
<Li><a href="#">Home</a></Li>
<Li><a href="#">Trending</a></Li>
<Li><a href="#">Contact</a></Li>
</ul>
</div>
<div class="content">
<div class="jarak">
<!-- kiri -->
<div class="kiri">
<!-- blog -->
<div class="border">
<div class="jarak">
<h3>Amazon Siap Ekspansi ke Indonesia, Janjikan Investasi hingga Rp14 Triliun</h3>
<p class="justify"> <img src="amazon-ilustrasi.jpg" alt="amazon-ilustrasi" height="125px" width="125px" align="left" border="3"/>
Pada 21 September 2018, Vice President Amazon Werner Vogels bersama Menteri Keuangan Indonesia Sri Mulyani Indrawati bertemu Presiden Indonesia Joko Widodo di Istana Kepresidenan.
Pihak Amazon mengungkapkan rencana mereka untuk melakukan investasi di Indonesia dengan besaran hingga Rp14 triliun dalam jangka waktu sepuluh tahun ke depan.
</p>
<button class="btn"><a href="https://id.techinasia.com/amazon-ekspansi-indonesia">Read More</a></button>
</div>
</div>
<!-- end blog-->
<!-- blog -->
<div class="border">
<div class="jarak">
<h3>Miliarder Teknologi Asal Jepang Jadi Turis Luar Angkasa Pertama Space X</h3>
<p class="justify"> <img src="pexels-photo-2.jpg" alt="pexels-photo-2" height="125px" width="125px" align="left" border="3"/>
Perusahan milik Elon Musk, Space X, resmi mengumumkan penumpang pertama yang telah “membeli tiket” terbang ke bulan.
Penumpang tersebut miliarder asal Jepang sekaligus bos bisnis pakaian online Zozotown, Yusaku Maezawa, yang saat ini berusia 42 tahun.
Perjalanan ke bulan ini rencananya akan berlangsung pada tahun 2023 dengan menggunakan roket Space X bernama Big Falcon Rocket (BFR).
</p>
<button class="btn"><a href="https://id.techinasia.com/penumpang-luar-angkasa-pertama-space-x?ref=related&pos=1">Read More</a></button>
</div>
</div>
<!-- end blog-->
<!-- blog -->
<div class="border">
<div class="jarak">
<h3>Facebook Luncurkan Platform Video Facebook Watch secara Global.</h3>
<p class="justify"> <img src="Facebook-Watch-Featured-Image.png" alt="Facebook-Watch-Featured-Image" height="125px" width="125px" align="left" border="3"/>
Pada 29 Agustus 2018, Facebook mengumumkan bahwa layanan streaming video mereka, Facebook Watch, telah diluncurkan secara global. Layanan ini merupakan desain baru tab Video yang sebelumnya telah tersedia di aplikasi Facebook.
Watch pertama kali diumumkan pada 9 Agustus 2017 dan diluncurkan secara berkala di Amerika Serikat selama beberapa minggu setelahnya.
Selain menyiarkan konten video dari halaman-halaman yang kamu ikuti, Watch juga akan menyiarkan konten orisinal buatan kreator dan penerbit yang bermitra dengan Facebook seperti Nas Daily dan Tastemade.
</p>
<button class="btn"><a href="https://id.techinasia.com/facebook-watch-global">Read More</a></button>
</div>
</div>
<!-- end blog-->
</div>
<!--kiri-->
<!-- kanan-->
<div class="kanan">
<div class="jarak">
<h3>Check some other newspage!</h3>
<hr/>
<p><a href="techinasia.com" class="undercor">TechInAsia</a></p>
<p><a href="cnn.com" class="undercor">CNN</a></p>
<p><a href="channelnewsasia.com" class="undercor">ChannelNewsAsia</a></p>
<p><a href="telegraph.co.uk" class="undercor">Telegraph</a></p>
<p><a href="bbc.com/news" class="undercor">BBC News</a></p>
</div>
</div>
<!--kanan-->
</div>
</div>
<div class="footer">
<div class="jarak">
<p>copyright 2018 HafidzAsqalany28 all reserved</p>
</div>
</div>
</body>
</html>
Source Code CSS :
body
{
background:#FFFAF0;
color:#333;
width:100%;
font-family:sans-serif;
margin:0 auto;
}
header
{
width:90%;
margin:auto;
height:auto;
height:12px;
line-height:120px;
background:##00CED1;
color:#fff;
}
.content
{
width:70%;
margin:auto;
height:1000px;
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 #DCDCDC;
margin-top:1pc;
padding-bottom:1pc;
padding-left:2pc;
padding-right:2pc;
}
.undercor
{
text-decoration:none;
}
.footer
{
width:70%
margin:auto;
height:100px;
line-height:40px;
background:#00CED1;
color:#fff;
}
.menu
{
background-color : #00CED1;
height:50px;
line-height:50px;
position:relative;
width:90%;
margin:0 auto;
padding:0 auto;
}
.jarak
{
padding:0 3pc;
}
.menu ul
{
list-style:none;
}
.menu ul li a
{
float:left;
width:70px;
display:block;
text-align:center;
color:#FFF;
text-decoration:none;
}
.menu ul li a:hover
{
background-color:#0000CD;
display:block;
}
Dan ini adalah hasil dari Source Code diatas :
Tugas membuat web berita
BalasHapus