View difference between Paste ID: yHJxKcgP and bAT67Lsq

 <!--
 [คู่มือการแก้ไขโคด]
 - สีหลัก (สีแดง) : --vibe-primary: #c51427;
 - สีรอง (สีเทา) :--vibe-secondary: #6d6e71;
 
 - สีพื้นหลัง : --vibe-bg: #f2f2f2;
 - สีตัวอักษร : --vibe-txt: #000;
 - สีขอบ : --vibe-border: #6d6e71;
-<div class="vibe-picture" style="--vibe-pic: url(https://iili.io/2G3vSX2.png);--vibe-pos: 50% 55%;--vibe-size: 122%;"></div>
+
-<div class="vibe-picture" style="--vibe-pic: url(https://iili.io/2G3S3F9.png);--vibe-pos: 70% 40%;--vibe-size: 185%;"></div>
+- ฟอนต์ภาษาไทย* : --vibe-fontth: 'Bai Jamjuree';
-<div class="vibe-picture" style="--vibe-pic: url(https://iili.io/2G38NEP.png);--vibe-pos: 70% 62%;--vibe-size: 122%;"></div>
+* อย่าลืมเอาลิงก์ฟอนต์มาด้วย
-<div class="vibe-picture" style="--vibe-pic: url(https://iili.io/2G38z2n.png);--vibe-pos: 70% 80%;--vibe-size: 110%;"></div>
+
 ------------------------
 [ส่วนแถบด้านบน]
 ด้านซ้าย แก้ที่ <div class="vibe-topbar-item"> อันแรก
 - รูป png : [img]https://iili.io/2E047J1.png[/img]
-<p>Christmas is a season of joy, a time for love, and a moment to remember the blessings we have.</p>
+- คำ : Vibe Journey
 - ไม่ต้องเว้นบรรทัด วางติดกันไปเลย
-<div class="vibe-btn primary">Joy of Xmas</div>
+
-<div class="vibe-btn">The best gift</div>
+ด้านขวา แก้ที่ <div class="vibe-topbar-item"> อันที่สอง
 - เลือกไอคอนจาก https://fontawesome.com/search มาวางได้เลย
 - ไม่ต้องเว้นบรรทัด วางติดกันไปเลย
