View difference between Paste ID: GpH7061P and CB8YSyev
SHOW: | | - or go back to the newest paste.
1-
<link href="https://dl.dropbox.com/scl/fi/tpnytrlcop69bxh49xizy/BloomnDine.css?rlkey=nofl9g8t20qld95ihxdlwh73m&st=hcommcgi" rel="stylesheet">
1+
<!--
2-
<div id="BloomnDine"><a href="https://discord.com/users/625292873914515456/"></a><div id="bnd-thread" class="bnd-set" style="--bnd-bg: #f6eee3;--bnd-txt: #716d32;--bnd-primary: #545225;">
2+
[คู่มือการแก้ไขโคด]
3-
<div class="bnd-png1" style="--bnd-png: url(https://iili.io/3IR7uvj.png);transform: scaleX(-1) rotate(-45deg) translate(15%, 15%);"></div>
3+
อัตราส่วนภาพ 4:5
4-
<div class="bnd-png2" style="--bnd-png: url(https://iili.io/3IRBcB4.png);--bnd-pos: right top;--bnd-size: 80%;rotate: 20deg;"></div>
4+
 
5-
<div class="bnd-paper">
5+
ตำแหน่งภาพ : เพิ่ม --undert-pos: 50% 50%; ต่อท้ายลิงก์รูปที่ต้องการปรับ
6-
<div class="bnd-name">Bloom & Dine</div>
6+
 - เลขตัวแรกคือการขยับซ้าย - ขวา โดย 0% = ชิดซ้าย 100% = ชิดขวา
7-
<div class="bnd-gallery">
7+
 - เลขตัวแรกคือการขยับขึ้น - ลง โดย 0% = ชิดบน 100% = ชิดล่าง
8-
<div class="bnd-img" style="--bnd-pic: url(https://iili.io/3IANvt9.png);--bnd-pos: 50% 100%;--bnd-size: 105%;"></div>
8+
 
9-
<div class="bnd-img" style="--bnd-pic: url(https://iili.io/3IAO0Ux.png);--bnd-pos: 50% 80%;"></div>
9+
ขนาดภาพ : เพิ่ม --undert-size: cover; ต่อท้ายลิงก์รูปที่ต้องการปรับ
10-
<div class="bnd-img" style="--bnd-pic: url(https://iili.io/3IAOHSR.png);--bnd-pos: 50% 90%;--bnd-size: 110%;"></div>
10+
 - cover คือ ขยายเต็มพื้นที่
11-
<div class="bnd-img" style="--bnd-pic: url(https://iili.io/3IAeCzP.png);--bnd-pos: 50% 68%;--bnd-size: 120%;"></div>
11+
 - 100% คือ ขนาดเดิมของรูป
12-
</div>
12+
 - มากกว่า 100% คือ ขนาดใหญ่ขึ้น
13-
<div class="bnd-content"> -- ข้อมูล อธิบายบรรยากาศในงาน --</div>
13+
 - น้อยกว่า 100% คือ ขนาดเล็กลง
14-
<div class="bnd-topic">เงื่อนไข</div>
14+
-->
15-
[list]
15+
16-
[*]เงื่อนไข 1
16+
<link href="https://dl.dropbox.com/scl/fi/pmd88qr718q4u49tfv6rb/underthetree.css?rlkey=b4ewn45oue5xq3mkm8xsxsdsd&st=66x0nmwy" rel="stylesheet">
17-
[*]เงื่อนไข 2
17+
<div id="UnderTheTree"><a href="https://discord.com/users/625292873914515456/"></a><input type="radio" id="none" name="undert-data" checked /><input type="radio" id="obj1" name="undert-data" /><input type="radio" id="obj2" name="undert-data" /><input type="radio" id="obj3" name="undert-data" /><input type="radio" id="obj4" name="undert-data" /><label for="none" id="undert-thread" class="undert-box">
18-
[*]เงื่อนไข 3
18+
<div class="undert-set"><div class="undert-logo"></div>
19-
[/list]
19+
<p>Hosted by: Finn Fletcher & Felix Aquaborne</p>
20-
[align=center]( เขียนอะไรสักอย่าง )[/align]
20+
<div class="undert-padding">
21-
</div></div></div>
21+
<div class="undert-pic" style="--undert-pic: url(https://iili.io/3tXppSI.gif);"></div>
22
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali ua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipum
23
<div class="undert-label-group">
24
<label for="obj1">
25
<div class="undert-label-pic" style="--undert-pic: url(--รูป 1--);"></div>
26
<div class="undert-label-alt">Lorem Ipsum</div></label>
27
<label for="obj2">
28
<div class="undert-label-pic" style="--undert-pic: url(--รูป 2--);"></div>
29
<div class="undert-label-alt">Lorem Ipsum</div></label>
30
<label for="obj3">
31
<div class="undert-label-pic" style="--undert-pic: url(--รูป 3--);"></div>
32
<div class="undert-label-alt">Lorem Ipsum</div></label>
33
<label for="obj4">
34
<div class="undert-label-pic" style="--undert-pic: url(--รูป 4--);"></div>
35
<div class="undert-label-alt">Lorem Ipsum</div></label></div>
36
<div for="obj1" class="undert-data">--ข้อมูล 1--</div>
37
<div for="obj2" class="undert-data">--ข้อมูล 2--</div>
38
<div for="obj3" class="undert-data">--ข้อมูล 3--</div>
39
<div for="obj4" class="undert-data">--ข้อมูล 4--</div>
40
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali ua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipum
41
</div></div>
42
<div class="undert-wax"></div><div class="undert-quill"></div>
43
</label></div>