Home / HTML / Membuat Struktur HTML untuk Website E-commerce

Membuat Struktur HTML untuk Website E-commerce

Created at by Aris Munandar
Share on

Membangun website e-commerce yang profesional dimulai dari fondasi yang kuat, yaitu struktur HTML yang baik dan terorganisir. Dalam panduan ini, Anda akan mempelajari cara membuat struktur HTML untuk website e-commerce dari nol menggunakan HTML5 dan CSS3, tanpa bergantung pada CMS atau platform siap pakai.

Struktur HTML website e-commerce yang efektif tidak hanya membuat website Anda mudah dikelola, tetapi juga meningkatkan performa SEO, kecepatan loading, dan pengalaman pengguna. Artikel ini akan membahas struktur folder dan file HTML website e-commerce, contoh kode lengkap, serta best practice yang dapat Anda terapkan langsung untuk bisnis kecil maupun menengah.

Daftar isi

Baca juga: Membuat Template Web Company Profile Lengkap

Mengapa Struktur HTML Penting untuk Website E-commerce?

Sebelum memulai coding, penting untuk memahami mengapa struktur HTML yang baik sangat krusial:

  1. SEO Friendly – Mesin pencari lebih mudah mengindeks website dengan struktur HTML yang semantik dan terorganisir
  2. Responsif – Struktur HTML5 modern mendukung tampilan optimal di berbagai perangkat
  3. Maintainability – Kode yang terstruktur memudahkan pengembangan dan pemeliharaan jangka panjang
  4. Performance – Struktur yang efisien meningkatkan kecepatan loading website
  5. User Experience – Navigasi yang jelas dan layout yang konsisten meningkatkan konversi penjualan

Struktur Folder dan File HTML Website E-commerce

Langkah pertama dalam membuat struktur HTML website e-commerce adalah mengorganisir folder dan file. Berikut adalah struktur folder yang efektif untuk website e-commerce multi halaman:

ecommerce-website/
│
├── index.html                 # Halaman Home
├── product-detail.html        # Halaman Detail Produk
│
├── css/
│   └── style.css             # File CSS Utama (sudah termasuk responsive)
│
├── js/
│   └── script.js             # JavaScript untuk Interaktivitas
│
├── images/
│   ├── products/             # Gambar Produk
│   ├── icons/                # Icon Website
│   └── logo.png              # Logo Toko
│
└── assets/
    └── fonts/                # Font Custom (opsional)Code language: PHP (php)

Catatan Penting tentang Gambar:

  • Dalam demo ini, kami menggunakan gambar dari Unsplash (layanan gambar gratis) untuk kemudahan dan kecepatan development
  • Untuk project production, Anda sebaiknya:
    • Download gambar dan simpan di folder images/products/
    • Ganti URL Unsplash dengan path lokal, contoh: images/products/laptop-gaming.jpg
    • Optimasi gambar untuk web (compress, resize, gunakan format WebP)
    • Implementasi lazy loading untuk performa lebih baik

Struktur folder ini memisahkan konten berdasarkan fungsinya, membuat website lebih terorganisir dan mudah di-maintain.

Membuat Halaman Home Website E-commerce

Halaman home adalah pintu gerbang utama website e-commerce Anda. Halaman ini harus mencakup navigasi yang jelas, keranjang belanja, dan daftar produk yang menarik. Mari kita bahas setiap bagian secara detail.

1. Struktur Dasar HTML5

Setiap halaman HTML5 dimulai dengan deklarasi DOCTYPE dan struktur dasar berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Toko Online Modern - Belanja produk berkualitas dengan harga terbaik. Struktur HTML5 website e-commerce responsif dan SEO friendly.">
    <meta name="keywords" content="toko online, e-commerce, belanja online, produk berkualitas">
    <title>Toko Online Modern - Belanja Produk Berkualitas</title>
    <link rel="stylesheet" href="css/style.css">
</head>Code language: HTML, XML (xml)

Penjelasan:

  • <!DOCTYPE html> – Mendeklarasikan dokumen sebagai HTML5
  • <html lang="id"> – Menentukan bahasa halaman (Indonesia) untuk SEO
  • <meta charset="UTF-8"> – Encoding karakter untuk mendukung berbagai bahasa
  • <meta name="viewport"> – Membuat website responsif di berbagai perangkat
  • <meta name="description"> – Deskripsi untuk mesin pencari (penting untuk SEO)
  • <meta name="keywords"> – Kata kunci untuk SEO
  • <title> – Judul halaman yang muncul di tab browser
  • <link rel="stylesheet"> – Menghubungkan file CSS eksternal

2. Header dengan Navigasi dan Keranjang Belanja

Header adalah bagian paling atas website yang berisi logo, menu navigasi, search box, dan icon keranjang belanja:

<header class="main-header">
    <div class="container">
        <div class="header-content">
            <!-- Logo Toko -->
            <div class="logo">
                <h1>TokoKita</h1>
            </div>
            
            <!-- Menu Navigasi -->
            <nav class="main-navigation">
                <ul>
                    <li><a href="index.html" class="active">Beranda</a></li>
                    <li><a href="#products">Produk</a></li>
                    <li><a href="#categories">Kategori</a></li>
                    <li><a href="#about">Tentang</a></li>
                    <li><a href="#contact">Kontak</a></li>
                </ul>
            </nav>
            
            <!-- Search Box dan Keranjang -->
            <div class="header-actions">
                <div class="search-box">
                    <input type="search" placeholder="Cari produk...">
                    <button type="submit">🔍</button>
                </div>
                
                <div class="cart-icon">
                    <a href="#cart">
                        🛒 <span class="cart-count">0</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>Code language: JavaScript (javascript)

Penjelasan:

  • <header> – Tag semantik HTML5 untuk bagian header
  • .container – Class untuk membatasi lebar konten dan center alignment
  • .logo – Menampilkan nama atau logo toko
  • <nav> – Tag semantik untuk navigasi (bagus untuk SEO)
  • .search-box – Input pencarian produk
  • .cart-icon – Icon keranjang dengan counter jumlah item
  • .cart-count – Span untuk menampilkan jumlah produk di keranjang

3. Hero Section (Banner Utama)

Hero section adalah area besar di bawah header yang menarik perhatian pengunjung:

<section class="hero-section">
    <div class="container">
        <div class="hero-content">
            <h2>Selamat Datang di Toko Online Kami</h2>
            <p>Temukan produk berkualitas dengan harga terbaik</p>
            <a href="#products" class="btn-primary">Belanja Sekarang</a>
        </div>
    </div>
</section>Code language: HTML, XML (xml)

Penjelasan:

  • <section> – Tag semantik untuk mengelompokkan konten terkait
  • <h2> – Heading utama hero section
  • .btn-primary – Tombol Call-to-Action (CTA) yang mengarah ke section produk
  • Smooth scroll akan bekerja karena menggunakan anchor link #products

4. Section Daftar Produk

Ini adalah bagian paling penting di halaman home – menampilkan daftar produk dalam bentuk grid:

<section id="products" class="products-section">
    <div class="container">
        <h2 class="section-title">Produk Terbaru</h2>
        
        <div class="products-grid">
            <!-- Product Card 1 -->
            <article class="product-card">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1603302576837-37561b2e2302" alt="Laptop Gaming Modern">
                    <span class="badge-new">Baru</span>
                </div>
                <div class="product-info">
                    <h3 class="product-title">Laptop Gaming Modern</h3>
                    <p class="product-description">Laptop gaming dengan spesifikasi tinggi untuk performa maksimal</p>
                    <div class="product-price">
                        <span class="price-current">Rp 12.500.000</span>
                        <span class="price-original">Rp 15.000.000</span>
                    </div>
                    <div class="product-rating">
                        ⭐⭐⭐⭐⭐ <span>(128 ulasan)</span>
                    </div>
                    <a href="product-detail.html?id=1" class="btn-add-cart">Lihat Detail</a>
                </div>
            </article>
            
            <!-- Product Card 2, 3, 4... (struktur sama) -->
        </div>
    </div>
</section>Code language: JavaScript (javascript)

Penjelasan Struktur Product Card:

  • <article> – Tag semantik untuk konten independen (setiap produk)
  • .product-image – Container untuk gambar produk
  • .badge-new / .badge-sale – Label untuk produk baru atau diskon
  • alt attribute – Deskripsi gambar untuk SEO dan accessibility
  • .product-title – Nama produk menggunakan <h3>
  • .product-description – Deskripsi singkat produk
  • .product-price – Menampilkan harga saat ini dan harga asli (jika ada diskon)
  • .product-rating – Rating bintang dan jumlah ulasan
  • .btn-add-cart – Link menuju halaman detail produk

Footer berisi informasi tambahan tentang toko, layanan pelanggan, dan kontak:

<footer class="main-footer">
    <div class="container">
        <div class="footer-content">
            <div class="footer-section">
                <h3>Tentang Kami</h3>
                <p>TokoKita adalah platform e-commerce terpercaya yang menyediakan produk berkualitas dengan harga terbaik.</p>
            </div>
            
            <div class="footer-section">
                <h3>Layanan Pelanggan</h3>
                <ul>
                    <li><a href="#help">Pusat Bantuan</a></li>
                    <li><a href="#shipping">Pengiriman</a></li>
                    <li><a href="#returns">Pengembalian</a></li>
                    <li><a href="#payment">Metode Pembayaran</a></li>
                </ul>
            </div>
            
            <div class="footer-section">
                <h3>Hubungi Kami</h3>
                <ul>
                    <li>📧 Email: info@tokokita.com</li>
                    <li>📱 Telepon: (021) 1234-5678</li>
                    <li>📍 Jakarta, Indonesia</li>
                </ul>
            </div>
        </div>
        
        <div class="footer-bottom">
            <p>&copy; 2024 TokoKita. Semua hak dilindungi.</p>
        </div>
    </div>
</footer>Code language: HTML, XML (xml)

Penjelasan:

  • <footer> – Tag semantik untuk bagian footer
  • .footer-content – Grid layout untuk membagi footer menjadi beberapa kolom
  • .footer-section – Setiap kolom berisi informasi berbeda
  • .footer-bottom – Copyright dan informasi legal

6. Kode Lengkap Halaman Home (index.html)

Berikut adalah kode lengkap file index.html yang menggabungkan semua bagian yang telah dijelaskan di atas:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Toko Online Modern - Belanja produk berkualitas dengan harga terbaik. Struktur HTML5 website e-commerce responsif dan SEO friendly.">
    <meta name="keywords" content="toko online, e-commerce, belanja online, produk berkualitas">
    <title>Toko Online Modern - Belanja Produk Berkualitas</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- Header dengan Navigasi -->
    <header class="main-header">
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <h1>TokoKita</h1>
                </div>
                
                <nav class="main-navigation">
                    <ul>
                        <li><a href="index.html" class="active">Beranda</a></li>
                        <li><a href="#products">Produk</a></li>
                        <li><a href="#categories">Kategori</a></li>
                        <li><a href="#about">Tentang</a></li>
                        <li><a href="#contact">Kontak</a></li>
                    </ul>
                </nav>
                
                <div class="header-actions">
                    <div class="search-box">
                        <input type="search" placeholder="Cari produk...">
                        <button type="submit">🔍</button>
                    </div>
                    
                    <div class="cart-icon">
                        <a href="#cart">
                            🛒 <span class="cart-count">0</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero-section">
        <div class="container">
            <div class="hero-content">
                <h2>Selamat Datang di Toko Online Kami</h2>
                <p>Temukan produk berkualitas dengan harga terbaik</p>
                <a href="#products" class="btn-primary">Belanja Sekarang</a>
            </div>
        </div>
    </section>

    <!-- Products Section -->
    <section id="products" class="products-section">
        <div class="container">
            <h2 class="section-title">Produk Terbaru</h2>
            
            <div class="products-grid">
                <!-- Product Card 1 -->
                <article class="product-card">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1603302576837-37561b2e2302" alt="Laptop Gaming Modern">
                        <span class="badge-new">Baru</span>
                    </div>
                    <div class="product-info">
                        <h3 class="product-title">Laptop Gaming Modern</h3>
                        <p class="product-description">Laptop gaming dengan spesifikasi tinggi untuk performa maksimal</p>
                        <div class="product-price">
                            <span class="price-current">Rp 12.500.000</span>
                            <span class="price-original">Rp 15.000.000</span>
                        </div>
                        <div class="product-rating">
                            ⭐⭐⭐⭐⭐ <span>(128 ulasan)</span>
                        </div>
                        <a href="product-detail.html?id=1" class="btn-add-cart">Lihat Detail</a>
                    </div>
                </article>

                <!-- Product Card 2 -->
                <article class="product-card">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9" alt="Smartphone Premium">
                        <span class="badge-sale">Diskon 20%</span>
                    </div>
                    <div class="product-info">
                        <h3 class="product-title">Smartphone Premium</h3>
                        <p class="product-description">Smartphone dengan kamera 108MP dan layar AMOLED</p>
                        <div class="product-price">
                            <span class="price-current">Rp 8.000.000</span>
                            <span class="price-original">Rp 10.000.000</span>
                        </div>
                        <div class="product-rating">
                            ⭐⭐⭐⭐⭐ <span>(256 ulasan)</span>
                        </div>
                        <a href="product-detail.html?id=2" class="btn-add-cart">Lihat Detail</a>
                    </div>
                </article>

                <!-- Product Card 3 -->
                <article class="product-card">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e" alt="Headphone Wireless">
                    </div>
                    <div class="product-info">
                        <h3 class="product-title">Headphone Wireless</h3>
                        <p class="product-description">Headphone dengan noise cancelling dan baterai 30 jam</p>
                        <div class="product-price">
                            <span class="price-current">Rp 2.500.000</span>
                        </div>
                        <div class="product-rating">
                            ⭐⭐⭐⭐☆ <span>(89 ulasan)</span>
                        </div>
                        <a href="product-detail.html?id=3" class="btn-add-cart">Lihat Detail</a>
                    </div>
                </article>

                <!-- Product Card 4 -->
                <article class="product-card">
                    <div class="product-image">
                        <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30" alt="Smartwatch Fitness">
                        <span class="badge-new">Baru</span>
                    </div>
                    <div class="product-info">
                        <h3 class="product-title">Smartwatch Fitness</h3>
                        <p class="product-description">Smartwatch dengan fitur tracking kesehatan lengkap</p>
                        <div class="product-price">
                            <span class="price-current">Rp 3.200.000</span>
                        </div>
                        <div class="product-rating">
                            ⭐⭐⭐⭐⭐ <span>(174 ulasan)</span>
                        </div>
                        <a href="product-detail.html?id=4" class="btn-add-cart">Lihat Detail</a>
                    </div>
                </article>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="main-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>Tentang Kami</h3>
                    <p>TokoKita adalah platform e-commerce terpercaya yang menyediakan produk berkualitas dengan harga terbaik.</p>
                </div>
                
                <div class="footer-section">
                    <h3>Layanan Pelanggan</h3>
                    <ul>
                        <li><a href="#help">Pusat Bantuan</a></li>
                        <li><a href="#shipping">Pengiriman</a></li>
                        <li><a href="#returns">Pengembalian</a></li>
                        <li><a href="#payment">Metode Pembayaran</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3>Hubungi Kami</h3>
                    <ul>
                        <li>📧 Email: info@tokokita.com</li>
                        <li>📱 Telepon: (021) 1234-5678</li>
                        <li>📍 Jakarta, Indonesia</li>
                    </ul>
                </div>
            </div>
            
            <div class="footer-bottom">
                <p>&copy; 2024 TokoKita. Semua hak dilindungi.</p>
            </div>
        </div>
    </footer>

    <script src="js/script.js"></script>
</body>
</html>Code language: HTML, XML (xml)

Dengan kode lengkap di atas, Anda sudah memiliki halaman home yang fungsional dengan semua elemen penting untuk website e-commerce.

Berikut ini adalah hasil dari browser yang dibuat menggunakan kode html di atas.

Halaman index ecommerce dengan HTML

Membuat Halaman Detail Produk

Halaman detail produk menampilkan informasi lengkap tentang satu produk spesifik. Berikut struktur HTML halaman produk website e-commerce yang efektif:

1. Breadcrumb Navigation

Breadcrumb membantu pengguna memahami posisi mereka di website:

<nav class="breadcrumb">
    <div class="container">
        <ul>
            <li><a href="index.html">Beranda</a></li>
            <li><a href="index.html#products">Produk</a></li>
            <li><a href="#electronics">Elektronik</a></li>
            <li class="active">Laptop Gaming Modern</li>
        </ul>
    </div>
</nav>Code language: HTML, XML (xml)

Penjelasan:

  • Breadcrumb menunjukkan hierarki halaman
  • Bagus untuk SEO dan user experience
  • Class .active menandai halaman saat ini

2. Product Detail Grid

Layout dua kolom: gambar di kiri, informasi di kanan:

