What's new
  • 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 foresigh's BBCode drawer

foresigh

Wonderlandian
I had some extra time (not that much, I'm kinda procrastinating) and decide to try BBCode and share some ideas with all of you. I always like to make things mobile-friendly and at the same time keep the fun of full desktop mode. I'm always open to feedback and ideas ^_^
[nobr]
[class=container]
background-image: url('https://i.pinimg.com/originals/4c/db/c9/4cdbc9d163c71e526e078fab458c1c27.jpg');
background-position: center;
background-size: cover;
background-attachment: fixed;
display:flex;
flex-direction: row;
text-shadow: 2px 2px 3px black;
[/class]
[class name=container maxWidth=600px]
flex-direction: column;
[/class]

[class=charContainer]
background-color:RGBA(236,206,109,0);
padding: 1vw;
[/class]
[class=characterName]
border: 4px solid RGB(176,161,96);
background-color: RGBA(176,161,96,0.6);
backdrop-filter: blur(3px);
text-shadow: 1px 1px 3px black;
[/class]
[class=charCard]
background-color: rgba(176,161,96,0.6);
color: white;
padding-left: 1rem;
clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%);
border: 2px solid silver;

[/class]

[class=descriptionContainer]
width:100%;
[/class]
[class=descriptionItem]
background-color: rgba(80,80,80,0.4);
border: 2px solid silver;
backdrop-filter: blur(3px);
cursor:pointer;
padding: 3rem;
[/class]
[class name=descriptionItem state=hover]
background-color: rgba(50,50,50,0.7);
[/class]
[class name=return state=hover]
cursor:pointer;
text-shadow: 1px 1px 4px gold;
[/class]
[class=descriptionText]
padding: 1rem;
background-color: rgba(50,50,50,0.7);
border: 2px solid silver;
[/class]

[script class=descriptionItem]
hide return
hide descriptionText
[/script]
[script class=return on=click]
show descriptionItem
hide return
hide descriptionText
[/script]
[script class=descriptionItem on=click]
hide descriptionItem
show return
set currentTab (getText)
if (eq ${currentTab} Background) (show descBackground)
if (eq ${currentTab} Personality) (show descPersonality)
if (eq ${currentTab} Skills&Weaknesses) (show descSW)
if (eq ${currentTab} Extras) (show descExtras)
[/script]
[/nobr]
[div class=container]
[div class=charContainer]
[div class=characterName]

Character Name
Race:
[/div]
[div class=charCard]
Age: 1000+

[/div]
[div class=charCard]
Class: Mage

[/div]
[div class=charCard]
Location: City

[/div]
Made by foresigh foresigh
[/div]
[div class=descriptionContainer]
[div class=return]<— Return[/div]
[div class=descriptionItem]Background[/div]​
[div class="descriptionText descBackground"]Lorem Ipsum nekorum background[/div]
[div class=descriptionItem]Personality[/div]​
[div class="descriptionText descPersonality" style="margin-top: -20px"]Lorem Ipsum nekorum Personality[/div]
[div class=descriptionItem]Skills&Weaknesses[/div]​
[div class="descriptionText descSW" style="margin-top: -35px"]Lorem Ipsum nekorum Skills and weaknesses[/div]
[div class=descriptionItem]Extras[/div]​
[div class="descriptionText descExtras" style="margin-top: -55px"]Lorem Ipsum nekorum Extras[/div]
[/div]
[/div]

First, turn on the BBCode mode, then paste the code and turn off again the BBCode mode. That way you'll see the comments

Code:
[nobr]
[COLOR=rgb(243, 121, 52)][SIZE=6][B][COMMENT]------------------------------------CLASSES--------------------------------------------[/COMMENT]
[B][COMMENT]---------------DO NOT CHANGE ANYTHING BETWEEN BRACKETS '[]'-----------[/COMMENT][/B][/B][/SIZE][/COLOR]
[B][COLOR=rgb(0, 168, 133)][SIZE=5][COMMENT]-----THE CONTAINER CLASS. CHANGE THE URL OF 'background-image: url([/COMMENT][/SIZE][COMMENT][/comment][/COLOR][COMMENT][COLOR=rgb(184, 49, 47)][SIZE=5]'[URL]https://imageURL[/URL]'[/SIZE][/COLOR][/comment][/B][COMMENT][COLOR=rgb(0, 168, 133)][SIZE=5][B])' TO CHANGE THE... WELL, BACKGROUND IMAGE----------[/B][/SIZE][/COLOR][/COMMENT][COLOR=rgb(0, 168, 133)][SIZE=5][B][/B][/SIZE][/COLOR]
[class=container]
background-image: url('https://i.pinimg.com/originals/4c/db/c9/4cdbc9d163c71e526e078fab458c1c27.jpg');
background-position: center;
background-size: cover;
background-attachment: fixed;
display:flex;
flex-direction: row;
text-shadow: 2px 2px 3px black;
[/class]
[class name=container maxWidth=600px]
flex-direction: column;
[/class]
[COLOR=rgb(0, 168, 133)][SIZE=5][B][COMMENT]--------------THE CLASSES OF THE CHARACTER DESCRIPTION. IF YOU WANT TO CHANGE COLORS USE RGBA, HEX MAY GIVE ERROS---------------[/COMMENT][/B][/SIZE][/COLOR]
[class=charContainer]
background-color:RGBA(236,206,109,0);
padding: 1vw;
[/class]
[class=characterName]
border: 4px solid RGB(176,161,96);
background-color: RGBA(176,161,96,0.6);
backdrop-filter: blur(3px);
text-shadow: 1px 1px 3px black;
[/class]
[class=charCard]
background-color: rgba(176,161,96,0.6);
color: white;
padding-left: 1rem;
clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%);
border: 2px solid silver;
[/class]
[SIZE=5][B][COLOR=rgb(0, 168, 133)][COMMENT]THE CHARACTER DESCRIPTION CLASSES. IT CONTAINS THE STYLE OF TABS[/COMMENT][/COLOR][/B][/SIZE]
[class=descriptionContainer]
width:100%;
[/class]
[class=descriptionItem]
background-color: rgba(80,80,80,0.4);
border: 2px solid silver;
backdrop-filter: blur(3px);
cursor:pointer;
padding: 3rem;
[/class]
[class name=descriptionItem state=hover]
background-color: rgba(50,50,50,0.7);
[/class]
[class name=return state=hover]
cursor:pointer;
text-shadow: 1px 1px 4px gold;
[/class]
[class=descriptionText]
padding: 1rem;
background-color: rgba(50,50,50,0.7);
border: 2px solid silver;
[/class]
[SIZE=5][B][COLOR=rgb(0, 168, 133)][COMMENT]----------THE SCRIPTS! DO NOT TOUCH IF YOU DO NOT KNOW ABOUT SCRIPTING. -----[/COMMENT][/COLOR][/B][/SIZE]
[script class=descriptionItem]
hide return
hide descriptionText
[/script]
[script class=return on=click]
show descriptionItem
hide return
hide descriptionText
[/script]
[script class=descriptionItem on=click]
hide descriptionItem
show return
set currentTab (getText)
if (eq ${currentTab} Background) (show descBackground)
if (eq ${currentTab} Personality) (show descPersonality)
if (eq ${currentTab} Skills&Weaknesses) (show descSW)
if (eq ${currentTab} Extras) (show descExtras)
[/script]
[SIZE=6][B][COLOR=rgb(243, 121, 52)][B][COMMENT]---------------------END OF CLASSES. CONTENT GOES HERE NOW------------------------[/COMMENT][/B][/COLOR][/B][/SIZE]
[/nobr]
[div class=container]
[div class=charContainer]
[div class=characterName][COLOR=rgb(0, 168, 133)][B][COMMENT]-----TO CHANGE IMAGE, CLICK THIS IMAGE, CLICK THE ARROWS AND PASTE YOUR IMAGE-----[/COMMENT][/B][/COLOR]
[CENTER][IMG width="263px"]https://i.pinimg.com/564x/27/71/43/27714386c6883319d6786c7cea51d873.jpg[/IMG]
[SIZE=5][B]Character Name
Race: [/B][/SIZE][/CENTER]
[/div]
[div class=charCard]
[B]Age[/B]: 1000+

