HTML, or anything else [Currently not accepting requests]

IctoraPost · Nov 3, 2016

TrippyVirus said:
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.

Sure. What kind of thing do you want?

Why are you doing your brother's math homework anyways?

TrippyVirus · Nov 3, 2016

IctoraPost said:
Sure. What kind of thing do you want?

Why are you doing your brother's math homework anyways?

Kinda like a 1x1 search that is simpler to navigate like tabs and such.

Cause he is also lazy. Jesus, I think all of us are lazy.

IctoraPost · Nov 3, 2016

TrippyVirus said:
Kinda like a 1x1 search that is simpler to navigate like tabs and such.

Cause he is also lazy. Jesus, I think all of us are lazy.

I have basically no knowledge of 1x1. Is that just a list of stuff you want to RP on?

Then just force him to do it.

TrippyVirus · Nov 3, 2016

IctoraPost said:
I have basically no knowledge of 1x1. Is that just a list of stuff you want to RP on?

Then just force him to do it.

Basically, yes. Its just things to RP on.

IctoraPost · Nov 3, 2016

TrippyVirus said:
Basically, yes. Its just things to RP on.

Any specifics that you want?

TrippyVirus · Nov 3, 2016

Well, white and blue for everything, a space on the top for a paragraph, and that is it.

IctoraPost · Nov 3, 2016

So, something like this?

TrippyVirus · Nov 3, 2016

IctoraPost said:
So, something like this?

View attachment 198114

Yep, and what beautiful drawing you have!

IctoraPost · Nov 3, 2016

TrippyVirus said:
Yep, and what beautiful drawing you have!

Why, thank you. I'll get onto it when I finish my other request.

IctoraPost · Nov 12, 2016

FINALLY FINISHED. That took waay longer than it should have. @Entarriance

View attachment 202881

Link

Code:

Spoiler

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

<style type="text/css">

.ictora3 {
position: relative;
max-width: 768px;
margin: 0 auto;
font-family: Eczar, serif; /* Font for content */
font-size: 100%;
}

.ictora3 img {
border: 0px;
}

/* Heading */

.ictora3 > div:first-of-type {
width: 100%;
height: auto;
background-color: black;
background-size: 96px 96px;
background-position: 0 0, 48px 48px;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, white 25%, white 75%, black 75%, black);
position: relative;
text-align: center;
}

.ictora3 > div:first-of-type > span {
font-size: 4.5em;
color: black;
text-shadow: -0.0625em 0.025em white, 0.0625em -0.025em white, -0.08750em 0.0375em 0.025em black;
font-family: Libre Baskerville, serif; /* Font for title */
}

.ictora3 > img {
height: auto;
width: 100%;
}

/* Paragraph */