<div class="product-detail-grid">
    <!-- Kolom Kiri: Gambar Produk -->
    <div class="product-images">
        <div class="main-image">
            <img src="https://images.unsplash.com/photo-1603302576837-37561b2e2302" alt="Laptop Gaming Modern" id="mainProductImage">
        </div>
        <div class="thumbnail-images">
            <img src="https://images.unsplash.com/photo-1603302576837-37561b2e2302" alt="Tampilan 1" class="thumbnail active">
            <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45" alt="Tampilan 2" class="thumbnail">
            <img src="https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2" alt="Tampilan 3" class="thumbnail">
            <img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853" alt="Tampilan 4" class="thumbnail">
        </div>
    </div>
    
    <!-- Kolom Kanan: Informasi Produk -->
    <div class="product-detail-info">
        <!-- Konten detail produk -->
    </div>
</div>Code language: HTML, XML (xml)

Penjelasan:

  • .main-image – Gambar utama yang besar
  • .thumbnail-images – Gambar kecil yang bisa diklik untuk mengganti gambar utama
  • JavaScript akan menangani interaksi klik thumbnail

3. Informasi Produk Lengkap

<div class="product-detail-info">
    <h1 class="product-detail-title">Laptop Gaming Modern ROG Series</h1>
    
    <!-- Rating dan Ulasan -->
    <div class="product-rating-detail">
        <span class="stars">⭐⭐⭐⭐⭐</span>
        <span class="rating-score">4.8/5.0</span>
        <span class="review-count">(128 ulasan)</span>
        <span class="sold-count">| 450+ terjual</span>
    </div>

    <!-- Harga -->
    <div class="product-price-detail">
        <span class="price-current-large">Rp 12.500.000</span>
        <span class="price-original-large">Rp 15.000.000</span>
        <span class="discount-badge">Hemat 17%</span>
    </div>

    <!-- Deskripsi -->
    <div class="product-description-detail">
        <h2>Deskripsi Produk</h2>
        <p>Laptop gaming dengan performa tinggi yang dirancang untuk para gamers profesional dan content creator.</p>
    </div>

    <!-- Spesifikasi -->
    <div class="product-specifications">
        <h2>Spesifikasi</h2>
        <ul>
            <li><strong>Prosesor:</strong> Intel Core i9-13900HX</li>
            <li><strong>RAM:</strong> 32GB DDR5</li>
            <li><strong>Storage:</strong> 1TB NVMe SSD</li>
            <li><strong>Kartu Grafis:</strong> NVIDIA RTX 4080 12GB</li>
        </ul>
    </div>
</div>Code language: HTML, XML (xml)

4. Varian Produk dan Quantity Selector

<!-- Pilihan Varian -->
<div class="product-variants">
    <div class="variant-group">
        <label>Warna:</label>
        <div class="variant-options">
            <button class="variant-btn active">Hitam</button>
            <button class="variant-btn">Abu-abu</button>
            <button class="variant-btn">Putih</button>
        </div>
    </div>
</div>

<!-- Pemilih Jumlah -->
<div class="product-quantity">
    <label>Jumlah:</label>
    <div class="quantity-selector">
        <button class="qty-btn minus">-</button>
        <input type="number" value="1" min="1" max="10" class="qty-input">
        <button class="qty-btn plus">+</button>
    </div>
    <span class="stock-info">Stok: <strong>23 unit</strong></span>
</div>

<!-- Tombol Aksi -->
<div class="product-actions">
    <button class="btn-add-to-cart">🛒 Tambah ke Keranjang</button>
    <button class="btn-buy-now">⚡ Beli Sekarang</button>
    <button class="btn-wishlist">❤️</button>
</div>Code language: HTML, XML (xml)

Penjelasan:

  • .variant-btn – Tombol untuk memilih varian (warna, ukuran, dll)
  • .quantity-selector – Input untuk memilih jumlah produk
  • Tombol +/- untuk menambah/mengurangi jumlah
  • Tiga tombol aksi utama: tambah ke keranjang, beli langsung, dan wishlist

5. Section Ulasan Pelanggan

<div class="product-reviews">
    <h2>Ulasan Pelanggan</h2>
    
    <div class="review-summary">
        <div class="rating-overview">
            <div class="rating-score-large">4.8</div>
            <div class="stars-large">⭐⭐⭐⭐⭐</div>
            <p>Dari 128 ulasan</p>
        </div>
        
        <div class="rating-breakdown">
            <div class="rating-bar">
                <span>5 ⭐</span>
                <div class="bar"><div class="fill" style="width: 85%"></div></div>
                <span>109</span>
            </div>
            <!-- Rating 4, 3, 2, 1 bintang... -->
        </div>
    </div>

    <div class="reviews-list">
        <article class="review-item">
            <div class="review-header">
                <div class="reviewer-info">
                    <strong>Budi Santoso</strong>
                    <span class="verified">✓ Pembeli Terverifikasi</span>
                </div>
                <div class="review-date">15 Oktober 2024</div>
            </div>
            <div class="review-rating">⭐⭐⭐⭐⭐</div>
            <p class="review-text">Laptop gaming terbaik yang pernah saya beli!</p>
        </article>
    </div>
</div>Code language: HTML, XML (xml)

Penjelasan:

  • .review-summary – Ringkasan rating keseluruhan
  • .rating-breakdown – Bar chart menunjukkan distribusi rating
  • .reviews-list – Daftar ulasan individual dari pembeli
  • .verified – Badge untuk pembeli terverifikasi

6. Kode Lengkap Halaman Detail Produk (product-detail.html)

