Resource Fyurious Codes 2.0

[Fable]

[div class=infobox]Here is the second part of this BBCode set. You can use this for a Character Sheet or even an IC post if you want.

Face Claim
Optimal size: 300x500 px. Image will stretch to cover if smaller.
Put your image url for your face claim in this class in this section of the code:
[div class=code][class=faceclaim]background: url('IMG URL HERE') no-repeat;[/class][/div]

Character Name
[div class=code][div class=charactername]Character
[fa]fas fa-gem[/fa]Name[/div][/div]

Subheader
[div class=code][div class=subheader]Header[/div][/div] [/div][div class=tagbox][div class=tags]mobile friendly[/div][div class=tags]visible scroll[/div][div class=tags]monochrome[/div][div class=tags]multi-theme friendly[/div][div class=tags]character sheet[/div][div class=tags]ic post[/div] [/div]
[class=infobox] height:250px; max-width:700px; overflow:auto; margin:auto; padding:10px; box-sizing:border-box; background: #efefef; color:#000; font-size:13px; [/class] [class=tagbox] max-width:700px; margin:auto; padding:0px 10px 0px 10px; box-sizing:border-box; background: #efefef; color:#000; font-size:13px; [/class] [class=tags] display:inline-block; border-radius: 5px; padding:3px; background:#fff; color:#000; font-size:11px; border:1px solid rgba(0,0,0, 0.3); margin:5px 2px 5px 2px; [/class] [class=code] display:inline-block; border-radius: 5px; padding:3px; background:#fff; color:#000; font-size:11px; margin:5px 2px 5px 2px; [/class] [div class=fyuriwrapper][div class=topper][div class=charactername]Character
Name[/div][/div][div class=wrappertwo]

[div class=left][div class=faceclaim]

[/div][div class=textarea]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a finibus tortor, a pharetra odio. Fusce lacinia, nulla eu eleifend dapibus, nulla ipsum pulvinar velit, et ultrices tellus augue in est. Phasellus ut magna porta, placerat justo et, tincidunt lorem. Aliquam vitae consectetur massa. Nunc vitae orci justo. Quisque non eleifend nulla. Nam vehicula sem id ligula iaculis, vitae viverra nibh tempor. Curabitur blandit tortor sed quam tincidunt, eu sollicitudin neque malesuada. Maecenas felis mauris, volutpat eu mi in, mollis fermentum enim. Aliquam sagittis, augue id molestie vulputate, justo nibh mollis nulla, non elementum nibh ex ut enim.

[div class=subheader]Header[/div]
Sed quis ligula vel metus egestas porta. Sed pharetra pharetra odio id bibendum. Fusce faucibus eros ut tempus dignissim. Phasellus ut odio elementum, efficitur ante id, posuere lacus. Fusce volutpat, nulla et condimentum lacinia, enim augue volutpat dolor, at dapibus mi velit nec elit. Nullam nunc elit, congue vitae posuere nec, tincidunt iaculis ante. Nulla bibendum sollicitudin neque non dapibus. Duis blandit porta odio sit amet efficitur. Nulla consectetur libero a justo volutpat tincidunt. Sed nec risus mollis ipsum molestie aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nam luctus, sem a fermentum pulvinar, ipsum diam eleifend ex, vel aliquam risus enim nec nisl. Proin et aliquam tortor. Integer rutrum nunc quis eleifend viverra. In accumsan justo vel massa consectetur iaculis. Duis non ultricies erat, eget dapibus neque. Aenean imperdiet nulla dolor. Donec scelerisque odio nisi, ac varius arcu pretium quis. Aliquam interdum sit amet nisi id pellentesque. Proin ac posuere dui, et tempor neque. Fusce eget mi eu tellus consectetur consequat. Morbi congue purus vel mauris laoreet dictum. Vivamus varius, justo posuere malesuada pharetra, dui odio ultrices neque, vitae malesuada velit odio nec sapien. Mauris faucibus mattis interdum.

[div class=subheader]Header[/div]
Pellentesque luctus quam sed tincidunt interdum. Donec rutrum quam at nisl dictum venenatis. Sed sit amet facilisis ex, in tincidunt eros. Quisque tincidunt tellus nec est vehicula, eget posuere nisi cursus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec auctor at est id lobortis. In hac habitasse platea dictumst. Cras mattis ac lorem mollis iaculis. Cras non arcu tincidunt, rutrum sem id, sollicitudin leo. Donec metus quam, venenatis ut metus eu, fermentum egestas nisl.

Maecenas purus tellus, euismod at eros a, maximus luctus elit. Aenean ut consequat augue. Donec vel fermentum tortor, eget rutrum risus. Fusce erat odio, fermentum in nibh cursus, mollis sagittis est. Sed tellus metus, commodo ac fermentum sed, suscipit in risus. Aenean dapibus augue a turpis interdum feugiat. Etiam blandit quis libero non dapibus. In hac habitasse platea dictumst. In pellentesque, sem quis scelerisque consequat, leo ligula bibendum lorem, vitae cursus diam leo in augue. Vestibulum gravida, dui vel semper ullamcorper, sapien purus venenatis sem, nec pretium massa mauris non odio.[/div][/div] [/div][/div][div class=fyuricredit]code/design by Fable [/div]

.

.

