Spaces:
Running
Running
File size: 3,155 Bytes
5cc830e f282b32 5cc830e f282b32 5cc830e f282b32 5cc830e c336ed9 f282b32 c336ed9 f282b32 c336ed9 f282b32 c336ed9 f282b32 c336ed9 f282b32 c336ed9 f282b32 5cc830e f282b32 c336ed9 5cc830e f282b32 5cc830e f282b32 5cc830e f282b32 c336ed9 |
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 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkout - Amazon Clone</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="bg-gray-800 p-4 text-white">
<div class="container mx-auto flex items-center justify-between">
<a href="/" class="text-2xl font-bold">Amazon</a>
<div class="flex items-center">
<input type="text" placeholder="Search" class="bg-gray-700 text-white px-4 py-2 rounded-md mr-2">
<button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Search</button>
</div>
<div>
<a href="/cart.html" class="hover:text-yellow-500">Cart</a>
</div>
</div>
</nav>
<main class="container mx-auto mt-8">
<h1 class="text-2xl font-bold mb-4">Checkout</h1>
<div class="grid grid-cols-2 gap-8">
<div>
<h2 class="text-xl font-bold mb-2">Shipping Information</h2>
<form id="checkout-form">
<div class="mb-4">
<label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name:</label>
<input type="text" id="name" name="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
</div>
<div class="mb-4">
<label for="address" class="block text-gray-700 text-sm font-bold mb-2">Address:</label>
<input type="text" id="address" name="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
</div>
<div class="mb-4">
<label for="payment" class="block text-gray-700 text-sm font-bold mb-2">Payment Information:</label>
<input type="text" id="payment" name="payment" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
</div>
<button type="submit" class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Place Order</button>
</form>
</div>
<div>
<h2 class="text-xl font-bold mb-2">Order Summary</h2>
<p>Subtotal: <span id="subtotal">$0.00</span></p>
<p>Shipping: <span id="shipping">$5.00</span></p>
<p class="font-bold">Total: <span id="total">$0.00</span></p>
</div>
</div>
</main>
<footer class="bg-gray-800 p-4 text-white text-center mt-8">
<p>© 2024 Amazon Clone</p>
</footer>
<script src="script.js"></script>
</body>
</html>
|