[html]<style>
.r1 {width: 500px;}

.r2 {font-size: 10px;
line-height: 12px;
}

.character-track {
  background-color: #fdfdfd;
  width: 500px;
  height: 200px;
  padding: 0px;
  margin-bottom: 10px;
}

.track-box {
  background-color: #121212;
  width: 150px;
  float: left;
  height: 170px;
  padding: auto;
  padding-top: 30px;
}

.track-info {
  margin: 10px;
  margin-top: 7px;
  height: 190px;
  overflow: auto;
  float: left;
  width: 315px;
  text-align: justify;
  font-size: 10px;
  font-family: calibri;
  line-height: 13px;
  padding-right: 10px;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transition: 0.8s ease-in-out;
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition:0.8s ease-in-out;
  overflow-x: hidden;
}

.track-info:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  transition: 0.8s ease-in-out;
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition:0.8s ease-in-out;
}

.track-info2 {
  margin: 10px;
  margin-top: 7px;
  height: 190px;
  overflow: auto;
  float: left;
  width: 320px;
  text-align: justify;
  font-size: 10px;
  font-family: calibri;
  line-height: 13px;
  padding-right: 10px;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transition: 0.8s ease-in-out;
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition:0.8s ease-in-out;
  overflow-x: hidden;
}

.track-info2:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  transition: 0.8s ease-in-out;
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition:0.8s ease-in-out;
}

