<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
background-image:url(pict/parangtritis.jpg);
background-size:cover;
}
#wrap {
max-width:1000px;
margin:auto;
/*background-color:lightyellow;*/
}
#menu_horizontal {
width:1000px;
height:100px;
background-color:none;
color:black;
text-align:center;
position:fixed;
top:0px;
z-index:200;
}
#slogan {
position:absolute;
top:10px;
width:200px;
height:80px;
left:10px;
/*background-color:yellow;*/
}
#gambar {
position:absolute;
top:10px;
width:200px;
height:80px;
right:10px;
}
#header {
position:relative;
margin-top:200px;
width:1000px;
height:40px;
display:block;
}
#header ul{
padding:0px;
margin:0px;
list-style-type:none;
text-align:center;
}
#header li{
display:inline;
}
#header li a{
text-decoration:underline;
margin-top:70px;
background-color:brown;
color:white;
border-right:1px solid gray;
padding:.9em 8em;
font-size:16px;
}
#header li a:hover{
background-color:gray;
color:white;
}
#kiri{
width:200px;
margin-top:0px;
min-height:510px;
position:relative;
display:block;
float:left;
}
#menu_vertikal{
position:absolute;
width:214px;
height:148px;
display:block;
border:1px solid black;
}
#login{
position :absolute;
top:150px;
width:214px;
height:150px;
background-color:lightblue;
display:block;
border:1px solid black;
margin-bottom:200px;
}
#login form{
text-align:center;
}
#event{
position :absolute;
top:301px;
width:400px;
height:231px;
background-color:none;
display:block;
border:1px solid black;
margin-bottom:200px;
}
#news{
width:783px;
margin-top:0px;
min-height:300px;
margin-left:15px;
display:block;
float:left;
background-color:white;
border:1px solid black;
}
#fasilitas{
width:598px;
margin-top:0px;
height:230px;
margin-left:200px;
display:block;
float:left;
/*background-color:lightblue;*/
border:1px solid black;
}
#footer{
clear:both;
margin-top:50px;
max-width:1000px;
height:80px;
background-color:lightgray;
color:black;
display:block;
text-align:center;
padding:2px;
opacity:0.4;
filter:alpha(pacity=0.4);
}
</style>
</head>
<body>
<div id="wrap">
<div id="menu_horizontal">
<div id="slogan"></div>
<div id="gambar"><image src="pict/logo.jpeg" height="150px" width="150px"></div>
</div>
<div id="header">
<ul>
<li><a href='home.html'>Home</a></li>
<li><a href='alam.html'>Wisata Alam</a></li>
<li><a href='buatan.html'>Wisata buatan</a></li>
</ul>
</div>
<div id="kiri">
<div id="menu_vertikal"><image src="pict/borobudur.jpeg" height="214px" width="214px">Koleksi Foto</div>
<div id="login"><text align="center">login
<form align="center"action="#" type="get">
ID
:</br><input type="text" name="nama"/></br>
PASSWORD
:<input type="text" name="pass"/>
</form>
</div>
<div id="event">event</div>
</div>
<div id="news">Berita(News)</div>
<div id="fasilitas">Fasilitas(Facility)</div>
<div id="footer">
<p style="font:11px verdana">
Hak Cipta © 2015 Kelompok praktikpengenalanweb1.blogspot.com</p>
<p style="font:15px Courier New" >
Telp. +62(721)282828 Fax. +62(315)232323</br>
Email : <b>dinaspariwisata@jogjaprov.go.id</b></p>
</div>
</div>
</body>
</html>
