<html>
<head>
<title>Ohio</title>
</head>
<body>
<style>
*, body, HTML {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background-color: aquamarine;
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
width: 100%;
text-align: center;
height: 10%;
margin-bottom: 10px ;
border: 1px outset black;
}
.nav {
background-color: lightblue;
font-family: Arial, Helvetica, sans-serif;
display:inline-block;
width: 29%;
text-align: center;
height: 80%;
border: 1px outset black;
}
.nav:hover {
background-color: red;
opacity: 80%;
}
.main {
background-color: orange;
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
width: 70%;
text-align: center;
height: 80%;
float: right;
border: 1px outset black;
}
.link div {
background-color: gray;
opacity: 80%;
padding: 15px;
height: 100px;
margin: 20px 20px 20px 20px;
}
.link a {
color: white;
text-decoration: none;
}
.foot {
background-color: green;
width: 100%;
height: 10%;
text-align: center;
display:inline-block;
margin-top: 10px;
}
</style>
<div class="header"><p>Header</p>
</div>
<div class="nav">
<div class="link">
<div><a href="box.html">Project 1</a></div>
<div><a href="xob2.html">Project 2</a></div>
<div><a href="xob3.html">Project 3</a></div>
</div>
</div>
<div class="main"><form action="" method="">
<table
<tr>
<td>Nama</td>
<td> </td>
<td><input type="name" name="fname" style="width: 200px;" required placeholder="Nama depan" />
<input style="margin-left: 25px; width: 200px;" type="text" name="lname" required
placeholder="Nama belakang"><br /></td>
</tr>
<tr>
<td>No. Tlp</td>
<td> </td>
<td><input class="lebar" type="name" name="fname" required placeholder="No. Tlp" /> </td>
</tr>
<tr>
<td>No. Tlp</td>
<td> </td>
<td><input class="lebar" type="name" name="fname" required placeholder="Nama depan" /> </td>
</tr>
<tr>
<td>Gender</td>
<td> </td>
<td> <input type="radio" name="jenisKelamin" /> Pria
<input type="radio" name="jenisKelamin" /> Wanita
</td>
</tr>
<tr>
<td>Jenjang</td>
<td> </td>
<td><select name="jenjang" class="lebar">
<option value="islam"> ------- Pilih Jenjang ------- </option>
<option value="x"> X</option>
<option value="xi"> XI</option>
<option value="xii"> XII</option>
</select>
</td>
</tr>
<tr>
<td>Hobi</td>
<td> </td>
<td> <input type="checkbox" name="hobi" /> Membaca </input>
<input type="checkbox" name="hobi" /> Menulis </input>
<input type="checkbox" name="hobi" /> Olahraga </input>
</td>
</tr>
<tr>
<td>Alamat</td>
<td> </td>
<td><textarea name="komentar" rows="10" cols="60"></textarea> </td>
</tr>
<tr>
<td></td>
<td></td>
<td><input class="submit" type="submit" name="submit" value="Kirim" /></td>
</tr>
</form>
</table>
</div>
</div>
<div class="foot"><p>Footer</p></div>
</body>
</html>
Komentar
Posting Komentar