Closed Ria's -- code dump?

RI.a · Aug 7, 2018

Svisttt said:
These are all beautiful oh my goshhhh good work

Thank you!!

Roman · Sep 3, 2018

These are all so good!

Wouldn't be a problem is I used this one, would it?

RI.a said:
[class=header] width: 250px; height: 90px; background#ffffff; font-family: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]Simple CS Codes 'cont
Made this one for E.R.A.A. RP. Used the same code for Akatsuki no Yona RP.
Click the name to open!
Mobile friendly!
Features: Open button, close button, single scroll, animation.[/div]

[class=openwindow] height:70vh; background:url('https://cdna.artstation.com/p/assets/images/images/003/103/838/large/kang-joo-sung-galgoo-louise-top-web.jpg?1469714011'); background-size:fit; background-position:top; background-repeat:no-repeat; padding:1em; margin:auto;center; [/class] [class=openbutton] margin:auto;center; border:2px solid white; width:150px; padding:.2em; font-family:Unica One; font-size:4em; color:white; text-align:center; text-shadow: 1px 2px 0px #7b78a5; animation:{post_id}loop 2s linear infinite; cursor:pointer; [/class] [animation=loop] [keyframe=0]opacity:0.25[/keyframe] [keyframe=25]opacity:0.5[/keyframe] [keyframe=50]opacity:0.75[/keyframe] [keyframe=75]opacity:0.5[/keyframe] [keyframe=100]opacity:0.25[/keyframe] [/animation] [class=mainpage] height:70vh; padding:1em; overflow:hidden; overflow-y:scroll; background:url('https://i.imgur.com/iZ5LYWJ.png'); background-size:fit; background-position:center; background-lock:fixed; background-repeat:no-repeat; margin:auto;center; font-family:Karla; font-size:0.9em; color:black; text-align:center; [/class] [class=closebutton] font-size:2em; width:10px; cursor:pointer; position:absolute; [/class] [script class=none] hide mainpage hide closebutton [/script] [script class=openbutton on=click] slideUp 500 openwindow show mainpage show closebutton hide openbutton [/script] [script class=closebutton on=click] slideDown 500 openwindow hide closebutton hide mainpage fadeIn 500 openbutton [/script] [class=textbox] margin:auto;center; background:white; opacity:0.9; width:80%; [/class]

[div class=openwindow]

[div class=openbutton]JUZO
[/div][div class=mainpage][div class=closebutton][/div]

[div class=textbox]
basics
Name: Juzo Iida
Code Number: tbd
Age: 17 years old
How long have you been at the facility: 10 years
Gender: Male
Sexuality: Heterosexual
Dream: To find people that won't use him for their own gain.[/div]

[div class=textbox]
appearance
Height: 175cm
Weight: 75kg
Hair Colour: Ash blue
Eye Colour: Black
Complexion: Fair
Features: Diamond skin (currently able to activate at will)[/div]

[div class=textbox]
powers
Natural: Able to produce diamonds (similar to hair growth, but slower), it does not cause him harm when removing the small stones.
Artificial: Self-hardness Manipulation: Juzo is able to harden his entire body and able to take attacks and deflect bullets, but this limits his movement and if an attack hits a pressure point, it will falter this form and revert him back.
Diamond Mimicry:
Juzo is able to harden parts of his body at will (hands up to elbows, feet up to knees) to keep his mobility and use his hardened limbs to attack.

Future: Diamond form-organic: His right arm, left leg, patches on his back, and chest are permanently diamond. Movement of his joints is not limited as it fused with his tissues and ligaments. Giving him the hardness to attack and defend.

Control:
Danger Level: tbd
Experiment Effects: Enhancements applied during early experimentation gave him his powers mentioned above. Future-a strong dosage left his body permanently damaged, with parts of it diamond. He's no longer able to turn it back to normal. It is not yet known if damage to diamond areas are treatable.
Medication Trail: tbd[/div]

[div class=textbox]
abilities
Martial Arts:
Hand-to-Hand Combat: [/div]

[div class=textbox]
weaknesses
Current
Durability: Under immense amounts of pressure and/or at pressure points, his diamond form is liable to crack and will cause Juzo intense pain (varying degrees of pains similar to sprains or broken bones, depending on severity of the damage)
Time Limit: Juzo is only able to activate his powers for a maximum of 10 minutes at a time, and will only able to reactivate it after 30 minutes.

Future (after strong dosage of enhancements)
As parts of his body is permanently diamond, his 'normal' human parts are defenceless and are his weak points
[/div]

[div class=textbox]
personality
- Independent
- Cautious
- Reserved
- Loyal
- Kind
- Empathatic
- Untrusting
- Just
- Disciplined
[/div]

[div class=textbox]
bio
At the age of 5, Juzo's harmless ability to grow diamonds emerged. His family got rich at a very unnatural pace, harvesting his diamonds and selling them. His parents started treating him as their gold mine instead of their son. Within two years, they've limited his interaction to the outside world from not being able to play outside, unable to meet his friends or children his age, to denying him his education. Juzo doesn't know why his parents became so strict with him, he did what he was told, and always gave them the shiny rocks that appeared on his body. One day, during a temper tantrum, he managed to slip by his parents. Laughing as he ran away from them as he thought of it as a game of tag. Just like how he grows, the rate of producing the diamonds increased and would grow at random places. It was no longer possible to hide his shiny composition and he stuck out like a sore thumb in the watchful gaze of the government.

He got taken away from his parents that day. Scared, the scientists told him he would be treated better, that he would be able to go out and play- such simple lies are able to sway a 7 year old. At first, he enjoyed it. He had a roommate, the scientists were nice and only asked for the diamonds which he happily gave. It all changed when greed started to corrupt them and the officials. They started injecting him with enhancements, trying to quicken the production... which only resulted in a mutation and giving him his powers. He now could change his entire body into diamond at will. Chipping off the hard stone now was hell. He didn't want to do it anymore, but if he didn't meet his daily quota, the guards will torture him.

Fed up of being used, Juzo diamond punched a few scientists and threatened them, only to get restrained and detained by the guards soon after. More physical experiments would be done, testing his durability, testing if he could transplant his natural ability to others. They taught him martial arts and hand to hand combat, testing if his diamond form could be useful in a fight. [/div]

[div class=textbox]
extra
Roommate: tbd
Theme:
Faceclaim: Kang Joo Song[/div]

[/div][/div]
code by Ri.a

Code:

[nobr] [class=openwindow] height:70vh; background:url('https://cdna.artstation.com/p/assets/images/images/003/103/838/large/kang-joo-sung-galgoo-louise-top-web.jpg?1469714011'); background-size:fit; background-position:top; background-repeat:no-repeat; padding:1em; margin:auto;center; [/class] [class=openbutton] margin:auto;center; border:2px solid white; width:150px; padding:.2em; font-family:Unica One; font-size:4em; color:white; text-align:center; text-shadow: 1px 2px 0px #7b78a5; animation:{post_id}loop 2s linear infinite; cursor:pointer; [/class] [animation=loop] [keyframe=0]opacity:0.25[/keyframe] [keyframe=25]opacity:0.5[/keyframe] [keyframe=50]opacity:0.75[/keyframe] [keyframe=75]opacity:0.5[/keyframe] [keyframe=100]opacity:0.25[/keyframe] [/animation] [class=mainpage] height:70vh; padding:1em; overflow:hidden; overflow-y:scroll; background:url('https://i.imgur.com/iZ5LYWJ.png'); background-size:fit; background-position:center; background-lock:fixed; background-repeat:no-repeat; margin:auto;center; font-family:Karla; font-size:0.9em; color:black; text-align:center; [/class] [class=closebutton] font-size:2em; width:10px; cursor:pointer; position:absolute; [/class] [script class=none] hide mainpage hide closebutton [/script] [script class=openbutton on=click] slideUp 500 openwindow show mainpage show closebutton hide openbutton [/script] [script class=closebutton on=click] slideDown 500 openwindow hide closebutton hide mainpage fadeIn 500 openbutton [/script] [class=textbox] margin:auto;center; background:white; opacity:0.9; width:80%; [/class] [/nobr] [centerblock=70][div=overflow:hidden;height:70vh;padding:1em;][div class=openwindow] [div class=openbutton][font=Unica One]JUZO[/font][/div][/div][div class=mainpage][div class=closebutton][fa]fa-times-circle[/fa][/div][div=margin:auto;center;width:50%;][img]https://cdna.artstation.com/p/assets/images/images/003/103/840/large/kang-joo-sung-galgoo-louisl01-web.jpg?1469711451jpg[/img][/div] [div class=textbox][div=width:100%;margin:auto;center;background:#43416d;font-family:Unica One;font-size:1.5em;color:white;text-align:center;padding:0.2em;]basics[/div][font=Karla]Name: Juzo Iida[/font] Code Number: tbd Age: 17 years old How long have you been at the facility: 10 years Gender: Male Sexuality: Heterosexual Dream: To find people that won't use him for their own gain.[/div] [div class=textbox][div=width:100%;margin:auto;center;background:#43416d;font-family:Unica One;font-size:1.5em;color:white;text-align:center;padding:0.2em;]appearance[/div]Height: 175cm Weight: 75kg Hair Colour: Ash blue Eye Colour: Black Complexion: Fair Features: Diamond skin (currently able to activate at will)[/div] [div class=textbox][div=width:100%;margin:auto;center;background:#43416d;font-family:Unica One;font-size:1.5em;color:white;text-align:center;padding:0.2em;]powers[/div]Natural: Able to produce diamonds (similar to hair growth, but slower), it does not cause him harm when removing the small stones. Artificial: [url=http://powerlisting.wikia.com/wiki/Self-Hardness_Manipulation]Self-hardness Manipulation[/url]: [color=#43416d][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/color] Juzo is able to harden his entire body and able to take attacks and deflect bullets, but this limits his movement and if an attack hits a pressure point, it will falter this form and revert him back. [url=http://powerlisting.wikia.com/wiki/Diamond_Mimicry]Diamond Mimicry[/url]: [color=#43416d][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/color] Juzo is able to harden parts of his body at will (hands up to elbows, feet up to knees) to keep his mobility and use his hardened limbs to attack. Future: Diamond form-organic: His right arm, left leg, patches on his back, and chest are permanently diamond. Movement of his joints is not limited as it fused with his tissues and ligaments. Giving him the hardness to attack and defend. [div=margin:auto;center;width:100%;][img]https://cdna.artstation.com/p/assets/images/images/003/103/846/large/kang-joo-sung-galgoo-luis02-web.jpg?1469711504[/img][/div] Control: [color=#43416d][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/color] Danger Level: tbd Experiment Effects: Enhancements applied during early experimentation gave him his powers mentioned above. [i]Future-a strong dosage left his body permanently damaged, with parts of it diamond. He's no longer able to turn it back to normal. It is not yet known if damage to diamond areas are treatable. Medication Trail: tbd[/i][/div] [div class=textbox][div=width:100%;margin:auto;center;background:#43416d;font-family:Unica One;font-size:1.5em;color:white;text-align:center;padding:0.2em;]abilities[/div]Martial Arts: [color=#43416d][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/color] Hand-to-Hand Combat: [color=#43416d][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/color][/div] [div class=textbox][div=width:100%;margin:auto;center;background:#43416d;font-family:Unica One;font-size:1.5em;color:white;text-align:center;padding:0.2em;]weaknesses[/div][u]Current[/u] Durability: Under immense amounts of pressure and/or at pressure points, his diamond form is liable to crack and will cause Juzo intense pain (varying degrees of pains similar to sprains or broken bones, depending on severity of the damage) Time Limit: Juzo is only able to activate his powers for a maximum of 10 minutes at a time, and will only able to reactivate it after 30 minutes. [u]Future[/u] (after strong dosage of enhancements) As parts of his body is permanently diamond, his 'normal' human parts are defenceless and are his weak points [/div] [div class=textbox][div=width:100%;margin:auto;center;background:#43416d;font-family:Unica One;font-size:1.5em;color:white;text-align:center;padding:0.2em;]personality[/div]- Independent - Cautious - Reserved - Loyal - Kind - Empathatic - Untrusting - Just - Disciplined [/div] [div class=textbox][div=width:100%;margin:auto;center;background:#43416d;font-family:Unica One;font-size:1.5em;color:white;text-align:center;padding:0.2em;]bio[/div]At the age of 5, Juzo's harmless ability to grow diamonds emerged. His family got rich at a very unnatural pace, harvesting his diamonds and selling them. His parents started treating him as their gold mine instead of their son. Within two years, they've limited his interaction to the outside world from not being able to play outside, unable to meet his friends or children his age, to denying him his education. Juzo doesn't know why his parents became so strict with him, he did what he was told, and always gave them the shiny rocks that appeared on his body. One day, during a temper tantrum, he managed to slip by his parents. Laughing as he ran away from them as he thought of it as a game of tag. Just like how he grows, the rate of producing the diamonds increased and would grow at random places. It was no longer possible to hide his shiny composition and he stuck out like a sore thumb in the watchful gaze of the government. He got taken away from his parents that day. Scared, the scientists told him he would be treated better, that he would be able to go out and play- such simple lies are able to sway a 7 year old. At first, he enjoyed it. He had a roommate, the scientists were nice and only asked for the diamonds which he happily gave. It all changed when greed started to corrupt them and the officials. They started injecting him with enhancements, trying to quicken the production... which only resulted in a mutation and giving him his powers. He now could change his entire body into diamond at will. Chipping off the hard stone now was hell. He didn't want to do it anymore, but if he didn't meet his daily quota, the guards will torture him. Fed up of being used, Juzo diamond punched a few scientists and threatened them, only to get restrained and detained by the guards soon after. More physical experiments would be done, testing his durability, testing if he could transplant his natural ability to others. They taught him martial arts and hand to hand combat, testing if his diamond form could be useful in a fight. [/div] [div class=textbox][div=width:100%;margin:auto;center;background:#43416d;font-family:Unica One;font-size:1.5em;color:white;text-align:center;padding:0.2em;]extra[/div]Roommate: tbd Theme: [MEDIA=youtube]WR7U7_cKJw4[/MEDIA] Faceclaim: [url=https://www.artstation.com/galgoo]Kang Joo Song[/url][/div] [/div][/div][div=text-align:center;font-family:Karla;font-size:0.5em;letter-spacing:0.3em;opacity:0.6;]code by Ri.a[/div][/centerblock]

RI.a · Sep 3, 2018

Roman said:
These are all so good!

Wouldn't be a problem is I used this one, would it?

Not at all! ^^

Raven Queen · Sep 5, 2018

I LOVE your codes and I hope you don't mind me using one for our roleplay together (>.<)y

RI.a · Sep 6, 2018

Raven Queen said:
I LOVE your codes and I hope you don't mind me using one for our roleplay together (>.<)y

Of course not buddy! All my codes here are free to use ^^

RI.a · Sep 6, 2018

[class=header] width: 250px; height: 90px; background#ffffff; font-family: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]Chique IC Code
Mobile friendly!
So, apparently hiding music players are not allowed anymore (oh wells). So here's the code without any players. You can still add them with the media tag or check out Sugarvine and Alteras tutorial about gdocs here. Feel free to mess with the colours, image and dimensions.
Features: Single hidden scroll
[/div]

