2cljic

<style>
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Grandiflora+One');
@import url('https://fonts.googleapis.com/css?family=Figtree');
@import url('https://fonts.googleapis.com/css?family=Pathway+Extreme');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

/*BODY BACKGROUND*/
body {
background:#aeaeae;
background-position:center;
background-attachment:fixed;
background-repeat:no-repeat;
margin-left:0px;
}

.section2 {
position:absolute;
top:0%;
left:0%;
margin-top:175px;
margin-left:150px;
width:250px;
height:0px;
padding:10px;
word-spacing:1px;
z-index:2222;
overflow:hidden;
opacity:0;
filter: alpha(opacity=0.0);
background-color: #141318;
transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
}

.section2:target {
width: 250px;
height: 200px;
padding:10px;
z-index:3333;
opacity:1;
overflow:hidden;
filter:alpha(opacity1);
background-color: #6D5D6E;
}

/*LINKS HERE*/
a.first, a.first:link, a.first:active, a.first:visited {
text-decoration:none;
text-transform:uppercase;
background:#4F4557;
display:inline-block;
float:left;
padding:3px 2px;
margin:1px 1px;
font-family:'Figtree';
font-size:9px;
line-height:35px;
width:17%;
color:#F3DEBA;
text-align:center;
font-wight:lighter;
}
a.first:hover {
background:#ABC4AA;
color:#4F4557;
transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
}

a.second, a.second:link, a.second:active, a.second:visited {
text-decoration:none;
text-transform:uppercase;
background:#4F4557;
display:inline-block;
float:left;
font-family:consolas;
font-size:9px;
color:#F3DEBA;
width:49.5%;
margin:-1px 1px 10px 0px;
line-height:34px;
}

a.second:hover {
background:#ABC4AA;
color:#4F4557;
transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
}

a.third, a.third:link, a.third:active, a.third:visited {
text-decoration:none;
text-transform:uppercase;
background:#4F4557;
display:inline-block;
float:left;
font-family:consolas;
font-size:9px;
color:#F3DEBA;
width:49.5%;
margin:-1px 1px 10px 0px;
line-height:30px;
}
a.third:hover {
background:#ABC4AA;
color:#4F4557;
transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
}

/*MAIN TEXT*/
.text, table, tr, td, p, div, li {
font-family:Consolas;
font-size:9px;
line-height:10px;
text-align:justify;
color:#000;
}

/*HEADING & DECOR FONT STYLES*/
h1 {
font-family:'Raleway';
font-size:43px;
line-height:40px;
border-bottom:2px solid #F3DEBA;
padding:5px 5px 5px 5px;
color:#F3DEBA;
text-transform:uppercase;
font-weight:lighter;
margin:-5px 5px 5px 5px;
letter-spacing:-2px;
}

h1 span {
 font-family:'Raleway';
 font-size:45px;
 line-height:40px;
 color:#A9907E;
 font-weight:bolder;
}

h2 {
font-family:'Raleway';
font-size:21px;
line-height:30px;
border-bottom:2px solid #F3DEBA;
padding:5px 5px 5px 5px;
color:#F3DEBA;
text-transform:uppercase;
font-weight:lighter;
margin:-5px 5px 5px 5px;
letter-spacing:-2px;
}

h2 span {
 font-family:'Raleway';
 font-size:24px;
 line-height:30px;
 color:#A9907E;
 font-weight:bolder;
}

h3 {
font-family:consolas;
font-size:9px;
line-height:10px;
margin:5px 5px 3px 5px;
padding:10px 10px;
text-align:center;
background:#4F4557;
color:#ABC4AA;
text-transform:uppercase;
font-weight:lighter;
word-spacing:0px;
letter-spacing:1px;
}

h3 span {
color:#F3DEBA;
font-weight:bolder;
}

h4 {
font-family:'Grandiflora One';
font-size:15px;
line-height:25px;
text-align:center;
color:#ABC4AA;
text-transform:uppercase;
letter-spacing:-.5px;
background:#4F4557;
}

h5 {
font-family:consolas;
font-size:9px;
line-height:10px;
margin:2px 2px 1px 2px;
padding:5px 5px;
text-align:center;
background:#4F4557;
color:#ABC4AA;
text-transform:uppercase;
font-weight:lighter;
word-spacing:0px;
letter-spacing:1px;
}

h5 span {
color:#F3DEBA;
font-weight:bolder;
}

