• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Resource β€ƒβ€ƒβ–½ 𝐸𝓁𝒾𝓍𝒾𝓇 π‘œπ’» π’œπ“‡π’Έπ’Άπ’Ήπ’Ύπ’Ά β€” Workshop

Alteras

Alteras

The Sleepy Prisoner
Administrator
Supporter
font font Coded by Alteras Alteras background source: Cola
Elixir of Arcadia
Hello again!!! Alteras Alteras here!!

It's been a long time since I've made a workshop. I realized this morning that I've been squirreling away BBCode I've made since the end of BBCode+ and had never released any. So here we go!!!!

I had originally intended to make different workshop to go with some future changes to the site staff had planned, but after looking at the BBCode I had made in the past four years (oh my god), I felt I needed to showcase these.

Keeping in theme with my previous workshops (Star of Arcadia and Dreams of Arcadia), this workshop will be called Elixir of Arcadia. This workshop will primarily contain designs I've made since around 2020 till today (2024). These past few years seems to have blown by without my active participation; eventful in the outside world, but barely registering in my mind. As such, I feel at once both the youthful fresh grad and the tired coder. I decided to make this workshop themed around such feelings of being in a semi lucid (fugue-like?) state. That's some crazy drink the bar master's got there...

Anyway, I hope you all enjoy these codes! I have fond memories of struggling against the limitations of BBCode all over again, and am very proud of them,
β€” Alteras

P.S. - Dreams of Arcadia still has functioning code from before BBCode+
 
Last edited:
Elixir of Arcadia
Text Templater | Pastebin
Ahh... It's been a while since I last made a workshop thread. Following in the steps of my previous workshops, I'll be adding some additional commentary to each code. I'll keep this one short since most of my thoughts on the workshop itself will be in the main post up above.

Those familiar with my previous codes will know I have a tendency to make "Title Card" designs, effectively designs that look pretty, but are primarily driven by a beautiful background or animation. AND I'VE DONE IT AGAIN. HAHAHAHAHA!!! Usually I attempt to accompany these with strong transitions to comfortable reading views, so it balances out. But there's none this time! This is a very simple bbcode, just an inverted accordion and a beautiful background to go with. The source of the background is Cola. Some mobile responsiveness tossed it, but otherwise nothing complicated (thank you @Uxie and fluticasone fluticasone for reminding me how accordions work @-@).

I am providing the raw code with some lorem ipsum, but keeping in line with my recent side project, I will also be adding text templater links here.

Elixir of Arcadia Template - Text Templater

Plain Text Template to Form Field Generator for Elixir of Arcadia Template
text-templater.vercel.app text-templater.vercel.app

Code: 
[nobr]
[div=display: none;]
[font="Great Vibes"]font[/font]
[font="Raleway"]font[/font]
Coded by [USER=34809]@Alteras[/USER]
[/div]

[div="width: 100%; height: auto; box-sizing: border-box; container: none / size; aspect-ratio: 2739 / 1174; min-height: 500px; background-image: url('https://i.imgur.com/Ph0j4iU.jpg'); background-size: cover; background-position: right center; display: flex; flex-flow: wrap; justify-content: space-between; align-items: stretch;"]
	[div="flex: 1 0 auto; width: max(50cqw, 300px); min-width: 300px; max-width: 600px; height: 100cqh; position: relative; display: flex; flex-flow: column-reverse; justify-content: flex-start; padding: 10px 10px 10px max(10px, calc(3cqi - 10px)); box-sizing: border-box; font-size: 0; visibility: hidden;"][div=" transform: scaleY(-1);"]
		[accordion=100%]{slide=[div="display: block; font-family: 'Great Vibes', cursive; font-weight: 400; font-variant: normal; font-style: normal; font-size: max(3rem, 9cqb); color: white; filter: drop-shadow(black 0px 0px 0.5rem); margin-bottom: -6px; margin-top: -16px; height: 14cqb; width: auto; background: transparent; visibility: visible; transform: scaleY(-1); cursor: pointer;"][fa]fa-sharp fa-light fa-triangle fa-flip-vertical fa-sm[/fa]Elixir of Arcadia[/div]}[div="display: block; position: relative; color: white; font-family: 'Raleway', sans-serif; background-color: rgba(0, 0, 0, 0.5); font-size: 1rem; height: min(min-content, 80cqb); max-height: 80cqb; padding: 10px; box-sizing: border-box; border-top: 1px solid white; border-bottom: 1px solid white; visibility: visible; transform: scaleY(-1);"][div="overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.8) transparent; scrollbar-gutter: stable; height: min-content; max-height: calc(80cqb - 20px); box-sizing: border-box; position: relative; display: block;"][comment]