-<p>กลับมาให้หายคิดถึงอีกครั้งกับกิจกรรมที่จะพาทุกคนไปทำความรู้จักกับตัวละครที่คุณรักมากขึ้น ไม่ว่าจะจากเวิร์สหลักหรือจากกิจกรรมใด ๆ ที่ขึ้นแท่นลูกรักมากเป็นพิเศษ !</p>
+
-<p>[color=#c51427][b]Vibe Journey : Christmas Edition[/b][/color] กิจกรรมที่จะชวนทุกคนให้มาตกแต่งภาพเก้าช่องด้วยรูปอะไรก็ได้ ขอแค่เกี่ยวข้องกับตัวละครของคุณและอยู่ในธีมคริสต์มาสก็เป็นพอ ! อย่าลืมใส่คำอธิบายเล็ก ๆ น้อย ๆ ไม่เกิน 70 คำไว้ด้วยนะ คนอื่นที่แวะเวียนมาเล่นจะได้รู้จักคุณมากขึ้นยังไงล่ะ</p>
+------------------------
-<p>ฟังดูง่ายใช่ไหม งั้นมาเริ่มแชร์ไวบ์ของตัวละครพวกคุณกันเลย</p>
+[ส่วนเฮด]
 รูป 4 ช่อง : --vibe-pic: url(--ลิงก์รูป--);
 
 ส่วนข้อความด้านขวา
-[*]ทำภาพไวบ์ของตัวละครในรูปแบบ 9 ช่อง โดยจะใช้ภาพแบบไหนก็ได้ที่เกี่ยวข้องกับตัวละครในธีม Christmas
+- โลโก้กิจ : [img]https://iili.io/2GfP37V.png[/img] (รูปขนาด 500px ไม่เว้นขอบ)
-[*]เขียนคำอธิบายสำหรับภาพไวบ์ตัวละคร ไม่เกิน 70 คำ
+- ข้อความสักอย่าง แก้ใน <p></p>
-[*]ผู้เล่นจะทำกี่ตัวละครก็ได้ ไม่จำกัด
+- ปุ่มมีสี : จะมีชื่อคลาส primary
-[*]ใช้โคดของกิจกรรมเท่านั้น
+
 ------------------------
 [ส่วนเนื้อหา]
 - หัวข้อ (ตัวไม่ใหญ่มาก ตัวหนา สีตามสีหลัก) ใช้ <h3>หัวข้อ</h3> เวลาใช้ให้เว้นบรรทัดว่างข้างบนไว้ 1 บรรทัดจะห่างพอดี
 - เนื้อหาเป็นย่อหน้า ใส่ใน <p></p> ถ้าจะเพิ่มย่อหน้าก็ก๊อปวางเพิ่ม ถ้าไม่อยากเว้นย่อหน้าข้อความก็พิมพ์ข้อความปกติได้เลยไม่ต้องใช้ <p></p>
-[*]ผู้เข้าร่วมทุกคนจะได้รับ เงินรางวัล 50 ดอลลาร์ และ คริสตัลคะแนน 1 ชิ้น [b][color=#c51427]*[/color][/b]
+
-[*]ผู้เข้าร่วมสามารถลงชื่อขอรับแบนเนอร์ประจำกิจกรรมได้ในดิสคอร์ด
+- นอกนั้นใช้เครื่องมือปกติได้เลย
 
-[align=center][b][color=#c51427]* หากมีผู้เข้าร่วมเกินจำนวน ทางผู้จัดจะทำการสุ่มคริสตัลให้ผู้เข้าร่วมกิจกรรม[/color][/b][/align]
+------------------------
 [เพลงประกอบกิจ]
-<h3>โคดส่งกิจกรรม :</h3>
+
-<details><summary>
+-->
-[align=center][color=#888888](คลิกที่รูปเพื่อรับโคด)[/color]
+
-<img src="https://iili.io/2Gf99VV.png" style="width: 600px;max-width: 100%;">[/align]
+
-</summary>
+
-<h3>สิ่งที่แก้ไขได้</h3>
+
 <div class="vibe-topbar-item">[img]https://iili.io/2E047J1.png[/img]Vibe Journey</div>
-[*][b]สีหลัก[/b] (สำหรับส่วนชื่อ) [b]:[/b]  [font=monospace][color=#6d6e71]--vibe-primary: #c51427;[/color][/font]
+
-[*][b]สีพื้นหลัง :[/b] [font=monospace][color=#6d6e71]--vibe-bg: #f2f2f2;[/color][/font]
+
-[*][b]สีตัวอักษร :[/b] [font=monospace][color=#6d6e71]--vibe-txt: #000;[/color][/font]
+
-[*][b]ฟอนต์ภาษาไทย[color=#c51427]*[/color] :[/b] [font=monospace][color=#6d6e71]--vibe-fontth: 'Bai Jamjuree';[/color][/font]
+
-[*][b]ฟอนต์ภาษาอังกฤษ[color=#c51427]*[/color][/b] (สำหรับส่วนชื่อ) [b]:[/b] [font=monospace][color=#6d6e71]--vibe-fonten: 'Bai Jamjuree';[/color][/font]
+<div class="vibe-picture" style="--vibe-pic: url(--ลิงก์รูป1--);"></div>
 <div class="vibe-picture" style="--vibe-pic: url(--ลิงก์รูป2--);"></div>
-[b][color=#c51427]* อย่าลืมแนบลิงก์ฟอนต์มาด้วย[/color][/b]
+<div class="vibe-picture" style="--vibe-pic: url(--ลิงก์รูป3--);"></div>
 <div class="vibe-picture" style="--vibe-pic: url(--ลิงก์รูป4--);"></div>
-[b][color=#c51427]หมายเหตุ :[/color][/b] เพื่อไม่ให้ยากต่อการแก้ไขโคด ควรตัดรูปเป็นจตุรัสให้เรียบร้อย
+
 <div class="vibe-details">
 [img]https://iili.io/2GfP37V.png[/img]
 <hr>
-[*][b]ขยับตำแหน่งรูป :[/b] [font=monospace][color=#6d6e71]เพิ่ม --vibe-pos: 50% 50%; ต่อท้ายลิงก์รูปที่ต้องการปรับ[/color][/font]
+<p>--คำโปรย--</p>
 <div class="vibe-btn-group">
-[*][b]ขยับซ้ายขวา :[/b] [font=monospace][color=#6d6e71]เพิ่ม/ลดเลข 50% ตัวหน้า[/color][/font]
+<div class="vibe-btn primary">--ปุ่มมีสี--</div>
-[*][b]ขยับขึ้นลง :[/b] [font=monospace][color=#6d6e71]เพิ่ม/ลดเลข 50% ตัวหลัง[/color][/font]
+<div class="vibe-btn">--ปุ่มไม่มีสี--</div>
 </div></div></div>
 <div class="vibe-content">
 <p>--ย่อหน้า 1--</p>
 <p>--ย่อหน้า 2--</p>
-[*][b]ปรับขนาดรูปในวงกลม :[/b] [font=monospace][color=#6d6e71]เพิ่ม --vibe-size: 100%; ต่อท้ายลิงก์รูปที่ต้องการปรับ[/color][/font]
+<p>--ย่อหน้า 3--</p>
 
-[*][b]ขยายใหญ่ :[/b] [font=monospace][color=#6d6e71]เพิ่มเลข 100%[/color][/font]
+
-[*][b]ลดขนาด :[/b] [font=monospace][color=#6d6e71]ลดเลข 100%[/color][/font]
+
 [*]ขั้นตอน 1
 [*]ขั้นตอน 2
-[code]<link href="https://savant777.github.io/zoecode/vibe.css" rel="stylesheet">
+[*]ขั้นตอน 3
-<div id="zzzcode"><a href="https://discord.com/users/625292873914515456/"></a><div class="vibe-play-container" style="--vibe-primary: #c51427;--vibe-bg: #f2f2f2;--vibe-txt: #000;--vibe-fontth: 'Bai Jamjuree';--vibe-fonten: 'Bai Jamjuree';">
+
-<div class="vibe-play-pic" style="--vibe-pic: url(--ลิงก์รูปตัวละคร--);"></div>
+
-<div class="vibe-play-name">--ชื่อตัวละคร--</div>
+
-<p>--เขียนอธิบาย 70 คำ--</p>
+
-<div class="vibe-play-img-group">
+[*]รางวัล 1
-<div id="pic1" class="vibe-play-img" style="--vibe-pic: url(--ลิงก์รูปที่1--);"></div>
+[*]รางวัล 2
-<div id="pic2" class="vibe-play-img" style="--vibe-pic: url(--ลิงก์รูปที่2--);"></div>
+
-<div id="pic3" class="vibe-play-img" style="--vibe-pic: url(--ลิงก์รูปที่3--);"></div>
+
-<div id="pic4" class="vibe-play-img" style="--vibe-pic: url(--ลิงก์รูปที่4--);"></div>
+
-<div id="pic5" class="vibe-play-img" style="--vibe-pic: url(--ลิงก์รูปที่5--);"></div>
+
-<div id="pic6" class="vibe-play-img" style="--vibe-pic: url(--ลิงก์รูปที่6--);"></div>
+
-<div id="pic7" class="vibe-play-img" style="--vibe-pic: url(--ลิงก์รูปที่7--);"></div>
+
-<div id="pic8" class="vibe-play-img" style="--vibe-pic: url(--ลิงก์รูปที่8--);"></div>
+
-<div id="pic9" class="vibe-play-img" style="--vibe-pic: url(--ลิงก์รูปที่9--);"></div>
+
 </div></div></div>