<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto' rel='stylesheet' type='text/css'>
<center>
<style>
#retrospectm {height: 120px; width: 360px; background-image: url(//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1477470933_20.jpg); overflow: hidden; position: relative}
.retrospectp1 {width: 360px; height: 120px; position: absolute}
.retrospectp2 {width: 360px; height: 120px; position: absolute}
.retrospectn {font-family: 'Montserrat'; color: #0094cf; font-size: 32px; text-transform: uppercase; position: absolute; top: 55px; font-weight: 700; letter-spacing: -2.5px; text-align: center; width: 360px}
.retrospecti {font-family: 'roboto'; color: #fff; font-size: 10px; width: 290px; background-color: #00babd; position: absolute; top: 80px; text-transform: uppercase; font-style: italic; text-align: center; height: 18px; line-height: 18px; left: 35px}
#retrospectm .retrospectp1 {top: 0px; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; transition: 0.5s linear;}
#retrospectm:hover .retrospectp1 {top: 120px; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; transition: 0.5s linear;}
#retrospectm .retrospectp2 {top: -120px; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; transition: 0.5s linear;}
#retrospectm:hover .retrospectp2 {top: 0px; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; transition: 0.5s linear;}
.retrospectpic {height: 80px; width: 80px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; border: 10px solid #fff; position: absolute; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); top: 10px; left: 10px}
.retrospectpb {height: 80px; width: 80px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background-color: #00ebb8; opacity: 0.5; position: absolute; top: 20px; left: 20px;}
.retrospecttd {height: 90px; width: 210px; position: absolute; top: 10px; left: 130px; background-color: #fff; font-family: 'Roboto'; text-transform: uppercase; font-size: 10px; text-align: left; line-height: 95%; padding: 5px; overflow: auto; color: #000}
.retrospecttd::-webkit-scrollbar {width: 0px; background-color: transparent}
.retrospecttd h1 {text-align: right; width: 210px; margin: 10px 10px 10px 5px; color: #00ebb8; font-style: italic; letter-spacing: 2px; line-height: 100%; font-size: 10px; border-bottom: 1px solid #000; padding-bottom: 3px; padding-right: 3px; position: relative; right: 5px}
.retrospecttd h2 {text-align: right; width: 210px; margin: 10px 10px 10px 5px; color: #9aedc1; font-style: italic; letter-spacing: 2px; line-height: 100%; font-size: 10px; border-bottom: 1px solid #000; padding-bottom: 3px; padding-right: 3px; position: relative; right: 5px}
.retrospecttd h3 {text-align: right; width: 210px; margin: 10px 10px 10px 5px; color: #e4ffcf; font-style: italic; letter-spacing: 2px; line-height: 100%; font-size: 10px; border-bottom: 1px solid #000; padding-bottom: 3px; padding-right: 3px; position: relative; right: 5px}
.retrospecttd a {color: #00babd; text-decoration: none}
.retrospecttd i {color: #00babd; font-family: 'Roboto'; font-size: 10px}
</style>
<div id="retrospectm">
<div class="retrospectp1">
<div class="retrospectn">JégVirág Design</div>
<div class="retrospecti">www.jegvirag.gportal.hu</div>
</div>
<div class="retrospectp2">
<div class="retrospectpic" style="background-image:url(//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1476884070_40.jpg)"></div>
<div class="retrospectpb"></div>
<div class="retrospecttd">
<h1>active</h1>
<a href="link">thread name</a> with <i>first last</i><br>
<a href="link">thread name</a> with <i>first last</i><br>
<a href="link">thread name</a> with <i>first last</i><br>
<a href="link">thread name</a> with <i>first last</i><br>
<h2>comms</h2>
<a href="link">thread name</a> with <i>first last</i><br>
<a href="link">thread name</a> with <i>first last</i><br>
<a href="link">thread name</a> with <i>first last</i><br>
<a href="link">thread name</a> with <i>first last</i><br>
<h3>inactive</h3>
<a href="link">thread name</a> with <i>first last</i><br>
<a href="link">thread name</a> with <i>first last</i><br>
<a href="link">thread name</a> with <i>first last</i><br>
<a href="link">thread name</a> with <i>first last</i><br>
</div>
</div>
</div>
</center>