[Freebie] Triad

<!--
[คู่มือการแก้ไขโคด]
ฟอนต์ภาษาอังกฤษ : --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;

เพิ่มคลาส faded เพื่อทำให้สีสัญลักษณ์จาง
<i class="fa-solid fa-circle"></i> ==> วงกลมสีเข้ม
<i class="fa-solid fa-circle faded"></i> ==> วงกลมสีอ่อน

สามารถเปลี่ยนไอคอนได้ที่ https://fontawesome.com/search?o=r&m=free
โดยไอคอนจะอยู่ในรูป <i class="fa-solid fa-ชื่อไอคอน"></i> ก๊อปมาเปลี่ยนทั้งอันได้เลย
-->

<link href="https://dl.dropbox.com/scl/fi/mvqweee43ehd2d9nnph0g/freebie-triad.css?rlkey=i5h5xc5a4jqazleutqqycc2l0&st=hr72f7vk" rel="stylesheet">
<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;">
<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">
<div class="triad-flex-container">
<div class="triad-left" style="--triad-txtcolor: #fff;">
<h1 class="triad-name">Title here</h1>
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/41209448_mcmaAj6OWf4DSKe.png" class="triad-img">
<p>adjective &bull; adjective &bull; adjective</p>
</div>
<div class="triad-right">
<div class="triad-info"><div>Name</div><div>content</div></div>
<div class="triad-info"><div>Called</div><div>content</div></div>
<div class="triad-info"><div>Gender</div><div>content</div></div>
<div class="triad-info"><div>Age</div><div>content</div></div>
<div class="triad-info"><div>Height</div><div>content</div></div>
<div class="triad-info"><div>Race</div><div>or species</div></div>
<div class="triad-info"><div>Role</div><div>what they do</div></div>
<div class="triad-info"><div>Demeanor</div><div>content</div></div>
<div class="triad-info"><div>HTML</div><div>@Pinky</div></div>
</div></div>
<div class="triad-tab-container">
<div class="triad-label-group" style="--triad-txtcolor: #fff;">
<label for="ONE" title="Intro"><i class="fa-solid fa-star"></i></label>
<label for="TWO" title="Character"><i class="fa-solid fa-heart-pulse"></i></label>
<label for="THREE" title="Story"><i class="fa-solid fa-book"></i></label>
<label for="FOUR" title="Trivia"><i class="fa-solid fa-list"></i></label>
<label for="FIVE" title="Links"><i class="fa-solid fa-link"></i></label>
</div>
<div class="triad-content" id="ONE">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/42776996_b8163aJrDZTgE1R.png">
<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>
</div>
<div class="triad-content" id="TWO">
<div class="triad-content-flex">
<div class="triad-info"><div>Charisma</div>
<div><i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle faded"></i>
<i class="fa-solid fa-circle faded"></i>
</div></div>
<div class="triad-info"><div>Kindness</div>
<div><i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle faded"></i>
<i class="fa-solid fa-circle faded"></i>
</div></div>
<div class="triad-info"><div>Patience</div>
<div><i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle faded"></i>
<i class="fa-solid fa-circle faded"></i>
</div></div>
<div class="triad-info"><div>Temper</div>
<div><i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle faded"></i>
<i class="fa-solid fa-circle faded"></i>
</div></div>
<div class="triad-info"><div>Integrity</div>
<div><i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle faded"></i>
<i class="fa-solid fa-circle faded"></i>
</div></div>
<div class="triad-info"><div>Courage</div>
<div><i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle faded"></i>
<i class="fa-solid fa-circle faded"></i>
</div></div>
<div class="triad-info"><div>Intellect</div>
<div><i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle faded"></i>
<i class="fa-solid fa-circle faded"></i>
</div></div>
<div class="triad-info"><div>Confidence</div>
<div><i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle faded"></i>
<i class="fa-solid fa-circle faded"></i>
</div></div>
<div class="triad-info"><div>Maturity</div>
<div><i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle faded"></i>
<i class="fa-solid fa-circle faded"></i>
</div></div>
<div class="triad-info"><div>Humour</div>
<div><i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-circle faded"></i>
<i class="fa-solid fa-circle faded"></i>
</div></div>
<div class="triad-info-like"><div>Likes</div>
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul></div>
<div class="triad-info-dislike"><div>Dislikes</div>
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul></div>
</div></div>
<div class="triad-content" id="THREE">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/40744335_DjG4rbJq3d4Jqj0.png">
<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>
<p class="triad-subtopic"><i class="fa-solid fa-bookmark"></i> Subheader</p>
<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>
<p class="triad-subtopic"><i class="fa-solid fa-bookmark"></i> Subheader</p>
<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>
</div>
<div class="triad-content" id="FOUR">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/40370057_0vDKTvbcUfIvtpW.png">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris.</li>
<li>มุมมองแหววมาร์จินมอคค่า ทีวี เปียโนพรีเซ็นเตอร์เรซิ่นฟีเวอร์เจล</li>
<li>Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit.</li>
<li>วิดีโอ สุนทรีย์ชนะเลิศบอดี้ไทยแลนด์ผู้นำ แพทเทิร์น</li>
<li>Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget.</li>
</ul>
</div>
<div class="triad-content" id="FIVE">
<div class="triad-content-grid">
<div class="triad-friend">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/23471745_uDJ.png">
<p><a href="CHARACTER_LINK" target="_BLANK">Character Name</a></p>
<div class="triad-friend-heart">
<i class="fas fa-heart fa-fw"></i>
<i class="fas fa-heart fa-fw"></i>
<i class="fas fa-heart fa-fw"></i>
<i class="fas fa-heart fa-fw faded"></i>
<i class="fas fa-heart fa-fw faded"></i></div>
<div class="triad-friend-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. เวิร์ลด์จอหงวน อาร์ติสต์ติ่มซำทัวร์นาเมนท์นิว แดนเซอร์แฟล็ต โอเพ่น พลานุภาพ</div>
</div>
<div class="triad-friend">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/23471745_uDJ.png">
<p><a href="CHARACTER_LINK" target="_BLANK">Character Name</a></p>
<div class="triad-friend-heart">
<i class="fas fa-heart fa-fw"></i>
<i class="fas fa-heart fa-fw"></i>
<i class="fas fa-heart fa-fw"></i>
<i class="fas fa-heart fa-fw faded"></i>
<i class="fas fa-heart fa-fw faded"></i></div>
<div class="triad-friend-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. เวิร์ลด์จอหงวน อาร์ติสต์ติ่มซำทัวร์นาเมนท์นิว แดนเซอร์แฟล็ต โอเพ่น พลานุภาพ</div>
</div>
<div class="triad-friend">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/23471745_uDJ.png">
<p><a href="CHARACTER_LINK" target="_BLANK">Character Name</a></p>
<div class="triad-friend-heart">
<i class="fas fa-heart fa-fw"></i>
<i class="fas fa-heart fa-fw"></i>
<i class="fas fa-heart fa-fw"></i>
<i class="fas fa-heart fa-fw faded"></i>
<i class="fas fa-heart fa-fw faded"></i></div>
<div class="triad-friend-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. เวิร์ลด์จอหงวน อาร์ติสต์ติ่มซำทัวร์นาเมนท์นิว แดนเซอร์แฟล็ต โอเพ่น พลานุภาพ</div>
</div>
<div class="triad-friend">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/23471745_uDJ.png">
<p><a href="CHARACTER_LINK" target="_BLANK">Character Name</a></p>
<div class="triad-friend-heart">
<i class="fas fa-heart fa-fw"></i>
<i class="fas fa-heart fa-fw"></i>
<i class="fas fa-heart fa-fw"></i>
<i class="fas fa-heart fa-fw faded"></i>
<i class="fas fa-heart fa-fw faded"></i></div>
<div class="triad-friend-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. เวิร์ลด์จอหงวน อาร์ติสต์ติ่มซำทัวร์นาเมนท์นิว แดนเซอร์แฟล็ต โอเพ่น พลานุภาพ</div>
</div>
</div></div>
</div></div></div>