[html]<style>
.trkk {
  height: 300px;
  overflow: hidden;
  width: 590px;
  margin: 0 auto;
  position: relative;
  color: #333;
}

.trkkfl {
  width: 580px;
  box-shadow: #ccc 1px 1px 10px;
  background: url(https: //s19.postimg.org/en0b1dl8j/Untitled-2.png);
  margin: 10px 0;
  height: 275px;
  border-radius: 10px;
  display: flex;
  flex-flow: row-reverse nowrap;
  align-items: flex-start;
}

.trkkside {
  position: relative;
  z-index: 2;
  width: 150px;
  padding: 20px 0;
}

.trkkside img  {
  border: #444 solid 10px;
  border-radius: 10px;
  position: relative;
  z-index: 2;
  width: 90px;
  height: 90px;
}

.trkkside:before {
  content: '';
  display: block;
  width: 500px;
  height: 500px;
  position: absolute;
  z-index: 0;
  top: -180px;
  left: -10px;
  transform: rotate(5deg);
  background: #303030;
}

.trkktbs {
  display: flex;
  flex-flow: row wrap;
  width: 120px;
  position: relative;
  z-index: 3;
}

.trkcont label {
  transition: 300ms ease-in;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #444;
  position: relative;
  top: 140px;
  left: 135px;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  margin: 5px;
  color: #fdd166;
  font-size: 25px;
  line-height: 25px;
}

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

.trcont {
  position: absolute;
  z-index: 2;
  border: #d8d8d8 solid 1px;
  top: 20px;
  right: 50px;
  background: #e7e7e7;
  border-radius: 5px;
  width: 330px;
  padding: 10px;
}

.trcont2 {
  position: relative;
  z-index: 3;
  background: #fbfbfb;
  border-radius: 5px;
  padding: 20px;
  height: 170px;
  overflow: hidden;
}

.trcont3 {
  padding-right: 5px;
  text-align: justify;
  transition: 400ms ease;
  height: 170px;
  overflow: auto;
  position: relative;
  z-index: 3;
  top: -200px;
  font: 10px roboto;
  line-height: 13px;
}

.trcont3.two {top: 200px;}

.trcont3.image {
  padding: 0;
  overflow: hidden;
}

.trcont2 section .jiwoon {
  width: 290px;
  height: 170px;
}
 
.trkcont [type=radio]:checked ~ label {
  background: #fdd166;
  color: #393939;
}

.trkcont [type=radio]:checked ~ label ~ .trcont {z-index: 3;}
.trkcont [type=radio]:checked ~ label ~ .trcont .trcont2  {z-index: 4;}
 
.trkcont [type=radio]:checked ~ label ~ .trcont .trcont2 .trcont3  {
  z-index: 4;
  top: 0;
}
 
.trcont3: : -webkit-scrollbar {
  width: 5px;
  border-radius: 10px;
}

.trcont3: : -webkit-scrollbar-thumb {
  background: #e5e5e5;
  border-radius: 10px;
}

.trcont3 tit {
  display: block;
  font: 100 35px roboto;
  margin: 0 0 5px;
  letter-spacing: -1px;
  color: #888;
}

.trcont3 tit:First-letter {
  color: #eac875;
  font-weight: 900;
}

.trcont3 strong {
  display: block;
  border-bottom: #e7e7e7 solid 1px;
  padding: 5px;
  font: 700 10px karla;
  color: #eac875;
}

.trcont3 strong span {
  color: #444;
  padding: 0 0 0 3px;
  text-transform: lowercase;
}

.trcont3 strong nav {
  color: #444;
  margin: 20px;
  border: #e5e5e5 5px solid;
  outline: #d9d9d9 solid 1px;
  padding: 10px;
}

.trcont3 p {padding: 0 10px;}

.trcont3 b {
  color: #eac875;
  font-size: 12px;
}

.trcont3 i {
  font-size: 11px;
  font-style: italic;
}

.trcont3 blockquote {
  margin: 20px 30px;
  background: #e6e6e6;
  padding: 10px;
  font:  11px karla;
  text-transform: uppercase;
  display: block;
}

.trcont3 menu {
  text-align: center;
  color: #eac875;
  padding: 0;
  margin: 25px 50px 0;
  font: 900 85px roboto;
  line-height: 80px;
}

.trcont3 menu span {
  display: block;
  font: 9px karla;
  color: #333;
}

.trcont3 menu span b {
  font: 9px karla;
  color: #333;
}

.vcredits {
  width: 200px;
  margin: 0 auto;
  font: 9px helvetica;
  text-transform: uppercase;
  opacity: 0.8;
  color: #222;
}

.vcredits a {color: #222;}

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

<link href="https: //fonts.googleapis.com/css?family=Karla: 400,400i,700,700i|Roboto: 100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
<link href="http: //files.jcink.net/uploads/vonskins/typicons_min.css" rel="stylesheet">

<div class="trkk" align="center">
  <div class="trkkfl">
    <div class="trkkside">
      <img src="https://via.placeholder.com/100x100">
    </div>
    <div class="trkktbs">
      <div class="trkcont">
        <input type="radio" id="trk-1" name="trk" checked>
        <label for="trk-1"><i class="typcn typcn-social-instagram"></i></label>
        <div class="trcont">
          <div class="trcont2">
            <section class="trcont3 one image">
              <img class="jiwoon" src="https://via.placeholder.com/290x170">
            </section>
          </div>
        </div>
      </div>
      <div class="trkcont">
        <input type="radio" id="trk-2" name="trk">
        <label for="trk-2"><i class="typcn typcn-pen"></i></label>
        <div class="trcont">
          <div class="trcont2">
          <section class="trcont3 two">
            <tit>park jiwoon</tit>
            <strong>NICKNAME » <span>woonie, jiwoon</span></strong>
            <strong>AGE » <span>nineteen</span></strong>
            <strong>SEXUALITY » <span>heteroflexible</span></strong>
            <strong>HOBBIES » <nav>dancing especially, singing, practicing, concerts</nav></strong>
            <strong>DISLIKES » <nav>unproductivity, not enough practice, stagnation</nav></strong>
          </section>
          </div>
        </div>
      </div>
      <div class="trkcont">
        <input type="radio" id="trk-3" name="trk">
        <label for="trk-3"><i class="typcn typcn-heart-outline"></i></label>
        <div class="trcont">
          <div class="trcont2">
          <section class="trcont3 one">
            <tit>friends</tit>
            <p>
              <B>jiwoon's affections</B> toward his friends are as warm as how cold he looks outside. he gives genuinity on his smile and is not afraid to have a <b>plethora of friends.</b> He does not look for <b>social status,</b>
              but someone who can make his time worthwile and <b>fun.</b>
              <blockquote>wanted wanted wanted</blockquote>
            </p>
            <tit>enemies</tit>
            <p>
              there were times that jiwoon argued with higher ups because of <b>unfair treatments</b> or other reasons, but now that he debuted, he does his best <b>to be professional.</b> His cold looks can even rub people <b>the wrong way.</b>
              <blockquote>healthy rivalry with other groups, rivalry with a member, strained past rivals.</blockquote>
            </p>
            <tit>lovers</tit>
            <p>
              as of right now, jiwoon only aims <b>success</b> for his group and his individual success. relationships can only cause nothing but <b>strain</b> on both parties' side. As much as possible, he would like to <b>refrain from dating rumours-</b> but future isn't always what we imagine to be.
              <blockquote>someone who can change his mind and open his heart *cringeee*</blockquote>
            </p>
          </section>
        </div>
      </div>
    </div>
    <div class="trkcont">
      <input type="radio" id="trk-4" name="trk">
      <label for="trk-4"><i class="typcn typcn-user-outline"></i></label>
      <div class="trcont">
        <div class="trcont2">
          <section class="trcont3 two">
            <menu>OOC<span>CONTACT ME USING DISCORD, I BARELY USE SKYPE THESE DAYS. <b>PM FOR MY USERNAME</b></span></menu>
          </section>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>
<div class="vcredits"><a href="http: //voncodes.tumblr.com">VON</a> OF <a href="http: //candyland-couture.com/index.php?showuser=5861">CC</a></div>
[/html]

[html]<style>

.feather-in {
  width: 500px;
  height: 500px;
  background: #fff;
  padding: 10px;
  text-align: left;
  font-family: Source Sans Pro;
  overflow: hidden;
  line-height: 1.2;
  border: 1px solid #f1f1f1;
}

.feather-out {
  padding: 20px;
  border: 1px solid #f1f1f1;
  width: 520px
}

.feather-case {
  width: 300px;
  height: 350px;
  margin-top:60px;
  padding: 10px;
  position: relative;
  background: #f7f7f7;
}

.feather-one label {
  position: absolute;
  margin-right: 20px;
  margin-top: -75px;
  float: left;
}

.feather-one [type=radio] {display: none;}

.feather-two {
  border-radius: 100%;
  overflow: hidden;
  float: left;
  border: 5px solid #fff;
  box-shadow: 0px 0px 2px 0px #aaa;
}

.feather-three {
  background: #fff;
  position: absolute;
  padding: 20px;
  font-size: 10px;
  font-family: Roboto;
  color: #535353;
  height: 310px;
  position: absolute;
  width: 260px;
  -webkit-transition: 0.4s;
  opacity: 0;
  overflow: auto;
  text-align: justify;
}

.feather-three h1 {
  letter-spacing: -1px;
  text-transform: lowercase;
  color: #E79EA9;
  font-size: 23px;
}

.feather-three h2 {
  letter-spacing: -1px;
  text-transform: lowercase;
  color: #87CEEB;
  font-size: 23px;
}

.feather-three h3 {
  letter-spacing: -1px;
  text-transform: lowercase;
  color: #70DB93;
  font-size: 23px;
}

[type=radio]:checked ~ label {animation: shake 2s;}
.feather-one [type=radio]:checked ~ label ~ .feather-three {z-index: 3; opacity: 1;}
.feather-one [type=radio]:checked ~ label ~ .feather-four {opacity: 1;}
.feather-one [type=radio]:checked ~ label ~ .feather-five {opacity: 1;}

@keyframes shake {
  1% {transform: rotate(10deg);}
  3% {transform: rotate(12deg);}
  5% {transform: rotate(15deg);}
  7% {transform: rotate(12deg);}
  9% {transform: rotate(10deg);}
  11% {transform: rotate(0deg);}
  13% {transform: rotate(-10deg);}
  15% {transform: rotate(-12deg);}
  17% {transform: rotate(-15deg);}
  19% {transform: rotate(-12deg);}
}

#scrollers::-webkit-scrollbar {width: 15px;}

#scrollers::-webkit-scrollbar-thumb {width: 10px; background: #fff; border: 1px solid #e4e4e4;}

.feather-four {
  position: absolute;
  margin-top: -10px;
  border: 10px solid #f5f5f5;
  width: 150px;
  padding: 10px;
  opacity: 0;
  height: 330px;
  -webkit-transition: 0.4s;
}

.feather-five {
  position:absolute;
  bottom: -70px;
  left: 0px;
  border: 10px solid #f7f7f7;
  padding: 7px;
  width: 466px;
  font-family: Montserrat;
  font-size: 25px;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  text-align:right;
  opacity: 0;
  -webkit-transition: 0.4s;
}

.feather-six {
  font-family: Roboto;
  font-size: 13px;
  border-top: 1px solid;
  width: 400px;
  float: right;
}

.feather-ex {
  padding: 10px;
  color: #999;
  letter-spacing: 2px;
  font-size: 10px;
}

.feather-ex b, .feather-ex a {
  color: #fff;
  padding: 5px;
  margin-right: 5px;
  border-radius: 2px;
  letter-spacing: 0px;
  font-size: 11px;
}

#blossom {background: #E79EA9;}
#bubbles {background: #87CEEB;}
#buttercup {background: #70DB93;}
#princess {background: #EDCB62;}
#purple {background: #CD96CD;}
#mainacc {background: #F4A460;}

.bimg {
  width: 170px;
  height: 350px;
  margin: -10px;
  opacity: 0.2
}

.bimg2{
  width: 40px;
  float: left;
  margin: 3px;
}

.fcredits {
  height: 10px;
  font-size: 11px;
  text-align: center;
  color: #EDCB62;
}
</style>
<!-- Code désigné par Xion. Merci de créditer l'auteur ! Lien source : http://outofcontrolx.b1.jcink.com/index … topic=1018 -->
​

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

<center>
  <div class="feather-out">
  <div class="feather-in">
    <div class="feather-case">
      <div class="feather-one">
        <input type="radio" id="tab-1" name="tabs-group-1">
        <label for="tab-1">
          <div class="feather-two"><img src="http://placehold.it/50x50/F4F4F4"></div>
        </label>
        <div class="feather-three" id="scrollers">
          <h1>one</h1>
          This is where the shipper goes. Explain all there is to be explained. Write all there is to be written. Say all there is to be said. Ask all there is to be asked.
          <div class="feather-ex">
            <b id="blossom">namelink</b>relationship<br>
          </div>
          <br>
          <h2>two</h2>
          I'm crazy for you. Touch me once and you know it's true. I never wanted anyone like this. It's all brand new. You'll feel it in my kiss. I'm crazy for you.
          <div class="feather-ex">
            <b id="blossom">namelink</b>relationship<br>
          </div>
          <br>
          <h3>three</h3>When I try to explain it I be sounding insane The words don't ever come out right I get all tongue-tied and twisted. I can't explain what I'm feeling. And I say, baby, baby,
          <div class="feather-ex">
            <b id="blossom">namelink</b>relationship<br>
          </div>
        </div>
        <div class="feather-four" style="background:url('http://placehold.it/150x330/F4F4F4');background-size: cover; margin-left: 300px;">
          <img src="https://s12.postimg.org/tkyqyr43x/key.pngg" class="bimg">
        </div>
        <div class="feather-five" id="blossom">
          <img src="https://cdn1.iconfinder.com/data/icons/basic-ui-elements-color/700/07_star-128.png" class="bimg2">
          Blossom
          <div class="feather-six">short description</div>
        </div>
      </div> 
      <div class="feather-one" style="margin-left: 80px;">
        <input type="radio" id="tab-2" name="tabs-group-1">
        <label for="tab-2">
          <div class="feather-two">
            <img src="http://placehold.it/50x50/F4F4F4">
          </div>
          </label>
          <div class="feather-three" id="scrollers" style="margin-left:-80px;">
            shipper here!
          </div>
          <div class="feather-four" style="background:url('http://placehold.it/150x330/F4F4F4');background-size: cover;margin-left:220px;">
            <img src="https://s12.postimg.org/tkyqyr43x/key.pngg" class="bimg"></div>
            <div class="feather-five" id="bubbles">
              <img src="https://cdn1.iconfinder.com/data/icons/basic-ui-elements-color/700/07_star-128.png" class="bimg2">
              Bubbles
              <div class="feather-six">
                short description
              </div>
            </div>
          </div>
          <div class="feather-one" style="margin-left: 160px;">
            <input type="radio" id="tab-3" name="tabs-group-1">
            <label for="tab-3">
              <div class="feather-two"><img src="http://placehold.it/50x50/F4F4F4"></div>
            </label>
            <div class="feather-three" id="scrollers" style="margin-left:-160px;">
              shipper here!
            </div>
            <div class="feather-four" style="background:url('http://placehold.it/150x330/F4F4F4');background-size: cover;margin-left:140px;">
              <img src="https://s12.postimg.org/tkyqyr43x/key.pngg" class="bimg"></div>
              <div class="feather-five" id="buttercup"><img src="https://cdn1.iconfinder.com/data/icons/basic-ui-elements-color/700/07_star-128.png" class="bimg2">
                Buttercup
                <div class="feather-six">
                  short description
                </div>
              </div>
            </div>
            <div class="feather-one" style="margin-left: 240px;">
              <input type="radio" id="tab-4" name="tabs-group-1">
              <label for="tab-4">
                <div class="feather-two"><img src="http://placehold.it/50x50/F4F4F4"></div>
              </label>
              <div class="feather-three" id="scrollers" style="margin-left:-240px;">
                shipper here!
              </div>
              <div class="feather-four" style="background:url('http://placehold.it/150x330/F4F4F4');background-size: cover;margin-left:60px;">
                <img src="https://s12.postimg.org/tkyqyr43x/key.pngg" class="bimg">
              </div>
              <div class="feather-five" id="princess">
                <img src="https://cdn1.iconfinder.com/data/icons/basic-ui-elements-color/700/07_star-128.png" class="bimg2">
                Princess
                <div class="feather-six">
                  short description
                </div>
              </div>
            </div>
            <div class="feather-one" style="margin-left: 320px;">
              <input type="radio" id="tab-5" name="tabs-group-1">
              <label for="tab-5">
                <div class="feather-two"><img src="http://placehold.it/50x50/F4F4F4"></div>
              </label>
              <div class="feather-three" id="scrollers" style="margin-left:-320px;">
                shipper here!
              </div>
              <div class="feather-four" style="background:url('http://placehold.it/150x330/F4F4F4');background-size: cover;margin-left:-20px;">
                <img src="https://s12.postimg.org/tkyqyr43x/key.pngg" class="bimg""></div>
                <div class="feather-five" id="purple">
                  <img src="https://cdn1.iconfinder.com/data/icons/basic-ui-elements-color/700/07_star-128.png" class="bimg2">
                  first last
                  <div class="feather-six">
                    short description
                  </div>
                </div>
              </div>
              <div class="feather-one" style="margin-left: 400px;">
                <input type="radio" id="tab-6" name="tabs-group-1" checked>
                <label for="tab-6">
                  <div class="feather-two"><img src="https://cdn1.iconfinder.com/data/icons/basic-ui-elements-color/700/07_star-128.png" width=50></div>
                </label>
                <div class="feather-three" id="scrollers" style="margin-left:-400px;">     
                  <h1>one</h1>
                  This is where the shipper goes. Explain all there is to be explained. Write all there is to be written. Say all there is to be said. Ask all there is to be asked.
                  <div class="feather-ex">
                    <b id="mainacc">namelink</b>relationship<br>
                  </div>
                  <br>
                  <h2>two</h2>
                  I'm crazy for you. Touch me once and you know it's true. I never wanted anyone like this. It's all brand new. You'll feel it in my kiss. I'm crazy for you.
                  <div class="feather-ex">
                    <b id="mainacc">namelink</b>relationship<br>
                  </div>
                  <br>
                  <h3>three</h3>When I try to explain it I be sounding insane The words don't ever come out right I get all tongue-tied and twisted. I can't explain what I'm feeling. And I say, baby, baby,
                  <div class="feather-ex">
                    <b id="mainacc">namelink</b>relationship<br>
                  </div>
                </div>
                <div class="feather-four" style="background:url('http://placehold.it/150x330/F4F4F4');background-size: cover;margin-left:-100px;">
                  <img src="https://s12.postimg.org/tkyqyr43x/key.pngg" class="bimg"></div>
                  <div class="feather-five" id="mainacc">
                    <img src="https://cdn1.iconfinder.com/data/icons/basic-ui-elements-color/700/07_star-128.png" class="bimg2">
                    name's shipper
                    <div class="feather-six">
                      short description
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div><br>
        </center>
  </div>
</div>

[/html]

[html]<style>

.jlollipop1 { background-image: url(200x350 URL HERE); }
@font-face {
  font-family: 'Swirl';
  src: url('http://abandonedstudio.b1.jcink.com/uploads/abandonedstudio/Fonts/Vintage_Decorative_Signs_2/vintage_decorative_signs_2_webfont.eot');
  src: url('http://abandonedstudio.b1.jcink.com/uploads/abandonedstudio/Fonts/Vintage_Decorative_Signs_2/vintage_decorative_signs_2_webfont.eot?#iefix') format('embedded-opentype'),
       url('http://abandonedstudio.b1.jcink.com/uploads/abandonedstudio/Fonts/Vintage_Decorative_Signs_2/vintage_decorative_signs_2_webfont.woff') format('woff'),
       url('http://abandonedstudio.b1.jcink.com/uploads/abandonedstudio/Fonts/Vintage_Decorative_Signs_2/vintage_decorative_signs_2_webfont.ttf') format('truetype'),
       url('http://abandonedstudio.b1.jcink.com/uploads/abandonedstudio/Fonts/Vintage_Decorative_Signs_2/vintage_decorative_signs_2_webfont.svg#vintage_decorative_signs_2Rg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@keyframes lollipop {
  0%, 100% {transform: scale(1)}
  50% {transform: scale(1.5); opacity: 0.5;}
}
 
@-webkit-keyframes lollipop {
  0%, 100% {-webkit-transform: scale(1)}
  50% {-webkit-transform: scale(1.5); opacity: 0.5;}
}
 
@-moz-keyframes lollipop {
  0%, 100% {-moz-transform: scale(1)}
  50% {-moz-transform: scale(1.5); opacity: 0.5;}
}

@-o-keyframes lollipop {
  0%, 100% {-o-transform: scale(1)}
  50% {-o-transform: scale(1.5); opacity: 0.5;}
}
 
.jlollipop {
  width: 425px;
  height: 350px;
  background-color: #fdfdfd;
  margin: 10px auto;
  padding: 5px;
  box-shadow: 0px 0px 1px #999;
  font: normal normal normal 10px/110% 'Calibri';
  text-align: justify;
  color: #5c2668;
}

.jlollipop ::-webkit-scrollbar {background: #e8e8ea; width: 5px; border: 2px solid #fff;}
.jlollipop ::-webkit-scrollbar-thumb {background: #e9ecff;}
.jlollipop ::-webkit-scrollbar-corner {background: #000;}
 
.jlollipop1 {
  width: 200px;
  height: 350px;
  background-color: #f1f1f1;
  float: left;
  position: relative;
  overflow: hidden;
}
 
.jlollipop2 {
  width: 220px;
  height: 350px;
  float: right;
  position: relative;
}
 
.jlollipop3 {
  width: 210px;
  background-color: #f2a0a0;
  font: normal normal 700 8.5px/100% 'Calibri';
  text-transform: uppercase;
  padding: 5px;
  letter-spacing: 1px;
  text-align: center;
  position: absolute;
  bottom: 0px;
  right: 0px;
}
 
.jlollipop4 {
  width: 184px;
  height: 280px;
  margin: 0px auto;
  overflow: auto;
  padding: 0px 3px;
}
 
.jlollipop5 {
  width: 200px;
  height: 350px;
  background-color: #c0b1d8;
  opacity: 0.7;
  position: absolute;
  top: 350px;
  left: 0px;
  transition: all 0.6s linear 0s;
  -webkit-transition: all 0.6s linear 0s;
  -moz-transition: all 0.6s linear 0s;
  -o-transition: all 0.6s linear 0s;
}
 
.jlollipop6 {
  width: 200px;
  height: 350px;
  position: absolute;
  top: 0px;
  left: -200px;
  transition: all 0.6s linear 0s;
  -webkit-transition: all 0.6s linear 0s;
  -moz-transition: all 0.6s linear 0s;
  -o-transition: all 0.6s linear 0s;
}
 
.jlollipop:hover .jlollipop5 {
  top: 0px;
  transition: all 0.6s linear 0s;
  -webkit-transition: all 0.6s linear 0s;
  -moz-transition: all 0.6s linear 0s;
  -o-transition: all 0.6s linear 0s;
}
 
.jlollipop:hover .jlollipop6 {
  left: 0px;
  transition: all 0.6s linear 0s;
  -webkit-transition: all 0.6s linear 0s;
  -moz-transition: all 0.6s linear 0s;
  -o-transition: all 0.6s linear 0s;
}
 
.jlollipop h2 {
  display: block;
  margin: 5px auto;;
  background-color: #c0b1d8;
  width: 130px;
  padding: 3px 10px;
  font: normal normal 700 8px/100% 'Calibri';
  text-transform: uppercase;
  text-align: center;
}
 
.jlollipop h3 {
  text-align: center;
  margin: 0px;
  font: normal normal normal 75px/10% 'Swirl';
  opacity: 0.8;
}
 
.jlollipop2 h1 {
  margin: 3px;
  font: italic normal 700 22px/100% 'Times';
  text-transform: lowercase;
  letter-spacing: 0px;
  text-align: center;
  color: #f2a0a0;
}
 
.bubblecontainer {
  width: 70px;
  height: 20px;
  margin: -7px auto 5px;
}
 
.bubblecontainer span {
  width: 10px;
  height: 10px;
  background-color: #dfd6ea;
  display: inline-block;
  margin: 10px 3px;
  border-radius: 50%;
  opacity: 0.9;
  animation: lollipop 5s linear 0s infinite alternate;
  -webkit-animation: lollipop 5s linear 0s infinite alternate;
  -moz-animation: lollipop 5s linear 0s infinite alternate;
  -o-animation: lollipop 5s linear 0s infinite alternate;
}

.bubblecontainer span:nth-of-type(2) {
  background-color: #dfd6ea;
  animation: lollipop 5s linear 0.6s infinite alternate;
  -webkit-animation: lollipop 5s linear 0.6s infinite alternate;
  -moz-animation: lollipop 5s linear 0.6s infinite alternate;
  -o-animation: lollipop 5s linear 0.6s infinite alternate;
}
 
.bubblecontainer span:nth-of-type(3) {
  background-color: #dfd6ea;
  animation: lollipop 5s linear 1.2s infinite alternate;
  -webkit-animation: lollipop 5s linear 1.2s infinite alternate;
  -moz-animation: lollipop 5s linear 1.2s infinite alternate;
  -o-animation: lollipop 5s linear 1.2s infinite alternate;
}
 
.jlollipop h3:nth-of-type(1) {
  line-height: 90%;
  margin-top: 40px;
}

.pcredits {
  width: 430px;
  font-family: Arial;
  margin: 0px auto;
  font-size: 25px;
  text-align: right;
  line-height: 70%;
}
</style>
<!-- Code désigné par Thunderstruck. Merci de créditer l'auteur ! Lien source : http://candyland-couture.com/index.php?showtopic=13913 -->
​

<link rel="stylesheet" type="text/css" href="http://abandonedstudio.b1.jcink.com/uploads/abandonedstudio/Shippers/Princess.css">

<div class="jlollipop">
<div class="jlollipop1">
    <div class="jlollipop5"></div>
    <div class="jlollipop6">
    <h3>♕</h3>
    <h2>trait</h2>
    <h2>trait 2</h2>
    <h2>trait 3</h2>
    <h2>trait 4</h2>
    <h2>these can be a little longer if you want that works just fine it'll be okay</h2>
    <h3>j</h3> 
    </div>
</div>
<div class="jlollipop2">
    <h1>firstname lastname</h1>
    <div class="bubblecontainer">
    <center>
        <span></span>
        <span></span>
        <span></span>
    </center>
    </div>
    <div class="jlollipop4">
    Thank you Kayla for the placeholder image. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
    </div>
    <div class="jlollipop3">age. membergroup. </div>
</div>
</div>
<div class="pcredits"><a href="http://z10.invisionfree.com/CAUTIONTOTHEWIND/index.php?showuser=26371">•</a><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=4829">•</a><a href="http://wecode.jcink.net/index.php?showuser=268">•</a><a href="http://candylandcouture.b1.jcink.com/index.php?showuser=3717">•</a></div>
[/html]

[html]
<style>
.character-top {
  background-image: url(http://i.imgbox.com/jxV5grOw.png);
  background-color: #beefe4;
  border: 5px solid #fff;
  width:460px;
  padding: 20px;
  overflow: hidden;
  height: 360px;
}

.character-title {
  background-color: rgba(190, 239, 228, 0.9);
  width: 200px;
  height: 110px;
  padding: 20px;
  position: relative;
  top: 100px;
  z-index: 3;
  border: 5px solid #fff;
}

.character-inside {
  background-color: #fff;
  height: 320px;
  padding: 20px;
  position: relative;
  z-index: 4;
  top: -160px;
}

.character-name {
  font-family: lato;
  font-size: 30px;
  font-style: italic;
  letter-spacing: 0px;
  font-weight: 900;
  text-align: center;
  line-height: 30px;
  color: #fff;
  text-transform: lowercase;
}

.character-button {
  background-color: #fff;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #beefe4;
  font-family: roboto;
  font-size: 35px;
  margin-top: 15px;
  transition: 0.5s ease-in-out all;
  -webkit-transition: 0.5s ease-in-out all;
  -moz-transition: 0.5s ease-in-out all;
}

.character-button:hover {
  cursor: pointer;
  transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  font-size: 40px;
  color: #6c605e;
}

.character-line {
  background-color: #beefe4;
  height: 3px;
  width: 50px;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

.inner {margin-top: 200px;}
.hidden {display: none;}

.character-img {
  background-color: #f9f9f9;
  width: 180px;
  height: 320px;
  float: left;
  background-image: url(http://i.imgbox.com/e7fn217e.png);
}

.character-main {
  background-color: #fff;
  width: 180px;
  height: 280px;
  padding: 20px;
  float: left;
  margin-left: 20px;
  color: #807c78;
  font-family: lato;
  font-size: 10px;
  text-align: justify;
  line-height: 13px;
  overflow: auto;
}

.character-main h1 {
  font-family: lato;
  font-size: 30px;
  letter-spacing: -1px;
  font-weight: bold;
  font-style: italic;
  color: #6c605e;
  line-height: 30px;
  margin: 0px;
  padding: 0px;
}

.character-main::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #ccc;
  border: 3px solid #fff;
}

.character-main::-webkit-scrollbar-thumb {
  background: #beefe4; 
  border: 2px solid #fff;
}

.bounce {
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
}

@keyframes bounce {
  0% {transform: translateY(0px);}
  25% {transform: translateY(-5px);}
  50% {transform: translateY(0px);}
  75% {transform: translateY(-10px);}
}

.r1 {
  font-family: roboto;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 12px;
  margin-top: 5px;
  color: #6c605e;
}

.r2 {
  font-family: roboto;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 12px;
  margin-top: 5px;
  color: #beefe4;
}

.r3 {
  font-family: arial;
  font-size: 8px;
  letter-spacing: 3px;
}

</style>
<!-- Code désigné par Rimychu. Merci de créditer l'auteur ! Lien source :
http://outofcontrolx.b1.jcink.com/index … wtopic=556 -->
​

<link href='https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic,900,900italic,300,300italic|Roboto:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>

<center>
  <div class="character-top">
    <div class="character-title"> 
      <div class="character-name">character name</div>
      <div class="r1">AGE - SEXUALITY - GENDER</div>
      <div class="character-button bounce"> ✛</div>
    </div>
    <div class="character-inside hidden">
      <div class="character-img">
        <div class="character-button inner">✛</div>
      </div>
      <div class="character-main">
        <h1><span style="color: #beefe4">ab</span>out </h1>
        A paragraph or so about your character who they are, what they do, and how they interact with other characters.
        <div class="character-line"></div>
        <h1><span style="color: #beefe4">fr</span>iends</h1>
        Lorem ipsum dolor sit amet, dolor partem omnesque at his, agam putent scriptorem ex eam. Commune offendit voluptatibus id eos, eam euismod lobortis ex, dolor dolorem insolens has eu. Quem altera quidam vel ne, cu summo molestiae quo. Adhuc intellegebat ad nec, nec putent moderatius ad.
        Pro in civibus perpetua, ei feugiat intellegat cum, nostrud alterum omittantur per et. Mel feugait sapientem reformidans et, in vim vivendo invidunt. Quas pericula delicatissimi id eum, no eam debet vocent accusamus, ius enim cetero et. Harum perpetua senserit ex mel, nec eu facer graeci.
        Eum at eius appareat. Eu mundi diceret legendos vix, civibus minimum atomorum ne pri, vero percipitur repudiandae eu per. Ex laoreet honestatis qui, possit oporteat ullamcorper ei vel. Putant facilis te vix, eum an diam brute. Ex odio eligendi mel, quo ne paulo reprimique, cu duo mutat soluta impetus.
        <div class="r2"> WANTS,</div>
        list, your wants, here. if you do not want to have this section, just delete it off.
        <div class="character-line"> </div>
        <h1><span style="color: #beefe4">en</span>emies</h1>
        Lorem ipsum dolor sit amet, dolor partem omnesque at his, agam putent scriptorem ex eam. Commune offendit voluptatibus id eos, eam euismod lobortis ex, dolor dolorem insolens has eu. Quem altera quidam vel ne, cu summo molestiae quo. Adhuc intellegebat ad nec, nec putent moderatius ad.
        Pro in civibus perpetua, ei feugiat intellegat cum, nostrud alterum omittantur per et. Mel feugait sapientem reformidans et, in vim vivendo invidunt. Quas pericula delicatissimi id eum, no eam debet vocent accusamus, ius enim cetero et. Harum perpetua senserit ex mel, nec eu facer graeci.
        Eum at eius appareat. Eu mundi diceret legendos vix, civibus minimum atomorum ne pri, vero percipitur repudiandae eu per. Ex laoreet honestatis qui, possit oporteat ullamcorper ei vel. Putant facilis te vix, eum an diam brute. Ex odio eligendi mel, quo ne paulo reprimique, cu duo mutat soluta impetus..
        <div class="r2"> WANTS, </div>
        list, your wants, here. if you do not want to have this section, just delete it off.
        <div class="character-line"></div>
        <h1><span style="color: #beefe4">lo</span>vers</h1>
        Lorem ipsum dolor sit amet, dolor partem omnesque at his, agam putent scriptorem ex eam. Commune offendit voluptatibus id eos, eam euismod lobortis ex, dolor dolorem insolens has eu. Quem altera quidam vel ne, cu summo molestiae quo. Adhuc intellegebat ad nec, nec putent moderatius ad.
        Pro in civibus perpetua, ei feugiat intellegat cum, nostrud alterum omittantur per et. Mel feugait sapientem reformidans et, in vim vivendo invidunt. Quas pericula delicatissimi id eum, no eam debet vocent accusamus, ius enim cetero et. Harum perpetua senserit ex mel, nec eu facer graeci.
        Eum at eius appareat. Eu mundi diceret legendos vix, civibus minimum atomorum ne pri, vero percipitur repudiandae eu per. Ex laoreet honestatis qui, possit oporteat ullamcorper ei vel. Putant facilis te vix, eum an diam brute. Ex odio eligendi mel, quo ne paulo reprimique, cu duo mutat soluta impetus..
        <div class="r2"> WANTS, </div>
        list, your wants, here. if you do not want to have this section, just delete it off.
      </div>
    </div>
  </div>
  <div class="r3">— <a href="http://outofcontrolx.b1.jcink.com/index.php?showuser=1">  RIMY ♥ @ OOC </a> —</div>
</center>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".character-button").click(function(){
        $(".character-inside").toggle(1000);
    });
});
</script>
[/html]

[html]<style>
#oscar {
  height: 440px;
  width: 550px;
  background: none;
  position: relative;
  margin: auto;
  overflow: hidden
}

#oscar bg {
  height: 440px;
  width: 550px;
  position: absolute;
  background-size: cover;
  filter: grayscale(100%) contrast(60%);
  background-image: url(https://media.gq.com/photos/5668708593d … 0116-5.jpg);
}

#oscar sc1 {
  height: 440px;
  width: 550px;
  position: absolute;
  mix-blend-mode: multiply;
  background: #672B33;
}

#oscar-name {
  height: 105px;
  width: 300px;
  overflow: hidden;
  background: none;
  position: absolute;
  left: 200px;
  top: 240px;
}

#oscar-name nm {
  position: absolute;
  height: 75px;
  width: 300px;
  display: block;
  font-family: playfair display;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 45px;
  line-height: 35px;
  color: #fff;
  left: 0;
  transition: 1.2s ease-in-out 0.1s;
}

#oscar:hover #oscar-name nm {
  left: -300px;
  transition-delay: 0s;
}

