Resource ✰INspired Codes

[Cicatrix]

[class name=container] max-width: 600px; width: 90%; margin: auto; background: linear-gradient( rgba(112,182,209,0.3), rgba(78,113,126,0.5) 20%, rgba(4,14,30,0.9) ), url('https://i.imgur.com/JrbU59d.png'), black; background-attachment: fixed; border: solid 1px black; display: flex; align-items: center; justify-content: center; [/class] [class name=main] max-width: 600px; width: 80%; margin: auto; background: #ebebeb; border: solid 1px gray; color: black; padding: 2%; font-size: 14px; [/class] [div class=container] [div class=main] I don't really go here often, but I've been having a lot of fun with the bbcode+ on this website, so this thread is here to share the fruits of my labor! Most of these things will be codes 'inspired by' something else, not because I'm totally devoid of creativity or anything, but because I think it's fun to try and recreate things.

think of this intro post as... under construction. Oh, and please tell me my code sucks. I need the criticism. I could also use ideas or requests, y'know, for fun. [/div] [/div]

 

[Cicatrix]

[class name="main"] background: black; max-width: 425px; width: 95%; margin: auto; overflow: auto; padding: 3px; border: solid 1px white; [/class] [class name="mainheader"] text-align: center; font-size: 40px; -webkit-text-fill-color: rgba(0,0,0,1); text-shadow: 3px 3px 0 #f717dc, -1px -1px 0 #f717dc, 1px -1px 0 #f717dc, -1px 1px 0 #f717dc, 1px 1px 0 #f717dc; [/class] [class name="mainflexcontainer"] display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; background: #9b9b9b; text-transform: uppercase; font-size: 10px; font-weight: bold; padding: 0px 2px 2px 2px; border-bottom: solid 1px black; [/class] [class name="maintextbox"] text-align: justify; background: white; padding: 2px 5px 5px 5px; color: black; font-size: 13px; line-height: 1.3; text-indent: 10px; [/class] [class name="labelgreen"] order: 1; padding: 0px 3px 0px 3px; background: #8af193; color: black; margin: 2px 1px 2px 1px; border-radius: 5px; flex: 1 1 auto; text-align: center; [/class] [class name="labelyellow"] order: 1; padding: 0px 3px 0px 3px; background: #f1d98a; color: black; margin: 2px 1px 2px 1px; border-radius: 5px; flex: 1 1 auto; text-align: center; [/class] [class name="labelred"] order: 2; padding: 0px 3px 0px 3px; background: #ee6969; color: black; margin: 2px 1px 2px 1px; border-radius: 5px; flex: 1 1 auto; text-align: center; [/class] [div class=mainheader]#1 - Thrills, Chills, Kills![/div] [div class=main] [div class=mainflexcontainer] [div class="labelgreen"]danganronpa[/div] [div class="labelgreen"]character sheet[/div] [div class="labelgreen"]hidden scroll[/div] [div class="labelgreen"]multiple pages/tabs[/div] [div class="labelyellow"]mobile OK[/div] [div class="labelred"]desktop best[/div] [/div] [div class=maintextbox]

Here's the first code I've made for this site, based on the Report Card/e-Handbook from Danganronpa: Trigger Happy Havoc. Yes, it's ugly, but hey, it looks like that in the game... who knows why I chose to start recreating the ugliest report card first. Beware of any jank, and don't be afraid to ask any questions about using it.

If there's any way I could make this even more mobile friendly, feel free to give me criticism on that regard... It was primarily made with desktop use in mind, due to the form factor of the 'original'. Also, using a character image with a transparent background works best (the red gradient can show through).

[/div] [/div]

Get the code here!