Min-So

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae sapien eget dolor consectetur ullamcorper et ac nibh. Maecenas a ultricies dui. Etiam ac rhoncus augue. Sed sit amet lacinia nibh. Donec nisi mauris, sollicitudin dapibus diam at, ultrices vehicula nibh. Fusce in ligula vitae neque efficitur volutpat at in lorem. Mauris rutrum lorem gravida semper imperdiet. Mauris luctus massa vel libero accumsan, vitae interdum tellus auctor.

Etiam turpis eros, volutpat vel consectetur eleifend, semper a ipsum. Nullam ligula arcu, ultricies et blandit quis, pulvinar a mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras id aliquet libero, id tincidunt dolor. Duis facilisis dignissim lorem nec varius. Ut fringilla quis est vel aliquam. Quisque vehicula ultrices nunc sit amet sollicitudin. Nunc eu risus at tellus imperdiet faucibus viverra nec sapien. Duis nec orci risus. Sed sem urna, tempus vitae pulvinar at, pellentesque non dui. Pellentesque id dolor felis. Pellentesque malesuada consequat sem, ac imperdiet erat. Ut eu lacus eget magna sagittis ullamcorper.

Phasellus nec porttitor risus. Suspendisse tristique placerat augue sed dignissim. Aenean faucibus quam eu massa viverra, sit amet consectetur mi eleifend. Ut malesuada nisi in neque tempor, eu ultricies elit luctus. Sed suscipit iaculis risus at vulputate. Curabitur ac augue eget enim egestas tempus. Aenean fermentum velit vel leo tristique, in iaculis justo ullamcorper. Maecenas dictum, massa quis faucibus semper, lectus nunc pharetra turpis, ac tempus lectus orci a ligula. Morbi volutpat mauris nec nibh venenatis elementum. Morbi nec congue dolor. Suspendisse quam orci, ultricies eget iaculis vel, aliquet id libero. Nullam pharetra dictum orci vitae molestie. Nulla ornare dapibus lectus. Nulla vel aliquam velit, molestie gravida quam. Proin suscipit leo ipsum, quis convallis diam molestie ac.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse sagittis dui non vestibulum maximus. Curabitur consequat vitae arcu vitae semper. Praesent vehicula eu nisi id sagittis. Cras euismod tempor diam, quis ultricies libero faucibus tempor. Sed eget bibendum mi, sit amet pulvinar odio. Quisque sit amet nisi euismod, sodales nulla at, egestas nulla. In hac habitasse platea dictumst. In hac habitasse platea dictumst.

code by RI.a

Code:

