Tugas Membuat Portal Berita
Nama : Khariza Azmi Alfajira Hisyam
NRP : 5025201044
Kelas : Pemrograman Web A
Tahun : 2022/2023
Tampilan Website
Code
1. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<title>Portal Berita</title>
</head>
<body>
<div class="header">
<div class="logo">LIPUTAN NETIZEN</div>
<div class="search">
<input type="text" placeholder="Search.." />
<button type="submit"><i class="fa fa-search"></i></button>
</div>
</div>
<div class="menu">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#enam">Enam+</a></li>
<li><a href="#crypto">Crypto</a></li>
<li><a href="#saham">Saham</a></li>
<li><a href="#bisnis">Bisnis</a></li>
<li><a href="#bola">Bola</a></li>
<li><a href="#showbiz">Showbiz</a></li>
<li><a href="#tekno">Tekno</a></li>
<li><a href="#foto">Foto</a></li>
<li><a href="#hot">Hot</a></li>
<li><a href="#cek">Cek Fakta</a></li>
<li><a href="#islami">Islami</a></li>
<li><a href="#citizen">Citizen6</a></li>
<li><a href="#lainnya">Lainnya</a></li>
</ul>
</div>
<div class="content">
<div class="jarak">
<div class="kiri">
<div class="border">
<div class="jarak">
<img
class="img2"
src="https://akcdn.detik.net.id/visual/2021/09/14/ilustrasi-hacker-4_169.jpeg?w=650"
alt="hacker"
/>
<h3>Indonesia Terancam Hacker</h3>
<p>
Hacker Bjorka membuat heboh beberapa hari terakhir. Sosoknya begitu misterius namun
diyakini berasal dari Indonesia.
</p>
<button class="btn">Read More...</button>
</div>
</div>
<div class="border">
<div class="jarak">
<img
class="img1"
src="https://imgx.parapuan.co/crop/0x0:0x0/945x630/photo/2022/02/22/ratu-elizabeth-positif-covid-19-20220222081032.jpg"
alt="Ratu Elizabeth"
/>
<h3>Ratu Elizabeth II Meninggal Dunia</h3>
<p>
Raja Charles III bersama saudaranya, Pangeran Andrew, Edward serta Putri Anne
melakukan penjagaan di sekitar peti Ratu Elizabeth II.
</p>
<button class="btn">Read More...</button>
</div>
</div>
</div>
</div>
<div class="kanan">
<div class="jarak">
<h3>Topik Populer</h3>
<hr />
<br />
<p><a href="#" class="undecor">BLT</a></p>
<br />
<p><a href="#" class="undecor">Bjorka</a></p>
<br />
<p><a href="#" class="undecor">Ratu Elizabeth Meninggal</a></p>
<br />
<p><a href="#" class="undecor">Ferdy Sambo</a></p>
<br />
<p><a href="#" class="undecor">English Premier League</a></p>
<br />
</div>
</div>
</div>
</body>
<footer>
<div class="footer">
<div class="jarak">
<p>copyright 2022 Khariza Azmi reserved</p>
</div>
</div>
</footer>
</html>
2. CSS
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
.header {
position: relative;
background-color: #abdbe3;
padding-left: 20px;
margin-bottom: 10px;
padding-top: 20px;
padding-bottom: 20px;
overflow: hidden;
padding-right: 20px;
}
.header .search {
float: right;
}
.header .search button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.logo {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
font-size: 20px;
font-weight: 900;
}
.header input[type='text'] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #2596be;
position: relative;
justify-content: space-between;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.content {
width: 90%;
margin: auto;
height: 480px;
padding: 0.1px;
background: #fff;
color: #000;
}
.kiri {
width: 70%;
float: left;
margin: auto;
background: #fff;
height: 420px;
}
.border {
border: 2px solid #2596be;
margin-top: 1pc;
padding-bottom: 1pc;
padding-left: 2pc;
padding-right: 2pc;
}
.jarak {
padding: 0 2pc;
}
.kanan {
width: 30%;
margin: auto;
float: left;
background: #fff;
height: 420px;
padding-top: 10px;
}
.undecor {
text-decoration: none;
margin: auto;
}
footer .footer {
width: 100%;
margin: auto;
height: 40px;
line-height: 40px;
background: #2596be;
color: #fff;
position: absolute;
text-align: center;
}
.img1 {
padding-top: 10px;
width: 150px;
height: 100px;
}
.img2 {
padding-top: 10px;
width: 150px;
height: 100px;
}
Komentar
Posting Komentar