[class name="cardbase"] position: relative; z-index: 0; background: linear-gradient( rgba(229,90,34,0.7), rgba(78,113,126,0.7) 20%, rgba(4,14,30,0.9) ), url('https://i.imgur.com/2QivGiK.png') no-repeat center; background-size: cover; border-radius: 15px; border-style: groove ridge groove groove; border-width: 5px; border-color: white #374853 #5a7691 #5a7691; max-width: 720px; width: 90%; margin: auto; [/class] [class name="horizontalLine"] position: absolute; z-index: 1; border: solid #fff; background: #fff; border-width: 0.75px; width: 85%; margin: 33px 1px; [/class] [class name="header"] display: inline-block; position: relative; z-index: 2; float: left; letter-spacing: 5px; font-size: 35px; transform: scaleY(0.7); font-weight: bold; color: white; line-height: 1.1; text-shadow: 0 0 10px #44545e,0 0 10px #44545e,0 0 10px #44545e, 0 0 20px #44545e, 0 0 30px #44545e, 0 0 40px #44545e; margin: 12px 0px 5px 25px; [/class] [class name="academyHeader"] display: inline-block; position: relative; z-index: 2; float: right; top: 13px; max-width: 250px; width: 100%; text-align: right; font-size: 1.1em; line-height: 1.2; letter-spacing: 3px; color: white; font-family: garamond, serif; text-shadow: 0 0 10px #000; transform: scale(0.9,1); right: 13%; [/class] [class name="academyLogo"] position: absolute; right:0; max-width: 100px; max-height: 100px; width: 15%; overflow: hidden; margin: 8px 8px 0px 0px; opacity: 0.6; [/class] [class name="subheader"] position: relative; max-width: 400px; width: 100%; font-size: 28px; font-weight: bold; color: white; margin-left: 3%; [/class] [class name="flexcontainer"] display: flex; flex-wrap: wrap; justify-content: center; [/class] [class name="charportrait"] display: inline-block; background: url('https://i.imgur.com/LB5jSBa.png') center top no-repeat , linear-gradient(rgba(0,0,0,0), rgba(179,29,29,0.55) 50%); background-size: cover; border-radius: 8px; border: solid 1.5px white; max-width: 200px; max-height: 275px; width: 30%; height: auto; min-width: 180px; min-height: 248px; margin-top: 3px; margin-bottom: 10px; margin-right: 1%; margin-left: 3%; overflow:hidden; [/class] [class name="information"] position: relative; display: inline-block; max-width: 460px; width: 60%; line-height: 1.8; color: white; font-size: 20px; font-family: Lucida sans unicode, sans-serif; margin: 2px 0px 0px 12px; max-height: 300px; overflow:hidden; order: 1; flex-grow: 2; align-self: stretch; right: 5px; [/class] [class name="label"] background: #ff6000; border-radius: 20px; padding-left: 10px; line-height: 1.6; margin-left: -5px; margin-right: 10vw; [/class] [class name="label2"] background: #ff6000; border-radius: 20px; padding-left: 10px; font-size: 17px; line-height: 1.6; margin-top: 4px; margin-left: 2.5px; margin-right: 45%; [/class] [class name="pagination"] position: relative; color: white; font-size: 25px; float:right; margin: 5px; [/class] [class name=sbutton] cursor: pointer; font-size: 25px; color: rgba(0,0,0,0); -webkit-text-stroke: 1.5px yellow; text-align: center; margin: 0px 5px 0px 5px; float: right; [/class] [class name=stab] display: block; box-sizing: content-box; width: 100%; height: 300px; padding-right: 200px; overflow-y: auto; overflow-x: hidden; [/class] [class name=credit] transform: rotate(-90deg); position: absolute; top: 250px; left: -35px; font-size: 10px; color: white; opacity: 0.6; [/class] [script class=sbutton version=2] (hide "stab") (show "onetab") (addClass "onebtn") [/script] [script class=sbutton version=2 on=click] (hide "stab") (= currenttab (index (split (getText) "#") 0 )) (show (+ currenttab "tab")) (addClass (+ currenttab "btn")) [/script] [div class=cardbase] [div class=academyLogo]

[/div] [div class=flexbox [div class=header]Report Card[/div] [div class=academyHeader]Hope's Peak Academy
e-Handbook[/div] [div class=horizontalLine][/div] [div class=subheader]

0002	Kiyotaka Ishimaru

[/div] [div class=flexcontainer] [div class=charportrait] [/div] [div class="information"] [div class="stab onetab"]

[div class=label]Name[/div]	Kiyotaka Ishimaru​
[div class=label]Height[/div]	5 ft. 9 in. (176 cm)​
[div class=label]Weight[/div]	146 lbs. (66 kg.)​
[div class=label]Chest[/div]	31 in. (79 cm.)​

[div class=label2]Special Ability[/div]

Ultimate Moral Compass

[div class=pagination]1/5[div class="sbutton twobtn"]

two#

[/div][/div] [/div] [div class="stab twotab"] [div class=label2]Information[/div]

If you have the knowledge to do so, you are free to change this layout in whatever way suits you. It does not have to be a profile card for a Danganronpa character, as the text and images provided can be changed to whatever is suitable for your roleplay character. Both the code used to create a 'page turning' effect and the hidden scroll effect are modified codes sourced from the

snippets thread

. This code was designed to not totally screw over mobile users.

[div class=pagination]

[div class="sbutton onebtn"]

one#

[/div]2/5[div class="sbutton threebtn"]

three#

[/div][/div] [/div] [div class="stab threetab"] [div class=label2]Information2[/div]

This page showcases the hidden scroll built into the profile, which was put there in order to keep the "card" effect. Unlike some hidden scrolls that can be easily missed, the page turning function gives someone an incentive to attempt to scroll down. In order to make a linebreak, the use of a

[br][/br]

tag is necessary.

Et pharetra pharetra massa massa ultricies mi quis. Mattis molestie a iaculis at erat pellentesque adipiscing commodo. Magna fringilla urna porttitor rhoncus dolor. Eu augue ut lectus arcu bibendum at varius vel pharetra. At tellus at urna condimentum mattis pellentesque id nibh tortor. Purus in massa tempor nec. Iaculis urna id volutpat lacus laoreet non curabitur. Consequat nisl vel pretium lectus quam id leo in vitae. In mollis nunc sed id.

[div class=pagination]

[div class="sbutton twobtn"]

two#

[/div]3/5[div class="sbutton fourbtn"]

four#

[/div][/div] [/div] [div class="stab fourtab"] [div class=label2]Information3[/div]

In theory, you should be able to make as many pages as you want. Examine the code for each of these 'stab' sections and change some of the values in order to create extra pages, or to remove unneeded ones entirely. If you need any help, just DM me and I'll probably do it for you lol. The same goes for any other changes that you may find difficult to do on your own. If you are willing to take a crack at messing with the code, make sure to liberally use ctrl+f.

[div class=pagination]

[div class="sbutton threebtn"]

three#

[/div]4/5[div class="sbutton fourbtn"]

five#

[/div][/div] [/div] [div class="stab fivetab"] [div class=label2]Information4[/div]

This code is probably a little janky. The scripts may take a few seconds to load in properly.

[div class=label2]Add More Labels[/div]

You can add as much bottom padding on the paragraph above, or you can just delete this section entirely. This is just here to showcase how you could add multiple labels on one page.

[div class=pagination]

[div class="sbutton twobtn"]

four#

5/5[/div][/div][/div] [/div][/div] [div class=credit]code by Cicatrix [/div] [/div]