-- Textual content here 
--[/comment]Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus sed mollitia velit dolore
        laudantium similique recusandae iure nam. Modi soluta asperiores id. Natus fuga corrupti saepe voluptatem
        quam est nostrum.
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus sed mollitia velit dolore
        laudantium similique recusandae iure nam. Modi soluta asperiores id. Natus fuga corrupti saepe voluptatem
        quam est nostrum.

[/div][/div]{/slide}
[/accordion][/div]
	[/div]
	[div="width: 250px; height: 0px;"][/div]
[/div]
[/nobr]

As I add more to this workshop, I'll make sure to add text templater links for most, if not all, of the codes.


 
Last edited:
first

JWnA5W1.png
 
vOb1t4T.png
7imN4pi.png
7imN4pi.png
Vitaliya
The Specialist
Essentials
Name: Vitaliya Kardos
Aliases: The Specialist
Age: Twenty-one
Gender: Female
Race: Human

Persona
Sexuality: Heterosexual
High Concept: A high ranking Adventurer barred from general quests and in need of a stable income.
Backstory: Vitaliya Kardos was meant to be an adventurer. The daughter of a rogue and a mage adventurer, she grew up being taught the weird combination of magic and scouting. As her parents were adventurers, once her mother, the mage, was able to move again, her parents went on more quests and her home became the Guild. Early childhood for her was playing with the locals and helping around the guild, while picking up some light training from adventurers with nothing else to do. Age 8 was when her parents started letting her follow them on quests, honing her knowledge like an encyclopedia for rogues & enchantments (enchantments were decided on as a good skill for a rogue). Age 12 was when she was allowed to go on quests without supervision. Not quite the usual childhood, but she came out as a proper adventurer by the end of it.

By the time she was age 15, Vitaliya was a properly ranked and well trusted adventurer, and finally went on her own journey. Traveling the continent with her extremely adventurer focused background, she joined and left various parties until she became a solo. By the age of 19, she gained a reputation for being an extremely capable adventurer, and was regularly requested for higher difficulty jobs. She eventually gained the title "The Specialist," as someone the guild calls in to clear an especially difficult quest. Eventually, she became a high ranked solo adventurer, but because of her skillset and reputation, she was restricted from taking normal quests. This became an extreme problem for her income, but with a direct order from the Guildmaster of Trihexa, she had to deal with it. And as such, she joined the Esoteric Order as a side-job.

Physique
Weapons & Armor:
  • Leather Armor β€” Light and mobile. Covered in rings, belts, and talismans. Has a large right shoulder armor, engraved with an Intermediate Strengthen enchantment.
  • Rings & Belts β€” All over her body, provides a variety of minor enchantments to her body: Strengthen, Lighten, Agility, Quiet, Dynamic Vision, Clear Mind, Enhanced Hearing.
  • Talismans β€” Small talismans placed and hidden all over her body, that she can enchant, remove, and toss at anytime. Her main method of attack.
  • Magic Dagger β€” A dagger hidden in her right sleeve. Enchanted with a Intermediate Agility enchantment.
  • Tracer Goggles β€” Highlights traces of magic. Good for tracking things.
Items & Personal Belongings:
  • Adventurer's Card β€” Shows her name and her rank.
  • Gold β€” She needs more.
  • Earring of Communication β€” Currently paired to the Adventurer's Guild Emergency Channel. She's always available for any specialist quests.
Skills & Abilities:
  • Hunter β€” Specializes in hunting and tracking magical monsters. Extensive knowledge of a variety of monsters.
  • Great Shot β€” Her aim and range is bordering insane.
  • Rogue β€” Her original job classification. Good with stealth, traps, the usual.
  • Close Quarters Combat β€” Isn't her usual thing, but she can pull it off, especially with the variety of enchants on her.
  • Acrobat β€” Very flexible and agile.
  • Drinker β€” Too many quest celebration parties strengthened her tolerance.