[class=fyuriwrapper] max-width:1300px; min-width:300px; margin:auto; background:#e5e6e5; padding:0px 0px 10px 0px; box-sizing:border-box; [/class] [class=topper] min-height:200px; background:#1a191a; color:#fff; text-align:center; text-transform:uppercase; overflow:hidden; padding:10px; box-sizing:border-box; [/class] [class=charactername] display: flex; align-items: center; justify-content: center; flex-direction: column; min-height:200px; center; color:#fff; font-family:'Poiret One', Verdana; font-size:50px; font-weight:bold; line-height:45px; letter-spacing:3px; [/class] [class=wrappertwo] padding:10px 10px 0px 10px; box-sizing:border-box; [/class] [class=left] width: 300px; border:10px solid white; [/class] [class=faceclaim] display:inline-block; vertical-align:top; width:300px; margin:auto; height:500px; text-align:justify; background: url('https://i.imgur.com/n9SjrN1.jpg') no-repeat; background-size:cover; line-height:0; [/class] [class=textarea] flex: 1; margin-left:10px; height:520px; overflow:auto; min-width:300px; text-align:justify; padding:5px; box-sizing:border-box; color:#1a191a; [/class] [class=subheader] border-bottom:1px solid #1a191a; display:inline; color:#1a191a; font-family:'Poiret One', Verdana; font-size:30px; font-weight:bold; line-height:40px; padding-right:150px; [/class] [class=fyuricredit] max-width:1300px; margin:auto; font-family:'Raleway', Verdana; font-size:10px; opacity:0.5; [/class]

Spoiler: CODE

[div class=fyuriwrapper][div class=topper][div class=charactername]Character
[fa]fas fa-gem[/fa]Name[/div][/div][div class=wrappertwo][div=display: flex;  flex-wrap: wrap;][div class=left][div class=faceclaim][/div] [/div][div class=textarea]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a finibus tortor, a pharetra odio. Fusce lacinia, nulla eu eleifend dapibus, nulla ipsum pulvinar velit, et ultrices tellus augue in est. Phasellus ut magna porta, placerat justo et, tincidunt lorem. Aliquam vitae consectetur massa. Nunc vitae orci justo. Quisque non eleifend nulla. Nam vehicula sem id ligula iaculis, vitae viverra nibh tempor. Curabitur blandit tortor sed quam tincidunt, eu sollicitudin neque malesuada. Maecenas felis mauris, volutpat eu mi in, mollis fermentum enim. Aliquam sagittis, augue id molestie vulputate, justo nibh mollis nulla, non elementum nibh ex ut enim.

[div class=subheader]Header[/div]
Sed quis ligula vel metus egestas porta. Sed pharetra pharetra odio id bibendum. Fusce faucibus eros ut tempus dignissim. Phasellus ut odio elementum, efficitur ante id, posuere lacus. Fusce volutpat, nulla et condimentum lacinia, enim augue volutpat dolor, at dapibus mi velit nec elit. Nullam nunc elit, congue vitae posuere nec, tincidunt iaculis ante. Nulla bibendum sollicitudin neque non dapibus. Duis blandit porta odio sit amet efficitur. Nulla consectetur libero a justo volutpat tincidunt. Sed nec risus mollis ipsum molestie aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nam luctus, sem a fermentum pulvinar, ipsum diam eleifend ex, vel aliquam risus enim nec nisl. Proin et aliquam tortor. Integer rutrum nunc quis eleifend viverra. In accumsan justo vel massa consectetur iaculis. Duis non ultricies erat, eget dapibus neque. Aenean imperdiet nulla dolor. Donec scelerisque odio nisi, ac varius arcu pretium quis. Aliquam interdum sit amet nisi id pellentesque. Proin ac posuere dui, et tempor neque. Fusce eget mi eu tellus consectetur consequat. Morbi congue purus vel mauris laoreet dictum. Vivamus varius, justo posuere malesuada pharetra, dui odio ultrices neque, vitae malesuada velit odio nec sapien. Mauris faucibus mattis interdum.

[div class=subheader]Header[/div]
Pellentesque luctus quam sed tincidunt interdum. Donec rutrum quam at nisl dictum venenatis. Sed sit amet facilisis ex, in tincidunt eros. Quisque tincidunt tellus nec est vehicula, eget posuere nisi cursus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec auctor at est id lobortis. In hac habitasse platea dictumst. Cras mattis ac lorem mollis iaculis. Cras non arcu tincidunt, rutrum sem id, sollicitudin leo. Donec metus quam, venenatis ut metus eu, fermentum egestas nisl.

Maecenas purus tellus, euismod at eros a, maximus luctus elit. Aenean ut consequat augue. Donec vel fermentum tortor, eget rutrum risus. Fusce erat odio, fermentum in nibh cursus, mollis sagittis est. Sed tellus metus, commodo ac fermentum sed, suscipit in risus. Aenean dapibus augue a turpis interdum feugiat. Etiam blandit quis libero non dapibus. In hac habitasse platea dictumst. In pellentesque, sem quis scelerisque consequat, leo ligula bibendum lorem, vitae cursus diam leo in augue. Vestibulum gravida, dui vel semper ullamcorper, sapien purus venenatis sem, nec pretium massa mauris non odio.[/div][/div] [/div][/div][nobr][div class=fyuricredit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-9748327]code/design[/url] by @Fyuri[/div][comment]do not remove/alter credit[/comment]
[div=display:none;][font=Poiret One].[/font][/div]
[div=display:none;][font=Raleway].[/font][/div]
[class=fyuriwrapper]
max-width:1300px;
min-width:300px;
margin:auto;
background:#e5e6e5;
padding:0px 0px 10px 0px;
box-sizing:border-box;
[/class]

[class=topper]
min-height:200px;
background:#1a191a;
color:#fff;
text-align:center;
text-transform:uppercase;
overflow:hidden;
padding:10px;
box-sizing:border-box;
[/class]

[class=charactername]
  display: flex;
  align-items: center;
  justify-content: center;
flex-direction: column;
min-height:200px;
center;
color:#fff;
font-family:'Poiret One', Verdana;
font-size:50px;
font-weight:bold;
line-height:45px;
letter-spacing:3px;
[/class]

[class=wrappertwo]
padding:10px 10px 0px 10px;
box-sizing:border-box;
[/class]

[class=left]
width: 300px;
border:10px solid white;
[/class]

[class=faceclaim]
display:inline-block;
vertical-align:top;
width:300px;
margin:auto;
height:500px;
text-align:justify;
background: url('https://via.placeholder.com/300x500') no-repeat;
background-size:cover;
line-height:0;
[/class]

