Pilih Laman 



buatkan website tentang toko online yang menjual sprei & bedcover

Berikut contoh website sederhana untuk toko online Sprei & Bedcover yang bisa kamu gunakan sebagai landing page atau toko online:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sahara Sprei & Bedcover</title>

<style>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}

body{
    background:#f8f8f8;
}

header{
    background:#d63384;
    color:white;
    padding:20px;
    text-align:center;
}

nav{
    background:#c2185b;
    padding:10px;
    text-align:center;
}

nav a{
    color:white;
    text-decoration:none;
    margin:0 15px;
    font-weight:bold;
}

.hero{
    background:url('https://images.unsplash.com/photo-1505693416388-ac5ce068fe85') center/cover;
    height:400px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    text-align:center;
}

.hero h1{
    background:rgba(0,0,0,0.5);
    padding:20px;
    border-radius:10px;
}

.products{
    padding:40px 20px;
}

.products h2{
    text-align:center;
    margin-bottom:20px;
    color:#d63384;
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}

.card{
    background:white;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

.card img{
    width:100%;
    height:250px;
    object-fit:cover;
}

.card-content{
    padding:15px;
    text-align:center;
}

.price{
    color:#d63384;
    font-size:20px;
    font-weight:bold;
    margin:10px 0;
}

.btn{
    background:#d63384;
    color:white;
    padding:10px 20px;
    text-decoration:none;
    border-radius:5px;
}

footer{
    background:#333;
    color:white;
    text-align:center;
    padding:20px;
    margin-top:40px;
}
</style>
</head>

<body>

<header>
    <h1>Sahara Sprei & Bedcover</h1>
    <p>Nyaman, Elegan, dan Berkualitas</p>
</header>

<nav>
    <a href="#">Home</a>
    <a href="#">Produk</a>
    <a href="#">Promo</a>
    <a href="#">Kontak</a>
</nav>

<section class="hero">
    <h1>Temukan Sprei & Bedcover Impianmu</h1>
</section>

<section class="products">
    <h2>Produk Unggulan</h2>

    <div class="product-grid">

        <div class="card">
            <img src="https://images.unsplash.com/photo-1505693416388-ac5ce068fe85" alt="Sprei">
            <div class="card-content">
                <h3>Sprei Katun Premium</h3>
                <p class="price">Rp 199.000</p>
                <a href="#" class="btn">Beli Sekarang</a>
            </div>
        </div>

        <div class="card">
            <img src="https://images.unsplash.com/photo-1505693416388-ac5ce068fe85" alt="Bedcover">
            <div class="card-content">
                <h3>Bedcover Mewah</h3>
                <p class="price">Rp 349.000</p>
                <a href="#" class="btn">Beli Sekarang</a>
            </div>
        </div>

        <div class="card">
            <img src="https://images.unsplash.com/photo-1505693416388-ac5ce068fe85" alt="Sprei">
            <div class="card-content">
                <h3>Sprei Motif Floral</h3>
                <p class="price">Rp 229.000</p>
                <a href="#" class="btn">Beli Sekarang</a>
            </div>
        </div>

    </div>
</section>

<footer>
    <p>© 2026 Sahara Sprei & Bedcover | WhatsApp: 08xxxxxxxxxx</p>
</footer>

</body>
</html>

Website ini sudah memiliki:

✅ Header dan menu navigasi

✅ Banner utama (hero section)

✅ Katalog produk

✅ Harga produk

✅ Tombol "Beli Sekarang"

✅ Footer kontak toko

Inspirasi fitur toko sprei online seperti katalog produk, promo, reseller, dan pengiriman ke seluruh Indonesia umum digunakan oleh toko sprei online di Indonesia. 

Jika ingin yang lebih modern, saya bisa buatkan versi seperti Shopee/Tokopedia lengkap dengan keranjang belanja, login, dan pembayaran.


Buatkan versi seperti Shopee/Tokopedia lengkap dengan keranjang belanja, login, dan pembayaran

Berikut contoh website toko online Sprei & Bedcover dengan fitur login, katalog produk, keranjang belanja, dan checkout ala Shopee/Tokopedia (versi frontend sederhana):

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sahara Sprei Store</title>

<style>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,sans-serif;
}
body{
    background:#f5f5f5;
}
header{
    background:#ee4d2d;
    color:white;
    padding:15px 30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.logo{
    font-size:24px;
    font-weight:bold;
}
.cart{
    cursor:pointer;
    font-size:18px;
}
.container{
    width:90%;
    margin:20px auto;
}
.products{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}
.card{
    background:white;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.card img{
    width:100%;
    height:220px;
    object-fit:cover;
}
.card-body{
    padding:15px;
}
.price{
    color:#ee4d2d;
    font-size:20px;
    font-weight:bold;
    margin:10px 0;
}
button{
    background:#ee4d2d;
    color:white;
    border:none;
    padding:10px 15px;
    border-radius:5px;
    cursor:pointer;
}
.modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
}
.modal-content{
    background:white;
    width:90%;
    max-width:500px;
    margin:50px auto;
    padding:20px;
    border-radius:10px;
}
input,select{
    width:100%;
    padding:10px;
    margin:8px 0;
}
.cart-item{
    margin:10px 0;
    border-bottom:1px solid #ddd;
    padding-bottom:10px;
}
</style>
</head>
<body>

<header>
    <div class="logo">🛏 Sahara Sprei Store</div>
    <div>
        <button onclick="showLogin()">Login</button>
        <span class="cart" onclick="showCart()">🛒 Keranjang (<span id="count">0</span>)</span>
    </div>
</header>

<div class="container">
<h2>Produk Terlaris</h2>
<br>

<div class="products">

<div class="card">
<img src="https://picsum.photos/400/300?1">
<div class="card-body">
<h3>Sprei Katun Premium</h3>
<div class="price">Rp199.000</div>
<button onclick="addCart('Sprei Katun Premium',199000)">
Tambah Keranjang
</button>
</div>
</div>

<div class="card">
<img src="https://picsum.photos/400/300?2">
<div class="card-body">
<h3>Bedcover Luxury</h3>
<div class="price">Rp349.000</div>
<button onclick="addCart('Bedcover Luxury',349000)">
Tambah Keranjang
</button>
</div>
</div>

<div class="card">
<img src="https://picsum.photos/400/300?3">
<div class="card-body">
<h3>Sprei Motif Floral</h3>
<div class="price">Rp229.000</div>
<button onclick="addCart('Sprei Motif Floral',229000)">
Tambah Keranjang
</button>
</div>
</div>

</div>
</div>

<!-- LOGIN -->
<div class="modal" id="loginModal">
<div class="modal-content">
<h2>Login</h2>
<input type="text" placeholder="Email">
<input type="password" placeholder="Password">
<button onclick="login()">Masuk</button>
</div>
</div>

<!-- CART -->
<div class="modal" id="cartModal">
<div class="modal-content">
<h2>Keranjang Belanja</h2>

<div id="cartItems"></div>

<h3>Total: Rp <span id="total">0</span></h3>

<hr><br>

<h3>Checkout</h3>

<input type="text" placeholder="Nama Penerima">
<input type="text" placeholder="Alamat Lengkap">

<select>
<option>Transfer Bank</option>
<option>QRIS</option>
<option>COD</option>
<option>E-Wallet</option>
</select>

<button onclick="checkout()">Bayar Sekarang</button>

</div>
</div>

<script>

let cart=[];

function showLogin(){
document.getElementById("loginModal").style.display="block";
}

function login(){
alert("Login berhasil!");
document.getElementById("loginModal").style.display="none";
}

function addCart(name,price){

cart.push({
name:name,
price:price
});

updateCart();
alert(name+" ditambahkan");
}

function updateCart(){

document.getElementById("count").innerText=cart.length;

let html="";
let total=0;

cart.forEach(item=>{
html+=`
<div class="cart-item">
${item.name}<br>
Rp ${item.price.toLocaleString()}
</div>
`;
total+=item.price;
});

document.getElementById("cartItems").innerHTML=html;
document.getElementById("total").innerText=
total.toLocaleString();
}

function showCart(){
document.getElementById("cartModal").style.display="block";
}

function checkout(){

if(cart.length==0){
alert("Keranjang masih kosong");
return;
}

alert("Pesanan berhasil dibuat!");

cart=[];
updateCart();

document.getElementById("cartModal").style.display="none";
}
</script>

</body>
</html>
Fitur yang sudah ada
✅ Login pelanggan
✅ Katalog produk
✅ Keranjang belanja
✅ Hitung total otomatis
✅ Checkout pesanan
✅ Pilihan pembayaran (Transfer, QRIS, COD, E-Wallet)
✅ Tampilan mirip marketplace

Untuk menjadi toko online sungguhan
Perlu ditambahkan:

Database (MySQL)

Backend (PHP/Laravel atau Node.js)

Login dengan akun nyata

Upload produk dari admin

Integrasi pembayaran QRIS/Midtrans/Xendit

Resi pengiriman (JNE, J&T, SiCepat)

Dashboard admin

Notifikasi WhatsApp otomatis

Dengan fitur tersebut, website bisa berfungsi seperti marketplace mini khusus toko sprei & bedcover.