(m) SOCMED

READ THE GUIDELINES.
DO NOT REMOVE THE CREDITS.
FAILURE TO COMPLY TO THE GUIDELINES WOULD AUTOMATICALLY BE BLACKLISTED.
THE GUIDE TEXTS (<--!guide text-->) WOULD DISAPPEAR ONCE YOU SAVE THE CODE SO IT'S BEST TO ALWAYS OPEN AN ANOTHER TAB FOR YOU TO CHECK WHAT THE LAYOUT LOOKS LIKE


TABLE OF CONTENTS
USE (CTRL + F) TO LEAD TOWARDS THE WANTED LAYOUT // INPUT THE WHOLE TEXT

01 — INSTAGRAM DAY VER
02 — INSTAGRAM NIGHT VER
03 — MESSENGER
04 — MESSENGER BG
05 — SNAPCHAT
06 — TWITTER DAY VER
07 — TWITTER DIM VER
08 — TWITTER LIGHTS OUT VER

01 — INSTAGRAM DAY VER

  <!--Layout Start-->
<div style="width:250px;margin:auto;">

  <!--Background Start-->
<div style="float:left;width:249px;height:500px;background:#FFF;border:1px solid #C2C2C2;border-radius:20px;margin:0px 0px 0px 0px;"></div>

  <!--Panels Start-->
<div style="float:left;width:250px;height:500px;border-radius:20px;opacity:0.99;margin:-500px 0px 5px 0px;">

  <!--Name-->
<div style="float:left;width:250px;height:40px;border-radius:20px 20px 0px 0px;border-bottom:1px solid #C2C2C2;margin:0px 0px 0px 0px;">
<div style="float:left;font-family:'arial';font-size:20px;color:#000;margin:4px 0px 0px 10px;"><b>⤆</b></div>
<div style="float:left;width:31px;height:31px;border:1px solid #AA14CC;border-radius:31px;margin:3px 0px 0px 10px;">
<div style="float:left;width:25px;height:25px;margin:3px 0px 0px 3px;"><img src="https://i.imgur.com/dibfU1j.png" style="width:25px;height:25px;border-radius:25px;"></div>
</div>
<div style="float:left;font-family:'arial';font-size:12px;color:#000;margin:7px 0px 0px 10px;"><b>kuroo 🐱</b>
<div style="font-family:'arial';font-size:9px;color:#C2C2C2;line-height:7px;text-align:left;margin:0px 0px 0px 0px;">Active 31m ago</div>
</div>
</div>
  <!--Name-->

  <!--Buttons + Type-->
<div style="float:left;width:234px;height:30px;border-radius:30px;background:#C2C2C2;margin:420px 0px 0px 9px;">

  <!--Plus-->
<div style="float:left;width:20px;height:20px;background:#492BE1;border-radius:20px;margin:5px 0px 0px 7px;">
<div style="float:left;width:0px;height:10px;border-left:2px solid #C2C2C2;border-radius:1px;margin:5px 0px 0px 9px;"></div>
<div style="float:left;width:10px;height:0px;border-top:2px solid #C2C2C2;border-radius:1px;margin:-6px 0px 0px 5px;"></div>
</div>
  <!--Plus-->

  <!--Type-->
<div style="float:left;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:9px 0px 0px 8px;">Message...</div>
  <!--Type-->

</div>
  <!--Buttons + Type-->

</div>
  <!--Panels End-->

  <!--Messages-->
<div style="float:left;width:240px;height:410px;overflow:hidden;padding:5px 5px 5px 5px;opacity:0.99;margin:-465px 0px 0px 0px;">
<div style="float:left;width:300px;height:410px;overflow:auto;">
<div style="float:left;width:240px;">

<div style="float:left;width:200px;margin:0px 0px 0px 0px;">
<div style="float:left;width:auto;height:auto;padding:7px;background:#E1E1E1;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#000;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#E1E1E1;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#000;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
</div>

<div style="float:right;width:200px;margin:10px 0px 0px 0px;">
<div style="float:right;width:auto;height:auto;padding:7px;background:#492BE1;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#492BE1;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">avoid one worded messages to maintain the bubble at the same line</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#492BE1;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#492BE1;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">short messages that won't reach the 200px border width (as wide as this message bubble) would have the message bubble stay beside the previous bubble</div>
</div>

<div style="float:left;width:200px;margin:10px 0px 0px 0px;">
<div style="float:left;width:auto;height:auto;padding:7px;background:#E1E1E1;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#000;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#E1E1E1;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#000;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#E1E1E1;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#000;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">make sure the image's width does not exceed 200px</div>
<div style="float:left;width:100px;height:180px;margin:5px 0px 0px 1px;"><img src="https://i.imgur.com/Wfw5nlR.png" style="width:100px;height:180px;border-radius:10px;" /></div>
</div>

<div style="float:right;width:200px;margin:10px 0px 0px 0px;">
<div style="float:right;width:auto;height:auto;padding:7px;background:#492BE1;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#492BE1;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#492BE1;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">make sure the image's width does not exceed 200px</div>
<div style="float:right;width:200px;height:120px;margin:5px 1px 0px 0px;"><img src="https://i.imgur.com/6ly7kT9.png" style="width:200px;height:120px;border-radius:10px;" /></div>
</div>

</div>
</div>
</div>
  <!--Messages-->

  <!--Background End-->

<div style="float:right;width:auto;border-bottom:1px dotted #000;font-family:'helvetica';font-size:10px;color:#000;text-align:right;margin:0px 0px 0px 0px;"><a href="https://www.asianfanfics.com/story/view/1465009/" style="color:#000;">EPHR</a></div>
</div>
  <!--Layout End-->

02 — INSTAGRAM NIGHT VER

  <!--Layout Start-->