b {
font-family:'Pathway Extreme';
font-size:8.5px;
line-height:12px;
text-transform:;
font-weight:;
color:#ABC4AA;
}

strong {
font-family:;
font-size:;
line-height:;
text-transform:;
font-weight:;
color:;
}

i {
font-family:'Pathway Extreme';
font-size:8.5px;
line-height:12px;
text-transform:;
font-weight:;
color:#ABC4AA;
font-style:;
}

em {
font-family:;
font-size:;
line-height:;
text-transform:;
font-weight:;
color:;
font-style:;
}

u {
font-family:;
font-size:;
line-height:;
text-transform:;
font-weight:;
background:#6D5D6E;
color:#ABC4AA;
}

tt {
font-family:;
font-size:;
line-height:;
text-transform:;
font-weight:;
color:;
font-style:;
}

first {
font-family:'Figtree';
font-size:27px;
line-height:25px;
text-transform:uppercase;
font-weight:lighter;
color:#ABC4AA;
padding:10px 10px;
width:15%;
float:left;
}

/*HIDE CODES*/
.nametext{display:none;}
.profile {display:none;}
.profileInfo {display:none;}
.contactTable {display:none;}
.userProfileUrl{display:none;}
.userProfileDetail{display:none;}
.extendedNetwork{display:none;}
.latestBlogEntry {display:none;}
.orangetext15 {display:none;}
.blurbs {display:none;}
.friendSpace {display:none;}
.bottom {display:none;}
.friendsComments { display:none; }
#ctl00_cpMain_ctl01_UserFriends1_Tr1{display:none;}
#Status:Row {display:none;}
#Groups {display:none;}
#footerWarpper {display:none;}
#headerWrap {display:none;}
#leaderboard{display:none;}
#Table1 {display:none;}
#Table2 {display:none;}
table,td,tr{padding:0px;width:;background-color:transparent;}
table table div form {display:inline!important;}
td.text td.text table{display:none;}
table table table table td.text{display:none;}
td.text td.text table{display:none;}

.rightcolb1 {
position:absolute;
background:#ccc;
padding:5px;
width:500px;
height:100px;
top:0%;
left:0%;
margin-top:100px;
margin-left:600px;
overflow:hidden;
}

.rightcolb2 {
position:absolute;
background:#ccc;
padding:5px;
width:500px;
height:500px;
top:0%;
left:0%;
margin-top:220px;
margin-left:600px;
overflow:hidden;
}


.rightcolb3 {
position:absolute;
background:#ccc;
padding:5px;
width:500px;
height:250px;
top:0%;
left:0%;
margin-top:740px;
margin-left:600px;
overflow:hidden;
}

.rightcolb4 {
position:absolute;
background:#ccc;
padding:5px;
width:500px;
height:150px;
top:0%;
left:0%;
margin-top:1010px;
margin-left:600px;
overflow:hidden;
}

.rightcolb5 {
position:absolute;
background:#ccc;
padding:5px;
width:500px;
height:250px;
top:0%;
left:0%;
margin-top:1180px;
margin-left:600px;
overflow:hidden;
}

.rightcolb6 {
position:absolute;
background:#ccc;
padding:5px;
width:500px;
height:150px;
top:0%;
left:0%;
margin-top:1450px;
margin-left:600px;
overflow:hidden;
}

.rightcolb7 {
position:absolute;
background:#ccc;
padding:5px;
width:500px;
height:250px;
top:0%;
left:0%;
margin-top:1620px;
margin-left:600px;
overflow:hidden;
}

.rightcolb8 {
position:absolute;
background:#ccc;
padding:5px;
width:500px;
height:20px;
top:0%;
left:0%;
margin-top:1890px;
margin-left:600px;
overflow:hidden;
}

.rightcolb9 {
position:absolute;
background:#ccc;
padding:5px;
width:500px;
height:250px;
top:0%;
left:0%;
margin-top:1930px;
margin-left:600px;
overflow:hidden;
}





.leftcolb1 {
position:absolute;
background:#ccc;
padding:5px;
width:300px;
height:315px;
top:0%;
left:0%;
margin-top:100px;
margin-left:280px;
overflow:hidden;
}

.leftcolb2 {
position:absolute;
background:#ccc;
padding:5px;
width:300px;
height:200px;
top:0%;
left:0%;
margin-top:435px;
margin-left:280px;
overflow:hidden;
}

.leftcolb3 {
position:absolute;
background:#ccc;
padding:5px;
width:300px;
height:200px;
top:0%;
left:0%;
margin-top:655px;
margin-left:280px;
overflow:hidden;
}