#oscar li1 {
  height: 150px;
  width: 1px;
  background: none;
  position: absolute;
  overflow: hidden;
  left: 185px;
  bottom: 46px;
}

#oscar li2 {
  height: 150px;
  width: 1px;
  background: #fff;
  position: absolute;
  transition: 0.7s ease-in-out;
  top: 0;
}

#oscar:hover li2 {
  top: -150px;
  transition-delay: 0.7s;
}

#oscar info {
  height: 25px;
  width: 300px;
  background: none;
  position: absolute;
  top: 80px;
  display: block;
  line-height: 25px;
  font-size: 11px;
  font-family: roboto condensed;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-style: italic;
  color: #fff;
  left: 0;
   transition: 1.2s ease-in-out 0.1s;
}

#oscar:hover #oscar-name info {
  left: -300px;
  transition-delay: 0s;
}

#oscar-main {
height: 440px;
  width: 350px;
  background: rgba(0,0,0,0.6);
  position: absolute;
  right: -350px;
  transition: 1s ease}

#oscar:hover #oscar-main {
transition-delay: 1.1s;
  right: 0}

#oscar-tab1+label, #oscar-tab2+label, #oscar-tab3+label, #oscar-tab4+label, #oscar-tab5+label {
  height: 45px;
  width: 45px;
  border: 3px double #fff;
  position: relative;
  float: left;
  margin-right: 11px;
  top: 70px;
  left: 40px;
  box-sizing: border-box;
  cursor: crosshair;
}

