Toko online
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TokoKita - Toko Online Terpercaya</title>
<!-- Menggunakan Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
/* CSS Reset & Variabel */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
}
:root {
--primary-color: #2563eb;
--primary-hover: #1d4ed8;
--text-dark: #1f2937;
--text-light: #6b7280;
--bg-light: #f9fafb;
--white: #ffffff;
--border-color: #e5e7eb;
}
body {
color: var(--text-dark);
background-color: var(--bg-light);
line-height: 1.5;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
/* Header & Navigasi */
header {
background-color: var(--white);
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 0;
z-index: 1000;
}
.navbar {
max-width: 1200px;
margin: 0 auto;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
}
.nav-links {
display: flex;
gap: 2rem;
font-weight: 500;
}
.nav-links a:hover {
color: var(--primary-color);
}
.nav-actions {
display: flex;
gap: 1rem;
align-items: center;
}
.btn {
display: inline-block;
padding: 0.6rem 1.2rem;
border-radius: 6px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
border: none;
}
.btn-primary {
background-color: var(--primary-color);
color: var(--white);
}
.btn-primary:hover {
background-color: var(--primary-hover);
}
.btn-outline {
background-color: transparent;
border: 1px solid var(--border-color);
color: var(--text-dark);
}
.btn-outline:hover {
border-color: var(--text-dark);
}
/* Hero Section */
.hero {
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=1200&q=80') center/cover no-repeat;
color: var(--white);
text-align: center;
padding: 6rem 2rem;
margin-bottom: 3rem;
}
.hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
font-weight: 700;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
color: #e5e7eb;
}
/* Container Utama */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem 4rem 2rem;
}
.section-title {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Grid Produk */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.product-card {
background-color: var(--white);
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.product-image {
width: 100%;
height: 200px;
object-fit: cover;
background-color: #e5e7eb;
}
.product-info {
padding: 1.2rem;
}
.product-category {
font-size: 0.85rem;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.3rem;
}
.product-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.product-price {
font-size: 1.2rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 1rem;
}
.product-card .btn {
width: 100%;
text-align: center;
}
/* Footer */
footer {
background-color: var(--white);
border-top: 1px solid var(--border-color);
padding: 3rem 2rem;
margin-top: 4rem;
text-align: center;
color: var(--text-light);
font-size: 0.9rem;
}
/* Responsif */
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hero h1 {
font-size: 2rem;
}
.hero p {
font-size: 1rem;
}
}
</style>
</head>
<body>
<!-- Header / Navigasi -->
<header>
<nav class="navbar">
<div class="logo">TokoKita</div>
<ul class="nav-links">
<li><a href="#">Beranda</a></li>
<li><a href="#">Produk</a></li>
<li><a href="#">Kategori</a></li>
<li><a href="#">Tentang Kami</a></li>
</ul>
<div class="nav-actions">
<a href="#" class="btn btn-outline">Masuk</a>
<a href="#" class="btn btn-primary">Daftar</a>
</div>
</nav>
</header>
<!-- Hero Section -->
<section class="hero">
<h1>Temukan Gaya Terbaikmu di Sini</h1>
<p>Koleksi pakaian dan aksesoris pilihan dengan kualitas premium dan harga terbaik.</p>
<a href="#produk" class="btn btn-primary" style="padding: 0.8rem 1.8rem; font-size: 1rem;">Belanja Sekarang</a>
</section>
<!-- Konten Produk -->
<main class="container" id="produk">
<div class="section-title">
<span>Produk Unggulan</span>
</div>
<div class="product-grid">
<!-- Produk 1 -->
<div class="product-card">
<img src="https://images.unsplash.com/photo-1521572267360-ee0c2909d518?auto=format&fit=crop&w=500&q=80" alt="Kaos Polos" class="product-image">
<div class="product-info">
<div class="product-category">Pakaian Pria</div>
<h3 class="product-title">Kaos Polos Premium Cotton</h3>
<div class="product-price">Rp 85.000</div>
<button class="btn btn-primary">+ Keranjang</button>
</div>
</div>
<!-- Produk 2 -->
<div class="product-card">
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=500&q=80" alt="Sepatu Sneakers" class="product-image">
<div class="product-info">
<div class="product-category">Sepatu</div>
<h3 class="product-title">Sneakers Olahraga Casual</h3>
<div class="product-price">Rp 350.000</div>
<button class="btn btn-primary">+ Keranjang</button>
</div>
</div>
<!-- Produk 3 -->
<div class="product-card">
<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&w=500&q=80" alt="Headphone" class="product-image">
<div class="product-info">
<div class="product-category">Elektronik</div>
<h3 class="product-title">Wireless Headphone Bass</h3>
<div class="product-price">Rp 499.000</div>
<button class="btn btn-primary">+ Keranjang</button>
</div>
</div>
<!-- Produk 4 -->
<div class="product-card">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=500&q=80" alt="Jam Tangan" class="product-image">
<div class="product-info">
<div class="product-category">Aksesoris</div>
<h3 class="product-title">Jam Tangan Minimalist Kulit</h3>
<div class="product-price">Rp 275.000</div>
<button class="btn btn-primary">+ Keranjang</button>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer>
<p>© 2026 TokoKita. Hak Cipta Dilindungi.</p>
</footer>
</body>
</html>
TokoKita - Toko Online Terpercaya
Temukan Gaya Terbaikmu di Sini
Koleksi pakaian dan aksesoris pilihan dengan kualitas premium dan harga terbaik.
Belanja Sekarang
Produk Unggulan
Pakaian Pria
Kaos Polos Premium Cotton
Rp 85.000
Sepatu
Sneakers Olahraga Casual
Rp 350.000
Elektronik
Wireless Headphone Bass
Rp 499.000
Aksesoris
Jam Tangan Minimalist Kulit
Rp 275.000
Comments
Post a Comment