diff --git a/public/css/style.css b/public/css/style.css index 8143a3698d26568d086bbefcf51e9df0d3cc2473..8966abdd7716bba2def9c18891428773d3bbf059 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,173 +1,139 @@ -/* ตั้งค่าพื้นฐาน */ -* { +/* Header */ +header { + background-color: #004d7a; /* สีฟ้าของท้องฟ้า */ + color: #ffffff; + padding: 20px 0; + text-align: center; + } + + header h1 { + font-size: 3rem; + font-family: 'Arial', sans-serif; margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Poppins', sans-serif; -} - -body { - background-color: #f4f4f4; - color: #333; - line-height: 1.6; -} - -/* สไตล์ Navbar */ -.navbar { - background: #007bff; - color: white; - padding: 15px 20px; - display: flex; - justify-content: space-between; - align-items: center; -} - -.navbar a { - color: white; + } + + nav { + margin-top: 20px; + } + + nav a { + color: #ffffff; + margin: 0 15px; + font-size: 1.2rem; text-decoration: none; - font-size: 18px; - margin-right: 15px; -} - -.navbar a:hover { - text-decoration: underline; -} - -/* Hero Section */ -.hero { - background: url('/images/hero.jpg') no-repeat center center/cover; - height: 400px; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - color: white; -} - -.hero h1 { - font-size: 50px; - text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -} + } + + nav a:hover { + border-bottom: 2px solid #f0a500; + } /* Tour Cards */ -.tour-container { - display: flex; - flex-wrap: wrap; - justify-content: center; - padding: 20px; -} - .tour-card { - background: white; + background-color: #f9f9f9; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - width: 300px; - margin: 15px; overflow: hidden; - transition: transform 0.3s; -} - -.tour-card:hover { - transform: scale(1.05); -} - -.tour-card img { + margin: 20px; + width: 300px; + } + + .tour-card img { width: 100%; - height: 180px; -} - -.tour-card .content { + height: 200px; + object-fit: cover; + } + + .tour-card .content { padding: 15px; -} - -.tour-card h3 { - font-size: 22px; - color: #007bff; -} - -.tour-card p { - font-size: 16px; - margin: 10px 0; -} - -.tour-card .price { - font-size: 18px; - color: #28a745; + } + + .tour-card .content h3 { + font-size: 1.5rem; + margin-bottom: 10px; + color: #333; + } + + .tour-card .content p { + color: #777; + font-size: 1rem; + line-height: 1.5; + } + + .tour-card .price { + margin-top: 15px; + font-size: 1.2rem; + color: #004d7a; font-weight: bold; + } +/* Booking Form */ +.booking-form { + background-color: #fff; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 30px; + width: 400px; + margin: 0 auto; } -.tour-card .btn { - display: block; - text-align: center; - padding: 10px; - background: #007bff; - color: white; - text-decoration: none; - border-radius: 5px; - margin-top: 10px; -} - -.tour-card .btn:hover { - background: #0056b3; -} - -/* ฟอร์มล็อกอิน & สมัครสมาชิก */ -.form-container { - width: 100%; - max-width: 400px; - margin: 50px auto; - padding: 20px; - background: white; - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); -} - -.form-container h2 { - text-align: center; - margin-bottom: 20px; -} - -.form-group { - margin-bottom: 15px; -} - -.form-group label { - display: block; - font-weight: bold; +.booking-form h2 { + text-align: center; + font-size: 2rem; + color: #004d7a; } -.form-group input { - width: 100%; - padding: 10px; - border: 1px solid #ccc; - border-radius: 5px; - margin-top: 5px; +.booking-form input, .booking-form select { + width: 100%; + padding: 12px; + margin: 10px 0; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 1rem; } -.btn-submit { - width: 100%; - background: #007bff; - color: white; - padding: 10px; - border: none; - border-radius: 5px; - font-size: 18px; - cursor: pointer; +.booking-form input[type="submit"] { + background-color: #f0a500; + color: #fff; + border: none; + cursor: pointer; + font-size: 1.2rem; } -.btn-submit:hover { - background: #0056b3; +.booking-form input[type="submit"]:hover { + background-color: #004d7a; } - /* Footer */ -.footer { - background: #333; - color: white; +footer { + background-color: #333; + color: #fff; text-align: center; - padding: 20px; - margin-top: 30px; -} - -.footer p { - margin: 0; -} + padding: 20px 0; + } + + footer p { + font-size: 1rem; + } + + footer a { + color: #f0a500; + text-decoration: none; + } + + footer a:hover { + text-decoration: underline; + } +/* Responsive */ +@media (max-width: 768px) { + header h1 { + font-size: 2rem; + } + + .tour-card { + width: 100%; + } + + .booking-form { + width: 100%; + padding: 20px; + } + } + \ No newline at end of file