#oscar-main input {display: none}

#oscar-main img {
  height: 39px;
  width: 39px;
  object-fit: cover;
  filter: grayscale(100%) brightness(90%);
  transition: 0.5s;
}

#oscar-tab1:checked+label > img, #oscar-tab2:checked+label > img, #oscar-tab3:checked+label > img, #oscar-tab4:checked+label > img, #oscar-tab5:checked+label > img {filter: grayscale(0%)}

#oscar-main li1 {
  width: 215px;
  height: 1px;
  position: absolute;
  background: #672B33;
  top: 140px;
  left: 65px;
}

#oscar-ttl {
  height: 20px;
  width: 100px;
  background: none;
  position: absolute;
  right: 40px;
  top: 40px;
  font-family: roboto condensed;
  text-transform: uppercase;
  font-style: italic;
  color: #fff;
  text-align: right;
  font-size: 11px;
  line-height: 25px;
  letter-spacing: 2px;
}

#oscar-ttl > frie, #oscar-ttl > enem, #oscar-ttl > abt, #oscar-ttl > lov, #oscar-ttl > oth {
  opacity: 0;
  z-index: 1;
  position: absolute;
  left: 0;
  width: 100px;
  height: 25px;
  top: 0;
  line-height: 20px;
  transition: 0.5s;
}

#oscar-tab1:checked+label ~  #oscar-ttl > abt {opacity: 1}
#oscar-tab2:checked+label ~  #oscar-ttl > frie {opacity: 1}
#oscar-tab3:checked+label ~  #oscar-ttl > enem {opacity: 1}
#oscar-tab4:checked+label ~  #oscar-ttl > lov {opacity: 1}
#oscar-tab5:checked+label ~  #oscar-ttl > oth {opacity: 1}

