Advertisement
Kelly-B9978

[Freebie] Triad

Oct 3rd, 2024 (edited)
57
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.79 KB | None | 0 0
  1. <!--
  2. [คู่มือการแก้ไขโคด]
  3. ฟอนต์ภาษาอังกฤษ : --triad-fonten: system-ui, sans-serif;
  4. ฟอนต์ภาษาไทย : --triad-fontth: 'Sarabun';
  5. * อย่าลืมเอาลิงก์ฟอนต์มาด้วย
  6.  
  7. สีหลัก (ส่วนสีม่วงทั้งหมด) : --triad-maincolor: #bc8da2;
  8. สีหัวข้อ (ตัวอักษรสีเทา ๆ ทั้งหมด) : --triad-bold: #6c757d;
  9. พื้นหลังข้อความ (พื้นหลังสีขาวทั้งหมด) : --triad-bgcontent: #f7f7f7;
  10. สีตัวอักษร (ตัวอักษรสีดำทั้งหมด) : --triad-txtcolor: #212529;
  11.  
  12. สีขอบรูปภาพหน้าสุดท้าย (ขอบหนา) : --triad-img-bg: #fff;
  13. สีขอบรูปภาพหน้าสุดท้าย (ขอบบางรอบนอก) : --triad-img-border: #dee2e6;
  14.  
  15. เพิ่มคลาส faded เพื่อทำให้สีสัญลักษณ์จาง
  16. <i class="fa-solid fa-circle"></i> ==> วงกลมสีเข้ม
  17. <i class="fa-solid fa-circle faded"></i> ==> วงกลมสีอ่อน
  18.  
  19. สามารถเปลี่ยนไอคอนได้ที่ https://fontawesome.com/search?o=r&m=free
  20. โดยไอคอนจะอยู่ในรูป <i class="fa-solid fa-ชื่อไอคอน"></i> ก๊อปมาเปลี่ยนทั้งอันได้เลย
  21. -->
  22.  
  23. <link href="https://dl.dropbox.com/scl/fi/mvqweee43ehd2d9nnph0g/freebie-triad.css?rlkey=i5h5xc5a4jqazleutqqycc2l0&st=hr72f7vk" rel="stylesheet">
  24. <div id="FREEBIE-TRIAD"><a href="https://toyhou.se/Pinky"></a><div class="triad-container" style="--triad-fonten: system-ui, sans-serif;--triad-fontth: 'Sarabun';--triad-maincolor: #bc8da2;--triad-bold: #6c757d;--triad-bgcontent: #f7f7f7;--triad-txtcolor: #212529;--triad-img-bg: #fff;--triad-img-border: #dee2e6;">
  25. <input type="radio" id="ONE" name="profile" checked /><input type="radio" id="TWO" name="profile"><input type="radio" id="THREE" name="profile"><input type="radio" id="FOUR" name="profile"><input type="radio" id="FIVE" name="profile">
  26. <div class="triad-flex-container">
  27. <div class="triad-left" style="--triad-txtcolor: #fff;">
  28. <h1 class="triad-name">Title here</h1>
  29. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/41209448_mcmaAj6OWf4DSKe.png" class="triad-img">
  30. <p>adjective &bull; adjective &bull; adjective</p>
  31. </div>
  32. <div class="triad-right">
  33. <div class="triad-info"><div>Name</div><div>content</div></div>
  34. <div class="triad-info"><div>Called</div><div>content</div></div>
  35. <div class="triad-info"><div>Gender</div><div>content</div></div>
  36. <div class="triad-info"><div>Age</div><div>content</div></div>
  37. <div class="triad-info"><div>Height</div><div>content</div></div>
  38. <div class="triad-info"><div>Race</div><div>or species</div></div>
  39. <div class="triad-info"><div>Role</div><div>what they do</div></div>
  40. <div class="triad-info"><div>Demeanor</div><div>content</div></div>
  41. <div class="triad-info"><div>HTML</div><div>@Pinky</div></div>
  42. </div></div>
  43. <div class="triad-tab-container">
  44. <div class="triad-label-group" style="--triad-txtcolor: #fff;">
  45. <label for="ONE" title="Intro"><i class="fa-solid fa-star"></i></label>
  46. <label for="TWO" title="Character"><i class="fa-solid fa-heart-pulse"></i></label>
  47. <label for="THREE" title="Story"><i class="fa-solid fa-book"></i></label>
  48. <label for="FOUR" title="Trivia"><i class="fa-solid fa-list"></i></label>
  49. <label for="FIVE" title="Links"><i class="fa-solid fa-link"></i></label>
  50. </div>
  51. <div class="triad-content" id="ONE">
  52. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/42776996_b8163aJrDZTgE1R.png">
  53. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. จตุคามฟรังก์รีดไถคอรัปชันแล็บ เหี่ยวย่นไฮไลต์ราเม็ง แอปเปิ้ลโมหจริตเช็งเม้งคองเกรสแดนซ์ อัลตราเรตลิสต์โกลด์ ฟอร์ม ต้าอ่วยคอนแท็ค บร็อคโคลีเจ๊าะแจ๊ะ โซนติ่มซำอิเหนาแพตเทิร์นอพาร์ตเมนต์ อัลมอนด์สหัสวรรษพันธุวิศวกรรมวอล์ก คำตอบคาแรคเตอร์เคส หม่านโถวจ๊อกกี้ไกด์เยลลี่ นางแบบทับซ้อน ฮิตแคมเปญอพาร์ตเมนต์แคร็กเกอร์โชห่วย ศิรินทร์ ฮากกามินท์เฟรชชี่แพ็คพาร์ บลอนด์</p>
  54. </div>
  55. <div class="triad-content" id="TWO">
  56. <div class="triad-content-flex">
  57. <div class="triad-info"><div>Charisma</div>
  58. <div><i class="fa-solid fa-circle"></i>
  59. <i class="fa-solid fa-circle"></i>
  60. <i class="fa-solid fa-circle"></i>
  61. <i class="fa-solid fa-circle faded"></i>
  62. <i class="fa-solid fa-circle faded"></i>
  63. </div></div>
  64. <div class="triad-info"><div>Kindness</div>
  65. <div><i class="fa-solid fa-circle"></i>
  66. <i class="fa-solid fa-circle"></i>
  67. <i class="fa-solid fa-circle"></i>
  68. <i class="fa-solid fa-circle faded"></i>
  69. <i class="fa-solid fa-circle faded"></i>
  70. </div></div>
  71. <div class="triad-info"><div>Patience</div>
  72. <div><i class="fa-solid fa-circle"></i>
  73. <i class="fa-solid fa-circle"></i>
  74. <i class="fa-solid fa-circle"></i>
  75. <i class="fa-solid fa-circle faded"></i>
  76. <i class="fa-solid fa-circle faded"></i>
  77. </div></div>
  78. <div class="triad-info"><div>Temper</div>
  79. <div><i class="fa-solid fa-circle"></i>
  80. <i class="fa-solid fa-circle"></i>
  81. <i class="fa-solid fa-circle"></i>
  82. <i class="fa-solid fa-circle faded"></i>
  83. <i class="fa-solid fa-circle faded"></i>
  84. </div></div>
  85. <div class="triad-info"><div>Integrity</div>
  86. <div><i class="fa-solid fa-circle"></i>
  87. <i class="fa-solid fa-circle"></i>
  88. <i class="fa-solid fa-circle"></i>
  89. <i class="fa-solid fa-circle faded"></i>
  90. <i class="fa-solid fa-circle faded"></i>
  91. </div></div>
  92. <div class="triad-info"><div>Courage</div>
  93. <div><i class="fa-solid fa-circle"></i>
  94. <i class="fa-solid fa-circle"></i>
  95. <i class="fa-solid fa-circle"></i>
  96. <i class="fa-solid fa-circle faded"></i>
  97. <i class="fa-solid fa-circle faded"></i>
  98. </div></div>
  99. <div class="triad-info"><div>Intellect</div>
  100. <div><i class="fa-solid fa-circle"></i>
  101. <i class="fa-solid fa-circle"></i>
  102. <i class="fa-solid fa-circle"></i>
  103. <i class="fa-solid fa-circle faded"></i>
  104. <i class="fa-solid fa-circle faded"></i>
  105. </div></div>
  106. <div class="triad-info"><div>Confidence</div>
  107. <div><i class="fa-solid fa-circle"></i>
  108. <i class="fa-solid fa-circle"></i>
  109. <i class="fa-solid fa-circle"></i>
  110. <i class="fa-solid fa-circle faded"></i>
  111. <i class="fa-solid fa-circle faded"></i>
  112. </div></div>
  113. <div class="triad-info"><div>Maturity</div>
  114. <div><i class="fa-solid fa-circle"></i>
  115. <i class="fa-solid fa-circle"></i>
  116. <i class="fa-solid fa-circle"></i>
  117. <i class="fa-solid fa-circle faded"></i>
  118. <i class="fa-solid fa-circle faded"></i>
  119. </div></div>
  120. <div class="triad-info"><div>Humour</div>
  121. <div><i class="fa-solid fa-circle"></i>
  122. <i class="fa-solid fa-circle"></i>
  123. <i class="fa-solid fa-circle"></i>
  124. <i class="fa-solid fa-circle faded"></i>
  125. <i class="fa-solid fa-circle faded"></i>
  126. </div></div>
  127. <div class="triad-info-like"><div>Likes</div>
  128. <ul>
  129. <li>Content</li>
  130. <li>Content</li>
  131. <li>Content</li>
  132. <li>Content</li>
  133. </ul></div>
  134. <div class="triad-info-dislike"><div>Dislikes</div>
  135. <ul>
  136. <li>Content</li>
  137. <li>Content</li>
  138. <li>Content</li>
  139. <li>Content</li>
  140. </ul></div>
  141. </div></div>
  142. <div class="triad-content" id="THREE">
  143. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/40744335_DjG4rbJq3d4Jqj0.png">
  144. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. จตุคามฟรังก์รีดไถคอรัปชันแล็บ เหี่ยวย่นไฮไลต์ราเม็ง แอปเปิ้ลโมหจริตเช็งเม้งคองเกรสแดนซ์ อัลตราเรตลิสต์โกลด์ ฟอร์ม ต้าอ่วยคอนแท็ค บร็อคโคลีเจ๊าะแจ๊ะ โซนติ่มซำอิเหนาแพตเทิร์นอพาร์ตเมนต์ อัลมอนด์สหัสวรรษพันธุวิศวกรรมวอล์ก คำตอบคาแรคเตอร์เคส หม่านโถวจ๊อกกี้ไกด์เยลลี่ นางแบบทับซ้อน ฮิตแคมเปญอพาร์ตเมนต์แคร็กเกอร์โชห่วย ศิรินทร์ ฮากกามินท์เฟรชชี่แพ็คพาร์ บลอนด์</p>
  145. <p class="triad-subtopic"><i class="fa-solid fa-bookmark"></i> Subheader</p>
  146. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. จตุคามฟรังก์รีดไถคอรัปชันแล็บ เหี่ยวย่นไฮไลต์ราเม็ง แอปเปิ้ลโมหจริตเช็งเม้งคองเกรสแดนซ์ อัลตราเรตลิสต์โกลด์ ฟอร์ม ต้าอ่วยคอนแท็ค บร็อคโคลีเจ๊าะแจ๊ะ โซนติ่มซำอิเหนาแพตเทิร์นอพาร์ตเมนต์ อัลมอนด์สหัสวรรษพันธุวิศวกรรมวอล์ก คำตอบคาแรคเตอร์เคส หม่านโถวจ๊อกกี้ไกด์เยลลี่ นางแบบทับซ้อน ฮิตแคมเปญอพาร์ตเมนต์แคร็กเกอร์โชห่วย ศิรินทร์ ฮากกามินท์เฟรชชี่แพ็คพาร์ บลอนด์</p>
  147. <p class="triad-subtopic"><i class="fa-solid fa-bookmark"></i> Subheader</p>
  148. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. จตุคามฟรังก์รีดไถคอรัปชันแล็บ เหี่ยวย่นไฮไลต์ราเม็ง แอปเปิ้ลโมหจริตเช็งเม้งคองเกรสแดนซ์ อัลตราเรตลิสต์โกลด์ ฟอร์ม ต้าอ่วยคอนแท็ค บร็อคโคลีเจ๊าะแจ๊ะ โซนติ่มซำอิเหนาแพตเทิร์นอพาร์ตเมนต์ อัลมอนด์สหัสวรรษพันธุวิศวกรรมวอล์ก คำตอบคาแรคเตอร์เคส หม่านโถวจ๊อกกี้ไกด์เยลลี่ นางแบบทับซ้อน ฮิตแคมเปญอพาร์ตเมนต์แคร็กเกอร์โชห่วย ศิรินทร์ ฮากกามินท์เฟรชชี่แพ็คพาร์ บลอนด์</p>
  149. </div>
  150. <div class="triad-content" id="FOUR">
  151. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/40370057_0vDKTvbcUfIvtpW.png">
  152. <ul>
  153. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris.</li>
  154. <li>มุมมองแหววมาร์จินมอคค่า ทีวี เปียโนพรีเซ็นเตอร์เรซิ่นฟีเวอร์เจล</li>
  155. <li>Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit.</li>
  156. <li>วิดีโอ สุนทรีย์ชนะเลิศบอดี้ไทยแลนด์ผู้นำ แพทเทิร์น</li>
  157. <li>Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget.</li>
  158. </ul>
  159. </div>
  160. <div class="triad-content" id="FIVE">
  161. <div class="triad-content-grid">
  162. <div class="triad-friend">
  163. <img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/23471745_uDJ.png">
  164. <p><a href="CHARACTER_LINK" target="_BLANK">Character Name</a></p>
  165. <div class="triad-friend-heart">
  166. <i class="fas fa-heart fa-fw"></i>
  167. <i class="fas fa-heart fa-fw"></i>
  168. <i class="fas fa-heart fa-fw"></i>
  169. <i class="fas fa-heart fa-fw faded"></i>
  170. <i class="fas fa-heart fa-fw faded"></i></div>
  171. <div class="triad-friend-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. เวิร์ลด์จอหงวน อาร์ติสต์ติ่มซำทัวร์นาเมนท์นิว แดนเซอร์แฟล็ต โอเพ่น พลานุภาพ</div>
  172. </div>
  173. <div class="triad-friend">
  174. <img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/23471745_uDJ.png">
  175. <p><a href="CHARACTER_LINK" target="_BLANK">Character Name</a></p>
  176. <div class="triad-friend-heart">
  177. <i class="fas fa-heart fa-fw"></i>
  178. <i class="fas fa-heart fa-fw"></i>
  179. <i class="fas fa-heart fa-fw"></i>
  180. <i class="fas fa-heart fa-fw faded"></i>
  181. <i class="fas fa-heart fa-fw faded"></i></div>
  182. <div class="triad-friend-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. เวิร์ลด์จอหงวน อาร์ติสต์ติ่มซำทัวร์นาเมนท์นิว แดนเซอร์แฟล็ต โอเพ่น พลานุภาพ</div>
  183. </div>
  184. <div class="triad-friend">
  185. <img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/23471745_uDJ.png">
  186. <p><a href="CHARACTER_LINK" target="_BLANK">Character Name</a></p>
  187. <div class="triad-friend-heart">
  188. <i class="fas fa-heart fa-fw"></i>
  189. <i class="fas fa-heart fa-fw"></i>
  190. <i class="fas fa-heart fa-fw"></i>
  191. <i class="fas fa-heart fa-fw faded"></i>
  192. <i class="fas fa-heart fa-fw faded"></i></div>
  193. <div class="triad-friend-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. เวิร์ลด์จอหงวน อาร์ติสต์ติ่มซำทัวร์นาเมนท์นิว แดนเซอร์แฟล็ต โอเพ่น พลานุภาพ</div>
  194. </div>
  195. <div class="triad-friend">
  196. <img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/23471745_uDJ.png">
  197. <p><a href="CHARACTER_LINK" target="_BLANK">Character Name</a></p>
  198. <div class="triad-friend-heart">
  199. <i class="fas fa-heart fa-fw"></i>
  200. <i class="fas fa-heart fa-fw"></i>
  201. <i class="fas fa-heart fa-fw"></i>
  202. <i class="fas fa-heart fa-fw faded"></i>
  203. <i class="fas fa-heart fa-fw faded"></i></div>
  204. <div class="triad-friend-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. เวิร์ลด์จอหงวน อาร์ติสต์ติ่มซำทัวร์นาเมนท์นิว แดนเซอร์แฟล็ต โอเพ่น พลานุภาพ</div>
  205. </div>
  206. </div></div>
  207. </div></div></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement