// rumah.css
body{
margin:5px auto;
padding:0;
font:0.72em/150% Calibri;
}
wrapper{
margin: auto;
width:980px;
}
header{
height:80px;
margin:0px auto;
background:#0000;
}
header-content{
height:70px;
margin:auto;
background:url(image/1.jpg);
}
menu-top{
font-size:small;
height:20px;
float:right;
padding:0px 50px;
font-weight:bold;
}
logo{
float:left;
margin:10px 10px 10px 50px;
height:50px;
}
site-title h2{
float: left;
padding:0px 10px;
height:30px;
margin:20px 0px;
font:2.1em/100% 'ravie';
font-weight:bold;
}
search{
clear:right;
float:right;
margin:20px 50px 0px auto;
height:30px;
font-weight:bold;
}
inner{
float:left;
margin:0px;
}
footer{
clear:both;
height:60px;
background:#2033a9;
}
footer p{
text-align:center;
}
sidebar{
float:left;
width:200px;
height:400px;
background-color:#bbbbbb;
}
content{
float:right;
width:780px;
height:400px;
background:#FFF;
}
content-top{
clear:both;
margin:auto;
width:780px;
height:140px;
background-image:url(2.jpg)
}
content-main{
float:left;
margin:auto;
width:480px;
height:240px;
}
content-main p, h3{
padding: 10px 20px 0px 20px;
text-align:justify;
}
.style1{
font-size:x-small;
}
content-main hr{
width:440px;
color:#FF9900;
margin: 10px 20px 0px 20px;
}
content-right{
float:right;
margin:10px auto;
width:260px;
border:2px solid blue;
background:#4a5cca;
}
content-right h3{
padding:10px 20px 0px 20px;
text-align:justify;
}
content-right ul{
padding:10px 20px 20px 40px;
list-style:square;
}
leftmenu ul{
width:200px;
list-style-type:none;
padding:0;
margin:0;
}
leftmenu a:link,leftmenu a:visited,leftmenu a:active{
padding-left:15px;
text-decoration:none;
}
leftmenu a{
padding:5px 0px 5px 15px;
display:block;
background:#818dd5 no-repeat left center;
margin:0px 0px 1px; color:#000;
}
leftmenu a: hover{
background:#5e9711 no-repeat left center;
color:#fff;
}
//rumah.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Tugas Praktikum Modul 4</title>
<link rel="stylesheet" href="rumah.css" type= "text/css" />
</head>
<body>
<header>
<header-content>
<menu-top>
Home | Sitemap | RSS | Contact | About Us
</menutop>
<logo>
<img src="b.jpg" width="50" alt="" />
</logo>
<site-title>
<h2>Doraemon</h2>
</site-title>
<search>
Search : <input name="q" size="20" type="text"/>
</search>
</header-content>
</header>
<inner>
<sidebar>
<leftmenu>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Image and Videos</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Quiz</a></li>
<li><a href="#">Download</a></li>
</ul>
</leftmenu>
</sidebar>
<content>
<content-top>
</content-top>
<content-main>
<h3>Doraemon fans</h3>
<hr/>
<p class="style1">
Selasa,28 Januari 2011
</p>
<p>
Doraemon adalah judul sebuah manga populer yang dikarang Fujiko F. Fujio.
Sejak tahun 1969 dan berkisah tentang kehidupan seorang anak pemalas kelas 5 SD yang bernama Nobi Nobita,yang didatangi oleh sebuah robot kucing bernama Doraemon yang datang dari abad ke-22.
Dia dikirim untuk menolong Nobita agar keturunan Nobita dapat menikmati kesuksesannya daripada harus menderita dari utang finansial — yang akan terjadi di masa depan,yang disebabkan karena kebodohan Nobita.
Nobita, setelah gagal dalam ulangan sekolahnya atau setelah diganggu oleh Giant dan Suneo, akan selalu mendatangi Doraemon untuk meminta bantuannya. Doraemon kemudian biasanya akan membantu Nobita dengan menggunakan peralatan-peralatan canggih dari kantong ajaibnya; peralatan yang sering digunakan misalnya "baling-baling bambu" dan "Pintu ke Mana Saja".
Sering kali, Nobita berbuat terlalu jauh dalam menggunakan peralatannya dan malah terjerumus ke dalam masalah yang lebih besar.
</p>
</content-main>
<content-right>
<h3>Events</h3>
<ul>
<li><a href="#">Jumpa fans Doraemon fans club</a></li>
<li><a href="#">Pendaftaran member baru</a></li>
<li><a href="#">Release doraemon movies</a></li>
<li><a href="#">Meet and Great</a></li>
</ul>
</content-right>
</content>
</inner>
<footer>
<br />
<p><b>©2011 Doraemon.Lucu.Selalu
</footer>
</wrapper>
</body>
</html>
0 comments:
Post a Comment