PWEB3 - Membuat Laman Berita
TUGAS 2 - Pemrograman Web
Membuat Laman berita dengan HTML dan CSS
Nama : Bastian Farandy
NRP : 05111740000190
Kelas : Pemrograman Web C
1. Source Code HTML
2. Source Code CSS
Contoh Laman :
Laman yang saya buat :
Membuat Laman berita dengan HTML dan CSS
Nama : Bastian Farandy
NRP : 05111740000190
Kelas : Pemrograman Web C
1. Source Code HTML
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Tampilan dengan HTML dan CSS</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="header">
<div class="jarak">
<h2><p align="center">Tech in Asia</p></h2>
</div>
</div>
<div class="menu">
<ul>
<li><a href="#">NEWS</a></li>
<li><a href="#">JOBS</a></li>
<li><a href="#">COMPANIES</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</div>
<div class="menu">
<ul>
<li><a href="#">CATEGORIES</a></li>
<li><a href="#">MARKETS</a></li>
<li><a href="#">WRITERS</a></li>
</ul>
</div>
<div class="content">
<div class="jarak">
<!-- kiri -->
<div class="kiri">
<!-- blog -->
<div class="border">
<div class="jarak">
<h3>How to run a product team, according to a VP of product</h3>
<p><img width="20%" src="tech1.jpg" alt="foto"></p>
<p>Lessons on collaboration, culture, recruiting, and alignment. <button class="btn">Read More..</button>
</p>
</div>
</div>
<!-- end blog -->
<!-- blog -->
<div class="border">
<div class="jarak">
<h3>In brief: Careem buys Indian bus app Commut, merges assets with rival Shuttl</h3>
<p><img width="20%" src="tech3.jpg" alt="foto"></p>
<p>The Emirati ride-hailing firm is itself said to be enganged in takeover talks with uber. <button class="btn">Read More..</button>
</p>
</div>
</div>
<div class="border">
<div class="jarak">
<h3>Honestbee raised around $46m since series A. Its biggest backer is one of Korea's chaebols</h3>
<p><img width="20%" src="tech2.jpg" alt="foto"></p>
<p>Honestbee's biggest shareholder is LS Corp, which made US$8.5 billion in revenue in 2017. <button class="btn">Read More..</button>
</p>
</div>
</div>
<!-- end blog -->
</div>
<!-- kiri -->
<!-- kanan -->
<div class="kanan">
<div class="jarak">
<h3>Latest Jobs</h3>
<hr/>
<h5><a href="#" class="undercor">Senior NodeJs Developer</a><br/>2359media<br/>SGD 5.5k-6.5k</h5>
<p><h5><a href="#" class="undercor">Sales Representative</a><br/>Avani<br/>IDR 5M-6M</h5></p>
<p><h5><a href="#" class="undercor">Content Writer</a><br/>ADX Asia<br/>IDR 6M-10M</h5></p>
<p><h5><a href="#" class="undercor">UI/UX Designer</a><br/>2359media<br/>SGD 2.3k-3.5k</h5></p>
<p><h5><a href="#" class="undercor">Sales Executive</a><br/>HReasily<br/>THB 15k-40k</h5></p>
<p><h5><a href="#" class="undercor">Sales Support Executive</a><br/>HReasily<br/>THB 15k-40k</h5></p>
<p><h5><a href="#" class="undercor">Java Backend Developer</a><br/>2359media<br/>SGD 3.5k-5.5k</h5></p>
<p><h5><a href="#" class="undercor">Senior UX Designer</a><br/>OnlinePajak<br/>IDR 18M-30M</h5></p>
<p><h5><a href="#" class="undercor">Social Media Specialist</a><br/>UrbanIndo<br/>IDR 6M-9M</h5></p>
<p><h5><a href="#" class="undercor">Senior Software Developer</a><br/>OnlinePajak<br/>IDR 13M-20M</h5></p>
</div>
</div>
<!--kanan -->
</div>
</div>
<div class="footer">
<div class="jarak">
<p align="center">Copyright 2018</p>
</div>
</div>
</body>
</html>
2. Source Code CSS
body {
background: #f3f3f3;
color: #333;
width: 100%;
font-family: sans-serif;
margin: 0 auto;
}
h2 {
align-content: center;
}
.header {
width: 90%;
margin: auto;
height: 120px;
line-height: 120px;
background: #D5D5D5;
color: #000000;
}
.content {
width: 90%;
margin: auto;
height: 890px;
padding: 0.1px;
background: #FFFFFF;
color: #333;
}
.kiri {
width: 70%;
float: left;
margin: auto;
background: #FFFFFF;
height: 550px;
}
.kanan {
width: 30%;
float: left;
margin: auto;
background: #FFFFFF;
color: #333;
height: 550px;
}
.border {
background-color:white;
border:4px;
margin-top: 1pc;
padding-bottom: 1pc;
padding-left: 2pc;
padding-right: 2pc;
}
.undecor{
text-decoration: none;
}
p {
font-family: Arial, Helvetica, sans-serif;
}
.footer{
width: 90%;
margin: auto;
height: 40px;
line-height: 40px;
background: #D5D5D5;
color: #000000;
}
.menu{
background-color: #D5D5D5;
color: black;
height: 50px;
line-height: 50px;
position: relative;
width: 90%;
margin: 0 auto;
padding:0 auto;
}
.jarak{
padding: 0 2pc;
}
.menu ul{
list-style: none;
}
.menu ul li a{
float: left;
width: 25%;
display: block;
text-align: center;
color: #fff;
text-decoration: none;
}
.menu ul li a:hover {
background-color: #74C599
display:block;
}
Contoh Laman :
Laman yang saya buat :
Comments
Post a Comment