[class=textarea]
flex: 1;
margin-left:10px;
height:520px;
overflow:auto;
min-width:300px;
text-align:justify;
padding:5px;
box-sizing:border-box;
color:#1a191a;
[/class]

[class=subheader]
border-bottom:1px solid #1a191a;
display:inline;
color:#1a191a;
font-family:'Poiret One', Verdana;
font-size:30px;
font-weight:bold;
line-height:40px;
padding-right:150px;
[/class]

[class=fyuricredit]
max-width:1300px;
margin:auto;
font-family:'Raleway', Verdana;
font-size:10px;
opacity:0.5;
[/class]
[/nobr]

 

[Fable]

[div class=infobox]It seems most really like to use my CS codes over everything else. Here is another CS variant. Still minimal.

Face Claim
Optimal size: 300px width minimum, anything smaller will appear bad.
Put your image url for your face claim in this class in this section of the code:
[div class=code][div class=faceclaim][img]IMG URL HERE[/img][/div][/div]

Left Headers
Headers within the black background area.
[div class=code][div class=header]header[/div][/div]

Main Header
Header in the main text area.
[div class=code][div class=header2]Header[/div][/div]

Text Area
If you do not wrap your text in these classes you will not have the dot-line affect on the left of a text section.
[div class=code][div class=txtbox][div class=dot][/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/div][/div] [/div][div class=tagbox][div class=tags]mobile friendly[/div][div class=tags]no scroll[/div][div class=tags]light theme best[/div][div class=tags]character sheet[/div] [/div]
[class=infobox] height:250px; max-width:700px; overflow:auto; margin:auto; padding:10px; box-sizing:border-box; background: #efefef; color:#000; font-size:13px; [/class] [class=tagbox] max-width:700px; margin:auto; padding:0px 10px 0px 10px; box-sizing:border-box; background: #efefef; color:#000; font-size:13px; [/class] [class=tags] display:inline-block; border-radius: 5px; padding:3px; background:#fff; color:#000; font-size:11px; border:1px solid rgba(0,0,0, 0.3); margin:5px 2px 5px 2px; [/class] [class=code] display:inline-block; border-radius: 5px; padding:3px; background:#fff; color:#000; font-size:11px; margin:5px 2px 5px 2px; [/class] [div class=fyuriwrapper][div class=flex][div class=left][div class=faceclaim]

[/div][div class=under][div class=header]Character Name[/div]
Age:

Gender:

Species:

Role:

[div class=header]Extra[/div]
Lorem ipsum dolor sit amet.[/div] [/div]

[div class=textarea][div class=header2]Header

[div class=txtbox][div class=dot][/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec porttitor sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur bibendum nibh quis ante tempor auctor sit amet in arcu. Sed placerat diam id porttitor condimentum. Etiam pretium purus et sapien auctor auctor. Praesent porttitor tristique lobortis. Aenean eu urna quis leo vestibulum mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/div]
[div class=header2]Header[/div]
[div class=txtbox][div class=dot][/div]Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse et bibendum tellus. Etiam lectus sapien, accumsan ut erat ut, iaculis suscipit quam. Duis vel sapien placerat, dapibus augue a, iaculis lectus. Mauris enim tortor, ultrices sed imperdiet sit amet, facilisis ac odio. Vestibulum ut eleifend est. Aenean aliquam in quam eu iaculis.[/div]
[div class=header2]Header[/div]
[div class=txtbox][div class=dot][/div]Duis semper ante nec fermentum lobortis. Vestibulum non accumsan libero, at interdum eros. Donec vulputate non est sit amet condimentum. In id lectus sit amet eros gravida accumsan vulputate vitae justo. Ut vel diam accumsan, dictum nibh et, dictum mi. Praesent quis molestie eros. Proin ultricies turpis ac lorem rutrum iaculis ut aliquam massa. Mauris blandit libero nisi, at pellentesque ex commodo et. Fusce laoreet neque et dui hendrerit, molestie fermentum risus interdum. Etiam at enim tellus. Pellentesque accumsan dolor semper magna scelerisque, sit amet lacinia odio elementum. Sed eu lectus eget lectus feugiat ultrices. Fusce odio mauris, ullamcorper sed eros vel, mattis ullamcorper ex. Sed eros elit, aliquet quis nisi id, iaculis maximus ipsum. Vestibulum vestibulum sit amet augue sit amet porta.[/div]
[div class=header2]Header[/div]
[div class=txtbox][div class=dot][/div]Vestibulum gravida, ligula quis eleifend scelerisque, diam arcu euismod nisl, sit amet dignissim neque felis in nulla. Pellentesque vitae malesuada eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed elementum consequat molestie. Donec sed massa eget urna eleifend condimentum. Cras erat nisl, rutrum eget felis a, volutpat ultrices ligula. Vestibulum sed felis mattis, facilisis felis nec, pellentesque dui. Aliquam erat volutpat. Phasellus sed sem non ante ultricies lacinia ut vitae arcu. Duis nec orci ipsum. Aliquam congue, erat nec hendrerit ornare, nisi ipsum ornare enim, non condimentum quam purus non turpis. Suspendisse nisl est, fermentum a tincidunt non, molestie at lectus. Aenean ac elit in nulla fermentum feugiat. Phasellus pellentesque risus ut scelerisque maximus.[/div] [/div][/div][/div][/div][div class=fyuricredit]code by Fable [/div]

.

.

