HTML, or anything else [Currently not accepting requests]

[IctoraPost]

I'm taking a break! No one probably cares, or knows who I am. Well, see the spoiler below. So, yeah. After accepting a grand total of three requests, I've decided to take a break. That's how lazy I am. You can pre-book my services if you really want, but it'll be a few weeks before I'll go to them, if I ever do. In the meantime, please redirect your requests to:


@StoneWolf18's thread here,


@Ambela's thread here, or


@Syzygy's thread here.

Spoiler

Do you want some fancy HTML customized to your needs which you will have to wait days, or weeks, to get? Then this is the place for you! Just tell me what you want, and I'll see if I can do it.


A note of warning though: I don't have enough posts to actually access the HTML here, so, although my code might work in an external program, I can't guaruntee that it works here on RPN, and I can't really to any bugfixes either. And you'll have to be satisfied with a gif for demonstrating the thing. If you want to actually interact with it, you'll have to click on the links.


Examples:



Spoiler



View attachment 195127


And a JSFiddle for firsthand experience.


Code for anyone who wants it:



Spoiler






<p>&nbsp;</p>

<style type="text/css">

.firsty {
width: 400px;
height: 497px;
background-color: #eedddd;
position: relative;
border-radius: 20px;
font-family: Raleway;
text-align: center;
color: white;
}

.firsty img {
width: 100%;
height: auto;
position: absolute;
transition: 1s;
left: 0;
top: 0;
border-radius: 20px;
z-index: 2;
}

.firsty:hover img {
left: 100%;
}

.firsty h1 {
font-weight: lighter;
color: black;
}

.firsty > div {
height: 100%;
overflow: hidden;
border-radius: 20px;
font-size: 17px;
}

.firsty > div > div {
position: relative;
width: 100px;
height: 420px;
float: left;
border-radius: 20px 20px 0 0;
}

.firsty > div > div > div {
position: absolute;
width: 400px;
height: 400px;
top: 420px;
z-index: 2;
transition: 1s;
background-color: inherit;
overflow: scroll;
padding-right: 8.5px;
padding-left: 8.5px;
font-size: 16px;
}

.firsty > div > div > div > div {
padding: 10px 25px 25px 25px;
text-align: justify;
}

.firsty > div > div:hover > div {
top: 50px;
}

</style>

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

<div class="firsty">
<div style="transform: translateZ(0);">
<h1>Lorem Ipsum</h1>
<div style="background-color: #333333;"><br>Basic Info
<div style="left: 0;">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pellentesque mi a elit posuere, eget rhoncus elit varius. Ut eget semper nulla, quis malesuada eros. Praesent scelerisque nibh ex. Aliquam faucibus non risus vitae vehicula. Sed tempus justo eu tellus condimentum dignissim. Duis justo quam, pellentesque fermentum congue accumsan, blandit sed lectus. Etiam et metus a urna interdum dignissim sed eleifend lorem. Praesent sodales sit amet elit lobortis vestibulum. Nulla sed vulputate tortor.</p>
<p>Nullam at diam quis velit fringilla accumsan et vel leo. Fusce pharetra, risus sed vehicula rhoncus, nisi nisi scelerisque orci, vitae molestie ipsum augue nec lacus. Sed facilisis ex sodales lorem efficitur, eget iaculis augue ultrices. Fusce porta lectus non ultricies gravida. Ut mattis congue diam ac consectetur. Sed at erat vitae est aliquam fermentum. Pellentesque vitae faucibus orci, in tempor arcu. Fusce varius mollis eros, mollis aliquam tortor maximus eget. Morbi in est est.</p>
</div>
</div>
</div>
<div style="background-color: #4466aa;"><br>Personality
<div style="left: -100px;">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae tortor malesuada eros elementum fringilla. Praesent vel scelerisque nisi. Mauris aliquam, libero in porttitor ultrices, quam ipsum aliquet est, et lacinia diam ante a tellus. Donec vulputate mauris ut mollis hendrerit. Cras viverra odio non sem mattis, consectetur dapibus lorem ornare. Vivamus metus enim, euismod eu urna a, vulputate dictum purus. In facilisis ut sapien eu vulputate. Donec et vestibulum arcu, ac tempor velit. Aenean et lacus finibus, fringilla elit sodales, volutpat ipsum. Fusce vitae nulla quis quam fermentum porta ut eget velit.</p>
<p>Morbi aliquet justo ligula, vel efficitur neque iaculis sed. In hac habitasse platea dictumst. Proin scelerisque magna est, eu bibendum libero sodales in. Cras malesuada enim pellentesque egestas aliquet. Duis eget felis felis. Ut massa dolor, ullamcorper quis pellentesque nec, tincidunt imperdiet tellus. Cras scelerisque nisl justo, ut fringilla justo vulputate ut. Sed vulputate massa felis, ut laoreet lectus viverra eu. In pretium dignissim vulputate. Integer vulputate sed lorem ac lobortis. Phasellus et tincidunt ante. Duis eget est vitae lorem tincidunt congue. Sed scelerisque nisl risus, ac molestie metus pellentesque vel.</p>
</div>
</div>
</div>
<div style="background-color: #99aaaa;"><br>Skills
<div style="left: -200px;">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sagittis aliquam euismod. Curabitur pretium accumsan scelerisque. Duis enim elit, pharetra vitae consequat sed, consectetur sit amet nisl. Nam at condimentum arcu, sit amet pellentesque orci. Nunc fermentum nunc nibh, at varius lorem rhoncus a. Vivamus quis diam eget neque sagittis gravida ac vel libero. Integer ut massa tempor, accumsan ipsum at, pharetra justo. Suspendisse rutrum massa vel dolor aliquam lacinia. Etiam non turpis vel diam fringilla porttitor. In eleifend justo ac sem tristique, finibus consequat ligula rutrum. Nullam vulputate fermentum nisl, et bibendum lacus porta vel. Phasellus pulvinar auctor nibh sed cursus. Aenean faucibus diam ex, eu lacinia mauris efficitur interdum. Sed quis sapien sed nisi consectetur aliquam.</p>
<p>Proin fermentum nisl non enim maximus, id mattis diam fringilla. Fusce sed ligula non leo vestibulum imperdiet quis ac eros. Cras eu quam ac tellus rutrum scelerisque vitae eu risus. Nam tempor nunc augue, non placerat arcu rutrum eget. Quisque vestibulum mi sit amet diam lacinia suscipit. Aenean non purus eget tortor congue egestas sit amet sit amet purus. Sed euismod erat magna, at auctor turpis mattis ac. Phasellus pulvinar eu libero vitae malesuada. Aliquam erat volutpat. Ut venenatis neque a magna ullamcorper, eu ultrices nisl venenatis. Pellentesque luctus lorem quis massa blandit eleifend. Etiam quis ante vel lectus congue faucibus suscipit et massa. Curabitur ac risus hendrerit ipsum ullamcorper imperdiet a tempus risus. Proin eleifend laoreet ligula, eu ultrices lacus pulvinar id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
<div style="background-color: #887777;"><br>Extra
<div style="left: -300px;">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis vehicula lorem. Donec sit amet mattis nulla. Integer ultrices nisl pellentesque mauris placerat tristique. Vivamus augue lacus, blandit at velit sit amet, hendrerit pharetra elit. Sed libero felis, volutpat vitae ante non, eleifend porttitor lectus. Morbi est dui, fermentum id tincidunt eu, cursus et ligula. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet ligula vel ex efficitur, et efficitur elit mattis. Proin dictum augue nibh, et finibus massa varius at.</p>
<p>Nunc quis sapien auctor, auctor justo a, gravida arcu. Morbi nec faucibus nulla, quis porttitor libero. Fusce pulvinar, massa viverra dictum dapibus, nunc augue gravida massa, a egestas purus erat non massa. Pellentesque hendrerit eleifend fermentum. Vestibulum feugiat ut diam nec pretium. Praesent ut dignissim diam, eu fermentum arcu. Vivamus nisl enim, congue vitae lacus sed, pulvinar hendrerit ante. Nunc eu fermentum leo, nec bibendum nulla. Duis posuere nisl sed diam tincidunt, et sagittis nulla tempus. Quisque a purus lobortis, consectetur dui nec, laoreet ipsum. Curabitur urna nunc, vulputate eu efficitur vitae, rutrum eget massa. Aliquam quam erat, tempus maximus tincidunt quis, tincidunt in quam. Nunc rutrum consectetur velit nec fringilla.</p>
</div>
</div>
</div>
</div>
<img src="http://orig06.deviantart.net/8841/f/2015/039/1/9/anime_guy_with_red_eyes_by_anyuanima-d8h5ko2.jpg">
</div>

Example


Request 1




I also accept any request for anything else you want. Don't expect much, though - if you want quality, then you should go ask a specialist. Especially regarding art. I just can't art.


You could ask me to:

1. Correllate a bunch of images into a collage.
   
2. Find the source of an image.
   
3. Critique your writing.
   
4. Draw a stickman badly.
   
5. Do your maths homework.
   
6. Etc.
   

Examples:

Spoiler

View attachment 195118


A modification of my profile pic.

Spoiler

View attachment 195119


Idea ripped off @Prince Lotus. Hope they don't mind.

Spoiler

View attachment 195123


Art, if you can call it that. See how bad it is?

 

[punkinblackk]

Can you do a setup like this in html? 


(But with only one character, no save or exit tabs, similar to the one up top? (Scratch the entire bottom bar as well) please? )


might offer art type stuff in return, but I dunno if you want any

 

[IctoraPost]

Can you do a setup like this in html? 


(But with only one character, no save or exit tabs, similar to the one up top? (Scratch the entire bottom bar as well) please? )


might offer art type stuff in return, but I dunno if you want any

So, just to clarify, you just want this? Is there a specific picture/background/font/name/level/health/SP you want? How big do you want it? Sorry for the late reply (I was asleep).





Also, what's the stuff you're offering?

 

[punkinblackk]

Sorry. I suck at explaining how I want things. 





All the items on the side should be tabs,


The character should take up the whole side. 


