.box1 {
float: right;
padding: 5px;
height: 100px;
}
.box2 {
float: right;
padding: 5px;
height: 100px;
}
#header{
height: 80px;
background: blue;
}
#logo{
float: left;
padding-left: 100px;
padding-top: 20px;
}
.box3 {
}
.box4 {
width: 1300px;
height: 18px;
background: #866BF1;
text-align:left;
font-size:8px;
color:blue
}
#pengantar {
float: left;
}
#map {
float: left;
width: 780px;
height: 380px;
}
#mainmap{
width: 300px;
height: 200px;
padding: 50px;
color: #866BF1;
}
#daftar {
float: left;
padding: 5px;
width: 370px;
height: 380px;
color: #866BF1;
}
#bottom {
clear: both;
height: 30px;
background: #866BF1;
font-size:6px;
color: #bde0e6;
}
#footer {
float:left;
clear: both;
width: 1350px;
height: 20px;
background:blue;
margin :22px 0;
}
Dan untuk script HTML-nya sebagai berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Selamat Datang di FACE-MU</title>
<link rel="stylesheet" href="fm.css" type=text/css />
<link rel ="shortcut icon" href="icon.png">
<style type="text/css">
<!--
.style6 {color: #866BF1}
.style9 {
font-size: 24px;
font-weight: bold;
}
.style12 {color: #FFFFFF}
-->
</style>
</head>
<body background="bg2.jpg">
<div id="logo">
<img width="180"src="facemu.png"></div>
<div id="header">
<div class="box2">
<br><input type="button" value="Login">
</div>
<div class="box1">
Password :
<br> <input type="text" size="25">
<br> Lupa kata sandi anda ? </div>
<div class="box1">
<br><input type="text" size="25">
<br><input name="checkbox" type="checkbox">
Biarkan saya tetap masuk </div>
</div>
<form>
<div id="pengantar">
<div id="map">
<div id="mainmap">
<font size="4">Face-mu membantu Anda terhubung dan berbagi
dengan orang-orang dalam kehidupan Anda di Indonesia </font>
<img src="indo.png"> </div>
</div>
</div>
</form>
<div id="daftar">
<p class="style6"><span class="style9">Mendaftar</span>
<br>Gratis, sampai kapanpun </p>
<hr style="color: blue">
<form>
<table>
<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 value="pria" selected>Pria
<option value="wanita">Wanita
</select></td></tr>
<tr><td>Tanggal Lahir :</td><td>
<select name="tgl">
<option value="01" selected>01
</select>
<select name="bln">
<option value="Agustus" selected>Agustus
</select>
<select name="thn">
<option value="1979" selected>1979
</select></td></tr>
</table>
</form>
<center> <input type="button" value="Mendaftar" background="blue"> </center>
</div>
<div id="footer">
<div align="left" class="style12"> Face-mu © 2011 Umam Almuqtashid </div>
</div>
</body>
</html>
Dan gambar di bawah ini adalah screenshotnya :
0 komentar:
Posting Komentar