Код:
<div id="badau01">
<div class="badau02" style="background-image: url(http://placehold.it/400x80)">
<input type="checkbox" id="toggle-1"><label for="toggle-1" class="bbjam02"></label><div class="bbjam01">
<h1>
firstname
</h1><h2>
lastname
</h2><div class="bbjam03">
<img src="http://placehold.it/100">
<div class="bbboo01"><b>active</b>
<a href="/">thread name</a>
<a href="/">another</a>
<a href="/">how about a ridiculously long ass name</a>
<a href="/">shorty short</a>
<b>dead</b>
<a href="/">keep on keeping on</a>
<a href="/">fucking names</a>
<a href="/">shorty short</a>
</div></div></div></div>
<div class="badau02" style="background-image: url(http://placehold.it/400x80);">
<input type="checkbox" id="toggle-2"><label for="toggle-2" class="bbjam02"></label><div class="bbjam01"><h1>
firstname
</h1><h2>
lastname
</h2><div class="bbjam03"><img src="http://i.imgur.com/x71FbsE.gif"><div class="bbboo01"><b>active</b>
<a href="/">thread name</a>
<a href="/">another</a>
<b>dead</b>
<a href="/">keep on keeping on</a>
<a href="/">fucking names</a>
<a href="/">shorty short</a>
</div></div></div></div><div class="nahcred33"><a href="http://candylandcouture.b1.jcink.com/index.php?showuser=3189">▼</a></div></div>
<link href="https://fonts.googleapis.com/css?family=Amiko:600|Arvo" rel="stylesheet">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<style>
#badau01 { position: relative; width: 400px; padding: 2px 6px; background: #fefefe; border: 1px solid #D8D8D8; margin: 10px auto; }.badau02 { margin: 4px 0; overflow: hidden; position: relative; width: 400px; height: 80px; background-image: url(http://placehold.it/400x80); background-color: #C4D5ED; background-blend-mode: multiply; }.badau02 i { color: red; font-size: 30px; }.bbjam01 { transition: 1s; width: 400px; height: 80px; position: absolute; top: 0; right: -240px; background: #C4D5ED; }.bbjam01 h1 { z-index: 2; color: #576F7C; padding-bottom: 0; margin: 14px 0 0 20px; display: block; width: 120px; height: 25px; text-align: center; font: 19px/1.5 arvo; text-transform: uppercase; }.bbjam01:after { width: 20px; height: 2px; display: block; background: white; content: ""; position: absolute; top: 42px; left: 70px; }.bbjam01 h2 { color: #576F7C; margin: 0 0 0 20px; display: block; width: 120px; height: 12px; font: 600 8px/100% amiko; padding-top: 12px; text-transform: uppercase; letter-spacing: 1px; text-align: center; }.bbjam02 { border: 2px solid #C4D5ED; z-index: 3; transition: 1s; width: 36px; height: 40px; background: #C4D5ED; position: absolute; top: 19px; right: 138px; border-radius: 50%; cursor: crosshair; text-align: center; font: 30px/1.5 awesome; color: white; padding-right: 4px; }.bbjam03 { width: 200px; height: 80px; background: white; position: absolute; top: 0; right: -60px; transition: 1s; }.bbjam03:before, .bbjam03::before { width: 0; height: 0; border-right: 60px solid white; border-top: 80px solid transparent; content: ""; display: block; position: absolute; top: 0; left: -60px; }.bbjam03 img { width: 50px; border-radius: 50%; position: absolute; top: 10px; left: -50px; border: 3px solid white; }.bbboo01 { width: 170px; height: 50px; position: absolute; top: 10px; right: 10px; background: white; overflow: auto; border: 5px solid white; text-align: center; }.bbboo01 b { display: block; width: 80px; padding: 0 0 2px 6px; color: #576F7C; font: 400 10px/100% arvo !important; text-transform: uppercase !important; letter-spacing: 1px; margin: 4px; border-bottom: 1px solid #576F7C; text-align: left; }.bbboo01 b:first-letter { border-bottom: 2px solid #576F7C; padding: 2px 0; }.bbboo01 a { display: inline-block; background: #C4D5ED; font: 600 8px/1 amiko; min-height: 8px; text-transform: uppercase; padding: 4px; margin: 1px 0; color: white; text-decoration: none; }#badau01 input[type=checkbox] { display: none; }#badau01 input[type=checkbox]:checked ~ .bbjam01 { right: 0; transition: 1s; }#badau01 input[type=checkbox]:checked ~ .bbjam02 { transform: rotate(450deg) scale(.5); right: -10px; top: -10px; transition: 1s; background: white; color: #C4D5ED; border-color: white; }#badau01 input[type=checkbox]:checked ~ .bbjam01 .bbjam03 { right: 0; transition: 1.2s; }.nahcred33 { width: 400px; text-align: right; font: 10px/100% calibri; position: absolute; bottom: 5px; left: 5px; }.nahcred33 a { color: #576F7C; text-decoration: none; }@font-face { src: url('http://symmetry.b1.jcink.com/uploads/symmetry/fontawesome_webfont.ttf'); font-family: awesome; }.bbboo01::-webkit-scrollbar { width: 3px; }.bbboo01::-webkit-scrollbar-track { background: white; }.bbboo01::-webkit-scrollbar-thumb { background: #C4D5ED; }</style>
