dude take a xanax | article

<style>
.container{
	background: url(https://i0.wp.com/images.wallpaperscraft.com/image/night_city_bw_full_moon_128768_938x1668.jpg)center;
    width: 600px;
    padding: 20px;
    margin:auto;
    background-size: cover;
}
.body{
	margin: auto;
    width: 550px;
    font-family: 'Times New Roman';
    background: rgba(53,49,49,0.75);
    padding: 20px;
}
h2{
	margin: 0px;
    color: #fff;
    border-bottom: 5px solid #FFC300;
    text-transform: uppercase;
    font-weight: 200
}
.text{
	text-align: justify;
    font-size: 15px;
    color: #fff
}
.text:first-letter{
	background: #FFC300;
    padding: 5px;
    float: left;
    margin-right: 10px;
    font-size: 20px;
    text-shadow: 1px 1px 3px rgba(53,49,49,0.75);
}
h3{
	margin: 0px;
    color: #fff;
    border-bottom: 5px solid #FFC300;
    text-transform: uppercase;
    font-weight: 200;
    font-size: 25px;
}
.award{
	padding: 10px;
    background: #231F1F;
    height: 200px;
    margin: 10px 0px;
    font-size: 20px
}
.slave{
	border: 3px solid #fff;
    height: 150px;
    margin-bottom: 10px;
    transiton: 1s all;
    overflow:hidden
}
.title, .reveal{
	background-size: cover;
    height: 150px;
    transition: 1s all;
}
.slave:hover > .title{
    opacity: 0;
    transition: 1s;
}
.slave:hover > .reveal{
    opacity: 1;
    transition: 1s
}
.title{
	opacity: 1;
    display: flex;
    position: relative
}
.revealtext{
    background: rgba(255,195,0,0.5);
    color: #fff;
    justify-content: center;
    align-items: center;
    padding: 10px;
    width: 100%;
    height: 30px;
    display: flex;
}
.reveal{
    display: flex;
    opacity: 0;
    position: relative;
    z-index: 2;
    margin-top: -150px
}
</style>
<div class="container">
<div class="body">
<h2>end of the year results</h2>
<div class="text">
<p>Lorem ipsum dolor sit amet, eu justo tibique eos, has tritani commune at. In noluisse appareat pri, at tractatos molestiae euripidis pro. Quod tractatos gloriatur cu vis. Cu illum malis voluptua usu, cu imperdiet deterruisset his.

<p>Eum ut sint torquatos inciderint, ius prima legendos at, eum ea odio eirmod prompta. Assum deserunt pertinacia pri cu. Te choro meliore ius, sit propriae accusamus maiestatis ea. Esse vivendum antiopam te eum. Prompta legimus id.
<h3>award</h3>
<div class="award">
<div class="slave">
<div class="title" style="background: url(https://64.media.tumblr.com/64561ba8045c562a8c6610699a2a2932/183314d3dc515387-68/s540x810/dcfc2428c4d0dfa70943e18b0b2c410e6f8142a2.gifv)center"></div>
<div class="reveal" style="background: url(https://64.media.tumblr.com/9076aed42789728ea4e99c9b8fe56f6d/693bc9644ae0f8be-22/s540x810/08b6152ff604c4d27d92217d7bb325f96c7eb2b3.gifv)center">
<div class="revealtext">dude take a xanax</div>
</div>
</div>
the best loser
</div>
<h3>award</h3>
<div class="award">
<div class="slave">
<div class="title" style="background: url(https://64.media.tumblr.com/64561ba8045c562a8c6610699a2a2932/183314d3dc515387-68/s540x810/dcfc2428c4d0dfa70943e18b0b2c410e6f8142a2.gifv)center"></div>
<div class="reveal" style="background: url(https://64.media.tumblr.com/9076aed42789728ea4e99c9b8fe56f6d/693bc9644ae0f8be-22/s540x810/08b6152ff604c4d27d92217d7bb325f96c7eb2b3.gifv)center">
<div class="revealtext">dude take a xanax</div>
</div>
</div>
the best loser
</div>
<h3>award</h3>
<div class="award">
<div class="slave">
<div class="title" style="background: url(https://64.media.tumblr.com/64561ba8045c562a8c6610699a2a2932/183314d3dc515387-68/s540x810/dcfc2428c4d0dfa70943e18b0b2c410e6f8142a2.gifv)center"></div>
<div class="reveal" style="background: url(https://64.media.tumblr.com/9076aed42789728ea4e99c9b8fe56f6d/693bc9644ae0f8be-22/s540x810/08b6152ff604c4d27d92217d7bb325f96c7eb2b3.gifv)center">
<div class="revealtext">dude take a xanax</div>
</div>
</div>
the best loser
</div>
<h3>award</h3>
<div class="award">
<div class="slave">
<div class="title" style="background: url(https://64.media.tumblr.com/64561ba8045c562a8c6610699a2a2932/183314d3dc515387-68/s540x810/dcfc2428c4d0dfa70943e18b0b2c410e6f8142a2.gifv)center"></div>
<div class="reveal" style="background: url(https://64.media.tumblr.com/9076aed42789728ea4e99c9b8fe56f6d/693bc9644ae0f8be-22/s540x810/08b6152ff604c4d27d92217d7bb325f96c7eb2b3.gifv)center">
<div class="revealtext">dude take a xanax</div>
</div>
</div>
the best loser
</div>
<p>Soleat ignota eos no, malis everti usu ea. Semper docendi fastidii vix eu. lorem clita et, his id tritani impedit. Facilisi conceptam delicatissimi ne mel. Ius id error saepe, expetenda forensibus quo eu. Cibo vocent patrioque ad quo, persius urbanitas concludaturque cu has. Duo ei mutat illud quidam, movet graece argumentum est ne.

<p>Ei quot ridens vim, nec ea ponderum laboramus suscipiantur. Ad putent iriure bonorum his, veniam epicurei vituperatoribus ut vis. Putant vidisse nostrud mei te, porro convenire prodesset eu usu. No agam dicit voluptatum sed, volumus deleniti praesent te pro.

<p>Feugait mentitum delectus ut mea, vitae audiam nam no. An dolore luptatum principes duo, sed ne unum melius. Elit eripuit denique per no, unum debet sit ad. Oporteat expetendis at eum, atqui vulputate appellantur est te. Eum enim aeque at, no accusam tincidunt voluptatibus per, postulant molestiae voluptatum ius an.
</div>
</div>
<div style="margin: auto; font-size: 15px;text-align: center; font-family: 'Times New Roman';text-transform: uppercase;text-shadow: 1px 1px 4px #FFC300"><a href="https://finchscodes.tumblr.com" style="text-decoration: none;color: #fff;" target="_blank"> Coded by Finch</a></div>
</div>
</div>