812 lines
36 KiB
PHP
812 lines
36 KiB
PHP
<section class="py-3 bg-white" id="daftarpakaian">
|
|
<div class="container">
|
|
<div class="row justify-content-center text-center">
|
|
<div class="col-lg-8 mb-3">
|
|
<h2 class="fw-bold">Daftar Pakaian</h2>
|
|
<p class="text-muted">
|
|
Temukan beragam busana seperti dress, blouse, cardigan, celana, dan rok. Dirancang dengan berbagai model dan warna, cocok untuk gaya kasual hingga acara khusus.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab Navigasi -->
|
|
<div class="row justify-content-center mb-4">
|
|
<div class="col-auto">
|
|
<ul class="nav nav-pills gap-2 justify-content-center" id="pakaianTab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="dress-tab" data-bs-toggle="tab" data-bs-target="#dress" type="button" role="tab">Dress</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="blouse-tab" data-bs-toggle="tab" data-bs-target="#blouse" type="button" role="tab">Blouse</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="cardigan-tab" data-bs-toggle="tab" data-bs-target="#cardigan" type="button" role="tab">Cardigan</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="rok-tab" data-bs-toggle="tab" data-bs-target="#rok" type="button" role="tab">Rok</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="celana-tab" data-bs-toggle="tab" data-bs-target="#celana" type="button" role="tab">Celana</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Isi Tab -->
|
|
<div class="tab-content" id="pakaianTabContent">
|
|
|
|
<!-- Dress (active tab) -->
|
|
<div class="tab-pane fade show active" id="dress" role="tabpanel" aria-labelledby="dress-tab">
|
|
<div class="container">
|
|
<div class="row g-3 gy-4 justify-content-center">
|
|
|
|
<!-- Card Dress 1 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card border-0 shadow-sm h-100 card-hover">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/annelisedress.jpg" class="card-img-top img-fluid hover-zoom" alt="Dress 1">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Annelise Dress</h6>
|
|
<p class="text-muted small mb-1">
|
|
Dress cantik dengan potongan elegan, cocok untuk acara semi-formal atau hangout santai.
|
|
</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 185.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Dress 2 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card border-0 shadow-sm h-100 card-hover">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/daisysilkdress.jpg" class="card-img-top img-fluid hover-zoom" alt="Dress 2">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Daisy Silk Dress</h6>
|
|
<p class="text-muted small mb-1">Dress berbahan silk lembut, memberikan kesan mewah dan anggun saat dipakai.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 189.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Dress 3 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card border-0 shadow-sm h-100 card-hover">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/edeliadress.jpg" class="card-img-top img-fluid hover-zoom" alt="Dress 3">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Edelia Dress</h6>
|
|
<p class="text-muted small mb-1">Dress feminin dengan detail renda, cocok untuk tampilan anggun dan stylish.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 269.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Dress 4 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card border-0 shadow-sm h-100 card-hover">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/embroiderytunik.jpg" class="card-img-top img-fluid hover-zoom" alt="Dress 4">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Embroidery Tunik</h6>
|
|
<p class="text-muted small mb-1">Tunik dengan bordir cantik yang memberikan nuansa etnik dan elegan.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 249.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Dress 5 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card border-0 shadow-sm h-100 card-hover">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/shimmerraya.jpg" class="card-img-top img-fluid hover-zoom" alt="Dress 5">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Shimmer Raya Dress</h6>
|
|
<p class="text-muted small mb-1">Dress dengan efek shimmer elegan, ideal untuk momen spesial seperti lebaran atau pesta malam.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 189.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Dress 6 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card border-0 shadow-sm h-100 card-hover">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/elenadress.jpg" class="card-img-top img-fluid hover-zoom" alt="Dress 6">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Elena Dress</h6>
|
|
<p class="text-muted small mb-1">Gaya simpel nan chic, cocok untuk daily wear maupun acara santai.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 189.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Dress 7 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card border-0 shadow-sm h-100 card-hover">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/asterdress.jpg" class="card-img-top img-fluid hover-zoom" alt="Dress 7">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Aster Dress</h6>
|
|
<p class="text-muted small mb-1">Dress floral dengan desain flowy, memberikan kesan segar dan feminin.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 179.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Dress 8 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card border-0 shadow-sm h-100 card-hover">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/orchidflowy.jpg" class="card-img-top img-fluid hover-zoom" alt="Dress 8">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Orchid Flowy Dress</h6>
|
|
<p class="text-muted small mb-1">Dress longgar dengan potongan flowy, cocok untuk gaya kasual elegan.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 179.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Dress 9 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card border-0 shadow-sm h-100 card-hover">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/adelinedress.jpg" class="card-img-top img-fluid hover-zoom" alt="Dress 9">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Adeline Dress</h6>
|
|
<p class="text-muted small mb-1">Dress klasik dengan siluet ramping yang memberi kesan elegan dan dewasa.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 189.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Dress 10 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card border-0 shadow-sm h-100 card-hover">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/daphnedress.jpg" class="card-img-top img-fluid hover-zoom" alt="Dress 10">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Daphne Dress</h6>
|
|
<p class="text-muted small mb-1">Dress glamor dengan detail elegan, cocok untuk acara formal atau pesta malam.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 269.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Blouse -->
|
|
<div class="tab-pane fade" id="blouse" role="tabpanel" aria-labelledby="blouse-tab">
|
|
<div class="container">
|
|
<div class="row g-3 gy-4 justify-content-center">
|
|
|
|
<!-- Card Blouse 1 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/arianablouse.jpg" class="card-img-top img-fluid hover-zoom" alt="Blouse 1">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Ariana Blouse</h6>
|
|
<p class="small mb-1">Blouse elegan dengan sentuhan feminin dan detail ruffle yang anggun.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 159.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Blouse 2 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/charlotteblouse.jpg" class="card-img-top img-fluid hover-zoom" alt="Blouse 2">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Charlotte Blouse</h6>
|
|
<p class="small mb-1">Desain simple namun elegan dengan bahan adem dan nyaman dikenakan seharian.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 139.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Blouse 3 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/keirablouse.jpg" class="card-img-top img-fluid hover-zoom" alt="Blouse 3">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Keira Blouse</h6>
|
|
<p class="small mb-1">Blouse klasik dengan detail lipit dan bahan flowy yang elegan.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 125.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Blouse 4 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/aurelieblouse.jpg" class="card-img-top img-fluid hover-zoom" alt="Blouse 4">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Aurelie Blouse</h6>
|
|
<p class="small mb-1">Tampil chic dengan blouse berpotongan loose dan motif lembut yang manis.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 120.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Blouse 5 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/elynalace.jpg" class="card-img-top img-fluid hover-zoom" alt="Blouse 5">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Elyna Lace Blouse</h6>
|
|
<p class="small mb-1">Blouse dengan aksen renda klasik yang memberikan kesan feminin dan anggun.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 129.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Blouse 6 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/louisablouse.jpg" class="card-img-top img-fluid hover-zoom" alt="Blouse 6">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Louisa Blouse</h6>
|
|
<p class="small mb-1">Model simpel dengan warna solid yang cocok dipadukan dengan berbagai bawahan.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 109.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Blouse 7 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/azuraetnic.jpg" class="card-img-top img-fluid hover-zoom" alt="Blouse 7">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Azura Etnic Blouse</h6>
|
|
<p class="small mb-1">Sentuhan etnik yang unik dengan kombinasi motif dan warna menarik.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 125.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Blouse 8 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/freyaetnic.jpg" class="card-img-top img-fluid hover-zoom" alt="Blouse 8">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Freya Etnic Blouse</h6>
|
|
<p class="small mb-1">Blouse etnik modern dengan bahan ringan dan nyaman untuk sehari-hari.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 139.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Blouse 9 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/celiablouse.jpg" class="card-img-top img-fluid hover-zoom" alt="Blouse 9">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Celia Blouse</h6>
|
|
<p class="small mb-1">Blouse casual yang cocok dipakai ke kantor ataupun hangout santai.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 129.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Blouse 10 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/elaineblouse.jpg" class="card-img-top img-fluid hover-zoom" alt="Blouse 10">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Elaine Blouse</h6>
|
|
<p class="small mb-1">Tampil stylish dan tetap sopan dengan blouse berkerah lembut dan potongan flowy.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 128.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cardigan -->
|
|
<div class="tab-pane fade" id="cardigan" role="tabpanel" aria-labelledby="cardigan-tab">
|
|
<div class="container">
|
|
<div class="row g-3 gy-4 justify-content-center">
|
|
|
|
<!-- Cardigan 1 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/brielleribbon.jpg" class="card-img-top img-fluid hover-zoom" alt="Cardigan 1">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Brielle Ribbon Cardigan</h6>
|
|
<p class="small mb-1">Cardigan manis dengan detail pita untuk tampilan girly yang chic.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 130.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cardigan 2 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/rubycardigan.jpg" class="card-img-top img-fluid hover-zoom" alt="Cardigan 2">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Ruby Cardigan</h6>
|
|
<p class="small mb-1">Warna merah yang bold dengan desain simple dan elegan.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 139.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cardigan 3 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/roseknit.jpg" class="card-img-top img-fluid hover-zoom" alt="Cardigan 3">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Rose Knit Cardigan</h6>
|
|
<p class="small mb-1">Cardigan rajut lembut yang cocok untuk suasana santai dan hangat.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 120.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cardigan 4 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/camelliacardigan.jpg" class="card-img-top img-fluid hover-zoom" alt="Cardigan 4">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Camellia Cardigan</h6>
|
|
<p class="small mb-1">Gaya feminin dengan potongan loose dan aksen floral cantik.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 169.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cardigan 5 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/cholecardigan.jpg" class="card-img-top img-fluid hover-zoom" alt="Cardigan 5">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Chole Cardigan</h6>
|
|
<p class="small mb-1">Tampil stylish dan cozy dengan desain minimalis nan modis.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 189.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cardigan 6 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/jadestripes.jpg" class="card-img-top img-fluid hover-zoom" alt="Cardigan 6">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Jade Stripes Cardigan</h6>
|
|
<p class="small mb-1">Cardigan bergaris klasik dengan kesan kasual yang kekinian.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 139.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cardigan 7 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/giselleknit.jpg" class="card-img-top img-fluid hover-zoom" alt="Cardigan 7">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Giselle Knit Top</h6>
|
|
<p class="small mb-1">Blouse rajut modis yang cocok untuk layer outfit harian.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 149.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cardigan 8 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/stripesfur.jpg" class="card-img-top img-fluid hover-zoom" alt="Cardigan 8">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Stripes Fur Cardigan</h6>
|
|
<p class="small mb-1">Cardigan berbulu halus dengan motif garis untuk tampilan cozy.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 149.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cardigan 9 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/polostripes.jpg" class="card-img-top img-fluid hover-zoom" alt="Cardigan 9">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Polo Stripes Knit</h6>
|
|
<p class="small mb-1">Cardigan dengan kerah polo dan motif stripes yang sporty casual.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 169.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cardigan 10 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/ribbonfur.jpg" class="card-img-top img-fluid hover-zoom" alt="Cardigan 10">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Ribbon Fur Cardigan</h6>
|
|
<p class="small mb-1">Sentuhan bulu halus dan aksen pita menjadikan cardigan ini elegan dan unik.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 169.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rok -->
|
|
<div class="tab-pane fade" id="rok" role="tabpanel" aria-labelledby="rok-tab">
|
|
<div class="container">
|
|
<div class="row g-3 gy-4 justify-content-center">
|
|
|
|
<!-- Rok 1 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/knitskirt.jpg" class="card-img-top img-fluid hover-zoom" alt="Knit Skirt">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Knit Skirt</h6>
|
|
<p class="small mb-1">Rok rajut lembut dan nyaman untuk gaya kasual harian.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 149.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rok 2 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/kireiflare.jpg" class="card-img-top img-fluid hover-zoom" alt="Kirei Flare Skirt">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Kirei Flare Skirt</h6>
|
|
<p class="small mb-1">Rok flare dengan potongan anggun dan flowy, cocok untuk hangout.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 169.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rok 3 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/mermaidjeans.jpg" class="card-img-top img-fluid hover-zoom" alt="Mermaid Jeans Skirt">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Mermaid Jeans Skirt</h6>
|
|
<p class="small mb-1">Rok denim model duyung yang feminin dan trendi.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 169.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rok 4 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/vionamermaid.jpg" class="card-img-top img-fluid hover-zoom" alt="Viona Mermaid Skirt">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Viona Mermaid Skirt</h6>
|
|
<p class="small mb-1">Rok potongan duyung dengan bahan ringan dan jatuh.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 139.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rok 5 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/floralskirt.jpg" class="card-img-top img-fluid hover-zoom" alt="Floral Skirt">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Floral Skirt</h6>
|
|
<p class="small mb-1">Motif bunga manis untuk tampilan feminin dan segar.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 109.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rok 6 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/fleurskirt.jpg" class="card-img-top img-fluid hover-zoom" alt="Fleur Embroidery Skirt">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Fleur Embroidery Skirt</h6>
|
|
<p class="small mb-1">Detail bordir bunga elegan dan classy.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 139.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rok 7 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/belleskirt.jpg" class="card-img-top img-fluid hover-zoom" alt="Belle Skirt">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Belle Skirt</h6>
|
|
<p class="small mb-1">Desain simpel dan manis, mudah dipadu-padankan.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 105.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rok 8 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/mermaidskirt.jpg" class="card-img-top img-fluid hover-zoom" alt="Mermaid Skirt">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Mermaid Skirt</h6>
|
|
<p class="small mb-1">Potongan mermaid yang mempercantik siluet tubuh.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 120.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rok 9 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/silkruffle.jpg" class="card-img-top img-fluid hover-zoom" alt="Silk Ruffle Skirt">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Silk Ruffle Skirt</h6>
|
|
<p class="small mb-1">Rok sutra dengan detail ruffle yang lembut dan elegan.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 120.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rok 10 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/arabellaruffle.jpg" class="card-img-top img-fluid hover-zoom" alt="Arabella Ruffle Skirt">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Arabella Ruffle Skirt</h6>
|
|
<p class="small mb-1">Rok detail ruffle manis dengan potongan feminin.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 116.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Celana -->
|
|
<div class="tab-pane fade" id="celana" role="tabpanel" aria-labelledby="celana-tab">
|
|
<div class="container">
|
|
<div class="row g-3 gy-4 justify-content-center">
|
|
|
|
<!-- Celana 1 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/cutbrayjeans.jpg" class="card-img-top img-fluid hover-zoom" alt="Cutbray Jeans Pants">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Cutbray Jeans Pants</h6>
|
|
<p class="small mb-1">Celana jeans model cutbray yang unik dan stylish.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 159.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Celana 2 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/anneflare.jpg" class="card-img-top img-fluid hover-zoom" alt="Anne Flare Jeans">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Anne Flare Jeans</h6>
|
|
<p class="small mb-1">Jeans flare yang mempertegas siluet kaki, cocok untuk OOTD.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 169.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Celana 3 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/cutbraypants.jpg" class="card-img-top img-fluid hover-zoom" alt="Cutbray Pants">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Cutbray Pants</h6>
|
|
<p class="small mb-1">Potongan klasik cutbray untuk tampilan retro modern.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 109.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Celana 4 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/laurahighwaist.jpg" class="card-img-top img-fluid hover-zoom" alt="Laura Highwaist Pants">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Laura Highwaist Pants</h6>
|
|
<p class="small mb-1">Model highwaist elegan yang cocok untuk kerja maupun santai.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 149.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Celana 5 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/flowypants.jpg" class="card-img-top img-fluid hover-zoom" alt="Flowy Pants">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Flowy Pants</h6>
|
|
<p class="small mb-1">Celana longgar dengan bahan ringan dan jatuh.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 109.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Celana 6 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/casualpants.jpg" class="card-img-top img-fluid hover-zoom" alt="Casual Pants">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Casual Pants</h6>
|
|
<p class="small mb-1">Gaya kasual yang fleksibel untuk sehari-hari.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 109.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Celana 7 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/celinepants.jpg" class="card-img-top img-fluid hover-zoom" alt="Celine Pants">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Celine Pants</h6>
|
|
<p class="small mb-1">Celana dengan potongan rapi dan bahan adem.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 149.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Celana 8 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/pleatedpants.jpg" class="card-img-top img-fluid hover-zoom" alt="Pleated Pants">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Pleated Pants</h6>
|
|
<p class="small mb-1">Detail pleats manis yang memberi kesan chic.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 99.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Celana 9 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/irispants.jpg" class="card-img-top img-fluid hover-zoom" alt="Iris Pants">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Iris Pants</h6>
|
|
<p class="small mb-1">Tampilan santai namun tetap fashionable.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 120.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Celana 10 -->
|
|
<div class="col-6 col-sm-4 col-md-2">
|
|
<div class="card card-hover border-0 shadow-sm h-100">
|
|
<div class="overflow-hidden rounded-top">
|
|
<img src="assets/img/scubapants.jpg" class="card-img-top img-fluid hover-zoom" alt="Scuba Pants">
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<h6 class="card-title mb-1">Scuba Pants</h6>
|
|
<p class="small mb-1">Celana scuba elastis dan nyaman untuk aktivitas harian.</p>
|
|
<p class="fw-semibold text-primary mb-0">Rp. 99.000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tambahkan tab-pane lainnya seperti rok, celana, dll dengan class "fade" tanpa "show active" -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.nav-pills .nav-link.active {
|
|
background-color: #4caf50 !important; /* Bootstrap 'success' green */
|
|
color: #fff !important;
|
|
}
|
|
|
|
.nav-pills .nav-link {
|
|
color: #000; /* Warna teks normal */
|
|
}
|
|
|
|
.card-hover {
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.card-hover:hover {
|
|
transform: translateY(-5px) scale(1.02);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.hover-zoom {
|
|
transition: transform 0.4s ease;
|
|
}
|
|
.card-hover:hover .hover-zoom {
|
|
transform: scale(1.1);
|
|
}
|
|
</style>
|