afternoon page

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>afternoon page</title>
    <link rel="shortcut icon" href="favicon url">

    <style type="text/css">

      body {
        background:#000;
        background-image:url('https://66.media.tumblr.com/7cdc6b1fa79e04c67f7ba6843444b1a2/tumblr_opxxc65hHf1u3233wo2_r1_1280.png');
        background-attachment:fixed;
        background-size:cover;
        color:#fff;
        font-family:monospace;
        font-size:14px;
      }

      a {
        color:#fff;
        text-decoration:underline;
        -moz-transition-duration: 0.5s;
  	    -o-transition-duration: 0.5s;
  	    -webkit-transition-duration: 0.5s;
  	    transition-duration: 0.5s;
      }

      a:hover {
        color:#000;
        background:#fff;
        -moz-transition-duration: 0.5s;
  	    -o-transition-duration: 0.5s;
  	    -webkit-transition-duration: 0.5s;
  	    transition-duration: 0.5s;
      }

      .container {
        width:1000px;
        margin:0 auto;
        overflow:hidden;
        text-align:center;
      }

      .boxwrapper {
        width:510px;
        margin-top:75px;
        height:413px;
        display:inline-block;
        position:relative;
      }

      .box {
        width:500px;
        height:300px;
        position:relative;
        background:#000;
        border:4px solid #fff;
        vertical-align:top;
      }

      .boxright {
        width:300px;
        height:300px;
        position:absolute;
        right:0;
        border-left:4px solid #fff;
      }

      .boximg {
        width:150px;
        height:150px;
        border:4px solid #fff;
        position:absolute;
        top:18px;
        left:18px;
      }

      .bio {
        width:200px;
        height:115px;
        position:absolute;
        bottom:0;
        left:0;
      }

      .question {
        color:#000;
        text-transform:uppercase;
        text-shadow:0 0 3px #000;
        background:#f5a742;
        font-weight:bold;
        font-size:16px;
        display:inline-block;
      }

      .link {
        height:100px;
        width:100px;
        margin-left:-10px;
        position:relative;
        display:inline-block;
        overflow:hidden;
        background-color:#000;
        border:4px solid #fff;
        vertical-align:bottom;
        -moz-transition-duration: 0.5s;
	      -o-transition-duration: 0.5s;
	      -webkit-transition-duration: 0.5s;
	      transition-duration: 0.5s;
      }

      .link:hover {
        background-color:#fff;
        -moz-transition-duration: 0.5s;
	      -o-transition-duration: 0.5s;
	      -webkit-transition-duration: 0.5s;
	      transition-duration: 0.5s;
      }

      .link p {
        position:relative;
        top:50%;
        transform:translateY(-50%);
        margin:0 auto;
        text-align:center;
      }

    </style>
  </head>
  <body>
    <div class="container">
      <div class="boxwrapper">
        <div class="box">
          <div class="boximg">
            <img src="https://66.media.tumblr.com/d473794c94a3f3c7bc90c338dec52b53/tumblr_inline_o6jxtv20vt1ti90tv_250.gif" width="150px" height="150px">
          </div>
          <div class="bio" style="text-align:left;margin-left:18px;">
            <p><div class="question">name:</div> name here</p>
            <p><div class="question">age:</div> age here</p>
            <p><div class="question">prns:</div> prns here</p>
          </div>
          <div class="boxright">
            <p>hello put your about info here :) and eat worms</p>
          </div>
        </div>
      </div>
      <a href="/"><div class="link">
        <p><img src="https://66.media.tumblr.com/71e59aae5d60a316ba836143c79c7792/tumblr_inline_npk27nq8S51ry72eo_75sq.png"></p>
      </div></a>
    </div>
  </body>
</html>