[ย่านที่พักอาศัย] Domus Aelia
<style>
@import 'https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/Boon/Boon.css';
@import url('https://fonts.cdnfonts.com/css/breezy-pro');
/* 1. ซ่อนปุ่ม Radio */
input { display: none; }
/* 2. กรอบหลัก */
.kai-place {
width: 100%;
box-sizing: border-box;
padding: 10%;
background: url("https://wallpapers.com/images/hd/marble-texture-pictures-cvj5xshjxxfh6lsv.jpg") center/500px;
font-size: 16px; font-family: 'Boon';
}
/* 3. กล่องรูปภาพ */
.kai-place-img {
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
position: relative;
transition: background-image 0.4s ease-in-out;
box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* เพิ่มเงาให้รูปนิดหน่อย */
}
/* 4. ปุ่มจุดๆ (Navigation) */
.kai-controls {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 4px;
z-index: 10;
}
.kai-dot {
width: 30px; height: 30px; /* Touch Area */
cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.kai-dot::after {
content: '';
width: 6px; height: 6px; /* Visible Dot */
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
transition: all 0.2s ease;
}
/* 5. ส่วนข้อความ (Text) */
.kai-text-area {
color: #928d7c;
max-width: 500px;
margin: auto;
text-align: justify;
margin-top: 40px; /* ปรับระยะห่างตรงนี้ */
min-height: 150px; /* กันเนื้อหากระตุกเวลามีข้อความสั้นยาวไม่เท่ากัน */
}
.kai-text-content {
display: none; /* ซ่อนข้อความทั้งหมดก่อน */
animation: fadeText 0.6s ease; /* เอฟเฟกต์เฟด */
}
/* Keyframe สำหรับเฟดข้อความ */
@keyframes fadeText {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- LOGIC การทำงาน --- */
/* เปลี่ยนรูปภาพ */
#img1:checked ~ .kai-place .kai-place-img { background-image: url("https://iili.io/f5v6Me1.jpg"); }
#img2:checked ~ .kai-place .kai-place-img { background-image: url("https://iili.io/f5v6EdB.jpg"); }
#img3:checked ~ .kai-place .kai-place-img { background-image: url("https://iili.io/f5v60gV.jpg"); }
/* เปลี่ยนจุด Active */
#img1:checked ~ .kai-place .kai-dot::after,
#img2:checked ~ .kai-place .kai-dot::after,
#img3:checked ~ .kai-place .kai-dot::after {
background: #ffffff;
transform: scale(1.2);
}
/* เปลี่ยนข้อความ (สั่งให้แสดงผล block ตาม ID) */
#img1:checked ~ .kai-place .desc-1 { display: block; }
#img2:checked ~ .kai-place .desc-2 { display: block; }
#img3:checked ~ .kai-place .desc-3 { display: block; }
</style>
<!-- INPUTS -->
<input type="radio" name="kai-gallery" id="img1" checked="">
<input type="radio" name="kai-gallery" id="img2">
<input type="radio" name="kai-gallery" id="img3">
<!-- DISPLAY -->
<div class="kai-place">
<!-- Image Section -->
<div class="kai-place-img">
<div class="kai-controls">
<label for="img1" class="kai-dot"></label>
<label for="img2" class="kai-dot"></label>
<label for="img3" class="kai-dot"></label>
</div>
</div>
<!-- Static Header -->
<div style="text-align: center;margin: 14px;color: #928d7c;">กดที่ปุ่มเพื่อเปลี่ยนภาพ</div>
<div style="text-align: center;margin-top: 72px;color: #615c4c;font-size: 9vw;font-family: 'Breezy Pro'; line-height: .8;">Domus Aelia</div>
<div style="text-align: center;margin-top: 0;color: #615c4c;font-size: 24px;">โดมัส เอเลีย</div>
<!-- Changing Text Section -->
<div class="kai-text-area">
<!-- ข้อความชุดที่ 1 -->
<div class="kai-text-content desc-1">
คฤหาสน์ตระกูลเชมเบอร์เลน หรือที่คนเก่าคนแก่เรียกกันว่า <i>'โดมัส เอเลีย'</i> ตั้งตระหง่านอยู่บนยอดเนินเขาประหนึ่งป้อมปราการสีขาวบริสุทธิ์ ตัวบ้านหินอ่อนสะท้อนแสงแดดยามบ่ายจนเกิดประกายระยิบระยับ ต่างจากบ้านเรือนทั่วไปในโรมใหม่ สายลมบนนี้พัดแรงและเย็นเฉียบเสมอ พัดเอากลิ่นอายของความสูงส่งและระเบียบวินัยอันเคร่งครัดลอยอบอวลไปทั่ว ที่นี่ไม่ใช่แค่บ้าน แต่มันคือวิหารแห่งกฎเกณฑ์ที่หล่อหลอมให้ไคเติบโตขึ้นมา
</div>
<!-- ข้อความชุดที่ 2 -->
<div class="kai-text-content desc-2">
ก้าวเข้ามาภายในคฤหาสน์จะพบกับโถงสูงที่ให้ความรู้สึกโปร่งและน่าเกรงขาม มีเสาโรมันแบบเดียวกับหน้าบ้านเรียงรายอยู่ภายใน พื้นปูด้วยหินอ่อนขัดมันสีครีมแผ่นใหญ่ มีบันไดหินอ่อนขนาดใหญ่ทอดตัวขึ้นสู่ชั้นสอง แสงแดดธรรมชาติส่องเข้ามาจากหน้าต่างบานสูง ทำให้ห้องดูสว่างไสวและอบอุ่น การตกแต่งเน้นความเรียบง่ายแต่ดูแพง มีรูปปั้นหินอ่อนคลาสสิกตั้งประดับเพื่อแสดงถึงรสนิยม
</div>
<!-- ข้อความชุดที่ 3 -->
<div class="kai-text-content desc-3">
ห้องนอนขนาดกว้างขวางปูด้วยพื้นหินอ่อนสีครีม มีหน้าต่างทรงโค้งสูงบานใหญ่ที่เปิดรับแสงแดดและมองเห็นท้องฟ้า เฟอร์นิเจอร์เป็นสไตล์โรมันคลาสสิกที่ดูแข็งแรง เตียงนอนปูด้วยผ้าปูที่นอนสีขาวสะอาดตาที่ถูกดึงจนตึงไม่มีรอยยับ ปลายเตียงมีหีบไม้แกะสลักสำหรับเก็บของ มุมห้องมีโต๊ะทำงานไม้เนื้อแข็งที่จัดวางปากกาและสมุดบันทึกไว้อย่างเป็นระเบียบ และที่ขาดไม่ได้คือ กล้องดูดาวทองเหลือง ตั้งตระหง่านอยู่ที่ริมหน้าต่าง
</div>
</div>
</div> แก้ไขครั้งสุดท้ายโดย Kai เมื่อ 2025-12-12 01:33 <br /><br /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"><style>body{background: url("https://wallpapers.com/images/hd/marble-texture-pictures-cvj5xshjxxfh6lsv.jpg") center/500px !important;}@import 'https://cdn.jsdelivr.net/gh/lazywasabi/thai-web-fonts@7/fonts/Boon/Boon.css';@import url('https://fonts.cdnfonts.com/css/breezy-pro');.rp-v1-container{width:100%;max-width:650px;margin:0 auto;background:url("https://wallpapers.com/images/hd/marble-texture-pictures-cvj5xshjxxfh6lsv.jpg") center/500px;padding:40px;box-sizing:border-box;font-family:'Boon',sans-serif;color:#615c4c; font-size: 14px; line-height: 1.6;}.rp-v1-gallery{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:30px;height:300px}.rp-v1-img{background-size:cover;background-position:top center;width:31%}.img-left{height:220px;margin-top:40px;background-image:url('https://iili.io/f5SZTml.png')}.img-mid{height:280px;margin-top:0px;background-image:url('https://iili.io/f5SZ5L7.png');z-index:2}.img-right{height:200px;margin-top:60px;background-image:url('https://iili.io/f5SZRXS.png')}.meta-item{flex:1 1 40%;font-size:13px;display:flex;align-items:baseline}.meta-label{font-weight:bold;margin-right:5px;color:#928d7c;text-transform:uppercase}.meta-npc{color:#8b5a5a}.rp-v1-content{text-align:justify;line-height:1.7;font-size:15px;padding:50px;background:rgba(255,255,255,0.6)}.rp-v1-meta-style1{display:grid;grid-template-columns:1fr 1fr;gap:15px;background:rgba(255,255,255,0.6);margin-bottom:10px;padding:25px 25px 15px}.meta-item-1{display:flex;align-items:center;gap:12px;font-size:13px;color:#615c4c;border-bottom:1px dashed #c0b9a3;padding-bottom:8px}.meta-item-1:nth-last-child(-n+2){border-bottom:none}.meta-icon-box{i{font-style: normal;}width:30px;height:30px;background:#615c4c;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}.meta-label-1{font-weight:bold;font-size:10px;display:block;color:#928d7c;text-transform:uppercase;letter-spacing:1px}.meta-val-1{display:block}.rp-v1-container div.quote{background: rgba(255,255,255,0.6) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='28' height='27'%3e%3cpath fill='%23d8e7f2' d='M11 16v10H1V16C1 10 7 1 11 1v5c-2 0-5 6-5 10h5zm16 0v10H17V16c0-6 6-15 10-15v5c-2 0-5 6-5 10h5z'/%3e%3c/svg%3e") no-repeat 20px 6px;}</style><div class="rp-v1-container"><div style="text-align: center; font-family: 'Breezy Pro'; font-size: 60px; margin-bottom: 20px;">Kai Chamberlain</div><div class="rp-v1-gallery"><div class="rp-v1-img img-left"></div><div class="rp-v1-img img-mid"></div><div class="rp-v1-img img-right"></div></div><div class="rp-v1-meta-style1">
<div class="meta-item-1"><div class="meta-icon-box"><i class="fa-solid fa-location-dot"></i></div><div><span class="meta-label-1">Location</span><span class="meta-val-1">ระเบียงชั้นสอง</span></div></div>
<div class="meta-item-1"><div class="meta-icon-box"><i class="fa-solid fa-clock"></i></div><div><span class="meta-label-1">Time</span><span class="meta-val-1">01:00 น.</span></div></div>
<div class="meta-item-1"><div class="meta-icon-box"><i class="fa-solid fa-bullseye"></i></div><div><span class="meta-label-1">Goal</span><span class="meta-val-1"> </span></div></div>
<div class="meta-item-1"><div class="meta-icon-box"><i class="fa-solid fa-user-group"></i></div><div><span class="meta-label-1">With</span><span class="meta-val-1" style="color:#a87b7b;"> </span></div></div></div>
<div class="rp-v1-content">
นาฬิกาบนผนังบอกเวลาล่วงเข้าวันใหม่ไปนานโข แต่เด็กหนุ่มหนึ่งเดียวแห่งโดมัส เอเลียกลับสว่างโร่ไร้วี่แววของความง่วงงุน ความเงียบสงัดของคฤหาสน์เชมเบอร์เลนในยามวิกาลช่างน่าหงุดหงิด มันเงียบจนพาลให้ได้ยินเสียงความคิดของตัวเองตีกันวุ่นวายไปหมด ไคผุดลุกขึ้นจากเตียงหนานุ่มราคาแพงที่ไม่ได้ช่วยให้หลับสบายขึ้นเลยสักนิด ก่อนจะพาตัวเองออกไปยังส่วนที่เขาโปรดปรานที่สุด ระเบียงหอคอยชั้นบนสุด
<br><br>
สายลมยามดึกพัดกรรโชกปะทะใบหน้า แรงลมระดับที่คนปกติคงรีบปิดหน้าต่างหนี แต่สำหรับบุตรแห่งจูปิเตอร์แล้ว มันเป็นสัมผัสที่ทำให้จิตใจสงบลงได้อย่างน่าประหลาด ไคเท้าแขนลงกับราวระเบียงหินอ่อน นัยน์ตาสีน้ำตาลเข้มทอดมองลงไปยังทิวทัศน์ของนิวโรมที่หลับใหลอยู่เบื้องล่าง จากตรงนี้ทุกอย่างดูเล็กจ้อยเหลือเกิน เล็กพอ ๆ กับความอดทนของเขาที่มีต่อความคาดหวังของตระกูล
<br><br>
การแบกรับนามสกุลเชมเบอร์เลนและสายเลือดของราชาแห่งทวยเทพไม่ใช่เรื่องสนุกเลยสักนิด พรุ่งนี้ก็ต้องตื่นมาเจอตารางเรียนยัดทะนานที่คุณแม่จัดไว้อีก ถ้ายังขืนตาค้างอยู่อย่างนี้ มีหวังพรุ่งนี้เขาคงได้หงุดหงิดตัวเองตายก่อนจะได้พิสูจน์ฝีมือให้ใครเห็นแน่ ๆ เด็กหนุ่มถอนหายใจยาว เหยียดหลังตรงตามความเคยชินแม้จะไม่มีใครมอง ปล่อยให้กระแสลมโอบล้อมกายแทนผ้าห่ม หวังเพียงว่ามันจะช่วยพัดพาความว้าวุ่นในหัวออกไปได้บ้างสักนิดก็ยังดี
</div><div class="quote"> <blockquote><a href="https://percyjackson.mooorp.com/thread/1064/1/1">รางวัลสมาชิกใหม่ที่ถูกเชิญชวน</a><br>
ทันทีที่ลงโรลเพลย์แรกได้รับ
<br><ol><li>+500 EXP
เงินเริ่มต้นจากพ่อแม่ </li><li>+1,000 ดอลล่าร์
</li><li>ถุงเงินจากพ่อแม่เทพเจ้า +25 ดีนาเรียส</li></ol></blockquote> </div></div>
หน้า:
[1]