#oscar-cont1, #oscar-cont2, #oscar-cont3, #oscar-cont4, #oscar-cont5 {
  height: 240px;
  width: 270px;
  box-sizing: border-box;
  z-index: 1;
  background: #111;
  position: absolute;
  left: 40px;
  top: 165px;
  border: 20px solid transparent;
  border-right: 12px solid transparent;
  padding-right: 8px;
  overflow: auto;
  font-family: roboto;
  color: #eee;
  font-size: 10px;
  line-height: 15px;
  text-align: justify;
  opacity: 0;
}

#oscar-main h1 {
  font-family: playfair display;
  color: #672B33;
  margin-top: 0;
  margin-bottom: 15px;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 20px;
  line-height: 20px;
}

#oscar-tab1:checked+label ~  #oscar-cont1 {
  opacity: 1;
  z-index: 2;
}

#oscar-tab2:checked+label ~  #oscar-cont2 {
  opacity: 1;
  z-index: 2;
}

#oscar-tab3:checked+label ~  #oscar-cont3 {
  opacity: 1;
  z-index: 2;
}

#oscar-tab4:checked+label ~  #oscar-cont4 {
  opacity: 1;
  z-index: 2;
}

#oscar-tab5:checked+label ~  #oscar-cont5 {
opacity: 1;
  z-index: 2;
}

#oscar-descs {
  height: 380px;
  width: 140px;
  background: none;
  position: absolute;
  left: 30px;
  top: 30px;
  overflow: auto;
  box-sizing: border-box;
  border: 10px solid transparent;
  opacity: 0;
  transition: 0.7s ease;
}

#oscar:hover #oscar-descs {
  opacity: 1;
  transition-delay: 1.1s;
}

#oscar-descs des {
  border-bottom: 1px solid #fff;
  display: block;
  text-align: right;
  padding: 10px 0px 10px 0px;
  line-height: 14px;
  font-size: 10px;
  font-family: roboto condensed;
  text-transform: uppercase;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  letter-spacing: 2px;
}

#oscar-descs des:nth-child(1) {padding: 0px 0px 10px 0px}
#oscar-descs::-webkit-scrollbar {width: 0}
#oscar-cont1::-webkit-scrollbar, #oscar-cont2::-webkit-scrollbar, #oscar-cont3::-webkit-scrollbar, #oscar-cont4::-webkit-scrollbar, #oscar-cont5::-webkit-scrollbar {width: 7px}
#oscar-cont1::-webkit-scrollbar-thumb, #oscar-cont2::-webkit-scrollbar-thumb, #oscar-cont3::-webkit-scrollbar-thumb, #oscar-cont4::-webkit-scrollbar-thumb, #oscar-cont5::-webkit-scrollbar-thumb {background: #672B33; border: 1px solid #111;}
#oscar-cont1::-webkit-scrollbar-track, #oscar-cont2::-webkit-scrollbar-track, #oscar-cont3::-webkit-scrollbar-track, #oscar-cont4::-webkit-scrollbar-track, #oscar-cont5::-webkit-scrollbar-track { background: #111!important; border: 1px solid #672B33!important}

.acredits {
  width: 550px;
  margin: 10px auto;
  text-align: right;
  font-size: 8px;
  font-family: arial;
  text-transform: uppercase;
  color: #aaa
}
</style>
<!-- Code désigné par Mr Mint. Merci de créditer l'auteur ! Lien source : http://candyland-couture.com/index.php?showtopic=28998 -->
​

<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i|Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

<div id="oscar">
  <bg></bg>
  <sc1></sc1>
  <div id="oscar-name">
    <nm>first<br>last</nm>
    <info>age - occupation</info>
  </div>
  <li1><li2></li2></li1>
  <div id="oscar-descs">
    <des>character bullet point here</des>
    <des>write as many as you need, it'll overflow </des>
  </div>
  <div id="oscar-main">
  <input type="radio" name="oscartabs" id="oscar-tab1" checked>
  <label for="oscar-tab1"><img src="GIF HERE WILL RESIZE TO FIT"></label>
  <input type="radio" name="oscartabs" id="oscar-tab2">
  <label for="oscar-tab2"><img src="GIF HERE WILL RESIZE TO FIT"></label>
  <input type="radio" name="oscartabs" id="oscar-tab3">
  <label for="oscar-tab3"><img src="GIF HERE WILL RESIZE TO FIT"></label>
  <input type="radio" name="oscartabs" id="oscar-tab4">
  <label for="oscar-tab4"><img src="GIF HERE WILL RESIZE TO FIT"></label>
  <input type="radio" name="oscartabs" id="oscar-tab5">
  <label for="oscar-tab5"><img src="GIF HERE WILL RESIZE TO FIT"></label>
  <div id="oscar-cont1">
    <h1>about</h1>
    TEXT HERE
  </div>
  <div id="oscar-cont2">
    <h1>friends</h1>
    TEXT HERE
  </div>
  <div id="oscar-cont3">
    <h1>enemies</h1>
    TEXT HERE
  </div>
  <div id="oscar-cont4">
    <h1>lovers</h1>
    TEXT HERE
  </div>
  <div id="oscar-cont5">
    <h1>others</h1>
    TEXT HERE
  </div>
  <li1></li1>
  <div id="oscar-ttl">
   <abt>about</abt>
   <frie>friends</frie>
   <enem>enemies</enem>
   <lov>lovers</lov>
   <oth>others</oth>
</div>
</div>
</div>

<a href="http://candylandcouture.b1.jcink.com/index.php?showuser=6763"><div class="acredits";>liv's codes</div></a>[/html]

[html]
<style>

#char1 { --accent: #efc9c1; }
#char2 { --accent: #736876; }

.deerling {
  width: 550px;
  background: #eee;
  position: relative;
}
 
.deerling-header {
  background: var(--accent);
  height: 85px;
  border-bottom: 25px solid #444;
}
 
.deerling-wrapper {
  height: 242px;
}
 
.deerling-tabs {
  font-size: 8px;
  font-family: roboto, sans-serif;
  color: #eee;
  text-align: left;
  padding-left: 8px;
  word-spacing: 15px;
  position: absolute; top: 92px;
}
 
.deerling-wanted {
  float: left;
  border-right: 1px solid #ccc;
  padding: 10px;
  width: 155px;
  font-family: roboto, sans-serif; font-size: 10px;
  text-align: left;
  color: #555;
  height: 202px;
  overflow: auto;
  margin: 10px 0px;
  }
 
.deerling-wanted h1 {
  margin: 0px;
  font-size: 18px;
  font-family: karma, sans-serif;
  text-align: center;
  color: #555;
}
 
.deerling-wanted span {display: block;}
 
.deerling-plot {
  overflow: auto;
  font-size: 10px;
  font-family: roboto, sans-serif;
  color: #555;
  background: #f2f2f2;
  padding: 40px;
  text-align: justify;
  height: 152px;
  } 
 
.deerling-lyrics {
  background: var(--accent);
  padding: 5px;
  font-size: 10px;
  text-transform: uppercase;
  color: #fff;
  font-family: roboto, sans-serif;
}
 
.deerling-footer {
  background: #444;
  height: 105px;
  padding: 20px;
}
 
.deerling-footer img {
  float: right;
  margin: 0px 30px;
  border-radius: 100px;
}
 
.deerling-char {
  line-height: 12px;
  padding: 20px;
  border-right: 1px solid #ccc;
  overflow: auto;
}
 
.deerling-char h1, .deerling-char h2 {
  margin: 0px;
  color: #eee;
  text-align: right;
}
 
.deerling-char h1 {
  font-family: karma, sans-serif;
  font-size: 23px;
  font-weight: normal;
}
 
.deerling-char h2 {
  font-family: roboto, sans-serif;
  font-size: 11px;
  font-weight: normal;
  margin-top: 3px;
}
 
.deerling-blurb {
  font-size: 10px;
  text-align: right;
  font-family: roboto, sans-serif;
  color: #dddd;
  margin-left: 100px;
  margin-top: 10px;
  line-height: 10px;
}

.tabs {
  position: relative;   
  min-height: 200px; /* This part sucks */
  clear: both;
  margin: 25px 0;
  width: 550px;
  height: 520px;
}

.tab {float: left;}

.tab label {
  position: relative; top: 92px; z-index: 3;
  font-size: 8px;
  font-family: roboto, sans-serif;
  color: #eee;
  text-align: left;
  padding-left: 8px;
  text-transform: uppercase;
}

.tab label:before {
  content:" ( ";
  color: #444;
}

.tab label:after {
  content:" ) ";
  color: #444;
}

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

.content {
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: ease .5s;
}

[type=radio]:checked ~ label {z-index: 2;}
[type=radio]:checked ~ label:before {
  z-index: 2;
  content:" ( ";
  color: #eee;
}

[type=radio]:checked ~ label:after {
  z-index: 2;
  content:" ) ";
  color: #eee;
}

[type=radio]:checked ~ label ~ .content {
  z-index: 1;
  opacity: 1;
}
</style>
<!-- Code désigné par Dismay. Merci de créditer l'auteur ! Lien source : http://sonderx.jcink.net/index.php?showtopic=1250 -->
​

<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">

<center> 
  <div class="tabs">
    <div  id="char1" class="tab">
      <input type="radio" id="tab-1" name="tab-group-1" checked>
      <label for="tab-1">CHARACTER 1</label>
      <div class="content">
        <div class="deerling">     
          <div class="deerling-header"></div>
          <div class="deerling-tabs"></div>
          <div class="deerling-wrapper">
            <div class="deerling-wanted">
              <h1>WANTED</h1>
              <span><b>+</b> copy and paste this line for whatever wanted you want for this character </span>
            </div>
            <div class="deerling-plot">
              this is where your plot info goes.
              just copy paste div id="char1" down to the next div id="char2" and rename the tab id and tab label to the next number in sequence.
              if you need help, you can message me on discord at dismay#8755
            </div>
          </div>
          <div class="deerling-lyrics">one line of lyrics here no more no less</div>
          <div class="deerling-footer">
            <img src="https://s20.postimg.cc/gvvzeovml/image.png">
            <div class="deerling-char">
              <h1>FIRST LAST</h1>
              <h2>TITLE OR GROUP HERE</h2>
              <div class="deerling-blurb">
                a three line summary of your character goes here. i recommend no more and no less than three lines.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="char2" class="tab">
      <input type="radio" id="tab-2" name="tab-group-1">
      <label for="tab-2">CHARACTER 2</label>
      <div class="content">
        <div class="deerling">     
          <div class="deerling-header"></div>
          <div class="deerling-tabs"></div>
          <div class="deerling-wrapper">
            <div class="deerling-wanted">
              <h1>WANTED</h1>
              <span><b>+</b> copy and paste this line for whatever wanted you want for this character </span>
            </div>
            <div class="deerling-plot">
              this is where your plot info goes.
              just copy paste div id="char1" down to the next div id="char2" and rename the tab id and tab label to the next number in sequence.
              if you need help, you  can message me on discord at dismay#8755
            </div>
          </div>
          <div class="deerling-lyrics">one line of lyrics here no more no less</div>
          <div class="deerling-footer">
            <img src="https://s20.postimg.cc/gvvzeovml/image.png">
            <div class="deerling-char">
              <h1>FIRST LAST</h1>
              <h2>TITLE OR GROUP HERE</h2>
              <div class="deerling-blurb">
                a three line summary of your character goes here. i recommend no more and no less than three lines.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="altaria-credit"><a href="http://sonderx.jcink.net/index.php?showuser=182"><span title="thanks dismay!" class="sf sf-stars"></span></a></div>
</center>

[/html]

[html]
<style>

.caravan-sidebar {
  position: absolute;
  height: 350px;
  padding: 10px 5px 5px 5px;
  text-align: center;
  width: 120px;
  background: #9ab656;
}

.caravan-icon img {
  background: #f7f7f7;
  padding: 5px;
}

.caravan-icon {margin-bottom: 10px;}
   
.caravan-name {
  margin-bottom: 10px;
  color: #f7f7f7;
  font-family: Raleway;
  font-size: 14px;
  text-transform: uppercase;
}

.caravan-wrapper .caravan {
border-right: 36px solid #9ab656;
}

.caravan-traits u {
  margin: 5px;
  font-size: 10px;
  font-weight: bold;
  text-decoration: none;
  display: block;
  background: #f7f7f7;
  margin-bottom: 2px;
  padding: 2px;
  border-radius: 2px;
}

.caravan-traits {
  font-family: Roboto;
  font-size: 12px;
  text-transform: uppercase;
}

.caravan-lyrics {
  line-height: 1em;
  color: #f7f7f7;
  font-size: 10px;
  font-family: Raleway;
  text-transform: uppercase;
  margin-top: 10px;
}