[class=fyuriwrapper] max-width:900px; margin:auto; font-size:15px; [/class] [class=flex] display: flex; flex-wrap: wrap; [/class] [class=left] min-width: 300px; max-width:350px; overflow:hidden; background:#000; [/class] [class=faceclaim] -webkit-clip-path: polygon(0 0, 100% 0, 100% 78%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 78%, 0% 100%); overflow:hidden; line-height:0; [/class] [class=under] color:#fff; padding:5px; box-sizing:border-box; [/class] [class=header] position:relative; display:inline-block; font-family:'Noto Sans', Verdana; font-size:30px; text-transform:uppercase; [/class] [class=textarea] padding:0px 5px 0px 5px; box-sizing:border-box; [/class] [class=header2] display:inline-block; font-family:'Squada One', Verdana; font-size:40px; text-transform:uppercase; line-height:30px; letter-spacing:1px; [/class] [class=txtbox] display:inline-block; vertical-align: top; position:relative; border-left:2px solid black; padding:0px 0px 0px 5px; margin:5px 0px 0px 10px; [/class] [class=dot] position:absolute; top:-5px; left:-5px; width:10px; height:10px; background:black; border-radius:50%; [/class] [class=fyuricredit] max-width:900px; margin:auto; opacity:0.5; font-size:10px; [/class]

Spoiler: CODE

[div class=fyuriwrapper][div class=flex][div class=left][div class=faceclaim][img]https://via.placeholder.com/300x400[/img][/div][div class=under][div class=header]Character Name[/div]
Age: 

Gender: 

Species:

Role: 

[div class=header]Extra[/div]
Lorem ipsum dolor sit amet.[/div] [/div][div=flex: 1;][div class=textarea][div class=header2]Header[/div]
[div class=txtbox][div class=dot][/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec porttitor sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur bibendum nibh quis ante tempor auctor sit amet in arcu. Sed placerat diam id porttitor condimentum. Etiam pretium purus et sapien auctor auctor. Praesent porttitor tristique lobortis. Aenean eu urna quis leo vestibulum mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/div]
[div class=header2]Header[/div]
[div class=txtbox][div class=dot][/div]Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse et bibendum tellus. Etiam lectus sapien, accumsan ut erat ut, iaculis suscipit quam. Duis vel sapien placerat, dapibus augue a, iaculis lectus. Mauris enim tortor, ultrices sed imperdiet sit amet, facilisis ac odio. Vestibulum ut eleifend est. Aenean aliquam in quam eu iaculis.[/div]
[div class=header2]Header[/div]
[div class=txtbox][div class=dot][/div]Duis semper ante nec fermentum lobortis. Vestibulum non accumsan libero, at interdum eros. Donec vulputate non est sit amet condimentum. In id lectus sit amet eros gravida accumsan vulputate vitae justo. Ut vel diam accumsan, dictum nibh et, dictum mi. Praesent quis molestie eros. Proin ultricies turpis ac lorem rutrum iaculis ut aliquam massa. Mauris blandit libero nisi, at pellentesque ex commodo et. Fusce laoreet neque et dui hendrerit, molestie fermentum risus interdum. Etiam at enim tellus. Pellentesque accumsan dolor semper magna scelerisque, sit amet lacinia odio elementum. Sed eu lectus eget lectus feugiat ultrices. Fusce odio mauris, ullamcorper sed eros vel, mattis ullamcorper ex. Sed eros elit, aliquet quis nisi id, iaculis maximus ipsum. Vestibulum vestibulum sit amet augue sit amet porta.[/div]
[div class=header2]Header[/div]
[div class=txtbox][div class=dot][/div]Vestibulum gravida, ligula quis eleifend scelerisque, diam arcu euismod nisl, sit amet dignissim neque felis in nulla. Pellentesque vitae malesuada eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed elementum consequat molestie. Donec sed massa eget urna eleifend condimentum. Cras erat nisl, rutrum eget felis a, volutpat ultrices ligula. Vestibulum sed felis mattis, facilisis felis nec, pellentesque dui. Aliquam erat volutpat. Phasellus sed sem non ante ultricies lacinia ut vitae arcu. Duis nec orci ipsum. Aliquam congue, erat nec hendrerit ornare, nisi ipsum ornare enim, non condimentum quam purus non turpis. Suspendisse nisl est, fermentum a tincidunt non, molestie at lectus. Aenean ac elit in nulla fermentum feugiat. Phasellus pellentesque risus ut scelerisque maximus.[/div] [/div][/div][/div][/div][nobr][div class=fyuricredit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-9775417]code[/url] by @Fyuri[/div][comment]do not remove/alter credit[/comment]
[div=display:none;][font=Noto Sans].[/font][/div]
[div=display:none;][font=Squada One].[/font][/div]
[class=fyuriwrapper]
max-width:900px;
margin:auto;
font-size:15px;
[/class]

[class=flex]
display: flex;
flex-wrap: wrap;
[/class]

[class=left]
min-width: 300px;
max-width:350px;
overflow:hidden;
background:#000;
[/class]

[class=faceclaim]
-webkit-clip-path: polygon(0 0, 100% 0, 100% 78%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 78%, 0% 100%);
overflow:hidden;
line-height:0;
[/class]

[class=under]
color:#fff;
padding:5px;
box-sizing:border-box;
[/class]

[class=header]
position:relative;
display:inline-block;
font-family:'Noto Sans', Verdana;
font-size:30px;
text-transform:uppercase;
[/class]

[class=textarea]
padding:0px 5px 0px 5px;
box-sizing:border-box;
[/class]

[class=header2]
display:inline-block;
font-family:'Squada One', Verdana;
font-size:40px;
text-transform:uppercase;
line-height:30px;
letter-spacing:1px;
[/class]

[class=txtbox]
display:inline-block;
vertical-align: top;
position:relative;
border-left:2px solid black;
padding:0px 0px 0px 5px;
margin:5px 0px 0px 10px;
[/class]

[class=dot]
position:absolute;
top:-5px;
left:-5px;
width:10px;
height:10px;
background:black;
border-radius:50%;
[/class]

[class=fyuricredit]
max-width:900px;
margin:auto;
opacity:0.5;
font-size:10px;
[/class]
[/nobr]

 

[Fable]

