Tugas Praktikum Modul 3 – Facebook CSS Theme

Thema css Facebook seperti terdapat pada gambar di bawah ini. Dengan menggunakan  layout dari css akan menampilkan warna serta tata letak seperti Facebook. Untuk Source codenya dapat di unduh DI SINI. Terdapat 2 file utama yang digunakan untuk mendesain layout ini, yaitu file Html untuk meng-include kan komponen serta teks apa saja yang digunakan. Serta file css untuk mendesain tampilan baik dari segi warna posisi dan tata letak.

PrintScreen Tampilan Facebook Css Theme


Source Code pada File HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>FaceFoto</title>
<link type="text/css" rel="stylesheet" href="Thema.css">
<link href="icon.png" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<div>
 <div>
 <a href=#><img src="faceku.png" width="170" height="36" border="0"></a>
 <div>
 <div>
 <table cellspacing="0">
 <tr>
 <td><label for="email">Email</label></td>
 <td><label for="pass">Kata Sandi</label></td>
 </tr>
 <tr>
 <td><input type="text"></td>
 <td><input type="password"></td>
 <td><label><input value="Masuk" type="submit"></label></td>
 </tr>
 <tr>
 <td>
 <input value="1" type="checkbox">
 <label>Biarkan saya tetap masuk</label>
 </td>
 <td><label><a href=#>Lupa kata sandi Anda?</a></label>
 </td>
 </tr>
 </table>
 </div>
 </div>
 </div>
</div>
<div>
 <div>
 <div>
 <div>
 <div>
 <a href=#><img src="camera.png" border="0"></a>
 <div>
 <div>
 <div>Hobi Narsis dan Foto-Foto?</div>
 <div>Tunjukkan bakat dan ekspresi ke-narsisan kamu di sini.</div>
 </div>
 </div>
 </div>
 </div>
 <div>
 <div>
 <div>Silahkan Mendaftar</div>
 <div>Tidak Dipungut Biaya Apapun </div>
 </div>
 <div id="daftar-box">
 <div id="daftar">
 <table cellspacing="0">
 <tr>
 <td><label>Nama Depan:</label></td>
 <td><input type="text"></td>
 </tr>
 <tr>
 <td><label>Nama Belakang:</label></td>
 <td><input type="text"></td>
 </tr>
 <tr>
 <td><label>Email Anda:</label></td>
 <td><input type="text"></td>
 </tr>
 <tr>
 <td><label>Ulang Email:</label></td>
 <td><input type="text"></td>
 </tr>
 <tr>
 <td><label>Kata sandi:</label></td>
 <td><inputtype="password"></td>
 </tr>
 <tr>
 <td><label>Saya seorang:</label></td>
 <td><select>
 <option>Pilih Jenis kelamin:</option>
 <option>Laki-Laki</option>
 <option>Perempuan</option>
 </select></td>
 </tr>
 <tr>
 <td><label>Tanggal Lahir:</label></td>
 <td>
 <select>
 <option>Tanggal</option>
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 <option>6</option>
 <option>7</option>
 <option>8</option>
 <option>9</option>
 <option>10</option>
 <option>11</option>
 <option>12</option>
 <option>13</option>
 <option>14</option>
 <option>15</option>
 <option>16</option>
 <option>17</option>
 <option>18</option>
 <option>19</option>
 <option>20</option>
 <option>21</option>
 <option>22</option>
 <option>23</option>
 <option>24</option>
 <option>25</option>
 <option>26</option>
 <option>27</option>
 <option>28</option>
 <option>29</option>
 <option>30</option>
 <option>31</option>
 </select>
 <select>
 <option>Bulan</option>
 <option>Jan</option>
 <option>Feb</option>
 <option>Mar</option>
 <option>Apr</option>
 <option>Mei</option>
 <option>Jun</option>
 <option>Jul</option>
 <option>Agu</option>
 <option>Sep</option>
 <option>Okt</option>
 <option>Nov</option>
 <option>Des</option>
 </select>
 <select>
 <option>Tahun</option>
 <option>1980</option>
 <option>1981</option>
 <option>1982</option>
 <option>1983</option>
 <option>1984</option>
 <option>1985</option>
 <option>1986</option>
 <option>1987</option>
 <option>1988</option>
 <option>1989</option>
 <option>1990</option>
 <option>1991</option>
 <option>1992</option>
 <option>1993</option>
 <option>1994</option>
 <option>1995</option>
 <option>1996</option>
 <option>1997</option>
 <option>1998</option>
 <option>1999</option>
 </select>
 </td>
 </tr>
 </table>
 <div>
 <label><input value="Mendaftar" type="submit"></label>
 </div>
 </div>
 <div id="redline"></div>
 <p id="line-pos">Dengan Mendaftar, Anda menyatakan Menyetujui <a href=#>Ketentuan Penggunaan</a> dan <a href=#>Privasi</a>.</p>
 </div>
 </div>
 </div>
 </div>
 <div>
 <ul>
 <li><a href=#>Bahasa Inggris</a> |</li>
 <li><a href=#>Bahasa Indonesia</a> |</li>
 <li><a href=#>Bahasa Jawa</a> |</li>
 <li><a href=#>Bahasa Madura</a></li>
 </ul>
 </div>
</div>
<div id="footer">
 <div id="footerline"></div>
 <div id="line-pos">
 <div> <span>CSS Facebook Theme &copy; 2011</span> <a rel="dialog" href="http://bagusdream.worrdpress.com">by Setyo Bagus Fristanto</a> | Ekspresikan Wajah kamu disini!</div>
 <div> <a href=#>Depan</a> - <a href=#>Informasi</a> - <a href=#>Tentang</a> - <a href=#>Keamanan</a> - <a href=#>Ketentuan</a> - <a href=#>Bantuan</a> </div>
 </div>
</div>
</body>
</html>

 

 

Source Code pada File css

body{
 background:url(bg.jpg) center center repeat;
 font-family:"Trebuched MS",tahoma,verdana,arial,sans-serif;
 font-size:11px;
 color:#333;
 margin:0;
 padding:0;
 text-align:left;
 overflow-y:scroll
}
a{
 cursor:pointer;
 color:white;
 text-decoration:none
}
a:hover{
 text-decoration:underline;
}
ul{
 list-style-type:none;
 margin:0;
 padding:0;
}
.leftfloat{
 float:left
}
.rightfloat{
 float:right
}
.header{
 background-color:#09175F;
 height:82px;
 min-width:964px;
}
.header-box{
 margin:0 auto;
 padding-top:13px;
 width:964px;
}
.footer:after{
 clear:both;
 content:".";
 display:block;
 font-size:0;
}
.style .body-tab{
 margin:0 auto 0 auto;
 width:980px;
}
.style .footer-tab{
 margin:5px auto;
 width:964px;
}
.logoKecil{
 margin-left:18px;
 margin-top:17px
}
.logoBesar{
 height:295px;
 background:url(logo-besar-shadow.png) bottom left no-repeat;
 padding-top:45px;
 width:537px;
}
.logoBesar .logotab{
 margin-left:50px;
}
.logoBesar .texttab{
 width:220px;
}

.logoBesar .title{
 color:white;
 font-size:20px;
 font-weight:normal;

}
.logoBesar .JudulKecil{
 color:white;
 font-size:15px;
}
.daftar .title-pos{
 border-bottom:1px solid aqua;
 padding:43px 0 0 15px;
 width:354px;
}
.daftar .JudulBesar{
 color:white;
 margin-bottom:5px;
 font-size:18px;
 font-weight:bold;
}
.daftar .JudulKecil{
 color:silver;
 margin-bottom:10px;
 font-size:15px;
}
.inputtext,.inputpassword{
 border:1px solid #FFFF00;
 font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
 font-size:11px;
 margin:0;
 padding:3px;
 padding-bottom:4px;
}
.login table tr td{
 padding:0 0 0 14px;
}
.login .inputtext,.login .inputpassword{
 border-color:aqua;
 margin:0;
 width:142px;
 background-color:#9196FF;
 color:#09175F;
}
.login label{
 color:aqua;
 font-weight:normal;
 margin:0
}
.login td.login-label{
 padding-bottom:4px;
}
.login .login-label label{
 color:#9196FF;
 padding-left:1px;
}
.login .inputcheckbox{
 margin-left:0;
}
.login a{
 color:aqua;
 padding-left:2px;
 font-weight:normal;
}
.login a:hover{
 color:aqua;
 text-decoration:Underline;
}
.login .login-checkbox{
 padding-bottom:3px;
 padding-top:1px;
 vertical-align:bottom;
}
.btn{
 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:bold;
 line-height:normal !important;
 padding:2px 6px;
 text-align:center;
 text-decoration:none;
 vertical-align:top;
 white-space:nowrap;
}
.btn input, .btn input::-moz-focus-inner{
 background:none;
 border:0;
 color:#333;
 cursor:pointer;
 display:-moz-inline-box;
 display:inline-block;
 font-family:'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
 font-size:11px;
 font-weight:bold;
 margin:0;o
 utline:none;
 padding:1px 0 2px;
 white-space:nowrap;
}
.btnSpecial input,.btnConfirm input{
 color:navy;
}
.btnSpecial{
 background-color:#69a74e;
 background-position:0 -96px;
 border-width:2px;
 border-color:#239604 #1c7b02 #1c7b02;
 border-left-color:#FFFFFF;
 border-top-color:#FFFFFF;
 border-right-color:#333333;
 border-bottom-color:#333333;
}
.btnConfirm{
 height:16px;
 background-color:yellow;
 background-position:0 -48px;
 border-width:2px;
 border-color:#239604 #1c7b02 #1c7b02;
 border-left-color:#FFFFFF;
 border-top-color:#FFFFFF;
 border-right-color:#333333;
 border-bottom-color:#333333;
}
.syarat{
 color:gray;
 font-size:9px;
 padding:0;
 margin:0 0 10px 0;
}
.DaftarBahasa{
 float:left;
 padding-left:10px;
}

#daftar{
 padding-left:30px;
 padding-top:8px;
}
#daftar .daftar-btn{
 margin:0 0 0 95px;
}
#daftar .editor{
 margin:0 0 7px 0;
}
#daftar-box label{
 color:silver;
 font-weight:bold;
 text-align:right;
 vertical-align:middle;
}
#daftar-box .inputtext,#daftar-box .inputpassword{
 width:206px;
 border-color:aqua;
 margin-top:2px;
 color :blue;
}
#daftar-box select{
 margin:2px 0 0 0;
 border:1px solid aqua;
 color:blue;
}
#redline{
 border-bottom:1px solid aqua;
 padding:8px 0 0 15px;
 width:354px;
}
#footerline{
 border-bottom:1px solid aqua;
 height:8px;
 font-size:1px
}
#footer{
 border-top:0;
 color:gray;
 font-size:10px;
 margin:0 auto;
 width:980px;
}
#line-pos{
 border-top:1px solid transparent;
 margin-bottom:30px;
 padding:8px;
 position:relative;
}


About bagusware

Aku adalah aku, dan kamu adalah kamu... Aku dan kamu pasti bisa...

Posted on 23 Februari 2011, in PTI478. Bookmark the permalink. Tinggalkan komentar.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: