Quin's Freebies 2.0

Mollisol

Subterranean Rose
Original poster
LURKER MEMBER
FOLKLORE MEMBER
Invitation Status
  1. Looking for partners
Posting Speed
  1. Speed of Light
  2. Multiple posts per day
  3. 1-3 posts per day
  4. One post per day
  5. Multiple posts per week
  6. 1-3 posts per week
Online Availability
6 - 10 PM, Eastern Standard Time
Writing Levels
  1. Intermediate
  2. Adept
  3. Advanced
  4. Adaptable
Preferred Character Gender
  1. Male
  2. Female
  3. Primarily Prefer Female
Genres
Magical girl, action, science fiction
This is an organized thread where you can get free bbcodes I make. I used to have a different one, but some of it broke after the XF2 update, so I'm making a new thread.

RULES
  • If you use a code, please like/rate the post of the code you use.
  • All code here is free to use with credit, such as writing "Code by @Quincunx " at the bottom of your post.
  • Not all of these codes are mobile-friendly, but those that are will be marked with a in the index. Codes are tested for mobile compatibility on a Samsung Galaxy J3, using Duckduckgo browser.
  • Please PM me if you have questions or suggestions!

INDEX
General:

Character Sheets:

Other:
  • Gambler - display with character name, health bar, and mana bar
  • Brb - look I made a computer desktop!!! look at me look at me look at me
 
Last edited:
//Thrum (general)

Background is tiled.

▰▰RP TITLE // THREAD // POST




Intro Box


BOX TITLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet lacinia luctus. Vivamus lacinia, mi sit amet tristique ornare, lorem felis ullamcorper ligula, a volutpat tellus purus sit amet sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus posuere arcu sed libero malesuada dictum. Etiam et pulvinar metus. Aenean eleifend pellentesque neque, vel consectetur mauris vulputate ut. Nulla viverra tristique dapibus. Phasellus rutrum scelerisque magna, ac ultrices leo vehicula vel. Nunc sed tellus vel purus tristique vestibulum. Proin varius nibh ante, eget tempor neque consequat ut.


Mauris ac sem vel risus hendrerit pellentesque. Aliquam erat volutpat. Donec vitae ipsum fringilla libero mattis mattis. Nam odio dui, maximus eu tristique ut, facilisis ac libero. Nam sit amet velit ac leo congue gravida in in enim. Aliquam a lectus metus. Donec ultrices ultrices nisl nec consectetur. Ut tempor felis ultrices ante rutrum blandit. Cras sit amet efficitur orci, ac imperdiet lacus. Cras quis aliquet nunc. Vivamus eu est quis neque tincidunt ornare aliquam ac metus. Proin condimentum, lectus eget pellentesque vehicula, tellus ex ornare tellus, id pellentesque ipsum eros et tortor. Integer pellentesque vehicula eros non accumsan. Duis sit amet enim non ligula gravida interdum a et sapien.







put cool lyrics or something here




