diff --git a/style.css b/style.css index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..f8a5a0fb9e15b03086c0b4189453d263246907ec 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,131 @@ +/* ตั้งค่าพื้นฐาน */ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f4f4f4; +} + +/* คอนเทนเนอร์หลัก */ +.container { + width: 80%; + margin: 20px auto; + background: white; + padding: 20px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); + border-radius: 10px; +} + +/* หัวข้อ */ +h2 { + text-align: center; + color: #333; +} + +/* ตารางสินค้า */ +table { + width: 100%; + border-collapse: collapse; + margin-top: 20px; +} + +table, th, td { + border: 1px solid #ddd; +} + +th, td { + padding: 10px; + text-align: center; +} + +th { + background-color: #007BFF; + color: white; +} + +/* ฟอร์ม */ +form { + text-align: center; + margin: 20px 0; +} + +input, button { + padding: 10px; + margin: 5px; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + background-color: #28a745; + color: white; + cursor: pointer; +} + +button:hover { + background-color: #218838; +} + +/* ลิงก์ */ +a { + text-decoration: none; + color: #007BFF; +} + +a:hover { + text-decoration: underline; +} + +/* ปุ่มลบ */ +.btn-delete { + color: red; + font-weight: bold; +} + +.btn-delete:hover { + color: darkred; +} + +/* ตะกร้าสินค้า */ +.cart-container { + max-width: 600px; + margin: auto; +} + +.cart-container table { + width: 100%; +} + +.cart-container th, .cart-container td { + padding: 10px; +} + +/* ปุ่มเพิ่ม-ลดจำนวนสินค้า */ +.qty-btn { + padding: 5px 10px; + background-color: #007BFF; + color: white; + border: none; + cursor: pointer; + border-radius: 5px; +} + +.qty-btn:hover { + background-color: #0056b3; +} + +/* ปุ่มชำระเงิน */ +.checkout-btn { + display: block; + width: 100%; + text-align: center; + background-color: #ffc107; + padding: 10px; + border-radius: 5px; + font-size: 18px; + color: black; +} + +.checkout-btn:hover { + background-color: #e0a800; +}