Tugas 4 PWEB B

-

Website Katalog Barang

Nama    : Stefanus Albert Kosim
NRP      : 05111940000096
Kelas     : PWEB-B

Pada kesempatan ini, saya akan menuliskan hasil dari tugas yang saya kerjakan yaitu membuat website katalog barang. Website ini dibuat dengan menggunakan html dan css murni. Adapun konten dari website ini dibuat dengan align center secara keseluruhan. Tampilan dari website adalah sebagai berikut
Website dihost menggunakan Github Pages, bisa dikunjungi disini
Berikut adalah source code dari website ini

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="stylesheet.css">
<title>yanzkosim Store</title>
</head>
<body>
<div class="header">
<div class="header-title">
<h1>yanzkosim Store</h1>
</div>
<ul class="header-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="content-wrapper">
<div class="card">
<div class="content">
<img class="content-image" src="images/item1.jpg">
</div>
<div class="content-text">
<h2 class="book-title">Mieruko-chan, Vol. 1</h2>
<h3 class="book-author">Tomoki Izumi</h3>
<p class="description">
A normal girl was living a normal life-until she wasn't.
One day, she could see...everything. What's a girl to do when hideous monsters appear no matter which way she turns?
And on top of that, nobody else can see them!
Obviously, there's only one thing that makes sense-ignore them.
Kinda hard to put theory into practice, though, when
the ghosts know she's watching...
</p>
<div class="beli">
<a href="https://api.whatsapp.com/send/?phone=123456789" class="button">Buy Now</a>
<p>Rp 150.000</p>
</div>
</div>
</div>
<div class="card">
<div class="content">
<img class="content-image" src="images/item2.jpg">
</div>
<div class="content-text">
<h2 class="book-title">Mieruko-chan, Vol. 2</h2>
<h3 class="book-author">Tomoki Izumi</h3>
<p class="description">
Salt, useless. Prayer beads, no dice.
Disinfectant—mildly effective.
Miko’s fruitless attempts at warding off horrific spirits leave her with one option...keep pretending these grotesque specters don’t exist.
But Miko hasn’t given up yet! One day, she’ll be free.
Until then, she just has to survive changing-room phantoms
and ghost-infested tunnels and…a girl named Yuria?
</p>
<div class="beli">
<a href="https://api.whatsapp.com/send/?phone=123456789" class="button">Buy Now</a>
<p>Rp 150.000</p>
</div>
</div>
</div>
<div class="card">
<div class="content">
<img class="content-image" src="images/item3.jpg">
</div>
<div class="content-text">
<h2 class="book-title">Mieruko-chan, Vol. 3</h2>
<h3 class="book-author">Tomoki Izumi</h3>
<p class="description">
To see…or not to see? Until Miko met Yuria, the pretend-not-to-see ghosts plan seemed like the best
course of action. But the new substitute teacher is that creepy guy from the park—the one haunted
by a bunch of ghost cats!
It can’t be a coincidence that Hana’s life aura starts draining whenever he’s in the room.
Can Miko really leave her best friend to fend for herself against enemies she can’t see…?
</p>
<div class="beli">
<a href="https://api.whatsapp.com/send/?phone=123456789" class="button">Buy Now</a>
<p>Rp 150.000</p>
</div>
</div>
</div>
<div class="card">
<div class="content">
<img class="content-image" src="images/item4.jpg">
</div>
<div class="content-text">
<h2 class="book-title">Mieruko-chan, Vol. 4</h2>
<h3 class="book-author">Tomoki Izumi</h3>
<p class="description">
A normal girl was living a normal life-until she wasn't.
One day, she could see...everything. What's a girl to do when hideous monsters appear no matter which way she turns?
And on top of that, nobody else can see them!
Obviously, there's only one thing that makes sense-ignore them.
Kinda hard to put theory into practice, though, when
the ghosts know she's watching...
</p>
<div class="beli">
<a href="https://api.whatsapp.com/send/?phone=123456789" class="button">Buy Now</a>
<p>Rp 150.000</p>
</div>
</div>
</div>
</div>
<div class="footer">
<p>Copyright 2021 Stefanus Albert</p>
</div>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