<div style="width:250px;margin:auto;">

  <!--Background Start-->
<div style="float:left;width:249px;height:500px;background:#000;border:1px solid #C2C2C2;border-radius:20px;margin:0px 0px 0px 0px;"></div>

  <!--Panels Start-->
<div style="float:left;width:250px;height:500px;border-radius:20px;opacity:0.99;margin:-500px 0px 5px 0px;">

  <!--Name-->
<div style="float:left;width:250px;height:40px;border-radius:20px 20px 0px 0px;border-bottom:1px solid #C2C2C2;margin:0px 0px 0px 0px;">
<div style="float:left;font-family:'arial';font-size:20px;color:#FFF;margin:4px 0px 0px 10px;"><b>⤆</b></div>
<div style="float:left;width:31px;height:31px;border:1px solid #AA14CC;border-radius:31px;margin:3px 0px 0px 10px;">
<div style="float:left;width:25px;height:25px;margin:3px 0px 0px 3px;"><img src="https://i.imgur.com/dibfU1j.png" style="width:25px;height:25px;border-radius:25px;"></div>
</div>
<div style="float:left;font-family:'arial';font-size:12px;color:#FFF;margin:7px 0px 0px 10px;"><b>kuroo 🐱</b>
<div style="font-family:'arial';font-size:9px;color:#C2C2C2;line-height:7px;text-align:left;margin:0px 0px 0px 0px;">Active 31m ago</div>
</div>
</div>
  <!--Name-->

  <!--Buttons + Type-->
<div style="float:left;width:234px;height:30px;border-radius:30px;background:#474747;margin:420px 0px 0px 9px;">

  <!--Plus-->
<div style="float:left;width:20px;height:20px;background:#492BE1;border-radius:20px;margin:5px 0px 0px 7px;">
<div style="float:left;width:0px;height:10px;border-left:2px solid #474747;border-radius:1px;margin:5px 0px 0px 9px;"></div>
<div style="float:left;width:10px;height:0px;border-top:2px solid #474747;border-radius:1px;margin:-6px 0px 0px 5px;"></div>
</div>
  <!--Plus-->

  <!--Type-->
<div style="float:left;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:9px 0px 0px 8px;">Message...</div>
  <!--Type-->

</div>
  <!--Buttons + Type-->

</div>
  <!--Panels End-->

  <!--Messages-->
<div style="float:left;width:240px;height:410px;overflow:hidden;padding:5px 5px 5px 5px;opacity:0.99;margin:-465px 0px 0px 0px;">
<div style="float:left;width:300px;height:410px;overflow:auto;">
<div style="float:left;width:240px;">

<div style="float:left;width:200px;margin:0px 0px 0px 0px;">
<div style="float:left;width:auto;height:auto;padding:7px;background:#474747;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#474747;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
</div>

<div style="float:right;width:200px;margin:10px 0px 0px 0px;">
<div style="float:right;width:auto;height:auto;padding:7px;background:#492BE1;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#492BE1;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">avoid one worded messages to maintain the bubble at the same line</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#492BE1;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#492BE1;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">short messages that won't reach the 200px border width (as wide as this message bubble) would have the message bubble stay beside the previous bubble</div>
</div>

<div style="float:left;width:200px;margin:10px 0px 0px 0px;">
<div style="float:left;width:auto;height:auto;padding:7px;background:#474747;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#474747;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#474747;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">make sure the image's width does not exceed 200px</div>
<div style="float:left;width:100px;height:180px;margin:5px 0px 0px 1px;"><img src="https://i.imgur.com/Wfw5nlR.png" style="width:100px;height:180px;border-radius:10px;" /></div>
</div>

<div style="float:right;width:200px;margin:10px 0px 0px 0px;">
<div style="float:right;width:auto;height:auto;padding:7px;background:#492BE1;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#492BE1;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#492BE1;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">make sure the image's width does not exceed 200px</div>
<div style="float:right;width:200px;height:120px;margin:5px 1px 0px 0px;"><img src="https://i.imgur.com/6ly7kT9.png" style="width:200px;height:120px;border-radius:10px;" /></div>
</div>

</div>
</div>
</div>
  <!--Messages-->

  <!--Background End-->

<div style="float:right;width:auto;border-bottom:1px dotted #000;font-family:'helvetica';font-size:10px;color:#000;text-align:right;margin:0px 0px 0px 0px;"><a href="https://www.asianfanfics.com/story/view/1465009/" style="color:#000;">EPHR</a></div>
</div>
  <!--Layout End-->

03 — MESSENGER

  <!--Layout Start-->
<div style="width:250px;margin:auto;">

  <!--Background Start-->
<div style="float:left;width:250px;height:500px;background:#193B4D;border-radius:20px;margin:0px 0px 0px 0px;"></div>

  <!--Panels Start-->
<div style="float:left;width:250px;height:500px;border-radius:20px;opacity:0.99;margin:-500px 0px 5px 0px;">

  <!--Name-->
<div style="float:left;width:250px;height:40px;border-radius:20px 20px 0px 0px;background:#193B4D;margin:0px 0px 0px 0px;">
<div style="float:left;font-family:'arial';font-size:20px;color:#FFF;margin:4px 0px 0px 10px;"><b>⤆</b></div>
<div style="float:left;width:25px;height:25px;margin:8px 0px 0px 10px;"><img src="https://i.imgur.com/dibfU1j.png" style="width:25px;height:25px;border-radius:25px;"></div>
<div style="float:left;font-family:'arial';font-size:12px;color:#FFF;margin:11px 0px 0px 10px;"><b>kuroo 🐱</b></div>
</div>
  <!--Name-->

  <!--Buttons + Type-->
<div style="float:left;width:250px;height:40px;border-radius:0px 0px 20px 20px;background:#171523;margin:420px 0px 0px 0px;">

  <!--Plus-->
