[กระดานจัดอันดับรุ่นพี่ที่ฮอตที่สุดของค่าย]
<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Kanit:wght@300;400;700&display=swap');
/* --- 🌟 IMPERIAL GRAND GALLERY CONTAINER --- */
.imperial-grand-gallery {
max-width: 950px;
margin: 50px auto;
background: #fdfaf2; /* สีครีมทองอ่อนๆ */
border: 2px solid #c5a059;
box-shadow: 0 40px 120px rgba(0,0,0,0.3);
font-family: 'Kanit', sans-serif;
position: relative;
overflow: hidden;
}
/* --- ⚜️ HEADER: มิติและโลโก้ CSS --- */
.gallery-header {
background: linear-gradient(180deg, #34267e 0%, #1a104a 100%);
padding: 70px 0;
text-align: center;
border-bottom: 8px double #c5a059;
position: relative;
}
/* โลโก้ CSS ที่มีมิติ */
.css-logo-title {
font-family: 'Cinzel Decorative', serif;
font-size: 55px;
color: #c5a059;
text-shadow:
-2px -2px 0 #fff,
2px -2px 0 #fff,
-2px 2px 0 #fff,
2px 2px 0 #fff,
4px 4px 10px rgba(0,0,0,0.5); /* เงาด้านหลัง */
letter-spacing: 5px;
margin-bottom: 15px;
display: block;
transform: perspective(500px) rotateX(8deg); /* เพิ่มมิติ */
}
/* --- 📜 CONTENT AREA: พื้นหลังหรูหรา --- */
.gallery-body {
padding: 60px 50px;
background-image: url("https://i.imgur.com/Evmi3Wp.jpg"); /* ใช้ภาพพื้นหลังที่คุณให้มา */
background-size: cover;
background-position: center;
position: relative;
}
/* Overlay สีม่วงโปร่งแสงบนพื้นหลัง */
.gallery-body::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(52, 38, 126, 0.4); /* สีม่วงเข้มโปร่งแสง */
z-index: 1;
}
/* --- ✨ CARD ELEMENTS: หรูหราแต่ละอันดับ --- */
.ranking-card-grand {
background: rgba(255, 255, 255, 0.9);
border: 2px solid #c5a059;
margin-bottom: 50px;
display: flex;
align-items: center;
position: relative;
z-index: 2; /* ให้อยู่เหนือ overlay */
box-shadow: 0 15px 40px rgba(0,0,0,0.3);
padding: 30px;
}
/* เลขลำดับทองเหลือง */
.grand-rank-plate {
width: 80px;
height: 80px;
background: #c5a059;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
margin-right: 35px;
border-radius: 50%;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
/* กรอบรูปทรงคลาสสิก */
.grand-photo-frame {
width: 250px;
height: 250px;
border: 8px solid #34267e;
overflow: hidden;
flex-shrink: 0;
margin-left: 30px; /* เว้นระยะ */
box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
.grand-photo-frame img {
width: 100%;
height: 100%;
object-fit: cover;
filter: sepia(0.1); /* สีรูปดูหรูหราขึ้น */
}
.grand-detail-text {
flex: 1;
padding-left: 40px;
text-align: left;
}
.grand-divider {
width: 100%;
height: 15px;
background: url('https://percyjackson.mooorp.com/static/image/hrline/34.gif') center repeat-x;
opacity: 0.6;
margin: 15px 0;
}
/* --- ⚜️ FOOTER --- */
.gallery-footer {
background: #1a104a;
padding: 30px;
text-align: center;
border-top: 5px solid #c5a059;
}
</style>
<div class="imperial-grand-gallery">
<div class="gallery-header">
<span class="css-logo-title">CAMP HALF-BLOOD</span>
<font face="Kanit" size="4" color="#fdfaf2" style="letter-spacing: 2px;">THE IMPERIAL GRAND GALLERY</font>
<br>
<font face="Kanit" size="2" color="#c5a059" style="letter-spacing: 5px; opacity: 0.8; margin-top: 10px; display: block;">MOST POPULAR SENIORS RANKING</font>
</div>
<div class="gallery-body">
<div style="text-align: center; margin-bottom: 60px; position: relative; z-index: 2;">
<font face="Kanit" size="6" color="#fdfaf2" style="text-shadow: 2px 2px 8px rgba(0,0,0,0.7);"><b>กระดานจัดอันดับรุ่นพี่ที่ฮอตที่สุดของค่าย</b></font>
</div>
<div class="ranking-card-grand">
<div class="grand-rank-plate">
<font face="Cinzel Decorative" size="6" color="#34267e"><b>1</b></font>
</div>
<div class="grand-detail-text">
<font face="Kanit" size="4" color="#34267e"><b><u>IMPERIAL ALPHA</u></b></font>
<div class="grand-divider"></div>
<font face="Kanit" size="6" color="#111111"><b>เลเวอเรทท์ ฟรีมอนท์</b></font><br>
<font face="Kanit" size="4" color="#555555">(เลเวอร์)</font>
</div>
<div class="grand-photo-frame">
<img src="https://img2.pic.in.th/pic/image011b18047ff9d90f.png" alt="Rank 1 Leverett Fremont">
</div>
</div>
<div class="ranking-card-grand">
<div class="grand-rank-plate">
<font face="Cinzel Decorative" size="6" color="#34267e"><b>2</b></font>
</div>
<div class="grand-detail-text">
<font face="Kanit" size="4" color="#34267e"><b><u>IMPERIAL BETA</u></b></font>
<div class="grand-divider"></div>
<font face="Kanit" size="5" color="#111111"><b>วิคตอเรีย แบร์นาร์ด</b></font>
</div>
<div class="grand-photo-frame">
<img src="https://img2.pic.in.th/pic/5c62f0e545de26f6ccc773446973a7d0.png" alt="Rank 2 Victoria Bernard">
</div>
</div>
<div class="ranking-card-grand">
<div class="grand-rank-plate">
<font face="Cinzel Decorative" size="6" color="#34267e"><b>3</b></font>
</div>
<div class="grand-detail-text">
<font face="Kanit" size="4" color="#34267e"><b><u>IMPERIAL GAMMA</u></b></font>
<div class="grand-divider"></div>
<font face="Kanit" size="5" color="#111111"><b>แอนนาเบ็ธ เชส</b></font>
</div>
<div class="grand-photo-frame">
<img src="https://img2.pic.in.th/pic/image8303df29ef52d240.png" alt="Rank 3 Annabeth Chase">
</div>
</div>
<div class="ranking-card-grand">
<div class="grand-rank-plate">
<font face="Cinzel Decorative" size="6" color="#34267e"><b>4</b></font>
</div>
<div class="grand-detail-text">
<font face="Kanit" size="4" color="#34267e"><b><u>IMPERIAL DELTA</u></b></font>
<div class="grand-divider"></div>
<font face="Kanit" size="5" color="#111111"><b>อามิน คิม</b></font>
</div>
<div class="grand-photo-frame">
<img src="https://img5.pic.in.th/file/secure-sv1/kim0da6ea9a97e0f68d.png" alt="Rank 4 Armin Kim">
</div>
</div>
</div>
<div class="gallery-footer">
<font face="Kanit" size="2" color="#c5a059" style="letter-spacing: 3px;">CAMP HALF-BLOOD • POPULARITY ARCHIVE • 2026</font>
</div>
</div>
หน้า:
[1]