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

jquery form validasi   Pada kesempatan kali ini saya akan membagikan artikel mengenai pembuatan form validasi dan select dengan menggunakan jquey.   Link web :  https://ianm27.github.io/book-list/     Link web :  https://ianm27.github.io/validatorForm/ Berikut adal kode nya berturut - turut :  <! 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 href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel = "stylesheet" /> < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" ></ script > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min....
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