| Server IP : 122.155.177.87 / Your IP : 122.155.177.87 Web Server : Apache/2 System : Linux cat177-87.static.lnwhostname.com 3.10.0-1160.62.1.el7.x86_64 #1 SMP Tue Apr 5 16:57:59 UTC 2022 x86_64 User : apache ( 994) PHP Version : 5.3.29 Disable Function : dl,eval,exec,mail,passthru,popen,posix_getpwuid,posix_kill,posix_mkfifo,posix_setegid,posix_seteuid,posix_setgid,posix_setpgid,posix_setsid,posix_setuid,posix_uname,proc_close,proc_open,putenv,shell_exec,show_source,system MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/moungngam/domains/moungngam.go.th/public_html/tourism/ |
Upload File : |
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ตลาดน้ำลาวเวียง | สถานที่ท่องเที่ยว</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700;800&family=Sarabun:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--blue-1: #2fa9e9;
--blue-2: #1f8fd6;
--gold: #f0a93a;
--ink: #1e2b20;
--page: #dff1fb;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--page);
font-family: "Sarabun", sans-serif;
color: var(--ink);
}
.wrap {
max-width: 1180px;
margin: 0 auto;
padding: 48px 24px;
}
.layout {
display: grid;
grid-template-columns: 320px 1fr;
gap: 32px;
align-items: start;
}
/* ---------------- LEFT: hero panel ---------------- */
.hero {
position: relative;
background: url(images/shop-walk.jpg);
border-radius: 28px;
min-height: 620px;
padding: 40px 30px;
overflow: visible;
box-shadow: 0 20px 45px rgba(31, 143, 214, 0.35);
}
.hero-badge {
display: inline-block;
background: var(--gold);
color: #4a2c00;
font-family: "Kanit", sans-serif;
font-weight: 700;
font-size: 17px;
padding: 10px 22px;
border-radius: 999px;
box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}
.hero-title {
font-family: "Kanit", sans-serif;
font-weight: 800;
color: var(--gold);
font-size: 46px;
margin: 18px 0 0;
line-height: 1;
text-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.hero-bang {
font-family: "Kanit", sans-serif;
font-weight: 800;
color: var(--ink);
font-size: 30px;
margin: 10px 0 0;
letter-spacing: 2px;
}
.hero-photo {
position: absolute;
border-radius: 50%;
border: 5px solid #fff;
object-fit: cover;
box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}
.hero-photo.p1 { width: 190px; height: 190px; left: -22px; bottom: 30px; }
.hero-photo.p2 { width: 150px; height: 150px; right: 10px; bottom: 190px; }
.sticker {
position: absolute;
width: 56px;
height: 56px;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}
.sticker.s1 { top: 150px; left: -28px; }
.sticker.s2 { top: 210px; right: -20px; }
.fab-heart {
position: absolute;
right: 22px;
bottom: 18px;
width: 54px;
height: 54px;
border-radius: 50%;
background: #ef4d63;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: 0 8px 18px rgba(239,77,99,0.45);
}
/* ---------------- RIGHT: tabs + grid ---------------- */
.tabs {
display: inline-flex;
gap: 6px;
background: #fff;
padding: 8px;
border-radius: 999px;
box-shadow: 0 8px 20px rgba(31,143,214,0.15);
margin-bottom: 22px;
flex-wrap: wrap;
}
.tab {
font-family: "Kanit", sans-serif;
font-size: 14.5px;
font-weight: 500;
padding: 10px 20px;
border-radius: 999px;
color: #55606a;
cursor: pointer;
border: none;
background: transparent;
transition: background .2s, color .2s;
}
.tab.active {
background: #eef3f8;
color: var(--blue-2);
font-weight: 600;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.card {
position: relative;
border-radius: 16px;
overflow: hidden;
height: 190px;
box-shadow: 0 8px 18px rgba(20,40,60,0.15);
}
.card[data-cat] { display: block; }
.card.hidden { display: none; }
.card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .5s ease;
}
.card:hover img { transform: scale(1.07); }
.card .label {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 12px 14px;
background: linear-gradient(0deg, rgba(10,15,20,0.85), rgba(10,15,20,0));
color: #fff;
font-family: "Kanit", sans-serif;
font-weight: 600;
font-size: 15px;
}
@media (max-width: 860px) {
.layout { grid-template-columns: 1fr; }
.hero { min-height: 420px; }
.hero-photo.p1 { width: 130px; height: 130px; }
.hero-photo.p2 { width: 100px; height: 100px; bottom: 140px; }
.grid { grid-template-columns: repeat(2, 1fr); }
}
</style>
</head>
<body>
<div class="wrap">
<div class="layout">
<!-- LEFT HERO -->
<div class="hero">
<span class="hero-badge">สถานที่ท่องเที่ยว</span>
<div class="hero-title">แนะนำ</div>
<div class="hero-bang">!!!</div>
<img class="hero-photo p1" src="images/group-costume.jpg" alt="ชุดลาวเวียง">
<img class="hero-photo p2" src="images/dance-show.jpg" alt="การแสดงพื้นบ้าน">
<div class="sticker s1">😆</div>
<div class="sticker s2">😍</div>
<div class="fab-heart">♥</div>
</div>
<!-- RIGHT CONTENT -->
<div>
<div class="tabs">
<button class="tab active" data-filter="all">ทั้งหมด</button>
<button class="tab" data-filter="nature">ธรรมชาติ</button>
<button class="tab" data-filter="culture">วิถีวัฒนธรรม</button>
<button class="tab" data-filter="shopping">ช้อปปิ้ง</button>
<button class="tab" data-filter="food">ร้านอาหาร</button>
</div>
<div class="grid">
<div class="card" data-cat="nature">
<img src="images/unnamed.webp" alt="ตลาดน้ำลาวเวียง">
<div class="label">ตลาดน้ำลาวเวียง</div>
</div>
<div class="card" data-cat="nature">
<img src="images/river-view.jpg" alt="ศาลาริมน้ำ">
<div class="label">ศาลาริมน้ำ</div>
</div>
<div class="card" data-cat="culture">
<img src="images/group-costume.jpg" alt="ชุดลาวเวียงดั้งเดิม">
<div class="label">ชุดลาวเวียงดั้งเดิม</div>
</div>
<div class="card" data-cat="culture">
<img src="images/dance-show.jpg" alt="การแสดงพื้นบ้าน">
<div class="label">การแสดงพื้นบ้าน</div>
</div>
<div class="card" data-cat="food">
<img src="images/grilled-banana.jpg" alt="กล้วยปิ้งใบตอง">
<div class="label">กล้วยปิ้งใบตอง</div>
</div>
<div class="card" data-cat="shopping">
<img src="images/shop-walk.jpg" alt="ทางเดินร้านค้า">
<div class="label">ทางเดินร้านค้า</div>
</div>
</div>
</div>
</div>
</div>
<script>
var tabs = document.querySelectorAll(".tab");
var cards = document.querySelectorAll(".card");
for (var i = 0; i < tabs.length; i++) {
tabs[i].addEventListener("click", function () {
for (var j = 0; j < tabs.length; j++) tabs[j].classList.remove("active");
this.classList.add("active");
var filter = this.getAttribute("data-filter");
for (var k = 0; k < cards.length; k++) {
var cat = cards[k].getAttribute("data-cat");
cards[k].classList.toggle("hidden", filter !== "all" && filter !== cat);
}
});
}
</script>
</body>
</html>