.caravan-body {
  overflow: auto;
  height: 330px;
  margin-right: 10px;
  margin-top: 10px;
  line-height: 1.1em;
  height: 335px;
  background: #f7f7f7;
  text-align: left;
  padding: 10px 20px;
}

.caravan-body h1 {
  font-weight: normal;
  color: #f7f7f7;
  font-family: Raleway;
  font-size: 12px;
  border-radius: 2px;
  padding: 5px;
  text-align: center;
}

.caravan-body h2 {
  font-weight: normal;
  font-family: Raleway;
  font-size: 12px;
  border-bottom: 1px solid #cccccc;
}

.caravan-body::-webkit-scrollbar {
  background: #efefef;
  width: 7px;
}

.caravan-body::-webkit-scrollbar-track {background: #dcdcdc;}

.thread-symbol {
  line-height: 19px;
  margin-right: 10px;
  border-radius: 5px;
  padding: 2px 1px 1px 1px;
  font-size: 10px;
  width: 20px;
  height: 20px;
  color: #f7f7f7;
  float: left;
  text-align: center;
}

.finished {opacity: .8;}

.ongoing a, .finished a {
display: inline-block;
  font-size: 12px;
  font-family: Raleway;
  text-transform: uppercase;
  text-decoration: none;
}

.ongoing i, .finished i {
  color: #999999;
  font-size: 10px;
  font-family: Raleway;
  display: inline-block;
  font-style: normal;
}

.ongoing p, .finished p {
font-size: 10px;
  font-family: verdana;
  color: #848484;
  line-height: 1.1em;
  display: inline-block;
  margin: 0;
}

.thread-symbol, .thread-title, .thread-ft, .thread-desc {margin-left: 10px;}

.char-container {
  margin-bottom: 15px;
  border-bottom: 1px solid #dadada;
}

.char-container p {
  margin: 0 0 10px 0;
  font-size: 10px;
  font-family: verdana;
  text-align: justify;
  line-height: 1em;
  color: #606060;
}

.char-container b {
  color: #414141;
  font-size: 14px;
  font-family: Raleway;
  font-weight: bold;
  text-transform: uppercase;
}

.char-container i {
  font-size: 12px;
  font-family: verdana;
}

.char-container .fa {
  float: left;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  margin-right: 10px;
  text-shadow: 1px 1px #cccccc;
}

.caravan-blurbs {
  font-size: 11px;
  font-family: tahoma;
  color: #606060;
  display: block;
  margin-left: 20px;
}

.caravan-blurbs s {opacity: .5;}
.caravan-wrapper {width: 616px;}
 
.caravan {
  float: right;
  position: relative;   
  min-height: 365px;
  clear: both;
  margin: 0px 0px;
  width: 450px; text-align: left; line-height: 1.2em;
}
.tab { float: left;}

.tab label {
  line-height:3px;
  background: #f7f7f7;
  color: #999999;
  padding: 7px;
  position: absolute;
  left: 456px;
  top: 10px;
  border-radius: 5px;
  height: 10px; width: 10px;
  font-size: 13px;
  text-align: center;
}

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

.content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: #f7f7f7;
}

[type=radio]:checked ~ label {
  background: #f7f7f7;
  position: absolute;
  left: 456px;
  padding: 7px;
  z-index: 2;
}

[type=radio]:checked ~ label ~ .content {z-index: 1;}
#charname.caravan-wrapper a {color: #9ab656;}
#charname.caravan-wrapper .caravan-body h2 {color: #9ab656;}
#charname.caravan-wrapper b {color: #9ab656;}
#charname.caravan-wrapper .char-container .fa {color: #9ab656;}
#charname.caravan-wrapper .caravan-traits {color: #9ab656;}
#charname.caravan-wrapper .caravan-sidebar {background: #9ab656;}
#charname.caravan-wrapper .thread-symbol .fa {color: #9ab656}
#charname.caravan-wrapper h1 {background: #9ab656;}
#charname.caravan-wrapper [type=radio]:8abd82 ~ label {color: #9ab656;}
#charname.caravan-wrapper .caravan {border-right: 36px solid #9ab656;}
#charname.caravan-wrapper .caravan-body::-webkit-scrollbar-thumb {background: #9ab656;}
#charname.caravan-wrapper .caravan-name {text-shadow: 1px 1px #9ab656;}
#charname.caravan-wrapper h1 {text-shadow: 1px 1px #hexcode2;}
#charname.caravan-wrapper .caravan-traits u {box-shadow: 1px 1px #9ab656;}
#charname.caravan-wrapper .tab label {box-shadow: 1px 1px #9ab656;}

.caravan-credits {
  font-size: 10px;
  font-family: georgia, sans-serif;
  opacity: .5;
  position: relative;
  top: 50px;
}

