Advertisement
Kelly-B9978

Butterfly Effect

Oct 8th, 2024
51
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.24 KB | None | 0 0
  1. <!--
  2. [คู่มือการแก้ไขโคด]
  3. สีพื้นหลัง (ที่เฟดกับรูปบนสุด) : --btf-bg: #000;
  4. สีตัวอักษร : --btf-txt: #fff;
  5. สีหลัก (สีเขียวทั้งหมด) : --btf-primary: #30f035;
  6. สีไอคอนดาวที่ใต้รูป : --btf-icon: #000;
  7. สีพื้นหลังไอคอนดาว : --btf-icon-bg: #fff;
  8.  
  9. [ส่วนเฮด] แก้ที่ class="btf-head"
  10. ภาพเฮด : --btf-head: url(https://i.imgur.com/mvoMoUz.png); (อัตราส่วน 1600:857)
  11. สีตัวอักษร/สีผีเสื้อ (ส่วนที่ไม่ใช่สีเขียว) : --btf-txt: #fff;
  12.  
  13. [ส่วนในกรอบ]
  14. ภาพในกรอบ : <div class="btf-pic" style="--btf-pic: url(ลิงก์รูปภาพ);"></div> (อัตราส่วน 800:274)
  15. คำบรรยาย : ถ้าจะเพิ่มย่อหน้า ให้เพิ่ม <p>ย่อหน้า n</p> ต่อไปเรื่อย ๆ
  16.  
  17. [ส่วนที่คลิกได้]
  18. รูปพื้นหลังปุ่ม : <div class="btf-img" style="--btf-pic: url(ลิงก์รูปภาพ);"></div> (อัตราส่วน 3:4)
  19. ข้อความใต้ภาพ : <div class="btf-alt">Lorem Ipsum</div>
  20. * ถ้ากดที่พื้นรอบ ๆ ข้อมูลจะถูกพับเก็บ
  21.  
  22. [ส่วนรายละเอียด]
  23. ถ้าต้องการใส่สีเขียวที่ข้อความสามารถใส่ <c></c> ครอบได้เลย สีจะเปลี่ยนตามสีหลัก
  24.  
  25. ตำแหน่งภาพ : เพิ่ม --btf-pos: 50% 50%; ต่อท้ายลิงก์รูปที่ต้องการปรับ
  26. - เลขตัวแรกคือการขยับซ้าย - ขวา โดย 0% = ชิดซ้าย 100% = ชิดขวา
  27. - เลขตัวแรกคือการขยับขึ้น - ลง โดย 0% = ชิดบน 100% = ชิดล่าง
  28.  
  29. ขนาดภาพ : เพิ่ม --btf-size: cover; ต่อท้ายลิงก์รูปที่ต้องการปรับ
  30. - cover คือ ขยายเต็มพื้นที่
  31. - 100% คือ ขนาดเดิมของรูป
  32. - มากกว่า 100% คือ ขนาดใหญ่ขึ้น
  33. - น้อยกว่า 100% คือ ขนาดเล็กลง
  34. -->
  35.  
  36. <link href="https://dl.dropbox.com/scl/fi/45ce9ff5ms3v4fkhi92kl/btfeffect.css?rlkey=1lrzjmjc81irtasiucme0guka&st=t51zynbs" rel="stylesheet">
  37. <div id="zzzcode"><a href="https://discord.com/users/625292873914515456/"></a><input type="radio" id="none" name="btfeffect-data" checked /><input type="radio" id="obj1" name="btfeffect-data" /><input type="radio" id="obj2" name="btfeffect-data" /><input type="radio" id="obj3" name="btfeffect-data" /><input type="radio" id="obj4" name="btfeffect-data" /><label for="none" class="btf-container" style="--btf-bg: #000;--btf-txt: #fff;--btf-primary: #30f035;--btf-icon: #000;--btf-icon-bg: #fff;">
  38. <div class="btf-head" style="--btf-head: url(https://i.imgur.com/mvoMoUz.png);--btf-txt: #fff;">
  39. <i class="btf-butterfly"></i>
  40. <div class="btf-actname">Butterfly<br><c>Effect</c></div>
  41. <div class="btf-chapter">01</div>
  42. </div>
  43. <div class="btf-pad">
  44. <h1>The Walking Dead</h1>
  45. <h2>: Chapter 01 :</h2>
  46. <div class="btf-window">
  47. <div class="btf-tab"><div>A single flutter can change everything</div><i class="fa-solid fa-circle"></i><i class="fa-solid fa-circle"></i><i class="fa-solid fa-circle"></i></div>
  48. <div class="btf-pic" style="--btf-pic: url(ลิงก์รูปภาพ);--btf-pos: center;--btf-size: cover;"></div>
  49. <div class="btf-place"><div>Place สถานที่</div></div>
  50. <div class="btf-content">
  51. <p>ย่อหน้า 1</p>
  52. <p>ย่อหน้า 2</p>
  53. <div class="btf-label-group">
  54. <label for="obj1">
  55. <div class="btf-img" style="--btf-pic: url(ลิงก์รูปภาพ);--btf-pos: center;--btf-size: cover;"></div>
  56. <div class="btf-alt">Lorem Ipsum</div>
  57. </label>
  58. <label for="obj2">
  59. <div class="btf-img" style="--btf-pic: url(ลิงก์รูปภาพ);--btf-pos: center;--btf-size: cover;"></div>
  60. <div class="btf-alt">Lorem Ipsum</div>
  61. </label>
  62. <label for="obj3">
  63. <div class="btf-img" style="--btf-pic: url(ลิงก์รูปภาพ);--btf-pos: center;--btf-size: cover;"></div>
  64. <div class="btf-alt">Lorem Ipsum</div>
  65. </label>
  66. <label for="obj4">
  67. <div class="btf-img" style="--btf-pic: url(ลิงก์รูปภาพ);--btf-pos: center;--btf-size: cover;"></div>
  68. <div class="btf-alt">Lorem Ipsum</div>
  69. </label>
  70. </div>
  71. <div class="btf-data" for="obj1">ข้อมูลรูป 1</div>
  72. <div class="btf-data" for="obj2">ข้อมูลรูป 2</div>
  73. <div class="btf-data" for="obj3">ข้อมูลรูป 3</div>
  74. <div class="btf-data" for="obj4">ข้อมูลรูป 4</div>
  75. </div></div>
  76. <br><c>รายละเอียดกิจกรรม :</c> บลา ๆๆๆ
  77. </div>
  78. </label></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement