Nama : Rahadian Adjie Mahesa
NRP : 05111940000221
Kelas : PWEB D 2021
Pada tugas ke-4 ini kami ditugaskan untuk membuat sebuah website katalog produk dengan menggunakan CSS. Untuk menyelesaikan tugas ini saya membuat sebuah website static yang menjual produk baju dan kemeja. Disini saya membuatnya menggunakan HTML dan CSS. Berikut adalah penampilannya
Berikut adalah link web nya: pweb-tugas-katalog-221.vercel.app
Berikut adalah Source Code nya:
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>Tugas 4 - Katalog Produk</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@200;400;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="header-name">
<h2>JualBaju.com</h2>
</div>
</header>
<div class="navbar">
<ul class="navbar-menu">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">Products</a></li>
<li class="menu-item"><a href="#">About</a></li>
<li class="menu-item"><a href="#">Contact Us</a></li>
</ul>
</div>
<main>
<div class="content">
<h3> Catalog > Baju Pria > Kemeja Putih</h3>
<div class="column">
<img
src="https://s1.bukalapak.com/img/1039125322/large/TERLARIS_BAJU_KEMEJA_PRIA_LENGAN_PENDEK_SLIM_FIT_Kemeja_WL_M.jpg">
</div>
<div class="column" style="margin-left: 50px;">
<h2>Kemeja Putih</h2>
<p style="font-size: 20px;"><b> Rp150.000,-</b></p>
<p><b>Kemeja Putih </b>lorem ipsum dolor sit amet, consect</p>
<p><b>Size</b></p>
<div class="submit-size">
<button class="button-size" style="border-radius: 100%;">S</button>
<button class="button-size" style="border-radius: 100%;">M</button>
<button class="button-size" style="border-radius: 100%;">X</button>
<button class="button-size" style="border-radius: 100%;">L</button>
</div>
<div class="submit-cart">
<button class="buttons">See Review</button>
<button class="buttons">Add to Cart</button>
</div>
</div>
</div>
<div class="other-catalog" style="margin-top: 4rem;" >
<div class="catalog-section" >
<div class="items-container">
<div class="column" >
<h3 font-size: 18px;><b>Recommended Items</b></h3>
<a href="#">
<img src="https://cf.shopee.co.id/file/455afdfcd739de79970ae34cf164df90" style="width: 160px;">
</a>
<p><b>Kemeja Biru</b></p>
<p > Rp150.000,-</p>
</div>
<div class="column">
<h3 style="color: black;"><b>Recommended Items</b></h3>
<a href="#">
<img src="https://ae01.alicdn.com/kf/HTB1petMn_nI8KJjSszgq6A8ApXa8/Pria-Musim-Panas-Merah-Muda-Flamingo-Burung-Eksotis-Dicetak-Kemeja-Hijau-Mint-Keren-Atasan-Kasual-Kualitas.jpg_640x640.jpg"
style="width: 160px;">
</a>
<p><b>Kemeja Hijau</b></p>
<p > Rp150.000,-</p>
</div>
<div class="column">
<h3 style="color: black;"><b>Recommended Items</b></h3>
<a href="#">
<img src="https://cf.shopee.co.id/file/ea51344e3bb6ebe3a189f78bc7050a3f" style="width: 160px;">
</a>
<p><b>Kemeja Hitam</b></p>
<p > Rp150.000,-</p>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="jarak">
<p>© JualBaju.com 2021</p>
</div>
</footer>
</body>
</html>
CSS
body{
font-family: 'Urbanist', sans-serif;
}
header{
display: flexbox;
text-align: center;
}
header h2{
font-size: 2em;
text-align: center;
margin-bottom:auto
}
.navbar{
background-color: darkslategray;
height: 50px;
}
.navbar-menu {
display: flex;
justify-content: center;
font-size: 1.25em;
}
.navbar-menu a{
color: #fff;
text-decoration: none;
}
.navbar-menu a:hover{
color: greenyellow;
text-decoration: none;
}
.menu-item {
padding-inline: 5rem;
list-style-type: none;
margin-top: 12px;
}
.content{
width: 90%;
margin: auto;
height: 700px;
padding: 0.1px;
background: #fff;
color: #333;
text-align: justify;
padding-right: 1rem;
padding-left: 1rem;
}
.content img{
width: 400px;
margin-left: 2px;
margin-right: 2rem;
}
.column {
float: left;
padding: 10px;
}
button{
transition-duration: 0.4s;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
font-family: 'Urbanist', sans-serif;
}
.button-size{
margin-bottom: 20px;
}
.buttons{
margin-right: 20px;
}
button:hover{
background-color: seashell
}
.catalog-section{
display:flex;
justify-content: center;
}
.items-container{
padding-inline: 10px;
}
footer{
height: 50px;
line-height: 50px;
background-color: darkslategray;
color: #fff;
text-align: center;
justify-content: center;
font-size: 1.25em;
}
Comments
Post a Comment