Langsung ke konten utama

Tugas 4 PWEB D

 Website Katalog

jaket.id

    Pada kesempatan kali ini saya akan membagikan artikel mengenai pembuatan websit jaket.id. jaket.id merupakan sebuah website katalog yang menampilan produk - produk dari jaket.id dimana dalam website nya nanti ada berbagai fitur yang menarik, seperti dalat menampilkan produk dari setiap kategori, melihat produk yang menjadi best seller dari jaket.id.

website ini dibuat menggunakan bahasa pemrograman html dan css. berikut adalah tampilan website dari jaket.id

 

website 

Berikut adalah link website nya : https://ianm27.github.io/katalog-jaket/

Source Code

Berikut adalah source code dari jaket.id

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>jaket.id</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 class="brand">jaket.id</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Size Cart</a></li>
<li><a href="#">Best Seller</a></li>
</ul>
</nav>
<!-- <h3>Kualitas unggul adalah motto kami</h3> -->
</header>
<section class="main">
<div class="container">
<article class="article-container">
<img src="img/produk1.png" alt="">
<div class="text-right">

<h2>Denim D0165QU</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Quam temporibus, minima harum numquam possimus magni modi!
Beatae porro numquam ipsa? Ad odit temporibus accusamus assumenda.
Iusto laborum quaerat consequatur consequuntur!</p>
<div class="buy">
<div class="size">
<h3>Size</h3>
<div>
<form class="form-size">
<input type="radio" id="small" name="size" value="size">
<label for="small"> S</label><br>
<input type="radio" id="medium" name="size" value="size">
<label for="meidum"> M</label><br>
<input type="radio" id="large" name="size" value="size">
<label for="large"> L</label>
<input type="radio" id="extraLarge" name="size" value="size">
<label for="extraLarge"> XL</label>
</form>
</div>
</div>
<h3>Rp.290.000,-</h3>
<a href=""><button>+ Buy Now</button></a>
</div>
</div>
</article>
<article class="article-container">
<img src="img/produk2.png" alt="">
<div class="text-right">

<h2>Parka 016IG7Y</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Quam temporibus, minima harum numquam possimus magni modi!
Beatae porro numquam ipsa? Ad odit temporibus accusamus assumenda.
Iusto laborum quaerat consequatur consequuntur!</p>
<div class="buy">
<div class="size">
<h3>Size</h3>
<div>
<form class="form-size">
<input type="radio" id="small" name="size" value="size">
<label for="small"> S</label><br>
<input type="radio" id="medium" name="size" value="size">
<label for="meidum"> M</label><br>
<input type="radio" id="large" name="size" value="size">
<label for="large"> L</label>
<input type="radio" id="extraLarge" name="size" value="size">
<label for="extraLarge"> XL</label>
</form>
</div>
</div>
<h3>Rp.350.000,-</h3>
<a href=""><button>+ Buy Now</button></a>
</div>
</div>
</article>
</div>
<div class="container">
<article class="article-container">
<img src="img/produk3.png" alt="">
<div class="text-right">

<h2>Denim D0165YO</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Quam temporibus, minima harum numquam possimus magni modi!
Beatae porro numquam ipsa? Ad odit temporibus accusamus assumenda.
Iusto laborum quaerat consequatur consequuntur!</p>
<div class="buy">
<div>
<h3>Size</h3>
</div>
<div class="size">
<h3>Size</h3>
<div>
<form class="form-size">
<input type="radio" id="small" name="size" value="size">
<label for="small"> S</label><br>
<input type="radio" id="medium" name="size" value="size">
<label for="meidum"> M</label><br>
<input type="radio" id="large" name="size" value="size">
<label for="large"> L</label>
<input type="radio" id="extraLarge" name="size" value="size">
<label for="extraLarge"> XL</label>
</form>
</div>
</div>
<h3>Rp.260.000,-</h3>
<a href=""><button>+ Buy Now</button></a>
</div>
</div>
</article>
<article class="article-container">
<img src="img/produk4.png" alt="">
<div class="text-right">