Spells & Magic: Talisman Enchantments β€” She enchants, she throws, stuff happens.
  • Explosion β€” Causes an explosion on impact. Toss more for bigger effect.
  • Fire/Ice/Lightning β€” Creates the effect on whatever it touches, whether it be freezing, shocking, or setting on fire.
  • Magic Seal β€” Acts as a sink for magic power, preventing the use of magic for about 5 minutes. Incompatible with Trap Zone.
  • Hidden Zone β€” Requires at least three talismans. Things inside of the zone are hidden from view for 5 minutes.
  • Barrier Zone β€” Requires at least three talismans. Erects a barrier around the zone for 5 minutes.
  • Trap Zone β€” Requires at least three talismans. When paired with other talismans, will activate effects of the other talismans when something enters the zone.
  • Spell Catcher β€” Catches a spell and releases it after 2 mins. Requires immense magic power from Vitaliya and will leave her exhausted.
Weaknesses: Vitaliya is heavily reliant on her equipment. Catch her without them or prevent her enchantments from applying and she's just an girl with a dagger. She also specializes in monster subjugation, and has little experience fighting people beyond the usual scuffle at the bar.

Extra
Hobbies: Monster Studies, Darts, Food, and Beer.
Quotes:
"Hmm? Need a job done? As long as I get paid."
"So they messed up, huh? I'm on it."
Theme:

 
Last edited:
Rogue Margins
Text Templater | Pastebin | Original CS
This design is one of my favorites. I originally created this design (and the CS) back in August 2020. I had a solid idea of the character before the design, so I went into this design with the goal of making sure she exuded "cool." Heavily inspired by the composition of images spilling over the border, I wanted her to truly pop out, as if her existence itself is roguish. I had even stressed far too much time on calling her "The Specialist" or "The Roguemaster," both of which look fantastic as the subtitle. The image is from the Shadowverse CCG, with a healthy amount of image masking. Getting a nice crop like this is tough...

On to the actual code, this uses a heavy amount of margins and overflow, all relying on the precise measurements of the image and the inset! This code is balanced to assume the focal point of the image will sit at the top left, with extra leeway to spill a bit out of the inset on the right margin. Reflecting it on the text side, the title and subtitle sit on the top right. In mobile, the two sides collapse into one column with some pleasant overlap between the title and the image. I've found that a using underlines for highlighting fields works extremely well in this design.

Revisiting this, I cleaned up the styling with some healthy CSS properties (yay aspect-ratio!!) and, of course, made a text templater version. The original was made before the return of [nobr] and [div], so it uses a ton of [border] tags. For those who use the text templater, make sure to adjust the image sizes. It can get wonky pretty fast if you're not careful.

Rogue Margins Template - Text Templater

Plain Text Template to Form Field Generator for Rogue Margins Template
text-templater.vercel.app text-templater.vercel.app