Code:
[div=background-color:#495E83;padding:10px;overflow:auto;margin:auto;font-size:36px;border-radius:10px;color:#A8B6C7;"]▰▰RP TITLE // THREAD // POST[/div][div=display:flex; height:400px; margin:5px;]

[div=/*col2*/ flex:4; background-color; margin:5px;][div=background:url(https://i.imgur.com/YEUKPZl.png);padding:20px;overflow:auto;height:350px;"]

[div="background-color:white;color:black;padding:10px;border-radius:10px;opacity:.85;"]Intro Box[/div]

[div="background-color:white;color:black;padding:10px;border-radius:10px;opacity:.85;"]BOX TITLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet lacinia luctus. Vivamus lacinia, mi sit amet tristique ornare, lorem felis ullamcorper ligula, a volutpat tellus purus sit amet sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus posuere arcu sed libero malesuada dictum. Etiam et pulvinar metus. Aenean eleifend pellentesque neque, vel consectetur mauris vulputate ut. Nulla viverra tristique dapibus. Phasellus rutrum scelerisque magna, ac ultrices leo vehicula vel. Nunc sed tellus vel purus tristique vestibulum. Proin varius nibh ante, eget tempor neque consequat ut.


Mauris ac sem vel risus hendrerit pellentesque. Aliquam erat volutpat. Donec vitae ipsum fringilla libero mattis mattis. Nam odio dui, maximus eu tristique ut, facilisis ac libero. Nam sit amet velit ac leo congue gravida in in enim. Aliquam a lectus metus. Donec ultrices ultrices nisl nec consectetur. Ut tempor felis ultrices ante rutrum blandit. Cras sit amet efficitur orci, ac imperdiet lacus. Cras quis aliquet nunc. Vivamus eu est quis neque tincidunt ornare aliquam ac metus. Proin condimentum, lectus eget pellentesque vehicula, tellus ex ornare tellus, id pellentesque ipsum eros et tortor. Integer pellentesque vehicula eros non accumsan. Duis sit amet enim non ligula gravida interdum a et sapien.

[/div][/div][/div]

[div=/*col1*/ flex:1; display:flex; flex-direction:column;][div=/*col1row1*/ flex:1; margin:5px;background-color:#1B253E;border-radius:5px;]

[div=

   background-image: url(https://dummyimage.com/140x160/495e83/fff.png);

   background-repeat: no-repeat;

   width: 140px;

   height: 160px;

   background-size: contain;

   border-radius: 10px;

   border: 2px solid #7CA1CB;

   margin: auto;].[/div]

[div=margin:5px;text-align:center;color:#7CA1CB;font-size:16px;]put cool lyrics or something here[/div][/div][/div]

[/div]
 
Last edited:
//Aoide (general)

Background for the rightmost box is tiled/repeating, which is why I haven't used a placeholder image for it.

.
.
.
.
.
Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et semper neque, quis mattis nisi. Maecenas sit amet feugiat ipsum. Ut iaculis eleifend tellus quis imperdiet. Nulla porta accumsan diam, nec tempor metus volutpat sit amet. Nullam sed enim nec tortor posuere vehicula ut at urna. Integer in massa congue, laoreet risus ac, ultrices erat. Phasellus vitae sollicitudin ante. In sit amet felis vel elit vulputate gravida at non nibh. Duis egestas dui eget pellentesque tempor. Phasellus dui enim, consectetur vitae libero eget, laoreet vulputate justo. Duis ante elit, cursus et rutrum ac, eleifend vel ante. Nunc ut nunc non mauris bibendum ullamcorper quis ac orci. Nunc nec cursus odio, non porttitor eros. Phasellus sagittis interdum accumsan. Nullam a semper turpis, ullamcorper semper enim.

Curabitur eu turpis nec arcu fringilla efficitur. Proin vitae tincidunt lectus. Vestibulum tincidunt porttitor nibh mollis sodales. Suspendisse fermentum risus neque, aliquam maximus nibh viverra ut. Suspendisse at dui massa. Aliquam auctor commodo justo et congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ac justo ac mi lobortis lobortis. Suspendisse tristique imperdiet mollis. Nam turpis tellus, tincidunt in pellentesque id, blandit vitae lectus. Vestibulum sed urna sit amet erat molestie tempor. Morbi lorem risus, condimentum id massa et, pretium posuere est. Quisque id bibendum ex, non auctor lorem. Suspendisse quis elit eget nibh lacinia pellentesque. Vivamus ut magna quam. Fusce vitae massa viverra, elementum tellus ornare, venenatis eros.


Code:
[div=
display: inline-block;
vertical-align: top;
margin-down: 5px;
margin-top: 70px;
width: 349px;
height: 420px;
background: url(https://dummyimage.com/349x420/1a4e6c/ffffff.png);
background-size: contain;
border: 2px white solid;
border-radius: 5px;
][COLOR=transparent].[/COLOR][/div][div=
display: inline-block;
margin: 5px;
width: 480px;
][div=
  display: flex;
  width: 470px;
  z-index: 1;][div=
   flex: 1;
  margin-top: 5px;
   margin-right: 5px;
   margin-left: 50px;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   border: 2px white solid;
   background: url(https://dummyimage.com/100/42b6c8/ffffff.png);
][COLOR=transparent].[/COLOR][/div][div=
    flex: 1;
    margin: 5px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px white solid;
    background: url(https://dummyimage.com/100/42b6c8/ffffff.png);
][COLOR=transparent].[/COLOR][/div][div=
    flex: 1;
    margin: 5px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px white solid;
    background: url(https://dummyimage.com/100/42b6c8/ffffff.png);
][COLOR=transparent].[/COLOR][/div][div=
    flex: 1;
    margin: 5px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px white solid;
    background: url(https://dummyimage.com/100/42b6c8/ffffff.png);][COLOR=transparent].[/COLOR][/div][/div][div=
 margin-top: -50px;
 width: 420px;
 height: 405px;
 background: url(https://i.imgur.com/l0hm3bE.png);
 border-radius: 5px;
 z-index: 0;
 padding: 10px;][div=
    background-color: white;
    opacity: .8;
    padding: 15px;
    border-radius: 5px;
    color: black;
    height: 375px;
    overflow: auto;][div=
      margin: 5px;
      text-align: center;
      color: #1A4E6C;
      font-size: 48px;][FONT=Spirax]Name[/FONT][/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et semper neque, quis mattis nisi. Maecenas sit amet feugiat ipsum. Ut iaculis eleifend tellus quis imperdiet. Nulla porta accumsan diam, nec tempor metus volutpat sit amet. Nullam sed enim nec tortor posuere vehicula ut at urna. Integer in massa congue, laoreet risus ac, ultrices erat. Phasellus vitae sollicitudin ante. In sit amet felis vel elit vulputate gravida at non nibh. Duis egestas dui eget pellentesque tempor. Phasellus dui enim, consectetur vitae libero eget, laoreet vulputate justo. Duis ante elit, cursus et rutrum ac, eleifend vel ante. Nunc ut nunc non mauris bibendum ullamcorper quis ac orci. Nunc nec cursus odio, non porttitor eros. Phasellus sagittis interdum accumsan. Nullam a semper turpis, ullamcorper semper enim.

Curabitur eu turpis nec arcu fringilla efficitur. Proin vitae tincidunt lectus. Vestibulum tincidunt porttitor nibh mollis sodales. Suspendisse fermentum risus neque, aliquam maximus nibh viverra ut. Suspendisse at dui massa. Aliquam auctor commodo justo et congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ac justo ac mi lobortis lobortis. Suspendisse tristique imperdiet mollis. Nam turpis tellus, tincidunt in pellentesque id, blandit vitae lectus. Vestibulum sed urna sit amet erat molestie tempor. Morbi lorem risus, condimentum id massa et, pretium posuere est. Quisque id bibendum ex, non auctor lorem. Suspendisse quis elit eget nibh lacinia pellentesque. Vivamus ut magna quam. Fusce vitae massa viverra, elementum tellus ornare, venenatis eros.
[/div][/div][/div]
 
  • Love
Reactions: wolf.
//Mini (general)

Mobile-friendly.

.
T I T L E

Attribute: Value
Attribute: Value
Attribute: Value


Code:
[div=display: inline-block; width: 200px; margin: 5px; vertical-align: top;][div=
  height: 200px;
  background: url(https://dummyimage.com/200x200/bd0026/fff);
  border: 2px white solid;
  margin: 2px;][COLOR=transparent].[/COLOR][/div][div=
  background-color: white;
  color: dimgray;
  margin: 2px;
  padding: 10px;
  height: 200px;
  overflow-y: scroll;][FONT=Copse][div=text-align: center;]T I T L E[/div][hr=1px dimgray solid][/hr]
[B]Attribute:[/B] Value
[B]Attribute:[/B] Value
[B]Attribute:[/B] Value[/FONT][/div][/div]
 
Last edited:
//Cyclamen (general)

CHARACTER NAME
___HEADING
Attribute: value
Attribute: value

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper lacinia metus sit amet maximus. Aliquam ullamcorper diam ipsum, ut molestie ligula tempor at. Morbi et auctor velit. Mauris ullamcorper condimentum faucibus. Aliquam eu dui tristique, imperdiet odio vitae, volutpat ante. Donec iaculis arcu eget semper vestibulum. Nunc ultrices diam in orci finibus aliquam. Nulla tellus tellus, interdum eget finibus eu, tempus in sapien. Nunc ac interdum ante, sed rutrum dolor. Vivamus placerat magna et ipsum placerat, ac dapibus lectus gravida. In finibus vestibulum lacus, vitae maximus magna ultrices vel. Morbi varius a nisl vitae tempus. Duis congue tortor ac nibh varius aliquet. Ut facilisis elit mi, et bibendum purus accumsan sit amet. Etiam ut felis nec magna convallis imperdiet.

Proin nec posuere magna. Duis faucibus aliquam ipsum, ut mollis lectus molestie in. Vivamus eleifend tempor leo. Pellentesque vitae metus turpis. In nec volutpat nibh. Sed euismod pellentesque fermentum. Mauris pulvinar eros eu dui suscipit, in auctor libero placerat. Maecenas vehicula ultricies posuere. Nulla facilisi. Fusce lacus lacus, iaculis vel nulla eget, tempor feugiat ex. Nunc ex felis, vulputate et aliquam posuere, blandit et justo. Donec gravida tristique nisl. Duis ut varius ante. Phasellus condimentum maximus nunc, sed rutrum nulla egestas non. Sed urna quam, rutrum non porttitor ac, fermentum sed sapien.

Sed mattis varius quam vitae tristique. Sed a nibh quis nibh condimentum bibendum. Vestibulum nec erat non leo mollis porta eget quis ipsum. Duis vitae risus feugiat, volutpat leo sit amet, pretium nibh. Donec in leo eget elit vehicula dignissim. Nam in lacus ligula. Proin luctus non mauris quis bibendum. Ut cursus neque elementum, faucibus augue ac, tempor turpis. Nulla nunc nisi, laoreet et pretium quis, sagittis sed enim.


Code:
[div=/*big main kahuna*/
  max-width: 550px !important;
  height: 500px;
  background-color: white;
  padding: 15px;
  color: black;
  margin: auto;
][SIZE=36px][fa]fa-heart[/fa] [fa]fa-heart[/fa] [fa]fa-heart[/fa] CHARACTER NAME[/SIZE]
[div= display: flex;][div=/*pic column*/
    width: 100px;
    flex: 1;
    margin: 5px;
    background-repeat: no-repeat;
][div=/*pic 1*/
      height: 100px;
      background: url(https://dummyimage.com/100/FF69B4/000000);
      margin: 5px;
      background-repeat: no-repeat;
][/div][div=/*pic 2*/
      height: 100px;
      background: url(https://dummyimage.com/100/FF69B4/000000);
      margin: 5px;
      background-repeat: no-repeat;
][/div][div=/*pic 3*/
      height: 100px;
      background: url(https://dummyimage.com/100/FF69B4/000000);
      margin: 5px;
      background-repeat: no-repeat;
][/div][div=/*pic 4*/
      height: 100px;
      background: url(https://dummyimage.com/100/FF69B4/000000);
      margin: 5px;
      background-repeat: no-repeat;
][/div][/div][div=/*text area*/
    flex: 3;
    padding: 20px;
    overflow-y: scroll;
    max-height: 420px !important;
][SIZE=18px][B][I]___HEADING[/I][/B][/SIZE]
[B]Attribute:[/B] value
[B]Attribute:[/B] value



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper lacinia metus sit amet maximus. Aliquam ullamcorper diam ipsum, ut molestie ligula tempor at. Morbi et auctor velit. Mauris ullamcorper condimentum faucibus. Aliquam eu dui tristique, imperdiet odio vitae, volutpat ante. Donec iaculis arcu eget semper vestibulum. Nunc ultrices diam in orci finibus aliquam. Nulla tellus tellus, interdum eget finibus eu, tempus in sapien. Nunc ac interdum ante, sed rutrum dolor. Vivamus placerat magna et ipsum placerat, ac dapibus lectus gravida. In finibus vestibulum lacus, vitae maximus magna ultrices vel. Morbi varius a nisl vitae tempus. Duis congue tortor ac nibh varius aliquet. Ut facilisis elit mi, et bibendum purus accumsan sit amet. Etiam ut felis nec magna convallis imperdiet.

Proin nec posuere magna. Duis faucibus aliquam ipsum, ut mollis lectus molestie in. Vivamus eleifend tempor leo. Pellentesque vitae metus turpis. In nec volutpat nibh. Sed euismod pellentesque fermentum. Mauris pulvinar eros eu dui suscipit, in auctor libero placerat. Maecenas vehicula ultricies posuere. Nulla facilisi. Fusce lacus lacus, iaculis vel nulla eget, tempor feugiat ex. Nunc ex felis, vulputate et aliquam posuere, blandit et justo. Donec gravida tristique nisl. Duis ut varius ante. Phasellus condimentum maximus nunc, sed rutrum nulla egestas non. Sed urna quam, rutrum non porttitor ac, fermentum sed sapien.

Sed mattis varius quam vitae tristique. Sed a nibh quis nibh condimentum bibendum. Vestibulum nec erat non leo mollis porta eget quis ipsum. Duis vitae risus feugiat, volutpat leo sit amet, pretium nibh. Donec in leo eget elit vehicula dignissim. Nam in lacus ligula. Proin luctus non mauris quis bibendum. Ut cursus neque elementum, faucibus augue ac, tempor turpis. Nulla nunc nisi, laoreet et pretium quis, sagittis sed enim.
[/div][/div][/div]
 
//Brb (look I made a computer desktop!!! look at me look at me look at me)

Mobile-friendly.

Song in the txt is by Kitty.

my computer

network

inbox

recycle bin

brb.txt
File Edit Search Help
I never get bored of brainstorming reasons I adore you
I never get bored of brainstorming reasons I adore you

I'm a sucker for lover's spats
And the back and forth
But our tussles are nothing
What am I packing for?
I'll never walk out unless I have to, boy
I'll never walk out the door


start
Notepad
11:54pm


Code:
[div=/*desktop background*/
  z-index: 0;
  max-width: 600px !important;
  height: 400px;
  background: url(https://i.imgur.com/AzQduVA.png);
  padding: 20px;][div=/*icon-folder*/
][div=/*icon*/
    color: deeppink;
    max-width: 60px !important;
    text-align: center;
    font-size: 30px;
][fa]fa-laptop[/fa][div=/*text*/
    font-size: 12px;
]my computer[/div][/div]
[div=/*icon*/
    color: deeppink;
    max-width: 60px !important;
    text-align: center;
    font-size: 30px;
][fa]fa-group[/fa][div=/*text*/
    font-size: 12px;
]network[/div][/div]
[div=/*icon*/
    color: deeppink;
    max-width: 50px !important;
    text-align: center;
    font-size: 30px;
][fa]fa-envelope[/fa][div=/*text*/
    font-size: 12px;
]inbox[/div][/div]
[div=/*icon*/
    color: deeppink;
    max-width: 50px !important;
    text-align: center;
    font-size: 30px;
][fa]fa-recycle[/fa][div=/*text*/
    font-size: 12px;
]recycle bin[/div][/div]
[div=/*big box*/
  margin-top: -250px;
  margin-left: 45px;
  z-index: 2;
  max-width: 300px !important;
  background-color: lavenderblush;
  border: 1px deeppink solid;
  padding: 2px;
][div=/*top bar*/
    background-color: deeppink;
    padding: 5px;
    color: pink;
    display: flex;
][div=/*top bar text*/
      flex: 1;
      letter-spacing: 3px;
      font-size: 12px;
]brb.txt[/div] [div=/*top bar buttons*/
      flex: 1;
      text-align: right;
][fa]fa-window-minimize[/fa] [fa]fa-window-maximize[/fa] [fa]fa-window-close[/fa][/div][/div][div=/*menu*/
    max-width: 300px !important;
    background-color: pink;
    color: deeppink;
    font-size: 10px;
]File Edit Search Help[/div][div=/*textarea*/
    padding: 4%;
    color: mediumvioletred;
    font-size: 12px;
    text-align: left;
    overflow-y: scroll;
    height: 100px;
]I never get bored of brainstorming reasons I adore you
I never get bored of brainstorming reasons I adore you

I'm a sucker for lover's spats
And the back and forth
But our tussles are nothing
What am I packing for?
I'll never walk out unless I have to, boy
I'll never walk out the door
[/div][/div][/div]
[/div][div=/*taskbar*/
  max-width: 600px !important;
  height: 22px;
  background-color: deeppink;
  padding-left: 2px;
  padding-right: 2px;
  display: flex;][div=
    flex: 1;][div=/*start button*/
      color: pink;
      padding: 2px;
      border-left: 1px lavenderblush solid;
      border-top: 1px lavenderblush solid;
      border-bottom: 2px #a51c65 solid;
      border-right: 2px #a51c65 solid;
      font-size: 10px;
      width: 45px;
][fa]fa-heart[/fa] start[/div][/div][div=
    flex: 6;][div=/*notepad-taskbar*/
      padding: 2px;
      background-color: pink;
      color: mediumvioletred;
      border-left: 1px #a51c65 solid;
      border-top: 1px #a51c65 solid;
      border-bottom: 2px lavenderblush solid;
      border-right: 2px lavenderblush solid;
      font-size: 10px;
      width: 75px;
]Notepad[/div][/div][div=/*clock*/
    color: pink;
    font-size: 10px;
    width: 60px;
    padding: 2px;
    border-left: 1px #a51c65 solid;
    border-top: 1px #a51c65 solid;
    border-bottom: 2px lavenderblush solid;
    border-right: 2px lavenderblush solid;
][fa]fa-volume-up[/fa] 11:54 PM[/div][/div]
 
Last edited:
//Yuno (character sheet)



fff.png

Chara Name
(kanji/hanzi)

"quote or maybe fun lyrics"
  • Attribute Value
    Attribute Value
    Attribute Value
  • Stat A
    Stat B
    Stat C
    Stat D
    Stat E
    5 ▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰*.・+★
    4 ▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰*.・+★
    3 ▰▰▰▰▰▰▰▰▰▰▰▰*.・+★
    2 ▰▰▰▰▰▰▰▰*.・+★
    1 ▰▰▰▰*.・+★


Code:
[div=display:flex; height:450px; margin:auto;]
[div=/*col1*/ flex:1; display:flex; flex-direction:column;][div=/*col1row1*/ flex:1; margin:5px;background-color:#fff0e0;border-radius:10px;]
[div=pointer-events:none;text-align:center;margin:10px;][IMG]https://dummyimage.com/270x203/9c6645/fff.png[/IMG][/div][div=margin:5px;color:#AC957C;text-align:center;]
[FONT=Alfa Slab One][SIZE=36px]Chara Name[/SIZE]
[SIZE=26px](kanji/hanzi)[/SIZE][/FONT][/div]
[div=margin:5px;text-align:center;color:#AC957C;][I]"quote or maybe fun lyrics"[/I][/div][/div][/div][div=/*col2*/ flex:4; background-color; margin:5px;][tabs][tab=Basic][div=background:url(http://78.media.tumblr.com/5f0b45fa4350c8c2cdf19c3169e396f8/tumblr_inline_mll0tmss3O1r53miq.png);padding:20px;overflow:auto;height:325px;"][div="background-color:white;color:black;padding:10px;border-radius:10px;opacity:.85;"][B][I]Attribute[/I][/B] Value
[B][I]Attribute[/I][/B] Value
[B][I]Attribute[/I][/B] Value[/div][/div][/tab][tab=Columns][div=background:url(http://78.media.tumblr.com/5f0b45fa4350c8c2cdf19c3169e396f8/tumblr_inline_mll0tmss3O1r53miq.png);height:350px;padding:20px;overflow:auto;height:325px;"][div="background-color:white;color:black;padding:10px;border-radius:10px;opacity:.85;"][div=display:flex;margin:auto;][div=/*col1*/ flex:1; display:flex; flex-direction:column;][B][I]Stat A
Stat B
Stat C
Stat D
Stat E[/I][/B][/div][div=/*col2*/ flex:4;margin:5px;][COLOR=#00b3b3]5 ▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰*.・+★[/COLOR]
[COLOR=#59b300]4 ▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰*.・+★[/COLOR]
[COLOR=#b3b300]3 ▰▰▰▰▰▰▰▰▰▰▰▰*.・+★[/COLOR]
[COLOR=#B25900]2 ▰▰▰▰▰▰▰▰*.・+★[/COLOR]
[COLOR=#b30000]1 ▰▰▰▰*.・+★[/COLOR][/div][/div][/div][/div][/tab][/tabs][/div][/div]
 
  • Like
Reactions: Whimsical_Wishes
//Nora (general)

Mobile-friendly.

Title or Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus faucibus urna at ornare. Curabitur justo velit, consequat sed molestie et, blandit id nisi. Praesent ullamcorper vehicula pulvinar.

Pellentesque imperdiet sem posuere ex porta, et rhoncus odio posuere. Ut id luctus nulla. Aenean aliquam, sem eu interdum suscipit, ante massa blandit nunc, id pharetra felis nulla maximus ex. Maecenas sed sagittis justo. Praesent ac enim dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi et turpis consectetur, aliquam sapien a, pharetra nunc.

Pellentesque id velit eu dui scelerisque tristique eu at mauris.


Code:
[div=/*picture*/
  width: 100px;
  height: 100px;
  border: 2px solid #806A76;
  border-radius: 50px 5px 20px;
  background: url(https://dummyimage.com/100/ffffff/000000);
  z-index: 1;
][/div][div=/*container*/
  max-width: 500px !important;
  margin: 0px;
  margin-left: 25px;
  z-index: 0;][div=/*top bar*/
    background-color: #571016;
    color: #F7F4E3;
    font-size: 20px;
    padding: 10px;
    padding-left: 80px;
    max-width: 500px !important;
    z-index: 0;
    margin-top: -50px;
    border: 2px solid #806A76;
    border-bottom: 0px solid white;
][FONT=Copse]Title or Name[/FONT][/div][div=/*box*/
    max-width: 500px !important;
    background-color: #F7F4E3;
    color: #393943;
    padding: 20px;
    z-index: 0;
    font-size: 12px;
    border: 2px solid #806A76;
    border-top: 0px solid white;
    height: 200px;
    overflow-y: scroll;
][FONT=Muli]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus faucibus urna at ornare. Curabitur justo velit, consequat sed molestie et, blandit id nisi. Praesent ullamcorper vehicula pulvinar.

Pellentesque imperdiet sem posuere ex porta, et rhoncus odio posuere. Ut id luctus nulla. Aenean aliquam, sem eu interdum suscipit, ante massa blandit nunc, id pharetra felis nulla maximus ex. Maecenas sed sagittis justo. Praesent ac enim dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi et turpis consectetur, aliquam sapien a, pharetra nunc.

Pellentesque id velit eu dui scelerisque tristique eu at mauris. [/FONT][/div][/div]
 
Last edited:
  • Love
Reactions: kroyote
//Gambler (display with character name, health bar, and mana bar)

Mobile-friendly.

Character Name
33/33
56/56


Code:
//Gambler (display with character name, health bar, and mana bar)

[div=
  background-color: white;
  margin: 5px;
  padding: 10px;
  width: 250px;
  border-radius: 2px;
][div=display: margin: 5px;][COLOR=black][FONT=Petit Formal Script][SIZE=20px]Character Name[/SIZE][/FONT][/COLOR][div=
    margin: 5px;
    width: 204px;
    height: 16px;
    border-radius: 5px;
    background-color: black;
    font-size: 10px;
    color: white;
    padding: 2px;][div=
      width: 204px;
      height: 12px;
      background-color: #FF1493;
      border-radius: 5px;
][FA]fa-heart[/FA] 33/33[/div][/div][div=
    margin: 5px;
    width: 204px;
    height: 16px;
    border-radius: 5px;
    background-color: black;
    font-size: 10px;
    color: white;
    padding: 2px;][div=
      width: 200px;
      height: 12px;
      background-color: #4169E1;
      border-radius: 5px;
][FA]fa-moon-o[/FA] 56/56[/div][/div][/div][/div]
 
Last edited:
  • Like
Reactions: Eosphrous
//Marley (character sheet)

Title
Title
Title
Title
Title

THEIR NAME
HEADING
Bio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed nibh sit amet elit ullamcorper tristique. Fusce et lacinia magna. Vivamus laoreet nulla diam. Nam tincidunt tincidunt felis vitae efficitur. Vestibulum eu ligula ac magna porttitor accumsan. Sed est massa, hendrerit non augue ut, ultricies egestas dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ultricies mattis nibh, eu efficitur orci facilisis eget. Aliquam vel lacus at nibh laoreet vulputate vel rutrum ante. Nullam blandit at neque non mollis. Sed in odio dictum, consectetur dolor vitae, porta augue. Phasellus fringilla, neque quis bibendum rhoncus, erat lacus volutpat elit, et mattis ex dolor pulvinar lorem.

Nullam vel purus a nibh gravida tristique. Pellentesque eleifend mi vulputate ligula mollis, viverra rutrum libero consequat. Nam ac nibh vitae eros finibus egestas sed ut lectus. Vivamus eu tristique leo. Sed mattis lacus ut lorem finibus malesuada accumsan ac sem. Maecenas mollis metus sit amet placerat suscipit. Nullam a nisi ornare, blandit ipsum in, aliquam justo. Donec mattis feugiat mauris, eu luctus neque auctor sit amet.

Cras vel mi iaculis eros tempus fermentum eget non nisl. Cras pellentesque consequat dapibus. Aenean finibus ex id elit molestie dignissim. In placerat dignissim tincidunt. Etiam cursus nisi id orci varius gravida. Quisque commodo varius odio dictum pulvinar. Nulla facilisi. Cras a urna nec metus tincidunt iaculis id ut ex. Vivamus accumsan suscipit tortor nec tempus. Aliquam erat volutpat.

Sed vitae lorem nec nunc consectetur elementum. Fusce blandit erat et aliquet efficitur. Praesent vel quam mi. Aenean pretium, diam id ultrices imperdiet, nisi massa condimentum nibh, gravida eleifend mi justo sed elit. Praesent sit amet neque sagittis, ornare nulla a, finibus dui. Nam id nulla magna. Curabitur rutrum nunc lacus, et congue sem fringilla eget. Phasellus at nibh commodo, feugiat diam non, posuere lectus. Praesent tellus quam, facilisis eget lorem in, ornare imperdiet ipsum. Curabitur non nisi id massa volutpat porttitor ac ac purus.



Code:
[div=
  background-color: #F1F3F0;
  border: 10px #A29DA1 solid;
  color: #654E48;
  padding: 20px;
  margin: auto;][div=/*Center*/
      text-align: center;][div=/*Title 1*/
        font-size: 11px;
        font-style: italic;
        text-align: center;
        display: inline-block;][div=/*Pic 1*/
          background: url(https://dummyimage.com/100x100/e0c3c8/64474b);
          width: 100px;
          height: 100px;
          margin: 10px;][/div][font=Droid Serif]Title[/font][/div][div=/*Title 2*/
        font-size: 11px;
        font-style: italic;
        text-align: center;
        display: inline-block;][div=/*Pic 2*/
          background: url(https://dummyimage.com/100x100/e0c3c8/64474b);
          width: 100px;
          height: 100px;
          margin: 10px;][/div][font=Droid Serif]Title[/font][/div][div=/*Title 3*/
        font-size: 11px;
        font-style: italic;
        text-align: center;
        display: inline-block;][div=/*Pic 3*/
          background: url(https://dummyimage.com/100x100/e0c3c8/64474b);
          width: 100px;
          height: 100px;
          margin: 10px;][/div][font=Droid Serif]Title[/font][/div][div=/*Title 4*/
        font-size: 11px;
        font-style: italic;
        text-align: center;
        display: inline-block;][div=/*Pic 4*/
          background: url(https://dummyimage.com/100x100/e0c3c8/64474b);
          width: 100px;
          height: 100px;
          margin: 10px;][/div][font=Droid Serif]Title[/font][/div][div=/*Title 5*/
        font-size: 11px;
        font-style: italic;
        text-align: center;
        display: inline-block;][div=/*Pic 4*/
          background: url(https://dummyimage.com/100x100/e0c3c8/64474b);
          width: 100px;
          height: 100px;
          margin: 10px;][/div][font=Droid Serif]Title[/font][/div][/div]
[div=/*Name*/
    text-align: center;
    margin: 10px;
    letter-spacing: 5px;
    color: #3A232D;
    font-size: 50px;][font=Oswald]THEIR [color=#A29DA1]NAME[/color][/font][/div][div=/*Body*/
    font-size: 12px;
    margin: 10px;
    height: 300px;
    overflow-y: scroll;][div=/*Heading*/
      font-size: 20px;
      color: #B7A3AE;
      letter-spacing: 5px;][font=Oswald]HEADING[/font][/div][font=Droid Serif][i]Bio[/i]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed nibh sit amet elit ullamcorper tristique. Fusce et lacinia magna. Vivamus laoreet nulla diam. Nam tincidunt tincidunt felis vitae efficitur. Vestibulum eu ligula ac magna porttitor accumsan. Sed est massa, hendrerit non augue ut, ultricies egestas dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ultricies mattis nibh, eu efficitur orci facilisis eget. Aliquam vel lacus at nibh laoreet vulputate vel rutrum ante. Nullam blandit at neque non mollis. Sed in odio dictum, consectetur dolor vitae, porta augue. Phasellus fringilla, neque quis bibendum rhoncus, erat lacus volutpat elit, et mattis ex dolor pulvinar lorem.

Nullam vel purus a nibh gravida tristique. Pellentesque eleifend mi vulputate ligula mollis, viverra rutrum libero consequat. Nam ac nibh vitae eros finibus egestas sed ut lectus. Vivamus eu tristique leo. Sed mattis lacus ut lorem finibus malesuada accumsan ac sem. Maecenas mollis metus sit amet placerat suscipit. Nullam a nisi ornare, blandit ipsum in, aliquam justo. Donec mattis feugiat mauris, eu luctus neque auctor sit amet.

Cras vel mi iaculis eros tempus fermentum eget non nisl. Cras pellentesque consequat dapibus. Aenean finibus ex id elit molestie dignissim. In placerat dignissim tincidunt. Etiam cursus nisi id orci varius gravida. Quisque commodo varius odio dictum pulvinar. Nulla facilisi. Cras a urna nec metus tincidunt iaculis id ut ex. Vivamus accumsan suscipit tortor nec tempus. Aliquam erat volutpat.

Sed vitae lorem nec nunc consectetur elementum. Fusce blandit erat et aliquet efficitur. Praesent vel quam mi. Aenean pretium, diam id ultrices imperdiet, nisi massa condimentum nibh, gravida eleifend mi justo sed elit. Praesent sit amet neque sagittis, ornare nulla a, finibus dui. Nam id nulla magna. Curabitur rutrum nunc lacus, et congue sem fringilla eget. Phasellus at nibh commodo, feugiat diam non, posuere lectus. Praesent tellus quam, facilisis eget lorem in, ornare imperdiet ipsum. Curabitur non nisi id massa volutpat porttitor ac ac purus. [/font]
[/div][/div]
 
Last edited:
  • Like
Reactions: MWMASkairipa
//Padma (General)


Character Name

Nam lacinia ante non convallis aliquet. Praesent felis libero, egestas ac sagittis sed, pulvinar sed ex. Nunc vel turpis facilisis, consequat sapien ut, porttitor nisi. Suspendisse sem justo, porttitor id pharetra ac, volutpat vel quam. Curabitur lacinia, eros a faucibus ultrices, ante turpis euismod sapien, ut bibendum lorem nisl ac ipsum. Integer dignissim, arcu quis dignissim sodales, mauris dui rutrum augue, in eleifend libero metus sit amet odio. Ut sit amet varius velit, eu lacinia sem. Donec rutrum accumsan metus, tempus feugiat nulla vulputate sit amet. Cras in metus magna. Praesent pharetra et eros eu placerat. Phasellus elementum aliquet ornare. Nullam tincidunt, neque eget convallis placerat, ligula velit finibus velit, eu mollis lorem eros vel odio. Ut vitae vehicula justo. Nunc sem sapien, malesuada posuere neque eu, facilisis scelerisque tortor. In quis pharetra nisi.

Aliquam tempor pharetra ipsum vitae volutpat. Nulla eu auctor nisi. Aliquam condimentum sodales ipsum, a posuere ante dignissim iaculis. Integer venenatis et nunc quis molestie. Aenean justo tortor, dictum quis urna eu, lobortis fringilla nibh. Nam sed urna luctus, volutpat felis et, aliquam tortor. Phasellus suscipit purus urna, vel ultricies leo ultrices quis. Nulla in convallis mauris.



Code:
[div=
  z-index: 1;
  margin: auto;
  background: url(https://dummyimage.com/100/fdd8db/8876ac);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: -75px;
][/div]
[div=
  z-index: 0;
  margin: auto;
  width: 500px;
  height: 281px;
  background-size: contain;
  padding-left: 50px;
  padding-right: 50px;
  background: url(https://i.imgur.com/XNU8oSh.gif);][div=
    background-color: rgba(231, 206, 231, .85);
    color: #866AAA;
    height: 281px;
    overflow-y: scroll;
    padding: 15px;
    padding-top: 50px;
][div=
      text-align: center;][SIZE=30px][FONT=Petit Formal Script]Character Name[/FONT][/SIZE][/div]
[div=
      margin-bottom: 15px;][FONT=Lato]Nam lacinia ante non convallis aliquet. Praesent felis libero, egestas ac sagittis sed, pulvinar sed ex. Nunc vel turpis facilisis, consequat sapien ut, porttitor nisi. Suspendisse sem justo, porttitor id pharetra ac, volutpat vel quam. Curabitur lacinia, eros a faucibus ultrices, ante turpis euismod sapien, ut bibendum lorem nisl ac ipsum. Integer dignissim, arcu quis dignissim sodales, mauris dui rutrum augue, in eleifend libero metus sit amet odio. Ut sit amet varius velit, eu lacinia sem. Donec rutrum accumsan metus, tempus feugiat nulla vulputate sit amet. Cras in metus magna. Praesent pharetra et eros eu placerat. Phasellus elementum aliquet ornare. Nullam tincidunt, neque eget convallis placerat, ligula velit finibus velit, eu mollis lorem eros vel odio. Ut vitae vehicula justo. Nunc sem sapien, malesuada posuere neque eu, facilisis scelerisque tortor. In quis pharetra nisi.

Aliquam tempor pharetra ipsum vitae volutpat. Nulla eu auctor nisi. Aliquam condimentum sodales ipsum, a posuere ante dignissim iaculis. Integer venenatis et nunc quis molestie. Aenean justo tortor, dictum quis urna eu, lobortis fringilla nibh. Nam sed urna luctus, volutpat felis et, aliquam tortor. Phasellus suscipit purus urna, vel ultricies leo ultrices quis. Nulla in convallis mauris.[/FONT]
[/div][/div][/div]