CSS :
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.header {
top: 0;
margin-top: 50px;
margin-bottom: 10px;
}
h1 {
text-align: center;
font-size: 2.3em;
}
.header-menu{
list-style: none;
margin: 0;
padding :0;
text-align: center;
}
.header-menu li{
display: inline;
}
.header-menu a{
display: inline-block;
color: black;
padding: 10px;
}
.card {
margin-top: 50px;
display: flex;
margin-bottom: 100px;
}
.content {
flex: 50%;
padding: 10px;
}
.content-text {
flex: 50%;
padding: 10px;
margin-left: 10px;
}
.content-image {
width: 300px;
height: 400px;
float: right;
}
.book-title {
font-size: 30px;
margin-bottom: 15px;
}
.book-author {
font-size: 24px;
font-weight: 700;
margin-top: 15px;
}
.description {
height: left;
text-align: justify;
word-wrap: break-word;
line-height: 1.5;
margin-right: 220px;
}
.beli {
display: flex;
}
.beli p {
margin-left: 15px;
}
.button {
cursor: pointer;
background-color: black;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
display: inline-block;
padding: 15px 25px;
}
.footer {
text-align: center;
}
view raw stylesheet.css hosted with ❤ by GitHub

Komentar

Posting Komentar

Postingan populer dari blog ini

MPPL A - Tugas 1

-
Gambar
Membangun Kompetensi untuk Kebutuhan Proyek Nama         : Stefanus Albert Kosim NRP        : 05111940000096 Kelas      : MPPL A Pada kesempatan ini, saya akan menuliskan hasil dari tugas MPPL yaitu bergabung ke situs proyek, mencari sebuah proyek yang diinginkan, kemudian membuat daftar skill yang diperlukan serta penguasaan skill tersebut. 1. Bergabung ke Situs Proyek Saya bergabung ke beberapa situs proyek, salah satu diantaranya adalah  https://projects.co.id/ . Registrasi di situs ini lebih mudah karena tidak diperlukan pekerjaan spesifik yang dimiliki saat mendaftar. Username dari akun saya adalah yanzkosim. Tampilan home setelah berhasil melakukan registrasi dan telah login dengan username yanzkosim 2. Temukan proyek yang sesuai Karena saya tertarik dengan Android Programming, maka saya memilih proyek yang berhubungan dengan Android Link menuju proyek bisa diklik disini Preview proyek yang dipilih 3. Membuat skill yang h...
Baca selengkapnya

MPPL A - Tugas 2

-
Tugas 2 Identifikasi Aplikasi Moka POS Nama     : Stefanus Albert Kosim NRP         : 05111940000096 Kelas      : MPPL A 2021 1. Identification of the Problems Kesulitan dalam mencatat dan menelusuri riwayat transaksi Dibutuhkan kalkulasi serta yang cepat dan benar Kesulitan mencatat stok dan harga produk Ramainya uang digital digunakan Kesulitan ketika transaksi yang terjadi sangat banyak 2. Identification of the Scope Scope dari aplikasi Moka POS adalah UMKM di seluruh Indonesia 3. Identification of the Deliverables Dapat berupa aplikasi web atau berupa hardware sekaligus softwarenya 4. Identification of the Stakeholders Pemilik usaha Pemilik startup Perusahaan pembayaran digital 5. Development of Business Case Aplikasi dapat menyimpan riwayat transaksi secara otomatis Penjual dapat mencari transaksi tertentu Penjual dapat melihat detail transaksi Aplikasi dapat menghitung total pembayaran di transaksi secara otomatis Aplikasi dap...
Baca selengkapnya

Tugas 1 PWEB-B (CV)

-
Gambar
Nama     : Stefanus Albert Kosim NRP        : 05111940000096 Kelas      : PWEB-B Pada kesempatan ini, saya akan menuliskan hasil dari tugas yang saya kerjakan. Dalam membuat CV ini, saya menggunakan pure HTML dan CSS dan dihosting menggunakan github Untuk CV dapat diakses disini Preview :  HTML :  CSS :
Baca selengkapnya