Code: 
[div=display:none;][font=Cinzel Decorative]font[/font][font=Cinzel]font[/font][font=Raleway]font[/font][/div][border=unset; padding: unset; --primary-color: #f7f0e5; --secondary-color: black; background-color:#902525; --image-width: 1000; --image-height: 1251; --image-inset-width: 751; --image-inset-height: 990; --image-right-margin: 57; padding: 20px; padding-bottom: 50px; box-sizing: border-box;][border=unset; padding: unset; width: 100%; height: auto; max-width: 1000px; display: flex; flex-flow: row wrap; justify-content: center; margin: 0 auto; margin-top: 15%; margin-top: clamp(80px, 15%, 150px);][border=unset;padding:unset; width: 0; height: 0; margin-left: 5%; margin-left: max(5%, 50px)][/border][border=unset; padding: unset; width: 100%; min-width: 300px; flex: 1; pointer-events: none; font-size: 0; position: relative; margin: 5px 10px; aspect-ratio: var(--image-inset-width) / var(--image-inset-height)][border=unset; padding: 0; width: calc( var(--image-width)/var(--image-inset-width) * 100%); height: calc(var(--image-height)/var(--image-inset-height) * 100%); position: absolute; bottom: 0; right: calc(-1 * 100% * var(--image-right-margin)/var(--image-width) * var(--image-width)/var(--image-inset-width)); z-index: 2;][img]https://i.imgur.com/vOb1t4T.png[/img][/border][/border][border=unset; padding: unset; position: relative; width: 100%; height: auto; min-width: 300px; flex: 1; min-height: 525px; font-size: 0; margin: 5px 10px;aspect-ratio: var(--image-inset-width) / var(--image-inset-height)][border=unset; padding: unset; position: absolute; right: -10%; right: calc(-1 * clamp( 1rem, 5vw, 10%)); top: 0%; transform: translateY(calc(-1 * 1/2 * 100%)); height: auto; width: auto; max-width: 110%; text-align: right; font-size: 72pt; font-size: clamp(70px, 5vmax, 96px); line-height: .75; font-family: 'Cinzel Decorative'; color:var(--primary-color); z-index: 2;][border=unset; padding: unset;]Title[/border][border=unset; padding: unset; font-size: .4em;]The Subtitle[/border][/border][border=unset; padding: unset; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 10px double var(--secondary-color); font-size: initial; font-family: 'Raleway'; color:var(--primary-color); line-height: 1.5][border=unset; padding: 5px; position: relative; width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; mask-image: linear-gradient(to bottom, transparent 0 5%, rgba(0,0,0,1) 10% 95%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0 5%, rgba(0,0,0,1) 10% 95%, transparent 100%);][border=unset; padding: 0; height: 100%; width: 100%; box-sizing: content-box; padding-right: 100px; overflow-Y: scroll;][border=unset; padding: unset; height: 7.5%; width: 0;][/border][border=unset; padding: unset; font-family: 'Cinzel'; font-size: 2em; border-bottom: 2px solid var(--secondary-color); line-height: 1;]Essentials[/border]Lorem Ipsum


[border=unset; padding: unset; font-family: 'Cinzel'; font-size: 2em; border-bottom: 2px solid var(--secondary-color); line-height: 1;]Header[/border]Lorem Ipsum


[border=unset; padding: unset; height: 5%; width: 0;][/border][/border][/border][/border][/border][/border][/border]

 
Kishimoto Sayaka
 
Averza Reyes
 
Eastward Banners
Text Templater | Pastebin | Original CS
This one is an extremely simple accordion design from Oct 2020. This set is really meant for images with plain backgrounds, or easy transparencies, but can be adopted (with some effort) to accommodate portraits/crops (see below). Honestly, there's nothing particularly new about this design, in fact, even the clipped accordion slides is something I've done before.

Eastward Banners Template - Text Templater

Plain Text Template to Form Field Generator for Eastward Banners Template
text-templater.vercel.app text-templater.vercel.app

Code: 
[comment]code by Alteras [font=Unica One]font[/font][font=Raleway]font[/font][/comment][border=unset; padding: 0; width: 100%; height: auto; position: relative; --header-font: 'Unica One'; --body-font: 'Raleway'; background-image: radial-gradient(rgb(238,238,238), rgb(183,183,183)); padding: 80px 0; font-size: initial; --slides: 4.5; --slide-size: 30px; --primary-color: #a84945; --secondary-color: white; --text-bg:rgba(0,0,0,0.7)][border=unset; padding: 0; width: auto; max-width: 1200px; height: auto; margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: center; align-items: center;][border=unset; padding: 0;
width: clamp(300px, 100%, 800px); height: auto;min-height: 600px;position: relative;][border=unset; padding: 0;
position: absolute; top: -10%; left: 0; right: -10%; bottom: -10%; min-width: 500px; font-size: 0; background-image: url('https://i.imgur.com/bkcHHtG.png'); background-size: auto 100%; background-position: right; background-repeat: no-repeat; z-index: 1;][/border][border=unset; padding: 0;
height: 80%; min-height: 600px; width: 80%; z-index: 2; position: relative; display: flex; flex-flow: column nowrap; padding-right: 30px; padding-left: 10px; box-sizing: border-box;][border=unset; padding: 0; width: 100%; box-sizing: border-box; height: auto; display: flex; flex-flow: column nowrap; align-items: flex-end; font-size: 2.5em; color: var(--primary-color); line-height: 0.9; font-family: var(--header-font); text-align: right;]Character Name[border=unset; padding: 0; width: 60%; min-width: 200px; height: .1em; background-color: var(--primary-color); clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%)][/border][/border][border=unset; padding: 0; width: 100%; height: 560px; flex: 1; box-sizing: border-box; position: relative; visibility: hidden; display: flex; flex-flow: column nowrap; font-size: 0;][accordion=100%]
{slide=[border=unset; padding: 0; background-color: var(--primary-color); width: auto; height: auto; padding: 1px 5px; line-height: .9; text-align: right; font-size: 1.5rem; font-weight: normal; font-variant: normal; font-family: var(--header-font); color: var(--secondary-color); clip-path: polygon(1em 0, calc(1em + 10px) 0, 10px 100%, 15px 100%, calc(1em + 15px) 0, 100% 0, 100% 100%, 0 100%); margin: -7px; margin-top: -1px; visibility: visible;]Essential Info[/border]}[border=unset; padding: 0; width: auto; height: 100%; max-height: calc(560px - var(--slide-size) * var(--slides)); position: relative; font-size: initial; line-height: 1.3; font-family: var(--body-font); color: var(--secondary-color); background-color: var(--text-bg);outline: 1px solid transparent; padding: 10px; margin: -7px; margin-top: -1px; visibility: visible;overflow: hidden;][border=unset; padding: 0; width: 100%; height: 100%; max-height: calc(560px - var(--slide-size) * var(--slides)); overflow: scroll; padding-right: 200px;box-sizing: content-box][border=unset; padding: 0; width: 100%; height: auto; display: flex; flex-flow: row wrap; text-transform: uppercase; max-width: 450px; margin: 0 auto;][border=unset; padding: 0; width: auto; flex: 1; min-width: 200px]left info[/border][border=unset; padding: 0; width: auto; flex: 1; min-width: 200px; text-align: right]right info[/border][/border]lorem ipsum[/border][/border]{/slide}

