Gestionnaire de fichiers - Editer - /home/kridsana/webapp.cm.in.th/673190902/u67319090023/web/index.html
Arrière
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>น้ำตกแม่ยะ</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Navigation Bar --> <nav> <ul> <li><a href="#home">หน้าแรก</a></li> <li><a href="#attractions">สถานที่ท่องเที่ยว</a></li> <li><a href="#accommodations">ที่พักและร้านอาหาร</a></li> <li><a href="#transportation">การเดินทาง</a></li> <li><a href="#culture">วัฒนธรรมและประเพณี</a></li> <li><a href="#activities">กิจกรรมพิเศษ</a></li> <li><a href="#contact">ติดต่อเรา</a></li> <li><a href="#blog">ข่าวสาร</a></li> </ul> </nav> <!-- Homepage --> <header id="home"> <h1>น้ำตกแม่ยะ</h1> <p>แหล่งท่องเที่ยวธรรมชาติที่สวยงามและเงียบสงบ</p> </header> <!-- Attractions --> <section id="attractions"> <h2>สถานที่ท่องเที่ยว</h2> <p>น้ำตกแม่ยะ ตั้งอยู่ในอำเภอจอมทอง จังหวัดเชียงใหม่ เป็นน้ำตกที่มีความสูงและมีทิวทัศน์ที่สวยงาม</p> <img src="f.jpg" alt="น้ำตกแม่ยะ - ภาพใกล้" class="feature-image"> <h3>กิจกรรมที่สามารถทำได้:</h3> <ul> <li>เดินป่า</li> <li>ชมวิว</li> <li>ถ่ายภาพธรรมชาติ</li> </ul> </section> <!-- Accommodations --> <section id="accommodations"> <h2>ที่พักและร้านอาหาร</h2> <h3>โรงแรมที่แนะนำ</h3> <ul> <li>โรงแรมแม่ยะรีสอร์ท - โทร: 123-456-789</li> <li>โรงแรมดอยม่อนแจ่ม - โทร: 987-654-321</li> </ul> <h3>ร้านอาหารที่แนะนำ</h3> <ul> <li>ร้านอาหารบ้านสวนแม่ยะ - อาหารท้องถิ่น</li> <li>ร้านข้าวซอยแม่แจ่ม - อาหารยอดนิยมของเชียงใหม่</li> </ul> </section> <!-- Transportation --> <section id="transportation"> <h2>การเดินทาง</h2> <p>สามารถเดินทางไปยังน้ำตกแม่ยะได้โดยการขับรถส่วนตัวจากตัวเมืองเชียงใหม่ ใช้เวลาเพียง 1-2 ชั่วโมง</p> <img src="k.png" alt="แผนที่น้ำตกแม่ยะ" class="feature-image"> </section> <!-- Culture --> <section id="culture"> <h2>วัฒนธรรมและประเพณี</h2> <p>น้ำตกแม่ยะเป็นส่วนหนึ่งของความเชื่อและวัฒนธรรมพื้นเมืองที่เกี่ยวข้องกับธรรมชาติและการอนุรักษ์สิ่งแวดล้อม</p> </section> <!-- Special Activities --> <section id="activities"> <h2>กิจกรรมพิเศษ</h2> <p>ทริปพิเศษที่น้ำตกแม่ยะ เช่น การเดินป่าและการถ่ายภาพธรรมชาติ</p> </section> <!-- Contact Us --> <section id="contact"> <h2>ติดต่อเรา</h2> <form action="#"> <label for="name">ชื่อ:</label> <input type="text" id="name" name="name" required> <label for="email">อีเมล:</label> <input type="email" id="email" name="email" required> <button type="submit">ส่งข้อความ</button> </form> </section> <!-- Blog --> <section id="blog"> <h2>ข่าวสารและบทความ</h2> <article> <h3>ประสบการณ์การท่องเที่ยวที่น้ำตกแม่ยะ</h3> <p>นักท่องเที่ยวสามารถสัมผัสประสบการณ์การเดินป่าและถ่ายภาพธรรมชาติที่น้ำตกแม่ยะได้อย่างเต็มที่</p> </article> </section> <footer> <p>© 2025 น้ำตกแม่ยะ</p> </footer> <script> document.addEventListener("DOMContentLoaded", function () { const header = document.querySelector("header"); // เพิ่มคลาสเพื่อให้เกิดแอนิเมชัน setTimeout(() => { header.classList.add("show-header"); }, 500); // รอ 0.5 วินาทีก่อนเริ่มแอนิเมชัน }); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <script> document.addEventListener("DOMContentLoaded", function () { // 1️⃣ เลื่อนภาพจากขวาไปซ้ายสุดแล้วหยุด gsap.fromTo(".feature-image", { x: 300, opacity: 0 }, // เริ่มต้น (อยู่ขวา + จาง) { x: 0, opacity: 1, duration: 2, ease: "power2.out", onComplete: () => { // 2️⃣ เมื่อลงภาพเสร็จแล้ว ให้ตัวหนังสือเลื่อนขึ้น gsap.fromTo("#attractions h2, #attractions p, #attractions h3, #attractions ul", { y: 50, opacity: 0 }, // เริ่มล่าง+จาง { y: 0, opacity: 1, duration: 1.5, ease: "power2.out", stagger: 0.3 } // ค่อยๆโผล่ทีละอัน ); } } ); }); </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Génération de la page: 0.21 |
proxy
|
phpinfo
|
Réglages