CupidCall II : หัวกระทู้ Cupidgram

<link href="https://savant777.github.io/zoecode/CupidCall/CupidCall2.css" rel="stylesheet">
<div id="CupidCall2"><a href="https://discord.com/users/625292873914515456/"></a><div id="cupidthread" class="cupid-set"><div class="cpc-head"></div>
<div class="cpc-body" style="background: var(--cupid-txt);"><ic name="l"></ic><ic name="r"></ic><ic name="h"></ic><ic name="x"></ic><img src="https://i.imgur.com/ZIDFWVf.png">
<div class="cpc-gram"><div class="cpc-icon"></div>
<div class="cpc-input"><div class="txtbox">What's on your mind?</div>
<div class="toolbox"><div class="tb-l"><ic name="sm"></ic><ic name="lc"></ic><ic name="fr"></ic></div><div>20/2,000</div></div></div>
<div class="cpc-btn">Post</div>
</div></div>
<div class="cpc-body"><div class="cpc-nav"></div>
<img src="https://i.imgur.com/FUov2hK.png">
<div class="cpc-search"><div>โคดกิจกรรม</div></div>
<div class="cpc-divide"><i class="fi fi-sr-heart"></i><i class="fi fi-br-comment"></i><i class="fi fi-br-paper-plane"></i></div>
<h1>ZZZCODE EDITOR</h1>
[align=center]ตัวช่วยที่จะทำให้การแก้ไขโคดของคุณง่ายขึ้น ! [url=https://zzzcode.vercel.app/?group=activity&tag=cupidcall]คลิก[/url][/align]
<img src="https://iili.io/BW089ae.png" style="max-width: 100%;margin-inline: auto;display: block;margin-block: 1rem;">[b]วิธีการใช้งาน:[/b]
[list]
[*]คลิกปุ่ม <code style="background: var(--cupid-primary);color: var(--cupid-bg);padding: 0 4px;"><> use_this</code> เพื่อเข้าสู่หน้าแก้ไขเทมเพลต
[*]กรอกข้อมูลในแต่ละช่องให้ครบถ้วนพร้อมดู Live Preview
[*]เสร็จแล้วกดปุ่ม Copy นำโคดไปใช้ได้เลย !
[/list]
<hr>
<h1>Cupidgram Code</h1>
<img src="https://iili.io/fgyx9Mg.png" style="width: 500px;max-width: 100%;margin-inline: auto;display: block;margin-block-start: 1rem;">
[b]คู่มือการแก้ไขโคด[/b]
[list]
[*]สีหลัก (สีแดงทั้งหมด): --cupid-primary: #d71920;
[*]สีรอง (สีดำทั้งหมด รวมถึงตัวอักษร): --cupid-txt: #000;
[/list]
หากต้องการปรับตำแหน่งภาพให้เพิ่ม [font=Monaco, Consolas, Courier, monospace]--cupid-pos: 50% 50%;[/font] ต่อท้ายลิงก์รูปที่ต้องการปรับ
[list]
[*][color=gray]เลขตัวแรกคือการขยับซ้าย - ขวา โดย 0% = ชิดซ้าย 100% = ชิดขวา[/color]
[*][color=gray]เลขตัวหลังคือการขยับขึ้น - ลง โดย 0% = ชิดบน 100% = ชิดล่าง[/color]
[/list]
หากต้องการปรับขนาดภาพให้เพิ่ม [font=Monaco, Consolas, Courier, monospace]--cupid-size: cover;[/font] ต่อท้ายลิงก์รูปที่ต้องการปรับ
[list]
[*][color=gray]cover คือ ขยายเต็มพื้นที่[/color]
[*][color=gray]100% คือ ขนาดเดิมของรูป[/color]
[*][color=gray]มากกว่า 100% คือ ขนาดใหญ่ขึ้น[/color]
[*][color=gray]น้อยกว่า 100% คือ ขนาดเล็กลง[/color]
[/list]
<div style="user-select: all;">
[code]<link href="https://savant777.github.io/zoecode/CupidCall/CupidCall2.css" rel="stylesheet">
<div id="CupidCall2"><a href="https://discord.com/users/625292873914515456/"></a><div id="cupidgram" class="cupid-set" style="--cupid-primary: #d71920;--cupid-txt: #000;">
<div class="cpc-head"><a href="--ลิงก์โพสต์โปรไฟล์--">--Name--</a></div>
<div class="cpc-body"><ic name="l"></ic><ic name="r"></ic><ic name="h"></ic><ic name="x"></ic><div class="cpc-nav"></div>
<div class="cpc-img" style="--cupid-pic: url(--ลิงก์รูปภาพ--);"><p></p></div>
<div class="cpc-icon"><div class="cpc-icon-1"></div><div class="cpc-icon-2"></div></div>
<div class="cpc-post"><b>--ชื่อแอ็กเคานต์--</b>
--แคปชัน--</div>
<div class="cpc-comment"><div>Please enter your details...</div></div>
</div></div></div>[/code]
</div></div></div></div>