TEMPLATE 124

JégVirág Design

www.jegvirag.gportal.hu

active

thread name with first last
thread name with first last
thread name with first last
thread name with first last

comms

thread name with first last
thread name with first last
thread name with first last
thread name with first last

inactive

thread name with first last
thread name with first last
thread name with first last
thread name with first last

<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 class="retrospectn">JégVirág Design</div>

<div class="retrospecti">www.jegvirag.gportal.hu</div>

</div>

<h1>active</h1>

<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>

<h3>inactive</h3>

<a href="link">thread name</a> with <i>first last</i><br>