[/div]
[div class=charCard]
[B]Class[/B]: Mage

[/div]
[div class=charCard]
[B]Location[/B]: City

[/div]
[I][SIZE=3]Made by [USER=75705]@foresigh[/USER][/SIZE][/I]
[/div]
[div class=descriptionContainer][B][COLOR=rgb(0, 168, 133)][COMMENT]UP THERE WERE THE BASIC INFO OF YOUR CHARACTER, YOU CAN CHANGE FONT, COLORS OR STYLE USING THE TOOLS GIVEN BY THE RPNATION. THIS IS NORMAL TEXT[/COMMENT][/COLOR][/B]
[div class=return][SIZE=6][B]<— Return[/B][/SIZE][/div][B][COLOR=rgb(0, 168, 133)][COMMENT]DESCRIPTION AREA. THE BOLD TEXT IS THE TITLE OF THE AREA. THE TEXT THAT SAYS 'LOREM IPSUM NEKORUM' IS THE CONTENT. YOU CAN COPY AND PASTE ONE SECTION TO ADD MORE, BUT YOU'LL NEED TO ADD SCRIPT LINE. THE CURRENT CODE SHOULD GIVE YOU A CLUE ON WHAT TO ADD AND HOW TO DO IT :)[/COMMENT][/COLOR][/B]
[CENTER][div class=descriptionItem][SIZE=6][B]Background[/B][/SIZE][/div][/CENTER]
[div class="descriptionText descBackground"]Lorem Ipsum nekorum background[/div]
[CENTER][div class=descriptionItem][SIZE=6][B]Personality[/B][/SIZE][/div][/CENTER]
[div class="descriptionText descPersonality" style="margin-top: -20px"]Lorem Ipsum nekorum Personality[/div]
[CENTER][div class=descriptionItem][SIZE=6][B]Skills&Weaknesses[/B][/SIZE][/div][/CENTER]
[div class="descriptionText descSW" style="margin-top: -35px"]Lorem Ipsum nekorum Skills and weaknesses[/div]
[CENTER][div class=descriptionItem][SIZE=6][B]Extras[/B][/SIZE][/div][/CENTER]
[div class="descriptionText descExtras" style="margin-top: -55px"]Lorem Ipsum nekorum Extras[/div]
[/div]
[/div]
 
Last edited:

Kazami42

Budget Morpheus, soldier #1,128,300 reporting in.
Can confirm, it works on mobile.

I though, if there actually is anything accessible in the side tabs after accessing them, think it is inaccessible. Doesn't go beyond the display and the working return button. But it certainly looks nice. Not sure about desktop mode for mobile, but I can't enable that here anyways, due to taking an extra fifty gigabillion years to load just the website in. So somebody else might be willing to try mobile desktop mode for it.
 

foresigh

Wonderlandian
Can confirm, it works on mobile.

I though, if there actually is anything accessible in the side tabs after accessing them, think it is inaccessible. Doesn't go beyond the display and the working return button. But it certainly looks nice. Not sure about desktop mode for mobile, but I can't enable that here anyways, due to taking an extra fifty gigabillion years to load just the website in. So somebody else might be willing to try mobile desktop mode for it.
Does it really take to much to load? I think I know where the issue may be. What I meant with the desktop mode is that things can look way different and have more dynamism in desktop than mobile, so I try to aim both ends. Thank you for reviewing!
 

foresigh

Wonderlandian
Way simpler this time, but I had the chance to try new things and learn more about how this BBCode works.
I'm still procrastinating tho hehe~ ( ̄ω ̄; ), but I needed to relax a bit so I coded this.

Again, Turn on the BBCode mode, paste the code and then turn it off. It should work on desktop and mobile.

[nobr]


[class=container]
--primary: #f1f3f4;
--secondary: #79bac1;
--third: #2a7886;
--fourth: #512b58;
display:flex;
width:100%;
height:100%;
background-color:var(--primary);
color:white;
[/class]
[class name=container maxWidth=750px]
display:block;
[/class]


[class=charProfile]
min-width:30%;
height:100%;
background-color:var(--third);
[/class]
[class=infoCard]
background-color:var(--fourth);
padding: 3%;
clip-path: polygon(100% 0, 90% 50%, 100% 100%, 0 100%, 0 0);
[/class]


[class=charDescription]
color:black;
min-width:70%;
display:flex;
flex-wrap:wrap;
white-space: pre-wrap;
max-height: 700px;
overflow: auto;
[/class]
[class name=charDescription maxWidth=750px]
flex-direction: column;
text-align: center;
[/class]
[class name=descOption]
min-width:50%;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
cursor:pointer;
color: var(--third);
animation-name:{post_id}fade;
animation-duration:500ms;
[/class]
[class name=descOption state=hover]
background-color:var(--secondary);
color: white;
[/class]
[class name=optionTextHidden]
display:none;
[/class]
[class=actualText]
padding:5%;
text-align:left;
animation-name:{post_id}fadeMove;
animation-duration:500ms;
[/class]
[class name="icon"]
font-size: 600%;
[/class]
[class=return]
min-width:100%,
font-size: 2rem;
color:var(--secondary);
[/class]
[class name=return state=hover]
cursor:pointer;
[/class]


[animation=fadeMove]
[keyframe=0]
opacity: 0.5;
transform: translate(0px,15px);
[/keyframe]
[keyframe=100]
opacity: 1;
transform: translate(0px,0px);
[/keyframe]
[/animation]
[animation=fade]
[keyframe=0]
opacity: 0.5;
[/keyframe]
[keyframe=100]
opacity: 1;
[/keyframe]
[/animation]


[script class=container]
hide return
[/script]
[script class=return on=click]
show descOption
addClass optionTextHidden actualText
hide return
[/script]
[script class=descOption on=click]
show return
hide descOption
set currentTab (getText)
if (eq ${currentTab} Background) (removeClass optionTextHidden backgroundText)
if (eq ${currentTab} Personality&Appearance) (removeClass optionTextHidden personalityText)
if (eq ${currentTab} Skill&Weaknesses) (removeClass optionTextHidden skillweaknessText)
if (eq ${currentTab} Extras) (removeClass optionTextHidden extrasText)
[/script]

[/nobr]
[div class="container"]
[div class="charProfile"]
[div class="imageProfile"]
[/div]
[div class="infoProfile"]
[div class="infoCard"]Name:[/div]
[div class="infoCard"]Age:[/div]
[div class="infoCard"]Location:[/div]
[/div]
Code by foresigh foresigh
[/div]
[nobr]
[div class="charDescription"]
[div class="backgroundDescription descOption"][div class="icon"][/div]Background[/div]
[div class="backgroundText optionTextHidden actualText"][div class="return"][/div]
Lorem Ipsum Nekorum BG
[/div]

