Dokumentasi PWEB katalog
Tugas : membuat katalog
Dokumentasi 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>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<section>
<div class="container">
<div class="navbar">
<div class="logo">
<img src="https://image.flaticon.com/icons/png/512/1215/1215505.png" width="125px">
</div>
<nav>
<ul>
<li><a href="">Beranda</a></li>
<li><a href="">Produk</a></li>
<li><a href="">Kontak</a></li>
</ul>
</nav>
</div>
<div class="baris-1">
<ul>
<div id="kolom" class="kolom-1">
<li>
<img src="https://image.uniqlo.com/UQ/ST3/id/imagesgoods/440684/item/idgoods_69_440684.jpg?width=1008&impolicy=quality_75" width="188" height="188" alt="">
<br>
<a href="#">Soft Touch Turtle Neck</a>
<br>
<b>RP 150.000,-</b>
<br>
<img src="https://images.tokopedia.net/img/goldmerchant/pm_activation/badge/Power%20Merchant%20Pro@2x.png" alt="" height="16px">
<a href="#">Kota Bandung</a>
</li>
</div>
<div id="kolom" class="kolom-2">
<li>
<img src="https://image.uniqlo.com/UQ/ST3/id/imagesgoods/440683/item/idgoods_17_440683.jpg?width=1008&impolicy=quality_75" width="188" height="188" alt="">
<br>
<a href="#">Soft Touch Turtle Neck</a>
<br>
<b>RP 150.000,-</b>
<br>
<img src="https://images.tokopedia.net/img/goldmerchant/pm_activation/badge/Power%20Merchant%20Pro@2x.png" alt="" height="16px">
<a href="#">Kota Bandung</a>
</li>
</div>
<div id="kolom" class="kolom-3">
<li>
<img src="https://image.uniqlo.com/UQ/ST3/id/imagesgoods/440682/item/idgoods_07_440682.jpg?width=1008&impolicy=quality_75" width="188" height="188" alt="">
<br>
<a href="#">Soft Touch Turtle Neck</a>
<br>
<b>RP 150.000,-</b>
<br>
<img src="https://images.tokopedia.net/img/goldmerchant/pm_activation/badge/Power%20Merchant%20Pro@2x.png" alt="" height="16px">
<a href="#">Kota Bandung</a>
</li>
</div>
<div id="kolom" class="kolom-4">
<li>
<img src="https://image.uniqlo.com/UQ/ST3/id/imagesgoods/440681/item/idgoods_09_440681.jpg?width=1008&impolicy=quality_75" width="188" height="188" alt="">
<br>
<a href="#">Soft Touch Turtle Neck</a>
<br>
<b>RP 150.000,-</b>
<br>
<img src="https://images.tokopedia.net/img/goldmerchant/pm_activation/badge/Power%20Merchant%20Pro@2x.png" alt="" height="16px">
<a href="#">Kota Bandung</a>
</li>
</div>
</ul>
</div>
<div class="baris-2">
<ul>
<div id="kolom" class="kolom-1">
<li>
<img src="https://image.uniqlo.com/UQ/ST3/AsianCommon/imagesgoods/442476/item/goods_37_442476.jpg?width=1600&impolicy=quality_75" height="188" width="188" alt="">
<br>
<a href="#">Soft Touch Turtle Neck</a>
<br>
<b>RP 150.000,-</b>
<br>
<img src="https://images.tokopedia.net/img/goldmerchant/pm_activation/badge/Power%20Merchant%20Pro@2x.png" alt="" height="16px">
<a href="#">Kota Bandung</a>
</li>
</div>
<div id="kolom" class="kolom-2">
<li>
<img src="https://image.uniqlo.com/UQ/ST3/id/imagesgoods/441719/item/idgoods_68_441719.jpg?width=1600&impolicy=quality_75" height="188" width="188" alt="">
<br>
<a href="#">Soft Touch Turtle Neck</a>
<br>
<b>RP 150.000,-</b>
<br>
<img src="https://images.tokopedia.net/img/goldmerchant/pm_activation/badge/Power%20Merchant%20Pro@2x.png" alt="" height="16px">
<a href="#">Kota Bandung</a>
</li>
</div>
<div id="kolom" class="kolom-3">
<li>
<img src="https://image.uniqlo.com/UQ/ST3/id/imagesgoods/441718/item/idgoods_32_441718.jpg?width=1600&impolicy=quality_75" width="188" height="188" alt="">
<br>
<a href="#">Soft Touch Turtle Neck</a>
<br>
<b>RP 150.000,-</b>
<br>
<img src="https://images.tokopedia.net/img/goldmerchant/pm_activation/badge/Power%20Merchant%20Pro@2x.png" alt="" height="16px">
<a href="#">Kota Bandung</a>
</li>
</div>
<div id="kolom" class="kolom-4">
<li>
<img src="https://image.uniqlo.com/UQ/ST3/id/imagesgoods/442951/item/idgoods_72_442951.jpg?width=1600&impolicy=quality_75" width="188" height="188" alt="">
<br>
<a href="#">Henley Neck Lengan</a>
<br>
<b>RP 150.000,-</b>
<br>
<img src="https://images.tokopedia.net/img/goldmerchant/pm_activation/badge/Power%20Merchant%20Pro@2x.png" alt="" height="16px">
<a href="#">Kota Bandung</a>
</li>
</div>
</ul>
</div>
<div class="baris-3">
<ul>
<div id="kolom" class="kolom-1">
<li>
<img src="https://image.uniqlo.com/UQ/ST3/id/imagesgoods/442943/item/idgoods_33_442943.jpg?width=1008&impolicy=quality_75" width="188" height="188" alt="">
<br>
<a href="#">Neck Lengan Pendek</a>
<br>
<b>RP 150.000,-</b>
<br>
<img src="https://images.tokopedia.net/img/goldmerchant/pm_activation/badge/Power%20Merchant%20Pro@2x.png" alt="" height="16px">
<a href="#">Kota Bandung</a>
</li>
</div>
<div id="kolom" class="kolom-2">
<li>
<img src="https://image.uniqlo.com/UQ/ST3/id/imagesgoods/442942/item/idgoods_12_442942.jpg?width=1008&impolicy=quality_75" width="188" height="188" alt="">
<br>
<a href="#">Neck Lengan Pendek</a>
<br>
<b>RP 150.000,-</b>
<br>
<img src="https://images.tokopedia.net/img/goldmerchant/pm_activation/badge/Power%20Merchant%20Pro@2x.png" alt="" height="16px">
<a href="#">Kota Bandung</a>
</li>
</div>
<div id="kolom" class="kolom-3">
<li>
<img src="https://image.uniqlo.com/UQ/ST3/id/imagesgoods/444042/item/idgoods_54_444042.jpg?width=1008&impolicy=quality_75" width="188" height="188" alt="">
<br>
<a href="#">Soft Touch Turtle Neck</a>
<br>
<b>RP 150.000,-</b>
<br>
<img src="https://images.tokopedia.net/img/goldmerchant/pm_activation/badge/Power%20Merchant%20Pro@2x.png" alt="" height="16px">
<a href="#">Kota Bandung</a>
</li>
</div>
<div id="kolom" class="kolom-4">
<li>
<img src="https://image.uniqlo.com/UQ/ST3/id/imagesgoods/444041/item/idgoods_03_444041.jpg?width=1008&impolicy=quality_75" width="188" height="188" alt="">
<br>
<a href="#">Soft Touch Turtle Neck</a>
<br>
<b>RP 150.000,-</b>
<br>
<img src="https://images.tokopedia.net/img/goldmerchant/pm_activation/badge/Power%20Merchant%20Pro@2x.png" alt="" height="16px">
<a href="#">Kota Bandung</a>
</li>
</div>
</ul>
</div>
<div class="baris-4">
<ul>
<div id="kolom" class="kolom-1">
<li>
<img src="https://image.uniqlo.com/UQ/ST3/id/imagesgoods/444040/item/idgoods_30_444040.jpg?width=1008&impolicy=quality_75" height="188" width="188" alt="">
<br>
<a href="#">Garis Lengan Pendek</a>
<br>
<b>RP 150.000,-</b>
<br>
<img src="https://images.tokopedia.net/img/goldmerchant/pm_activation/badge/Power%20Merchant%20Pro@2x.png" alt="" height="16px">
<a href="#">Kota Bandung</a>
</li>
</div>
<div id="kolom" class="kolom-2">
<li>
<img src="https://image.uniqlo.com/UQ/ST3/id/imagesgoods/443545/item/idgoods_09_443545.jpg?width=1008&impolicy=quality_75" width="188" height="188" alt="">
<br>
<a href="#">Warna Crew Neck (Pdk)</a>
<br>
<b>RP 150.000,-</b>
<br>
<img src="https://images.tokopedia.net/img/goldmerchant/pm_activation/badge/Power%20Merchant%20Pro@2x.png" alt="" height="16px">
<a href="#">Kota Bandung</a>
</li>
</div>
<div id="kolom" class="kolom-3">
<li>
<img src="https://image.uniqlo.com/UQ/ST3/id/imagesgoods/442870/item/idgoods_00_442870.jpg?width=1008&impolicy=quality_75" width="188" height="188" alt="">
<br>
<a href="#">Soft Touch Turtle Neck</a>
<br>
<b>RP 150.000,-</b>
<br>
<img src="https://images.tokopedia.net/img/goldmerchant/pm_activation/badge/Power%20Merchant%20Pro@2x.png" alt="" height="16px">
<a href="#">Kota Bandung</a>
</li>
</div>
<div id="kolom" class="kolom-4">
<li>
<img src="https://image.uniqlo.com/UQ/ST3/id/imagesgoods/441003/item/idgoods_00_441003.jpg?width=1008&impolicy=quality_75" width="188" height="188" alt="">
<br>
<a href="#">Marvel Crew Neck (Pdk)</a>
<br>
<b>RP 150.000,-</b>
<br>
<img src="https://images.tokopedia.net/img/goldmerchant/pm_activation/badge/Power%20Merchant%20Pro@2x.png" alt="" height="16px">
<a href="#">Kota Bandung</a>
</li>
</div>
</ul>
</div>
</section>
<div class="footer">
<p> © Copyright Copyright zZzZ</p>
</div>
</html>
Dokumentasi CSS
section ul li{
margin: 10px;
padding-top: 2%;
padding-bottom: 2%;
padding-left: 1%;
padding-right: 1%;
float: left;
list-style-type: none;
border: 2px solid rgb(185, 185, 185);
border-radius: 5%;
font-family:'Helvetica Neue', HelveticaNeue, Helvetica, 'Noto Sans', Roboto, Arial, 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', '30D230E930AE30CE89D230B4 Pro W3', 'Noto Sans CJK JP', Osaka, Meiryo, '30E130A430EA30AA', 'MS PGothic', 'FF2DFF33 FF3030B430B730C330AF', 'Hiragino Sans GB', 'Arial Unicode MS', sans-serif;
border: 1px solid;
box-shadow: 5px 4px #888888;
}
section ul li a{
text-decoration: none;
}
a{
font-weight: bold;
}
b{
font-weight: normal;
}
nav a:hover,nav a:active{
font-size: 150%;
}
.navbar{
display: flex;
align-items: center;
padding:20px;
background-color: #70bbbe ;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
.container{
max-width: 1300px;
margin:auto;
padding-left: 25px;
padding-right: 25px;
}
nav ul li{
list-style-type: none;
margin: 0;
padding: 0;
border: none;
display: inline-block;
margin-right: 20px;
box-shadow: none;
}
.footer {
background-color: #bbdddf;
color: gray;
font-size: 16px;
padding: 40px 0 20px;
text-align: center;
font-size: medium;
clear: both;
position: relative;
height: 200px;
margin-top: -200px;
}
.baris-1{
display: block;
}
.baris-3{
display: block;
}
a:visited {
color: black;
background-color: transparent;
text-decoration: none;
}
Dokumentasi Website:
Sekian Terimakasih
Gian Egaa 