.leftcolb4 {
position:absolute;
background:#ccc;
padding:5px;
width:300px;
height:200px;
top:0%;
left:0%;
margin-top:875px;
margin-left:280px;
overflow:hidden;
}

.leftcolb5 {
position:absolute;
background:#ccc;
padding:5px;
width:300px;
height:200px;
top:0%;
left:0%;
margin-top:1095px;
margin-left:280px;
overflow:hidden;
}

.leftcolb6 {
position:absolute;
background:#ccc;
padding:5px;
width:300px;
height:200px;
top:0%;
left:0%;
margin-top:1315px;
margin-left:280px;
overflow:hidden;
}

.leftcolb7 {
position:absolute;
background:#ccc;
padding:5px;
width:300px;
height:200px;
top:0%;
left:0%;
margin-top:1535px;
margin-left:280px;
overflow:hidden;
}

.leftcolb8 {
position:absolute;
background:#ccc;
padding:5px;
width:300px;
height:200px;
top:0%;
left:0%;
margin-top:1755px;
margin-left:280px;
overflow:hidden;
}

.leftcolb9 {
position:absolute;
background:#ccc;
padding:5px;
width:300px;
height:200px;
top:0%;
left:0%;
margin-top:1975px;
margin-left:280px;
overflow:hidden;
}

</style>

</table></td></tr></tbody></table><br><table width="300" bgcolor="ffcc99" border="0" bordercolor="ffffff" cellpadding="0" cellspacing="0"><tbody><tr><td><table width="300" align="left" bgcolor="ffffff" border="0" bordercolor="000000" cellpadding="0" cellspacing="0"><tbody><tr><td style="word-wrap: break-word;" valign="top" width="300" align="" bgcolor="ffffff">

<div class="rightcolb1"> name tag area/display name </div>

<div class="rightcolb2"> <img src="https://placehold.co/500" /> </div>

<div class="rightcolb3"> first about me w/image </div>

<div class="rightcolb4"> <img src="https://placehold.co/500x150" /> </div>

<div class="rightcolb5"> image with about me #2 </div>

<div class="rightcolb6">  <img src="https://placehold.co/500x150" /> </div>

<div class="rightcolb7"> love interest </div>

<div class="rightcolb8"> <img src="https://placehold.co/500x15" /> </div>

<div class="rightcolb9"> small area for connection and links </div>



</table></td></tr></tbody></table><br><table width="300" bgcolor="ffcc99" border="0" bordercolor="ffffff" cellpadding="0" cellspacing="0"><tbody><tr><td><table width="200" align="left" bgcolor="ffffff" border="0" bordercolor="000000" cellpadding="0" cellspacing="0"><tbody><tr><td style="word-wrap: break-word;" valign="top" width="200" align="" bgcolor="ffffff">

<div class="leftcolb1">  <img src="https://placehold.co/300x315" />  </div>

<div class="leftcolb2"> navigation urls </div>

<div class="leftcolb3"> basic info </div>

<div class="leftcolb4"> <img src="https://placehold.co/300x200" /> </div>

<div class="leftcolb5"> magic info </div>

<div class="leftcolb6"> <img src="https://placehold.co/300x200" /> </div>

<div class="leftcolb7"> hogwarts house </div>

<div class="leftcolb8"> <img src="https://placehold.co/300x200" /> </div>

<div class="leftcolb9"> extra section </div>

<div class="rightcolb9">small area for connection and links</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p></p>
<table bgcolor="ffcc99" border="0" cellpadding="0" cellspacing="0" width="300">
<tbody>
<tr>
<td>
<table align="left" bgcolor="ffffff" border="0" cellpadding="0" cellspacing="0" width="200">
<tbody>
<tr>
<td bgcolor="ffffff" style="word-wrap: break-word;" valign="top" width="200">
<div class="leftcolb1"><img src="https://placehold.co/300x315" /></div>
<div class="leftcolb2">navigation urls</div>
<div class="leftcolb3">basic info</div>
<div class="leftcolb4"><img src="https://placehold.co/300x200" /></div>
<div class="leftcolb5">magic info</div>
<div class="leftcolb6"><img src="https://placehold.co/300x200" /></div>
<div class="leftcolb7">hogwarts house</div>
<div class="leftcolb8"><img src="https://placehold.co/300x200" /></div>
<div class="leftcolb9">extra section</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>