.caravan-credits a { color: #f2f2f2!important; }
</style>
<!-- Code désigné par Dismay. Merci de créditer l'auteur ! Lien source : http://sonderx.jcink.net/index.php?showtopic=1140 -->
​

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

<center>
  <div id="charname" class="caravan-wrapper">
    <div class="caravan-sidebar" >
      <div class="caravan-icon"><img src="https://i.imgbox.com/wwwjoFZH.png"></div>
      <div class="caravan-name">first last</div>
      <div  class="caravan-traits">
        <u>trait</u>
        <u>trait</u>
        <u>trait</u>
        <u>trait</u>
      </div>
      <div class="caravan-lyrics">short line of lyrics goes here</div>
      <div class="caravan-credits">MADE BY <a href="http://sonderx.jcink.net/index.php?showuser=182">DISMAY</a></div>
    </div> 
    <div class="caravan" >
      <div class="tab">
        <input type="radio" id="charnametab-1" name="charnametab-group-1" checked>
        <label for="charnametab-1"><i class="fa fa-pencil" aria-hidden="true"></i></label>
        <div class="content">
          <div class="caravan-body">
            <div class="caravan-threads"> 
              <h1> HEADER 1 </h1>
              <h2>HEADER 2 </h2>
              <div class="ongoing">
                <span class="thread-symbol"><span class="fa fa-square" aria-hidden="true"></span></span>
                <a href="x">thread title</a>
                <i>ft. name, name, name</i><br>
              </div><br>
              <div class="finished">
                <span class="thread-symbol"><span class="fa fa-check-square" aria-hidden="true"></span></span>
                <a href="x">thread title</a>
                <i>ft. name, name, name</i><br>
              </div><br>
            </div>     
          </div>
        </div>
      </div>
      <div class="tab">
        <input type="radio" id="charnametab-2" name="charnametab-group-1">
        <label for="charnametab-2" style="margin-top: 40px;"><i class="fa fa-address-book" aria-hidden="true"></i></label>
        <div class="content">
          <div class="caravan-body" >
            <div  class="char-container">
              <span class="fa fa-diamond" aria-hidden="true"></span>
              <b>first last</b> <i>member group</i>
              <p>description of relationship here</P>
            </div>
            <div class="char-container">
              <span class="fa fa-diamond" aria-hidden="true"></span>
              <b>first last</b> <i>member group</i>
              <p>description of relationship here</P>
            </div>
          </div>
        </div>
        <div class="tab">
          <input type="radio" id="charnametab-3" name="charnametab-group-1">
          <label for="charnametab-3" style="margin-top: 80px;"><i class="fa fa-bars" aria-hidden="true"></i></label>
          <div class="content">
            <div class="caravan-body" >
              <h1>WISH LIST</h1>
              <span class="caravan-blurbs"><b>•</b> x</span><br>
              <h1>TO DO</h1>
              <span class="caravan-blurbs"><b>•</b> x</span>
            </div>
          </div>
        </div>
        <div class="tab">
          <input type="radio" id="charnametab-4" name="charnametab-group-1">
          <label for="charnametab-4" style="margin-top: 120px;"><i class="fa fa-question" aria-hidden="true"></i></label>
          <div class="content">
            <div class="caravan-body" >
            <h1>HEADCANONS</h1>     
            <span class="caravan-blurbs"><b>•</b> x</span>       
          </div>
        </div>
      </div>
    </div>
  </div>
</center>
[/html]

[html]
<style>
.heading-design {
    cursor: pointer;
    background-color: #fff;
    border-bottom: solid 1px #212121;
    padding: 2rem;
    transition: background-color 0.5s ease;
}

.heading-design:hover {
    background-color: #ff9800;
    border-bottom: solid 1px #ff9800;
}

.heading-prog {
    cursor: pointer;
    background-color: #fff;
    border-bottom: solid 1px #212121;
    padding: 2rem;
    transition: background-color 0.5s ease;
    transition: color 0.5s ease;
}

.heading-prog:hover {
    color: #eeeeee;
    background-color: #212121;
    border-bottom: solid 1px #212121;
}

.heading-music {
    cursor: pointer;
    background-color: #fff;
    border-bottom: solid 1px #212121;
    padding: 2rem;
    transition: background-color 0.5s ease;
}

.heading-music:hover {
    background-color: #ff6f61;
    border-bottom: solid 1px #ff6f61;
}

.tab-content {
    display: none;
}

.left-content {
    padding-left: 4rem;
    padding-top: 4rem;
    font-size: 3.75rem;
}

.right-content {
    padding-left: 4rem;
    padding-top: 4rem;
}

.img-custwidth {
    padding-top: 4rem;
    width: 512px;
}

</style>
<script>
// Author: Nicholas Fazzolari
// Basic tab switching code in pure ES6

// TODO:   Add default tab open feature with an on off switch
//         Make the event listener assignments general

function openTab(tabName) {
    let i;
    let tabContent;
   
    tabContent = document.getElementsByClassName("tab-content");
   
    for (i = 0; i < tabContent.length; i++) {
        tabContent[i].style.display = "none";
    }
   
    document.getElementById(tabName).style.display = "flex";
}

// This needs to DRY'ed up so it can be used with a CMS
let designLinkEl = document.getElementById("DesignLink");
let progLinkEl = document.getElementById("ProgLink");
let musicLinkEl = document.getElementById("SupportLink");

designLinkEl.addEventListener("click", function(){openTab("Design")}, false);
progLinkEl.addEventListener("click", function(){openTab("Programming")}, false);
musicLinkEl.addEventListener("click", function(){openTab("Support")}, false);
</script>
<div class="container-fluid">
    <div class="row">
        <div id="DesignLink" class="col-sm-4 heading-design">
            <h5 class="mb-0">01.</h5>
            <h1 class="mb-0"><strong>Design</strong></h1>
        </div>
        <div id="ProgLink" class="col-sm-4 heading-prog">
            <h5 class="mb-0">02.</h5>
            <h1 class="mb-0"><strong>Programming</strong></h1>
        </div>
        <div id="SupportLink" class="col-sm-4 heading-music">
            <h5 class="mb-0">03.</h5>
            <h1 class="mb-0"><strong>Support</strong></h1>
        </div>
    </div>
</div>

<div id="Design" class="container-fluid tab-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 left-content">
                <strong>Design is Human.</strong>
                <img src="http://nickfazz.me/codepen_assets/vectors/head_vector_styled.svg" alt="Line art of human head." class="imf-fluid img-custwidth">
            </div>
        <div class="col-sm-6 right-content">
            <h3><strong>Design is human. Design is making ideas real.</strong></h3>
            <p>Human centered design is at the core of product development. Empathetic communication with the client is a key part of the development process from the beginning until the product launch and support phases.</p>
            <p>Design thinking is iterative, and cyclic. Combining raw creative out with theoretical structure is the best way to deliver high quality products to clients. Listening and guiding are core communication principles between the developer and client.</p>
            <p>When developing new web sites and applications our job as a development studio is to meet client needs through empathetic research and interaction. Listening to the client is key when solving in an unfamiliar domain of expertise. Guiding must be approached as a craft of finess to bridge the gulf between possible and not possible.</p>
        </div>
    </div>
        <div class="row">
        </div>
    </div>
</div>
<div id="Programming" class="container-fluid tab-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 left-content">
                <strong>Programming Delivers Solutions.</strong><br>
                <img src="http://nickfazz.me/codepen_assets/vectors/code_art.svg" alt="Binary digits and line art." class="imf-fluid img-custwidth">
            </div>
            <div class="col-sm-6 right-content">
                <h3><strong>Programming Delivers Solutions. Engineering and Development Thrive on Strong Design.</strong></h3>
            <p>Using current software development technologies and proven best practices in software engineering, coupled with a formal background in computer science drives and delivers high quality web development solutions.</p>
            <p>Adaptive development methods ensure cross-device and cross-platform consistent software solutions.</p>
            <p>Understanding client levels of technical knowledge is important. We understand that some clients require to be more involved in the development process than others. Transparency is a key factor which addresses security and technical issues across domains. When working with clients from the science and engineering field open communication and input regarding technology is welcome. We are always open to learning and compormise.</p>
            </div>
        </div>
    </div>
</div>
<div id="Support" class="container-fluid tab-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 left-content">
                <strong>Support is Trust.</strong>
                <img src="http://nickfazz.me/codepen_assets/vectors/support_vector.svg" alt="Line art of key." class="imf-fluid img-custwidth">
            </div>
            <div class="col-sm-6 right-content">
                <h3><strong>Support is Trust. Product Life Cycle Beyond Development.</strong></h3>
            <p>Client support is rooted in the mindset of client empathy and need. Delivering emerging technologies to strengthen the product and both user and client experience are integral to our support role.</p>
            <p>Security features are updated to protect against current threats to protect the business, technology, and users. Best practices are communicated and implemented with the client and user in mind.</p>
            <p>Support is an ongoing role which extends the development period of the software. Scale, security and usability are key support concepts which we deliver in our product support role.</p>
            </div>
        </div>
    </div>
</div>
[/html]

[html]
<style>
.i1 {
  display: inline-block;
  margin-left: -3px;
  color: #EE7E82;
  font-size: 25px;
  letter-spacing: 50px;
}

.i2 {
  padding: 12px;
  height: 270px;
  overflow: auto;
}

.iwa7 i {
  font: 400 15px/100% raleway;
  font-style: italic;
  text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
}

.iwa7 b {
  font: 800 14px/100% montserrat;
  color: #707070;
  text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
}

.iwa7 h1 {
  margin-bottom: 20px;
  color: #EE7E82;
  font: 400 26px/100% inconsolata;
  text-shadow: -2px -2px 0 #FEFEFE, 2px -2px 0 #FEFEFE, -2px 2px 0 #FEFEFE, 2px 2px 0 #FEFEFE;
  text-transform: uppercase;
  padding: 6px;
  border-bottom: 10px dotted #E9E9E9;
}

.iwa12 span {
  font: 400 10px/100% inconsolata;
  text-transform: uppercase;
  padding: 7px;
  background: #FBFBFB;
  border-radius: 7px;
  border: 1px solid #DEDEDE;
  margin: 5px;
  display: inline-block;
  horizontal-align: right;
}
 
.iwa11 span {
  font: 400 10px/100% inconsolata;
  text-transform: uppercase;
  padding: 7px;
  background: #FBFBFB;
  border-radius: 7px;
  border: 1px solid #DEDEDE;
  margin: 5px;
  display: inline-block;
}
 
.iwa12 h1 i {
  font-size: 47px;
  position: absolute;
  top: -3px;
  left: 94px;
  color: #F5F5F5;
}

.iwa12 h1 {
  height: 20px;
  padding: 10px;
  font: 400 20px/100% inconsolata;
  text-transform: uppercase;
  color: #FFF;
  background: #EE7E82;
  margin-top: -12px;
  margin-left: -12px;
  width: 95px;
  float: left;
  display: inline-block;
  position: absolute;
  overflow: hidden;
}

.iwa11 h1 i {
  font-size: 47px;
  position: absolute;
  top: -3px;
  left: 70px;
  color: #F5F5F5;
}

.iwa11 h1 {
  display: inline-block;
  position: absolute;
  overflow: hidden;
  height: 20px;
  padding: 10px;
  font: 400 20px/100% inconsolata;
  text-transform: uppercase;
  color: #FFF;
  background: #EE7E82;
  margin-top: -12px;
  margin-left: -12px;
  width: 70px;
}

.iwa12 {
  vertical-align: top;
  padding: 12px;
  border: 1px solid #DDD;
  display: inline-block;
  width: 239px;
  margin-right: -15px;
  margin-left: -5px;
  height: 100px;
  position: relative;
  background: #F5F5F5;
}

.iwa11 {
  border-bottom: transparent;
  background: #F5F5F5;
  vertical-align: top;
  position: relative;
  border: 1px solid #DDD;
  padding: 12px;
  display: inline-block;
  width: 240px;
  margin-left: -12.3px;
  height: 100px;
}

.iwa10 {
  background: #FBFBFB;
  z-index: 3;
  padding: 1px;
  width: 250px;
  height: 80px;
  position: absolute;
  top: 244px;
  left: 150px;
}

.iwa9 {
  color: #FBFBFB;
  opacity: 0.8;
  font-size:160px;
  position: absolute;
  background: #EE7E82;
  padding: 1px;
  top: 127px;
  left: 13px;
  width: 516px;
  height: 100px;
  overflow: hidden;
}

.iwa8 {
  position: absolute;
  font-size: 300px;
  left: 123px;
  z-index: 0;
  top: 60px;
  color: #EEE;
  text-shadow: -3px -3px 0 #FBFBFB, 3px -3px 0 #FBFBFB, -3px 3px 0 #FBFBFB, 3px 3px 0 #FBFBFB;
}

.iwa7 {
  display: inline-block;
  width: 299px;
  margin-right: -20px;
  margin-left: -5px;
  padding: 17px;
  vertical-align: top;
  font: 400 10.4px/105% verdana;
  text-align: justify;
  border-left: 1px solid #DBDBDB;
  color: #585858;
  border: 1px solid #DBDBDB;
  border-top: transparent;
  height: 293px;
  overflow: hidden;
}

.iwa6 span {
  display: block;
  padding: 10px;
  border: 1px solid #CCC;
  margin-top: 15px;
  background: #FBFBFB;
  border-radius: 10px;
}

.iwa6 h1 {
  background: #EE7E82;
  color: #FBFBFB;
  padding: 15px;
  margin: -12px;
  font: 800 30px/100% raleway;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: -1px;
}

.iwa6 {
  padding: 12px;
  background: #F5F5F5;
  width: 170px;
  border: 1px solid #DBDBDB;
  display: inline-block;
  font: 12px/100% inconsolata;
  text-transform: uppercase;
  margin-left: -13px;
  overflow: hidden;
  height: 303px;
  border-top: transparent;
}

.iwa5 {
  width:150px;
  padding:3px;
  height: 150px;
  position:absolute;
  border-radius:100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  top:146px;
  left: 188px;
  animation: infinite 8s rotate;
  display:block;   
  border: dotted 6px;
  z-index: 3;
  border-color: #EE7E82 transparent #EE7E82 transparent; 
  }

@keyframes rotate {
  0% {transform:rotate(0);}
  100% {transform:rotate(360deg);}
}
 
.iwa4 {
  z-index: 3;
  background: #EE7E82;
  border: 5px solid #FBFBFB;
  padding: 7px;
  border-radius: 20px;
  width: 100px;
  position: absolute;
  color: #FBFBFB;
  text-transform: uppercase;
  text-align: center;
  font: 800 10px/100% montserrat;
  z-index: 4;
}

.iwa3 {
  width: 100px;
  height: 100px;
  box-shadow: -1px -1px #DDD, 1px 1px #DDD, 1px -1px #DDD, -1px 1px #DDD;
  margin: 40px auto;
  border-radius: 100%;
  border: 20px solid #FBFBFB;
  z-index: 3;
  position: relative;
  background-image:url('https://image.ibb.co/i1y3xc/rm.png');
  background-size:cover;
}

.iwa2 b {color: #EE7E82;}

.iwa2 i {
  display: block;
  font: 800 16px raleway;
  letter-spacing: 13px;
  color: #FBFBFB;
  text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;
}

.iwa2 {
  padding: 30px;
  margin: -7px;
  background: #444;
  color: #FBFBFB;
  font: 800 35px/100% raleway;
  text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;
  letter-spacing: -1px;
  text-transform: uppercase;
  text-align: center;
}

.iwa1 {
  background: #FBFBFB;
  padding: 12px;
  border: 1px solid #D9D9D9;
}

.iwa {
  position: relative;
  padding: 7px;
  background: #EFEFEF;
  border: 1px solid #DFDFDF;
  width: 530px;
  margin: 0px auto;
}
</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=Inconsolata|Montserrat:800|Roboto:400|Barlow|Raleway:400,800,900" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css">

<div class="iwa">
  <div class="iwa1">
    <div class="iwa2">alastair finley<i>aka <b>finn</b></i></div>
    <div class="iwa10"></div>
    <div class="iwa9">
      <i class="fa fa-spinner" style="margin-left: 20px; margin-top: 5px;"></i>
      <i class="fa fa-spinner" style="margin-top: 5px; margin-right:20px; float:right;"></i>
    </div>
    <div class="iwa8"><i class="fa fa-github-alt"></i></div>
    <div class="iwa4" style="top: 142px; left: 250px;">sixteen</div>
    <div class="iwa4" style="left: 325px; top: 210px;">human</div>
    <div class="iwa4" style="top: 210px; left:95px;">he / him</div>
    <div class="iwa4" style="left:180px; top:285px;">homosexual</div>
    <div class="iwa3"></div>
    <div class="iwa5"><i class="fa fa-star-o" class="i1"></i></div> 
    <div class="iwa11">
      <h1>likes <i class="fa fa-star"></i></h1>
      <span style="margin-left: 95px;">flan</span> <span>rainy days</span>
      <span>charms</span> <span>animals</span> <span>ghost stories</span>
    </div>
    <div class="iwa12">
      <h1>dislikes <i class="fa fa-star"></i></h1>
      <span style="margin-left: 120px;">tests</span> <span>waking up early</span> <span>spicy things</span>
      <span>loud people</span> <span>mondays</span>
    </div>
    <div class="iwa6">
    <h1>profile</h1>
      <span style="margin-top: 25px;" title="occupation">student at hogwarts</span>
      <span title="origin">idk yet</span>
      <span title="birthdate">june 17th</span>
      <span title="playby"> miharu rokujo - nabari no ou</span>
    </div>
    <div class="iwa7">
      <div class="i2">
        <b>USED FOR |</b> Harry Potter RP; He can be adjusted for a slice-of-life RP or a super power
        setting.
        <h1>history && facts</h1>
        <b>+</b> <b>Alastair Finley</b> <i>(nicknamed Finn)</i> is a halfblood wizard, raised in a humble abode with his three
        siblings and his parents.
        <b>+</b> Finn discovered his magical abilities at the age of three whilst sneaking an extra slice of pie
        from a particularily high kitchen counter.
        <b>+</b> Finn is a fine line between an introvert and an extrovert. He's incorrigibly awkward at all
        things social, <s>his clumsiness and timidity to blame</s>, yet tere are times when he feels
        bold enough to converse with unfamiliar faces (usually on days when he has enough sleep and a little
        too much of those pastries). On the flip-side, Finn is a bit of a worrywart. Also a perfectionist.
        Lastly - he's easy to irritate. Just pick on him a little and you'll see.
        <b>+</b> Finn's mother owns a small bakery in Hogsmeade.
        <b>+</b> Finn's best subject is charms. His worst is potions because he's shit at measuring things (and cooking as well).
        <b>+</b> He hoards plushies like there's no tomorrow.
      </div>
    </div>
  </div>
</div>

[/html]

[html]
<style>
@import url('https: //fonts.googleapis.com/css?family=Inconsolata|Montserrat');

.hiyhPlot {width: 420px;}

.hiyhPlotBox {
  width: 200px;
  height: 250px;
  background-color: #fafafa;
  overflow: hidden;
  float: left;
  margin-left: 7px;
  margin-top: 7px;
  border-radius: 3px;
}

.hiyhPlotFront {
  position: relative;
  height: 250px;
  margin-top: 0px;
  transition: .5s ease;
}

.hiyhPlotBox:hover .hiyhPlotFront {
  top: 0px;
  margin-top: -193px;
  transition: .5s ease;
}

.hiyhPlotTop {
  width: 200px;
  height: 45%;
  background-color: #ccc;
  position: relative;
}

.hiyhPlotIcon {
  width: 200px;
  height: 0px;
  position: absolute;
  display:  flex;
  align-items:  center;
  justify-content:  center;
  margin-left: -2px;
  margin-top: -10px;
}

.hiyhPlotName {
  width: 100%;
  font: 15px montserrat;
  letter-spacing: -1px;
  height: 3px;
  font-weight: 400;
  text-transform: lowercase;
  position: relative;
  top: 54px;
  color: #7b7b7b;
}

.hiyhPlotTags {
  width: 200px;
  position: relative;
  text-align: center;
  top: 75px;
  padding: 5px 0px;
}

.hiyhPlotHash {
  font: 11px Inconsolata;
  text-transform: uppercase;
  letter-spacing: .5px;
  background-color: #efefef;
  color: #7b7b7b;
  padding: 5px;
  margin-left: 5px;
  border-radius: 0px;
  line-height: 26px;
  border-radius: 3px;
}

.hiyhPlotBack {
  background-color: #fff;
  width: 180px;
  height: 178px;
  overflow: auto;
  padding: 5px 5px;
  font: 10px roboto;
  line-height: 160%;
  text-align: justify;
  color: #ababab;
  border-radius: 3px;
}

.hiyhPlotHeader {
  font: 11px Inconsolata;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-align: center;
  background-color: #fafafa;
  margin-bottom: 3px;
  color: #a5a5a5;
  padding: 5px;
  border-radius: 3px;
  margin-top: 5px;
}

.hiyhSeeking {
  font-weight: bold;
  letter-spacing: -.25px;
  text-transform: uppercase;
  background-color: #fafafa;
  padding: 2px 5px;
  border-radius: 3px;
}

.hiyhCred {
  font: bold 7px roboto;
  float:  right;
  text-transform: uppercase;
  margin-right:  25px;
}

.hiyhCred a {font: bold 7px roboto!important;}
.hiyhPlotBack::-webkit-scrollbar {width: 3px;}
.hiyhPlotBack::-webkit-scrollbar-thumb {background-color: #ccc;}

.hiyhPlotIcon img {
  border-radius: 100%;
  border: 7px solid #fafafa;
}
</style>
<!-- Code désigné par Spookie. Merci de créditer l'auteur ! Lien source : http://pixel-perfect.boards.net/thread/ … alls-heart -->
​

<div align="center">
  <div class="hiyhPlot">
    <div class="hiyhPlotBox">
      <div class="hiyhPlotFront">
        <div style="background-color: #FC9D9A;" class="hiyhPlotTop"></div>
        <div class="hiyhPlotIcon"><img src="https://via.placeholder.com/100x100"></div>
        <div class="hiyhPlotName"><span style="color: #FC9D9A;">n</span>ame surname</div>
        <div class="hiyhPlotTags">
          <span style="margin-left: 0px;" class="hiyhPlotHash"><span style="color: #FC9D9A;">#</span>trait</span>
          <span class="hiyhPlotHash"><span style="color: #FC9D9A;">#</span>trait</span>
          <span class="hiyhPlotHash"><span style="color: #FC9D9A;">#</span>trait</span>
          <span class="hiyhPlotHash"><span style="color: #FC9D9A;">#</span>trait</span>
          <span class="hiyhPlotHash"><span style="color: #FC9D9A;">#</span>trait</span>
          <span class="hiyhPlotHash"><span style="color: #FC9D9A;">#</span>trait</span>
        </div>
      </div>
      <div class="hiyhPlotBack">
        <div style="margin-top: 0px;" class="hiyhPlotHeader"><span style="color: #FC9D9A;">#</span>information</div>
        lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam pellentesque metus sit amet elit consectetur, vitae egestas nisi pulvinar. sed ut finibus urna. pellentesque maximus.
        <div class="hiyhPlotHeader"><span style="color: #FC9D9A;">#</span>positive</div>
        lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam pellentesque metus sit amet elit consectetur, vitae egestas nisi pulvinar. sed ut finibus urna. pellentesque maximus.
        <span class="hiyhSeeking">seeking</span> here, here, here
        <div class="hiyhPlotHeader"><span style="color: #FC9D9A;">#</span>negative</div>
        lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam pellentesque metus sit amet elit consectetur, vitae egestas nisi pulvinar. sed ut finibus urna. pellentesque maximus.
        <br><span class="hiyhSeeking">seeking</span> here, here, here
        <div class="hiyhPlotHeader"><span style="color: #FC9D9A;">#</span>romantic</div>
        lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam pellentesque metus sit amet elit consectetur, vitae egestas nisi pulvinar. sed ut finibus urna. pellentesque maximus.
        <br><span class="hiyhSeeking">seeking</span> here, here, here
        <div class="hiyhPlotHeader"><span style="color: #FC9D9A;">#</span>wanted</div>
        lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam pellentesque metus sit amet elit consectetur, vitae egestas nisi pulvinar. sed ut finibus urna. pellentesque maximus.
        <br><span class="hiyhSeeking">seeking</span> here, here, here
      </div>
    </div>
    <div class="hiyhPlotBox">
      <div class="hiyhPlotFront">
        <div style="background-color: #F9CDAD;" class="hiyhPlotTop"></div>
        <div class="hiyhPlotIcon"><img src="https://via.placeholder.com/100x100"></div>
        <div class="hiyhPlotName"><span style="color: #F9CDAD;">n</span>ame surname</div>
        <div class="hiyhPlotTags">
          <span style="margin-left: 0px;" class="hiyhPlotHash"><span style="color: #F9CDAD;">#</span>trait</span>
          <span class="hiyhPlotHash"><span style="color: #F9CDAD;">#</span>trait</span>
          <span class="hiyhPlotHash"><span style="color: #F9CDAD;">#</span>trait</span>
          <span class="hiyhPlotHash"><span style="color: #F9CDAD;">#</span>trait</span>
          <span class="hiyhPlotHash"><span style="color: #F9CDAD;">#</span>trait</span>
          <span class="hiyhPlotHash"><span style="color: #F9CDAD;">#</span>trait</span>
        </div>
      </div>
      <div class="hiyhPlotBack">
        <div style="margin-top: 0px;" class="hiyhPlotHeader"><span style="color: #F9CDAD;">#</span>information</div>
        lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam pellentesque metus sit amet elit consectetur, vitae egestas nisi pulvinar. sed ut finibus urna. pellentesque maximus.
        <div class="hiyhPlotHeader"><span style="color: #F9CDAD;">#</span>positive</div>
        lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam pellentesque metus sit amet elit consectetur, vitae egestas nisi pulvinar. sed ut finibus urna. pellentesque maximus.
        <span class="hiyhSeeking">seeking</span> here, here, here
        <div class="hiyhPlotHeader"><span style="color: #F9CDAD;">#</span>negative</div>
        lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam pellentesque metus sit amet elit consectetur, vitae egestas nisi pulvinar. sed ut finibus urna. pellentesque maximus.
        <br><span class="hiyhSeeking">seeking</span> here, here, here
        <div class="hiyhPlotHeader"><span style="color: #F9CDAD;">#</span>romantic</div>
        lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam pellentesque metus sit amet elit consectetur, vitae egestas nisi pulvinar. sed ut finibus urna. pellentesque maximus.
        <br><span class="hiyhSeeking">seeking</span> here, here, here
        <div class="hiyhPlotHeader"><span style="color: #F9CDAD;">#</span>wanted</div>
        lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam pellentesque metus sit amet elit consectetur, vitae egestas nisi pulvinar. sed ut finibus urna. pellentesque maximus.
        <br><span class="hiyhSeeking">seeking</span> here, here, here
      </div>
    </div>
    <div class="hiyhPlotBox">
      <div class="hiyhPlotFront">
        <div style="background-color: #C8C8A9;" class="hiyhPlotTop"></div>
        <div class="hiyhPlotIcon"><img src="https://via.placeholder.com/100x100"></div>
        <div class="hiyhPlotName"><span style="color: #C8C8A9;">n</span>ame surname</div>
        <div class="hiyhPlotTags">
          <span style="margin-left: 0px;" class="hiyhPlotHash"><span style="color: #C8C8A9;">#</span>trait</span>
          <span class="hiyhPlotHash"><span style="color: #C8C8A9;">#</span>trait</span>
          <span class="hiyhPlotHash"><span style="color: #C8C8A9;">#</span>trait</span>
          <span class="hiyhPlotHash"><span style="color: #C8C8A9;">#</span>trait</span>
          <span class="hiyhPlotHash"><span style="color: #C8C8A9;">#</span>trait</span>
          <span class="hiyhPlotHash"><span style="color: #C8C8A9;">#</span>trait</span>
        </div>
      </div>
      <div class="hiyhPlotBack">
        <div style="margin-top: 0px;" class="hiyhPlotHeader"><span style="color: #C8C8A9;">#</span>information</div>
        lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam pellentesque metus sit amet elit consectetur, vitae egestas nisi pulvinar. sed ut finibus urna. pellentesque maximus.
        <div class="hiyhPlotHeader"><span style="color: #C8C8A9;">#</span>positive</div>
        lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam pellentesque metus sit amet elit consectetur, vitae egestas nisi pulvinar. sed ut finibus urna. pellentesque maximus.
        <span class="hiyhSeeking">seeking</span> here, here, here
        <div class="hiyhPlotHeader"><span style="color: #C8C8A9;">#</span>negative</div>
        lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam pellentesque metus sit amet elit consectetur, vitae egestas nisi pulvinar. sed ut finibus urna. pellentesque maximus.
        <br><span class="hiyhSeeking">seeking</span> here, here, here
        <div class="hiyhPlotHeader"><span style="color: #C8C8A9;">#</span>romantic</div>
        lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam pellentesque metus sit amet elit consectetur, vitae egestas nisi pulvinar. sed ut finibus urna. pellentesque maximus.
        <br><span class="hiyhSeeking">seeking</span> here, here, here
        <div class="hiyhPlotHeader"><span style="color: #C8C8A9;">#</span>wanted</div>
        lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam pellentesque metus sit amet elit consectetur, vitae egestas nisi pulvinar. sed ut finibus urna. pellentesque maximus.
        <br><span class="hiyhSeeking">seeking</span> here, here, here
      </div>
    </div>
    <div class="hiyhPlotBox">
      <div class="hiyhPlotFront">
        <div style="background-color: #83AF9B;" class="hiyhPlotTop"></div>
        <div class="hiyhPlotIcon"><img src="https://via.placeholder.com/100x100"></div>
        <div class="hiyhPlotName"><span style="color: #83AF9B;">n</span>ame surname</div>
        <div class="hiyhPlotTags">
          <span style="margin-left: 0px;" class="hiyhPlotHash"><span style="color: #83AF9B;">#</span>trait</span>
          <span class="hiyhPlotHash"><span style="color: #83AF9B;">#</span>trait</span>
          <span class="hiyhPlotHash"><span style="color: #83AF9B;">#</span>trait</span>
          <span class="hiyhPlotHash"><span style="color: #83AF9B;">#</span>trait</span>
          <span class="hiyhPlotHash"><span style="color: #83AF9B;">#</span>trait</span>
          <span class="hiyhPlotHash"><span style="color: #83AF9B;">#</span>trait</span>
        </div>
      </div>
      <div class="hiyhPlotBack">
        <div style="margin-top: 0px;" class="hiyhPlotHeader"><span style="color: #83AF9B;">#</span>information</div>
        lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam pellentesque metus sit amet elit consectetur, vitae egestas nisi pulvinar. sed ut finibus urna. pellentesque maximus.
        <div class="hiyhPlotHeader"><span style="color: #83AF9B;">#</span>positive</div>
        lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam pellentesque metus sit amet elit consectetur, vitae egestas nisi pulvinar. sed ut finibus urna. pellentesque maximus.
        <span class="hiyhSeeking">seeking</span> here, here, here
        <div class="hiyhPlotHeader"><span style="color: #83AF9B;">#</span>negative</div>
        lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam pellentesque metus sit amet elit consectetur, vitae egestas nisi pulvinar. sed ut finibus urna. pellentesque maximus.
        <br><span class="hiyhSeeking">seeking</span> here, here, here
        <div class="hiyhPlotHeader"><span style="color: #83AF9B;">#</span>romantic</div>
        lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam pellentesque metus sit amet elit consectetur, vitae egestas nisi pulvinar. sed ut finibus urna. pellentesque maximus.
        <br><span class="hiyhSeeking">seeking</span> here, here, here
        <div class="hiyhPlotHeader"><span style="color: #83AF9B;">#</span>wanted</div>
        lorem ipsum dolor sit amet, consectetur adipiscing elit. etiam pellentesque metus sit amet elit consectetur, vitae egestas nisi pulvinar. sed ut finibus urna. pellentesque maximus.
        <br><span class="hiyhSeeking">seeking</span> here, here, here
      </div>
    </div>
    <div class="hiyhCred"><a href="http: //pixel-perfect.boards.net/user/15">selkie</a></div>
  </div>
</div>
[/html]

[html]
<style>
.ubis {
  display: inline-block;
  margin-left: -3px;
  color: #FFF;
  font-size: 24px;
  letter-spacing: 50px;
}

.utris {
  padding: 12px;
  height: 310px;
  overflow: auto;
}

.u7 i {
  font: 400 14px/100% raleway;
  font-style: italic;
  color: #EA8594;
  text-shadow: 1px 1px #F8F8F8;
}

.u7 b {
  font: 800 14px/100% raleway;
  color: #EA8594;
  text-shadow: 1px 1px #F8F8F8;
}

.u7::first-letter {
  font: 300 50px/100% roboto slab;
  float: left;
  padding: 6px;
  margin: 6px;
  color: #EA8594;
  text-shadow: 2px 2px #F8F8F8;
}
 
.u7 {
  border-radius: 10px;
  font: 10.4px/100% verdana;
  text-align: justify;
  color: #646464;
  padding: 12px;
  float: right;
  position: absolute;
  top: 20px;
  right: 20px;
  width: 185px;
  height: 335px;
  border: 1px solid #DDD;
  background: #FDFDFD;
  overflow: hidden;
}
 
.u6 {
  width:105px;
  padding:3px;
  height: 105px;
  position:absolute;
  border-radius:100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  top:34.3px;
  left: 19px;
  animation: infinite 8s rotate;
  display:block;   
  border: dashed 3px;
  z-index: 3333;
  border-color: #FFF transparent #FFF transparent;
}

@keyframes rotate {
  0% {transform:rotate(0);}
  100% {transform:rotate(360deg);}
}
 
#u1 h1 {
  font: 20px/100% roboto slab;
  position: relative;
  color: #FAFAFA;
  text-transform: uppercase;
  padding: 12px;
  margin-top: 15px;
  border-top: 7px solid #FAFAFA;
  width: 160px;
  left: -15px;
  text-align: justify;
}

#u1:hover .u5 span {color: #FAFAFA;}

#u1:hover .u5 {
  right: -110px;
  background: #EA8594;
}

.u5 span {
  color: #EA8594;
  transition: 0.5s linear;
  transition-delay: 0.4s;
  font-size: 14px;
  float: left;
}

.u5 {
  z-index: 333;
  transition: 0.5s linear;
  position: relative;
  top: 10px;
  background: #EA8594;
  width: 145px;
  right: 23px;
  text-align: right;
  color: #FAFAFA;
  padding: 6px;
  border-radius: 0px 20px 20px 0px;
  font: 400 30px/100% raleway;
  text-transform: lowercase;
}

.u4 {
  font: 300 9px/100% raleway;
  height: 105px;
  text-transform: uppercase;
  position: relative;
  width: 100px;
  text-align: justify;
  top: 5px;
  left: -3px;
  color: #FAFAFA;
  padding: 10px;
}

.u3 {
  top: 15px;
  width: 100px;
  height: 100px;
  z-index: 1;
  position: relative;
  border-radius: 100%;
  border: 13px solid #EA8594;
  background-image:url('https://image.ibb.co/n75jam/art_by_Hakura_Kusa_4.png');background-size:cover
}

.u2 {
  background: #EA8594;
  width: 240px;
  height: 440px;
  position: absolute;
  top: 0px;
  left: -100px;
  transform: rotate(-15deg);
}

#u1 {
  position: relative;
  padding: 15px;
  background: #F7F7F7;
  border: 5px solid #FEFEFE;
  box-shadow: -1px 1px #DFDFDF, 1px -1px #DFDFDF;
  margin: 0px auto;
  width: 400px;
  height: 370px;
  overflow: hidden;
  border-radius: 10px;
}
</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=Raleway:300,400,800|Barlow|Karma:300|Roboto+Slab:300" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css">

