<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toko Serba Ada - Makanan & Minuman</title>
<style>
/* CSS Dasar */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
nav {
background-color: #333;
padding: 10px;
text-align: center;
}
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
display: inline-block;
padding: 10px;
transition: background-color 0.3s;
}
nav a:hover {
background-color: #4CAF50;
color: #fff;
}
section {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.product {
background-color: white;
border: 1px solid #ddd;
padding: 15px;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.product:hover {
transform: scale(1.05);
}
.product img {
width: 100%;
height: auto; /* Lebih responsif */
max-height: 200px;
object-fit: cover;
}
.product h3 {
margin: 10px 0;
}
.product p {
font-weight: bold;
color: #4CAF50;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
width: 100%; /* Tombol full-width di mobile */
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
margin-top: 20px;
}
/* Media Queries untuk Mobile Responsif */
@media (max-width: 600px) {
header {
padding: 15px;
}
header h1 {
font-size: 24px;
}
nav {
text-align: left;
}
nav a {
display: block; /* Menu vertikal di mobile */
margin: 10px 0;
padding: 15px;
font-size: 18px; /* Lebih besar untuk sentuh */
}
.product-grid {
grid-template-columns: 1fr; /* Satu kolom di mobile */
gap: 15px;
}
.product {
padding: 10px;
}
section {
padding: 15px;
}
button {
padding: 12px;
}
}
@media (max-width: 400px) {
body {
font-size: 14px; /* Kurangi ukuran font jika layar sangat kecil */
}
}
</style>
</head>
<body>
<header>
<h1>Selamat Datang di Toko Serba Ada Kami!</h1>
<p>Penjualan Makanan dan Minuman Berkualitas untuk Kebutuhan Sehari-hari</p>
</header>
<nav>
<a href="#home">Home</a>
<a href="#makanan">Makanan</a>
<a href="#minuman">Minuman</a>
<a href="#kontak">Kontak</a>
</nav>
<section id="home">
<h2>Tentang Toko Kami</h2>
<p>Toko serba ada skala sedang yang menyediakan berbagai makanan ringan, makanan pokok, dan minuman segar. Kami berlokasi di Jayapura, Papua, dan siap melayani pesanan online atau datang langsung. Harga terjangkau, kualitas terjamin!</p>
</section>
<section id="makanan">
<h2>Produk Makanan</h2>
<div class="product-grid">
<div class="product">
<img src="https://via.placeholder.com/250x200?text=Mie+Instans" alt="Mie Instans">
<h3>Mie Instans</h3>
<p>Rp 5.000</p>
<button onclick="alert('Ditambahkan ke keranjang!')">Beli</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/250x200?text=Biskuit" alt="Biskuit">
<h3>Biskuit Manis</h3>
<p>Rp 10.000</p>
<button onclick="alert('Ditambahkan ke keranjang!')">Beli</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/250x200?text=Keripik" alt="Keripik">
<h3>Keripik Kentang</h3>
<p>Rp 15.000</p>
<button onclick="alert('Ditambahkan ke keranjang!')">Beli</button>
</div>
<!-- Tambahkan produk lain di sini -->
</div>
</section>
<section id="minuman">
<h2>Produk Minuman</h2>
<div class="product-grid">
<div class="product">
<img src="https://via.placeholder.com/250x200?text=Air+Mineral" alt="Air Mineral">
<h3>Air Mineral 600ml</h3>
<p>Rp 3.000</p>
<button onclick="alert('Ditambahkan ke keranjang!')">Beli</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/250x200?text=Teh+Botol" alt="Teh Botol">
<h3>Teh Botol</h3>
<p>Rp 6.000</p>
<button onclick="alert('Ditambahkan ke keranjang!')">Beli</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/250x200?text=Jus+Buah" alt="Jus Buah">
<h3>Jus Buah Segar</h3>
<p>Rp 12.000</p>
<button onclick="alert('Ditambahkan ke keranjang!')">Beli</button>
</div>
<!-- Tambahkan produk lain di sini -->
</div>
</section>
<section id="kontak">
<h2>Hubungi Kami</h2>
<p>Alamat: Jl. Contoh No. 123, Jayapura, Papua</p>
<p>Telepon: 0812-3456-7890</p>
<p>Email: info@tokoserbaada.com</p>
<p>Ikuti kami di X: @SenkomPapua</p>
</section>
<footer>
<p>© 2025 Toko Serba Ada. Semua hak cipta dilindungi.</p>
</footer>
<script>
// JavaScript Sederhana untuk Interaksi
console.log("Website siap digunakan!");
</script>
</body>
</html>
Tidak ada komentar:
Posting Komentar