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!

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 ^_^





Character Name
Race:


Age: 1000+



Class: Mage



Location: City


Made by @foresigh


<— Return

Background
Lorem Ipsum nekorum background

Personality
Lorem Ipsum nekorum Personality

Skills&Weaknesses
Lorem Ipsum nekorum Skills and weaknesses

Extras
Lorem Ipsum nekorum Extras




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

Skeletal soldier and vamp #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.







Name:

Age:

Location:


Code by @foresigh

Background
Lorem Ipsum Nekorum BG
Personality&Appearance
Lorem Ipsum Nekorum Personality
Skill&Weaknesses
Lorem Ipsum Nekorum Skills
Extras
Lorem Ipsum Nekorum Extras



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.

Werewolves & Vampires
Start Journey
Werewolves & Vampires
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
Lorem Ipsum nekorum lore
Lorem Ipsum nekorum rules
Name or Description
Name or Description
Name or Description
Name or Description
Plot
Lore
Rules
Players
code by @foresigh

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]
 

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

Top