[div class="personalityDescription descOption"][div class="icon"][/div]Personality&Appearance[/div]
[div class="personalityText optionTextHidden actualText"][div class="return"][/div]
Lorem Ipsum Nekorum Personality
[/div]

[div class="skillweaknessDescription descOption"][div class="icon"][/div]Skill&Weaknesses[/div]
[div class="skillweaknessText optionTextHidden actualText"][div class="return"][/div]
Lorem Ipsum Nekorum Skills
[/div]

[div class="extrasDescription descOption"][div class="icon"][/div]Extras[/div]
[div class="extrasText optionTextHidden actualText"][div class="return"][/div]
Lorem Ipsum Nekorum Extras
[/div]
[/div]
[/nobr]
[/div]

Code:
[nobr]
[B][SIZE=6][COLOR=rgb(184, 49, 47)][COMMENT]--DO NOT CHANGE ANYTHING BETWEEN BRACKETS '[]' IF YOU DON'T KNOW, IT MIGHT BREAK SOMETHING. ALTHOUGH, FEEL FREE TO EXPERIMENT--[/COMMENT][/COLOR][/SIZE]
[SIZE=5][COLOR=rgb(0, 168, 133)][B][COMMENT]CLASSES START HERE. FIRST WE HAVE THE PALETTE USED, FEEL FREE TO USE WHATEVER COLOR YOU WANT JUST CHANGING THE VALUES OF PRIMARY, SECONDARY, THIRD AND FOURTH[/COMMENT][/B][/COLOR][/SIZE][/B]
[class=container]
--primary: #f1f3f4;
--secondary: #79bac1;
--third: #2a7886;
--fourth: #512b58;
display:flex;
width:100%;
height:100%;
background-color:var(--primary);
color:white;
[/class]
[class name=container maxWidth=750px]
display:block;
[/class]

[B][COLOR=rgb(0, 168, 133)][COMMENT]CHARACTER CARD SECTION[/COMMENT][/COLOR][/B]
[class=charProfile]
min-width:30%;
height:100%;
background-color:var(--third);
[/class]
[class=infoCard]
background-color:var(--fourth);
padding: 3%;
clip-path: polygon(100% 0, 90% 50%, 100% 100%, 0 100%, 0 0);
[/class]

[B][COLOR=rgb(0, 168, 133)][COMMENT]CHARACTER DESCRIPTION AND OPTIONS[/COMMENT][/COLOR][/B]
[class=charDescription]
color:black;
min-width:70%;
display:flex;
flex-wrap:wrap;
white-space: pre-wrap;
max-height: 700px;
overflow: auto;
[/class]
[class name=charDescription maxWidth=750px]
flex-direction: column;
text-align: center;
[/class]
[class name=descOption]
min-width:50%;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
cursor:pointer;
color: var(--third);
animation-name:{post_id}fade;
animation-duration:500ms;
[/class]
[class name=descOption state=hover]
background-color:var(--secondary);
color: white;
[/class]
[class name=optionTextHidden]
display:none;
[/class]
[class=actualText]
padding:5%;
text-align:left;
animation-name:{post_id}fadeMove;
animation-duration:500ms;
[/class]
[class name="icon"]
font-size: 600%;
[/class]
[class=return]
min-width:100%,
font-size: 2rem;
color:var(--secondary);
[/class]
[class name=return state=hover]
cursor:pointer;
[/class]

[B][COLOR=rgb(0, 168, 133)][COMMENT]ANIMATIONS[/COMMENT][/COLOR][/B]
[animation=fadeMove]
[keyframe=0]
opacity: 0.5;
transform: translate(0px,15px);
[/keyframe]
[keyframe=100]
opacity: 1;
transform: translate(0px,0px);
[/keyframe]
[/animation]
[animation=fade]
[keyframe=0]
opacity: 0.5;
[/keyframe]
[keyframe=100]
opacity: 1;
[/keyframe]
[/animation]

[B][COLOR=rgb(0, 168, 133)][COMMENT]SCRIPTING[/COMMENT][/COLOR][/B]
[script class=container]
hide return
[/script]
[script class=return on=click]
show descOption
addClass optionTextHidden actualText
hide return
[/script]
[script class=descOption on=click]
show return
hide descOption
set currentTab (getText)
if (eq ${currentTab} Background) (removeClass optionTextHidden backgroundText)
if (eq ${currentTab} Personality&Appearance) (removeClass optionTextHidden personalityText)
if (eq ${currentTab} Skill&Weaknesses) (removeClass optionTextHidden skillweaknessText)
if (eq ${currentTab} Extras) (removeClass optionTextHidden extrasText)
[/script]
[B][COLOR=rgb(0, 168, 133)][COMMENT]----CLASSES AND SCRIPT END HERE----[/COMMENT][/COLOR][/B]
[/nobr]
[div class="container"]
[div class="charProfile"]
[div class="imageProfile"][B][COLOR=rgb(235, 107, 86)][COMMENT]CLICK ON THE PICTURE, SELECT REPLACE AND CHOOSE YOUR PICTURE[/COMMENT][/COLOR][/B]
[CENTER][IMG width="246px"]https://www.thefashionfraction.com/wp-content/uploads/2015/05/The_Fashion_Fraction_Blog_Mode_Style_Outfit_Blogger_Schweiz_Switzerland_Casual_Everyday_Allday_Simple_Burgundy_Turtleneck_Chanel_Espadrilles_Chloe_Drew_9.jpg[/IMG][/CENTER]
[/div]
[div class="infoProfile"][B][COLOR=rgb(235, 107, 86)][COMMENT]IF YOU WANT TO ADD SOMETHING ELSE, COPY THE LINE AND PASTE IT. DO NOT EDIT BETWEEN BRACKETS![/COMMENT][/COLOR][/B]
[div class="infoCard"][SIZE=5][B]Name[/B][/SIZE]:[/div]
[div class="infoCard"][SIZE=5][B]Age[/B][/SIZE]:[/div]
[div class="infoCard"][SIZE=5][B]Location[/B][/SIZE]:[/div]
[/div]
[COLOR=rgb(71, 85, 119)][SIZE=2]Code by [USER=75705]@foresigh[/USER][/SIZE][/COLOR]
[/div]
[nobr]
[div class="charDescription"][B][COLOR=rgb(235, 107, 86)][COMMENT]ICONS ARE FROM FONT AWESOME. LOOK AT THEIR WEBSITE TO CHANGE ICONS. WHERE IS 'LOREM IPSUM NEKORUM' GOES YOUR DESCRIPTION[/COMMENT][/COLOR][/B]
[div class="backgroundDescription descOption"][div class="icon"][fa]fas fa-book[/fa][/div][SIZE=6][B]Background[/B][/SIZE][/div]
[div class="backgroundText optionTextHidden actualText"][div class="return"][fa]fas fa-arrow-circle-left[/fa][/div]
Lorem Ipsum Nekorum BG
[/div]

[div class="personalityDescription descOption"][div class="icon"][fa]fas fa-user[/fa][/div][B][SIZE=6]Personality&Appearance[/SIZE][/B][/div]
[div class="personalityText optionTextHidden actualText"][div class="return"][fa]fas fa-arrow-circle-left[/fa][/div]
Lorem Ipsum Nekorum Personality
[/div]

