[ยื่นขอเปิดห้องทดลองโค้ต]
<!-- Font Awesome for icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.jupiter-container {
display: flex;
flex-direction: column;
width: 100%;
height: 140vh;
background-color: #f7f5ef;
justify-content: center;
align-items: center;
}
.olympus-content {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
background-color: #f7f5ef;
position: relative;
width: 100%;
height: 100%;
}
.romanus-scroll-container {
position: relative;
width: 80%; /* Adjusted for better responsiveness */
height: auto;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
background-color: transparent; /* Changed to transparent to let image background show */
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
.romanus-scroll-container img {
width: 100%;
height: auto;
object-fit: contain; /* Ensure image scales properly */
}
.divine-text-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #4b4b4b;
font-family: 'Times New Roman', serif;
font-size: clamp(0.8rem, 2vw, 1.25rem); /* Use clamp for fluid typography */
line-height: 1.5;
width: 50%; /* Constrain text width to prevent overflow */
overflow-wrap: break-word; /* Ensure long words don't overflow */
}
.divine-text-overlay h1 {
font-size: clamp(1rem, 3vw, 1.75rem); /* Use clamp for fluid typography */
font-weight: bold;
margin-bottom: 0.5rem;
}
.divine-text-overlay p {
font-size: clamp(0.7rem, 1.5vw, 1rem); /* Use clamp for fluid typography */
margin: 0;
}
</style>
<div class="jupiter-container rounded-lg shadow-xl">
<!-- Main Content -->
<main class="olympus-content">
<div class="romanus-scroll-container">
<img src="https://i.imgur.com/rHrhUvi.png" alt="Ancient Scroll">
<div class="divine-text-overlay">
<h1>ห้องนี้สำหรับใช้ลองโค้ตเท่านั้น</h1><div>ห้ามฝากเนื้อหาสำคัญใด ๆ ไว้ในห้องนี้</div><div>โปรดเก็บรักษาเนื้อหาที่จะใช้งานใน Google Docs</div><div>หรือบนคอมพิวเตอร์เสมอ</div><div><br></div><div>แบบฟอร์มขอรับกระทู้ทดลองโค้ต</div><div>ชื่อเต็ม:</div><div>Username:</div><div>ชื่อกระทู้ทดลองโค้ต:</div><div><br></div><div>เทมเพลต Code html หน้าปก: (แนบใส่กล่องโค้ต)</div><div><br></div><div>เมื่อได้รับอนุมัติจะปรากฎกระทู้ทดลองโค้ตส่วนตัวที่ <a href="https://percyjackson.mooorp.com/forum/140/1">[ห้องทดลองโค้ต</a>] </div>
</div>
</div>
</main>
</div>
แบบฟอร์มขอรับกระทู้ทดลองโค้ต
ชื่อเต็ม: Moneka Marantear BlossomUsername: Monekaชื่อกระทู้ทดลองโค้ต: [ห้องทดลองโค้ด] สมุดทดลองโค้ดโง่ ๆ ของ มนกเทมเพลต Code html หน้าปก:
<div style="text-align: center;"><font face="TH SarabunPSK" size="6" color="#9932cc"><b><i>สมุดโง่ ๆ ของ มนก </i></b></font></div>
แบบฟอร์มขอรับกระทู้ทดลองโค้ดชื่อเต็ม: แมคเคนซี คลอดด์ ลินคอล์นUsername: Mackenzieชื่อกระทู้ทดลองโค้ด: Mackenzie : ดินแดนพิศวง อย่าลืมพกยาดมก่อนเข้ามาเทมเพลต Code html หน้าปก:
<div class="bt1b-fondo" style="background:#0f1637;"><div class="bt1-baul" style="background:url('https://img2.pic.in.th/pic/testcode01.png')center; background-size:cover;"><div class="bt1baul-barra"><a bt-title="Expediente" href="#"><i class="fas fa-user-tie"></i></a><a bt-title="MP" href="#"><i class="fas fa-envelope"></i></a><a bt-title="Relaciones" href="#"><i class="fas fa-users"></i></a><a bt-title="Moodboard" href="#"><i class="fas fa-camera-retro"></i></a> <a bt-title="Playlist" href="#"><i class="fas fa-compact-disc"></i></a><a bt-title="Instagram" href="#"><i class="fab fa-instagram"></i></a><a bt-title="Twitter" href="#"><i class="fab fa-twitter"></i></a> </div><div class="bt1baul-titulo"> <div><b><font color="#041243">Mackenzie</font></b><span><font color="#000000">For Code Test</font></span></div></div></div><div class="bt1baul-imagenredonda"><img src="https://64.media.tumblr.com/21bd6617088e63531596a701492aa51a/d73664946304f49b-a6/s400x600/5697218c06aaa607cb233ca48eec7f9d54db2562.gifv"></div></div><link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap" rel="stylesheet"><a class="bettycred" href="http://bettyleg.tumblr.com/">bettyleg</a>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><style>@font-face {font-family: 'Goldie Rainbow'; src: url('https://dl.dropbox.com/s/vy3ql8rmyhe42au/Goldie%20Rainbow.ttf');src: url('https://dl.dropbox.com/s/vy3ql8rmyhe42au/Goldie%20Rainbow.ttf') format('truetype'); font-weight: normal;font-style: normal;} .bt1b-fondo{margin:30px auto; width:400px; background:#ddd; padding-bottom:40px; overflow:hidden; outline:1px solid #ddd;}.bt1-baul{width:400px; height:400px; border-bottom:1px solid #fff; overflow:hidden;}.bt1baul-imagenredonda{width:120px; height:120px; background:#fff; border-radius:180px; margin:0 auto; margin-top:-60px; border:1px solid #fff; display:flex; align-items:center; justify-content:center; } .bt1baul-imagenredonda img{width:120px; height:120px; border-radius:180px;} .bt1b-titulom{border-bottom:1px solid #ddd; height:80px; display:flex; align-items:center; justify-content:center; background:#fafafa;font-family: 'Goldie Rainbow'; font-size:40px; font-weight:700; letter-spacing:2px; } .bt1baul-barra{height:60px; border-bottom:1px solid #888; backdrop-filter:grayscale(1) blur(4px); display:flex; align-items:center; justify-content:center; position:relative; top:-61px; webkit-transition: 1s; -o-transition: 1s;transition: 1s;} .bt1baul-titulo{height:150px; margin-top:160px; display:flex; align-items:center; justify-content:center; line-height:28px; text-align:center;} .bt1baul-titulo span{color:#fafafa; text-transform:uppercase; font-weight:700; font-size:12px; letter-spacing:2px; font-family:'Lato', sans-serif;} .bt1baul-barra a {color:#fff; font-size:16px; padding:0px 12px;} .bt1baul-barra a i{transform:rotate(0deg);webkit-transition: 1s; -o-transition: 1s;transition: 1s;}.bt1-baul:hover .bt1baul-barra{top:0px; webkit-transition: 1s; -o-transition: 1s;transition: 1s;} .bt1baul-barra a:hover i{color:#1c3172;webkit-transition: 1s; -o-transition: 1s;transition: 1s; transform:rotate(10deg)} .bt1baul-imagenredonda{width:120px; height:120px; background:#fff; border-radius:180px; margin:0 auto; margin-top:-60px; border:1px solid #fff; display:flex; align-items:center; justify-content:center; } .bt1baul-imagenredonda img{width:120px; height:120px; border-radius:180px;} .bt1baul-titulo b{display:block; font-family: 'Goldie Rainbow'; font-size:60px; color:#fff; letter-spacing:1px; text-shadow:2px 2px #333;} .bettycred{display:block; margin:-20px auto 0px; border:1px solid #ddd; width:100px; padding:5px 0px; font-size:8px;text-transform:uppercase; text-align:center; letter-spacing:2px;background:#fff; color:#999; text-decoration:none;}</style>
แบบฟอร์มขอรับกระทู้ทดลองโค้ตชื่อเต็ม: Denista Nortara (Nereza Henladys)Username: Denistaชื่อกระทู้ทดลองโค้ต: 𝖉𝖊𝖓𝖎𝖘𝖙𝖆 ⋆ 𝖊𝖗𝖆
เทมเพลต Code html หน้าปก: <style>
.profile-card {
width: 600px;
background: #fff;
border: 2px solid #f3d6df;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: center;
}
.profile-card img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 5px solid #f3d6df;
}
.profile-card h1 {
font-size: 28px;
color: #d37a8c;
margin: 15px 0;
}
.profile-card p {
font-size: 14px;
color: #888;
line-height: 1.6;
margin: 20px 0;
}
.profile-card p span {
font-weight: bold;
color: #d37a8c;
}
.button-group {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
.button-group a {
display: inline-block;
padding: 5px 10px;
background: #f3d6df;
color: #d37a8c;
font-size: 14px;
border-radius: 5px;
text-decoration: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s, box-shadow 0.3s;
}
.button-group a:hover {
background: #d37a8c;
color: #fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
</style>
<div align="center">
<div class="profile-card"><font face="Kanit"><font size="3">
<img src="https://i.imgur.com/vsD0DGo.png" alt="Profile Picture">
<h1><font size="5">DENISTA - NEREZA</font></h1>
<p>Welcome to MY PAGE for HTML (T T)</p>
<div class="button-group">
<a href="#">dm for someone who need help</a>
</div>
</font></font></div></div>
แบบฟอร์มขอรับกระทู้ทดลองโค้ตชื่อเต็ม: Carlotta Hamal (LIN YUECHAN)Username: Carlottaชื่อกระทู้ทดลองโค้ต: ✴ 𝕮𝐚𝐫𝐥𝐨𝐭𝐭𝐚'𝓼 ━━╋━ 𝙯𝙤𝙣𝙚
เทมเพลต Code html หน้าปก:
<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@400;700&display=swap" rel="stylesheet">
<div style="width: 800px; height: 500px; background-color: #000000; border: 3px solid #a11111; border-radius: 20px; box-shadow: 0 0 30px 10px #a11111; margin: 20px auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-family: sans-serif; position: relative; overflow: hidden;">
<div style="color: #cda34f; font-size: 60px; font-weight: bold; letter-spacing: 2px; text-shadow: 0 0 15px #a11111; margin-bottom: 15px;">
YUECHAN'S ZONE
</div>
<div style="color: white; font-family: 'TH SarabunPSK', 'Sarabun', sans-serif; font-size: 36px; font-weight: normal;">
สำหรับทดสอบโค้ดแบบงูปลาอาราเร่
</div>
</div>
แบบฟอร์มขอรับกระทู้ทดลองโค้ตชื่อเต็ม: Cooper Jones Username: Cooper ชื่อกระทู้ทดลองโค้ต: ห้องทดสอบโค้ดของเจ้าหนูคูเปอร์
เทมเพลต Code html หน้าปก:<style>
.cj-card {
width: 550px;
background: #f8f9fa;
border: 1px solid #dee2e6;
border-top: 6px solid #4a6fa5;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
padding: 30px;
text-align: center;
margin: 0 auto;
}
.cj-card img {
width: 110px;
height: 110px;
border-radius: 15px;
border: 4px solid #ffffff;
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
object-fit: cover;
margin-bottom: 10px;
}
/* ชื่อ Cooper Jones */
.cj-card h1 {
font-size: 26px;
color: #2d3436;
margin: 10px 0 5px 0;
text-transform: uppercase;
letter-spacing: 1px;
}
.cj-badge {
display: inline-block;
background: #e2e8f0;
color: #4a6fa5;
padding: 4px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: bold;
margin-bottom: 15px;
}
.cj-card p {
font-size: 14px;
color: #636e72;
line-height: 1.5;
margin: 15px 0 25px 0;
}
.cj-btn {
display: inline-block;
padding: 8px 20px;
background: #4a6fa5;
color: #ffffff !important;
font-size: 13px;
border-radius: 50px;
text-decoration: none;
transition: all 0.2s;
box-shadow: 0 2px 5px rgba(74, 111, 165, 0.3);
}
.cj-btn:hover {
background: #34495e;
transform: translateY(-2px);
}
</style>
<div align="center">
<div class="cj-card">
<font face="Kanit"> <img src="https://i.supaimg.com/996c3cd2-831e-4877-99e7-783b14875755.jpg" alt="Cooper Jones">
<h1>COOPER JONES</h1>
<div class="cj-badge">TEST RUN : #001</div>
<p>
Just a boring code test post.<br>
Nothing to see here, scrolling down.
</p>
<a href="#" class="cj-btn">System Check</a>
</font>
</div>
</div>
แก้ไขครั้งสุดท้ายโดย Clementis เมื่อ 2025-11-27 20:13 <br /><br /><div align="center"><font size="5"><b>แบบฟอร์มขอรับกระทู้ทดลองโคด</b></font></div><div align="center"> <font size="3">- - - - - + - - - - - </font></div><div align="center"><font size="3"><b>ชื่อเต็ม:</b> Clementis Maeve Ratigan</font></div><div align="center"><font size="3"><b>Username:</b> Clementis</font></div><div align="center"><font size="3"><b>ชื่อกระทู้ทดลองโคด:</b> ✦ 𝚙𝚎𝚗𝚎𝚝𝚛𝚊𝚕𝚒𝚊 𓄵</font></div><div align="center"><font size="3"><b> เทมเพลต Code html หน้าปก</b></font></div><div align="center"><font size="3"><b>(รบกวนทำให้เต็มหน้า ไม่เห็นแถบข้างซ้ายมือด้วยได้มั้ยคะ)</b></font></div><div align="center"><link href="https://dl.dropbox.com/scl/fi/821it1nwoad40kfaxnv8b/lannaissance-clementis-codespace.css?rlkey=ze5w2gjoo0bzvjyau4pibjwk0" rel="stylesheet"><br><div class="cmt-ct-bg"><div class="cmt-ct-st"><div class="cmt-ct-ss"><div class="cmt-ct-tt"> Penetralia <div class="cmt-ct-sb"> Clementis Codespace </div></div> เอาไว้แจกบ้าง เอาไว้ใช้เองบ้าง ทุกโคดเขียนโดยคลีเมนทิสเพราะใช้ไอเอในการเขียนไม่เป็น <i><font color="#5e5e5e">(พยายามฝึกอยู่คับ อยากสบายแล้ว)</font></i> เข้าใจแค่ CSS ระดับพื้นฐาน มีได้มีทักษะพอสำหรับสอนใครเลยแต่น่าจะแลกเปลี่ยนความรู้ได้บ้างค่ะ ทักมาพูดคุยหรือจ้างงานได้เสมอเลยนะ <a href="https://discord.com/users/709423728446013520" class="cmt-ct-ds"></a></div></div></div></div>
แบบฟอร์มขอรับกระทู้ทดลองโค้ต
ชื่อเต็ม: Jacqueline Clark
Username: Jacqueline
ชื่อกระทู้ทดลองโค้ต: ❥ --- พื้นที่ทดสอบโค้ดของแจ็ค
เทมเพลต Code html หน้าปก:
<div style="text-align: center;"><img src="https://iili.io/fRK8nHv.jpg"/></div> <font face="Sarabun"><b>แบบฟอร์มขอรับกระทู้ทดลองโค้ต</b>
<hr>
ชื่อเต็ม: Kai Chamberlain</font><div><font face="Sarabun">Username: Kai</font></div><div><font face="Sarabun">ชื่อกระทู้ทดลองโค้ต: Kai's Space</font></div><div><font face="Sarabun">เทมเพลต Code html หน้าปก: </font><img src="https://iili.io/f58PX5B.png" style="display: block; margin: 10% auto; width: 30%;"></div>
หน้า:
[1]