TUGAS 4 PEMROGRAMAN WEB (D)

TUGAS 4 PEMROGRAMAN WEB (D) - Katalog Barang

Tugas kali ini membuat website katalog barang (di sini memilih pakaian), yaitu Dodol Klambi. Dalam proses pengerjaannya, menggunakan HTML, CSS (tanpa Bootstrap), dan JavaScript serta VSCode sebagai text editor. JavaScript di sini dipakai untuk animasi slide left atau right dari katalog pakaian. Lalu, beberapa icon pada website ini menggunakan Font Awesome. Laman website-nya dapat diakses pada link berikut. Untuk hosting web sendiri memakai Netlify.

Konten dari website:

Main page. berisi halaman depan yang memuat katalog berisi pakaian-pakaian beserta merek, jenis, dan harganya. Ada navbar yang berisi menu-menu dan kategori pakaian. Dan juga footbar yang berisi media sosial website dan sub-menu dari kategori pakaian.

Tampilan Website

Main page

Source Code

index.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>Dodol Klambi</title>
	<link rel="icon" type="image" href="img/icon.svg">
	<link rel="stylesheet" href="css/style.css">
	<script src="https://kit.fontawesome.com/7c1b58181d.js" crossorigin="anonymous"></script>
	</head>
	<body>
	<nav class="navbar">
	<div class="nav">
	<h1>Dodol Klambi</h1>

	<div class="nav-items">
	<div class="search">
	<input type="text" class="search-box" placeholder="Search brand, product">
	<button class="search-btn">Search</button>
	</div>

	<a href="#"><i class="fa fa-user-circle fa-2x" aria-hidden="true"></i></a>
	<a href="#"><i class="fa fa-shopping-bag fa-2x" aria-hidden="true"></i></a>
	</div>
	</div>

	<ul class="links-container">
	<li class="link-item"><a href="#" class="link">Home</a></li>
	<li class="link-item"><a href="#" class="link">Women</a></li>
	<li class="link-item"><a href="#" class="link">Men</a></li>
	<li class="link-item"><a href="#" class="link">Kids</a></li>
	<li class="link-item"><a href="#" class="link">Accessories</a></li>
	</ul>
	</nav>

	<!-- Product -->
	<section class="product">
	<h2 class="product-category">Best Selling</h2>

	<button class="pre-btn"><i class="fa fa-arrow-right fa-2x" aria-hidden="true"></i></button>
	<button class="nxt-btn"><i class="fa fa-arrow-right fa-2x" aria-hidden="true"></i></button>

	<div class="product-container">
	<div class="product-card">
	<div class="product-image">
	<span class="discount-tag">50% Off</span>
	<img src="img/card1.png" class="product-thumb" alt="">
	<button class="card-btn">Add to Whistlist</button>
	</div>

	<div class="product-info">
	<h2 class="product-brand">RARE</h2>
	<p class="product-short-des">Women Green Printed Fit</p>
	<span class="price">$20</span>
	<span class="actual-price">$40</span>
	</div>
	</div>

	<div class="product-card">
	<div class="product-image">
	<span class="discount-tag">22% Off</span>
	<img src="img/card2.png" class="product-thumb" alt="">
	<button class="card-btn">Add to Whistlist</button>
	</div>

	<div class="product-info">
	<h2 class="product-brand">HRX</h2>
	<p class="product-short-des">Men Teal Blue Printed T-shirt</p>
	<span class="price">$35</span>
	<span class="actual-price">$45</span>
	</div>
	</div>

	<div class="product-card">
	<div class="product-image">
	<span class="discount-tag">35% Off</span>
	<img src="img/card3.png" class="product-thumb" alt="">
	<button class="card-btn">Add to Whistlist</button>
	</div>

	<div class="product-info">
	<h2 class="product-brand">Roadster</h2>
	<p class="product-short-des">Men Black Regular Casual Shirt</p>
	<span class="price">$45</span>
	<span class="actual-price">$69</span>
	</div>
	</div>

	<div class="product-card">
	<div class="product-image">
	<span class="discount-tag">7% Off</span>
	<img src="img/card4.png" class="product-thumb" alt="">
	<button class="card-btn">Add to Whistlist</button>
	</div>

	<div class="product-info">
	<h2 class="product-brand">Athena</h2>
	<p class="product-short-des">Charming Fuchsia Pink Dress</p>
	<span class="price">$65</span>
	<span class="actual-price">$70</span>
	</div>
	</div>

	<div class="product-card">
	<div class="product-image">
	<span class="discount-tag">25% Off</span>
	<img src="img/card5.png" class="product-thumb" alt="">
	<button class="card-btn">Add to Whistlist</button>
	</div>

	<div class="product-info">
	<h2 class="product-brand">WROGN</h2>
	<p class="product-short-des">Navy Blue Slim Fit Casual Shirt</p>
	<span class="price">$30</span>
	<span class="actual-price">$40</span>
	</div>
	</div>
	</div>
	</section>

	<footer>
	<div class="footer-content">
	<h1>Dodol Klambi</h1>

	<div class="footer-socialmedia">
	<a href="https://www.facebook.com/"><i class="fab fa-facebook fa-2x"></i></a>
	<a href="https://www.twitter.com/"><i class="fab fa-twitter fa-2x"></i></a>
	<a href="https://www.instagram.com/"><i class="fab fa-instagram fa-2x"></i></a>
	</div>

	<div class="footer-ul-container">
	<ul class="category">
	<li class="category-title">Men</li>
	<li><a href="#" class="footer-link">T-Shirts</a></li>
	<li><a href="#" class="footer-link">Sweatshirts</a></li>
	<li><a href="#" class="footer-link">Shirts</a></li>
	<li><a href="#" class="footer-link">Jeans</a></li>
	<li><a href="#" class="footer-link">Casuals</a></li>
	</ul>

	<ul class="category">
	<li class="category-title">Women</li>
	<li><a href="#" class="footer-link">T-Shirts</a></li>
	<li><a href="#" class="footer-link">Sweatshirts</a></li>
	<li><a href="#" class="footer-link">Shirts</a></li>
	<li><a href="#" class="footer-link">Skirts</a></li>
	<li><a href="#" class="footer-link">Casuals</a></li>
	</ul>
	</div>
	</div>

	<p class="footer-credit">© 2021 Thomas Felix</p>
	</footer>

	<script src="js/main.js"></script>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