<div style="float:left;width:20px;height:20px;background:#CD962F;border-radius:20px;margin:9px 0px 0px 9px;">
<div style="float:left;width:0px;height:10px;border-left:2px solid #171523;border-radius:1px;margin:5px 0px 0px 9px;"></div>
<div style="float:left;width:10px;height:0px;border-top:2px solid #171523;border-radius:1px;margin:-6px 0px 0px 5px;"></div>
</div>
  <!--Plus-->

  <!--Image-->
<div style="float:left;width:20px;height:14px;border:3px solid #CD962F;border-radius:5px;margin:9px 0px 0px 7px;">
<div style="float:left;width:10px;height:0px;border-right:10px solid #CD962F;border-top:7px solid transparent;margin:7px 0px 0px -10px;"></div>
<div style="float:left;width:10px;height:0px;border-left:10px solid #CD962F;border-top:7px solid transparent;margin:-7px 0px 0px 10px;"></div>
<div style="float:left;width:3px;height:3px;background:#CD962F;border-radius:3px;margin:-11px 0px 0px 3px;"></div>
</div>
  <!--Image-->

  <!--Type-->
<div style="float:left;width:135px;height:26px;background:#2A273F;border-radius:20px;margin:6px 0px 0px 9px;">
<div style="float:left;font-family:arial;font-size:12px;color:#FFF;line-height:12px;text-align:left;margin:8px 0px 0px 10px;">Aa</div>
</div>
  <!--Type-->

  <!--Emoji-->
<div style="float:right;font-family:arial;font-size:20px;color:#FFF;margin:6px 15px 0px 0px;">🍂</div>
  <!--Emoji-->

</div>
  <!--Buttons + Type-->

</div>
  <!--Panels End-->

  <!--Messages-->
<div style="float:left;width:240px;height:410px;overflow:hidden;padding:5px 5px 5px 5px;opacity:0.99;margin:-465px 0px 0px 0px;">
<div style="float:left;width:300px;height:410px;overflow:auto;">
<div style="float:left;width:240px;">

<div style="float:left;width:200px;margin:0px 0px 0px 0px;">
<div style="float:left;width:auto;height:auto;padding:7px;background:#2C7E88;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#2C7E88;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
</div>

<div style="float:right;width:200px;margin:10px 0px 0px 0px;">
<div style="float:right;width:auto;height:auto;padding:7px;background:#CD962F;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#CD962F;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">avoid one worded messages to maintain the bubble at the same line</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#CD962F;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#CD962F;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">short messages that won't reach the 200px border width (as wide as this message bubble) would have the message bubble stay beside the previous bubble</div>
</div>

<div style="float:left;width:200px;margin:10px 0px 0px 0px;">
<div style="float:left;width:auto;height:auto;padding:7px;background:#2C7E88;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#2C7E88;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#2C7E88;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">make sure the image's width does not exceed 200px</div>
<div style="float:left;width:200px;height:120px;margin:5px 0px 0px 0px;"><img alt="PatFqi5.png" src="https://i.imgur.com/fbOM2vK.jpg" style="width:200px;height:120px;border-radius:10px;" /></div>
</div>

<div style="float:right;width:200px;margin:10px 0px 0px 0px;">
<div style="float:right;width:auto;height:auto;padding:7px;background:#CD962F;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#CD962F;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#CD962F;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">make sure the image's width does not exceed 200px</div>
<div style="float:right;width:200px;height:120px;margin:5px 0px 0px 0px;"><img alt="PatFqi5.png" src="https://i.imgur.com/fbOM2vK.jpg" style="width:200px;height:120px;border-radius:10px;" /></div>
</div>

</div>
</div>
</div>
  <!--Messages-->

  <!--Background End-->

<div style="float:right;width:auto;border-bottom:1px dotted #000;font-family:'helvetica';font-size:10px;color:#000;text-align:right;margin:0px 0px 0px 0px;"><a href="https://www.asianfanfics.com/story/view/1465009/" style="color:#000;">EPHR</a></div>
</div>
  <!--Layout End-->

04 — MESSENGER BG

  <!--Layout Start-->
<div style="width:250px;margin:auto;">

  <!--Background Start-->
<div style="float:left;width:250px;height:500px;margin:0px 0px 0px 0px;"><img src="https://i.imgur.com/ps8XVfj.png" style="width:250px;height:500px;border-radius:20px;opacity:0.8;"></div>

  <!--Panels Start-->
<div style="float:left;width:250px;height:500px;border-radius:20px;opacity:0.99;margin:-500px 0px 5px 0px;">

  <!--Name-->
<div style="float:left;width:250px;height:40px;border-radius:20px 20px 0px 0px;background:#193B4D;margin:0px 0px 0px 0px;">
<div style="float:left;font-family:'arial';font-size:20px;color:#FFF;margin:4px 0px 0px 10px;"><b>⤆</b></div>
<div style="float:left;width:25px;height:25px;margin:8px 0px 0px 10px;"><img src="https://i.imgur.com/dibfU1j.png" style="width:25px;height:25px;border-radius:25px;"></div>
<div style="float:left;font-family:'arial';font-size:12px;color:#FFF;margin:11px 0px 0px 10px;"><b>kuroo 🐱</b></div>
</div>
  <!--Name-->

  <!--Buttons + Type-->
<div style="float:left;width:250px;height:40px;border-radius:0px 0px 20px 20px;background:#171523;margin:420px 0px 0px 0px;">

  <!--Plus-->
<div style="float:left;width:20px;height:20px;background:#CD962F;border-radius:20px;margin:9px 0px 0px 9px;">
<div style="float:left;width:0px;height:10px;border-left:2px solid #171523;border-radius:1px;margin:5px 0px 0px 9px;"></div>
<div style="float:left;width:10px;height:0px;border-top:2px solid #171523;border-radius:1px;margin:-6px 0px 0px 5px;"></div>
</div>
  <!--Plus-->

  <!--Image-->