Berikut adalah kode lengkap file product-detail.html yang menggabungkan semua bagian yang telah dijelaskan:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Detail produk Laptop Gaming Modern - Spesifikasi lengkap, harga terbaik, dan ulasan pelanggan. Belanja sekarang di TokoKita.">
    <title>Laptop Gaming Modern - Detail Produk | TokoKita</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- Header dengan Navigasi -->
    <header class="main-header">
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <h1>TokoKita</h1>
                </div>
                
                <nav class="main-navigation">
                    <ul>
                        <li><a href="index.html">Beranda</a></li>
                        <li><a href="index.html#products">Produk</a></li>
                        <li><a href="#categories">Kategori</a></li>
                        <li><a href="#about">Tentang</a></li>
                        <li><a href="#contact">Kontak</a></li>
                    </ul>
                </nav>
                
                <div class="header-actions">
                    <div class="search-box">
                        <input type="search" placeholder="Cari produk...">
                        <button type="submit">🔍</button>
                    </div>
                    
                    <div class="cart-icon">
                        <a href="#cart">
                            🛒 <span class="cart-count">0</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Breadcrumb Navigation -->
    <nav class="breadcrumb">
        <div class="container">
            <ul>
                <li><a href="index.html">Beranda</a></li>
                <li><a href="index.html#products">Produk</a></li>
                <li><a href="#electronics">Elektronik</a></li>
                <li class="active">Laptop Gaming Modern</li>
            </ul>
        </div>
    </nav>

    <!-- Product Detail Section -->
    <section class="product-detail-section">
        <div class="container">
            <div class="product-detail-grid">
                <!-- Product Images -->
                <div class="product-images">
                    <div class="main-image">
                        <img src="https://images.unsplash.com/photo-1603302576837-37561b2e2302" alt="Laptop Gaming Modern" id="mainProductImage">
                    </div>
                    <div class="thumbnail-images">
                        <img src="https://images.unsplash.com/photo-1603302576837-37561b2e2302" alt="Tampilan 1" class="thumbnail active">
                        <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45" alt="Tampilan 2" class="thumbnail">
                        <img src="https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2" alt="Tampilan 3" class="thumbnail">
                        <img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853" alt="Tampilan 4" class="thumbnail">
                    </div>
                </div>

                <!-- Product Information -->
                <div class="product-detail-info">
                    <h1 class="product-detail-title">Laptop Gaming Modern ROG Series</h1>
                    
                    <div class="product-rating-detail">
                        <span class="stars">⭐⭐⭐⭐⭐</span>
                        <span class="rating-score">4.8/5.0</span>
                        <span class="review-count">(128 ulasan)</span>
                        <span class="sold-count">| 450+ terjual</span>
                    </div>

                    <div class="product-price-detail">
                        <span class="price-current-large">Rp 12.500.000</span>
                        <span class="price-original-large">Rp 15.000.000</span>
                        <span class="discount-badge">Hemat 17%</span>
                    </div>

                    <div class="product-description-detail">
                        <h2>Deskripsi Produk</h2>
                        <p>Laptop gaming dengan performa tinggi yang dirancang untuk para gamers profesional dan content creator. Dilengkapi dengan prosesor terbaru, kartu grafis powerful, dan sistem pendingin canggih untuk performa maksimal dalam waktu lama.</p>
                    </div>

                    <div class="product-specifications">
                        <h2>Spesifikasi</h2>
                        <ul>
                            <li><strong>Prosesor:</strong> Intel Core i9-13900HX</li>
                            <li><strong>RAM:</strong> 32GB DDR5</li>
                            <li><strong>Storage:</strong> 1TB NVMe SSD</li>
                            <li><strong>Kartu Grafis:</strong> NVIDIA RTX 4080 12GB</li>
                            <li><strong>Layar:</strong> 17.3" QHD 240Hz</li>
                            <li><strong>Baterai:</strong> 90Wh</li>
                            <li><strong>Berat:</strong> 2.8 kg</li>
                        </ul>
                    </div>

                    <div class="product-variants">
                        <div class="variant-group">
                            <label>Warna:</label>
                            <div class="variant-options">
                                <button class="variant-btn active">Hitam</button>
                                <button class="variant-btn">Abu-abu</button>
                                <button class="variant-btn">Putih</button>
                            </div>
                        </div>

                        <div class="variant-group">
                            <label>Kapasitas Storage:</label>
                            <div class="variant-options">
                                <button class="variant-btn">512GB</button>
                                <button class="variant-btn active">1TB</button>
                                <button class="variant-btn">2TB</button>
                            </div>
                        </div>
                    </div>

                    <div class="product-quantity">
                        <label>Jumlah:</label>
                        <div class="quantity-selector">
                            <button class="qty-btn minus">-</button>
                            <input type="number" value="1" min="1" max="10" class="qty-input">
                            <button class="qty-btn plus">+</button>
                        </div>
                        <span class="stock-info">Stok: <strong>23 unit</strong></span>
                    </div>

                    <div class="product-actions">
                        <button class="btn-add-to-cart">🛒 Tambah ke Keranjang</button>
                        <button class="btn-buy-now">⚡ Beli Sekarang</button>
                        <button class="btn-wishlist">❤️</button>
                    </div>

                    <div class="product-features">
                        <div class="feature-item">
                            <span class="icon">🚚</span>
                            <div>
                                <strong>Gratis Ongkir</strong>
                                <p>Untuk pembelian di atas Rp 500.000</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <span class="icon">🔒</span>
                            <div>
                                <strong>Pembayaran Aman</strong>
                                <p>Transaksi dijamin 100% aman</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <span class="icon">↩️</span>
                            <div>
                                <strong>Garansi 14 Hari</strong>
                                <p>Pengembalian mudah jika tidak sesuai</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Product Reviews Section -->
            <div class="product-reviews">
                <h2>Ulasan Pelanggan</h2>
                
                <div class="review-summary">
                    <div class="rating-overview">
                        <div class="rating-score-large">4.8</div>
                        <div class="stars-large">⭐⭐⭐⭐⭐</div>
                        <p>Dari 128 ulasan</p>
                    </div>
                    
                    <div class="rating-breakdown">
                        <div class="rating-bar">
                            <span>5 ⭐</span>
                            <div class="bar"><div class="fill" style="width: 85%"></div></div>
                            <span>109</span>
                        </div>
                        <div class="rating-bar">
                            <span>4 ⭐</span>
                            <div class="bar"><div class="fill" style="width: 10%"></div></div>
                            <span>13</span>
                        </div>
                        <div class="rating-bar">
                            <span>3 ⭐</span>
                            <div class="bar"><div class="fill" style="width: 3%"></div></div>
                            <span>4</span>
                        </div>
                        <div class="rating-bar">
                            <span>2 ⭐</span>
                            <div class="bar"><div class="fill" style="width: 1%"></div></div>
                            <span>1</span>
                        </div>
                        <div class="rating-bar">
                            <span>1 ⭐</span>
                            <div class="bar"><div class="fill" style="width: 1%"></div></div>
                            <span>1</span>
                        </div>
                    </div>
                </div>

                <div class="reviews-list">
                    <article class="review-item">
                        <div class="review-header">
                            <div class="reviewer-info">
                                <strong>Budi Santoso</strong>
                                <span class="verified">✓ Pembeli Terverifikasi</span>
                            </div>
                            <div class="review-date">15 Oktober 2024</div>
                        </div>
                        <div class="review-rating">⭐⭐⭐⭐⭐</div>
                        <p class="review-text">Laptop gaming terbaik yang pernah saya beli! Performa sangat kencang, bisa main game AAA dengan setting ultra tanpa lag. Sistem pendinginnya juga bagus, tidak terlalu panas saat digunakan lama. Highly recommended!</p>
                    </article>

                    <article class="review-item">
                        <div class="review-header">
                            <div class="reviewer-info">
                                <strong>Siti Rahayu</strong>
                                <span class="verified">✓ Pembeli Terverifikasi</span>
                            </div>
                            <div class="review-date">10 Oktober 2024</div>
                        </div>
                        <div class="review-rating">⭐⭐⭐⭐⭐</div>
                        <p class="review-text">Sempurna untuk editing video 4K. Rendering cepat banget, layarnya juga jernih dengan refresh rate tinggi. Packaging rapi dan pengiriman cepat. Worth the price!</p>
                    </article>
                </div>
            </div>

            <!-- Related Products -->
            <div class="related-products">
                <h2>Produk Terkait</h2>
                <div class="products-grid">
                    <article class="product-card">
                        <div class="product-image">
                            <img src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9" alt="Smartphone Premium">
                        </div>
                        <div class="product-info">
                            <h3 class="product-title">Smartphone Premium</h3>
                            <div class="product-price">
                                <span class="price-current">Rp 8.000.000</span>
                            </div>
                            <a href="product-detail.html?id=2" class="btn-add-cart">Lihat Detail</a>
                        </div>
                    </article>

                    <article class="product-card">
                        <div class="product-image">
                            <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e" alt="Headphone Wireless">
                        </div>
                        <div class="product-info">
                            <h3 class="product-title">Headphone Wireless</h3>
                            <div class="product-price">
                                <span class="price-current">Rp 2.500.000</span>
                            </div>
                            <a href="product-detail.html?id=3" class="btn-add-cart">Lihat Detail</a>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="main-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>Tentang Kami</h3>
                    <p>TokoKita adalah platform e-commerce terpercaya yang menyediakan produk berkualitas dengan harga terbaik.</p>
                </div>
                
                <div class="footer-section">
                    <h3>Layanan Pelanggan</h3>
                    <ul>
                        <li><a href="#help">Pusat Bantuan</a></li>
                        <li><a href="#shipping">Pengiriman</a></li>
                        <li><a href="#returns">Pengembalian</a></li>
                        <li><a href="#payment">Metode Pembayaran</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3>Hubungi Kami</h3>
                    <ul>
                        <li>📧 Email: info@tokokita.com</li>
                        <li>📱 Telepon: (021) 1234-5678</li>
                        <li>📍 Jakarta, Indonesia</li>
                    </ul>
                </div>
            </div>
            
            <div class="footer-bottom">
                <p>&copy; 2024 TokoKita. Semua hak dilindungi.</p>
            </div>
        </div>
    </footer>

    <script src="js/script.js"></script>
</body>
</html>Code language: HTML, XML (xml)

Dengan kode lengkap di atas, Anda sudah memiliki halaman detail produk yang komprehensif dengan semua fitur penting seperti image gallery, varian produk, quantity selector, dan section ulasan pelanggan.

Berikut ini adalah target tampilan pada halaman detail produk pembuatan website ecommerce dengan HTML.

Halaman detail produk ecommerce dengan HTML

Styling dengan CSS

File CSS mengatur tampilan visual website. Berikut adalah bagian-bagian penting dari style.css:

1. CSS Variables dan Global Styles

:root {
    --primary-color: #2563eb;
    --secondary-color: #1e40af;
    --accent-color: #f59e0b;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --bg-light: #f9fafb;
    --bg-white: #ffffff;
    --border-color: #e5e7eb;
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-light);
}Code language: CSS (css)

Penjelasan:

  • CSS Variables (:root) – Menyimpan nilai warna dan style yang sering digunakan
  • Reset CSS (*) – Menghilangkan margin dan padding default browser
  • box-sizing: border-box – Membuat perhitungan ukuran lebih mudah

2. Layout dengan Flexbox dan Grid

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}Code language: CSS (css)

Penjelasan:

  • Flexbox – Untuk layout horizontal (header, navigation)
  • CSS Grid – Untuk layout produk yang responsif
  • auto-fill dan minmax() – Membuat grid otomatis menyesuaikan jumlah kolom

3. Hover Effects dan Transitions

.product-card {
    transition: var(--transition);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}Code language: CSS (css)