[div class="skillweaknessDescription descOption"][div class="icon"][fa]fas fa-lightbulb-on[/fa][/div][B][SIZE=6]Skill&Weaknesses[/SIZE][/B][/div]
[div class="skillweaknessText optionTextHidden actualText"][div class="return"][fa]fas fa-arrow-circle-left[/fa][/div]
Lorem Ipsum Nekorum Skills
[/div]

[div class="extrasDescription descOption"][div class="icon"][fa]fas fa-dice-d8[/fa][/div][SIZE=6][B]Extras[/B][/SIZE][/div]
[div class="extrasText optionTextHidden actualText"][div class="return"][fa]fas fa-arrow-circle-left[/fa][/div]
Lorem Ipsum Nekorum Extras
[/div]
[/div]
[/nobr]
[/div]
 
Last edited:

foresigh

Wonderlandian
This took me a while. I had the idea of the classic Vampire vs Werewolves so I made an Interest Check. I experimented with animations and backgrounds to make something similar to a carousel, and I learned a lot doing that.

Friendly reminder: Turn on the BBCode mode, paste the code and turn off. This should be mobile-friendly.

[nobr]



[class=container]
--img1:url('https://i.ytimg.com/vi/AZizDu1fi_g/maxresdefault.jpg');
--img2:url('https://wallpapercan.com/download/1280x720/e4d51742/fantasy-dark-castle-art.jpg');
--img3:url('https://images.wallpapersden.com/image/download/vampire-hunter-d-blood-vampire_11494_1280x720.jpg');
width: 100%;
height: 100%;
background-color: #0f0f0f;
color:white;
display:flex;
flex-direction:column;
height: 600px;
overflow:hidden;
[/class]

[class=mainPage]
display:flex;
white-space:pre-wrap;
flex-wrap:wrap;
width:100%;
[/class]

[class=mainImage]
width:100%;
height:70vh;
background-image:var(--img1);
background-size:cover;
background-repeat:no-repeat;
background-position:center;
animation-name:{post_id}switchImg;
animation-duration:25s;
animation-iteration-count: infinite;
animation-direction:alternate;
animation-timing-function:ease-in-out;
[/class]

[class=startButtonContainer]
width:100%;
height:100%;
text-align:center;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
font-size: 4rem;
background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(34,0,0,1) 0%, rgba(0,0,0,0) 66%);
text-shadow: 1px 1px 3px black;
[/class]

[class=startButton]
background-color:#f0f0f0;
color:black;
border: 3px solid #f0f0f0;
padding:5%;
font-size: 1.8rem;
transition: 200ms;
[/class]
[class name=startButton state=hover]
background-color: #000000cc;
color: white;
border: 3px solid white;
cursor:pointer;
[/class]

[class=topTitle]
width:100%;
font-size:3rem;
cursor:pointer;
position:sticky;
top:0;
left:0;
z-index:5;
text-shadow: 1px 1px 5px darkred;
[/class]
[class name=topTitle maxWidth=700px]
position:relative;
[/class]

[class=textContainer]
width:68%;
white-space:nowrap;
animation-name: {post_id}entrance;
animation-duration: 1s;
[/class]
[class name=textContainer maxWidth=700px]
width:100%;
[/class]

[class=text]
display:none;
white-space:pre-wrap;
animation-name:{post_id}entrance;
animation-duration:400ms;
padding:1rem;
position:relative;
[/class]

[class=player]
height: 7rem;
width:85%;
clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%);
border: 2px solid darkred;
padding: 0.5rem;
white-space:nowrap;
position:relative;
display:flex;
align-items:center;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(34,0,0,1) 0%, rgba(97,19,3,0.44021358543417366) 100%);
[/class]

[class=playerPic]
width:30%;
height:100%;
overflow:hidden;
[/class]
[class name=playerPic maxWidth=700px]
display:none;
[/class]

[class=content]
display:flex;
padding:1rem;
flex-wrap: wrap;
overflow:auto;
position:relative;
[/class]
[class name=content maxWidth=700px]
flex-direction:row;
[/class]

[class=optionContainer]
width:30%;
animation-name:{post_id}optionEntrance;
animation-duration:1000ms;
animation-fill-mode:forwards;
[/class]
[class name=optionContainer maxWidth=700px]
width:100%;
[/class]

[class=option]
padding:1rem;
border:2px solid white;
text-align:center;
cursor:pointer;
margin-top: 0.5rem;
font-size:2rem;
border-radius: 5%;
[/class]

[class name=option state=hover]
background: rgb(2,0,36);
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(210,6,6,1) 0%, rgba(0,0,0,1) 100%);
[/class]

[class=selected]
display:block;
[/class]
[class=hideall]
display:none;
[/class]


[animation=entrance]
[keyframe=0]
opacity:0.5;
transform:translate(10px,0px);
[/keyframe]
[keyframe=100]
opacity:1;
transform:translate(0px,0px);
[/keyframe]
[/animation]

[animation=switchImg]
[keyframe=0]
background-image:var(--img1);
[/keyframe]
[keyframe=33]
background-image:var(--img1);
[/keyframe]
[keyframe=34]
background-image:var(--img2);
[/keyframe]
[keyframe=64]
background-image:var(--img2);
[/keyframe]
[keyframe=65]
background-image:var(--img3);
[/keyframe]
[keyframe=100]
background-image:var(--img3);
[/keyframe]
[/animation]

[animation=optionEntrance]
[keyframe=0]
transform:translate(5px,0px);
opacity:0.7;
[/keyframe]
[keyframe=100]
transform:translate(0px,0px);
opacity:1;
[/keyframe]
[/animation]


[script class=startButton on=click]
hide mainPage
removeClass hideall content
addClass selected plotText
[/script]
[script class=option on=click]
set tab (getText)
if (eq ${tab} Plot) (addClass selected plotText) (removeClass selected plotText)
if (eq ${tab} Lore) (addClass selected loreText) (removeClass selected loreText)
if (eq ${tab} Rules) (addClass selected rulesText) (removeClass selected rulesText)
if (eq ${tab} Players) (addClass selected playersText) (removeClass selected playersText)
[/script]
[script class=topTitle on=click]
removeClass hideall mainPage
fadeIn 300 mainPage
addClass hideall content
removeClass selected text
[/script]


[div class="container"]
[div class="mainPage"]
[div class="mainImage"]
[div class="startButtonContainer"]
Werewolves & Vampires
[div class="startButton"]Start Journey[/div]

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


[div class="content hideall"]
[div class="topTitle"]Werewolves & Vampires[/div]
[div class="textContainer"]

[div class="text plotText"]Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot

Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot

Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot

Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot
[/div]
[div class="text loreText"]Lorem Ipsum nekorum lore[/div]
[div class="text rulesText"]Lorem Ipsum nekorum rules[/div]

[div class="text playersText"]

[div class="player"]
[div class=playerPic]

[/div]
Name or Description
[/div]

[div class="player"]
[div class=playerPic]

[/div]
Name or Description
[/div]

[div class="player"]
[div class=playerPic]

[/div]
Name or Description
[/div]

[div class="player"]
[div class=playerPic]

[/div]
Name or Description
[/div]

[/div]
[/div]

[div class="optionContainer"]

[div class="option"]Plot[/div]
[div class="option"]Lore[/div]
[div class="option"]Rules[/div]
[div class="option"]Players[/div]

[/div]
[/div]
[/div]
code by foresigh foresigh
[/nobr]

Code:
[nobr]
[B][SIZE=6][COLOR=rgb(184, 49, 47)][COMMENT]DO NOT CHANGE ANYTHING BETWEEN BRACKETS[/COMMENT][/COLOR][/SIZE][/B]

