Hasilnya seperti:
Codenya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Facebook.com</title>
<style type="text/css">
.header, .footer{
background-color : #00FFFF;
}
.header{
height : 70px;
padding-top : 5px;
padding-bottom : 20px;
padding-left : 150px;
}
#lebar{
width : 1000px;
}
.footer{
padding-top : 5px;
padding-bottom : 5px;
padding-right : 200px;
padding-left : 30px;
color : black;
font-family : Arial;
font-size : small;
font-weight : bold;
}
.bg-color{
height : 450px;
background-image : url(bg.jpg);
background-color : black;
background-repeat : repeat-x;
}
.login{
float : right;
color : black;
font-family : arial;
font-size : small;
}
#logo{
margin-top : 20px;
float : left;
height : 35px;
}
#kanan{
float: left;
padding: 5px;
width:370px;
height: 380px;
}
#tengah {
float: left;
}
#kiri {
float: left;
width: 780px;
height: 380px;
}
#gambar{
padding-top : 10px;
padding-bottom : 10px;
padding-left : 150px;
width: 400px;
height: 200px;
font-family : Arial;
font-size : small;
font-weight : bold;
color: aqua;
}
#huruf{
font-family : Arial;
font-size : small;
font-weight : bold;
line-height : 30px;
color: aqua;
}
#button_login{
color : black;
}
#button_sign up{
color : black;
}
</style>
</head>
<body>
<div class="header">
<div id="lebar">
<div id="logo">
<img src="2.jpg">
</div>
<div class="login">
<table>
<tr>
<td>Email</td>
<td>Password</td>
<td> </td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="password"></td>
<td><input type="submit" value="Login" id="button_masuk"></td>
</tr>
<tr>
<td height="25"><input type="checkbox" checked>Keep me logged in</td>
<td height="25">Forgot your password?</td>
<td height="25"> </td>
</tr>
</table>
</div>
</div>
</div>
<div class="bg-color">
<form action="my_action.jsp">
<div id="tengah">
<div id="kiri">
<div id="gambar">
<br>
<br>
<font size="3">Facebook help's you connect and share about DOTA with the people in your life.</font>
<br>
<br>
<br>
<img src="dota2.jpg">
</div>
</div>
</div>
</form>
<div id="kanan">
<div id="huruf">
<h2>Sign Up just Rp 1000,-</h2>
<hr style="color: aqua">
<form action="my_action.jsp">
<table>
<tr>
<td>First Name :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Last Name :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Your Email :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Re-enter Email:</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>New Password:</td>
<td><input type="password" size="35"></td>
</tr>
<tr>
<td>I am :</td>
<td><select name="kelamin">
<option value="option" selected>Select sex
<option value="pria" selected>Man
<option value="wanita">Woman
</select></td>
</tr>
</table>
</form>
<input type="submit" value="Sign Up" id="button_sign up">
<hr style="color: aqua">
<font size="1">Create a page for a celebrity, band or businnes</font>
</div>
</div>
</div>
<div class="footer">
<font><align="center">©ragilterakhir.blogspot.com</font>
</div>
</body>
</html>
<html lang="en">
<head>
<title>Facebook.com</title>
<style type="text/css">
.header, .footer{
background-color : #00FFFF;
}
.header{
height : 70px;
padding-top : 5px;
padding-bottom : 20px;
padding-left : 150px;
}
#lebar{
width : 1000px;
}
.footer{
padding-top : 5px;
padding-bottom : 5px;
padding-right : 200px;
padding-left : 30px;
color : black;
font-family : Arial;
font-size : small;
font-weight : bold;
}
.bg-color{
height : 450px;
background-image : url(bg.jpg);
background-color : black;
background-repeat : repeat-x;
}
.login{
float : right;
color : black;
font-family : arial;
font-size : small;
}
#logo{
margin-top : 20px;
float : left;
height : 35px;
}
#kanan{
float: left;
padding: 5px;
width:370px;
height: 380px;
}
#tengah {
float: left;
}
#kiri {
float: left;
width: 780px;
height: 380px;
}
#gambar{
padding-top : 10px;
padding-bottom : 10px;
padding-left : 150px;
width: 400px;
height: 200px;
font-family : Arial;
font-size : small;
font-weight : bold;
color: aqua;
}
#huruf{
font-family : Arial;
font-size : small;
font-weight : bold;
line-height : 30px;
color: aqua;
}
#button_login{
color : black;
}
#button_sign up{
color : black;
}
</style>
</head>
<body>
<div class="header">
<div id="lebar">
<div id="logo">
<img src="2.jpg">
</div>
<div class="login">
<table>
<tr>
<td>Email</td>
<td>Password</td>
<td> </td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="password"></td>
<td><input type="submit" value="Login" id="button_masuk"></td>
</tr>
<tr>
<td height="25"><input type="checkbox" checked>Keep me logged in</td>
<td height="25">Forgot your password?</td>
<td height="25"> </td>
</tr>
</table>
</div>
</div>
</div>
<div class="bg-color">
<form action="my_action.jsp">
<div id="tengah">
<div id="kiri">
<div id="gambar">
<br>
<br>
<font size="3">Facebook help's you connect and share about DOTA with the people in your life.</font>
<br>
<br>
<br>
<img src="dota2.jpg">
</div>
</div>
</div>
</form>
<div id="kanan">
<div id="huruf">
<h2>Sign Up just Rp 1000,-</h2>
<hr style="color: aqua">
<form action="my_action.jsp">
<table>
<tr>
<td>First Name :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Last Name :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Your Email :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Re-enter Email:</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>New Password:</td>
<td><input type="password" size="35"></td>
</tr>
<tr>
<td>I am :</td>
<td><select name="kelamin">
<option value="option" selected>Select sex
<option value="pria" selected>Man
<option value="wanita">Woman
</select></td>
</tr>
</table>
</form>
<input type="submit" value="Sign Up" id="button_sign up">
<hr style="color: aqua">
<font size="1">Create a page for a celebrity, band or businnes</font>
</div>
</div>
</div>
<div class="footer">
<font><align="center">©ragilterakhir.blogspot.com</font>
</div>
</body>
</html>
No comments:
Post a Comment