Untuk tugas membuat laman berita, saya mengambil contoh dari webiste techinasia.com
Tampilan awal dari techinasia.com seperti berikut:
Dari tampilan tersebut, saya mencoba membuat laman berita saya sendiri, yang hasilnya bisa dibuka di link berikut, berikut screenshotnya
Source code html nya adalah
Nama: Bobbi Aditya
Kelas : Pemrograman Web C
NRP : 05111740000099
Tampilan awal dari techinasia.com seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>Tech in Asia - Connecting Asia's startup ecosystem</title>
<link rel="stylesheet" href="customtech.css"/>
</head>
<body>
<div class="header">
<div class="menu">
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Job</a></li>
<li><a href="#">Companies</a></li>
<li><a href="#">Event</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Advertise</a></li>
</ul>
</div>
<div class="menu1">
<ul>
<li><a href="#">Categories</a></li>
<li><a href="#">Markets</a></li>
<li><a href="#">Writers</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="jarak">
<!-- kiri -->
<div class="kiri">
<!-- blog -->
<div class="border">
<div class="jarak">
<img src="https://cdn.techinasia.com/wp-content/uploads/2018/09/52689861_m.jpg" style=" float: left; width: 300px;height: 200px;">
<h3>How to run a product team, according to a VP of product</h3>
<p>Lessons on collaboration, culture, recruiting, and alignment.</p>
<button class="btn">Read More..</button>
</div>
</div>
<!-- end blog-->
<!-- blog -->
<div class="border">
<div class="jarak">
<img src="https://cdn.techinasia.com/wp-content/uploads/2018/09/Commut4.jpg" style="float: left;width: 300px;height: 200px;">
<h3>In brief: Careem buys Indian bus app Commut, merges assets with rival Shuttl</h3>
<p>The Emirati ride-hailing firm is itself said to be engaged in takeover talks with Uber</p>
<button class="btn">Read More..</button>
</div>
</div>
<!-- end blog-->
<!-- blog -->
<div class="border">
<div class="jarak">
<img src="https://cdn.techinasia.com/wp-content/uploads/2017/09/honestbee-GOODSHIP-photo.jpg" style="float: left;width: 300px;height: 200px;">
<h3>Honestbee raised around $46m since series A. Its biggest backer is one of Korea's chaebols</h3>
<p>Honestbee's biggest shareholder is LS Corp, which made US$8.5 billion in revenue in 2017.</p>
<button class="btn">Read More..</button>
</div>
</div>
<!-- end blog-->
</div>
<!-- kiri-->
<!-- kanan -->
<div class="kanan">
<div class="jarak">
<h2>What new?</h2>
<img src="https://cdn.techinasia.com/data/images/b0e36d4894beddd46fe4ed064ba209a2.png" style="float: left;width: 34px;height: 34px;">
<h1>Senior NodeJS Developer</h1>
<p>2359media</p>
<img src="https://cdn.techinasia.com/data/images/fbeb63e022e1ec390dcc5a27fb299ba1.png" style="float: left;width: 34px;height: 34px;">
<h1>BackEnd Engineer</h1>
<p>TokoModal</p>
<img src="https://cdn.techinasia.com/data/images/82d9332d395332b4d14ea2cfeab6568c.png" style="float: left;width: 34px;height:34px;">
<h1>Sales Representative</h1>
<p>Avani</p>
<img src="https://cdn.techinasia.com/data/images/910cb8259a82591e05429ab48c8a486b.png" style="float: left;width: 34px;height: 34px;">
<h1>Content Writer</h1>
<p>ADX Asia</p>
<img src="https://cdn.techinasia.com/data/images/174f0be21fd7fc373631e4d120a0bf1f.png" style="float: left;width: 34px;height: 34px;">
<h1>Sales Executive & Sales Support Executive</h1>
<p>HReasily</p>
</div>
<div class="footer" >
<h2>Copyright 2017 masicobacoba</h2>
</div>
</div>
<!-- kanan -->
</div>
</div>
</body>
</html>
body{
background: #FBFAFA;
color: #333;
/* width: 100% ;
height: 100%;*/
font-family: "lato", cursive, sans-serif;
/*margin: 0 auto;*/
}
.content{
width: 88%;
margin: auto;
/*height: 420px;*/
padding: 0.1px;
background: #fff;
color: #333;
}
.header{
margin: 0;
background: #fff;
}
.kiri{
width: 70%;
float: left;
margin: auto;
background: #fff;
/*height: 420px;*/
}
.kanan{
width: 25%;
float: left;
margin: auto;
background: #fff;
/*height: 420px;*/
}
.border{
/*border: 2px solid #000;*/
height: 200px;
margin-top: 1pc;
padding-bottom: 3pc;
padding-right: 2pc;
}
.undecor{
text-decoration: none;
}
.footer{
/*width: 90%;*/
margin: auto;
height: 40px;
line-height: 40px;
background: #F0EEEE;
}
.menu{
background-color: #F0EEEE;
height: 50px;
line-height: 50px;
/*position: relative;*/
/*width: 90%;*/
/*margin: 0;*/
/*padding:0;*/
}
.menu1{
background-color: #fff;
height: 60px;
line-height: 60px;
/*position: relative;*/
/*width: 90%;*/
margin: 0;
/*padding:0 auto;*/
}
.jarak{
padding: 0 2pc;
}
.menu ul{
list-style: none;
}
.menu ul li a{
float: left;
width: 14%;
display: block;
text-align: center;
color: #A4A4A4;
text-decoration: none;
}
.menu ul li a:hover{
background-color: #DDDCDC;
display:block;
}
.menu1 ul{
list-style: none;
}
.menu1 ul li a{
float: left;
width: 14%;
display: block;
text-align: center;
color: #A4A4A4;
text-decoration: none;
}
.menu1 ul li a:hover{
background-color: #FAF9F9;
display:block;
}
.kanan p{
font-size: 12px;
margin: 0;
text-align:center;
margin: 10px;
color:#D9D8D8;
}
h3{
font-family: "Lucida Console";
font-weight: bold;
font-size: 24px;
}
p{
font-family: "Verdana";
font-size: 14px;
font-weight: lighter;
color: #ADACAC;
}
h1{
font-family: "Verdana";
font-size: 13px;
font-weight: bold;
text-align: center;
padding-top: 10px;
}
h2{
font-family: "Lucida Console";
font-weight: lighter;
font-size: 12px;
}
Nama: Bobbi Aditya
Kelas : Pemrograman Web C
NRP : 05111740000099
Comments
Post a Comment