{slide=[border=unset; padding: 0; background-color: var(--primary-color); width: auto; height: auto; padding: 1px 5px; line-height: .9; text-align: right; font-size: 1.5rem; font-weight: normal; font-variant: normal; font-family: var(--header-font); color: var(--secondary-color); clip-path: polygon(1em 0, calc(1em + 10px) 0, 10px 100%, 15px 100%, calc(1em + 15px) 0, 100% 0, 100% 100%, 0 100%); margin: -7px; margin-top: -1px; visibility: visible;]Personal Info[/border]}[border=unset; padding: 0; width: auto; height: 100%; max-height: calc(560px - var(--slide-size) * var(--slides)); position: relative; font-size: initial; line-height: 1.3; font-family: var(--body-font); color: var(--secondary-color); background-color: var(--text-bg);outline: 1px solid transparent; padding: 10px; margin: -7px; margin-top: -1px; visibility: visible; overflow: hidden;][border=unset; padding: 0; width: 100%; height: 100%; max-height: calc(560px - var(--slide-size) * var(--slides)); overflow: scroll; padding-right: 200px;box-sizing: content-box]lorem ipsum
[/border][/border]{/slide}

{slide=[border=unset; padding: 0; background-color: var(--primary-color); width: auto; height: auto; padding: 1px 5px; line-height: .9; text-align: right; font-size: 1.5rem; font-weight: normal; font-variant: normal; font-family: var(--header-font); color: var(--secondary-color); clip-path: polygon(1em 0, calc(1em + 10px) 0, 10px 100%, 15px 100%, calc(1em + 15px) 0, 100% 0, 100% 100%, 0 100%); margin: -7px; margin-top: -1px; visibility: visible;]Equipment Abilities&[/border]}[border=unset; padding: 0; width: auto; height: 100%; max-height: calc(560px - var(--slide-size) * var(--slides)); position: relative; font-size: initial; line-height: 1.3; font-family: var(--body-font); color: var(--secondary-color); background-color: var(--text-bg);outline: 1px solid transparent; padding: 10px; margin: -7px; margin-top: -1px; visibility: visible;overflow: hidden;][border=unset; padding: 0; width: 100%; height: 100%; max-height: calc(560px - var(--slide-size) * var(--slides)); overflow: scroll; padding-right: 200px;box-sizing: content-box]lorem ipsum[b][fa]far fa-caret-right fa-fw[/fa]Subheader[/b]
[u]item name[/u] β€” lorem ipsum

[/border][/border]{/slide}

