stand on the horizon

[dohtml]<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">


<div id="flower">
 <h1>stand on<br>the horizon</h1>
 <div id="flower-bottom">
   <a href="link"><span class="lnr lnr-heart"></span></a> <a href="link"><span class="lnr lnr-moon"></span></a> <a href="link"><span class="lnr lnr-star"></span></a><right>links</right>
 </div>
 <div id="flower-main">
   <input type="checkbox" id="ftoggle">
 <label for="ftoggle"><span class="lnr lnr-cross-circle"></span></label>
   <div id="flower-title"><one>active threads</one><two>inactive threads</two></div>
   <div class="box1">
     <a href="link to thread"><lnk>thread name - first last</lnk></a>
     <a href="link to thread"><lnk>thread name - first last</lnk></a>
     <a href="link to thread"><lnk>thread name - first last</lnk></a>
     <a href="link to thread"><lnk>thread name - first last</lnk></a>
     <a href="link to thread"><lnk>thread name - first last</lnk></a>
     <a href="link to thread"><lnk>thread name - first last</lnk></a>
     <a href="link to thread"><lnk>thread name - first last</lnk></a>
     <a href="link to thread"><lnk>thread name - first last</lnk></a>
     <a href="link to thread"><lnk>thread name - first last</lnk></a>
     <a href="link to thread"><lnk>thread name - first last</lnk></a>


   </div>
   <div class="box2">
         <a href="link to thread"><lnk>thread name - first last</lnk></a>
     <a href="link to thread"><lnk>thread name - first last</lnk></a>
     <a href="link to thread"><lnk>thread name - first last</lnk></a>
     <a href="link to thread"><lnk>thread name - first last</lnk></a>
     <a href="link to thread"><lnk>thread name - first last</lnk></a>
     <a href="link to thread"><lnk>thread name - first last</lnk></a>
     <a href="link to thread"><lnk>thread name - first last</lnk></a>
     <a href="link to thread"><lnk>thread name - first last</lnk></a>
     <a href="link to thread"><lnk>thread name - first last</lnk></a>
     <a href="link to thread"><lnk>thread name - first last</lnk></a>
 </div>
</div>
</div>
<a href="oliviacodes.tumblr.com"><div style="width: 300px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">oliviacodes</div></a>

<style>
#flower {height: 500px; width: 300px; background-image: url(https://s8.favim.com/610/150726/flowers-landscape-nature-photography-Favim.com-3013035.jpg); background-size: cover; position: relative; margin: auto}
#flower h1 {height: 100px; width: 240px; left: 30px; background: none; position: absolute; bottom:30px; text-align: left; font-family: playfair display; text-transform: uppercase; font-weight: 900; letter-spacing: -2px; color: #fff; font-size: 35px; line-height: 33px}
#flower-bottom {height: 30px; left: 30px; position: absolute; bottom: 45px; background: none; width: 240px; color: #fff;}
#flower-bottom span {line-height: 30px; margin-right: 2px; font-size: 12px}
#flower-bottom a {color: #fff!important; text-decoration: none!important}
#flower-bottom right {position: absolute; right: 0; width: 70px; line-height: 30px; font-family: roboto mono; text-align: right; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; font-weight: 200; color: #fff; font-style: italic;}
#flower-main {top: 30px; left: 30px; width: 238px; border: 1px solid #000; background: #eee; position: absolute; height: 230px}
#flower-title {height: 30px; width: 218px; background: #444; position: absolute; top: 0; padding-left: 20px; font-family: roboto mono; line-height: 30px; font-size: 8px; color: #fff; text-transform: uppercase;  letter-spacing: 1px}
#flower-title one {opacity: 1; position: absolute}
#flower-title two {opacity: 0; position: absolute; left: 20px}
#flower-title one, #flower-title two {-webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s;}
#flower-main label {height: 30px; width: 30px; position: absolute; z-index: 3; right: 0; top: 0; text-align: center; color: #fff; font-size: 10px;}
#flower-main span {line-height: 30px}
#flower-main .box1, #flower-main .box2 {border-width: 10px; padding-right: 5px; border-color: #eee; border-style: solid; background: none; height: 180px; width:210px; position: absolute; bottom: 0; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; overflow: auto}
#flower-main .box1::-webkit-scrollbar, #flower-main .box2::-webkit-scrollbar {width: 0px!important;}
#flower-main .box2 {opacity: 0}
#flower-main .box1 {z-index: 2}
#flower-main lnk {min-height: 20px; width: 210px; font-family: roboto mono; text-transform: uppercase; padding-left: 5px; line-height: 20px; font-size: 8px; display: block; letter-spacing: 1px; font-style: italic;}
#flower-main a {color: #000!important; text-decoration: none; font-weight: 400}
#flower-main lnk:hover {background: #D7AD87}
#flower-main input[type=checkbox] {
display: none;
}
#flower-main input[type=checkbox]:checked ~ label {color: #D7AD87}
#flower-main input[type=checkbox]:checked ~ #flower-title one {opacity: 0}
#flower-main input[type=checkbox]:checked ~ #flower-title two {opacity: 1}
#flower-main input[type=checkbox]:checked ~ .box1 {opacity: 0; z-index: 1}
#flower-main input[type=checkbox]:checked ~ .box2 {opacity: 1; z-index: 2}

</style>

[/dohtml]