[div class=infobox]Another very minimal/simple design, this time for a partner search though! This is mostly for desktop users with a small hover effect to sort of highlight a section when the cursor is within a certain area. You can edit the colors easily enough to what you want.

Change Colors
In order to change the colors in the left-side box you need to just find the div classes from leftboxone through leftboxfive. Any class with 'leftbox' in the name is where you would change the background color. Example:
[div class=code][class=leftboxone]
background-color: #636E7F;
width: 50px;
[/class][/div]
Just swap out the background color for the color you want.

Headers
[div class=code][div class=header]Header[/div][/div]

Adding Additional Sections
Currently this code is set up only for the five sections you see in this live example. You can add more yourself if you are comfortable enough to do so. You will simply have to credit a new leftboxnumber class within the NOBR tag area. I suggest just going with ascending numbers that match the other class name order to keep things organized.

Here is an entire section code. Once you have created a new leftbox class, put the new left box class name where the text is bold.
[div class=code][div class=box][div= display: flex; flex-wrap: wrap;][div class=leftboxone][/div][div class=boxmain][div class=header]General[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/div][/div][/div][/div] [/div][div class=tagbox][div class=tags]mobile friendly[/div][div class=tags]no scroll[/div][div class=tags]light theme best[/div][div class=tags]multi-theme friendly[/div][div class=tags]desktop best[/div][div class=tags]hover effect[/div][div class=tags]partner search[/div] [/div] [class=infobox] height:250px; max-width:700px; overflow:auto; margin:auto; padding:10px; box-sizing:border-box; background: #efefef; color:#000; font-size:13px; [/class] [class=tagbox] max-width:700px; margin:auto; padding:0px 10px 0px 10px; box-sizing:border-box; background: #efefef; color:#000; font-size:13px; [/class] [class=tags] display:inline-block; border-radius: 5px; padding:3px; background:#fff; color:#000; font-size:11px; border:1px solid rgba(0,0,0, 0.3); margin:5px 2px 5px 2px; [/class] [class=code] display:inline-block; border-radius: 5px; padding:3px; background:#fff; color:#000; font-size:11px; margin:5px 2px 5px 2px; [/class][div class=fyuriwrapper][div class=box]

[div class=leftboxone]

