[html]
<style>
.aodov {
  margin: 0px auto;
  padding: 5px;
  border: 1px solid #ddd;
  background-color: #fcfcfc;
  width: 500px;
}

.aodmtop {
  background-color: #2c2c2c;
  padding: 20px;
  text-align: center;
  color: #BF9D3E;
  font-family: Geneva;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 2px;
}

.aodimgtop1 {
  height: 250px;
  width: 500px;
  overflow: hidden;
  background:url(https://i.imgur.com/zQB6Rzi.jpg)
}

.aodimgtop {
  height: 250px;
  width: 400px;
  background:rgba(0,0,0,0.6);
  border-right: 1px solid white;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: -300px;
  transition: 0.5s;
}

.aodicon {
  float: right;
  margin-left: auto;
  height: 65px;
  width: 65px;
  background-color: #fdfdfd;
  border: 5px solid #fdfdfd;
  transform: rotate(-45deg);
  margin-right: -38px;
  overflow: hidden;
  display: inline-block;
}

.aodicon img {
  height: 100px;
  transform: rotate(45deg);
  margin-left:-17px;
  margin-top: -15px;
}

.aodimgtext {
  font-size: 9px;
  color: white;
  display: inline-block;
  width: 250px;
  font-family: Open Sans;
  text-transform: uppercase;
  margin-bottom: -38px;
  margin-left: 100px;
  opacity: 0;
  transition: 0.3s;
  border-bottom: 1px solid #fdfdfd;
}

.aodimgtext a {
  color: #BF9D3E;
  font-family: Open Sans;
}

.aodov:hover .aodimgtop {margin-left:0px;}

.aodov:hover .aodimgtext{
  opacity: 1;
  transition: 0.3s 0.2s;
}

.aodmain1 {
  padding: 40px;
  background-color: white;
}

.aodquote {
  padding: 10px 40px 0px 40px;
  text-align: justify;
  font-size: 12px;
  line-height: 1;
  font-family: Libre Baskerville;
  margin-bottom: 40px;
}

.aodquote div {
  color: #BF9D3E;
  font-size: 50px;
  float: left;
  margin-right: 10px;
  margin-top: -10px;
  font-family: Open Sans;
}

.aodmain {
  font-family: Open Sans;
  font-size: 10px;
  text-align: justify;
}

.addy {
  font-size: 9px;
  line-height: 10px;
  letter-spacing: -1px;
  text-align:right;
  width:510px;
  margin:0px auto;
}
</style>
<!-- Code désigné par Addy. Merci de créditer l'auteur ! Lien source : http://pixel-perfect.boards.net/thread/567/ashes-dreams -->
​

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

<div class="aodov">
  <div class="aodmtop">ashes of dreams</div>
  <div class="aodimgtop1">
    <div class="aodimgtop">
      <div class="aodimgtext">tag : @admin</div>
      <div class="aodicon">
        <img src="https://thumbs3.imgbox.com/1c/27/4kakyb2o_b.png" style="max-width:100px";>
      </div>
    </div>
  </div>
  <div class="aodmain1">
    <div class="aodquote">
      <div>❝</div>are we the plaything of fiends or merely the dreams that we're telling ourselves
    </div>
    <div class="aodmain">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dignissim sit amet neque et aliquet. Duis augue odio, maximus in nulla ac, tincidunt aliquam nulla. Pellentesque libero erat, porttitor eu hendrerit sit amet, tristique vitae nibh. Curabitur convallis diam ac quam accumsan volutpat. Duis feugiat mauris ut lorem aliquam, ut rutrum ligula imperdiet. Praesent sapien tellus, feugiat vel mollis quis, fringilla id nisi. Sed a aliquam felis. Aliquam non dui vitae erat pellentesque bibendum id ac sapien. Quisque lacinia lacus at augue hendrerit, vitae ullamcorper lacus fermentum. Sed quis fermentum massa. Nunc non tortor id dolor ullamcorper iaculis viverra in metus. Phasellus tincidunt sit amet nulla ac tincidunt. Phasellus eu tellus ut nibh sollicitudin auctor. Donec id massa ex. Morbi efficitur ut nunc id lobortis. Vestibulum lobortis posuere diam vitae ornare.<break><break>
      Nulla enim leo, sodales sed felis quis, pulvinar venenatis magna. Duis ornare consectetur mi sit amet tempus. Phasellus rhoncus, nulla non imperdiet congue, justo odio placerat urna, at porttitor nulla metus et tellus. Nunc vulputate est in nulla gravida, ac sodales risus commodo. Vivamus pretium enim in dolor pretium, nec placerat diam tristique. Sed dui nulla, mollis at iaculis et, lobortis vitae lacus. Aenean hendrerit ipsum sit amet maximus molestie. Nam est dolor, rutrum ac laoreet eget, tempor et mi. Nullam volutpat ornare metus. Aliquam et efficitur orci, at malesuada odio. Donec ornare elit in metus pretium aliquet.
    </div>
  </div>
</div>
<div class="addy"><a href="http://pixel-perfect.boards.net/user/131">addy</a></div>

[/html]

[html]
<style>

#fva-outer {
  margin: 0 auto;
  width: 500px;
  height: 500px;
  background: #fafafa;
  position: relative;
  box-shadow: 2px 2px 1px #ddd;
  overflow: hidden;
}

.fva-tb {
  width: 230px;
  height: 460px;
  background: #322b3a;
  position: absolute;
  z-index: 5;
  right: 20px;
  top: 20px;
  box-sizing: border-box;
  border-left: 5px solid #FF4E44;
}

.fva-avimg {
  border-radius: 100%;
  width: 120px;
  height: 120px;
  overflow: hidden;
  position: relative;
  top: 30px;
  left: 50px;
}

.fva-tbl {
  margin-left: auto;
  margin-right: auto;
  color: #c8cdd1;
  width: 190px;
  text-transform: uppercase;
  text-align: left;
  letter-spacing: 0.5px;
  font: normal normal 9px/11px 'Montserrat',sans-serif;
  position: relative;
  top: 60px;
}

#fva-outer .fva-tbl b {
  background: #FF4E44;
  color: #333;
  padding: 2px 2px;
  margin-right: 5px;
  font: normal normal 9px 'Montserrat',sans-serif;
  position: relative;
  top: -1px;
  letter-spacing: 0px;
}

.fva-player {
  font: 800 italic 42px/1px 'Montserrat',sans-serif;
  text-align: center;
  letter-spacing: -3px;
  color: white;
  height: 18px;
  width: 175px;
  background: #FF4E44;
  position: absolute;
  bottom: 60px;
  right: 45px;
  z-index: 5;
  text-transform: lowercase;
}

.fva-cont {
  font: normal normal 9px 'Montserrat',sans-serif;
  color: #fafafa;
  text-transform: uppercase;
  text-align: center;
  width: 175px;
  position: absolute;
  top: 20px;
  letter-spacing: 1px;
}

.fva-bgimg {
  width: 230px;
  height: 460px;
  position: absolute;
  top: 20px;
  left: 20px;
  outline: 1px solid #322b3a;
  outline-offset: -8px;
  transition: all 0.5s ease 0s;
}

#fva-outer:hover .fva-bgimg {
  filter: grayscale(100%);
  transition: all 0.5s ease 0s;
}

.fva-inn {
  width: 180px;
  height: 410px;
  font: normal normal 10px 'Montserrat',sans-serif;
  color: #333;
  text-align: justify;
  background: rgba(255,255,255,0.9);
  position: relative;
  padding: 25px;
  top: 20px;
  left: 250px;
  transition: all 0.5s ease 0s;
}

#fva-outer:hover .fva-inn {
  left: 20px;
  transition: all 0.7s ease 0.2s;
}

.fva-inntabs {
  height: 370px;
  width: 100%;
  position: relative;
}

.fva-inntab {float: left;}

.fva-inntab label {
  height: 10px;
  width: 10px;
  border: 4px solid #FF4E44;
  border-radius: 50%;
  display: block;
  margin: 5px;
  position: relative;
  left: 50px;
  top: 385px;
  z-index: 4;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

.fva-inntab input[type=radio]:hover ~ label {
  border-color: #413059;
  transition: all 0.3s ease 0s;
}

.fva-inntab input[type=radio]:checked ~ label {
  background: #413059;
  border-color: #413059;
  z-index: 3;
  transition: all 0.3s ease 0s;
}

.fva-inntab input[type=radio] {display:  none;}

.fva-inncontent  {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding-right: 10px;
  opacity: 0;
  overflow: auto;
  transition: all 0.3s ease 0s;
}

.fva-inntab input[type=radio]:checked ~ label ~ .fva-inncontent {
  z-index:  1;
  opacity: 1;
  transition: all 0.3s ease 0s;
}

.fva-name {
  width: 440px;
  font: 800 normal 42px/30px 'Montserrat',sans-serif;
  letter-spacing: -4px;
  text-transform: uppercase;
  text-align: center;
  color: white;
  transform: rotate(-90deg);
  text-shadow: 4px 0px 0px #FF4E44;
  position: absolute;
  top: 235px;
  left: 15px;
  transition: all 0.5s ease 0s;
}

#fva-outer:hover .fva-name {
  left: -185px;
  opacity: 0;
  transition: left 0.7s ease 0.2s, opacity 0.5s ease 0.4s;
}