[SIZE=5][COLOR=rgb(0, 168, 133)][B][COMMENT]CLASSES START HERE. BE CAREFUL IF YOU'RE GOING TO ADD OR EDIT SOMETHING[/COMMENT][/B][/COLOR][/SIZE]
[class=container]
--img1:url('https://i.ytimg.com/vi/AZizDu1fi_g/maxresdefault.jpg');
--img2:url('https://wallpapercan.com/download/1280x720/e4d51742/fantasy-dark-castle-art.jpg');
--img3:url('https://images.wallpapersden.com/image/download/vampire-hunter-d-blood-vampire_11494_1280x720.jpg');
width: 100%;
height: 100%;
background-color: #0f0f0f;
color:white;
display:flex;
flex-direction:column;
height: 600px;
overflow:hidden;
[/class]

[class=mainPage]
display:flex;
white-space:pre-wrap;
flex-wrap:wrap;
width:100%;
[/class]

[class=mainImage]
width:100%;
height:70vh;
background-image:var(--img1);
background-size:cover;
background-repeat:no-repeat;
background-position:center;
animation-name:{post_id}switchImg;
animation-duration:25s;
animation-iteration-count: infinite;
animation-direction:alternate;
animation-timing-function:ease-in-out;
[/class]

[class=startButtonContainer]
width:100%;
height:100%;
text-align:center;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
font-size: 4rem;
background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(34,0,0,1) 0%, rgba(0,0,0,0) 66%);
text-shadow: 1px 1px 3px black;
[/class]

[class=startButton]
background-color:#f0f0f0;
color:black;
border: 3px solid #f0f0f0;
padding:5%;
font-size: 1.8rem;
transition: 200ms;
[/class]
[class name=startButton state=hover]
background-color: #000000cc;
color: white;
border: 3px solid white;
cursor:pointer;
[/class]

[class=topTitle]
width:100%;
font-size:3rem;
cursor:pointer;
position:sticky;
top:0;
left:0;
z-index:5;
text-shadow: 1px 1px 5px darkred;
[/class]
[class name=topTitle maxWidth=700px]
position:relative;
[/class]

[class=textContainer]
width:68%;
white-space:nowrap;
animation-name: {post_id}entrance;
animation-duration: 1s;
[/class]
[class name=textContainer maxWidth=700px]
width:100%;
[/class]

[class=text]
display:none;
white-space:pre-wrap;
animation-name:{post_id}entrance;
animation-duration:400ms;
padding:1rem;
position:relative;
[/class]

[class=player]
height: 7rem;
width:85%;
clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%);
border: 2px solid darkred;
padding: 0.5rem;
white-space:nowrap;
position:relative;
display:flex;
align-items:center;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(34,0,0,1) 0%, rgba(97,19,3,0.44021358543417366) 100%);
[/class]

[class=playerPic]
width:30%;
height:100%;
overflow:hidden;
[/class]
[class name=playerPic maxWidth=700px]
display:none;
[/class]

[class=content]
display:flex;
padding:1rem;
flex-wrap: wrap;
overflow:auto;
position:relative;
[/class]
[class name=content maxWidth=700px]
flex-direction:row;
[/class]

[class=optionContainer]
width:30%;
animation-name:{post_id}optionEntrance;
animation-duration:1000ms;
animation-fill-mode:forwards;
[/class]
[class name=optionContainer maxWidth=700px]
width:100%;
[/class]

[class=option]
padding:1rem;
border:2px solid white;
text-align:center;
cursor:pointer;
margin-top: 0.5rem;
font-size:2rem;
border-radius: 5%;
[/class]

[class name=option state=hover]
background: rgb(2,0,36);
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(210,6,6,1) 0%, rgba(0,0,0,1) 100%);
[/class]

[class=selected]
display:block;
[/class]
[class=hideall]
display:none;
[/class]

[SIZE=5][B][COLOR=rgb(0, 168, 133)][COMMENT]ANIMATIONS START HERE[/COMMENT][/COLOR][/B][/SIZE]
[animation=entrance]
[keyframe=0]
opacity:0.5;
transform:translate(10px,0px);
[/keyframe]
[keyframe=100]
opacity:1;
transform:translate(0px,0px);
[/keyframe]
[/animation]

[animation=switchImg]
[keyframe=0]
background-image:var(--img1);
[/keyframe]
[keyframe=33]
background-image:var(--img1);
[/keyframe]
[keyframe=34]
background-image:var(--img2);
[/keyframe]
[keyframe=64]
background-image:var(--img2);
[/keyframe]
[keyframe=65]
background-image:var(--img3);
[/keyframe]
[keyframe=100]
background-image:var(--img3);
[/keyframe]
[/animation]

[animation=optionEntrance]
[keyframe=0]
transform:translate(5px,0px);
opacity:0.7;
[/keyframe]
[keyframe=100]
transform:translate(0px,0px);
opacity:1;
[/keyframe]
[/animation]

[COLOR=rgb(0, 168, 133)][B][SIZE=5][COMMENT]SCRIPTS START HERE[/COMMENT][/SIZE][/B][/COLOR]
[script class=startButton on=click]
hide mainPage
removeClass hideall content
addClass selected plotText
[/script]
[script class=option on=click]
set tab (getText)
if (eq ${tab} Plot) (addClass selected plotText) (removeClass selected plotText)
if (eq ${tab} Lore) (addClass selected loreText) (removeClass selected loreText)
if (eq ${tab} Rules) (addClass selected rulesText) (removeClass selected rulesText)
if (eq ${tab} Players) (addClass selected playersText) (removeClass selected playersText)
[/script]
[script class=topTitle on=click]
removeClass hideall mainPage
fadeIn 300 mainPage
addClass hideall content
removeClass selected text
[/script]

[COLOR=rgb(61, 142, 185)][B][SIZE=5][COMMENT]MAIN PAGE AREA[/COMMENT][/SIZE][/B][/COLOR]
[div class="container"]
[div class="mainPage"]
[div class="mainImage"]
[div class="startButtonContainer"]
[font=Great Vibes]Werewolves & Vampires
[div class="startButton"]Start Journey[/div][/font]
[/div]
[/div]
[/div]

