<!--
-- Uploaded on : https://haxor.my.id/open/aziz.html
-- Official Web : https://prinsh.com
-- script-deface-generator.prinsh.com
-->
<!DOCTYPE html><html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ZIZ STORE</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; background: #f3f4f6; color: #333; line-height: 1.6; }
header { background: linear-gradient(90deg, #ff7e5f, #feb47b); color: #fff; padding: 30px 20px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
header h1 { font-size: 2.8em; margin-bottom: 5px; font-weight: 600; }
.hero { padding: 60px 20px; text-align: center; background: #fff; }
.hero h1 { font-size: 2.4em; margin-bottom: 10px; }
.hero p { font-size: 1.2em; color: #666; }
.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; padding: 40px 20px; }
.product { background: #fff; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 20px; text-align: center; transition: all 0.3s ease; }
.product:hover { transform: translateY(-5px); box-shadow: 0 6px 16px rgba(0,0,0,0.1); }
.product img { max-width: 100%; border-radius: 12px; }
.product h3 { margin: 15px 0 8px; font-size: 1.2em; }
.product p { color: #888; font-size: 1em; margin-bottom: 15px; }
.wa-btn { display: inline-block; background: #ff7e5f; color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: bold; transition: background 0.3s ease; }
.wa-btn:hover { background: #e96c4f; }.form-section, .testimonial-section { background: #fff; padding: 50px 20px; margin-top: 40px; border-radius: 12px; }
.form-section h2, .testimonial-section h2 { text-align: center; margin-bottom: 30px; font-size: 2em; color: #444; }
form { max-width: 600px; margin: auto; display: flex; flex-direction: column; gap: 15px; }
input, textarea { padding: 12px; border: 1px solid #ccc; border-radius: 10px; font-size: 1em; }
button { background: #feb47b; color: #fff; padding: 12px; border: none; border-radius: 10px; font-size: 1em; cursor: pointer; transition: background 0.3s ease; }
button:hover { background: #ff7e5f; }
.testimonial { max-width: 800px; margin: auto; display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.testimonial blockquote { background: #f9f9f9; border-left: 5px solid #feb47b; padding: 20px; border-radius: 10px; font-style: italic; position: relative; }
.testimonial cite { display: block; margin-top: 10px; font-weight: bold; text-align: right; font-style: normal; color: #ff7e5f; }
.testimonial-form { margin-top: 40px; text-align: center; }
.testimonial-form input, .testimonial-form textarea { width: 100%; max-width: 600px; margin: 10px auto; display: block; }
.testimonial-list { margin-top: 30px; }
footer { text-align: center; padding: 30px; background: #1e1e1e; color: #fff; font-size: 0.95em; margin-top: 50px; border-top-left-radius: 16px; border-top-right-radius: 16px; }
</style>
</head>
<body>
<header>
<h1>TOKO ALAT KALCER X SKENA KEREN !</h1>
<p>Tampil Gaya, Harga Bersahabat</p>
</header> <section class="hero">
<h1>Koleksi Terbaru Kami</h1>
<p>Pesan sekarang, kirim langsung lewat WhatsApp!</p>
</section> <section class="products">
<div class="product">
<img src="https://a.top4top.io/p_3382ehgcy0.jpeg" alt="Kemeja boxy">
<h3>Kemeja boxy crop kotak kotak</h3>
<p>Rp137.000</p>
<a class="wa-btn" href="https://wa.me/62881025377959?text=gila+gacor+🗿">Order via WA</a>
</div>
<div class="product">
<img src="https://g.top4top.io/p_3382znnjb0.jpeg" alt="Baju Boxy ">
<h3>Baju skena distro pria dan wanita</h3>
<p>Rp50.000</p>
<a class="wa-btn" href="https://wa.me/62881025377959?text=gila+gacor+🗿">Order via WA</a>
</div>
<div class="product">
<img src="https://i.top4top.io/p_3382x7i8q0.jpeg" alt="Ke">
<h3>Kemeja pendek boxy shirt</h3>
<p>Rp100.000</p>
<a class="wa-btn" href="https://wa.me/62881025377959?text=gila+gacor+🗿">Order via WA</a>
</div>
</section> <section class="form-section">
<h2>Form Pemesanan</h2>
<form>
<input type="text" placeholder="Nama Lengkap" required />
<input type="email" placeholder="Email" required />
<textarea placeholder="Pesanan / Catatan Tambahan" rows="5" required></textarea>
<button type="submit">Kirim Pesanan</button>
</form>
</section> <section class="testimonial-section">
<h2>Apa Kata Pelanggan?</h2>
<div class="testimonial" id="testimonial-list">
<blockquote>
Gacor bro
<cite>- Apip</cite>
</blockquote>
<blockquote>
GG
<cite>- idham</cite>
</blockquote>
</div><div class="testimonial-form">
<h3>Tambah Testimoni Kamu:</h3>
<input type="text" id="nama" placeholder="Nama" required />
<textarea id="komentar" rows="4" placeholder="Komentar" required></textarea>
<button onclick="tambahTestimoni()">Kirim</button>
</div>
</section> <footer>
© 2025 Aziz Store
</footer> <script>
function tambahTestimoni() {
const nama = document.getElementById('nama').value;
const komentar = document.getElementById('komentar').value;
if(nama && komentar) {
const block = document.createElement('blockquote');
block.innerHTML = `"${komentar}"<cite>- ${nama}</cite>`;
document.getElementById('testimonial-list').appendChild(block);
document.getElementById('nama').value = '';
document.getElementById('komentar').value = '';
} else {
alert('Isi semua terlebih dahulu.');
}
}
</script></body>
</html>