<h2>Jeans J16000TG</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Quam temporibus, minima harum numquam possimus magni modi!
Beatae porro numquam ipsa? Ad odit temporibus accusamus assumenda.
Iusto laborum quaerat consequatur consequuntur!</p>
<div class="buy">
<div class="size">
<h3>Size</h3>
<div>
<form class="form-size">
<input type="radio" id="small" name="size" value="size">
<label for="small"> S</label><br>
<input type="radio" id="medium" name="size" value="size">
<label for="meidum"> M</label><br>
<input type="radio" id="large" name="size" value="size">
<label for="large"> L</label>
<input type="radio" id="extraLarge" name="ize" value="size">
<label for="extraLarge"> XL</label>
</form>
</div>
</div>
<h3>Rp.350.000,-</h3>
<a href=""><button>+ Buy Now</button></a>
</div>
</div>
</article>
</div>
<div class="container">
<article class="article-container">
<img src="img/produk5.png" alt="">
<div class="text-right">

<h2>Army A016TU4</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Quam temporibus, minima harum numquam possimus magni modi!
Beatae porro numquam ipsa? Ad odit temporibus accusamus assumenda.
Iusto laborum quaerat consequatur consequuntur!</p>
<div class="buy">
<div>
<h3>Size</h3>
</div>
<div class="size">
<h3>Size</h3>
<div>
<form class="form-size">
<input type="radio" id="small" name="size" value="size">
<label for="small"> S</label><br>
<input type="radio" id="medium" name="size" value="size">
<label for="meidum"> M</label><br>
<input type="radio" id="large" name="size" value="size">
<label for="large"> L</label>
<input type="radio" id="extraLarge" name="size" value="size">
<label for="extraLarge"> XL</label>
</form>
</div>
</div>
<h3>Rp.260.000,-</h3>
<a href=""><button>+ Buy Now</button></a>
</div>
</div>
</article>
<article class="article-container">
<img src="img/produk6.png" alt="">
<div class="text-right">

<h2>Jeans J16056YH</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Quam temporibus, minima harum numquam possimus magni modi!
Beatae porro numquam ipsa? Ad odit temporibus accusamus assumenda.
Iusto laborum quaerat consequatur consequuntur!</p>
<div class="buy">
<div class="size">
<h3>Size</h3>
<div>
<form class="form-size">
<input type="radio" id="small" name="size" value="size">
<label for="small"> S</label><br>
<input type="radio" id="medium" name="size" value="size">
<label for="meidum"> M</label><br>
<input type="radio" id="large" name="size" value="size">
<label for="large"> L</label>
<input type="radio" id="extraLarge" name="size" value="size">
<label for="extraLarge"> XL</label>
</form>
</div>
</div>
<h3>Rp.350.000,-</h3>
<a href=""><button>+ Buy Now</button></a>
</div>
</div>
</article>
</div>
</section>
<footer>
<p>&copy;2021 jaket.id</p>
</footer>
</body>
</html>

 

CSS

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/* mycss */

body{
font-family: Verdana, Tahoma, sans-serif;
color: #333;
background-color:#F6F6F6;
}
header{
background-color: #AFB9C8;
width: 100%;
}
header h1{
font-size: 35px;
font-weight: bold;
margin: 0px auto;
width: max-content;
padding: 40px 0px 5px 00px;
}

ul{
width: max-content;
margin: 0px auto;
}
a{
text-decoration: none;
color: black;
}
ul li{
display: inline-block;
padding: 25px 10px 20px 10px;
}

ul li:hover{
font-weight: bold;
}

article{
width: 100%;
}

.container {
display: flex;
flex-direction: row;
padding-top: 50px;
}

.article-container {
display: flex;
flex-direction: row;
margin-left: 40pt;
/* margin-bottom: 30pt; */ */
}

.article-container img {
display: flex;
height: 300px;
}

