layout1

<style type="text/css">

body {
background-color: pink;
background-image: url(http://images2.layoutsparks.com/1/225612/simple-plain-grey-stripes.jpg);
background-repeat: no-repeat;
background-position: bottom left;
background-size: 100%;
background-attachment: fixed;
overflow: hidden;  }

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

.pfor {display: none;}



 #boxlin{
background color: #ffffff;
                text-align:center;
                opacity:1;
                -webkit-transition: all 0.7s ease-in-out;
                -moz-transition: all 0.7s ease-in-out;
                -o-transition: all 0.7s ease-in-out;
                -ms-transition: all 0.7s ease-in-out;
                transition: all 0.7s ease-in-out;
                height: 300px;
                width: 200px;
                position: absolute;
                top: 80px;
                left: 120px;
                border: 1px solid #FFFFFF;
                z-index:3;
        }
        #boxlin a{
                margin-bottom:7px;
                width:200px;
                height:15px;
                font-family: Helvetica;
                text-align:center;
                font-size:12px;
                letter-spacing:1px;
                color:#000;
                -webkit-transition: all 0.5s ease-in-out;
                -moz-transition: all 0.5s ease-in-out;
                -o-transition: all 0.5s ease-in-out;
                -ms-transition: all 0.5s ease-in-out;
                transition: all 0.5s ease-in-out;
                background-color: white;
                text-decoration: none;
                display: inline-block;
        }

        #boxlin a:hover{
                color: white;
                background-color: pink;
                text-transform:;
                letter-spacing:1px;
                text-align:center;
                text-decoration: none;
                font-family: Helvetica;
                font-size: 12px;
        }


#box1 {
                font-family: cursive;
                font-size: 10px;
color:000000;
                font-weight: lighter;
                text-transform: none;
                background-color: #ffffff;
                text-align: left;
                height: 550px;
                width: 300px;
                border: 1px solid #FFFFFF;
                align: left;
                overflow: auto;
                position: absolute;
                left: 331px;
                top: 80px;
                z-index:3;
        }

#box2 {

                background-color: #FFFFFF;
                height: 500px;
                width: 450px;
                background:url('');
                background-size: 100%;
                background-repeat: no-repeat;
                position: absolute;
                top: 80px;
                left: 641px;
                border: 1px solid #FFFFFF;
                z-index:3;
        }

#box3 {

                background-color: pink;
                height: 620px;
                width: 991px;
                background:url('http://i.imgur.com/bDivGuS.gif');
                background-size: 100%;
                position: absolute;
                top: 70px;
                left: 110px;
                border: 1px solid #FFFFFF;
                z-index:1;
        }



#box4 {

                background-color: pink;
                background:url('http://38.media.tumblr.com/7a77c6395a5b36b759bfff09dc5f134c/tumblr_n48uluGbrf1sozv4xo5_250.gif');
                background-size: 100%;
                height: 260px;
                width: 200px;
                position: absolute;
                top: 320px;
                left: 120px;;
                border: 1px solid #FFFFFF;
                z-index:1;
        }



b {
color: #000000;
font-family:georgia;
font-weight:bold;
font-size:10px;
letter-spacing: 1px;
}

i{
color:#000000;
font-family:georgia;
font-weight:light;
letter-spacing: 1px;
font-size:10px;
font-style:italic;
}

u{
text-decoration:none;
border-bottom:1px dotted #9188a7;
}

</style>


<div id="box1">


        <div style="height: 400px; overflow-y: hidden;">
        <a name="01"></a>
        <div style=" height: 400px; overflow: auto;" align="left">
         <br><br><br><center>

<br><b>Name:</b> Katerina<br>
<br><b>Gender:</b> Female <br>
<br><b>Age:</b> 22 <br>
<br><b>Height:</b> 5'8 <br>
<br><b>Weight:</b> 133 lbs. <br>
<br><b>Orientation:</b> Omnisexual <br>
<br><b>Position:</b> Switch <br>



</center>


        </div>


<div style="height: 400px; overflow-y: hidden;">
        <a name="02"></a>
        <div style=" height: 400px; overflow: auto;" align="center">
<center><br>
<br><b>Background</b><br><br>








</center>
        </div></div>



<div style="height: 400px; overflow-y: hidden;">
        <a name="03"></a>
        <div style=" height: 400px; overflow: auto;" align="center">
<center><br>
<br><b>Friends</b><br><br>

<a href="enter the url for friend in here" target"_blank>FRIEND NAME GOES HERE</a>, brief description of friend here.
<br><br>

<a href="enter the url for friend in here" target"_blank>FRIEND NAME GOES HERE</a>, brief description of friend here.
<br><br>

<a href="enter the url for friend in here" target"_blank>FRIEND NAME GOES HERE</a>, brief description of friend here.
<br><br>

<a href="enter the url for friend in here" target"_blank>FRIEND NAME GOES HERE</a>, brief description of friend here.
<br><br>

<a href="enter the url for friend in here" target"_blank>FRIEND NAME GOES HERE</a>, brief description of friend here.
<br><br>

</center>
        </div></div>



       <div style="height: 400px; overflow-y: hidden;">
        <a name="04"></a>
        <div style=" height: 400px; overflow: auto;" align="left">
<center>
<br><b>Gallery</b><br><br>




        </div></div>







 <div style="height: 400px; overflow-y: hidden;">
        <a name="05"></a>
        <div style=" height: 400px; overflow: auto;" align="left">
<center>
<br><b>OOC</b><br><br>



https://www.f-list.net/c/naomi%20flynn/

        </div></div></div></div>

<div id="boxlin">
<br>
        <a href="#01" class="boxlin">Statistics</a>
<br><br>
        <a href="#02" class="boxlin">About</a>
<br><br>
        <a href="#03" class="boxlin">Friends</a>
<br><br>
        <a href="#04" class="boxlin">Gallery</a>
<br><br>
        <a href="#05" class="boxlin">OOC</a>

 </div>

<div id="box2">
</div>

<div id="box3">
</div></div>


<div id="box4">
</div>


</center></div></center></div></center></div></center>