Penjelasan:

  • transition – Membuat animasi smooth saat hover
  • transform: translateY() – Mengangkat card saat di-hover
  • box-shadow – Menambah depth dengan bayangan

4. Responsive Design

@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 1rem;
    }

    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .product-detail-grid {
        grid-template-columns: 1fr;
    }
}Code language: CSS (css)

Penjelasan:

  • Media queries untuk tampilan mobile
  • Layout berubah dari horizontal ke vertical
  • Grid columns menyesuaikan ukuran layar

5. Kode Lengkap File CSS (style.css)

Berikut adalah kode lengkap file css/style.css yang mencakup semua styling untuk website e-commerce:

/* ===================================
   Global Styles & Reset
   =================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #2563eb;
    --secondary-color: #1e40af;
    --accent-color: #f59e0b;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --bg-light: #f9fafb;
    --bg-white: #ffffff;
    --border-color: #e5e7eb;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-light);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

/* ===================================
   Header & Navigation
   =================================== */
.main-header {
    background-color: var(--bg-white);
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 1rem 0;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.logo h1 {
    color: var(--primary-color);
    font-size: 1.8rem;
    font-weight: 700;
    cursor: pointer;
}

.main-navigation ul {
    display: flex;
    gap: 2rem;
}

.main-navigation a {
    color: var(--text-dark);
    font-weight: 500;
    padding: 0.5rem 0;
    border-bottom: 2px solid transparent;
}

.main-navigation a:hover,
.main-navigation a.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.search-box {
    display: flex;
    align-items: center;
    background-color: var(--bg-light);
    border-radius: 8px;
    padding: 0.5rem 1rem;
}

.search-box input {
    border: none;
    background: transparent;
    outline: none;
    width: 200px;
    font-size: 0.95rem;
}

.search-box button {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.2rem;
}

.cart-icon {
    position: relative;
}

.cart-icon a {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.cart-count {
    background-color: var(--danger-color);
    color: white;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 50%;
    position: absolute;
    top: -8px;
    right: -8px;
}

/* ===================================
   Hero Section
   =================================== */
.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 5rem 0;
    text-align: center;
}

.hero-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.btn-primary {
    display: inline-block;
    background-color: white;
    color: var(--primary-color);
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: var(--transition);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ===================================
   Products Section
   =================================== */
.products-section {
    padding: 4rem 0;
}

.section-title {
    font-size: 2rem;
    margin-bottom: 2rem;
    text-align: center;
    color: var(--text-dark);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

.product-card {
    background-color: var(--bg-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.product-image {
    position: relative;
    overflow: hidden;
    height: 280px;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.badge-new,
.badge-sale {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
}

.badge-new {
    background-color: var(--success-color);
}

.badge-sale {
    background-color: var(--danger-color);
}

.product-info {
    padding: 1.5rem;
}

.product-title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.product-description {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.product-price {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.price-current {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-color);
}

.price-original {
    font-size: 1rem;
    color: var(--text-light);
    text-decoration: line-through;
}

.product-rating {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    color: var(--text-light);
}

.btn-add-cart {
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--primary-color);
    color: white;
    padding: 0.8rem;
    border-radius: 8px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-add-cart:hover {
    background-color: var(--secondary-color);
}

/* ===================================
   Breadcrumb Navigation
   =================================== */
.breadcrumb {
    background-color: var(--bg-white);
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.breadcrumb ul {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li:not(:last-child)::after {
    content: '›';
    margin-left: 0.5rem;
    color: var(--text-light);
}

.breadcrumb a {
    color: var(--text-light);
    font-size: 0.9rem;
}

.breadcrumb a:hover {
    color: var(--primary-color);
}

.breadcrumb .active {
    color: var(--text-dark);
    font-weight: 500;
}

/* ===================================
   Product Detail Section
   =================================== */
.product-detail-section {
    padding: 3rem 0;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.product-images {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.main-image {
    background-color: var(--bg-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.main-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.thumbnail-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.thumbnail {
    cursor: pointer;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: var(--transition);
    height: 100px;
    object-fit: cover;
}

.thumbnail:hover,
.thumbnail.active {
    border-color: var(--primary-color);
}

.product-detail-info {
    background-color: var(--bg-white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.product-detail-title {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.product-rating-detail {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.stars {
    color: var(--accent-color);
}

.rating-score {
    font-weight: 600;
    color: var(--text-dark);
}

.review-count,
.sold-count {
    color: var(--text-light);
}

.product-price-detail {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.price-current-large {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.price-original-large {
    font-size: 1.3rem;
    color: var(--text-light);
    text-decoration: line-through;
}

.discount-badge {
    background-color: var(--danger-color);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
}

.product-description-detail,
.product-specifications {
    margin-bottom: 2rem;
}

.product-description-detail h2,
.product-specifications h2 {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    color: var(--text-dark);
}

.product-description-detail p {
    color: var(--text-light);
    line-height: 1.8;
}

.product-specifications ul {
    list-style: none;
}

.product-specifications li {
    padding: 0.5rem 0;
    color: var(--text-light);
    border-bottom: 1px solid var(--border-color);
}

.product-specifications li:last-child {
    border-bottom: none;
}

.product-variants {
    margin-bottom: 2rem;
}

.variant-group {
    margin-bottom: 1.5rem;
}

.variant-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.8rem;
    color: var(--text-dark);
}

.variant-options {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.variant-btn {
    padding: 0.6rem 1.2rem;
    border: 2px solid var(--border-color);
    background-color: var(--bg-white);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.95rem;
}

.variant-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.variant-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.product-quantity {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.product-quantity label {
    font-weight: 600;
    color: var(--text-dark);
}

.quantity-selector {
    display: flex;
    align-items: center;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.qty-btn {
    padding: 0.6rem 1rem;
    border: none;
    background-color: var(--bg-light);
    cursor: pointer;
    font-size: 1.2rem;
    transition: var(--transition);
}

.qty-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

.qty-input {
    width: 60px;
    text-align: center;
    border: none;
    padding: 0.6rem;
    font-size: 1rem;
    font-weight: 600;
}

.stock-info {
    color: var(--text-light);
    font-size: 0.9rem;
}

.product-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.btn-add-to-cart,
.btn-buy-now {
    flex: 1;
    padding: 1rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-add-to-cart {
    background-color: var(--bg-white);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-add-to-cart:hover {
    background-color: var(--primary-color);
    color: white;
}

.btn-buy-now {
    background-color: var(--primary-color);
    color: white;
}

.btn-buy-now:hover {
    background-color: var(--secondary-color);
}

.btn-wishlist {
    padding: 1rem;
    border: 2px solid var(--border-color);
    background-color: var(--bg-white);
    border-radius: 8px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
}

.btn-wishlist:hover {
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.product-features {
    display: grid;
    gap: 1rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--bg-light);
    border-radius: 8px;
}

.feature-item .icon {
    font-size: 2rem;
}

.feature-item strong {
    display: block;
    color: var(--text-dark);
    margin-bottom: 0.2rem;
}

.feature-item p {
    font-size: 0.85rem;
    color: var(--text-light);
}

/* ===================================
   Product Reviews
   =================================== */
.product-reviews {
    background-color: var(--bg-white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 3rem;
}

.product-reviews h2 {
    font-size: 1.8rem;
    margin-bottom: 2rem;
    color: var(--text-dark);
}

.review-summary {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.rating-overview {
    text-align: center;
}

.rating-score-large {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.stars-large {
    font-size: 1.5rem;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

.rating-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.rating-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rating-bar span:first-child {
    min-width: 50px;
    font-size: 0.9rem;
    color: var(--text-light);
}

.rating-bar .bar {
    flex: 1;
    height: 8px;
    background-color: var(--bg-light);
    border-radius: 4px;
    overflow: hidden;
}

.rating-bar .fill {
    height: 100%;
    background-color: var(--accent-color);
    transition: width 0.5s ease;
}

.rating-bar span:last-child {
    min-width: 40px;
    text-align: right;
    font-size: 0.9rem;
    color: var(--text-light);
}

.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.review-item {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.review-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.reviewer-info strong {
    color: var(--text-dark);
}

.verified {
    color: var(--success-color);
    font-size: 0.85rem;
}

.review-date {
    color: var(--text-light);
    font-size: 0.9rem;
}

.review-rating {
    color: var(--accent-color);
    margin-bottom: 0.8rem;
}

.review-text {
    color: var(--text-light);
    line-height: 1.8;
}

/* ===================================
   Related Products
   =================================== */
.related-products {
    margin-bottom: 3rem;
}

.related-products h2 {
    font-size: 1.8rem;
    margin-bottom: 2rem;
    color: var(--text-dark);
}

/* ===================================
   Footer
   =================================== */
.main-footer {
    background-color: var(--text-dark);
    color: white;
    padding: 3rem 0 1rem;
    margin-top: 4rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.footer-section p,
.footer-section li {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    font-size: 0.95rem;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.8);
}

.footer-section a:hover {
    color: white;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

/* ===================================
   Responsive Design
   =================================== */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: 1rem;
    }

    .main-navigation ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    .search-box input {
        width: 150px;
    }

    .hero-content h2 {
        font-size: 1.8rem;
    }

    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1.5rem;
    }

    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .main-image img {
        height: 350px;
    }

    .review-summary {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .product-actions {
        flex-direction: column;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-content h2 {
        font-size: 1.5rem;
    }

    .hero-content p {
        font-size: 1rem;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .product-detail-title {
        font-size: 1.5rem;
    }

    .price-current-large {
        font-size: 1.5rem;
    }
}Code language: CSS (css)

File CSS di atas mencakup semua styling yang diperlukan untuk website e-commerce, termasuk styling untuk halaman home, halaman detail produk, responsive design, dan berbagai komponen UI seperti buttons, cards, dan forms.

JavaScript untuk Interaktivitas

File script.js menambahkan fungsi interaktif pada website:

1. Shopping Cart Counter

let cartCount = 0;

function updateCartCount() {
    const cartCountElement = document.querySelector('.cart-count');
    if (cartCountElement) {
        cartCountElement.textContent = cartCount;
    }
}Code language: JavaScript (javascript)

Penjelasan:

  • Variabel cartCount menyimpan jumlah item di keranjang
  • Fungsi updateCartCount() memperbarui tampilan counter
const thumbnails = document.querySelectorAll('.thumbnail');
const mainImage = document.getElementById('mainProductImage');

thumbnails.forEach(thumbnail => {
    thumbnail.addEventListener('click', function() {
        thumbnails.forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        mainImage.src = this.src;
    });
});Code language: JavaScript (javascript)

Penjelasan:

  • Menangkap klik pada thumbnail
  • Mengganti gambar utama dengan gambar thumbnail yang diklik
  • Menambah/menghapus class active untuk styling

3. Quantity Selector

const minusBtn = document.querySelector('.qty-btn.minus');
const plusBtn = document.querySelector('.qty-btn.plus');
const qtyInput = document.querySelector('.qty-input');

minusBtn.addEventListener('click', function() {
    let currentValue = parseInt(qtyInput.value);
    if (currentValue > 1) {
        qtyInput.value = currentValue - 1;
    }
});

plusBtn.addEventListener('click', function() {
    let currentValue = parseInt(qtyInput.value);
    let maxValue = parseInt(qtyInput.max);
    if (currentValue < maxValue) {
        qtyInput.value = currentValue + 1;
    }
});Code language: JavaScript (javascript)

Penjelasan:

  • Tombol minus mengurangi jumlah (minimum 1)
  • Tombol plus menambah jumlah (maksimum sesuai stok)
  • Validasi untuk mencegah nilai di luar range

4. Add to Cart Function

const addToCartBtn = document.querySelector('.btn-add-to-cart');

addToCartBtn.addEventListener('click', function() {
    const quantity = qtyInput ? parseInt(qtyInput.value) : 1;
    cartCount += quantity;
    updateCartCount();
    alert(`${quantity} produk berhasil ditambahkan ke keranjang!`);
});Code language: JavaScript (javascript)

Penjelasan:

  • Mengambil jumlah produk dari input
  • Menambahkan ke total cart count
  • Menampilkan notifikasi sukses

5. Smooth Scroll

const anchorLinks = document.querySelectorAll('a[href^="#"]');

anchorLinks.forEach(link => {
    link.addEventListener('click', function(e) {
        const href = this.getAttribute('href');
        if (href !== '#' && href !== '#cart') {
            e.preventDefault();
            const target = document.querySelector(href);
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        }
    });
});Code language: JavaScript (javascript)

Penjelasan:

  • Menangkap klik pada anchor link (link dengan #)
  • Scroll smooth ke section target
  • Meningkatkan user experience

6. Kode Lengkap File JavaScript (script.js)

Berikut adalah kode lengkap file js/script.js yang mencakup semua fungsi interaktif untuk website e-commerce:

// ===================================
// Shopping Cart Functionality
// ===================================
let cartCount = 0;

function updateCartCount() {
    const cartCountElement = document.querySelector('.cart-count');
    if (cartCountElement) {
        cartCountElement.textContent = cartCount;
    }
}

// ===================================
// Product Detail - Image Gallery
// ===================================
document.addEventListener('DOMContentLoaded', function() {
    // Thumbnail image click handler
    const thumbnails = document.querySelectorAll('.thumbnail');
    const mainImage = document.getElementById('mainProductImage');
    
    thumbnails.forEach(thumbnail => {
        thumbnail.addEventListener('click', function() {
            // Remove active class from all thumbnails
            thumbnails.forEach(t => t.classList.remove('active'));
            
            // Add active class to clicked thumbnail
            this.classList.add('active');
            
            // Update main image
            if (mainImage) {
                mainImage.src = this.src.replace('-thumb', '-large');
            }
        });
    });
    
    // ===================================
    // Quantity Selector
    // ===================================
    const minusBtn = document.querySelector('.qty-btn.minus');
    const plusBtn = document.querySelector('.qty-btn.plus');
    const qtyInput = document.querySelector('.qty-input');
    
    if (minusBtn && plusBtn && qtyInput) {
        minusBtn.addEventListener('click', function() {
            let currentValue = parseInt(qtyInput.value);
            if (currentValue > 1) {
                qtyInput.value = currentValue - 1;
            }
        });
        
        plusBtn.addEventListener('click', function() {
            let currentValue = parseInt(qtyInput.value);
            let maxValue = parseInt(qtyInput.max);
            if (currentValue < maxValue) {
                qtyInput.value = currentValue + 1;
            }
        });
    }
    
    // ===================================
    // Variant Selection
    // ===================================
    const variantButtons = document.querySelectorAll('.variant-btn');
    
    variantButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Remove active class from siblings
            const siblings = this.parentElement.querySelectorAll('.variant-btn');
            siblings.forEach(btn => btn.classList.remove('active'));
            
            // Add active class to clicked button
            this.classList.add('active');
        });
    });
    
    // ===================================
    // Add to Cart Button
    // ===================================
    const addToCartBtn = document.querySelector('.btn-add-to-cart');
    
    if (addToCartBtn) {
        addToCartBtn.addEventListener('click', function() {
            const quantity = qtyInput ? parseInt(qtyInput.value) : 1;
            cartCount += quantity;
            updateCartCount();
            
            // Show notification
            alert(`${quantity} produk berhasil ditambahkan ke keranjang!`);
        });
    }
    
    // ===================================
    // Buy Now Button
    // ===================================
    const buyNowBtn = document.querySelector('.btn-buy-now');
    
    if (buyNowBtn) {
        buyNowBtn.addEventListener('click', function() {
            alert('Mengarahkan ke halaman checkout...');
            // Redirect to checkout page
            // window.location.href = 'checkout.html';
        });
    }
    
    // ===================================
    // Wishlist Button
    // ===================================
    const wishlistBtn = document.querySelector('.btn-wishlist');
    
    if (wishlistBtn) {
        wishlistBtn.addEventListener('click', function() {
            this.style.color = this.style.color === 'rgb(239, 68, 68)' ? '' : '#ef4444';
            const isAdded = this.style.color === 'rgb(239, 68, 68)';
            alert(isAdded ? 'Produk ditambahkan ke wishlist!' : 'Produk dihapus dari wishlist!');
        });
    }
    
    // ===================================
    // Smooth Scroll for Anchor Links
    // ===================================
    const anchorLinks = document.querySelectorAll('a[href^="#"]');
    
    anchorLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            const href = this.getAttribute('href');
            if (href !== '#' && href !== '#cart') {
                e.preventDefault();
                const target = document.querySelector(href);
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            }
        });
    });
    
    // ===================================
    // Search Functionality
    // ===================================
    const searchInput = document.querySelector('.search-box input');
    const searchButton = document.querySelector('.search-box button');
    
    if (searchButton && searchInput) {
        searchButton.addEventListener('click', function() {
            const searchTerm = searchInput.value.trim();
            if (searchTerm) {
                alert(`Mencari: "${searchTerm}"`);
                // Implement search functionality here
                // window.location.href = `search.html?q=${encodeURIComponent(searchTerm)}`;
            }
        });
        
        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                searchButton.click();
            }
        });
    }
    
    // Initialize cart count
    updateCartCount();
});

// ===================================
// Product Card Interactions (Home Page)
// ===================================
document.addEventListener('DOMContentLoaded', function() {
    const productCards = document.querySelectorAll('.product-card');
    
    productCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px)';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });
});Code language: JavaScript (javascript)

Penjelasan Fungsi-Fungsi JavaScript:

  1. Shopping Cart Counter – Mengelola jumlah item di keranjang belanja
  2. Image Gallery – Mengganti gambar utama saat thumbnail diklik
  3. Quantity Selector – Menambah/mengurangi jumlah produk dengan validasi
  4. Variant Selection – Memilih varian produk (warna, ukuran, dll)
  5. Add to Cart – Menambahkan produk ke keranjang dengan notifikasi
  6. Buy Now – Tombol untuk langsung checkout
  7. Wishlist – Toggle produk favorit
  8. Smooth Scroll – Navigasi smooth ke section tertentu
  9. Search – Fungsi pencarian produk dengan Enter key support
  10. Product Card Hover – Animasi hover pada card produk

Best Practice Struktur HTML Website E-commerce

Untuk memastikan website e-commerce Anda optimal, ikuti best practice berikut:

1. Gunakan Semantic HTML5

Gunakan tag HTML5 semantik seperti <header>, <nav>, <main>, <article>, <section>, dan <footer> untuk struktur yang lebih jelas dan SEO friendly.

2. Optimasi Meta Tags

Setiap halaman harus memiliki meta description, title tag, dan meta keywords yang relevan dengan konten halaman.

3. Struktur URL yang Baik

Gunakan URL yang deskriptif dan mudah dibaca, misalnya: /product-detail.html?id=laptop-gaming-modern lebih baik daripada /product.html?id=123.

4. Implementasi Breadcrumb Navigation

Breadcrumb membantu pengguna memahami posisi mereka di website dan meningkatkan SEO.

5. Optimasi Gambar

  • Format Gambar: Gunakan WebP untuk web modern, fallback ke JPG/PNG
  • Atribut Alt: Tambahkan deskripsi alt pada semua gambar untuk SEO dan accessibility
  • Lazy Loading: Implementasi loading="lazy" untuk performa lebih baik
  • Ukuran Gambar: Compress dan resize gambar sesuai kebutuhan (max 1200px untuk produk)
  • Lokasi Gambar:
    • Untuk development/demo: Boleh gunakan URL eksternal (Unsplash, Pexels)
    • Untuk production: Simpan gambar lokal di folder images/products/
    • Gunakan CDN untuk performa optimal

6. Responsive Design

Pastikan website dapat diakses dengan baik di semua perangkat menggunakan CSS media queries dan viewport meta tag.

7. Struktur Data Schema.org

Implementasikan structured data untuk produk, rating, dan harga agar lebih mudah diindeks mesin pencari.

8. Accessibility (A11y)

  • Gunakan label yang jelas pada form
  • Pastikan kontras warna memadai
  • Tambahkan ARIA labels jika diperlukan

Tips Membuat Struktur HTML Website E-commerce untuk Bisnis Kecil

Jika Anda membangun website e-commerce untuk bisnis kecil, pertimbangkan hal berikut:

  1. Mulai Sederhana – Fokus pada halaman esensial: Home, Product List, Product Detail, Cart, dan Checkout
  2. Prioritaskan Mobile – Mayoritas pengguna berbelanja melalui smartphone
  3. Optimasi Kecepatan – Minimalkan penggunaan library eksternal yang berat
  4. Fokus pada Konversi – Pastikan tombol CTA (Call-to-Action) jelas dan mudah diakses
  5. Implementasi Analytics – Tambahkan Google Analytics untuk memahami perilaku pengunjung

Kesimpulan

Membuat struktur HTML website e-commerce dari nol memerlukan perencanaan yang matang dan pemahaman tentang best practice web development. Dengan mengikuti panduan ini, Anda telah mempelajari cara membuat struktur HTML untuk website e-commerce yang responsif, SEO friendly, dan mudah di-maintain.

Template struktur HTML website e-commerce lengkap yang telah dijelaskan di atas dapat Anda kembangkan lebih lanjut sesuai kebutuhan bisnis. Ingat untuk selalu mengutamakan pengalaman pengguna, performa website, dan optimasi SEO dalam setiap pengembangan yang Anda lakukan.

Dengan struktur HTML toko online menggunakan HTML5 CSS3 yang solid, website e-commerce Anda siap bersaing di mesin pencari dan memberikan pengalaman berbelanja yang menyenangkan bagi pelanggan.

Ringkasan

Dalam artikel ini, kita telah membahas secara lengkap cara membuat struktur HTML untuk website e-commerce dari nol, meliputi:

✅ Struktur Folder dan File – Organisasi project yang rapi dan terstruktur
✅ Halaman Home – Header, navigasi, hero section, daftar produk, dan footer
✅ Halaman Detail Produk – Breadcrumb, image gallery, spesifikasi, varian, dan ulasan
✅ CSS Styling – Variables, Flexbox, Grid, hover effects, dan responsive design
✅ JavaScript Interaktivity – Cart counter, image gallery, quantity selector, dan smooth scroll
✅ Best Practices – SEO, accessibility, dan optimasi performa

Dengan mengikuti panduan ini, Anda dapat membangun website e-commerce yang profesional, responsif, dan SEO-friendly tanpa bergantung pada CMS atau platform siap pakai.

Share on

1 HTML Dasar (Pemula)

2 HTML Menengah

3 HTML Lanjutan

4 HTML Mahir

Fokus level ini adalah optimalisasi dan efisiensi struktur HTML untuk kinerja website, SEO, dan kemudahan integrasi dengan sistem lain.

5 HTML Ahli (Bonus & Tips)

Related article!

Comments

Congrats, you have the opportunity to be the first commenter on this article. Have questions or suggestions? Please leave a comment to start discussion.

Leave comment

Alamat email Anda tidak akan dipublikasikan. Required fields are marked *

news-1701

sabung ayam online

yakinjp

yakinjp

rtp yakinjp

slot thailand

yakinjp

yakinjp

yakin jp

yakinjp id

maujp

maujp

maujp

maujp

slot mahjong

SGP Pools

slot mahjong

sabung ayam online

slot mahjong

SLOT THAILAND

article 888000081

article 888000082

article 888000083

article 888000084

article 888000085

article 888000086

article 888000087

article 888000088

article 888000089

article 888000090

article 888000091

article 888000092

article 888000093

article 888000094

article 888000095

article 888000096

article 888000097

article 888000098

article 888000099

article 888000100

cuaca 898100176

cuaca 898100177

cuaca 898100178

cuaca 898100179

cuaca 898100180

cuaca 898100181

cuaca 898100182

cuaca 898100183

cuaca 898100184

cuaca 898100185

cuaca 898100186

cuaca 898100187

cuaca 898100188

cuaca 898100189

cuaca 898100190

cuaca 898100191

cuaca 898100192

cuaca 898100193

cuaca 898100194

cuaca 898100195

article 710000191

article 710000192

article 710000193

article 710000194

article 710000195

article 710000196

article 710000197

article 710000198

article 710000199

article 710000200

article 710000201

article 710000202

article 710000203

article 710000204

article 710000205

article 710000206

article 710000207

article 710000208

article 710000209

article 710000210

article 710000211

article 710000212

article 710000213

article 710000214

article 710000215

article 710000216

article 710000217

article 710000218

article 710000219

article 710000220

article 710000221

article 710000222

article 710000223

article 710000224

article 710000225

article 710000226

article 710000227

article 710000228

article 710000229

article 710000230

article 710000231

article 710000232

article 710000233

article 710000234

article 710000235

article 710000236

article 710000237

article 710000238

article 710000239

article 710000240

article 710000241

article 710000242

article 710000243

article 710000244

article 710000245

article 710000246

article 710000247

article 710000248

article 710000249

article 710000250

artikel 338000001

artikel 338000002

artikel 338000003

artikel 338000004

artikel 338000005

artikel 338000006

artikel 338000007

artikel 338000008

artikel 338000009

artikel 338000010

artikel 338000011

artikel 338000012

artikel 338000013

artikel 338000014

artikel 338000015

artikel 338000016

artikel 338000017

artikel 338000018

artikel 338000019

artikel 338000020

artikel 338000021

artikel 338000022

artikel 338000023

artikel 338000024

artikel 338000025

artikel 338000026

artikel 338000027

artikel 338000028

artikel 338000029

artikel 338000030

artikel 338000031

artikel 338000032

artikel 338000033

artikel 338000034

artikel 338000035

artikel 338000036

artikel 338000037

artikel 338000038

artikel 338000039

artikel 338000040

artikel 338000041

artikel 338000042

artikel 338000043

artikel 338000044

artikel 338000045

artikel 338000046

artikel 338000047

artikel 338000048

artikel 338000049

artikel 338000050

artikel 338000051

artikel 338000052

artikel 338000053

artikel 338000054

artikel 338000055

artikel 338000056

artikel 338000057

artikel 338000058

artikel 338000059

artikel 338000060

artikel 338000061

artikel 338000062

artikel 338000063

artikel 338000064

artikel 338000065

artikel 338000066

artikel 338000067

artikel 338000068

artikel 338000069

artikel 338000070

artikel 338000071

artikel 338000072

artikel 338000073

artikel 338000074

artikel 338000075

artikel 338000076

artikel 338000077

artikel 338000078

artikel 338000079

artikel 338000080

artikel 338000081

artikel 338000082

artikel 338000083

artikel 338000084

artikel 338000085

artikel 338000086

artikel 338000087

artikel 338000088

artikel 338000089

artikel 338000090

news-1701
news-1701

sabung ayam online

yakinjp

yakinjp

rtp yakinjp

slot thailand

yakinjp

yakinjp

yakin jp

yakinjp id

maujp

maujp

maujp

maujp

slot mahjong

SGP Pools

slot mahjong

sabung ayam online

slot mahjong

SLOT THAILAND

article 888000081

article 888000082

article 888000083

article 888000084

article 888000085

article 888000086

article 888000087

article 888000088

article 888000089

article 888000090

article 888000091

article 888000092

article 888000093

article 888000094

article 888000095

article 888000096

article 888000097

article 888000098

article 888000099

article 888000100

cuaca 898100176

cuaca 898100177

cuaca 898100178

cuaca 898100179

cuaca 898100180

cuaca 898100181

cuaca 898100182

cuaca 898100183

cuaca 898100184

cuaca 898100185

cuaca 898100186

cuaca 898100187

cuaca 898100188

cuaca 898100189

cuaca 898100190

cuaca 898100191

cuaca 898100192

cuaca 898100193

cuaca 898100194

cuaca 898100195

article 710000191

article 710000192

article 710000193

article 710000194

article 710000195

article 710000196

article 710000197

article 710000198

article 710000199

article 710000200

article 710000201

article 710000202

article 710000203

article 710000204

article 710000205

article 710000206

article 710000207

article 710000208

article 710000209

article 710000210

article 710000211

article 710000212

article 710000213

article 710000214

article 710000215

article 710000216

article 710000217

article 710000218

article 710000219

article 710000220

article 710000221

article 710000222

article 710000223

article 710000224

article 710000225

article 710000226

article 710000227

article 710000228

article 710000229

article 710000230

article 710000231

article 710000232

article 710000233

article 710000234

article 710000235

article 710000236

article 710000237

article 710000238

article 710000239

article 710000240

article 710000241

article 710000242

article 710000243

article 710000244

article 710000245

article 710000246

article 710000247

article 710000248

article 710000249

article 710000250

artikel 338000001

artikel 338000002

artikel 338000003

artikel 338000004

artikel 338000005

artikel 338000006

artikel 338000007

artikel 338000008

artikel 338000009

artikel 338000010

artikel 338000011

artikel 338000012

artikel 338000013

artikel 338000014

artikel 338000015

artikel 338000016

artikel 338000017

artikel 338000018

artikel 338000019

artikel 338000020

artikel 338000021

artikel 338000022

artikel 338000023

artikel 338000024

artikel 338000025

artikel 338000026

artikel 338000027

artikel 338000028

artikel 338000029

artikel 338000030

artikel 338000031

artikel 338000032

artikel 338000033

artikel 338000034

artikel 338000035

artikel 338000036

artikel 338000037

artikel 338000038

artikel 338000039

artikel 338000040

artikel 338000041

artikel 338000042

artikel 338000043

artikel 338000044

artikel 338000045

artikel 338000046

artikel 338000047

artikel 338000048

artikel 338000049

artikel 338000050

artikel 338000051

artikel 338000052

artikel 338000053

artikel 338000054

artikel 338000055

artikel 338000056

artikel 338000057

artikel 338000058

artikel 338000059

artikel 338000060

artikel 338000061

artikel 338000062

artikel 338000063

artikel 338000064

artikel 338000065

artikel 338000066

artikel 338000067

artikel 338000068

artikel 338000069

artikel 338000070

artikel 338000071

artikel 338000072

artikel 338000073

artikel 338000074

artikel 338000075

artikel 338000076

artikel 338000077

artikel 338000078

artikel 338000079

artikel 338000080

artikel 338000081

artikel 338000082

artikel 338000083

artikel 338000084

artikel 338000085

artikel 338000086

artikel 338000087

artikel 338000088

artikel 338000089

artikel 338000090

news-1701
content-1701

sabung ayam online

yakinjp

yakinjp

rtp yakinjp

slot thailand

yakinjp

yakinjp

yakin jp

yakinjp id

maujp

maujp

maujp

maujp

slot mahjong

SGP Pools

slot mahjong

sabung ayam online

slot mahjong

SLOT THAILAND

article 888000081

article 888000082

article 888000083

article 888000084

article 888000085

article 888000086

article 888000087

article 888000088

article 888000089

article 888000090

article 888000091

article 888000092

article 888000093

article 888000094

article 888000095

article 888000096

article 888000097

article 888000098

article 888000099

article 888000100

cuaca 898100126

cuaca 898100127

cuaca 898100128

cuaca 898100129

cuaca 898100130

cuaca 898100131

cuaca 898100132

cuaca 898100133

cuaca 898100134

cuaca 898100135

cuaca 898100136

cuaca 898100137

cuaca 898100138

cuaca 898100139

cuaca 898100140

cuaca 898100141

cuaca 898100142

cuaca 898100143

cuaca 898100144

cuaca 898100145

cuaca 898100146

cuaca 898100147

cuaca 898100148

cuaca 898100149

cuaca 898100150

cuaca 898100151

cuaca 898100152

cuaca 898100153

cuaca 898100154

cuaca 898100155

cuaca 898100156

cuaca 898100157

cuaca 898100158

cuaca 898100159

cuaca 898100160

cuaca 898100161

cuaca 898100162

cuaca 898100163

cuaca 898100164

cuaca 898100165

cuaca 898100166

cuaca 898100167

cuaca 898100168

cuaca 898100169

cuaca 898100170

cuaca 898100171

cuaca 898100172

cuaca 898100173

cuaca 898100174

cuaca 898100175

article 710000151

article 710000152

article 710000153

article 710000154

article 710000155

article 710000156

article 710000157

article 710000158

article 710000159

article 710000160

article 710000161

article 710000162

article 710000163

article 710000164

article 710000165

article 710000166

article 710000167

article 710000168

article 710000169

article 710000170

article 710000171

article 710000172

article 710000173

article 710000174

article 710000175

article 710000176

article 710000177

article 710000178

article 710000179

article 710000180

article 710000181

article 710000182

article 710000183

article 710000184

article 710000185

article 710000186

article 710000187

article 710000188

article 710000189

article 710000190

article 710000191

article 710000192

article 710000193

article 710000194

article 710000195

article 710000196

article 710000197

article 710000198

article 710000199

article 710000200

psda 438000036

psda 438000037

psda 438000038

psda 438000039

psda 438000040

psda 438000041

psda 438000042

psda 438000043

psda 438000044

psda 438000045

psda 438000046

psda 438000047

psda 438000048

psda 438000049

psda 438000050

psda 438000051

psda 438000052

psda 438000053

psda 438000054

psda 438000055

psda 438000056

psda 438000057

psda 438000058

psda 438000059

psda 438000060

psda 438000061

psda 438000062

psda 438000063

psda 438000064

psda 438000065

psda 438000066

psda 438000067

psda 438000068

psda 438000069

psda 438000070

psda 438000071

psda 438000072

psda 438000073

psda 438000074

psda 438000075

psda 438000076

psda 438000077

psda 438000078

psda 438000079

psda 438000080

psda 438000081

psda 438000082

psda 438000083

psda 438000084

psda 438000085

psda 438000086

psda 438000087

psda 438000088

psda 438000089

psda 438000090

psda 438000091

psda 438000092

psda 438000093

psda 438000094

psda 438000095

psda 438000096

psda 438000097

psda 438000098

psda 438000099

psda 438000100

psda 438000101

psda 438000102

psda 438000103

psda 438000104

psda 438000105

psda 438000106

psda 438000107

psda 438000108

psda 438000109

content-1701