.article-container .text-right {
display: flex;
flex-direction: column;
margin-left: 30px;
margin-right: 20px;
}

h2 {
font-size: 25px;
font-weight: bold;
padding-top: 10px;
padding-bottom: 20px;

}

h3 {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
padding-top: 20px;

}

.size {
padding: 15px 0pt 10pt 0pt;
}

.buy h3 {
font-size: 16px;
padding-top: 0px;
padding-right: 15px;
}

.form-size, .size {
display: flex;
flex-direction: row;
}

label {
padding-right: 10px;
}
button {
height: 30px;
width: 120px;
margin-top: 20px;
background-color: black;
color: white;
border-radius: 5px;
}

button:hover{
background-color: #AFB9C8;
color: black;
}

footer {
background-color: dimgrey;
margin-top: 78px;
padding: 40px 0px 40px 0px;
text-align: center;
color: black;
}

 

    Sekian artikel pada kesempatan kali sampai jumpa di artikel selanjutnya, terimakasih.

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 6 PWEB D

Login page dan Contact Me      Pada kesempatan kali ini saya akan membagikan artikel mengenai pembuatan login page dan contact me dengan menggunakan bantuan bootsrap.      login page dan contact me menggunakan bahasa pemrograman html dan css dan js. berikut adalah tampilannya.                       Login page & Contact Me Berikut adalah link aksesnya : https://ianm27.github.io/login-contact_me/ Source Code Berikut adalah source code dari login page dan contact me HTML <! DOCTYPE html > < html > < head > < meta charset = "utf-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1" /> < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" /> < link rel = "stylesheet" href = "https://unpkg.com/aos@2.3.1/dist/aos.css" /> < link rel = "stylesheet" hr...
Posting Komentar
Baca selengkapnya

Tugas 5 Pemrograman Berorientasi Objek (A)

World of Zuul Pada kesempatan kali ini saya akan membahas tentang gam sederhana Yaitu world of Zuul. Game ini merupakan game yang bergenre adventure dimana player dapat berjalan ke barat, utara, timur, selatan dengan menggunakan perintah (command) yang ada pada game ini untuk mendapatkan jalan keluar. Game ini didesain berdasarkan implementasi dari Designing Classes. Terdapat 5 class yang nantinya akan kita gunakan untuk membangun game ini yaitu :       1. Game      2. Command      3. CommandWords      4. Parser      5. Room  Implementasi Class Berikut adalah source code dari kelas Game : Berikut adalah source code dari kelas Command  Berikut adalah source code dari kelas CommandWord Berikut adalah source code dari kelas Room Berikut adalah source code dari kelas Parser Cara Menjalankan Game Pertama kalian klik kanan pada class Game kemudian pilih new Game() Beri nama kemudian klik ok, misal kita b...
Posting Komentar
Baca selengkapnya

Tugas 7 Pemrograman Berorientasi Objek (A)

Java Applet dan Java FX A. Java Applet      Applet adalah salah satu jenis program yang bisa dihasilkan oleh bahasa pemrograman Java selain program aplikasi desktop dan server. Applet Java harus dijalankan menggunakan web browser, misalnya di Microsoft Internet Explore, Mozilla FireFox, Google Chrome atau browser yang lain.  Applet Java dapat disertakan di dalam dokumen HyperText Markup Language (HTML) bila ingin dijalankan di web browser. Dokumen HTML menggunakan tag untuk memberi instruksi ke web browser dan web browser akan menterjemahkan dan memutuskan bagaimana menampilkan atau memperlakukan konten dari dokumen HTML. Kali ini kita akan mencoba mengimplementasikan java applet dalam sebuah program jam analog yang bekerja mengikuti waktu setempat. Berikut Source Code nya B. Java FX      JavaFX adalah sebuah platform software untuk membangun sebuah aplikasi rich internet application (RIA) yang bisa berjalan pada berbagai macam perangkat. Seperti kompu...
Posting Komentar
Baca selengkapnya