code

<style>
@import url(https://fonts.googleapis.com/css?family=Quicksand);
@import url('https://fonts.googleapis.com/css?family=Satisfy');

.pfor {display:none;}

#profile{
 background-color:transparent;
 border:transparent;
 }



body{
background-color: white;}



#img{
position: absolute;
border: 0px solid black;
border-radius: 0px 0px;
bottom: 0px;
left: 0px;

}

#box2{
width: 380px;
height: 230px;
text-shadow: #000 -1px 0px, #000 0px 1px, #000 1px 0px, #000 0px -1px;
border-radius: 0px 0px;
position: absolute;
TOP: 80px;
right: 435px;
font-family: 'Quicksand', sans-serif;
alignment:justify;
border: 0px solid #2e3234;
padding:10px;
font-color:black;
}


#box3{
width: 380px;
height: 50px;
text-shadow: #e2d8bd -1px 0px, #e2d8bd 0px 1px, #e2d8bd 1px 0px, #e2d8bd 0px -1px;
line-height: 9px;
border-radius: 0px 0px;
position: absolute;
bottom: 15px;
left: 35px;
font-family: 'Quicksand', sans-serif;
alignment:justify;
border: 0px solid #2e3234;
padding:10px;
font-color:black;
}

#box1{
width: 1000px;
height: 500px;
background-image:url('picture');
background-size:60%;
background-color: #75588E;
background-repeat: no-repeat;
background-position: 100% 43%;
position: absolute;
top: 12%;
right: -50%;
left: 50%;
transform: translate(-50%, -0%);
border: 2px solid black;
border-radius: 0px 00px;
padding:0px;
}
</style>
<center><div id="box1"><p style="text-align: justify;">

<div id="box2">
<p style="margin-top: 0px; text-align: center;"><span style="font-family: 'Satisfy', cursive; font-size: 30pt; color: gold;"> Main title</span></p>
<p style="margin-top: -10px; text-align: center;"><span style="font-size: 9pt; color: gold;"> Little tidbits of info</span></p>
<p style="margin-top: -15px; text-align: center;"><span style="font-size: 9pt; color: gold;">More tidbits of info</span></p>

<p style="line-height: 9px; margin-top: -10px; text-align: center;"><span style="font-size:9pt; color: gold;">
History or w/e you want</p></span>
</div>
</div>