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

Membuat Biodata Diri          Pada kesempatan kali ini saya akan membagikan postingan mengenai pembuatan biodata diri saya menggunakan html. Berikut merupakan tampilan dari biodata diri yang sudah saya buat   Akses website tersebut dengan klik disini Kemudian untuk source code html dari tampilan diatas adalah sebagai berikut Mungkin itu saya postingan kali ini, semoga dapat bermanfaat. Terimakasih.
Posting Komentar
Baca selengkapnya

FP Pemrograman Berorientasi Objek A

Game Java Tebak Gambar Kami dari kelompok FP PBO kelas A yang beranggotakan : Junaedi Akbar  05111940000041 Ifanu Antoni 05111940000064 Pada kesempatan kali ini kami akan menjelaskan mengenai game Tebak Gambar yang telah kita buat menggunakan permrograman Java. Dalam game ini nantinya pengguna akan diberi 2 pasang gambar di setiap stagenya lalu pengguna harus menebak kata apa yang sesuai dengan gambar yang telah diperlihatkan. Agar lanjut ke stage berikutnya pengguna harus menebak dengan tepat kata apa yang sesuai dengan jawaban.  Untuk mengakses game Tebak Gambar ini bisa mengunjungi : http://bit.ly/3bsyGqw Diagram class Dalam pembuatan, Game ini menggunakan 3 jenis class yaitu : Class Start : start.java berfungsi untuk menampilkan halaman awal, yang nantinya user diminta untuk menginputkan nama pemain dan sebuah tombol untuk melanjutkan ke pertanyaan pertama Class Soal: gambar1.java,gambar2.java dst.... berisi tampilan 2 buah gambar dan sebuah kolom input untuk men...
Posting Komentar
Baca selengkapnya