Tugas Pweb C - Membuat Laman Berita
Pada kesempatan kali ini saya telah membuat halaman web berita menggunakan HTML dan CSS.
Nama : Ifta Jihan N
NRP : 05111740000034
Kelas : PWeb C
Saya mengambil contoh dari web techinasia.com dengan sedikit perubahan yang saya buat.
Berikut source codenya:
1. HTML
<!DOCTYPE html>
<html>
<head>
<title>World News</title>
<link rel="stylesheet" href="cnews.css"/>
<link rel="icon" type="image/png" href="icon.png">
</head>
<body>
<div class="header">
<div class="jarak">
<h1 id="fontheader">World News</h1>
<h2 id="fontheader2">Sign in</h2>
</div>
</div>
<div class="menu">
<ul>
<li><a class="pilih" 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 <i class="down"> </i></a></li>
<li><a href="#">Markets <i class="down"></i></a></li>
<li><a href="#">Writers <i class="down"></i></a></li>
</ul>
</div>
<div class="isi">
<div class="jarak">
<div class="kiri">
<div class="border">
<div class="jarak">
<img src="silicon valley.png" style=" float: left; width: 300px;height: 200px;padding-right: 20px;">
<h1>How one Silicon Valley investor helps US startups enter Japan</h1>
<p>Hire the right country manager.</p>
<button class="btn">Read More..</button>
</div>
</div>
<div class="border">
<div class="jarak">
<img src="sg.png" style="float: left;width: 300px;height: 200px;padding-right: 20px;">
<h1>Singapore introduces new rules for bike-share users, fines for abusers</h1>
<p>The rules are part of the Land Transport Authority’s new licensing regime for bike-sharing services.</p>
<button class="btn">Read More..</button>
</div>
</div>
<div class="border">
<div class="jarak">
<img src="oyo.png" style="float: left;width: 300px;height: 200px;padding-right: 20px;">
<h1>In brief: Oyo Rooms books $1b from Sequoia, Softbank, and others</h1>
<p>The capital will fuel the Indian startup’s international expansion.</p>
<button class="btn">Read More..</button>
</div>
</div>
</div>
<div class="kanan">
<div class="jarak">
<h2 style="text-align: left; font-size: 14px;">Latest Jobs</h2>
<img src="seb.png" style="float: left;width: 35px;height: 35px;">
<h3>Software Engineer-Backend</h3>
<p>Ritase</p>
<img src="gd.png" style="float: left;width: 35px;height: 35px;">
<h3>Graphic Designer</h3>
<p>MetroResidences</p>
<img src="snd.png" style="float: left;width: 35px;height:35px;">
<h3>Senior NodeJS Developer</h3>
<p>2359media</p>
<img src="it.png" style="float: left;width: 35px;height: 35px;">
<h3>IT Programmer</h3>
<p>Virtues International</p>
</div>
<div class="footer" >
<h2>Copyright 2017 css</h2>
</div>
</div>
</div>
</div>
</body>
</html>
2. CSS
body{
background: white;
width: 100% ;
font-family: sans-serif;
margin: 0 auto;
}
.header{
margin: auto;
width: 90%;
height: 80px;
line-height: 8px;
background-color: darkcyan;
}
#fontheader{
float: left;
font-size: 50px;
font-family: sans-serif;
color: white;
}
#fontheader2{
float: right;
font-size: 20px;
font-family: sans-serif;
color: white;
}
.pilih{
background-color: white;
}
.menu{
background-color: lavender;
height: 40px;
line-height: 40px;
position: relative;
width: 90%;
margin: auto;
padding:0;
}
.menu ul{
list-style-type: none;
position: sticky;
position: -webkit-sticky;
}
.menu ul li a{
float: left;
display: block;
color: black;
padding: 0px 20px;
text-decoration: none;
font-family: sans-serif;
}
.menu ul li a:hover{
display: block;
background-color: gainsboro;
}
i {
border: solid black;
border-width: 0 3px 5px 0;
display: inline-block;
padding: 3px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.menu1{
background-color: white;
height: 60px;
line-height: 60px;
margin: 0;
}
.menu1 ul{
list-style: none;
}
.menu1 ul li a{
float: left;
width: 14%;
display: block;
text-align: center;
color: grey;
text-decoration: none;
font-family: sans-serif;
}
.menu1 ul li a:hover{
background-color: white;
display:block;
}
.jarak{
padding: 0 2pc;
}
.isi{
width: 97%;
margin: auto;
background: #fff;
color: #333;
}
.kiri{
width: 70%;
float: left;
margin: auto;
background: #fff;
}
.kanan{
width: 25%;
float: left;
margin: auto;
background: #fff;
}
.border{
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;
}
.kanan p{
font-size: 12px;
margin: 0;
text-align:center;
margin: 10px;
color:#E0E0DE;
}
h1{
font-family: "sans-serif";
font-weight: bold;
font-size: 24px;
}
p{
font-family: "Verdana";
font-size: 14px;
font-weight: lighter;
color: #B2B2B2;
}
h3{
font-family: "Verdana";
font-size: 13px;
font-weight: bold;
text-align: center;
padding-top: 10px;
}
h2{
font-family: "Arial";
font-weight: lighter;
text-align: center;
font-size: 13px;
}
Berikut hasilnya:
Terimakasih
Comments
Post a Comment