<div style="float:left;width:20px;height:14px;border:3px solid #CD962F;border-radius:5px;margin:9px 0px 0px 7px;">
<div style="float:left;width:10px;height:0px;border-right:10px solid #CD962F;border-top:7px solid transparent;margin:7px 0px 0px -10px;"></div>
<div style="float:left;width:10px;height:0px;border-left:10px solid #CD962F;border-top:7px solid transparent;margin:-7px 0px 0px 10px;"></div>
<div style="float:left;width:3px;height:3px;background:#CD962F;border-radius:3px;margin:-11px 0px 0px 3px;"></div>
</div>
  <!--Image-->

  <!--Type-->
<div style="float:left;width:135px;height:26px;background:#2A273F;border-radius:20px;margin:6px 0px 0px 9px;">
<div style="float:left;font-family:arial;font-size:12px;color:#FFF;line-height:12px;text-align:left;margin:8px 0px 0px 10px;">Aa</div>
</div>
  <!--Type-->

  <!--Emoji-->
<div style="float:right;font-family:arial;font-size:20px;color:#FFF;margin:6px 15px 0px 0px;">🍂</div>
  <!--Emoji-->

</div>
  <!--Buttons + Type-->

</div>
  <!--Panels End-->

  <!--Messages-->
<div style="float:left;width:240px;height:410px;overflow:hidden;padding:5px 5px 5px 5px;opacity:0.99;margin:-465px 0px 0px 0px;">
<div style="float:left;width:300px;height:410px;overflow:auto;">
<div style="float:left;width:240px;">

<div style="float:left;width:200px;margin:0px 0px 0px 0px;">
<div style="float:left;width:auto;height:auto;padding:7px;background:#2C7E88;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#2C7E88;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
</div>

<div style="float:right;width:200px;margin:10px 0px 0px 0px;">
<div style="float:right;width:auto;height:auto;padding:7px;background:#CD962F;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#CD962F;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">avoid one worded messages to maintain the bubble at the same line</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#CD962F;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#CD962F;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">short messages that won't reach the 200px border width (as wide as this message bubble) would have the message bubble stay beside the previous bubble</div>
</div>

<div style="float:left;width:200px;margin:10px 0px 0px 0px;">
<div style="float:left;width:auto;height:auto;padding:7px;background:#2C7E88;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#2C7E88;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#2C7E88;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">make sure the image's width does not exceed 200px</div>
<div style="float:left;width:200px;height:120px;margin:5px 0px 0px 0px;"><img alt="PatFqi5.png" src="https://i.imgur.com/fbOM2vK.jpg" style="width:200px;height:120px;border-radius:10px;" /></div>
</div>

<div style="float:right;width:200px;margin:10px 0px 0px 0px;">
<div style="float:right;width:auto;height:auto;padding:7px;background:#CD962F;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#CD962F;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#CD962F;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">make sure the image's width does not exceed 200px</div>
<div style="float:right;width:200px;height:120px;margin:5px 0px 0px 0px;"><img alt="PatFqi5.png" src="https://i.imgur.com/fbOM2vK.jpg" style="width:200px;height:120px;border-radius:10px;" /></div>
</div>

</div>
</div>
</div>
  <!--Messages-->

  <!--Background End-->

<div style="float:right;width:auto;border-bottom:1px dotted #000;font-family:'helvetica';font-size:10px;color:#000;text-align:right;margin:0px 0px 0px 0px;"><a href="https://www.asianfanfics.com/story/view/1465009/" style="color:#000;">EPHR</a></div>
</div>
  <!--Layout End-->

05 — SNAPCHAT

  <!--Layout Start-->
<div style="width:250px;margin:auto;">

  <!--Background Start-->
<div style="float:left;width:250px;height:500px;background:#4DA3FF;border-radius:20px;margin:0px 0px 0px 0px;"></div>

  <!--Panels Start-->
<div style="float:left;width:250px;height:500px;border-radius:20px;opacity:0.99;margin:-500px 0px 5px 0px;">

  <!--Name-->
<div style="float:left;width:250px;height:40px;border-radius:20px 20px 0px 0px;margin:0px 0px 0px 0px;">

<div style="float:left;width:25px;height:0px;border-top:3px solid #FFF;border-radius:2px;margin:14px 0px 0px 10px;">
<div style="float:left;width:25px;height:0px;border-top:3px solid #FFF;border-radius:2px;margin:3px 0px 0px 0px;"></div>
<div style="float:left;width:25px;height:0px;border-top:3px solid #FFF;border-radius:2px;margin:3px 0px 0px 0px;"></div>
</div>

<div style="float:left;font-family:'arial';font-size:14px;color:#FFF;text-align:center;margin:12px 0px 0px 55px;"><b>kurooneko</b></div>

<div style="float:right;width:15px;height:20px;margin:10px 10px 0px 0px;"><img src="https://i.imgur.com/jAiYJYW.png" style="width:15px;height:20px;"></div>

</div>
  <!--Name-->

  <!--Buttons + Type-->
<div style="float:left;width:248px;height:68px;background:#FFF;border:1px solid #C2C2C2;border-radius:0px 0px 20px 20px;margin:390px 0px 0px 0px;">

  <!--Type-->
<div style="float:left;font-family:arial;font-size:12px;color:#C2C2C2;line-height:12px;text-align:left;margin:9px 0px 0px 8px;">Send a Chat</div>
  <!--Type-->

  <!--Camera-->
<div style="float:left;width:30px;height:30px;border:2px solid #C2C2C2;border-radius:30px;margin:27px 0px 0px 35px;"></div>
  <!--Camera-->