.track-info::-webkit-scrollbar {width: 9px; background: #97b55f; border: 8px solid #323232;}
.track-info::-webkit-scrollbar-thumb { background: #806589; }
.track-info::-webkit-scrollbar-track { background: #000000; }

.track-img {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  webkit-border-radius: 100%;
  moz-border-radius: 100%;
  padding: 10px;
  border: 3px double #fafafa;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transition: 0.8s ease-in-out;
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition:0.8s ease-in-out;
}

.track-img:hover {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  webkit-border-radius: 100%;
  moz-border-radius: 100%;
  padding: 10px;
  border: 3px double #fafafa;
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  transition: 0.8s ease-in-out;
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition:0.8s ease-in-out;
}

.trackno1 {
  float: left;
  font-family: calibri;
  font-size: 20px;
  background-color: #5d7d57;
  color: #f8f8f8;
  font-weight: bold;
  margin-right: 5px;
  padding: 4px;
  line-height: 20px;
}

.track-link {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  border-bottom: 1px solid #b2b2b2;
  line-height: 10px;
  padding-top: 4px;
}

.track-title {
  height: 50px;
  background-color: #121212;
  line-height: 50px;
  font-size: 10px;
  text-align: center;
  margin-bottom: 10px;
  color: #fafafa;
  font-weight: bold;
}

.ccredits {
  font-family: arial;
  font-size: 8px;
  letter-spacing: 3px;
  text-align: right;
  width: 500px;
  margin-top: 5px;
}
</syle>
<!-- Code désigné par Rimychu. Merci de créditer l'auteur ! Lien source : http://outofcontrolx.b1.jcink.com/index … wtopic=964 -->

<center>
<div class="r1">
    <div class="track-title"> ACTIVE THREADS </div>
    <div class="character-track">
    <div class="track-box">
        <img src='http://i899.photobucket.com/albums/ac194/rimychu/Midorima/midorima116_zps8ee25ef2.png' class="track-img">
    </div>
    <div class="track-info"> 
        <span class="trackno1">01</span>
        <div class="track-link"><a href="URL">THREAD NAME </a> </div> 
        <div class="r2"><b>━</b><i>first name, first name</i></div>
            <br>
        <span class="trackno1">02</span>
        <div class="track-link"><a href="URL">THREAD NAME </a> </div> 
        <div class="r2"><b>━</b><i>first name, first name</i></div>
             <br>
        <span class="trackno1">03</span>
        <div class="track-link"><a href="URL">THREAD NAME </a> </div> 
        <div class="r2"><b>━</b><i>first name, first name</i></div>
             <br>
        <span class="trackno1">04</span>
        <div class="track-link"><a href="URL">THREAD NAME </a> </div> 
        <div class="r2"><b>━</b><i>first name, first name</i></div>
             <br>
        <span class="trackno1">05</span>
        <div class="track-link"><a href="URL">THREAD NAME </a> </div> 
        <div class="r2"><b>━</b><i>first name, first name</i></div>
    </div>
    </div>
    <div class="character-track">
    <div class="track-info2">
        <span class="trackno1">01</span>
        <div class="track-link"><a href="URL">THREAD NAME </a> </div> 
        <div class="r2"><b>━</b><i>first name, first name</i></div>
            <br>
        <span class="trackno1">02</span>
        <div class="track-link"><a href="URL">THREAD NAME </a> </div> 
        <div class="r2"><b>━</b><i>first name, first name</i></div>
             <br>
        <span class="trackno1">03</span>
        <div class="track-link"><a href="URL">THREAD NAME </a> </div> 
        <div class="r2"><b>━</b><i>first name, first name</i></div>
             <br>
        <span class="trackno1">04</span>
        <div class="track-link"><a href="URL">THREAD NAME </a> </div> 
        <div class="r2"><b>━</b><i>first name, first name</i></div>
             <br>
        <span class="trackno1">05</span>
        <div class="track-link"><a href="URL">THREAD NAME </a> </div> 
        <div class="r2"><b>━</b><i>first name, first name</i></div>
    </div> 
    <div class="track-box">
        <img src='http://i899.photobucket.com/albums/ac194/rimychu/Midorima/midorima116_zps8ee25ef2.png' class="track-img">
    </div>
    </div>
    <div class="track-title">COMPLETE THREADS</div>
</div>
<div class="ccredits"><a href="http://outofcontrolx.b1.jcink.com/index.php?showuser=1">  RIMY ♥ @ OOC </a></div>
</center>

[/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>
.jarinfolefticon img {
  width: 80px;
}
h1 {
  font-family: Roboto;
  font-size: 20px;
  border-bottom: 1px solid #333;
  text-transform: lowercase;
}
 
h2 {
  font-family: Roboto;
  font-size: 13px;
  font-weight: bold;
  border-bottom: 1px solid #333;
  text-transform: uppercase;
  letter-spacing: 1px;
}
 
blockquote {
  border: 1px solid #ccc;
  background: #fff;
  padding: 20px;
  font-family: Montserrat;
  font-size: 12px;
}

.JARAPPcontainer {
  height: 400px;
  width: 400px;
}

.JARAPPtabs {
  margin: 0px auto;
  position: relative;
  width: 446px;
  height: 400px;
}

.JARAPPtab {float: left;}

.JARAPPtab label {
  display: block;
  width: 50px;
  background: #333;
  border: 1px solid #ccc;
  margin: 0px;
  position: relative;
  left: 0px;
  top: 0px;
  z-index: 3;
  font-family: Roboto Condensed;
  color: #fff;
  font-size: 12px;
  text-align: center;
  padding: 5px;
  }

.JARAPPtab input[type=radio]:checked ~ label {
  background: #7FA7B5;
  z-index: 2;
}

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

.JARAPPcontent {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: #f5f5f5;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  font-size: 10px;
  font-family: Calibri;
  text-align: justify;
}

.JARAPPtab input[type=radio]:checked ~ label ~ .JARAPPcontent {z-index: 1;}
 
.jartitle {
  color: #fff;
  font-family: Roboto;
  font-size: 25px;
  text-align: left;
  background: #333;
  padding: 10px;
  padding-left: 30px;
  margin-top: 10px;
  text-transform: uppercase;
}
 
.jarinfoleft {
  background: #fff;
  width: 100px;
  padding: 20px;
  text-align: center;
  padding-top: 10px;
}
 
.jarinfoleftinfo {
  font-family: Raleway;
  text-transform: lowercase;
  font-size: 12px;
  margin-top: 10px;
}
 
.jarinfolefticon {
  width: 80px;
  height: 80px;
  padding: 10px;
  border: 1px solid #666;
}
 
.jarinfoleftinfosub {
  font-family: Arimo;
  border-top: 2px solid #7fa7b5;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 2px;
}
 
.jarpersonalityright {
  background: #fff;
  margin-left: 10px;
  margin-top: 10px;
  font-family: Arimo;
  font-size: 11px;
  float: right;
  width: 200px;
  height: 240px;
  margin-top: -270px;
  padding: 20px;
  padding-top: 10px;
  overflow: auto;
  margin-right: 10px;
}
 
.jarpersonalityright b {
  color: #7fa7b5;
  font-family: Montserrat;
}
 
.jarpersonalitytitle {
  font-family: Roboto;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: lowercase;
  color: #333;
  border-bottom: 1px solid #333;
  text-align: right;
  margin-bottom: 10px;
  margin-top: 10px;
}
 
.jarpersonalityright::-webkit-scrollbar {width: 2px;}
.jarpersonalityright::-webkit-scrollbar-track {background: #fff}
.jarpersonalityright::-webkit-scrollbar-thumb {background: #666;}
 
.jarbiography {
  width: 345px;
  background: #fff;
  padding: 30px;
  font-family: Lato;
  font-size: 12px;
  height:  220px;
  overflow: auto;
}
 
.jarbiography b {
  color: #7fa7b5;
  font-family: Montserrat;
}
 
.jarbiography::-webkit-scrollbar {width: 2px;}
.jarbiography::-webkit-scrollbar-track {background: #fff}
.jarbiography::-webkit-scrollbar-thumb {background: #666;}
.jarinventory {padding: 10px;}

.jarappcredit {
  font-family: Arimo;
  font-size: 10px;
  letter-spacing: 1px;
  color: #ccc;
}
</style>
<!-- Code désigné par Jaronart. Merci de créditer l'auteur ! Lien source : http://outofcontrolx.b1.jcink.com/index … topic=1158 -->
​

<link href="https://fonts.googleapis.com/css?family=Roboto:100|Raleway:300|Montserrat|Material+Icons|Lato:300|Roboto+Condensed:300|Arimo" rel="stylesheet">

<div align=center>
  <div class="JARAPPcontainer">
    <div class="JARAPPtabs">
      <div class="JARAPPtab">
      <input type="radio" id="JARAPPtab-1" name="JARAPPtab-group-1" checked>
      <label for="JARAPPtab-1"><i class="material-icons">face</i></label>
      <div class="JARAPPcontent">
        <div class="jartitle">NAME MCNAME</div>
        <div class="jarinfoleft">
          <div class="jarinfolefticon">
            <img src="https://pbs.twimg.com/profile_images/642318041099972608/u3ykhj6A.png">
          </div>
          <div class="jarinfoleftinfo">age in letters</div>
          <div class="jarinfoleftinfosub">AGE</div>
          <div class="jarinfoleftinfo">gender</div>
          <div class="jarinfoleftinfosub">GENDER</div>
          <div class="jarinfoleftinfo">sexuality</div>
          <div class="jarinfoleftinfosub">SEXUALITY</div>
          <div class="jarinfoleftinfo">group</div>
          <div class="jarinfoleftinfosub">GROUP</div>
        </div>
        <div class="jarpersonalityright">
          <div class="jarpersonalitytitle">positive traits</div>
          ‣ list
          <br>‣ some
          <br>‣ positive<br>
            ‣ traits<br>
            ‣ here<br>
            ‣ about<br>
            ‣ seven<br>
          <div class="jarpersonalitytitle">negative traits</div>
            ‣ list<br>
            ‣ some <br>
            ‣ negative<br>
            ‣ traits<br>
            ‣ here<br>
            ‣ about<br>
            ‣ seven<br>
          <br>Or get rid of the bullet points and write out a blurb on their personality. <b>Bold</b> important parts so it's easier to read!
          </div>
        </div>
      </div>
      <div class="JARAPPtab">
      <input type="radio" id="JARAPPtab-2" name="JARAPPtab-group-1">
      <label for="JARAPPtab-2"><i class="material-icons"> description </i></label>
      <div class="JARAPPcontent">
        <div class="jartitle">BIOGRAPHY</div>
        <div class="jarbiography">
          <h1>heading</h1>
          write whatever you'd like here, you can use heading tags (h1). <b>Bold</b> can be useful, too. Italics look <i>like this</i>. This box scrolls, so write as much as you'd like.
          <blockquote>blockquote for quotes or other things like lyrics</blockquote>
        </div>
      </div>
    </div>
    <div class="JARAPPtab">
      <input type="radio" id="JARAPPtab-3" name="JARAPPtab-group-1">
      <label for="JARAPPtab-3"><i class="material-icons">accessibility</i></label>
      <div class="JARAPPcontent">
        <div class="jartitle">ABILITY NAME</div>
        <div class="jarbiography">
          <h1>description</h1>
          write whatever you'd like here, you can use heading tags (h1). <b>Bold</b> can be useful, too. Italics look <i>like this</i>. This box scrolls, so write as much as you'd like. <blockquote>blockquote for quotes or other things like lyrics</blockquote>
        </div>
      </div>
    </div>
    <div class="JARAPPtab">
      <input type="radio" id="JARAPPtab-4" name="JARAPPtab-group-1">
      <label for="JARAPPtab-4"><i class="material-icons">menu</i></label>
      <div class="JARAPPcontent">
        <div class="jartitle">INVENTORY</div>
        <div class="jarbiography">
        <div class="jarinventory">
          <h2>item name</h2>
          item description goes here
          <h2>item name</h2>
          item description goes here
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<div class="jarappcredit">made by <a href="http://outofcontrolx.b1.jcink.com/">jaronart</a></div>
</div>[/html]

[html]
<style>

.gavriel {
  width: 590px;
  padding: 5px;
  border: #d7d7d7 solid 1px;
  background: none;
}
   
.gavplot_tb {
  width: 590px;
  height: 500px;
}
 
.gavplot_img {
  width: 340px;
  background: url(http://i.imgur.com/0UIKdKB.png);
  vertical-align: middle;transition: 500ms;
}
   
.gav_quote {
  color: #fdfdfd;
  margin: 20px;
  text-align: justify;
  font-family: raleway;
  font-size: 8px;
  text-transform: lowercase;
  font-style: italic;
  background: rgba(0,0,0,0.8);
  padding: 10px;
  line-height: 13px;
  position: relative;
  top: 0;
  transition: 300ms;
  transition-delay: 480ms;
}
   
.gav_quote:before {
  content: "";
  font-size: 50px;
  position: absolute;
  top: 3px;
  left: -6px;
}
   
.gav_quote:after {
  content: "";
  font-size: 50px;
  position: absolute;
  bottom: -5px;
  right: 6px;
}
   
.gavplotter {background: #fdfdfd;}
   
.gavplotter {
  width: 250px;
  transition: 500ms;
}
   
.gavplot_contain {
  overflow: hidden;
  height: 500px;
  width: 250px;
  transition: 500ms;
  display: table-cell;
  vertical-align: middle;
  position: relative;
}
   
.gav_name {
  width: 250px;
  text-align: center;
  text-transform: lowercase;
  line-height: 28px;
  font-size: 40px;
  font-family: raleway;
  font-weight: 100;
  color: #111;
  position: relative;
  bottom: 0;
  transition: 800ms;
}
   
.gav_plots {
  width: 375px;
  position: absolute;
  top: 500px;
  background: #fdfdfd;
  text-align: justify;
  font-size: 9px;
  font-weight: 600;
  color: #333;
  height: 390px;
  overflow: auto;
  font-family: raleway;
  line-height: 15px;
  padding: 0 5px 0 10px;
  margin: 0 0 20px 10px;
  transition: 400ms;
}
   
.gav_plots h1 {
  font-family: oswald;
  letter-spacing: 1px;
  font-weight: bold;
  font-size: 13px;
  color: #555;
  line-height: 12px;
  margin: 8px 0 8px;
  padding: 10px;
  border: #d7d7d7 solid 1px;
  background: #f8f8f8;
}
 
.gav_name span {
  font-size: 8px;
  font-weight: normal;
  text-transform: uppercase;
  font-family: oswald;
  position: relative;
  top: -10px;
  left: 0;
  transition: 300ms;
}
   
.gavriel:hover .gavplot_img {
  width: 190px;
  transition: 500ms;
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
  -o-transition: 500ms;
  transition-delay: 400ms;
  -moz-transition-delay: 400ms;
  -webkit-transition-delay: 400ms;
  -o-transition-delay: 400ms;
}
   
.gavriel:hover .gav_quote {
  opacity: 0;
  top: 100px;
  transition: 300ms;
  -moz-transition: 300ms;
  -webkit-transition: 300ms;
  -o-transition: 300ms;
}

.gavriel:hover .gavplot_contain {
  width: 400px;
  transition: 500ms;
  transition-delay: 400ms;
}

.gavriel:hover .gavplotter {
  width: 400px;
  transition: 500ms;
  transition-delay: 400ms;
  -webkit-transition: 500ms;
  -webkit-transition-delay: 400ms;
  -o-transition: 500ms;
  -o-transition-delay: 400ms;
  -moz-transition: 500ms;
  -moz-transition-delay: 400ms;
}
   
.gavriel:hover .gav_name {
  bottom: 200px;
  width: 400px;
  transition: 800ms;
  transition-delay: 400ms;
  -webkit-transition: 800ms;
  -webkit-transition-delay: 400ms;
  -moz-transition: 800ms;
  -moz-transition-delay: 400ms;
  -o-transition: 800ms;
  -o-transition-delay: 400ms;
}   
 
.gavriel:hover .gav_name span {
  top: -17px;
  left: 70px;
  transition: 800ms;
  transition-delay: 400ms;
  -moz-transition: 800ms;
  -moz-transition-delay: 400ms;
  -o-transition: 800ms;
  -o-transition-delay: 400ms;
  -webkit-transition: 800ms;
  -webkit-transition-delay: 400ms;
}

.gavriel:hover .gav_plots {
  top: 90px;
  transition: 800ms;
  transition-delay: 600ms;
  -webkit-transition: 800ms;
  -webkit-transition-delay: 600ms;
  -o-transition: 800ms;
  -o-transition-delay: 600ms;
  -moz-transition: 800ms;
  -moz-transition-delay: 600ms;
}
   
.gav_plots::-webkit-scrollbar {
  width: 11px;
  background: #fdfdfd;
  border: none;
}
   
.gav_plots::-webkit-scrollbar-track {border: none;}
   
.gav_plots::-webkit-scrollbar-thumb {
  background: #d7d7d7;
  border: #fdfdfd solid;
  border-width: 10px 5px;
}
   
.gav_von, .gav_von a {
  font-size: 7px;
  font-family: raleway;
  font-weight: 700;
  color: #999;
  text-decoration: none;
  text-transform: uppercase;
}
</style>
<!-- Code désigné par Von Diesel. Merci de créditer l'auteur ! Lien source : http://outofcontrolx.b1.jcink.com/index … topic=1038 -->
​

<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700|Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

<center>
  <div class="gavriel">
    <table class="gavplot_tb">
      <tr>
        <td class="gavplot_img">
          <div class="gav_quote">
            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.
          </div>
        </td>
        <td class="gavplotter">
          <div align="center" class="gavplot_contain">
            <div class="gav_name">
              nickname<br>
              <span>name mcname // gender // sexuality</span>
            </div>
            <div class="gav_plots">
              <h1>FRIENDS</h1>
              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.
              <h1>ENEMIES</h1>
              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.
              <h1>LOVERS</h1>
              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.
            </div>
          </div>
        </td>
      </tr>
    </table>
  </div>
  <div class="gav_von">VON OF <a href="http://wicked-wonderland.boards.net/user/1289">WW</a> and <a href="http://outofcontrolx.b1.jcink.com/index.php?showuser=75">OOC</a></div>
</center>

[/html]

[hideprofile][html]<style>

.systematicluv {
  width: 512px;
  padding: 5px;
  background-color: #f5f5f5;
  border: solid 1px #e5e5e5;
  letter-spacing: 0px;
  color: #555555;
  text-align: justify;
}

.systematicluv1 {
  padding: 5px;
  background-color: #f9f9f9;
  border: solid 1px #e5e5e5;
}

.systematicluvtop {
  border: solid 1px #e5e5e5;
  background-color: #f0f0f0;
  padding: 50px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  font: bold 50px Mina;
  line-height: 40px;
  text-shadow: 1px 1px 0px #ffffff, 1px 0px 0px #ffffff, 0px 1px 0px #ffffff, -1px 0px 0px #ffffff, 0px -1px 0px #ffffff, -1px 1px 0px #ffffff, 1px -1px 0px #ffffff, -1px -1px 0px #ffffff,0px 0px 5px rgba(255,255,255,.5);
}

.systematicluvtop b {color: #cc5458;}

.systematicluvtop div {
  font: bold 10px Roboto Condensed;
  line-height: 10px;
}

.systematicluvright {
  background-color: #d4c76a;
  padding: 20px;
  padding-bottom: 15px;
  float: left;
  margin-top: -1px;
  float: left;
  margin-right: 30px;
}

.systematicluvright div {
  background-color: #f9f9f9;
  font: bold 10px Roboto Condensed;
  line-height: 10px;
  padding: 15px 0px;
  width: 100px;
  margin-bottom: 5px;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
  border-radius: 3px;
}

.systematicluvleft {
  border-bottom: solid 1px #e5e5e5;
  border-right: solid 1px #e5e5e5;
  background-color: #f7f7f7;
  padding: 30px;
  height: 108px;
}

.systematicluvimg {
  position: absolute;
  height: 80px;
  width: 80px;
  border: solid 1px #e5e5e5;
  padding: 5px;
  background-color: #ffffff;
  border-radius: 100%;
  margin: -101px 0px 0px 360px;
}

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

.systematicluvleft2 {
  font: 12px roboto;
  height: 105px;
  padding-right: 10px;
  overflow: auto;
  line-height: 13px;
}

.systematicluvleft2:: -webkit-scrollbar-thumb: vertical {
  background-color: #d4c76a!important;
  border: none!important;
  border-radius: 3px!important;
}

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

.systematicluvtitle {
  text-align: right;
  border: solid 1px #e5e5e5;
  border-top: none;
  background-color: #eeeeee;
  font: 15px Roboto Condensed;
  font-style: italic;
  text-transform: lowercase;
  line-height: 15px;
  padding: 30px;
  text-shadow: 1px 1px 0px #ffffff, 1px 0px 0px #ffffff, 0px 1px 0px #ffffff, -1px 0px 0px #ffffff, 0px -1px 0px #ffffff, -1px 1px 0px #ffffff, 1px -1px 0px #ffffff, -1px -1px 0px #ffffff;
  }

.systematicluvtitle b {
  color: #cc5458;
  padding: 0px 8px;
}

.systematicluvblurb {
  border: solid 1px #e5e5e5;
  border-top: 0px;
  padding: 5px;
  background-color: #f5f5f5;
}

.systematicluvblurb1 {
  border: solid 1px #e5e5e5;
  padding: 35px;
  background-color: #f9f9f9;
  font: 12px Roboto;
  line-height: 13px;
}

.systematicluvbot {
  border: solid 1px #e5e5e5;
  border-top: none;
  background-color: #eeeeee;
  font: bold 10px Roboto Condensed;
  text-transform: uppercase;
  line-height: 15px;
  padding: 30px;
  text-shadow: 1px 1px 0px #ffffff, 1px 0px 0px #ffffff, 0px 1px 0px #ffffff, -1px 0px 0px #ffffff, 0px -1px 0px #ffffff, -1px 1px 0px #ffffff, 1px -1px 0px #ffffff, -1px -1px 0px #ffffff;
}

.systematicluvbot b {color: #cc5458;}

.systematicluvleft2 i, .systematicluvblurb1 i {
  font: bold 12px Roboto;
  color: #222222;
  line-height: 13px;
}

.systematicluvleft2 b, .systematicluvblurb1 b {
  font: bold 15px Roboto;
  color: #9cb872;
  font-style: italic;
  line-height: 13px;
}

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

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

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

<div align="center">
<div class="systematicluv">
    <div class="systematicluv1">
    <div class="systematicluvtop">
        FIRSTNAME<br>
        <b>LASTNAME</b>
        <div>I CAN'T REMEMBER - WOULD I SURRENDER? ALL THE SIGNS SAY GO</div>
        </div>
        <div class="systematicluvright">
        <div>10 years old</div>
        <div>sapiosexual</div>
        <div>virtual idol</div>
        </div>
        <div class="systematicluvleft">
        <div class="systematicluvimg"><img src="https://i.imgur.com/pMWOUCW.png"></div>
        <div class="systematicluvleft2">
            general character blurb or summary can go here. <b>i realized after starting</b> this template, originally based on "systematic love", two things: a) <i>that systematic love has no good lyrics</i> worth using as dummy text for a template because none of them make any hecking sense; and b) <i>the challenge was based on a stop light</i>, and operation: mindcrime ii's "signs say go" fits pretty well, at least in the name. <b>alas, all the of the css names</b> are still based on the vocaloid song. and i left miku in, since. <b>well</b>. that icon's where i grabbed the hex codes from.
        </div>
        </div>
        <div class="systematicluvtitle">
        convince me, mesmerize me, feed me more lies
        <b>(</b> friendship <b>)</b>
        </div>
        <div class="systematicluvblurb">
        <div class="systematicluvblurb1">
            imagine, if you will, what it means, this worthless life. tried my best to scratch the surface. i got bloody, broken fingernails. <b>convincing stories of achievements - lies</b>! all expectations spent. never could comply. generations come and go, and what will i be? the failure they see here? i can't remember! all the signs say go. <i>would i surrender? try to save my soul?</i> i can't remember! all the signs say go. i'll never surrender! time for heads to roll.
        </div>
        </div>
        <div class="systematicluvtitle">
        no matter what's said, i swear i'll see him dead
        <b>(</b> hateship <b>)</b>
        </div>
        <div class="systematicluvblurb">
        <div class="systematicluvblurb1">
            do you think i've got to have one good reason? the question stands: how does he keep on getting into my head? i know i'll never see. i've gotta get free. no matter what's said, i'd rather see him dead. i was wondering why, why, why we don't take anymore. <i>i'll tear him down, tear him down</i>! take anymore. i'll tear him down, tear him down! i've been called so many things. <b>now what do you see? a failure who dares to dream?</b> i can't remember! all the signs say go. would i surrender? try to save my soul? i can't remember! all the signs say go. i'll never surrender! time for heads to roll. i can't remember! all the signs say go. would i surrender? try to save my soul? i can't remember! all the signs say - go!
        </div>
        </div>
        <div class="systematicluvtitle">
        how do you get him out, out of your head?
        <b>(</b> loveship <b>)</b>
        </div>
        <div class="systematicluvblurb">
        <div class="systematicluvblurb1">
            convince me, mesmerize me, feed me more lies. i'll get stronger. how do you get him out, out of your head? i know i'll never see. i've gotta get free. <b>no matter what's said, i swear i'll see him dead!</b> now, i can't remember! all the signs say go. would i surrender? try to save my soul? i can't remember! all the signs say go. i'll never surrender! time for heads to roll. <i>i can't remember! all the signs say go.</i> would i surrender? try to save my soul? i can't remember! all the signs say - go!
        </div>
        </div>
        <div class="systematicluvbot">generations come and go, and what will i be - <b>the failure they see here</b>?</div>
    </div>
    </div>
    <a href="http://pixel-perfect.boards.net/user/5"><div class="pcredits">PHARAOH LEAP CREATES</div></a>
</div>
</div>

[/html]

[hideprofile][html]
<style>

.journal_container {
  width: 95%;
  margin: auto;
  background-color: #eee;
  line-height: 15px;
  -webkit-box-shadow: inset 0px 0px 0px 1px #ccc;
  -moz-box-shadow: inset 0px 0px 0px 1px #ccc;
  box-shadow: inset 0px 0px 0px 1px #ccc;
  border: 8px solid #f8f8f8;
  background-image: url(https://media3.giphy.com/media/Wy3Q0fuN … -large.gif);
    background-size: cover;
}

.journal_header {
  display: block;
  height: 133px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

.journal_icon {
  margin: 10px;
  width: 110px;
  height: 110px;
  border: 1px solid #ccc;
  border-radius: 2px;
  display: inline-block;
  vertical-align: top;
  background-color: #f9f9f9;
}

.journal_icon img {
  width: 100px;
  height: 100px;
  margin: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.journal_author {
  margin: 10px;
  height: 110px;
  width: 83%;
  border: 4px solid #f8f8f8;
  border-radius: 2px;
  display: inline-block;
  margin-left: 0px;
  line-height: 65px;
  -webkit-box-shadow: inset 0px 0px 0px 1px #ccc;
  -moz-box-shadow: inset 0px 0px 0px 1px #ccc;
  box-shadow: inset 0px 0px 0px 1px #ccc;
  outline: 1px solid #ccc;
  box-sizing: border-box;
  color: #fefefe;
  font-family: 'montserrat',sans-serif;
  text-transform: uppercase;
  font-size: 20pt;
  text-align: right;
  padding: 15px 15px;
  font-weight: 800;
  text-shadow: -1px -1px 0 #bbb, 1px -1px 0 #bbb, -1px 1px 0 #bbb, 1px 1px 0 #bbb;
  whitespace: nowrap;
  text-shadow: white-space: nowrap;
  overflow: hidden;
  text-overflow:
  ellipsis;
  text-align: center;
  background-color: #f3f3f3;
  background-image: url(https://media3.giphy.com/media/Wy3Q0fuN … -large.gif);
    background-size: cover;
}

.tab {
  width: 95px;
  height: 500px;
  background-color: #f3f3f3;
  text-align: center;
  display: inline-block;
  margin: 10px;
  box-sizing: border-box;
  padding: 8px;
  margin-left: 0px;
  border-radius: 2px;
  -webkit-box-shadow: inset 0px 0px 0px 1px #ddd;
  -moz-box-shadow: inset 0px 0px 0px 1px #ddd;
  box-shadow: inset 0px 0px 0px 1px #ddd;
  border: 4px solid #f8f8f8
}

.tab button {
  display: block;
  background-color: #80a7b3;
  color: #fff;
  padding: 10;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  margin-bottom: 10px;
  text-align: center;
  font-size: 18pt;
}

.tab button:hover {background-color: #aaa;}
.tab button.active {background-color: #bbb;}

.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ddd;
  width: 85%;
  height: 500px;
  margin: 10px;
  background-color: #fafafa;
  border-radius: 2px;
  -webkit-box-shadow: inset 0px 0px 0px 1px #ddd;
  -moz-box-shadow: inset 0px 0px 0px 1px #ddd;
  box-shadow: inset 0px 0px 0px 1px #ddd;
  outline: 1px solid #ddd;
  border: 5px solid #fff;
  box-sizing: border-box;
  color: #888;
  text-align: justify;
  line-height: 15px;
  font-size: 9pt;
  font-family: 'arial';
  padding: 20px 30px;
  overflow: auto;
}

.tabcontent::-webkit-scrollbar {display: none;}

.tabcontent p {
  padding: 15px;
  background-color: #fff;
  display: block;
  border-radius: 2px;
  border: 1px solid #eee;
  margin-bottom: 30px;
}

.tabcontent span {
  font-weight: bold;
  display: inline-block;
  margin-bottom: 10px;
  font-size: 7pt;
}

.tabcontent span img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin-bottom: -10px;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #80a7b3;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 15px;
  left: 115%;
  opacity: 0;
  transition: opacity 0.3s;
  font-family: 'montserrat',sans-serif;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 39%;
  left: 55%;
  margin-left: -76px;
  border-width: 5px;
  border-style: solid;
  border-color:  transparent #80a7b3 transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.journal_content_ft {
  height: 50px;
  display: block;
  background-color: #80a7b3;
}
</style>
<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
</script>
<!-- Code désigné par TimeLapse. Merci de créditer l'auteur ! Lien source : http://sonderx.jcink.net/index.php?showtopic=1237 -->
​

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,800" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<div class="journal_container">
    <div class="journal_header">
        <div class="journal_icon"><img src="https://i.pinimg.com/564x/7c/ea/71/7cea716d66e67bd682e2213a1a069576.jpg"></div>
        <div class="journal_author">First M Last</div>
    </div>
    <div class="tab">
        <div class="tooltip">
            <button class="tablinks" onclick="openCity(event, 'Journal')" id="defaultOpen"><i class="fas fa-thumbtack"></i></button>
            <span class="tooltiptext">Journal</span>
        </div>
        <div class="tooltip">
            <button class="tablinks" onclick="openCity(event, 'Tracker')"><i class="fas fa-paper-plane"></i></button>
            <span class="tooltiptext">Tracker</span>
        </div>
        <div class="tooltip">
            <button class="tablinks" onclick="openCity(event, 'Relationships')"><i class="fas fa-heartbeat"></i></button>
            <span class="tooltiptext">Relationships</span>
        </div>
    </div>
    <div id="Journal" class="tabcontent">
        <span><img src="https://i.pinimg.com/564x/7c/ea/71/7cea716d66e67bd682e2213a1a069576.jpg"> &nbsp; Posted five minutes ago</span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec sollicitudin tortor. Curabitur ut sodales enim. Donec pellentesque eleifend tellus, quis sodales eros sodales eget. Ut a aliquet risus. Aliquam erat volutpat. Sed ex est, viverra sit amet tincidunt semper, pellentesque pharetra ligula. Maecenas pharetra, elit eget sodales vulputate, enim mauris gravida dui, vitae feugiat est nulla ut libero. Sed egestas, arcu vel mollis elementum, turpis mi suscipit lacus, a mollis magna neque quis urna. Pellentesque consectetur eros et pretium vehicula. Praesent sit amet consequat erat.
        <br><br>Vivamus gravida sagittis mattis. Fusce leo urna, elementum sed elementum ut, rhoncus eu nisi. In erat metus, molestie ut est vitae, malesuada aliquam leo. Donec sed dolor nisl. Donec cursus nisl ut nisl faucibus, nec tempor est ullamcorper. Mauris congue velit blandit sagittis scelerisque. In auctor nibh non cursus maximus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus scelerisque purus nibh, pretium semper mi efficitur et. Integer id lacus eget turpis tempor pellentesque
        <span><img src="https://i.pinimg.com/564x/7c/ea/71/7cea716d66e67bd682e2213a1a069576.jpg"> &nbsp; Posted five minutes ago</span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec sollicitudin tortor. Curabitur ut sodales enim. Donec pellentesque eleifend tellus, quis sodales eros sodales eget. Ut a aliquet risus. Aliquam erat volutpat. Sed ex est, viverra sit amet tincidunt semper, pellentesque pharetra ligula. Maecenas pharetra, elit eget sodales vulputate, enim mauris gravida dui, vitae feugiat est nulla ut libero. Sed egestas, arcu vel mollis elementum, turpis mi suscipit lacus, a mollis magna neque quis urna. Pellentesque consectetur eros et pretium vehicula. Praesent sit amet consequat erat.
    </div>
    <div id="Tracker" class="tabcontent">
        <span><img src="https://i.pinimg.com/564x/7c/ea/71/7cea716d66e67bd682e2213a1a069576.jpg"> &nbsp; Posted fifteen minutes ago</span><p>This place is for Thread Tracking.</p>
    </div>
    <div id="Relationships" class="tabcontent">
        <span><img src="https://i.pinimg.com/564x/7c/ea/71/7cea716d66e67bd682e2213a1a069576.jpg"> &nbsp; Posted five minutes ago</span> <p>This page is for relationship trackers</p>
    </div>
    <div class="journal_content_ft"></div>   
</div>
[/html]

[html]
<style>
.container {
  position: relative;
  margin-top: 50px;
  width: 500px;
  height: 300px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
}

.container:hover .overlay {
  display: block;
  background: rgba(0, 0, 0, .3);
}

img {
  position: absolute;
  width: 500px;
  height: 300px;
  left: 0;
}

.title {
  position: absolute;
  width: 500px;
  left: 0;
  top: 120px;
  font-weight: 700;
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  color: white;
  z-index: 1;
  transition: top .5s ease;
}

.container:hover .title {
  top: 90px;
}

.button7 {
  position: absolute;
  width: 500px;
  left:0;
  top: 180px;
  text-align: center;
  opacity: 0;
  transition: opacity .35s ease;
}

.button7 a {
  width: 200px;
  padding: 12px 48px;
  text-align: center;
  color: white;
  border: solid 2px white;
  z-index: 1;
}

.container:hover .button7 {
  opacity: 1;
}

</style>
<div class="container">
  <img src="https://images.unsplash.com/photo-1488628075628-e876f502d67a?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=" alt="" />
  <p class="title">card title</p>
  <div class="overlay"></div>
  <div class="button7"><a href="#"> BUTTON </a></div>
</div>
[/html]

[html]
<style>
.pen .navbar-toggle {
border: none;
background: transparent !important;
}

.pen .navbar-toggle:hover {
background: transparent !important;
}

.pen .navbar-toggle .icon-bar {
width: 22px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}

/* ANIMATED X */
.navbar-toggle.x .icon-bar:nth-of-type(1) {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 10% 10%;
-ms-transform-origin: 10% 10%;
transform-origin: 10% 10%;
}

.navbar-toggle.x .icon-bar:nth-of-type(2) {
opacity: 0;
filter: alpha(opacity=0);
}

.navbar-toggle.x .icon-bar:nth-of-type(3) {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 10% 90%;
-ms-transform-origin: 10% 90%;
transform-origin: 10% 90%;
}

/* ANIMATED X COLLAPSED */
.navbar-toggle.x.collapsed .icon-bar:nth-of-type(1) {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}

.navbar-toggle.x.collapsed .icon-bar:nth-of-type(2) {
opacity: 1;
filter: alpha(opacity=100);
}

.navbar-toggle.x.collapsed .icon-bar:nth-of-type(3) {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
/* END ANIMATED X */

/* ANIMATED RIGHT ARROW */
.navbar-toggle.rarr.collapsed .icon-bar:nth-of-type(1) {
transform: translate3d(0,0,0) rotate(0deg);
transform-origin: right top;
width: 22px;
}

.navbar-toggle.rarr.collapsed .icon-bar:nth-of-type(2) {
transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.rarr.collapsed .icon-bar:nth-of-type(3) {
transform: translate3d(0,0,0) rotate(0deg);
transform-origin: right bottom;
width: 22px;
}

.navbar-toggle.rarr .icon-bar:nth-of-type(1) {
transform: translate3d(11px,6px,0) rotate(45deg);
transform-origin: right top;
width: 11px;
}

.navbar-toggle.rarr .icon-bar:nth-of-type(2) {
/* transform: scale(0.75); */;
}

.navbar-toggle.rarr .icon-bar:nth-of-type(3) {
transform: translate3d(11px,-6px,0) rotate(-45deg);
transform-origin: right bottom;
width: 11px;
}
/* END ANIMATED RIGHT ARROW */

/* ANIMATED LEFT ARROW */
.navbar-toggle.larr.collapsed .icon-bar:nth-of-type(1) {
transform: translate3d(0,0,0) rotate(0deg);
width: 22px;
}

.navbar-toggle.larr.collapsed .icon-bar:nth-of-type(2) {
transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.larr.collapsed .icon-bar:nth-of-type(3) {
transform: translate3d(0,0,0) rotate(0deg);
width: 22px;
}

.navbar-toggle.larr .icon-bar:nth-of-type(1) {
transform: translate3d(0px,6px,0) rotate(45deg);
transform-origin: left top;
width: 11px;
}

.navbar-toggle.larr .icon-bar:nth-of-type(3) {
transform: translate3d(0px,-6px,0) rotate(-45deg);
transform-origin: left bottom;
width: 11px;
}
/* END ANIMATED LEFT ARROW */

/* ANIMATED UP ARROW */
.navbar-toggle.uarr.collapsed .icon-bar:nth-of-type(1) {
transform: translate3d(0,0,0) rotate(0deg);
width: 22px;
}

.navbar-toggle.uarr.collapsed .icon-bar:nth-of-type(2) {
transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.uarr.collapsed .icon-bar:nth-of-type(3) {
transform: translate3d(0,0,0) rotate(0deg);
width: 22px;
}

.navbar-toggle.uarr .icon-bar:nth-of-type(1) {
transform: translate3d(1px,0,0) rotate(-45deg);
transform-origin: center center;
width: 11px;
}

.navbar-toggle.uarr .icon-bar:nth-of-type(2) {
transform: rotate(-90deg);
transform-origin: center center;
}

.navbar-toggle.uarr .icon-bar:nth-of-type(3) {
transform: translate3d(0px,-14px,0) rotate(-135deg);
transform-origin: right top;
width: 11px;
}
/* END ANIMATED UP ARROW */

/* ANIMATED PLUS */
.navbar-toggle.plus.collapsed .icon-bar:nth-of-type(1) {
transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.plus.collapsed .icon-bar:nth-of-type(2) {
transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.plus.collapsed .icon-bar:nth-of-type(3) {
transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.plus .icon-bar:nth-of-type(1) {
transform: translate3d(0px,6px,0) rotate(90deg);
transform-origin: center center;
}

.navbar-toggle.plus .icon-bar:nth-of-type(3) {
transform: translate3d(0px,-6px,0) rotate(-90deg);
transform-origin: center center;
}
/* END ANIMATED PLUS */

/* ANIMATED MINUS */
.navbar-toggle.minus.collapsed .icon-bar:nth-of-type(1) {
transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.minus.collapsed .icon-bar:nth-of-type(2) {
transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.minus.collapsed .icon-bar:nth-of-type(3) {
transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.minus .icon-bar:nth-of-type(1) {
transform: translate3d(0,6px,0);
}

.navbar-toggle.minus .icon-bar:nth-of-type(3) {
transform: translate3d(0,-6px,0);
}
/* END ANIMATED MINUS */

/* FORCE NAVBAR-TOGGLE */

.pen .navbar-header {
float: none;
}

.pen .navbar-toggle {
display: block;
}

.pen .navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

.pen .navbar-collapse.collapse {
display: none !important;
}

.pen .navbar-nav {
float: none !important;
margin: 7.5px -15px;
}

.pen .navbar-nav > li {
float: none;
}

.pen .navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}

.pen .navbar-collapse.collapse.in {
display: block !important;
}

.pen .navbar-brand {
  font-size:14px;
}
</style>
<div class="container-fluid">
<div class="page-header">
  <h1>Bootstrap <small>3.3.7</small> Navbar Toggle Animations</h1>
  <p class="lead">Based on <a href="https://codepen.io/bennettfeely/pen/twbyA" target="_blank">Navicon Transformicons</a> by <a href="https://codepen.io/bennettfeely/" target="_blank">Bennett Feely</a>.</p>
  </div>
 
  <div class="row">
<div class="col-sm-4">

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle x collapsed" data-toggle="collapse" data-target="#navbar-collapse-x">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#top">.navbar-toggle.x</a>
</div>

<div class="collapse navbar-collapse" id="navbar-collapse-x">
<ul class="nav navbar-nav navbar-right">
<li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li>
<li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li>
</ul>
</div><!-- .navbar-collapse -->
</nav>

</div><div class="col-sm-4">

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle uarr collapsed" data-toggle="collapse" data-target="#navbar-collapse-uarr">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#top">.navbar-toggle.uarr</a>
</div>

<div class="collapse navbar-collapse" id="navbar-collapse-uarr">
<ul class="nav navbar-nav navbar-right">
<li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li>
<li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li>
</ul>
</div><!-- .navbar-collapse -->
</nav>

</div><div class="col-sm-4">

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle larr collapsed" data-toggle="collapse" data-target="#navbar-collapse-larr">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#top">.navbar-toggle.larr</a>
</div>

<div class="collapse navbar-collapse" id="navbar-collapse-larr">
<ul class="nav navbar-nav navbar-right">
<li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li>
<li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li>
</ul>
</div><!-- .navbar-collapse -->
</nav>

</div></div><div class="row">

<div class="col-sm-4">

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle rarr collapsed" data-toggle="collapse" data-target="#navbar-collapse-rarr">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#top">.navbar-toggle.rarr</a>
</div>

<div class="collapse navbar-collapse" id="navbar-collapse-rarr">
<ul class="nav navbar-nav navbar-right">
<li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li>
<li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li>
</ul>
</div><!-- .navbar-collapse -->
</nav>

</div><div class="col-sm-4">

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle plus collapsed" data-toggle="collapse" data-target="#navbar-collapse-plus">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#top">.navbar-toggle.plus</a>
</div>

<div class="collapse navbar-collapse" id="navbar-collapse-plus">
<ul class="nav navbar-nav navbar-right">
<li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li>
<li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li>
</ul>
</div><!-- .navbar-collapse -->
</nav>

</div><div class="col-sm-4">

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle minus collapsed" data-toggle="collapse" data-target="#navbar-collapse-minus">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#top">.navbar-toggle.minus</a>
</div>

<div class="collapse navbar-collapse" id="navbar-collapse-minus">
<ul class="nav navbar-nav navbar-right">
<li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li>
<li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li>
</ul>
</div><!-- .navbar-collapse -->
</nav>

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

[html]<style>

.layout {
  background-image: url(https://source.unsplash.com/rf5R1qXwlDU/1600x900);
  background-position: 0 0;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.layout.nav--active main {
  opacity: .2;
  user-select: none;
}

.layout__backdrop,
.layout__frontdrop {
  background-color: rgba(0, 0, 0, .3);
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: fixed;
  transform-origin: 0% 50%;
  width: 100%;
  z-index: 0;
}

.layout__backdrop {
  transform: scaleX(.34) translateX(calc(67% * 3));
}

.layout.nav--active .layout__frontdrop {
  background-color: var(--ccft-cs-primary-alt);
  visibility: visible;
}

.layout__frontdrop {
  opacity: 0;
  visibility: hidden;
  z-index: 2;
}

.layout__wrapper {
  display: grid;
  grid-template-columns: 300px repeat(3, 1fr);
  margin: auto;
  height: 100%;
}

.layout__main {
  transition: opacity .3s;
  z-index: 1;
}

.hero {
  padding-top: 10rem;
}

.hero-title {
  color: #fff;
  font-family: var(--ccft-ts-secondary);
  font-weight: 400;
  font-size: 4.75rem;
  line-height: 1.2;
  margin-left: auto;
  margin-right: 5rem;
  margin-bottom: 0;
  position: relative;
  width: 32.5rem;
  z-index: 1;
}

.hero-title em {
  display: block;
  font-size: 2rem;
  font-style: normal;
  line-height: 1.2;
  transform: translateX(2.5rem);
}

.hero-text {
  background-color: rgba(0, 0, 0, .3);
  color: #fff;
  font-size: .92rem;
  line-height: 1.75;
  margin: 0;
  margin-left: auto;
  margin-right: 6rem;
  padding: 5rem 3rem 3rem;
  transform: translateY(-3rem);
  width: 50%;
  z-index: 0;
}

.hero-text a {
  box-shadow: 0 4px #fff;
  color: #fff;
  text-decoration: none;
}

.hero-block--content > *:last-child {
  margin-bottom: 0;
}

.layout__main {
  display: flex;
  flex-direction: column;
}

.layout__header {
  height: 100%;
  z-index: 2;
}

.layout__header nav {
  height: 100%;
}

.layout__main {
  grid-column: span 3;
}

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav--header-1 {
  counter-reset: n;
  height: 100%;
  padding: 0 2rem;
  position: relative;
}

.nav--header-1 > .nav__item:not(.nav__item--home) {
  counter-increment: n;
}

.nav--header-1 > .nav__item:not(.nav__item--home) > .nav__link {
  color: var(--ccft-cs-on-surface);
  display: block;
  font-family: var(--ccft-ts-secondary);
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: .045em;
  padding: 1rem 1rem;
  padding-left: 3rem;
  padding-top: 3rem;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: transform .2s;
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  z-index: 1;
}

.nav--header-1 > .nav__item > .nav__link::before {
  content: counter(n, decimal-leading-zero);
  display: block;
  font-family: var(--ccft-ts-primary);
  font-size: 6rem;
  font-weight: bold;
  left: 0;
  top: 0;
  opacity: .25;
  position: absolute;
  transition: transform .2s;
  z-index: -1;
}

.nav--header-1 > .nav__item > .nav__link:hover,
.nav--header-1 > .nav__item.nav__item--active > .nav__link {
  color: var(--ccft-cs-primary);
  transform: translateX(.5rem);
}

.nav--header-1 > .nav__item.nav__item--active .nav--header-2 {
  visibility: visible;
}

.nav--header-1 .nav__item--home {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.145 8.633l-2.145-8.633-2.148 8.636c-.572.366-1.034.877-1.358 1.477l-8.494 1.887 8.494 1.887c.324.6.786 1.111 1.358 1.477l2.148 8.636 2.157-8.64c.571-.367 1.03-.879 1.353-1.479l8.49-1.881-8.492-1.884c-.324-.603-.788-1.116-1.363-1.483zm-2.145 5.367c-1.104 0-2-.896-2-2s.896-2 2-2 2 .896 2 2-.896 2-2 2zm7 5l-3.43-2.186c.474-.352.893-.771 1.245-1.245l2.185 3.431zm-3.521-11.882l3.521-2.117-2.119 3.519c-.386-.542-.86-1.015-1.402-1.402zm-6.955 9.767l-3.524 2.115 2.118-3.521c.387.543.862 1.018 1.406 1.406zm-1.34-8.453l-2.184-3.431 3.431 2.184c-.474.352-.894.772-1.247 1.247z" fill="rgb(255, 255, 255)" style="transform-origin: 50% 50%; transform: rotateZ(-27deg);"/></svg>');
  background-position: 0px 50%;
  background-repeat: no-repeat;
  background-size: var(--ccft-brand-size) var(--ccft-brand-size);
  margin-bottom: 60px;
  padding: 0;
}

.nav--header-1 .nav__item--home > .nav__link {
  display: block; /* Necessary for text-indent to work */
  height: calc(var(--ccft-brand-size) + 40px);
  text-indent: -999px;
}

.nav--header-2 {
  height: 100%;
  left: 270px;
  opacity: 0;
  padding: 2.5rem 5rem;
  position: fixed;
  top: 0;
  visibility: hidden;
  width: 100%;
}

.nav--header-2::before {
  background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.095 9.184 2.81 2.81 9.112-9.192 9.18 9.1z" fill="rgb(255, 255, 255)"/></svg>');
  background-repeat: no-repeat;
  background-size: 30px 30px;
  content: '';
  cursor: pointer;
  display: block;
  margin-bottom: 6rem;
  height: 30px;
  width: 30px;
}

.nav--header-2 > .nav__item {
  margin-bottom: 2.75rem;
}

.nav--header-2 > .nav__item > .nav__link {
  background-image: linear-gradient(to bottom, var(--ccft-cs-primary) 0%, var(--ccft-cs-primary) 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 6px 6px;
  color: #fff;
  font-family: var(--ccft-ts-primary);
  font-size: 2.75rem;
  font-weight: bold;
  letter-spacing: .05em;
  text-decoration: none;
  transition: background-size .25s, color .3s;
}

.nav--header-2 > .nav__item > .nav__link:hover {
  background-size: 6px 50px;
  color: #000000;
}
</style>

<script>
const items = document.querySelectorAll('.nav--header-1 > .nav__item');
const rootElement = document.querySelector('.layout');

const colors = [
  'hsla(14, 97%, 65%, 0.4)',
];

// Local state.
const state = {
  navigationItems: {},
  root: rootElement,
};

for (let navItemIndex = 0; navItemIndex < items.length; ++navItemIndex) {
  const stateItem = {
    color: colors[navItemIndex % colors.length],
    element: items[navItemIndex],
    id: navItemIndex,
    isActive: false,
    type: 'DEFAULT',
  }
 
  const subNav =  items[navItemIndex].querySelector('.nav');
  if (subNav) {
    // current element has a subNav.
    stateItem.childNavigation = subNav;
    stateItem.type = 'PARENT';
  }
 
  stateItem.onClick = (event) => {
    const actualOnClick = () => {
      if (state.activeItem === navItemIndex) {
        return;
      }
     
      if (state.activeItem) {
        state.activeItem = null;
      }

      if ('PARENT' === state.navigationItems[navItemIndex].type) {
        // Set new active item.
        state.activeItem = navItemIndex;

        animateShow(state);
      }
    };
   
    if (state.activeItem) {
      return animateHide(state, actualOnClick);
    }
   
    return actualOnClick();
  };
 
  // Add this item to the state.
  state.navigationItems[navItemIndex] = stateItem;
}

const animateShow = (state) => {
  const animation = anime.timeline();
  console.log(state.navigationItems[state.activeItem]);
 
  animation.add({
    backgroundColor: state.navigationItems[state.activeItem].color,
    begin: () => {
      state.root.classList.add('nav--active');
    },
    complete: () => {
      state.navigationItems[state.activeItem].element.classList.add('nav__item--active');
    },
    duration: 450,
    easing: 'easeOutExpo',
    opacity: 1,
    translateX: [
      {delay: 300, value: '270px',},
    ],
    scaleX: [
      {value: 0},
      {value: 1},
    ],
    targets: '.layout__frontdrop',
  })
  .add({
    duration: 70,
    opacity: [0, 1],
    targets: state.navigationItems[state.activeItem].childNavigation,
  }).add({
    delay: anime.stagger(70),
    opacity: [0, 1],
    translateY: ['100%', '0'],
    targets: state.navigationItems[state.activeItem].childNavigation.querySelectorAll('.nav__item'),
  });
 
  return animation;
};

const animateHide = (state, complete) => {
  const animation = anime.timeline({
    complete: complete,
  });
 
  animation.add({
    duration: 210,
    opacity: [1, 0],
    translateY: [0, '+=50px'],
    targets: state.navigationItems[state.activeItem].childNavigation,
  }).add({
    complete: () => {
      // Clean-up current active item.
      state.root.classList.remove('nav--active');
      state
        .navigationItems[state.activeItem]
        .element
        .classList
        .remove('nav__item--active')
      ;
    },
    duration: 250,
    easing: 'easeOutCirc',
    scaleX: [
      {value: 0,},
    ],
    translateX: [
      {value: 0},
    ],
    targets: '.layout__frontdrop',
  });
 
  return animation;
};

(() => {
  // Ready to fight.
  const introAnimation = anime.timeline({
    complete: () => {
      for (let stateItemIndex = 0; stateItemIndex < Object.values(state.navigationItems).length; ++ stateItemIndex) {
        state.navigationItems[stateItemIndex].element.addEventListener(
          'click',
          state.navigationItems[stateItemIndex].onClick
        );
       
        // Reset transform to prevent the implicit z-index / position relative to trigger.
        state.navigationItems[stateItemIndex].element.style.transform = '';
      }
    },
  });

  introAnimation.add({
    duration: 350,
    delay: 1000,
    easing: 'easeOutCirc',
    targets: '.layout__backdrop',
    scaleX: [0, 1],
  }).add({
    delay: anime.stagger(75),
    duration: 450,
    easing: 'easeOutCirc',
    opacity: [0, 1],
    translateY: ['100%', '0%'],
    targets: '.nav--header-1 > .nav__item:not(.nav__item--home)',
  }).add({
    easing: 'easeOutExpo',
    targets: '.layout__backdrop',
    translateX: [
      {delay: 350, value: (67) + '%'},
    ],
  }).add({
    duration: 350,
    easing: 'easeOutExpo',
    targets: '.hero-title',
    opacity: [0, 1],
    translateY: ['50px', '0'],
  }).add({
    duration: 350,
    easing: 'easeOutExpo',
    targets: '.hero-text',
    opacity: [0, 1],
    translateY: ['0', '-3rem'],
  }, '-=100');
})();
</script>

<div class="layout">
  <div class="layout__backdrop"></div>
  <div class="layout__frontdrop"></div>
  <div class="layout__wrapper">
    <header class="layout__header">
      <nav>
        <ul class="nav nav--header nav--header-1">
          <li class="nav__item nav__item--home">
            <a class="nav__link" href="#0">Home</a>
          </li>
          <li class="nav__item nav__item--about">
            <a class="nav__link" href="#0">About</a>
          </li>
          <li class="nav__item nav__item--clients">
            <a class="nav__link" href="#0">Clients</a>
            <ul class="nav nav--header nav--header-2">
              <li class="nav__item">
                <a class="nav__link" href="#0">Burger King</a>
              </li>
              <li class="nav__item">
                <a class="nav__link" href="#0">Southwest Airlines</a>
              </li>
              <li class="nav__item">
                <a class="nav__link"  href="#0">Levi Strauss</a>
              </li>
            </ul>
          </li>
          <li class="nav__item nav__item--services">
            <a class="nav__link" href="#0">Services</a>
            <ul class="nav nav--header nav--header-2">
              <li class="nav__item">
                <a class="nav__link" href="#0">Print Design</a>
              </li>
              <li class="nav__item">
                <a class="nav__link" href="#0">Web Design</a>
              </li>
              <li class="nav__item">
                <a class="nav__link" href="#0">Mobile App Development</a>
              </li>
            </ul>
          </li>
          <li class="nav__item nav__item--contact">
            <a class="nav__link" href="#0">Contact</a>
          </li>
        </ul>
      </nav>
    </header>
    <main class="layout__main">
      <section class='hero'>
        <div class="hero-block hero-block--header">
          <h1 class="hero-title">
            Fork It <em>Navigation with Sub-navigation, a Codepen Challenge, Aug 2019.</em>
           
          </h1>
          <p class="hero-text">The idea was to fork <a href="https://codepen.io/pen?template=PMbwKb" target="_blank">a pretty basic navigation</a> and make something nice with it. The content inspired me some kind of advertising adgency with a bold navigation and a little content. Made me work on my hover and active state more than what I'm used to in those weekly challenges.</p>
        </div>
      </section>
    </main>
  </div>
</div>
[/html]

[html]
<style>
/* CodePen demo */
body {
  background: #2a2a2b;
  color: #fff;
  text-align: center;
  font-family: Arial, Helvetica;
}

.big {
  font-size: 1.2em;
}

.small {
  font-size: .7em;
}

.square {
  width: .7em;
  height: .7em;
  margin: .5em;
  display: inline-block;
}

/* Custom dropdown */
.custom-dropdown {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 10px; /* demo only */
}

.custom-dropdown select {
  background-color: #1abc9c;
  color: #fff;
  font-size: inherit;
  padding: .5em;
  padding-right: 2.5em;
  border: 0;
  margin: 0;
  border-radius: 3px;
  text-indent: 0.01px;
  text-overflow: '';
  -webkit-appearance: button; /* hide default arrow in chrome OSX */
}

.custom-dropdown::before,
.custom-dropdown::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.custom-dropdown::after { /*  Custom dropdown arrow */
  content: "\25BC";
  height: 1em;
  font-size: .625em;
  line-height: 1;
  right: 1.2em;
  top: 50%;
  margin-top: -.5em;
}

.custom-dropdown::before { /*  Custom dropdown arrow cover */
  width: 2em;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 0 3px 3px 0;
}

.custom-dropdown select[disabled] {
  color: rgba(0,0,0,.3);
}

.custom-dropdown select[disabled]::after {
  color: rgba(0,0,0,.1);
}

.custom-dropdown::before {
  background-color: rgba(0,0,0,.15);
}

.custom-dropdown::after {
  color: rgba(0,0,0,.4);
}
</style>

<script>
/* JS for demo only */
var colors = ['1abc9c', '2c3e50', '2980b9', '7f8c8d', 'f1c40f', 'd35400', '27ae60'];

colors.each(function (color) {
  $$('.color-picker')[0].insert(
    '<div class="square" style="background: #' + color + '"></div>'
  );
});

$$('.color-picker')[0].on('click', '.square', function(event, square) {
  background = square.getStyle('background');
  $$('.custom-dropdown select').each(function (dropdown) {
    dropdown.setStyle({'background' : background});
  });
});

/*
* Original version at
* http://red-team-design.com/making-html- … s-not-suck
*/
</script>

<h2>Making HTML dropdowns not suck</h2>

<span class="color-picker"></span>

<br/><br/>

<span class="custom-dropdown big">
    <select>   
        <option>Sherlock Holmes</option>
        <option>The Great Gatsby</option> 
        <option>V for Vendetta</option>
        <option>The Wolf of Wallstreet</option>
        <option>Quantum of Solace</option>
    </select>
</span>

<span class="custom-dropdown">
    <select>
        <option>Sherlock Holmes</option>
        <option>The Great Gatsby</option> 
        <option>V for Vendetta</option>
        <option>The Wolf of Wallstreet</option>
        <option>Quantum of Solace</option>
    </select>
</span>

<span class="custom-dropdown small">
    <select>
        <option>Sherlock Holmes</option>
        <option>The Great Gatsby</option> 
        <option>V for Vendetta</option>
        <option>The Wolf of Wallstreet</option>
        <option>Quantum of Solace</option>
    </select>
</span>

<br/>

<span class="custom-dropdown big">
    <select disabled>
        <option>Sherlock Holmes</option>
        <option>The Great Gatsby</option> 
        <option>V for Vendetta</option>
        <option>The Wolf of Wallstreet</option>
        <option>Quantum of Solace</option>
    </select>
</span>

<span class="custom-dropdown">
    <select disabled>
        <option>Sherlock Holmes</option>
        <option>The Great Gatsby</option> 
        <option>V for Vendetta</option>
        <option>The Wolf of Wallstreet</option>
        <option>Quantum of Solace</option>
    </select>
</span>

<span class="custom-dropdown small">
    <select disabled>
        <option>Sherlock Holmes</option>
        <option>The Great Gatsby</option> 
        <option>V for Vendetta</option>
        <option>The Wolf of Wallstreet</option>
        <option>Quantum of Solace</option>
    </select>
</span>

[/html]

[html]
<style>
html {
  font-size: 75%;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
body {
  font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  margin: 110px auto 0 auto;
  width: 100%;
  max-width: 260px;
  text-align: center;
}

a {
  text-decoration: none;
}

.dropdown {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 132px;
}

.dropdown-text {
  cursor: pointer;
  position: absolute;
  text-indent: 10px;
  line-height: 32px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
  width: 100%;
}

.dropdown-text:after {
  position: absolute;
  right: 6px;
  top: 15px;
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: #555 transparent transparent transparent;
}

.dropdown-text,
.dropdown-content a {
  color: #333;
  text-shadow: 0 1px #fff;
}

.dropdown-toggle {
  font-size: 0;
  z-index: 1;
  cursor: pointer;
  position: absolute;
  top: 0;
  border: none;
  padding: 0;
  margin: 0 0 0 1px;
  background: transparent;
  text-indent: -10px;
  height: 34px;
  width: 100%;
}

.dropdown-toggle:focus {
  outline: 0;
}

.dropdown-content {
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
  list-style-type: none;
  position: absolute;
  top: 32px;
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility:hidden;
  border-radius: 3px;
  text-indent: 10px;
  line-height: 32px;
  background-color: #eee;
  border: 1px solid #ccc;
  width: 140px;
}

.dropdown-content a {
  display: block;
}

.dropdown-content a:hover {
  background: #e8e8e8;
}

.dropdown-toggle:hover ~ .dropdown-text,
.dropdown-toggle:focus ~ .dropdown-text {
  background-color: #e8e8e8;
}

.dropdown-toggle:focus ~ .dropdown-text {
  box-shadow: 0 1px 3px rgba(0,0,0, .2) inset, 0 1px 0 rgba(255,255,255, 0.8);
  z-index: 2;
}

.dropdown-toggle:focus ~ .dropdown-text:after {
  border-width: 0 4px 5px 4px;
  border-color: transparent transparent #555 transparent;
}

.dropdown-content:hover,
.dropdown-toggle:focus ~ .dropdown-content {
  opacity: 1;
  visibility:visible;
  top: 42px;
}
</style>
<p><i>To show/hide menu, I'm using :focus instead of checkbox so when you click somewhere else then menu will be hidden :).</i></p>

<div class="dropdown">
  <input class="dropdown-toggle" type="text">
  <div class="dropdown-text">Account</div>
  <ul class="dropdown-content">
    <li><a href="#">Settings</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Log out</a></li>
  </ul>
</div>
<br><br><br><br>
<p><i>To show/hide menu, I'm using :focus instead of checkbox so when you click somewhere else then menu will be hidden :).</i></p>
<p><i>To show/hide menu, I'm using :focus instead of checkbox so when you click somewhere else then menu will be hidden :).</i></p>
<p><i>To show/hide menu, I'm using :focus instead of checkbox so when you click somewhere else then menu will be hidden :).</i></p>
<p><i>To show/hide menu, I'm using :focus instead of checkbox so when you click somewhere else then menu will be hidden :).</i></p>
[/html]

[html]<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@100;300;400;500;600;700;800;900&display=swap");

.animate {
transition: all 0.3s ease-in-out;
}

body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
font-family: "Nunito";
background: #e6e6e6;
min-height: 100vh;
}

header,
main {
margin: 4rem;
color: #373239;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
background-color: #fff;
border-radius: 10px;
}

main {
position: relative;
flex-grow: 1;
margin-top: 0;
}

header {
height: 100px;
padding: 2rem;
}

.box {
background: darkOrchid;
cursor: pointer;
box-sizing: border-box;
transform-origin: 0 0;
z-index: 999;
}

header .box {
position: relative;
width: 100px;
height: 100px;
}

main .box {
position: absolute;
top: 20%;
left: 20%;
width: 60%;
height: 60%;
}

.animate {
transition: all 1s ease-in-out;
}

.purple {
border-color: darkOrchid;
}

.blue {
border-color: #32b2cc;
}

.pink {
border-color: #d133aa;
}

</style>

<script>

class Flip {
first(el) {
  this.state = el.getBoundingClientRect();
}

invert(el) {
  const first = this.state;
  const last = el.getBoundingClientRect();

  let delta = {
   x: -1 * (last.left - first.left),
   y: -1 * (last.top - first.top),
   scaleX: first.width / last.width,
   scaleY: first.height / last.height
  };

  console.log(delta);

  el.style.transform = `translate(${delta.x}px, ${delta.y}px) scale(${delta.scaleX}, ${delta.scaleY})`;
}

play(el) {
  requestAnimationFrame(function () {
   el.classList.add("animate");
   el.style.transform = "none";
  });
}
}

const flip = new Flip();

const box = document.querySelector(".box");
const main = document.querySelector("main");
const header = document.querySelector("header");

let inHeader = true;

box.addEventListener("click", (e) => {
flip.first(e.target);

inHeader ? main.appendChild(box) : header.appendChild(box);

flip.invert(e.target);
flip.play(e.target);

inHeader = !inHeader;
});

box.addEventListener("transitionend", (e) => {
console.log("end");
e.target.classList.remove("animate");
});

</script>

<header>
<div class="box"></div>
</header>

<main>

</main>

[/html]

[html]<style>
picture {
  position: relative;
  cursor: pointer;
  display: inline-grid;
  overflow: hidden;
}
picture::after {
  content: "";
  position: absolute;
  inset: -1px; /* -1px instead of 0 to avoid tiny gaps on the edges */
  --_g: conic-gradient(at 50% 25%,rgb(0 0 0/68%) 75%,#0000 0) no-repeat;
  background:
    var(--_g) 0    calc(34%  - var(--_p,0%))/50.1% 400%,
    var(--_g) 100% calc(100% - var(--_p,0%))/50.1% 400%;
  transition: .5s linear;
}
picture.alt::after {
  transform: scale(-1)
}
picture:hover::after {
  --_p: 134%;
}

</style>
<picture>
  <img src="https://picsum.photos/id/104/250/250" alt="a dream catcher">
</picture>

<picture class="alt">
  <img src="https://picsum.photos/id/157/250/250" alt="a skate board">
</picture>

[/html]

[html]<script>
"use strict"; // Paul Slaymaker, paul25882@gmail.com
const body=document.getElementsByTagName("body").item(0);
body.style.background="#000";

const TP=2*Math.PI;
const CSIZE=400;

const ctx=(()=>{
  let d=document.createElement("div");
  d.style.textAlign="center";
  body.append(d);
  let c=document.createElement("canvas");
  c.width=2*CSIZE;
  c.height=2*CSIZE;
  d.append(c);
  return c.getContext("2d");
})();
ctx.translate(CSIZE,CSIZE);
ctx.lineCap="round";

onresize=()=>{
  let D=Math.min(window.innerWidth,window.innerHeight)-40;
  ctx.canvas.style.width=D+"px";
  ctx.canvas.style.height=D+"px";
}

const getRandomInt=(min,max,low)=>{
  if (low) return Math.floor(Math.random()*Math.random()*(max-min))+min;
  else return Math.floor(Math.random()*(max-min))+min;
}

var Circle=function(x,y,xp,yp,radius,pc) {
  this.x=x;
  this.y=y;
  this.xp=xp;
  this.yp=yp;
  this.radius=radius;
  this.pc=pc;
  this.c=[];
  this.drawCircle=(rf)=>{
    ctx.beginPath();
      ctx.moveTo(this.x+this.radius*rf,this.y);
      ctx.arc(this.x,this.y,this.radius*rf,0,TP);
ctx.fillStyle="hsl("+(hue+5*this.radius)+",90%,50%)";
    ctx.fill();
  }
}

var Curve=function() {
  this.car=[];
  this.to=-getRandomInt(0,400);
  this.addCurveCircle=(cir)=>{
    if (cir.pc) {
      this.car.unshift(cir.pc);
      this.addCurveCircle(cir.pc);
    } else {
      return;
    }
  }
  this.setPath=()=>{
    this.len=0;
    this.path=new Path2D();
    this.path.moveTo(0,0);
    this.path.lineTo(this.car[1].xp,this.car[1].yp);
    this.len+=this.car[0].radius;
    for (let i=1; i<this.car.length-1; i++) {
      this.path.bezierCurveTo(this.car[i].x,this.car[i].y,
                              this.car[i].x,this.car[i].y,
                              this.car[i+1].xp,this.car[i+1].yp);
      this.len+=2*this.car[i].radius;
    }
    this.path.lineTo(this.car[this.car.length-1].x,this.car[this.car.length-1].y);
    this.len+=this.car[this.car.length-1].radius;
  }
  this.drawCurve=()=>{
    let tt=this.to+t;
    ctx.setLineDash([Math.max(1,tt),4000]);
    ctx.stroke(this.path);
    if (tt>this.len+40) {
      this.car[this.car.length-1].drawCircle(0.8);
      if (tt>this.len+120) return false;
      else return true;
    } else if (tt>this.len) {
      let raf=0.8*(tt-this.len)/40;
      this.car[this.car.length-1].drawCircle(raf);
      return true;
    } else {
      return true;
    }
  }
}

var drawPoint=(x,y,col)=>{ // diag
  ctx.beginPath();
  ctx.arc(x,y,5,0,TP);
  ctx.closePath();
  if (col) ctx.fillStyle=col;
  else ctx.fillStyle="red";
  ctx.fill();
}

var cval=(x,y,rad)=>{
  if (Math.pow(x*x+y*y,0.5)>CSIZE-rad) return false;
  for (let i=0; i<ca.length; i++) {
    let rt=rad+ca[i].radius;
    let xd=ca[i].x-x;
    let yd=ca[i].y-y;
    if (Math.abs(xd)>rt) continue;
    if (Math.abs(yd)>rt) continue;
    if (Math.pow(xd*xd+yd*yd,0.5)+1<rt) {
      return false;
    }
  }
  return true;
}

var eg=Math.random()<0.3;

var grow=(rad)=>{
  let c=eg
        ?ca[ca.length-1-getRandomInt(0,ca.length,true)]
        :ca[getRandomInt(0,ca.length)];
  let a=TP*Math.random();
  let x=c.x+(c.radius+rad)*Math.cos(a);
  let y=c.y+(c.radius+rad)*Math.sin(a);
  if (cval(x,y,rad)) {
    let xp=c.x+c.radius*Math.cos(a);
    let yp=c.y+c.radius*Math.sin(a);
    let circle=new Circle(x,y,xp,yp,rad,c);
    c.c.push(circle);
    ca.push(circle);
    return true;
  }
  return false;
}

ctx.fillStyle="green";
ctx.lineWidth=5;

var draw=()=>{
  ctx.clearRect(-CSIZE,-CSIZE,2*CSIZE,2*CSIZE);
  let grown=0;
  for (let i=0; i<curves.length; i++) {
    if (curves[i].drawCurve()) grown++;
  }
  drawPoint(0,0,"silver");
  return grown;
}

var stopped=true;
var start=()=>{
  if (stopped) {
    stopped=false;
    requestAnimationFrame(animate);
  } else stopped=true;
}
body.addEventListener("click", start, false);

var t=0;
var inc=3;
var animate=()=>{
  if (stopped) return;
  t+=inc;
  if (!draw() || t<0) {
    if (inc==3) inc=-8;
    else {
      ctx.strokeStyle="hsla("+getRandomInt(0,360)+",90%,60%,0.6)";
      inc=3;
      t=0;
      eg=Math.random()<0.3;
      setCircles();
    }
  }
  requestAnimationFrame(animate);
}

var hue=getRandomInt(0,360);
var ca=[new Circle(0,0,0,0,50,0,0)];

var curves=[];

var setCircles=()=>{
  ca=[new Circle(0,0,0,0,50,0,0)];
  for (let i=0; i<2000; i++) {
    let r=10;
    if (i<20) r=42;
    else if (i<100) r=34;
    else if (i<300) r=26;
    else if (i<1000) r=18;
    grow(r);
  }
  curves=[];
  for (let i=0; i<ca.length; i++) {
    if (ca[i].c.length==0) {
      var nc=new Curve();
      nc.car=[ca[i]];
      nc.addCurveCircle(ca[i]);
      nc.setPath();
      curves.push(nc)
    }
  }
}

onresize();

setCircles();
ctx.strokeStyle="hsla("+getRandomInt(0,360)+",90%,60%,0.6)";

start();
</script>

[/html]