Skip to main content

Simple Catalogue

 Sup Daijoubu?

Pada kesempatan kali ini saya akan membuat sebuah katalog simpel menggunakan HTML + CSS, untuk tampilannya adalah sebagai berikut :


Untuk membuat tampilan seperti di atas tentunya diperlukan file HTML & CSS (you dont say :v), berikut adalah file html & css :
1. 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">
<link rel="stylesheet" href="style.css">
<title>Wall.in</title>
</head>
<body>
<div class="header">
<div class="header-title">
<h1>Wallpaper 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="img/Beebop.PNG">
</div>
<div class="content-text">
<h2 class="judul-barang">Wallpaper Cowboy Bebop</h2>
<p class="description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor
</p>
<h3 class="harga">Rp 150.000</h3>
<P><a href="" class="button">Buy Now</a></P>
</div>
</div>
<div class="card">
<div class="content">
<img class="content-image" src="img/Killua.jpg">
</div>
<div class="content-text">
<h2 class="judul-barang">Wallpaper Killua</h2>
<p class="description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor
<h3 class="harga">Rp 120.000</h3>
<P><a href="" class="button">Buy Now</a></P>
</div>
</div>
<div class="card">
<div class="content">
<img class="content-image" src="img/Moon.jpg">
</div>
<div class="content-text">
<h2 class="judul-barang">Wallpaper Spirited Away Moon Exclusive</h2>
<p class="description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor
<h3 class="harga">Rp 100.000</h3>
<P><a href="" class="button">Buy Now</a></P>
</div>
</div>
</div>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

2. style.css

body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.header {
background-color: #fff;
color: black;
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: 600px;
height: 350px;
float: right;
}
.judul-barang {
font-size: 30px;
margin-bottom: 15px;
}
.harga {
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: #152d35;
border-radius: 20px;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
display: inline-block;
margin-top: 20px;
padding: 15px 20px 15px 20px;
}
.footer {
text-align: center;
display: flex;
flex-direction: column;
background-color: #152d35;
color: white;
padding: 1rem;
align-items: center;
}
view raw style.css hosted with ❤ by GitHub


Untuk website dapat diakses pada link iniWall.in 

Sekian yang dapat saya sampaikan mohon maaf apabila ada kesalahan dalam penulisan





Comments

Post a Comment

Popular posts from this blog

Ticket Machine

 SUP Daijoubu ? Pada kesempatan kali ini Karu akan mencoba membuat project sederhana untuk E-Ticket Machine,  untuk projectnya sendiri Karu akan mencoba menggunakan salah satu fungsi Java yaitu java.util.Scanner . Di dalam project E-Ticket Machine nanti akan terdapat 2 buah Class  yaitu : 1. Ticketing Class  Ticketing ini berfungsi menyimpan beragam fungsi seperti :   >    getPrice(),  fungsi ini berguna untuk menyetor harga E-Ticket agar dapat ditampilkan. >     getBalance(), fungsi ini berguna untuk mengembalikan nilai saldo yang dimiliki oleh pengguna E-Ticket Machine. >      topUp() , fungsi ini berguna untuk menambahkan nilai saldo pengguna E-Ticket Machine   apabila melakukan pengisian saldo. >      printTicket(), fungsi ini berguna untuk menampilkan Tiket yang sudah dibeli oleh   pengguna E-Ticket Machine. 2. TesTicketing      Class  TesTicketing ini...
1 comment
Read more

Auction System

              Yuhuuuu  Pada kesempatan kali ini penulis ingin membuat auction system sederhana yang melibatkan penggunaan Array pada Java. Di dalam auction system nanti ada beberapa kelas yaitu sebagai berikut : Class Auction, kelas ini adalah kelas utama dalam Auction System. Di dalam kelas inilah proses lelang akan terjadi seperti memasukkan nama barang yang akan dilelang, menaruh tawaran terhadap barang lelangan, menunjukkan hasil sementara atau akhir pelelangan dan juga menutup acara lelang itu sendiri. Proses-proses tadi akan dibuatkan fungsinya masing-masing Class Lot, kelas ini akan menunjukkan sudah ada atau tidaknya penawaran yang masuk untuk sebuah barang yang dilelang Class Bid, kelas ini akan menyimpan tawaran-tawaran yang masuk serta membandingkan siapakah penawar tertinggi untuk suatu barang yang dilelang Class Person, kelas ini akan menyimpan data nama orang yang ikut serta dalam pelalangan Untuk mengetahui hubungan antar kelas...
Post a Comment
Read more

Tambah Buku dan Validasi Form dengan JQuery

Sup Daijoubu? Pos kali ini adalah dokumentasi dari tugas ke 7 mengenai JQuery, terdapat 2 tugas yaitu tugas untuk menambahkan list buku dan juga tugas untuk membuat form validasi menggunakan JQuery. 1. Tambah Buku Tugas membuat sebuah halaman yang dapat menambahkan buku ke dalam sebuah list yang dapat dilihat menggunakan HTML, CSS dan JQuery. Untuk tampilannya sebagai berikut : Source code untuk tampilan di atas adalah sebagai berikut : 2. Form Validation Tugas membuat sebuah halaman yang berfungsi sebagai pengisian form dimana semua kolom yang ada harus terisi dan akan menampilkan pesan jika ada kolom yang belum terisi. Halaman akan dibuat dengan HTML, CSS, dan JQuery. Untuk tampilannya sebagai berikut :     - Tampilan Awal     - Tampilan saat terdapat kolom yang kosong : Source code untuk tampilan di atas :     - HTML:     - Jquery : Sekian penjelasan mengenai penerapan JQuery pada 2 buah halaman sederhana, terimakasih atas segala perhatian, moh...
Post a Comment
Read more