(I'm not particular on the background or font, I just want to know how to change things some {text in tabs and character pics and stuff} so I can use it for character sheets in a project I'm working on. )


(Also, hp\sp can be fraction style (70/110) or something. Name, level, picture can be whatever, just for demonstration purposes.) 


i may be offering to draw you something, but I dunno if you want anything, as I mostly do anime style people and dragons

 

[IctoraPost]

All the items on the side should be tabs,

How do you want the information to be displayed? What do you want to happen when the tabs are clicked?

The character should take up the whole side. 

What do you mean by this? Just making the thing taller?


Hmm... nothing I really want drawn right now. But thanks for the offer!


@punkinblackk

 

[punkinblackk]

 

[punkinblackk]

Um, can you do something like how the tabs in the sample you have up top work?


And for the right side, perhaps place the picture on top of the text, to support larger pictures

 

[IctoraPost]

OK.


Do you want the tabs to open when hovered over or when clicked?

 

[punkinblackk]

Uhhh I'll say clicked. 

 

[IctoraPost]

Sure. This whole thing might take a while.

 

[punkinblackk]

It's okay. I'm still a few hundred posts away from actually being able to use it. So... yeah. 

 

[IctoraPost]

And I've still got over four hundred to go... *sigh*

 

[punkinblackk]

Agreed. 

 

[Entarriance]

Bro!! I wish you luck with those 400 posts diddly darn, but you got a lot of talent! If you don't mind, maybe you can help me with a character sheet I used to have before the update and BBcode was slaughtered so it's dead, that of course after you finish the request you're doing now! Once you feel ready to take it on (and tbh it's pretty easy with mainly basic hover/slide/tab basics if anything), I can totally PM you it (unless you want it posted here. It's not like it's secretive or anything! I feel as if it would be more orderly for me though since there are certain aspects I feel are more specific than others- and there are already 12 replies here for a conversation and it might be more convienent to not spam the thread!)

 

[IctoraPost]

Bro!! I wish you luck with those 400 posts diddly darn, but you got a lot of talent! If you don't mind, maybe you can help me with a character sheet I used to have before the update and BBcode was slaughtered so it's dead, that of course after you finish the request you're doing now! Once you feel ready to take it on (and tbh it's pretty easy with mainly basic hover/slide/tab basics if anything), I can totally PM you it (unless you want it posted here. It's not like it's secretive or anything! I feel as if it would be more orderly for me though since there are certain aspects I feel are more specific than others- and there are already 12 replies here for a conversation and it might be more convienent to not spam the thread!)

Hey, thanks! You can send it to me now, if you want. I like to have my instructions well in advance from when I start doing stuff.

 

[IctoraPost]

Aaand DONE. @punkinblackk

Spoiler

Spoiler





<p style="display: none;">&nbsp;</p>

<style type="text/css">

