<!DOCTYPE html>
<html lang="en">
<head>
<title>Facebook CSS</title>
<link type="text/css" rel="stylesheet" href="face_ku.css">
<style type="text/css">
<!--
.style1 {
color: #3300FF
}
-->
</style>
</head>
<body class="style">
<div class="header">
<div class="headerfooter header-box"><a class="leftfloat" href=#><a class="leftfloat" href=#><img class="logoSMALL" src="facemu.png" width="170" height="36" border="0"></a></a>
<div class="rightfloat">
<div class="login">
<table cellspacing="0">
<tr>
<td class="login-label"><label for="email">Email</label></td>
<td class="login-label"><label for="pass">Kata Sandi</label></td>
</tr>
<tr>
<td><input class="inputtext" type="text"></td>
<td><input class="inputtext" type="password"></td>
<td><label class="btn btnConfirm">
<input value="Masuk" type="submit">
</label></td>
</tr>
<tr>
<td class="login-checkbox">
<input class="inputcheckbox" 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 class="footer">
<div class="body-tab">
<div class="footer daftar">
<div class="leftfloat">
<div class="footer logoBIG">
<div class="footer texttab rightfloat">
<div class="blue">
<div class="title">Selamatkan Generasi!</div>
<div class="titleSMALL"><strong>Untuk Masa Depan Yang Lebih Baik</strong></div>
</div>
</div>
<a class="leftfloat" href=#><img src="pulau.png" width="474" height="195" border="0" class="logotab"></a></div>
</div>
<div class="rightfloat">
<div class="mbm title-pos">
<div class="mbs titleBIG">Daftarlah</div>
<div class="mbm titleSMALL">Mumpung Gratissss . . .</div>
</div>
<div id="daftar-box">
<div id="daftar">
<table class="editor" cellspacing="0">
<tr>
<td class="label"><label>Nama Depan:</label></td>
<td><input class="inputtext" type="text"></td>
</tr>
<tr>
<td class="label"><label>Nama Belakang:</label></td>
<td><input class="inputtext" type="text"></td>
</tr>
<tr>
<td class="label"><label>Email Anda:</label></td>
<td><input class="inputtext" type="text"></td>
</tr>
<tr>
<td class="label"><label>Ulang Email:</label></td>
<td><input class="inputtext" type="text"></td>
</tr>
<tr>
<td class="label"><label>Kata sandi:</label></td>
<td><input class="inputtext"type="password"></td>
</tr>
<tr>
<td class="label"><label>Saya seorang:</label></td>
<td><select><option>Pilih Jenis kelamin:</option></select></td>
</tr>
<tr>
<td class="label"><label>Tanggal Lahir:</label></td>
<td>
<select><option>Tanggal:</option></select>
<select><option>Bulan:</option></select>
<select><option>Tahun:</option></select>
</td>
</tr>
</table>
<div class="daftar-btn footer">
<label class="btn btnSpecial style1">
<input value="Mendaftar" type="submit">
</label>
</div>
</div>
<div id="redline"></div>
<p class="syarat" id="line-pos">Dengan Mendaftar, Anda menyatakan Menyetujui <a href=#>Ketentuan Penggunaan</a> dan <a href=#>Privasi</a>.</p>
</div>
</div>
</div>
</div>
<div class="footer-tab">
<ul>
<li class="listbahasa"><a href=#>Kekuatan Tekad</a> |</li>
<li class="listbahasa"><a href=#>Keluhuran Sifat</a> |</li>
<li class="listbahasa"><a href=#>Kontribusi</a> |</li>
<li class="listbahasa"><a href=#>Konsistensi</a></li>
</ul>
</div>
</div>
<div id="footer">
<div id="footerline"></div>
<div class="footer" id="line-pos">
<div class="leftfloat"> <span>CSS Looked Like Facebook © 2011</span> <a rel="dialog" href="http://faleyhome.tk">by Mohamad Nur Afandi | 100533406932 | off F </a></div>
<div class="rightfloat"> <a href=#>Buat Halaman Untuk Ummat</a> - <a href=#>Keadilan</a> - <a href=#>
Kesejahteraan</a></div>
</div>
</div>
</body>
</html>
FILE CSS
body{
background:url(bg.jpg) center center repeat;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:11px;
color:blue;
margin:0;
padding:0;
text-align:left;
overflow-y:scroll
}
a{
cursor:pointer;
color:blue;
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:blue;
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;
}
.logoSMALL{
margin-left:18px;
margin-top:17px
}
.logoBIG{
height:295px;
background:url(logo-besar-shadow.png) bottom left no-repeat;
padding-top:45px;
width:537px;
}
.logoBIG .logotab{
margin-left:50px;
}
.logoBIG .texttab{
width:220px;
}
.logoBIG .title{
color:blue;
font-size:20px;
font-weight:normal;
}
.logoBIG .titleSMALL{
color:blue;
font-size:15px;
}
.daftar .title-pos{
border-bottom:1px solid blue;
padding:43px 0 0 15px;
width:354px;
}
.daftar .titleBIG{
color:black;
margin-bottom:5px;
font-size:18px;
font-weight:bold;
}
.daftar .titleSMALL{
color:blue;
margin-bottom:10px;
font-size:15px;
}
.inputtext,.inputpassword{
border:1px solid blue;
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:black;
margin:0;
width:142px}
.login label{
color:blue;
font-weight:normal;
margin:0
}
.login td.login-label{
padding-bottom:4px;
}
.login .login-label label{
color:white;
padding-left:1px;
}
.login .inputcheckbox{
margin-left:0;
}
.login a{
color:blue;
font-weight:normal;
}
.login a:hover{
color:blue;
font-weight:bold;
text-decoration:none;
}
.login .login-checkbox{
padding-bottom:3px;
padding-top:1px;
vertical-align:bottom;
}
.btn{
border:1px solid black;
border-bottom-color:blue;
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:yellow;
border:0;
color:black;
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:black;
}
.btnSpecial{
background-color:red;
background-position:0 -96px;
border-color:red;
}
.btnConfirm{
background-color:red;
background-position:0 -48px;
border-color:Yellow;
}
.syarat{
color:black;
font-size:9px;
padding:0;
margin:0 0 10px 0;
}
.listbahasa{
float:left;
padding-left:10px;
}
#daftar{
padding-left:30px;
}
#daftar .daftar-btn{
margin:0 0 0 95px;
}
#daftar .editor{
margin:0 0 7px 0;
}
#daftar-box label{
color:black;
font-weight:bold;
text-align:right;
vertical-align:middle;
}
#daftar-box .inputtext,#daftar-box .inputpassword{
width:206px;
border-color:black;
margin-top:2px;
}
#daftar-box select{
margin:2px 0 0 0;
border:1px solid orange;
}
#redline{
border:1px solid blue;
line-height:15px;
margin:10px 0 0 0;
}
#footerline{
border-bottom:1px solid blue;
height:8px;
font-size:1px}
#footer{
clear:both;
border-top:0;.
color:blue;
font-size:10px;
margin:0 auto;
width:980px;
}
#line-pos{
border-top:1px solid transparent;
margin-bottom:30px;
padding:8px;
position:relative;
}
Tidak ada komentar:
Posting Komentar