breezeblocks

[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=Overpass+Mono" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gothic+A1:100,200,300,400,500,600,700,800,900" rel="stylesheet">


<div id="breeblock">
 <img1 style="background-image: url(IMAGE HERE WILL RESIZE TO FIT)"></img1>
 <h1>breezeblocks</h1>

 <img src="GIF HERE WILL RESIZE">
 <mixa></mixa>
 <tags>tag: username
   <br>words:
   <br>notes: notes here idk
 </tags>

 <li1></li1><li2></li2>
 <div id="breeblock-txt">

TEXT HERE


</div>
</div>

<a href="oliviacodes.tumblr.com"><div style="width: 520px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">oliviacodes</div></a>

<style>
#breeblock {height: 430px; width: 520px; background: #111; position: relative; margin: 20px auto; overflow: hidden; outline: 1px solid #fff300; outline-offset: 10px;}
#breeblock img1 {height: 430px; width: 520px; position: absolute; background-size: cover; -webkit-filter: grayscale(100%) brightness(30%); -moz-filter: grayscale(100%) brightness(30%); -ms-filter: grayscale(100%) brightness(30%); -o-filter: grayscale(100%) brightness(30%); }
#breeblock h1 {font-family: gothic a1; font-style: italic; font-weight: 900; text-transform: uppercase; z-index: 2; color: #fff300; position: absolute; font-size: 30px;  top: 20px; right: 40px; letter-spacing: 2px; height: 40px; line-height: 40px; width: 440px; -webkit-transition: 0.6s; -moz-transition: 0.6s; -ms-transition: 0.6s; -o-transition: 0.6s;}
#breeblock:hover h1 {width: 360px}
#breeblock img {height: 60px!important; width: 60px; border: 1px solid #000; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); box-sizing: border-box; border: 1px solid #000; object-fit: cover; top: 40px; left:40px; position: absolute; opacity: 0; -webkit-transition: 0.6s; -moz-transition: 0.6s ease; -ms-transition: 0.6s ease; -o-transition: 0.6s ease;z-index: 5}
#breeblock mixa {height: 60px; width: 60px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; background: #fff300; mix-blend-mode: multiply; top: 40px; left: 40px; position: absolute; opacity: 0; -webkit-transition: 0.6s; -moz-transition: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; z-index: 6}
#breeblock:hover img, #breeblock:hover mixa {opacity: 1; -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -ms-transition-delay: 0.3s; -o-transition-delay: 0.3s}
#breeblock tags {height: 90px; width: 360px; right: 120px; background: none; position: absolute; top: 80px; font-family: overpass mono; color: #eee; font-size: 10px; letter-spacing: 1px; line-height: 14px; -webkit-transition: 0.6s}
#breeblock:hover tags {right: 40px;}
#breeblock li1, #breeblock li2 {height: 200px; width: 1px; background: #fff300; position: absolute; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); right: 70px; top: -30px}
#breeblock-txt {background: rgba(0,0,0,0.6); box-sizing: border-box; width: 520px; height: 240px; position: absolute; bottom: -240px; border: 20px solid transparent; border-bottom: 20px solid transparent; padding-bottom: 10px; -webkit-columns: 2; -moz-columns: 2; -ms-columns: 2; -o-columns: 2; font-family: overpass mono; overflow: auto; color: #eee; font-size: 10px; line-height: 17px; text-align: justify; -webkit-transition: 0.7s ease; -moz-transiton: 0.7s ease; -ms-transition: 0.7s ease; -o-transition: 0.7s ease; -webkit-column-gap: 30px; -moz-column-gap: 30px; -ms-column-gap: 30px; -o-column-gap: 30px; -webkit-column-rule:3px double #fff300; -moz-column-rule: 3px double #fff300; -ms-column-rule: 3px double #fff300; -o-column-rule: 3px double #fff300; }
#breeblock-txt p:first-letter, #breeblock-txt:first-letter {font-family: playfair display; float: left; font-size: 20px; font-weight: 900; margin: 10px 20px; color: #fff300;}
#breeblock:hover #breeblock-txt {bottom: 0}
#breeblock-txt::-webkit-scrollbar {height: 5px; }
#breeblock-txt::-webkit-scrollbar-thumb {background: none; border-top: 1px solid #fff300;border-bottom: 1px solid #fff300;}
#breeblock-txt::-webkit-scrollbar-track {background: none!important; border: none!important}
#breeblock li2 {z-index: 1; top: -30px; left: 70px; -webkit-transform: rotate(45deg);}
</style>

[/dohtml]