#fva-outer .fva-inncontent b {color: #413059;}
#fva-outer .fva-inncontent i {color: #413059;}
#fva-outer .fva-inncontent a {color: #413059; font-weight: 700; text-decoration: none;}

#fva-outer .fva-inncontent: : -webkit-scrollbar {width: 5px;}
#fva-outer .fva-inncontent: : -webkit-scrollbar-thumb {background: #413059;}
#fva-outer .fva-inncontent: : -webkit-scrollbar-track {background: #ddd;}

#fva-outer .fva-inncontent header {
  display: block;
  padding: 2px 5px;
  font: 800 italic 25px/15px 'Montserrat',sans-serif;
  letter-spacing: -2px;
  text-align: right;
  color: white;
  background: #FF4E44;
  height: 18px;
  margin-bottom: 10px;
  margin-top: 20px;
}

#fva-outer .fva-inncontent impt {
  display: block;
  padding: 5px;
  letter-spacing: 2px;
  font: 700 normal 12px 'Montserrat',sans-serif;
  color: #413059;
  text-transform: lowercase;
}
</style>
<!-- Code désigné par King Boo. Merci de créditer l'auteur ! Lien source : http://cttw.jcink.net/index.php?showtopic=22279 -->
​

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

<div id="fva-outer">
  <img class="fva-bgimg" src="https://s8.postimg.cc/481hk4o39/image.png" width="230px"> 
  <div class="fva-name">first last</div>
  <div class="fva-inn">
    <div class="fva-inntabs">
      <div class="fva-inntab">
        <input type="radio" id="fva-inntab-1" name="fva-inntab-group-1" checked>
        <label for="fva-inntab-1"></label>
        <div class="fva-inncontent">
          <header>overview</header>
          <b>bold looks like this. </b>When using <i>italic text be sure to wrap in < i > tags.</i>Gummi bears chocolate cotton candy chupa chups carrot cake. Chocolate bar sesame snaps muffin gummies cake cupcake brownie tootsie roll. Icing chupa chups powder pastry cake tootsie roll tart jelly beans candy. Sweet croissant lemon drops pudding. Chocolate cake jelly beans danish candy canes bear claw soufflé. Cheesecake marzipan tootsie roll chocolate cake croissant marshmallow cupcake.
          Gummi bears chocolate cotton candy chupa chups carrot cake. Chocolate bar sesame snaps muffin gummies cake cupcake brownie tootsie roll. Icing chupa chups powder pastry cake tootsie roll tart jelly beans candy. Sweet croissant lemon drops pudding. Chocolate cake jelly beans danish candy canes bear claw soufflé. Cheesecake marzipan tootsie roll chocolate cake croissant marshmallow cupcake.
          Gummi bears chocolate cotton candy chupa chups carrot cake. Chocolate bar sesame snaps muffin gummies cake cupcake brownie tootsie roll. Icing chupa chups powder pastry cake tootsie roll tart jelly beans candy. Sweet croissant lemon drops pudding. Chocolate cake jelly beans danish candy canes bear claw soufflé. Cheesecake marzipan tootsie roll chocolate cake croissant marshmallow cupcake.
        </div>
      </div>
      <div class="fva-inntab">
        <input type="radio" id="fva-inntab-2" name="fva-inntab-group-1">
        <label for="fva-inntab-2"></label>
        <div class="fva-inncontent">
          <header>platonic</header>
          Cupcake ipsum dolor sit amet. Powder candy canes apple pie. Icing sugar plum chocolate cookie pie jelly-o toffee sesame snaps carrot cake. Cake chocolate apple pie jelly beans gummies. Pie tiramisu chocolate cake. Carrot cake croissant cookie cookie biscuit.
          <header>antagonistic</header>
          Cupcake ipsum dolor sit amet. Powder candy canes apple pie. Icing sugar plum chocolate cookie pie jelly-o toffee sesame snaps carrot cake. Cake chocolate apple pie jelly beans gummies. Pie tiramisu chocolate cake. Carrot cake croissant cookie cookie biscuit.
          <header>romantic</header>
          Cupcake ipsum dolor sit amet. Powder candy canes apple pie. Icing sugar plum chocolate cookie pie jelly-o toffee sesame snaps carrot cake. Cake chocolate apple pie jelly beans gummies. Pie tiramisu chocolate cake. Carrot cake croissant cookie cookie biscuit.
        </div>
      </div>
      <div class="fva-inntab">
        <input type="radio" id="fva-inntab-3" name="fva-inntab-group-1">
        <label for="fva-inntab-3"></span></label>
        <div class="fva-inncontent">
          <header>tracker</header>
          <impt>active</impt>
          <a href='http: //'>--thread title</a> with john smith<br>
          <a href='http: //'>--thread title</a> with john smith<br>
          <a href='http: //'>--thread title</a> with john smith<br>
          <impt>completed</impt>
          <a href='http: //'>--thread title</a> with john smith<br>
          <a href='http: //'>--thread title</a> with john smith<br>
          <a href='http: //'>--thread title</a> with john smith<br>
          <impt>comms</impt>
          <a href='http: //'>--thread title</a> with john smith<br>
          <a href='http: //'>--thread title</a> with john smith<br>
          <a href='http: //'>--thread title</a> with john smith<br>
        </div>
      </div>
    </div>
  </div>
  <div class="fva-tb">
    <img class="fva-avimg" src="https://78.media.tumblr.com/269499d8e9a9b78c06c7377248b292aa/tumblr_inline_p7k49xhRe31rre457_540.gif" width=120>
    <div class="fva-tbl">
      <b>age (dob)</b>## (here)
      <br><br><b>gender</b>here
      <br><br><b>pronouns</b>here
      <br><br><b>membergroup</b>here
      <br><br><b>occupation</b>here
      <br><br><b>sexuality</b>here
      <br><br><b>zodiac</b>here
      <br><br><b>mbti</b>here
      <br><br><b>face claim</b>fc first last
    </div> 
  </div>
  <div class="fva-player">alias
    <div class="fva-cont">pronouns / timez / contact</div> 
  </div>
</div>

[/html]

[html]
<style>
.dansemacadan1 {width: 500px;
margin: auto;
text-align: center;}

