[html]
<style>
.loveboat {
width: 400px;
min-height: 600px;
background-image: url(https://images3.imgbox.com/cb/a8/8Gd6H6Es_o.png);
background-repeat: repeat;
border: #d9d9d9 solid 1px;
margin: auto;
}
.lovehead {
box-sizing: border-box;
background-color: #e3408f;
clear: both;
width: 400px;
min-height: 65px;
border-bottom: #d9d9d9 solid 1px;
line-height: 15px;
}
.lovehead h1 {
color: #fff;
float: left;
font-family: 'Roboto', sans-serif;
font-style: italic;
font-size: 25px;
margin: 15px 0px 0px 15px;
width: 300px;
}
.lovehead h2 {
color: #fff;
float: left;
font-family: 'Roboto', sans-serif;
font-style: italic;
font-size: 25px;
margin: 6px 0px 0px 96px;
padding: 0;
}
.lovehead img {
float: right;
margin: -15px 15px 0px 0px;
}
.lovecharacter {
background-color: #fff;
border: #d9d9d9 solid 1px;
width: 326px;
min-height: 100px;
margin: 35px;
}
.lovecharacter img {
float: left;
border-right: #d9d9d9 solid 1px;
}
.lovecharacter h1 {
float: left;
color: #e3408f;
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-style: italic;
margin: 37px 0px 0px 10px;
}
.lovecharacter h2 {
float: left;
color: #626262;
font-size: 12px;
font-family: 'Roboto Condensed', sans-serif;
margin: 1px 0px 0px 35px;
}
.typesoflove {
width: 400px;
border-top: #d9d9d9 solid 1px;
border-bottom: #d9d9d9 solid 1px;
min-height: 40px;
}
.typesoflove h1 {
float: left;
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-style: italic;
line-height: 40px;
width: 100px;
margin: 0px;
color: #fff;
text-align: center;
background-color: #ff9191;
cursor: pointer;
transition: all ease-in-out 0.3s;
}
.typesoflove h1:hover {background-color: #ee6363;}
.typesoflove h2 {
float: left;
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-style: italic;
line-height: 40px;
width: 100px;
margin: 0px;
color: #fff;
text-align: center;
background-color: #ffe2c4;
cursor: pointer;
transition: all ease-in-out 0.3s;
}
.typesoflove h2:hover {background-color: #fcc58b;}
.typesoflove h3 {
float: left;
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-style: italic;
line-height: 40px;
width: 100px;
margin: 0px;
color: #fff;
text-align: center;
background-color: #c4ffeb;
cursor: pointer;
transition: all ease-in-out 0.3s;
}
.typesoflove h3:hover {background-color: #85edca;}
.typesoflove h4 {
float: left;
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-style: italic;
line-height: 40px;
width: 100px;
margin: 0px;
color: #fff;
text-align: center;
background-color: #5cf4ff;
cursor: pointer;
transition: all ease-in-out 0.3s;
}
.typesoflove h4:hover {background-color: #2ce7f4;}
.lovepeople {
width: 400px;
overflow: scroll;
height: 277px;
}
.lovescroll::-webkit-scrollbar {
width: 5px;
background: #333333;
height: 0px;
}
.lovescroll::-webkit-scrollbar-thumb {
background-color: #e3408f;
width: 5px;
padding: 0px;
border: none;
}
.lovescroll::-webkit-scrollbar-corner {width: 5px; background: #333333; }
.lovescroll::-webkit-scrollbar-track {background-color: #333333;}
.lovefriends {
background-color: #fff;
border: #d9d9d9 solid 1px;
width: 326px;
min-height: 100px;
margin: 25px 0px 25px 35px;
}
.lovefriends img {
float: left;
border-right: #d9d9d9 solid 1px;
}
.lovefriends h1 {
float: left;
color: #ff9191;
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-style: italic;
margin: 25px 0px 3px 15px;
}
.lovefriends p {
float: left;
color: #626262;
font-size: 11px;
line-height: 13px;
font-family: 'Roboto Condensed', sans-serif;
margin: 0px 0px 0px 15px;
width: 190px;
text-align: justify;
}
.loveenemies {
background-color: #fff;
border: #d9d9d9 solid 1px;
width: 326px;
min-height: 100px;
margin: 25px 35px 25px 35px;
}
.loveenemies img {
float: left;
border-right: #d9d9d9 solid 1px;
}
.loveenemies h1 {
float: left;
color: #ffe2c4;
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-style: italic;
margin: 25px 0px 3px 15px;
}
.loveenemies p {
float: left;
color: #626262;
font-size: 11px;
line-height: 13px;
font-family: 'Roboto Condensed', sans-serif;
margin: 0px 0px 0px 15px;
width: 190px;
text-align: justify;
}
.lovelovers {
background-color: #fff;
border: #d9d9d9 solid 1px;
width: 326px;
min-height: 100px;
margin: 25px 35px 25px 35px;
}
.lovelovers img {
float: left;
border-right: #d9d9d9 solid 1px;
}
.lovelovers h1 {
float: left;
color: #c4ffeb;
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-style: italic;
margin: 25px 0px 3px 15px;
}
.lovelovers p {
float: left;
color: #626262;
font-size: 11px;
line-height: 13px;
font-family: 'Roboto Condensed', sans-serif;
margin: 0px 0px 0px 15px;
width: 190px;
text-align: justify;
}
.loveothers {
background-color: #fff;
border: #d9d9d9 solid 1px;
width: 326px;
min-height: 100px;
margin: 25px 35px 25px 35px;
}
.loveothers img {
float: left;
border-right: #d9d9d9 solid 1px;
}
.loveothers h1 {
float: left;
color: #5cf4ff;
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-style: italic;
margin: 25px 0px 3px 15px;
}
.loveothers p {
float: left;
color: #626262;
font-size: 11px;
line-height: 13px;
font-family: 'Roboto Condensed', sans-serif;
margin: 0px 0px 0px 15px;
width: 190px;
text-align: justify;
}
.lovebottom {
background-color: #e3408f;
width: 400px;
min-height: 45px;
border-top: #d9d9d9 solid 1px;
}
.lovebottom a {
color: #fff;
font-size: 12px;
font-family: 'Roboto Condensed', sans-serif;
line-height: 45px;
margin: 0px 0px 0px 180px;
text-decoration: none;
transition: all ease-in-out 0.3s;
}
.lovebottom a:visited {color: #fff;}
.lovebottom a:hover {color: #626262;}
.lovehead img {
height: 33px;
width: 33px;
}
.lovecharacter img {
height: 100px;
width: 100px;
}
.lovefriends img {
height: 100px;
width: 100px;
}
.loveenemies img {
height: 100px;
width: 100px;
}
.lovelovers img {
height: 100px;
width: 100px;
}
.loveothers img {
height: 100px;
width: 100px;
}
</style>
<script>
$(document).ready(function(e) {
$('.lovepeople').children('.loveenemies').hide();
$('.lovepeople').children('.lovelovers').hide();
$('.lovepeople').children('.loveothers').hide();
$('.typesoflove').children('h1').on('click', function() {
$('.lovepeople').children().hide(0);
$('.lovefriends').slideDown(500);
});
$('.typesoflove').children('h2').on('click', function() {
$('.lovepeople').children().hide(0);
$('.loveenemies').slideDown(500);
});
$('.typesoflove').children('h3').on('click', function() {
$('.lovepeople').children().hide(0);
$('.lovelovers').slideDown(500);
});
$('.typesoflove').children('h4').on('click', function() {
$('.lovepeople').children().hide(0);
$('.loveothers').slideDown(500);
});
});
</script>
<!-- Code désigné par Perse. Merci de créditer l'auteur ! Lien source : http://outofcontrolx.b1.jcink.com/index … topic=1112 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto:900i" rel="stylesheet">
<div class="loveboat">
<div class="lovehead">
<h1>relationship</h1>
<h2>tracker.</h2>
<img src="https://i.imgbox.com/hveG3CDz.png"/>
</div>
<div class="lovecharacter">
<img src="https://i.imgbox.com/JSpiAogm.png"/>
<h1>character name.</h1>
<h2>AGE // GENDER // SEX ORI. // CAREER</h2>
</div>
<div class="typesoflove">
<h1>friends.</h1>
<h2>enemies.</h2>
<h3>lovers.</h3>
<h4>other.</h4>
</div>
<div class="lovescroll">
<div class="lovepeople">
<div class="lovefriends">
<img src="https://i.imgbox.com/JSpiAogm.png"/>
<h1>friends name.</h1>
<p>BRIEF DESCRIPTION OF RELATIONSHIP.<br>
MAX OF THREE LINES PLEASE.</p>
</div>
<div class="lovefriends">
<img src="https://i.imgbox.com/JSpiAogm.png"/>
<h1>friends name.</h1>
<p>BRIEF DESCRIPTION OF RELATIONSHIP.<br>
MAX OF THREE LINES PLEASE.</p>
</div>
<div class="lovefriends">
<img src="https://i.imgbox.com/JSpiAogm.png"/>
<h1>friends name.</h1>
<p>BRIEF DESCRIPTION OF RELATIONSHIP.<br>
MAX OF THREE LINES PLEASE.</p>
</div>
<div class="loveenemies">
<img src="https://i.imgbox.com/JSpiAogm.png"/>
<h1>enemies name.</h1>
<p>BRIEF DESCRIPTION OF RELATIONSHIP.<br>
MAX OF THREE LINES PLEASE.</p>
</div>
<div class="loveenemies">
<img src="https://i.imgbox.com/JSpiAogm.png"/>
<h1>enemies name.</h1>
<p>BRIEF DESCRIPTION OF RELATIONSHIP.<br>
MAX OF THREE LINES PLEASE.</p>
</div>
<div class="loveenemies">
<img src="https://i.imgbox.com/JSpiAogm.png"/>
<h1>enemies name.</h1>
<p>BRIEF DESCRIPTION OF RELATIONSHIP.<br>
MAX OF THREE LINES PLEASE.</p>
</div>
<div class="lovelovers">
<img src="https://i.imgbox.com/JSpiAogm.png"/>
<h1>enemies name.</h1>
<p>BRIEF DESCRIPTION OF RELATIONSHIP.<br>
MAX OF THREE LINES PLEASE.</p>
</div>
<div class="lovelovers">
<img src="https://i.imgbox.com/JSpiAogm.png"/>
<h1>enemies name.</h1>
<p>BRIEF DESCRIPTION OF RELATIONSHIP.<br>
MAX OF THREE LINES PLEASE.</p>
</div>
<div class="lovelovers">
<img src="https://i.imgbox.com/JSpiAogm.png"/>
<h1>enemies name.</h1>
<p>BRIEF DESCRIPTION OF RELATIONSHIP.<br>
MAX OF THREE LINES PLEASE.</p>
</div>
<div class="loveothers">
<img src="https://i.imgbox.com/JSpiAogm.png"/>
<h1>enemies name.</h1>
<p>BRIEF DESCRIPTION OF RELATIONSHIP.<br>
MAX OF THREE LINES PLEASE.</p>
</div>
<div class="loveothers">
<img src="https://i.imgbox.com/JSpiAogm.png"/>
<h1>enemies name.</h1>
<p>BRIEF DESCRIPTION OF RELATIONSHIP.<br>
MAX OF THREE LINES PLEASE.</p>
</div>
<div class="loveothers">
<img src="https://i.imgbox.com/JSpiAogm.png"/>
<h1>enemies name.</h1>
<p>BRIEF DESCRIPTION OF RELATIONSHIP.<br>
MAX OF THREE LINES PLEASE.</p>
</div>
</div>
</div>
<div class="lovebottom"><a href="http://outofcontrolx.b1.jcink.com/index.php?showuser=127">perse ♥</a></div>
</div>
[/html]
