<!DOCTYPE html>
<html>
<head>
<title>Basic Web Page</title>
<meta name="viewport" content="width=device-width,initial-scale=1" >
body {
background: #fff;
color: #fff;
padding: 25px;
font-family: sans-serif;
text-align:center;
}

#name {
color:black;
text-align:center;
margin:bottom:30px;
font-size:75px;
font-family: 'Blaka Hollow', cursive;
}

#person {
position:absolute;
margin-left:200px;
}

#head {
background-color:yellow;
width:200px;
height:200px;
position:relative;
border: 4px solid black;
}

#face {
color:black;
font-size:50px;
z-index: 1000000000;
text-align: center;
vertical-align: middle;
position:absolute;
left:0px;
top:-90px;
}

#hair {
color:brown;
}

#upperBody {
position:absolute;
}

#lowerBody {
position:absolute;
}

#torso {
background-color:black;
color:white;
width:200px;
height:300px;
position:absolute;
top:-60px;
border: 4px solid grey;
z-index:1000000;
text-align:center;
font-size:60px;
}

#leftArm {
background-color:black;
width:100px;
height:150px;
position:absolute;
right:0px;
top:-15px;
border: 4px solid black;
}

#rightArm {
background-color:black;
width:100px;
height:150px;
position:absolute;
left:207px;
border: 4px solid black;
top:-15px;
}

#leftHand {
background-color:yellow;
width:100px;
height:50px;
position:absolute;
right:0px;
top:135px;
border: 4px solid black;
}

#rightHand {
background-color:yellow;
width:100px;
height:50px;
position:absolute;
left:207px;
top:135px;
border: 4px solid black;
}

#leftLeg {
background-color:black;
width:100px;
height:150px;
position:relative;
right:0px;
top:115px;
border: 4px solid grey;
z-index:1000000000;
}

#rightLeg {
background-color:black;
width:100px;
height:150px;
position:relative;
left:100px;
top:290px;
border: 4px solid grey;
z-index:1000000000;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Blaka+Hollow&display=swap" rel="stylesheet">
</head>
<body>
<p id="name">Geoff "the Noob" Bobson!</p>
<div id="person">
<div id="head">
<p id="face"><span id="hair">\\\\\\\\\\\\\\</span><br><br>
OO<br>
|¬|
</p>
</div>
<div id="upperBody">
<p id="leftArm"></p>
<p id="leftHand"></p>
<p id="torso"><br>OO<br>
{ \/ }</p>
<p id="rightArm"></p>
<p id="rightHand"></p>
</div>
<div id="lowerBody">
<p id="rightLeg"></p>
<p id="leftLeg"></p>
</div>
</div>

<script src="script.js"></script>
</body>
</html>