Layout face-mu (Tugas Pemrograman Web)

Diposting oleh Yogi T Rion On Selasa, 15 Februari 2011 0 komentar

Gambar Printscreen...
CODE CSS <style.css>
 html,body{margin:0;padding:0;}
#layouttop {
    background:#4C76CB;
    width:100%;
    height:60px;
}
#top {
    width:960px;
}
    #top_left {
        width:50%;
        float:left;
    }
    #top_right {
        width:50%;
        float:left;
    }

#layoutmid {
    background:url(bg.jpg) repeat-x bottom;
    width:100%;
    height:85%;
}


#mid {
    height:88%;
    width:960px;
    padding:20px 0 0 0;
}
    #mid_left {
        width:50%;
        float:left;
    }
    #mid_right {
        width:50%;
        float:left;
    }
#layoutbottom {
    color:white;
    background:#4C76CB;
    height:20px;
    padding:0 0 0 10px;
    font-size:13px;
    padding:3px 0 0 10px;
}

.login {
    font-size:10px;
    color:#FFFFFF;
    padding:2px 0 0 0;
    font-family:"Lucida Grande",Tahoma,Verdana,Arial,sans-serif;
}
#login_mini {
    font-size:8px;
    color:#FFFFFF;
    padding:2px 0 0 0;
    font-family:"Lucida Grande",Tahoma,Verdana,Arial,sans-serif;
}
.rata_kiri {
    text-align:left;
}

.bluefont {
    font-size:20px;
    font-family:Arial;
    color:blue;
    text-align:left;
}

.logo {
    padding:10px 0 0 0;
}
.mini {
    color:#0033CC;
    font-size:6px;
}
.black {
    color:#000000;
}

/* Form styles */

input,select{
    padding:3px;
    color:#333333;
   
    border:1px solid #96A6C5;
    margin-top:2px;
    width:200px;
    font-size:12px;
}

select{
    width:auto;
    padding:2px;
}


label{
    font-size:12px;
    display:block;
    text-align:left;
}

table{
    width:340px;
    color:#0066CC;
}

td{
    font-size:11px;
}

.input-container{
    padding:1px;
}

.input-login{
    padding:1px 10px 0 0;
    width:130px;
}

.check{
    padding:0 0 0 0;
    width:3px;
    height:3px;
}

.form-title{
    font-size:20px;
    font-family:"Lucida Grande",Tahoma,Verdana,Arial,sans-serif;
    font-weight:bold;
    padding:0 0 0 5px;
    color:#0055CC;
}

.form-sub-title{
    font-weight:normal;
    font-family:"Lucida Grande",Tahoma,Verdana,Arial,sans-serif;
    font-size:12px;
    padding:0 0 0 5px;
    color:#0066CC;
}

.formButton{
    width:100px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding:3px 4px 3px 4px;
    color:white;
    font-size:15px;
    background-color:#3461BC;
    border:1px solid #3461BC;
}

.formButton:active{
    background-color:#0077CC;
    padding:4px 3px 2px 5px;
}

.loginButton{
    width:50px;
    height:20px;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    color:white;
    font-size:10px;
    background-color:#3461BC;
    border:1px outer #CCCCCC;
}

.loginButton:active{
    background-color:#0077CC;
    padding:4px 3px 2px 5px;
}

CODE HTML <index.htm>

<html>
<head>
    <title>Selamat Datang di Face-mu - Masuk, Daftar, atau Pelajari Selengkapnya</title>
    <link rel="stylesheet" type="text/css" href="img/style.css">
    <link rel="shortcut icon" href="img/icon.png"/>
</head>
<body>

<div align="center" id="layouttop">
    <div id="top">
        <div id="top_left" class="rata_kiri">
        <img src="img/facemu.png" class="logo" title="face-mu">
        </div>
        <div id="top_right" class="rata_kiri">
        <table width="378" border="0" cellspacing="0" cellpadding="0">
            <tr class="login">
              <th colspan="2" scope="col"><div align="left" class="style1">Email:</div></th>
              <th width="140" scope="col"><div align="left" class="style1">Password:</div></th>
              <th width="38" scope="col">&nbsp;</th>
            </tr>
            <tr>
              <td colspan="2"><div class="input-login"><input name="name" type="text" class="input-login" id="name"></div>
              </td>
              <td><div class="input-login"><input name="pass" type="password" class="input-login" id="pass">
              </div></td>
              <td><input class="loginButton" value="Masuk" type="submit"></td>
            </tr>
            <tr height="5">
             <td width="26" valign="middle"><div name="check" id="login_mini">
                   <input name="checkbox" type="checkbox" class="check"  value="checkbox">
                </div></td>
              <td width="136" valign="middle" id="login_mini">Biarkan saya tetap masuk </td>
              <td id="login_mini">Lupa kata sandi Anda?</td>
              <td>&nbsp;</td>
            </tr>
          </table>
