Interface
[img]http://i40.servimg.com/u/f40/12/40/52/77/screen10.jpg[/img]
[spoiler]

[url=http://h1.ripway.com/MargZ/Overlay/Interface/Interface.html]Live Preview[/url]
<HTML>
<HEAD>
<TITLE>Interface</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">td img {display: block;}</style>
<!--- Photo Gallery ---->
<style>
.boxcontent { padding: 0px 0px; }
.flogrid75, .flogridp { zoom: 1; }
.flogrid75:after, .flogridp:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.flogridp { margin-right: 0px; margin-left: 0px; }
.flogridp .flogriditem { background-color:#000000; margin-right: 0px; width: 65px; height: 65px; }
.flogrid75 .flogriditem { width: 65px; }
.flogridp .ir { width: 65px; height: 65px; margin: 0px 0 0 4px; }
.flogridp .ir img { margin: 0 auto; height: 65px; width: 60px}
</style>
<!-- Featured friends skin-->
<style type="text/css">
/** images **/
.ir img {
height:50px;
width:50px;
border:#FFFFFF 1px solid;
}
.ir a:hover img {
border:#FFFFFF 1px solid;
}
/** caption **/
.dr a {
font-size: 10px;
text-align: center;
text-decoration: none;
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
display:none;
}
.dr a:hover {
font-weight: bold;
}
.flogriditem {
float: left;
margin: 0px -5px 0px 0px;
}
</style>
<!-- Main Photo Skin-->
<style>
#automainphotoid img {
width:100px;height:100px;
border:#999999 1px solid;
}
</style>
<!--- Testimonials CSS----->
<style type="text/css">
/** pics **/
.imgblock75 img{
height:66px;
width:66px;
overflow: hidden;
border:#999999 px solid;
margin: 0 auto;
}
.imgblock75 a:hover img {
border:#FFFFFF px solid;
}
.itd{
vertical-align:top;
}
/** testimonial contents **/
.dtd{
padding-left:10px;
padding-bottom:10px;
margin-bottom:0px;
margin-left: 5px;
margin-right: 5px;
text-align:justify;
text-decoration:none;
color:#999999!important;
font-size:11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/** names **/
.title a:visited, .title a:link{
text-decoration:none;
color:#FFFFFF!important;
font-size:10px;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.title a:hover{
color:#FFFFFF!important;
text-decoration: none;
font-weight:bold;
font-size:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/** view all and add a testimonial links **/
.viewall a{
font-size: 11px;
color: #FFFFFF!important;
text-decoration: none;
font-size:10px;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.viewall a:hover{
font-size:10px;
text-decoration: none;
color:#FFFFFF!important;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.viewall{
font-size:10px;
text-decoration: none;
color:#FFFFFF!important;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h2{
display:none;
}
.data li{
list-style-type:none;
}
.data{
padding:0;
margin:0;
}
</style>
<!---------- Body ----------------->
<style type="text/css">
BODY
{
scrollbar-face-color: #151515;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #FFCC33;
scrollbar-track-color: #000000;
color:#00FFCC;
border-style:solid;
border-left-width:0px;
border-right-width:0px;
border-color:#000000;
}
<style type="text/css">
<!--
.style99 {font-size: 12px; font-family: verdana;}
.style101 {
font-size: 11px;
color: #E9B95A;
text-decoration: none;
}
.style109 {
color: #E9B95A;
text-decoration: none;
}
.style110 {
color: #E9B95A;
text-decoration: none;
}
.style111 {font-size: 10px}
.style113 {
color: #FFFFFF;
text-decoration: none;
font-family: verdana;
}
.style114 {text-decoration: none; color: #FFFFFF;}
#AUSOid {font-family:"Verdana"; font-size:10px; color:#999999}
.style120 {
color: #E9B95A;
font-size: 12px;
font-family: verdana;
}
.style115 {color: #999999;
font-family: verdana;
font-size: 11px;
}
.style116 {color: #FFFFFF;
font-size: 10px;
}
.style117 {color: #FFCC33;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.style118 {
color: #FFFFFF;
text-decoration: none;
}
.style84 {color: #999999;
font-family: verdana;
font-size: 11px;
}
.style86 {color: #FFFFFF;
font-size: 10px;
}
.style122 {color: #FFFFFF; font-family: verdana; font-size: 11px; }
.style125 {font-family: verdana; font-size: 10px; color: #FFFFFF; }
<style type="text/css">
<!--
.style115 {color: #999999;
font-family: verdana;
font-size: 11px;
}
.style116 {color: #FFFFFF;
font-size: 10px;
}
.style117 {color: #FFCC33;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.style118 { color: #FFFFFF;
text-decoration: none;
}
.style122 {color: #FFFFFF; font-family: verdana; font-size: 11px; }
.style125 {font-family: verdana; font-size: 10px; color: #FFFFFF; }
.style84 {color: #999999;
font-family: verdana;
font-size: 11px;
}
.style86 {color: #FFFFFF;
font-size: 10px;
}
#AUSOid {font-family:"Verdana"; font-size:10px; color:#999999}
-->
</style>
</HEAD>
<center>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<div id="Layer1">
<!-- ImageReady Slices (Interface.psd) -->
<TABLE WIDTH=999 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD ROWSPAN=2>
<IMG SRC="images/Interface_01.gif" WIDTH=503 HEIGHT=650 BORDER=0 ALT="" USEMAP="#Interface_01_Map"></TD>
<TD>
<IMG SRC="images/Interface_02.gif" WIDTH=496 HEIGHT=312 BORDER=0 ALT="" USEMAP="#Interface_02_Map"></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/Interface_03.gif" WIDTH=496 HEIGHT=338 ALT=""></TD>
</TR>
</TABLE>
<MAP NAME="Interface_01_Map">
<AREA SHAPE="rect" ALT="" COORDS="270,538,433,555" HREF="http://www.friendster.com/insensitivemargz" TARGET="_blank">
<AREA SHAPE="rect" ALT="" COORDS="193,141,306,166" HREF="http://www.friendster.com/profile.php" TARGET="_self">
<AREA SHAPE="rect" ALT="" COORDS="79,148,168,232" HREF="http://www.friendster.com/home.php" TARGET="_self">
<AREA SHAPE="rect" ALT="" COORDS="279,94,448,123" HREF="http://x-music.friendhood.net/index.htm" TARGET="_blank">
</MAP>
<MAP NAME="Interface_02_Map">
<AREA SHAPE="rect" ALT="" COORDS="320,151,425,252" HREF="http://www.friendster.com/logout.php" TARGET="_self">
<AREA SHAPE="rect" ALT="" COORDS="119,138,286,165" HREF="http://www.friendster.com/viewphotos.php" TARGET="_self">
</MAP>
<!-- End ImageReady Slices -->
<div id="X-MusiC" style="position:absolute; overflow:auto; left:354px; top:200px; width:425px; height:223px; z-index:32;filter:Chroma(Color=#333333)">
<table bgcolor="#000000" border="1" bordercolor="#000000" width="425" height="15" cellspacing="0">
<td bgcolor="#171717"><span class="style122">About Me </span> </td>
</table>
<br>
<!------------------------------------>
<!---------MAin Photo ---------------->
<!------------------------------------>
<div id="MAin Photo" style="position:absolute; overflow:auto; left:9px; top:31px; width:121px; height:121px; z-index:19">
<center>
<script language="JavaScript" type="text/javascript">
automainphoto="yes"
</script>
<div id="automainphotoid" style="height:100px;width:100px"></div>
<!------------------------------------>
<!---------View All Photos ----------->
<!------------------------------------>
<a href="http://www.friendster.com/photos/USERID" target="_top" class="style117 style118">View photos </a>
</center>
</div>
<!------------------------------------>
<!--------Edit Your Profile Here ----->
<!------------------------------------>
<div id="Profile1" style="position:absolute; overflow:hidden; left:133px; top:36px; width:243px; height:125px; z-index:19">
<p align="left" class="style115"> <span class="style116">NAME:</span> NAME <br>
<span class="style116">AGE:</span> AGE <br>
<span class="style116">GENDER:</span> GENDER <br>
<span class="style116">STATUS:</span> STATUS <br>
<span class="style116">LOCATION:</span> LOCATION <br>
<span class="style116">HOMETOWN:</span> HOMETOWN <br>
<span class="style116">MEMBER SINCE:</span> MEMBER SINCE </p>
</div>
<div align="left"> <span class="style84"><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</span>
<!------------------------------------------------------->
<!----Replace USERID with your Userid (e.g. 3560413 ----->
<!------------------------------------------------------->
<span class="style122">Shoutout: </span><br>
<script language=javascript>
AUSO="yes";
</script>
<div id=AUSOid></div>
<br>
<table width="234" height="77" border="1" cellspacing="0" bordercolor="#000000" bgcolor="#333333">
<tr>
<td width="112" bordercolor="#000000" bgcolor="#272727"><div align="center" class="style125"> <a href="http://www.friendster.com/sendmessage.php?uid=USERID" class="style118">Send Message </a> </div></td>
<td width="112" bordercolor="#000000" bgcolor="#272727"><div align="center" class="style125"> <a href="http://www.friendster.com/sendmessage.php?uid=USERID&action=sendsmile" class="style118">Send a Smile </a> </div></td>
</tr>
<tr>
<td bordercolor="#000000" bgcolor="#272727"><div align="center" class="style125"> <a href="http://USERNAME.blogs.friendster.com/my_blog/" class="style118">View Blog </a></div></td>
<td bordercolor="#000000" bgcolor="#272727"><div align="center" class="style125"><a href="http://www.friendster.com/referafriend.php?refer=USERID" class="style118">Forward to Friend </a> </div></td>
</tr>
<tr>
<td bordercolor="#000000" bgcolor="#272727"><div align="center" class="style125"> <a href="http://www.friendster.com/group/inviteone.php?uid=USERID" class="style118">Invite to Group </a> </div></td>
<td bordercolor="#000000" bgcolor="#272727"><div align="center" class="style125"><a href="http://www.friendster.com/comments.php?uid=USERID" class="style118">Add Comment </a> </div></td>
</tr>
<tr>
<td bordercolor="#000000" bgcolor="#272727"><div align="center" class="style125"> <a href="http://www.friendster.com/bookmarks.php?action=add&uid=USERID" class="style118">Add Bookmark </a> </div></td>
<td bordercolor="#000000" bgcolor="#272727"><div align="center" class="style125">
<script language=javascript>
FAlink="yes";
FAucode='<font style=" text-decoration:none; font-size:10px" color="#FFFFFF" face="verdana" >Add as a Friend</font>';
</script>
<div id=FAlinkid></div>
</div></td>
</table>
<br>
<div id="content_1"></div>
<script language="javascript">
module1="yes";
</script>
<br>
<!------------------------------------>
<!--------Edit Your Profile Here ----->
<!------------------------------------>
<span class="style84"> <span class="style86">Schools (others):<br>
</span>Blah Blah Blah<br>
<br>
<span class="style86">Occupation:<br>
</span>Blah Blah Blah<br>
<br>
<span class="style86">Affiliations:<br>
</span>Blah Blah Blah<br>
<br>
<span class="style86">Companies:<br>
</span>Blah Blah Blah<br>
<br>
<span class="style86">Hobbies and Interest:<br>
</span>Blah Blah Blah<br>
<br>
<span class="style86">Favorite Book:<br>
</span>Blah Blah Blah<br>
<br>
<span class="style86">Favorite Music:<br>
</span>Blah Blah Blah<br>
<br>
<span class="style86">Favorite Movies:<br>
</span>Blah Blah Blah<br>
<br>
<span class="style86">Favorite TV shows:<br>
</span>Blah Blah Blah<br>
<br>
<span class="style86">About me:<br>
</span>Blah Blah Blah<br>
<br>
<span class="style86">Who I want to meet:<br>
</span>Blah Blah Blah<br>
<br>
</span> <br>
<table bgcolor="#333333" border="1" bordercolor="#191919" width="425" height="15" cellspacing="0">
<td bgcolor="#171717"><span class="style115 style118">My Friends </span> </td>
</table>
<br>
<br>
<center>
<div id="content_2"></div>
<script language="javascript">
module2="yes";
</script>
</center>
<br>
<!------------------------------->
<!------- Testimonials ---------->
<!------------------------------->
<table bgcolor="#333333" border="1" bordercolor="#191919" width="425" height="15" cellspacing="0">
<td bgcolor="#171717"><span class="style115 style118">Testimonials/Comments </span> </td>
</table>
<div id="content_18" style="margin-right:5"></div>
<script language="javascript">
module18="yes";
</script>
</div>
</div>
</div>
</BODY>
</center>
</HTML>
[/spoiler]
Last edited by MargZ (2008-06-02 23:52:39)