test-space / product.html
KingNish's picture
Implemented product details, shopping cart, and checkout functionality (#20)
5cc830e verified
raw
history blame
1.71 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Details</title>
<link href="style.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<header class="bg-amazon-blue p-4 text-white">
<div class="container mx-auto">
<div class="flex justify-between items-center"><h1 class="text-2xl font-bold">Amazon Dummy</h1><a href="cart.html" class="text-white">Cart</a></div>
<a href="index.html" class="text-sm">Back to Home</a>
</div>
</header>
<main class="container mx-auto mt-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="md:col-span-1">
<img src="https://picsum.photos/400/300" alt="Product Image" class="w-full rounded-lg shadow-md">
</div>
<div class="md:col-span-1">
<h2 class="text-2xl font-semibold mb-4">Product Name</h2>
<p class="text-gray-700 mb-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<button id="add-to-cart-btn" class="bg-amazon-yellow hover:bg-yellow-500 text-black font-bold py-2 px-4 rounded">
Add to Cart
</button>
</div>
</div>
</main>
<footer class="bg-gray-200 p-4 mt-8 text-center">
<p>&copy; 2024 Amazon Dummy</p>
</footer>
</body>
</html>