fixed codes - aislyn

One

astatine

WORDS
"speech"

table ☓ bunny

<style>#astatinetable { width: 480px; background-color: #000000; border: 5px double #323232; } #astatinebannertext { -webkit-transform: rotate(-90deg); margin-left: 210px; margin-top: 200px; font-size: 40px; font-family: 'times new roman'; letter-spacing: 30px; display: block; position: absolute; color: #4C3467; text-shadow: 1px 1px 10px #4C3467; -webkit-transition: all 2s ease-out; -moz-transition: all 2s ease-out; -o-transition: all 2s ease-out; -ms-transition: all 2s ease-out; transition: all 2s ease-out; } #astatinetable:hover #astatinebannertext { color: red; text-shadow: 1px 1px 10px red; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; -ms-transition: all 2s ease; transition: all 2s ease; } #astatineminitable { padding: 10px; width: 400px; } #astatinetext { color: #c5c5c5; width: 400px; font-family: 'times new roman'; text-align: justify; font-size: 9.5px; text-shadow: 1p 1px 10px #000000; letter-spacing: 1px; line-height: 12px; margin-top: 20px; } #astatinetext h { color: red; font-size: 12px; text-shadow: 1px 1px 10px red; font-style: italic; font-family: 'pristina'; } #astatineimage1 { margin-left: -80px; height: 465px; width: 355px; padding-top: 10px; }</style>
<center>
<div id="astatinetable"><div id="astatineminitable">
<div id="astatinebannertext">astatine</div>
<div id="astatineimage1"><img src="https://i.imgur.com/zai3Jnh.png" style="height: 465px; width: 355px; border: 3px solid #c5c5c5; border-radius: 150px;"></div>
<div id="astatinetext">
WORDS
<center><h>"speech"</h></center>
</div></div></div><span style="font-family: ‘pristina’; font-size: 7.5px; color: #ffffff; letter-spacing: 8px; text-align: center; margin-right: -5px;">table ☓ bunny</span></center>

Two

astatine barin
TEXT
"speech"

table ▸ bunny, art ▸ kimcybernik

<style>.astatinebox .astatinebox-layer_slideright { -moz-transform: translateX(-100%); -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .astatinebox:hover .astatinebox-layer_slideright, .astatinebox.active .astatinebox-layer_slideright { -moz-transform: translateX(0); -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .astatinebox, .astatinebox * { box-sizing: border-box;
} .astatinebox { position: relative; display: inline-block; overflow: hidden; max-width: 100%; width: 550px; } .astatinebox img { max-width: 100%; } .astatinebox .astatinebox-layer_bottom { display: block; } .astatinebox .astatinebox-layer_top { opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 771px; background: rgba(0, 0, 0, 0.6); -moz-transition: all 0.9s ease-in-out 0s; -webkit-transition: all 0.9s ease-in-out 0s; -ms-transition: all 0.9s ease-in-out 0s; transition: all 0.9s ease-in-out 0s; } .astatinebox:hover .astatinebox-layer_top, .astatinebox.active .astatinebox-layer_top { opacity: 1; } .astatinebox .astatinebox-text { text-align: justify; font-size: 8px; display: inline-block; position: absolute; top: 50%; left: 50%; font-family: 'georgia'; overflow: scroll; overflow-x: hidden; color: #979897; line-height: 9px; letter-spacing: 0.3px; padding: 50px; width: 500px; height: 280px; background: rgba(21, 21, 21, 0.6); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .astatinebox-text h { color: #6C3483; font-size: 35px; font-family: 'georgia'; font-style: italic; text-transform: lowercase; } .astatinebox-text b { color: #6C3483; font-size: 11px; font-family: 'georgia'; font-style: italic; text-transform: lowercase; }</style>
<center>
<div class="astatinebox">
<img src="https://i.imgur.com/RbYE5iv.jpg" class=astatinebox-layer_bottom">
<div class="astatinebox-layer_top astatinebox-layer_slideright">
<div class="astatinebox-text"><h>astatine barin</h>
TEXT
<b>"speech"</b>
</div>
</div></div>
<br><span style="font-family: 'georgia'; color: #8c8484; font-size: 6px; letter-spacing: 1px;">table ▸ bunny, art ▸ <a href="https://www.deviantart.com/kimcybernik">kimcybernik</a></span></center>

Three

astatine
TEXT
"speech"

table ▸ bunny

<style>.astatinebox .astatinebox-layer_slideright { -moz-transform: translateX(-100%); -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .astatinebox:hover .astatinebox-layer_slideright, .astatinebox.active .astatinebox-layer_slideright { -moz-transform: translateX(0); -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .astatinebox, .astatinebox * { box-sizing: border-box;
} .astatinebox { position: relative; display: inline-block; overflow: hidden; max-width: 100%; width: 550px; } .astatinebox img { max-width: 100%; } .astatinebox .astatinebox-layer_bottom { display: block; } .astatinebox .astatinebox-layer_top { opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 771px; background: rgba(0, 0, 0, 0.6); -moz-transition: all 0.9s ease-in-out 0s; -webkit-transition: all 0.9s ease-in-out 0s; -ms-transition: all 0.9s ease-in-out 0s; transition: all 0.9s ease-in-out 0s; } .astatinebox:hover .astatinebox-layer_top, .astatinebox.active .astatinebox-layer_top { opacity: 1; } .astatinebox .astatinebox-text { text-align: justify; font-size: 8px; display: inline-block; position: absolute; top: 50%; left: 50%; font-family: 'georgia'; overflow: scroll; overflow-x: hidden; color: #979897; line-height: 9px; letter-spacing: 0.3px; padding: 50px; width: 500px; height: 400px; background: rgba(21, 21, 21, 0.6); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .astatinebox-text h { color: #af1e2b; font-size: 35px; font-family: 'georgia'; font-style: italic; text-transform: lowercase; } .astatinebox-text b { color: #af1e2b; font-size: 11px; font-family: 'georgia'; font-style: italic; text-transform: lowercase; }</style>
<center>
<div class="astatinebox">
<img src="https://i.imgur.com/Vo6mfpx.png" class=astatinebox-layer_bottom">
<div class="astatinebox-layer_top astatinebox-layer_slideright">
<div class="astatinebox-text"><h>astatine</h>
TEXT
<b>"speech"</b>
</div>
</div></div>
<br><span style="font-family: 'georgia'; color: #8c8484; font-size: 6px; letter-spacing: 1px;">table ▸ bunny</span></center>