</div>
    </div>
</div>
<div align="center" id="layoutmid">

    <div id="mid">
        <div id="mid_left" class="bluefont">
        <br/>
        Face-mu membantu Anda terhubung dan berbagi<br/>
        dengan orang-orang dalam kehidupan Anda di<br/>
        Indonesia.<br/>
        </div>
        <div id="mid_right" class="rata_kiri">
<!--  awal form daftar -->
<div class="form-title">Mendaftar</div>
<div class="form-sub-title">Gratis, sampai kapanpun</div>
<form >

<table cellspacing="5">
  <tbody>
  <tr>
    <td colspan="2"><hr color="#0066CC"/></td>
   </tr>
  <tr>
    <td width="112"><label for="fname">Nama Depan</label></td>

    <td width="216"><div class="input-container">:
        <input name="fname" id="fname" type="text"></div></td>
  </tr>
  <tr>
    <td><label for="lname">Nama Belakang</label></td>
    <td><div class="input-container">:
        <input name="lname" id="lname" type="text"></div></td>
  </tr>
  <tr>
    <td><label for="email">Email Anda</label></td>

    <td><div class="input-container">:
        <input name="email" id="email" type="text"></div></td>
  </tr>
  <tr>
    <td><label for="pass">Masukkan Ulang Email</label></td>
    <td><div class="input-container">:
        <input name="pass" id="pass" type="password"></div></td>
  </tr>
  <tr>
    <td><label for="pass">Kata Sandi Baru</label></td>
    <td><div class="input-container">:
        <input name="passnew" id="passnew" type="password"></div></td>
  </tr>
  <tr>
    <td><label for="sex-select">Saya Seorang </label></td>

    <td>
    <div class="input-container">:
      <select name="sex-select" id="sex-select">
    <option value="0">Pilih Gender: </option>
    <option value="1">Wanita</option>
    <option value="2">Pria</option>
    </select>
    </div>    </td>
  </tr>
  <tr>
    <td><label>Tanggal Lahir </label></td>
    <td>
    <div class="input-container">:
     
    <select name="hari"><option value="0">Hari </option>
        <option value="1">1</option>
       
        <option value="2">2</option>
       
        <option value="3">3</option>
       
        <option value="4">4</option>
       
        <option value="5">5</option>
       
        <option value="6">6</option>
       
        <option value="7">7</option>
       
        <option value="8">8</option>
       
        <option value="9">9</option>
       
        <option value="10">10</option>
       
        <option value="11">11</option>
       
        <option value="12">12</option>
       
        <option value="13">13</option>
       
        <option value="14">14</option>
       
        <option value="15">15</option>
       
        <option value="16">16</option>
       
        <option value="17">17</option>
       
        <option value="18">18</option>
       
        <option value="19">19</option>
       
        <option value="20">20</option>
       
        <option value="21">21</option>
       
        <option value="22">22</option>
       
        <option value="23">23</option>
       
        <option value="24">24</option>
       
        <option value="25">25</option>
       
        <option value="26">26</option>
       
        <option value="27">27</option>
       
        <option value="28">28</option>

       
        <option value="29">29</option>
       
        <option value="30">30</option>
       
        <option value="31">31</option>
        </select>
    <select name="bulan"><option value="0">Bulan </option>

        <option value="1">Jan</option>
       
        <option value="2">Feb</option>
       
        <option value="3">Mar</option>
       
        <option value="4">Apr</option>
       
        <option value="5">Mei</option>
       
        <option value="6">Jun</option>

       
        <option value="7">Jul</option>
       
        <option value="8">Agu</option>
       
        <option value="9">Sep</option>
       
        <option value="10">Okt</option>
       
        <option value="11">Nov</option>
       
        <option value="12">Des</option>
        </select>
       
    <select name="tahun"><option value="0">Tahun </option>
        <option value="2011">2011</option>

        <option value="2010">2010</option>
       
        <option value="2009">2009</option>
       
        <option value="2008">2008</option>
       
        <option value="2007">2007</option>
       
        <option value="2006">2006</option>
       
        <option value="2005">2005</option>

        <option value="2004">2004</option>
       
        <option value="2003">2003</option>
       
        <option value="2002">2002</option>
       
        <option value="2001">2001</option>
       
        <option value="2000">2000</option>
       
        <option value="1999">1999</option>

        <option value="1998">1998</option>
       
        <option value="1997">1997</option>
       
        <option value="1996">1996</option>
       
        <option value="1995">1995</option>
       
        <option value="1994">1994</option>
       
        <option value="1993">1993</option>

        <option value="1992">1992</option>
       
        <option value="1991">1991</option>
       
        <option value="1990">1990</option>
       
        <option value="1989">1989</option>
       
        <option value="1988">1988</option>
       
        <option value="1987">1987</option>
       
        <option value="1986">1986</option>
       
        <option value="1985">1985</option>
       
        <option value="1984">1984</option>
       
        <option value="1983">1983</option>
       
        <option value="1982">1982</option>
       
        <option value="1981">1981</option>
       
        <option value="1980">1980</option>
       
        <option value="1979">1979</option>
       
        <option value="1978">1978</option>
       
        <option value="1977">1977</option>
       
        <option value="1976">1976</option>
       
        <option value="1975">1975</option>
       
        <option value="1974">1974</option>
       
        <option value="1973">1973</option>
       
        <option value="1972">1972</option>
       
        <option value="1971">1971</option>
       
        <option value="1970">1970</option>
       
        <option value="1969">1969</option>
       
        <option value="1968">1968</option>
       
        <option value="1967">1967</option>
       
        <option value="1966">1966</option>
       
        <option value="1965">1965</option>
       
        <option value="1964">1964</option>
       
        <option value="1963">1963</option>
       
        <option value="1962">1962</option>
       
        <option value="1961">1961</option>
       
        <option value="1960">1960</option>
       
        <option value="1959">1959</option>
       
        <option value="1958">1958</option>
       
        <option value="1957">1957</option>
       
        <option value="1956">1956</option>
       
        <option value="1955">1955</option>
       
        <option value="1954">1954</option>
       
        <option value="1953">1953</option>
       
        <option value="1952">1952</option>
       
        <option value="1951">1951</option>
       
        <option value="1950">1950</option>
       
        <option value="1949">1949</option>
       
        <option value="1948">1948</option>
       
        <option value="1947">1947</option>
       
        <option value="1946">1946</option>
       
        <option value="1945">1945</option>
       
        <option value="1944">1944</option>
       
        <option value="1943">1943</option>
       
        <option value="1942">1942</option>
       
        <option value="1941">1941</option>
       
        <option value="1940">1940</option>
       
        <option value="1939">1939</option>
       
        <option value="1938">1938</option>
       
        <option value="1937">1937</option>
       
        <option value="1936">1936</option>
       
        <option value="1935">1935</option>
       
        <option value="1934">1934</option>
       
        <option value="1933">1933</option>
       
        <option value="1932">1932</option>
       
        <option value="1931">1931</option>
       
        <option value="1930">1930</option>
       
        <option value="1929">1929</option>
       
        <option value="1928">1928</option>
       
        <option value="1927">1927</option>

        <option value="1926">1926</option>
       
        <option value="1925">1925</option>
       
        <option value="1924">1924</option>
       
        <option value="1923">1923</option>
       
        <option value="1922">1922</option>
       
        <option value="1921">1921</option>

       
        <option value="1920">1920</option>
       
        <option value="1919">1919</option>
       
        <option value="1918">1918</option>
       
        <option value="1917">1917</option>
       
        <option value="1916">1916</option>
       
        <option value="1915">1915</option>

        <option value="1914">1914</option>
       
        <option value="1913">1913</option>
       
        <option value="1912">1912</option>
       
        <option value="1911">1911</option>
       
        <option value="1910">1910</option>
       
        <option value="1909">1909</option>

        <option value="1908">1908</option>
       
        <option value="1907">1907</option>
       
        <option value="1906">1906</option>
       
        <option value="1905">1905</option>
       
        <option value="1904">1904</option>
       
        <option value="1903">1903</option>

        <option value="1902">1902</option>
       
        <option value="1901">1901</option>
       
        <option value="1900">1900</option>
        </select>
    </div>    </td>
  </tr>
    <tr>
    <td>&nbsp;</td>
    <td id="mini">Mengapa saya perlu mengisinya?</td>
  </tr>
  <tr>
  <td>&nbsp;</td>
  <td><input class="formButton" value="Mendaftar" type="submit"></td>
  </tr>
  <tr>
    <td colspan="2"><hr color="#0066CC"/></td>
  </tr>
  <tr>
  <td colspan="2" align="center">Buat Halaman <span class="black">untuk selebritis, grup musik, atau bisnis</span> </td>
  </tr>
  </tbody>
</table>

</form>


<!--  end form pendaftaran-->
        </div>
    </div>
</div>
    <div id="layoutbottom" class="rata_kiri">
    Face-mu &copy; 2011 - Gee Production
    </div>


</body>
</html>

Label:

0 Comments

Add Comment
No comments yet. Be the first to leave a comment !

Leave a Comment

Next Post Previous Post
RSS FeedSubscribe
Follow me!Follow me!

    TAGS

    Pengikut

Powered by Blogger