Fransiska: Februari 2011

Gambar tampilan face-mu
source code html:
<!DOCTYPE html>
<html lang="id">
<head>
<title>Selamat Datang di Face-mu - Masuk, Daftar, atau Pelajari Selengkapnya</title>
<link rel="shortcut icon" href="images/icon.png">
<style type="text/css">
<!--
body{
 font-family:Arial;
 font-size:11px;
 color:#333;
 margin:0;
 padding:0;
 text-align:left;
 overflow-y:scroll
}
.body-tab{
 margin:0 auto 0 auto;
 width:950px;
}
.stBack {
 background-image:url(images/bg.jpg);
 width: 100%;
 height: 500px;
}
.stHeader {
 width:950px;
 height:75px;
}
.stHeaderBack {
 width:100%;
 height:75px;
 background-color: #3B5998;
}
.stFooter {
 clear:both;
 width:100%;
 height:20px;
 background-color: #3B5998;
 
}
.stFooter .font-tab{
 padding-top:2px;
 color:#FFFFFF;
 font-family:Arial;
 font-size:11px;
 padding-left: 15px;
}
.stLogo {
 width:250px;
 margin-top: 25px;
 float:left;
}
.stLogin {
 margin-top:10px;
 width:420px;
 float:right;
}
.stCenter {
 width:950px;
 height:425px;
}
.stLabelInputDaftar {
 height:27px;
 font-family:Arial;
 font-size:12px;
 color:#3B5998;
 padding-top:7px;
}
.stLabelInputDaftarNoPadding {
 height:34px;
 font-family:Arial;
 font-size:12px;
 color:#3B5998;
}
.stTxtLogin {
 width:150px; 
 border:1px solid black;
}
.stTxtDaftar {
 width:200px; 
 height:24px; 
 border:1px solid #6483C4;
}
.stSelDaftar {
 border:1px solid #6483C4;
}
.stBtn {
 border:1px solid #999;
 border-bottom-color:#888;
 box-shadow:0 1px 0 rgba(0, 0, 0, .1);
 -moz-box-shadow:0 1px 0 rgba(0, 0, 0, .1);
 cursor:pointer;
 display:-moz-inline-box;
 display:inline-block;
 font-size:11px;
 font-weight:normal;
 line-height:normal !important;
 padding:2px 6px;
 text-align:center;
 text-decoration:none;
 color:#FFFFFF; 
 vertical-align:top;
 white-space:nowrap;
 -moz-border-radius:5px; */
}
.bt1{
 background-color:#6483C4;
 background-position:0 -96px;
 border-color:#CCCCCC #6483C4 #6483C4 #CCCCCC;
}
.bt2{
 background-color:#6483C4;
 background-position:0 -96px;
 border-color:#3b6e22 #3b6e22 #2c5115;
 width:150px;
 height:26px;
 font-weight:bold
}
.ftHeader{
 color:#FFFFFF;
 font-family:Arial;
 font-size:12px;
}
.ftHeaderSmall{
 color:#FFFFFF;
 font-family:Arial;
 font-size:9px;
}
.ftHome1 {
 font-family: Arial;
 font-size: 26px;
 font-weight: bold;
 color: #3B5998;
}
.ftHome2 {
 font-family: Arial;
 font-size: 15px;
 color: #3B5998;
}
.ftHome3 {
 height: 37px; 
 font-family: Arial; 
 font-size: 10px; 
 color: #3B5998; 
}
.ftHome4 {
 color: #000000;
 font-family: Arial;
 font-size: 10px;
}
.ftHome5 {
 font-size: 18px
}

-->
</style>
</head>

<body>
<div class="stBack">
<div class="stHeaderBack">
<div class="body-tab">

<!-- awal kode header yg berisi logo + tempat buwat login -->
<div class="stHeader">
<div class="stLogo"><img src="images/facemu.png" alt="face-mu" width="151" height="34" /></div>
<div class="stLogin">
<div style="width:170px; float:left">
<div style="height:15px" class="ftHeader">Email:</div>
<div><input type="text" class="stTxtLogin" id="txtUserId" tabindex="1" />
</div>
<div style="height:20px; padding-top:3px; float:left"><input type="checkbox" id="chboxStayLoggedIn" checked="checked" tabindex="3" /></div>
<div style="padding-top:4px"><span class="ftHeaderSmall">Biarkan saya tetap masuk</span> </div>
</div>
<div style="float:left; width:170px">
<div style="height:15px" class="ftHeader">Password:</div>
<div><input type="password" class="stTxtLogin" id="txtUserPass" tabindex="2" />
</div>
<div style="padding-top:4px"><a href="#" style="text-decoration:none"><span class="ftHeaderSmall">Lupa kata sandi Anda?</span></a></div>
</div>
<div style="float:left">
<div style="height:15px"></div>
<div>
  <input type="button" class="stBtn bt1" id="btnLogin" tabindex="4" value="Masuk"  />
</div>
</div>
</div>
</div>
<!-- akhir kode header -->

<!-- awal kode center section -->
<div class="stCenter">
<div style="width:550px; height:425px; float:left">
  <br />
  <p class="ftHome2 ftHome5"><strong>Face-mu membantu Anda terhubung dan berbagi<br />
    dengan orang-orang dalam kehidupan Anda di<br />
    Indonesia    </strong></p>
  <p><img src="images/pulau.png" width="474" height="195" /></p>
</div>
<!-- form daftar -->
<div style="width:335px; height:425px; float:left">
<br />
<span class="ftHome1">Mendaftar</span><br />
<span class="ftHome2">Gratis, sampai kapanpun</span>
<hr style="color:#3B5998" />
<div style="width:120px; float:left">
<div class="stLabelInputDaftar">Nama Depan</div>
<div class="stLabelInputDaftar">Nama Belakang</div>
<div class="stLabelInputDaftar">Email Anda</div>
<div class="stLabelInputDaftarNoPadding">Masukkan Ulang Email</div>
<div class="stLabelInputDaftar">Kata Sandi</div>
<div class="stLabelInputDaftar">Saya Seorang</div>
<div class="stLabelInputDaftar">Tanggal Lahir</div>
</div>
<div style="width:10px; float:left">
<div class="stLabelInputDaftar">:</div>
<div class="stLabelInputDaftar">:</div>
<div class="stLabelInputDaftar">:</div>
<div class="stLabelInputDaftar">:</div>
<div class="stLabelInputDaftar">:</div>
<div class="stLabelInputDaftar">:</div>
<div class="stLabelInputDaftar">:</div>
</div>
<div style="width:200px; float:left">
<div class="stLabelInputDaftarNoPadding">
  <input type="text" id="txtNamaDepan" class="stTxtDaftar" />
</div>
<div class="stLabelInputDaftarNoPadding">
  <input type="text" class="stTxtDaftar" id="txtNamaBelakang" />
</div>
<div class="stLabelInputDaftarNoPadding">
  <input type="text" class="stTxtDaftar" id="txtEmail" />
</div>
<div class="stLabelInputDaftarNoPadding">
<input type="text" class="stTxtDaftar" id="txtReEmail" />
</div>
<div class="stLabelInputDaftarNoPadding">
  <input type="password" class="stTxtDaftar" id="txtPassword" />
</div>
<div class="stLabelInputDaftar">
  <span class="stLabelInputDaftarNoPadding">
  <select class="stSelDaftar" id="selJeKel" >
    <option>Wanita</option>
  </select>
</span></div>
<div>
  <select class="stSelDaftar" id="selTglLahir" >
    <option>Tgl</option>
  </select>
  <select class="stSelDaftar" id="selBlnLahir" >
    <option>Bulan</option>
  </select>
<select class="stSelDaftar" id="selThnLahir" >
    <option>Tahun</option>
  </select>
  <br />
  <a href="#" style="text-decoration:none"><span class="ftHome3">Mengapa saya perlu mengisinya?</span></a> </div>
</div>
<div style="clear:both; text-align:center; padding-top:3px"><input type="button" class="stBtn bt2" id="btnDaftar" value="   Mendaftar   "  />
  <hr style="color:#3B5998" />
<a href="#" style="text-decoration:none"><strong class="ftHome3">Buat halaman</strong></a> <strong class="ftHome4">untuk selebritis, grup musik, atau bisnis</strong></div>
</div>
<!-- akhir kode form daftar -->
</div>
<!-- akhir kode center section -->

</div>
</div>
<div style="height:425px">
</div>

<!-- awal kode footer -->
<div class="stFooter">
<div class="font-tab">Tugas face-mu &copy; 2011 - Fransiska GP (100533406925) </div>
</div>
<!-- akhir kode footer -->

</div>
</body>
</html>