Vorlage für das Tagebuch

Code:
<link href='https://fonts.googleapis.com/css?family=Graduate' rel='stylesheet' type='text/css'><style type="text/css"> /*



--- LIKE WE ARE RENEGADES by rubyRED.DIAMOND @ Storming Gates 



---- HINTERGRUND-BOX */ #r-steckbrief {width: 480px; height: 500px; background: #dedede; border: 10px solid #131b27; overflow: hidden; text-align: justify; background-image: url('https://wonderland.stecktvollergeheimnisse.de/images/boards/end/1ibnfiY.png');} /*



---- HOVER */ #r-steckbrief #whitebox {width: 780px; height: 500px; position: relative; right: 330px; transition: 0.9s; float: left; transition-delay: 0.8s;} #r-steckbrief:hover #whitebox {right: 0px; transition: 0.9s;} /*



---- BILD */ #r-bild {width: 100px; height: 480px; float: left; background-image: url('https://wonderland.stecktvollergeheimnisse.de/images/boards/end/end.png');} /* 



---- RECHTE SEITE (SICHTBAR) */ .r-boxrechts {width: 430px; height: 480px; margin-left: 20px; float: right;} /*



---- TITEL & UNTERTITEL */ .r-titel {width: 330px; padding: 5px 15px; font-family: Graduate; font-size: 33px; line-height: 33px; color: #2a4163; font-weight: bold; text-transform: uppercase; text-align: center; float: right; margin-top: 140px; box-sizing: border-box;} .r-subtitel {width: 330px; font-family: Graduate; font-size: 12px; line-height: 12px; color: #41222b; text-transform: uppercase; text-align: center; float: right; box-sizing: border-box;} /*



---- STRICHE */ .r-titel:before, .r-subtitel:after {content:""; display: block; width: 200px; height: 1px; background: #41222b; margin: 20px auto;}  /*



---- LINKE SEITE (STECKI) */ .r-boxlinks {width: 330px; height: 480px; overflow: auto; background: #f6f6f6; padding: 20px 10px; float: left; box-sizing: border-box;} /*



---- SCROLLLEISTE */ .r-boxlinks.scroll::-webkit-scrollbar {width:6px;} .r-boxlinks.scroll::-webkit-scrollbar-track-piece {background-color:#dcdcdc;} .r-boxlinks.scroll::-webkit-scrollbar-thumb:vertical {height:10px; background-color:#122758;} /*



---- STECKBRIEF-KATEGORIE */ .r-kat {font-family: Graduate; font-size: 25px; color: #2a4163; font-weight: bold; text-transform: uppercase; border-bottom: 1px double #6f4f58; text-align: center; padding-bottom: 4px;} /*



---- KATEGORIE-BESCHREIBUNG */ .r-desc {width: 200px; background: #2a4163; font-family: calibri; font-size: 9px; color: #e8e8e8; text-transform: uppercase; letter-spacing: 2px; text-align: center; padding: 2px 5px; margin: -8px auto 0px auto;} /*



---- TEXTBOX */ .r-textbox {background: #dedede; font-family: calibri; font-size: 12px; line-height: 13px; color: #161616; text-align: justify; padding: 10px;} /*



---- TEXTBOX BOLD */ .r-textbox b {color: #000000; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; text-shadow: 1px 1px #e8e8e8;} /*



---- STECKBRIEF-PUNKT (LINKS & RECHTS) */ .r-fact-l {background: #2a4163; font-family: Graduate; font-size: 12px; color: #e8e8e8; text-transform: uppercase; text-align: center; padding: 2px 8px; display: inline-block; margin: 3px 10px 3px 0px; float: left;} .r-fact-r {background: #2a4163; font-family: Graduate; font-size: 12px; color: #e8e8e8; text-transform: uppercase; text-align: center; padding: 2px 5px; display: inline-block; margin: 3px 0px 3px 10px; float: right;} /*



---- SHORTFACTS */ .r-shortfacts {background: #2a4163; font-family: arial; font-size: 9px; line-height: 12px; color: #161616; font-weight: bold; text-transform: uppercase; word-spacing: 2px; text-align: center; padding: 5px;} /*



--- CREDITS */ .creditrrd {font-family: calibri; font-size: 9px; color: #000000; font-weight: bold; display: inline;} #rrd {display: inline-block; border-style: solid; border-color: transparent transparent #4d0000 transparent; border-width: 0 3px 3px 3px; height: 0; width: 6px; position: relative; margin: 2px 0 6px 0;} #rrd:after {content: ""; position: absolute; position: absolute; top: 3px; left: -3px; width: 0; height: 0; border-style: solid; border-color: #4d0000 transparent transparent transparent; border-width: 9px 6px 0 6px;}</style>



<center>

<div id="r-steckbrief"><div id="whitebox">

<div class="r-boxrechts">

<div id="r-bild"></div>

<div class="r-titel">Mein Tagebuch</div>

<div class="r-subtitel">All das was mir bisher passiert ist...</div>

</div>



<div class="r-boxlinks scroll">

<div class="r-kat">Die Erinnerungen</div>

<div class="r-desc">an unsere gemeinsamen Abenteuer</div>



<div class="r-textbox"><div class="r-fact-l">Datum | Playpartner | Ort</div>

Was hast du erlebt?



<div class="r-fact-r">Datum | Playpartner | Ort</div>

Was hast du erlebt?



</div>



<div class="r-shortfacts"><div class="creditrrd">THX <a href="https://storming-gates.de/member.php?action=profile&uid=71" target="_blank"><div id="rrd"></div></a></div></div>



</div>

</div></div>

</center>