Di tugas kali ini saya mendapat tugas untuk membuat sebuah web berita, kami diberi contoh yaitu web www.techinasia.com
berikut hasil dari apa yang telah saya buat
kemudian berikut adalah source code nya :
HTML :
CSS :
Nama : Reza Adipatria Maranatha
NRP : 05111740000186
Kelas : PWEB C
berikut hasil dari apa yang telah saya buat
kemudian berikut adalah source code nya :
HTML :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="inicss.css"/>
</head>
<body>
<div class="header">
<h1>PIAL ROSE NEWS</h1>
</div>
<ul>
<li><a class="active" href="#">News</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Companies</a></li>
<li><a href="#">Events</a></li>
</ul>
<div class = "content" >
<p style="font-family: Big John; font-size:20px;"><img class="newsimg" src="img/feetup.0.jpg"/>Roku will soon let you control its devices and Roku TVs with Google Assistant</p>
<p style="font-family: Slim Joe; font-size:17px;">Users will be able to launch specific streaming apps, control playback (play/pause/etc.), search for content, and “go home” by talking to a nearby Google Home speaker or to Assistant on their mobile phone.This also opens up a lot of potential for incorporating Roku hardware into your Google Assistant routines.</p>
</div>
<div class = "content" >
<p style="font-family: Big John; font-size:20px;"><img class="newsimg" src="img/belkin.jpg"/>Belkin’s Boostup wireless dock can charge three Apple devices at once</p>
<p style="font-family: Slim Joe; font-size:17px;">It’s not quite AirPower, but Belkin’s latest charging dock gives you a convenient way of charging up to three Apple devices simultaneously. The Boostup Wireless Charging Dock has a pair of elevated wireless charging pads to power your iPhone and Apple Watch, and a USB Type-A port for charging a third device, like an AirPods case.</p>
</div>
<div class = "content">
<p style="font-family: Big John; font-size:20px;"><img class="newsimg" src="img/iphonexs.0.0.jpg"/>The iPhone XS Max is outselling the iPhone XS, according to analyst report</p>
<p style="font-family: Slim Joe; font-size:17px;">Kuo’s report says that demand for the iPhone XS Max is higher than expected, and is about three to four times higher than demand for the iPhone XS. Gold and space grey are far more popular than silver when it comes to color options, and the 256GB version is the most popular. The note also says that the 512GB version could face a shortage because of reliance on Samsung as a supplier.</p>
</div>
<div class = "footer">
<ul>
<li><a href="#"><img class = "socialimg" src="img/001-twitter-logo-button.png"/></a></li>
<li><a href="#"><img class = "socialimg" src="img/002-facebook-logo-button.png"/></a></li>
<li><a href="#"><img class = "socialimg" src="img/003-instagram-logo.png"/></a></li>
<li><a href="#"><img class = "socialimg" src="img/004-youtube-symbol.png"/></a></li>
</ul>
</div>
</body>
</html>
CSS :
body{
margin: 0;
}
h1{
margin: 0;
}
ul {
list-style-type: none;
margin: auto;
padding-left: 135px;
overflow: hidden;
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: #f5f5f0;
}
li {
float: left;
padding-right: 10px;
}
li a {
display: block;
color: #7a7a52;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: black;
}
@font-face {
font-family: Slim Joe;
src: url(Slim Joe.otf);
font-family: Big John;
src: url(BIG JOHN.otf);
}
.header{
/* width: 100%; */
height: 250px;
line-height: 120px;
background-image: url("img/Picture1.jpg");
background-repeat: no-repeat;
background-size:cover;
}
.header h1{
font-size: 50px;
color: white;
text-align: center;
line-height: 200px;
}
.active {
background-color: white;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.19);
}
.container{
width: 80%;
margin: auto;
}
.content{
padding-top: 20px;
padding-bottom: 60px;
width: 80%;
margin: auto;
}
.newsimg{
float: left;
width: 30%;
padding-right: 20px;
}
.footer{
width: 100%;
padding-top: 20px;
height: 70px;
text-align: center;
background-color: #333;
}
.footer p{
color: cyan;
}
.footer ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.footer li {
float: right;
}
.footer li a {
display: block;
color: white;
text-align: center;
padding: 5px 5px;
text-decoration: none;
}
.socialimg{
width: 70%;
}
Nama : Reza Adipatria Maranatha
NRP : 05111740000186
Kelas : PWEB C
Comments
Post a Comment