.dansemacadan2 {
  float: left;
  background-image: url(https://i.imgur.com/0R94pdg.jpg);
  width: 150px;
  height: 600px;
}

.dansemacadan3 {
  left: 25px;
  width: 295px;
  height: 390px;
  overflow: auto;
  padding-right: 8px;
  text-align: justify;
  font-family: verdana;
  font-size: 9px;
  color: #353535;
  position: relative;
}

.d1 {
  float: left;
  margin-right: 5px;
  font-family: arial;
  font-size: 25px;
  color: #8C3838;
  font-weight: bold;
  font-style: italic;
}

.d3 {
  background-color: #EFEFEF;
  padding: 25px;
}

.d3 img {
  margin-bottom: 25px;
  width: 100px;
  border-radius: 50%;
}

.d2 {
  margin-top: 10px;
  margin-left: 150px;
  width: 300px;
  height: 25px;
  text-align: justify;
  font-family: verdana;
  font-size: 9px;
  color: #888;
}

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

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

<div class="dansemacadan1">
<div class="dansemacadan2"></div>
<div class="d3">
    <img src="https://i.imgur.com/tl1xzc4.png">
    <div class="dansemacadan3">
    Lorem <b>ipsum dolor sit amet,</b> consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="d2">
    <div class="d1">OOC</div> tag + notes, keep em short folks</div>
    </div>
</div>
<div class="d4">dandy ♫</div>
</div>

[/html]

[html]
<style>
.black {
  width: 500px;
  padding: 10px;
  background: #fff;
  margin: 0 auto;
}

.pickback {
  border: 1px solid #eee;
  min-height: 280px;
  background: url('http://i.imgur.com/56Btxhf.png');
}

.queen {
  width:  500px;
  height:  280px;
  background:  url('http://i.imgur.com/YVq4qhE.jpg');
  background-size: cover;
  background-position: right center;
  -webkit-clip-path:  polygon(0% 0%, 100% 0, 100% 0%, 0% 100%, 0 100%);
  clip-path:  polygon(0% 0%, 100% 0, 100% 0%, 0% 100%, 0 100%);
}

.longlive {
  text-align: right;
  margin-top: -130px;
  margin-right: 20px;
  font-family: playfair display;
  font-size: 11px;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 300;
  padding: 5px;
  border: 1px solid #eee;
  color: #eee;
  text-shadow: 1px 1px 1px #000;
}

.nomistake {
  line-height:  12px;
  font-size: 11px;
  font-family: verdana;
  margin-top: 10px;
  text-align: justify;
}

.nomistake b {
  font-family:  playfair display;
  font-weight: 700;
  color: #F31133;
}

.nomistake::first-letter {
  line-height:  70px;
  float:  left;
  font-size:  70px;
  background: #444;
  padding: 5px;
  margin-bottom: 5px;
  margin-left:  5px;
  margin-right:  5px;
  border: 3px double #999;
  color:  #eee;
  font-family: playfair display;
  text-transform:  uppercase;
}

.rcredits {
  font-size: 6px;
  font-family: calibri;
  letter-spacing: 3px;
  text-transform: uppercase;
}

</style>
<!-- Code désigné par Sifr. Merci de créditer l'auteur ! Lien source : http://adoxographyv2.boards.net/thread/4414/rise -->
​

<div class="black">
<div class="pickback">
    <div class="queen"></div>
    <div class="longlive">
    This is no mistake, no accident
    When you think the final nail is in, Think again
    Don’t be surprised, I will still rise
    </div>
</div>
<div class="nomistake">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. "Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum." Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<center><a href="http://adoxographyv2.boards.net/user/4" class="rcredits">MADE BY SIFR</a></center>
</div>

[/html]

[html]
<style>

.xion003 {
  width: 550px;
  border: 10px solid #fafafa;
  box-shadow: 0px 0px 0px 1px #ddd;
}

.xion003b {
  position: relative;
  height: 150px;
  background: #FFDBED;
  padding: 10px;
  overflow: hidden;
}

.xion003c {
  position: relative;
  width: 130px;
  height: 130px;
  border: 10px solid #fff;
  float:left;
  box-shadow: 0px 0px 4px 2px #ccc;
  background: url(https://s9.postimg.cc/4uobh1pnz/oie_12e4_Yb_HNHSHJ.png);
  background-size: cover;
  z-index: 10;
}

.xion003ca {
  background: #fff;
  -webkit-transform: rotate(8deg);
  width: 700px;
  height: 300px;
  position: absolute;
  z-index: 9;
  margin: 120px -60px;
}

.xion003d {
  position: absolute;;
  font-family: dancing script;
  font-size: 70px;
  top: 10px;
  left: 160px;
  color: #fff;
  text-shadow: 0px 0px 8px #888;
  -webkit-transform: rotate(7deg);
  z-index: 10;
}

.xion003e {
  position: absolute;
  font-family: titillium web;
  font-size: 13px;
  top: 100px;
  left: 220px;
  text-transform: uppercase;
  line-height: 12px;
  text-shadow: 0px 0px 8px #888;
  color: #fff;
  -webkit-transform: rotate(8.5deg);
  z-index: 10;
}

.xion003e b {
  font-family: titillium web;
  font-size: 56px;
  position: absolute;
  margin: 20px -40px;
  color: #fff;
}

.xion003f {
  border: 10px solid #fff;
  text-align: justify;
  font-family: titillium web;
  font-size: 12px;
  line-height: 12px;
  color: #333;
  background: #fff;
}

.xion003f b {
  text-align: justify;
  font-family: montserrat;
  font-size: 14px;
  line-height: 12px;
  color: #e4afb7;
}

.xion003g {
  height: 12px;
  padding: 5px;
  font-family: titillium web;
  color: #fff;
  font-size: 9px;
  text-transform: uppercase;
  background: #e4afb7;
}

.xredits {
  text-decoration: none;
  color: #333;
  font-family: titillium web;
  font-size: 8px;
}

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

<link href="https://fonts.googleapis.com/css?family=Montserrat|Titillium+Web|Dancing+Script" rel="stylesheet">

<center>
  <div class="xion003">
   <div class="xion003a">
     <div class="xion003b">
       <div class="xion003c"></div>
       <div class="xion003ca"></div>
       <div class="xion003d">La Vie en Rose</div><br>
       <div class="xion003e">
          <b>❛❛</b>and when you sing angels sing from above<br> every day seems to turn into love songs
       </div>
     </div>
     <div class="xion003f">
       <b>"Lorem ipsum dolor sit amet", </b>ei mel wisi periculis, id malis neglegentur complectitur vel, nec sint movet an. An pri eripuit insolens. Mel hinc noluisse consectetuer an, id sit equidem impedit deseruisse, enim gubergren ut mei. Et mel fuisset eleifend, ad erant aliquid corrumpit usu. Ut augue liber conceptam sit, in facete suavitate vim.<br><br>
       Per id stet blandit constituto. Duo regione vituperata efficiendi ad. Pri eu epicurei petentium, ludus definiebas te mea, moderatius omittantur vix id. Quis officiis an vel, facer discere sed cu. Sit erat rationibus disputationi et, duo ex unum aeterno.
       <br><br>
       Quo ullum iudico melius eu, mei partem blandit in. Eu porro congue voluptaria per, vim an mucius offendit scripserit. Sint bonorum eam et. Vis ex iudico oratio, duo ne augue equidem ancillae, at quem ullum oportere pro.
       <br><br>
       Pri tamquam appareat no, <b>"cu eam facilisi incorrupte"</b>. Vocent aliquam posidonium an vim. Sed scaevola perfecto conclusionemque ad, ferri commune in cum. Meis errem menandri usu an, no mollis urbanitas pro. Probo graecis has cu. Eum eripuit probatus liberavisse ei, ornatus vulputate ea duo, insolens maluisset cu eos. Pro quis laoreet explicari id, invidunt reprimique an vim, case ludus dolore mel ut.
       <br><br>
       Ea vel meis brute, nec in mazim nullam disputationi. Ex wisi exerci mel, minim nostro commodo vim ei. Ea omnis ipsum delicatissimi has. Duo posse ornatus appareat ex, mea nonumy soluta vivendum ut.
     </div>
     <div class="xion003g">Notes here. One line only</div>
   </div>
</div>
<a class="xcredits" href="http://sonderx.jcink.net/index.php?showuser=199">by xion of sonder</a>
</center>

[/html]

[html]
<style>
.harjac {
  display: block;
  text-align: center;
  width: 100px;
  margin: auto;
}

.dna2*:: -webkit-scrollbar,.dna2 *: : -webkit-scrollbar-track,.dna2 *: : -webkit-scrollbar-thumb {border: 0;}
.dna2*:: -webkit-scrollbar {width: 3px;}
.dna2*:: -webkit-scrollbar-thumb{ background: #ececea; border-radius: 10px;}
.dna2* {box-sizing: border-box}

.dna2 {
  margin: auto;
  width: 450px;
  height: 350px;
  background: #212121;
  position: relative;
  overflow: hidden;
  z-index: 2;
  font-family: 'open sans';
  font-size: 10px;
  color: #212121;
  line-height: 1.4;
}

.dna2::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(http://i.imgur.com/LxxOLTb.png) center;
  background-size: cover;
  z-index: -1;
  transition: .5s;
}

.dna2:hover::after {
  opacity: .7;
}

.dna2::before {
  content: '';
  position: absolute;
  top: 250px;
  left: -40%;
  width: 160%;
  height: 100%;
  background: white;
  border-radius: 100%;
  box-shadow: 0 0 3px white;
  transition: .5s;
}

.dna2:hover::before {
  top: 90px;
}

.dna2 .title {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px 15px;
  text-transform: uppercase;
  transition: .5s;
  height: 70px;
  transform: translatey(0);
  font-family: 'raleway';
  line-height: 1.2;
}

.dna2 .title b {
  font-size: 25px;
  display: block;
  letter-spacing: -1px;
}

.dna2 .title i {
  font-size: 12px;
  font-style: normal;
}

.dna2:hover .title {
  transform: translatey(-265px);
  color: white;
}

.dna2 .post {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 430px;
  transform: translatey(230px);
  transition: .5s;
  text-align: justify;
}

.dna2:hover .post {transform: translatey(0);}
.dna2 .post b {color: #6c9fbe;}

.dna2 .posttext {
  height: 220px;
  padding: 10px;
  width: 330px;
  overflow: auto;
}

.dna2 .notes {
  position: absolute;
  bottom: 10px;
  right: 0;
  width: 90px;
  text-align: left;
}
</style>
<!-- Code désigné par Inside us only stars. Merci de créditer l'auteur ! Lien source : http://sonderx.jcink.net/index.php?showtopic=38 -->
​

<link href="https: //fonts.googleapis.com/css?family=Raleway: 400,700|Open+Sans: 400,700" rel="stylesheet">

<div class="dna2">
  <div class="title">
    <b>have i always loved you?</b> <i>have i always known? / have i always loved you alone?</i>
  </div>
  <div class="post">
    <div class="posttext">
      Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit.</b> Vestibulum commodo massa eu mattis mollis. Mauris quis accumsan ex, eu fringilla turpis. Sed pulvinar libero nisl. Cras sodales facilisis dui in pharetra. Maecenas ornare mi ac libero fermentum, non scelerisque dolor convallis. <b>Nullam congue</b> turpis elit, quis dictum felis hendrerit non.<br/><br/> In quis turpis at massa ornare aliquet ac vitae ipsum. In vestibulum, augue quis sodales pellentesque, urna felis feugiat metus, vel aliquet felis ex et sem. In sagittis metus augue, a accumsan nisi rutrum in. Ut ut faucibus nisl. In at porta nulla. Phasellus vitae euismod diam. Suspendisse et fermentum justo. Nullam mattis quis ante nec cursus.<br/><br/> Nulla non imperdiet orci. Maecenas est nibh, pharetra id lacus at, auctor imperdiet mauris. Donec massa neque, vestibulum id fringilla vitae, consequat et enim. Morbi non lorem accumsan, semper justo ac, maximus magna. Curabitur efficitur orci metus, at tempus libero euismod vel. Praesent eget porta sem, in congue risus. Suspendisse aliquam nisi quis iaculis consectetur. Mauris eu sollicitudin lectus. Sed nibh lorem, suscipit vel porttitor sed, semper eu turpis.<br/><br/> Nullam consequat libero in pretium porttitor. Suspendisse a est gravida, ultricies augue mollis, tristique odio. Praesent nec massa et dolor mollis dapibus. Etiam et sagittis mauris, quis sagittis neque. Sed sagittis tortor vel auctor bibendum. Integer vel arcu vitae purus tincidunt sagittis sollicitudin venenatis diam. Quisque interdum tempus viverra. Vivamus consectetur sem diam, ut pulvinar metus feugiat at. Donec vehicula varius massa, vitae varius arcu facilisis id. Aenean sit amet ultrices est, nec pulvinar dui. In eget placerat magna. Suspendisse luctus risus mauris, nec malesuada nisl pulvinar quis. Praesent et metus scelerisque, volutpat lacus ac, hendrerit quam.
    </div>
    <div class="notes"> <b>notes</b> and stuff goes here, word count etc<br/><br/>@name </div>
  </div>
</div>
<a href="http: //sonderx.jcink.net/index.php?showuser=6" class="harjac">harja</a>

[/html]

[html]
<style>
.tellmewhy {
  background: url("https://i.imgbox.com/V1OFi3hQ.jpg");
  height: 300px;
  width: 400px;
  border: 10px solid #1f272b;
}

.nevercared {
  width: 210px;
  font: 10px nunito sans;
  height: 210px;
  overflow-y: scroll;
  background: rgba(9,19,23, .8);
  text-align: justify;
  padding: 15px;
  color: #7D898C;
  margin-top: 0px;
  line-height: 12px;
}

.nevercared::-webkit-scrollbar {width: 5px;}

.nevercared::-webkit-scrollbar-thumb {
  background-color: #91671B;
  border: none;
  border-radius: none;
}

.nevercared::-webkit-scrollbar-track {background: #7D898C;}
.nevercared::-webkit-scrollbar-corner {display: none;}

.stillhadtime {
  width: 400px;
  background: #1f272b;
  font: 24px nunito sans;
  margin-top: 10px;
  text-transform: uppercase;
  color: #91671B;
  letter-spacing: -1px;
}

.giveup {
  color: #929FA7;
  font: 13px raleway;
  text-transform: lowercase;
  font-style: italic;
  font-variant: small-caps;
  font-weight: bold;
  text-align: right;
  margin-right: 12px;
  margin-top: -9px;
}

.nevertry {
  width: 91px;
  padding: 4px 10px;
  text-align: justify;
  border-bottom: 1px solid #91671B;
  font: 8px raleway;
  line-height: 9px;
  color: #929FA7;
  background: #1f272b;
  height: 78px;
  opacity: .9;
  border-left: 19px solid #A87E32;
  overflow: auto;
}

.nevertry::-webkit-scrollbar {width: 0px;}

.nevertry::-webkit-scrollbar-thumb {
  background-color: #91671B;
  border: none;
  border-radius: none;
}

.nevertry::-webkit-scrollbar-track {background: #7D898C;}
.nevertry::-webkit-scrollbar-corner {display: none;}

.whenitsgone {
  width: 125px;
  padding-left: 0px;
  padding-right: 5px;
  padding-right: 5px;
  padding-right: 5px;
  font: 11px nunito sans;
  background: #1f272b;
  font-variant: small-caps;
  margin-top: 5px;
  opacity: .9;
  color: #A87E32;
  letter-spacing: 1px;
}

.whenitsgone a {
  color: #A87E32;
  text-transform: lowercase;
  letter-spacing: 1px;
}

.intothefire {border-bottom: 1px solid #2e393f;}
.itstoolate {color: #1f272b;}

.itstoolate a {
  color: #1f272b;
  font: 12px nunito sans;
  font-variant: small-caps;
  letter-spacing: 2px;
  font-weight: bold;
}

.h1 {
  border: 15px solid #1f272b;
  height: 100px;
  width: 100px;
}

.h2 {
  background-color: #A87E32;
  color: #1f272b;
  padding: 3px;
  font-size: 12px;
}
</style>
<!-- Code désigné par Hiraeth. Merci de créditer l'auteur ! Lien source : http://sonderx.jcink.net/index.php?showtopic=479 -->
​

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

<center>
<div class="tellmewhy">
    <div class="stillhadtime">we all fall <span style="color: #A87E32;">down</span> into the fire</div>
    <div class="giveup">- - and my wishes have all come true</div>
    <table cellpadding="5">
    <tr>
        <td>
        <div class="nevercared">
            Nap all day. Stares at human while pushing stuff off a table freak human out make funny noise mow mow mow mow mow mow success now attack human. Destroy couch as revenge lick plastic bags. Eat half my food and ask for more eat from dog's food and meowwww. Scratch at fleas, meow until belly rubs, hide behind curtain when vacuum cleaner is on scratch strangers and poo on owners food pooping rainbow while flying in a toasted bread costume in space mark territory refuse to drink water except out of someone's glass and
            cereal boxes make for five star accommodation lick arm hair, but jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water. Stare at the wall, play with food and get confused by dust.
            Spit up on light gray carpet instead of adjacent linoleum love to play with owner's hair tie yet step on your keyboard while you're gaming and then turn in a circle and pounce on unsuspecting person kick up litter or sit by the fire and eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap.
        </div>
        </td>
        <td>
        <div style="intothefire">
            <img src="https://i.imgbox.com/jH0jHEUM.jpg" class="h1">
        </div>
        <div class="whenitsgone">
            <i class="fa fa-tags" aria-hidden="true" class="h2"></i>
            @[tagname]
        </div>
        <div class="nevertry">notes go here. it scrolls, so blab away</div>
        </td>
    </tr>
    </table>
</div>
<div class="itstoolate">✘ <a href="http://sonderx.jcink.net/index.php?showuser=43">hiraeth</a></div>
</center>

[/html]

[html]
<style>
.Ishikirimaru {
  width: 504px;
  height: 354px;
  border: 15px solid #d8d8d8;
}

.tsurumaru {
  width: 500px;
  height: 350px;
  background-image: url(http://i.imgur.com/DcrvAa7.png);
  border: 2px solid #fafafa;
  overflow: hidden;
  -webkit-transition:  1.2s ease;
  -moz-transition:  1.2s ease;
}

.tsurumaru:hover {
  width: 500px;
  height: 350px;
  background-image: url(http://i.imgur.com/DcrvAa7.png);
  border: 2px solid #B40404;
  overflow: hidden;
  -webkit-transition:  1.2s ease;
  -moz-transition:  1.2s ease;
}

.ookuri{
  width: 500px;
  height: 350px;
  background: rgba(240,240,240, 0.4);
}

.hitofuri {
  width: 250px;
  height: 250px;
  float: right;
}

.mitsuta {
  width: 180px;
  height: 2px;
  overflow: hidden;
}

.mitsuta2 {
  width: 180px;
  height: 2px;
  overflow: hidden;
  -webkit-transform: rotate(45deg);
  float: right;
  margin-top: 80px;
  margin-right: -20px
}

.mitsuta3 {
  width: 180px;
  height: 2px;
  overflow: hidden;
  -webkit-transform: rotate(135deg);
  float: right;
  margin-top: 124px;
  margin-right: -20px
}

.mitsuta4 {
  width: 180px;
  height: 2px;
  overflow: hidden;
-webkit-transform: rotate(225deg);
  float: left;
  margin-top: -2px;
  margin-left: -36px
}

.mitsuta5 {
  width: 180px;
  height: 2px;
  overflow: hidden;
-webkit-transform: rotate(315deg);
  float: left;
  margin-top: -128px;
  margin-left: -36px;
}

.mitsuta3 {
  width: 180px;
  height: 2px;
  overflow: hidden;
  -webkit-transform: rotate(135deg);
  float: right;
  margin-top: 124px;
  margin-right: -20px
}

.mikazuki {
  width: 180px;
  height: 2px;
  background-color: #fafafa;
}

.kiyomitsu {
  width: 180px;
  height: 2px;
  background-color: #B40404;
  float: left;
  margin-left: -180px;
  -webkit-transition:  1.2s ease;
  -moz-transition:  1.2s ease;
}

.tsurumaru:hover .kiyomitsu {
  width: 180px;
  height: 2px;
  background-color: #B40404;
  float: left;
  margin-left: 0px;
  -webkit-transition:  1.2s ease;
  -moz-transition:  1.2s ease;
}

.yasusada {
  width: 155px;
  height: 155px;
  position: relative;
  z-index: 10;
  -webkit-transform: rotate(45deg);
  overflow: hidden;
  background-color: #fafafa;
  float: left;
  margin-top: -142px;
  margin-left: 40px;
  opacity: 0;
  -webkit-transition:  1.2s ease;
  -moz-transition:  1.2s ease;
}

.tsurumaru:hover .yasusada{
  width: 155px;
  height: 155px;
  position: relative;
  z-index: 10;
  -webkit-transform: rotate(45deg);
  overflow: hidden;
  background-color: #fafafa;
  float: left;
  margin-top: -142px;
  margin-left: 40px;
  opacity: 1;
  -webkit-transition:  1.2s ease;
  -moz-transition:  1.2s ease;
}

.kogitsune {
  width: 141px;
  height: 141px;
  border: 7px solid #fafafa;
  padding: 0px;
  background-color: #B40404;
  overflow: hidden;
  -webkit-transition:  1.2s ease;
  -moz-transition:  1.2s ease;
}

.tsurumaru:hover .kogitsune {
  width: 141px;
  height: 141px;
  border: 0px solid #fafafa;
  padding: 7px;
  background-color: #B40404;
  overflow: hidden;
  -webkit-transition:  1.2s ease;
  -moz-transition:  1.2s ease;
}

.yamanba {
  width: 250px;
  height: 250px;
  background-image: url(http://i.imgur.com/0yURT81.png);
  -webkit-transform: rotate(-45deg);
  margin-top: -38px;
  margin-left: -35px;
}

.kanesada {
  width: 100px;
  height: 100px;
  -webkit-transform: rotate(45deg);
  border: 2px solid #fafafa;
  -webkit-transition:  1.2s ease;
  -moz-transition:  1.2s ease;
}

.kanesada2 {
  width: 100px;
  height: 100px;
  -webkit-transform: rotate(45deg);
  border: 2px solid #fafafa;
  -webkit-transition:  1.2s ease;
  -moz-transition:  1.2s ease;
  margin-top: -50px;
  margin-left: -16px;
}

.kanesada3 {
  width: 100px;
  height: 100px;
  -webkit-transform: rotate(45deg);
  border: 2px solid #fafafa;
  -webkit-transition:  1.2s ease;
  -moz-transition:  1.2s ease;
  margin-top: 180px;
  margin-left: -16px;
}

.kanesada4 {
  width: 100px;
  height: 100px;
  -webkit-transform: rotate(45deg);
  border: 2px solid #fafafa;
  -webkit-transition:  1.2s ease;
  -moz-transition:  1.2s ease;
  width: 60px;
  height: 60px;
  margin-top: -20px;
  margin-left: -16px;
}

.tsurumaru:hover .kanesada{
  width: 100px;
  height: 100px;
  -webkit-transform: rotate(45deg);
  border: 2px solid #B40404;
  -webkit-transition:  1.2s ease;
  -moz-transition:  1.2s ease;
}

.tsurumaru:hover .kanesada2 {
  width: 100px;
  height: 100px;
  -webkit-transform: rotate(45deg);
  border: 2px solid #B40404;
  -webkit-transition:  1.2s ease;
  -moz-transition:  1.2s ease;
}

.tsurumaru:hover .kanesada3 {
  width: 100px;
  height: 100px;
  -webkit-transform: rotate(45deg);
  border: 2px solid #B40404;
  -webkit-transition:  1.2s ease;
  -moz-transition:  1.2s ease;
}

.tsurumaru:hover .kanesada4 {
  width: 100px;
  height: 100px;
  -webkit-transform: rotate(45deg);
  border: 2px solid #B40404;
  -webkit-transition:  1.2s ease;
  -moz-transition:  1.2s ease;
}

.midare {
  width: 180px;
  height: 285px;
  background: rgba(240,240,240, 0.7);
  padding: 15px;
  float: left;
  margin-left: 15px;
  margin-top: 17px;
}

.shishiou {
  width: 168px;
  height: 273px;
  border: 1px solid #fafafa;
  background-color: #f2f2f2;
  padding: 5px;
  -webkit-transition:  1.2s ease;
  -moz-transition:  1.2s ease;
}

.tsurumaru:hover .shishiou {
  width: 168px;
  height: 273px;
  border: 1px solid #B40404;
  background-color: #f2f2f2;
  padding: 5px;
  -webkit-transition:  1.2s ease;
  -moz-transition:  1.2s ease;
}

.nakigitsune {
  width: 158px;
  height: 263px;
  padding: 5px;
  font-family: verdana;
  font-size: 10px;
  color: #585858;
  text-align: justify;
  line-height: 11px;
  overflow: auto;
}

.nagasone:: -webkit-scrollbar {width:  2px;}
.nagasone:: -webkit-scrollbar-thumb {background-color:  #d8d8d8; border: none;}
.nagasone:: -webkit-scrollbar-track {background-color:  #f2f2f2;}

.linkerfreightcar {
  width: 300px;
  height: 15px;
  font-size: 10px;
  text-align: right;
  line-height: 15px;
}

.r1 {
  width: 141px;
  height: 141px;
  overflow: hidden;
}

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

<link href="https: //fonts.googleapis.com/css?family=Abril+Fatface|Sedgwick+Ave+Display" rel="stylesheet">

<center>
  <div class="Ishikirimaru">
    <div class="tsurumaru">
      <div class="ookuri">
        <div class="hitofuri">
          <div class="mitsuta2">
            <div class="mikazuki">
              <div class="kiyomitsu"></div>
            </div>
          </div>
          <div class="mitsuta3">
            <div class="mikazuki">
              <div class="kiyomitsu"></div>
            </div>
           </div>
          <div class="mitsuta4">
            <div class="mikazuki">
              <div class="kiyomitsu"></div>
            </div>
          </div>
          <div class="mitsuta5">
            <div class="mikazuki">
              <div class="kiyomitsu"></div>
            </div>
          </div>
          <div class="yasusada">
            <div class="kogitsune">
              <div class="r1">
                <div class="yamanba"></div>
              </div>
            </div>
          </div>
          <div class="kanesada2"></div>
          <div class="kanesada3"></div>
          <div class="kanesada4"></div>
        </div>
        <div class="midare">
          <div class="shishiou">
            <div class="nagasone">
              <div class="nakigitsune">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum sapien bibendum diam pharetra dapibus. Duis facilisis faucibus metus. Donec ac diam ligula. Maecenas vitae sodales turpis, eu sagittis nisi. Nullam ut elit quam. Nunc ligula elit, gravida quis congue a, interdum eu turpis. Mauris id iaculis eros, id euismod elit. Nam tellus ex, rutrum eget fermentum pharetra, convallis id purus. Curabitur finibus varius lectus, ac eleifend ipsum posuere sit amet. Quisque lobortis urna vel tortor viverra, eu molestie est varius. Vestibulum sagittis enim libero, vel luctus justo pharetra eu. Ut commodo lectus dolor, vel vulputate arcu pharetra quis. Aliquam erat volutpat. Morbi eu mauris justo. In a lectus vel dui accumsan vehicula id eget neque.
                Vestibulum volutpat elit eros, a condimentum quam pretium et. Ut sit amet odio nec elit porttitor dignissim. Etiam elementum, dui eget tincidunt vehicula, magna elit vehicula eros, sed mattis turpis urna eu ante. Sed rhoncus vulputate lacinia. Mauris ultricies neque eget convallis pharetra. Sed ac ultricies diam, nec dictum velit. Etiam sed quam nec eros tempus pretium.
                Nam finibus malesuada ipsum nec aliquam. Praesent finibus aliquet enim, id pulvinar libero euismod id. Sed at consequat velit. Donec rhoncus imperdiet posuere. Aenean non tortor sed nibh consequat consequat. Nullam ut est massa. Donec commodo scelerisque ipsum, vitae eleifend lacus facilisis malesuada. Aenean ullamcorper erat sit amet enim elementum, id rutrum sapien consequat. Proin iaculis eros dignissim tortor pulvinar, nec convallis ligula rhoncus. Nullam efficitur augue et rhoncus interdum. Nunc convallis lacinia arcu ac cursus. Quisque in magna quis sapien imperdiet posuere.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="linkerfreightcar"><a href="http: //outofcontrolx.b1.jcink.com/index.php?showuser=747">★Linn</a></div>
</center>

[/html]

[html]
<style>
.change {
  background-image: url('http://i.imgur.com/0PUZKLc.png');
  width: 480px;
  padding: 20px;
  border: solid 1px #E6E6E6;
  z-index: 1;
}

.changebody {
  background-color: #FFFFFF;
  width: 480px;
  min-height: 300px;
  z-index: 2;
  padding-top: 20px;
}

.changetitle {
  width: 85%;
  min-height: 50px;
  font-family: Raleway;
  font-size: 90px;
  font-weight: 900;
  color: #323232;
  border-top: solid 1px rgba(239,239,239,0.8);
  border-bottom: solid 1px rgba(239,239,239,0.8);
  padding: 35px 20px 3px 0px;
  letter-spacing: -7px;
  text-shadow: 2px 3px #FF64CC;
}

.changetsmall {
  width: 85%;
  font-size: 24px;
  padding: 10px 10px 10px 0px;
  letter-spacing: -1px;
  text-shadow: 1px 2px #FF64CC;
  font-family: Raleway;
  font-weight: 900;
  border-top: solid 1px rgba(239,239,239,0.8);
}

.changesubtitle {
  width: 100%;
  min-height: 10px;
  font-family: Calibri;
  font-size: 8px;
  color: #323232;
  text-transform: uppercase;
  letter-spacing: 6px;
  word-spacing: 0.4em;
  text-shadow: none;
  opacity: 0.8;
  margin-left: 10px;
}

.changebodytext {
  width: 380px;
  padding: 15px 20px 10px 20px;
  font-family: Arial;
  font-size: 10px;
  text-align: justify;
  line-height: 11px;
  color: #1b1b1b;
  min-height: 100px;
}

.changebodytext b {
  color: #E672B8;
  font-weight: 700;
  font-family: Roboto;
  font-size: 10px;
}

.changebodytextimg {
  width: 50px;
  margin: 4px 0px 0px 6px;
  float: right;
  width: 80px;
}

.changetags {
  font-family: calibri;
  color: #1b1b1b;
  font-size: 7px;
  text-decoration: italic;
  text-align: center;
  line-height: 10px;
  max-height: 50px;
  padding-top: 5px;
  margin-right: 9px;
  overflow: auto;
  min-width: 50px;
  text-transform: uppercase;
}

.changebodytextimg img {
  border-radius: 100px;
  border: solid 8px #EBEBEB;
  padding: 3px;
  width: 50px;
  -webkit-transition: 1.5s ease-in-out;
  -o-transition: 1.5s ease-in-out;
  -moz-transition: 1.5s ease-in-out;
  transition: 1.5s ease-in-out;
}

.changebodytextimg img:hover {
  border: solid 8px #FF64CC;
  -webkit-transition: 1.5s ease-in-out;
  -o-transition: 1.5s ease-in-out;
  -moz-transition: 1.5s ease-in-out;
  transition: 1.5s ease-in-out;
  background-color: #1b1b1b;
}

.clear{
text-align:center;
font-family: "Mukta";
font-size:8px;
text-transform:uppercase;
  margin-right: 8px;
}
</style>
<!-- Code désigné par Clear. Merci de créditer l'auteur ! Lien source : http://sonderx.jcink.net/index.php?showtopic=948 -->
​

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

<div align="center">
  <div class="change">
    <div class="changebody">
      <div class="changetitle">
        CHANGE
        <div class="changesubtitle">
          it's like you never had wings
        </div>
      </div>
      <div class="changebodytext">
        <div class="changebodytextimg">
          <img src="https://i.imgbox.com/1jDwWTKg.png">
          <div class="changetags">@tagged</div>
        </div>
        <strong>"Lorem ipsum dolor sit amet,"</strong> consectetur adipiscing elit. Fusce eleifend odio sit amet mi ultrices dictum. Ut iaculis, nibh non molestie sagittis, erat leo vestibulum nisl, id condimentum arcu augue at leo. Donec a condimentum neque, non molestie ante. Nullam et egestas eros, eget molestie erat. Nunc viverra at eros non accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quam ex, auctor molestie nisi convallis, faucibus tempus tellus. Nam ut velit cursus, venenatis elit vitae, tincidunt leo. Ut sed tempus nibh. Duis congue ultricies accumsan. Ut et est faucibus, auctor diam et, suscipit turpis.
        Vivamus dapibus fringilla elit, sit amet suscipit leo. Suspendisse accumsan bibendum tellus, ac ornare felis lacinia a. Etiam elementum aliquam ante, non mollis augue condimentum quis. Etiam rhoncus mi molestie velit iaculis, non molestie nisi dapibus. Etiam eget iaculis felis, a tristique mauris. Maecenas fermentum eros non dapibus scelerisque. Phasellus et neque consequat, pulvinar lorem non, efficitur dui. Donec condimentum congue magna, tempor ornare diam. Donec vulputate pretium porta. Phasellus tincidunt sed nunc eget faucibus. Ut accumsan tortor quam, vel fringilla mi fermentum quis. Nam varius, purus non convallis finibus, ipsum nunc tristique nunc, nec interdum erat dui nec massa. Morbi facilisis non lorem scelerisque tempus.
        Morbi odio sapien, pellentesque non feugiat et, vehicula quis nunc. Curabitur nec lacinia nibh. Aenean aliquet nunc eu suscipit tincidunt. Nunc quis euismod magna, nec facilisis ligula. Vivamus id mauris in dui varius condimentum vel id tortor. Ut sed lacus quam. Maecenas ipsum dui, elementum hendrerit sodales vitae, faucibus id tortor. Cras sit amet porta dolor. In vehicula elit eu lectus commodo, sed hendrerit nulla placerat. Cras pretium accumsan turpis, vel egestas quam gravida eget. Vestibulum ultrices, diam eget fermentum egestas, est elit posuere erat, nec convallis velit nibh vitae lorem. Curabitur molestie nibh orci, at viverra ante porta id. Aliquam hendrerit vel nisi non tincidunt. Aenean mollis, orci vel finibus molestie, sapien enim consequat urna, ac sollicitudin nunc erat et turpis..
      </div>
      <div class="changetsmall">SET YOU ON THE GLASS</div>
    </div>
  </div>
  <div class="clear"><a href="http://shine.jcink.net/index.php?showuser=22552">⬦ clear ⬦</a></div>
</div>

[/html]

[html]
<style>
#monster {
  width: 500px;
  padding: 15px;
  background-color: #fff;
}

#monpic img {
  width: 450px;
  height: 150px;
  padding: 10px;
  background-color: #fff;
}

#monlyr {
  padding: 20px 15px 20px 15px;
  background-color: #a3bde1;
  font: 15px raleway;
  color: #fff;
  font-weight: 700;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: -1px;
}

#monlyr i {
  float: left;
  font-size: 18px;
  color: #fff;
  margin: 0px 10px 0px 0px;
}

#monbox {
  padding: 15px;
  background-color: #f5f5f5;
}

#montext {
  padding: 60px;
  background-color: #fff;
  font: 12px tinos;
  text-align: justify;
  letter-spacing: -.2px;
  line-height: 120%;
  margin-top: 15px;
}

#montext b {
  font: 14px cardo;
  color: #a3bde1;
  font-weight: 700;
  letter-spacing: -1px;
}

#montext i {
  font: 14px cardo;
  color: #a3bde1;
  font-style: italic;
  letter-spacing: -1px;
}

#monnotes {
  padding: 10px 5px 10px 10px;
  background-color: #a3bde1;
  font: 13px tinos;
  color: #fff;
  text-align: justify;
  letter-spacing: -.2px;
}

#monnotes i {
  float: right;
  font-size: 13px;
  color: #fff;
  margin: 0px 6px 0px 10px;
}

#monnotes a {color: #fff!important;}

#moncred {
  width: 532px;
  text-align: right;
  margin-top: 1px;
}

#moncred a {
  font: 8px lora;
  color: #dd9f9e!important;
  font-weight: 700;
  text-transform: uppercase;
}
</style>
<!-- Code désigné par Pro. Merci de créditer l'auteur ! Lien source : http://sonderx.jcink.net/index.php?showtopic=1001 -->
​

<link href="https://fonts.googleapis.com/css?family=Cardo:400i,700|Lora:700|Raleway:700|Tinos" rel="stylesheet">
<link rel="stylesheet" href="https://i.icomoon.io/public/df6ea10fc3/Clickplay/style.css">

<center>
  <div id="monster">
    <div id="monlyr">
      <i class="icon-heart3"></i>
      LYRICS HERE
    </div>
    <div id="monbox">
      <div id="monpic">
        <img src="https://i.imgur.com/Xo9wDvx.png">
      </div>
      <div id="montext">
        post here
      </div>
    </div>
    <div id="monnotes">
      you can write stuff here eyyy
      <i class="icon-cloud"></i>
    </div>
  </div>
  <div id="moncred">
    <a href="http://sonderx.jcink.net/index.php?showuser=40">pro❣</a>
  </div>
</center>

[/html]

[html]
<style>
.renewBack {
  width: 350px;
  padding: 5px;
  background-color: #fff;
  border: #eee 1px solid;
}

.renewAv {
  height: 100px;
  width: 100px;
  background-color: #fff;
  border-radius: 100%;
  padding: 5px;
  margin-top: -76px;
  float: left;
  margin-left: 20px;
  -webkit-clip-path:  polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  clip-path:  polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transition: .5s;
}

.renewHead:hover .renewAv {
  -webkit-clip-path:  polygon(0 0, 100% 0, 100% 100%, 0 100%);
  clip-path:  polygon(0 0, 100% 0, 100% 100%, 0 100%);
  border-radius: 100%;
  transition: .5s;
}

.renewIMG IMG {-webkit-backface-visibility:  hidden;}

.renewIMG img {
   border-radius: 100%;
   max-width: 100px;
}

.renewIMG {
  margin-left: .6px;
  height: 100px;
  width: 100px;
  -webkit-filter: grayscale(80%);
  -webkit-clip-path:  polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  clip-path:  polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transition: .5s;
}

.renewHead:hover .renewIMG {
  -webkit-filter: grayscale(0%);
  -webkit-clip-path:  polygon(0 0, 100% 0, 100% 100%, 0 100%);
  clip-path:  polygon(0 0, 100% 0, 100% 100%, 0 100%);
  border-radius: 100%;
  transition: .5s;
}

.renewHead {
  height: 100px;
  background-color: #eadada;
}

.renewLyrics {
  float: right;
  color: #fff;
  font-family: georgia;
  font-weight: bold;
  font-style: italic;
  margin-right: 20px;
  margin-top: 25.5px;
  text-align: right;
  line-height: 23px;
  font-size: 16px;
  text-shadow: #db8383 1px 1px 1px;
  transition: .5s;
  transition-delay: .2s;
}

.renewLyrics b {
  color: #db8383;
  text-shadow: #fff 1px 1px 0px;
}

.renewDiv {
  height: 1px;
  background-color: #fff;
  width: 280px;
  margin-top: -22px;
  margin-right: 10px;
  float: right;
}

.renewHead:hover .renewLyrics {
  opacity: 0;
  margin-right: 80px;
  transition: .5s;
}

.renewTag {
  opacity: 0;
  float: right;
  text-align: right;
  margin-right: 20px;
  font-family: trebuchet ms;
  font-size: 9px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: #db8383 1px 1px 1px;
  margin-top: -44px;
  transition: .5s;
}

.renewTag a {
  font-family: georgia;
  color: #fff;
  text-transform: lowercase;
  font-size: 16px;
  font-style: italic;
  margin-bottom: 10px;
  font-weight: bold;
}

.renewNotes {
  margin-top: 7px;
  line-height: 11px;
}

.renewHead: hover .renewTag {
  opacity: 1;
  transition: .5s;
  transition-delay: .3s;
}

.renewBody {
  font-size: 10px;
  font-family: arial;
  text-align: justify;
  margin-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  border-left: #eee 1px solid;
  border-right: #eee 1px solid;
  width: 310px;
  line-height: 13px;
}

.renewBody b {color: #db8383;}

.renewFoot {
  height: 10px;
  background-color: #eadada;
  margin-top: 10px;
}

.lcredits {
  font-family: trebuchet ms;
  font-size: 7px;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: -5px;
}
</style>
<!-- Code désigné par Leto. Merci de créditer l'auteur ! Lien source : http://sonderx.jcink.net/index.php?showtopic=1060 -->
​

<div align="center">
   <div class="renewBack">
      <div class="renewHead">
         <div class="renewLyrics">if you're <b>letting go</b><br>let me go <b>slowly</b></div>
         <div class="renewDiv"></div>
         <div class="renewTag">@[tag]
            <div class="renewNotes">
               notes here, keep length in mind<br>you might have to add breaks<br>if it gets too long
            </div>
         </div>
         <div class="renewAv">
            <div class="renewIMG">
               <img src="http://images6.fanpop.com/image/photos/38800000/Annabeth-Chase-icons-percy-jackson-and-the-olympians-38812413-245-245.png">
            </div>
         </div>
      </div>
      <div class="renewBody">
         Glass tabletop for two Shatters across the room It's been this way, it stays this way since June Gravity pulls me in Further from my skin I run but my feet don't touch the ground If you're letting go Let me go slowly If you're letting go Lay me down softly Smoked out the back room To get rid of the scent of you I've been this way, I stay this way since June
         <br><br>
         <b>"If you're letting go Let me go slowly""</b> If you're letting go Lay me down softly If you're letting go Let me go slowly If you're letting go Lay me down softly If you're letting go Let me go slowly Glass tabletop for two Shatters across the room It's been this way, it stays this way since June
         <br><br>
         Glass tabletop for two Shatters across the room It's been this way, it stays this way since June Gravity pulls me in Further from my skin I run but my feet don't touch the ground If you're letting go Let me go slowly If you're letting go Lay me down softly Smoked out the back room To get rid of the scent of you I've been this way, I stay this way since June
         <br><br>
         If you're letting go Let me go slowly If you're letting go Lay me down softly If you're letting go Let me go slowly If you're letting go Lay me down softly If you're letting go Let me go slowly Glass tabletop for two Shatters across the room It's been this way, it stays this way since June
      </div>
      <div class="renewFoot"></div>
   </div>
   <div class="lcredits">leto</div>
</div>
</div>

[/html]

[html]
<style>
.jelly {
  width: 500px;
  padding: 20px;
  height: 600px;
  background: #fff;
  border: 1px solid #eee;
  font-size: 10px;
  font-family: nunito sans;
  color: #666;
  line-height: 12px;
}

.jelly a {text-decoration: none;}

.jellyin {
  background: url('https://s28.postimg.cc/cu5e3vqp9/oie_1715215_Jr_Ab_MQto.png');
  padding: 10px;
  border: 1px solid #eee;
  height: 578px;
}

.jellycont {
  width: 250px;
  height: 400px;
  border: 10px solid #fff;
  box-shadow: 0px 0px 0px 1px #eee;
  background: #fff;
  float: left;
  font-size: 10px;
  font-family: nunito sans;
  overflow: auto;
  color: #666;
  text-align: justify;
}

.jelly b {
  color: #ECC3BF;
  font-size: 13px;
  font-family: Noto Serif;
}

.jelly i {
  color: #DAB1EF;
  font-size: 13px;
  font-family: Noto Serif;
}

.jellycont::-webkit-scrollbar {width: 5px;}
.jellycont::-webkit-scrollbar-track {background: #fff;}
.jellycont::-webkit-scrollbar-thumb {background: #cd919e; border: 2px solid #fff;}

.jellyimg {
  background: url('https://s28.postimg.org/cu5e3vqp9/oie_1715215_Jr_Ab_MQto.png');
  background-size: 170px;
  width: 170px;
  height: 400px;
  border: 10px solid #fff;
  box-shadow: 0px 0px 0px 1px #eee;
  float:left;
  margin-left: 14px;
}

.jellyfoot {
  width: 454px;
  border: 10px solid #fff;
  box-shadow: 0px 0px 0px 1px #eee;
  height: 130px;
  background: #fff;
  float:left;
  margin-top: 10px;
  font-size: 10px;
  font-family: nunito sans;
  color: #666;
  text-align: justify;
}

.jellyfoot img {float: right;}

#tagged {
  border-top: 2px solid #ECC3BF;
  position: absolute;
  margin-top: 120px;
}

.jellyicon {
  border-radius: 100%;
  padding: 10px;
  border: 3px solid #ECC3BF;
}
</style>
<!-- Code désigné par Xion. Merci de créditer l'auteur ! Lien source : http://outofcontrolx.b1.jcink.com/index … topic=1084 -->
​

<link href="https://fonts.googleapis.com/css?family=Nunito+Sans|Noto+Serif" rel="stylesheet">

<center>
  <div class="jelly">
    <div class="jellyin">
      <div class="jellycont">
        <b>Lorem ipsum dolor sit amet,</b> consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        <br><br>
        <i>Lorem ipsum dolor sit amet,</i> consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        <br><br>
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
      </div>
      <div class="jellyimg"></div>
      <div class="jellyfoot">
        <img class="jellyicon" src="https://s24.postimg.cc/bufqdtw6d/oie_1715215_Jr_Ab_MQto.png" width="110">
        <span id="tagged"><b>TAGGED:</b> @ tagname here yowz ♥</span>
        <b>NOTES:</b> Notes here...<br><br>
        Maybe even song lyrics it doesn't matter ♥
      </div>
    </div>
  </div>
  <div class="jelly" style="height: 10px; padding: 10px;margin-top: 20px;"> xion of <a href="http://outofcontrolx.b1.jcink.com/index.php?showuser=361">OOC</a></div>
</center>

[/html]

[html]
<style>
.jawntatdiv01 {
  width: 500px;
  background: #ededed;
  margin: 0 auto;
  overflow: hidden;
}

.jawntattxtdiv {
  font: 11px Open Sans;
  line-height: 18px;
  color:#000;
  padding: 25px 60px 30px 60px;
  position: relative;
  z-index: 4;
  background: #F5F5F5;
  border-top: 1px solid #dadada;
  border-bottom: 1px solid #dadada;
  margin: 20px 0;
}

.jawntattxtdiv::first-line {
  font: bold 11px Open Sans;
  line-height: 19px;
}

.jawntattbl {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

.jawntatrtcl, .jawntatltcl {
  vertical-align: top;
}

.jawntatltcl {
  width: 10px;
  position: relative;
  z-index: 4;
}

.jawntatsidediv {
  background: #505656;
  width: 170px;
  min-height: 5000px;
  right: -120px;
  position: absolute;
  z-index: 5;
  transition: all 0.4s linear;
}

.jawntatsidediv:hover {
  right: 0px;
}

.jawntatsideicon {
  position: absolute;
  z-index: 6;
  height: 50px;
  width: 50px;
  right: 135px;
  top: 30px;
  border-radius: 100%;
  border: 10px solid #505656;
  transition: all 0.4s linear;
}

.jawntatsidediv:hover .jawntatsideicon {
  height: 80px;
  width: 80px;
  right: 35px;
  border: 10px solid #6EBB91;
}

.jawntattopbg {
  background: url("http://i.imgur.com/8KJprr0.jpg");
  height: 250px;
  width: 100%;
  position: relative;
}

.jawntatlyrics01 {
  font: bold 10px Source Sans Pro;
  position: absolute;
  bottom: 80px;
  left: 63px;
  color: #ededed;
  line-height: 12px;
  text-transform: uppercase;
  width: 132px;
  letter-spacing: 1px;
  text-shadow: 1px 1px #000;
}

.jawntatlyrics02 {
  font: bold 30px Source Sans Pro;
  position: absolute;
  bottom: 0;
  left: 50px;
  background: #ededed;
  color: #6EBB91;
  padding: 10px;
  line-height: 24px;
  letter-spacing: -2px;
  width: 118px;
}

.jawntatlttri {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 68px 15px;
  border-color: transparent transparent #ededed transparent;
  position: absolute;
  bottom: 0;
  left: 35px;
}

.jawntatrttri {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 68px 15px 0 0;
  border-color: #ededed transparent transparent transparent;
  position: absolute;
  bottom: 0;
  left: 188px;
}

.jawntatbtmdiv {
  border-top: 7px solid #6EBB91;
}

.jawntatsidefld {
  background: #595f5f;
  width: 120px;
  margin: 10px 15px;
  padding: 5px 10px;
  font: 9px Open Sans;
  color: #8D9292;
  opacity: 0;
  transition: all 0.4s ease-out;
}

.jawntatsidediv:hover .jawntatsidefld {
  opacity: 1;
}

.jawntatsidefld:hover {
  background: #6EBB91;
  color: #000;
}

.jawntatsidefld01 {
  margin: 150px 15px 0 15px;
}

.jawntatsidefld img {
  margin-right: 5px;
  float: left;
  clear: left;
  opacity: 0.4;
  transition: all 0.4s ease-out;
}

.jawntatsidefld:hover img {
  opacity: 1;
}
</style>
<!-- Code désigné par Jawn. Merci de créditer l'auteur ! Lien source : http://outofcontrolx.b1.jcink.com/index … wtopic=430 -->
​

<link href='https://fonts.googleapis.com/css?family=Open+Sans|Source+Sans+Pro:700'' rel='stylesheet' type='text/css'>

<div class="jawntatdiv01">
<table class="jawntattbl">
    <tr>
    <td class="jawntatrtcl">
        <div class="jawntattopbg">
        <div class="jawntatlyrics01">if you fall<br> i will catch you<br>i'll be waiting</div>
        <div class="jawntatlyrics02">time after time ___</div>
        <div class="jawntatlttri"></div><div class="jawntatrttri"></div>
        </div>
        <div class="jawntattxtdiv">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.<br><br>
        Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nun.<br><br>
        </div>
        <div class="jawntatbtmdiv"></div>
    </td>
    <td class="jawntatltcl">
        <div class="jawntatsidediv">
        <img src="http://66.media.tumblr.com/27a4b49e4bf5f41732adb3f4343d0f52/tumblr_mv9jcpVZni1s9858oo8_400.gif" class="jawntatsideicon">
        <div class="jawntatsidefld jawntatsidefld01"><img src="http://i.imgur.com/YbRP1M0.png"><b>WORDS</b> _xxx</div>
        <div class="jawntatsidefld jawntatsidefld02"><img src="http://i.imgur.com/UeRGzq4.png"><b>TAGGED</b> _xxx</div>
        <div class="jawntatsidefld jawntatsidefld02"><img src="http://i.imgur.com/UeRGzq4.png"><b>TAGGED</b> _xxx</div>
        <div class="jawntatsidefld jawntatsidefld03"><img src="http://i.imgur.com/S3kPUBh.png"><b>NOTES</b> _some notes here.</div>
        <div class="jawntatsidefld"><img src="http://i.imgur.com/L1bzOi7.png"><b>CREDITS</b> _<b>TIME AFTER TIME</b> post template created by <a href="http://outofcontrolx.b1.jcink.com/index.php?showuser=81" target="_blank">JAWN</a> of <a href="http://outofcontrolx.b1.jcink.com/" target="_blank">OOC</a></div>
        </div>
    </td>
    </tr>
</table>
</div>

[/html]

[html]
<style>
#split {
   height: 450px;
   width: 400px;
   position: relative;
   margin: auto;
   border: 1px solid #ccc;
}

#split-img {
   height: 450px;
   width: 400px;
   position: absolute;
   top: 0;
   background-size: cover;
   background-position: center;
   -webkit-transition: 0.6s ease-in-out
}

#split:hover #split-img {-webkit-filter: grayscale(100%)}

#split-right {
   height: 435px;
   width: 185px;
   background: #fefefe;
   color: #000;
   position: absolute;
   right: 0;
   mix-blend-mode: screen;
   border-left: 15px solid #fefefe;
   font-weight: 700;
   font-size: 55px;
   border-top: 15px solid #fefefe;
   letter-spacing: -5px;
   line-height: 45px;
   text-transform: lowercase;
   -webkit-transition: 0.6s ease-in-out;
   -moz-transition: 0.6s ease-in-out;
   -ms-transition: 0.6s ease-in-out;
   -o-transition: 0.6s ease-in-out;
   font-family: playfair display
}

#split:hover #split-right {right: 200px}

#split-tag {
   height: 40px;
   width: 160px;
   position: absolute;
   top: 5px;
   right: 15px;
   background: #444;
   color: #fcfcfc;
   font-family: poppins;
   text-align: left;
   padding-left: 10px;
   line-height: 40px;
   font-size: 9px;
   text-transform: uppercase;
   font-weight: 600;
   letter-spacing: 1px;
   opacity: 0;
   -webkit-transition: 0.4s ease-in-out;
}