[div=margin:auto;center;background:#fff;min-width:200px;max-width:600px;overflow:hidden;border:1px solid #ddd;][div=background:url('https://i.pinimg.com/564x/15/04/ad/1504adb78c1c611bd38c265356bc4686.jpg');background-position:0px -6em;background-size:cover;height:35vh;width:100%;background-repeat:no-repeat;][/div][div=height:2em;width:100%;background:#cc6e1c;margin-top:-1em;padding-left:1em;font-size:2em;line-height:1em;][div=text-shadow:1px 1px 1px dimgray;font-size:2em;color:white;transform:rotate(358deg);margin-top:-1em;pointer-events:none;][font= Sacramento][fa]fa-heart[/fa] Min-So[/font][/div][/div][div=width:86%;margin-top:0.8em;margin-left:6em;text-shadow:1px 1px 1px dimgray;font-size:0.8em;color:white;text-align:right;][font=Oxygen]| Location: | 
| With: | 
| Mentions: |[/font][/div][div=border-bottom:2em solid #cc6e1c;padding:10px;background:#fff;][div=width:113%;overflow:auto;height:50vh;][div=padding:0em 0.3em 0em 0.2em;height:50vh;width:88%;text-align:justify;font-family:Oxygen;color:#222;font-size:0.8em;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae sapien eget dolor consectetur ullamcorper et ac nibh. Maecenas a ultricies dui. Etiam ac rhoncus augue. Sed sit amet lacinia nibh. Donec nisi mauris, sollicitudin dapibus diam at, ultrices vehicula nibh. Fusce in ligula vitae neque efficitur volutpat at in lorem. Mauris rutrum lorem gravida semper imperdiet. Mauris luctus massa vel libero accumsan, vitae interdum tellus auctor.

Etiam turpis eros, volutpat vel consectetur eleifend, semper a ipsum. Nullam ligula arcu, ultricies et blandit quis, pulvinar a mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras id aliquet libero, id tincidunt dolor. Duis facilisis dignissim lorem nec varius. Ut fringilla quis est vel aliquam. Quisque vehicula ultrices nunc sit amet sollicitudin. Nunc eu risus at tellus imperdiet faucibus viverra nec sapien. Duis nec orci risus. Sed sem urna, tempus vitae pulvinar at, pellentesque non dui. Pellentesque id dolor felis. Pellentesque malesuada consequat sem, ac imperdiet erat. Ut eu lacus eget magna sagittis ullamcorper.

Phasellus nec porttitor risus. Suspendisse tristique placerat augue sed dignissim. Aenean faucibus quam eu massa viverra, sit amet consectetur mi eleifend. Ut malesuada nisi in neque tempor, eu ultricies elit luctus. Sed suscipit iaculis risus at vulputate. Curabitur ac augue eget enim egestas tempus. Aenean fermentum velit vel leo tristique, in iaculis justo ullamcorper. Maecenas dictum, massa quis faucibus semper, lectus nunc pharetra turpis, ac tempus lectus orci a ligula. Morbi volutpat mauris nec nibh venenatis elementum. Morbi nec congue dolor. Suspendisse quam orci, ultricies eget iaculis vel, aliquet id libero. Nullam pharetra dictum orci vitae molestie. Nulla ornare dapibus lectus. Nulla vel aliquam velit, molestie gravida quam. Proin suscipit leo ipsum, quis convallis diam molestie ac.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse sagittis dui non vestibulum maximus. Curabitur consequat vitae arcu vitae semper. Praesent vehicula eu nisi id sagittis. Cras euismod tempor diam, quis ultricies libero faucibus tempor. Sed eget bibendum mi, sit amet pulvinar odio. Quisque sit amet nisi euismod, sodales nulla at, egestas nulla. In hac habitasse platea dictumst. In hac habitasse platea dictumst. [/div][/div][/div][/div][div=text-align:center;font-size:0.5em;opacity:0.6;letter-spacing:0.3em;]code by RI.a[/div]

RI.a · Sep 6, 2018

[class=header] width: 250px; height: 90px; background#ffffff; font-family: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]Concatenate CS Code
Not mobile friendly
This has been sitting in my workshop for a while now. Been experimenting with how to have two CS sheet in one code inspired by Feverdreams. But things started to disappear and I couldn't figure out why. So I'm sticking to what I can do for now :p Enjoy!
Features: Tabs, hidden scroll, animation, hover, script
[/div]

[class=container] width:100%; height:80vh; margin:auto;center; display:flex; flex-wrap:row-wrap; background-color: #770909; background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 5%, rgba(0,0,0,.1) 5%, rgba(0,0,0,.1)), linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 5%, rgba(0,0,0,.1) 5%, rgba(0,0,0,.1)); background-size: 70px 120px; overflow:hidden; [/class] [class=title] font-family:Kaushan Script; font-size:3em; color:#eee; text-align:center; text-shadow:1px 2px 0px #e271ca; position:absolute; margin:auto;center; width:1em; height:auto; margin-left:93%; z-index:25px; opacity:0; animation:{post_id}fade 0.75s linear forwards; animation-delay:1s; [/class] [class=largepicture] width:40%; height:80vh; display:inline-block; background:url('https://i.imgur.com/Lob95pE.png'); background-size:cover; background-repeat:no-repeat; background-position:-2.5em 0em; z-index:3px; margin:auto;center; opacity:0; animation:{post_id}fade 0.75s linear forwards; animation-delay:1s; [/class] [class=contentwrap] width:60%; height:80vh; padding:0.8em; overflow:hidden; opacity:0; animation:{post_id}fade 0.75s linear forwards; animation-delay:1s; justify-content:space-between; display:flex; [/class] [animation=fade] [keyframe=0]opacity:0;[/keyframe] [keyframe=25]opacity:0.25;[/keyframe] [keyframe=50]opacity:0.5;[/keyframe] [keyframe=75]opacity:0.75;[/keyframe] [keyframe=100]opacity:1;[/keyframe] [/animation] [class=tabwrap] width:6%; height:100vh; margin:auto;center; margin-top:-1em; background:#222; padding:0.3em; z-index:10px; background-image: linear-gradient(#222, #770909); [/class] [class=tab] font-family:Josefin Sans; font-size:1.3em; width:3%; height:auto; cursor:pointer; color:#d8baba; transition:all 0.75s ease-in; text-align:left; padding:0em 0em 0em 0.8em; margin-left:-.3em; [/class] [class name=tab state=hover] color:#fff; text-shadow: 1px 1px 1px #d8baba; [/class] [class=contentbox] width:94%; overflow:hidden; height:75vh; [/class] [class=textscroll] width:105%; height:75vh; overflow-y:scroll; [/class] [class=textbox] width:90%; padding:0.8em; font-family

pen Sans; font-size:1em; color:#fff; text-align:justify; opacity:0.8; [/class] [script class=none] hide one hide two hide three hide four hide five [/script] [script class=tabone on=click] fadeIn 1000 one hide two hide three hide four hide five hide zero [/script] [script class=tabtwo on=click] fadeIn 1000 two hide one hide three hide four hide five hide zero [/script] [script class=tabthree on=click] fadeIn 1000 three hide two hide one hide four hide five hide zero [/script] [script class=tabfour on=click] fadeIn 1000 four hide three hide two hide one hide zero hide five [/script] [script class=tabfive on=click] fadeIn 1000 five hide three hide two hide one hide zero hide four [/script] [script class=tabhome on=click] fadeIn 1000 zero hide three hide two hide one hide four hide five [/script] [div class=container][div class=contentwrap][div class=contentbox][div class=textscroll] [div class="textbox zero"]

ROLE

HERE

[/div] [div class="textbox one"]Name:
Nickname(s):
Age:
Gender:
Pronoun(s):
Race:
Occupation:
Class: [/div] [div class="textbox two"]Virtues:
Vices:

Personality: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mollis tellus sed tortor volutpat dictum. Integer porta tortor nibh, id dictum tellus ullamcorper eu. Mauris pretium cursus mi, a gravida quam dictum et. Ut varius, dui at cursus pretium, nibh metus volutpat libero, nec laoreet eros mi ut tortor. Fusce dui tellus, gravida sit amet arcu vitae, volutpat rutrum augue. Etiam condimentum porttitor felis, at porta ex volutpat in. Suspendisse porttitor, diam eleifend congue lobortis, sapien augue tincidunt dui, pulvinar hendrerit urna eros nec arcu. Curabitur non ligula ornare, dignissim ante ut, porta nisl. Morbi et lectus in enim tempus pellentesque sit amet ut leo. Fusce pharetra facilisis risus. Donec euismod molestie eleifend. Integer eleifend nibh sit amet arcu faucibus convallis. Fusce fermentum augue id felis eleifend tempus. Aenean diam lacus, bibendum in lacus eget, sagittis fringilla nulla.

Quirks/Habits:
Hobbies/Interests: [/div] [div class="textbox three"]Backstory: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mollis tellus sed tortor volutpat dictum. Integer porta tortor nibh, id dictum tellus ullamcorper eu. Mauris pretium cursus mi, a gravida quam dictum et. Ut varius, dui at cursus pretium, nibh metus volutpat libero, nec laoreet eros mi ut tortor. Fusce dui tellus, gravida sit amet arcu vitae, volutpat rutrum augue. Etiam condimentum porttitor felis, at porta ex volutpat in. Suspendisse porttitor, diam eleifend congue lobortis, sapien augue tincidunt dui, pulvinar hendrerit urna eros nec arcu. Curabitur non ligula ornare, dignissim ante ut, porta nisl. Morbi et lectus in enim tempus pellentesque sit amet ut leo. Fusce pharetra facilisis risus. Donec euismod molestie eleifend. Integer eleifend nibh sit amet arcu faucibus convallis. Fusce fermentum augue id felis eleifend tempus. Aenean diam lacus, bibendum in lacus eget, sagittis fringilla nulla.

Aenean sit amet volutpat erat. Ut et arcu dapibus, pulvinar sem sed, sagittis velit. Aenean nec malesuada nisi, at dictum sem. Aenean facilisis dapibus tellus, sed molestie mi rutrum laoreet. Mauris tristique, odio venenatis ultrices finibus, leo dui pulvinar nibh, in aliquam justo velit ac ex. Proin a lorem convallis, dictum sapien non, euismod sapien. Donec in enim ornare, venenatis elit et, pellentesque lorem.

Integer viverra mi eros, at fringilla dui dictum quis. Sed efficitur augue quis elit auctor tristique. Suspendisse posuere, lacus at commodo facilisis, lacus ante pharetra leo, ut congue diam ante ut odio. Praesent laoreet nulla sit amet ex aliquam sodales. Fusce vestibulum nibh nunc, vel pulvinar nisl interdum et. Nunc malesuada ligula quis sem viverra mattis. Cras a nunc faucibus est auctor accumsan a nec lectus. Etiam pulvinar accumsan scelerisque. Ut venenatis euismod sollicitudin. Sed ut ultricies ligula, eget tincidunt mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras a elit porttitor, convallis tortor eu, viverra est. In ex odio, convallis ac odio id, facilisis dignissim urna. Nam massa mi, dignissim sed viverra vitae, pulvinar sed leo. In faucibus, libero et sodales condimentum, mi mauris interdum risus, ac tempus est metus id eros.[/div] [div class="textbox four"]Relationships:

Person 01

relations

Quisque eget pretium nulla, at egestas augue. Nunc vitae eros urna. Cras condimentum velit nec diam congue maximus. In convallis elit non dapibus condimentum. Mauris et aliquet ligula, eget lacinia eros. Sed volutpat ultricies magna sit amet semper. Praesent accumsan augue vel risus molestie elementum. Aenean a posuere risus. Ut eu odio eu lorem mollis blandit ornare eu nisl. Vivamus accumsan varius quam, ac dictum metus bibendum eget.

Person 02

relations

Quisque eget pretium nulla, at egestas augue. Nunc vitae eros urna. Cras condimentum velit nec diam congue maximus. In convallis elit non dapibus condimentum. Mauris et aliquet ligula, eget lacinia eros. Sed volutpat ultricies magna sit amet semper. Praesent accumsan augue vel risus molestie elementum. Aenean a posuere risus. Ut eu odio eu lorem mollis blandit ornare eu nisl. Vivamus accumsan varius quam, ac dictum metus bibendum eget.

Person 03

relations

Quisque eget pretium nulla, at egestas augue. Nunc vitae eros urna. Cras condimentum velit nec diam congue maximus. In convallis elit non dapibus condimentum. Mauris et aliquet ligula, eget lacinia eros. Sed volutpat ultricies magna sit amet semper. Praesent accumsan augue vel risus molestie elementum. Aenean a posuere risus. Ut eu odio eu lorem mollis blandit ornare eu nisl. Vivamus accumsan varius quam, ac dictum metus bibendum eget.

Person 04

relations

Quisque eget pretium nulla, at egestas augue. Nunc vitae eros urna. Cras condimentum velit nec diam congue maximus. In convallis elit non dapibus condimentum. Mauris et aliquet ligula, eget lacinia eros. Sed volutpat ultricies magna sit amet semper. Praesent accumsan augue vel risus molestie elementum. Aenean a posuere risus. Ut eu odio eu lorem mollis blandit ornare eu nisl. Vivamus accumsan varius quam, ac dictum metus bibendum eget. [/div] [div class="textbox five"]Others:
Theme:
Extra:
Faceclaim:
Artist: Byuey [/div] [/div][/div] [div class=tabwrap]

[div class="tab tabone"][/div]
[div class="tab tabtwo"][/div]
[div class="tab tabthree"][/div]
[div class="tab tabfour"][/div]
[div class="tab tabfive"][/div]
[div class="tab tabhome"][/div][/div] [/div][div class=largepicture][/div][div class=title]はたらく

さいぼ [/div] [/div]

code by RI.a

Code:

[nobr][class=container]
width:100%;
height:80vh;
margin:auto;center;
display:flex;
flex-wrap:row-wrap;
background-color: #770909;
background-image:
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 5%, rgba(0,0,0,.1) 5%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 5%, rgba(0,0,0,.1) 5%, rgba(0,0,0,.1));
background-size: 70px 120px;
overflow:hidden;
[/class]

[class=title]
font-family:Kaushan Script;
font-size:3em;
color:#eee;
text-align:center;
text-shadow:1px 2px 0px #e271ca;
position:absolute;
margin:auto;center;
width:1em;
height:auto;
margin-left:93%;
z-index:25px;
opacity:0;
animation:{post_id}fade 0.75s linear forwards;
animation-delay:1s;
[/class]

[class=largepicture]
width:40%;
height:80vh;
display:inline-block;
background:url('https://i.imgur.com/Lob95pE.png');
background-size:cover;
background-repeat:no-repeat;
background-position:-2.5em 0em;
z-index:3px;
margin:auto;center;
opacity:0;
animation:{post_id}fade 0.75s linear forwards;
animation-delay:1s;
[/class]

[class=contentwrap]
width:60%;
height:80vh;
padding:0.8em;
overflow:hidden;
opacity:0;
animation:{post_id}fade 0.75s linear forwards;
animation-delay:1s;
justify-content:space-between;
display:flex;
[/class]

[animation=fade]
[keyframe=0]opacity:0;[/keyframe]
[keyframe=25]opacity:0.25;[/keyframe]
[keyframe=50]opacity:0.5;[/keyframe]
[keyframe=75]opacity:0.75;[/keyframe]
[keyframe=100]opacity:1;[/keyframe]
[/animation]

[class=tabwrap]
width:6%;
height:100vh;
margin:auto;center;
margin-top:-1em;
background:#222;
padding:0.3em;
z-index:10px;
background-image: linear-gradient(#222, #770909);
[/class]

[class=tab]
font-family:Josefin Sans;
font-size:1.3em;
width:3%;
height:auto;
cursor:pointer;
color:#d8baba;
transition:all 0.75s ease-in;
text-align:left;
padding:0em 0em 0em 0.8em;
margin-left:-.3em;
[/class]

[class name=tab state=hover]
color:#fff;
text-shadow: 1px 1px 1px #d8baba;
[/class]

[class=contentbox]
width:94%;
overflow:hidden;
height:75vh;
[/class]

[class=textscroll]
width:105%;
height:75vh;
overflow-y:scroll;
[/class]

[class=textbox]
width:90%;
padding:0.8em;
font-family:Open Sans;
font-size:1em;
color:#fff;
text-align:justify;
opacity:0.8;
[/class]

[script class=none]
hide one
hide two
hide three
hide four
hide five
[/script]

[script class=tabone on=click]
fadeIn 1000 one
hide two
hide three
hide four
hide five
hide zero
[/script]

[script class=tabtwo on=click]
fadeIn 1000 two
hide one
hide three
hide four
hide five
hide zero
[/script]

[script class=tabthree on=click]
fadeIn 1000 three
hide two
hide one
hide four
hide five
hide zero
[/script]

[script class=tabfour on=click]
fadeIn 1000 four
hide three
hide two
hide one
hide zero
hide five
[/script]

[script class=tabfive on=click]
fadeIn 1000 five
hide three
hide two
hide one
hide zero
hide four
[/script]

[script class=tabhome on=click]
fadeIn 1000 zero
hide three
hide two
hide one
hide four
hide five
[/script]

[div class=container][div class=contentwrap][div class=contentbox][div class=textscroll]

[div class="textbox zero"][div=text-align:center;font-size:3em;letter-spacing:0.8em;text-shadow:1px 2px 0px #e271ca;text-transform:uppercase;][br][/br]ROLE[br][/br][br][/br][br][/br][br][/br]HERE[/div]
[/div]

[div class="textbox one"]Name: 
[br][/br]Nickname(s): 
[br][/br]Age: 
[br][/br]Gender: 
[br][/br]Pronoun(s): 
[br][/br]Race: 
[br][/br]Occupation: 
[br][/br]Class: [/div]

[div class="textbox two"]Virtues: 
[br][/br]Vices: 
[br][/br][br][/br]Personality: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mollis tellus sed tortor volutpat dictum. Integer porta tortor nibh, id dictum tellus ullamcorper eu. Mauris pretium cursus mi, a gravida quam dictum et. Ut varius, dui at cursus pretium, nibh metus volutpat libero, nec laoreet eros mi ut tortor. Fusce dui tellus, gravida sit amet arcu vitae, volutpat rutrum augue. Etiam condimentum porttitor felis, at porta ex volutpat in. Suspendisse porttitor, diam eleifend congue lobortis, sapien augue tincidunt dui, pulvinar hendrerit urna eros nec arcu. Curabitur non ligula ornare, dignissim ante ut, porta nisl. Morbi et lectus in enim tempus pellentesque sit amet ut leo. Fusce pharetra facilisis risus. Donec euismod molestie eleifend. Integer eleifend nibh sit amet arcu faucibus convallis. Fusce fermentum augue id felis eleifend tempus. Aenean diam lacus, bibendum in lacus eget, sagittis fringilla nulla.

[br][/br][br][/br]Quirks/Habits:
[br][/br]Hobbies/Interests: [/div]

[div class="textbox three"]Backstory: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mollis tellus sed tortor volutpat dictum. Integer porta tortor nibh, id dictum tellus ullamcorper eu. Mauris pretium cursus mi, a gravida quam dictum et. Ut varius, dui at cursus pretium, nibh metus volutpat libero, nec laoreet eros mi ut tortor. Fusce dui tellus, gravida sit amet arcu vitae, volutpat rutrum augue. Etiam condimentum porttitor felis, at porta ex volutpat in. Suspendisse porttitor, diam eleifend congue lobortis, sapien augue tincidunt dui, pulvinar hendrerit urna eros nec arcu. Curabitur non ligula ornare, dignissim ante ut, porta nisl. Morbi et lectus in enim tempus pellentesque sit amet ut leo. Fusce pharetra facilisis risus. Donec euismod molestie eleifend. Integer eleifend nibh sit amet arcu faucibus convallis. Fusce fermentum augue id felis eleifend tempus. Aenean diam lacus, bibendum in lacus eget, sagittis fringilla nulla.

[br][/br][br][/br]Aenean sit amet volutpat erat. Ut et arcu dapibus, pulvinar sem sed, sagittis velit. Aenean nec malesuada nisi, at dictum sem. Aenean facilisis dapibus tellus, sed molestie mi rutrum laoreet. Mauris tristique, odio venenatis ultrices finibus, leo dui pulvinar nibh, in aliquam justo velit ac ex. Proin a lorem convallis, dictum sapien non, euismod sapien. Donec in enim ornare, venenatis elit et, pellentesque lorem.

[br][/br][br][/br]Integer viverra mi eros, at fringilla dui dictum quis. Sed efficitur augue quis elit auctor tristique. Suspendisse posuere, lacus at commodo facilisis, lacus ante pharetra leo, ut congue diam ante ut odio. Praesent laoreet nulla sit amet ex aliquam sodales. Fusce vestibulum nibh nunc, vel pulvinar nisl interdum et. Nunc malesuada ligula quis sem viverra mattis. Cras a nunc faucibus est auctor accumsan a nec lectus. Etiam pulvinar accumsan scelerisque. Ut venenatis euismod sollicitudin. Sed ut ultricies ligula, eget tincidunt mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras a elit porttitor, convallis tortor eu, viverra est. In ex odio, convallis ac odio id, facilisis dignissim urna. Nam massa mi, dignissim sed viverra vitae, pulvinar sed leo. In faucibus, libero et sodales condimentum, mi mauris interdum risus, ac tempus est metus id eros.[/div]

[div class="textbox four"]Relationships:
[br][/br][br][/br][div=width:75px;height:75px;background:url('https://i.imgur.com/p9Ma6wQ.png');background-position:top;background-repeat:none;background-size:250%;display:inline-block;][/div][div=display:inline-block;position:relative;top:-1em;left:1em;][div=border-bottom:1px solid #d8baba;letter-spacing:0.5em;]Person 01[/div][div=font-size:0.8em;]relations[/div][/div]
[br][/br]Quisque eget pretium nulla, at egestas augue. Nunc vitae eros urna. Cras condimentum velit nec diam congue maximus. In convallis elit non dapibus condimentum. Mauris et aliquet ligula, eget lacinia eros. Sed volutpat ultricies magna sit amet semper. Praesent accumsan augue vel risus molestie elementum. Aenean a posuere risus. Ut eu odio eu lorem mollis blandit ornare eu nisl. Vivamus accumsan varius quam, ac dictum metus bibendum eget.

[br][/br][br][/br][div=width:75px;height:75px;background:url('https://i.imgur.com/QwC8NfG.png');background-position:-2.8em -1em;background-repeat:none;background-size:200%;display:inline-block;][/div][div=display:inline-block;position:relative;top:-1em;left:1em;][div=border-bottom:1px solid #d8baba;letter-spacing:0.5em;]Person 02[/div][div=font-size:0.8em;]relations[/div][/div]
[br][/br]Quisque eget pretium nulla, at egestas augue. Nunc vitae eros urna. Cras condimentum velit nec diam congue maximus. In convallis elit non dapibus condimentum. Mauris et aliquet ligula, eget lacinia eros. Sed volutpat ultricies magna sit amet semper. Praesent accumsan augue vel risus molestie elementum. Aenean a posuere risus. Ut eu odio eu lorem mollis blandit ornare eu nisl. Vivamus accumsan varius quam, ac dictum metus bibendum eget.


[br][/br][br][/br][div=width:75px;height:75px;background:url('https://i.imgur.com/xooOPQM.png');background-position:top;background-repeat:none;background-size:250%;display:inline-block;][/div][div=display:inline-block;position:relative;top:-1em;left:1em;][div=border-bottom:1px solid #d8baba;letter-spacing:0.5em;]Person 03[/div][div=font-size:0.8em;]relations[/div][/div]
[br][/br]Quisque eget pretium nulla, at egestas augue. Nunc vitae eros urna. Cras condimentum velit nec diam congue maximus. In convallis elit non dapibus condimentum. Mauris et aliquet ligula, eget lacinia eros. Sed volutpat ultricies magna sit amet semper. Praesent accumsan augue vel risus molestie elementum. Aenean a posuere risus. Ut eu odio eu lorem mollis blandit ornare eu nisl. Vivamus accumsan varius quam, ac dictum metus bibendum eget.

[br][/br][br][/br][div=width:75px;height:75px;background:url('https://i.imgur.com/1DhKRMn.png');background-position:top;background-repeat:none;background-size:200%;display:inline-block;][/div][div=display:inline-block;position:relative;top:-1em;left:1em;][div=border-bottom:1px solid #d8baba;letter-spacing:0.5em;]Person 04[/div][div=font-size:0.8em;]relations[/div][/div]
[br][/br]Quisque eget pretium nulla, at egestas augue. Nunc vitae eros urna. Cras condimentum velit nec diam congue maximus. In convallis elit non dapibus condimentum. Mauris et aliquet ligula, eget lacinia eros. Sed volutpat ultricies magna sit amet semper. Praesent accumsan augue vel risus molestie elementum. Aenean a posuere risus. Ut eu odio eu lorem mollis blandit ornare eu nisl. Vivamus accumsan varius quam, ac dictum metus bibendum eget.
[/div]

[div class="textbox five"]Others: 
[br][/br]Theme: 
[br][/br]Extra: 
[br][/br]Faceclaim:
[br][/br]Artist: [url=https://www.pixiv.net/member.php?id=6417525]Byuey[/url]
[/div]

[/div][/div]

[div class=tabwrap][br][/br][br][/br][div class="tab tabone"][font=Josefin Sans][fa]fa-user-circle[/fa][/font][/div][br][/br][div class="tab tabtwo"][fa]fa-question-circle[/fa][/div][br][/br][div class="tab tabthree"][fa]fa-pencil[/fa][/div][br][/br][div class="tab tabfour"][fa]fa-users[/fa][/div][br][/br][div class="tab tabfive"][fa]fa-bars[/fa][/div][br][/br][div class="tab tabhome"][fa]fa-external-link-square[/fa][/div][/div]
[/div][div class=largepicture][/div][div class=title][b]はたらく
[br][/br][br][/br]さいぼ[/b]

[/div]

[/div][div=text-align:right;font-size:0.5em;letter-spacing:0.3em;opacity:0.6;][font=Karla][comment]DO NOT REMOVE[/comment]code by RI.a[/font][/div][/nobr]

RI.a · Sep 13, 2018

RI.a said:
[class=header] width: 250px; height: 90px; background#ffffff; font-family: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]Good Morning CS
Not mobile-friendly
New features: animation, script, clip-paths.
EDIT: I FINALLY FIXED IT. ENJOY! PLEASE LEAVE THE CREDITS. THANK YOU ^^
Thank you to Alteras senpai for being so patient and answering all my queries! There's something glitching up the script. I'm not sure what. :/ So I'm not going to include the code for now. If you are a kind soul and are willing to find out what's going on, bless you. And you have my eternal thanks if you solve wtv is going on hahahha If you want to use it anyway, go ahead. You can remove the background and replace it with your own etc. I've added a "class=centerimage" for your character image so you just gotta add the image url into that and add it into the class. Toggle with the dims if you wish. (:
I don't own the image.[/div]
[class=background] width:900px; height:60vh; background:url('https://i.imgur.com/tV41r9H.jpg') no-repeat; background-size:100%; overflow:hidden; display:flex; flex-wrap:wrap; margin:auto;center; [/class] [class=loadpage] width:900px; height:60vh; background:black; opacity:0.8; position:absolute; align-self:flex-start; [/class] [class=greeting] width:350px; height:50px; margin:auto; margin-top:20vh; font-family:Gothic A1, regular; font-size:3em; color:#99f3ff; text-align:center; [/class] [class=enter] width:75px; font-family:Unica One, display; font-size;0.5em; color:white; text-align:center; border:1px solid #99f3ff; padding:.3em; cursor:pointer; margin:auto; margin-top:10px; transition:all .3s ease-in; animation:{post_id}flash 3s linear infinite; [/class] [class name=enter state=hover] letter-spacing:0.1em; [/class] [animation=flash] [keyframe=0]opacity:0.2;[/keyframe] [keyframe=25]opacity:0.6;[/keyframe] [keyframe=50]opacity:0.3;[/keyframe] [keyframe=75]opacity:0.7;[/keyframe] [keyframe=100]opacity:0.2;[/keyframe] [/animation] [class=slider] width:270px; height:100%; clip-path: polygon(0 0, 87% 0, 100% 100%, 0 100%); background:white; opacity:0.6; padding:1em; align-self:flex-start; display:flex; flex-direction:column; justify-content:space-evenly; animation-name:{post_id}slideright; animation-duration:1.2s; animation-timing-function:ease-out; animation-delay:0s; animation-direction:normal; [/class] [animation=slideright] [keyframe=0]transform:translateX(-100%);[/keyframe] [keyframe=100]transform:translateX(0);[/keyframe] [/animation] [class=centerimage] clip-path: polygon(100% 0, 94% 100%, 16% 100%, 0 0%); width:230px; height:100%; background-size:100%; background-position:center; background-repeat:no-repeat; opacity:0.5; [/class] [class=contentwrap] width:369px; height:101%; background:white; clip-path: polygon(6% 0, 100% 0, 100% 100%, 3% 100%); opacity:0.9; [/class] [class=slidein] animation:{post_id}slideleft 1.2s ease-in-out 1; [/class] [animation=slideleft] [keyframe=0]transform:translateX(100%);[/keyframe] [keyframe=100]transform:translateX(0);[/keyframe] [/animation] [class=Tabs] width:210px; padding:0.5em; border:1px solid #bbb; font-family:Unica One; font-size:1em; text-align:center; color:#222; text-shadow:1px 1px 0px #99f3ff; letter-spacing:.6em; transition:all 0.3s linear; cursor:pointer; [/class] [class name=Tabs state=hover] letter-spacing:0.8em; [/class] [class=scrollbox] width:338px; height:90%; overflow-y:scroll; padding:.8em; margin-left:15px; [/class] [class=text] font-family:Karla, regular; font-size:0.8em; color:black; display:inline-block; margin-left: 5px; [/class] [class=title] display:inline-block; font-family:Unica One, display; font-size:0.8em; color:black; text-shadow:1px 1px 0px #99f3ff; [/class] [script class=enter on=click] fadeOut 800 loadpage show slider addClass slidein contentwrap show contentwrap show centerimage [/script] [script class=tab01 on=click] fadeIn 500 page01 hide page02 hide page03 hide page04 [/script] [script class=none] hide contentwrap hide slider hide centerimage [/script] [script class=tab02 on=click] fadeIn 500 page02 hide page01 hide page03 hide page04 [/script] [script class=tab03 on=click] fadeIn 500 page03 hide page01 hide page02 hide page04 [/script] [script class=tab04 on=click] fadeIn 500 page04 hide page01 hide page02 hide page03 [/script]
[div class=background][div class=slider][div class="Tabs tab01"]basic[/div][div class="Tabs tab02"]personality[/div][div class="Tabs tab03"]history[/div][div class="Tabs tab04"]other[/div][/div][div class=centerimage][/div][div class=contentwrap][div class="scrollbox page01"][div class=title]requisite[/div]
[div class=title]name[/div][div class=text] something here[/div]
[div class=title]aliases[/div][div class=text] something here[/div]
[div class=title]pronoun[/div][div class=text] something here[/div]
[div class=title]age[/div][div class=text] something here[/div]
[div class=title]gender[/div][div class=text] something here[/div]
[div class=title]race[/div][div class=text] something here[/div]
[div class=title]occupation[/div][div class=text] something here[/div]

[div class=title]appearance[/div]
[div class=title]height[/div][div class=text] something here[/div]
[div class=title]weight[/div][div class=text] something here[/div]
[div class=title]hairstyle[/div][div class=text] something here[/div]
[div class=title]eye colour[/div][div class=text] something here[/div]
[div class=title]outfits[/div][div class=text] something here[/div]
[div class=title]description[/div][div class=text] something here[/div]

[div class=title]stats[/div]
[div class=title]intelligence[/div][div class=text] [/div]
[div class=title]strength[/div][div class=text] [/div]
[div class=title]dexterity[/div][div class=text] [/div][/div][div class="scrollbox page02"][div class=title]likes[/div][div class=text] something here[/div]
[div class=title]dislikes[/div][div class=text] something here[/div]
[div class=title]quirks/habits[/div][div class=text] something here[/div]

[div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper vel lorem sed interdum. Pellentesque bibendum, est nec congue fermentum, risus magna sollicitudin quam, sed vestibulum lacus tortor pellentesque urna. Cras ultrices facilisis tellus nec tristique. Duis nec hendrerit leo, sed mollis orci. Etiam sed ligula nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ante lectus, tincidunt in semper id, consectetur vel ex. Nam eu pulvinar magna. Morbi viverra orci odio, vel feugiat ligula commodo a. Cras interdum tortor vel iaculis imperdiet. Quisque pharetra efficitur justo vel consequat. Proin porttitor nisl iaculis sagittis volutpat. Integer ut augue nisi. Sed rutrum consectetur libero, a viverra dui tincidunt eu. Pellentesque vitae libero non mauris tempus luctus vel in lectus. Sed vehicula vestibulum neque sit amet tincidunt.

Quisque dignissim nunc a erat accumsan, in molestie ligula ultricies. Duis ullamcorper risus massa, a facilisis purus gravida id. Aliquam et neque arcu. Suspendisse quis leo metus. Nam gravida tincidunt lorem, vitae mollis mauris condimentum ac. Etiam sed scelerisque quam, et dapibus neque. Maecenas luctus libero sit amet tincidunt accumsan. Ut in arcu leo. Duis in urna lectus. Suspendisse nec nisi odio. Fusce aliquam orci velit, eget vulputate lectus consectetur vel. Sed interdum vulputate purus placerat vestibulum. Phasellus tristique rhoncus tellus, sed vehicula nunc luctus eget. Ut arcu mauris, feugiat quis ullamcorper in, bibendum sed enim. Donec et sagittis neque.[/div][/div][div class="scrollbox page03"][div class=title]relationships[/div][div class=text] something here[/div]
[div class=title]other[/div][div class=text] something here[/div]
[div class=title]biography[/div][div class=text] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis dui mauris, a semper lacus dictum sit amet. Ut blandit, quam eu convallis interdum, tortor justo accumsan risus, ut tincidunt lorem sem quis dolor. Ut semper cursus libero vitae dapibus. Donec ut orci sit amet mauris posuere venenatis at non metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec mauris magna. In porttitor, leo non commodo tincidunt, ipsum turpis lacinia nunc, dictum luctus velit orci eget neque. Aliquam mattis sodales dui nec auctor. Integer ultrices erat vitae ultricies tincidunt. Pellentesque quis ipsum dapibus, tempor enim nec, auctor lacus.

Proin aliquam arcu non dignissim faucibus. Etiam tristique convallis viverra. Phasellus nec massa a velit posuere vulputate in nec nisi. Ut faucibus turpis non lacus mattis ultrices. Quisque maximus, massa quis sodales rutrum, metus ex dignissim nisl, porta laoreet eros augue eget enim. Donec sollicitudin felis ac ex mattis, sed rhoncus ligula cursus. In mauris risus, blandit ac ante ac, venenatis varius augue. Aenean varius leo id metus varius, a aliquet dui viverra. Vestibulum volutpat urna quis felis tincidunt gravida. Sed posuere ullamcorper ante, a tempus lorem pellentesque eu.[/div]
[div class=title]other[/div][div class=text] something here[/div][/div][div class="scrollbox page04"][div class=title]trivia[/div][div class=text] something here[/div]
[div class=title]faceclaim[/div][div class=text] something here[/div]
[div class=title]theme[/div][div class=text] something here[/div]
[div class=title]extra[/div][div class=text] something here[/div]
[div class=text]more text[/div][/div][/div][div class=loadpage][div class=greeting]おはいよう[/div][div class=enter]click me[/div][/div][/div]
code by RI.a

Code:

[nobr] [class=background] width:900px; height:60vh; background:url('https://i.imgur.com/tV41r9H.jpg') no-repeat; background-size:100%; overflow:hidden; display:flex; flex-wrap:wrap; margin:auto;center; [/class] [class=loadpage] width:900px; height:60vh; background:black; opacity:0.8; position:absolute; align-self:flex-start; [/class] [class=greeting] width:350px; height:50px; margin:auto; margin-top:20vh; font-family:Gothic A1, regular; font-size:3em; color:#99f3ff; text-align:center; [/class] [class=enter] width:75px; font-family:Unica One, display; font-size;0.5em; color:white; text-align:center; border:1px solid #99f3ff; padding:.3em; cursor:pointer; margin:auto; margin-top:10px; transition:all .3s ease-in; animation:{post_id}flash 3s linear infinite; [/class] [class name=enter state=hover] letter-spacing:0.1em; [/class] [animation=flash] [keyframe=0]opacity:0.2;[/keyframe] [keyframe=25]opacity:0.6;[/keyframe] [keyframe=50]opacity:0.3;[/keyframe] [keyframe=75]opacity:0.7;[/keyframe] [keyframe=100]opacity:0.2;[/keyframe] [/animation] [class=slider] width:270px; height:100%; clip-path: polygon(0 0, 87% 0, 100% 100%, 0 100%); background:white; opacity:0.6; padding:1em; align-self:flex-start; display:flex; flex-direction:column; justify-content:space-evenly; animation-name:{post_id}slideright; animation-duration:1.2s; animation-timing-function:ease-out; animation-delay:0s; animation-direction:normal; [/class] [animation=slideright] [keyframe=0]transform:translateX(-100%);[/keyframe] [keyframe=100]transform:translateX(0);[/keyframe] [/animation] [class=centerimage] clip-path: polygon(100% 0, 94% 100%, 16% 100%, 0 0%); width:230px; height:100%; background-size:100%; background-position:center; background-repeat:no-repeat; opacity:0.5; [/class] [comment]add image url to "background:url('http...');" then add this to above class to put an image in the center of the code.[/comment] [class=contentwrap] width:369px; height:101%; background:white; clip-path: polygon(6% 0, 100% 0, 100% 100%, 3% 100%); opacity:0.9; [/class] [class=slidein] animation:{post_id}slideleft 1.2s ease-in-out 1; [/class] [animation=slideleft] [keyframe=0]transform:translateX(100%);[/keyframe] [keyframe=100]transform:translateX(0);[/keyframe] [/animation] [class=Tabs] width:210px; padding:0.5em; border:1px solid #bbb; font-family:Unica One; font-size:1em; text-align:center; color:#222; text-shadow:1px 1px 0px #99f3ff; letter-spacing:.6em; transition:all 0.3s linear; cursor:pointer; [/class] [class name=Tabs state=hover] letter-spacing:0.8em; [/class] [class=scrollbox] width:338px; height:90%; overflow-y:scroll; padding:.8em; margin-left:15px; [/class] [class=text] font-family:Karla, regular; font-size:0.8em; color:black; display:inline-block; margin-left: 5px; [/class] [class=title] display:inline-block; font-family:Unica One, display; font-size:0.8em; color:black; text-shadow:1px 1px 0px #99f3ff; [/class] [script class=enter on=click] fadeOut 800 loadpage show slider addClass slidein contentwrap show contentwrap show centerimage [/script] [script class=tab01 on=click] fadeIn 500 page01 hide page02 hide page03 hide page04 [/script] [script class=none] hide contentwrap hide slider hide centerimage [/script] [script class=tab02 on=click] fadeIn 500 page02 hide page01 hide page03 hide page04 [/script] [script class=tab03 on=click] fadeIn 500 page03 hide page01 hide page02 hide page04 [/script] [script class=tab04 on=click] fadeIn 500 page04 hide page01 hide page02 hide page03 [/script] [/nobr] [div class=background][div class=slider][div class="Tabs tab01"][font=Unica One]basic[/font][/div][div class="Tabs tab02"]personality[/div][div class="Tabs tab03"]history[/div][div class="Tabs tab04"]other[/div][/div][div class=centerimage][/div][div class=contentwrap][div class="scrollbox page01"][div class=title]requisite[/div] [div class=title]name[/div][div class=text] [font=Karla]something here[/font][/div] [div class=title]aliases[/div][div class=text] something here[/div] [div class=title]pronoun[/div][div class=text] something here[/div] [div class=title]age[/div][div class=text] something here[/div] [div class=title]gender[/div][div class=text] something here[/div] [div class=title]race[/div][div class=text] something here[/div] [div class=title]occupation[/div][div class=text] something here[/div] [div class=title]appearance[/div] [div class=title]height[/div][div class=text] something here[/div] [div class=title]weight[/div][div class=text] something here[/div] [div class=title]hairstyle[/div][div class=text] something here[/div] [div class=title]eye colour[/div][div class=text] something here[/div] [div class=title]outfits[/div][div class=text] something here[/div] [div class=title]description[/div][div class=text] something here[/div] [div class=title]stats[/div] [div class=title]intelligence[/div][div class=text] [fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/div] [div class=title]strength[/div][div class=text] [fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/div] [div class=title]dexterity[/div][div class=text] [fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/div][/div][div class="scrollbox page02"][div class=title]likes[/div][div class=text] something here[/div] [div class=title]dislikes[/div][div class=text] something here[/div] [div class=title]quirks/habits[/div][div class=text] something here[/div] [div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper vel lorem sed interdum. Pellentesque bibendum, est nec congue fermentum, risus magna sollicitudin quam, sed vestibulum lacus tortor pellentesque urna. Cras ultrices facilisis tellus nec tristique. Duis nec hendrerit leo, sed mollis orci. Etiam sed ligula nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ante lectus, tincidunt in semper id, consectetur vel ex. Nam eu pulvinar magna. Morbi viverra orci odio, vel feugiat ligula commodo a. Cras interdum tortor vel iaculis imperdiet. Quisque pharetra efficitur justo vel consequat. Proin porttitor nisl iaculis sagittis volutpat. Integer ut augue nisi. Sed rutrum consectetur libero, a viverra dui tincidunt eu. Pellentesque vitae libero non mauris tempus luctus vel in lectus. Sed vehicula vestibulum neque sit amet tincidunt. Quisque dignissim nunc a erat accumsan, in molestie ligula ultricies. Duis ullamcorper risus massa, a facilisis purus gravida id. Aliquam et neque arcu. Suspendisse quis leo metus. Nam gravida tincidunt lorem, vitae mollis mauris condimentum ac. Etiam sed scelerisque quam, et dapibus neque. Maecenas luctus libero sit amet tincidunt accumsan. Ut in arcu leo. Duis in urna lectus. Suspendisse nec nisi odio. Fusce aliquam orci velit, eget vulputate lectus consectetur vel. Sed interdum vulputate purus placerat vestibulum. Phasellus tristique rhoncus tellus, sed vehicula nunc luctus eget. Ut arcu mauris, feugiat quis ullamcorper in, bibendum sed enim. Donec et sagittis neque.[/div][/div][div class="scrollbox page03"][div class=title]relationships[/div][div class=text] something here[/div] [div class=title]other[/div][div class=text] something here[/div] [div class=title]biography[/div][div class=text] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis dui mauris, a semper lacus dictum sit amet. Ut blandit, quam eu convallis interdum, tortor justo accumsan risus, ut tincidunt lorem sem quis dolor. Ut semper cursus libero vitae dapibus. Donec ut orci sit amet mauris posuere venenatis at non metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec mauris magna. In porttitor, leo non commodo tincidunt, ipsum turpis lacinia nunc, dictum luctus velit orci eget neque. Aliquam mattis sodales dui nec auctor. Integer ultrices erat vitae ultricies tincidunt. Pellentesque quis ipsum dapibus, tempor enim nec, auctor lacus. Proin aliquam arcu non dignissim faucibus. Etiam tristique convallis viverra. Phasellus nec massa a velit posuere vulputate in nec nisi. Ut faucibus turpis non lacus mattis ultrices. Quisque maximus, massa quis sodales rutrum, metus ex dignissim nisl, porta laoreet eros augue eget enim. Donec sollicitudin felis ac ex mattis, sed rhoncus ligula cursus. In mauris risus, blandit ac ante ac, venenatis varius augue. Aenean varius leo id metus varius, a aliquet dui viverra. Vestibulum volutpat urna quis felis tincidunt gravida. Sed posuere ullamcorper ante, a tempus lorem pellentesque eu.[/div] [div class=title]other[/div][div class=text] something here[/div][/div][div class="scrollbox page04"][div class=title]trivia[/div][div class=text] something here[/div] [div class=title]faceclaim[/div][div class=text] something here[/div] [div class=title]theme[/div][div class=text] something here[/div] [div class=title]extra[/div][div class=text] something here[/div] [div class=text]more text[/div][/div][/div][div class=loadpage][div class=greeting]おはいよう[/div][div class=enter]click me[/div][/div][/div][div=width:900px;margin:auto;center;font:Karla;font-size:0.5em;opacity:0.6;letter-spacing:0.3em;]code by RI.a[/div]

In case anyone is interested, I FINALLY fixed this ol' code! The code is in the spoiler tag. Even added another tab! All it was missing was a [ /div]. Eugh orz
Anyway, enjoy! ^^

jaylen · Sep 27, 2018

RI.a Yo. Could you help me with smth? I'm trying to use one of your codes, specifically the dope 'click me' one. It's not working though. I can't get the background to show up in the History tab like it should.

Code:

[nobr]
[class=background]
width:900px;
height:60vh;
background:url('https://i.pinimg.com/564x/52/34/63/5234632e7e40c627035f42c3a064354f.jpg') no-repeat;
background-size:100%;
overflow:hidden;
display:flex;
flex-wrap:wrap;
margin:auto;center;
[/class]

[class=loadpage]
width:900px;
height:60vh;
background:black;
opacity:0.8;
position:absolute;
align-self:flex-start;
[/class]

[class=greeting]
width:350px;
height:50px;
margin:auto;
margin-top:20vh;
font-family:Gothic A1, regular;
font-size:3em;
color:#99f3ff;
text-align:center;
[/class]

[class=enter]
width:75px;
font-family:Unica One, display;
font-size;0.5em;
color:white;
text-align:center;
border:1px solid #99f3ff;
padding:.3em;
cursor:pointer;
margin:auto;
margin-top:10px;
transition:all .3s ease-in;
animation:{post_id}flash 3s linear infinite;
[/class]

[class name=enter state=hover]
letter-spacing:0.1em;
[/class]

[animation=flash]
[keyframe=0]opacity:0.2;[/keyframe]
[keyframe=25]opacity:0.6;[/keyframe]
[keyframe=50]opacity:0.3;[/keyframe]
[keyframe=75]opacity:0.7;[/keyframe]
[keyframe=100]opacity:0.2;[/keyframe]
[/animation]

[class=slider]
width:270px;
height:100%;
clip-path: polygon(0 0, 87% 0, 100% 100%, 0 100%);
background:white;
opacity:0.6;
padding:1em;
align-self:flex-start;
display:flex;
flex-direction:column;
justify-content:space-evenly;
animation-name:{post_id}slideright;
animation-duration:1.2s;
animation-timing-function:ease-out;
animation-delay:0s;
animation-direction:normal;
[/class]

[animation=slideright]
[keyframe=0]transform:translateX(-100%);[/keyframe]
[keyframe=100]transform:translateX(0);[/keyframe]
[/animation]

[class=centerimage]
clip-path: polygon(100% 0, 94% 100%, 16% 100%, 0 0%);
width:230px;
height:100%;
background-size:100%;
background-position:center;
background-repeat:no-repeat;
opacity:0.5;
[/class]

[comment]add image url to "background:url('http...');" then add this to above class to put an image in the center of the code.[/comment]

[class=contentwrap]
width:369px;
height:101%;
background:white;
clip-path: polygon(6% 0, 100% 0, 100% 100%, 3% 100%);
opacity:0.9;
[/class]

[class=slidein]
animation:{post_id}slideleft 1.2s ease-in-out 1;
[/class]

[animation=slideleft]
[keyframe=0]transform:translateX(100%);[/keyframe]
[keyframe=100]transform:translateX(0);[/keyframe]
[/animation]

[class=Tabs]
width:210px;
padding:0.5em;
border:1px solid #bbb;
font-family:Unica One;
font-size:1em;
text-align:center;
color:#222;
text-shadow:1px 1px 0px #99f3ff;
letter-spacing:.6em;
transition:all 0.3s linear;
cursor:pointer;
[/class]

[class name=Tabs state=hover]
letter-spacing:0.8em;
[/class]

[class=scrollbox]
width:338px;
height:90%;
overflow-y:scroll;
padding:.8em;
margin-left:15px;
[/class]

[class=text]
font-family:Karla, regular;
font-size:0.8em;
color:black;
display:inline-block;
margin-left: 5px;
[/class]

[class=title]
display:inline-block;
font-family:Unica One, display;
font-size:0.8em;
color:black;
text-shadow:1px 1px 0px #99f3ff;
[/class]

[script class=enter on=click]
fadeOut 800 loadpage
show slider
addClass slidein contentwrap
show contentwrap
show centerimage
[/script]

[script class=tab01 on=click]
fadeIn 500 page01
hide page02
hide page03
hide page04
[/script]

[script class=none]
hide contentwrap
hide slider
hide centerimage
[/script]

[script class=tab02 on=click]
fadeIn 500 page02
hide page01
hide page03
hide page04
[/script]

[script class=tab03 on=click]
fadeIn 500 page03
hide page01
hide page02
hide page04
[/script]

[script class=tab04 on=click]
fadeIn 500 page04
hide page01
hide page02
hide page03
[/script]
[/nobr]
[div class=background][div class=slider][div class="Tabs tab01"][font=Unica One]basic[/font][/div][div class="Tabs tab02"]personality[/div][div class="Tabs tab03"]history[/div][div class="Tabs tab04"]other[/div][/div][div class=centerimage][/div][div class=contentwrap][div class="scrollbox page01"][div class=title]requisite[/div]
[div class=title]name[/div][div class=text]roan lou emerson[font=Karla][/font][/div]
[div class=title]aliases[/div][div class=text]ro-ro, caffiene addict, sleepyhead[/div]
[div class=title]pronoun[/div][div class=text]they/them[/div]
[div class=title]age[/div][div class=text]16[/div]
[div class=title]gender[/div][div class=text]androgynous[/div]
[div class=title]race[/div][div class=text]korean/american[/div]
[div class=title]occupation[/div][div class=text]student[/div]
[div class=title]birthdate[/div][div class=text]January 5th, Capricorn[/div]

[div class=title]appearance[/div]
[div class=title]height[/div][div class=text]5'5"[/div]
[div class=title]weight[/div][div class=text]110lbs[/div]
[div class=title]hairstyle[/div][div class=text]messy/bed head[/div]
[div class=title]eye colour[/div][div class=text]blue, pink, and purple[/div]
[div class=title]race[/div][div class=text]ghoul[/div]
[div class=title]description[/div][div class=text]roan considers themself neither male or female and dresses however they please. their hair is always messy and bags are a common attribute under their eyes. roan is pretty slim, with pretty much no curves. they have two small tattoos; a semicolon on their left wrist and a small galaxy above their right ankle. roans back is riddled with scars and they have a very nasty scar on the middle of their chest.[/div]

[div class=title]stats[/div]
[div class=title]intelligence[/div][div class=text] [fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][/div]
[div class=title]strength[/div][div class=text] [fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/div]
[div class=title]dexterity[/div][div class=text] [fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][/div]
[div class=title]constitution[/div][div class=text] [fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/div]
[div class=title]wisdom[/div][div class=text] [fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/div]
[div class=title]charisma[/div][div class=text] [fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/div][/div]
[div class="scrollbox page02"][div class=title]likes[/div][div class=text]coffee, nighttime, gaming, stuffed animals, sleeping, quiet, cafes, guinea pigs[/div]
[div class=title]dislikes[/div][div class=text]fighting for no reason, lots of ruckus, no internet, food, bears, ghoul restraunt[/div]
[div class=title]quirks/habits[/div][div class=text]bites inside of lip, coffee addict, remembers everything they see, hacker, insomniac, photographer, big time gamer[/div]
[div class=title]persona[/div][div class=text]roan is a very typically untypical teenger of the modern times. they don't associate themselves with a single gender and have no preferance over people. sticking to themself is their thing and charisma is an unknown universe. that being said, they have been able to make some pretty great friends. they aren't really a loner, they just would rather watch and witness how thing play out than join in and be an acting force. people watching is kinda their thing and they enjoy it. well, to a certain extent. everybody needs somebody. roan is a very smart person and is always playing with ideas in their head. intelligent conversations are a big thing for them and going back and forth with somebody is entertaining. that all being said, roan doesn't do physical activity. being an insomniac and getting little to no sleep, their body is in a constant state of exhaust. they prefer working their mind over muscle anyways. roan doesn't like being the center of attention in large groups. maybe in their friend group or when doing projects, but that's about it. anything beyond that freaks them out and anxiety will start kicking in. when roan gets anxious, they get hungry, which is a bad thing. being as their usually anxious or nervous, roan constantly has coffee with them to keep the hunger at bay. thanks to the principal of the school for understanding their needs, all coffee sold at the school is free.[/div]
[div class="scrollbox page03"][div class=title]biography[/div][div class=text]roan wasn't always a scary ghoul. originally, they had been born as a cute little boy. not that it lasted very long. roan realized they were androgynous when they were eight and never went back on it. their parents refused their beliefs and so roan was put up for adoption. in their profile the insomnia was noted so the fact roan has been adopted surprised them. who wanted a kid who was up all night? well, ghouls did apparently. having been adopted by a pair of ghoul parents who couldn't have a kid of their own, roan was turned into a ghoul at age nine and it was then explained to them. lucky them, the parents were part of this chill group called Anteiku so unnecessarykilling wasn't in roans future. though, there was still killing. lots of fights between the chill group and other groups happened so roan had to kill and had to do it fast. not that they complained. death wasn't something that bothered them, along with many other things that would scare normal functioning people.[/div][/div]
[div class=title]other[/div][div class=text] something here[/div][/div][div class="scrollbox page04"][div class=title]trivia[/div][div class=text] something here[/div]
[div class=title]faceclaim[/div][div class=text] something here[/div]
[div class=title]theme[/div][div class=text] something here[/div]
[div class=title]extra[/div][div class=text] something here[/div]
[div class=text]more text[/div][/div][/div][div class=loadpage][div class=greeting]おはいよう[/div][div class=enter]click me[/div][/div][/div][div=width:900px;margin:auto;center;font:Karla;font-size:0.5em;opacity:0.6;letter-spacing:0.3em;]code by RI.a[/div]

jaylen · Sep 27, 2018

Oof, nevermind. I fixed it. Lol.

Lekiel · Sep 27, 2018

RI.a said:
[class=header] width: 250px; height: 90px; background#ffffff; font-family: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]Good Morning CS
Not mobile-friendly
New features: animation, script, clip-paths.
EDIT: I FINALLY FIXED IT. ENJOY! PLEASE LEAVE THE CREDITS. THANK YOU ^^
Thank you to Alteras senpai for being so patient and answering all my queries! There's something glitching up the script. I'm not sure what. :/ So I'm not going to include the code for now. If you are a kind soul and are willing to find out what's going on, bless you. And you have my eternal thanks if you solve wtv is going on hahahha If you want to use it anyway, go ahead. You can remove the background and replace it with your own etc. I've added a "class=centerimage" for your character image so you just gotta add the image url into that and add it into the class. Toggle with the dims if you wish. (:
I don't own the image.[/div]
[class=background] width:900px; height:60vh; background:url('https://i.imgur.com/tV41r9H.jpg') no-repeat; background-size:100%; overflow:hidden; display:flex; flex-wrap:wrap; margin:auto;center; [/class] [class=loadpage] width:900px; height:60vh; background:black; opacity:0.8; position:absolute; align-self:flex-start; [/class] [class=greeting] width:350px; height:50px; margin:auto; margin-top:20vh; font-family:Gothic A1, regular; font-size:3em; color:#99f3ff; text-align:center; [/class] [class=enter] width:75px; font-family:Unica One, display; font-size;0.5em; color:white; text-align:center; border:1px solid #99f3ff; padding:.3em; cursor:pointer; margin:auto; margin-top:10px; transition:all .3s ease-in; animation:{post_id}flash 3s linear infinite; [/class] [class name=enter state=hover] letter-spacing:0.1em; [/class] [animation=flash] [keyframe=0]opacity:0.2;[/keyframe] [keyframe=25]opacity:0.6;[/keyframe] [keyframe=50]opacity:0.3;[/keyframe] [keyframe=75]opacity:0.7;[/keyframe] [keyframe=100]opacity:0.2;[/keyframe] [/animation] [class=slider] width:270px; height:100%; clip-path: polygon(0 0, 87% 0, 100% 100%, 0 100%); background:white; opacity:0.6; padding:1em; align-self:flex-start; display:flex; flex-direction:column; justify-content:space-evenly; animation-name:{post_id}slideright; animation-duration:1.2s; animation-timing-function:ease-out; animation-delay:0s; animation-direction:normal; [/class] [animation=slideright] [keyframe=0]transform:translateX(-100%);[/keyframe] [keyframe=100]transform:translateX(0);[/keyframe] [/animation] [class=centerimage] clip-path: polygon(100% 0, 94% 100%, 16% 100%, 0 0%); width:230px; height:100%; background-size:100%; background-position:center; background-repeat:no-repeat; opacity:0.5; [/class] [class=contentwrap] width:369px; height:101%; background:white; clip-path: polygon(6% 0, 100% 0, 100% 100%, 3% 100%); opacity:0.9; [/class] [class=slidein] animation:{post_id}slideleft 1.2s ease-in-out 1; [/class] [animation=slideleft] [keyframe=0]transform:translateX(100%);[/keyframe] [keyframe=100]transform:translateX(0);[/keyframe] [/animation] [class=Tabs] width:210px; padding:0.5em; border:1px solid #bbb; font-family:Unica One; font-size:1em; text-align:center; color:#222; text-shadow:1px 1px 0px #99f3ff; letter-spacing:.6em; transition:all 0.3s linear; cursor:pointer; [/class] [class name=Tabs state=hover] letter-spacing:0.8em; [/class] [class=scrollbox] width:338px; height:90%; overflow-y:scroll; padding:.8em; margin-left:15px; [/class] [class=text] font-family:Karla, regular; font-size:0.8em; color:black; display:inline-block; margin-left: 5px; [/class] [class=title] display:inline-block; font-family:Unica One, display; font-size:0.8em; color:black; text-shadow:1px 1px 0px #99f3ff; [/class] [script class=enter on=click] fadeOut 800 loadpage show slider addClass slidein contentwrap show contentwrap show centerimage [/script] [script class=tab01 on=click] fadeIn 500 page01 hide page02 hide page03 hide page04 [/script] [script class=none] hide contentwrap hide slider hide centerimage [/script] [script class=tab02 on=click] fadeIn 500 page02 hide page01 hide page03 hide page04 [/script] [script class=tab03 on=click] fadeIn 500 page03 hide page01 hide page02 hide page04 [/script] [script class=tab04 on=click] fadeIn 500 page04 hide page01 hide page02 hide page03 [/script]
[div class=background][div class=slider][div class="Tabs tab01"]basic[/div][div class="Tabs tab02"]personality[/div][div class="Tabs tab03"]history[/div][div class="Tabs tab04"]other[/div][/div][div class=centerimage][/div][div class=contentwrap][div class="scrollbox page01"][div class=title]requisite[/div]
[div class=title]name[/div][div class=text] something here[/div]
[div class=title]aliases[/div][div class=text] something here[/div]
[div class=title]pronoun[/div][div class=text] something here[/div]
[div class=title]age[/div][div class=text] something here[/div]
[div class=title]gender[/div][div class=text] something here[/div]
[div class=title]race[/div][div class=text] something here[/div]
[div class=title]occupation[/div][div class=text] something here[/div]

[div class=title]appearance[/div]
[div class=title]height[/div][div class=text] something here[/div]
[div class=title]weight[/div][div class=text] something here[/div]
[div class=title]hairstyle[/div][div class=text] something here[/div]
[div class=title]eye colour[/div][div class=text] something here[/div]
[div class=title]outfits[/div][div class=text] something here[/div]
[div class=title]description[/div][div class=text] something here[/div]

[div class=title]stats[/div]
[div class=title]intelligence[/div][div class=text] [/div]
[div class=title]strength[/div][div class=text] [/div]
[div class=title]dexterity[/div][div class=text] [/div][/div][div class="scrollbox page02"][div class=title]likes[/div][div class=text] something here[/div]
[div class=title]dislikes[/div][div class=text] something here[/div]
[div class=title]quirks/habits[/div][div class=text] something here[/div]

[div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper vel lorem sed interdum. Pellentesque bibendum, est nec congue fermentum, risus magna sollicitudin quam, sed vestibulum lacus tortor pellentesque urna. Cras ultrices facilisis tellus nec tristique. Duis nec hendrerit leo, sed mollis orci. Etiam sed ligula nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ante lectus, tincidunt in semper id, consectetur vel ex. Nam eu pulvinar magna. Morbi viverra orci odio, vel feugiat ligula commodo a. Cras interdum tortor vel iaculis imperdiet. Quisque pharetra efficitur justo vel consequat. Proin porttitor nisl iaculis sagittis volutpat. Integer ut augue nisi. Sed rutrum consectetur libero, a viverra dui tincidunt eu. Pellentesque vitae libero non mauris tempus luctus vel in lectus. Sed vehicula vestibulum neque sit amet tincidunt.

Quisque dignissim nunc a erat accumsan, in molestie ligula ultricies. Duis ullamcorper risus massa, a facilisis purus gravida id. Aliquam et neque arcu. Suspendisse quis leo metus. Nam gravida tincidunt lorem, vitae mollis mauris condimentum ac. Etiam sed scelerisque quam, et dapibus neque. Maecenas luctus libero sit amet tincidunt accumsan. Ut in arcu leo. Duis in urna lectus. Suspendisse nec nisi odio. Fusce aliquam orci velit, eget vulputate lectus consectetur vel. Sed interdum vulputate purus placerat vestibulum. Phasellus tristique rhoncus tellus, sed vehicula nunc luctus eget. Ut arcu mauris, feugiat quis ullamcorper in, bibendum sed enim. Donec et sagittis neque.[/div][/div][div class="scrollbox page03"][div class=title]relationships[/div][div class=text] something here[/div]
[div class=title]other[/div][div class=text] something here[/div]
[div class=title]biography[/div][div class=text] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis dui mauris, a semper lacus dictum sit amet. Ut blandit, quam eu convallis interdum, tortor justo accumsan risus, ut tincidunt lorem sem quis dolor. Ut semper cursus libero vitae dapibus. Donec ut orci sit amet mauris posuere venenatis at non metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec mauris magna. In porttitor, leo non commodo tincidunt, ipsum turpis lacinia nunc, dictum luctus velit orci eget neque. Aliquam mattis sodales dui nec auctor. Integer ultrices erat vitae ultricies tincidunt. Pellentesque quis ipsum dapibus, tempor enim nec, auctor lacus.

Proin aliquam arcu non dignissim faucibus. Etiam tristique convallis viverra. Phasellus nec massa a velit posuere vulputate in nec nisi. Ut faucibus turpis non lacus mattis ultrices. Quisque maximus, massa quis sodales rutrum, metus ex dignissim nisl, porta laoreet eros augue eget enim. Donec sollicitudin felis ac ex mattis, sed rhoncus ligula cursus. In mauris risus, blandit ac ante ac, venenatis varius augue. Aenean varius leo id metus varius, a aliquet dui viverra. Vestibulum volutpat urna quis felis tincidunt gravida. Sed posuere ullamcorper ante, a tempus lorem pellentesque eu.[/div]
[div class=title]other[/div][div class=text] something here[/div][/div][div class="scrollbox page04"][div class=title]trivia[/div][div class=text] something here[/div]
[div class=title]faceclaim[/div][div class=text] something here[/div]
[div class=title]theme[/div][div class=text] something here[/div]
[div class=title]extra[/div][div class=text] something here[/div]
[div class=text]more text[/div][/div][/div][div class=loadpage][div class=greeting]おはいよう[/div][div class=enter]click me[/div][/div][/div]
code by RI.a

Code:

[nobr] [class=background] width:900px; height:60vh; background:url('https://i.imgur.com/tV41r9H.jpg') no-repeat; background-size:100%; overflow:hidden; display:flex; flex-wrap:wrap; margin:auto;center; [/class] [class=loadpage] width:900px; height:60vh; background:black; opacity:0.8; position:absolute; align-self:flex-start; [/class] [class=greeting] width:350px; height:50px; margin:auto; margin-top:20vh; font-family:Gothic A1, regular; font-size:3em; color:#99f3ff; text-align:center; [/class] [class=enter] width:75px; font-family:Unica One, display; font-size;0.5em; color:white; text-align:center; border:1px solid #99f3ff; padding:.3em; cursor:pointer; margin:auto; margin-top:10px; transition:all .3s ease-in; animation:{post_id}flash 3s linear infinite; [/class] [class name=enter state=hover] letter-spacing:0.1em; [/class] [animation=flash] [keyframe=0]opacity:0.2;[/keyframe] [keyframe=25]opacity:0.6;[/keyframe] [keyframe=50]opacity:0.3;[/keyframe] [keyframe=75]opacity:0.7;[/keyframe] [keyframe=100]opacity:0.2;[/keyframe] [/animation] [class=slider] width:270px; height:100%; clip-path: polygon(0 0, 87% 0, 100% 100%, 0 100%); background:white; opacity:0.6; padding:1em; align-self:flex-start; display:flex; flex-direction:column; justify-content:space-evenly; animation-name:{post_id}slideright; animation-duration:1.2s; animation-timing-function:ease-out; animation-delay:0s; animation-direction:normal; [/class] [animation=slideright] [keyframe=0]transform:translateX(-100%);[/keyframe] [keyframe=100]transform:translateX(0);[/keyframe] [/animation] [class=centerimage] clip-path: polygon(100% 0, 94% 100%, 16% 100%, 0 0%); width:230px; height:100%; background-size:100%; background-position:center; background-repeat:no-repeat; opacity:0.5; [/class] [comment]add image url to "background:url('http...');" then add this to above class to put an image in the center of the code.[/comment] [class=contentwrap] width:369px; height:101%; background:white; clip-path: polygon(6% 0, 100% 0, 100% 100%, 3% 100%); opacity:0.9; [/class] [class=slidein] animation:{post_id}slideleft 1.2s ease-in-out 1; [/class] [animation=slideleft] [keyframe=0]transform:translateX(100%);[/keyframe] [keyframe=100]transform:translateX(0);[/keyframe] [/animation] [class=Tabs] width:210px; padding:0.5em; border:1px solid #bbb; font-family:Unica One; font-size:1em; text-align:center; color:#222; text-shadow:1px 1px 0px #99f3ff; letter-spacing:.6em; transition:all 0.3s linear; cursor:pointer; [/class] [class name=Tabs state=hover] letter-spacing:0.8em; [/class] [class=scrollbox] width:338px; height:90%; overflow-y:scroll; padding:.8em; margin-left:15px; [/class] [class=text] font-family:Karla, regular; font-size:0.8em; color:black; display:inline-block; margin-left: 5px; [/class] [class=title] display:inline-block; font-family:Unica One, display; font-size:0.8em; color:black; text-shadow:1px 1px 0px #99f3ff; [/class] [script class=enter on=click] fadeOut 800 loadpage show slider addClass slidein contentwrap show contentwrap show centerimage [/script] [script class=tab01 on=click] fadeIn 500 page01 hide page02 hide page03 hide page04 [/script] [script class=none] hide contentwrap hide slider hide centerimage [/script] [script class=tab02 on=click] fadeIn 500 page02 hide page01 hide page03 hide page04 [/script] [script class=tab03 on=click] fadeIn 500 page03 hide page01 hide page02 hide page04 [/script] [script class=tab04 on=click] fadeIn 500 page04 hide page01 hide page02 hide page03 [/script] [/nobr] [div class=background][div class=slider][div class="Tabs tab01"][font=Unica One]basic[/font][/div][div class="Tabs tab02"]personality[/div][div class="Tabs tab03"]history[/div][div class="Tabs tab04"]other[/div][/div][div class=centerimage][/div][div class=contentwrap][div class="scrollbox page01"][div class=title]requisite[/div] [div class=title]name[/div][div class=text] [font=Karla]something here[/font][/div] [div class=title]aliases[/div][div class=text] something here[/div] [div class=title]pronoun[/div][div class=text] something here[/div] [div class=title]age[/div][div class=text] something here[/div] [div class=title]gender[/div][div class=text] something here[/div] [div class=title]race[/div][div class=text] something here[/div] [div class=title]occupation[/div][div class=text] something here[/div] [div class=title]appearance[/div] [div class=title]height[/div][div class=text] something here[/div] [div class=title]weight[/div][div class=text] something here[/div] [div class=title]hairstyle[/div][div class=text] something here[/div] [div class=title]eye colour[/div][div class=text] something here[/div] [div class=title]outfits[/div][div class=text] something here[/div] [div class=title]description[/div][div class=text] something here[/div] [div class=title]stats[/div] [div class=title]intelligence[/div][div class=text] [fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/div] [div class=title]strength[/div][div class=text] [fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/div] [div class=title]dexterity[/div][div class=text] [fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square[/fa][fa]fa-square-o[/fa][fa]fa-square-o[/fa][/div][/div][div class="scrollbox page02"][div class=title]likes[/div][div class=text] something here[/div] [div class=title]dislikes[/div][div class=text] something here[/div] [div class=title]quirks/habits[/div][div class=text] something here[/div] [div class=text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper vel lorem sed interdum. Pellentesque bibendum, est nec congue fermentum, risus magna sollicitudin quam, sed vestibulum lacus tortor pellentesque urna. Cras ultrices facilisis tellus nec tristique. Duis nec hendrerit leo, sed mollis orci. Etiam sed ligula nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ante lectus, tincidunt in semper id, consectetur vel ex. Nam eu pulvinar magna. Morbi viverra orci odio, vel feugiat ligula commodo a. Cras interdum tortor vel iaculis imperdiet. Quisque pharetra efficitur justo vel consequat. Proin porttitor nisl iaculis sagittis volutpat. Integer ut augue nisi. Sed rutrum consectetur libero, a viverra dui tincidunt eu. Pellentesque vitae libero non mauris tempus luctus vel in lectus. Sed vehicula vestibulum neque sit amet tincidunt. Quisque dignissim nunc a erat accumsan, in molestie ligula ultricies. Duis ullamcorper risus massa, a facilisis purus gravida id. Aliquam et neque arcu. Suspendisse quis leo metus. Nam gravida tincidunt lorem, vitae mollis mauris condimentum ac. Etiam sed scelerisque quam, et dapibus neque. Maecenas luctus libero sit amet tincidunt accumsan. Ut in arcu leo. Duis in urna lectus. Suspendisse nec nisi odio. Fusce aliquam orci velit, eget vulputate lectus consectetur vel. Sed interdum vulputate purus placerat vestibulum. Phasellus tristique rhoncus tellus, sed vehicula nunc luctus eget. Ut arcu mauris, feugiat quis ullamcorper in, bibendum sed enim. Donec et sagittis neque.[/div][/div][div class="scrollbox page03"][div class=title]relationships[/div][div class=text] something here[/div] [div class=title]other[/div][div class=text] something here[/div] [div class=title]biography[/div][div class=text] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis dui mauris, a semper lacus dictum sit amet. Ut blandit, quam eu convallis interdum, tortor justo accumsan risus, ut tincidunt lorem sem quis dolor. Ut semper cursus libero vitae dapibus. Donec ut orci sit amet mauris posuere venenatis at non metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec mauris magna. In porttitor, leo non commodo tincidunt, ipsum turpis lacinia nunc, dictum luctus velit orci eget neque. Aliquam mattis sodales dui nec auctor. Integer ultrices erat vitae ultricies tincidunt. Pellentesque quis ipsum dapibus, tempor enim nec, auctor lacus. Proin aliquam arcu non dignissim faucibus. Etiam tristique convallis viverra. Phasellus nec massa a velit posuere vulputate in nec nisi. Ut faucibus turpis non lacus mattis ultrices. Quisque maximus, massa quis sodales rutrum, metus ex dignissim nisl, porta laoreet eros augue eget enim. Donec sollicitudin felis ac ex mattis, sed rhoncus ligula cursus. In mauris risus, blandit ac ante ac, venenatis varius augue. Aenean varius leo id metus varius, a aliquet dui viverra. Vestibulum volutpat urna quis felis tincidunt gravida. Sed posuere ullamcorper ante, a tempus lorem pellentesque eu.[/div] [div class=title]other[/div][div class=text] something here[/div][/div][div class="scrollbox page04"][div class=title]trivia[/div][div class=text] something here[/div] [div class=title]faceclaim[/div][div class=text] something here[/div] [div class=title]theme[/div][div class=text] something here[/div] [div class=title]extra[/div][div class=text] something here[/div] [div class=text]more text[/div][/div][/div][div class=loadpage][div class=greeting]おはいよう[/div][div class=enter]click me[/div][/div][/div][div=width:900px;margin:auto;center;font:Karla;font-size:0.5em;opacity:0.6;letter-spacing:0.3em;]code by RI.a[/div]

I was wondering if I'm missing something. Is there any way to get the animation to go back to the 'click me' button?

RI.a · Sep 28, 2018

Lekiel said:
I was wondering if I'm missing something. Is there any way to get the animation to go back to the 'click me' button?

No there isn't a way to go back to the click me thing. Sorry!

MegMath13 · Oct 24, 2018

You wouldn't happen to take requests would you?

Blissfulness · Oct 25, 2018

RI.a said:
[class=header] width: 250px; height: 90px; background#ffffff; font-family: Heebo; font-size:12px; color:#666666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #dddddd; [/class]
[div class=header]Simple IC codes
IC code I made for DC/Marvel University. Tweaked it for In-Laws RP too. Scroll at the main chunk of text!
Mobile friendly! Free to use with credits.
Features: Single scroll, banner/header with picture, name and tags.[/div]

Character Name

Location: | Interacting with: | Mentions:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at laoreet odio. Etiam aliquet elementum velit et fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac justo vitae ipsum sagittis tempor. Donec in semper mi. Nunc tincidunt tempor lacus ut maximus. Mauris pretium ultrices purus non elementum. Sed at luctus arcu. Sed tempor, neque eget mollis euismod, augue lorem interdum urna, sed egestas ante odio ac diam.

Vestibulum quis commodo eros. Etiam erat eros, semper ac mauris et, laoreet malesuada nisi. Ut euismod augue sem, interdum gravida velit feugiat sed. Nam hendrerit dui eget ligula sodales varius. Mauris vel mi vel nisi tincidunt pharetra. Integer et cursus orci, a ornare neque. In in risus eu neque ullamcorper tempor malesuada vel arcu. Donec lobortis justo in magna consequat aliquet. Pellentesque sed justo vitae est auctor tempor.

Quisque eleifend sapien eu efficitur laoreet. Nulla interdum consectetur ante id semper. Morbi nec consequat tellus, vitae volutpat sem. Aenean pretium semper dui, vel bibendum nisl vehicula sed. Sed tempor eros eget leo dignissim volutpat. Nam eget nibh ac nunc vestibulum viverra ac et ante. Etiam vitae dapibus risus. Aenean at hendrerit tortor.

Sed fermentum ut sapien nec ultricies. In nec ligula laoreet, malesuada mi in, aliquam purus. Aliquam dapibus pharetra cursus. Suspendisse a elit tempor, tristique ipsum vitae, tincidunt turpis. Integer molestie sem ultrices leo suscipit sagittis. Mauris iaculis ex eu dignissim dictum. Aenean faucibus vestibulum semper. Vivamus tempor nunc quis sollicitudin accumsan. Pellentesque interdum porta pulvinar.

code by Ri.a

Code:

[centerblock=60][div=height:auto;display:flex;overflow:hidden;align-items:center;justify-content:space-evenly;][div=width:150px;height:150px;background:url('http://margaretzhang.com.au/wp-content/uploads/2014/04/MARGARETZHANG_HannahWaites_8626-800x1199.jpg');background-size:100%;background-repeat:no-repeat;border-radius:100px;][/div][div=flex:1;overflow-y:scroll;text-align:center;][div=font-size:2em;][font=Righteous]Character Name[/font][/div] [font=Lato][div=font-size:0.8em;opacity:0.5;]Location: | Interacting with: | Mentions: [/div][/font][/div] [/div] [div=flex:1;height:40vh;overflow-y:scroll;font-size:0.9em;padding:0.7em;][font=Lato]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at laoreet odio. Etiam aliquet elementum velit et fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac justo vitae ipsum sagittis tempor. Donec in semper mi. Nunc tincidunt tempor lacus ut maximus. Mauris pretium ultrices purus non elementum. Sed at luctus arcu. Sed tempor, neque eget mollis euismod, augue lorem interdum urna, sed egestas ante odio ac diam. Vestibulum quis commodo eros. Etiam erat eros, semper ac mauris et, laoreet malesuada nisi. Ut euismod augue sem, interdum gravida velit feugiat sed. Nam hendrerit dui eget ligula sodales varius. Mauris vel mi vel nisi tincidunt pharetra. Integer et cursus orci, a ornare neque. In in risus eu neque ullamcorper tempor malesuada vel arcu. Donec lobortis justo in magna consequat aliquet. Pellentesque sed justo vitae est auctor tempor. Quisque eleifend sapien eu efficitur laoreet. Nulla interdum consectetur ante id semper. Morbi nec consequat tellus, vitae volutpat sem. Aenean pretium semper dui, vel bibendum nisl vehicula sed. Sed tempor eros eget leo dignissim volutpat. Nam eget nibh ac nunc vestibulum viverra ac et ante. Etiam vitae dapibus risus. Aenean at hendrerit tortor. Sed fermentum ut sapien nec ultricies. In nec ligula laoreet, malesuada mi in, aliquam purus. Aliquam dapibus pharetra cursus. Suspendisse a elit tempor, tristique ipsum vitae, tincidunt turpis. Integer molestie sem ultrices leo suscipit sagittis. Mauris iaculis ex eu dignissim dictum. Aenean faucibus vestibulum semper. Vivamus tempor nunc quis sollicitudin accumsan. Pellentesque interdum porta pulvinar. [/font][/div][div=text-align:right;font:Karla;font-size:0.5em;letter-spacing:0.3em;opacity:0.6;][comment]DO NOT REMOVE[/comment]code by Ri.a[/div][/centerblock]

Would you mind if I use this code??

RI.a · Oct 25, 2018

SnuggleThisMuggle said:
You wouldn't happen to take requests would you?

No I don't sorry!

Blissfulness said:
Would you mind if I use this code??

Feel free!

RI.a · Nov 6, 2018

[class=header1] width: 250px; height: 90px; background#fff; font-family: Heebo; font-size:12px; color:#666; align:justify; padding:10px; margin:auto;center; overflow:auto; border:1px solid #ddd; [/class]
[div class=header1]Marmalade CS Code
Mobile friendly! ~~i think~~
Please keep the credits! Inspired by few of the coders here! This is pretty simple template really. But there's so many classes xD You can add more of the boxes with [div class=textTitle] and [div class=textbox]. Feel free to change the fonts and colours! Lemme know if there's any problems! ^^
Features: single hidden scroll.
[/div]

[div class=Container] [div class=header]

Name Here

[div class=headerTabs] [div class=textTabs]#gender[/div] [div class=textTabs]#age[/div] [div class=textTabs]#sexuality[/div] [div class=textTabs]#race[/div] [div class=textTabs]#height[/div] [div class=textTabs]#weight[/div] [div class=textTabs]#occupation[/div] [div class=textTabs]#hometown[/div] [div class=textTabs]#tag[/div] [div class=textTabs]#add[/div] [div class=textTabs]#as[/div] [div class=textTabs]#many[/div] [div class=textTabs]#as[/div] [div class=textTabs]#your[/div] [div class=textTabs]#heart[/div] [div class=textTabs]#desires[/div] [/div] [/div] [div class=gap][/div] [div class=textContainer] [div class=scrollContainer] [div class=wrapContainer]

[div class=textTitle]personality[/div] [div class=textbox]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet diam sollicitudin, pharetra felis in, volutpat sem. Aenean malesuada imperdiet nisi sit amet convallis. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae tortor nisi. Aliquam mauris turpis, tincidunt vitae leo a, vehicula ullamcorper elit. Donec magna purus, fringilla a dui sit amet, suscipit feugiat nibh.

Nullam laoreet elit eget suscipit laoreet. Maecenas convallis massa in tincidunt eleifend. In efficitur lacus in sapien cursus, sed rutrum elit finibus. Curabitur tristique metus metus, ac gravida felis vestibulum non. Vivamus vitae porttitor sapien. Aenean sit amet orci lacus. Sed vitae ultricies neque, vitae dictum arcu. Integer convallis iaculis dignissim. Vivamus id leo eget risus elementum laoreet in varius eros. Praesent vel lorem quam.

Donec justo neque, vestibulum et purus nec, sollicitudin accumsan velit. Aenean at turpis vitae ipsum hendrerit placerat non et enim. Nullam interdum consectetur imperdiet. In sed porttitor augue. Mauris id commodo urna. Ut mollis facilisis nulla id ullamcorper. Aliquam tempor ultrices neque, non pulvinar eros interdum quis. Nunc gravida tellus augue, ut sagittis mi porttitor quis. Phasellus elementum, enim ac congue ultricies, mi nulla aliquam urna, nec consectetur nibh arcu sed quam. Nunc sit amet nisl et lectus hendrerit auctor id consectetur lorem. Nam commodo, nibh non commodo consectetur, lectus sapien porta elit, eu placerat sem nibh vel libero. Phasellus gravida gravida maximus. [/div] [div class=gap][/div] [div class=textTitle]backstory[/div] [div class=textbox]Donec justo neque, vestibulum et purus nec, sollicitudin accumsan velit. Aenean at turpis vitae ipsum hendrerit placerat non et enim. Nullam interdum consectetur imperdiet. In sed porttitor augue. Mauris id commodo urna. Ut mollis facilisis nulla id ullamcorper. Aliquam tempor ultrices neque, non pulvinar eros interdum quis. Nunc gravida tellus augue, ut sagittis mi porttitor quis. Phasellus elementum, enim ac congue ultricies, mi nulla aliquam urna, nec consectetur nibh arcu sed quam. Nunc sit amet nisl et lectus hendrerit auctor id consectetur lorem. Nam commodo, nibh non commodo consectetur, lectus sapien porta elit, eu placerat sem nibh vel libero. Phasellus gravida gravida maximus.

Sed velit orci, dignissim in porta eget, euismod pellentesque quam. Vivamus interdum nulla mi, vitae convallis ligula imperdiet eget. Aliquam eget velit non neque cursus porta at a elit. Suspendisse a erat blandit, pulvinar arcu eget, tristique est. Nulla ut urna a ex aliquet mattis. Fusce at pharetra elit, ut convallis eros. Nunc augue dui, tincidunt sed eros quis, efficitur fermentum erat.

Nullam nibh tellus, dapibus eu quam consequat, elementum egestas nibh. Vivamus sed purus non tellus sollicitudin semper sit amet sit amet nisl. Pellentesque porta, elit nec eleifend imperdiet, dolor orci pellentesque nulla, quis tincidunt elit velit in lacus. Aliquam fringilla consequat augue, eu bibendum eros interdum et. Quisque scelerisque nulla vel dictum semper. In eleifend cursus hendrerit. Nulla porttitor nulla est, vel consequat erat lobortis quis. Nullam ac nisl in ligula pretium auctor eget eu felis. Etiam ornare elit ante, eget sodales enim imperdiet vel. Mauris eget nibh erat. Sed efficitur lectus neque, at suscipit odio commodo at. Integer non magna velit. [/div] [div class=gap][/div] [div class=textTitle]abilities[/div] [div class=textbox]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet diam sollicitudin, pharetra felis in, volutpat sem. Aenean malesuada imperdiet nisi sit amet convallis. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae tortor nisi. Aliquam mauris turpis, tincidunt vitae leo a, vehicula ullamcorper elit. Donec magna purus, fringilla a dui sit amet, suscipit feugiat nibh.

[div class=textLabel]01 name here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet diam sollicitudin, pharetra felis in, volutpat sem. Aenean malesuada imperdiet nisi sit amet convallis.

[div class=textLabel]02 name here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet diam sollicitudin, pharetra felis in, volutpat sem. Aenean malesuada imperdiet nisi sit amet convallis.

[div class=textLabel]03 name here[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet diam sollicitudin, pharetra felis in, volutpat sem. Aenean malesuada imperdiet nisi sit amet convallis. [/div]

[/div][/div] [div class=gap][/div] [div class=textTitle]weaknesses[/div] [div class=textbox]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet diam sollicitudin, pharetra felis in, volutpat sem. Aenean malesuada imperdiet nisi sit amet convallis. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae tortor nisi. Aliquam mauris turpis, tincidunt vitae leo a, vehicula ullamcorper elit. Donec magna purus, fringilla a dui sit amet, suscipit feugiat nibh.

[div class=textLabel]01 name here[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet diam sollicitudin, pharetra felis in, volutpat sem. Aenean malesuada imperdiet nisi sit amet convallis.

[div class=textLabel]02 name here[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet diam sollicitudin, pharetra felis in, volutpat sem. Aenean malesuada imperdiet nisi sit amet convallis.

[div class=textLabel]03 name here[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet diam sollicitudin, pharetra felis in, volutpat sem. Aenean malesuada imperdiet nisi sit amet convallis. [/div] [div class=gap][/div] [div class=textTitle]extra[/div] [div class=textbox]

[div class=textLabel]01

trivia trivia
[div class=textLabel]02

whoo interesting secret
[div class=textLabel]03[/div] oh my, how scandalous
[div class=textLabel]04[/div] she did what now?
[div class=textLabel]05[/div] Art by 赤倉
[div class=textLabel]06[/div] Theme:

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

code by RI.a

[class=Container] margin:auto;center; padding:2em; background:#fafafa; display:flex; flex-wrap:wrap; max-width:900px; height:auto; cursor: nw-resize; justify-content:space-evenly; [/class] [class=header] width:100%; height:auto; padding:1em; display:flex; justify-content:space-evenly; overflow:hidden; background:#fff; align-items:center; flex-wrap:wrap; [/class] [class=headerTabs] display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; width:80%; height:auto; [/class] [class=textTabs] width:auto; padding:0.3em; font-family:Roboto; font-size:0.8em; color:#2E4656; background:#FCB07E; border-radius:5px; align-self:flex-end; [/class] [class=textContainer] width:100%; height:50vh; overflow:hidden; [/class] [class=scrollContainer] width:105%; height:50vh; overflow:scroll; [/class] [class=wrapContainer] width:91.5%; height:auto; [/class] [class=textTitle] width:100%; padding:1em; background:#fff; letter-spacing:1em; text-transform:uppercase; color:#FCB07E; border-bottom:1px solid #FE938C; [/class] [class=textbox] width:100.8%; height:auto; background:#fff; padding:1em; text-align:justify; font-family:Roboto; font-size:0.8em; color:#2E4656; [/class] [class=textLabel] display:inline-block; width:auto; height:auto; padding:0.3em; font-family:Roboto; font-size:0.8em; color:#2E4656; background:#FCB07E; border-radius:5px; [/class] [class=gap] height:5vh; width:100%; [/class]

Code:

[nobr]
[div class=Container]

[div class=header][div=padding:1em;border:1px solid #FCB07E;border-radius:50%;][div=background:url('https://i.imgur.com/wNzwwop.jpg');background-size:200%;background-position:top;width:180px;height:180px; border-radius:50%;][/div][/div][div=text-align:justify;font-size:3.5em;color:#FF9E5E;text-shadow:3px 1px 0px #2E4656;][font=Slabo 27px]Name Here[/font][/div]

[div class=headerTabs]
[div class=textTabs][font=Roboto]#gender[/font][/div]
[div class=textTabs]#age[/div]
[div class=textTabs]#sexuality[/div]
[div class=textTabs]#race[/div]
[div class=textTabs]#height[/div]
[div class=textTabs]#weight[/div]
[div class=textTabs]#occupation[/div]
[div class=textTabs]#hometown[/div]
[div class=textTabs]#tag[/div]
[div class=textTabs]#add[/div]
[div class=textTabs]#as[/div]
[div class=textTabs]#many[/div]
[div class=textTabs]#as[/div]
[div class=textTabs]#your[/div]
[div class=textTabs]#heart[/div]
[div class=textTabs]#desires[/div]
[/div]
[/div]

[div class=gap][/div]
[div class=textContainer]
[div class=scrollContainer]
[div class=wrapContainer]

[div=float:right;width:100px;height:100px;padding:0.5em;border:1px solid #FCB07E;border-radius:50%;background:#fff;][div=background:url('https://i.imgur.com/0892I5E.jpg?1');background-size:200%;background-position:-0.8em 0em;width:100px;height:100px; border-radius:50%;][/div][/div]
[div class=textTitle]personality[/div]
[div class=textbox]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet diam sollicitudin, pharetra felis in, volutpat sem. Aenean malesuada imperdiet nisi sit amet convallis. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae tortor nisi. Aliquam mauris turpis, tincidunt vitae leo a, vehicula ullamcorper elit. Donec magna purus, fringilla a dui sit amet, suscipit feugiat nibh.

[br][/br][br][/br]Nullam laoreet elit eget suscipit laoreet. Maecenas convallis massa in tincidunt eleifend. In efficitur lacus in sapien cursus, sed rutrum elit finibus. Curabitur tristique metus metus, ac gravida felis vestibulum non. Vivamus vitae porttitor sapien. Aenean sit amet orci lacus. Sed vitae ultricies neque, vitae dictum arcu. Integer convallis iaculis dignissim. Vivamus id leo eget risus elementum laoreet in varius eros. Praesent vel lorem quam.

[br][/br][br][/br]Donec justo neque, vestibulum et purus nec, sollicitudin accumsan velit. Aenean at turpis vitae ipsum hendrerit placerat non et enim. Nullam interdum consectetur imperdiet. In sed porttitor augue. Mauris id commodo urna. Ut mollis facilisis nulla id ullamcorper. Aliquam tempor ultrices neque, non pulvinar eros interdum quis. Nunc gravida tellus augue, ut sagittis mi porttitor quis. Phasellus elementum, enim ac congue ultricies, mi nulla aliquam urna, nec consectetur nibh arcu sed quam. Nunc sit amet nisl et lectus hendrerit auctor id consectetur lorem. Nam commodo, nibh non commodo consectetur, lectus sapien porta elit, eu placerat sem nibh vel libero. Phasellus gravida gravida maximus.
[/div]

[div class=gap][/div]

[div class=textTitle]backstory[/div]
[div class=textbox]Donec justo neque, vestibulum et purus nec, sollicitudin accumsan velit. Aenean at turpis vitae ipsum hendrerit placerat non et enim. Nullam interdum consectetur imperdiet. In sed porttitor augue. Mauris id commodo urna. Ut mollis facilisis nulla id ullamcorper. Aliquam tempor ultrices neque, non pulvinar eros interdum quis. Nunc gravida tellus augue, ut sagittis mi porttitor quis. Phasellus elementum, enim ac congue ultricies, mi nulla aliquam urna, nec consectetur nibh arcu sed quam. Nunc sit amet nisl et lectus hendrerit auctor id consectetur lorem. Nam commodo, nibh non commodo consectetur, lectus sapien porta elit, eu placerat sem nibh vel libero. Phasellus gravida gravida maximus.

[br][/br][br][/br]Sed velit orci, dignissim in porta eget, euismod pellentesque quam. Vivamus interdum nulla mi, vitae convallis ligula imperdiet eget. Aliquam eget velit non neque cursus porta at a elit. Suspendisse a erat blandit, pulvinar arcu eget, tristique est. Nulla ut urna a ex aliquet mattis. Fusce at pharetra elit, ut convallis eros. Nunc augue dui, tincidunt sed eros quis, efficitur fermentum erat.

[br][/br][br][/br]Nullam nibh tellus, dapibus eu quam consequat, elementum egestas nibh. Vivamus sed purus non tellus sollicitudin semper sit amet sit amet nisl. Pellentesque porta, elit nec eleifend imperdiet, dolor orci pellentesque nulla, quis tincidunt elit velit in lacus. Aliquam fringilla consequat augue, eu bibendum eros interdum et. Quisque scelerisque nulla vel dictum semper. In eleifend cursus hendrerit. Nulla porttitor nulla est, vel consequat erat lobortis quis. Nullam ac nisl in ligula pretium auctor eget eu felis. Etiam ornare elit ante, eget sodales enim imperdiet vel. Mauris eget nibh erat. Sed efficitur lectus neque, at suscipit odio commodo at. Integer non magna velit.
[/div]

[div class=gap][/div]

[div class=textTitle]abilities[/div]
[div class=textbox][div=display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;]
[div=display:inline-block;max-width:680px;]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet diam sollicitudin, pharetra felis in, volutpat sem. Aenean malesuada imperdiet nisi sit amet convallis. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae tortor nisi. Aliquam mauris turpis, tincidunt vitae leo a, vehicula ullamcorper elit. Donec magna purus, fringilla a dui sit amet, suscipit feugiat nibh.
[br][/br][br][/br][div class=textLabel]01 name here[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet diam sollicitudin, pharetra felis in, volutpat sem. Aenean malesuada imperdiet nisi sit amet convallis.
[br][/br][br][/br][div class=textLabel]02 name here[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet diam sollicitudin, pharetra felis in, volutpat sem. Aenean malesuada imperdiet nisi sit amet convallis.
[br][/br][br][/br][div class=textLabel]03 name here[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet diam sollicitudin, pharetra felis in, volutpat sem. Aenean malesuada imperdiet nisi sit amet convallis.
[/div]

[div=width:180px;height:369px;border-radius:10px;background:url('https://i.imgur.com/S3eW9s4.jpg');background-size:cover;][/div]
[/div][/div]

[div class=gap][/div]

[div class=textTitle]weaknesses[/div]
[div class=textbox]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet diam sollicitudin, pharetra felis in, volutpat sem. Aenean malesuada imperdiet nisi sit amet convallis. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae tortor nisi. Aliquam mauris turpis, tincidunt vitae leo a, vehicula ullamcorper elit. Donec magna purus, fringilla a dui sit amet, suscipit feugiat nibh.
[br][/br][br][/br][div class=textLabel]01 name here[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet diam sollicitudin, pharetra felis in, volutpat sem. Aenean malesuada imperdiet nisi sit amet convallis.
[br][/br][br][/br][div class=textLabel]02 name here[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet diam sollicitudin, pharetra felis in, volutpat sem. Aenean malesuada imperdiet nisi sit amet convallis.
[br][/br][br][/br][div class=textLabel]03 name here[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet diam sollicitudin, pharetra felis in, volutpat sem. Aenean malesuada imperdiet nisi sit amet convallis.
[/div]

[div class=gap][/div]

[div class=textTitle]extra[/div]
[div class=textbox][div=display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;][div=width:180px;height:252px;border-radius:10px;background:url('https://i.imgur.com/Dg9o14O.jpg');background-size:cover;][/div]

[div=display:inline-block;margin-left:1em;]
[div class=textLabel]01[/div] trivia trivia
[br][/br][div class=textLabel]02[/div] whoo interesting secret
[br][/br][div class=textLabel]03[/div] oh my, how scandalous
[br][/br][div class=textLabel]04[/div] she did what now?
[br][/br][div class=textLabel]05[/div] Art by [url=https://www.pixiv.net/member.php?id=882569]赤倉[/url]
[br][/br][div class=textLabel]06[/div] Theme: 
[div=margin-left:1.5em;max-width:500px;][media=Youtube]Sk1kJBJkPh8[/media][/div]
[/div][/div]
[/div]

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

[/div][div=max-width:1100px;text-align:right;font-size:0.5em;letter-spacing:0.5em;opacity:0.6;][font=Karla]code by RI.a[/font][/div]

[comment]----------------classes start here----------------[/comment]

[class=Container]
margin:auto;center;
padding:2em;
background:#fafafa;
display:flex;
flex-wrap:wrap;
max-width:900px;
height:auto;
cursor: nw-resize;
justify-content:space-evenly;
[/class]

[class=header]
width:100%;
height:auto;
padding:1em;
display:flex;
justify-content:space-evenly;
overflow:hidden;
background:#fff;
align-items:center;
flex-wrap:wrap;
[/class]

[class=headerTabs]
display:flex;
justify-content:space-between;
align-items:flex-end;
flex-wrap:wrap;
width:80%;
height:auto;
[/class]

[class=textTabs]
width:auto;
padding:0.3em;
font-family:Roboto;
font-size:0.8em;
color:#2E4656;
background:#FCB07E;
border-radius:5px;
align-self:flex-end;
[/class]

[class=textContainer]
width:100%;
height:50vh;
overflow:hidden;
[/class]

[class=scrollContainer]
width:105%;
height:50vh;
overflow:scroll;
[/class]

[class=wrapContainer]
width:91.5%;
height:auto;
[/class]

[class=textTitle]
width:100%;
padding:1em;
background:#fff;
letter-spacing:1em;
text-transform:uppercase;
color:#FCB07E;
border-bottom:1px solid #FE938C;
[/class]

[class=textbox]
width:100.8%;
height:auto;
background:#fff;
padding:1em;
text-align:justify;
font-family:Roboto;
font-size:0.8em;
color:#2E4656;
[/class]

[class=textLabel]
display:inline-block;
width:auto;
height:auto;
padding:0.3em;
font-family:Roboto;
font-size:0.8em;
color:#2E4656;
background:#FCB07E;
border-radius:5px;
[/class]

[class=gap]
height:5vh;
width:100%;
[/class]
[/nobr]

Dolches · Nov 22, 2018

These are all really good ~~if not too good for us peasants to use~~, but the code that I really want is the one that negates the others. I can't find it anywhere.

RI.a · Nov 22, 2018

zacharychi said:
These are all really good ~~if not too good for us peasants to use~~, but the code that I really want is the one that negates the others. I can't find it anywhere.

Thank you!
Err what do you mean? Hahaha

Dolches · Nov 22, 2018

RI.a said:
Thank you!
Err what do you mean? Hahaha

The one that stops other codes from working so you can show them off.

PhoenixMire · Nov 23, 2018

Whooooooaaa these are incredible! Amazing work! Maybe one day I'll figure out how to code like that, haha

zacharychi said:
The one that stops other codes from working so you can show them off.

Idk if you figured it out by now, but if not, do you mean this kind of thing?
[b][i]Hi![/i][/b]

Just do [*icode][*/icode] without the asterisks

-_Princely_- · Nov 24, 2018

These are very beautiful! I'm amazed at how these were made, hopefully I can learn how to make something similar to these ^^. Is alright if I use one or two? I promise to give credit when I use them! (I know it says it's okay but I still would like to hear for me to get proper permission ^^")

RI.a · Nov 25, 2018

_FlowerPrincess_ said:
These are very beautiful! I'm amazed at how these were made, hopefully I can learn how to make something similar to these ^^. Is alright if I use one or two? I promise to give credit when I use them! (I know it says it's okay but I still would like to hear for me to get proper permission ^^")

Thank you! Feel free to use as many as you want. ^^ credit is already included in the codes, so you don't have to add them.

-_Princely_- · Nov 25, 2018

Thank you!

PhoenixMire · Nov 25, 2018

If you don't mind my asking, how would I hide the scroll bar on this box?

Lorem ipsum dolor sit amet, ludus homero deleniti ei eam, et reque dicam noster per, sit dicat ridens epicuri in. Vis minim postulant no. Rebum autem malorum vim eu. Utroque perfecto mei ea, mea in erant impedit menandri. Hinc cibo probo nam id, quo id utinam petentium interpretaris. Soluta quaestio atomorum ad cum, per id debet disputationi. Munere feugait usu id.

Sale nulla postulant has ad, et his offendit fabellas. Maiorum philosophia an quo, ne has solet antiopam disputationi, cibo regione eruditi an duo. Ea mei oratio reprimique, ea nam assum legere ridens, ne sed ridens consectetuer. Ius ferri interesset in, te sit quod impedit.

Tale option electram per te, pro an brute oratio definitiones. Delenit veritus atomorum has ne, altera mnesarchum pri at. Te pri erat eripuit accusamus, autem aeque est an. Ea alia nulla mediocritatem mea.

No duo utroque lucilius, ei ferri scriptorem sit. Scripta salutandi ea usu. Ex hinc verear est, ne audiam placerat vix. No ubique legere persequeris mea. Mei omnesque mnesarchum te, ex ubique lucilius moderatius ius. Modo minim ea eum.

Et quis nostrum sit, veniam reformidans qui cu. Vide mutat perpetua vel ea. Ea duo commodo minimum, tibique disputando mediocritatem eam in, cu vide quaerendum reprehendunt quo. Decore eruditi interpretaris sed no. Ut est paulo possit percipitur, ad expetenda elaboraret reprehendunt his, ut eam choro patrioque reprehendunt.

[div="background:url('https://i.imgur.com/twAVxZ6.jpg');background-size:cover;padding:5px;"][scroll=300px][COLOR=#7E0038]Lorem ipsum dolor sit amet, ludus homero deleniti ei eam, et reque dicam noster per, sit dicat ridens epicuri in. Vis minim postulant no. Rebum autem malorum vim eu. Utroque perfecto mei ea, mea in erant impedit menandri. Hinc cibo probo nam id, quo id utinam petentium interpretaris. Soluta quaestio atomorum ad cum, per id debet disputationi. Munere feugait usu id.[/COLOR]

[COLOR=#7E0038]Sale nulla postulant has ad, et his offendit fabellas. Maiorum philosophia an quo, ne has solet antiopam disputationi, cibo regione eruditi an duo. Ea mei oratio reprimique, ea nam assum legere ridens, ne sed ridens consectetuer. Ius ferri interesset in, te sit quod impedit.[/COLOR]

[COLOR=#7E0038]Tale option electram per te, pro an brute oratio definitiones. Delenit veritus atomorum has ne, altera mnesarchum pri at. Te pri erat eripuit accusamus, autem aeque est an. Ea alia nulla mediocritatem mea.[/COLOR]

[COLOR=#7E0038]No duo utroque lucilius, ei ferri scriptorem sit. Scripta salutandi ea usu. Ex hinc verear est, ne audiam placerat vix. No ubique legere persequeris mea. Mei omnesque mnesarchum te, ex ubique lucilius moderatius ius. Modo minim ea eum.[/COLOR]

[COLOR=#7E0038]Et quis nostrum sit, veniam reformidans qui cu. Vide mutat perpetua vel ea. Ea duo commodo minimum, tibique disputando mediocritatem eam in, cu vide quaerendum reprehendunt quo. Decore eruditi interpretaris sed no. Ut est paulo possit percipitur, ad expetenda elaboraret reprehendunt his, ut eam choro patrioque reprehendunt.[/COLOR][/scroll][/div]

RI.a · Nov 26, 2018

PotatoPhoenix said:
If you don't mind my asking, how would I hide the scroll bar on this box?

I've got a tutorial here

Closed Ria's -- code dump?

"愛を知りたいのです."

How troublesome...

"愛を知りたいのです."

Make way for the Raven Queen

"愛を知りたいのです."

"愛を知りたいのです."

"愛を知りたいのです."

"愛を知りたいのです."

Gamer Girl

Gamer Girl

Two Thousand Club

"愛を知りたいのです."

We're All Mad Here!

Look into my eyes to find your bliss.

"愛を知りたいのです."

"愛を知りたいのです."

Horizontal Staircase

"愛を知りたいのです."

Horizontal Staircase

ᛚᚨᚦᚢ:ᚹᛁᛞᚢᛉ:ᛖᚱᚦᛟ

.｡.: ☆: :. wαtchíng thє ѕtαrѕ .: :.☆ .:｡.

"愛を知りたいのです."

.｡.: ☆: :. wαtchíng thє ѕtαrѕ .: :.☆ .:｡.

ᛚᚨᚦᚢ:ᚹᛁᛞᚢᛉ:ᛖᚱᚦᛟ

"愛を知りたいのです."

Users who are viewing this thread

Similar threads