hy semua kembali lagi bertemu dengan saya, oke pada kesempatan kali ini saya akan mempostingkan bagaiman cara mendesain tampilan login mengunakan PHP designer
pada kali ini yang akan saya tampilkan adalah desain login dari facebook, pasti semua sudah tau donkk, oke tampan lama-lama lagi ini dia
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<title>Selamat Datang di Facebook - Masuk, Daftar, atau Pelajari Selengkapnya</title>
<style type="text/css">
<!--.header {
float: left;
background-color: #3B5998;
height: 60px;
margin: 0px auto;
width: 1200px;
padding: 10px;
}
.logo {
float: left;
height: 10px;
margin:13px 10px 10px 200px;
color: white;
}
.kotak {
float: right;
height: 100px;
padding: 5px;
font-family: arial;
font-size: 10px;
color: white;
}
#button_masuk{
background-color: #5B74A8;
color: white;
}
#button_mendaftar{
background-color: #4283d4;
color: white;
}
.isi {
float: left;
height: 470px;
background-image: url(bg.jpg);
padding: 0px;
}
.isi_kiri {
float: left;
width: 500px;
font-size: 18px;
font-family: arial;
color: #3B5998;
font-weight: bold;
margin:0px 10px 10px 200px;
}
.isi_kanan {
float: right;
width: 507px;
font-family: arial;
color: #3B5998;
margin:0px 0px 10px 30px;
}
.footer {
clear: both;
width: 1247px;
height: 20px;
background-color: #3B5998;
font-family: arial;
font-size: 12px;
font-weight: bold;
color: white;
}
.hr {
color: blue;
height: 4px;
width: 300;
}
-->
</style>
</head>
<body>
<div class="header">
<div class="kotak">
<br />
<input type="button" value="Masuk" id="button_masuk">
<br />
</div>
<div class="kotak">
Password:
<br />
<input type="text" size=20>
<br />
Lupa kata sandi Anda?
</div>
<div class="kotak">
Email:
<br />
<input type="text" size=30>
<br />
<input type="checkbox">Biarkan saya tetap masuk
</div>
</div>
<div class="isi">
<div class="isi_kiri">
<br />
<br />
<br />
Facebook-mu membantu Anda terhubung dan berbagi<br />
dengan orang-orang dalam kehidupan Anda di<br />
Indonesia
<br />
<br />
<br />
<img src="D:/sasuke_sharingan_by_itachi87uchiha-d675sn0.png" width="460" height="500" />
</div>
<div class="isi_kanan">
<br />
<font size=5><b>Mendaftar</b></font><br />
Gratis, Selamanya
<hr width=400 align="left"/>
<table cellpadding=5>
<tr>
<td>Nama Depan</td>
<td> : <input type="text" size=35 /></td>
</tr>
<tr>
<td>Nama Belakang</td>
<td> : <input type="text" size=35 /></td>
</tr>
<tr>
<td>Email Anda</td>
<td> : <input type="text" size=35 /></td>
</tr>
<tr>
<td>Masukkan Ulang Email</td>
<td> : <input type="text" size=35 /></td>
</tr>
<tr>
<td>Kata Sandi Baru</td>
<td> : <input type="text" size=35 /></td>
</tr>
<tr>
<td>Saya Seorang</td>
<td> : <select name="kelamin">
<option>pilih kelamin</option>
<option>Pria</option>
<option>Wanita</option>
</select></td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td> : <select name="tanggal">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</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 name="bulan">
<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 name="tahun">
<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>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><font size=1>Mengapa saya harus mengisinya?</font></td>
</tr>
</table>
<center><input type="button" value="Mendaftar"></center>
<div class="hr"><hr /></div>
<font size=3>Buat halaman <font color="blue">untuk selebritis, grup musik, atau bisnis</font></font>
</div>
</div>
<div class="footer" align="left">
Face-mu 2015 mafni sila aktori copyright
</div>
</body>
</html>
pada kali ini yang akan saya tampilkan adalah desain login dari facebook, pasti semua sudah tau donkk, oke tampan lama-lama lagi ini dia
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<title>Selamat Datang di Facebook - Masuk, Daftar, atau Pelajari Selengkapnya</title>
<style type="text/css">
<!--.header {
float: left;
background-color: #3B5998;
height: 60px;
margin: 0px auto;
width: 1200px;
padding: 10px;
}
.logo {
float: left;
height: 10px;
margin:13px 10px 10px 200px;
color: white;
}
.kotak {
float: right;
height: 100px;
padding: 5px;
font-family: arial;
font-size: 10px;
color: white;
}
#button_masuk{
background-color: #5B74A8;
color: white;
}
#button_mendaftar{
background-color: #4283d4;
color: white;
}
.isi {
float: left;
height: 470px;
background-image: url(bg.jpg);
padding: 0px;
}
.isi_kiri {
float: left;
width: 500px;
font-size: 18px;
font-family: arial;
color: #3B5998;
font-weight: bold;
margin:0px 10px 10px 200px;
}
.isi_kanan {
float: right;
width: 507px;
font-family: arial;
color: #3B5998;
margin:0px 0px 10px 30px;
}
.footer {
clear: both;
width: 1247px;
height: 20px;
background-color: #3B5998;
font-family: arial;
font-size: 12px;
font-weight: bold;
color: white;
}
.hr {
color: blue;
height: 4px;
width: 300;
}
-->
</style>
</head>
<body>
<div class="header">
<div class="kotak">
<br />
<input type="button" value="Masuk" id="button_masuk">
<br />
</div>
<div class="kotak">
Password:
<br />
<input type="text" size=20>
<br />
Lupa kata sandi Anda?
</div>
<div class="kotak">
Email:
<br />
<input type="text" size=30>
<br />
<input type="checkbox">Biarkan saya tetap masuk
</div>
</div>
<div class="isi">
<div class="isi_kiri">
<br />
<br />
<br />
Facebook-mu membantu Anda terhubung dan berbagi<br />
dengan orang-orang dalam kehidupan Anda di<br />
Indonesia
<br />
<br />
<br />
<img src="D:/sasuke_sharingan_by_itachi87uchiha-d675sn0.png" width="460" height="500" />
</div>
<div class="isi_kanan">
<br />
<font size=5><b>Mendaftar</b></font><br />
Gratis, Selamanya
<hr width=400 align="left"/>
<table cellpadding=5>
<tr>
<td>Nama Depan</td>
<td> : <input type="text" size=35 /></td>
</tr>
<tr>
<td>Nama Belakang</td>
<td> : <input type="text" size=35 /></td>
</tr>
<tr>
<td>Email Anda</td>
<td> : <input type="text" size=35 /></td>
</tr>
<tr>
<td>Masukkan Ulang Email</td>
<td> : <input type="text" size=35 /></td>
</tr>
<tr>
<td>Kata Sandi Baru</td>
<td> : <input type="text" size=35 /></td>
</tr>
<tr>
<td>Saya Seorang</td>
<td> : <select name="kelamin">
<option>pilih kelamin</option>
<option>Pria</option>
<option>Wanita</option>
</select></td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td> : <select name="tanggal">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</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 name="bulan">
<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 name="tahun">
<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>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><font size=1>Mengapa saya harus mengisinya?</font></td>
</tr>
</table>
<center><input type="button" value="Mendaftar"></center>
<div class="hr"><hr /></div>
<font size=3>Buat halaman <font color="blue">untuk selebritis, grup musik, atau bisnis</font></font>
</div>
</div>
<div class="footer" align="left">
Face-mu 2015 mafni sila aktori copyright
</div>
</body>
</html>
kemudian inilah hasilnya
maaf sebelumnya karena gambarnya jadii 2 karena memang keterbatasan dari saya
sekian yang saya postingkan kurang lebihnya saya mohon maaf,jangan lupa kalo mw di copas di edit dulu :-)
jika ada sran atau kritik bisa sharee pada komentar,
About the Author
0Awesome Comments!