</div>
  <!--Buttons + Type-->

  <!--Messages-->
<div style="float:left;width:248px;height:390px;background:#FFF;border-left:1px solid #C2C2C2;border-right:1px solid #C2C2C2;border-bottom:1px solid #C2C2C2;border-radius:15px 15px 0px 0px;margin:-460px 0px 0px 0px;">

<div style="float:left;width:238px;height:370px;overflow:hidden;padding:5px 5px 5px 5px;margin:12px 0px 0px 0px;">
<div style="float:left;width:298px;height:370px;overflow:auto;">
<div style="float:left;width:238px;">

<div style="float:left;width:230px;margin:0px 0px 0px 0px;">
<div style="float;left;font-family:'arial';font-size:11px;color:#C62727;line-height:11px;text-align:left;margin:0px 0px 2px 0px;"><b>ME</b></div>
<div style="float:left;width:225px;height:auto;border-left:3px solid #C62727;background:#F0F0F0;padding:5px 5px 5px 5px;border-radius:2px;font-family:'arial';font-size:11px;color:#000;line-height:14px;text-align:left;margin:0px 0px 0px 0px;">Message Here<br />
Shift + Enter to start new line</div>
</div>

<div style="float:left;width:230px;margin:10px 0px 0px 0px;">
<div style="float;left;font-family:'arial';font-size:11px;color:#4DA3FF;line-height:11px;text-align:left;margin:0px 0px 2px 0px;"><b>KUROONEKO</b></div>
<div style="float:left;width:225px;height:auto;border-left:3px solid #4DA3FF;background:#F0F0F0;padding:5px 5px 5px 5px;border-radius:2px;font-family:'arial';font-size:11px;color:#000;line-height:14px;text-align:left;margin:0px 0px 0px 0px;">Message Here<br />
Shift + Enter to start new line</div>
</div>

<div style="float:left;width:230px;margin:10px 0px 0px 0px;">
<div style="float;left;font-family:'arial';font-size:11px;color:#C62727;line-height:11px;text-align:left;margin:0px 0px 2px 0px;"><b>ME</b></div>
<div style="float:left;width:225px;height:auto;border-left:3px solid #C62727;padding:5px 5px 5px 5px;">
<div style="float:left;width:208px;height:20px;padding:10px;border:1px solid #E1E1E1;border-radius:5px;">
<div style="float:left;font-family:'arial';font-size:20px;color:#C62727;line-height:20px;text-align:left;letter-spacing:2px;margin:0px 0px 0px 0px;"><b>➤</span></b></div>
<div style="float:left;font-family:'arial';font-size:14px;color:#C2C2C2;line-height:14px;text-align:left;letter-spacing:2px;margin:3px 0px 0px 7px;"><b>Delivered</span></b></div>
</div>
<div style="float:left;width:208px;height:20px;padding:10px;border:1px solid #E1E1E1;border-radius:5px;margin:5px 0px 0px 0px;">
<div style="float:left;font-family:'arial';font-size:20px;color:#C62727;line-height:20px;text-align:left;letter-spacing:2px;margin:0px 0px 0px 0px;"><b>➤</span></b></div>
<div style="float:left;font-family:'arial';font-size:14px;color:#C2C2C2;line-height:14px;text-align:left;letter-spacing:2px;margin:3px 0px 0px 7px;"><b>Delivered</span></b></div>
</div>
</div>
</div>

<div style="float:left;width:230px;margin:10px 0px 0px 0px;">
<div style="float;left;font-family:'arial';font-size:11px;color:#4DA3FF;line-height:11px;text-align:left;margin:0px 0px 2px 0px;"><b>KUROONEKO</b></div>
<div style="float:left;width:225px;height:auto;border-left:3px solid #4DA3FF;background:#F0F0F0;padding:5px 5px 5px 5px;border-radius:2px;font-family:'arial';font-size:11px;color:#000;line-height:14px;text-align:left;margin:0px 0px 0px 0px;">Message Here<br />
Shift + Enter to start new line<br />
Do not combine 1 delivered image/video in one sender; make it separate!</div>
</div>

<div style="float:left;width:230px;margin:10px 0px 0px 0px;">
<div style="float;left;font-family:'arial';font-size:11px;color:#4DA3FF;line-height:11px;text-align:left;margin:0px 0px 2px 0px;"><b>KUROONEKO</b></div>
<div style="float:left;width:225px;height:auto;border-left:3px solid #4DA3FF;padding:5px 5px 5px 5px;">
<div style="float:left;width:208px;height:20px;padding:10px;border:1px solid #E1E1E1;border-radius:5px;">
<div style="float:left;font-family:'arial';font-size:20px;color:#4DA3FF;line-height:20px;text-align:left;letter-spacing:2px;margin:0px 0px 0px 0px;"><b>➤</span></b></div>
<div style="float:left;font-family:'arial';font-size:14px;color:#C2C2C2;line-height:14px;text-align:left;letter-spacing:2px;margin:3px 0px 0px 7px;"><b>Delivered</span></b></div>
</div>
</div>
</div>

<div style="float:left;width:230px;margin:10px 0px 0px 0px;">
<div style="float;left;font-family:'arial';font-size:11px;color:#C62727;line-height:11px;text-align:left;margin:0px 0px 2px 0px;"><b>ME</b></div>
<div style="float:left;width:225px;height:auto;border-left:3px solid #C62727;background:#F0F0F0;padding:5px 5px 5px 5px;border-radius:2px;font-family:'arial';font-size:11px;color:#000;line-height:14px;text-align:left;margin:0px 0px 0px 0px;">Message Here<br />
Shift + Enter to start new line</div>
</div>

</div>
</div>
</div>

</div>
  <!--Messages-->

</div>
  <!--Panels End-->

  <!--Background End-->