.gamebackback {
width: 100%;
height: 696px;
position: relative;
background: url(http://www.planwallpaper.com/static/images/518164-backgrounds.jpg) no-repeat; /* background */
background-size: auto 100%;
overflow: hidden;
color: white;
}

/*** LEFT ***/

.gamebackback > div:first-of-type {
position: relative;
width: calc(100% - 500px);
height: 100%;
}

/* Tabs */

.gamebackback > div:first-of-type > input {
display: none;
}

.gamebackback > div:first-of-type > label > div {
width: 100px;
height: calc(100% / 6);
position: relative;
z-index: 2;
text-align: center;
display: table;
}

.gamebackback > div:first-of-type > label > div > span {
font-size: 30px; /* font size of tabs */
display: table-cell;
vertical-align: middle;
font-family: Eczar, serif; /* font of tabs */
}


/* Content Backgrounds */

.gamebackback > div:first-of-type > div {
position: absolute;
width: calc(100% - 100px);
height: calc(100% / 6);
left: calc(-100% + 100px);
-webkit-transition: left 1s ease-in-out 1s, height 1s ease-in-out, top 1s ease-in-out;
transition: left 1s ease-in-out 1s, height 1s ease-in-out, top 1s ease-in-out;
overflow: hidden;
}

.gamebackback > div:first-of-type > input:checked + label + div {
left: 100px;
height: 100%;
top: 0;
-webkit-transition: left 1s ease-in-out, height 1s ease-in-out 1s, top 1s ease-in-out 1s;
transition: left 1s ease-in-out, height 1s ease-in-out 1s, top 1s ease-in-out 1s;
}

.gamebackback > div:first-of-type > div:nth-of-type(1) {
top: calc(0 * 100% / 6);
background: #554455; /* content background color */
}

.gamebackback > div:first-of-type > div:nth-of-type(2) {
top: calc(1 * 100% / 6);
background: #333355;
}

.gamebackback > div:first-of-type > div:nth-of-type(3) {
top: calc(2 * 100% / 6);
background: #eeeeee;
color: black; /* content text color */
}

.gamebackback > div:first-of-type > div:nth-of-type(4) {
top: calc(3 * 100% / 6);
background: #ccbb99;
}

.gamebackback > div:first-of-type > div:nth-of-type(5) {
top: calc(4 * 100% / 6);
background: #bb8877;
}

.gamebackback > div:first-of-type > div:nth-of-type(6) {
top: calc(5 * 100% / 6);
background: #4ED8FD;
color: black;
}

/* Content */

.gamebackback > div:first-of-type > div > div {
text-align: justify; /* can be set to left, right, center or justify */
height: 100%;
width: calc(100% - 50px);
padding: 10px 33.5px 17px 33.5px;
overflow: scroll;
font-family: Eczar, serif; /* font of the content */
}

/*** RIGHT ***/

.gameback {
width: 500px;
height: 700px;
position: absolute;
right: 0;
top: 0;
background-color: rgba(0,0,0,0.4);
font-family: Eczar, serif; /* font of the stuff under the image */
}

/* Image */

.gameback > div:first-of-type {
width: 500px;
height: 500px;
float: right;
overflow: hidden;
}

.gameback > div > img {
width: 100%;
position: relative;
top: -0px; /* use a lower value to reposition image - it's cropped to 500 x 500 */
}

/** Stats **/

.gameback > div:last-of-type {
position: absolute;
height: 200px;
width: 500px;
top: 500px;
right: 0;
}

/* Name */

.gameback > div > h1 {
position: absolute;
left: 40px;
top: 0px;
font-size: 32px; /* font size of name */
}

/* Bars */

.gameback > div > div:first-of-type, .gameback > div > div:nth-of-type(2) {
width: 300px;
height: 30px;
border: solid 3px black;
position: absolute;
right: 150px;
}

.gameback > div > div:first-of-type > div {
width: calc(100% * 2000 / 3000); /* HP bar length - calc(100% * [numerator / denominator]) */
height: 100%;
overflow: hidden;
}

.gameback > div > div:nth-of-type(2) > div {
width: calc(100% * 900 / 2000); /* SP bar length - calc(100% * [numerator / denominator]) */
height: 100%;
overflow: hidden;
}

.gameback > div > div:first-of-type > div > div, .gameback > div > div:nth-of-type(2) > div > div {
width: 300px;
height: 100%;
}

.gameback > div > div:first-of-type > div > div {
background: red;
background: -webkit-linear-gradient(left, firebrick , yellow);
background: -o-linear-gradient(right, firebrick, yellow);
background: -moz-linear-gradient(right, firebrick, yellow);
background: linear-gradient(to right, firebrick , yellow);
}

.gameback > div > div:nth-of-type(2) > div > div {
background: blue;
background: -webkit-linear-gradient(left, darkblue , cyan);
background: -o-linear-gradient(right, darkblue, cyan);
background: -moz-linear-gradient(right, darkblue, cyan);
background: linear-gradient(to right, darkblue , cyan);
}

.gameback > div > div:first-of-type > div > div > div, .gameback > div > div:nth-of-type(2) > div > div > div {
position: absolute;
width: 300px;
height: 100%;
background: transparent;
background: -webkit-linear-gradient(rgba(255,255,255,0.35), rgba(200,200,200,0.2), rgba(0,0,0,0));
background: -o-linear-gradient(rgba(255,255,255,0.35), rgba(200,200,200,0.2), rgba(0,0,0,0));
background: -moz-linear-gradient(rgba(255,255,255,0.35), rgba(200,200,200,0.2), rgba(0,0,0,0));
background: linear-gradient(rgba(255,255,255,0.35), rgba(200,200,200,0.2), rgba(0,0,0,0));
}

/* Bar Names */

.gameback > div > div > div > div > div > span {
font-size: 30px;
line-height: 35px;
padding-left: 5px;
}

/* Level */

.gameback > div > div:nth-of-type(3) {
position: absolute;
right: 80px;
top: 16px;
font-size: 40px; /* font size of Lv. */
text-shadow: 0 0 10px lime, 0 0 10px lime, 0 0 10px lime; /* change the colors to change glow color */
}

.gameback > div > div:nth-of-type(3)::after {
content: '34'; /* level number */
margin-left: 30px;
font-size: 50px; /* font size of level number */
}

/* Bar Numbers */

.gameback > div > h2 {
font-size: 26px; /* font size of bar numbers */
position: absolute;
right: 10px;
}

.gameback > div > h2:first-of-type {
top: 54px;
text-shadow: 0 0 10px red, 0 0 10px red; /* change the colors to change glow color */
}

.gameback > div > h2:last-of-type {
top: 94px;
text-shadow: 0 0 10px blue, 0 0 10px blue; /* change the colors to change glow color */
}

</style>

<link href="https://fonts.googleapis.com/css?family=Eczar" rel="stylesheet"><!-- imported font --><!-- fonts.google.com -->

<div class="gamebackback">
<div>
<input type="radio" id="backtab1" name="backtabs" checked>
<label for="backtab1"><div style="background: #554455;"><!-- tab background color --><span>Items</span></div></label> <!-- tabs (rename-able) -->
<div>
<div>
<span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ipsum id faucibus porttitor. Vestibulum quis lobortis purus. Fusce a gravida enim. Donec eu nunc sit amet orci gravida aliquam. Sed quis ipsum orci. Integer purus orci, porta quis lacus eu, maximus auctor tortor. Fusce semper sit amet sapien eu tincidunt. Vestibulum laoreet pharetra pretium. Aliquam in ornare purus. In hac habitasse platea dictumst. In egestas, nisi et vestibulum lacinia, massa erat molestie urna, in convallis orci mauris non nisl. Praesent eget urna dignissim, cursus quam ac, lacinia dolor. In lorem velit, dapibus sit amet velit a, porta tristique metus. Phasellus iaculis magna a convallis euismod. Nulla sit amet nisl vel lacus pretium rutrum.</p>
<p>Pellentesque non convallis leo. Maecenas nec rutrum massa. Pellentesque vitae quam ut nisl viverra laoreet. Mauris pellentesque nulla non condimentum fringilla. Sed vestibulum ipsum tellus, sed ultrices neque varius sit amet. Praesent commodo orci non neque suscipit rhoncus. Nulla facilisi. Nulla eget turpis eu ligula sodales iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam vel faucibus eros, in faucibus augue. Nunc mattis et eros non aliquet. Suspendisse risus eros, cursus ac sollicitudin sed, laoreet ut mi. Nullam eget auctor lectus, id bibendum mauris. Maecenas eget dignissim nibh. Sed vel justo sed enim ultricies faucibus a vel leo.</p>
<p>Maecenas non semper lorem. Fusce efficitur eget lorem non mollis. Vivamus commodo dapibus sodales. Donec ac arcu sit amet tellus dignissim tincidunt. Pellentesque at condimentum leo, vitae mattis diam. In sit amet magna at libero bibendum consectetur. Aliquam nec neque eros. Nulla id vulputate turpis. Curabitur placerat turpis nec arcu volutpat, at dignissim orci auctor. Ut eu hendrerit nisi, porta dictum dui. Donec sollicitudin faucibus erat et tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum in molestie velit, eu semper justo. Aenean posuere velit at cursus maximus. Etiam ultricies erat sed eleifend mollis.</p>
<!-- be sure to put paragraphs between p tags -->
</span>
</div>
</div>

<input type="radio" id="backtab2" name="backtabs">
<label for="backtab2"><div style="background: #333355;"><span>Skills</span></div></label>
<div>
<div>
<span>
<p>Curabitur scelerisque mollis turpis a interdum. Aenean condimentum sem eu consectetur rhoncus. Vestibulum feugiat auctor mauris, quis eleifend sapien laoreet nec. Mauris sem sem, consectetur sit amet turpis vel, dictum commodo purus. Morbi lacinia enim vitae convallis commodo. Donec pulvinar, ante a finibus imperdiet, magna enim varius odio, vel consectetur justo dolor id velit. Praesent aliquam dolor ut leo dictum ultricies. Fusce justo metus, hendrerit vitae sem vitae, venenatis maximus neque. Phasellus id nulla mi. Cras in auctor tortor. Donec et lectus cursus, imperdiet leo eu, fringilla augue.</p>
<p>Integer ut ex a ante faucibus iaculis. Proin erat tortor, rutrum eu efficitur vel, finibus ac orci. Phasellus rutrum sodales ex, quis suscipit est tristique vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla sapien ac lorem dapibus, id pretium ante aliquet. Pellentesque consequat nibh eget nisi fringilla bibendum. Praesent sed vehicula libero. Etiam sit amet metus dapibus, laoreet magna ut, dictum velit. Pellentesque molestie venenatis sem, at bibendum tellus tincidunt a. Duis eget facilisis justo. Suspendisse at iaculis ligula.</p>
<p>Suspendisse potenti. Nunc nulla metus, imperdiet sed sem sed, ultrices fermentum nulla. Mauris ac mauris tristique, viverra urna nec, tincidunt nisi. Ut efficitur, lectus in tempor dignissim, quam purus rutrum ante, vitae convallis neque velit at ligula. Morbi dignissim varius hendrerit. Nulla gravida metus est, vel posuere tortor facilisis eu. Vivamus aliquam gravida odio. Mauris mollis nisi et quam luctus lacinia.</p>
</span>
</div>
</div>

<input type="radio" id="backtab3" name="backtabs">
<label for="backtab3"><div style="background: #eeeeee; color: black;"><!-- tab background color; tab text color --><span>Equip</span></div></label>
<div>
<div>
<span>
<p>Mauris facilisis ultricies eros sit amet venenatis. Integer pulvinar molestie erat, non aliquam odio. Ut et enim ligula. Pellentesque convallis erat ut augue feugiat mollis. Donec rutrum vitae lorem elementum sagittis. Aliquam accumsan suscipit lectus, eu facilisis nisl tristique ut. Integer placerat nisi eu felis tincidunt condimentum ac non sem. Maecenas ut vulputate odio.</p>
<p>Aenean hendrerit id ante id cursus. Etiam tempus tellus a urna fermentum suscipit. Sed facilisis neque vitae lectus efficitur auctor. Vivamus dictum mauris quis elit iaculis auctor. Sed metus metus, imperdiet facilisis sem eget, pulvinar vehicula lorem. Vivamus luctus purus eget erat suscipit consectetur. Mauris sapien eros, hendrerit vitae pretium a, tincidunt a tortor. Sed non ornare turpis, id tincidunt tortor. Vivamus vitae auctor ligula, et fermentum ex. Duis aliquam lorem ex, nec consectetur risus aliquet ac. Aliquam ac nunc arcu. Nullam malesuada tellus lacus, sed maximus velit suscipit in. Proin interdum elit leo, eget bibendum nisl semper ac. Aenean nec elit vitae dui accumsan varius.</p>
</span>
</div>
</div>

<input type="radio" id="backtab4" name="backtabs">
<label for="backtab4"><div style="background: #ccbb99;"><span>Status</span></div></label>
<div>
<div>
<span>
<p>Etiam ex ante, tincidunt eget sagittis sed, lobortis quis erat. Donec interdum faucibus enim, sed porttitor felis porta sit amet. Cras a est velit. Integer varius odio libero, id sollicitudin purus accumsan et. Mauris sed mi posuere, suscipit erat eget, egestas neque. Phasellus tempor maximus facilisis. In et elit turpis. Nam varius diam vitae tempus vulputate. Pellentesque quis elit velit. In placerat quis libero et hendrerit. Donec semper luctus vehicula. Morbi elementum est vel magna placerat placerat quis vel erat. In vulputate leo eu egestas interdum. Nunc sapien tortor, finibus in consequat ut, placerat id massa.</p>
<p>Nullam rhoncus tincidunt metus, et suscipit ex vulputate nec. Cras tincidunt viverra venenatis. Morbi posuere varius enim eget ultricies. Pellentesque suscipit justo turpis, ut pretium ex sodales quis. Curabitur rutrum, ex sed facilisis sollicitudin, sem enim finibus tellus, vel fringilla leo lorem eget dolor. Mauris aliquet magna id sapien pulvinar, quis maximus tortor iaculis. Integer sed eros sem. Quisque ut nulla purus.</p>
</span>
</div>
</div>

<input type="radio" id="backtab5" name="backtabs">
<label for="backtab5"><div style="background: #bb8877;"><span>Party</span></div></label>
<div>
<div>
<span>
<p>Aliquam auctor velit ac tincidunt luctus. Sed eu dignissim ligula. Sed malesuada nibh nisi, ac convallis ligula viverra egestas. In vitae sodales mi. Nullam auctor consectetur justo eget sagittis. Vivamus magna turpis, iaculis pulvinar orci eget, tempor elementum purus. Aliquam urna sapien, commodo quis ipsum et, egestas aliquam eros. Donec eget orci lacinia felis bibendum pulvinar sit amet vitae ante. Etiam urna lorem, vulputate non nisi eget, lobortis vulputate elit. Duis volutpat ligula ut suscipit blandit. Nulla faucibus augue vel volutpat sagittis. Proin laoreet diam eu nulla viverra lobortis. Aliquam erat volutpat. Fusce rhoncus cursus lorem.</p>
</span>
</div>
</div>

<input type="radio" id="backtab6" name="backtabs">
<label for="backtab6"><div style="background: #4ED8FD; color: black;"><span>Bio</span></div></label>
<div>
<div>
<span>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce consectetur, nunc et gravida lobortis, nisi leo mollis sapien, volutpat ultricies elit est quis sem. Nullam condimentum odio sed odio fermentum, vestibulum tempor lacus condimentum. Aliquam et cursus lorem. Sed in turpis gravida massa luctus pulvinar non nec magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed congue viverra erat, vulputate eleifend leo sodales a. Phasellus turpis tortor, pretium et aliquet in, dictum vitae mi. Fusce quis feugiat nisl, vitae gravida ipsum. In bibendum, leo ut vulputate faucibus, mi turpis hendrerit nibh, id viverra risus est sed velit. Praesent quam ex, lobortis ut accumsan sit amet, venenatis ut elit. Cras sit amet neque tristique augue tempus blandit.</p>
</span>
</div>
</div>

</div>

<div class="gameback">
<div><!--image--><img src="https://myanimelist.cdn-dena.com/s/common/uploaded_files/1459154569-785e76222d73118f78540b545cf67faa.jpeg"></div>
<div>
<h1>Doggydogg</h1>
<div style="top: 80px;"><div><div><div><span>HP</span></div></div></div></div>
<div style="top: 120px;"><div><div><div><span>SP</span></div></div></div></div>
<div>Lv.</div>
<h2>2000/3000</h2> <!-- HP amount -->
<h2>900/2000</h2> <!-- SP amount -->
</div>
</div>
</div>

This took a lot more coding than I expected. If you have any questions or want me to change anything, please don't hesitate to ask.


@Entarriance Looks like I'm free now. You can send me the stuff.

 

[Entarriance]

Aaand DONE. @punkinblackk

Spoiler

View attachment 196370



  Reveal hidden contents






<p style="display: none;">&nbsp;</p>

<style type="text/css">

.gamebackback {
width: 100%;
height: 696px;
position: relative;
background: url(http://www.planwallpaper.com/static/images/518164-backgrounds.jpg) no-repeat; /* background */
background-size: auto 100%;
overflow: hidden;
color: white;
}

/*** LEFT ***/

.gamebackback > div:first-of-type {
position: relative;
width: calc(100% - 500px);
height: 100%;
}

/* Tabs */

.gamebackback > div:first-of-type > input {
display: none;
}

.gamebackback > div:first-of-type > label > div {
width: 100px;
height: calc(100% / 6);
position: relative;
z-index: 2;
text-align: center;
display: table;
}

.gamebackback > div:first-of-type > label > div > span {
font-size: 30px; /* font size of tabs */
display: table-cell;
vertical-align: middle;
font-family: Eczar, serif; /* font of tabs */
}


/* Content Backgrounds */

.gamebackback > div:first-of-type > div {
position: absolute;
width: calc(100% - 100px);
height: calc(100% / 6);
left: calc(-100% + 100px);
-webkit-transition: left 1s ease-in-out 1s, height 1s ease-in-out, top 1s ease-in-out;
transition: left 1s ease-in-out 1s, height 1s ease-in-out, top 1s ease-in-out;
overflow: hidden;
}

.gamebackback > div:first-of-type > input:checked + label + div {
left: 100px;
height: 100%;
top: 0;
-webkit-transition: left 1s ease-in-out, height 1s ease-in-out 1s, top 1s ease-in-out 1s;
transition: left 1s ease-in-out, height 1s ease-in-out 1s, top 1s ease-in-out 1s;
}

.gamebackback > div:first-of-type > div:nth-of-type(1) {
top: calc(0 * 100% / 6);
background: #554455; /* content background color */
}

.gamebackback > div:first-of-type > div:nth-of-type(2) {
top: calc(1 * 100% / 6);
background: #333355;
}

.gamebackback > div:first-of-type > div:nth-of-type(3) {
top: calc(2 * 100% / 6);
background: #eeeeee;
color: black; /* content text color */
}

.gamebackback > div:first-of-type > div:nth-of-type(4) {
top: calc(3 * 100% / 6);
background: #ccbb99;
}

.gamebackback > div:first-of-type > div:nth-of-type(5) {
top: calc(4 * 100% / 6);
background: #bb8877;
}

.gamebackback > div:first-of-type > div:nth-of-type(6) {
top: calc(5 * 100% / 6);
background: #4ED8FD;
color: black;
}

/* Content */

.gamebackback > div:first-of-type > div > div {
text-align: justify; /* can be set to left, right, center or justify */
height: 100%;
width: calc(100% - 50px);
padding: 10px 33.5px 17px 33.5px;
overflow: scroll;
font-family: Eczar, serif; /* font of the content */
}

/*** RIGHT ***/

.gameback {
width: 500px;
height: 700px;
position: absolute;
right: 0;
top: 0;
background-color: rgba(0,0,0,0.4);
font-family: Eczar, serif; /* font of the stuff under the image */
}

/* Image */

.gameback > div:first-of-type {
width: 500px;
height: 500px;
float: right;
overflow: hidden;
}

.gameback > div > img {
width: 100%;
position: relative;
top: -0px; /* use a lower value to reposition image - it's cropped to 500 x 500 */
}

/** Stats **/

.gameback > div:last-of-type {
position: absolute;
height: 200px;
width: 500px;
top: 500px;
right: 0;
}

/* Name */

.gameback > div > h1 {
position: absolute;
left: 40px;
top: 0px;
font-size: 32px; /* font size of name */
}

/* Bars */

.gameback > div > div:first-of-type, .gameback > div > div:nth-of-type(2) {
width: 300px;
height: 30px;
border: solid 3px black;
position: absolute;
right: 150px;
}

.gameback > div > div:first-of-type > div {
width: calc(100% * 2000 / 3000); /* HP bar length - calc(100% * [numerator / denominator]) */
height: 100%;
overflow: hidden;
}

.gameback > div > div:nth-of-type(2) > div {
width: calc(100% * 900 / 2000); /* SP bar length - calc(100% * [numerator / denominator]) */
height: 100%;
overflow: hidden;
}

.gameback > div > div:first-of-type > div > div, .gameback > div > div:nth-of-type(2) > div > div {
width: 300px;
height: 100%;
}

.gameback > div > div:first-of-type > div > div {
background: red;
background: -webkit-linear-gradient(left, firebrick , yellow);
background: -o-linear-gradient(right, firebrick, yellow);
background: -moz-linear-gradient(right, firebrick, yellow);
background: linear-gradient(to right, firebrick , yellow);
}

.gameback > div > div:nth-of-type(2) > div > div {
background: blue;
background: -webkit-linear-gradient(left, darkblue , cyan);
background: -o-linear-gradient(right, darkblue, cyan);
background: -moz-linear-gradient(right, darkblue, cyan);
background: linear-gradient(to right, darkblue , cyan);
}

.gameback > div > div:first-of-type > div > div > div, .gameback > div > div:nth-of-type(2) > div > div > div {
position: absolute;
width: 300px;
height: 100%;
background: transparent;
background: -webkit-linear-gradient(rgba(255,255,255,0.35), rgba(200,200,200,0.2), rgba(0,0,0,0));
background: -o-linear-gradient(rgba(255,255,255,0.35), rgba(200,200,200,0.2), rgba(0,0,0,0));
background: -moz-linear-gradient(rgba(255,255,255,0.35), rgba(200,200,200,0.2), rgba(0,0,0,0));
background: linear-gradient(rgba(255,255,255,0.35), rgba(200,200,200,0.2), rgba(0,0,0,0));
}

/* Bar Names */

.gameback > div > div > div > div > div > span {
font-size: 30px;
line-height: 35px;
padding-left: 5px;
}

/* Level */

.gameback > div > div:nth-of-type(3) {
position: absolute;
right: 80px;
top: 16px;
font-size: 40px; /* font size of Lv. */
text-shadow: 0 0 10px lime, 0 0 10px lime, 0 0 10px lime; /* change the colors to change glow color */
}

.gameback > div > div:nth-of-type(3)::after {
content: '34'; /* level number */
margin-left: 30px;
font-size: 50px; /* font size of level number */
}

/* Bar Numbers */

.gameback > div > h2 {
font-size: 26px; /* font size of bar numbers */
position: absolute;
right: 10px;
}

.gameback > div > h2:first-of-type {
top: 54px;
text-shadow: 0 0 10px red, 0 0 10px red; /* change the colors to change glow color */
}

.gameback > div > h2:last-of-type {
top: 94px;
text-shadow: 0 0 10px blue, 0 0 10px blue; /* change the colors to change glow color */
}

</style>

<link href="https://fonts.googleapis.com/css?family=Eczar" rel="stylesheet"><!-- imported font --><!-- fonts.google.com -->

<div class="gamebackback">
<div>
<input type="radio" id="backtab1" name="backtabs" checked>
<label for="backtab1"><div style="background: #554455;"><!-- tab background color --><span>Items</span></div></label> <!-- tabs (rename-able) -->
<div>
<div>
<span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ipsum id faucibus porttitor. Vestibulum quis lobortis purus. Fusce a gravida enim. Donec eu nunc sit amet orci gravida aliquam. Sed quis ipsum orci. Integer purus orci, porta quis lacus eu, maximus auctor tortor. Fusce semper sit amet sapien eu tincidunt. Vestibulum laoreet pharetra pretium. Aliquam in ornare purus. In hac habitasse platea dictumst. In egestas, nisi et vestibulum lacinia, massa erat molestie urna, in convallis orci mauris non nisl. Praesent eget urna dignissim, cursus quam ac, lacinia dolor. In lorem velit, dapibus sit amet velit a, porta tristique metus. Phasellus iaculis magna a convallis euismod. Nulla sit amet nisl vel lacus pretium rutrum.</p>
<p>Pellentesque non convallis leo. Maecenas nec rutrum massa. Pellentesque vitae quam ut nisl viverra laoreet. Mauris pellentesque nulla non condimentum fringilla. Sed vestibulum ipsum tellus, sed ultrices neque varius sit amet. Praesent commodo orci non neque suscipit rhoncus. Nulla facilisi. Nulla eget turpis eu ligula sodales iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam vel faucibus eros, in faucibus augue. Nunc mattis et eros non aliquet. Suspendisse risus eros, cursus ac sollicitudin sed, laoreet ut mi. Nullam eget auctor lectus, id bibendum mauris. Maecenas eget dignissim nibh. Sed vel justo sed enim ultricies faucibus a vel leo.</p>
<p>Maecenas non semper lorem. Fusce efficitur eget lorem non mollis. Vivamus commodo dapibus sodales. Donec ac arcu sit amet tellus dignissim tincidunt. Pellentesque at condimentum leo, vitae mattis diam. In sit amet magna at libero bibendum consectetur. Aliquam nec neque eros. Nulla id vulputate turpis. Curabitur placerat turpis nec arcu volutpat, at dignissim orci auctor. Ut eu hendrerit nisi, porta dictum dui. Donec sollicitudin faucibus erat et tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum in molestie velit, eu semper justo. Aenean posuere velit at cursus maximus. Etiam ultricies erat sed eleifend mollis.</p>
<!-- be sure to put paragraphs between p tags -->
</span>
</div>
</div>

<input type="radio" id="backtab2" name="backtabs">
<label for="backtab2"><div style="background: #333355;"><span>Skills</span></div></label>
<div>
<div>
<span>
<p>Curabitur scelerisque mollis turpis a interdum. Aenean condimentum sem eu consectetur rhoncus. Vestibulum feugiat auctor mauris, quis eleifend sapien laoreet nec. Mauris sem sem, consectetur sit amet turpis vel, dictum commodo purus. Morbi lacinia enim vitae convallis commodo. Donec pulvinar, ante a finibus imperdiet, magna enim varius odio, vel consectetur justo dolor id velit. Praesent aliquam dolor ut leo dictum ultricies. Fusce justo metus, hendrerit vitae sem vitae, venenatis maximus neque. Phasellus id nulla mi. Cras in auctor tortor. Donec et lectus cursus, imperdiet leo eu, fringilla augue.</p>
<p>Integer ut ex a ante faucibus iaculis. Proin erat tortor, rutrum eu efficitur vel, finibus ac orci. Phasellus rutrum sodales ex, quis suscipit est tristique vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla sapien ac lorem dapibus, id pretium ante aliquet. Pellentesque consequat nibh eget nisi fringilla bibendum. Praesent sed vehicula libero. Etiam sit amet metus dapibus, laoreet magna ut, dictum velit. Pellentesque molestie venenatis sem, at bibendum tellus tincidunt a. Duis eget facilisis justo. Suspendisse at iaculis ligula.</p>
<p>Suspendisse potenti. Nunc nulla metus, imperdiet sed sem sed, ultrices fermentum nulla. Mauris ac mauris tristique, viverra urna nec, tincidunt nisi. Ut efficitur, lectus in tempor dignissim, quam purus rutrum ante, vitae convallis neque velit at ligula. Morbi dignissim varius hendrerit. Nulla gravida metus est, vel posuere tortor facilisis eu. Vivamus aliquam gravida odio. Mauris mollis nisi et quam luctus lacinia.</p>
</span>
</div>
</div>

<input type="radio" id="backtab3" name="backtabs">
<label for="backtab3"><div style="background: #eeeeee; color: black;"><!-- tab background color; tab text color --><span>Equip</span></div></label>
<div>
<div>
<span>
<p>Mauris facilisis ultricies eros sit amet venenatis. Integer pulvinar molestie erat, non aliquam odio. Ut et enim ligula. Pellentesque convallis erat ut augue feugiat mollis. Donec rutrum vitae lorem elementum sagittis. Aliquam accumsan suscipit lectus, eu facilisis nisl tristique ut. Integer placerat nisi eu felis tincidunt condimentum ac non sem. Maecenas ut vulputate odio.</p>
<p>Aenean hendrerit id ante id cursus. Etiam tempus tellus a urna fermentum suscipit. Sed facilisis neque vitae lectus efficitur auctor. Vivamus dictum mauris quis elit iaculis auctor. Sed metus metus, imperdiet facilisis sem eget, pulvinar vehicula lorem. Vivamus luctus purus eget erat suscipit consectetur. Mauris sapien eros, hendrerit vitae pretium a, tincidunt a tortor. Sed non ornare turpis, id tincidunt tortor. Vivamus vitae auctor ligula, et fermentum ex. Duis aliquam lorem ex, nec consectetur risus aliquet ac. Aliquam ac nunc arcu. Nullam malesuada tellus lacus, sed maximus velit suscipit in. Proin interdum elit leo, eget bibendum nisl semper ac. Aenean nec elit vitae dui accumsan varius.</p>
</span>
</div>
</div>

<input type="radio" id="backtab4" name="backtabs">
<label for="backtab4"><div style="background: #ccbb99;"><span>Status</span></div></label>
<div>
<div>
<span>
<p>Etiam ex ante, tincidunt eget sagittis sed, lobortis quis erat. Donec interdum faucibus enim, sed porttitor felis porta sit amet. Cras a est velit. Integer varius odio libero, id sollicitudin purus accumsan et. Mauris sed mi posuere, suscipit erat eget, egestas neque. Phasellus tempor maximus facilisis. In et elit turpis. Nam varius diam vitae tempus vulputate. Pellentesque quis elit velit. In placerat quis libero et hendrerit. Donec semper luctus vehicula. Morbi elementum est vel magna placerat placerat quis vel erat. In vulputate leo eu egestas interdum. Nunc sapien tortor, finibus in consequat ut, placerat id massa.</p>
<p>Nullam rhoncus tincidunt metus, et suscipit ex vulputate nec. Cras tincidunt viverra venenatis. Morbi posuere varius enim eget ultricies. Pellentesque suscipit justo turpis, ut pretium ex sodales quis. Curabitur rutrum, ex sed facilisis sollicitudin, sem enim finibus tellus, vel fringilla leo lorem eget dolor. Mauris aliquet magna id sapien pulvinar, quis maximus tortor iaculis. Integer sed eros sem. Quisque ut nulla purus.</p>
</span>
</div>
</div>

<input type="radio" id="backtab5" name="backtabs">
<label for="backtab5"><div style="background: #bb8877;"><span>Party</span></div></label>
<div>
<div>
<span>
<p>Aliquam auctor velit ac tincidunt luctus. Sed eu dignissim ligula. Sed malesuada nibh nisi, ac convallis ligula viverra egestas. In vitae sodales mi. Nullam auctor consectetur justo eget sagittis. Vivamus magna turpis, iaculis pulvinar orci eget, tempor elementum purus. Aliquam urna sapien, commodo quis ipsum et, egestas aliquam eros. Donec eget orci lacinia felis bibendum pulvinar sit amet vitae ante. Etiam urna lorem, vulputate non nisi eget, lobortis vulputate elit. Duis volutpat ligula ut suscipit blandit. Nulla faucibus augue vel volutpat sagittis. Proin laoreet diam eu nulla viverra lobortis. Aliquam erat volutpat. Fusce rhoncus cursus lorem.</p>
</span>
</div>
</div>

<input type="radio" id="backtab6" name="backtabs">
<label for="backtab6"><div style="background: #4ED8FD; color: black;"><span>Bio</span></div></label>
<div>
<div>
<span>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce consectetur, nunc et gravida lobortis, nisi leo mollis sapien, volutpat ultricies elit est quis sem. Nullam condimentum odio sed odio fermentum, vestibulum tempor lacus condimentum. Aliquam et cursus lorem. Sed in turpis gravida massa luctus pulvinar non nec magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed congue viverra erat, vulputate eleifend leo sodales a. Phasellus turpis tortor, pretium et aliquet in, dictum vitae mi. Fusce quis feugiat nisl, vitae gravida ipsum. In bibendum, leo ut vulputate faucibus, mi turpis hendrerit nibh, id viverra risus est sed velit. Praesent quam ex, lobortis ut accumsan sit amet, venenatis ut elit. Cras sit amet neque tristique augue tempus blandit.</p>
</span>
</div>
</div>

</div>

<div class="gameback">
<div><!--image--><img src="https://myanimelist.cdn-dena.com/s/common/uploaded_files/1459154569-785e76222d73118f78540b545cf67faa.jpeg"></div>
<div>
<h1>Doggydogg</h1>
<div style="top: 80px;"><div><div><div><span>HP</span></div></div></div></div>
<div style="top: 120px;"><div><div><div><span>SP</span></div></div></div></div>
<div>Lv.</div>
<h2>2000/3000</h2> <!-- HP amount -->
<h2>900/2000</h2> <!-- SP amount -->
</div>
</div>
</div>

This took a lot more coding than I expected. If you have any questions or want me to change anything, please don't hesitate to ask.


@Entarriance Looks like I'm free now. You can send me the stuff.

cries that looks so nice you're hella talented, I'm afraid you may have to  wait until after school for me! though ill see if i can punt something in (my motivation died somewhere monday)

 

[Entarriance]

[SIZE=14.666666666666666px]Woohoo, have have a freeblock! Alright, let me get to the point.[/SIZE]


 

[SIZE=14.666666666666666px]So pretty much I have a gang - all in a mafia organization called “The Checkerboard Syndicate”. So hinting at it’s name, I would like it to be in a kind of checker-like (or at least implementing the colours/symbols) format. To be honest, now writing this out, a lot of this is based on much how you think it looks aesthetically pleasing, but hey, have fun![/SIZE]


 

[SIZE=14.666666666666666px]Back on topic, yeah, all of it should have a checker-like format. There are 4 “divisions”, let me just throw in the desc right here: [/SIZE]

Spoiler

[SIZE=13.333333333333332px]Known as the Checkerboard Syndicate, it was a rather well-known branch from a growing mafia group (criminal organization) with underground garrisons scattered in a few cities. The Checkerboard Syndicate contained a variety of methods to "divide and conquer" in comparison to other competing organizations. It was broken into 4 divisons, all maintained by a few head members.[/SIZE]


 

[SIZE=13.333333333333332px]"CHESSMASTERS" were what these head members were called. They didn't hold a specific role, but rather had a proficiency or general experience in each. Their weren't a lot, and they typically served to be the order-givers and strategizers. Other times, it was where most hitmans and assassins were present. People admitted as a Chessmaster usually graduate from one of the other 3 divisions.[/SIZE]


 

[SIZE=13.333333333333332px]"KINGS" focused more on influence and typically creative connections with a variety of people. It was primarily through these secretive social networks where bribes took place, black market auctions, and anything involving a large amount of people and associating oneself. It also focused on covering up any noticed crimes, known as "framing". Able to use the concept of blackmailing to push blame onto someone else, fabricated friendships was what they were best at.[/SIZE]


 

[SIZE=13.333333333333332px]"KNIGHTS" had the least amount of people, next to Chessmasters. They focused on spying and gaining intel, ironical to their title. Next to gaining information on a variety of people, a few typically dabbled along the medical field, serving to be some of the few important doctors of the syndicate. While it started off as purely intel, it also became the branch involving the Red Market, where illegal surgeries and organ trade took place.[/SIZE]


 

[SIZE=13.333333333333332px]"ROOKS" were the most popular group. They, don't particularly have a role, other than to be thugs, goons, and crudely follow orders. It was a rather large and carefree group of people, considered delinquents by the general public. While serving under the Checkerboard Syndicate, Rooks carried their own social system. There were regularly scheduled matches, tournaments, and games among the Rooks. They held there own rankings, where winning matches grants you "Thoroughfare Credits", allowing you to save them to rise in rankings, or spend them on things within the Rooks such as illegal weapons.[/SIZE]


 

[SIZE=14.666666666666666px]Yes, it’s all based around the game chess/checkers, I’m pretty diddly darn cheesy am I. But hopefully you can implement an area individually for each Division - like “oh, if I click on Rooks, I can see XXX and XXX are a part of it.” maybe provide an uneducated swine like me also with the code to add more characters ;w;[/SIZE]


 

[SIZE=14.666666666666666px]But yeah, you have opening slide with some cheesy header group photo and the “Known as the Checkerboard Syndicate” paragraph, 4 divisions to click on, and characters in the divisions, to learn info on.[/SIZE]


 

[SIZE=14.666666666666666px]So to the actual character-sheety part of it! Obviously you need a placeholder image for images, and hopefully include tabs/buttons for:[/SIZE]


 

[SIZE=14.666666666666666px]-General[/SIZE]


[SIZE=14.666666666666666px]-Personality[/SIZE]


[SIZE=14.666666666666666px]-Background[/SIZE]


[SIZE=14.666666666666666px]-Statistics / Arms[/SIZE]


[SIZE=14.666666666666666px]-Trivia[/SIZE]


 

[SIZE=14.666666666666666px]The main ones I’m going to be focusing on are, well, main characters! (Shameless adv: [/SIZE][SIZE=14.666666666666666px]https://www.rpnation.com/topic/210073-oodles-of-doodles/?page=1[/SIZE][SIZE=14.666666666666666px]) cry at my weeby ass art on my art thread for the main group I’m talking about! [/SIZE]


 

[SIZE=14.666666666666666px]Wow, writing this in about like 15 minutes in I realized how vaguely… [/SIZE][SIZE=14.666666666666666px]vague[/SIZE][SIZE=14.666666666666666px] I am about this. Sorry about that! But a lot of this should be some fun aesthetic free-handing! So sorry that this seems kind of repetitively thrown together, if you have any questions I’m free to answer. [/SIZE]


(bleh hopefully this was understandable. Happy coding!)

 

[Nano]

Omg this is like coding goals.


Those accordions (or do they count as tabs > .>;;; ) are super neato.


Gl with meeting the post count requirement!

 

[punkinblackk]

Aaand DONE. @punkinblackk

Spoiler

View attachment 196370



  Reveal hidden contents






<p style="display: none;">&nbsp;</p>

<style type="text/css">

.gamebackback {
width: 100%;
height: 696px;
position: relative;
background: url(http://www.planwallpaper.com/static/images/518164-backgrounds.jpg) no-repeat; /* background */
background-size: auto 100%;
overflow: hidden;
color: white;
}

/*** LEFT ***/

.gamebackback > div:first-of-type {
position: relative;
width: calc(100% - 500px);
height: 100%;
}

/* Tabs */

.gamebackback > div:first-of-type > input {
display: none;
}

.gamebackback > div:first-of-type > label > div {
width: 100px;
height: calc(100% / 6);
position: relative;
z-index: 2;
text-align: center;
display: table;
}

.gamebackback > div:first-of-type > label > div > span {
font-size: 30px; /* font size of tabs */
display: table-cell;
vertical-align: middle;
font-family: Eczar, serif; /* font of tabs */
}


/* Content Backgrounds */

.gamebackback > div:first-of-type > div {
position: absolute;
width: calc(100% - 100px);
height: calc(100% / 6);
left: calc(-100% + 100px);
-webkit-transition: left 1s ease-in-out 1s, height 1s ease-in-out, top 1s ease-in-out;
transition: left 1s ease-in-out 1s, height 1s ease-in-out, top 1s ease-in-out;
overflow: hidden;
}

.gamebackback > div:first-of-type > input:checked + label + div {
left: 100px;
height: 100%;
top: 0;
-webkit-transition: left 1s ease-in-out, height 1s ease-in-out 1s, top 1s ease-in-out 1s;
transition: left 1s ease-in-out, height 1s ease-in-out 1s, top 1s ease-in-out 1s;
}

.gamebackback > div:first-of-type > div:nth-of-type(1) {
top: calc(0 * 100% / 6);
background: #554455; /* content background color */
}

.gamebackback > div:first-of-type > div:nth-of-type(2) {
top: calc(1 * 100% / 6);
background: #333355;
}

.gamebackback > div:first-of-type > div:nth-of-type(3) {
top: calc(2 * 100% / 6);
background: #eeeeee;
color: black; /* content text color */
}

.gamebackback > div:first-of-type > div:nth-of-type(4) {
top: calc(3 * 100% / 6);
background: #ccbb99;
}

.gamebackback > div:first-of-type > div:nth-of-type(5) {
top: calc(4 * 100% / 6);
background: #bb8877;
}

.gamebackback > div:first-of-type > div:nth-of-type(6) {
top: calc(5 * 100% / 6);
background: #4ED8FD;
color: black;
}

/* Content */

.gamebackback > div:first-of-type > div > div {
text-align: justify; /* can be set to left, right, center or justify */
height: 100%;
width: calc(100% - 50px);
padding: 10px 33.5px 17px 33.5px;
overflow: scroll;
font-family: Eczar, serif; /* font of the content */
}

/*** RIGHT ***/

.gameback {
width: 500px;
height: 700px;
position: absolute;
right: 0;
top: 0;
background-color: rgba(0,0,0,0.4);
font-family: Eczar, serif; /* font of the stuff under the image */
}

/* Image */

.gameback > div:first-of-type {
width: 500px;
height: 500px;
float: right;
overflow: hidden;
}

.gameback > div > img {
width: 100%;
position: relative;
top: -0px; /* use a lower value to reposition image - it's cropped to 500 x 500 */
}

/** Stats **/

.gameback > div:last-of-type {
position: absolute;
height: 200px;
width: 500px;
top: 500px;
right: 0;
}

/* Name */

.gameback > div > h1 {
position: absolute;
left: 40px;
top: 0px;
font-size: 32px; /* font size of name */
}

/* Bars */

.gameback > div > div:first-of-type, .gameback > div > div:nth-of-type(2) {
width: 300px;
height: 30px;
border: solid 3px black;
position: absolute;
right: 150px;
}

.gameback > div > div:first-of-type > div {
width: calc(100% * 2000 / 3000); /* HP bar length - calc(100% * [numerator / denominator]) */
height: 100%;
overflow: hidden;
}

.gameback > div > div:nth-of-type(2) > div {
width: calc(100% * 900 / 2000); /* SP bar length - calc(100% * [numerator / denominator]) */
height: 100%;
overflow: hidden;
}

.gameback > div > div:first-of-type > div > div, .gameback > div > div:nth-of-type(2) > div > div {
width: 300px;
height: 100%;
}

.gameback > div > div:first-of-type > div > div {
background: red;
background: -webkit-linear-gradient(left, firebrick , yellow);
background: -o-linear-gradient(right, firebrick, yellow);
background: -moz-linear-gradient(right, firebrick, yellow);
background: linear-gradient(to right, firebrick , yellow);
}

.gameback > div > div:nth-of-type(2) > div > div {
background: blue;
background: -webkit-linear-gradient(left, darkblue , cyan);
background: -o-linear-gradient(right, darkblue, cyan);
background: -moz-linear-gradient(right, darkblue, cyan);
background: linear-gradient(to right, darkblue , cyan);
}

.gameback > div > div:first-of-type > div > div > div, .gameback > div > div:nth-of-type(2) > div > div > div {
position: absolute;
width: 300px;
height: 100%;
background: transparent;
background: -webkit-linear-gradient(rgba(255,255,255,0.35), rgba(200,200,200,0.2), rgba(0,0,0,0));
background: -o-linear-gradient(rgba(255,255,255,0.35), rgba(200,200,200,0.2), rgba(0,0,0,0));
background: -moz-linear-gradient(rgba(255,255,255,0.35), rgba(200,200,200,0.2), rgba(0,0,0,0));
background: linear-gradient(rgba(255,255,255,0.35), rgba(200,200,200,0.2), rgba(0,0,0,0));
}

/* Bar Names */

.gameback > div > div > div > div > div > span {
font-size: 30px;
line-height: 35px;
padding-left: 5px;
}

/* Level */

.gameback > div > div:nth-of-type(3) {
position: absolute;
right: 80px;
top: 16px;
font-size: 40px; /* font size of Lv. */
text-shadow: 0 0 10px lime, 0 0 10px lime, 0 0 10px lime; /* change the colors to change glow color */
}

.gameback > div > div:nth-of-type(3)::after {
content: '34'; /* level number */
margin-left: 30px;
font-size: 50px; /* font size of level number */
}

/* Bar Numbers */

.gameback > div > h2 {
font-size: 26px; /* font size of bar numbers */
position: absolute;
right: 10px;
}

.gameback > div > h2:first-of-type {
top: 54px;
text-shadow: 0 0 10px red, 0 0 10px red; /* change the colors to change glow color */
}

.gameback > div > h2:last-of-type {
top: 94px;
text-shadow: 0 0 10px blue, 0 0 10px blue; /* change the colors to change glow color */
}

</style>

<link href="https://fonts.googleapis.com/css?family=Eczar" rel="stylesheet"><!-- imported font --><!-- fonts.google.com -->

<div class="gamebackback">
<div>
<input type="radio" id="backtab1" name="backtabs" checked>
<label for="backtab1"><div style="background: #554455;"><!-- tab background color --><span>Items</span></div></label> <!-- tabs (rename-able) -->
<div>
<div>
<span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ipsum id faucibus porttitor. Vestibulum quis lobortis purus. Fusce a gravida enim. Donec eu nunc sit amet orci gravida aliquam. Sed quis ipsum orci. Integer purus orci, porta quis lacus eu, maximus auctor tortor. Fusce semper sit amet sapien eu tincidunt. Vestibulum laoreet pharetra pretium. Aliquam in ornare purus. In hac habitasse platea dictumst. In egestas, nisi et vestibulum lacinia, massa erat molestie urna, in convallis orci mauris non nisl. Praesent eget urna dignissim, cursus quam ac, lacinia dolor. In lorem velit, dapibus sit amet velit a, porta tristique metus. Phasellus iaculis magna a convallis euismod. Nulla sit amet nisl vel lacus pretium rutrum.</p>
<p>Pellentesque non convallis leo. Maecenas nec rutrum massa. Pellentesque vitae quam ut nisl viverra laoreet. Mauris pellentesque nulla non condimentum fringilla. Sed vestibulum ipsum tellus, sed ultrices neque varius sit amet. Praesent commodo orci non neque suscipit rhoncus. Nulla facilisi. Nulla eget turpis eu ligula sodales iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam vel faucibus eros, in faucibus augue. Nunc mattis et eros non aliquet. Suspendisse risus eros, cursus ac sollicitudin sed, laoreet ut mi. Nullam eget auctor lectus, id bibendum mauris. Maecenas eget dignissim nibh. Sed vel justo sed enim ultricies faucibus a vel leo.</p>
<p>Maecenas non semper lorem. Fusce efficitur eget lorem non mollis. Vivamus commodo dapibus sodales. Donec ac arcu sit amet tellus dignissim tincidunt. Pellentesque at condimentum leo, vitae mattis diam. In sit amet magna at libero bibendum consectetur. Aliquam nec neque eros. Nulla id vulputate turpis. Curabitur placerat turpis nec arcu volutpat, at dignissim orci auctor. Ut eu hendrerit nisi, porta dictum dui. Donec sollicitudin faucibus erat et tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum in molestie velit, eu semper justo. Aenean posuere velit at cursus maximus. Etiam ultricies erat sed eleifend mollis.</p>
<!-- be sure to put paragraphs between p tags -->
</span>
</div>
</div>

<input type="radio" id="backtab2" name="backtabs">
<label for="backtab2"><div style="background: #333355;"><span>Skills</span></div></label>
<div>
<div>
<span>
<p>Curabitur scelerisque mollis turpis a interdum. Aenean condimentum sem eu consectetur rhoncus. Vestibulum feugiat auctor mauris, quis eleifend sapien laoreet nec. Mauris sem sem, consectetur sit amet turpis vel, dictum commodo purus. Morbi lacinia enim vitae convallis commodo. Donec pulvinar, ante a finibus imperdiet, magna enim varius odio, vel consectetur justo dolor id velit. Praesent aliquam dolor ut leo dictum ultricies. Fusce justo metus, hendrerit vitae sem vitae, venenatis maximus neque. Phasellus id nulla mi. Cras in auctor tortor. Donec et lectus cursus, imperdiet leo eu, fringilla augue.</p>
<p>Integer ut ex a ante faucibus iaculis. Proin erat tortor, rutrum eu efficitur vel, finibus ac orci. Phasellus rutrum sodales ex, quis suscipit est tristique vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fringilla sapien ac lorem dapibus, id pretium ante aliquet. Pellentesque consequat nibh eget nisi fringilla bibendum. Praesent sed vehicula libero. Etiam sit amet metus dapibus, laoreet magna ut, dictum velit. Pellentesque molestie venenatis sem, at bibendum tellus tincidunt a. Duis eget facilisis justo. Suspendisse at iaculis ligula.</p>
<p>Suspendisse potenti. Nunc nulla metus, imperdiet sed sem sed, ultrices fermentum nulla. Mauris ac mauris tristique, viverra urna nec, tincidunt nisi. Ut efficitur, lectus in tempor dignissim, quam purus rutrum ante, vitae convallis neque velit at ligula. Morbi dignissim varius hendrerit. Nulla gravida metus est, vel posuere tortor facilisis eu. Vivamus aliquam gravida odio. Mauris mollis nisi et quam luctus lacinia.</p>
</span>
</div>
</div>

<input type="radio" id="backtab3" name="backtabs">
<label for="backtab3"><div style="background: #eeeeee; color: black;"><!-- tab background color; tab text color --><span>Equip</span></div></label>
<div>
<div>
<span>
<p>Mauris facilisis ultricies eros sit amet venenatis. Integer pulvinar molestie erat, non aliquam odio. Ut et enim ligula. Pellentesque convallis erat ut augue feugiat mollis. Donec rutrum vitae lorem elementum sagittis. Aliquam accumsan suscipit lectus, eu facilisis nisl tristique ut. Integer placerat nisi eu felis tincidunt condimentum ac non sem. Maecenas ut vulputate odio.</p>
<p>Aenean hendrerit id ante id cursus. Etiam tempus tellus a urna fermentum suscipit. Sed facilisis neque vitae lectus efficitur auctor. Vivamus dictum mauris quis elit iaculis auctor. Sed metus metus, imperdiet facilisis sem eget, pulvinar vehicula lorem. Vivamus luctus purus eget erat suscipit consectetur. Mauris sapien eros, hendrerit vitae pretium a, tincidunt a tortor. Sed non ornare turpis, id tincidunt tortor. Vivamus vitae auctor ligula, et fermentum ex. Duis aliquam lorem ex, nec consectetur risus aliquet ac. Aliquam ac nunc arcu. Nullam malesuada tellus lacus, sed maximus velit suscipit in. Proin interdum elit leo, eget bibendum nisl semper ac. Aenean nec elit vitae dui accumsan varius.</p>
</span>
</div>
</div>

<input type="radio" id="backtab4" name="backtabs">
<label for="backtab4"><div style="background: #ccbb99;"><span>Status</span></div></label>
<div>
<div>
<span>
<p>Etiam ex ante, tincidunt eget sagittis sed, lobortis quis erat. Donec interdum faucibus enim, sed porttitor felis porta sit amet. Cras a est velit. Integer varius odio libero, id sollicitudin purus accumsan et. Mauris sed mi posuere, suscipit erat eget, egestas neque. Phasellus tempor maximus facilisis. In et elit turpis. Nam varius diam vitae tempus vulputate. Pellentesque quis elit velit. In placerat quis libero et hendrerit. Donec semper luctus vehicula. Morbi elementum est vel magna placerat placerat quis vel erat. In vulputate leo eu egestas interdum. Nunc sapien tortor, finibus in consequat ut, placerat id massa.</p>
<p>Nullam rhoncus tincidunt metus, et suscipit ex vulputate nec. Cras tincidunt viverra venenatis. Morbi posuere varius enim eget ultricies. Pellentesque suscipit justo turpis, ut pretium ex sodales quis. Curabitur rutrum, ex sed facilisis sollicitudin, sem enim finibus tellus, vel fringilla leo lorem eget dolor. Mauris aliquet magna id sapien pulvinar, quis maximus tortor iaculis. Integer sed eros sem. Quisque ut nulla purus.</p>
</span>
</div>
</div>

<input type="radio" id="backtab5" name="backtabs">
<label for="backtab5"><div style="background: #bb8877;"><span>Party</span></div></label>
<div>
<div>
<span>
<p>Aliquam auctor velit ac tincidunt luctus. Sed eu dignissim ligula. Sed malesuada nibh nisi, ac convallis ligula viverra egestas. In vitae sodales mi. Nullam auctor consectetur justo eget sagittis. Vivamus magna turpis, iaculis pulvinar orci eget, tempor elementum purus. Aliquam urna sapien, commodo quis ipsum et, egestas aliquam eros. Donec eget orci lacinia felis bibendum pulvinar sit amet vitae ante. Etiam urna lorem, vulputate non nisi eget, lobortis vulputate elit. Duis volutpat ligula ut suscipit blandit. Nulla faucibus augue vel volutpat sagittis. Proin laoreet diam eu nulla viverra lobortis. Aliquam erat volutpat. Fusce rhoncus cursus lorem.</p>
</span>
</div>
</div>

<input type="radio" id="backtab6" name="backtabs">
<label for="backtab6"><div style="background: #4ED8FD; color: black;"><span>Bio</span></div></label>
<div>
<div>
<span>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce consectetur, nunc et gravida lobortis, nisi leo mollis sapien, volutpat ultricies elit est quis sem. Nullam condimentum odio sed odio fermentum, vestibulum tempor lacus condimentum. Aliquam et cursus lorem. Sed in turpis gravida massa luctus pulvinar non nec magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed congue viverra erat, vulputate eleifend leo sodales a. Phasellus turpis tortor, pretium et aliquet in, dictum vitae mi. Fusce quis feugiat nisl, vitae gravida ipsum. In bibendum, leo ut vulputate faucibus, mi turpis hendrerit nibh, id viverra risus est sed velit. Praesent quam ex, lobortis ut accumsan sit amet, venenatis ut elit. Cras sit amet neque tristique augue tempus blandit.</p>
</span>
</div>
</div>

</div>

<div class="gameback">
<div><!--image--><img src="https://myanimelist.cdn-dena.com/s/common/uploaded_files/1459154569-785e76222d73118f78540b545cf67faa.jpeg"></div>
<div>
<h1>Doggydogg</h1>
<div style="top: 80px;"><div><div><div><span>HP</span></div></div></div></div>
<div style="top: 120px;"><div><div><div><span>SP</span></div></div></div></div>
<div>Lv.</div>
<h2>2000/3000</h2> <!-- HP amount -->
<h2>900/2000</h2> <!-- SP amount -->
</div>
</div>
</div>

This took a lot more coding than I expected. If you have any questions or want me to change anything, please don't hesitate to ask.


@Entarriance Looks like I'm free now. You can send me the stuff.

This is the most amazing thing I have ever seen. You have my eternal gratitude. 

 

[IctoraPost]

Omg this is like coding goals.


Those accordions (or do they count as tabs > .>;;; ) are super neato.


Gl with meeting the post count requirement!

Thanks! I really like your coding too.

This is the most amazing thing I have ever seen. You have my eternal gratitude. 

Glad you like it!

Spoiler

[SIZE=14.666666666666666px]Woohoo, have have a freeblock! Alright, let me get to the point.[/SIZE]


 

[SIZE=14.666666666666666px]So pretty much I have a gang - all in a mafia organization called “The Checkerboard Syndicate”. So hinting at it’s name, I would like it to be in a kind of checker-like (or at least implementing the colours/symbols) format. To be honest, now writing this out, a lot of this is based on much how you think it looks aesthetically pleasing, but hey, have fun![/SIZE]


 

[SIZE=14.666666666666666px]Back on topic, yeah, all of it should have a checker-like format. There are 4 “divisions”, let me just throw in the desc right here: [/SIZE]



  Reveal hidden contents

[SIZE=13.333333333333332px]Known as the Checkerboard Syndicate, it was a rather well-known branch from a growing mafia group (criminal organization) with underground garrisons scattered in a few cities. The Checkerboard Syndicate contained a variety of methods to "divide and conquer" in comparison to other competing organizations. It was broken into 4 divisons, all maintained by a few head members.[/SIZE]


 

[SIZE=13.333333333333332px]"CHESSMASTERS" were what these head members were called. They didn't hold a specific role, but rather had a proficiency or general experience in each. Their weren't a lot, and they typically served to be the order-givers and strategizers. Other times, it was where most hitmans and assassins were present. People admitted as a Chessmaster usually graduate from one of the other 3 divisions.[/SIZE]


 

[SIZE=13.333333333333332px]"KINGS" focused more on influence and typically creative connections with a variety of people. It was primarily through these secretive social networks where bribes took place, black market auctions, and anything involving a large amount of people and associating oneself. It also focused on covering up any noticed crimes, known as "framing". Able to use the concept of blackmailing to push blame onto someone else, fabricated friendships was what they were best at.[/SIZE]


 

[SIZE=13.333333333333332px]"KNIGHTS" had the least amount of people, next to Chessmasters. They focused on spying and gaining intel, ironical to their title. Next to gaining information on a variety of people, a few typically dabbled along the medical field, serving to be some of the few important doctors of the syndicate. While it started off as purely intel, it also became the branch involving the Red Market, where illegal surgeries and organ trade took place.[/SIZE]


 

[SIZE=13.333333333333332px]"ROOKS" were the most popular group. They, don't particularly have a role, other than to be thugs, goons, and crudely follow orders. It was a rather large and carefree group of people, considered delinquents by the general public. While serving under the Checkerboard Syndicate, Rooks carried their own social system. There were regularly scheduled matches, tournaments, and games among the Rooks. They held there own rankings, where winning matches grants you "Thoroughfare Credits", allowing you to save them to rise in rankings, or spend them on things within the Rooks such as illegal weapons.[/SIZE]


 

[SIZE=14.666666666666666px]Yes, it’s all based around the game chess/checkers, I’m pretty diddly darn cheesy am I. But hopefully you can implement an area individually for each Division - like “oh, if I click on Rooks, I can see XXX and XXX are a part of it.” maybe provide an uneducated swine like me also with the code to add more characters ;w;[/SIZE]


 

[SIZE=14.666666666666666px]But yeah, you have opening slide with some cheesy header group photo and the “Known as the Checkerboard Syndicate” paragraph, 4 divisions to click on, and characters in the divisions, to learn info on.[/SIZE]


 

[SIZE=14.666666666666666px]So to the actual character-sheety part of it! Obviously you need a placeholder image for images, and hopefully include tabs/buttons for:[/SIZE]


 

[SIZE=14.666666666666666px]-General[/SIZE]


[SIZE=14.666666666666666px]-Personality[/SIZE]


[SIZE=14.666666666666666px]-Background[/SIZE]


[SIZE=14.666666666666666px]-Statistics / Arms[/SIZE]


[SIZE=14.666666666666666px]-Trivia[/SIZE]


 

[SIZE=14.666666666666666px]The main ones I’m going to be focusing on are, well, main characters! (Shameless adv: [/SIZE][SIZE=14.666666666666666px]https://www.rpnation.com/topic/210073-oodles-of-doodles/?page=1[/SIZE][SIZE=14.666666666666666px]) cry at my weeby ass art on my art thread for the main group I’m talking about! [/SIZE]


 

[SIZE=14.666666666666666px]Wow, writing this in about like 15 minutes in I realized how vaguely… [/SIZE][SIZE=14.666666666666666px]vague[/SIZE][SIZE=14.666666666666666px] I am about this. Sorry about that! But a lot of this should be some fun aesthetic free-handing! So sorry that this seems kind of repetitively thrown together, if you have any questions I’m free to answer. [/SIZE]


(bleh hopefully this was understandable. Happy coding!)





Wow. Very comprehensive. And very good drawings! Do you want the introductary paragraphs in there as well?


I'd like to try to get it done soon, but unfortunately I'll be a bit busy for the next week or so. Hope you don't mind the wait.

 

[Entarriance]

Thanks! I really like your coding too.


Glad you like it!

Spoiler

[SIZE=14.666666666666666px]Woohoo, have have a freeblock! Alright, let me get to the point.[/SIZE]


 

[SIZE=14.666666666666666px]So pretty much I have a gang - all in a mafia organization called “The Checkerboard Syndicate”. So hinting at it’s name, I would like it to be in a kind of checker-like (or at least implementing the colours/symbols) format. To be honest, now writing this out, a lot of this is based on much how you think it looks aesthetically pleasing, but hey, have fun![/SIZE]


 

[SIZE=14.666666666666666px]Back on topic, yeah, all of it should have a checker-like format. There are 4 “divisions”, let me just throw in the desc right here: [/SIZE]



  Reveal hidden contents

[SIZE=13.333333333333332px]Known as the Checkerboard Syndicate, it was a rather well-known branch from a growing mafia group (criminal organization) with underground garrisons scattered in a few cities. The Checkerboard Syndicate contained a variety of methods to "divide and conquer" in comparison to other competing organizations. It was broken into 4 divisons, all maintained by a few head members.[/SIZE]


 

[SIZE=13.333333333333332px]"CHESSMASTERS" were what these head members were called. They didn't hold a specific role, but rather had a proficiency or general experience in each. Their weren't a lot, and they typically served to be the order-givers and strategizers. Other times, it was where most hitmans and assassins were present. People admitted as a Chessmaster usually graduate from one of the other 3 divisions.[/SIZE]


 

[SIZE=13.333333333333332px]"KINGS" focused more on influence and typically creative connections with a variety of people. It was primarily through these secretive social networks where bribes took place, black market auctions, and anything involving a large amount of people and associating oneself. It also focused on covering up any noticed crimes, known as "framing". Able to use the concept of blackmailing to push blame onto someone else, fabricated friendships was what they were best at.[/SIZE]


 

[SIZE=13.333333333333332px]"KNIGHTS" had the least amount of people, next to Chessmasters. They focused on spying and gaining intel, ironical to their title. Next to gaining information on a variety of people, a few typically dabbled along the medical field, serving to be some of the few important doctors of the syndicate. While it started off as purely intel, it also became the branch involving the Red Market, where illegal surgeries and organ trade took place.[/SIZE]


 

[SIZE=13.333333333333332px]"ROOKS" were the most popular group. They, don't particularly have a role, other than to be thugs, goons, and crudely follow orders. It was a rather large and carefree group of people, considered delinquents by the general public. While serving under the Checkerboard Syndicate, Rooks carried their own social system. There were regularly scheduled matches, tournaments, and games among the Rooks. They held there own rankings, where winning matches grants you "Thoroughfare Credits", allowing you to save them to rise in rankings, or spend them on things within the Rooks such as illegal weapons.[/SIZE]


 

[SIZE=14.666666666666666px]Yes, it’s all based around the game chess/checkers, I’m pretty diddly darn cheesy am I. But hopefully you can implement an area individually for each Division - like “oh, if I click on Rooks, I can see XXX and XXX are a part of it.” maybe provide an uneducated swine like me also with the code to add more characters ;w;[/SIZE]


 

[SIZE=14.666666666666666px]But yeah, you have opening slide with some cheesy header group photo and the “Known as the Checkerboard Syndicate” paragraph, 4 divisions to click on, and characters in the divisions, to learn info on.[/SIZE]


 

[SIZE=14.666666666666666px]So to the actual character-sheety part of it! Obviously you need a placeholder image for images, and hopefully include tabs/buttons for:[/SIZE]


 

[SIZE=14.666666666666666px]-General[/SIZE]


[SIZE=14.666666666666666px]-Personality[/SIZE]


[SIZE=14.666666666666666px]-Background[/SIZE]


[SIZE=14.666666666666666px]-Statistics / Arms[/SIZE]


[SIZE=14.666666666666666px]-Trivia[/SIZE]


 

[SIZE=14.666666666666666px]The main ones I’m going to be focusing on are, well, main characters! (Shameless adv: [/SIZE][SIZE=14.666666666666666px]https://www.rpnation.com/topic/210073-oodles-of-doodles/?page=1[/SIZE][SIZE=14.666666666666666px]) cry at my weeby ass art on my art thread for the main group I’m talking about! [/SIZE]


 

[SIZE=14.666666666666666px]Wow, writing this in about like 15 minutes in I realized how vaguely… [/SIZE][SIZE=14.666666666666666px]vague[/SIZE][SIZE=14.666666666666666px] I am about this. Sorry about that! But a lot of this should be some fun aesthetic free-handing! So sorry that this seems kind of repetitively thrown together, if you have any questions I’m free to answer. [/SIZE]


(bleh hopefully this was understandable. Happy coding!)





Wow. Very comprehensive. And very good drawings! Do you want the introductary paragraphs in there as well?


I'd like to try to get it done soon, but unfortunately I'll be a bit busy for the next week or so. Hope you don't mind the wait.

nah no rush my guy take your time you could give it to me like 5 months later and i'd be completley chill with it


And if it's easier to work with, go for it. legit copy paste it no need 4 fancy words - as long as it's ((really overused images arranged in the word "aesthetically" )) pleasing! Regardless you can code a boot and I'd worship it, you'll do fantastic!

 

[IctoraPost]

nah no rush my guy take your time you could give it to me like 5 months later and i'd be completley chill with it


And if it's easier to work with, go for it. legit copy paste it no need 4 fancy words - as long as it's ((really overused images arranged in the word "aesthetically" )) pleasing! Regardless you can code a boot and I'd worship it, you'll do fantastic!

I'll do that. "Aesthetics" isn't really my strong point - I'm better at fancy animations that trick people into thinking my stuff is good. But I'll try my best.


And creating a boot in HTML is quite hard, actually.

 

[IctoraPost]

I've only just realised that I could just put the HTML code online and link it from here.


So here's my example one.


And here's the one I made for @punkinblackk (you may have to resize it a little).

 

[TrippyVirus]

Hey! I see you're good at HTML, Can you do one for me?


And can you do my brother's math homework?, I'm too lazy and stressed to do it right now.