File size: 2,097 Bytes
01c169c 721fd2a c5ba53f 01c169c c5ba53f 01c169c 721fd2a 01c169c 721fd2a 01c169c c5ba53f 01c169c 31d1f3d c5ba53f 01c169c 721fd2a 31d1f3d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
.gallery img {
filter: blur(4px);
}
</style>
</head>
<body class="bg-gray-900 text-white font-sans">
<div class="max-w-sm mx-auto py-10">
<div class="flex justify-between items-center px-4">
<a href="#" class="text-gray-400"><i class="fas fa-arrow-left"></i></a>
<h1 class="text-lg font-bold">Shop</h1>
<span class="bg-gray-700 text-gray-400 rounded-full px-3 py-1">144</span>
</div>
<div class="bg-gray-800 p-5 mt-5 rounded-lg text-center">
<h2 class="text-red-500 text-3xl font-bold mb-3">Cream01 Double</h2>
<div class="flex justify-center gap-2 gallery mb-3">
<img src="https://placehold.co/50x50" alt="Placeholder image of a person wearing a cap" class="rounded">
<img src="https://placehold.co/50x50" alt="Placeholder image of a person with headphones" class="rounded">
<img src="https://placehold.co/50x50" alt="Placeholder image of a smiling person" class="rounded">
<!-- More placeholder images as needed -->
</div>
<img src="https://placehold.co/150x200" alt="Placeholder image of a product pack" class="mx-auto mb-3">
<div class="text-gray-400 mb-5">321Z (1 type)</div>
<div class="text-xl font-bold mb-3">KRW 4,400</div>
<button class="bg-purple-600 py-3 px-6 rounded text-lg text-white">Objekt 구매하기</button>
</div>
<div class="flex justify-center space-x-2 mt-10">
<span class="block w-2 h-2 bg-gray-600 rounded-full"></span>
<span class="block w-2 h-2 bg-gray-600 rounded-full"></span>
<span class="block w-2 h-2 bg-gray-600 rounded-full"></span>
</div>
</div>
</body>
</html>
|