[div class=boxmain][div class=header]General[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec rhoncus orci. Aenean non sem eu sapien faucibus varius eget ac ipsum. In fermentum pharetra neque vel viverra. Aenean mattis vestibulum orci, eget pretium sem lacinia non. Sed a purus vel tellus vehicula placerat nec vel eros. Donec metus nisi, sagittis at lacinia et, convallis vel nisl. Quisque aliquet, orci sit amet pellentesque sodales, purus risus aliquet ex, non varius est mauris in sapien. Phasellus commodo mi nisl, quis lacinia nisi eleifend vel. Duis ut enim quis ante commodo faucibus non non orci. Ut purus tellus, faucibus at lorem vel, ullamcorper eleifend enim. Praesent nec sem imperdiet, dictum sapien ac, viverra est.[/div][/div][/div] [div class=box]

[div class=leftboxtwo]

[div class=boxmain][div class=header]Writing Style[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec rhoncus orci. Aenean non sem eu sapien faucibus varius eget ac ipsum. In fermentum pharetra neque vel viverra. Aenean mattis vestibulum orci, eget pretium sem lacinia non. Sed a purus vel tellus vehicula placerat nec vel eros. Donec metus nisi, sagittis at lacinia et, convallis vel nisl. Quisque aliquet, orci sit amet pellentesque sodales, purus risus aliquet ex, non varius est mauris in sapien. Phasellus commodo mi nisl, quis lacinia nisi eleifend vel. Duis ut enim quis ante commodo faucibus non non orci. Ut purus tellus, faucibus at lorem vel, ullamcorper eleifend enim. Praesent nec sem imperdiet, dictum sapien ac, viverra est.[/div][/div][/div] [div class=box]

[div class=leftboxthree]

[div class=boxmain][div class=header]Prefences[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec rhoncus orci. Aenean non sem eu sapien faucibus varius eget ac ipsum. In fermentum pharetra neque vel viverra. Aenean mattis vestibulum orci, eget pretium sem lacinia non. Sed a purus vel tellus vehicula placerat nec vel eros. Donec metus nisi, sagittis at lacinia et, convallis vel nisl. Quisque aliquet, orci sit amet pellentesque sodales, purus risus aliquet ex, non varius est mauris in sapien. Phasellus commodo mi nisl, quis lacinia nisi eleifend vel. Duis ut enim quis ante commodo faucibus non non orci. Ut purus tellus, faucibus at lorem vel, ullamcorper eleifend enim. Praesent nec sem imperdiet, dictum sapien ac, viverra est.[/div][/div][/div] [div class=box]

[div class=leftboxfour]

[div class=boxmain][div class=header]Plots[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec rhoncus orci. Aenean non sem eu sapien faucibus varius eget ac ipsum. In fermentum pharetra neque vel viverra. Aenean mattis vestibulum orci, eget pretium sem lacinia non. Sed a purus vel tellus vehicula placerat nec vel eros. Donec metus nisi, sagittis at lacinia et, convallis vel nisl. Quisque aliquet, orci sit amet pellentesque sodales, purus risus aliquet ex, non varius est mauris in sapien. Phasellus commodo mi nisl, quis lacinia nisi eleifend vel. Duis ut enim quis ante commodo faucibus non non orci. Ut purus tellus, faucibus at lorem vel, ullamcorper eleifend enim. Praesent nec sem imperdiet, dictum sapien ac, viverra est.[/div][/div][/div] [div class=box]

[div class=leftboxfive]

[div class=boxmain][div class=header]Pairings[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec rhoncus orci. Aenean non sem eu sapien faucibus varius eget ac ipsum. In fermentum pharetra neque vel viverra. Aenean mattis vestibulum orci, eget pretium sem lacinia non. Sed a purus vel tellus vehicula placerat nec vel eros. Donec metus nisi, sagittis at lacinia et, convallis vel nisl. Quisque aliquet, orci sit amet pellentesque sodales, purus risus aliquet ex, non varius est mauris in sapien. Phasellus commodo mi nisl, quis lacinia nisi eleifend vel. Duis ut enim quis ante commodo faucibus non non orci. Ut purus tellus, faucibus at lorem vel, ullamcorper eleifend enim. Praesent nec sem imperdiet, dictum sapien ac, viverra est.[/div][/div][/div][/div] [div class=fyuricredit]code by Fable [/div]

.

[class=fyuriwrapper] max-width:900px; margin:auto; padding-top:15px; [/class] [class=header] font-family:'Viga', Verdana; font-size:35px; line-height:27px; [/class] [class name=boxmain] flex: 1; padding:25px; box-sizing:border-box; text-align:justify; transition: ease-in-out 1s; line-height:21px; [/class] [class name=boxmain state=hover] padding:25px; box-sizing:border-box; transition: ease-in-out 1s; [/class] [class name=box] position:relative; z-index:15; display: flex; flex-wrap: wrap; transition: ease-in-out 0.5s; [/class] [class name=box state=hover] position:relative; z-index:50; display: flex; flex-wrap: wrap; -webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5); box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5); transition: ease-in-out 0.5s; [/class] [class=leftboxone] background-color: #636E7F; width: 50px; [/class] [class=leftboxtwo] background-color: #76808F; width: 50px; [/class] [class=leftboxthree] background-color: #8A929F; width: 50px; [/class] [class=leftboxfour] background-color: #9DA4AF; width: 50px; [/class] [class=leftboxfive] background-color: #B1B6BF; width: 50px; [/class] [class=fyuricredit] opacity:0.5; font-size:10px; max-width:900px; margin:auto; [/class]

Spoiler: CODE

[div class=fyuriwrapper][div class=box][div=  display: flex;  flex-wrap: wrap;][div class=leftboxone][/div][div class=boxmain][div class=header]General[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec rhoncus orci. Aenean non sem eu sapien faucibus varius eget ac ipsum. In fermentum pharetra neque vel viverra. Aenean mattis vestibulum orci, eget pretium sem lacinia non. Sed a purus vel tellus vehicula placerat nec vel eros. Donec metus nisi, sagittis at lacinia et, convallis vel nisl. Quisque aliquet, orci sit amet pellentesque sodales, purus risus aliquet ex, non varius est mauris in sapien. Phasellus commodo mi nisl, quis lacinia nisi eleifend vel. Duis ut enim quis ante commodo faucibus non non orci. Ut purus tellus, faucibus at lorem vel, ullamcorper eleifend enim. Praesent nec sem imperdiet, dictum sapien ac, viverra est.[/div][/div][/div] [div class=box][div=  display: flex;  flex-wrap: wrap;][div class=leftboxtwo][/div][div class=boxmain][div class=header]Writing Style[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec rhoncus orci. Aenean non sem eu sapien faucibus varius eget ac ipsum. In fermentum pharetra neque vel viverra. Aenean mattis vestibulum orci, eget pretium sem lacinia non. Sed a purus vel tellus vehicula placerat nec vel eros. Donec metus nisi, sagittis at lacinia et, convallis vel nisl. Quisque aliquet, orci sit amet pellentesque sodales, purus risus aliquet ex, non varius est mauris in sapien. Phasellus commodo mi nisl, quis lacinia nisi eleifend vel. Duis ut enim quis ante commodo faucibus non non orci. Ut purus tellus, faucibus at lorem vel, ullamcorper eleifend enim. Praesent nec sem imperdiet, dictum sapien ac, viverra est.[/div][/div][/div] [div class=box][div=  display: flex;  flex-wrap: wrap;][div class=leftboxthree][/div][div class=boxmain][div class=header]Prefences[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec rhoncus orci. Aenean non sem eu sapien faucibus varius eget ac ipsum. In fermentum pharetra neque vel viverra. Aenean mattis vestibulum orci, eget pretium sem lacinia non. Sed a purus vel tellus vehicula placerat nec vel eros. Donec metus nisi, sagittis at lacinia et, convallis vel nisl. Quisque aliquet, orci sit amet pellentesque sodales, purus risus aliquet ex, non varius est mauris in sapien. Phasellus commodo mi nisl, quis lacinia nisi eleifend vel. Duis ut enim quis ante commodo faucibus non non orci. Ut purus tellus, faucibus at lorem vel, ullamcorper eleifend enim. Praesent nec sem imperdiet, dictum sapien ac, viverra est.[/div][/div][/div] [div class=box][div=  display: flex;  flex-wrap: wrap;][div class=leftboxfour][/div][div class=boxmain][div class=header]Plots[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec rhoncus orci. Aenean non sem eu sapien faucibus varius eget ac ipsum. In fermentum pharetra neque vel viverra. Aenean mattis vestibulum orci, eget pretium sem lacinia non. Sed a purus vel tellus vehicula placerat nec vel eros. Donec metus nisi, sagittis at lacinia et, convallis vel nisl. Quisque aliquet, orci sit amet pellentesque sodales, purus risus aliquet ex, non varius est mauris in sapien. Phasellus commodo mi nisl, quis lacinia nisi eleifend vel. Duis ut enim quis ante commodo faucibus non non orci. Ut purus tellus, faucibus at lorem vel, ullamcorper eleifend enim. Praesent nec sem imperdiet, dictum sapien ac, viverra est.[/div][/div][/div] [div class=box][div=  display: flex;  flex-wrap: wrap;][div class=leftboxfive][/div][div class=boxmain][div class=header]Pairings[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec rhoncus orci. Aenean non sem eu sapien faucibus varius eget ac ipsum. In fermentum pharetra neque vel viverra. Aenean mattis vestibulum orci, eget pretium sem lacinia non. Sed a purus vel tellus vehicula placerat nec vel eros. Donec metus nisi, sagittis at lacinia et, convallis vel nisl. Quisque aliquet, orci sit amet pellentesque sodales, purus risus aliquet ex, non varius est mauris in sapien. Phasellus commodo mi nisl, quis lacinia nisi eleifend vel. Duis ut enim quis ante commodo faucibus non non orci. Ut purus tellus, faucibus at lorem vel, ullamcorper eleifend enim. Praesent nec sem imperdiet, dictum sapien ac, viverra est.[/div][/div][/div][/div] [nobr][div class=fyuricredit][URL=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-9780719]code[/URL] by @Fyuri[/div][comment]do not remove/alter credit[/comment]
[div=display:none;][font=Viga].[/font][/div]
[class=fyuriwrapper]
max-width:900px;
margin:auto;
padding-top:15px;
[/class]

[class=header]
font-family:'Viga', Verdana;
font-size:35px;
line-height:27px;
[/class]

[class name=boxmain]
flex: 1;
padding:25px;
box-sizing:border-box;
text-align:justify;
transition: ease-in-out 1s;
line-height:21px;
[/class]

[class name=boxmain state=hover]
padding:25px;
box-sizing:border-box;
transition: ease-in-out 1s;
[/class]

[class name=box]
position:relative;
z-index:15;
display: flex;
flex-wrap: wrap;
transition: ease-in-out 0.5s;
[/class]

[class name=box state=hover]
position:relative;
z-index:50;
display: flex;
flex-wrap: wrap;
-webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);
transition: ease-in-out 0.5s;
[/class]

[class=leftboxone]
background-color: #636E7F;
width: 50px;
[/class]

[class=leftboxtwo]
background-color: #76808F;
width: 50px;
[/class]

[class=leftboxthree]
background-color: #8A929F;
width: 50px;
[/class]

[class=leftboxfour]
background-color: #9DA4AF;
width: 50px;
[/class]

[class=leftboxfive]
background-color: #B1B6BF;
width: 50px;
[/class]

[class=fyuricredit]
opacity:0.5;
font-size:10px;
max-width:900px;
margin:auto;
[/class]
[/nobr]

 

[Fable]

[div class=infobox]A simple white/red interest check.

Change Red Color
If you want to change the red color to something else, simple change the #c30000 hex color to what you want.

Main Header
[div class=code][div class=mainheader]Header[/div][/div]

Sub-Header
[div class=code][div class=subheadpad][div class=subheaderred]Header[/div][/div][/div]

Contact Info
Please remember to follow the rules regarding offsite contact information!
You will have to find the Font Awesome icon code for what you want specifically using the FA BBCode tag and then at the end of the div putting what info you want there.
[div class=code][div class=icon][div class=iconwrap][fa]fas fa-envelope[/fa][/div][/div] PM[/div] [/div][div class=tagbox][div class=tags]mobile friendly[/div][div class=tags]no scroll[/div][div class=tags]light theme best[/div][div class=tags]desktop best[/div][div class=tags]interest check[/div] [/div]
[class=infobox] height:250px; max-width:700px; overflow:auto; margin:auto; padding:10px; box-sizing:border-box; background: #efefef; color:#000; font-size:13px; [/class] [class=tagbox] max-width:700px; margin:auto; padding:0px 10px 0px 10px; box-sizing:border-box; background: #efefef; color:#000; font-size:13px; [/class] [class=tags] display:inline-block; border-radius: 5px; padding:3px; background:#fff; color:#000; font-size:11px; border:1px solid rgba(0,0,0, 0.3); margin:5px 2px 5px 2px; [/class] [class=code] display:inline-block; border-radius: 5px; padding:3px; background:#fff; color:#000; font-size:11px; margin:5px 2px 5px 2px; [/class][div class=fyuriwrapper][div class=box][div class=text][div class=mainheader]Header[/div][div class=linebreak][/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent congue mollis lorem, ut porttitor elit vulputate vel. Proin faucibus purus quis metus placerat, in sollicitudin magna mattis. Vivamus elementum porttitor condimentum. Vivamus semper laoreet bibendum. Sed ut ipsum ligula. Maecenas est lorem, fermentum sit amet ipsum vel, rhoncus fringilla sapien. Etiam fringilla arcu nibh, at congue nisi convallis quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc a lorem eu neque semper varius. Quisque elementum laoreet elit et lacinia. Morbi ac augue lorem. Nulla tristique volutpat neque vel facilisis.

[div class=subheadpad][div class=subheaderred]Header[/div][/div]Quisque sit amet bibendum quam, sed efficitur felis. Curabitur eget odio sed nunc mollis vestibulum vitae condimentum eros. Duis at vestibulum magna. Maecenas vel nibh posuere, ultricies justo dapibus, aliquam leo. Ut vitae est in sem convallis pharetra et in enim. Etiam vitae rutrum tortor. Mauris egestas semper faucibus. Curabitur ut vehicula justo. Suspendisse vel augue vel nisi eleifend lacinia.

[div class=subheadpad][div class=subheaderred]Contact[/div][/div]Sed dolor tortor, mollis eget feugiat sed, egestas a nisi. Fusce venenatis gravida urna a porta. Morbi id posuere justo. Morbi interdum dictum orci eu malesuada. Duis pulvinar eleifend vestibulum. Donec at gravida augue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

[div class=icon][div class=iconwrap][/div][/div] PM
[div class=icon][div class=iconwrap][/div][/div] Discord
[div class=icon][div class=iconwrap][/div][/div] Skype
[/div][/div][/div][div class=fyuricredit]code by Fable [/div] [class=fyuriwrapper] width:100%; min-height:300px; background: url('https://i.imgur.com/kZataXd.png'); padding:50px 0px 50px 0px; [/class] [class=box] min-height:300px; display: flex; align-items: center; justify-content: center; [/class] [class=text] position:relative; z-index:10; max-width:900px; background:rgba(255,255,255, 0.8); color:#8e8e8e; padding:10px; box-sizing:border-box; [/class] [class=mainheader] position:relative; z-index:15; margin-top:-60px; margin-bottom:-10px; color:#c30000; font-family:'Viga',Verdana; font-size:60px; text-align:center; letter-spacing:1px; [/class] [class name=title maxWidth=400px] font-size: 24px; [/class] [class=linebreak] width:90%; height:5px; margin:auto; border-bottom: 1px solid #cfcfcf; [/class] [class=subheadpad] margin-bottom:10px; [/class] [class=subheaderred] display:inline-block; background:#c30000; padding:0px 5px 0px 5px; box-sizing:border-box; color:#fff; font-family: 'Viga', Verdana; font-size:30px; font-weight:bold; letter-spacing:1px; line-height: 1; -moz-transform: skew(-15deg, 0deg); -webkit-transform: skew(-15deg, 0deg); -o-transform: skew(-15deg, 0deg); -ms-transform: skew(-15deg, 0deg); transform: skew(-15deg, 0deg); [/class] [class=iconwrap] width:25px; height:25px; display: flex; align-items: center; justify-content: center; [/class] [class=icon] display:inline-block; width:25px; height:25px; color:#c30000; border-radius:50%; border:2px solid #c30000; margin:3px; [/class] [class=fyuricredit] opacity:0.5; font-size:10px; [/class]

Spoiler: CODE

[div class=fyuriwrapper][div class=box][div class=text][div class=mainheader]Header[/div][div class=linebreak][/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent congue mollis lorem, ut porttitor elit vulputate vel. Proin faucibus purus quis metus placerat, in sollicitudin magna mattis. Vivamus elementum porttitor condimentum. Vivamus semper laoreet bibendum. Sed ut ipsum ligula. Maecenas est lorem, fermentum sit amet ipsum vel, rhoncus fringilla sapien. Etiam fringilla arcu nibh, at congue nisi convallis quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc a lorem eu neque semper varius. Quisque elementum laoreet elit et lacinia. Morbi ac augue lorem. Nulla tristique volutpat neque vel facilisis.

[div class=subheadpad][div class=subheaderred]Header[/div][/div]Quisque sit amet bibendum quam, sed efficitur felis. Curabitur eget odio sed nunc mollis vestibulum vitae condimentum eros. Duis at vestibulum magna. Maecenas vel nibh posuere, ultricies justo dapibus, aliquam leo. Ut vitae est in sem convallis pharetra et in enim. Etiam vitae rutrum tortor. Mauris egestas semper faucibus. Curabitur ut vehicula justo. Suspendisse vel augue vel nisi eleifend lacinia.

[div class=subheadpad][div class=subheaderred]Contact[/div][/div]Sed dolor tortor, mollis eget feugiat sed, egestas a nisi. Fusce venenatis gravida urna a porta. Morbi id posuere justo. Morbi interdum dictum orci eu malesuada. Duis pulvinar eleifend vestibulum. Donec at gravida augue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

[div class=icon][div class=iconwrap][fa]fas fa-envelope[/fa][/div][/div] PM
[div class=icon][div class=iconwrap][fa]fab fa-discord[/fa][/div][/div] Discord
[div class=icon][div class=iconwrap][fa]fab fa-skype[/fa][/div][/div] Skype
[/div][/div][/div][nobr][div class=fyuricredit][url=https://www.rpnation.com/threads/fyurious-codes-2-0.389838/post-9845951]code[/url] by [USER=39545]@Fyuri[/USER][/div][comment]do not remove/alter credit[/comment]
[comment][font=Viga].[/font][/comment]
[class=fyuriwrapper]
width:100%;
min-height:300px;
background: url('https://i.imgur.com/kZataXd.png');
padding:50px 0px 50px 0px;
[/class]

[class=box]
min-height:300px;
display: flex;
align-items: center;
justify-content: center;
[/class]

[class=text]
position:relative;
z-index:10;
max-width:900px;
background:rgba(255,255,255, 0.8);
color:#8e8e8e;
padding:10px;
box-sizing:border-box;
[/class]

[class=mainheader]
position:relative;
z-index:15;
margin-top:-60px;
margin-bottom:-10px;
color:#c30000;
font-family:'Viga',Verdana;
font-size:60px;
text-align:center;
letter-spacing:1px;
[/class]

[class name=title maxWidth=400px]
	font-size: 24px;
[/class]

[class=linebreak]
width:90%;
height:5px;
margin:auto;
border-bottom: 1px solid #cfcfcf;
[/class]

[class=subheadpad]
margin-bottom:10px;
[/class]

[class=subheaderred]
display:inline-block;
background:#c30000;
padding:0px 5px 0px 5px;
box-sizing:border-box;
color:#fff;
font-family: 'Viga', Verdana;
font-size:30px;
font-weight:bold;
letter-spacing:1px;
line-height: 1;
-moz-transform: skew(-15deg, 0deg);
-webkit-transform: skew(-15deg, 0deg);
-o-transform: skew(-15deg, 0deg);
-ms-transform: skew(-15deg, 0deg);
transform: skew(-15deg, 0deg);
[/class]

[class=iconwrap]
width:25px;
height:25px;
display: flex;
align-items: center;
justify-content: center;
[/class]

[class=icon]
display:inline-block;
width:25px;
height:25px;
color:#c30000;
border-radius:50%;
border:2px solid #c30000;
margin:3px;
[/class]

[class=fyuricredit]
opacity:0.5;
font-size:10px;
[/class][/nobr]

 

[Fable]

With the coming changes and removal of BBCode+ these codes are going to break. As such there will be no more updates to this thread for a while, perhaps never as I most likely will just make a new thread when I have time to start really coding things again.