<div style="float:right;width:auto;border-bottom:1px dotted #000;font-family:'helvetica';font-size:10px;color:#000;text-align:right;margin:0px 0px 0px 0px;"><a href="https://www.asianfanfics.com/story/view/1465009/" style="color:#000;">EPHR</a></div>
</div>
  <!--Layout End-->

06 — TWITTER DAY VER

  <!--Layout Start-->
<div style="width:250px;margin:auto;">

  <!--Background Start-->
<div style="float:left;width:248px;height:500px;background:#FFF;border:1px solid #C2C2C2;border-radius:20px;margin:0px 0px 0px 0px;"></div>

  <!--Panels Start-->
<div style="float:left;width:250px;height:500px;border-radius:20px;opacity:0.99;margin:-500px 0px 5px 0px;">

  <!--Name-->
<div style="float:left;width:250px;height:50px;border-radius:20px 20px 0px 0px;margin:0px 0px 0px 0px;">
<div style="float:left;font-family:'arial';font-size:20px;color:#4DA3FF;margin:4px 0px 0px 10px;"><b>⬅</b></div>
<div style="float:left;width:25px;height:25px;margin:8px 0px 0px 75px;"><img src="https://i.imgur.com/dibfU1j.png" style="width:25px;height:25px;border-radius:25px;"></div>
<div style="float:left;font-family:'arial';font-size:12px;color:#000;margin:33px 0px 0px -35px;"><b>kuroo 🐱</b></div>
<div style="float:right;width:8px;height:8px;padding:5px;border:2px solid #4DA3FF;border-radius:11px;margin:8px 10px 0px 0px;">
<div style="float:left;font-family:'arial';font-size:12px;color:#4DA3FF;text-align:center;margin:-5px 0px 0px 3px;"><b>i</b></div>
</div>
</div>
  <!--Name-->

  <!--Buttons + Type-->
<div style="float:left;width:250px;height:30px;border-radius:0px 0px 20px 20px;border-top:1px solid #C2C2C2;;margin:420px 0px 0px 0px;">

  <!--Image-->
<div style="float:left;width:14px;height:14px;border:2px solid #4DA3FF;border-radius:5px;margin:5px 0px 0px 12px;">
<div style="float:left;width:7px;height:0px;border-right:7px solid #4DA3FF;border-top:7px solid transparent;margin:7px 0px 0px -7px;"></div>
<div style="float:left;width:7px;height:0px;border-left:7px solid #4DA3FF;border-top:7px solid transparent;margin:-7px 0px 0px 7px;"></div>
<div style="float:left;width:3px;height:3px;background:#4DA3FF;border-radius:3px;margin:-11px 0px 0px 3px;"></div>
</div>
  <!--Image-->

  <!--GIF-->
<div style="float:left;width:14px;height:14px;border:2px solid #4DA3FF;border-radius:3px;margin:5px 0px 0px 7px;">
<div style="float:left;font-family:'arial';font-size:7px;color:#4DA3FF;text-align:center;margin:3px 0px 0px 2px;"><b>GIF</b></div>
</div>
  <!--GIF-->

  <!--Type-->
<div style="float:left;width:155px;height:18px;background:#C2C2C2;border-radius:20px;margin:5px 0px 0px 7px;">
<div style="float:left;font-family:arial;font-size:9px;color:#FFF;line-height:9px;text-align:left;margin:4px 0px 0px 10px;">Start a message</div>
</div>
  <!--Type-->

  <!--Send-->
<div style="float:right;font-family:arial;font-size:20px;color:#4DA3FF;margin:-1px 10px 0px 0px;">➢</div>
  <!--Send-->

</div>
  <!--Buttons + Type-->

</div>
  <!--Panels End-->

  <!--Messages-->
<div style="float:left;width:240px;height:410px;overflow:hidden;padding:5px 5px 5px 5px;opacity:0.99;margin:-455px 0px 0px 0px;">
<div style="float:left;width:300px;height:410px;overflow:auto;">
<div style="float:left;width:240px;">

<div style="float:left;width:200px;margin:0px 0px 0px 0px;">
<div style="float:left;width:auto;height:auto;padding:7px;background:#C2C2C2;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#C2C2C2;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
</div>

<div style="float:right;width:200px;margin:10px 0px 0px 0px;">
<div style="float:right;width:auto;height:auto;padding:7px;background:#4DA3FF;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#4DA3FF;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">avoid one worded messages to maintain the bubble at the same line</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#4DA3FF;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#4DA3FF;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">short messages that won't reach the 200px border width (as wide as this message bubble) would have the message bubble stay beside the previous bubble</div>
</div>

<div style="float:left;width:200px;margin:10px 0px 0px 0px;">
<div style="float:left;width:auto;height:auto;padding:7px;background:#C2C2C2;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#C2C2C2;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#C2C2C2;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">make sure the image's width does not exceed 200px</div>
<div style="float:left;width:200px;height:120px;margin:5px 0px 0px 0px;"><img src="https://i.imgur.com/71PDJ8Y.png" style="width:200px;height:120px;border-radius:10px;" /></div>
</div>

<div style="float:right;width:200px;margin:10px 0px 0px 0px;">
<div style="float:right;width:auto;height:auto;padding:7px;background:#4DA3FF;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#4DA3FF;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#4DA3FF;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">make sure the image's width does not exceed 200px</div>
<div style="float:right;width:120px;height:200px;margin:5px 0px 0px 0px;"><img src="https://i.imgur.com/En8b0dG.png" style="width:120px;height:200px;border-radius:10px;" /></div>
</div>

</div>
</div>
</div>
  <!--Messages-->

  <!--Background End-->

