Words Code - Philip

<style>

@import url('https://fonts.googleapis.com/css?family=Homemade+Apple&display=swap');

body {background: #57ABD0;}
::-webkit-scrollbar {display:none}

h1 {font-size: 10px; text-align: center; font-style: italic; letter-spacing: 3px; text-shadow: 2px 2px #E0EBE7; text-transform: lowercase;}
b {font-variant: small-caps;}
a {text-decoration: none; color: #BED5CD;}
a:hover {color: #507590;}
a.coded {text-decoration: none; color: #fff;}
a.coded:hover {color: #57ABD0;}

.container {position: fixed;
height: 648px;
width: 940px;
margin: auto;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}

.image {position: absolute;
background: url('https://i.imgur.com/HaUPVKV.jpg') no-repeat;
background-size: 1100px;
background-position: -70px 0px;
height: 570px;
width: 900px;
left: 0px;
bottom: 0px;
border: 20px solid #fff;
box-shadow: 0px 0px 30px #145F7C;
}

.box {position: absolute;
background: #fff;
height: 200px;
width: 530px;
left: 175px;
top: -60px;
}

.box2 {position: absolute;
border: 1px solid #E0EBE7;
height: 157px;
width: 488px;
left: 20px;
bottom: 20px;
}

.name2 {position: absolute;
font-family: 'Homemade Apple', cursive;
font-size: 38px;
color: #E0EBE7;
width: 488px;
text-align: center;
left: 0px;
top: 15px;}

.name {position: absolute;
font-family: Georgia;
font-size: 15px;
color: #507590;
letter-spacing: 10px;
width: 488px;
text-align: center;
left: 0px;
top: 15px;
}

.stats {position: absolute;
overflow: auto;
font-family: Georgia;
font-size: 10px;
color: #507590;
line-height: 15px;
text-align: justify;
letter-spacing: 1px;
height: 85px;
width: 170px;
left: 20px;
bottom: 20px;
}

.text {position: absolute;
overflow: auto;
font-family: Georgia;
font-size: 10px;
color: #507590;
line-height: 15px;
text-align: justify;
letter-spacing: 1px;
height: 85px;
width: 250px;
right: 20px;
bottom: 20px;
}

.coder {position: absolute;
font-family: 'Homemade Apple', cursive;
font-size: 20px;
color: #000;
-webkit-text-stroke: 1px #fff;
right: 15px;
bottom: 10px;
}

</style>

<div class="container">
<div class="image">
<div class="box">
<div class="box2">
<div class="name2">philip fitzpatrick
<div class="name">PHILIP FITZPATRICK</div></div>

<div class="stats">
<h1>statistics</h1>
<font style="float:left"><b>name</b></font> <font style="float:right">Philip Lionel Fitzpatrick</font><br>
<font style="float:left"><b>alias</b></font> <font style="float:right">Fitz</font><br>
<font style="float:left"><b>statistic</b></font> <font style="float:right">Answer</font><br>
<font style="float:left"><b>statistic</b></font> <font style="float:right">Answer</font><br><br>

<font style="float:left"><b>statistic</b></font> <font style="float:right">Answer</font><br>
<font style="float:left"><b>statistic</b></font> <font style="float:right">Answer</font><br>
<font style="float:left"><b>statistic</b></font> <font style="float:right">Answer</font><br>
<font style="float:left"><b>statistic</b></font> <font style="float:right">Answer</font><br>
</div>

<div class="text">
<h1>header</h1>
Hi. This is where you'd write a little something about your character. The box scrolls, so write as little or as much as you'd like. This is <b>Bold</b>, <i>Italics</i>, and a <a>Link.</a>
</div>

</div></div>

<div class="coder"><a class="coded" href="">words</a></div>