09. Other // Casandra

<center><div id="casandra"><div class="leftpanel"><div class="img1"><div class="hoverimg"><div class="imgtext">IMAGE HOVER TEXT 01</div></div></div><div class="text1container"><div class="text1"><div class="title">something</div>TEXT HERE!</div></div></div><div class="rightpanel"><div class="text2container"><div class="text1"><div class="title">something</div>TEXT HERE</div></div><div class="img2"><div class="hoverimg"><div class="imgtext">IMAGE HOVER TEXT 02</div></div></div></div><div class="blackpanel"><div class="infotext">BOTTOM TEXT, LYRICS, TEXT, ETC. ANYTHING SHORT.</div></div></div><div class="creditsc"><a href="http://evassmat.com/a9ue" class="cactuscodes">cactus</a></div></center>
<link href="https://fonts.googleapis.com/css?family=Vollkorn:400,400i&display=swap" rel="stylesheet">
<style>#casandra{width: 550px;height: 700px;background: #fff;border: 1px solid #ccc;overflow: hidden;font-family: vollkorn;font-size: 10px;color: #fff;}#casandra .leftpanel{position: relative;height:520px;width: 240px;border-right: 1px solid #ccc;top: 40px;left: -125px;overflow: auto;background: white;}#casandra .img1{position:relative;background-image:url('http://via.placeholder.com/200x250');box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.6);width: 190px;height: 250px;right: 10px;overflow: hidden;}#casandra .hoverimg{opacity: 0;background: #000;width: 190px;height: 250px;transition: 2s linear;}#casandra .imgtext{width: 140px;height: 50px;position:relative;top: 110px;text-transform: lowecase;font-style: italic;letter-spacing: 1px;overflow:hidden;}#casandra .hoverimg:hover{transition: 1s linear;opacity: 0.9;}#casandra .text1container{margin-top: 30px;height: 210px;width: 190px;margin-right: 10px;overflow: hidden;padding-top: 20px;border-top: 1px solid #ccc;}#casandra .img2{background-image:url('http://via.placeholder.com/200x250');box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.7);width: 190px;height: 250px;margin-right: 10px;}#casandra .text2container{margin-bottom: 30px;height: 210px;width: 190px;margin-right: 10px;overflow: hidden;padding-bottom: 20px;border-bottom: 1px solid #ccc;}#casandra .text1{width: 190px;height: 210px;overflow: auto;color: #000;text-align: justify;line-height: 110%;}#casandra .text1::-webkit-scrollbar {width: 0px !important;}#casandra .text1::-webkit-scrollbar-track {width: 0px !important;}#casandra .text1::-webkit-scrollbar-thumb {width: 0px !important;}#casandra .title{text-decoration: none;font-style: italic;font-size: 11px;text-transform:lowecase;letter-spacing: 1px;margin-bottom: 20px;margin-top: 10px;text-align:center;}#casandra .rightpanel{position:relative;height:520px;width: 240px;top: -480px;left: 130px;overflow: auto;background: white;}#casandra .blackpanel{position:relative;background: #000;width: 460px;height: 80px;overflow: hidden;top: -460px;}#casandra .infotext{width: 400px;text-transform: lowecase;font-style: italic;font-size: 10px;font-weight: 100;letter-spacing: 1px;font-family: times;position: relative;top: 30px;line-height: 100%;}.creditsc{width: 90px;border-radius: 10px;margin-top: 20px;padding-top: 1px;padding-bottom: 1px;transition:1s linear;background-color:#f7f7f7;border: 1px solid #e5e5e5;border-left: 3px solid #b3d92b;border-right: 3px solid #b3d92b;}.cactuscodes{text-decoration: none;font-family: nunito;color: #99b927;font-size: 7px;text-transform:uppercase;letter-spacing: 2px;font-weight: 900;}</style>