<div style="float:right;width:auto;border-bottom:1px dotted #000;font-family:'helvetica';font-size:10px;color:#000;text-align:right;margin:0px 0px 0px 0px;"><a href="https://www.asianfanfics.com/story/view/1465009/" style="color:#000;">EPHR</a></div>
</div>
  <!--Layout End-->

07 — TWITTER DIM VER

  <!--Layout Start-->
<div style="width:250px;margin:auto;">

  <!--Background Start-->
<div style="float:left;width:248px;height:500px;background:#1F3A5B;border:1px solid #C2C2C2;border-radius:20px;margin:0px 0px 0px 0px;"></div>

  <!--Panels Start-->
<div style="float:left;width:250px;height:500px;border-radius:20px;opacity:0.99;margin:-500px 0px 5px 0px;">

  <!--Name-->
<div style="float:left;width:250px;height:50px;border-radius:20px 20px 0px 0px;margin:0px 0px 0px 0px;">
<div style="float:left;font-family:'arial';font-size:20px;color:#346198;margin:4px 0px 0px 10px;"><b>⬅</b></div>
<div style="float:left;width:25px;height:25px;margin:8px 0px 0px 75px;"><img src="https://i.imgur.com/dibfU1j.png" style="width:25px;height:25px;border-radius:25px;"></div>
<div style="float:left;font-family:'arial';font-size:12px;color:#FFF;margin:33px 0px 0px -35px;"><b>kuroo 🐱</b></div>
<div style="float:right;width:8px;height:8px;padding:5px;border:2px solid #346198;border-radius:11px;margin:8px 10px 0px 0px;">
<div style="float:left;font-family:'arial';font-size:12px;color:#346198;text-align:center;margin:-5px 0px 0px 3px;"><b>i</b></div>
</div>
</div>
  <!--Name-->

  <!--Buttons + Type-->
<div style="float:left;width:250px;height:30px;border-radius:0px 0px 20px 20px;border-top:1px solid #C2C2C2;;margin:420px 0px 0px 0px;">

  <!--Image-->
<div style="float:left;width:14px;height:14px;border:2px solid #346198;border-radius:5px;margin:5px 0px 0px 12px;">
<div style="float:left;width:7px;height:0px;border-right:7px solid #346198;border-top:7px solid transparent;margin:7px 0px 0px -7px;"></div>
<div style="float:left;width:7px;height:0px;border-left:7px solid #346198;border-top:7px solid transparent;margin:-7px 0px 0px 7px;"></div>
<div style="float:left;width:3px;height:3px;background:#346198;border-radius:3px;margin:-11px 0px 0px 3px;"></div>
</div>
  <!--Image-->

  <!--GIF-->
<div style="float:left;width:14px;height:14px;border:2px solid #346198;border-radius:3px;margin:5px 0px 0px 7px;">
<div style="float:left;font-family:'arial';font-size:7px;color:#346198;text-align:center;margin:4px 0px 0px 1px;"><b>GIF</b></div>
</div>
  <!--GIF-->

  <!--Type-->
<div style="float:left;width:155px;height:18px;background:#346198;border-radius:20px;margin:5px 0px 0px 7px;">
<div style="float:left;font-family:arial;font-size:9px;color:#FFF;line-height:9px;text-align:left;margin:4px 0px 0px 10px;">Start a message</div>
</div>
  <!--Type-->

  <!--Send-->
<div style="float:right;font-family:arial;font-size:20px;color:#346198;margin:-1px 10px 0px 0px;">➢</div>
  <!--Send-->

</div>
  <!--Buttons + Type-->

</div>
  <!--Panels End-->

  <!--Messages-->
<div style="float:left;width:240px;height:410px;overflow:hidden;padding:5px 5px 5px 5px;opacity:0.99;margin:-455px 0px 0px 0px;">
<div style="float:left;width:300px;height:410px;overflow:auto;">
<div style="float:left;width:240px;">

<div style="float:left;width:200px;margin:0px 0px 0px 0px;">
<div style="float:left;width:auto;height:auto;padding:7px;background:#346198;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#346198;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
</div>

<div style="float:right;width:200px;margin:10px 0px 0px 0px;">
<div style="float:right;width:auto;height:auto;padding:7px;background:#4DA3FF;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#4DA3FF;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">avoid one worded messages to maintain the bubble at the same line</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#4DA3FF;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#4DA3FF;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">short messages that won't reach the 200px border width (as wide as this message bubble) would have the message bubble stay beside the previous bubble</div>
</div>

<div style="float:left;width:200px;margin:10px 0px 0px 0px;">
<div style="float:left;width:auto;height:auto;padding:7px;background:#346198;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#346198;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#346198;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">make sure the image's width does not exceed 200px</div>
<div style="float:left;width:200px;height:120px;margin:5px 0px 0px 0px;"><img src="https://i.imgur.com/71PDJ8Y.png" style="width:200px;height:120px;border-radius:10px;" /></div>
</div>

<div style="float:right;width:200px;margin:10px 0px 0px 0px;">
<div style="float:right;width:auto;height:auto;padding:7px;background:#4DA3FF;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#4DA3FF;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#4DA3FF;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">make sure the image's width does not exceed 200px</div>
<div style="float:right;width:120px;height:200px;margin:5px 0px 0px 0px;"><img src="https://i.imgur.com/En8b0dG.png" style="width:120px;height:200px;border-radius:10px;" /></div>
</div>

</div>
</div>
</div>
  <!--Messages-->

  <!--Background End-->

<div style="float:right;width:auto;border-bottom:1px dotted #000;font-family:'helvetica';font-size:10px;color:#000;text-align:right;margin:0px 0px 0px 0px;"><a href="https://www.asianfanfics.com/story/view/1465009/" style="color:#000;">EPHR</a></div>
</div>
  <!--Layout End-->

08 — TWITTER LIGHTS OUT VER

  <!--Layout Start-->