{slide=[border=unset; padding: 0; background-color: var(--primary-color); width: auto; height: auto; padding: 1px 5px; line-height: .9; text-align: right; font-size: 1.5rem; font-weight: normal; font-variant: normal; font-family: var(--header-font); color: var(--secondary-color); clip-path: polygon(1em 0, calc(1em + 10px) 0, 10px 100%, 15px 100%, calc(1em + 15px) 0, 100% 0, 100% 100%, 0 100%); margin: -7px; margin-top: -1px; visibility: visible;]Extraneous[/border]}[border=unset; padding: 0; width: auto; height: 100%; max-height: calc(560px - var(--slide-size) * var(--slides)); position: relative; font-size: initial; line-height: 1.3; font-family: var(--body-font); color: var(--secondary-color); background-color: var(--text-bg);outline: 1px solid transparent; padding: 10px; margin: -7px; margin-top: -1px; visibility: visible;overflow: hidden;][border=unset; padding: 0; width: 100%; height: 100%; max-height: calc(560px - var(--slide-size) * var(--slides)); overflow: scroll; padding-right: 200px;box-sizing: content-box]lorem ipsum
[/border][/border]{/slide}
[/accordion][/border][/border][/border][/border][/border]

Screenshot 2024-09-03 at 15-48-53 Alteras's BBCode Workshop Page 5 RpNation.png

Westward Banners
Text Templater | Pastebin | Original CS
This one is a simple modification of the design to be on the right side of the character. This was for a character I made in Nov 2021. Not much to say really. Both of these characters (and my unreleased one) were quite fun in their own right to design. My only gripe is that I never managed to get the mobile to look better than this. Oh well.

Westward Banners Template - Text Templater

Plain Text Template to Form Field Generator for Westward Banners Template
text-templater.vercel.app text-templater.vercel.app

