kali ini saya ubah namannya menjadi Mahoo! , dan Pesbuk
Berikut adalah hasil jadi dari template tersebut
Mahoo !
Berikut adalah file css
* { margin:0px;padding:0px;font-family:"Segoe UI";font-size:14px; }
a { text-decoration:none; }
#wrapper { width:600px;margin:5px auto; }
#header { background:#400090;border-radius:5px;margin-bottom:15px; }
#header .logo { padding:10px; }
#header .logo img { width:100px; }
input, select { border:1px solid #aaa;border-radius:3px;padding:5px; }
.text input { display:block;border-radius:3px;padding:8px; }
.one { margin-bottom:10px; }
.text div { line-height:34px;margin-right:10px;color:#aaa; }
p { margin-bottom:15px; }
input[type=submit] { background:#400090;color:#fff;border-radius:0px;border:0px none;padding:10px;cursor:pointer; }
.nm { width:200px; }
.em { width:300px; }
.pw { width:250px; }
.np { width:250px; }
.tg { width:80px; }
.br { margin-bottom:15px; }
.w50 { width:49%; }
.left { float:left; }
.right { float:right; }
.clear { clear:both; }
Dan File HTML nya :
<!doctype html>
<html>
<head>
<title>Pendaftaran Mahoo!</title>
<link rel="stylesheet" href="mahoo.css">
<link rel="shortcut icon" href="mahoo.jpg">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="logo">
<img src="mahooo.jpg">
</div>
<div class="clear"></div>
</div>
<div id="content">
<form method="post" action="" class="daftar">
<div class="br">
<input type="text" placeholder="Nama Depan" class="nm">
<input type="text" placeholder="Nama Belakang" class="nm">
</div>
<div class="br">
<input type="text" placeholder="email@mahoo.com" class="em">
</div>
<div class="br">
<input type="password" placeholder="Kata Sandi" class="pw">
</div>
<div class="br">
<input type="text" placeholder="Nomor Ponsel" class="np">
</div>
<div class="br">
<input type="text" placeholder="Tanggal" class="tg">
<select>
<option>Januari</option>
<option>Februari</option>
<option>Maret</option>
<option>April</option>
<option>Mei</option>
<option>Juni</option>
<option>Juli</option>
<option>Agustus</option>
<option>September</option>
<option>Oktober</option>
<option>November</option>
<option>Desember</option>
</select>
<input type="text" placeholder="Tahun" class="th">
</div>
<div class="br">
<input type="radio" name="kelamin"><span>Laki-laki<span>
<input type="radio" name="kelamin"><span>Perempuan</span>
</div>
<div class="br">
<input type="text" placeholder="Nomor Pemulihan Opsional" class="np">
<input type="text" placeholder="Hubungan" class="nm">
</div>
<p>Saya menyetujui <a href="#">Ketentuan Mahoo!</a> dan <a href="#">Privasi</a></p>
<input type="submit" value="Buat account">
</form>
</div>
</div>
</body>
</html>
Dan sekarang kita lihat yang Pesbuk :
Berikut adalah file css :
* { margin:0px;padding:0px;font-family:"Segoe UI";font-size:12px; }
a { text-decoration:none; }
input { border:1px solid #222;padding:3px; }
#wrapper { width:800px;margin:5px auto; }
#header { background:#3a5795;border-radius:5px;margin-bottom:15px; }
#header .logo { padding:10px; }
#header .logo img { width:100px;margin-top:15px; }
.login { color:#fff;padding:10px;margin-top:3px; }
.login div { margin-bottom:5px; }
.login a { color:#fff;margin-left:30px; }
#content input, select { border:1px solid #aaa;border-radius:3px;padding:5px;font-size:14px; }
.text input { display:block;border-radius:3px;padding:8px; }
.one { margin-bottom:10px; }
.text div { line-height:34px;margin-right:10px;color:#aaa; }
h2 { font-size:24px;}
h3 { font-size:14px;font-weight:normal;margin-bottom:10px; }
p { margin-bottom:15px; }
input[type=submit] { background:#3a5795;color:#fff;border-radius:0px;border:1px solid #fff;cursor:pointer;padding:2px; }
input.butt { background:#69a74e;width:120px; }
.nm { width:200px; }
.em { width:300px; }
.pw { width:250px; }
.np { width:250px; }
.tg { width:80px; }
.br { margin-bottom:15px; }
.w50 { width:49%; }
.left { float:left; }
.right { float:right; }
.clear { clear:both; }
dan berikut file html :
<!doctype html>
<html>
<head>
<title>Selamat Datang di Pesbuk - Masuk, Daftar ,Bermain atau Pelajari Selengkapnya</title>
<link rel="stylesheet" href="pesbuk.css">
<link rel="shortcut icon" href="pesbuk.png">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="logo left">
<img src="pesbuk.jpg">
</div>
<div class="login right">
<div>
<form method="post">
Email atau Telepon
<input type="text">
Kata Sandi
<input type="password">
<input type="submit" value="Masuk">
</div>
<input type="checkbox">Biarkan saya tetap masuk
<a href="#">Lupa Kata Sandi ?</a>
</form>
</div>
<div class="clear"></div>
</div>
<div id="content">
<h2>Mendaftar</h2>
<h3>Gratis Sampai Ajal menjemput</h3>
<form method="post" action="" class="daftar">
<div class="br">
<input type="text" placeholder="Nama depan" class="nm">
<input type="text" placeholder="Nama belakang" class="nm">
</div>
<div class="br">
<input type="text" placeholder="Email atau nomor ponsel" class="em">
</div>
<div class="br">
<input type="text" placeholder="Masukan email lagi atau nomor ponsel" class="em">
</div>
<div class="br">
<input type="password" placeholder="Kata Sandi" class="pw">
</div>
<div class="br">
<h3>Tanggal Lahir</h3>
<select>
<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>Januari</option>
<option>Februari</option>
<option>Maret</option>
<option>April</option>
<option>Mei</option>
<option>Juni</option>
<option>Juli</option>
<option>Agustus</option>
<option>September</option>
<option>Oktober</option>
<option>November</option>
<option>Desember</option>
</select>
<select>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
<option>1995</option>
<option>1994</option>
</select>
</div>
<div class="br">
<input type="radio" name="kelamin"><span>Laki-laki<span>
<input type="radio" name="kelamin"><span>Perempuan</span>
</div>
<p>
Klik Mendaftar, Anda menyetujui Ketentuan kami dan bahwa Anda telah membaca Kebijakan Data kami, termasuk Penggunaan ini.
</p>
<input class='butt' type="submit" value="Mendaftar">
</form>
</div>
</div>
</body>
</html>
terimakasih
Sign up here with your email
ConversionConversion EmoticonEmoticon