<div style="width:250px;margin:auto;">

  <!--Background Start-->
<div style="float:left;width:248px;height:500px;background:#000;border:1px solid #C2C2C2;border-radius:20px;margin:0px 0px 0px 0px;"></div>

  <!--Panels Start-->
<div style="float:left;width:250px;height:500px;border-radius:20px;opacity:0.99;margin:-500px 0px 5px 0px;">

  <!--Name-->
<div style="float:left;width:250px;height:50px;border-radius:20px 20px 0px 0px;margin:0px 0px 0px 0px;">
<div style="float:left;font-family:'arial';font-size:20px;color:#FFF;margin:4px 0px 0px 10px;"><b>⬅</b></div>
<div style="float:left;width:25px;height:25px;margin:8px 0px 0px 75px;"><img src="https://i.imgur.com/dibfU1j.png" style="width:25px;height:25px;border-radius:25px;"></div>
<div style="float:left;font-family:'arial';font-size:12px;color:#FFF;margin:33px 0px 0px -35px;"><b>kuroo 🐱</b></div>
<div style="float:right;width:8px;height:8px;padding:5px;border:2px solid #FFF;border-radius:11px;margin:8px 10px 0px 0px;">
<div style="float:left;font-family:'arial';font-size:12px;color:#FFF;text-align:center;margin:-5px 0px 0px 3px;"><b>i</b></div>
</div>
</div>
  <!--Name-->

  <!--Buttons + Type-->
<div style="float:left;width:250px;height:30px;border-radius:0px 0px 20px 20px;border-top:1px solid #C2C2C2;;margin:420px 0px 0px 0px;">

  <!--Image-->
<div style="float:left;width:14px;height:14px;border:2px solid #4DA3FF;border-radius:5px;margin:5px 0px 0px 12px;">
<div style="float:left;width:7px;height:0px;border-right:7px solid #4DA3FF;border-top:7px solid transparent;margin:7px 0px 0px -7px;"></div>
<div style="float:left;width:7px;height:0px;border-left:7px solid #4DA3FF;border-top:7px solid transparent;margin:-7px 0px 0px 7px;"></div>
<div style="float:left;width:3px;height:3px;background:#4DA3FF;border-radius:3px;margin:-11px 0px 0px 3px;"></div>
</div>
  <!--Image-->

  <!--GIF-->
<div style="float:left;width:14px;height:14px;border:2px solid #4DA3FF;border-radius:3px;margin:5px 0px 0px 7px;">
<div style="float:left;font-family:'arial';font-size:7px;color:#4DA3FF;text-align:center;margin:3px 0px 0px 2px;"><b>GIF</b></div>
</div>
  <!--GIF-->

  <!--Type-->
<div style="float:left;width:155px;height:18px;background:#525252;border-radius:20px;margin:5px 0px 0px 7px;">
<div style="float:left;font-family:arial;font-size:9px;color:#FFF;line-height:9px;text-align:left;margin:4px 0px 0px 10px;">Start a message</div>
</div>
  <!--Type-->

  <!--Send-->
<div style="float:right;font-family:arial;font-size:20px;color:#4DA3FF;margin:-1px 10px 0px 0px;">➢</div>
  <!--Send-->

</div>
  <!--Buttons + Type-->

</div>
  <!--Panels End-->

  <!--Messages-->
<div style="float:left;width:240px;height:410px;overflow:hidden;padding:5px 5px 5px 5px;opacity:0.99;margin:-455px 0px 0px 0px;">
<div style="float:left;width:300px;height:410px;overflow:auto;">
<div style="float:left;width:240px;">

<div style="float:left;width:200px;margin:0px 0px 0px 0px;">
<div style="float:left;width:auto;height:auto;padding:7px;background:#767676;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#767676;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
</div>

<div style="float:right;width:200px;margin:10px 0px 0px 0px;">
<div style="float:right;width:auto;height:auto;padding:7px;background:#4DA3FF;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#4DA3FF;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">avoid one worded messages to maintain the bubble at the same line</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#4DA3FF;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#4DA3FF;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">short messages that won't reach the 200px border width (as wide as this message bubble) would have the message bubble stay beside the previous bubble</div>
</div>

<div style="float:left;width:200px;margin:10px 0px 0px 0px;">
<div style="float:left;width:auto;height:auto;padding:7px;background:#767676;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#767676;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
<div style="float:left;width:auto;height:auto;padding:7px;background:#767676;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">make sure the image's width does not exceed 200px</div>
<div style="float:left;width:200px;height:120px;margin:5px 0px 0px 0px;"><img src="https://i.imgur.com/71PDJ8Y.png" style="width:200px;height:120px;border-radius:10px;" /></div>
</div>

<div style="float:right;width:200px;margin:10px 0px 0px 0px;">
<div style="float:right;width:auto;height:auto;padding:7px;background:#4DA3FF;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:0px 0px 0px 0px;">message here</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#4DA3FF;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">enter to create new message box</div>
<div style="float:right;width:auto;height:auto;padding:7px;background:#4DA3FF;border-radius:15px 15px 15px 15px;font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:left;margin:5px 0px 0px 0px;">make sure the image's width does not exceed 200px</div>
<div style="float:right;width:120px;height:200px;margin:5px 0px 0px 0px;"><img src="https://i.imgur.com/En8b0dG.png" style="width:120px;height:200px;border-radius:10px;" /></div>
</div>

</div>
</div>
</div>
  <!--Messages-->

  <!--Background End-->

<div style="float:right;width:auto;border-bottom:1px dotted #000;font-family:'helvetica';font-size:10px;color:#000;text-align:right;margin:0px 0px 0px 0px;"><a href="https://www.asianfanfics.com/story/view/1465009/" style="color:#000;">EPHR</a></div>
</div>
  <!--Layout End-->