#split:hover #split-tag {
   opacity: 1;
   top: 15px;
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
}

#split-txt {
   position: absolute;
   bottom: 0px;
   right: 15px;
   border-style: solid;
   border-color: #fcfcfc;
   border-width: 10px 5px 10px 10px;
   padding-right: 5px;
   width: 150px;
   height: 350px;
   background: #fcfcfc;
   font-family: playfair display;
   text-align: justify;
   font-size: 10px;
   color: #888;
   line-height: 12px;
   overflow: auto;
   -webkit-transition: 0.4s ease-in-out;
   -moz-transition: 0.4s ease-in-out;
   -ms-transition: 0.4s ease-in-out;
   -o-transition: 0.4s ease-in-out;
   opacity: 0
}

#split:hover #split-txt {
   opacity: 1;
   bottom: 15px;
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
}

#split-txt::-webkit-scrollbar {
   width: 3px;
   background: #fcfcfc;
   border: none
}

#split-txt::-webkit-scrollbar-thumb {
   border: none;
   background: #aaa;
   border: 1px solid #fcfcfc
}

.scredits {
   width: 400px;
   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=25994 -->
​

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

<div id="split">
<div id="split-img" style="background-image: url(https://celebmafia.com/wp-content/uploa … 2015_2.jpg)"></div>
<div id="split-right">What a town without pity can do</div>
<div id="split-tag">tag here</div>
<div id="split-txt">text here</div>
</div>

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

[/html]