cherub.
𝘤𝘭𝘰𝘶𝘥 ☁ 𝘨𝘢𝘻𝘦𝘳
[class=container]
height: 310px;
width: 360px;
margin: auto;
background-color: white;
overflow: hidden;
[/class]
[class=box1]
height: 250px;
width: 200px;
background-color: white;
margin-left: 140px;
margin-top: 40px;
position: absolute;
border: 1px solid lightgray;
overflow: hidden;
[/class]
[class=image]
height: 140px;
width: 160px;
margin-top: 55px;
margin-left: 20px;
position: absolute;
opacity: 0;
transition: 1s;
z-index: 1;
background-image: url('https://www.rpnation.com/data/avatars/m/52/52831.jpg?1525728157');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
[/class]
[class name=image state=hover]
cursor: default;
[/class]
[class=personality]
width: 80px;
height: 20px;
font-size: 10px;
font-family: 'Arial', sans-serif;
font-weight: bold;
color: black;
opacity: 0;
position: absolute;
background-color: transparent;
margin-top: 168px;
margin-left: 5px;
transform: translateY(-10px);
transition: 1s;
z-index: 0;
pointer-events: none;
letter-spacing: 0.5px;
[/class]
[class=history]
width: 80px;
height: 20px;
font-size: 10px;
font-family: 'Arial', sans-serif;
font-weight: bold;
color: black;
opacity: 0;
position: absolute;
background-color: transparent;
margin-top: 168px;
margin-left: 40px;
transform: translateY(-10px);
transition: 1s;
z-index: 0;
pointer-events: none;
letter-spacing: 0.5px;
[/class]
[class=extra]
width: 80px;
height: 20px;
font-size: 10px;
font-family: 'Arial', sans-serif;
font-weight: bold;
color: black;
opacity: 0;
position: absolute;
background-color: transparent;
margin-top: 168px;
margin-left: 65px;
transform: translateY(-10px);
transition: 1s;
z-index: 0;
pointer-events: none;
letter-spacing: 0.5px;
[/class]
[class=gallery]
width: 80px;
height: 20px;
font-size: 10px;
font-family: 'Arial', sans-serif;
font-weight: bold;
color: black;
opacity: 0;
position: absolute;
background-color: transparent;
margin-top: 168px;
margin-left: 85px;
transform: translateY(-10px);
transition: 1s;
z-index: 0;
pointer-events: none;
letter-spacing: 0.5px;
[/class]
[class=slide]
transform: translateX(0);
opacity: 0.2;
transition: opacity 0.5s , transform 1s;
[/class]
[class=image1]
height: 140px;
width: 160px;
margin-top: 55px;
margin-left: 20px;
opacity: 0.8;
transition: 1s;
background-image: url('http://i68.tinypic.com/23sbudy.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
margin-bottom: 47px;
[/class]
[class name=image1 state=hover]
cursor: default;
[/class]
[class=image2]
height: 140px;
width: 160px;
margin-top: 55px;
margin-left: 20px;
opacity: 0.8;
transition: 1s;
background-image: url('http://i64.tinypic.com/11c9ipz.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
margin-bottom: 47px;
[/class]
[class name=image2 state=hover]
cursor: default;
[/class]
[class=image3]
height: 140px;
width: 160px;
margin-top: 55px;
margin-left: 20px;
opacity: 0.8;
transition: 1s;
background-image: url('http://i67.tinypic.com/j75jdl.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
margin-bottom: 47px;
[/class]
[class name=image3 state=hover]
cursor: default;
[/class]
[class=showimg]
opacity: 0.8;
transition: 1s;
[/class]
[class=name]
font-size: 15px;
font-family: 'Arial', sans-serif;
font-style: italic;
font-weight: bold;
margin-left: 20px;
margin-top: 120px;
color: black;
position: absolute;
opacity: 0.3;
transition: 1s;
[/class]
[class name=name state=hover]
cursor: default;
[/class]
[class=tabcontainer]
height: 20px;
width: 80px;
position: absolute;
margin-top: 140px;
margin-left: 25px;
background-color: transparent;
padding: 5px;
[/class]
[class=tab1]
font-size: 14px;
font-family: 'Cardo', serif;
color: black;
font-weight: lighter;
position: absolute;
margin-left: 0px;
margin-top: 0px;
opacity: 0.3;
transition: 1s;
[/class]
[class name=tab1 state=hover]
opacity: 0.8;
transition: opacity 1s;
cursor: default;
[/class]
[class=tab2]
font-size: 14px;
font-family: 'Cardo', serif;
color: black;
font-weight: lighter;
position: absolute;
margin-left: 20px;
margin-top: 0px;
opacity: 0.3;
transition: 1s;
[/class]
[class name=tab2 state=hover]
opacity: 0.8;
transition: opacity 1s;
cursor: default;
[/class]
[class=tab3]
font-size: 14px;
font-family: 'Cardo', serif;
color: black;
font-weight: lighter;
position: absolute;
margin-left: 40px;
margin-top: 0px;
opacity: 0.3;
transition: 1s;
[/class]
[class name=tab3 state=hover]
opacity: 0.8;
transition: opacity 1s;
cursor: default;
[/class]
[class=tab4]
font-size: 14px;
font-family: 'Cardo', serif;
color: black;
font-weight: lighter;
position: absolute;
margin-left: 65px;
margin-top: 0px;
opacity: 0.3;
transition: 1s;
[/class]
[class name=tab4 state=hover]
opacity: 0.8;
transition: opacity 1s;
cursor: default;
[/class]
[class=content1]
height: 250px;
width: 200px;
background-color: transparent;
overflow-y: scroll;
padding-right: 20px;
position: absolute;
opacity: 0;
transition: 1s;
[/class]
[class=content2]
height: 250px;
width: 200px;
background-color: transparent;
overflow-y: scroll;
padding-right: 20px;
position: absolute;
opacity: 0;
transition: 1s;
[/class]
[class=content3]
height: 250px;
width: 200px;
background-color: transparent;
overflow-y: scroll;
padding-right: 20px;
position: absolute;
opacity: 0;
transition: 1s;
[/class]
[class=content4]
height: 250px;
width: 200px;
background-color: transparent;
overflow-y: scroll;
padding-right: 20px;
position: absolute;
opacity: 0;
transition: 1s;
[/class]
[class=para]
font-size: 11px;
text-align: justify;
color: black;
padding: 5px;
opacity: 0.7;
[/class]
[class name=para state=hover]
cursor: default;
[/class]
[class=show]
opacity: 1;
transition: 1s;
z-index: 1;
[/class]
[class=g1]
height: 140px;
width: 160px;
margin-top: 55px;
margin-left: 20px;
opacity: 0.8;
transition: 1s;
background-image: url('http://i63.tinypic.com/2yv4hmg.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
margin-bottom: 75px;
[/class]
[class name=g1 state=hover]
cursor: default;
[/class]
[class=g2]
height: 140px;
width: 160px;
margin-top: 55px;
margin-left: 20px;
opacity: 0.8;
transition: 1s;
background-image: url('https://i.imgur.com/1l9VsPP.gif');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
margin-bottom: 75px;
[/class]
[class name=g2 state=hover]
cursor: default;
[/class]
[class=g3]
height: 140px;
width: 160px;
margin-top: 55px;
margin-left: 20px;
opacity: 0.8;
transition: 1s;
background-image: url('https://i.imgur.com/4pojK4A.gif');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
margin-bottom: 55px;
[/class]
[class name=g3 state=hover]
cursor: default;
[/class]
[class=credit]
font-size: 10px;
color: rgba(0,0,0,0.3);
font-family: 'Arial', sans-serif;
font-style: italic;
position: absolute;
margin-top: 295px;
margin-left: 200px;
[/class]
[script class=image on=init]
addClass showimg image
removeClass show content1
removeClass show content2
removeClass show content3
removeClass show content4
[/script]
[script class=name on=click]
addClass showimg image
removeClass show content1
removeClass show content2
removeClass show content3
removeClass show content4
[/script]
[script class=tab1 on=click]
addClass show content1
removeClass show content2
removeClass show content3
removeClass show content4
removeClass showimg image
[/script]
[script class=tab2 on=click]
addClass show content2
removeClass show content1
removeClass show content3
removeClass show content4
removeClass showimg image
[/script]
[script class=tab3 on=click]
addClass show content3
removeClass show content1
removeClass show content2
removeClass show content4
removeClass showimg image
[/script]
[script class=tab4 on=click]
addClass show content4
removeClass show content1
removeClass show content2
removeClass show content3
removeClass showimg image
[/script]
[script class=tab1 on=mouseenter]
addClass slide personality
[/script]
[script class=tab1 on=mouseleave]
removeClass slide personality
[/script]
[script class=tab2 on=mouseenter]
addClass slide history
[/script]
[script class=tab2 on=mouseleave]
removeClass slide history
[/script]
[script class=tab3 on=mouseenter]
addClass slide extra
[/script]
[script class=tab3 on=mouseleave]
removeClass slide extra
[/script]
[script class=tab4 on=mouseenter]
addClass slide gallery
[/script]
[script class=tab4 on=mouseleave]
removeClass slide gallery
[/script]
[div class=container]
[div class=box1]
[div class=image][/div]
[div class=content1]
[div class=image1][/div]
[div class=para] rule 1 ✧ no one liners please ! i would like it if you had at least one or two paragraphs, but if you're somehow not able to o one or two paragraphs, you could at least give me enough details to work with please. longer posts are always fun to read, but they aren't required. i just like longer posts, all i say is just no one-liners.
rule 2 ✧ third person only ! your character isn't you, so i suggest you use "they" , "them", or just your characters name.
rule 3 ✧ ocs will be included ! this rule applies only if i say otherwise. if we're doing a fandom rp, i wouldn't mind you playing a canon character. unless it says, canon character x oc .
rule 4 ✧ offsite roleplaying please !! here are my preferences. skype > email > discord [/div] [/div] [div class=content2] [div class=image2][/div] [div class=para]pairings that are bolded are pairings that i would really want to do! roles that are italicized are the roles that i would like to play!
dom/sub
kidnapper/kidnappee
oh sangwoo/yoonbum
sailor moon but as guys, uranus and neptune
merman / pirate
high school / college romance
adventurer / companion
supernatural / human
f a n d o m s
anything marvel! peter parker / oc
oh sangwoo/yoonbum
bts, seventeen, pentagon, imfact... [/div] [/div] [div class=content3] [div class=image3][/div] [div class=para]kiss you inside out ; A and B meet a dinner party, get to chatting, and hit it off. A few bottles of champagne later, they're making their way back to A's loft. The morning after, a snowstorm prevents B from leaving and avoiding the "getting to know each other" phase they both wanted to avoid.When they get to it though, they realize it isn't that bad.
accidentally in love ; A and B were childhood best friends. It all started when A moved across the street when they were six, and from then on the two boys were attached at the hip. However, A's father's work required a lot of moving, and when they were fifteen, A moved away. They lost touch, even with social media connecting people. Their freshman year of college gave them a chance to reconnect, as fate made them each other's roommate. With years to catch up on and so little time, the two best friends get to work on becoming as close as they were way back when.
i don't want this night to end.. ; A graduation party finds two best friends, A and B intoxicated, lonely, and horny. Their inhibitions get the best of them, and they find themselves in each other's arms in the back of A's SUV. The morning comes along with sobreity, and the two get to talking. Unsure of their feelings for one another but curious at the same time, they plan an impromptu graduation trip. With a few sentences to their parents, they packed weeks worth of clothing in the back of the SUV, and are just going to drive. Along the way, the hope they can sort out their feelings for one another.
more coming soon! [/div] [/div] [div class=content4] characters coming soon!! [/div] [/div] [div class=credit]code by wonhae[/div] [div class=name]partner search[/div] [div class=tabcontainer] [div class=tab1]i.[/div] [div class=tab2]ii.[/div] [div class=tab3]iii.[/div] [div class=tab4]vi.[/div] [/div] [div class=personality]rules + ideals[/div] [div class=history]pairings[/div] [div class=extra]plots[/div] [div class=gallery]characters[/div] [/div]
rule 2 ✧ third person only ! your character isn't you, so i suggest you use "they" , "them", or just your characters name.
rule 3 ✧ ocs will be included ! this rule applies only if i say otherwise. if we're doing a fandom rp, i wouldn't mind you playing a canon character. unless it says, canon character x oc .
rule 4 ✧ offsite roleplaying please !! here are my preferences. skype > email > discord [/div] [/div] [div class=content2] [div class=image2][/div] [div class=para]pairings that are bolded are pairings that i would really want to do! roles that are italicized are the roles that i would like to play!
dom/sub
kidnapper/kidnappee
oh sangwoo/yoonbum
sailor moon but as guys, uranus and neptune
merman / pirate
high school / college romance
adventurer / companion
supernatural / human
f a n d o m s
anything marvel! peter parker / oc
oh sangwoo/yoonbum
bts, seventeen, pentagon, imfact... [/div] [/div] [div class=content3] [div class=image3][/div] [div class=para]kiss you inside out ; A and B meet a dinner party, get to chatting, and hit it off. A few bottles of champagne later, they're making their way back to A's loft. The morning after, a snowstorm prevents B from leaving and avoiding the "getting to know each other" phase they both wanted to avoid.When they get to it though, they realize it isn't that bad.
accidentally in love ; A and B were childhood best friends. It all started when A moved across the street when they were six, and from then on the two boys were attached at the hip. However, A's father's work required a lot of moving, and when they were fifteen, A moved away. They lost touch, even with social media connecting people. Their freshman year of college gave them a chance to reconnect, as fate made them each other's roommate. With years to catch up on and so little time, the two best friends get to work on becoming as close as they were way back when.
i don't want this night to end.. ; A graduation party finds two best friends, A and B intoxicated, lonely, and horny. Their inhibitions get the best of them, and they find themselves in each other's arms in the back of A's SUV. The morning comes along with sobreity, and the two get to talking. Unsure of their feelings for one another but curious at the same time, they plan an impromptu graduation trip. With a few sentences to their parents, they packed weeks worth of clothing in the back of the SUV, and are just going to drive. Along the way, the hope they can sort out their feelings for one another.
more coming soon! [/div] [/div] [div class=content4] characters coming soon!! [/div] [/div] [div class=credit]code by wonhae[/div] [div class=name]partner search[/div] [div class=tabcontainer] [div class=tab1]i.[/div] [div class=tab2]ii.[/div] [div class=tab3]iii.[/div] [div class=tab4]vi.[/div] [/div] [div class=personality]rules + ideals[/div] [div class=history]pairings[/div] [div class=extra]plots[/div] [div class=gallery]characters[/div] [/div]