[COLOR=rgb(0, 168, 133)][B][SIZE=5][COMMENT]CONTENT AREA[/COMMENT][/SIZE][/B][/COLOR]
[div class="content hideall"]
[div class="topTitle"][font=Great Vibes]Werewolves & Vampires[/font][/div]
[div class="textContainer"]
[COLOR=rgb(243, 121, 52)][B][COMMENT]TEXT AREA. THE LOREM IPSUM NEKORUM INDICATES THE TEXT THAT GOES WITH THEIR BUTTON[/COMMENT][/B][/COLOR]
[div class="text plotText"]Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot

Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot

Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot

Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot Lorem Ipsum nekorum plot
[/div]
[div class="text loreText"]Lorem Ipsum nekorum lore[/div]
[div class="text rulesText"]Lorem Ipsum nekorum rules[/div]
[COLOR=rgb(147, 101, 184)][B][COMMENT]PLAYERS AREA. TO CHANGE IMAGES, CLICK ON THE IMAGE, SELECT 'REPLACE' AND PUT YOUR IMAGE. THE TAGS THAT CORRESPOND TO THE PLAYER ARE DELIMITED BY COMMENT LINE, COPY AND PASTE TO ADD MORE PLAYERS[/COMMENT][/B][/COLOR]
[div class="text playersText"]
[COLOR=rgb(147, 101, 184)][B][COMMENT]----------------------------------------------------------------------------------------------------------------------[/COMMENT][/B][/COLOR]
[div class="player"]
[div class=playerPic]
[IMG width="128px"]https://i.pinimg.com/564x/29/dc/f5/29dcf537c8a5645fd581b0361e6c5da4.jpg[/IMG]
[/div]
[SIZE=6][I][B]Name or Description[/B][/I][/SIZE]
[/div]
[COLOR=rgb(147, 101, 184)][B][COMMENT]----------------------------------------------------------------------------------------------------------------------[/COMMENT][/B][/COLOR]
[div class="player"]
[div class=playerPic]
[IMG width="128px"]https://i.pinimg.com/564x/dc/fa/60/dcfa6019222107104db2b70fab4febb4.jpg[/IMG]
[/div]
[I][SIZE=6][B]Name or Description[/B][/SIZE][/I]
[/div]
[COLOR=rgb(147, 101, 184)][B][COMMENT]----------------------------------------------------------------------------------------------------------------------[/COMMENT][/B][/COLOR]
[div class="player"]
[div class=playerPic]
[IMG width="128px"]https://i.pinimg.com/564x/60/03/35/6003350b07e6bf54badb895c7c5d4085.jpg[/IMG]
[/div]
[I][SIZE=6][B]Name or Description[/B][/SIZE][/I]
[/div]
[COLOR=rgb(147, 101, 184)][B][COMMENT]----------------------------------------------------------------------------------------------------------------------[/COMMENT][/B][/COLOR]
[div class="player"]
[div class=playerPic]
[IMG width="128px"]https://i.pinimg.com/564x/d3/6b/10/d36b10e42b6cb6f06b2ebded79bcc136.jpg[/IMG]
[/div]
[I][B][SIZE=6]Name or Description[/SIZE][/B][/I]
[/div]
[COLOR=rgb(147, 101, 184)][B][COMMENT]----------------------------------------------------------------------------------------------------------------------[/COMMENT][/B][/COLOR]
[/div]
[/div]
[COLOR=rgb(243, 121, 52)][B][COMMENT]SELECTION AREA. IF YOU WANT TO INCLUDE A NEW OPTION, REMEMBER TO ADD THE SCRIPT IN THE SCRIPTS AREA[/COMMENT][/B][/COLOR]
[div class="optionContainer"]
[font=Great Vibes]
[div class="option"]Plot[/div]
[div class="option"]Lore[/div]
[div class="option"]Rules[/div]
[div class="option"]Players[/div]
[/font]
[/div]
[/div]
[/div]
[SIZE=2][I]code by [USER=75705]@foresigh[/USER][/I][/SIZE]
[/nobr]
 

Virus

Me, the radio demon? I'm a glitch radio demon!
Holy freaking shit...
These codes are so incredible!!
 

foresigh

Wonderlandian
[nobr]
[class=bbTitle]
background-color: #2d1815;
border: 5px solid #ad200b;

color: white;
text-shadow: 1px 1px black;
font-size: 2.5rem;
width: 25vw;
text-align: center;
[/class]

[div class="bbTitle"]Grinding Fantasy[/div]
[/nobr]

Aaaand... we are here again. This one took me a while, I had to redo a lot of stuff and as always some dumb bugs here and there. I gave it the name 'Grinding Fantasy' because I got inspired in the classic RPGs and the Pixel Art style, maybe I'll change it later when I find a less cringe name, but I kinda liked the overall result. Sure, in a month or so I won't like a lot of things about this code, but right now I'm okay with this.

Like everything else, this should work fine on mobile and desktop, let me know if you find some bug.

If you're going to use this, first activate the BBCode mode, the little screw icon. Paste the code and deactivate the BBCode mode again. This is to have a clear view of the code and read the comments (Yeah... I comment my code. It might be useful for someone, idk)

[nobr]



[div class="container"]

[div class="topPanel"]
[div class="profilePicture"][/div]
[div class="characterBasic"]
[div class="basicElement characterName"]Character Name[/div]
[div class="basicElement barBorder"]
[div class="hpBar bar"]HP[/div]
[/div]
[div class="basicElement barBorder"]
[div class="mpBar bar"]MP[/div]
[/div]
[div class="basicElement"]Level: 2 | Exp: 450/750[/div]
[div class="basicElement"]Class: Character class[/div]
[/div]

[div class="characterStats"]

[div class="stat"]STR: 20[/div]
[div class="stat"]VIT: 15[/div]
[div class="stat"]INT: 12[/div]
[div class="stat"]DEX: 19[/div]
[div class="stat"]WIS: 14[/div]
[div class="stat"]CHA: 10[/div]

[/div]
[/div]

[div class="mainPanel"]

[div class="mainLeftPanel"]



[div class="characterOption"]Background[/div]
[div class="characterOption"]Appearance[/div]
[div class="characterOption"]Skills&Weaknesses[/div]
[div class="characterOption"]Items[/div]
[/div]

[div class="mainRightPanel"]



[div class="textBackground text"]Lorem Ipsum Nekorum Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[/div]


[div class="textAppearance text"]Lorem Ipsum nekorum Appearance[/div]


[div class="textSkillWeakness text"]Lorem Ipsum nekorum Skills and Weakness[/div]


[div class="textItems text"]Lorem Ipsum nekorum Items[/div]

[/div]
[/div]

[/div]








