[html]<style>
.e1 {
  width: 300px;
  height: 250px;
  overflow: auto;
  padding: 5px;
}

.e2 {
  width: 290px;
  height: 90px;
  overflow: auto;
  padding: 5px;
}

.box {
  width: 520px;
  padding: 10px;
  background-image: url('https://imgur.com/7qyktHO.png');
  background-repeat: repeat;
  border: 13px solid #d6b654;
  height: 400px;
  color: #828282;
  font-size: 12px;
  border-radius: 15px;
}

.box td {
  vertical-align: top;
  color: #828282;
}

.box h18 {
  text-align: left;
  color: #d3a23a;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800px;
  padding: 3px;
  text-transform: uppercase;
  font-size: 15px;
  border-bottom: 1px solid #d3a23a;
}

.box ::-webkit-scrollbar {
  width: 5px;
  background: #d8d8d8;
}

.box ::-webkit-scrollbar-track {
  background: #d8d8d8;
  border-radius: 5px;
}

.box ::-webkit-scrollbar-thumb {
  background: #d3a23a;
  border-radius: 10px;
  border: 1px solid #d8d8d8;
}

.box img {border: 6px solid #d3a23a;}

.box hr {
  border: none;
  box-shadow: 0;
  margin: 1.5em 25%;
  border-top: 1px solid #d3a23a;
}

.boom img {
  width: 75px;
  height: auto;
}

.nitro {
  background: #ececec;
  border: 1px solid #d0d0d0;
  padding: 3px;
  width: 265px;
  margin: 8px;
  color: #828282;
  border-radius: 5px;
  margin-top: -20px;
}

.nitro b {
  color: #d3a23a;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800px;
  text-transform: uppercase;
}

.nitro i {
  color: #d6b654;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
}

.box h28 {
  text-align: left;
  color: #d6b654;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800px;
  padding: 3px;
  text-transform: uppercase;
  font-size: 25px;
  letter-spacing: -3px;
}
</style>
<!-- Code désigné par Emerald. Merci de créditer l'auteur ! Lien source : http://yourscent.jcink.net/index.php?showtopic=223 -->

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900" rel="stylesheet">

<div class="box">
  <table align="left">
    <tr>
      <td>
        <img src="https://imgur.com/7qOAgYL.png;">
        <hr><div class="boom">
          <center>
          <img src="https://imgur.com/gq9hnaQ.png"> &nbsp; <img src="https://imgur.com/NFtbgIV.png">
          </center>
        </div>
      </td>
      <td>
        <div class="e1">
          <h18>description</h18>
          <div class="nitro">
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath
          </div>
          <h18>curriculum</h18>
          <div class="nitro">
            <b>first name :</b> xxx<br>
            <b>last name :</b> xxx<br>
            <b>age :</b> xxx<br>
            <b>birthday :</b> xxx<br>
          </div>
        </div>
        <hr>
        <div class="e2">
          <h28> face/canon:</h28>
          <div class="nitro">
            <center><b>bakugou katsuki</b> / <i>my hero academia</i></center>
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>[/html]

[html]<style>
.s1 {
  background-color:#EEE;
  width:300px;
  padding:25px;
}

.s1 img {
  margin-bottom:10px;
  border-radius:50%;
}

.s2 {
  margin-left:-180px;
  width:125px;
  border-right:1px solid #8F74A9;
  font:35px Arial;
  color:#8F74A9;
  font-weight:bold;
  font-style:italic;
  letter-spacing:-3.5px;
}

.s3 {
  margin-top:-40px;
  margin-left:120px;
  background-color:#8F74A9;
  width:143px;
  padding:5px;
  text-align:justify;
  font:9px Trebuchet MS;
  color:#EEE;
  font-weight:bold;
  font-style:italic;
}

.s3 span {word-spacing:8px;}

.s4 {
  margin-top:10px;
  width:275px;
  text-align:justify;
  font:9px Verdana;
  color:#555;
}

.s5 {
  margin-top:8px;
  width:275px;
  text-align:justify;
  font:9px Verdana;
  color:#999;
}

.s6 {
  font:6.5px Verdana;
  color:#999;
  font-weight:bold;
  text-transform:uppercase;
}
</style>
<!-- Code désigné par Space Dandy. Merci de créditer l'auteur ! Lien source : http://pixel-perfect.boards.net/thread/ … ple-basics -->
​

<div align="center">
<div class="s1"><img src="https://i.imgur.com/FOJIph1.png">
    <div class="s2">C'MON</div>
    <div class="s3">
    <span>cause i know what i like</span> &amp; you're lookin' just like my type
    <span style="word-spacing:3px;">let's go for it just for tonight</span>
    </div>
    <div class="s4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="s5">❤ ooc stuff</div>
</div>
<div class="s6">dandy ♫</div>
</div>[/html]

[html]<style>
.chc9 a {
  text-decoration: none;
  color: #FFF;
}

.chc11 {
  width: 100px;
  font: 400 8px/100% hammersmith one;
  text-transform: uppercase;
  margin: 10px auto;
  text-align: center;
  padding: 3px;
  border: 1px solid #D5D5D5;
  border-radius: 20px;
  color: #474747;
  background: #FAFAFA;
}

.chc10 {
  padding: 5px;
  float: right;
  display: inline-block;
  margin-top: -30px;
  width: 240px;
  text-align: justify;
}

.chc9 span {
  text-shadow: -1px -1px 0 rgba(255,255,255,1), 1px -1px 0 rgba(255,255,255,1), -1px 1px 0 rgba(255,255,255,1), 1px 1px 0 rgba(255,255,255,1);
  color: #9E73AE;
}

.chc9 h1 {
  font: 400 10px/100% hammersmith one;
  text-transform: uppercase;
  padding: 10px;
  border: 1px solid rgba(255,255,255,1);
  width: 110px;
  text-align: center;
  display: inline-block;
  float: right;
  margin: 32px 10px 10px 5px;
  border-radius: 20px;
}

.chc9 img {
  margin: 5px 13px 0px -50px;
  display: inline-block;
  width: 75px;
  padding: 5px;
  border-radius: 100%;
  border: 4px solid rgba(255,255,255,1);
  border-left: 4px solid #9E73AE;
  border-bottom: 4px solid #9E73AE;
  background: rgba(143, 143, 143, 0.43);
}

.chc9 {
  border-top: 1px solid rgba(255,255,255,1);
  padding: 12px;
  margin-top: 25px;
  height: 82px;
}

@import url(//fonts.googleapis.com/earlyaccess/jejuhallasan.css);

.chc8::first-letter {
  font: 800 65px/100% poiret one;
  float: left;
  padding: 7px;
  margin: 7px;
  text-shadow: -1px -1px 0 rgba(255,255,255,1), 1px -1px 0 rgba(255,255,255,1), -1px 1px 0 rgba(255,255,255,1), 1px 1px 0 rgba(255,255,255,1);
color: #9E73AE;
}

.chc8 i {
  text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.9), 1px -1px 0 rgba(255, 255, 255, 0.9), -1px 1px 0 rgba(255, 255, 255, 0.9), 1px 1px 0 rgba(255, 255, 255, 0.9);
  color: #9E73AE;
  font: 400 14px/100% raleway;
  font-style: italic;
}

.chc8 b {
  font: 800 12px/95% montserrat;
  color: #9E73AE;
  text-shadow: -1px -1px 0 rgba(255,255,255,1), 1px -1px 0 rgba(255,255,255,1), -1px 1px 0 rgba(255,255,255,1), 1px 1px 0 rgba(255,255,255,1);
}

.chc8 {
  padding: 12px;
  z-index: 1;
  position: relative;
  margin: 20px;
  padding: 20px;
  background: rgba(143, 143, 143, 0.5);
  color: #FFF;
  font: 400 10px/100% verdana;
  text-align: justify;
  top: 0px;
}

.chc4 b {
  font-weight: 400;
  color: #9E73AE;
  letter-spacing: 4px;
}

.chc4 {
  padding: 10px;
  font: 400 10px/100% hammersmith one;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid #DBDBDB;
  border-right: 1px solid #FBFBFB;
  border-left: 1px solid #FBFBFB;
  color: #454545;
}

.chc3 {
  padding: 8px;
  border-radius: 20px;
  font: 400 29.3px/100% jeju hallasan;
  color: #9E73AE;
  width: 154px;
  text-align: right;
  float: right;
  margin-top: 14px;
  text-shadow: -2px -2px 0 rgba(255,255,255,1), 2px -2px 0 rgba(255,255,255,1), -2px 2px 0 rgba(255,255,255,1), 2px 2px 0 rgba(255,255,255,1);
}

.chc2 {
  float: left;
  margin: -15px;
  margin: 0px auto;
  position: relative;
  position: absolute;
}

.chc1 {
  text-shadow: -2px -2px 0 rgba(255,255,255,1), 2px -2px 0 rgba(255,255,255,1), -2px 2px 0 rgba(255,255,255,1), 2px 2px 0 rgba(255,255,255,1);
  font: 400 50px/100% poiret one;
  letter-spacing: -2px;
  text-align: right;
  padding: 10px;
  color: #9E73AE;
  text-transform: uppercase;
}

.chc {
  width: 400px;
  padding: 15px;
  background: #FDFDFD;
  border: 1px solid #DDD;
  margin: 0px auto;
  display: block;
  z-index: 1;
  position: relative;
}
 
.chc5 {
  padding: 22px;
  background: #F5F5F5;
  border: 1px solid #DDD;
  margin: 0px auto;
  width: 440px;
}
</style>
<!-- Code désigné par Aquamarine. Merci de créditer l'auteur ! Lien source : http://yourscent.jcink.net/index.php?showtopic=54 -->

<link href="https://fonts.googleapis.com/css?family=Hanna|Poiret+One:400|Hammersmith+One:400|Roboto:400,900|Montserrat:700,800|Raleway:400,900" rel="stylesheet">

<div class="chc5">
  <div class="chc">
    <div class="chc3">한국어 가사</div>
    <div class="chc1">reflection</div>
    <div class="chc4">I know Every life’s a <b>movie</b> We got different stars and <b>stories</b></div>
    <img src="http://static.tumblr.com/183751f757ec68250d22c087081bab60/l9zvlfz/0Caoofb0n/tumblr_static_cahqxl59cdcks40s0k0ssgwo0.png" class="chc2"></img>
    <div class="chc8">
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?""Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
      <div class="chc9">
        <img src="https://78.media.tumblr.com/f6a1f8beab9e63abd495008d7aa4e28a/tumblr_inline_o1s611UaGt1s79kwm_100.gif">
        <h1 style="margin-right: -5px;">@tagname</h1>
        <h1 style="width: 65px;"><span>000</span> words</h1>
      </div>
    </div>
  </div>
</div>
<div class="chc11">credit to spica</div>[/html]

[html]<style>
.blips {
  border: solid 35px #f0e099;
  width: 480px;
  background-color: #ffffff;
  color: #555555;
  text-align: justify;
}

.blipstop {
  padding: 35px;
  height: 120px;
}

.blipstopimg {
  float: left;
  padding: 9px;
  border: solid 1px #eeeeee;
  margin-right: 15px;
  height: 100px;
  width: 100px;
}

.blipstopimg img {
  height: 100px;
  width: 100px;
}

.blipstoplyric {
  font: bold 30px Roboto;
  letter-spacing: -1px;
  line-height: 25px;
  padding-bottom: 10px;
  padding-top: 25px;
  text-transform: lowercase;
}

.blipstoplyric span {color: #f0e099}

.blipstoplyric2 {
  font: 9px Roboto;
  line-height: 10px;
  color: #cccccc;
  text-transform: uppercase;
  height: 60px;
  overflow: hidden;
}

.blipstop2 {
  background-color: #444444;
  padding: 30px;
}

.blipstop21 {
  font: bold 12px Roboto;
  color: #999999;
  line-height: 12px;
  padding-bottom: 3px;
}

.blipstop22 {
  font: bold 25px Roboto;
  line-height: 20px;
  color: #dddddd;
  text-transform: uppercase;
  letter-spacing: -1px;
  white-space: nowrap;
  overflow: hidden;
}

.blipstop22 a {
  font: bold 25px Roboto;
  line-height: 20px;
  color: #dddddd!important;
}

.blipstop23 {
  position: absolute;
  height: 35px;
  padding: 30px;
  margin: -65px 0px 0px -302px;
  width: 420px;
  background-color: #444444;
  color: #dddddd;
  font: 12px Roboto;
  opacity: 0;
  -webkit-transition:  all .2s ease;
  -moz-transition:  all .2s ease;
  -o-transition:  all .2s ease;
}

.blipstop23:hover {opacity: 1;}

.blipsmid{
  margin: 0px -35px;
  border-left: solid 35px #f5f5f5;
  border-right: solid 35px #f5f5f5;
  padding: 35px 35px;
  background-color: #ffffff;
  font: 10px Verdana;
}

.blipsmid i {color: #bbbbbb;}

.blipsmid b {
  color: #bbbbbb;
  font: bold 11px roboto;
  line-height: 12px;
  text-transform: lowercase;
}

.blipsbot {
  background-color: #444444;
  color: #dddddd;
  font: bold 15px Roboto;
  line-height: 15px;
  padding: 35px;
  text-align: center;
  text-transform: lowercase;
}

.blipsbot span {color: #f0e099;}

.pcredit {
  width: 550px;
  text-align: right;
  font: bold 8px Arial;
  padding-top: 5px;
}

.m1 {height: 0px; overflow: hidden;}
</style>
<!-- Code désigné par Mummy Leap. Merci de créditer l'auteur ! Lien source : http://pixel-perfect.boards.net/thread/ … -submarine -->
​

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">

<div align="center">
<div class="blips">
    <div class="blipstop">
    <div class="blipstopimg">
        <img src="https://via.placeholder.com/100x100" style="max-width:100%;">
    </div>
    <div class="blipstoplyric">yellow <span>submarine</span></div>
    <div class="blipstoplyric2">
        And our friends are all aboard – many more of them live next door – and the band begins to play: We all live in a yellow submarine, yellow submarine, yellow submarine. We all live in a yellow submarine, yellow submarine, yellow submarine. full speed ahead, mr. boatswain, full speed ahead. full speed ahead it is, sergeant.
    </div>
    </div>
    <div class="blipstop2">
    <table style="width:100%;">
        <tbody>
        <tr>
            <td style="padding:0px!important; width: 20%;">
            <div class="blipstop21">WORDS</div>
            <div class="blipstop22">0000</div>
            </td>
            <td style="width: 20px; padding: 0px!important;"></td>
            <td style="padding: 0px!important;">
            <div class="blipstop21">TAGGED</div>
            <div class="blipstop22">F. NAME</div>
            <div class="m1">@pharaohleap </div>
            </td>
            <td style="width: 20px; padding:0px!important;"></td>
            <td style="padding: 0px!important;">
            <div class="blipstop21">NOTES</div>
            <div class="blipstop22">HOVER</div>
            <div class="blipstop23">and then you can put a bunch of notes here, i suppose.</div>
            </td>
        </tr>
        </tbody>
    </table>
    </div>
    <div class="blipsmid">
    In the town where I was born lived a man who sailed the sea, and he told us of his life in the land of submarines. So we sailed up to the sun 'til we found a sea of green, <b>and we lived beneath the waves in our yellow submarine</b>. We all live in a yellow submarine, yellow submarine, yellow submarine. We all live in a yellow submarine, yellow submarine, yellow submarine.
    <br><br>And our friends are all aboard – many more of them live next door – and the band begins to play: We all live in a yellow submarine, yellow submarine, yellow submarine. We all live in a yellow submarine, yellow submarine, yellow submarine. (<i>Full speed ahead, Mr. Boatswain, full speed ahead</i>. Full speed ahead it is, Sergeant. Cut the cable, drop the cable; aye, sir, aye, captain, captain.)
    <br><br>As we live a life of ease, every one of us has all we need. Sky of blue and sea of green in our yellow submarine. We all live in a yellow submarine, yellow submarine, yellow submarine. We all live in a yellow submarine, yellow submarine, yellow submarine. We all live in a yellow submarine, yellow submarine, yellow submarine. We all live in a yellow submarine, yellow submarine, yellow submarine.
    </div>
    <div class="blipsbot">and we lived <span>beneath the waves</span> in our yellow submarine</div>
</div>
<a href="http://pixel-perfect.boards.net/user/5"><div class="pcredit">PHARAOH LEAP CREATES</div></a>
</div>
[/html]

[html]<style>
.newworld {
  width: 533px;
  border: solid 1px #e3e3e3;
  letter-spacing: 0px;
  text-align: justify;
  color: #444444;
  text-align: justify;
}

.newworldtop {
  background-color: #f3f3f3;
  padding: 24px;
  text-align: right;
  font: 15px Raleway;
  text-transform: lowercase;
  line-height: 15px;
  text-shadow: 1px 1px 0px #ffffff, 1px 0px 0px #ffffff, 0px 1px 0px #ffffff, -1px 0px 0px #ffffff, 0px -1px 0px #ffffff, -1px 1px 0px #ffffff, 1px -1px 0px #ffffff, -1px -1px 0px #ffffff;
}

.newworldtop div {
  border: solid 2px #ffffff;
  float: left;
  height: 8px;
  width: 8px;
  margin: 0px 5px 0px 0px;
  background-color: #d1775e;
  border-radius: 100%;
}

.newworldtop b {
  color: #d1775e;
  font: 15px Raleway;
}

.newworldimg {
  float: left;
  height: 126px;
  width: 126px;
  padding: 37px;
  background-color: #444444;
}

.newworldimg2 {
  height: 100px;
  width: 100px;
  padding: 10px;
  border: solid 3px #ffffff;
  border-left-color: #d1775e;
  border-radius: 100%;
}

.newworldimg2 img {
  height: 100px;
  width: 100px;
  border-radius: 100%;
}

.newworldlyric {
  background-color: #393939;
  font: 30px raleway;
  line-height: 35px;
  text-align: center;
  color: #f9f9f9;
  letter-spacing: -1px;
  padding: 35px 0px;
  text-shadow: 1px 1px 0px #333333, 1px 0px 0px #333333, 0px 1px 0px #333333, -1px 0px 0px #333333, 0px -1px 0px #333333, -1px 1px 0px #333333, 1px -1px 0px #333333, -1px -1px 0px #333333, 0px 0px 3px rgba(0,0,0,.15);
}

.newworldlyric b {color: #d1775e;}

.newworldnotes {
  background-color: #d1775e;
  padding: 20px;
}

.newworldnotes div {
  height: 55px;
  overflow: auto;
  padding-right: 10px;
  font: 11px Inconsolata;
  margin-left: 200px;
  text-transform: uppercase;
  color: #ffffff;
}

.newworldnotes div::-webkit-scrollbar {
  width: 3px;
  background-color: #d1775e!important;
  border: none!important;
  border-radius: 0px;
}

.newworldnotes div::-webkit-scrollbar-thumb {
  background-color: #ffffff!important;
  border: none!important;
  border-radius: 0px;
}

.newworldmid {
  padding: 50px;
  font: 10px Verdana;
}

.newworldmid font {
  font: 12px Inconsolata;
  color: #d1775e;
}

.newworldmid b {
  font: 12px Inconsolata;
  color: #999999;
}

.newworldmid i {
  font: 12px Inconsolata;
  font-style: italic;
}

.newworldbot {
  background-color: #444444;
  padding: 25px;
  font: 15px Raleway;
  text-transform: lowercase;
  color: #ffffff;
   text-shadow: 1px 1px 0px #333333, 1px 0px 0px #333333, 0px 1px 0px #333333, -1px 0px 0px #333333, 0px -1px 0px #333333, -1px 1px 0px #333333, 1px -1px 0px #333333, -1px -1px 0px #333333, 0px 0px 3px rgba(0,0,0,.15);
  text-align: right;
}

.newworldbot b {
  font: 15px Raleway;
  color: #d1775e;
  padding: 0px 5px;
}

.n1 {height: 0px; overflow: hidden;}

.n2 {
  width: 535px;
  text-align: right;
  font: bold 8px Arial;
  padding-top: 5px;
}
</style>
<!-- Code désigné par Mummy Leap. Merci de créditer l'auteur ! Lien source : http://pixel-perfect.boards.net/thread/ … orld-order -->
​

<link href="https://fonts.googleapis.com/css?family=Inconsolata|Raleway|Roboto:300,400,500,700,900" rel="stylesheet">

<div align="center">
  <div class="newworld">
    <div class="newworldtop">
      <div title="0000 WORDS"></div>
      <div title="WRITTEN FOR LANCE"></div>
      <a href="https://www.youtube.com/watch?v=l6NgF7u0AxQ"><div title="MUSIC"></div></a>
      <b>+</b> new world order
    </div>
    <div class="newworldimg">
      <div class="newworldimg2"><img src="https://i.imgur.com/dabbFhp.png"></div>
    </div>
    <div class="newworldlyric">you shall <b>be shown</b></div>
    <div class="newworldnotes">
      <div>
        this is actually where the notes will go. ooooof, hoping this'll look good. this is what happens when you write all your html before even touching the css. no confession, all is known (all is known). new world order you shall be shown. no confession, all is known (all is known). new world order you shall be shown.
      </div>
    </div>
    <div class="newworldmid">
      <div>
        where hath the apostles gone? joining hands with wicked ones. revelation has come to pass. new world order will hold the mass. a book written by the man, used to control and command. all rights will be denied. without the mark, you shall die. no confession, all is known (all is known). new world order you shall be shown. no confession, all is known (all is known). new world order you shall be shown. <font>monitoring all wages. new world order comes in stages.</font> currency is obsolete. feel the agony of defeat. symbol of society today: a "must have or you shall pay". as human flesh leads the mind, just as a pawn, the last martyr dies. no confession, all is known (all is known). new world order you shall be shown. no confession, all is known (all is known). new world order you shall be shown.
        <br><br>where hath the the apostles gone? joining hands with wicked ones. <i>revelation has come to pass</i>. new world order, complete disorder, will hold the mass.
        <br><br>
        where hath the apostles gone? joining hands with wicked ones. revelation has come to pass. new world order will hold the mass. a book written by the man, used to control and command. all rights will be denied. without the mark, you shall die. no confession, all is known (all is known). new world order you shall be shown. <b>no confession, all is known (all is known). new world order you shall be shown.</b> monitoring all wages. new world order comes in stages. currency is obsolete. feel the agony of defeat. symbol of society today: a "must have or you shall pay". as human flesh leads the mind, just as a pawn, the last martyr dies. no confession, all is known (all is known). new world order you shall be shown. no confession, all is known (all is known). new world order you shall be shown.
        <br><br>where hath the the apostles gone? joining hands with wicked ones. revelation has come to pass. new world order, complete disorder, will hold the mass.
      </div>
    </div>
    <div class="newworldbot">NO CONFESSION <b>(</b> ALL IS KNOWN <b>)</b></div>
    <div class="n1">@pharaohleap </div>
  </div>
  <a href="http://pixel-perfect.boards.net/user/5"><div class="n2">PHARAOH LEAP CREATES</div></a>
</div>[/html]

[html]
<style>
.colomand1 {
  background-color: #000;
  width: 400px;
  padding: 10px;
  text-align: justify;
  font-family: megrim;
  font-size: 23px;
  color: #9838CA;
  text-transform: uppercase;
  font-weight: bold;
}

.colomand1 a {
  font-family: megrim!important;
  font-size: 20px!important;
  color: #BBB!important;
}

.colomand1 b {
  background-color: #694186;
  padding: 5px;
  font-family: megrim;
  font-size: 20px;
  color: #BBB;
}

.colomand2a {
  background-color: #EEEBE8;
  width: 400px;
  padding: 10px;
}

.colomand2 {
  margin-top: 25px;
  margin-bottom: 25px;
  margin-left: 25px;
  width: 350px;
  height: 242px;
  overflow: auto;
  padding-right: 8px;
  text-align: justify;
  font-family: play;
  font-size: 11px;
  color: #222;
}

.colomand2 b {
  background-color: #4A184C;
  padding: 3px;
  font-family: megrim;
  font-size: 18px;
  color: #EEE;
  font-weight: bold;
}

.c2 {margin-top: 3px; margin-left: -6px; height: 486px;}

.ccredit {
  font-family: verdana;
  font-size: 6.5px;
  color: #999;
  font-weight: bold;
  text-transform: uppercase;
}

.colomand2::-webkit-scrollbar {width: 8px!important;}
.colomand2::-webkit-scrollbar-thumb {border-radius: 10px!important; background-color: #AE31B9!important;}
.colomand2::-webkit-scrollbar-track { border-radius: 10px!important; background-color: #CCC!important;}
</style>
<!-- Code désigné par Space dandy. Merci de créditer l'auteur ! Lien source : http://pixel-perfect.boards.net/thread/ … ematic-fav -->
​
<link href="https://fonts.googleapis.com/css?family=Roboto|Megrim" rel="stylesheet">

<div align="center">
<table>
    <tbody>
    <tr>
        <td>
        <div class="colomand1">
            <img src="https://i.imgur.com/s74sGp6.gif">
            OLIVIA "SOMBRA" COLOMAR
        </div>
        <div class="colomand2a">
            <div class="colomand2">
            <b>about</b> Sombra remains a viable member of Talon with her expertise in hacking. She knows far more than she lets on and acts as a master manipulator in the fashion of blackmailing potential clientele and/or people of interest. Orphaned at a young age due to the Omnic crisis, she turned to technology and became a seasoned hacker, using information she gathered over the years to blackmail the CEO of LumériCo, soon growing tired of the game she created and releasing all of the dirt she'd gathered on him over the years to the public. Although once a member of Los Muertos, she defected due to personal security reasons, but still remains both a notorious and feared name among the people in Dorado, Mexico. Much of her backstory remains a mystery, whether it be through her act of deleting any trace of herself in database after database, or through physical documents that have simply been lost in the test of time. But one thing's for certain, she always finds a way to get the upper hand and will throw even those on her side to the wolves if it means to offer something that benefits her.
            <b>arsenal</b> Her typical weaponry is a machine pistol equipped with a magazine that contains around 60 bullets per clip. Due to a cybernetic graph implant along her spine, she is (for lack of a better term,) a living computer, equipped with other devices and able to hack into anything and anyone simply by touch. What she lacks in fighting prowess, she makes up for in escape and espionage via translocator technology said to have been stolen and modified for her own use, as well as thermoptic camoflauge which allows her to seemingly 'disappear' in the blink of an eye. While tricky, she is by no means untouchable, it all relies on strategy.
            </div>
        </div>
        <div class="colomand1">
            <div align="center">
            <b>30</b>
            <b>FEMALE</b>
            <b>TALON HACKER / DPS</b>
            <b><a href="">APP</a></b>
            </div>
        </div>
        </td>
        <td><img class="c2" src="https://i.imgur.com/7xSkBs4.png"></td>
    </tr>
    </tbody>
</table>
<div class="ccredit">dandy ♫</div>
</div>

[/html]

[hideprofile][html]<style>
.lit-general-wrap {
color: #727272;
border: 1px solid #c0ced1;
width: 920px
}

.lit-general-top {
background-color: #cef0f7;
padding: 30px;

}

.lit-general-title {
color: #0e6d90;
font-family: 'playfair display';
font-size: 18px;
font-weight: bold;
font-style: italic;
line-height: 30px;
text-align: right;
text-transform: lowercase;

}

.lit-general-subtitle {
color: #80b2bc;
font-family: 'roboto';
font-size: 8px;
text-transform: uppercase;
clear: both;
letter-spacing: 1px;
text-align: right;
}

.lit-general-img {
margin-bottom: 20px;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
transition: 0.6s ease-in-out all;
-webkit-transition: 0.6s ease-in-out all;
-moz-transition: 0.6s ease-in-out all;
}

.lit-general-img:hover {
-webkit-filter: grayscale(60%);
filter: grayscale(60%);
transition: 0.6s ease-in-out all;
-webkit-transition: 0.6s ease-in-out all;
-moz-transition: 0.6s ease-in-out all;
}

.lit-line {
background-color: #85c1cd;
margin-top: 5px;
margin-bottom: 5px;
width: 200px;
height: 1px;
float: right;
}

.lit-general-desc {
font-size: 10px;
text-align: justify;
border: 20px solid #f0f6f6;
padding: 20px;
background-color: #fafcfc;
font-family: 'verdana';
line-height: 14px;
}

.lit-general-desc b {
color: #caa757;
font-family: 'roboto';
}
/*fc*/

.lit-fc b {
color: #e6c069;
font-family: 'roboto';
text-transform: uppercase;
}

.lit-fc i {
color: #a5ccd4;
font-family: 'roboto';
text-transform: uppercase;
}

.lit-fc-subtitle {
color: #969696;
font-family: 'roboto condensed';
font-style: italic;
font-size: 22px;
line-height: 30px;
text-align: right;
font-weight: 300;
text-transform: lowercase;
padding-bottom: 20px;
padding-top: 20px;
}

.lit-fc a {
text-transform: uppercase!important;
}

</style>
<div class="lit-general-wrap">
<div class="lit-general-top">
<div class="lit-general-title"> face claim </div>
<div class="lit-line">   </div>
<div class="lit-general-subtitle">  FACE CLAIM LIST </div>
</div>

<div class="lit-general-desc">

<table>

  <tr>
    <td>
<div class="lit-fc-subtitle"> a, b, c +  </div>
<div class="lit-fc"> <b>ALDNOAH.ZERO</b>, <i> SLAINE TROYARD </i> — ehren rosemond  </div>
<div class="lit-fc"> <b>AXIS POWER HETALIA</b>, <i> FEM!PRUSSIA </i> — umi kujo  </div>
<div class="lit-fc"> <b>AXIS POWERS HETALIA</b>, <i> HONG KONG </i> — kyouya wakamoto  </div>
<div class="lit-fc"> <b>AXIS POWER HETALIA</b>, <i> TAIWAN </i> — yui asahina </div>
<div class="lit-fc"> <b>BAKEMONOGATARI</b>, <i>HITAGI SENJOUGAHARA </i> —mayumi homer  </div>
<div class="lit-fc"> <b>Berserk</b>, <i> Guts </i> — Rei Takayanagi  </div>
<div class="lit-fc"> <b>BRAVELY DEFAULT/SECOND</b>, <i> EDEA LEE </i> — astrid  </div>
<div class="lit-fc"> <b>BUNGOU TO ALCHEMIST</b>, <i> ATSUSHI NAKAJIMA </i> — hiroshi murakami  </div>
<div class="lit-fc"> <b>CODE GEASS</b>, <i> LELOUCH LAMPEROUGE </i> — zekkyou hoshido  </div>
</td>
    <td>
<div class="lit-fc-subtitle"> d, e, f +  </div>
<div class="lit-fc"> <b>D. GRAY MAN</b>, <i> YUU KANDA </i> — ryuu igarashi </div>
<div class="lit-fc"> <b>DANGANRONPA</b>, <i> ENOSHIMA JUNKO </i> — anastasia neuhaus  </div>
<div class="lit-fc"> <b>DANGANRONPA</b>, <i> SONIA NEVERMIND </i> — victoria nohr  </div>
<div class="lit-fc"> <b>DIABOLIK LOVERS</b>, <i> SUBARU SAKAMAKI </i> — dmitri volkov  </div>
<div class="lit-fc"> <b>DOGS: BULLETS AND CARNAGE</b>, <i> BADOU NAILS </i> — benjamin  </div>
<div class="lit-fc"> <b>ENSEMBLE STARS!</b>, <i> IZUMI SENA </i> — shin hoshizora  </div>
<div class="lit-fc"> <b>FATE: GRAND ORDER</b>, <i> JEANNE D'ARC (ALTER) </i> — deitheta meinhardt  </div>
<div class="lit-fc"> <b>FATE/GRAND ORDER</b>, <i> MIYAMOTO MUSASHI </i> —  Michiko Sasaki  </div>
<div class="lit-fc"> <b>FATE/STAY NIGHT</b>, <i> ARTURIA PENDRAGON ALTER </i> — Elysia Nohr  </div>
<div class="lit-fc"> <b>FATE STAY/NIGHT</b>, <i> RIN TOHSAKA </i> — serena nohr </div>
</td>
    <td>
<div class="lit-fc-subtitle"> g, h, i +  </div>
<div class="lit-fc"> <b>GINTAMA</b>, <i> TAKASUGI SHINSUKE </i> — yoite tsukami  </div>
<div class="lit-fc"> <b>GRANBLUE FANTASY</b>, <i> SOCIE </i> — chhal gita  </div>
<div class="lit-fc"> <b>HAPPY TREE FRIENDS</b>, <i> FLAKY </i> — wendell salvatore  </div>
<div class="lit-fc"> <b>HOWL'S MOVING CASTLE</b>, <i> HOWL PENDRAGON </i> — melchior llewellyn  </div>
<div class="lit-fc"> <b>IB</b>, <i> GARRY </i> — Elysander de Rosova</div>
<div class="lit-fc"> <b>INUYASHA</b>, <i> KIKYO </i> — kyoko suoh </div>
</td>
  </tr>
  <tr>
    <td>
<div class="lit-fc-subtitle"> j, k, l +  </div>
<div class="lit-fc"> <b>JIGOKU SHOUJO</b>, <i> AI ENMA </i> — Kayo Hoshido  </div>
<div class="lit-fc"><b> K</b>, <i> SARUHIKO FUSHIMI </i> — ozzie enheduanna</div>
<div class="lit-fc"> <b>KAGEROU PROJECT</b>, <i> AYANO TATEYAMA </i> — franziska nightray </div>
<div class="lit-fc"> <b>KAGEROU PROJECT</b>, <i> DARK KONOHA </i> — ai mikado  </div>
<div class="lit-fc"> <b>KAGEROU PROJECT</b>, <i> Seto Kousuke </i> — Inaho Hotaru  </div>
<div class="lit-fc"> <b>KANCOLLE</b>, <i> ZUIKAKU </i> — Ayaka Meichu </div>
<div class="lit-fc"> <b>KANTAI COLLECTION</b>, <i> KONGOU </i> — miyumi shiraishi</div>
<div class="lit-fc"> <b>KIZNAIVER</b>, <i> NORIKO SONOZAKI </i> — maja sif </div>
<div class="lit-fc"> <b>LEAGUE OF LEGENDS</b>, <i> AHRI </i> — ranmaru sei-an  </div>
<div class="lit-fc"> <b>LEAGUE OF LEGENDS</b>, <i> EZREAL </i> — DERYK VEITH  </div>
<div class="lit-fc"> <b>LOVE LIVE!</b>, <i> ELI AYASE </i> — eri hayashi </div>
</td>
    <td>
<div class="lit-fc-subtitle"> m, n, o +  </div>
<div class="lit-fc"> <b>MAGI: THE LAYBRINTH OF MAGIC</b>, <i> ALIBABA SALUJA </i> — yudai kusonoki  </div>
<div class="lit-fc"> <b>MAGI: THE LABYRINTH OF MAGIC</b>, <i> MU ALEXIUS </i> — mamoru ukita  </div>
<div class="lit-fc"> <b>MARARU PENGUINDRUM</b>, <i> HIMARI TAKAKURA </i> — Lunahri  </div>
<div class="lit-fc"> <b>NATSUME YUUJINCHOU</b>, <i> TAKASHI NATSUME </i> — Hitomu Nishimura  </div>
<div class="lit-fc"> <b>NEON GENESIS EVANGELION</b>, <i> ASUKA LANGLEY SOHRYU </i> — sofía  </div>
<div class="lit-fc"> <b>OVER THE GARDEN WALL</b>, <i> WIRT</i> — rohnan maegher </div>
</td>
    <td>
<div class="lit-fc-subtitle">p, q, r +  </div>
<div class="lit-fc"> <b>RUNE FACTORY 4</b>, <i> DIRASU </i> — baize aertex  </div>
<div class="lit-fc"> <b>Slayers</b>, <i> Lina Inverse </i> — Sigel </div>
</td>
  </tr>
  <tr>
    <td>
<div class="lit-fc-subtitle"> s, t, u +  </div>
<div class="lit-fc"> <b>SANDS OF DESTRUCTION</b>, <i> KYRIE ILLUNIS </i> — fritz  </div>
<div class="lit-fc"> <b>SENGOKU BASARA</b>, <i> MAEDA KEIJI </i> — polaris amboise </div>
<div class="lit-fc"> <b>SENGOKU BASURA</b>, <i>OICHI </i> — chisato koizumi  </div>
<div class="lit-fc"> <b>Suikoden</b>, <i> THOMAS </i> — Conan Nohr </div>
<div class="lit-fc"> <b>TALES OF ZESTIRIA</b>, <i> SOREY </i> — leroy vesela </div>
<div class="lit-fc"> <b>The Heroic Legend of Arslan</b>, <i> Etoile </i> — Cassandra Harke  </div>
<div class="lit-fc"> <b>THEIR STORY</b>, <i> QIU TONG </i> — maeve ó seighin </div>
<div class="lit-fc"> <b>TOGAINU NO CHI</b>, <i> GUNJI </i> — archibald rosemond </div>
<div class="lit-fc"> <b>TOKYO GHOUL</b>, <i> AYATO KIRISHIMA </i> — hisashi fujioka  </div>
<div class="lit-fc"> <b>TOKYO GHOUL</b>, <i> TOUKA KIRISHIMA </i> — kanae maebara  </div>
<div class="lit-fc"> <b>TOUHOU</b>, <i> REIMU HAKUREI </i> — ai ren </div>
<div class="lit-fc"> <b>TOUKEN RANBU</b>, <i>ICHIGO HITOFURI </i> — cyril valerius  </div>
<div class="lit-fc"> <b>TOUKEN RANBU</b>, <i> KASEN KANESADA </i> — makoto satou  </div>
<div class="lit-fc"> <b>TOUKEN RANBU</b>, <i> KIYOMITSU KASHUU </i> — kazuki kurogaya  </div>
<div class="lit-fc"> <b>TOUKEN RANBU</b>, <i> MITSUTADA SHOKUDAIKIRI </i> — lazarus nohr  </div>
<div class="lit-fc"> <b>TOUKEN RANBU</b>, <i> MUTSUNOKAMI YOSHIYUKI </i> — toshiaki hoshido  </div>
<div class="lit-fc"> <b>TOUKEN RANBU</b>, <i> OOKURIKARA </i> — gabriel nguyen  </div>
<div class="lit-fc"> <b>TOUKEN RANBU</b>, <i> SHISHIOU </i> — auriel nohr  </div>
<div class="lit-fc"> <b>TOUKEN RANBU</b>, <i> TSURUMARU KUNINAGA</i> — kikunosuke mikagami </div>
<div class="lit-fc"> <b>TOUKEN RANBU</b>, <i> YAMATO NO KAMI YASUSADA </i> — Aiko Hoshido  </div>
</td>
    <td>

<div class="lit-fc-subtitle"> v, w, x +  </div>
<div class="lit-fc"> <b>ANIMANGA TITLE</b>, <i> FIRST NAME LAST NAME </i> — character's first and last name  </div>
</td>
    <td>

<div class="lit-fc-subtitle"> y, z, # +  </div>
<div class="lit-fc"> <b>YU-GI-OH</b>, <i> GIRISHA SINGH </i> — aigami  </div>
</td>
  </tr>

</div>
</table>
</div>[/html]

[html]
<style>
.diverwrap {
  width: 475px;
  padding: 15px;
  border: 1px solid #efefef;
  background: #fefefe;
}

.diverchar {
  width: 475px;
  height: 180px;
}

.diversumz {
  float: left;
  background: #efefef;
  height: 100px;
  padding: 15px;
  width: 315px;
}

.divertxt {
  width: 305px;
  height: 100px;
  padding-right: 10px;
  overflow: auto;
  color: #999;
  font-family:  arial;
  font-size: 9px;
  line-height: 11px;
  text-align:  justify;
}

.divertxt::-webkit-scrollbar {width: 5px; height: 5px;}
.divertxt::-webkit-scrollbar-track {background-color: #fefefe;}
.divertxt::-webkit-scrollbar-thumb {background-color: #dfdfdf;}

.diversub {
  font-family:  bubbler one;
  text-transform: uppercase;
  color: #fefefe;
  background: #dfdfdf;
  padding: 5px;
  font-size: 14px;
  float: left;
  margin-right: 3px;
}

.divericon {
  float: right;
  padding: 15px;
  background: #dfdfdf;
  width: 100px;
  height: 100px;
}

.divericon img {
  width: 100px;
  height: 100px;
}

.divername {
  float: left;
  height: 50px;
  background: #dfdfdf;
  text-align:  left;
  width: 315px;
  line-height: 42px;
  padding: 0px 15px;
  text-transform:  uppercase;
  font-size: 20px;
  color: #fefefe;
  font-family:  bubbler one;
  overflow:  hidden;
}

.diverinfo {
  font-size: 10px;
  line-height: 0px;
  margin-top: -8px;
}

.diverapp {
  float:  right;
  height: 50px;
  width: 130px;
  background: #efefef;
  line-height: 51px;
  text-transform:  uppercase;
  font-size: 20px;
  color: #dfdfdf;
  font-family:  bubbler one;
}

.divercred {
  height: 20px;
  line-height: 20px;
  text-align:  center;
  font-family:  bubbler one;
  color: #dfdfdf;
  font-size: 9px;
  text-transform:  uppercase;
  letter-spacing: 4px;
}

.divercred a {color: #dfdfdf;}
</style>
<!-- Code désigné par Pandora. Merci de créditer l'auteur ! Lien source : http://sonderx.jcink.net/index.php?showtopic=410 -->
​

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

<center>
  <div class="diverwrap">
    <div class="diverchar">
      <div class="diversumz">
        <div class="divertxt">
          Air plant banh mi gochujang meh, cold-pressed bushwick vice fam flexitarian. Ennui franzen cronut health goth, coloring book taxidermy +1 swag iPhone raw denim mustache sriracha.  Messenger bag umami humblebrag, slow-carb small batch poutine vegan ugh quinoa lumbersexual before they sold out edison bulb. Ugh mlkshk cronut letterpress DIY artisan. Meditation ramps quinoa, poutine DIY pour-over sustainable listicle polaroid paleo kale chips typewriter. Neutra small batch cray, iceland hashtag copper mug man braid keffiyeh butcher fashion axe swag listicle. Master cleanse truffaut chartreuse squid, microdosing banjo butcher slow-carb mlkshk hoodie readymade fingerstache.
        </div>
      </div>
      <div class="divericon"style="background: #a3c662;">
         <img src="https://via.placeholder.com/100x100">
       </div>
       <div class="divername"style="background: #a3c662;">
        FIRST LAST
        <div class="diverinfo">info • info • info</div>
      </div>
      <div class="diverapp"style="color: #a3c662;">application</div>
    </div>
    <div class="diverchar" style="margin-top: 15px">
      <div class="diversumz">
        <div class="divertxt">
          Air plant banh mi gochujang meh, cold-pressed bushwick vice fam flexitarian. Ennui franzen cronut health goth, coloring book taxidermy +1 swag iPhone raw denim mustache sriracha.  Messenger bag umami humblebrag, slow-carb small batch poutine vegan ugh quinoa lumbersexual before they sold out edison bulb. Ugh mlkshk cronut letterpress DIY artisan. Meditation ramps quinoa, poutine DIY pour-over sustainable listicle polaroid paleo kale chips typewriter. Neutra small batch cray, iceland hashtag copper mug man braid keffiyeh butcher fashion axe swag listicle. Master cleanse truffaut chartreuse squid, microdosing banjo butcher slow-carb mlkshk hoodie readymade fingerstache.
        </div>
      </div>
      <div class="divericon"style="background: #bb5588;">
         <img src="https://via.placeholder.com/100x100">
       </div>
       <div class="divername"style="background: #bb5588;">
        FIRST LAST
        <div class="diverinfo">info • info • info</div>
      </div>
      <div class="diverapp"style="color: #bb5588;">application</div>
    </div>
  </div>
  <div class="divercred"><a href="http: //sonderx.jcink.net/index.php?showuser=61">pandora</a></div>
</center>

[/html]

[html]<style>
.wonmain {
  border: 1px solid #d7d7d7;
  line-height: normal;
  width: 460px;
  padding: 20px;
  background-color: white;
  color: #000;
}

.wonmain a {
  text-decoration: none;
  color: #000;
  font-weight: 900;
}

.wonmain b {
  color: #da6836;
  font-weight: 900;
}

.wontitle {
  font-family: cinzel;
  font-size: 40px;
  color: #da6836;
}

.wondesc {
  width: 300px;
  font-family: lato;
  font-weight: 400;
  font-size: 10px;
  text-align: justify;
  margin-bottom: 15px;
  color: #000;
}

.wonmiddle {
  width: 0px;
  position: relative;
  padding-bottom: 70px;
  border-right: 1px solid #000;
}

.woncenter {
  position: relative;
  right: 125px;
}

.wonleft {
  width: 250px;
  position: relative;
  right: 90px;
}

.wonleftnumber {
  font-family: cinzel;
  font-weight: 900;
  letter-spacing: -3px;
  font-size: 80px;
  color: #da6836;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}

.wonleftbox {
  position: relative;
  z-index: 2;
  right: 10px;
  top: 45px;
}

.wonleftcircle {
  position: absolute;
  right: 20px;
  font-family: arial;
  font-size: 30px;
  top: -5px;
}

.wonleftname {
  font-family: lato;
  font-weight: 900;
  color: #000;
  font-size: 10px;
  width: 200px;
  padding: 5px 0px 5px 0px;
  text-transform: uppercase;
  text-align: left;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  margin-bottom: 16px;
}

.wonlefttext {
  margin-right: 20px;
  width: 180px;
  text-align: justify;
  font-family: lato;
  font-weight: 400;
  line-height: 13px;
  font-size: 10px;
  color: #000;
}

.wonright {
  width: 250px;
  position: relative;
  left: 90px;
}

.wonrightnumber {
  font-family: cinzel;
  font-weight: 900;
  letter-spacing: -3px;
  font-size: 80px;
  color: #da6836;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 1;
}

.wonrightbox {
  position: relative;
  z-index: 2;
  left: 10px;
  top: 45px;
}

.wonrightcircle {
  position: absolute;
  left: 20px;
  font-family: arial;
  font-size: 30px;
  top: -5px;
}

.wonrightname {
  font-family: lato;
  font-weight: 900;
  color: #000;
  font-size: 10px;
  width: 200px;
  padding: 5px 0px 5px 0px;
  text-transform: uppercase;
  text-align: right;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  margin-bottom: 16px;
}

.wonrighttext {
  margin-left: 20px;
  width: 180px;
  text-align: justify;
  font-family: lato;
  font-weight: 400;
  line-height: 13px;
  font-size: 10px;
  color: #000;
}
</style>
<!-- Code désigné par Brooklyn. Merci de créditer l'auteur ! Lien source : http://cttw.jcink.net/index.php?showtopic=18107 -->
​

<link href="https: //fonts.googleapis.com/css?family=Lato: 400,900|Cinzel: 900" rel="stylesheet">

<center>
  <div class="wonmain">
    <div class="wontitle">wonderful</div>
    <div class="wondesc">
      short description here. if you don't want to add a description you can always add lyrics to supplement or just completely ignore this it doesn't really matter. <b>this is bold</b> isn't that nice.
    </div>
    <div class="wonmiddle">
      <div class="woncenter">
        <div class="wonleft">
          <div class="wonleftnumber">01</div>
          <div class="wonleftbox">
            <div class="wonleftcircle">•</div>
            <div class="wonleftname">FIRST MIDDLE LAST</div>
            <div class="wonlefttext">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget suscipit nibh, at faucibus erat. Praesent vehicula orci quis luctus pulvinar. Nulla sed maximus sapien. Donec laoreet risus eu purus volutpat efficitur. Donec arcu mauris, venenatis nec sollicitudin vel, tempus ut erat. Nulla nec ex sollicitudin, aliquet orci vel, tristique nisi. Pellentesque turpis sem, pharetra ornare mi quis, consequat tincidunt mauris. Maecenas varius vestibulum accumsan.
            </div>
          </div>
        </div>
        <div class="wonright">
          <div class="wonrightnumber">02</div>
          <div class="wonrightbox">
            <div class="wonrightcircle">•</div>
            <div class="wonrightname">FIRST MIDDLE LAST</div>
            <div class="wonrighttext">
              In a porta lorem, eget egestas sem. Sed id est vel sapien lacinia iaculis. Quisque neque neque, auctor ac maximus vitae, tristique sed tortor. Phasellus imperdiet massa in metus dapibus, sed posuere velit faucibus. Nullam hendrerit nisi ac accumsan lobortis. Donec efficitur massa elit, sit amet elementum nisi laoreet sed. Donec lorem ex, imperdiet non vulputate eget, tristique sit amet justo.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</center>[/html]

[html]<style>

@import url('https://fonts.googleapis.com/css?family=Barlow|Inconsolata|Montserrat:400,700');

.starr {
  width:
  background-color: #E1E1E1;
  padding: 5px;
  border: 1px solid #D2D2D2;
  height: 486px;
}

.starrContainer {
  background-color: #fcfcfc;
  width: 517px;
  padding: 5px 0px 5px 5px;
  border: 1px solid #D2D2D2;
  height: 473px;
}

.starrIconContainer {
  float: left;
  background-color: #F1F1F1;
  width: 124px;
  height: 124px;
  padding: 25px;
  margin: -5px 0px 0px -5px;
  border-right: 1px solid #D2D2D2;
  border-bottom: 1px solid #D2D2D2;
}

.starrIcon {
  padding: 10px;
  background-color: #FDFDFD;
  border: 1px solid #D2D2D2;
  height: 100px;
}

.starrInfoLine {width: 124px;}

.starrInfoIcon {
  width: 30px;
  height: 30px;
  background-color: #FEFEFE;
  float: left;
  font-size: 14px;
  display:  flex;
  align-items:  center;
  justify-content:  center;
  color: #CC3F64;
  border-right: 1px solid #D2D2D2;
  border-left: 1px solid #D2D2D2;
  border-bottom: 1px solid #D2D2D2;
  border-top: 1px solid #D2D2D2;
  line-height: 14px!important;
}

.starrInfo {
  float: right;
  background-color: #F7F7F7;
  padding: 25px;
  border-top: 1px solid #D2D2D2;
  border-bottom: 1px solid #D2D2D2;
  border-right: 1px solid #D2D2D2;
  margin: 5px 5px 0px 0px;
  width: 125px;
  height: 246px;
  display:  flex;
  justify-content:  space-between;
  flex-direction:  column;
}

.starrInfoBox {
  border-right: 1px solid #D2D2D2;
  border-bottom: 1px solid #D2D2D2;
  border-top: 1px solid #D2D2D2;
  background-color: #FEFEFE;
  font: 10px Barlow;
  text-align: right;
  text-transform: uppercase;
  line-height: 20px;
  height: 20px;
  overflow: auto;
  padding: 5px;
}

.starrInfoText {float: right;}

.starrName {
  background-color: #1b1b1b;
  width: 337px;
  height: 56px;
  color: #f7f7f7;
  float: right;
  margin-right: 5px;
  font-family: Montserrat;
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  line-height: 56px;
}

.starrTraits {
  width: 97px;
  height: 97px;
  border: 1px solid #D2D2D2;
  background-color: #F7F7F7;
  float: left;
  margin: 5px 0px 0px 5px;
  text-align: left;
  font-family: Montserrat;
  font-size: 10px;
  padding: 5px;
  line-height: 140%;
}

.starrTraitHd {
  font: bold 11px Barlow;
  letter-spacing: -1px;
  padding: 0px 0px 2px 0px;
  border-bottom: 1px solid #CC3F64;
  color: #1b1b1b;
  width: 50px;
  margin: auto;
  margin-bottom: 0px;
  text-align: center;
  line-height: 100%;
}

.starrTraitsScroll {
  margin-top: 1px;
  height: 82px;
  overflow: auto;
}

.starrBodyBorder {
  background-color: #FBFBFB;
  float: left;
  width: 332px;
  height: 286px;
  padding: 5px 0px 5px 0px;
  margin-left: 0px;
}

.starrBody {
  width: 335px;
  height: 296px;
  background-color: #FEFEFE;
  padding: 0px;
  border: 1px solid #D2D2D2;
  font-family: verdana;
  font-size: 10px;
  color: #8b8b8b;
  line-height: 130%;
  text-align: justify;
}

.starrCredit {
  font: bold 7px roboto;
  font:  bold 7px roboto;
  width:  50px;
  margin-left:  450px;
}

.starrCredit a {font: bold 7px roboto!important;}

.starrBodyScroll b {
  font-weight: normal;
  color: #CC3F64;
}

.starrBodyScroll i {
  font-style: normal;
  color: #CC3F64;
}

.starrBodyScroll h1 {
  font-size: 12px;
  font: bold 14px montserrat;
  color: #ccc;
  margin-bottom: 10px;
}

.starrBodyScroll {
  margin: 25px;
  height: 246px;
  overflow: auto;
  padding-right: 5px;
}

.starrInfoBox::-webkit-scrollbar {width: 2px;}
.starrInfoBox::-webkit-scrollbar-thumb {background-color: #1b1b1b;}

</style>
<!-- Code désigné par Spookie. Merci de créditer l'auteur ! Lien source : http://pixel-perfect.boards.net/thread/ … starstrukk -->
​

<div align="center">
  <div class="starr">
    <div class="starrContainer">
      <div class="starrIconContainer">
        <div class="starrIcon">
          <img src="http://placehold.it/100/CC3F64/eee.png">
        </div>
      </div>
      <div class="starrName">firstname lastname</div>
      <div class="starrTraits">
        <div class="starrTraitHd">POSITIVES</div>
        <div class="starrTraitsScroll">
          <b>+</b> h-hewwo? <br>
          <b>+</b> h-hewwo? <br>
          <b>+</b> h-hewwo? <br>
          <b>+</b> h-hewwo? <br>
          <b>+</b> h-hewwo? <br>
          <b>+</b> h-hewwo? <br>
          <b>+</b> h-hewwo? <br>
        </div>
      </div>
      <div class="starrTraits">
        <div class="starrTraitHd">NEGATIVES</div>
        <div class="starrTraitsScroll">
          <b>+</b> h-hewwo? <br>
          <b>+</b> h-hewwo? <br>
          <b>+</b> h-hewwo? <br>
          <b>+</b> h-hewwo? <br>
          <b>+</b> h-hewwo? <br>
          <b>+</b> h-hewwo? <br>
          <b>+</b> h-hewwo? <br>
        </div>
      </div>
      <div class="starrTraits">
        <div class="starrTraitHd">MISC.</div>
        <div class="starrTraitsScroll">
          <b>+</b> h-hewwo? <br>
          <b>+</b> h-hewwo? <br>
          <b>+</b> h-hewwo? <br>
          <b>+</b> h-hewwo? <br>
          <b>+</b> h-hewwo? <br>
          <b>+</b> h-hewwo? <br>
          <b>+</b> h-hewwo? <br>
        </div>
      </div>
      <div class="starrInfo">
        <div class="starrInfoLine">
          <div class="starrInfoIcon"><span class="sf sf-clock-3-o"></span></div>
          <div class="starrInfoBox">age</div>
        </div>
        <div class="starrInfoLine">
          <div class="starrInfoIcon"><span class="sf sf-constellation"></span></div>
          <div class="starrInfoBox">zodiac</div>
        </div>
        <div class="starrInfoLine">
          <div class="starrInfoIcon"><span class="sf sf-beating-heart-o"></span></div>
          <div class="starrInfoBox">sexuality</div>
        </div>
        <div class="starrInfoLine">
          <div class="starrInfoIcon"><span class="sf sf-book-o"></span></div>
          <div class="starrInfoBox">occupation</div>
        </div>
        <div class="starrInfoLine">
          <div class="starrInfoIcon"><span class="sf sf-earth-o"></span></div>
          <div class="starrInfoBox">place of origin</div>
        </div>
        <div class="starrInfoLine">
          <div class="starrInfoIcon"><span class="sf sf-user-o"></span></div>
          <div class="starrInfoBox">face claim</div>
        </div>
      </div>
      <div class="starrMain">
        <div class="starrBodyBorder">
          <div class="starrBody">
            <div class="starrBodyScroll">
              <h1>i heard there was a secret chord</h1>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales erat eu urna vulputate, eu aliquet odio sodales. Vestibulum ultrices risus vel risus semper gravida. Morbi id felis et tortor volutpat viverra id nec nisl. Sed eget sagittis neque. Nulla facilisi. Proin fringilla interdum sem sit amet aliquet. Praesent nisi nisi, sodales ac dapibus at, scelerisque pellentesque tellus. Nunc quis nibh venenatis augue lobortis lacinia. Vestibulum id magna nunc. Donec id nisl quis leo tempus pharetra. Praesent tempus scelerisque ex, eget lobortis augue interdum non. Maecenas vulputate vel orci vel pretium. Quisque euismod, nisl at cursus finibus, urna diam aliquet sapien, id rhoncus urna enim eget enim. Fusce bibendum pretium sem, iaculis gravida neque molestie at. Morbi tempus risus vitae volutpat aliquam. Nam in iaculis risus, ut finibus nulla. <br><br>
              Nulla ex nisl, accumsan sed elementum non, porttitor ut libero. Cras eleifend turpis sit amet pharetra porta. Etiam eros lorem, sollicitudin eu lectus nec, pretium tristique massa. Etiam gravida vestibulum urna. Quisque id purus rutrum, tristique nisl eget, hendrerit lacus. Aenean convallis elit eget neque sodales ornare. Praesent vulputate blandit eros, porta vestibulum sapien pulvinar eget. Suspendisse venenatis a leo in sodales. Curabitur sed nisi id nisl vestibulum accumsan vel sed libero. Donec urna tortor, fringilla sed feugiat sit amet, condimentum eu erat. <br><br>
              Nunc at efficitur turpis, non pharetra metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lectus purus, convallis et dolor id, lobortis consequat leo. Nullam tellus ex, placerat a eleifend molestie, mollis eu enim. Fusce a tortor efficitur, tincidunt ex eget, tempor nibh. Duis in sapien ultrices, varius nulla a, consequat mauris. Sed laoreet hendrerit pulvinar. Nam venenatis finibus interdum. Fusce varius odio leo, ut maximus diam laoreet et. Quisque non tempus sapien, sed lobortis nibh. Donec semper sapien nec ante ultricies, in rutrum metus luctus. Nullam sodales consectetur faucibus. Curabitur volutpat libero vitae felis congue ultricies. Curabitur eros magna, maximus ut rutrum sit amet, sollicitudin vitae lectus.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="starrCredit"><a href="http://pixel-perfect.boards.net/user/15">SELKIE</a></div>
</div>
[/html]

[html]<style>
.colorBG {
  width:400px;
}

.colorHead {
  height:100px;
  background:#ddd;
  width:400px;
  overflow:hidden;
  line-height:100px;
}

.colorWay {
  background:linear-gradient(45deg, #44558d, #b8d8da,#ddd);
  height:100px;
  width:500px;
  margin-left:-1000px;
  transition:.8s;
}

.colorFoot {
  background-color:#ddd;
  height:10px;
  overflow:hidden;
}

.colorFoot .colorWay {
  background:linear-gradient(45deg, #ddd, #b8d8da, #44558d);
  float:right;
  margin-right:-600px;
}

.colorBG:hover .colorWay {
  margin-left:0px;
  transition:.5s;
}

.colorBG:hover .colorFoot .colorWay {
  margin-right:0px;
  transition:.5s;
}

.colorText1 {
  color:#fff;
  font-family:source sans pro;
  text-transform:uppercase;
  font-size:12px;
  text-shadow:#aaa 1px 0,#aaa 0 1px,#aaa -1px 0,#aaa 0 -1px;
  float:left;
  margin-left:70px;
  transition:.5s;
  transition-delay:.3s;
}

.colorText2 {
  color:#fff;
  font-family:source sans pro;
  text-transform:uppercase;
  font-size:12px;
  text-shadow:#7590a9 1px 0,#7590a9 0 1px,#7590a9 -1px 0,#7590a9 0 -1px;
  float:left;
  margin-top:-100px;
  opacity:0;
  margin-left:90px;
  transition:.5s;
}

.colorBG:hover .colorText1 {
  opacity:0;
  margin-left:90px;
  transition:.3s;
}

.colorBG:hover .colorText2 {
  opacity:1;
  margin-left:50px;
  transition:.3s;
  transition-delay:.5s;
}

.color1 {
  float:left;
  margin-left:5px;
  opacity:.9999;
  -webkit-filter:grayscale(100%);
  -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  transition:1s;
}

.color2 {
  float:left;
  opacity:.5;
  margin-left:-20px;
  -webkit-filter:grayscale(100%);
  -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  transition:1s;
}

.colorBG:hover .color1,.colorBG:hover .color2,.colorBG:hover .colorBody {
  -webkit-filter:grayscale(0%);
  transition:1s;
}

.colorBack {
  background-color:#fff;
  width:190px;
  margin-right:-30px;
  float:right;
  -webkit-clip-path: polygon(11% 0%, 100% 0%, 75% 100%, 0% 100%);
  clip-path: polygon(13% 0%, 100% 0%, 87% 100%, 0% 100%);
  margin-top:-100px;
}

.colorBody {
  padding:10px;
  width:380px;
  background-color:#fff;
  -webkit-filter:grayscale(100%);
}

.colorPost {
  font-family:arial;
  font-size:10px;
  text-align:justify;
  border-left:#b8d8da 2px solid;
  margin:20px;
  padding:5px;
  padding-left:10px;
  line-height:13px;
}

.colorPost b {color:#5f77a5;}

.ucredits {
  font-family:trebuchet ms;
  font-size:7px;
  color:#777;
  text-transform:uppercase;
  letter-spacing:1px
}
</style>
<!-- Code désigné par Ulla. Merci de créditer l'auteur ! Lien source : http://pixel-perfect.boards.net/thread/ … n-template -->
​

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

<div align="center">
<div class="colorBG">
    <div class="colorHead">
    <div class="colorText1">my dear don’t unfold me ––</div>
    <div class="colorText2">I’m coloured in again, in you ––</div>
    <div class="colorBack">
        <div class="color1"><img src="https://cdnw.nickpic.host/vQ3i8P.png"></div>
        <div class="color2"><img src="https://cdnw.nickpic.host/vQ3i8P.png"></div>
    </div>
    <div class="colorWay"></div>
    </div>
    <div class="colorBody">
    <div class="colorPost">
        POST HERE
        <br><br>
        @[tag]
    </div>
    </div>
    <div class="colorFoot">
    <div class="colorWay"></div>
    </div>
</div>
<div class="ucredits">ulla</div>
</div>

[/html]

[html]<style>
#badau01 {
  position: relative;
  width: 400px;
  padding: 2px 6px;
  background: #fefefe;
  border: 1px solid #D8D8D8;
  margin: 10px auto;
}

.badau02 {
  margin: 4px 0;
  overflow: hidden;
  position: relative;
  width: 400px;
  height: 80px;
  background-image: url(http://placehold.it/400x80);
  background-color: #C4D5ED;
  background-blend-mode: multiply;
}

.badau02 i {
  color: red;
  font-size: 30px;
}

.bbjam01 {
  transition: 1s;
  width: 400px;
  height: 80px;
  position: absolute;
  top: 0;
  right: -240px;
  background: #C4D5ED;
}

.bbjam01 h1 {
  z-index: 2;
  color: #576F7C;
  padding-bottom: 0;
  margin: 14px 0 0 20px;
  display: block;
  width: 120px;
  height: 25px;
  text-align: center;
  font: 19px/1.5 arvo;
  text-transform: uppercase;
}

.bbjam01:after {
  width: 20px;
  height: 2px;
  display: block;
  background: white;
  content: "";
  position: absolute;
  top: 42px;
  left: 70px;
}

.bbjam01 h2 {
  color: #576F7C;
  margin: 0 0 0 20px;
  display: block;
  width: 120px;
  height: 12px;
  font: 600 8px/100% amiko;
  padding-top: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

.bbjam02 {
  border: 2px solid #C4D5ED;
  z-index: 3;
  transition: 1s;
  width: 36px;
  height: 40px;
  background: #C4D5ED;
  position: absolute;
  top: 19px;
  right: 138px;
  border-radius: 50%;
  cursor: crosshair;
  text-align: center;
  font: 30px/1.5 awesome;
  color: white;
  padding-right: 4px;
}

.bbjam03 {
  width: 200px;
  height: 80px;
  background: white;
  position: absolute;
  top: 0;
  right: -60px;
  transition: 1s;
}

.bbjam03:before, .bbjam03::before {
  width: 0;
  height: 0;
  border-right: 60px solid white;
  border-top: 80px solid transparent;
  content: "";
  display: block;
   position: absolute;
  top: 0;
  left: -60px;
}

.bbjam03 img {
  width: 50px;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: -50px;
  border: 3px solid white;
}

.bbboo01 {
  width: 170px;
  height: 50px;
  position: absolute;
  top: 10px;
  right: 10px;
  background: white;
  overflow: auto;
  border: 5px solid white;
  text-align: justify;
  font-size: 11px;
  font-family: arial;
}

.bbboo01 b {
  display: block;
  width: 80px;
  padding: 0 0 2px 6px;
  color: #576F7C;
  font: 400 10px/100% arvo !important;
  text-transform: uppercase !important;
  letter-spacing: 1px;
  margin: 4px;
  border-bottom: 1px solid #576F7C;
  text-align: left;
}

.bbboo01 b:first-letter {
  border-bottom: 2px solid #576F7C;
  padding: 2px 0;
}

.bbboo01 a {
  display: inline-block;
  background: #C4D5ED;
  font: 600 8px/1 amiko;
  min-height: 8px;
  text-transform: uppercase;
  padding: 4px;
  margin: 1px 0;
  color: white;
  text-decoration: none;
}

#badau01 input[type=checkbox] {display: none;}
#badau01 input[type=checkbox]:checked ~ .bbjam01 {right: 0; transition: 1s;}

#badau01 input[type=checkbox]:checked ~ .bbjam02 {
  transform: rotate(450deg) scale(.5);
  right: -10px;
  top: -10px;
  transition: 1s;
  background: white;
  color: #C4D5ED;
  border-color: white;
}

#badau01 input[type=checkbox]:checked ~ .bbjam01 .bbjam03 {
  right: 0;
  transition: 1.2s;
}

.nahcred33 {
  width: 400px;
  text-align: right;
  font: 10px/100% calibri;
  position: absolute;
  bottom: 5px;
  left: 5px;
}

.nahcred33 a {
  color: #576F7C;
  text-decoration: none;
}

@font-face {
  src: url('http://symmetry.b1.jcink.com/uploads/symmetry/fontawesome_webfont.ttf');
  font-family: awesome;
}

.bbboo01::-webkit-scrollbar {width: 3px;}
.bbboo01::-webkit-scrollbar-track {background: white;}
.bbboo01::-webkit-scrollbar-thumb {background: #C4D5ED;}
</style>
<!-- Code désigné par Lord licorice. Merci de créditer l'auteur ! Lien source : http://candyland-couture.com/index.php?showtopic=22182 -->
​

<link href="https://fonts.googleapis.com/css?family=Amiko:600|Arvo" rel="stylesheet">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

<div id="badau01">
  <div class="badau02" style="background-image: url(http://placehold.it/400x80)">
    <input type="checkbox" id="toggle-1">
    <label for="toggle-1" class="bbjam02"></label>
    <div class="bbjam01">
      <h1>firstname</h1>
      <h2>lastname</h2>
      <div class="bbjam03">
        <img src="http://placehold.it/100">
        <div class="bbboo01">
          "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
        </div>
      </div>
    </div>
  </div>
  <div class="badau02" style="background-image: url(http://placehold.it/400x80);">
    <input type="checkbox" id="toggle-2"><label for="toggle-2" class="bbjam02"></label><div class="bbjam01">
      <h1>firstname</h1>
      <h2>lastname</h2>
      <div class="bbjam03">
        <img src="http://i.imgur.com/x71FbsE.gif">
        <div class="bbboo01">
          "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
        </div>
      </div>
    </div>
  </div>
  <div class="nahcred33"><a href="http://candylandcouture.b1.jcink.com/index.php?showuser=3189">▼</a></div>
</div>[/html]

[html]<style>

.ltab1 {background-color: #D1CCA6; height: 5px;}
.ltab2 {background-color: #498B8C; height: 5px;}
.ltab3 {background-color: #13313B; height: 5px;}
.ltab4 {background-color: #5E5B52; height: 5px;}
.ltab5 {background-color: #C7B424; height: 5px;}

.dlust14::-webkit-scrollbar {width: 05px;}
.dlust14::-webkit-scrollbar-track {background-color: #ffffff;}
.dlust14::-webkit-scrollbar-thumb {background-color: #ebebeb;}
.dlust16::-webkit-scrollbar {width: 05px;}
.dlust16::-webkit-scrollbar-track {background-color: #ffffff;}
.dlust16::-webkit-scrollbar-thumb {background-color: #ebebeb;}

.dlust1 {
  margin-top: 10px;
  width: 400px;
  height: 126px;
  position: relative;
  border: solid 50px #eee;
}

.dlust2 {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 86px;
  width: 86px;
  padding: 10px;
  background-color: #ffffff;
  opacity: 0.7;
}

.dlust3 {
  font-family: calibri;
  font-size: 08px;
  text-transform: uppercase;
  text-align: justify;
  letter-spacing: 1px;
  color: #454545;
  line-height: 09px;
}

.dlust4 {
  position: absolute;
  top: 15px;
  left: 15px;
  font-family: calibri;
  font-size: 12px;
  text-transform: uppercase;
  text-align: justify;
  letter-spacing: 1px;
  color: #498B8C;
  line-height: 09px;
  opacity: 0.5;
}

.dlust5 {
  position: absolute;
  bottom: 15px;
  left: 101px;
  font-family: calibri;
  font-size: 12px;
  text-transform: uppercase;
  text-align: justify;
  letter-spacing: 1px;
  color: #498B8C;
  line-height: 09px;
  opacity: 0.5;
}

.dlust6 {
  margin-top: 15px;
  width: 500px;
  padding: 20px 0px;
  background-color: #eee;
  text-align: center;
  font-family: calibri;
  text-transform: uppercase;
  color: #cccccc;
  font-size: 23px;
  line-height: 22px;
}

.dlust7 {
  font-size: 08px;
  letter-spacing: 1px;
  line-height: 09px;
  color: #d7d7d7;
}

.dlust8 {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 205px;
  width: 230px;
  padding: 10px;
  overflow: hidden;
  background-color: #fafafa;
  color: #9b9b9b;
  font-family: calibri;
  font-size: 10px;
  line-height: 10px;
  text-align: justify;
  border-right: 5px solid #ffffff;
}

.dlust9 {
  background-color: #498B8C;
  padding: 2px;
  font-family: calibri;
  font-size: 08px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 08px;
  text-align: center;
  color: #fafafa;
  margin-bottom: 05px;
}

.dlust10 {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-family: calibri;
  font-size: 10px;
  letter-spacing: 1px;
  text-align: right;
  width: 460px;
  color: #d7d7d7;
  text-transform: uppercase;
  line-height: 10px;
}

.dlust11 {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #5E5B52;
  padding: 2px;
  font-family: calibri;
  font-size: 08px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 08px;
  text-align: center;
  color: #fafafa;
  margin-bottom: 05px;
  width: 180px;
}

.dlust12 {
  position: absolute;
  top: 40px;
  right: 10px;
  width: 180px;
  padding: 2px;
  text-align: center;
  font-family: calibri;
  text-transform: uppercase;
  color: #d7d7d7;
  font-size: 23px;
  line-height: 22px;
}

.dlust13 {
  margin-top: 10px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  overflow: hidden;
  border: 5px solid #ffffff;
  height: 80px;
  width: 80px;
}

.dlust14 {
  background-color: #ffffff;
  padding: 5px;
  border-top: 5px solid #fafafa;
  height: 175px;
  overflow: auto;
}

.dlust15 {
  background-color: #fafafa;
  border-left: 5px solid #ffffff;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 205px;
  width: 230px;
  padding: 10px;
  overflow: hidden;
  background-color: #fafafa;
  color: #9b9b9b;
  font-family: calibri;
  font-size: 10px;
  line-height: 10px;
  text-align: justify;
}

.dlust16 {
  background-color: #ffffff;
  padding: 5px;
  border-top: 5px solid #fafafa;
  height: 175px;
  overflow: auto;
}

.dlust17 {
  background-color: #fafafa;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 205px;
  width: 185px;
  padding: 10px;
  overflow: hidden;
  background-color: #fafafa;
  color: #9b9b9b;
  font-family: calibri;
  font-size: 10px;
  line-height: 10px;
  text-align: justify;
}

.det1 {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #13313B;
  padding: 2px;
  font-family: calibri;
  font-size: 08px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 08px;
  text-align: center;
  color: #fafafa;
  margin-bottom: 05px;
  width: 180px;
}

.det2 {
  position: absolute;
  top: 25px;
  left: 10px;
  background-color: #ffffff;
  padding: 2px;
  font-family: calibri;
  font-size: 08px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 08px;
  text-align: center;
  color: #acacac;
  margin-bottom: 05px;
  width: 180px;
}

.det3 {
  position: absolute;
  top: 40px;
  left: 10px;
  background-color: #ffffff;
  padding: 2px;
  font-family: calibri;
  font-size: 08px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 08px;
  text-align: center;
  color: #acacac;
  margin-bottom: 05px;
  width: 180px;
}

.det4 {
  position: absolute;
  top: 55px;
  left: 10px;
  background-color: #ffffff;
  padding: 2px;
  font-family: calibri;
  font-size: 08px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 08px;
  text-align: center;
  color: #acacac;
  margin-bottom: 05px;
  width: 180px;
}

.det5 {
  position: absolute;
  top: 70px;
  left: 10px;
  background-color: #ffffff;
  padding: 2px;
  font-family: calibri;
  font-size: 08px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 08px;
  text-align: center;
  color: #acacac;
  margin-bottom: 05px;
  width: 180px;
}

.det6 {
  position: absolute;
  top: 85px;
  left: 10px;
  background-color: #ffffff;
  padding: 2px;
  font-family: calibri;
  font-size: 08px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 08px;
  text-align: center;
  color: #acacac;
  margin-bottom: 05px;
  width: 180px;
}

.det7 {
  position: absolute;
  top: 100px;
  left: 10px;
  background-color: #498B8C;
  padding: 2px;
  font-family: calibri;
  font-size: 08px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 08px;
  text-align: center;
  color: #fafafa;
  margin-bottom: 05px;
  width: 180px;
}

.det8 {
  position: absolute;
  top: 115px;
  left: 10px;
  background-color: #ffffff;
  padding: 2px;
  font-family: calibri;
  font-size: 08px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 08px;
  text-align: center;
  color: #acacac;
  margin-bottom: 05px;
  width: 180px;
}

.det9 {
  position: absolute;
  top: 130px;
  left: 10px;
  background-color: #ffffff;
  padding: 2px;
  font-family: calibri;
  font-size: 08px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 08px;
  text-align: center;
  color: #acacac;
  margin-bottom: 05px;
  width: 180px;
}

.det10 {
  position: absolute;
  top: 145px;
  left: 10px;
  background-color: #ffffff;
  padding: 2px;
  font-family: calibri;
  font-size: 08px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 08px;
  text-align: center;
  color: #acacac;
  margin-bottom: 05px;
  width: 180px;
}

.det11 {
  position: absolute;
  top: 160px;
  left: 10px;
  background-color: #ffffff;
  padding: 2px;
  font-family: calibri;
  font-size: 08px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 08px;
  text-align: center;
  color: #acacac;
  margin-bottom: 05px;
  width: 180px;
}

.det12 {
  position: absolute;
  top: 175px;
  left: 10px;
  background-color: #ffffff;
  padding: 2px;
  font-family: calibri;
  font-size: 08px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 08px;
  text-align: center;
  color: #acacac;
  margin-bottom: 05px;
  width: 180px;
}

.det13 {
  position: absolute;
  top: 190px;
  left: 10px;
  background-color: #D1CCA6;
  padding: 2px;
  font-family: calibri;
  font-size: 08px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 08px;
  text-align: center;
  color: #fafafa;
  margin-bottom: 05px;
  width: 180px;
}

.det14 {
  position: absolute;
  top: 205px;
  left: 10px;
  background-color: #ffffff;
  padding: 2px;
  font-family: calibri;
  font-size: 08px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 08px;
  text-align: center;
  color: #acacac;
  margin-bottom: 05px;
  width: 180px;
}

.tabs {
  position: relative;
  width: 460;
  height:  250;
}

.tab {float: left;}

.tab label {
  display: block;
  background: #fafafa;
  padding: 02px 18px;
  margin-left: -1px;
  position: relative;
  left: 1px;
  font-family: calibri;
  font-size: 08px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #cccccc;
  line-height: 08px;
}

.tab [type=radio] {display: none;}

.content {
  position: absolute;
  top: 28px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: #fafafa;
  padding: 20px;
  height: 185px;
}

[type=radio]:checked ~ label {
  background: #fafafa;
  color: #acacac;
  border-bottom: 1px solid white;
  z-index: 2;
}

[type=radio]:checked ~ label ~ .content {z-index: 1;}

.l1 {
  width: 460px;
  height: 250px;
  padding: 20px;
  background-color: #eee;
}

.a1 {
  font-family: calibri;
  text-align: center;
  font-size: 08px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

</style>
<!-- Code désigné par Beaten Bones. Merci de créditer l'auteur ! Lien source : http://candyland-couture.com/index.php?showtopic=9461 -->
​

<center>
  <div class="dlust1">
    <img src="https://via.placeholder.com/400x125">
    <div class="dlust2">
      <table height="86">
        <tr>
          <td class="dlust3">
            She’s the most beautiful thing I have ever seen yet, I can only look and long for her.
          </td>
        </tr>
      </table>
    </div>
    <div class=" dlust4">❝</div>
    <div class="dlust5">❞</div>
  </div>
  <table width="500px" cellspacing="0">
    <tr>
      <td class="ltab1"></td>
      <td class="ltab2"></td>
      <td class="ltab3"></td>
      <td class="ltab4"></td>
      <td class="ltab5"></td>
    </tr>
  </table>
  <div class="dlust6"> first m. last
    <div class="dlust7">AGE • GENDER • ORIENTATION</div>
  </div>
  <table width="500px" cellspacing="0" style="margin-top: 15px;">
    <tr>
      <td class="ltab5"></td>
      <td class="ltab4"></td>
      <td class="ltab3"></td>
      <td class="ltab2"></td>
      <td class="ltab1"></td>
    </tr>
  </table>
  <div class="l1">
    <div class="tabs">
      <div class="tab">
        <input type="radio" id="tab-1" name="tab-group-1" checked>
        <label for="tab-1" style="margin-left: 53px;">GENERAL INFO</label>
        <div class="content">
          <div class="dlust8">
            <div class="dlust9">THE APPEARANCE</div>
            <div class="dlust14">
              Donec consequat ligula quis suscipit cursus. Curabitur hendrerit porttitor eros eu malesuada. Duis varius ante quis odio pharetra, id hendrerit sem porttitor. Integer et scelerisque sem. Quisque a sagittis est. Nulla quis vehicula leo, ultrices tincidunt dui. Donec vitae scelerisque justo. Nulla ultrices ut massa non elementum.
              <br>Praesent consectetur nunc dui, ut lacinia libero sollicitudin a. Aenean id est ut eros fermentum sagittis. Aenean imperdiet sapien at rhoncus aliquet. In adipiscing, nisl vel congue aliquam, enim enim congue nisl, a posuere nisl nulla non odio. Proin at lectus vel leo tempor pharetra. Nam eleifend dolor felis, ut suscipit metus eleifend ut. Ut tristique orci ac augue pretium, vitae euismod ante bibendum.
            </div>
          </div>
          <div class="dlust10">
            series name
            <br>fc first last name
            <br>roleplayed by oocname
          </div>
          <div class="dlust11">BASIC DETAILS</div>
          <div class="dlust12">NICKNAME
            <div class="dlust7">USERGROUP • OCCUPATION</div>
            <img src="http://i.imgur.com/TLT4FK0.jpg" class="dlust13">
          </div>
        </div>
        </div>
        <div class="tab">
          <input type="radio" id="tab-2" name="tab-group-1">
          <label for="tab-2" style="margin-left: 25px;">THE PERSONALITY</label>
          <div class="content">
            <div class="dlust15">
              <div class="dlust9" style="background-color: #C7B424;">DETAILED PERSONALITY</div>
              <div class="dlust14">
                Donec consequat ligula quis suscipit cursus. Curabitur hendrerit porttitor eros eu malesuada. Duis varius ante quis odio pharetra, id hendrerit sem porttitor. Integer et scelerisque sem. Quisque a sagittis est. Nulla quis vehicula leo, ultrices tincidunt dui. Donec vitae scelerisque justo. Nulla ultrices ut massa non elementum.
                <br>Praesent consectetur nunc dui, ut lacinia libero sollicitudin a. Aenean id est ut eros fermentum sagittis. Aenean imperdiet sapien at rhoncus aliquet. In adipiscing, nisl vel congue aliquam, enim enim congue nisl, a posuere nisl nulla non odio. Proin at lectus vel leo tempor pharetra. Nam eleifend dolor felis, ut suscipit metus eleifend ut. Ut tristique orci ac augue pretium, vitae euismod ante bibendum.
              </div>
            </div>
            <div class="det1">THINGS I LIKE</div>
            <div class="det2">LIST A LIKE HERE</div>
            <div class="det3">LIST A LIKE HERE</div>
            <div class="det4">LIST A LIKE HERE</div>
            <div class="det5">LIST A LIKE HERE</div>
            <div class="det6">LIST A LIKE HERE</div>
            <div class="det7">THINGS I DISLIKE</div>
            <div class="det8">LIST A DISLIKE HERE</div>
            <div class="det9">LIST A DISLIKE HERE</div>
            <div class="det10">LIST A DISLIKE HERE</div>
            <div class="det11">LIST A DISLIKE HERE</div>
            <div class="det12">LIST A DISLIKE HERE</div>
            <div class="det13">THINGS I FEAR</div>
            <div class="det14">LIST A FEAR HERE</div>
          </div>
        </div>
        <div class="tab">
          <input type="radio" id="tab-3" name="tab-group-1">
          <label for="tab-3" style="margin-left: 25px;">THE HISTORY</label>
          <div class="content">
            <div class="dlust8">
              <div class="dlust9">THE BACKGROUND</div>
              <div class="dlust14">
                Donec consequat ligula quis suscipit cursus. Curabitur hendrerit porttitor eros eu malesuada. Duis varius ante quis odio pharetra, id hendrerit sem porttitor. Integer et scelerisque sem. Quisque a sagittis est. Nulla quis vehicula leo, ultrices tincidunt dui. Donec vitae scelerisque justo. Nulla ultrices ut massa non elementum.
                <br>Praesent consectetur nunc dui, ut lacinia libero sollicitudin a. Aenean id est ut eros fermentum sagittis. Aenean imperdiet sapien at rhoncus aliquet. In adipiscing, nisl vel congue aliquam, enim enim congue nisl, a posuere nisl nulla non odio. Proin at lectus vel leo tempor pharetra. Nam eleifend dolor felis, ut suscipit metus eleifend ut. Ut tristique orci ac augue pretium, vitae euismod ante bibendum.
              </div>
            </div>
          <div class="dlust17">
            <div class="dlust9" style="background-color: #C7B424;">EXTRA INFORMATION</div>
            <div class="dlust16">
              Donec consequat ligula quis suscipit cursus. Curabitur hendrerit porttitor eros eu malesuada. Duis varius ante quis odio pharetra, id hendrerit sem porttitor. Integer et scelerisque sem. Quisque a sagittis est. Nulla quis vehicula leo, ultrices tincidunt dui. Donec vitae scelerisque justo. Nulla ultrices ut massa non elementum.
              <br>Praesent consectetur nunc dui, ut lacinia libero sollicitudin a. Aenean id est ut eros fermentum sagittis. Aenean imperdiet sapien at rhoncus aliquet. In adipiscing, nisl vel congue aliquam, enim enim congue nisl, a posuere nisl nulla non odio. Proin at lectus vel leo tempor pharetra. Nam eleifend dolor felis, ut suscipit metus eleifend ut. Ut tristique orci ac augue pretium, vitae euismod ante bibendum.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="a1">TEMPLATE BY DALI OF CANDYLAND COUTURE</div>
</center>[/html]