Post | Lynx (tabs full) // Code By CactusCodes

<div id="lynx"><div class="__body"><div class="__icon1"><i class="fas fa-moon"></i></div><div class="__title">Sweet Dreams</div><div class="__subtitle">I'm trapped in the illusion</div><div class="__sep"></div><div class="LYNXcontainer"><div class="LYNXtabs"><div class="LYNXtab"><input type="radio" id="LYNXtab-1" name="LYNXtab-group-1" checked><label for="LYNXtab-1"> <span class="th th-planet-2"></span> </label><div class="LYNXcontent"><div class="__icon2"><span class="th th-planet-2"></span></div><div class="__title2">cronología</div><div class="__scrollbox"><div class="thread"><div class="open"><div class="__icon3"><span class="th th-open-lock"></span></div></div><a href="/" class="linko">It's like a big black hole in my heart</a><br><span class="with">Federico García Lorca</span></div><div class="thread"><div class="close"><div class="__icon3"><span class="th th-closed-lock"></span></div></div><a href="/" class="linko">Fly high yeah</a><br><span class="with">Federico García Lorca</span></div><div class="thread"><div class="open"><div class="__icon3"><span class="th th-open-lock"></span></div></div><a href="/" class="linko">It's like a big black hole in my heart</a><br><span class="with">Federico García Lorca</span></div><div class="thread"><div class="close"><div class="__icon3"><span class="th th-closed-lock"></span></div></div><a href="/" class="linko">Fly high yeah</a><br><span class="with">Federico García Lorca</span></div><div class="thread"><div class="open"><div class="__icon3"><span class="th th-open-lock"></span></div></div><a href="/" class="linko">It's like a big black hole in my heart</a><br><span class="with">Federico García Lorca</span></div><div class="thread"><div class="close"><div class="__icon3"><span class="th th-closed-lock"></span></div></div><a href="/" class="linko">Fly high yeah</a><br><span class="with">Federico García Lorca</span></div></div></div></div><div class="LYNXtab"><input type="radio" id="LYNXtab-2" name="LYNXtab-group-1"><label for="LYNXtab-2"> <span class="th th-satellite"></span> </label><div class="LYNXcontent"><div class="__icon2"><span class="th th-satellite"></span></div><div class="__title2">Relaciones</div><div class="__scrollbox"><div class="character"><div class="__image" style="background:url('http://via.placeholder.com/120x150');"></div><div class="__icon4"><span class="th th-z-aquarius"></span></div><div class="__rname">Jack</div><div class="__rtype">the nemesis</div></div><div class="character"><div class="__image" style="background:url('http://via.placeholder.com/120x150');"></div><div class="__icon4"><span class="th th-z-aries"></span></div><div class="__rname">Angelica</div><div class="__rtype">my besty</div></div><div class="character"><div class="__image" style="background:url('http://via.placeholder.com/120x150');"></div><div class="__icon4"><span class="th th-z-cancer"></span></div><div class="__rname">Susan</div><div class="__rtype">captain</div></div><br><div class="character"><div class="__image" style="background:url('http://via.placeholder.com/120x150');"></div><div class="__icon4"><span class="th th-z-capricorn"></span></div><div class="__rname">renaldo</div><div class="__rtype">princess</div></div><div class="character"><div class="__image" style="background:url('http://via.placeholder.com/120x150');"></div><div class="__icon4"><span class="th th-z-gemini"></span></div><div class="__rname">paco</div><div class="__rtype">a random</div></div><div class="character"><div class="__image" style="background:url('http://via.placeholder.com/120x150');"></div><div class="__icon4"><span class="th th-z-leo"></span></div><div class="__rname">Max</div><div class="__rtype">hero</div></div></div></div></div><div class="LYNXtab"><input type="radio" id="LYNXtab-3" name="LYNXtab-group-1"><label for="LYNXtab-3"> <span class="th th-constellation"></span> </label><div class="LYNXcontent"><div class="__icon2"><span class="th th-constellation"></span></div><div class="__title2">Diario</div><div class="__scrollbox"><div class="diarip"><div class="__pnumesp"><div class="__pnumber">.01</div></div><div class="__pcont">Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div></div><div class="diarip"><div class="__pnumesp"><div class="__pnumber">.02</div></div><div class="__pcont">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan tellus sed ex pharetra pharetra. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div></div><div class="diarip"><div class="__pnumesp"><div class="__pnumber">.03</div></div><div class="__pcont">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan tellus sed ex pharetra pharetra. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam pharetra sapien et mi ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan tellus sed ex pharetra pharetra. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam pharetra sapien et mi ultrices.</div></div></div></div></div></div></div></div></div><center><a href="http://j.gs/19765185/cactuscodes" class="cactuscodes">cactus</a></center><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;800&family=Nunito:wght@400;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
<style>#lynx{width: 500px;margin: 0 auto;}#lynx .__body{width: 500px;border-radius: 10px 10px 10px 10px;background: linear-gradient(to top, #F1C7C9 0%, #9BAAD3 100%);padding: 120px 0px 100px 0px;}#lynx .__icon1{color: #fff;font-size: 60px;text-shadow: 0px 0px 5px rgba(255, 255, 255, 1);width: 500px;text-align: center;}#lynx .__title{font-family:inter;color: #fff;text-transform: uppercase;font-weight: 100;font-size: 27px;letter-spacing: 4px;width: 500px;text-align: center;margin-top: 50px;text-shadow: 0px 0px 4px rgba(255, 255, 255, 1);}#lynx .__subtitle{font-family:nunito;color: #fff;text-transform: uppercase;font-weight: 400;font-size: 8px;letter-spacing: 3px;width: 500px;text-align: center;margin-top: 5px;}#lynx .__sep{width: 1px;height: 50px;background: #FFFFFF80;margin: 0 auto;margin-top: 50px;}#lynx .__title2{font-family:inter;color: #fff;text-transform: uppercase;font-weight: 200;font-size: 20px;letter-spacing: 4px;width: 400px;text-align: center;margin-top: 20px;margin-bottom: 30px;}#lynx .__icon2{color: #FFFFFF;font-size: 55px;text-shadow: 0px 0px 5px rgba(255, 255, 255, 1);width: 400px;text-align: center;margin-top: 0px;}#lynx .thread{width: 400px;height: 50px;background: #FFFFFF80;border-radius: 10px 10px 10px 10px;margin-bottom: 10px;}#lynx .open{background: #7f96d180;float: left;width: 70px;height: 50px;border-radius: 10px 0px 0px 10px;margin-right: 20px;}#lynx .close{background: #ce7dce80;float: left;width: 70px;height: 50px;border-radius: 10px 0px 0px 10px;margin-right: 20px;}#lynx .linko{font-family: nunito;text-decoration: none;color: #7d7d7d;text-transform: uppercase;font-size: 11px;font-weight: 700;position: relative;top: 10px;transition: 1s;}#lynx .linkc{font-family: nunito;text-decoration: none;color: #cea9ab;text-transform: uppercase;font-size: 11px;font-weight: 700;position: relative;top: 10px;transition: 1s;}#lynx .linkc:hover{text-shadow: 0px 0px 2px rgba(206, 169, 171, 1);color: #cea9ab90;transition: 0.3s;}#lynx .linko:hover{text-shadow: 0px 0px 1px rgba(125, 125, 125, 0.4);transition: 1s;}#lynx .with{font-family: nunito;text-decoration: none;color: #a5a5a5;font-size: 11px;font-weight: 700;position: relative;top: 5px;}#lynx .__icon3{color: #FFFFFF50;font-size: 20px;text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.3);width:70px;text-align: center;margin-top: 15px;}#lynx .character{width: 120px;height: 150px;background: #FFFFFF80;border-radius: 10px 10px 10px 10px;display: inline-block;margin-left: 10px;margin-bottom: 10px;transition: 1s;overflow: hidden;}#lynx .character:hover{transform:scale(1.1,1.1);transition: 1s;}#lynx .__image{width: 120px;height: 70px;background-size: cover;box-shadow: inset 0 0 0 1000px rgba(155,170,211,.80);transition: 1s;}#lynx .__image:hover{height: 93px;transition: 1s;box-shadow: inset 0 0 0 1000px rgba(155,170,211,.5);border-radius: 10px 10px 10px 10px;}#lynx .__rname{font-family: inter;color: #7d7d7d;text-transform: uppercase;font-size: 15px;font-weight: 400;letter-spacing: 1px;width: 100px;height: 15px;overflow: hidden;margin: 0 auto;text-align: center;line-height: 90%;margin-top: 5px;}#lynx .__rtype{font-family: nunito;text-decoration: none;color: #a5a5a5;font-size: 9px;font-weight: 700;width: 100px;margin: 0 auto;text-align: center;text-transform: uppercase;letter-spacing:2px;margin-top: 2px;}#lynx .__icon4{width: 100px;height: 25px;margin: 0 auto;text-align: center;color: #9BAAD380;font-size: 20px;margin-top: 10px;text-shadow: 0px 0px 2px rgba(155, 170, 212, 0.5);}#lynx .diarip{width: 400px;height: 90px;background: #FFFFFF80;border-radius: 10px 10px 10px 10px;margin-bottom: 10px;overflow: hidden;}#lynx .__pnumesp{display: inline-block;float: left;width: 90px;height: 70px;border-radius: 10px 0px 0px 10px;margin-right: 20px;border-right: 1px solid #7d7d7d40;margin-top: 10px;}#lynx .__pnumber{font-family: inter;color: #7d7d7d70;text-transform: uppercase;font-size: 25px;letter-spacing: -1px;font-weight: 200;width: 60px;margin: 0 auto;margin-top: 20px;text-align: center;}#lynx .__pcont{font-family: nunito;color: #7d7d7d99;font-size: 11px;font-weight: 400;position: relative;top: 10px;transition: 1s;text-align: justify;height:65px;width: 270px;overflow: auto;margin-top: 2px;line-height: 110%;}#lynx .__scrollbox{width: 410px;height: 365px;overflow: auto;border-radius: 10px 10px 10px 10px;padding: 10px 5px 0px 5px;}#lynx .__scrollbox::-webkit-scrollbar {width: 0px !important;}#lynx .__scrollbox::-webkit-scrollbar-track {width: 0px !important;}#lynx .__scrollbox::-webkit-scrollbar-thumb {width: 0px !important;}.LYNXcontainer {margin: 0 auto;margin-top: 100px;height: 500px;width: 400px;}.LYNXtabs {margin: 0px auto;position: relative;width: 400px;height:  500px;}.LYNXtab {float: left;}.LYNXtab label {display: block;width: 50px;height: 50px;position: relative;text-align:center;top: -55px;left: 95px;color: #FFFFFF;font-size: 25px;text-shadow: 0px 0px 5px rgba(255, 255, 255, 1);margin-right: 30px;transition: 0.3s;}.LYNXtab label:not(:active) {transition-timing-function: ease-out;transition: 0.3s;}.LYNXtab label:active {position:relative;top: -75px;transition: 0.3s;}.LYNXtab input[type=radio]:checked ~ label {color: #FFFFFF99;font-size: 40px;text-shadow: 0px 0px 5px rgba(255, 255, 255, 1);position:relative;transition: 0.3s;}.LYNXtab input[type=radio] {display: none;}.LYNXcontent {position: absolute;top: 0px;bottom: 0px;left: 0px;right: 0px;background: #FFFFFF0;opacity: 0;transition: ease-out 1s;margin-top: 50px;}.LYNXtab input[type=radio]:checked ~ label ~ .LYNXcontent {z-index: 1;display: block;opacity: 1;}.cactuscodes{color: #ccc;text-decoration: none;font-family:georgia;font-size: 9px;text-transform: uppercase;font-weight:100;}#lynx .__pcont::-webkit-scrollbar {width: 0px !important;}#lynx .__pcont::-webkit-scrollbar-track {width: 0px !important;}#lynx __pcont::-webkit-scrollbar-thumb {width: 0px !important;}</style>