[class=container]
padding: 0;
margin: 0;
width: 100%;
height: 55vw;
color: white;
--topBackground: url('https://cdnb.artstation.com/p/assets/images/images/004/682/455/large/simon-sanchez-madera-tilepreview.jpg');
--mainBackground: url('https://i.pinimg.com/originals/f7/95/b1/f795b15fb195bf18bb12a077e781f5ce.gif');
--characterPicture: url('https://i.pinimg.com/564x/05/e3/6a/05e36ac296f0bb2287ac59d2da6b2ffb.jpg');
--optionBackground: linear-gradient(90deg, #444040, #7F6839);
--hp: 70%;
--mp: 90%;
[/class]

[class name=container maxWidth=700px]
height: inherit;
[/class]

[class=topPanel]
width: 100%;
height: 30%;
background-image: var(--topBackground);
display: flex;
justify-content: space-between;
color: white;
font-size: 1.5rem;
overflow: auto;
[/class]

[class name=topPanel maxWidth=700px]
height: 100%;
display: block;
text-align: center;
[/class]

[class=characterBasic]
display: block;
width: 33%;
[/class]

[class name=characterBasic maxWidth=700px]
width: 100%;
[/class]

[class=characterName]
font-size: 2.5rem;
text-shadow: 2px 2px black;
[/class]

[class=barBorder]
width: 100%;
height: 11%;
background-color: #4b4b4b;
border: 3px solid white;
position: relative;
[/class]

[class name=barBorder maxWidth=700px]
height: 2rem;
width: 98%;
border: 1px solid white;
[/class]

[class=bar]
position: absolute;
overflow: hidden;
font-size: 0.8rem;
height: 100%;
padding-left: 1%;
[/class]

[class=hpBar]
width: var(--hp);
background-color: #cf1818;
[/class]

[class=mpBar]
width: var(--mp);
background-color: #114c83;
[/class]

[class=profilePicture]
width: 20%;
background-color: #2020ff95;
border: 2px solid #fecc1010;
background-image: var(--characterPicture);
background-size: 150%;
background-position: 35% 30%;
[/class]

[class name=profilePicture maxWidth=700px]
width: 100%;
height: 40vh;
[/class]

[class=characterStats]
width: 43%;
display: flex;
flex-wrap: wrap;
font-size: 2rem;
[/class]

[class name=characterStats maxWidth=700px]
width: 100%;
justify-content: center;
[/class]

[class=stat]
width: 50%;
font-size: 2.5rem;
[/class]
[class name=stat maxWidth=700px]
text-align: center;
[/class]

[class=mainPanel]
display: flex;
width: 100%;
height: 70%;
background-image: var(--mainBackground);
background-size: cover;
background-position: 80% 60%;
text-shadow: 1px 1px 1px black;
[/class]

[class name=mainPanel maxWidth=700px]
height: 100%;
display:block;
background-size: 100%;
background-position: auto;
background-attachment: fixed;
[/class]

[class=mainLeftPanel]
width: 30%;
height: 100%;
[/class]

[class name=mainLeftPanel maxWidth=700px]
width: 100%;
[/class]

[class=mainRightPanel]
position: relative;
width: 70%;
height: 100%;
overflow: auto;
[/class]

[class name=mainRightPanel maxWidth=700px]
width: 100%;
[/class]

[class=characterOption]
width: 100%;
height: 20%;
background-image: var(--optionBackground);
background-size:cover;
background-position:center;
border: 3px solid #00000095;
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
cursor: pointer;
[/class]

[class name=characterOption state=hover]
color: yellow;
box-shadow: inset 10px -10px 0px -8px rgba(189,139,38,1);
[/class]

[class=text]
width: 100%
height: 100%
overflow: auto;
background-color: #22364f70;
white-space: pre-wrap;
padding: 4%;
display:none;
font-size: 1.7rem;
[/class]

[class=showText]
display:block;
[/class]







[script class=characterOption on=click]
set tab (getText)
if (eq ${tab} Background) (addClass showText textBackground) (removeClass showText textBackground)
if (eq ${tab} Appearance) (addClass showText textAppearance) (removeClass showText textAppearance)
if (eq ${tab} Skills&Weaknesses) (addClass showText textSkillWeakness) (removeClass showText textSkillWeakness)
if (eq ${tab} Items) (addClass showText textItems) (removeClass showText textItems)
[/script]
Code by: foresigh foresigh
[/nobr]

Code:
[nobr]
[COLOR=rgb(184, 49, 47)][B][SIZE=6][COMMENT]----------IF YOU DON'T KNOW WHAT YOU'RE DOING, [B]DO NO CHANGE ANYTHING BETWEEN BRACKETS,[/B] IT MIGHT BREAK SOMETHING----------[/COMMENT][/SIZE][/B][/COLOR]
[SIZE=5][B][COLOR=rgb(0, 168, 133)][COMMENT]----TEXT YOU CAN EDIT: *----[/COMMENT][/COLOR][/B][/SIZE]
[B][SIZE=5][COLOR=rgb(243, 121, 52)][COMMENT]----TEXT YOU NEED TO BE CAREFUL WHEN EDIT: !----[/COMMENT][/COLOR][/SIZE][/B]
[div class="container"]
[font=VT323]
[div class="topPanel"][COMMENT][SIZE=5][COLOR=rgb(209, 72, 65)][B]------------------START TOP PANEL------------------[/B][/COLOR][/SIZE][/COMMENT]
[div class="profilePicture"][/div]
[div class="characterBasic"]
[div class="basicElement characterName"][COLOR=rgb(250, 197, 28)]Character Name[/COLOR][/div][COLOR=rgb(0, 168, 133)][COMMENT]*[/COMMENT][/COLOR]
[div class="basicElement barBorder"]
[div class="hpBar bar"]HP[/div][COLOR=rgb(0, 168, 133)][COMMENT]*[/COMMENT][/COLOR]
[/div]
[div class="basicElement barBorder"]
[div class="mpBar bar"]MP[/div][COLOR=rgb(0, 168, 133)][COMMENT]*[/COMMENT][/COLOR]
[/div]
[div class="basicElement"]Level: 2 | Exp: 450/750[/div][COLOR=rgb(0, 168, 133)][COMMENT]*[/COMMENT][/COLOR]
[div class="basicElement"]Class: Character class[/div][COLOR=rgb(0, 168, 133)][COMMENT]*[/COMMENT][/COLOR]
[/div]

[div class="characterStats"]
[COLOR=rgb(0, 168, 133)][B][COMMENT]*[/COMMENT][/B][/COLOR]
[div class="stat"]STR: 20[/div]
[div class="stat"]VIT: 15[/div]
[div class="stat"]INT: 12[/div]
[div class="stat"]DEX: 19[/div]
[div class="stat"]WIS: 14[/div]
[div class="stat"]CHA: 10[/div]
[COLOR=rgb(0, 168, 133)][B][COMMENT]*[/COMMENT][/B][/COLOR]
[/div]
[/div][COMMENT][COLOR=rgb(209, 72, 65)][B][SIZE=5]------------------END TOP PANEL------------------[/SIZE][/B][/COLOR][/COMMENT]

[div class="mainPanel"][COMMENT][B][COLOR=rgb(209, 72, 65)][SIZE=5]------------------START MAIN PANEL------------------[/SIZE][/COLOR][/B][/COMMENT]

[div class="mainLeftPanel"]

[COLOR=rgb(243, 121, 52)][B][COMMENT]----THE TEXTS INSIDE THESE DIVS ARE USED IN THE SCRIPT AREA. IF YOU WANT TO CHANGE THE TEXT REMEMBER USING ONLY ONE WORD AND TO CHANGE IT DOWN AT THE SCRIPT AREA----[/COMMENT][/B][/COLOR]

[div class="characterOption"]Background[/div][B][COLOR=rgb(243, 121, 52)][COMMENT]![/COMMENT][/COLOR][/B]
[div class="characterOption"]Appearance[/div][COLOR=rgb(243, 121, 52)][B][COMMENT]![/COMMENT][/B][/COLOR]
[div class="characterOption"]Skills&Weaknesses[/div][COLOR=rgb(243, 121, 52)][B][COMMENT]![/COMMENT][/B][/COLOR]
[div class="characterOption"]Items[/div][COLOR=rgb(243, 121, 52)][B][COMMENT]![/COMMENT][/B][/COLOR]
[/div]

[div class="mainRightPanel"]
[COLOR=rgb(0, 168, 133)][B][COMMENT]----THERE IS A "BUG" THAT CAUSE A BLANK SPACE IF YOU START WRITING AND PRESS ENTER BETWEEN THE DIVS. TO SOLVE THIS WRITE BESIDE IT, JUST LIKE THE LOREM IPSUM NEKORUM TEXT. IF YOU DON'T MIND THE BLANK SPACE, NO WORRIES THEN----[/COMMENT][/B]

[COMMENT]*[/COMMENT][/COLOR]
[div class="textBackground text"]Lorem Ipsum Nekorum Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[/div]

[COLOR=rgb(0, 168, 133)][COMMENT]*[/COMMENT][/COLOR]
[div class="textAppearance text"]Lorem Ipsum nekorum Appearance[/div]

[COLOR=rgb(0, 168, 133)][COMMENT]*[/COMMENT][/COLOR]
[div class="textSkillWeakness text"]Lorem Ipsum nekorum Skills and Weakness[/div]

[COLOR=rgb(0, 168, 133)][COMMENT]*[/COMMENT][/COLOR]
[div class="textItems text"]Lorem Ipsum nekorum Items[/div]

[/div]
[/div][/font]
[/div]
[COLOR=rgb(209, 72, 65)][B][COMMENT][SIZE=5]------------------END MAIN PANEL------------------[/SIZE][/COMMENT][/B][/COLOR]

[B][COLOR=rgb(85, 57, 130)][COMMENT][SIZE=5]------------------CLASSES, ANIMATIONS AND SCRIPTS------------------[/SIZE][/COMMENT][/COLOR]

[COLOR=rgb(147, 101, 184)][COMMENT]------------------CLASSES------------------[/COMMENT][/COLOR][/B]

[COLOR=rgb(243, 121, 52)][B][SIZE=5][COMMENT]----THE WORDS WITH DOUBLE LINES (--) ARE VARIABLES, HERE YOU CAN PASTE THE LINK OF YOUR CHARACTER'S PICTURE, BACKGROUND, AND TOP BACKGROUND. JUST PASTE THE LINK BETWEEN THE url() AND MAKE SURE TO INCLUDE DE (' ')----[/COMMENT][/SIZE][/B][/COLOR]

[class=container]
    padding: 0;
    margin: 0;
    width: 100%;
    height: 55vw;
    color: white;
    --topBackground: url('https://cdnb.artstation.com/p/assets/images/images/004/682/455/large/simon-sanchez-madera-tilepreview.jpg');
    --mainBackground: url('https://i.pinimg.com/originals/f7/95/b1/f795b15fb195bf18bb12a077e781f5ce.gif');
    --characterPicture: url('https://i.pinimg.com/564x/05/e3/6a/05e36ac296f0bb2287ac59d2da6b2ffb.jpg');
    --optionBackground: linear-gradient(90deg, #444040, #7F6839);
    --hp: 70%;
    --mp: 90%;
[/class]

[class name=container maxWidth=700px]
height: inherit;
[/class]

[class=topPanel]
    width: 100%;
    height: 30%;
    background-image: var(--topBackground);
    display: flex;
    justify-content: space-between;
    color: white;
    font-size: 1.5rem;
    overflow: auto;
[/class]

[class name=topPanel maxWidth=700px]
height: 100%;
display: block;
text-align: center;
[/class]

[class=characterBasic]
    display: block;
    width: 33%;
[/class]

[class name=characterBasic maxWidth=700px]
width: 100%;
[/class]

[class=characterName]
    font-size: 2.5rem;
    text-shadow: 2px 2px black;
[/class]

[class=barBorder]
    width: 100%;
    height: 11%;
    background-color: #4b4b4b;
    border: 3px solid white;
    position: relative;
[/class]

[class name=barBorder maxWidth=700px]
height: 2rem;
width: 98%;
border: 1px solid white;
[/class]

[class=bar]
    position: absolute;
    overflow: hidden;
    font-size: 0.8rem;
    height: 100%;
    padding-left: 1%;
[/class]

[class=hpBar]
    width: var(--hp);
    background-color: #cf1818;
[/class]

[class=mpBar]
    width: var(--mp);
    background-color: #114c83;
[/class]

[class=profilePicture]
    width: 20%;
    background-color: #2020ff95;
    border: 2px solid #fecc1010;
    background-image: var(--characterPicture);
    background-size: 150%;
    background-position: 35% 30%;
[/class]

[class name=profilePicture maxWidth=700px]
width: 100%;
height: 40vh;
[/class]

[class=characterStats]
    width: 43%;
    display: flex;
    flex-wrap: wrap;
    font-size: 2rem;
[/class]

[class name=characterStats maxWidth=700px]
width: 100%;
justify-content: center;
[/class]

[class=stat]
    width: 50%;
    font-size: 2.5rem;
[/class]
[class name=stat maxWidth=700px]
text-align: center;
[/class]

[class=mainPanel]
    display: flex;
    width: 100%;
    height: 70%;
    background-image: var(--mainBackground);
    background-size: cover;
    background-position: 80% 60%;
    text-shadow: 1px 1px 1px black;
[/class]

[class name=mainPanel maxWidth=700px]
height: 100%;
display:block;
background-size: 100%;
background-position: auto;
background-attachment: fixed;
[/class]

[class=mainLeftPanel]
    width: 30%;
    height: 100%;
[/class]

[class name=mainLeftPanel maxWidth=700px]
width: 100%;
[/class]

[class=mainRightPanel]
    position: relative;
    width: 70%;
    height: 100%;
    overflow: auto;
[/class]

[class name=mainRightPanel maxWidth=700px]
width: 100%;
[/class]

[class=characterOption]
    width: 100%;
    height: 20%;
    background-image: var(--optionBackground);
    background-size:cover;
    background-position:center;
    border: 3px solid #00000095;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    cursor: pointer;
[/class]

[class name=characterOption state=hover]
    color: yellow;
    box-shadow: inset 10px -10px 0px -8px rgba(189,139,38,1);
[/class]

[class=text]
    width: 100%
    height: 100%
    overflow: auto;
    background-color: #22364f70;
    white-space: pre-wrap;
    padding: 4%;
    display:none;
    font-size: 1.7rem;
[/class]

[class=showText]
    display:block;
[/class]

[COLOR=rgb(147, 101, 184)][B][COMMENT]------------------SCRIPTS------------------[/COMMENT][/B][/COLOR]

[B][COLOR=rgb(243, 121, 52)][COMMENT]---- IF YOU CHANGED SOME TEXT IN THE OPTIONS AREA, MAKE SURE TO CHANGE IT HERE TOO. YOU CAN SEE SOME CODE HERE, THE FIRST CODE INSIDE () INCLUDES THE TEXT WE CHANGED UP THERE. PUT THE SAME TEXT IN HERE. ----[/COMMENT][/COLOR][/B]

[COLOR=rgb(243, 121, 52)][B][COMMENT]---- YOU CAN ALSO ADD MORE OPTIONS, COPY AND PASTE ONE OF THE LINES AND FOLLOW THE PATTERN. IF YOU WANT A OPTION NAMED 'DOGGIES' IT WOULD BE SOMETHING LIKE if (eq ${tab} Doggies) (addClass showText textDoggies) (removeClass showText textDoggies). AS YOU CAN SEE, YOU ALSO HAVE TO ADD ANOTHER DIV WHERE THE MAIN TEXT GOES. NAME THE NEW CLASS OF THE TEXT AREA TO SOMETHING LIKE textDoggies AND YOU'RE DONE. ----[/COMMENT][/B][/COLOR]

[script class=characterOption on=click]
set tab (getText)
if (eq ${tab} Background) (addClass showText textBackground) (removeClass showText textBackground)
if (eq ${tab} Appearance) (addClass  showText textAppearance) (removeClass showText textAppearance)
if (eq ${tab} Skills&Weaknesses) (addClass showText textSkillWeakness) (removeClass showText textSkillWeakness)
if (eq ${tab} Items) (addClass showText textItems) (removeClass showText textItems)
[/script]
[SIZE=2][I]Code  by: [USER=75705]@foresigh[/USER][/I][/SIZE]
[/nobr]
 

Ayama

Enthusiast
[div=display: inline-block; margin: 0px auto; width: auto; max-width: 550px; border-left: 2px solid #45b39d; border-right: 2px solid #45b39d; padding: 10px; text-align: justify; color: #0e6251;]Flippin' love your graphics! <3[/div]
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top