as if it's your last

[dohtml]
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:200,300,400,500,600,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

<div id="why">
 <div id="why-img1" style="background-image: url(IMG HERE WILL RESIZE)"></div>
 <scr1></scr1>
 <taga>
 </taga>
 <tagb>TAG HERE</tagb>
     <div id="why-img2" style="background-image: url(GIF HERE WILL RESIZE);"></div>
<main>
<div id="why-img3"style="background-image: url(IMG HERE WILL RESIZE);"></div>
<div id="why-img4" style="background-image: url(IMG HERE WILL RESIZE);"></div>
<scr2></scr2>
 <bg>TEXT HERE

</bg>
</main>
</div>
<style>

#why {height: 300px; width: 300px; background: red; position: relative; margin: auto; border: 1px solid #000; overflow: hidden}
#why a {color: #c8403a!important}
#why:hover a {color: #eee!important}
#why-img1 {height: 300px; width: 250px; position: absolute; border-right: 1px solid #000; background-size: cover; background-position: center; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); z-index: 2; -webkit-transition: 0.6s 0.4s; -moz-transition: 0.6s 0.4s; -ms-transition: 0.6s 0.4s; -o-transition: 0.6s 0.4s;}
#why scr1 {height: 300px; width: 250px; position: absolute; mix-blend-mode: multiply; background-color: #c8403a; z-index: 3;  -webkit-transition: 0.6s 0.4s; -moz-transition: 0.6s 0.4s; -ms-transition: 0.6s 0.4s; -o-transition: 0.6s 0.4s;}
#why taga {height: 300px; width: 49px; background-size: cover; background-image: url(https://78.media.tumblr.com/2e54c32bb4cd6ef97348262bfc77ce80/tumblr_obd9yb6ioI1v0x9ego1_500.jpg);  -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); position: absolute; right: 0; background-blend-mode: multiply; background-color: #343434;}
#why:hover #why-img1, #why:hover scr1 {width: 300px; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s;}
#why tagb {font-family: source code pro; text-transform: uppercase; position: absolute; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg);right: -70px; top: 70px;font-size: 9px; font-weight: 600; width: 170px; padding-left: 20px; height: 50px; line-height: 50px;z-index: 7; color: #c8403a; letter-spacing: 2px; background: none; -webkit-transition: 0.5s 0.55s; -moz-transition: 0.5s 0.55s; -ms-transition: 0.5s 0.55s; -o-transition: 0.5s 0.55s;}
#why-img2 {height: 30px; width: 30px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border: 1px solid #c8403a; background-size: cover; background-position: center; right: 9px; bottom: 9px; position: absolute;}
#why main {height: 300px; width: 300px; background: rgba(0,0,0,0.5); position: absolute; z-index: 6; top: -0px; -webkit-transition: 0.6s ease-out; -moz-transition: 0.6s ease-out; -ms-transition: 0.6s ease-out; -o-transition: 0.6s ease-out; top: -300px;}
#why:hover main {top: 0; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s;}
#why bg {position: absolute; box-shadow: 1px 1px 0 #eee, -1px -1px 0 #eee, 1px -1px 0 #eee, -1px 1px 0 #eee; background: rgba(0,0,0,0.4); color: #eee; font-family: ibm plex sans; border: 10px solid transparent; padding-right: 5px; text-align: justify; font-size: 11px; bottom: 20px; left: 20px; height: 140px; width: 205px; text-align: justify; line-height: 13px; font-size: 10px; text-align: justify; overflow: auto}
#why bg::-webkit-scrollbar {width: 1px}
#why bg::-webkit-scrollbar-thumb {background: #eee!important; border: none!important}
#why bg::-webkit-scrollbar-track {background: rgba(0,0,0,0.5)!important; border: none!important}
#why:hover tagb {color: #eee; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s}
#why-img3, #why-img4 {height: 80px; border: 1px solid #eee; background-size: cover; position: absolute; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); top: 20px;}
#why-img3 {left: 20px; width: 50px; background-blend-mode: multiply; background-color: #999}
#why-img4 {right: 50px; width:155px}
#why scr2 {height: 80px; width:155px; background-color: #c8403a; position: absolute; right: 51px; top: 21px; mix-blend-mode: multiply}
#why bg::first-letter {color: #c8403a; mix-blend-mode: screen; float: left; font-weight: 900; margin: 15px; font-size: 40px;}
</style>
<a href="oliviacodes.tumblr.com"><div style="width: 302px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">oliviacodes</div></a>

[/dohtml]