Serendipity

<link href="https://fonts.googleapis.com/css?family=Itim|Pacifico" rel="stylesheet">
<center>
<style>
  .fanpage {width: 475px; height: 600px; background: #f7dec6; border: 1px solid #eccc6e; position: relative;}
  .fadeline {width: 475px; height: 20px; position: absolute; background: linear-gradient(to left, rgba(236,204,110,1), rgba(236,204,110,0)); background: -moz-linear-gradient(to left, rgba(236,204,110,1), rgba(236,204,110,0)); background: -o-linear-gradient(to left, rgba(236,204,110,1), rgba(236,204,110,0)); background: -webkit-linear-gradient(to left, rgba(236,204,110,1), rgba(236,204,110,0)); border-bottom: 1px solid white; top: 235px; border-top: 1px solid white}
  .fade2 {height: 344px; position: absolute; width: 20px; background: linear-gradient(to top, rgba(236,204,110,1), rgba(236,204,110,0)); background: -moz-linear-gradient(to top, rgba(236,204,110,1), rgba(236,204,110,0)); background: -o-linear-gradient(to top, rgba(236,204,110,1), rgba(236,204,110,0)); background: -webkit-linear-gradient(to top, rgba(236,204,110,1), rgba(236,204,110,0)); top: 256px; left: 175px; border-right: 1px solid white; border-left: 1px solid white;}
  .giffy { width: 450px; position: absolute; border: 1px solid white; left: 12px; top: 12px; border-bottom: 7px solid white;}
  .hover {width: 390px; height: 135px; position: absolute; top: 13px; left: 13px; border-bottom: 54px solid white; border-left: 30px solid white; border-right: 30px solid white; border-top: 20px solid white; background: rgba(200, 200, 200,.75); color: #35adbc; font-family: 'Itim', cursive; font-size: 18px; font-style: italic; opacity: 1; line-height: 8; text-decoration: underline; transition: .7s ease-in-out; -webkit-transition: .7s ease-in-out; -moz-transition: .7s ease-in-out;-o-transition: .7s ease-in-out; overflow: hidden;}
  .hover:hover {opacity: 0; transition: .7s ease-in-out; -webkit-transition: .7s ease-in-out; -moz-transition: .7s ease-in-out;-o-transition: .7s ease-in-out;}
  .words {color: #35adbc; width: 231px; height: 200px; padding: 10px; border: 1px solid white; border-bottom: 7px solid white; position: absolute; top: 270px; left: 210px; font-family: 'Itim', cursive; font-size: 14px; text-align: justify; line-height: 1.5; overflow: auto;}
  .words ul {margin: 5px; margin-left: -15px; list-style-image: url(https://images.rpginitiative.com/uploads/monthly_2018_07/large.HgjaD6u.png.5d452a2001afd5721b517ffa2fb3caa8.png); text-indent: 0px; overflow: auto; line-height: 1.75;}
  .titlebox {background-color: #ECCC6E; position: absolute; height: 52px; width: 231px; border: 1px solid white; border-bottom: 7px solid white; top: 508px; left: 210px; padding: 10px; color: #155974; text-align: justify; font-family: 'Itim', cursive; font-size: 14px; overflow: auto;}
  .titlebox b {font-family: 'Pacifico', cursive; font-weight: normal; text-decoration: underline; font-size: 14px; color: #763114}
  .fancredit {font-family: 'space mono', monospace; color: white; font-size: 8px; margin-top: 588px; margin-left: 460px;}
  .fancredit a {font-family: 'space mono', monospace; color: white; font-size: 8px; text-decoration: none;}

</style>
<div class="fanpage"><div class="fadeline"></div><div class="fade2"></div>
  <div class="giffy"><img src="https://placehold.it/450x209" style="width: 100%;"></div>
  <div class="words">Main bulk of the wanted! This will scroll, of course!</div>
  <div class="words" style="width: 131px; left: 11px; height: 290px;"><ul><li>This is where you can post 5 facts!</li><li>About the character, of course</li><li>Though you could also maybe do one about you? Ooooh</li><li>Keep them all between 'li' tags so they work, of course!!</li><li>You can even do more if you want, but yknow, just have fun with it!!!</li></ul></div>
  <div class="titlebox"><b>Wanted By:</b> Your name!<br><b>Character:</b> Character name!</div>
  <div class="hover">Character Name/Title?</div>
  <div class="fancredit"><a href="https://rpginitiative.com/profile/2592-penny/">♔</a></div>
</div>
</center>