<div id="u1">
  <div class="u2"></div>
  <div class="u3"></div>
  <div class="u6"><i class="fa fa-star-o" class="ubis"></i></div>
  <div class="u5"><span>@[tagname here]</span> <i class="fa fa-heartbeat"></i></div>
  <div class="u4">
    Sippin' Tropicana in a coconut cabana
    Floatin' on flamingos, smokin' all the mangoes
    Hotter than mojave, sweeter than agave
    We just wanna stay cool hoverboarding in a calamansi wavepool
  </div>
  <h1>this is how<br> we otter pop</h1>
  <div class="u7">
    <div class="utris">
      "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>
  </div>
</div>
[/html]

[html]
<style>
.svnn {
  width: 450px;
  padding: 10px;
  border: #e2e2e2 solid 1px;
  background: #f0f0f0;
  margin: 0 auto;
}

.svn {background: #222;}

.svn-t {
  text-align: right;
  padding: 25px;
  color: #eee;
  font: 12px Cabin;
}

.svn-t h1 {
  margin: 0 0 2px;
  font: 900 45px/40px 'Archivo Narrow';
}

.svn-t h1 i {
  font-style: normal;
  color: #fa3334;
}

.svn-t span {
  font: 900 10px Cabin;
  letter-spacing: 1px;
}

.svn-t span b {color: #e244ce;}

.svn-img {
  width: 450px;
  height: 100px;
  object-fit: cover;
}

.svn-p {
  background: #fff;
  padding: 70px;
  text-align: justify;
  font: 12px/16px cabin;
  border: #e2e2e2 solid;
  border-width: 0 1px;
}

.svn-p b {
  color: #bd5758;
  font: 700 15px Cabin;
}

.svn-p i {
  color: #888;
  font: italic 700 13px Archivo Narrow;
}

.svn-notes {
  padding: 25px;
  color: #eee;
  font: 700 11px cabin;
  text-transform: uppercase;
}

.svn-notes .fa {
  float: left;
  font-size: 35px;
  line-height: 13px;
  color: #fa3334;
  margin: 0 20px 0 0;
}
</style>
<!-- Code désigné par Von appetit. Merci de créditer l'auteur ! Lien source : http://yourscent.jcink.net/index.php?showtopic=8 -->

<link href="https: //fonts.googleapis.com/css?family=Archivo+Narrow: 400,400i,500,500i,600,600i,700,700i|Cabin: 400,400i,500,500i,600,600i,700,700i|Press+Start+2P" rel="stylesheet">

<div class="svnn">
  <div class="svn">
    <div class="svn-t">
      <h1><i>SEVENTH</i>SENSE</h1> <span>OPEN YOUR EYES QUIETLY <b>OPEN YOUR EYES</b></span>
    </div>
    <div class="svn-img">
      <img src="https://images2.imgbox.com/51/89/eH1s0ARk_o.png">
    </div>
    <div class="svn-p">
      <section>
        <b>Bacon ipsum</b> <i>italics.</i> amet pork pancetta filet mignon brisket. Ham hock ribeye prosciutto porchetta shoulder tail kielbasa leberkas jowl chicken capicola bacon. Meatloaf biltong landjaeger pork loin andouille, cupim tri-tip. Pork chop kevin bresaola tongue filet mignon shankle.
        <br><br>
        Bacon ipsum dolor amet pork pancetta filet mignon brisket. Ham hock ribeye prosciutto porchetta shoulder tail kielbasa leberkas jowl chicken capicola bacon. Meatloaf biltong landjaeger pork loin andouille, cupim tri-tip. Pork chop kevin bresaola tongue filet mignon shankle.
      </section>
    </div>
    <div class="svn-notes">
      <i class="fa fa-eye"></i>
      NOTES GOES HERE. TAG A PERSON WHILE YOU'RE AT IT.
    </div>
  </div>
</div>

[/html]

[html]
<style>
.gravity {
  width: 400px;
  min-height: 400px;
  background-color: #f1e1e8;
  padding: 6px;
  font-family: 'Roboto', sans-serif;
  border-radius: 5px;
}

.e1 {
  background-color: #cb9cb2;
  padding: 6px;
  padding-top: 30px;
}

.gravity span {color: #fff}

.e2 {
  height: 300px;
  overflow: auto;
}

.gravityicon {
  margin-top: 25px;
  text-align: center;
  border-radius: 100%;
  width: 100px;
  height: 100px;
  border: 5px #fff solid;
  overflow: hidden;
  animation: float 6s ease-in-out infinite;
  background-repeat: no-repeat;
  margin: auto;
}

.gravity img {width: 100px; height: auto;}

@keyframes float {
  0% {transform: translatey(0px);}
  50% {transform: translatey(-20px);}
  100% {transform: translatey(0px);}
}

.gravity h1 {
  text-align: center;
  margin-top: 8px;
  color: #cb9cb2;
  font-family: 'Megrim', cursive;
  font-size: 32px;
  margin-bottom: 15px;
}

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

.ura {
  width: 360px;
  height: 300px;
  padding: 5px;
  font-size: 11px;
  color: #666;
  background: #fff;
  border-radius: 5px;
  margin-bottom: 8px;
  text-align: justify;
  margin: auto;
}

.gravity table, .gravity tr, .gravity td {
  width: 100%;
  background-color: #cb9cb2;
  color: #f1e1e8;
  padding: 6px;
  text-align: center;
  font-size: 10px;
  font-family: calibri;
  text-transform: uppercase;
}

.gravity b {color: #ffdcec;}

.gravity ::-webkit-scrollbar {width: 5px; background: #fff;}
.gravity ::-webkit-scrollbar-track {background: #fff; border-radius: 5px;}
.gravity ::-webkit-scrollbar-thumb {background: #cb9cb2; border-radius: 10px; border: 1px solid #fff;}

</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=Megrim|Roboto:400,700,900" rel="stylesheet">

<center>
<div class="gravity">
    <div class="e1">
    <div class="gravityicon"><img src="https://imgur.com/ngnACTb.png"></div>
    </div>
    <h1><span>{ </span>gravity girl <span>}</span></h1>
    <div class="ura">
    <div class="e2">
        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 of that universal love which bears and sustains us, as it floats around us in an eternity of bliss; and then, my friend, when darkness overspreads my eyes, and heaven and earth seem to dwell in my soul and absorb its power, like the form of a beloved mistress, then I often think with longing, Oh, would I could describe these conceptions, could impress upon paper all that is living so full and warm within me, that it might be the mirror of my soul, as my soul is the mirror of the infinite God!
    </div>
    </div>
    <table>
    <tr>
        <td style="width: 200px;"><b><number></b> words</td>
        <td style="width: 200px;">@<b><user></b></td>
    </tr>
    </table>
</div>
</center>
[/html]

[html]
<style>

.a1 {
  width: 110px;
  padding-right: 20px;
}

.a2 {
  border: 1px solid #ddd;
  background-color: white;
  border-spacing: 0px;
}

#caov {
  width: 500px;
  padding: 15px;
  margin: 0px auto;
  border: 1px solid #bbb;
}

#caname {
  background-color: #362C47;
  padding: 20px;
}
 
.caicon {
  border: 5px solid white;
  height: 100px;
  width: 100px;
}

.caname {
  font-size: 30px;
  font-family: Raleway;
  color: white;
  text-transform: uppercase;
}

.caname span {color: #A3658E;}

.caimpinf {
  width: 240px;
  text-align: center;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-left: 0px;
  margin-right: -2px;
  border-spacing: 0px;
}

.catd {
  width: 50%;
  padding: 10px;
  background-color: white;
}

.catv {
  text-align: center;
  border-bottom: 1px solid #ddd;
  width: 50%;
  padding: 10px;
  border-right: 1px solid #ddd;
  background-color: white;
}

.catv i {margin-right: 5px;}

.caper {
  padding: 10px;
  font-family: Roboto Mono;
  font-size: 15px;
}

.caper i {font-size: 12px;}

.cahist {
  background-color: white;
  border-width: 0px 1px 1px 1px;
  border-color: #ddd;
  border-style: solid;
  padding: 10px;
}

.cafc {
  padding: 10px;
  text-align: right;
  background-color: #362C47;
  font-weight: 700;
  font-style: italic;
  color: white;
  font-size: 20px;
  line-height: 0.9;
  font-family: Source Sans Pro;
  text-transform: lowercase;
  margin-right: 0px;
}

.cafc span {color: #A3658E;}

.addy {
  font-size: 9px;
  line-height: 10px;
  letter-spacing: -1px;
  text-align:right;
  width:532px;
  margin:0px auto;
  height: 0px;
  overflow: hidden;
}

.cain {
  padding: 10px;
  vertical-align: top;
  height: 150px;
  font-family: Open Sans;
  font-family: 10px;
  text-align: justify;
  line-height: 1;
  width: 300px;
  background-color: white;
  border-left: 1px solid #ddd;
}

.caimf {
  width: 240px;
  vertical-align: top;
  border-spacing: 0px;
  background-color:#362C47;
  padding: 0px;
  border-right: 1px solid #ddd;
}

</style>
<!-- Code désigné par Addy. Merci de créditer l'auteur ! Lien source : http://yourscent.jcink.net/index.php?showtopic=158 -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:800|Roboto+Mono:300i|Source+Sans+Pro:700i|Open+Sans" rel="stylesheet">

<div id="caov">
<div id="caname">
    <table style="width: 100%;">
    <tr>
        <td class="a1"><img src="http://placehold.it/100x100" class="caicon"></td>
        <td class="caname"><span>name</span>mcname</td>
    </tr>
    </table>
</div>
<table class="a2">
    <tr>
    <td class="caimf">
        <table class="caimpinf">
        <tr>
            <td class="catv"><i class="fa fa-user fa-fw" aria-hidden="true"></i> age</td>
            <td class="catd"> here</td>
        </tr>
        <tr>
            <td class="catv"><i class="fa fa-venus-mars fa-fw" aria-hidden="true"></i> gender</td>
            <td class="catd"> here</td>
        </tr>
        <tr>
            <td class="catv"><i class="fa fa-briefcase fa-fw" aria-hidden="true"></i> occupation</td>
            <td class="catd"> here</td>
        </tr>
        <tr>
            <td class="catv"><i class="fa fa-heartbeat fa-fw" aria-hidden="true"></i> sexuality</td>
            <td class="catd"> here</td>
        </tr>
        <tr>
            <td class="catv"><i class="fa fa-globe" aria-hidden="true"></i> world</td>
            <td class="catd"> here</td>
        </tr>
        <tr>
            <td class="catv" style="border-bottom: 0;"><i class="fa fa-paper-plane" aria-hidden="true"></i> species</td>
            <td class="catd"> here</td>
        </tr>
        </table>
        <div class="cafc">looks like <span>name</span> from <span>series</span></div>
    </td>
    <td class="cain">
        <div class="caper"><i class="fa fa-chevron-right" aria-hidden="true"></i> personality</div>
        blah
        <div class="caper"><i class="fa fa-chevron-right" aria-hidden="true"></i> history</div>
        blah
    </td>
    </tr>
</table>
</div>
<div class="addy">ADDY</div>

[/html]