Tugas 4 Membuat Katalog Barang

 Pada tugas kali ini, saya membuat katalog buku.

 Untuk dokumentasi bisa dilihat disini:

Source Code tertera di bawah sebagai berikut

<!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>Katalog Kutu Buku</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Kutu Buku</h1>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<div class="row">
<div class="column">
<img class="produk" src="asset/novel_kata.jpg" alt="Novel Kata">
</div>
<div class="column">
<h2>Kata</h2>
<p class="sinopsis">Perempuan kuat bernama Binta Dineschara Prandipta, Masalah hidup selalu datang menghampiri Binta . Ketika usia ia 5 tahun, ayah nya meninggalkan Binta dan ibunya. Sehingga ibunya mengidap penyakit Skizofrenia, yaitu penyakit kejiwaan yang membuat si penderita tidak bisa membedakan mana yang nyata dan mana yang ada didalam pikirannya.</p>
<p class="harga">Harga: Rp 90.000</p>
<a href="https://api.whatsapp.com/send/?phone=0123456789" class="button">Buy Now</a>
</div>
</div>
<div class="row">
<div class="column">
<img class="produk" src="asset/novel_5cm.jpg" alt="Novel 5cm">
</div>
<div class="column">
<h2>5cm</h2>
<p class="sinopsis">Lima sahabat telah menjalin persahabatan selama tujuh tahun. Mereka adalah Arial yang paling tampan, Riani sebagai satu-satunya wanita dalam kelompok itu, Zafran yang berlagak seperti seorang penyair, Ian yang paling subur badannya, dan Genta yang dianggap sebagai leader dalam kelompok itu. Kegemaran mereka adalah mengeksekusi hal-hal yang tidak mungkin dan mencoba segala hal, mulai dari kafe paling terkenal di Jakarta, sampai nonton layar tancap. Semuanya penggemar film, dari film Hollywood sampai film yang nggak Jelas—kecuali film India karena mereka punya prinsip bahwa semua persoalan di dunia atau masalah pasti ada jalan keluarnya, tetapi bukan dalam bentuk joget.
</p>
<p class="harga">Harga: Rp 100.000</p>
<a href="https://api.whatsapp.com/send/?phone=0123456789" class="button">Buy Now</a>
</div>
</div>
<div class="row">
<div class="column">
<img class="produk" src="asset/novel_this_earth_of_mankind.jpg" alt="Novel 5cm">
</div>
<div class="column">
<h2>This Earth of Mankind</h2>
<p class="sinopsis">Minke adalah seorang siswa muda Jawa dengan kecerdasan dan ambisi yang besar. Hidup setara di antara para penjajah dan terjajah di Jawa abad ke-19, ia berjuang melawan batas-batas striktur kolonial. Ini adalah cintanya untuk Annelies yang memungkinkan dia untuk menemukan kekuatan untuk merangkul dunianya.</p>
<p class="harga">Price: Rp 90.000</p>
<a href="https://api.whatsapp.com/send/?phone=0123456789" class="button">Buy Now</a>
</div>
</div>
<footer>
<p>Copyright 2021 Timotius Wirawan</p>
</footer>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap'); /*Source Sans Pro*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&family=Source+Sans+Pro&display=swap'); /*Playfair Display*/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&family=Playfair+Display&family=Quattrocento+Sans&family=Source+Sans+Pro&display=swap'); /*Oswald*/
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); /*Bebas Neue*/
header
{
background-color: #6eb0fc;
padding: 15px;
margin: 5px;
text-align: center;
}
h1
{
font-family: 'Source Sans Pro', sans-serif;
text-align: center;
color: white;
font-size: 50px;
}
h2
{
font-family: 'Source Sans Pro', sans-serif;
font-size: 40px;
}
.nav
{
background-color: #9ECAFD;
border-radius: 10px;
text-align: center;
}
.nav li
{
font-family: 'Playfair Display', serif;
display: inline;
}
.nav a
{
font-size: 18px;
font-weight: 400;
text-decoration: none;
color: white;
display: inline-block;
padding: 10px;
}
.row
{
width: 75%;
margin: 100px;
display: flex;
border-radius: 10px;
}
.column
{
flex: 50%;
padding: 10px;
}
.produk
{
width: 400px;
float: right;
}
.sinopsis
{
width: 75%;
height: left;
font-family: 'Playfair Display', serif;
text-align: justify;
line-height: 2.5;
}
.harga
{
font-family: 'Bebas Neue', cursive;
font-size: 25px;
}
.button
{
background-color: red;
color: white;
width:80px;
padding: 30px;
font-family: 'Oswald', sans-serif;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
border-radius: 10px;
}
footer
{
padding: 25px;
margin: 5px;
color: white;
background-color: #6eb0fc;
font-family: 'Source Sans Pro', sans-serif;
text-align: center;
}
.judul-about
{
text-align: center;
}
view raw style.css hosted with ❤ by GitHub

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 9 Exception Handling

Exception merupakan subkelas dari kelas java.lang.Throwable. Karena Exception adalah sebuah kelas maka hakikatnya ketika program berjalan dan muncul sebuah bug atau kesalahan maka bug tersebut dapat dianggap sebuah object. Sehingga ketika object ini di tampilkan di layar maka java akan secara otomatis memanggil method toString yang terdapat dalam object bertipe Exception ini. Java memberikan akses kepada developer untuk mengambil object bug yang terjadi ini dengan mekanisme yang dikenal Exception Handling. Exception handling merupakan fasilitas di java yang memberikan flexibilitas kepada developer untuk menangkap bug atau kesalahan yang terjadi ketika program berjalan. Ada 3 keyword penting dalam java dalam hal exception handling : 1. try      Keyword try biasanya digunakan dalam suatu block program. Keyword ini digunakan untuk mencoba menjalankan block program kemudian mengenai sasaran dimana munculnya kesalahan yang ingin diproses. Keyword ini juga harus dipasangka...
Baca selengkapnya