Code: 
[comment]code by Alteras [font=Cormorant SC]font[/font][font=Raleway]font[/font][/comment][border=unset; padding: 0; width: 100%; height: auto; position: relative; --font-1: 'Cormorant SC'; --font-2: 'Raleway';; background-image: linear-gradient(to bottom,#191d1e, #3b3b3b); background-color: darkgrey; padding: 90px 0; font-size: initial; --slides: 4.5; --slide-size: 30px; --accent-1: #5e66bd; --secondary-color: white; --text-bg:rgba(0,0,0,0.7); --slide-clip-path: polygon(0px 0px, calc(100% - (1em + 15px)) 0, calc(100% - 15px) 100%, calc(100% - 10px) 100%, calc(100% - (1em + 10px)) 0, calc(100% - (1em)) 0, 100% 100%, 0px 100%); --slide-max-height: calc(550px - var(--slide-size) * var(--slides))][border=unset; padding: 0; width: auto; max-width: 1200px; height: auto; margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: center; align-items: center;][border=unset; padding: 0;
width: clamp(300px, 100%, 800px);
height: auto; display: flex; flex-flow: row wrap;
min-height: 600px;
position: relative;][border=unset; padding: 0;
position: absolute; top: -10%; left: -10%; right: 0; bottom: -10%; min-width: 500px; font-size: 0; background-image: url('https://i.imgur.com/1Dmdk2R.png'); background-size: auto 100%; background-position: left; background-repeat: no-repeat; z-index: 1;][/border][border=unset; padding: 0; width: 210px; height: 175px][/border][border=unset; padding: 0;
height: auto; min-height: 600px; min-width: 200px; flex: 1; z-index: 2; position: relative; display: flex; flex-flow: column nowrap; box-sizing: border-box; padding-left: 5px; padding-right: 5px;][border=unset; padding: 0; width: 100%; box-sizing: border-box; height: auto; display: flex; flex-flow: column nowrap; font-size: 2.5em; color: var(--accent-1); line-height: 1; font-family: var(--font-1); filter: drop-shadow(0 .5px 5px black) drop-shadow(0 .5px 5px black);]Character Name[border=unset; padding: 0; width: 60%; min-width: 310px; height: .1em; background-color: var(--accent-1); clip-path: polygon(0 0,  calc(100% - 5px) 0, 100% 100%, 0 100%)][/border][/border][border=unset; padding: 0; width: 100%; height: 560px; flex: 1; box-sizing: border-box; position: relative; visibility: hidden; display: flex; flex-flow: column nowrap; font-size: 0;][accordion=100%]
{slide=[border=unset; padding: 0; background-color: var(--accent-1); width: auto; height: auto; padding: 1px 5px; line-height: .9; font-size: 1.5rem; font-weight: normal; font-variant: normal; font-family: var(--font-1); color: var(--secondary-color); clip-path: var(--slide-clip-path); margin: -7px; margin-top: -1px; visibility: visible;]Identity[/border]}[border=unset; padding: 0; width: auto; height: 100%; max-height: var(--slide-max-height); position: relative; font-size: initial; line-height: 1.3; font-family: var(--font-2); color: var(--secondary-color); background-color: var(--text-bg);outline: 1px solid transparent; padding: 10px; margin: -7px; margin-top: -1px; visibility: visible;overflow: hidden;][border=unset; padding: 0; width: 100%; height: 100%; max-height:  var(--slide-max-height); padding-right: 200px;box-sizing: content-box;overflow-x: hidden;overflow-y: scroll;]lorem[border=unset; padding: 0; width: 100%; height: auto; display: flex; flex-flow: row wrap; text-transform: uppercase; max-width: 450px; margin: 0 auto;][border=unset; padding: 0; width: auto; flex: 1; min-width: 200px]left info[/border][border=unset; padding: 0; width: auto; flex: 1; min-width: 200px; text-align: right]right info[/border][/border]
[/border][/border]{/slide}

{slide=[border=unset; padding: 0; background-color: var(--accent-1); width: auto; height: auto; padding: 1px 5px; line-height: .9; font-size: 1.5rem; font-weight: normal; font-variant: normal; font-family: var(--font-1); color: var(--secondary-color); margin: -7px; margin-top: -1px; visibility: visible; clip-path: var(--slide-clip-path);]Personal Info[/border]}[border=unset; padding: 0; width: auto; height: 100%; max-height:  var(--slide-max-height); position: relative; font-size: initial; line-height: 1.3; font-family: var(--font-2); color: var(--secondary-color); background-color: var(--text-bg);outline: 1px solid transparent; padding: 10px; margin: -7px; margin-top: -1px; visibility: visible; overflow: hidden;][border=unset; padding: 0; width: 100%; height: 100%; max-height:  var(--slide-max-height); padding-right: 200px;box-sizing: content-box;overflow-x: hidden;overflow-y: scroll;]lorem
[/border][/border]{/slide}

{slide=[border=unset; padding: 0; background-color: var(--accent-1); width: auto; height: auto; padding: 1px 5px; line-height: .9; font-size: 1.5rem; font-weight: normal; font-variant: normal; font-family: var(--font-1); color: var(--secondary-color); margin: -7px; margin-top: -1px; visibility: visible; clip-path: var(--slide-clip-path);]Equipment Abilities&[/border]}[border=unset; padding: 0; width: auto; height: 100%; max-height:  var(--slide-max-height); position: relative; font-size: initial; line-height: 1.3; font-family: var(--font-2); color: var(--secondary-color); background-color: var(--text-bg);outline: 1px solid transparent; padding: 10px; margin: -7px; margin-top: -1px; visibility: visible;overflow: hidden;][border=unset; padding: 0; width: 100%; height: 100%; max-height:  var(--slide-max-height); padding-right: 200px;box-sizing: content-box;overflow-x: hidden;overflow-y: scroll;]lorem[/border][/border]{/slide}

{slide=[border=unset; padding: 0; background-color: var(--accent-1); width: auto; height: auto; padding: 1px 5px; line-height: .9; font-size: 1.5rem; font-weight: normal; font-variant: normal; font-family: var(--font-1); color: var(--secondary-color); margin: -7px; margin-top: -1px; visibility: visible; clip-path: var(--slide-clip-path);]Accessories[/border]}[border=unset; padding: 0; width: auto; height: 100%; max-height:  var(--slide-max-height); position: relative; font-size: initial; line-height: 1.3; font-family: var(--font-2); color: var(--secondary-color); background-color: var(--text-bg);outline: 1px solid transparent; padding: 10px; margin: -7px; margin-top: -1px; visibility: visible;overflow: hidden;][border=unset; padding: 0; width: 100%; height: 100%; max-height:  var(--slide-max-height); padding-right: 200px;box-sizing: content-box;overflow-x: hidden;overflow-y: scroll;]lorem[/border][/border]{/slide}
[/accordion][/border][/border][/border][/border][/border]

 
You must log in or register to reply here.

Users who are viewing this thread

Total: 4 (members: 0, guests: 4)
Back
Top