Tugas 2 PWeb
Ridzki Raihan Alfaza
Sumber berita: Kompas.com
5025201178
PWeb C
Tugas 2 PWeb
Pada tugas ke-2 kelas Pemograman Web saya telah membuat layout web menggunakan HTML dan CSS
Source code:
index.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" />
<title>Alffaza</title>
<link rel="stylesheet" href="style.css" />
<script src="functions.js"></script>
</head>
<body>
<div class="page-wrapper">
<div class="header">
<div class="title-wrapper">
<h1>Web Berita</h1>
</div>
<div class="navbar">
<ul class="navbar-buttons">
<li class="navbar-button">Home</li>
<li class="navbar-button">About</li>
<li class="navbar-button">Blog</li>
<li class="navbar-button">Contact</li>
</ul>
</div>
</div>
<div class="main-content">
<div class="news">
<div class="single-news">
<h2 class="news-title">
Ikrar Setia NKRI, Terpidana Teroris Asal Kalbar Terima Pembebasan
Bersyarat
</h2>
<p class="news-content">
PN alias SL, terpidana kasus terorisme asal Kalimantan Barat
(Kalbar) menerima pembebasan bersyarat setelah dinyatakan bebas
paham radikal dan menyatakan diri ikrar setia Negara Kesatuan
Republik Indonesia (NKRI)...
</p>
<button>Read more...</button>
</div>
<div class="single-news">
<h2 class="news-title">
Profil Eltinus Omaleng, Bupati Mimika yang Dijemput Paksa KPK
</h2>
<p class="news-content">
Bupati Mimika, Eltinus Omaleng, dijemput paksa oleh Komisi
Pemberantasan Korupsi (KPK). Sebelumnya, Eltinus sudah ditetapkan
sebagai tersangka oleh KPK sejak 20 Juli 2022. Atas penetapan
status itu, dia mengajukan gugatan praperadilan ke Pengadilan
Negeri Jakarta Selatan (PN Jaksel)...
</p>
<button>Read more...</button>
</div>
</div>
<div class="category-sidebar">
<div class="category-sidebar-header">
<h2>CATEGORY</h2>
</div>
<div class="category-sidebar-content">
<ul>
<li>TEKNOLOGI</li>
<li>REGIONAL</li>
<li>EDUKASI</li>
<li>LIFESTYLE</li>
<li>SAINS</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<div class="footer-content">
<p>footer</p>
</div>
</div>
</div>
</body>
</html>
style.css:
body {
background-color: lightgray;
font-family: Arial, Helvetica, sans-serif;
}
.page-wrapper {
margin: 1rem;
}
.title-wrapper {
background-color: green;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 2rem;
color: white;
}
.navbar {
background-color: lightgreen;
padding: 1rem;
margin-top: 0.5rem;
padding-left: 0;
}
.navbar-buttons {
list-style-type: none;
color: white;
margin: 0;
}
.navbar-button {
display: inline;
margin-right: 2rem;
}
.main-content {
background-color: white;
padding: 1rem;
display: grid;
grid-template-columns: 75% 25%;
}
.news {
grid-column: 1;
margin-right: 1rem;
}
.single-news {
border: solid;
border-color: lightgreen;
margin-bottom: 1rem;
padding: 1rem;
font-size: 24px;
}
.category-sidebar {
grid-column: 2;
}
.category-sidebar-header {
border-bottom: solid;
border-color: lightgreen;
}
.category-sidebar-content > ul {
list-style-type: none;
margin-left: -2rem;
}
.category-sidebar-content > ul > li {
color: blue;
margin-bottom: 0.5rem;
}
.footer {
background-color: green;
padding: 0.25rem;
text-align: center;
color: white;
}
Comments
Post a Comment