style.css

	@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap");

	/* Navbar */
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
	}

	.navbar {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	background: #f5f5f5;
	z-index: 9;
	}

	.nav {
	padding: 10px 6vw;
	display: flex;
	justify-content: space-between;
	}

	.nav-items {
	display: flex;
	align-items: center;
	}

	.search {
	width: 500px;
	display: flex;
	}

	.search-box {
	width: 80%;
	height: 40px;
	padding: 10px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	border: 1px solid #d1d1d1;
	text-transform: capitalize;
	background: none;
	color: #a9a9a9;
	outline: none;
	}

	.search-btn {
	width: 20%;
	height: 40px;
	padding: 10px 20px;
	border: none;
	outline: none;
	cursor: pointer;
	background: #383838;
	color: #fff;
	text-transform: capitalize;
	font-size: 15px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	}

	.search-box::placeholder {
	color: #a9a9a9;
	}

	.nav-items a {
	margin-left: 25px;
	}

	.nav-items a i {
	width: 30px;
	color: #242221;
	}

	.links-container {
	width: 100%;
	display: flex;
	padding: 10px 10vw;
	justify-content: center;
	list-style: none;
	border-top: 1px solid #d1d1d1;
	}

	.link {
	text-transform: capitalize;
	padding: 0 10px;
	margin: 0 5px;
	text-decoration: none;
	color: #383838;
	opacity: 0.5;
	transition: .5s;
	}

	.link:hover {
	opacity: 1;
	}

	/* Product */

	.product {
	position: relative;
	overflow: hidden;
	padding: 20px 0;
	}

	.product-category {
	padding: 0 10vw;
	font-size: 30px;
	font-weight: 500;
	margin-bottom: 40px;
	text-transform: capitalize;
	}

	.product-container {
	padding: 0 10vw;
	display: flex;
	overflow-x: auto;
	scroll-behavior: smooth;
	}

	.product-container::-webkit-scrollbar {
	display: none;
	}

	.product-card {
	flex: 0 0 auto;
	width: 250px;
	height: 450px;
	margin-right: 40px;
	}

	.product-image {
	position: relative;
	width: 100%;
	height: 350px;
	overflow: hidden;
	}

	.product-thumb {
	width: 100%;
	height: 350px;
	object-fit: cover;
	}

	.discount-tag {
	position: absolute;
	background: #fff;
	padding: 5px;
	border-radius: 5px;
	color: #ff7d7d;
	right: 10px;
	top: 10px;
	text-transform: capitalize;
	}

	.card-btn {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	padding: 10px;
	width: 90%;
	text-transform: capitalize;
	border: none;
	outline: none;
	background: #fff;
	border-radius: 5px;
	transition: 0.5s;
	cursor: pointer;
	opacity: 0;
	}

	.product-card:hover, .card-btn {
	opacity: 1;
	}

	.card-btn:hover {
	background: #efefef;
	}

	.product-info {
	width: 100%;
	height: 100px;
	padding-top: 10px;
	}

	.product-brand {
	text-transform: uppercase;
	}

	.product-short-des {
	width: 100%;
	height: 20px;
	line-height: 20px;
	overflow: hidden;
	opacity: 0.8;
	text-transform: capitalize;
	margin: 5px 0;
	}

	.price {
	font-weight: 900;
	font-size: 20px;
	}

	.actual-price {
	margin-left: 10px;
	opacity: 0.5;
	text-decoration: line-through;
	}

	.pre-btn, .nxt-btn {
	border: none;
	width: 10vw;
	height: 100%;
	position: absolute;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
	cursor: pointer;
	z-index: 8;
	}

	.pre-btn {
	left: 0;
	transform: rotate(180deg);
	}

	.nxt-btn {
	right: 0;
	}

	.pre-btn i, .nxt-btn i {
	transition: 0.3s;
	opacity: 0.2;
	}

	.pre-btn:hover i, .nxt-btn:hover i {
	transition: 0.3s;
	opacity: 1;
	}

	footer {
	position: relative;
	width: 100%;
	margin-top: 50px;
	padding: 30px 10vw;
	padding-bottom: 70px;
	background: #383838;
	}

	.footer-content {
	display: flex;
	width: 100%;
	justify-content: space-between;
	}

	.footer-content h1 {
	color: #fff;
	text-transform: capitalize;
	}

	.footer-content a {
	text-decoration: none;
	}

	.footer-socialmedia {
	position: absolute;
	display: flex;
	margin-top: 75px;
	margin-left: -40px;
	}

	.footer-content i {
	color: #fff;
	margin-left: 40px;
	}

	.footer-ul-container {
	width: 45%;
	display: flex;
	justify-content: space-between;
	}

	.category {
	width: 200px;
	margin-bottom: 20px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
	list-style: none;
	}

	.category-title {
	grid-column: span 2;
	text-transform: capitalize;
	color: #fff;
	font-size: 20px;
	margin-bottom: 20px;
	}

	.category .footer-link {
	text-decoration: none;
	text-transform: capitalize;
	color: rgba(255, 255, 255, 0.75);
	}

	.footer-link:hover {
	color: #fff;
	}

	.info {
	color: rgba(255, 255, 255, 0.75);
	margin: 20px 0;
	text-transform: capitalize;
	}

	.footer-credit {
	width: 100%;
	padding: 10px;
	position: absolute;
	left: 0;
	bottom: 0;
	text-align: center;
	color: #fff;
	background: rgba(0, 0, 0, 0.2);
	}

view raw style.css hosted with ❤ by GitHub

main.js

	const productContainers = [...document.querySelectorAll('.product-container')];
	const preBtn = [...document.querySelectorAll('.pre-btn')];
	const nxtBtn = [...document.querySelectorAll('.nxt-btn')];

	productContainers.forEach((item, i) => {
	let containerDimensions = item.getBoundingClientRect();
	let containerWidth = containerDimensions.width;

	nxtBtn[i].addEventListener('click', ()=> {
	item.scrollLeft += containerWidth;
	})

	preBtn[i].addEventListener('click', ()=> {
	item.scrollLeft -= containerWidth;
	})
	})

view raw main.js hosted with ❤ by GitHub

WOTS BLOG

Cari Blog Ini