FREE SHOP BB CODE SHOP Ardent's BBCode Repair Shop

Ardent

your blood on my teeth
Original poster
FOLKLORE MEMBER
Invitation Status
  1. Not accepting invites at this time
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
  4. Slow As Molasses
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Intermediate
  2. Adept
  3. Advanced
  4. Adaptable
Preferred Character Gender
  1. No Preferences
Genres
Horror, Dark Fantasy, Modern

ARDENT'S BBCODE REPAIR SHOP

Is your code broken? Or perhaps you can't figure out a way to make your codes responsive / mobile-friendly?

Don't worry, I've got your back.

Send me your broken and unresponsive codes, and I'll fix them up for you. With your permission, I may also make some changes if I find that your code has design or accessibility issues (ex. text is too small, text is hard to read on background, images are too large, etc.)

I will only be debugging and making minor changes. I won't create anything from scratch!

If it's free layouts you're looking for, click here. If you're new to coding and would like to see my guide, click here.


REQUEST FORM


In your reply, please fill out the following:

  • What seems to be the problem? (Be as detailed as you can!)
  • Paste your code between the [CODE][/CODE] tags:


GENERAL TIPS

  • Use relative units, like em and rem, for font size
  • Use clamp() for titles
  • Use sans serif for longer texts
  • Avoid pure black [#000] or pure white [#fff] backgrounds
  • Avoid white on black for longer texts
  • Avoid centering longer texts
  • Avoid animating text
  • Use column, flex / flex-wrap or grid for multi-column rows


USEFUL TOOLS FOR ACCESSIBILITY

 
Last edited:
What seems to be the problem? Sometimes the code breaks.
Would you like some design suggestions? Sure!
Paste your code between the
Code:
[CODE]
[TABS=730]
{slide=[COLOR=rgb(184, 49, 47)]Leonidas[/COLOR]}
[CENTER][IMG width="455px"]http://pm1.narvii.com/7635/2386bcfb6d8b8dc4baed47c5d916052ac5cbd198r1-650-460v2_uhq.jpg[/IMG]
Confusion set in as the past King eyed the woman looking at him like she somehow knew him.
The familiar armor caught his eye, as he flashed his player pin.

He stared at the distinctly unfamiliar Spartan women warrior and looked over at the others, trying to make his presence known to at least the Spartan woman (Kassandra)  and less to the others around him.

[COLOR=rgb(184, 49, 47)]Είμαι ο βασιλιάς Λεωνίδας της Σπάρτης και δεν είμαι εξοικειωμένος μαζί σου, αλλά η πανοπλία σου μοιάζει με τη δική μου. Με ξερεις?[/COLOR]

[COLOR=rgb(250, 197, 28)]"I am King Leonidas of Sparta and I'm.. unfamiliar with you but your armor looks similar to mine. Do you know.. Me from somewhere?[/COLOR]

His eyebrows raised from under his helmet.

He showed his player's token and took off his Spartan helmet to show his point to reveal a man with reddish hair, striking features and red lines all over his body but with the same Spartan armor as before.

"I'm sure we'll find out soon enough."[/CENTER]

{/slide}

{slide=Status}
[CENTER][ATTACH type="full" width="408px" alt="1643575947109.png"]225397[/ATTACH]

[B]Leonidas (Fate Version)
Status: Someone's got me confused
Location: Statue
Characters around: [B]Haru Okumura[/B] [USER=33179]@PlumpyNut[/USER] , [B]Shiki[/B] [USER=22890]@thatguyinthestore[/USER], [B]Ash[/B] [USER=33171]@Flamenami[/USER], The Gambler[/B]
[COLOR=rgb(184, 49, 47)][B]Interacting with: Kassandra (Maybe?)@FactionGuerrilla [/B] [USER=33190]@PolikShadowbliss[/USER] 
{/slide}[/COLOR][/CENTER]

{slide=Radec}

[div=
width: 500px;
height: 500px;
background: url(https://i.pinimg.com/originals/5d/1b/9e/5d1b9e2e620c9531f124367b36f3f003.jpg), url(https://static.wikia.nocookie.net/killzone/images/c/c5/Helghan.JPG);
background-size: cover;
background-blend-mode: overlay;][/div]

==================================================================================
To say the least, after staring at the almost ancient tech known as a flip phone, Radec decided the course of action he'd take was going to the Park.

But it didn't take long for the man to arrive as he was gone and reappeared in a flash, quickly cloaking himself to move closer to the crowds

[IMG]https://p81.cooltext.com/Rendered/Cool%20Text%20-%20Colonel%20Mael%20Radec%20402794624648225.png[/IMG] {/slide}



[/slide]

{slide=Status2}




[IMG]https://64.media.tumblr.com/6fadc21e5a4827a4926081ae3d597427/tumblr_mkwk71Ywqg1qdt9ggo1_500.gifv[/IMG]

Colonel Radec
Status:
Location: Well
Characters around:
{/slide}

[/TABS]
[/code]
 
@dark Hello! I'm going to need more info regarding your code, since it seems to be working fine as it is right now! Do you remember what you changed about your code that caused it to break?

I do have one generic tip to prevent future coding headaches. Live formatting can really fuck up your code, so if you haven't yet, you should consider clicking the
LarlY1G.jpg
to turn it off while coding. Another tip is to make sure you don't forget to close your tags!

As for design suggestions, I suppose it would be better to change the yellow text to something that would work better with lighter Iwaku themes. Or you could give your entire layout a dark background, if you want to keep the yellow text. I would also center your code so that it sits perfectly in the middle of your post, like this:


  • 2386bcfb6d8b8dc4baed47c5d916052ac5cbd198r1-650-460v2_uhq.jpg

    Confusion set in as the past King eyed the woman looking at him like she somehow knew him.
    The familiar armor caught his eye, as he flashed his player pin.

    He stared at the distinctly unfamiliar Spartan women warrior and looked over at the others, trying to make his presence known to at least the Spartan woman (Kassandra) and less to the others around him.

    Είμαι ο βασιλιάς Λεωνίδας της Σπάρτης και δεν είμαι εξοικειωμένος μαζί σου, αλλά η πανοπλία σου μοιάζει με τη δική μου. Με ξερεις?

    "I am King Leonidas of Sparta and I'm.. unfamiliar with you but your armor looks similar to mine. Do you know.. Me from somewhere?

    His eyebrows raised from under his helmet.

    He showed his player's token and took off his Spartan helmet to show his point to reveal a man with reddish hair, striking features and red lines all over his body but with the same Spartan armor as before.

    "I'm sure we'll find out soon enough."​


  • View attachment 225397

    Leonidas (Fate Version)
    Status: Someone's got me confused
    Location: Statue
    Characters around: Haru Okumura @PlumpyNut , Shiki @thatguyinthestore, Ash @Flamenami, The Gambler

    Interacting with: Kassandra (Maybe?)@FactionGuerrilla @PolikShadowbliss




  • ==================================================================================
    To say the least, after staring at the almost ancient tech known as a flip phone, Radec decided the course of action he'd take was going to the Park.

    But it didn't take long for the man to arrive as he was gone and reappeared in a flash, quickly cloaking himself to move closer to the crowds

    Cool%20Text%20-%20Colonel%20Mael%20Radec%20402794624648225.png





  • tumblr_mkwk71Ywqg1qdt9ggo1_500.gifv


    Colonel Radec
    Status:
    Location: Well
    Characters around:


Otherwise, it's looking pretty good!

Code:
[div=width: 730px; margin: auto; background: #1b1b1b;][TABS=730]{slide=[COLOR=rgb(184, 49, 47)]Leonidas[/COLOR]}
[CENTER][IMG width="455px"]http://pm1.narvii.com/7635/2386bcfb6d8b8dc4baed47c5d916052ac5cbd198r1-650-460v2_uhq.jpg[/IMG]
Confusion set in as the past King eyed the woman looking at him like she somehow knew him.
The familiar armor caught his eye, as he flashed his player pin.

He stared at the distinctly unfamiliar Spartan women warrior and looked over at the others, trying to make his presence known to at least the Spartan woman (Kassandra)  and less to the others around him.

[COLOR=rgb(184, 49, 47)]Είμαι ο βασιλιάς Λεωνίδας της Σπάρτης και δεν είμαι εξοικειωμένος μαζί σου, αλλά η πανοπλία σου μοιάζει με τη δική μου. Με ξερεις?[/COLOR]

[COLOR=rgb(250, 197, 28)]"I am King Leonidas of Sparta and I'm.. unfamiliar with you but your armor looks similar to mine. Do you know.. Me from somewhere?[/COLOR]

His eyebrows raised from under his helmet.

He showed his player's token and took off his Spartan helmet to show his point to reveal a man with reddish hair, striking features and red lines all over his body but with the same Spartan armor as before.

"I'm sure we'll find out soon enough."[/CENTER]

{/slide}

{slide=Status}
[CENTER][ATTACH type="full" width="408px" alt="1643575947109.png"]225397[/ATTACH]

[B]Leonidas (Fate Version)
Status: Someone's got me confused
Location: Statue
Characters around: [B]Haru Okumura[/B] [USER=33179]@PlumpyNut[/USER] , [B]Shiki[/B] [USER=22890]@thatguyinthestore[/USER], [B]Ash[/B] [USER=33171]@Flamenami[/USER], The Gambler[/B]
[COLOR=rgb(184, 49, 47)][B]Interacting with: Kassandra (Maybe?)@FactionGuerrilla [/B] [USER=33190]@PolikShadowbliss[/USER] 
{/slide}[/COLOR][/CENTER]

{slide=Radec}

[div=
width: 500px;
height: 500px;
background: url(https://i.pinimg.com/originals/5d/1b/9e/5d1b9e2e620c9531f124367b36f3f003.jpg), url(https://static.wikia.nocookie.net/killzone/images/c/c5/Helghan.JPG);
background-size: cover;
background-blend-mode: overlay;][/div]

==================================================================================
To say the least, after staring at the almost ancient tech known as a flip phone, Radec decided the course of action he'd take was going to the Park.

But it didn't take long for the man to arrive as he was gone and reappeared in a flash, quickly cloaking himself to move closer to the crowds

[IMG]https://p81.cooltext.com/Rendered/Cool%20Text%20-%20Colonel%20Mael%20Radec%20402794624648225.png[/IMG] {/slide}



[/slide]

{slide=Status2}




[IMG]https://64.media.tumblr.com/6fadc21e5a4827a4926081ae3d597427/tumblr_mkwk71Ywqg1qdt9ggo1_500.gifv[/IMG]

Colonel Radec
Status:
Location: Well
Characters around:
{/slide}

[/TABS][/div]
 
What seems to be the problem?: There's spacing between the lines of text and this angers Kuno to violence.
Would you like some design suggestions?: How dare you ask me that
Why am I bothering you with such an easy fix?: Because laziness defines me, and your thread could use the attention :^)
Paste your code between the tags:

Code:
[div=margin: auto;max-width: 500px !important;][div=width:500px;height:500px;background-image:url(https://i.imgur.com/tvzUVUV.jpg); background-position:center;padding: 5px;font-size:30px;color:#FE582C;]
[div=width:90%;background-color: #e3e3e3;border: 4px solid #4c4a54;margin: auto;color: #4c4a54;padding: 10px;][div=height: 400px;overflow: auto;padding-right: 3px;][font="Satisfy"][center]Kuno's To-Do List[/center][/font]
[font="Spectral"][size=3]All the plans, schemes, and projects of Iwaku staff's laziest sloth. Feast your eyes. 

[b]To-do list:[/b]
[LIST]
[*] Never
[*] Gonna
[*] Give
[*] You
[*] Up
[/LIST]

[b]Ideas:[/b]
[LIST]
[*] tbd
[/LIST][/size][/font]
[/div][/div][/div][/div]
 
@Kuno
These lines of code:

font-size: 30px;
[SIZE=3][/SIZE]

...are affecting your line-height. Basically, even though you specified [SIZE=3][/SIZE] for the body of your code, it's still retaining the same line-height that comes with the 30px font-size.

Simply replace [SIZE=3][/SIZE] with [div][/div] tags specifying your desired font-size. In this case, size 3 should be equivalent to 12px.


Kuno's To-Do List​
All the plans, schemes, and projects of Iwaku staff's laziest sloth. Feast your eyes.

To-do list:
  • Never
  • Gonna
  • Give
  • You
  • Up

Ideas:
  • tbd


Code:
[div=margin: auto;max-width: 500px !important;][div=width:500px;height:500px;background-image:url(https://i.imgur.com/tvzUVUV.jpg); background-position:center;padding: 5px;font-size:30px;color:#FE582C;]
[div=width:90%;background-color: #e3e3e3;border: 4px solid #4c4a54;margin: auto;color: #4c4a54;padding: 10px;][div=height: 400px;overflow: auto;padding-right: 3px;][font="Satisfy"][center]Kuno's To-Do List[/center][/font]
[font="Spectral"][div=font-size: 12px;]All the plans, schemes, and projects of Iwaku staff's laziest sloth. Feast your eyes. 

[b]To-do list:[/b]
[LIST]
[*] Never
[*] Gonna
[*] Give
[*] You
[*] Up
[/LIST]

[b]Ideas:[/b]
[LIST]
[*] tbd
[/LIST][/div][/font]
[/div][/div][/div][/div]

Also, how dare you rick roll me. BLACKLISTED. ]:<
 
  • Haha
Reactions: Kuno
@Ardent IM BACK

What seems to be the problem?: Pretty simple issues, actually. I'd like to make the code mobile friendly, as well as put a #FAE5CA colored, 650 width border line in between "Project Warhead" and the section beneath. Everytime I try and do it with a separate div in between, it keeps borking the code.
Would you like some design suggestions?: Sure. It's a pretty simple design purposefully, but I'll take some tips.

Code:
[div=margin: auto;max-width:800px!important][div=margin:auto;width:800px;height:650px;background:#000;border:1px inset #FAE5CA;]
[div=margin:auto;font-family:Chakra Petch;font-size:60px;text-align:center;letter-spacing:5px;color:#ffeaee;text-shadow: 2px 1px 0px #000000;][font="Chakra Petch"]BLACKGATE
[div=margin:auto;font-family:Exo;font-size:12px;text-align:center;letter-spacing:1px;color:#FAE5CA;text-shadow: 2px 1px 0px #000000;opacity:90%;][font="Exo"]PROJECT WARHEAD[/font][/div][/font][/div]

[div=margin: auto;max-width:700px!important;][div=margin:auto;width:300px;height:420px;background-image:url(https://i.imgur.com/cJrmVQP.jpg);display:inline-block;vertical-align:top;][/div][div=margin:auto;width:400px;height:420px; overflow: hidden; background-color:#000000;font-size:12px;display:inline-block;vertical-align:top;][div=width: 130%; margin-left: 5%; height: 420px; padding-right: 5%; overflow-y: scroll;][font="Exo"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et. Hendrerit gravida rutrum quisque non tellus. Dapibus ultrices in iaculis nunc sed augue. Ullamcorper malesuada proin libero nunc consequat interdum. Venenatis tellus in metus vulputate eu scelerisque. Feugiat vivamus at augue eget arcu dictum varius duis. Congue eu consequat ac felis donec et odio. Et malesuada fames ac turpis egestas integer eget. Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi.

Eget est lorem ipsum dolor. Sed cras ornare arcu dui. Felis donec et odio pellentesque diam. Euismod in pellentesque massa placerat duis ultricies. At ultrices mi tempus imperdiet. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. Tellus mauris a diam maecenas sed. Ut morbi tincidunt augue interdum velit euismod. Enim facilisis gravida neque convallis a cras semper. Enim sed faucibus turpis in eu mi bibendum. Posuere sollicitudin aliquam ultrices sagittis. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc.

Semper eget duis at tellus at urna condimentum. Adipiscing enim eu turpis egestas pretium. Diam maecenas ultricies mi eget mauris. Maecenas volutpat blandit aliquam etiam erat velit. Urna et pharetra pharetra massa massa. Nisl purus in mollis nunc sed id semper. Et tortor consequat id porta nibh. Vulputate mi sit amet mauris commodo quis imperdiet massa tincidunt. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Morbi tincidunt ornare massa eget egestas purus. Nisi est sit amet facilisis magna etiam tempor. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et. Hendrerit gravida rutrum quisque non tellus. Dapibus ultrices in iaculis nunc sed augue. Ullamcorper malesuada proin libero nunc consequat interdum. Venenatis tellus in metus vulputate eu scelerisque. Feugiat vivamus at augue eget arcu dictum varius duis. Congue eu consequat ac felis donec et odio. Et malesuada fames ac turpis egestas integer eget. Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi.

Eget est lorem ipsum dolor. Sed cras ornare arcu dui. Felis donec et odio pellentesque diam. Euismod in pellentesque massa placerat duis ultricies. At ultrices mi tempus imperdiet. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. Tellus mauris a diam maecenas sed. Ut morbi tincidunt augue interdum velit euismod. Enim facilisis gravida neque convallis a cras semper. Enim sed faucibus turpis in eu mi bibendum. Posuere sollicitudin aliquam ultrices sagittis. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc.

Semper eget duis at tellus at urna condimentum. Adipiscing enim eu turpis egestas pretium. Diam maecenas ultricies mi eget mauris. Maecenas volutpat blandit aliquam etiam erat velit. Urna et pharetra pharetra massa massa. Nisl purus in mollis nunc sed id semper. Et tortor consequat id porta nibh. Vulputate mi sit amet mauris commodo quis imperdiet massa tincidunt. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Morbi tincidunt ornare massa eget egestas purus. Nisi est sit amet facilisis magna etiam tempor. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend.

[/font][/div][/div][/div][/div]
 
#1 This is not a code-breaking issue, but the first line is repetitive (margin and width are specified twice). I removed first div tag as it is unnecessary.

#2 Text box is wrapping to the next line; however, the outer box cannot accommodate it because it has a specified height. I removed the height declaration.

#3 I used flexbox for the two adjacent containers so that they are centered and can adjust themselves depending on screen size.

#4 Not sure why the font was specified twice in your code, but I removed the second bbcode declaration. I added border-bottom, specified your desired color and width, and also specified padding-bottom so as to add some space between the text and the divider.

Suggestions: I like the simple design, though I'm not a fan of how the elements are sticking too close to the border. Added padding to the first line to fix that issue.

Code:
[div=margin:auto;width:800px;background:#000;border:1px inset #FAE5CA; padding: 20px;][div=margin:auto;font-family:Chakra Petch;font-size:60px;text-align:center;letter-spacing:5px;color:#ffeaee;text-shadow: 2px 1px 0px #000000;][font="Chakra Petch"]BLACKGATE
[div=margin:auto;font-family:Exo;font-size:12px;text-align:center;letter-spacing:1px;color:#FAE5CA;text-shadow: 2px 1px 0px #000000;opacity:90%; border-bottom: 1px solid #FAE5CA; padding-bottom: 10px; width: 650px;]PROJECT WARHEAD[/div][/font][/div]

[div=margin: auto;max-width:700px!important; display: flex; flex-wrap: wrap;][div=margin:auto;width:300px;height:420px;background-image:url(https://i.imgur.com/cJrmVQP.jpg);display:inline-block;vertical-align:top;][/div][div=margin:auto;width:400px;height:420px; overflow: hidden; background-color:#000000;font-size:12px;display:inline-block;vertical-align:top;][div=width: 130%; margin-left: 5%; height: 420px; padding-right: 5%; overflow-y: scroll;][font="Exo"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et. Hendrerit gravida rutrum quisque non tellus. Dapibus ultrices in iaculis nunc sed augue. Ullamcorper malesuada proin libero nunc consequat interdum. Venenatis tellus in metus vulputate eu scelerisque. Feugiat vivamus at augue eget arcu dictum varius duis. Congue eu consequat ac felis donec et odio. Et malesuada fames ac turpis egestas integer eget. Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi.

Eget est lorem ipsum dolor. Sed cras ornare arcu dui. Felis donec et odio pellentesque diam. Euismod in pellentesque massa placerat duis ultricies. At ultrices mi tempus imperdiet. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. Tellus mauris a diam maecenas sed. Ut morbi tincidunt augue interdum velit euismod. Enim facilisis gravida neque convallis a cras semper. Enim sed faucibus turpis in eu mi bibendum. Posuere sollicitudin aliquam ultrices sagittis. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc.

Semper eget duis at tellus at urna condimentum. Adipiscing enim eu turpis egestas pretium. Diam maecenas ultricies mi eget mauris. Maecenas volutpat blandit aliquam etiam erat velit. Urna et pharetra pharetra massa massa. Nisl purus in mollis nunc sed id semper. Et tortor consequat id porta nibh. Vulputate mi sit amet mauris commodo quis imperdiet massa tincidunt. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Morbi tincidunt ornare massa eget egestas purus. Nisi est sit amet facilisis magna etiam tempor. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et. Hendrerit gravida rutrum quisque non tellus. Dapibus ultrices in iaculis nunc sed augue. Ullamcorper malesuada proin libero nunc consequat interdum. Venenatis tellus in metus vulputate eu scelerisque. Feugiat vivamus at augue eget arcu dictum varius duis. Congue eu consequat ac felis donec et odio. Et malesuada fames ac turpis egestas integer eget. Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi.

Eget est lorem ipsum dolor. Sed cras ornare arcu dui. Felis donec et odio pellentesque diam. Euismod in pellentesque massa placerat duis ultricies. At ultrices mi tempus imperdiet. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. Tellus mauris a diam maecenas sed. Ut morbi tincidunt augue interdum velit euismod. Enim facilisis gravida neque convallis a cras semper. Enim sed faucibus turpis in eu mi bibendum. Posuere sollicitudin aliquam ultrices sagittis. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc.

Semper eget duis at tellus at urna condimentum. Adipiscing enim eu turpis egestas pretium. Diam maecenas ultricies mi eget mauris. Maecenas volutpat blandit aliquam etiam erat velit. Urna et pharetra pharetra massa massa. Nisl purus in mollis nunc sed id semper. Et tortor consequat id porta nibh. Vulputate mi sit amet mauris commodo quis imperdiet massa tincidunt. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Morbi tincidunt ornare massa eget egestas purus. Nisi est sit amet facilisis magna etiam tempor. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend.

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

BLACKGATE
PROJECT WARHEAD


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et. Hendrerit gravida rutrum quisque non tellus. Dapibus ultrices in iaculis nunc sed augue. Ullamcorper malesuada proin libero nunc consequat interdum. Venenatis tellus in metus vulputate eu scelerisque. Feugiat vivamus at augue eget arcu dictum varius duis. Congue eu consequat ac felis donec et odio. Et malesuada fames ac turpis egestas integer eget. Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi.

Eget est lorem ipsum dolor. Sed cras ornare arcu dui. Felis donec et odio pellentesque diam. Euismod in pellentesque massa placerat duis ultricies. At ultrices mi tempus imperdiet. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. Tellus mauris a diam maecenas sed. Ut morbi tincidunt augue interdum velit euismod. Enim facilisis gravida neque convallis a cras semper. Enim sed faucibus turpis in eu mi bibendum. Posuere sollicitudin aliquam ultrices sagittis. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc.

Semper eget duis at tellus at urna condimentum. Adipiscing enim eu turpis egestas pretium. Diam maecenas ultricies mi eget mauris. Maecenas volutpat blandit aliquam etiam erat velit. Urna et pharetra pharetra massa massa. Nisl purus in mollis nunc sed id semper. Et tortor consequat id porta nibh. Vulputate mi sit amet mauris commodo quis imperdiet massa tincidunt. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Morbi tincidunt ornare massa eget egestas purus. Nisi est sit amet facilisis magna etiam tempor. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et. Hendrerit gravida rutrum quisque non tellus. Dapibus ultrices in iaculis nunc sed augue. Ullamcorper malesuada proin libero nunc consequat interdum. Venenatis tellus in metus vulputate eu scelerisque. Feugiat vivamus at augue eget arcu dictum varius duis. Congue eu consequat ac felis donec et odio. Et malesuada fames ac turpis egestas integer eget. Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi.

Eget est lorem ipsum dolor. Sed cras ornare arcu dui. Felis donec et odio pellentesque diam. Euismod in pellentesque massa placerat duis ultricies. At ultrices mi tempus imperdiet. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. Tellus mauris a diam maecenas sed. Ut morbi tincidunt augue interdum velit euismod. Enim facilisis gravida neque convallis a cras semper. Enim sed faucibus turpis in eu mi bibendum. Posuere sollicitudin aliquam ultrices sagittis. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc.

Semper eget duis at tellus at urna condimentum. Adipiscing enim eu turpis egestas pretium. Diam maecenas ultricies mi eget mauris. Maecenas volutpat blandit aliquam etiam erat velit. Urna et pharetra pharetra massa massa. Nisl purus in mollis nunc sed id semper. Et tortor consequat id porta nibh. Vulputate mi sit amet mauris commodo quis imperdiet massa tincidunt. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Morbi tincidunt ornare massa eget egestas purus. Nisi est sit amet facilisis magna etiam tempor. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend.



@Kuno
 
  • Thank You
Reactions: Kuno
Not exactly a request, buuuut I might need you reteach me all BBcodes again. 😂 It has been awhile, though I am itching to play with it again.
 
Not exactly a request, buuuut I might need you reteach me all BBcodes again. 😂 It has been awhile, though I am itching to play with it again.

LOL sure thing. I actually created a coding guide recently and it basically covers (almost) everything.

But if you want to know how to do something specific, you know how to reach me. :^)
 
Not exactly a request, buuuut I might need you reteach me all BBcodes again. 😂 It has been awhile, though I am itching to play with it again.

LOL sure thing. I actually created a coding guide recently and it basically covers (almost) everything.

But if you want to know how to do something specific, you know how to reach me. :^)
Woah. I will be sure to save this. Thank you.

I will be sure to bug you, no worries.
 
Not exactly a request, buuuut I might need you reteach me all BBcodes again. 😂 It has been awhile, though I am itching to play with it again.

LOL sure thing. I actually created a coding guide recently and it basically covers (almost) everything.

But if you want to know how to do something specific, you know how to reach me. :^)
Woah. Let me save this. Thank you. Looks super helpful.

And if I need any help, I will be sure to bug you, no worries.
 
  • Like
Reactions: Ardent
Shifu,

I cannot figure out where I have gone wrong. The picture just will not load:
Code:
[div=width:100px;height:100px;background:url(https://i.pinimg.com/originals/cf/6c/d9/cf6cd9d98856993cd814a78e8a1624b2.jpg);border-radius:50px;margin:auto;margin-top:5px;border-style:solid;border-color:rgb(20,26,35);border-width:5px;background-size:contain;][/div]
 

Attachments

  • Screenshot 2022-10-13 at 6.46.22 PM.png
    Screenshot 2022-10-13 at 6.46.22 PM.png
    52.4 KB · Views: 6


@Lisianthus

I didn't change a thing in your code. It seems to be working fine on my end?
 
This is the whole code:

Code:
Invisible Scroll
Click on the icons to change tabs.
Character Image comes after the tabs Div.

[div=display:none;]Alegreya Sans SC[/div]
[div=height:380px; overflow-y:hidden;][Div=transform:scaley(-1);][tabs=500][slide=1][div=transform:scaley(-1);][div=height:370px;background-color:rgb(20,26,35);margin:auto;padding:10px;margin-left:40px;border-radius:15px;][div=overflow:hidden;][div=overflow-y:auto;margin:10px;margin-left:50px;padding-right:59px;width:110%;height:340px;text-align:justify;line-height: 20pt;font-family: Alegreya Sans SC;]Name:
Age:
Pronoun:
Sexuality:
Nationality:

Appearance:
[/div][/div][/div]
[div=height:370px;width:110px;][div=height:310px;background-color:transparent;text-align:center;margin-top:-380px;margin-left:-15px;border-radius:50px 50px;][Div=font-size:45px;line-height:46pt;]{tab=1}[COLOR=white][fa]fa-info-circle[/fa][/COLOR]{/tab}
{tab=2}[COLOR=lightgrey][fa]fa-user[/Fa][/COLOR]{/tab}
{tab=3}[COLOR=lightgrey][fa]fa-globe-asia[/fa][/COLOR]{/tab}
{tab=4}[COLOR=lightgrey][fa]fa-sticky-note[/fa][/COLOR]{/tab}[/div] [div=width:100px;height:100px;background:url(https://cdn.discordapp.com/attachments/738728416051855390/752005814755131402/original.jpg);border-radius:50px;margin:auto;margin-top:5px;border-style:solid;border-color:rgb(20,26,35);border-width:5px;background-size:contain;][/div][/div][/div]
[/div][/slide]
[slide=2][div=transform:scaley(-1);][div=height:370px;background-color:rgb(20,26,35);margin:auto;padding:10px;margin-left:40px;border-radius:15px;][div=overflow:hidden;][div=overflow-y:auto;margin:10px;margin-left:50px;padding-right:59px;width:110%;height:340px;text-align:justify;font-family: Alegreya Sans SC;]Personality:

Habits:

Likes:

Dislikes:

[/div][/div][/div]
[div=height:370px;width:110px;][div=height:310px;background-color:transparent;text-align:center;margin-top:-380px;margin-left:-15px;border-radius:50px 50px;][Div=font-size:45px;line-height:46pt;]{tab=1}[COLOR=lightgrey][fa]fa-info-circle[/fa][/COLOR]{/tab}
{tab=2}[COLOR=white][fa]fa-user[/Fa][/COLOR]{/tab}
{tab=3}[COLOR=lightgrey][fa]fa-globe-asia[/fa][/COLOR]{/tab}
{tab=4}[COLOR=lightgrey][fa]fa-sticky-note[/fa][/COLOR]{/tab}[/div] [div=width:100px;height:100px;background:url(https://cdn.discordapp.com/attachments/738728416051855390/752005814755131402/original.jpg);border-radius:50px;margin:auto;margin-top:5px;border-style:solid;border-color:rgb(20,26,35);border-width:5px;background-size:contain;][/div][/div][/div]
[/div][/slide]
[slide=3][div=transform:scaley(-1);][div=height:370px;background-color:rgb(20,26,35);margin:auto;padding:10px;margin-left:40px;border-radius:15px;][div=overflow:hidden;][div=overflow-y:auto;margin:10px;margin-left:50px;padding-right:59px;width:110%;height:340px;text-align:justify;font-family: Alegreya Sans SC;]Physical Skills

Magical Abilities

Background

[/div][/div][/div]
[div=height:370px;width:110px;][div=height:310px;background-color:transparent;text-align:center;margin-top:-380px;margin-left:-15px;border-radius:50px 50px;][Div=font-size:45px;line-height:46pt;]{tab=1}[COLOR=lightgrey][fa]fa-info-circle[/fa][/COLOR]{/tab}
{tab=2}[COLOR=lightgrey][fa]fa-user[/Fa][/COLOR]{/tab}
{tab=3}[COLOR=white][fa]fa-globe-asia[/fa][/COLOR]{/tab}
{tab=4}[COLOR=lightgrey][fa]fa-sticky-note[/fa][/COLOR]{/tab}[/div] [div=width:100px;height:100px;background:url(https://cdn.discordapp.com/attachments/738728416051855390/752005814755131402/original.jpg);border-radius:50px;margin:auto;margin-top:5px;border-style:solid;border-color:rgb(20,26,35);border-width:5px;background-size:contain;][/div][/div][/div]
[/div][/slide]
[slide=1][div=transform:scaley(-1);][div=height:370px;background-color:rgb(20,26,35);margin:auto;padding:10px;margin-left:40px;border-radius:15px;][div=overflow:hidden;][div=overflow-y:auto;margin:10px;margin-left:50px;padding-right:59px;width:110%;height:340px;text-align:justify;font-family: Alegreya Sans SC;]Relationships and what not. Can delete if not in use.


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi quis hendrerit dolor magna eget. Sed blandit libero volutpat sed cras ornare arcu dui. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Amet consectetur adipiscing elit duis tristique sollicitudin nibh. Malesuada fames ac turpis egestas integer eget. Nunc lobortis mattis aliquam faucibus purus in massa tempor nec. Sapien eget mi proin sed libero enim sed. Malesuada fames ac turpis egestas integer eget. In metus vulputate eu scelerisque felis imperdiet. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Lacinia at quis risus sed vulputate odio ut.

Consectetur a erat nam at. Pharetra convallis posuere morbi leo urna molestie at. Lacus sed viverra tellus in. Porta nibh venenatis cras sed felis eget velit. Facilisis gravida neque convallis a cras semper. Elementum nibh tellus molestie nunc non blandit. Etiam sit amet nisl purus in mollis nunc sed. Faucibus a pellentesque sit amet porttitor eget dolor morbi non. Mauris sit amet massa vitae tortor condimentum lacinia quis vel. Pharetra convallis posuere morbi leo. Porta non pulvinar neque laoreet. Tellus id interdum velit laoreet id donec ultrices tincidunt. Urna neque viverra justo nec. Est placerat in egestas erat imperdiet sed euismod. Vulputate ut pharetra sit amet aliquam id diam maecenas ultricies. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Consectetur libero id faucibus nisl tincidunt.

Turpis egestas sed tempus urna et pharetra pharetra massa. Purus in massa tempor nec feugiat nisl pretium fusce. Arcu dui vivamus arcu felis bibendum ut. Sagittis vitae et leo duis ut diam. Turpis egestas maecenas pharetra convallis posuere morbi. Malesuada proin libero nunc consequat interdum varius. Euismod quis viverra nibh cras pulvinar. Nascetur ridiculus mus mauris vitae. Sit amet purus gravida quis blandit turpis cursus in. Neque sodales ut etiam sit amet nisl purus in mollis. Ut placerat orci nulla pellentesque dignissim enim sit. Vitae purus faucibus ornare suspendisse sed nisi lacus sed. Nunc sed augue lacus viverra. Non diam phasellus vestibulum lorem sed.

Aenean vel elit scelerisque mauris. In massa tempor nec feugiat. Hac habitasse platea dictumst vestibulum rhoncus. Id diam maecenas ultricies mi eget mauris pharetra et ultrices. Sit amet dictum sit amet justo donec enim. Risus nullam eget felis eget. Risus nec feugiat in fermentum posuere urna nec. Eu ultrices vitae auctor eu augue ut lectus. Pellentesque adipiscing commodo elit at. At risus viverra adipiscing at in. Leo urna molestie at elementum eu facilisis sed. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Dignissim cras tincidunt lobortis feugiat. Ut eu sem integer vitae justo eget magna fermentum. Ac felis donec et odio pellentesque diam volutpat commodo sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Lacus luctus accumsan tortor posuere. Ornare arcu dui vivamus arcu. In dictum non consectetur a erat nam at lectus.

Pulvinar pellentesque habitant morbi tristique senectus et netus. Id venenatis a condimentum vitae. Ullamcorper malesuada proin libero nunc consequat interdum varius sit amet. Lorem sed risus ultricies tristique nulla aliquet enim. Turpis egestas pretium aenean pharetra. Justo eget magna fermentum iaculis eu non diam phasellus vestibulum. Dolor morbi non arcu risus quis varius quam. Sem et tortor consequat id porta nibh. Sed risus ultricies tristique nulla. Orci ac auctor augue mauris augue neque gravida in fermentum. Aliquet bibendum enim facilisis gravida neque convallis a cras. Dui vivamus arcu felis bibendum ut tristique. Proin nibh nisl condimentum id venenatis a condimentum vitae. Maecenas ultricies mi eget mauris pharetra. Leo duis ut diam quam nulla porttitor massa id neque. Vel quam elementum pulvinar etiam. Ac turpis egestas integer eget. In nibh mauris cursus mattis molestie a iaculis at erat. Odio morbi quis commodo odio. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras.[/div][/div][/div]
[div=height:370px;width:110px;][div=height:310px;background-color:transparent;text-align:center;margin-top:-380px;margin-left:-15px;border-radius:50px 50px;][Div=font-size:45px;line-height:46pt;]{tab=1}[COLOR=lightgrey][fa]fa-info-circle[/fa][/COLOR]{/tab}
{tab=2}[COLOR=lightgrey][fa]fa-user[/Fa][/COLOR]{/tab}
{tab=3}[COLOR=lightgrey][fa]fa-globe-asia[/fa][/COLOR]{/tab}
{tab=4}[COLOR=white][fa]fa-sticky-note[/fa][/COLOR]{/tab}[/div] [div=width:100px;height:100px;background:url(https://i.pinimg.com/originals/cf/6c/d9/cf6cd9d98856993cd814a78e8a1624b2.jpg);border-radius:50px;margin:auto;margin-top:5px;border-style:solid;border-color:rgb(20,26,35);border-width:5px;background-size:contain;][/div][/div][/div]
[/div][/slide]


[/tabs][/div][/div]
 
Ahh, it's because you were using the discord link, which doesn't work.

Code:
[div=display:none;]Alegreya Sans SC[/div]
[div=height:380px; overflow-y:hidden;][Div=transform:scaley(-1);][tabs=500][slide=1][div=transform:scaley(-1);][div=height:370px;background-color:rgb(20,26,35);margin:auto;padding:10px;margin-left:40px;border-radius:15px;][div=overflow:hidden;][div=overflow-y:auto;margin:10px;margin-left:50px;padding-right:59px;width:110%;height:340px;text-align:justify;line-height: 20pt;font-family: Alegreya Sans SC;]Name:
Age:
Pronoun:
Sexuality:
Nationality:

Appearance:
[/div][/div][/div]
[div=height:370px;width:110px;][div=height:310px;background-color:transparent;text-align:center;margin-top:-380px;margin-left:-15px;border-radius:50px 50px;][Div=font-size:45px;line-height:46pt;]{tab=1}[COLOR=white][fa]fa-info-circle[/fa][/COLOR]{/tab}
{tab=2}[COLOR=lightgrey][fa]fa-user[/Fa][/COLOR]{/tab}
{tab=3}[COLOR=lightgrey][fa]fa-globe-asia[/fa][/COLOR]{/tab}
{tab=4}[COLOR=lightgrey][fa]fa-sticky-note[/fa][/COLOR]{/tab}[/div] [div=width:100px;height:100px;background:url(https://i.pinimg.com/originals/cf/6c/d9/cf6cd9d98856993cd814a78e8a1624b2.jpg);border-radius:50px;margin:auto;margin-top:5px;border-style:solid;border-color:rgb(20,26,35);border-width:5px;background-size:contain;][/div][/div][/div]
[/div][/slide]
[slide=2][div=transform:scaley(-1);][div=height:370px;background-color:rgb(20,26,35);margin:auto;padding:10px;margin-left:40px;border-radius:15px;][div=overflow:hidden;][div=overflow-y:auto;margin:10px;margin-left:50px;padding-right:59px;width:110%;height:340px;text-align:justify;font-family: Alegreya Sans SC;]Personality:

Habits:

Likes:

Dislikes:

[/div][/div][/div]
[div=height:370px;width:110px;][div=height:310px;background-color:transparent;text-align:center;margin-top:-380px;margin-left:-15px;border-radius:50px 50px;][Div=font-size:45px;line-height:46pt;]{tab=1}[COLOR=lightgrey][fa]fa-info-circle[/fa][/COLOR]{/tab}
{tab=2}[COLOR=white][fa]fa-user[/Fa][/COLOR]{/tab}
{tab=3}[COLOR=lightgrey][fa]fa-globe-asia[/fa][/COLOR]{/tab}
{tab=4}[COLOR=lightgrey][fa]fa-sticky-note[/fa][/COLOR]{/tab}[/div] [div=width:100px;height:100px;background:url(https://i.pinimg.com/originals/cf/6c/d9/cf6cd9d98856993cd814a78e8a1624b2.jpg);border-radius:50px;margin:auto;margin-top:5px;border-style:solid;border-color:rgb(20,26,35);border-width:5px;background-size:contain;][/div][/div][/div]
[/div][/slide]
[slide=3][div=transform:scaley(-1);][div=height:370px;background-color:rgb(20,26,35);margin:auto;padding:10px;margin-left:40px;border-radius:15px;][div=overflow:hidden;][div=overflow-y:auto;margin:10px;margin-left:50px;padding-right:59px;width:110%;height:340px;text-align:justify;font-family: Alegreya Sans SC;]Physical Skills

Magical Abilities

Background

[/div][/div][/div]
[div=height:370px;width:110px;][div=height:310px;background-color:transparent;text-align:center;margin-top:-380px;margin-left:-15px;border-radius:50px 50px;][Div=font-size:45px;line-height:46pt;]{tab=1}[COLOR=lightgrey][fa]fa-info-circle[/fa][/COLOR]{/tab}
{tab=2}[COLOR=lightgrey][fa]fa-user[/Fa][/COLOR]{/tab}
{tab=3}[COLOR=white][fa]fa-globe-asia[/fa][/COLOR]{/tab}
{tab=4}[COLOR=lightgrey][fa]fa-sticky-note[/fa][/COLOR]{/tab}[/div] [div=width:100px;height:100px;background:url(https://i.pinimg.com/originals/cf/6c/d9/cf6cd9d98856993cd814a78e8a1624b2.jpg);border-radius:50px;margin:auto;margin-top:5px;border-style:solid;border-color:rgb(20,26,35);border-width:5px;background-size:contain;][/div][/div][/div]
[/div][/slide]
[slide=1][div=transform:scaley(-1);][div=height:370px;background-color:rgb(20,26,35);margin:auto;padding:10px;margin-left:40px;border-radius:15px;][div=overflow:hidden;][div=overflow-y:auto;margin:10px;margin-left:50px;padding-right:59px;width:110%;height:340px;text-align:justify;font-family: Alegreya Sans SC;]Relationships and what not. Can delete if not in use.


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi quis hendrerit dolor magna eget. Sed blandit libero volutpat sed cras ornare arcu dui. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Amet consectetur adipiscing elit duis tristique sollicitudin nibh. Malesuada fames ac turpis egestas integer eget. Nunc lobortis mattis aliquam faucibus purus in massa tempor nec. Sapien eget mi proin sed libero enim sed. Malesuada fames ac turpis egestas integer eget. In metus vulputate eu scelerisque felis imperdiet. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Lacinia at quis risus sed vulputate odio ut.

Consectetur a erat nam at. Pharetra convallis posuere morbi leo urna molestie at. Lacus sed viverra tellus in. Porta nibh venenatis cras sed felis eget velit. Facilisis gravida neque convallis a cras semper. Elementum nibh tellus molestie nunc non blandit. Etiam sit amet nisl purus in mollis nunc sed. Faucibus a pellentesque sit amet porttitor eget dolor morbi non. Mauris sit amet massa vitae tortor condimentum lacinia quis vel. Pharetra convallis posuere morbi leo. Porta non pulvinar neque laoreet. Tellus id interdum velit laoreet id donec ultrices tincidunt. Urna neque viverra justo nec. Est placerat in egestas erat imperdiet sed euismod. Vulputate ut pharetra sit amet aliquam id diam maecenas ultricies. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Consectetur libero id faucibus nisl tincidunt.

Turpis egestas sed tempus urna et pharetra pharetra massa. Purus in massa tempor nec feugiat nisl pretium fusce. Arcu dui vivamus arcu felis bibendum ut. Sagittis vitae et leo duis ut diam. Turpis egestas maecenas pharetra convallis posuere morbi. Malesuada proin libero nunc consequat interdum varius. Euismod quis viverra nibh cras pulvinar. Nascetur ridiculus mus mauris vitae. Sit amet purus gravida quis blandit turpis cursus in. Neque sodales ut etiam sit amet nisl purus in mollis. Ut placerat orci nulla pellentesque dignissim enim sit. Vitae purus faucibus ornare suspendisse sed nisi lacus sed. Nunc sed augue lacus viverra. Non diam phasellus vestibulum lorem sed.

Aenean vel elit scelerisque mauris. In massa tempor nec feugiat. Hac habitasse platea dictumst vestibulum rhoncus. Id diam maecenas ultricies mi eget mauris pharetra et ultrices. Sit amet dictum sit amet justo donec enim. Risus nullam eget felis eget. Risus nec feugiat in fermentum posuere urna nec. Eu ultrices vitae auctor eu augue ut lectus. Pellentesque adipiscing commodo elit at. At risus viverra adipiscing at in. Leo urna molestie at elementum eu facilisis sed. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Dignissim cras tincidunt lobortis feugiat. Ut eu sem integer vitae justo eget magna fermentum. Ac felis donec et odio pellentesque diam volutpat commodo sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Lacus luctus accumsan tortor posuere. Ornare arcu dui vivamus arcu. In dictum non consectetur a erat nam at lectus.

Pulvinar pellentesque habitant morbi tristique senectus et netus. Id venenatis a condimentum vitae. Ullamcorper malesuada proin libero nunc consequat interdum varius sit amet. Lorem sed risus ultricies tristique nulla aliquet enim. Turpis egestas pretium aenean pharetra. Justo eget magna fermentum iaculis eu non diam phasellus vestibulum. Dolor morbi non arcu risus quis varius quam. Sem et tortor consequat id porta nibh. Sed risus ultricies tristique nulla. Orci ac auctor augue mauris augue neque gravida in fermentum. Aliquet bibendum enim facilisis gravida neque convallis a cras. Dui vivamus arcu felis bibendum ut tristique. Proin nibh nisl condimentum id venenatis a condimentum vitae. Maecenas ultricies mi eget mauris pharetra. Leo duis ut diam quam nulla porttitor massa id neque. Vel quam elementum pulvinar etiam. Ac turpis egestas integer eget. In nibh mauris cursus mattis molestie a iaculis at erat. Odio morbi quis commodo odio. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras.[/div][/div][/div]
[div=height:370px;width:110px;][div=height:310px;background-color:transparent;text-align:center;margin-top:-380px;margin-left:-15px;border-radius:50px 50px;][Div=font-size:45px;line-height:46pt;]{tab=1}[COLOR=lightgrey][fa]fa-info-circle[/fa][/COLOR]{/tab}
{tab=2}[COLOR=lightgrey][fa]fa-user[/Fa][/COLOR]{/tab}
{tab=3}[COLOR=lightgrey][fa]fa-globe-asia[/fa][/COLOR]{/tab}
{tab=4}[COLOR=white][fa]fa-sticky-note[/fa][/COLOR]{/tab}[/div] [div=width:100px;height:100px;background:url(https://i.pinimg.com/originals/cf/6c/d9/cf6cd9d98856993cd814a78e8a1624b2.jpg);border-radius:50px;margin:auto;margin-top:5px;border-style:solid;border-color:rgb(20,26,35);border-width:5px;background-size:contain;][/div][/div][/div]
[/div][/slide]


[/tabs][/div][/div]
 
Hi,

I need your help again.

This part of the code is not working:
Code:
[div=
flex:3;/*RED BOX*/][div=
width:380px;
height:380px;
background:red;][/div][/div]

It does not work unless I do this, which destroys the flexbox. But it refuses to flex as it is.
Code:
[div=
flex:3;/*RED BOX*/][div=
width:380px;
height:380px;
background:red;
left:140px;
top:-385px;][/div][/div]

This is the whole code:
Code:
[div=
width:700px;
margin:auto;][div=
min-width:200px ! important;][div=
background:rgb( 221, 221, 221);
padding:50px;
border-radius:30px 30px 30px 30px;/*GREY BOX*/][div=
width:550px;
height:400px;
margin:auto;
background:blue;
overflow:hidden;][div=
width:550px;
height:440px;
margin:auto;
background: green;
margin-top:-40px;][TABS=550]
{slide=1}[div=
display:flex;
flex-wrap:wrap;
gap:5px;][div=
flex:1;][div=
width:100px;
height:380px;
border:solid blue;][div=
display: flex;
flex-direction: column;
height: 380px;
background:white;][div=
flex: 1;
display: flex;
justify-content: center;
background-color:grey;
border-radius:5px 5px 0px 0px;
align-items: center;]tab 1[/div][div=
flex: 1;
display: flex;
justify-content: center;
align-items: center;]{tab=2}tab 2{/tab}[/div][div=
flex: 1;
display: flex;
justify-content: center;
align-items: center;]{tab=3}tab 3{/tab}[/div][div=
flex: 1;
display: flex;
justify-content: center;
align-items: center;]{tab=4}tab 4{/tab}[/div][/div][/div][/div][div=
flex:3;/*RED BOX*/][div=
width:380px;
height:380px;
background:red;
left:140px;
top:-385px;][/div][/div][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}[/TABS][/div][/div][/div][/div][/div]
 
@Lisianthus

Code:
[div=
width:700px;
margin:auto;][div=
min-width:200px ! important;][div=
background:rgb( 221, 221, 221);
padding:50px;
border-radius:30px 30px 30px 30px;/*GREY BOX*/][div=
width:550px;
height:400px;
margin:auto;
background:blue;
overflow:hidden;][div=
width:550px;
height:440px;
margin:auto;
background: green;
margin-top:-40px;][TABS=550]
{slide=1}[div=
display:flex;
flex-wrap:wrap;
gap:5px;][div=
flex:1;][div=
width:100px;
height:380px;
border:solid blue;][div=
display: flex;
flex-direction: column;
height: 380px;
background:white;][div=
flex: 1;
display: flex;
justify-content: center;
background-color:grey;
border-radius:5px 5px 0px 0px;
align-items: center;]tab 1[/div][div=
flex: 1;
display: flex;
justify-content: center;
align-items: center;]{tab=2}tab 2{/tab}[/div][div=
flex: 1;
display: flex;
justify-content: center;
align-items: center;]{tab=3}tab 3{/tab}[/div][div=
flex: 1;
display: flex;
justify-content: center;
align-items: center;]{tab=4}tab 4{/tab}[/div][/div][/div][/div][div=
flex:3;
background: red;/*RED BOX*/][/div][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}[/TABS][/div][/div][/div][/div][/div]
 
  • Love
Reactions: Lisianthus
Hi, I need a little help with tweaking the colour of the tabs from green to purple, but I can't find the code that affects the colours.

Code:
[div=display: block;
margin:auto;
border-radius: 15px 15px 0px 0px;
background-color: #161616;
width: 80%;
padding: 10px;][div=display: flex;
flex-direction: row;][div=display: block;
width:10%;][div=width:30px;
height:17px;
overflow:hidden;
display: block;
margin: auto;][div=opacity: 0.0;
z-index:1;
height:11px;][MEDIA=youtube]4WVNJexkf_c[/MEDIA][/div][div=top: -15px;
z-index:2;
pointer-events:none;
opacity: 0.99;][FA]fa-play[/FA] [FA]fa-pause[/FA] [/div][/div][/div][div=margin: auto;
font-family: Marcellus;
font-size 13px;
top: -5px;]And I know this isn't like me, I just want people to like me [/div][/div][div=display: flex;
flex-direction: row;][div=flex: 1;
background-color: #ffffff;
color: #333333;
height: 600px;
text-align: center;][div=background-image: url(https://i.imgur.com/6VzsfDL.jpg);
height: 120px;
background-size: cover;][/div][div=background-image: url(https://i.imgur.com/3J7E9q0.jpg); border-radius: 100%;
margin: auto;
margin-top: -55px;
background-size: cover;
border: 2px solid #ffffff;
 height: 120px;
width: 120px;][/div][div=padding: 5px;
font-size: 9px;
text-transform: uppercase;
font-family: Arial;
letter-spacing: 1px;
height: 400px;]
[div=margin-top: 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 2px;]sybil[/div]
[div=margin-top: 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 2px;]female[/div]
[div=margin-top: 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 2px;]13th august[/div]
[div=margin-top: 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 2px;]twenty[/div]
[div=margin-top: 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 2px;]bisexual[/div]
[div=margin-top: 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 2px;]sommelier/student[/div]
[div=margin-top: 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 2px;]daughter of dionysus[/div][div=font-size:
6px; letter-spacing: 4px;
color: #c4c4c4;
font-family: Marcellus;
margin-top: 25px;]code by MaryGold, heavily inspired by winnie[/div][/div][/div][div=flex: 2;
padding: 20px;
background-color: #efefef;
height: 600px;
color: #333333;]
[TABS=500]
[SLIDE=1]
[div=margin: auto;
display: flex;
flex-direction: row;]
[div=display: block;
background: black;
opacity: 0.8;
border: 1px solid black;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=1}[fa]fa-glass[/fa]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=2}[fa]fa-ring[/fa]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=3}[fa]fa-mask[/fa]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=4}[fa]fa-fire[/fa]{/tab}
[/div]
[/div]
[div="display: block;
background-color: #ffffff;
opacity: 0.7;
margin: auto;
border: 2px;
border-radius: 2px;
border-style: double;
border-color: #514E4D;
text-align: justify;
color: #000;
font-size: 12px;
padding: 15px;
width: 450px;
height: 400px;
overflow: auto;"]Full Name: Sybil Tang/Tang Xiu Jiu (唐秀久)

Gender: Cisgender Female

Date of Birth: 13th August (Leo)

Age: 20

Ethnicity/Race: Chinese

Sexuality: Bisexual

Occupation: Sommelier

Godly Parent: Dionysus
[/div]
[/SLIDE]

[SLIDE=2]
[div=margin: auto;
display: flex;
flex-direction: row;]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
 height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=1}[fa]fa-glass[/fa]{/tab}
[/div]
[div=display: block;
background: black;
opacity: 0.8;
border: 1px solid black;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=2}[fa]fa-ring[/fa]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
 margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=3}[fa]fa-mask[/fa]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=4}[fa]fa-fire[/fa]{/tab}
[/div]
[/div]
[div="display: block;
background-color: #ffffff;
opacity: 0.7;
margin: auto;
border: 2px;
border-radius: 2px;
border-style: double;
border-color: #514E4D;
text-align: justify;
color: #000;
font-size: 12px;
padding: 15px;
width: 450px;
height: 400px;
overflow: auto;"]HEIGHT:
168cm or 5'6ft

WEIGHT:
62kg or 137lbs

NATURAL HAIR COLOUR:
Black

EYE COLOUR:
Black, with a hint of purple in the light

APPEARANCE:
Due to her training at the gym, Sybil has a lean body, with waist length ebony hair. Usually tied half up-half down, she prefers to use a golden hair pin over rubber bands. When she rolls up her sleeves, a tiger tattoo can be seen on her forearm, a memento to her cat. Hidden on her lower back is another tattoo, of a snake. The serpent is another memento, this one of her pet snake.

PREFERRED ATTIRE:
For work, Sybil prefers to wear a clean, black, long sleeved shirt and matching slacks, accompanied by a pair of ever-changing cufflinks.

For daily wear, Sybil enjoys wearing flowy blouses with long pants or skirts. She likes wearing low heeled boots, and has a small collection of footwear.

When Sybil goes out to parties, she likes to wear crop tops to show off her tattoos. However, she refuses to wear short skirts, adamantly wearing her long pants and the occasional mid-length skirt.
[/div]
[/SLIDE]

[SLIDE=3]
[div=margin: auto;
display: flex;
flex-direction: row;]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
 height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=1}[fa]fa-glass[/fa]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=2}[fa]fa-ring[/fa]{/tab}
[/div]
[div=display: block;
background: black;
opacity: 0.8;
 border: 1px solid black;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=3}[fa]fa-mask[/fa]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
 border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=4}[fa]fa-fire[/fa]{/tab}
[/div]
[/div]
[div="display: block;
 background-color: #ffffff;
opacity: 0.7;
margin: auto;
border: 2px;
border-radius: 2px;
border-style: double;
border-color: #514E4D;
text-align: justify;
color: #000;
font-size: 12px;
padding: 15px;
width: 450px;
height: 400px;
overflow: auto;"]LIKES:
[LIST]
[*]Loud places
[*]Snakes
[*]Cats
[*]Boxing
[*]Hugs
[*]Gold
[/LIST]

DISLIKES:
[LIST]
[*]Dark places
[*]Quiet places
[*]Dogs
[*]Being left out
[/LIST]

CHARACTER TRAITS:
Growing up mostly alone, Sybil loves being around people. She hops around from college party to college party in her free time, livening up parties with her little fire tricks. (Wasted college students don't ask why your eyes glow purple or how you make fire)

Despite her outgoing persona, Sybil has few real friends she hangs out with, opting to stay acquaintances with everyone she meets. The people she would consider herself closest to are the small group of students in the university's theatre group.

Occasionally popping by to play an extra or two, Sybil enjoys taking to the stage. She loves playing crazed characters, finding catharsis in acting out a character's pain and suffering.
[/div]
[/SLIDE]

[SLIDE=4]
[div=margin: auto;
display: flex;
flex-direction: row;]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=1}[fa]fa-glass[/fa]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=2}[fa]fa-ring[/fa]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=3}[fa]fa-mask[/fa]{/tab}
[/div]
[div=display: block;
background: black;
opacity: 0.8;
border: 1px solid black;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=4}[fa]fa-fire[/fa]{/tab}
[/div]
[/div]
[div="display: block;
background-color: #ffffff;
opacity: 0.7;
margin: auto;
border: 2px;
border-radius: 2px;
border-style: double;
border-color: #514E4D;
text-align: justify;
color: #000;
font-size: 12px;
padding: 15px;
width: 450px;
height: 400px;
overflow: auto;"]POWERS:
[LIST]
[*]Teleportation
[*]Pyrokinesis
[*]Alcohol Transformation
[/LIST]

PREFERRED WEAPON:
Knuckles

BACKSTORY (WIP):
Born from a one night stand, Sybil was often neglected and treated coldly by her mother. Treated as the byproduct of a shameful affair, Sybil grew up being hidden from guests and relatives. Even Sybil's grandparents refused to acknowledge her existence, and Sybil was forced to spend most of her early childhood in solitude.

The first power she awakened was pyrokinesis. When Sybil was 5, the power in her house suddenly went out and Sybil was trapped in the darkness. In a fit of fear, Sybil summoned a small purple flame. From then on, Sybil would summon the flame whenever she felt lonely, giving it the name "Flemby".

Seeking companionship, Sybil spent a lot of time in the recesses of her mind, making imaginary friends for she had none. By the time Sybil was able to attend elementary school, she had little to no social skills, and was bullied by her classmates. Due to her poor reading ability, she was largely ignored by her teachers as well.

When Sybil finally learned to fight back, she felt a great catharsis. Unable to control her urges as a child, she began to roughhouse the other children who used to bully her. However, with her demigod strength, this eventually lead to her breaking another child's arm in Grade 6. Her mother was called to school, and Sybil's mother ended up moving the two of them to another state so she could attend middle school.

Through middle and high school, Sybil's mother forced Sybil to take up boxing to manage her urges. Finding an unexpected talent in fighting, Sybil managed to obtain a scholarship for boxing. Getting addicted to the fighting high, Sybil became infamous in the high school boxing division.

Sybil discovered her powers of teleportation and levitation near the end of high school. In the middle of the night, Sybil felt a strong urge to go somewhere, so she thought of the high school boxing room, her favourite place in the school. She ended up teleporting right outside the gates to the school. Incredibly confused about what had happened, Sybil realised the gates were locked and there was no way she could get inside anyway. So, she just turned tail and headed home.

Not wanting to let her mother know she left, Sybil began to climb up to her room on the second floor. As she was about to enter her room, she slipped and fell off the ledge. Panicking, Sybil thought she would hit the ground. When she opened her eyes, she realised she was floating. Awkwardly controlling her levitation, she managed to get into her room unnoticed.

By the time she reached college, the high from boxing was no longer enough for Sybil. When one of her friends took her to a party, Sybil tried alcohol and enjoyed the brief high. Wanting to re-experience the same high, Sybil began hunting for stronger alcohols. This backfired, and she just ended up incredibly dissatisfied. However, Sybil still enjoyed the stimulation of the flashing lights and loud music, so she continued to hop around parties.

She realised her last power in one of these parties. After downing multiple shots of hard vodka, Sybil's friend offered her a glass of water. When she drank the bland water, Sybil wished it had more alcohol. This turned the water into wine, surprising Sybil. And though it tasted rancid to her ("like dish cleaner"), her friend who drank it thought it was the best wine they had ever drank. Although Sybil passed it off as a party trick, she began to connect the dots between her powers.

That spring break, Sybil confronted her mother, and her mother revealed Sybil's less-than-mortal origins. But Sybil's mother didn't know who her godly parent was, so Sybil was left with more questions than she had started out with.

After spring break, Sybil moved away from her mother. Acquiring a small apartment, Sybil began her job as a sommelier, while selling wine to college students on the side.

One day, she found a tabby cat near her apartment. Although initially hostile, the cat began to warm up to Sybil. The cat eventually became so comfortable with Sybil it moved into her house. When she brought the cat to the vet, she found out it was actually a toyger, an exotic cat breed. The cat was probably abandoned by its previous owner, and made its way down to Sybil's district, which was two streets down from a high-end district. She decided to name the cat "Dolce", after the red wine Dolcetto

After raising Jade for a few months, Sybil got an unexpected pet. When Sybil returned home one winter day, she found a wounded snake in the middle of her living room. The young serpent had been brought in as prey by Jade, and Sybil quickly rushed the injured snake to the vet. After getting treated, Sybil bought a few essentials to raise a snake. By the time the snake had finished healing, Sybil had grown attached to the young copperhead and decided to name it "Mal", after the white wine Malvasia.

[CENTER]WHY ARE YOU HERE?
When Sybil read the letter, her first feeling was relief. Relief that she wasn't abnormal.
A freak.
Although she spent her time surrounded by people, Sybil never felt like she belonged.
She decided to go to this facility, in the hopes of finding companionship, and maybe even a home.[/CENTER]
[/div]
[/SLIDE]
[/TABS]
[div=background:url(https://i.imgur.com/WeiOoZK.jpg);[/SIZE][/div][div=background:url(https://i.imgur.com/WeiOoZK.jpg);
 background-size: cover;
 background-position: center;
 width: 100%;
 height: 60px;
 z-index:1;
 top:-605px;
 opacity: 0.;
 padding: 10px;
 text-align: center;
 font-family: Marcellus;
 text-transform: uppercase;
 color: white;
 font-size: 30px;
 white;
text-shadow: 2px 2px 2px grey; ]Sybil[/div]
[/div]
[/div]
[/div]
 
Last edited:
@Jumping Fish

The only way to override the default green color of hyperlinks to use the [COLOR][/COLOR] tag. This must be placed within the URL tags, or else the default color will not be overridden.

The tabs use the following FontAwesome icons: glass, ring, mask, and fire. On desktop, you can use the find command (CTRL + F on windows, CMD + F on mac) to search for the keywords. You can then nest the [COLOR][/COLOR] tag inside of the {tab}{/tab} tag.

Example:

[URL='www.google.com'][COLOR=red]TEST[/COLOR][/URL]

will give you:

TEST

Code:
[div=display: block;
margin:auto;
border-radius: 15px 15px 0px 0px;
background-color: #161616;
width: 80%;
padding: 10px;][div=display: flex;
flex-direction: row;][div=display: block;
width:10%;][div=width:30px;
height:17px;
overflow:hidden;
display: block;
margin: auto;][div=opacity: 0.0;
z-index:1;
height:11px;][MEDIA=youtube]4WVNJexkf_c[/MEDIA][/div][div=top: -15px;
z-index:2;
pointer-events:none;
opacity: 0.99;][FA]fa-play[/FA] [FA]fa-pause[/FA] [/div][/div][/div][div=margin: auto;
font-family: Marcellus;
font-size 13px;
top: -5px;]And I know this isn't like me, I just want people to like me [/div][/div][div=display: flex;
flex-direction: row;][div=flex: 1;
background-color: #ffffff;
color: #333333;
height: 600px;
text-align: center;][div=background-image: url(https://i.imgur.com/6VzsfDL.jpg);
height: 120px;
background-size: cover;][/div][div=background-image: url(https://i.imgur.com/3J7E9q0.jpg); border-radius: 100%;
margin: auto;
margin-top: -55px;
background-size: cover;
border: 2px solid #ffffff;
 height: 120px;
width: 120px;][/div][div=padding: 5px;
font-size: 9px;
text-transform: uppercase;
font-family: Arial;
letter-spacing: 1px;
height: 400px;]
[div=margin-top: 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 2px;]sybil[/div]
[div=margin-top: 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 2px;]female[/div]
[div=margin-top: 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 2px;]13th august[/div]
[div=margin-top: 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 2px;]twenty[/div]
[div=margin-top: 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 2px;]bisexual[/div]
[div=margin-top: 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 2px;]sommelier/student[/div]
[div=margin-top: 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 2px;]daughter of dionysus[/div][div=font-size:
6px; letter-spacing: 4px;
color: #c4c4c4;
font-family: Marcellus;
margin-top: 25px;]code by MaryGold, heavily inspired by winnie[/div][/div][/div][div=flex: 2;
padding: 20px;
background-color: #efefef;
height: 600px;
color: #333333;]
[TABS=500]
[SLIDE=1]
[div=margin: auto;
display: flex;
flex-direction: row;]
[div=display: block;
background: black;
opacity: 0.8;
border: 1px solid black;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=1}[COLOR=#7166ab][fa]fa-glass[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=2}[COLOR=#7166ab][fa]fa-ring[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=3}[COLOR=#7166ab][fa]fa-mask[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=4}[COLOR=#7166ab][fa]fa-fire[/fa][/COLOR]{/tab}
[/div]
[/div]
[div="display: block;
background-color: #ffffff;
opacity: 0.7;
margin: auto;
border: 2px;
border-radius: 2px;
border-style: double;
border-color: #514E4D;
text-align: justify;
color: #000;
font-size: 12px;
padding: 15px;
width: 450px;
height: 400px;
overflow: auto;"]Full Name: Sybil Tang/Tang Xiu Jiu (唐秀久)

Gender: Cisgender Female

Date of Birth: 13th August (Leo)

Age: 20

Ethnicity/Race: Chinese

Sexuality: Bisexual

Occupation: Sommelier

Godly Parent: Dionysus
[/div]
[/SLIDE]

[SLIDE=2]
[div=margin: auto;
display: flex;
flex-direction: row;]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
 height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=1}[COLOR=#7166ab][fa]fa-glass[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: black;
opacity: 0.8;
border: 1px solid black;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=2}[COLOR=#7166ab][fa]fa-ring[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
 margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=3}[COLOR=#7166ab][fa]fa-mask[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=4}[COLOR=#7166ab][fa]fa-fire[/fa][/COLOR]{/tab}
[/div]
[/div]
[div="display: block;
background-color: #ffffff;
opacity: 0.7;
margin: auto;
border: 2px;
border-radius: 2px;
border-style: double;
border-color: #514E4D;
text-align: justify;
color: #000;
font-size: 12px;
padding: 15px;
width: 450px;
height: 400px;
overflow: auto;"]HEIGHT:
168cm or 5'6ft

WEIGHT:
62kg or 137lbs

NATURAL HAIR COLOUR:
Black

EYE COLOUR:
Black, with a hint of purple in the light

APPEARANCE:
Due to her training at the gym, Sybil has a lean body, with waist length ebony hair. Usually tied half up-half down, she prefers to use a golden hair pin over rubber bands. When she rolls up her sleeves, a tiger tattoo can be seen on her forearm, a memento to her cat. Hidden on her lower back is another tattoo, of a snake. The serpent is another memento, this one of her pet snake.

PREFERRED ATTIRE:
For work, Sybil prefers to wear a clean, black, long sleeved shirt and matching slacks, accompanied by a pair of ever-changing cufflinks.

For daily wear, Sybil enjoys wearing flowy blouses with long pants or skirts. She likes wearing low heeled boots, and has a small collection of footwear.

When Sybil goes out to parties, she likes to wear crop tops to show off her tattoos. However, she refuses to wear short skirts, adamantly wearing her long pants and the occasional mid-length skirt.
[/div]
[/SLIDE]

[SLIDE=3]
[div=margin: auto;
display: flex;
flex-direction: row;]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
 height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=1}[COLOR=#7166ab][fa]fa-glass[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=2}[COLOR=#7166ab][fa]fa-ring[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: black;
opacity: 0.8;
 border: 1px solid black;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=3}[COLOR=#7166ab][fa]fa-mask[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
 border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=4}[COLOR=#7166ab][fa]fa-fire[/fa][/COLOR]{/tab}
[/div]
[/div]
[div="display: block;
 background-color: #ffffff;
opacity: 0.7;
margin: auto;
border: 2px;
border-radius: 2px;
border-style: double;
border-color: #514E4D;
text-align: justify;
color: #000;
font-size: 12px;
padding: 15px;
width: 450px;
height: 400px;
overflow: auto;"]LIKES:
[LIST]
[*]Loud places
[*]Snakes
[*]Cats
[*]Boxing
[*]Hugs
[*]Gold
[/LIST]

DISLIKES:
[LIST]
[*]Dark places
[*]Quiet places
[*]Dogs
[*]Being left out
[/LIST]

CHARACTER TRAITS:
Growing up mostly alone, Sybil loves being around people. She hops around from college party to college party in her free time, livening up parties with her little fire tricks. (Wasted college students don't ask why your eyes glow purple or how you make fire)

Despite her outgoing persona, Sybil has few real friends she hangs out with, opting to stay acquaintances with everyone she meets. The people she would consider herself closest to are the small group of students in the university's theatre group.

Occasionally popping by to play an extra or two, Sybil enjoys taking to the stage. She loves playing crazed characters, finding catharsis in acting out a character's pain and suffering.
[/div]
[/SLIDE]

[SLIDE=4]
[div=margin: auto;
display: flex;
flex-direction: row;]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=1}[COLOR=#7166ab][fa]fa-glass[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=2}[COLOR=#7166ab][fa]fa-ring[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=3}[COLOR=#7166ab][fa]fa-mask[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: black;
opacity: 0.8;
border: 1px solid black;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=4}[COLOR=#7166ab][fa]fa-fire[/fa][/COLOR]{/tab}
[/div]
[/div]
[div="display: block;
background-color: #ffffff;
opacity: 0.7;
margin: auto;
border: 2px;
border-radius: 2px;
border-style: double;
border-color: #514E4D;
text-align: justify;
color: #000;
font-size: 12px;
padding: 15px;
width: 450px;
height: 400px;
overflow: auto;"]POWERS:
[LIST]
[*]Teleportation
[*]Pyrokinesis
[*]Alcohol Transformation
[/LIST]

PREFERRED WEAPON:
Knuckles

BACKSTORY (WIP):
Born from a one night stand, Sybil was often neglected and treated coldly by her mother. Treated as the byproduct of a shameful affair, Sybil grew up being hidden from guests and relatives. Even Sybil's grandparents refused to acknowledge her existence, and Sybil was forced to spend most of her early childhood in solitude.

The first power she awakened was pyrokinesis. When Sybil was 5, the power in her house suddenly went out and Sybil was trapped in the darkness. In a fit of fear, Sybil summoned a small purple flame. From then on, Sybil would summon the flame whenever she felt lonely, giving it the name "Flemby".

Seeking companionship, Sybil spent a lot of time in the recesses of her mind, making imaginary friends for she had none. By the time Sybil was able to attend elementary school, she had little to no social skills, and was bullied by her classmates. Due to her poor reading ability, she was largely ignored by her teachers as well.

When Sybil finally learned to fight back, she felt a great catharsis. Unable to control her urges as a child, she began to roughhouse the other children who used to bully her. However, with her demigod strength, this eventually lead to her breaking another child's arm in Grade 6. Her mother was called to school, and Sybil's mother ended up moving the two of them to another state so she could attend middle school.

Through middle and high school, Sybil's mother forced Sybil to take up boxing to manage her urges. Finding an unexpected talent in fighting, Sybil managed to obtain a scholarship for boxing. Getting addicted to the fighting high, Sybil became infamous in the high school boxing division.

Sybil discovered her powers of teleportation and levitation near the end of high school. In the middle of the night, Sybil felt a strong urge to go somewhere, so she thought of the high school boxing room, her favourite place in the school. She ended up teleporting right outside the gates to the school. Incredibly confused about what had happened, Sybil realised the gates were locked and there was no way she could get inside anyway. So, she just turned tail and headed home.

Not wanting to let her mother know she left, Sybil began to climb up to her room on the second floor. As she was about to enter her room, she slipped and fell off the ledge. Panicking, Sybil thought she would hit the ground. When she opened her eyes, she realised she was floating. Awkwardly controlling her levitation, she managed to get into her room unnoticed.

By the time she reached college, the high from boxing was no longer enough for Sybil. When one of her friends took her to a party, Sybil tried alcohol and enjoyed the brief high. Wanting to re-experience the same high, Sybil began hunting for stronger alcohols. This backfired, and she just ended up incredibly dissatisfied. However, Sybil still enjoyed the stimulation of the flashing lights and loud music, so she continued to hop around parties.

She realised her last power in one of these parties. After downing multiple shots of hard vodka, Sybil's friend offered her a glass of water. When she drank the bland water, Sybil wished it had more alcohol. This turned the water into wine, surprising Sybil. And though it tasted rancid to her ("like dish cleaner"), her friend who drank it thought it was the best wine they had ever drank. Although Sybil passed it off as a party trick, she began to connect the dots between her powers.

That spring break, Sybil confronted her mother, and her mother revealed Sybil's less-than-mortal origins. But Sybil's mother didn't know who her godly parent was, so Sybil was left with more questions than she had started out with.

After spring break, Sybil moved away from her mother. Acquiring a small apartment, Sybil began her job as a sommelier, while selling wine to college students on the side.

One day, she found a tabby cat near her apartment. Although initially hostile, the cat began to warm up to Sybil. The cat eventually became so comfortable with Sybil it moved into her house. When she brought the cat to the vet, she found out it was actually a toyger, an exotic cat breed. The cat was probably abandoned by its previous owner, and made its way down to Sybil's district, which was two streets down from a high-end district. She decided to name the cat "Dolce", after the red wine Dolcetto

After raising Jade for a few months, Sybil got an unexpected pet. When Sybil returned home one winter day, she found a wounded snake in the middle of her living room. The young serpent had been brought in as prey by Jade, and Sybil quickly rushed the injured snake to the vet. After getting treated, Sybil bought a few essentials to raise a snake. By the time the snake had finished healing, Sybil had grown attached to the young copperhead and decided to name it "Mal", after the white wine Malvasia.

[CENTER]WHY ARE YOU HERE?
When Sybil read the letter, her first feeling was relief. Relief that she wasn't abnormal.
A freak.
Although she spent her time surrounded by people, Sybil never felt like she belonged.
She decided to go to this facility, in the hopes of finding companionship, and maybe even a home.[/CENTER]
[/div]
[/SLIDE]
[/TABS]
[div=background:url(https://i.imgur.com/WeiOoZK.jpg);[/SIZE][/div][div=background:url(https://i.imgur.com/WeiOoZK.jpg);
 background-size: cover;
 background-position: center;
 width: 100%;
 height: 60px;
 z-index:1;
 top:-605px;
 opacity: 0.;
 padding: 10px;
 text-align: center;
 font-family: Marcellus;
 text-transform: uppercase;
 color: white;
 font-size: 30px;
 white;
text-shadow: 2px 2px 2px grey; ]Sybil[/div]
[/div]
[/div]
[/div]
 
@Jumping Fish

The only way to override the default green color of hyperlinks to use the [COLOR][/COLOR] tag. This must be placed within the URL tags, or else the default color will not be overridden.

The tabs use the following FontAwesome icons: glass, ring, mask, and fire. On desktop, you can use the find command (CTRL + F on windows, CMD + F on mac) to search for the keywords. You can then nest the [COLOR][/COLOR] tag inside of the {tab}{/tab} tag.

Example:

[URL='www.google.com'][COLOR=red]TEST[/COLOR][/URL]

will give you:

TEST

Code:
[div=display: block;
margin:auto;
border-radius: 15px 15px 0px 0px;
background-color: #161616;
width: 80%;
padding: 10px;][div=display: flex;
flex-direction: row;][div=display: block;
width:10%;][div=width:30px;
height:17px;
overflow:hidden;
display: block;
margin: auto;][div=opacity: 0.0;
z-index:1;
height:11px;][MEDIA=youtube]4WVNJexkf_c[/MEDIA][/div][div=top: -15px;
z-index:2;
pointer-events:none;
opacity: 0.99;][FA]fa-play[/FA] [FA]fa-pause[/FA] [/div][/div][/div][div=margin: auto;
font-family: Marcellus;
font-size 13px;
top: -5px;]And I know this isn't like me, I just want people to like me [/div][/div][div=display: flex;
flex-direction: row;][div=flex: 1;
background-color: #ffffff;
color: #333333;
height: 600px;
text-align: center;][div=background-image: url(https://i.imgur.com/6VzsfDL.jpg);
height: 120px;
background-size: cover;][/div][div=background-image: url(https://i.imgur.com/3J7E9q0.jpg); border-radius: 100%;
margin: auto;
margin-top: -55px;
background-size: cover;
border: 2px solid #ffffff;
 height: 120px;
width: 120px;][/div][div=padding: 5px;
font-size: 9px;
text-transform: uppercase;
font-family: Arial;
letter-spacing: 1px;
height: 400px;]
[div=margin-top: 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 2px;]sybil[/div]
[div=margin-top: 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 2px;]female[/div]
[div=margin-top: 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 2px;]13th august[/div]
[div=margin-top: 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 2px;]twenty[/div]
[div=margin-top: 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 2px;]bisexual[/div]
[div=margin-top: 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 2px;]sommelier/student[/div]
[div=margin-top: 20px; border-bottom: 1px solid #d8d8d8; padding-bottom: 2px;]daughter of dionysus[/div][div=font-size:
6px; letter-spacing: 4px;
color: #c4c4c4;
font-family: Marcellus;
margin-top: 25px;]code by MaryGold, heavily inspired by winnie[/div][/div][/div][div=flex: 2;
padding: 20px;
background-color: #efefef;
height: 600px;
color: #333333;]
[TABS=500]
[SLIDE=1]
[div=margin: auto;
display: flex;
flex-direction: row;]
[div=display: block;
background: black;
opacity: 0.8;
border: 1px solid black;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=1}[COLOR=#7166ab][fa]fa-glass[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=2}[COLOR=#7166ab][fa]fa-ring[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=3}[COLOR=#7166ab][fa]fa-mask[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=4}[COLOR=#7166ab][fa]fa-fire[/fa][/COLOR]{/tab}
[/div]
[/div]
[div="display: block;
background-color: #ffffff;
opacity: 0.7;
margin: auto;
border: 2px;
border-radius: 2px;
border-style: double;
border-color: #514E4D;
text-align: justify;
color: #000;
font-size: 12px;
padding: 15px;
width: 450px;
height: 400px;
overflow: auto;"]Full Name: Sybil Tang/Tang Xiu Jiu (唐秀久)

Gender: Cisgender Female

Date of Birth: 13th August (Leo)

Age: 20

Ethnicity/Race: Chinese

Sexuality: Bisexual

Occupation: Sommelier

Godly Parent: Dionysus
[/div]
[/SLIDE]

[SLIDE=2]
[div=margin: auto;
display: flex;
flex-direction: row;]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
 height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=1}[COLOR=#7166ab][fa]fa-glass[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: black;
opacity: 0.8;
border: 1px solid black;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=2}[COLOR=#7166ab][fa]fa-ring[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
 margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=3}[COLOR=#7166ab][fa]fa-mask[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=4}[COLOR=#7166ab][fa]fa-fire[/fa][/COLOR]{/tab}
[/div]
[/div]
[div="display: block;
background-color: #ffffff;
opacity: 0.7;
margin: auto;
border: 2px;
border-radius: 2px;
border-style: double;
border-color: #514E4D;
text-align: justify;
color: #000;
font-size: 12px;
padding: 15px;
width: 450px;
height: 400px;
overflow: auto;"]HEIGHT:
168cm or 5'6ft

WEIGHT:
62kg or 137lbs

NATURAL HAIR COLOUR:
Black

EYE COLOUR:
Black, with a hint of purple in the light

APPEARANCE:
Due to her training at the gym, Sybil has a lean body, with waist length ebony hair. Usually tied half up-half down, she prefers to use a golden hair pin over rubber bands. When she rolls up her sleeves, a tiger tattoo can be seen on her forearm, a memento to her cat. Hidden on her lower back is another tattoo, of a snake. The serpent is another memento, this one of her pet snake.

PREFERRED ATTIRE:
For work, Sybil prefers to wear a clean, black, long sleeved shirt and matching slacks, accompanied by a pair of ever-changing cufflinks.

For daily wear, Sybil enjoys wearing flowy blouses with long pants or skirts. She likes wearing low heeled boots, and has a small collection of footwear.

When Sybil goes out to parties, she likes to wear crop tops to show off her tattoos. However, she refuses to wear short skirts, adamantly wearing her long pants and the occasional mid-length skirt.
[/div]
[/SLIDE]

[SLIDE=3]
[div=margin: auto;
display: flex;
flex-direction: row;]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
 height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=1}[COLOR=#7166ab][fa]fa-glass[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=2}[COLOR=#7166ab][fa]fa-ring[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: black;
opacity: 0.8;
 border: 1px solid black;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=3}[COLOR=#7166ab][fa]fa-mask[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
 border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=4}[COLOR=#7166ab][fa]fa-fire[/fa][/COLOR]{/tab}
[/div]
[/div]
[div="display: block;
 background-color: #ffffff;
opacity: 0.7;
margin: auto;
border: 2px;
border-radius: 2px;
border-style: double;
border-color: #514E4D;
text-align: justify;
color: #000;
font-size: 12px;
padding: 15px;
width: 450px;
height: 400px;
overflow: auto;"]LIKES:
[LIST]
[*]Loud places
[*]Snakes
[*]Cats
[*]Boxing
[*]Hugs
[*]Gold
[/LIST]

DISLIKES:
[LIST]
[*]Dark places
[*]Quiet places
[*]Dogs
[*]Being left out
[/LIST]

CHARACTER TRAITS:
Growing up mostly alone, Sybil loves being around people. She hops around from college party to college party in her free time, livening up parties with her little fire tricks. (Wasted college students don't ask why your eyes glow purple or how you make fire)

Despite her outgoing persona, Sybil has few real friends she hangs out with, opting to stay acquaintances with everyone she meets. The people she would consider herself closest to are the small group of students in the university's theatre group.

Occasionally popping by to play an extra or two, Sybil enjoys taking to the stage. She loves playing crazed characters, finding catharsis in acting out a character's pain and suffering.
[/div]
[/SLIDE]

[SLIDE=4]
[div=margin: auto;
display: flex;
flex-direction: row;]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=1}[COLOR=#7166ab][fa]fa-glass[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=2}[COLOR=#7166ab][fa]fa-ring[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: white;
opacity: 0.8;
border: 1px solid white;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=3}[COLOR=#7166ab][fa]fa-mask[/fa][/COLOR]{/tab}
[/div]
[div=display: block;
background: black;
opacity: 0.8;
border: 1px solid black;
height: 50px;
width: 50px;
margin: auto;
border-radius: 50%;
font-size: 20px;
text-align: center;
padding: 10px;]{tab=4}[COLOR=#7166ab][fa]fa-fire[/fa][/COLOR]{/tab}
[/div]
[/div]
[div="display: block;
background-color: #ffffff;
opacity: 0.7;
margin: auto;
border: 2px;
border-radius: 2px;
border-style: double;
border-color: #514E4D;
text-align: justify;
color: #000;
font-size: 12px;
padding: 15px;
width: 450px;
height: 400px;
overflow: auto;"]POWERS:
[LIST]
[*]Teleportation
[*]Pyrokinesis
[*]Alcohol Transformation
[/LIST]

PREFERRED WEAPON:
Knuckles

BACKSTORY (WIP):
Born from a one night stand, Sybil was often neglected and treated coldly by her mother. Treated as the byproduct of a shameful affair, Sybil grew up being hidden from guests and relatives. Even Sybil's grandparents refused to acknowledge her existence, and Sybil was forced to spend most of her early childhood in solitude.

The first power she awakened was pyrokinesis. When Sybil was 5, the power in her house suddenly went out and Sybil was trapped in the darkness. In a fit of fear, Sybil summoned a small purple flame. From then on, Sybil would summon the flame whenever she felt lonely, giving it the name "Flemby".

Seeking companionship, Sybil spent a lot of time in the recesses of her mind, making imaginary friends for she had none. By the time Sybil was able to attend elementary school, she had little to no social skills, and was bullied by her classmates. Due to her poor reading ability, she was largely ignored by her teachers as well.

When Sybil finally learned to fight back, she felt a great catharsis. Unable to control her urges as a child, she began to roughhouse the other children who used to bully her. However, with her demigod strength, this eventually lead to her breaking another child's arm in Grade 6. Her mother was called to school, and Sybil's mother ended up moving the two of them to another state so she could attend middle school.

Through middle and high school, Sybil's mother forced Sybil to take up boxing to manage her urges. Finding an unexpected talent in fighting, Sybil managed to obtain a scholarship for boxing. Getting addicted to the fighting high, Sybil became infamous in the high school boxing division.

Sybil discovered her powers of teleportation and levitation near the end of high school. In the middle of the night, Sybil felt a strong urge to go somewhere, so she thought of the high school boxing room, her favourite place in the school. She ended up teleporting right outside the gates to the school. Incredibly confused about what had happened, Sybil realised the gates were locked and there was no way she could get inside anyway. So, she just turned tail and headed home.

Not wanting to let her mother know she left, Sybil began to climb up to her room on the second floor. As she was about to enter her room, she slipped and fell off the ledge. Panicking, Sybil thought she would hit the ground. When she opened her eyes, she realised she was floating. Awkwardly controlling her levitation, she managed to get into her room unnoticed.

By the time she reached college, the high from boxing was no longer enough for Sybil. When one of her friends took her to a party, Sybil tried alcohol and enjoyed the brief high. Wanting to re-experience the same high, Sybil began hunting for stronger alcohols. This backfired, and she just ended up incredibly dissatisfied. However, Sybil still enjoyed the stimulation of the flashing lights and loud music, so she continued to hop around parties.

She realised her last power in one of these parties. After downing multiple shots of hard vodka, Sybil's friend offered her a glass of water. When she drank the bland water, Sybil wished it had more alcohol. This turned the water into wine, surprising Sybil. And though it tasted rancid to her ("like dish cleaner"), her friend who drank it thought it was the best wine they had ever drank. Although Sybil passed it off as a party trick, she began to connect the dots between her powers.

That spring break, Sybil confronted her mother, and her mother revealed Sybil's less-than-mortal origins. But Sybil's mother didn't know who her godly parent was, so Sybil was left with more questions than she had started out with.

After spring break, Sybil moved away from her mother. Acquiring a small apartment, Sybil began her job as a sommelier, while selling wine to college students on the side.

One day, she found a tabby cat near her apartment. Although initially hostile, the cat began to warm up to Sybil. The cat eventually became so comfortable with Sybil it moved into her house. When she brought the cat to the vet, she found out it was actually a toyger, an exotic cat breed. The cat was probably abandoned by its previous owner, and made its way down to Sybil's district, which was two streets down from a high-end district. She decided to name the cat "Dolce", after the red wine Dolcetto

After raising Jade for a few months, Sybil got an unexpected pet. When Sybil returned home one winter day, she found a wounded snake in the middle of her living room. The young serpent had been brought in as prey by Jade, and Sybil quickly rushed the injured snake to the vet. After getting treated, Sybil bought a few essentials to raise a snake. By the time the snake had finished healing, Sybil had grown attached to the young copperhead and decided to name it "Mal", after the white wine Malvasia.

[CENTER]WHY ARE YOU HERE?
When Sybil read the letter, her first feeling was relief. Relief that she wasn't abnormal.
A freak.
Although she spent her time surrounded by people, Sybil never felt like she belonged.
She decided to go to this facility, in the hopes of finding companionship, and maybe even a home.[/CENTER]
[/div]
[/SLIDE]
[/TABS]
[div=background:url(https://i.imgur.com/WeiOoZK.jpg);[/SIZE][/div][div=background:url(https://i.imgur.com/WeiOoZK.jpg);
 background-size: cover;
 background-position: center;
 width: 100%;
 height: 60px;
 z-index:1;
 top:-605px;
 opacity: 0.;
 padding: 10px;
 text-align: center;
 font-family: Marcellus;
 text-transform: uppercase;
 color: white;
 font-size: 30px;
 white;
text-shadow: 2px 2px 2px grey; ]Sybil[/div]
[/div]
[/div]
[/div]
I see! Thanks a lot for the help!!
 
  • Like
Reactions: Ardent