NivieApple
I Am The Elephant.
[class name=body]
display: block;
width: 100%;
padding: 10vh 10px;
box-sizing: border-box;
overflow: hidden;
background: linear-gradient(#ffb9c9,#8decff);
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
[/class]
[class name=container]
display: flex;
width: 100%;
margin: auto;
max-width: 850px;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
align-content: center;
overflow: hidden;
border-radius: 10px;
[/class]
[class name=leftcolumn]
flex: 4 0 280px;
background: #FFF;
box-sizing: border-box;
padding: 20px;
overflow: hidden;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-content: center;
text-align: center;
[/class]
[class name=imagecontainer]
flex: 0 0 225px;
width: 226px;
height: 225px;
background: #FFF url(https://i.imgur.com/2niDXCJ.jpg) no-repeat center center;
font-size: 0px;
line-height: 0px;
display: inline-block;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
[/class]
[class name=mainimage]
display: block;
height: 100%;
width: 100%;
pointer-events: none;
mix-blend-mode: screen;
[/class]
[class name=title]
display: block;
font-family: 'Abril Fatface', serif;
font-size: 2em;
color: #ffb9c9;
text-transform: uppercase;
[/class]
[class name=subtitle]
width: 100%;
max-width: 215px;
text-align: center;
font-family: 'Quicksand', sanserif;
font-size: .6em;
text-transform: uppercase;
margin: auto;
margin-top: -5px;
margin-bottom: 20px;
font-weight: bold;
color: #8decff;
[/class]
[class name=maincontentcolumn]
flex: 5 0 280px;
background: rgba(255, 255, 255, 0.6);
max-height: 550px;
box-sizing: border-box;
padding: 20px;
overflow: hidden;
[/class]
[class name=scrollbox]
display: block;
height: 100%;
width: 100%;
padding-right: 150px;
overflow-x: visible;
overflow-y: scroll;
[/class]
[class name=tabcontents]
display: block;
width: 100%;
display: none;
[/class]
[class name=post]
display: block;
width: 100%;
background: white;
font-size: .8em;
font-family: 'Quicksand', sanserif;
color: #a1a1a1;
text-align: justify;
box-sizing: border-box;
padding: 10px;
margin-bottom: 25px;
[/class]
[class name=emptyspace]
display: none;
[/class]
[class name=image]
// add pointer events: none if you'd rather not deal with the larger view thing
font-size: 0px;
-webkit-filter: contrast(80%) brightness(120%) grayscale(30%);
filter: contrast(80%) brightness(120%) grayscale(30%);
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
[/class]
[class name=image state=hover]
// delete this class if planning on disabling the larger view thing
-webkit-filter: none;
filter: none;
[/class]
[class name=navcolumn]
flex: 1 0 100px;
background: #FFF;
box-sizing: border-box;
padding: 15px 0px;
overflow: hidden;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: center;
[/class]
[class name=navbutton]
flex: 1 0 100px;
box-sizing: border-box;
text-align: center;
font-family: 'Abril Fatface', serif;
font-size: 4em;
color: #ffb9c9;
padding: 10px;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
cursor: pointer;
[/class]
[class name=selectednavbutton]
flex: 1 0 100px;
box-sizing: border-box;
text-align: center;
font-family: 'Abril Fatface', serif;
font-size: 4em;
color: #8decff;
padding: 10px;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
cursor: pointer;
[/class]
[class name=navbutton state=hover]
color: #8decff;
[/class]
[script class=navbutton on=click]
// resets everything to their default appearance
hide tabcontents
removeClass selectednavbutton navbutton
// cheaty way of doing this lol
set currentTab (getText)
// sets which navbutton gets the color change
if (eq ${currentTab} 1) (addClass selectednavbutton navbuttonone)
if (eq ${currentTab} 2) (addClass selectednavbutton navbuttontwo)
if (eq ${currentTab} 3) (addClass selectednavbutton navbuttonthree)
if (eq ${currentTab} 4) (addClass selectednavbutton navbuttonfour)
if (eq ${currentTab} 5) (addClass selectednavbutton navbuttonfive)
// sets which tabcontents gets shown
if (eq ${currentTab} 1) (show tabcontentsone)
if (eq ${currentTab} 2) (show tabcontentstwo)
if (eq ${currentTab} 3) (show tabcontentsthree)
if (eq ${currentTab} 4) (show tabcontentsfour)
if (eq ${currentTab} 5) (show tabcontentsfive)
[/script]
[div style="display: none;"]
font call
font call
[/div]
[div class=body]
[div class=container]
[div class=leftcolumn]
[div class=imagecontainer]
[div class=mainimage]
[/div]
[/div]
[div class=title]
The Up and Comings
[/div]
[div class=subtitle]
"Some People Peak In High School"
[/div]
[/div]
[div class=maincontentcolumn]
[div class=scrollbox]
[div class="tabcontents tabcontentsone" style="display: block;"]
[div class=post]
I'm just warning you now, the idea for this RP may have been slightly influenced by a major obsession I had with Lemonade Mouth and Camp Rock back in my youth.... You've been warned.
[/div]
[div class=post]
[div class=title]Intro[/div]
Highschool is pretty rough as it is, I'm sure none of us had a perfect high school career, and when you're famous, well, that's just another level isn't it? This is almost a slice of life RP based around the lives of this band of teenagers who have recently made it big and are now forced to try and balance their school life and their new career. Along with any drama that's headin' their way if you get my drift.
[/div]
[div class=post]
[div class=title]Discord[/div]
There is a discord for this RP that will be used mostly for planning and discussion. If you are interested in the RP after reading all the pages, let me know and I will send you the link via a private message. You will start out in an into section, and as soon as you have made your cs and are officially in, you will gain access to the rest of the server.
[/div]
[div class=emptyspace]put new posts for tab1 above this div![/div]
[/div]
[div class="tabcontents tabcontentstwo"]
[div class=post]
[div class=image][/div]
[/div]
[div class=post]
So, you want in on this action? Sweet! Here are the roles available (remember all roles are available for any gender, just try to keep a good mix, we don't want to fill up on one type of person...):
- Lead Singer (Reserved @ apolla )
- Lead Guitar (Reserved rennuelaw (and songwriter))
- Second Guitar @ The Fluffiest Floof )
- Drummer (Reserved @ TARDIS06 )
- Keyboard (Reserved @SparklyMittens)
- PR (Reserved @Sega)
Lead Bassist(Taken by meee: NivieApple)
- All RPN rules gotta be followed
- Don't make everything about you
- No over the top characters. Creativity is encouraged, but no crazy unrealistic stuff, please
- Real face claims please and thank you! If you can't find one, just try to give a detailed description of your character in you CS
- Be courteous to other people, and if you have a problem, come to me about it
- Try to avoid one-liners as much as possible, there isn't a limit to how much you write, but at least a small paragraph is ideal
- No spamming chat of course. There should always be at least two posts between yours (UNLESS we have a situation where someone is unable to reply and we have to keep the RP moving with them on stand
- Have fun? (That's what this is about ain't it?)
[/div]
[div class=emptyspace]put new posts for tab4 above this div![/div]
[/div]
[div class="tabcontents tabcontentsfive"]
[div class=post]
[div class=title]That's All Folks [/div]
[div class=img][/div]
[/div]
[div class=emptyspace]put new posts for tab4 above this div![/div]
[/div]
[/div]
[/div]
[div class=navcolumn][div class="navbutton navbuttonone"]1[/div][div class="navbutton navbuttontwo"]2[/div][div class="navbutton navbuttonthree"]3[/div][div class="navbutton navbuttonfour"]4[/div][div class="navbutton navbuttonfive"]5[/div][/div]
[/div]
[/div]
Last edited: