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 9 PWEB D

  PHP adalah singkatan dari Hypertext Preprocessor , yaitu bahasa pemrograman yang sebenarnya mirip dengan JavaScript dan Python . Perbedaannya adalah, PHP sering kali digunakan untuk komunikasi sisi server, sedangkan JavaScript bisa digunakan untuk frontend dan backend. Sementara itu, Python hanya untuk sisi server ( backend ).  Berikut adalah source code : index.html <! DOCTYPE html > < html lang = "en" >< head > < meta http-equiv = "content-type" content = "text/html; charset=UTF-8" > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < title >Pendaftaran SMAN 1 Ponorogo</ title > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3...
Posting Komentar
Baca selengkapnya

Tugas 3 PWEB D

Web Warung Tegal Pada kesempatan kali ini saya akan membagikan bagaimana membuat website untuk mempromosikan sebuah produk sehingga calon pembeli dapat melihat dan memesan produk kita tanpa harus datang ke lokasi. Pada kasus ini saya membuat website Warung Tegal Indonesia, mengapa saya memlilih Warteg itu karena Warteg sudah menjadi bagian dari hampir seluruh masyarakat Indonesia. fitur yang ada diwebsite ini antara lain pengunjung dapat : Melihat daftar masakan Melakukan pesan katering makanan Melihat daftar makanan populer Melihat kontak   Melihat video channel youtube warteg  Berikut adalah  tampilan websitenya   Website ini sudah bisa anda akses melalui link berikut : klik disini Namun karena keterbatasan waktu dalam pembuatan website ini fitur yang sudah bisa dinikmati oleh pengunjung masih beberapa saja, diantaranya adalah fitur melihat daftar masakan, mengecek kontak dan melihat video youtube warteg Indonesia. dalam pembuatan website ini hanya menggunakan...
Posting Komentar
Baca selengkapnya

Tugas 6 Pemrograman Berorientasi Objek (A)

Image Viewer & Login Panel A. image Viewer      Pada kali ini saya akan membahas tentang image viewer yang dapat menampilkan gambar dalam format jpg dengan mengunakan Object Oriented Programming di Java. Pada kali ini saya menggunakan blueJ sebagai IDE. berikut adalah kelas-kelas nya : 1. imageViewer 2. imagePanel 3. OFImage 4. ImageFileManager Berikut source code class imageViewer Berikut source code class imagePanel Berikut source code class OFImage Berikut source code class ImageFileManager Berikut hasil Outputnya Tampilan image tanpa filter Dengan Filter Darker Dengan Filter Lighter Dengan Filter Treshold A. Login Panel     kemudian  saya akan mecoba menjelaskan bagaimana pembuatan sebuah GUI dari Login Form panel. Dalam program ini, hanya terdapat satu class saja. Login Panel akan mengecek apakah username dan password yang dimasukkan oleh user sama dengan username dan password yang ada dalam sistem. Jika sama, maka akan memunculkan sebuah pesan "Ac...
Posting Komentar
Baca selengkapnya