Gestionnaire de fichiers - Editer - /home/kridsana/webapp.cm.in.th/673190902/u67319090029/aa/style.css
Arrière
/* General Styles */ body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } header { background-color: #737774ee; color: rgb(14, 12, 12); padding: 10px 20px; text-align: center; } header h1 { margin: 0; } nav { background-color: #333; padding: 10px 0; overflow-x: auto; /* เพิ่มการเลื่อนในแนวนอน */ white-space: nowrap; /* ห้ามให้ไอเทมในเมนูแยกบรรทัด */ } nav ul { list-style-type: none; padding: 0; margin: 0; display: flex; /* จัดเมนูให้อยู่ในแนวนอน */ } nav ul li { margin: 0 15px; } nav ul li a { color: white; text-decoration: none; font-weight: bold; padding: 10px 15px; display: block; transition: background-color 0.3s ease, color 0.3s ease; } /* สไตล์เมื่อ hover เมาส์ไปที่ลิงก์ */ nav ul li a:hover { background-color: #4CAF50; color: white; border-radius: 5px; } /* Hero Section */ .hero { position: relative; text-align: center; color: white; } .hero-image { width: 100%; height: 1000px; object-fit: cover; } .hero-text{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; } .hero-text h2 { color: white; margin-bottom: 20px; font-size: 2.5rem; /* ขนาดฟอนต์ที่ใหญ่ */ font-weight: bold; text-transform: uppercase; /* ทำให้ตัวอักษรเป็นตัวพิมพ์ใหญ่ */ border-bottom: 2px solid #4CAF50; /* เพิ่มเส้นใต้ให้กับหัวข้อ */ padding-bottom: 10px; text-shadow: 0 0.5vh 1vh rgba(0, 0, 0, 1); } /* Section Styles */ .section { padding: 60px 20px; text-align: center; } /* เพิ่มการจัดสไตล์สำหรับหัวข้อ h2 */ h2 { color: #333; margin-bottom: 20px; font-size: 2.5rem; /* ขนาดฟอนต์ที่ใหญ่ */ font-weight: bold; text-transform: uppercase; /* ทำให้ตัวอักษรเป็นตัวพิมพ์ใหญ่ */ border-bottom: 2px solid #4CAF50; /* เพิ่มเส้นใต้ให้กับหัวข้อ */ padding-bottom: 10px; } h3 { color: #333; font-size: 1.8rem; /* ขนาดฟอนต์หัวข้อรอง */ margin-top: 15px; font-weight: normal; } /* Tourist Information */ .tourist-info-content { display: flex; justify-content: center; align-items: center; flex-direction: column; } .tourist-info-content p { width: 80%; margin-bottom: 20px; } .tourist-image { width: 100%; max-width: 2000px; margin-top: 20px; } .accommodation ul { display: flex; justify-content: space-around; flex-wrap: wrap; } .accommodation li { width: 45%; margin: 10px 0; } .accommodation-image { width: 100%; max-width: 1500px; height: auto; } .activities { display: flex; justify-content: space-around; flex-wrap: wrap; } .activity-card { width: 45%; margin: 20px 0; text-align: center; } .activity-img { width: 100%; max-width: 1800px; height: auto; } .gallery { display: flex; justify-content: center; flex-wrap: wrap; } .gallery-item { width: 30%; margin: 10px; } .map-container { display: flex; justify-content: center; margin-top: 20px; } footer { background-color: #333; color: white; padding: 20px; text-align: center; } /* Contact Form */ form { display: flex; flex-direction: column; max-width: 600px; margin: 0 auto; } form input, form textarea { padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; } form button { padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; } form button:hover { background-color: #45a049; } /* Responsive Styles */ @media screen and (max-width: 768px) { nav ul { flex-direction: row; } nav ul li { margin: 10px 0; } .hero-image { height: 250px; } } /* Contact Section Styling */ #contact { background-color: #f8f9fa; padding: 40px 0; text-align: center; } #contact h2 { font-size: 32px; margin-bottom: 20px; color: #333; } #contact p { font-size: 18px; margin-bottom: 30px; color: #555; } .contact-form-container { max-width: 600px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .contact-form { display: flex; flex-direction: column; gap: 20px; } .contact-input, .contact-textarea { padding: 10px; font-size: 16px; border: 2px solid #ddd; border-radius: 5px; outline: none; transition: border-color 0.3s; } .contact-input:focus, .contact-textarea:focus { border-color: #0066cc; } .contact-textarea { resize: vertical; min-height: 150px; } .contact-button { background-color: #0066cc; color: #fff; padding: 12px 20px; border: none; border-radius: 5px; font-size: 18px; cursor: pointer; transition: background-color 0.3s; } .contact-button:hover { background-color: #004a99; } .contact-button:active { background-color: #003366; }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Génération de la page: 0.52 |
proxy
|
phpinfo
|
Réglages