Tugas 4 - Catalog Product – Christopher Baptista

Pada pertemuan ketiga kelas PWEB-D, tiap mahasiswa diberikan tugas untuk membuat Katalog Produk. Contoh website katalog produk terdapat pada link berikut.
Di sini saya membuat Responsive Catalog Product Website menggunakan HTML & Bootstrap CSS. Halaman Website Katalog Produk dapat diakses melalui website produk here.
Seluruh source code pada website ini dapat diakses melalui source code here.
Tampilan Website

Di bawah ini merupakan tampilan Halaman Produk dari Website Katalog Produk yang saya buat. Home menjadi halaman utama ketika website diakses. Selain Home, juga terdapat halaman form transaksi dan sukses setelah melakukan checkout.
Tampilan Form Pemesanan

Di bawah ini merupakan tampilan form pemesanan produk.
Tampilan Sukses Checkout

Di bawah ini merupakan tampilan sukses checkout setelah pembeli selesai mengisi form pemesanan dan melakukan submit telah membayar.
Lainnya

Selain tiga halaman utama, pada navigasi juga terdapat cart (keranjang belanja) yang menampilkan produk pesanan saat logo dihover.
Source Code

Di bawah ini merupakan code pada bagian body index.html.
index.html
<nav class="navbar fixed-top navbar-expand-lg navbar-dark p-md-3">
        <div class="container">
          <a class="navbar-brand" href="#">ProductZone</a>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
  
          <div class="collapse navbar-collapse" id="navbarNav">
            <div class="mx-auto"></div>
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link text-white" href="index.html">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link text-white" href="#">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link text-white" href="#">Contact</a>
              </li>
            </ul>
            <div class="inner-header">
                        <ul class="nav-right">
                            <li class="cart-icon">
                                <a href="#">
                                    <i class="icon_cart_alt" style="color: #ffff;"></i>
                                    <span>3</span>
                                </a>
                                <div class="cart-hover">
                                    <div class="select-items">
                                        <table>
                                            <tbody>
                                                <tr>
                                                    <td class="si-pic">
                                                        <img src="img/select-product-1.jpg" alt="" />
                                                    </td>
                                                    <td class="si-text">
                                                        <div class="product-selected">
                                                            <p>Rp120.000 x 1</p>
                                                            <h6>Casual Jacket</h6>
                                                        </div>
                                                    </td>
                                                    <td class="si-close">
                                                        <i class="ti-close"></i>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="si-pic">
                                                        <img src="img/select-product-2.jpg" alt="" />
                                                    </td>
                                                    <td class="si-text">
                                                        <div class="product-selected">
                                                            <p>Rp120.000 x 1</p>
                                                            <h6>Yellow Shirt</h6>
                                                        </div>
                                                    </td>
                                                    <td class="si-close">
                                                        <i class="ti-close"></i>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="select-total">
                                        <span>total:</span>
                                        <h5>Rp240.000</h5>
                                    </div>
                                    <div class="select-button">
                                        <!-- <a href="#" class="primary-btn view-card">VIEW CARD</a> -->
                                        <a href="shopping-cart.html" class="primary-btn checkout-btn">CHECK OUT</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                </div>
          </div>
        </div>
      </nav>

    <!-- Product Shop Section Begin -->
    <div class="product-section">
        <div class="card mx-5 my-5">
            <section class="product-shop spad page-details">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="product-pic-zoom">
                                        <img class="product-big-img" src="img/product-single/tab-desc.jpg" alt="" />
                                    </div>
                                    <div>
                                        <div class="ps-slider owl-carousel">
                                            <div class="pt active" data-imgbigurl="img/product-single/tab-desc.jpg">
                                                <img src="img/product-single/tab-desc.jpg" alt="" />
                                            </div>
        
                                            <div class="pt" data-imgbigurl="img/product-single/tab-desc.jpg">
                                                <img src="img/product-single/tab-desc.jpg" alt="" />
                                            </div>
        
                                            <div class="pt" data-imgbigurl="img/product-single/tab-desc.jpg">
                                                <img src="img/product-single/tab-desc.jpg" alt="" />
                                            </div>
        
                                            <div class="pt" data-imgbigurl="img/product-single/tab-desc.jpg">
                                                <img src="img/product-single/tab-desc.jpg" alt="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="product-details">
                                        <div class="pd-title">
                                            <span>Shirt</span>
                                            <h3>Classic Style</h3>
                                        </div>
                                        <div class="pd-desc px-2" style="text-align: justify;">
                                            <p>
                                                <b>Bahan : </b>Kain Linen <br>
                                                <b>Warna : </b>Abu-abu <br>
                                            </p>
                                            <p>
                                                Lengkapi style kamu dengan baju classic terbaru. Karakteristik bahan yaitu kain linen yang sangat identik dengan sifat lembut dan dingin ketika digunakan.
                                                Bahan pakaian ini juga memiliki serat yang lebih kuat dari kain katun.
                                            </p>
                                            <h4>Rp200.000</h4>
                                        </div>
                                        <div class="quantity">
                                            <a href="shopping-cart.html" class="primary-btn pd-cart">Add To Cart</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <div class="card mx-5 my-5">
            <section class="product-shop spad page-details">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="product-pic-zoom">
                                        <img class="product-big-img" src="img/product-single/product-1.jpg" alt="" />
                                    </div>
                                    <div>
                                        <div class="ps-slider owl-carousel">
                                            <div class="pt active" data-imgbigurl="img/product-single/product-1.jpg">
                                                <img src="img/product-single/product-1.jpg" alt="" />
                                            </div>
        
                                            <div class="pt" data-imgbigurl="img/product-single/product-1.jpg">
                                                <img src="img/product-single/product-1.jpg" alt="" />
                                            </div>
        
                                            <div class="pt" data-imgbigurl="img/product-single/product-1.jpg">
                                                <img src="img/product-single/product-1.jpg" alt="" />
                                            </div>
        
                                            <div class="pt" data-imgbigurl="img/product-single/product-1.jpg">
                                                <img src="img/product-single/product-1.jpg" alt="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="product-details">
                                        <div class="pd-title">
                                            <span>Jacket</span>
                                            <h3>Casual Jacket</h3>
                                        </div>
                                        <div class="pd-desc" style="text-align: justify; padding-right: 15px;">
                                            <p>
                                                <b>Bahan : </b>Kain Polyester <br>
                                                <b>Warna : </b>Toska <br>
                                            </p>
                                            <p>
                                                Model jaket terbaru yang bikin kamu makin kece abis. Harga terjangkau dan bahan kain ini tidak mudah kusut.
                                            </p>
                                            <h4>Rp350.000</h4>
                                        </div>
                                        <div class="quantity">
                                            <a href="shopping-cart.html" class="primary-btn pd-cart">Add To Cart</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <div class="card mx-5 my-5">
            <section class="product-shop spad page-details">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="product-pic-zoom">
                                        <img class="product-big-img" src="img/products/man-large.jpg" alt="" />
                                    </div>
                                    <div>
                                        <div class="ps-slider owl-carousel">
                                            <div class="pt active" data-imgbigurl="img/products/man-large.jpg">
                                                <img src="img/products/man-large.jpg" alt="" />
                                            </div>
        
                                            <div class="pt" data-imgbigurl="img/products/man-large.jpg">
                                                <img src="img/products/man-large.jpg" alt="" />
                                            </div>
        
                                            <div class="pt" data-imgbigurl="img/products/man-large.jpg">
                                                <img src="img/products/man-large.jpg" alt="" />
                                            </div>
        
                                            <div class="pt" data-imgbigurl="img/products/man-large.jpg">
                                                <img src="img/products/man-large.jpg" alt="" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="product-details">
                                        <div class="pd-title">
                                            <span>Jacket</span>
                                            <h3>Korean Style</h3>
                                        </div>
                                        <div class="pd-desc" style="text-align: justify; padding-right: 15px;">
                                            <p>
                                                <b>Bahan : </b>Kain Katun <br>
                                                <b>Warna : </b>Copper <br>
                                            </p>
                                            <p>
                                                Nikmati gaya terbaru layaknya artis korea. Dengan style jaket ini kamu bisa tampil makin keren di hadapan siapapun. Pesan sekarang juga!
                                            </p>
                                            <h4>Rp495.000</h4>
                                        </div>
                                        <div class="quantity">
                                            <a href="shopping-cart.html" class="primary-btn pd-cart">Add To Cart</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <!-- Product Shop Section End -->

    <!-- Footer Section Begin -->
    <footer>
        <div class="copyright-reserved">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="copyright-text">
                            Copyright &copy;
                            <script>
                                document.write(new Date().getFullYear());
                            </script>
                             | Christopher Baptista
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- Footer Section End -->
Resource

Github Repository
Tugas 4 - Catalog Product