.ictora3 > article {
position: relative;
width: 100%;
height: 50px;
background-image: linear-gradient(transparent, #1c1c1c);
margin-top: -60px;
}

.ictora3 > div:nth-of-type(2) {
position: relative;
width: 100%;
height: auto;
padding: 5px 0 5px 0;
background-color: #1c1c1c;
text-align: center;
margin-top: -10px;
}

.ictora3 > div:nth-of-type(2) > p {
padding: 15px;
color: white;
}

/* Squares */

.ictora3 > div:nth-of-type(3) {
position: relative;
width: 100%;
padding-top: 100%;
}

.ictora3 > div:nth-of-type(3) > div {
position: absolute;
width: 50%;
height: 50%;
overflow: hidden;
z-index: 0;
-webkit-transition: 0.5s 0.3s, z-index 0s;
transition: 0.5s 0.3s, z-index 0s;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-last-of-type(1), .ictora3 > div:nth-of-type(3) > div > div:nth-last-of-type(2) {
position: absolute;
width: 50%;
height: 100%;
overflow: hidden;
background: black;
z-index: 4;
-webkit-transition: 0.3s;
transition: 0.3s;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-last-of-type(1) > div:first-of-type, .ictora3 > div:nth-of-type(3) > div > div:nth-last-of-type(2) > div:first-of-type {
position: absolute;
width: 100%;
height: 50%;
-webkit-transition: 0.2s 0.8s;
transition: 0.2s 0.8s;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-last-of-type(1) > div:last-of-type, .ictora3 > div:nth-of-type(3) > div > div:nth-last-of-type(2) > div:last-of-type {
pointer-events: none;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-last-of-type(1) > div:last-of-type > img, .ictora3 > div:nth-of-type(3) > div > div:nth-last-of-type(2) > div:last-of-type > img {
position: absolute;
width: 100%;
height: auto;
padding: 50%;
}

/* Hover */

.ictora3 > div:nth-of-type(3) > div:hover {
width: 100%;
height: 100%;
z-index: 5;
-webkit-transition: 0.5s;
transition: 0.5s;
}

.ictora3 > div:nth-of-type(3) > div:hover > div:nth-last-of-type(2) {
left: -50% !important;
-webkit-transition: 0.3s 0.5s;
transition: 0.3s 0.5s;
}

.ictora3 > div:nth-of-type(3) > div:hover > div:nth-last-of-type(1) {
right: -50% !important;
-webkit-transition: 0.3s 0.5s;
transition: 0.3s 0.5s;
}

.ictora3 > div:nth-of-type(3) > div:hover > div:nth-last-of-type(2) > div:first-of-type, .ictora3 > div:nth-of-type(3) > div:hover > div:nth-last-of-type(1) > div:first-of-type {
height: 100%;
-webkit-transition: 0.2s;
transition: 0.2s;
}

/* Content */

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
text-align: center;
color: white;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > h2 {
font-family: Libre Baskerville, serif; /* Font for section headings */
font-size: 2.5em;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0));
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div {
overflow: scroll;
height: calc(100% - 6em - 12px);
width: calc(100% + 17px);
text-align: center;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > p:first-of-type {
font-size: 1.125em;
padding: 0 7% 0 7%;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > pre {
font-size: 1.5em;
padding: 0 7% 0 7%;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > h3 {
text-align: center;
font-size: 2.25em;
line-height: 10px;
font-family: Libre Baskerville, serif; /* Font for character headings */
}

/* Tabs */

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div {
width: 100%;
height: calc(100% - 60px);
position: relative;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > figure {
position: relative;
width: 100%;
height: 100%;
margin: 95px 0 0 0;
z-index: 1;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > figure > img {
position: relative;
display: block;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin-top: -60px;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div > div {
position: relative;
width: 25%;
height: 100%;
background-color: transparent;
float: left;
-webkit-transition: 0.2s 0.3s;
transition: 0.2s 0.3s;
z-index: 0;
text-align: center;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div > div::first-line {
font-size: 2em;
line-height: 60px;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div > div:hover {
z-index: 2;
}

.ictora3 > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > div > div > div > div:hover {
background-color: #666666;
}

.ictora3 > div:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div > div > div > div:hover {
background-color: #688560;
}

.ictora3 > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(1) > div > div > div > div:hover {
background-color: #5a5a8c;
}

.ictora3 > div:nth-of-type(3) > div:nth-of-type(4) > div:nth-of-type(1) > div > div > div > div:hover {
background-color: #ad211f;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div > div > div {
position: absolute;
width: 400%;
height: 100%;
top: 60px;
-webkit-transition: 0.2s 0.3s;
transition: 0.2s 0.3s;
visibility: hidden;
opacity: 0;
overflow: hidden;
}

.ictora3 > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > div > div > div > div > div {
background-color: #666666;
}

.ictora3 > div:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div > div > div > div > div {
background-color: #688560;
}

.ictora3 > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(1) > div > div > div > div > div {
background-color: #5a5a8c;
}

.ictora3 > div:nth-of-type(3) > div:nth-of-type(4) > div:nth-of-type(1) > div > div > div > div > div {
background-color: #ad211f;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div > div:hover > div {
visibility: visible;
opacity: 1;
}

/* Tab Content */

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div > div > div > div {
overflow: scroll;
height: calc(100% + 17px);
width: calc(100% + 17px);
box-sizing: border-box;
padding: 0 7% 0 7%;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div > div > div > div > p {
font-size: 1em;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div > div > div > div > p > b {
font-size: 1.375em;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div > div:nth-of-type(4) > div > div > p:first-of-type > span {
display: block;
margin: 0 auto;
width: 50%;
border: double 5px black;
text-align: left;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div > div:nth-of-type(4) > div > div > p:first-of-type > span > span {
display: block;
width: 200px;
background: black;
}

</style>



<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville|Eczar" rel="stylesheet">

<div class="ictora3">

<div><span>CHECKERBOARD SYNDICATE</span></div>
<img src="http://i.imgur.com/M5GrDfr.jpg">
<article></article>
<div>
<p>The Checkerboard Syndicate 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 divisions, all maintained by a few head members.</p>
</div>

<div>
<div style="left: 0; top: 0; background: #333333;">
<div>
<h2>Chessmasters</h2>
<hr>
<div>
<p>"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. There weren't a lot, and they typically served to be the order-givers and strategizers. Other times, it was where most hitmen and assassins were present. People admitted as a Chessmaster usually graduate from one of the other 3 divisions.</p>
<pre>≻ ♛ ♛ ♛ ≺</pre>


<br><h3>Orisum</h3>
<div>
<figure><img src="http://i.imgur.com/3jEPf3F.png"></figure>
<div>
<div>General<div style="left: 0%;"><div>
<p><b>Name</b><br>Lorem Ipsum</p>
<p><b>Nickname</b><br>Orisum</p>
<p><b>Age</b><br>20</p>
<p><b>Height</b><br>Yellow</p>
<p><b>Gender</b><br>Female</p>
<p><b>Other</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar ullamcorper sem eget tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris odio, efficitur sed placerat ut, pulvinar nec lectus.</p>

</div></div></div>
<div>Personality<div style="left: -100%;"><div>
<p><b>Personality</b><br>Vestibulum eget consectetur tortor, eget pellentesque neque. Vivamus magna tortor, laoreet ac lacus volutpat, mattis ullamcorper sem. Quisque id laoreet dolor. Curabitur blandit neque rutrum nunc porttitor, nec volutpat urna dignissim. Cras elementum id sem quis dignissim. Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar ullamcorper sem eget tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris odio, efficitur sed placerat ut, pulvinar nec lectus. Pellentesque orci orci, vulputate eu faucibus ut, pretium nec enim. Morbi ornare, dolor elementum consequat pretium, turpis nisl sagittis neque, quis egestas est odio sed diam. Cras vulputate mauris aliquet fringilla interdum.</p>

</div></div></div>
<div>Background<div style="left: -200%;"><div>
<p><b>Background</b><br>Vestibulum eget consectetur tortor, eget pellentesque neque. Vivamus magna tortor, laoreet ac lacus volutpat, mattis ullamcorper sem. Quisque id laoreet dolor. Curabitur blandit neque rutrum nunc porttitor, nec volutpat urna dignissim. Cras elementum id sem quis dignissim. Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis. Duis tincidunt, erat ac varius facilisis, mauris est fermentum lacus, et sollicitudin nibh metus a sem. Phasellus hendrerit finibus odio, fringilla consequat massa. Proin sit amet odio vel magna consequat suscipit sit amet sed eros.</p>
<p>Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis. Duis tincidunt, erat ac varius facilisis, mauris est fermentum lacus, et sollicitudin nibh metus a sem. Phasellus hendrerit finibus odio, fringilla consequat massa. Proin sit amet odio vel magna consequat suscipit sit amet sed eros.</p>

</div></div></div>
<div>Extra<div style="left: -300%;"><div>
<p><b>Statistics</b>

<span><span style="width: 60%;">Lorem</span></span>
<span><span style="width: 30%;">Turpis</span></span>
<span><span style="width: 24%;">Quis</span></span>
<span><span style="width: 90%;">Cras</span></span>
<span><span style="width: 70%;">Aliquam</span></span>
<span><span style="width: 20%;">Convallis</span></span>
<span><span style="width: 110%;">Sem</span></span>
<span><span style="width: 23%;">Dignissim</span></span>
</p>
<p><b>Arms</b>
<br>Vestibulum eget crcu, convallis in euismod sed, sagittis vitae quam.
<br>Etiam faucibus vel magna vel facilisis.
<br>Duis tincidunt, erat ac varius facilisis.
<br>Mauris est fermentum lacus, et sollicitudin nibh metus a sem.

</p>
<p><b>Trivia</b>
<br>Cras elementum id sem quis dignissim.
<br>Curabitur suscipit eget ex vitae luctus.
<br>Ut dui arcu, convallis in euismod sed, sagittis vitae quam.
<br>Etiam faucibus vel magna vel facilisis.

</p>
</div></div></div>
</div>
</div>



<br><h3>Etiam</h3>
<div>
<figure><img src="http://gallery.yopriceville.com/var/albums/Free-Clipart-Pictures/Animals-PNG/Transparent_Mouse_PNG_Picture.png?m=1421362291"></figure>
<div>
<div>General<div style="left: 0%;"><div>
<p><b>Name</b><br>Lorem Ipsum</p>
<p><b>Nickname</b><br>Etiam</p>
<p><b>Age</b><br>2</p>
<p><b>Height</b><br>Green</p>
<p><b>Gender</b><br>Mouse</p>
<p><b>Other</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar ullamcorper sem eget tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris odio, efficitur sed placerat ut, pulvinar nec lectus.</p>

</div></div></div>
<div>Personality<div style="left: -100%;"><div>
<p><b>Personality</b><br>Vestibulum eget consectetur tortor, eget pellentesque neque. Vivamus magna tortor, laoreet ac lacus volutpat, mattis ullamcorper sem. Quisque id laoreet dolor. Curabitur blandit neque rutrum nunc porttitor, nec volutpat urna dignissim. Cras elementum id sem quis dignissim. Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar ullamcorper sem eget tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris odio, efficitur sed placerat ut, pulvinar nec lectus. Pellentesque orci orci, vulputate eu faucibus ut, pretium nec enim. Morbi ornare, dolor elementum consequat pretium, turpis nisl sagittis neque, quis egestas est odio sed diam. Cras vulputate mauris aliquet fringilla interdum.</p>

</div></div></div>
<div>Background<div style="left: -200%;"><div>
<p><b>Background</b><br>Vestibulum eget consectetur tortor, eget pellentesque neque. Vivamus magna tortor, laoreet ac lacus volutpat, mattis ullamcorper sem. Quisque id laoreet dolor. Curabitur blandit neque rutrum nunc porttitor, nec volutpat urna dignissim. Cras elementum id sem quis dignissim. Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis. Duis tincidunt, erat ac varius facilisis, mauris est fermentum lacus, et sollicitudin nibh metus a sem. Phasellus hendrerit finibus odio, fringilla consequat massa. Proin sit amet odio vel magna consequat suscipit sit amet sed eros.</p>
<p>Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis. Duis tincidunt, erat ac varius facilisis, mauris est fermentum lacus, et sollicitudin nibh metus a sem. Phasellus hendrerit finibus odio, fringilla consequat massa. Proin sit amet odio vel magna consequat suscipit sit amet sed eros.</p>

</div></div></div>
<div>Extra<div style="left: -300%;"><div>
<p><b>Statistics</b>

<span><span style="width: 60%;">Lorem</span></span>
<span><span style="width: 30%;">Turpis</span></span>
<span><span style="width: 24%;">Quis</span></span>
<span><span style="width: 90%;">Cras</span></span>
<span><span style="width: 70%;">Aliquam</span></span>
<span><span style="width: 20%;">Convallis</span></span>
<span><span style="width: 50%;">Sem</span></span>
<span><span style="width: 23%;">Dignissim</span></span>
</p>
<p><b>Arms</b>
<br>Vestibulum eget crcu, convallis in euismod sed, sagittis vitae quam.
<br>Etiam faucibus vel magna vel facilisis.
<br>Duis tincidunt, erat ac varius facilisis.
<br>Mauris est fermentum lacus, et sollicitudin nibh metus a sem.

</p>
<p><b>Trivia</b>
<br>Cras elementum id sem quis dignissim.
<br>Curabitur suscipit eget ex vitae luctus.
<br>Ut dui arcu, convallis in euismod sed, sagittis vitae quam.
<br>Etiam faucibus vel magna vel facilisis.

</p>
</div></div></div>
</div>
</div>


</div>
</div>

<div style="left: 0;"><div style="top: 0; background-color: #424242;"></div><div><img src="http://www.clker.com/cliparts/2/d/b/3/1220546638446611812portablejim_Chess_tile_-_Queen_3.svg.med.png" style="left: 0;"></div></div>
<div style="right: 0;"><div style="bottom: 0; background-color: #424242;"></div><div><img src="http://www.clker.com/cliparts/2/d/b/3/1220546638446611812portablejim_Chess_tile_-_Queen_3.svg.med.png" style="right: 0;"></div></div>
</div>
<div style="right: 0; top: 0; background: #5b6971;">
<div>
<h2>Kings</h2>
<hr>
<div>
<p>"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.</p>
<pre>≻ ♚ ♚ ♚ ≺</pre>


<br><h3>Amet</h3>
<div>
<figure><img src="http://i.imgur.com/6ea887M.png"></figure>
<div>
<div>General<div style="left: 0%;"><div>
<p><b>Name</b><br>Lorem Ipsum</p>
<p><b>Nickname</b><br>Amet</p>
<p><b>Age</b><br>19</p>
<p><b>Height</b><br>Blue</p>
<p><b>Gender</b><br>Male</p>
<p><b>Other</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar ullamcorper sem eget tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris odio, efficitur sed placerat ut, pulvinar nec lectus.</p>

</div></div></div>
<div>Personality<div style="left: -100%;"><div>
<p><b>Personality</b><br>Vestibulum eget consectetur tortor, eget pellentesque neque. Vivamus magna tortor, laoreet ac lacus volutpat, mattis ullamcorper sem. Quisque id laoreet dolor. Curabitur blandit neque rutrum nunc porttitor, nec volutpat urna dignissim. Cras elementum id sem quis dignissim. Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar ullamcorper sem eget tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris odio, efficitur sed placerat ut, pulvinar nec lectus. Pellentesque orci orci, vulputate eu faucibus ut, pretium nec enim. Morbi ornare, dolor elementum consequat pretium, turpis nisl sagittis neque, quis egestas est odio sed diam. Cras vulputate mauris aliquet fringilla interdum.</p>

</div></div></div>
<div>Background<div style="left: -200%;"><div>
<p><b>Background</b><br>Vestibulum eget consectetur tortor, eget pellentesque neque. Vivamus magna tortor, laoreet ac lacus volutpat, mattis ullamcorper sem. Quisque id laoreet dolor. Curabitur blandit neque rutrum nunc porttitor, nec volutpat urna dignissim. Cras elementum id sem quis dignissim. Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis. Duis tincidunt, erat ac varius facilisis, mauris est fermentum lacus, et sollicitudin nibh metus a sem. Phasellus hendrerit finibus odio, fringilla consequat massa. Proin sit amet odio vel magna consequat suscipit sit amet sed eros.</p>
<p>Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis. Duis tincidunt, erat ac varius facilisis, mauris est fermentum lacus, et sollicitudin nibh metus a sem. Phasellus hendrerit finibus odio, fringilla consequat massa. Proin sit amet odio vel magna consequat suscipit sit amet sed eros.</p>

</div></div></div>
<div>Extra<div style="left: -300%;"><div>
<p><b>Statistics</b>

<span><span style="width: 60%;">Lorem</span></span>
<span><span style="width: 30%;">Turpis</span></span>
<span><span style="width: 24%;">Quis</span></span>
<span><span style="width: 90%;">Cras</span></span>
<span><span style="width: 70%;">Aliquam</span></span>
<span><span style="width: 20%;">Convallis</span></span>
<span><span style="width: 50%;">Sem</span></span>
<span><span style="width: 23%;">Dignissim</span></span>
</p>
<p><b>Arms</b>
<br>Vestibulum eget crcu, convallis in euismod sed, sagittis vitae quam.
<br>Etiam faucibus vel magna vel facilisis.
<br>Duis tincidunt, erat ac varius facilisis.
<br>Mauris est fermentum lacus, et sollicitudin nibh metus a sem.

</p>
<p><b>Trivia</b>
<br>Cras elementum id sem quis dignissim.
<br>Curabitur suscipit eget ex vitae luctus.
<br>Ut dui arcu, convallis in euismod sed, sagittis vitae quam.
<br>Etiam faucibus vel magna vel facilisis.

</p>
</div></div></div>
</div>
</div>



<br><h3>Dolor</h3>
<div>
<figure><img src="http://writm.com/wp-content/uploads/2016/08/Cat-hd-wallpapers.jpg"></figure>
<div>
<div>General<div style="left: 0%;"><div>
<p><b>Name</b><br>Lorem Ipsum</p>
<p><b>Nickname</b><br>Dolor</p>
<p><b>Age</b><br>5</p>
<p><b>Height</b><br>Purple</p>
<p><b>Gender</b><br>Cat</p>
<p><b>Other</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar ullamcorper sem eget tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris odio, efficitur sed placerat ut, pulvinar nec lectus.</p>

</div></div></div>
<div>Personality<div style="left: -100%;"><div>
<p><b>Personality</b><br>Vestibulum eget consectetur tortor, eget pellentesque neque. Vivamus magna tortor, laoreet ac lacus volutpat, mattis ullamcorper sem. Quisque id laoreet dolor. Curabitur blandit neque rutrum nunc porttitor, nec volutpat urna dignissim. Cras elementum id sem quis dignissim. Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar ullamcorper sem eget tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris odio, efficitur sed placerat ut, pulvinar nec lectus. Pellentesque orci orci, vulputate eu faucibus ut, pretium nec enim. Morbi ornare, dolor elementum consequat pretium, turpis nisl sagittis neque, quis egestas est odio sed diam. Cras vulputate mauris aliquet fringilla interdum.</p>

</div></div></div>
<div>Background<div style="left: -200%;"><div>
<p><b>Background</b><br>Vestibulum eget consectetur tortor, eget pellentesque neque. Vivamus magna tortor, laoreet ac lacus volutpat, mattis ullamcorper sem. Quisque id laoreet dolor. Curabitur blandit neque rutrum nunc porttitor, nec volutpat urna dignissim. Cras elementum id sem quis dignissim. Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis. Duis tincidunt, erat ac varius facilisis, mauris est fermentum lacus, et sollicitudin nibh metus a sem. Phasellus hendrerit finibus odio, fringilla consequat massa. Proin sit amet odio vel magna consequat suscipit sit amet sed eros.</p>
<p>Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis. Duis tincidunt, erat ac varius facilisis, mauris est fermentum lacus, et sollicitudin nibh metus a sem. Phasellus hendrerit finibus odio, fringilla consequat massa. Proin sit amet odio vel magna consequat suscipit sit amet sed eros.</p>

</div></div></div>
<div>Extra<div style="left: -300%;"><div>
<p><b>Statistics</b>

<span><span style="width: 60%;">Lorem</span></span>
<span><span style="width: 30%;">Turpis</span></span>
<span><span style="width: 24%;">Quis</span></span>
<span><span style="width: 90%;">Cras</span></span>
<span><span style="width: 70%;">Aliquam</span></span>
<span><span style="width: 20%;">Convallis</span></span>
<span><span style="width: 50%;">Sem</span></span>
<span><span style="width: 23%;">Dignissim</span></span>
</p>
<p><b>Arms</b>
<br>Vestibulum eget crcu, convallis in euismod sed, sagittis vitae quam.
<br>Etiam faucibus vel magna vel facilisis.
<br>Duis tincidunt, erat ac varius facilisis.
<br>Mauris est fermentum lacus, et sollicitudin nibh metus a sem.

</p>
<p><b>Trivia</b>
<br>Cras elementum id sem quis dignissim.
<br>Curabitur suscipit eget ex vitae luctus.
<br>Ut dui arcu, convallis in euismod sed, sagittis vitae quam.
<br>Etiam faucibus vel magna vel facilisis.

</p>
</div></div></div>
</div>
</div>


</div>
</div>

<div style="left: 0;"><div style="top: 0; background-color: #485C43;"></div><div><img src="http://www.clker.com/cliparts/d/3/0/7/12205466061204605977portablejim_Chess_tile_-_King_3.svg.med.png" style="left: 0;"></div></div>
<div style="right: 0;"><div style="bottom: 0; background-color: #485C43;"></div><div><img src="http://www.clker.com/cliparts/d/3/0/7/12205466061204605977portablejim_Chess_tile_-_King_3.svg.med.png" style="right: 0;"></div></div>
</div>
<div style="left: 0; bottom: 0; background: #8577bb;">
<div>
<h2>Knights</h2>
<hr>
<div>
<p>"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.</p>
<pre>≻ ♞ ♞ ♞ ≺</pre>


<br><h3>Consectetur</h3>
<div>
<figure><img src="http://i.imgur.com/HI4KY6Z.png"></figure>
<div>
<div>General<div style="left: 0%;"><div>
<p><b>Name</b><br>Lorem Ipsum</p>
<p><b>Nickname</b><br>Consectetur</p>
<p><b>Age</b><br>19</p>
<p><b>Height</b><br>Maroon</p>
<p><b>Gender</b><br>Male</p>
<p><b>Other</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar ullamcorper sem eget tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris odio, efficitur sed placerat ut, pulvinar nec lectus.</p>

</div></div></div>
<div>Personality<div style="left: -100%;"><div>
<p><b>Personality</b><br>Vestibulum eget consectetur tortor, eget pellentesque neque. Vivamus magna tortor, laoreet ac lacus volutpat, mattis ullamcorper sem. Quisque id laoreet dolor. Curabitur blandit neque rutrum nunc porttitor, nec volutpat urna dignissim. Cras elementum id sem quis dignissim. Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar ullamcorper sem eget tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris odio, efficitur sed placerat ut, pulvinar nec lectus. Pellentesque orci orci, vulputate eu faucibus ut, pretium nec enim. Morbi ornare, dolor elementum consequat pretium, turpis nisl sagittis neque, quis egestas est odio sed diam. Cras vulputate mauris aliquet fringilla interdum.</p>

</div></div></div>
<div>Background<div style="left: -200%;"><div>
<p><b>Background</b><br>Vestibulum eget consectetur tortor, eget pellentesque neque. Vivamus magna tortor, laoreet ac lacus volutpat, mattis ullamcorper sem. Quisque id laoreet dolor. Curabitur blandit neque rutrum nunc porttitor, nec volutpat urna dignissim. Cras elementum id sem quis dignissim. Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis. Duis tincidunt, erat ac varius facilisis, mauris est fermentum lacus, et sollicitudin nibh metus a sem. Phasellus hendrerit finibus odio, fringilla consequat massa. Proin sit amet odio vel magna consequat suscipit sit amet sed eros.</p>
<p>Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis. Duis tincidunt, erat ac varius facilisis, mauris est fermentum lacus, et sollicitudin nibh metus a sem. Phasellus hendrerit finibus odio, fringilla consequat massa. Proin sit amet odio vel magna consequat suscipit sit amet sed eros.</p>

</div></div></div>
<div>Extra<div style="left: -300%;"><div>
<p><b>Statistics</b>

<span><span style="width: 60%;">Lorem</span></span>
<span><span style="width: 30%;">Turpis</span></span>
<span><span style="width: 24%;">Quis</span></span>
<span><span style="width: 90%;">Cras</span></span>
<span><span style="width: 70%;">Aliquam</span></span>
<span><span style="width: 20%;">Convallis</span></span>
<span><span style="width: 50%;">Sem</span></span>
<span><span style="width: 23%;">Dignissim</span></span>
</p>
<p><b>Arms</b>
<br>Vestibulum eget crcu, convallis in euismod sed, sagittis vitae quam.
<br>Etiam faucibus vel magna vel facilisis.
<br>Duis tincidunt, erat ac varius facilisis.
<br>Mauris est fermentum lacus, et sollicitudin nibh metus a sem.

</p>
<p><b>Trivia</b>
<br>Cras elementum id sem quis dignissim.
<br>Curabitur suscipit eget ex vitae luctus.
<br>Ut dui arcu, convallis in euismod sed, sagittis vitae quam.
<br>Etiam faucibus vel magna vel facilisis.

</p>
</div></div></div>
</div>
</div>



<br><h3>Mauris</h3>
<div>
<figure><img src="http://pngimg.com/upload/horse_PNG2528.png"></figure>
<div>
<div>General<div style="left: 0%;"><div>
<p><b>Name</b><br>Lorem Ipsum</p>
<p><b>Nickname</b><br>Mauris</p>
<p><b>Age</b><br>11</p>
<p><b>Height</b><br>Teal</p>
<p><b>Gender</b><br>Horse</p>
<p><b>Other</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar ullamcorper sem eget tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris odio, efficitur sed placerat ut, pulvinar nec lectus.</p>

</div></div></div>
<div>Personality<div style="left: -100%;"><div>
<p><b>Personality</b><br>Vestibulum eget consectetur tortor, eget pellentesque neque. Vivamus magna tortor, laoreet ac lacus volutpat, mattis ullamcorper sem. Quisque id laoreet dolor. Curabitur blandit neque rutrum nunc porttitor, nec volutpat urna dignissim. Cras elementum id sem quis dignissim. Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar ullamcorper sem eget tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris odio, efficitur sed placerat ut, pulvinar nec lectus. Pellentesque orci orci, vulputate eu faucibus ut, pretium nec enim. Morbi ornare, dolor elementum consequat pretium, turpis nisl sagittis neque, quis egestas est odio sed diam. Cras vulputate mauris aliquet fringilla interdum.</p>

</div></div></div>
<div>Background<div style="left: -200%;"><div>
<p><b>Background</b><br>Vestibulum eget consectetur tortor, eget pellentesque neque. Vivamus magna tortor, laoreet ac lacus volutpat, mattis ullamcorper sem. Quisque id laoreet dolor. Curabitur blandit neque rutrum nunc porttitor, nec volutpat urna dignissim. Cras elementum id sem quis dignissim. Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis. Duis tincidunt, erat ac varius facilisis, mauris est fermentum lacus, et sollicitudin nibh metus a sem. Phasellus hendrerit finibus odio, fringilla consequat massa. Proin sit amet odio vel magna consequat suscipit sit amet sed eros.</p>
<p>Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis. Duis tincidunt, erat ac varius facilisis, mauris est fermentum lacus, et sollicitudin nibh metus a sem. Phasellus hendrerit finibus odio, fringilla consequat massa. Proin sit amet odio vel magna consequat suscipit sit amet sed eros.</p>

</div></div></div>
<div>Extra<div style="left: -300%;"><div>
<p><b>Statistics</b>

<span><span style="width: 60%;">Lorem</span></span>
<span><span style="width: 30%;">Turpis</span></span>
<span><span style="width: 24%;">Quis</span></span>
<span><span style="width: 90%;">Cras</span></span>
<span><span style="width: 70%;">Aliquam</span></span>
<span><span style="width: 20%;">Convallis</span></span>
<span><span style="width: 50%;">Sem</span></span>
<span><span style="width: 23%;">Dignissim</span></span>
</p>
<p><b>Arms</b>
<br>Vestibulum eget crcu, convallis in euismod sed, sagittis vitae quam.
<br>Etiam faucibus vel magna vel facilisis.
<br>Duis tincidunt, erat ac varius facilisis.
<br>Mauris est fermentum lacus, et sollicitudin nibh metus a sem.

</p>
<p><b>Trivia</b>
<br>Cras elementum id sem quis dignissim.
<br>Curabitur suscipit eget ex vitae luctus.
<br>Ut dui arcu, convallis in euismod sed, sagittis vitae quam.
<br>Etiam faucibus vel magna vel facilisis.

</p>
</div></div></div>
</div>
</div>


</div>
</div>

<div style="left: 0;"><div style="top: 0; background-color: #3E3E60;"></div><div><img src="http://www.clker.com/cliparts/5/8/0/f/12205467171891699302portablejim_Chess_tile_-_Knight_2.svg.hi.png" style="left: 0;"></div></div>
<div style="right: 0;"><div style="bottom: 0; background-color: #3E3E60;"></div><div><img src="http://www.clker.com/cliparts/5/8/0/f/12205467171891699302portablejim_Chess_tile_-_Knight_2.svg.hi.png" style="right: 0;"></div></div>
</div>
<div style="right: 0; bottom: 0; background: #964f4f;">
<div>
<h2>Rooks</h2>
<hr>
<div>
<p>"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. </p>
<pre>≻ ♜ ♜ ♜ ≺</pre>


<br><h3>Massa</h3>
<div>
<figure><img src="http://i.imgur.com/6yuSsLR.png"></figure>
<div>
<div>General<div style="left: 0%;"><div>
<p><b>Name</b><br>Lorem Ipsum</p>
<p><b>Nickname</b><br>Massa</p>
<p><b>Age</b><br>18</p>
<p><b>Height</b><br>Green</p>
<p><b>Gender</b><br>Male</p>
<p><b>Other</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar ullamcorper sem eget tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris odio, efficitur sed placerat ut, pulvinar nec lectus.</p>

</div></div></div>
<div>Personality<div style="left: -100%;"><div>
<p><b>Personality</b><br>Vestibulum eget consectetur tortor, eget pellentesque neque. Vivamus magna tortor, laoreet ac lacus volutpat, mattis ullamcorper sem. Quisque id laoreet dolor. Curabitur blandit neque rutrum nunc porttitor, nec volutpat urna dignissim. Cras elementum id sem quis dignissim. Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar ullamcorper sem eget tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris odio, efficitur sed placerat ut, pulvinar nec lectus. Pellentesque orci orci, vulputate eu faucibus ut, pretium nec enim. Morbi ornare, dolor elementum consequat pretium, turpis nisl sagittis neque, quis egestas est odio sed diam. Cras vulputate mauris aliquet fringilla interdum.</p>

</div></div></div>
<div>Background<div style="left: -200%;"><div>
<p><b>Background</b><br>Vestibulum eget consectetur tortor, eget pellentesque neque. Vivamus magna tortor, laoreet ac lacus volutpat, mattis ullamcorper sem. Quisque id laoreet dolor. Curabitur blandit neque rutrum nunc porttitor, nec volutpat urna dignissim. Cras elementum id sem quis dignissim. Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis. Duis tincidunt, erat ac varius facilisis, mauris est fermentum lacus, et sollicitudin nibh metus a sem. Phasellus hendrerit finibus odio, fringilla consequat massa. Proin sit amet odio vel magna consequat suscipit sit amet sed eros.</p>
<p>Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis. Duis tincidunt, erat ac varius facilisis, mauris est fermentum lacus, et sollicitudin nibh metus a sem. Phasellus hendrerit finibus odio, fringilla consequat massa. Proin sit amet odio vel magna consequat suscipit sit amet sed eros.</p>

</div></div></div>
<div>Extra<div style="left: -300%;"><div>
<p><b>Statistics</b>

<span><span style="width: 60%;">Lorem</span></span>
<span><span style="width: 30%;">Turpis</span></span>
<span><span style="width: 24%;">Quis</span></span>
<span><span style="width: 90%;">Cras</span></span>
<span><span style="width: 70%;">Aliquam</span></span>
<span><span style="width: 20%;">Convallis</span></span>
<span><span style="width: 50%;">Sem</span></span>
<span><span style="width: 23%;">Dignissim</span></span>
</p>
<p><b>Arms</b>
<br>Vestibulum eget crcu, convallis in euismod sed, sagittis vitae quam.
<br>Etiam faucibus vel magna vel facilisis.
<br>Duis tincidunt, erat ac varius facilisis.
<br>Mauris est fermentum lacus, et sollicitudin nibh metus a sem.

</p>
<p><b>Trivia</b>
<br>Cras elementum id sem quis dignissim.
<br>Curabitur suscipit eget ex vitae luctus.
<br>Ut dui arcu, convallis in euismod sed, sagittis vitae quam.
<br>Etiam faucibus vel magna vel facilisis.

</p>
</div></div></div>
</div>
</div>



<br><h3>Diam</h3>
<div>
<figure><img src="https://assets.rbl.ms/1596821/980x.jpg"></figure>
<div>
<div>General<div style="left: 0%;"><div>
<p><b>Name</b><br>Lorem Ipsum</p>
<p><b>Nickname</b><br>Diam</p>
<p><b>Age</b><br>12</p>
<p><b>Height</b><br>Cream</p>
<p><b>Gender</b><br>Loris</p>
<p><b>Other</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar ullamcorper sem eget tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris odio, efficitur sed placerat ut, pulvinar nec lectus.</p>

</div></div></div>
<div>Personality<div style="left: -100%;"><div>
<p><b>Personality</b><br>Vestibulum eget consectetur tortor, eget pellentesque neque. Vivamus magna tortor, laoreet ac lacus volutpat, mattis ullamcorper sem. Quisque id laoreet dolor. Curabitur blandit neque rutrum nunc porttitor, nec volutpat urna dignissim. Cras elementum id sem quis dignissim. Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar ullamcorper sem eget tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mauris odio, efficitur sed placerat ut, pulvinar nec lectus. Pellentesque orci orci, vulputate eu faucibus ut, pretium nec enim. Morbi ornare, dolor elementum consequat pretium, turpis nisl sagittis neque, quis egestas est odio sed diam. Cras vulputate mauris aliquet fringilla interdum.</p>

</div></div></div>
<div>Background<div style="left: -200%;"><div>
<p><b>Background</b><br>Vestibulum eget consectetur tortor, eget pellentesque neque. Vivamus magna tortor, laoreet ac lacus volutpat, mattis ullamcorper sem. Quisque id laoreet dolor. Curabitur blandit neque rutrum nunc porttitor, nec volutpat urna dignissim. Cras elementum id sem quis dignissim. Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis. Duis tincidunt, erat ac varius facilisis, mauris est fermentum lacus, et sollicitudin nibh metus a sem. Phasellus hendrerit finibus odio, fringilla consequat massa. Proin sit amet odio vel magna consequat suscipit sit amet sed eros.</p>
<p>Curabitur suscipit eget ex vitae luctus. Ut dui arcu, convallis in euismod sed, sagittis vitae quam. Etiam faucibus vel magna vel facilisis. Duis tincidunt, erat ac varius facilisis, mauris est fermentum lacus, et sollicitudin nibh metus a sem. Phasellus hendrerit finibus odio, fringilla consequat massa. Proin sit amet odio vel magna consequat suscipit sit amet sed eros.</p>

</div></div></div>
<div>Extra<div style="left: -300%;"><div>
<p><b>Statistics</b>

<span><span style="width: 60%;">Lorem</span></span>
<span><span style="width: 30%;">Turpis</span></span>
<span><span style="width: 24%;">Quis</span></span>
<span><span style="width: 90%;">Cras</span></span>
<span><span style="width: 70%;">Aliquam</span></span>
<span><span style="width: 20%;">Convallis</span></span>
<span><span style="width: 50%;">Sem</span></span>
<span><span style="width: 23%;">Dignissim</span></span>
</p>
<p><b>Arms</b>
<br>Vestibulum eget crcu, convallis in euismod sed, sagittis vitae quam.
<br>Etiam faucibus vel magna vel facilisis.
<br>Duis tincidunt, erat ac varius facilisis.
<br>Mauris est fermentum lacus, et sollicitudin nibh metus a sem.

</p>
<p><b>Trivia</b>
<br>Cras elementum id sem quis dignissim.
<br>Curabitur suscipit eget ex vitae luctus.
<br>Ut dui arcu, convallis in euismod sed, sagittis vitae quam.
<br>Etiam faucibus vel magna vel facilisis.

</p>
</div></div></div>
</div>
</div>


</div>
</div>

<div style="left: 0;"><div style="top: 0; background-color: #6A1413;"></div><div><img src="http://www.clker.com/cliparts/d/b/2/4/12205466671724840789portablejim_Chess_tile_-_Rook_3.svg.hi.png" style="left: 0;"></div></div>
<div style="right: 0;"><div style="bottom: 0; background-color: #6A1413;"></div><div><img src="http://www.clker.com/cliparts/d/b/2/4/12205466671724840789portablejim_Chess_tile_-_Rook_3.svg.hi.png" style="right: 0;"></div></div>
</div>
</div>

</div>

To add a new character, just copy the stuff between the CHARACTER START and CHARACTER END bits and paste them after the last character.

@TrippyVirus I'll start on your thing now.

EDIT: @Entarriance The code below should work here now. Stupid website, messing everything up.

Code:

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

<style type="text/css">

.ictora3 {
	position: relative;
	width: 100%;
	max-width: 768px;
	margin: 0 auto;
	font-family: Eczar, serif; /* Font for content */
	font-size: 100%;
}

.ictora3 img {
	border: none;
	padding: 0;
}

.ictora3 a {
	height: inherit;
	min-height: inherit;
	display: inherit;
}

.ictora3 p {
	margin: 1em 0 1em 0 !important;
}

.ictora3 p, .ictora3 pre, .ictora3 div, .ictora3 img {
	box-sizing: content-box;
}

/* Heading */

.ictora3 > div:first-of-type {
	width: 100%;
	height: auto;
	background-color: black;
	background-size: 96px 96px;
	background-position: 0 0, 48px 48px;
	background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, white 25%, white 75%, black 75%, black);
	position: relative;
	text-align: center;
}

.ictora3 > div:first-of-type > span {
	font-size: 4.5em;
	color: black;
	text-shadow: -0.0625em 0.025em white, 0.0625em -0.025em white, -0.08750em 0.0375em 0.025em black;
	font-family: Libre Baskerville, serif; /* Font for title */
}

.ictora3 > img, .ictora3 > a > img {
	height: auto;
	width: 100%;
}

/* Paragraph */

.ictora3 > article {
	position: relative;
	width: 100%;
	height: 60px;
	background-image: linear-gradient(transparent, #1c1c1c);
	margin-top: -60px;
	margin-bottom: 10px;
}

.ictora3 > div:nth-of-type(2) {
	position: relative;
	width: 100%;
	height: auto;
	padding: 5px 0 5px 0;
	background-color: #1c1c1c;
	text-align: center;
	margin-top: -10px;
}

.ictora3 > div:nth-of-type(2) > p {
	padding: 15px;
	color: white;
}

/* Squares */

.ictora3 > div:nth-of-type(3) {
	position: relative;
	width: 100%;
	padding-top: 100%;
}

.ictora3 > div:nth-of-type(3) > div {
	position: absolute;
	width: 50%;
	height: 50%;
	overflow: hidden;
	z-index: 0;
	-webkit-transition: 0.5s 0.3s, z-index 0s;
	transition: 0.5s 0.3s, z-index 0s;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-last-of-type(1), .ictora3 > div:nth-of-type(3) > div > div:nth-last-of-type(2) {
	position: absolute;
	width: 50%;
	height: 100%;
	overflow: hidden;
	background: black;
	z-index: 4;
	-webkit-transition: 0.3s;
	transition: 0.3s;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-last-of-type(1) > div:first-of-type, .ictora3 > div:nth-of-type(3) > div > div:nth-last-of-type(2) > div:first-of-type {
	position: absolute;
	width: 100%;
	height: 50%;
	-webkit-transition: 0.2s 0.8s;
	transition: 0.2s 0.8s;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-last-of-type(1) > div:last-of-type, .ictora3 > div:nth-of-type(3) > div > div:nth-last-of-type(2) > div:last-of-type {
	pointer-events: none;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-last-of-type(1) > div:last-of-type > img, .ictora3 > div:nth-of-type(3) > div > div:nth-last-of-type(2) > div:last-of-type > img, .ictora3 > div:nth-of-type(3) > div > div:nth-last-of-type(1) > div:last-of-type > a > img, .ictora3 > div:nth-of-type(3) > div > div:nth-last-of-type(2) > div:last-of-type > a > img {
	position: absolute;
	width: 100%;
	height: auto;
	padding: 50%;
}

/* Hover */

.ictora3 > div:nth-of-type(3) > div:hover {
	width: 100%;
	height: 100%;
	z-index: 5;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}	

.ictora3 > div:nth-of-type(3) > div:hover > div:nth-last-of-type(2) {
	left: -50% !important;
	-webkit-transition: 0.3s 0.5s;
	transition: 0.3s 0.5s;
}

.ictora3 > div:nth-of-type(3) > div:hover > div:nth-last-of-type(1) {
	right: -50% !important;
	-webkit-transition: 0.3s 0.5s;
	transition: 0.3s 0.5s;
}

.ictora3 > div:nth-of-type(3) > div:hover > div:nth-last-of-type(2) > div:first-of-type, .ictora3 > div:nth-of-type(3) > div:hover > div:nth-last-of-type(1) > div:first-of-type {
	height: 100%;
	-webkit-transition: 0.2s;
	transition: 0.2s;
}

/* Content */

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	text-align: center;
	color: white;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > h2 {
	font-family: Libre Baskerville, serif; /* Font for section headings */
	font-size: 2.5em;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > hr {
	border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0));
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div {
	overflow: scroll;
	height: calc(100% - 2.5em - 70px);
	width: calc(100% + 17px);
	text-align: center;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > p:first-of-type {
	font-size: 1.125em;
	padding: 0 7% 0 7%;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > pre {
	font-size: 1.5em;
	padding: 0 7% 0 7%;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > h3 {
	text-align: center;
	font-size: 2.25em;
	line-height: 10px;
	font-family: Libre Baskerville, serif; /* Font for character headings */
}

/* Tabs */

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div {
	width: 100%;
	height: calc(100% - 60px);
	position: relative;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > figure {
	position: relative;
	width: 100%;
	height: 0;
	min-height: 100%;
	margin: 95px 0 0 0;
	z-index: 1;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > figure > img, .ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > figure > a > img {
	position: relative;
	display: block;	
	max-width: 100%;
	max-height: 100%;
	margin: 0 auto;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	margin-top: -60px;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div > div {
	position: relative;
	width: 25%;
	height: 100%;
	background-color: transparent;
	float: left;
	-webkit-transition: 0.2s 0.3s;
	transition: 0.2s 0.3s;
	z-index: 0;
	text-align: center;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div > div::first-line {
	font-size: 2em;
	line-height: 60px;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div > div:hover {
	z-index: 2;
}

.ictora3 > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > div > div > div > div:hover {
	background-color: #666666;
}

.ictora3 > div:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div > div > div > div:hover {
	background-color: #688560;
}

.ictora3 > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(1) > div > div > div > div:hover {
	background-color: #5a5a8c;
}

.ictora3 > div:nth-of-type(3) > div:nth-of-type(4) > div:nth-of-type(1) > div > div > div > div:hover {
	background-color: #ad211f;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div > div > div {
	position: absolute;
	width: 400%;
	height: 100%;
	top: 60px;
	-webkit-transition: 0.2s 0.3s;
	transition: 0.2s 0.3s;
	visibility: hidden;
	opacity: 0;
	overflow: hidden;
}

.ictora3 > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > div > div > div > div > div {
	background-color: #666666;
}

.ictora3 > div:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div > div > div > div > div {
	background-color: #688560;
}

.ictora3 > div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(1) > div > div > div > div > div {
	background-color: #5a5a8c;
}

.ictora3 > div:nth-of-type(3) > div:nth-of-type(4) > div:nth-of-type(1) > div > div > div > div > div {
	background-color: #ad211f;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div > div:hover > div {
	visibility: visible;
	opacity: 1;
}

/* Tab Content */

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div > div > div > div {
 	overflow: scroll;
 	height: calc(100% + 17px);
 	width: calc(100% + 17px);
 	box-sizing: border-box;
 	padding: 0 7% 0 7%;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div > div > div > div > p {
	font-size: 1em;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div > div > div > div > p > b {
	font-size: 1.375em;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div > div:nth-of-type(4) > div > div > p:first-of-type > span {
	display: block;
	margin: 0 auto;
	width: 50%;
	border: double 5px black;
	text-align: left;
	word-wrap: normal;
	overflow-wrap: normal;
}

.ictora3 > div:nth-of-type(3) > div > div:nth-of-type(1) > div > div > div > div:nth-of-type(4) > div > div > p:first-of-type > span > span {
	display: block;
	width: 200px;
	background: black;
}

</style>



<!-- Any and all of this stuff can be edited. -->



<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville|Eczar" rel="stylesheet"><!-- Fonts -->

<div class="ictora3">

	<div><span>CHECKERBOARD SYNDICATE</span></div>
	<img src="http://i.imgur.com/M5GrDfr.jpg">
	<article></article>
	<div>
		<p>The Checkerboard Syndicate 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 divisions, all maintained by a few head members.</p>
	</div>

	<div>
		<div style="left: 0; top: 0; background: #333333;">
			<div>
				<h2>Chessmasters</h2>
				<hr>
				<div>
					<p>"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. There weren't a lot, and they typically served to be the order-givers and strategizers. Other times, it was where most hitmen and assassins were present. People admitted as a Chessmaster usually graduate from one of the other 3 divisions.</p>
					<pre>&#8827;     &#9819; &#9819; &#9819;     &#8826;</pre>

					<!-- FIRST CHARACTER START -->
					<br><h3>Chess</h3>
					<div>
						<figure><img src="http://i.imgur.com/3jEPf3F.png"></figure><!-- Image link -->
						<div>
							<div>General<div style="left: 0%;"><div>
								<p><b>Name</b><br>???</p>
								<p><b>Nickname</b><br>Chess</p>
								<p><b>Age</b><br>17</p>
								<p><b>Height</b><br>5'7</p>
								<p><b>Gender</b><br>???</p>
								<!-- To add more, put in  <p><b>Title</b><br>Content</p> -->
							</div></div></div>
							<div>Personality<div style="left: -100%;"><div>
								<p><b></b><br>Chess is a rather silent, callous, and cautious individual. It's not often that they speak, generally remaining silent in any situation that they can, though when they do, their tone is ambigious and apathetic. They hold a stern, business-like demeanor, and appears to be very wary and suspcious of others very quickly, including those of their own group. For a large duration of their life, Chess was held in isolation from the rest of society, watching others die with prejudice and taking the lives of others without taking the sonder of other's lives into their own mind, holding an unsympatheticview of the world. With a lack of affection given and shown, Chess comes off as straightforward and ocassionally rude to anyone who tries to get to know them.</p>
								<p>As nonchalant and cool they're percieved as, Chess holds a lot of social anxiety and paranoia about the world, quickly and falsely believing that there will always be a threat and that they're doing something wrong, causing many normal scenarios for others to be emotionally and physically draining for Chess. Their constant paranoia in fear that they've done something wrong or that their life is in danger is the source of Chess' favoritism in solitude.</p>
								<!-- Paragraphs should be between <p> </p> tags -->
							</div></div></div>
							<div>Background<div style="left: -200%;"><div>
								<p><b></b><br>alright fam u got some arranged marriage shit that goes down and then boom chess is real. big papi (who's head mobster) is like "ok arranged marriages = connections = power" while mom is like "lmao u sexist bastard we can just treat this baby like everyone else" and both dont give a shit about this thing they really want power through any means and both like hate each other so they 1v1 a lot except with guns its a gunv1. so chess grows up forced to do what both of them want so like mom is "ok make them be a hitmeme" and they get all this sick-ass training montage or really tired 11 year old holding a gun experience for like only 14 years or something while big papi is like "ok we gotta make connections" and throws them into arranged marriages and stuff and its not fun like you're 10 and this weird sketchy 26 year old with two cigars is like 'hey bby got kik' and its a very not fun experience. so when big papi and mom are having a gunv1 papi fucking shoots her in the head and whoops she's dead guess who has squad rights now and chess has to help bury her body but hey u barely knew her anyway and she treated them like a stranger/ any other memeber. chess is old enough to go on solo hitmeme missions after like 16 years of dying internally and they lowkey realize "if i dont look like a gril sketchy 25 year olds arent as interested" and now they're here</p>
								<!-- Paragraphs should be between <p> </p> tags -->
							</div></div></div>
							<div>Extra<div style="left: -300%;"><div>
								<p><b>Statistics</b>
									<!-- Change these widths to change the widths of the stat bars -->
									<span><span style="width: 80%;">Strength</span></span>
									<span><span style="width: 100%;">Perception</span></span>
									<span><span style="width: 60%;">Endurance</span></span>
									<span><span style="width: 20%;">Charisma</span></span>
									<span><span style="width: 85%;">Wit</span></span>
									<span><span style="width: 60%;">Agility</span></span>
									<span><span style="width: 110%;">Aim</span></span>
								</p>
								<p><b>Arms</b>
									<br>Nearly always found with a colt revolver or a semi-automatic pistol on hand
									<br>Contrabands are often strapped onto their ankles or wrists.
									<br>Black powder as an instant grenade once shot from a distance.
									<br>Model 82A1sniper is their "child", but it isn't easy to lug around.
									<!-- To add more, put in a <br> tag then write stuff -->
								</p>
								<p><b>Trivia</b>
									<br>Usually masculine looking because they wanted to get out of some shitty arranged marriages their dad set up for them.
									<br>Bandage on left cheek has similar purpose to eyeblack has.
									<br>Hair covers over right eye with a similar usage that pirates wore eyepatches: in order to adjust quicker and clearer in the dark.
									<br>Panics when ordering pizza over the phone.
									<br>"u see this fuck slap yo girls ass wyd" "attend her funeral"
									<br>Can go days without eating.
									<br>Or sleeping.
									<br>There are rumours that they're dead and they don't deny it.
									<br>Their teammates are the closest thing to an affectionate family that they've ever recieved.
									<br>smiles are like a 2 year thing but that's if you're lucky other then that it's impossible
									<br>emotions are impossible too
									<br>#makechesssmileagain
									<br>Xi violently forces them to eat and sleep.
									<br>Often stays up days at a time because they're paranoid something bad will happen to either themself once caught off guard.
									<br>Doesn't have a birth certificate and legally doesn't exist.
									<br>Wears a lot of hand-me downs from Xi, and often confuses clothing with Go despite their different heights.
									<br>Looks that could kill you and will literally kill you.
									<!-- To add more, put in a <br> tag then write stuff -->
								</p>
							</div></div></div>
						</div>
					</div>
					<!-- FIRST CHARACTER END -->

				</div>
			</div>

			<div style="left: 0;"><div style="top: 0; background-color: #424242;"></div><div><img src="http://www.clker.com/cliparts/2/d/b/3/1220546638446611812portablejim_Chess_tile_-_Queen_3.svg.med.png" style="left: 0;"></div></div>
			<div style="right: 0;"><div style="bottom: 0; background-color: #424242;"></div><div><img src="http://www.clker.com/cliparts/2/d/b/3/1220546638446611812portablejim_Chess_tile_-_Queen_3.svg.med.png" style="right: 0;"></div></div>
		</div>
		<div style="right: 0; top: 0; background: #5b6971;">
			<div>
				<h2>Kings</h2>
				<hr>
				<div>
					<p>"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.</p>
					<pre>&#8827;     &#9818; &#9818; &#9818;     &#8826;</pre>

					<!-- FIRST CHARACTER START -->
					<br><h3>Xiangqi</h3>
					<div>
						<figure><img src="http://i.imgur.com/6ea887M.png"></figure><!-- Image link -->
						<div>
							<div>General<div style="left: 0%;"><div>
								<p><b>Name</b><br>Michael Knights</p>
								<p><b>Nickname</b><br>Xiangqi (Xi)</p>
								<p><b>Age</b><br>17</p>
								<p><b>Height</b><br>5'10</p>
								<p><b>Gender</b><br>Male</p>
								<!-- To add more, put in  <p><b>Title</b><br>Content</p> -->
							</div></div></div>
							<div>Personality<div style="left: -100%;"><div>
								<p><b></b><br>Xi serves to be a the most rational (and paternal) figure for the entire gang, fussing over constantly about their own reckless decisions and health. Towards his fellow team members, Xi is prominent and straight among them, treating them like brothers. However, he's friendly, open, and kind to everyone else, genuinely sympathetic and cordial among others and quick to get along with. While a little too fast to trust people, he can be stubborn with his own plans, not easily swayed by others unless justified. Xi is the most, "normal" and mature of the group, usually coming off as the peacekeeper during fights. He holds a high amount of patience (granting him the nickname 'mom'), though he teds to give up easily without thinking of a second plan, pursuing a single idea until it works. Xi applies logic to everyday situations, and holds a pragmatic, astute, yet lovable personality.</p>
								<p>He's well-built and durable, though he serves to be one of the "weakest" in the gang, unable to properly fight or defend himself. Seemingly to make up for that, Xi is the medic of the group, having well near advanced information (not expertise, he's still a teenager here) on how to tend to people due to years of assisting his father in his own work.</p>
								<!-- Paragraphs should be between <p> </p> tags -->
							</div></div></div>
							<div>Background<div style="left: -200%;"><div>
								<p><b></b><br>pop was a hot surgeon and mom was a hot doctor its a nice combination and congrats you have this little plant thing. but the thing was that his mom was like not ok and other not as hot doctors were like "bRO THIS IS A BAD IDEA" but she's like "LMAO I WANT A SON AND HE'S GONNA BE GREAT GG WORLD" except she doesnt do a die but she gets super weak since her body cant handle this shit. so his pap was v dedicated and he wanted to make his mom ok and stuff so he was like "hey can i help my wife" and the hospital stuff was like "you cant do that bcus 2 close of a relationship u cant handle that stuff" and he's like &gt;:&lt; or something. so overnight and stuff when no one's really around in this pretty crappy neighborhood with an eeH hospital he stays up all night trying to figure out how to help her so xi pretty much lives in the hospital. all his friends were like plants (fake asf smh), patients, and other visitors. the visitors he talked to were like "aw look at this littl bean" he was v nice and gave lots of flowers to everyone!! but its a hospital!! so like all the visitors stopped coming back at some point after the person they were visiting was discharged and stuff and all the patients he befriended were discharged or uh di ed and he wasn't really ok with a lot of that. but he grew up wanting to be a doctor and help his mom too and his mom was like "i cant have my husband waste his life on me that couldve been used for a college degree" and she tricks smol xi into PuLLin G THe plUg and yah she's gone. so dad mourns a bit and he's like "u kno what" and he goes to legit join the mafia as an illegal surgeon so ppl like his wife who couldnt get the care that she needed since people were insistent she wouldnt make it (which she wouldn't have and it takes money for that life support ayyy) could get the care and he gets fucking headshotted by someone when he cant save another mob boss' daughter in time on xis birthday now he's here after this edgy teenager picked him up.</p>
								<!-- Paragraphs should be between <p> </p> tags -->
							</div></div></div>
							<div>Extra<div style="left: -300%;"><div>
								<p><b>Statistics</b>
									<!-- Change these widths to change the widths of the stat bars -->
									<span><span style="width: 23%;">Strength</span></span>
									<span><span style="width: 64%;">Perception</span></span>
									<span><span style="width: 86%;">Endurance</span></span>
									<span><span style="width: 72%;">Charisma</span></span>
									<span><span style="width: 100%;">Wit</span></span>
									<span><span style="width: 64%;">Agility</span></span>
									<span><span style="width: 105%;">Medical Ability</span></span>
								</p>
								<p><b>Arms</b>
									<br>Unarmed.
									<br>Carries bandages and a basic first aid kit with him.
									<br>Many different herbs and plants for medical use.
									<br>Has a few books as well, most are AP textbooks, but a few personal favourites.
									<!-- To add more, put in a <br> tag then write stuff -->
								</p>
								<p><b>Trivia</b>
									<br>Loves gardening and plants.
									<br>Is a plant in disguise.
									<br>Fangirls over plants (his favourite are dandelions).
									<br>Not allergic to poison ivy and is completely unaffected by hay fever.
									<br>Names all his plants and takes personal offense if you disregard their names.
									<br>"Borrows" some of Jeson's books to try and spare Jeson mental anguish and unlock the mystery to why he's so cringy. It'll happen, one day.
									<br>Likes to brag about his 2 sons and daughter to all his friends.
									<br>Confirmed suburban mother as he won the bakesale and slam dunked Helen's gluten free cokies into the trash where they belong.
									<br>Probably cried when he got piercings.
									<br>Enjoys tea.
									<br>Thought eating just tea leaves was cool when he saw Chess eating a handful of coffee beans and tried it and learned it was not worth it.
									<br>The only one that can actually cook something edible and trustworthy.
									<br>Ocassionaly wears coloured contacts so his eyes can be even.
									<br>Wonders if he's a Gary Stu sometimes since he has green hair and heterochromia.
									<br>Had a one-sided Crush on Chess for a little bit before getting violently friendzoned.
									<br>Will fight Helen at the grovery store for his kid's morning cereal.
									<br>Doesn't deserve to b in the mafia and is planning on quitting once he gets to college.
									<br>Neatest person out of everyone and organizes everyone's rooms while they're gone.
									<br>Serves as the doctor and suburban mother/father figure of the group.
									<br>Tends to win 1st-2nd at Chinese Checker night.
									<!-- To add more, put in a <br> tag then write stuff -->
								</p>
							</div></div></div>
						</div>
					</div>
					<!-- FIRST CHARACTER END -->

				</div>
			</div>

			<div style="left: 0;"><div style="top: 0; background-color: #485C43;"></div><div><img src="http://www.clker.com/cliparts/d/3/0/7/12205466061204605977portablejim_Chess_tile_-_King_3.svg.med.png" style="left: 0;"></div></div>
			<div style="right: 0;"><div style="bottom: 0; background-color: #485C43;"></div><div><img src="http://www.clker.com/cliparts/d/3/0/7/12205466061204605977portablejim_Chess_tile_-_King_3.svg.med.png" style="right: 0;"></div></div>
		</div>
		<div style="left: 0; bottom: 0; background: #8577bb;">
			<div>
				<h2>Knights</h2>
				<hr>
				<div>
					<p>"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.</p>
					<pre>&#8827;     &#9822; &#9822; &#9822;     &#8826;</pre>

					<!-- FIRST CHARACTER START -->
					<br><h3>Jeson Mor</h3>
					<div>
						<figure><img src="http://i.imgur.com/HI4KY6Z.png"></figure>
						<div>
							<div>General<div style="left: 0%;"><div>
								<p><b>Name</b><br>Nolan Kings</p>
								<p><b>Nickname</b><br>Jeson Mor</p>
								<p><b>Age</b><br>18</p>
								<p><b>Height</b><br>6'0</p>
								<p><b>Gender</b><br>Male</p>
								<!-- To add more, put in  <p><b>Title</b><br>Content</p> -->
							</div></div></div>
							<div>Personality<div style="left: -100%;"><div>
								<p><b></b><br>Jeson is a charming, rather theatrical, and charismatic young man whose defining character trait is a strong sense of vanity and importance in one's appearance. A gentleman who always seems to look out for people in a rather operatic and melodramatic fashion, Jeson seems to hold other's intentions close to heart, and knows what to say to really get into someone's heart. That is... if he really has one himself. Despite his courteous and cultivated disposition, he takes enjoyment in the discomfort and anguish of others, especially through gossip and manipulation of others. His theatrical sophistication and kindness has become so permanently embedded in his demeanor and identity that not even his teammates are aware whether he's acting or naturally like that. Jeson appears to be an attractive male whose amicable, captivating personality seems to win the hearts of many. If he really means it, of course.</p>
								<p>Due to a rough past, he holds an unhealthy co-dependency towards Chess, placing his sense of integrity, respect in individuality, and pomposity solely on Chess' existence, often going into an unnatural phase of despondency and self-loathing without their presence (insisting the group will die or that his death would be crucial to the group's survival, being overly-negative).</p>
								<p>His ability to act and lie phenomenally makes him well feared by mafia competitors.</p>
								<!-- Paragraphs should be between <p> </p> tags -->
							</div></div></div>
							<div>Background<div style="left: -200%;"><div>
								<p><b></b><br>his puny 5'1 dad inherited shit from his dead brother aka an entire fucking casino (King's Casino it's apparently hella well known in this universe) and he's filthy fucking rich. bcus he was filthy fucking rich in a fairly bad neighborhood and living the life he didnt really care too much for his kids, but not like in the neglect way, like he just kinda tossed money at them and didnt care too much on what they did since he's rich ohoho cash. so jeson and his brother (raphael) were smol beans confused but fucking littered in money and their mom was a very shy weenie who loved them a lot. so his puny 5'1 dad and shy mom go on their honeymoon with their fucking rich asf casino profits and his dads like "i can just hire someone to watch them bcus im rich yo" and that doesnt work out when jeson gets fucking kidnapped at like 4. he's the son to a rich asf casino owner so they want ransom and they kinda hold him hostage until they can get in contact and his dads like "YA OK NOT GOOD BUT D.W I HAVE ENOUGH MONEY TO BREAK EM OUT AND CALL THE COPS AND GET EM BACK" except the plane gets into an accident and shit and v few ppeople survived one being his mom his dad is down with his self esteem somewhere at the bottom of the fucking sea. his mom is traumatized and also fairly badly injured and she has some rlly bad shock amnesia so she cant really remember anything not even her name and shes not v ok she's pretty unstable so she cant really inherit this rich asf casino anymore. raph, his like 2 year younger brother snucc out of their rich asf home at night to look for jeson and we dont know where he is so no casino for u. so it goes to some person jeson has no idea who the fuck they are its like some inheritance friend i guess and they shove this kid out in the middle of no where since the ransom wont work as well with some fucking stranger might as well kidnap his wife/kid or something instead of this random child. jesons like "oh am i gonna starve thats not cool" and this old hag picks him up and lets him stay in this giant ass mansion with a broken ass family we can get into detail w/ later, but p much all the maids were angry about being used so they're all bitter and two faced. jeson doesnt know where the fuc k his family is so he just kinda stays around and ppl like stepping on him and forcing him to do work since he cant really deny it and he genuinelly thinks these ppl appreciate having him around when they learned "oh!! if we make this kid think we like him we can get paid for doing nothing!!". he ends up growing up w/ that philosophy too so he joins this circle of "lmao u use me i use u" and he ends up getting v popular + v fucking hated since he's a sly &gt;:3c and gets fired after a bunch of maids r like "s-senpai jeson is b-being ijiwaru desu!!!" and he gets fired once everyone gets on the "haha we can get our coworkers fired" game and he just kinda uses ppl to make a living before this edgy teen calls him a pathetic worthless shit and he somehow worships them</p>
								<!-- Paragraphs should be between <p> </p> tags -->
							</div></div></div>
							<div>Extra<div style="left: -300%;"><div>
								<p><b>Statistics</b>
									<!-- Change these widths to change the widths of the stat bars -->
									<span><span style="width: 63%;">Strength</span></span>
									<span><span style="width: 82%;">Perception</span></span>
									<span><span style="width: 32%;">Endurance</span></span>
									<span><span style="width: 125%;">Charisma</span></span>
									<span><span style="width: 67%;">Wit</span></span>
									<span><span style="width: 56%;">Agility</span></span>
									<span><span style="width: 100%;">Attractiveness</span></span>
								</p>
								<p><b>Arms</b>
									<br>Rope.
									<br>Usually a tazer or pepper spray it really varies.
									<br>Butterfly knife but not very often.
									<!-- To add more, put in a <br> tag then write stuff -->
								</p>
								<p><b>Trivia</b>
									<br>Refers to females with love, darling, and sweetie.
									<br>Refers to males with honey, dear, and sweetheart.
									<br>Knows fluent French and Italian.
									<br>"You're the reason you should never go to France or Italy alone" - Chess
									<br>"Mon amour~"
									<br>~
									<br>Has his own sparkle sound effect.
									<br>Broke more girl's hearts than stars in the sky.
									<br>Is he gay? Is he straight? We're pretty sure he's straight but honestly we're not sure he really likes pushing that boundary.
									<br>He's a sadist he really needs to chill.
									<br>Still a virgin and we genuinelly don't know how or why.
									<br>Holds the memory of 50 billion angry wives combined he will // ne v e r forget//
									<br>Has an infinite supply of roses to either hand out or put in his mouth and we want him to stop.
									<br>Serves as the framer, negotiater, and kidnapper of the gang.
									<br>Yeah he's kidnapped people it's his job
									<br>hE'S NOT A GOOD PERSON
									<br>oh he also dyed his hair somewhere while he was still working as a house servant his original hair colour is brown and his eyes are green
									<br>yes he uses coloured contacts
									<br>u cringy fuck
									<br>he's also really meme savvy its inspirational
									<br>Tends to win 2nd-3rd in Chinese Checkers.
									<!-- To add more, put in a <br> tag then write stuff -->
								</p>
							</div></div></div>
						</div>
					</div>
					<!-- FIRST CHARACTER END -->

				</div>
			</div>

			<div style="left: 0;"><div style="top: 0; background-color: #3E3E60;"></div><div><img src="http://www.clker.com/cliparts/5/8/0/f/12205467171891699302portablejim_Chess_tile_-_Knight_2.svg.hi.png" style="left: 0;"></div></div>
			<div style="right: 0;"><div style="bottom: 0; background-color: #3E3E60;"></div><div><img src="http://www.clker.com/cliparts/5/8/0/f/12205467171891699302portablejim_Chess_tile_-_Knight_2.svg.hi.png" style="right: 0;"></div></div>
		</div>
		<div style="right: 0; bottom: 0; background: #964f4f;">
			<div>
				<h2>Rooks</h2>
				<hr>
				<div>
					<p>"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. </p>
					<pre>&#8827;     &#9820; &#9820; &#9820;     &#8826;</pre>

					<!-- FIRST CHARACTER START -->
					<br><h3>Go</h3>
					<div>
						<figure><img src="http://i.imgur.com/6yuSsLR.png"></figure>
						<div>
							<div>General<div style="left: 0%;"><div>
								<p><b>Name</b><br>Ness Rooks</p>
								<p><b>Nickname</b><br>Go</p>
								<p><b>Age</b><br>19</p>
								<p><b>Height</b><br>5'3</p>
								<p><b>Gender</b><br>Male</p>
								<!-- To add more, put in  <p><b>Title</b><br>Content</p> -->
							</div></div></div>
							<div>Personality<div style="left: -100%;"><div>
								<p><b></b><br>Go is hot-headed and short tempered, always ready for a fight. Whether or not it be good for himself or anyone around him, he seems to be the first to start up trouble. Go has a rather punk or roguish look on the world, seeing it as a much more "rough-and-tough" place than it really is, easily growing frustrated or enraged at little things. Easily irritable, Go tends to push situations to rush them, and doesn't think through scenarios and their consequences, very much an act-before-you-think type of guy. Outside of his typically irritable and indignant state, he's loud and upfront to people, especially his friends, on how he feels, causing him to be considered rude to a degree. Violence is the first action that he resorts to, causing a comical chain reaction of him being restrained by the rest of the group. His sense of sarcasm is slightly faltered, though his strength isn't something to mess with.</p>
								<p>Picking a fight with him without a plan has almost a sure chance of sending you directly into a coma. He isn't high in the Rook Division for nothing. Though... he isn't the brightest star...</p>
								<p>Towards his teammates, while still getting into plenty of playful bickering and teasing with them, he's extremely loyal to whom he considers his friends. He jokes around constantly, and doesn't take joy in watching other's apprehension and sadness. Go is known to both accidently and purposefully make a fool out of himself simply to cause others to laugh or smile. Both his fights and general personality are very emotionally-reliant.</p>
								<!-- Paragraphs should be between <p> </p> tags -->
							</div></div></div>
							<div>Background<div style="left: -200%;"><div>
								<p><b></b><br>his mom ( ͡° ͜ʖ ͡°)ed around for money a lot s he has like 8 sibling 6 brothers and 2 sisters. they didnt exactly live in the best conditions aka they were fucknig batshit poor and his mom learned that what she was doing wasnt exactly helping her situation, so she went to work like a good citizen!! but she didnt exactly have a lot of redeemable experience so jobs werent v merciful in hiring her, so she did a lot of hard labour for work. go's family was fuckin wild they all killed each other for like a single corn chip they fought a lot for food and basic necessities they needed and it ended with one brother running away too so haha 7 left. go's 2 older brothers became drug dealers for money so he didnt really have very good influences around him. so while his brothers were like "yah dont be a drug dealer do good in skul" go was like 100% sure that to help his mom he needed to do bad fucking shit. so when he was smol he wandered throguh the alleyways of his neighborhood looking for work and he came across these street fights and stuff, where people bet and stuff for who would win. so he ended up getting into that and stuff and at first since you were a pathetic unironic meme he got decimated and lost a lot of money that he stole from his brothers n stuff and ofc everyone fought over where it went since they had no idea where tf it went. but eventually he learned he's smol and he can use that to his advantage or he trained himself to get stronker and he did get stronk and he started being able to beat ppl up and got some sicc cash for the fam. the bad thing is when u get beat up by like a kid ur pissed. so while he did start coming home with more $$$ as he got stronker and better at fighting some of the people he beat stalked him home for their fucking money back and when he wasnt at home they just looted their poor ass house or beat up one of his siblings when they were off to anime school. legit it ends up having one sister dead (6 left) and one older brother is caught for drug dealing and sent to jail (5 left ayYY). his mom is rlly strongly discouraging her kids from doing bad stuff for cash but considering how they're desperate for anything to live off of since they can barely scrape food off the table she couldnt really stop them either. she eventually learns that this borkf is doing these street fights and stuff for money and they have a lot of property damage stuff to pay for and them getting looted and stuff and it was because of him and go cant rlly cover that up anymore. so sHE REALLY DOENT WANNA SHE LOVES HIM VERY MUCH but she cant jeopardize her other kids anymore she's already really exhausted and stressed from losing like 3. so she ends up leaving go in an alleyway and saying that she'll pick him up soon and abandons him there + moves away so people cant target them anymore.</p>
								<p>he was kinda homeless for a bit but he found a good bork friend who he hung out with for a few months until he got shot so bye bork. an edgy teen picked him up when he was smol and he joined the fucking mafia and legit within a few months became one of the division heads since he beat people up for a living he fucking conquered son</p>
								<!-- Paragraphs should be between <p> </p> tags -->
							</div></div></div>
							<div>Extra<div style="left: -300%;"><div>
								<p><b>Statistics</b>
									<!-- Change these widths to change the widths of the stat bars -->
									<span><span style="width: 127%;">Strength</span></span>
									<span><span style="width: 21%;">Perception</span></span>
									<span><span style="width: 93%;">Endurance</span></span>
									<span><span style="width: 17%;">Charisma</span></span>
									<span><span style="width: 7%;">Wit</span></span>
									<span><span style="width: 87%;">Agility</span></span>
									<span><span style="width: 105%;">Brutality</span></span>
								</p>
								<p><b>Arms</b>
									<br>Wooden sword he totally did not steal.
									<br>His bare hands. Yeah, manly things! Football! Grills!
									<!-- To add more, put in a <br> tag then write stuff -->
								</p>
								<p><b>Trivia</b>
									<br>Has a crippling fear of rats. He's convinced Chess over 3 times to call an exterminator or he'd call out the entire Division, and made a bro-pact to erase every rat in the place.
									<br>A crybaby (he tantrums constantly and gets frustrated super easily).
									<br>Has numerous scars and bandages on him at all times, and there are sicc-ass battle scars down his back and stomach.
									<br>he's fucking shredded
									<br>like he's short as fuck but jesus christ he's ripped
									<br>Had a dog who was shot to death and he got piercings dedicated to the age he was when his dog died.
									<br>He dyed his hair. What? A deeper shade of red than his already red hair.
									<br>god almighty he's ripped tho he will break u in half
									<br>i wish i was kidding
									<br>boRK bork borkf
									<br>"Don't talk to me or my son ever again" - Xiangqi
									<br>He can spraypaint really well and swears it's his only redeeming artistic quality.
									<br>he owns a dog calendar
									<br>his senior quote was "I'm not a furry."
									<br>A god at kendo.
									<br>Swears like a drunk sailor at all times.
									<br>Served as the head offense and leader of the Rook Division, known for its delinquents.
									<br>Failed at Chinese Checkers he broke the board multiple times he has never gone past 4th place.
									<!-- To add more, put in a <br> tag then write stuff -->
								</p>
							</div></div></div>
						</div>
					</div>
					<!-- FIRST CHARACTER END -->

				</div>
			</div>

			<div style="left: 0;"><div style="top: 0; background-color: #6A1413;"></div><div><img src="http://www.clker.com/cliparts/d/b/2/4/12205466671724840789portablejim_Chess_tile_-_Rook_3.svg.hi.png" style="left: 0;"></div></div>
			<div style="right: 0;"><div style="bottom: 0; background-color: #6A1413;"></div><div><img src="http://www.clker.com/cliparts/d/b/2/4/12205466671724840789portablejim_Chess_tile_-_Rook_3.svg.hi.png" style="right: 0;"></div></div>
		</div>
	</div>

</div>

IctoraPost · Nov 16, 2016

@TrippyVirus Sorry this took so long. I was a bit busy with other stuff.

Link

Code:

Spoiler

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

<style type="text/css">

.ictora4 {
position: relative;
margin: 0 auto;
max-width: 700px; /* Total width */
width: calc(100% - 50px);
height: auto;
text-align: center;
font-family: Roboto, sans-serif; /* Body text font */
}

.ictora4 > h1, .ictora4 > div > label > div {
font-family: Raleway, sans-serif; /* Heading text font */
}

/* Tabs */

.ictora4 > div > input {
display: none;
}

.ictora4 > div > label {
position: relative;
float: left;
width: calc(100% / 6); /* 100% / [number of tabs] */
margin-top: 30px;
cursor: pointer;
}

.ictora4 > div > label > div {
width: 100%;
height: 60px;
position: relative;
z-index: 2;
background-color: #2574A9;
border-radius: 20px 20px 0 0;
line-height: 60px;
font-size: 1.5em; /* Size of tab text */
color: white;
transition: 0.2s;
box-sizing: content-box;
}

.ictora4 > div > label:hover > div {
margin-top: -20px;
padding-bottom: 20px;
}

.ictora4 > div > input:checked + label > div {
background-color: #F5F5F5;
color: black;
}

.ictora4 > div > div {
position: relative;
width: 100%;
height: 540px;
margin-top: 60px;
overflow: hidden;
background-color: #F5F5F5;
border-radius: 0 0 20px 20px;
}

.ictora4 > div > div > div {
position: absolute;
width: calc(100% * 6); /* 100% * [number of tabs] */
height: 100%;
transition: 1s;
}

.ictora4 > div > div > div > div {
width: calc(100% / 6); /* 100% / [number of tabs] */
height: 100%;
overflow: hidden;
position: relative;
float: left;
}

.ictora4 > div > div > div > div > div {
width: calc(100% + 17px);
height: calc(100% + 17px);
overflow: scroll;
box-sizing: border-box;
padding: 3% 7% 3% 7%;
text-align: justify;
}

.ictora4 > div > #ictora4tab1:checked ~ div > div {left: 0;}
.ictora4 > div > #ictora4tab2:checked ~ div > div {left: -100%;}
.ictora4 > div > #ictora4tab3:checked ~ div > div {left: -200%;}
.ictora4 > div > #ictora4tab4:checked ~ div > div {left: -300%;}
.ictora4 > div > #ictora4tab5:checked ~ div > div {left: -400%;}
.ictora4 > div > #ictora4tab6:checked ~ div > div {left: -500%;}

/* Template
.ictora4 > div > #ictora4tab[number]:checked ~ div > div {left: -[number - 1]00%;}
*/

</style>

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

<div class="ictora4">

<h1>Lorem Ipsum</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu, et volutpat sem. Duis non viverra urna, nec vestibulum metus. Donec a augue eu urna tempor aliquam vitae sed nunc. Donec pulvinar placerat purus a mollis. Nam tellus lectus, scelerisque sed ipsum vel, volutpat pellentesque sem. Donec vel leo molestie, sodales enim ac, sollicitudin sapien. Nullam rutrum justo elit, in laoreet elit maximus porta. Nulla vel eros in magna elementum pretium vel sit amet nisl. Maecenas suscipit, tortor at maximus ultricies, elit nisi malesuada leo, sit amet maximus orci lorem quis ante. Vestibulum posuere sem in vehicula dignissim.</p>
<p>Etiam sollicitudin, justo vitae dapibus pharetra, purus hendrerit vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse magna ipsum, faucibus eget efficitur ut, fringilla nec nulla. Donec et diam sed quam volutpat venenatis. Morbi scelerisque, lorem eu laoreet eleifend, mauris sapien elementum nulla, eget rutrum quam magna a massa. Donec condimentum ex ac magna congue gravida. Maecenas quam magna, facilisis sed tempus id, porttitor ac mi. Etiam a condimentum ante.</p>

<div>
<input type="radio" id="ictora4tab1" name="ictora4tabs" checked>
<label for="ictora4tab1"><div>Lorem</div></label>

<input type="radio" id="ictora4tab2" name="ictora4tabs">
<label for="ictora4tab2"><div>Ipsum</div></label>

<input type="radio" id="ictora4tab3" name="ictora4tabs">
<label for="ictora4tab3"><div>Dolor</div></label>

<input type="radio" id="ictora4tab4" name="ictora4tabs">
<label for="ictora4tab4"><div>Sit</div></label>

<input type="radio" id="ictora4tab5" name="ictora4tabs">
<label for="ictora4tab5"><div>Amet</div></label>

<input type="radio" id="ictora4tab6" name="ictora4tabs">
<label for="ictora4tab6"><div>Quis</div></label>



<div>
<div>
<div><div>
<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 tas, 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 vesbus 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>
<p>Donec aliquam imperdiet lectus sit amet dictum. Quisque commodo tellus quis pharetra pulvinar. Sed consequat ligula tortor, in posuere dolor bibendum sit amet. Nam tellus tortor, dapibus id iaculis sed, eleifend quis dui. Curabitur interdum tellus sit amet orci venenatis, molestie molestie ligula placerat. Suspendisse sit amet mi at justo venenatis volutpat. In vitae eros porttitor, rutrum neque quis, cursus mauris. Vestibulum euismod ut tellus ut laoreet. Phasellus vestibulum, turpis in facilisis suscipit, ligula turpis laoreet nisi, id hendrerit purus felis ut massa. Ut at orci dolor. Ut vitae porttitor tellus, vitae pretium sem. Cras eleifend in eros ut consectetur. Vivamus rhoncus id metus id suscipit. Maecenas nisl elit, pellentesque sed ornare ac, sagittis ut quam. Pellentesque mattis ligula dui, id molestie nibh convallis vel.</p>
</div></div>

<div><div>
<p>Mauris risus augue, tempor nec neque nec, viverra eleifend lectus. Etiam ipsum sem, varius ac aliquam id, mollis nec lacus. Vivamus non nulla at mi tristique condimentum interdum sed ex. Nulla ultricies porta turpis eget ullamcorper. Morbi eu justo purus. Suspendisse dignissim placerat eros, sed rhoncus ipsum tempor et. Pellentesque efficitur nisl placerat, gravida ipsum non, volutpat lorem. Duis dapibus, est in ornare placerat, elit felis lobortis justo, vel tristique sem sem vel lacus. In hac habitasse platea dictumst. Aliquam maximus, odio eget suscipit euismod, mauris urna convallis massa, id egestas massa dolor vitae nunc. Sed velit ligula, elementum ac bibendum vitae, congue nec felis.</p>
<p>Donec at accumsan ex, nec vestibulum nisl. Donec ultricies libero diam, ut pulvinar libero imperdiet sed. Pellentesque sem justo, luctus ut diam eu, congue condimentum ante. Nam in nisi interdum, gravida tortor ut, dictum massa. Praesent id justo non odio vulputate aliquam. Cras imperdiet aliquet nisi, vel lacinia magna pellentesque quis. Maecenas at diam leo. Nullam quis metus finibus, elementum velit non, aliquet purus. Fusce velit diam, consectetur ac lorem id, dictum egestas arcu. Cras consequat rutrum tortor nec accumsan. Donec consectetur lorem eu metus pulvinar rhoncus.</p>
</div></div>

<div><div>
<p>Etiam nec efficitur turpis. Phasellus tincidunt leo at blandit tincidunt. Donec sit amet justo vitae enim lobortis auctor. Sed eleifend rhoncus dapibus. Etiam sollicitudin purus ex, sed pharetra magna maximus vitae. Aliquam eleifend interdum lacinia. Donec nec faucibus purus. Curabitur massa nulla, tincidunt ut semper et, aliquam quis nunc. Vivamus finibus tristique justo id mattis. Donec ut metus pulvinar, sollicitudin eros sit amet, maximus est. Integer et placerat dolor. Integer auctor condimentum bibendum.</p>
<p>Vestibulum hendrerit, mi in rutrum laoreet, felis nisl porta leo, sed consectetur lorem tortor sit amet augue. Ut vel ultricies diam, porttitor sollicitudin dolor. Nullam dignissim diam sed felis mattis mollis. Sed diam quam, tristique sit amet tristique vel, vulputate ac erat. Mauris dignissim turpis sem, sed interdum dolor tempus quis. Vestibulum finibus pretium nulla tincidunt porta. Nunc ullamcorper ultrices ex, sit amet suscipit ex accumsan id. Fusce non lobortis odio. Morbi porta blandit leo nec efficitur. Quisque in iaculis lorem, nec varius nisi. Nulla hendrerit turpis cursus orci suscipit rhoncus. Donec eu urna ex. Cras rhoncus rhoncus nisi a convallis. Etiam ultricies augue a quam ultricies ultricies. Cras bibendum dui vitae vulputate venenatis.</p>
</div></div>

<div><div>
<p>Maecenas vehicula sagittis nunc, eu tempus urna rutrum non. Duis lectus magna, feugiat nec elit in, volutpat sagittis dui. Phasellus fermentum imperdiet pellentesque. Suspendisse potenti. Ut non justo pharetra, suscipit libero eu, interdum nisl. Donec blandit vulputate tortor at vehicula. Fusce at enim ac elit porttitor feugiat quis non ligula. In in quam ut enim viverra iaculis sed et sapien. Nulla sed tellus pulvinar, suscipit libero ut, ultricies nunc. Vivamus id eros in lorem vulputate molestie a eu mauris. Mauris rutrum, dolor eget sollicitudin tempus, est turpis molestie libero, quis commodo quam ipsum in neque. Nulla vitae mollis massa. Aliquam vel volutpat lectus, in pretium quam. Aenean venenatis odio arcu, sed congue diam cursus ac.</p>
<p>Phasellus rutrum, leo id commodo vestibulum, ligula ante tristique nulla, nec mollis mauris mi eu magna. Nullam a rutrum dolor. Praesent a semper risus, fermentum rhoncus justo. Suspendisse et mattis est. Nulla faucibus magna eget dapibus hendrerit. Sed aliquet dolor sed mi ornare tristique. Morbi scelerisque sed sem at scelerisque. Ut accumsan purus nec turpis blandit, quis suscipit ipsum placerat. Etiam gravida felis sed odio suscipit tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div></div>

<div><div>
<p>Curabitur auctor justo eget rhoncus euismod. Nunc quis ex tellus. Cras libero justo, consectetur quis nulla vitae, convallis luctus magna. Mauris tincidunt ante id hendrerit cursus. Nullam interdum, velit ut accumsan aliquet, ex metus condimentum velit, quis rhoncus urna est ut nisi. Sed nunc elit, tincidunt sit amet turpis sed, fringilla condimentum eros. Cras sed ultrices tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin eleifend enim vitae urna laoreet lacinia.</p>
<p>Sed tincidunt nulla et purus aliquet, id dignissim justo lacinia. Pellentesque sed est non ipsum vulputate laoreet. Fusce id viverra velit. Morbi vitae pretium tortor. Fusce sit amet ultrices est, vitae sollicitudin dui. Mauris eget imperdiet nulla, ac sodales libero. Cras vel dapibus justo. Nunc vulputate dictum nunc, at luctus neque imperdiet at. Cras vel augue augue. Nunc feugiat egestas lacus, sed condimentum massa feugiat dapibus. Donec gravida ornare nisi, eget rutrum purus. Nunc pretium varius facilisis. Phasellus eu feugiat nisi, ac mattis nisi. Praesent malesuada fermentum mollis.</p>
</div></div>

<div><div>
<p>Integer dolor lectus, posuere nec congue vitae, pellentesque sit amet orci. Nam eget suscipit ante. In congue lectus arcu, at sagittis elit scelerisque vel. Integer dapibus massa id lorem commodo tempus. Sed aliquet turpis nec nulla commodo, eget eleifend orci aliquet. Donec vulputate nunc id orci luctus, et aliquam dui fermentum. Vivamus vestibulum facilisis ex, eget fermentum elit bibendum vitae. Proin luctus ante dui, eget semper libero elementum in. Nulla hendrerit, augue ac commodo sagittis, est purus vestibulum neque, a condimentum enim tortor sed neque. Aliquam et lectus et tortor euismod sagittis pulvinar ac sem. Suspendisse at viverra augue. Duis quis eleifend enim.</p>
<p>Vivamus quis hendrerit est. Phasellus laoreet, sodales fermentum, ipsum justo sollicitudin ipsum, sed vulputate massa turpis id tortor. Phasellus sollicitudin bibendum nunc, in iaculis massa bibendum et. Quisque faucibus nec ligula a ullamcorper. Morbi at ligula vel metus ornare semper. Nunc rutrum suscipit dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et risus quis purus egestas rutrum. Nam tristique facilisis risus nec suscipit. Nullam facilisis velit eu tempor posuere. In consequat sem in nibh malesuada, faucibus efficitur mi vehicula. Sed quis pretium nibh, vitae efficitur nisl. Ut fermentum condimentum vehicula. Mauris blandit quis ex nec pellentesque.</p>
</div></div>



</div>
</div>
</div>
</div>

If you want to change the number of tabs, there's three places where that number has to be changed and three other places where stuff has to be added/removed. They're marked with comments with [number of tabs] or "Template".

If there's anything else you want, please let me know.

HTML, or anything else [Currently not accepting requests]

IctoraPost

You've got mail

TrippyVirus

and stupider than ever before

IctoraPost

You've got mail

TrippyVirus

and stupider than ever before

IctoraPost

You've got mail

TrippyVirus

and stupider than ever before

IctoraPost

You've got mail

TrippyVirus

and stupider than ever before

IctoraPost

You've got mail

IctoraPost

You've got mail

IctoraPost

You've got mail

Users who are viewing this thread

Similar threads