Spaces:
Running
Running
File size: 5,182 Bytes
5cc830e f282b32 5cc830e f282b32 5cc830e f282b32 5cc830e f243b6f f282b32 f243b6f f282b32 f243b6f f282b32 f243b6f f282b32 f2efb9e f282b32 f243b6f f282b32 5cc830e f282b32 f243b6f 5cc830e f282b32 5cc830e f282b32 5cc830e f282b32 f243b6f |
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 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<!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="city" class="block text-gray-700 text-sm font-bold mb-2">City:</label>
<input type="text" id="city" name="city" 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="state" class="block text-gray-700 text-sm font-bold mb-2">State:</label>
<input type="text" id="state" name="state" 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="zip" class="block text-gray-700 text-sm font-bold mb-2">Zip Code:</label>
<input type="text" id="zip" name="zip" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
</div>
<h2 class="text-xl font-bold mb-2">Payment Information</h2>
<div class="mb-4">
<label for="credit_card" class="block text-gray-700 text-sm font-bold mb-2">Credit Card Number:</label>
<input type="text" id="credit_card" name="credit_card" 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="expiration_date" class="block text-gray-700 text-sm font-bold mb-2">Expiration Date:</label>
<input type="text" id="expiration_date" name="expiration_date" placeholder="MM/YY" 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="cvv" class="block text-gray-700 text-sm font-bold mb-2">CVV:</label>
<input type="text" id="cvv" name="cvv" 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>
|