Custom Order - Dani - Writing Snippet

<style type="text/css">

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap');

.bodyBackground{
width:500px;
height:831px;
padding:20px;
background-image:url('https://i.imgur.com/ivK37DX.png');
}


.nameSpaceInner{
width:460px;
padding:20px;
background:#2e2e2e;
border: solid 4px #b38663;
}

h1{
width: 460px;
color: #fff;
text-transform: uppercase;
margin: 0;
font-size: 53px;
text-align: center;
font-family: 'Raleway', sans-serif;
}

h2{
width: 188px;
margin: 0;
background-color: #b38663;
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
text-align: center;
margin-bottom: 10px;
font-size: 20px;
color: #ffffff;
padding: 9px;
margin-top: 10px;
}

.pictureBorder{
margin-top:10px;
border: solid 4px #b38663;
}

.linkHolder{
margin-top:10px;
border: solid 4px #b38663;
width:460px;
padding:20px;
background:#2e2e2e;
}

a.navigationLink:link, a.navigationLink:visited {
color: #fff;
text-transform: uppercase;
font-family: georgia;
font-size: 12px;
padding-left: 5px;
text-decoration: none;
}

a.navigationLink:hover, a.navigationLink:active {
color: #2e2e2e;
}

.drabbleSection{
font-family:Georgia;
font-size:12px;
color:#fff;
text-align:justify;
width:250px;
padding:20px;
overflow:auto;
height:250px;
background:#2e2e2e;
border: solid 4px #b38663;
margin-top:10px;
display:inline-block;
vertical-align:top;
}

.drabblePicture{
font-family:Georgia;
font-size:12px;
color:#fff;
text-align:justify;
width:140px;
padding:20px;
overflow:auto;
height:250px;
background:#2e2e2e;
border: solid 4px #b38663;
margin-top:10px;
display:inline-block;
vertical-align:top;
margin-right:10px;
}

.aboutDani{
margin-left:-8px;
width:223px;
height:200px;
background:#2e2e2e;
vertical-align:top;
display:inline-block;
border: solid 4px #b38663;
overflow:auto;
margin-top:10px;
font-family:Georgia;
font-size:12px;
color:#fff;
text-align:justify;
padding-left:5px;
padding-right:5px;
}

.owesList{
width:223px;
height:200px;
background:#2e2e2e;
vertical-align:top;
display:inline-block;
border: solid 4px #b38663;
overflow:auto;
margin-left:10px;
margin-top:10px;
font-family:Georgia;
font-size:12px;
color:#fff;
text-align:justify;
padding-left:5px;
padding-right:5px;
}
</style>
<center>
<div class="bodyBackground">
<div class="nameSpaceInner">
<h1>Dani Powers</h1>
</div>
<img class="pictureBorder" src="https://i.imgur.com/gG4HXXq.png" />
<div class="linkHolder"><a class="navigationLink" href="">home</a> <a class="navigationLink" href="">message</a> <a class="navigationLink" href="">comment</a> <a class="navigationLink" href="">rules</a> <a class="navigationLink" href="">stream</a> <a class="navigationLink" href="">drabbles</a> <a class="navigationLink" href="">credit</a></div>

<div class="drabblePicture"><img src="https://i.imgur.com/MtfrKsf.png" /></div>

<div class="drabbleSection">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tristique senectus et netus et malesuada. Quis commodo odio aenean sed adipiscing diam donec adipiscing. Cras ornare arcu dui vivamus arcu felis. Luctus venenatis lectus magna fringilla urna porttitor. Tellus molestie nunc non blandit massa enim nec dui. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Sem fringilla ut morbi tincidunt augue interdum. Enim eu turpis egestas pretium. Non consectetur a erat nam at lectus urna. Sed faucibus turpis in eu. Proin libero nunc consequat interdum varius sit amet mattis. Turpis in eu mi bibendum neque egestas. Augue ut lectus arcu bibendum. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Vitae congue mauris rhoncus aenean vel.<br /><br />Egestas maecenas pharetra convallis posuere. Arcu vitae elementum curabitur vitae nunc. A diam sollicitudin tempor id eu nisl nunc mi ipsum. Cursus sit amet dictum sit. Tincidunt arcu non sodales neque sodales ut etiam sit. Nulla aliquet enim tortor at auctor. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Aliquam id diam maecenas ultricies mi. Augue ut lectus arcu bibendum at varius. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Nullam eget felis eget nunc lobortis. Sed risus ultricies tristique nulla. Vitae tortor condimentum lacinia quis vel eros donec ac. Sagittis purus sit amet volutpat consequat mauris nunc congue.<br /><br />Eleifend donec pretium vulputate sapien nec sagittis. Metus vulputate eu scelerisque felis imperdiet proin fermentum. Amet est placerat in egestas. Sit amet mauris commodo quis. Ultrices eros in cursus turpis massa tincidunt dui. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing. Tempor nec feugiat nisl pretium fusce id velit ut. Egestas sed tempus urna et pharetra pharetra massa massa ultricies. Ut etiam sit amet nisl purus in mollis nunc sed.<br /><br />Risus in hendrerit gravida rutrum quisque non tellus. Vulputate eu scelerisque felis imperdiet proin fermentum leo vel orci. Aliquam etiam erat velit scelerisque in dictum non. Non blandit massa enim nec dui nunc mattis. Auctor neque vitae tempus quam pellentesque. Mauris nunc congue nisi vitae suscipit tellus mauris. Lorem dolor sed viverra ipsum nunc. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. Tellus rutrum tellus pellentesque eu tincidunt tortor. Donec enim diam vulputate ut pharetra sit.<br /><br />Massa tincidunt dui ut ornare lectus. Nisi quis eleifend quam adipiscing vitae. Elementum eu facilisis sed odio morbi. Euismod quis viverra nibh cras pulvinar mattis nunc. Elementum pulvinar etiam non quam lacus. Facilisis leo vel fringilla est ullamcorper eget nulla. Nec feugiat nisl pretium fusce id velit ut. Est velit egestas dui id ornare. Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Suscipit adipiscing bibendum est ultricies integer quis auctor elit. Molestie at elementum eu facilisis sed odio morbi.</div>
&nbsp;

<div class="aboutDani">
<h2>About Dani</h2>
Massa tincidunt dui ut ornare lectus. Nisi quis eleifend quam adipiscing vitae. Elementum eu facilisis sed odio morbi. Euismod quis viverra nibh cras pulvinar mattis nunc. Elementum pulvinar etiam non quam lacus. Facilisis leo vel fringilla est ullamcorper eget nulla. Nec feugiat nisl pretium fusce id velit ut. Est velit egestas dui id ornare. Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Suscipit adipiscing bibendum est ultricies integer quis auctor elit. Molestie at elementum eu facilisis sed odio morbi.</div>

<div class="oweslist">
<h2>I owe you</h2>
<i>name</i> - <b>starter/reply</b> - 00/00<br /><i>name</i> - <b>starter/reply</b> - 00/00<br /><i>name</i> - <b>starter/reply</b> - 00/00<br /><i>name</i> - <b>starter/reply</b> - 00/00<br /><i>name</i> - <b>starter/reply</b> - 00/00

<h2>You owe me</h2>
<i>name</i> - <b>starter/reply</b> - 00/00<br /><i>name</i> - <b>starter/reply</b> - 00/00<br /><i>name</i> - <b>starter/reply</b> - 00/00<br /><i>name</i> - <b>starter/reply</b> - 00/00<br /><i>name</i> - <b>starter/reply</b> - 00/00</div>
</div>
</center>