Screenshot
index.html
<link href="style.css" rel="stylesheet" type="text/css">
<div id="kotak">
<div id="header"></div>
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#">Berita</a></li>
<li><a href="guru.php">Download</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">SiteMap</a></li>
</ul>
</div>
<div id="content">
<div id="kiri"></div>
<div id="kanan"></div>
</div>
<div id="footer">Copyright © 2012 Pengenalan Perancangan Web, All Right Reserved</div>
</div>
style.css
body {
background-color: #FFFFFF;
margin: 0px;
}
#kotak {
width: 980px;
margin-right: auto;
margin-left: auto;
}
#kotak #header {
background-image: url(header.jpg);
height: 280px;
width: 980px;
margin-right: auto;
margin-left: auto;
}
#kotak #content {
width: 960px;
min-height: 300px;
background-color: #999999;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
moz-border-radius: 5px;
webkit-border-radius: 5px;
border-radius: 5px;
padding: 10px;
}
#kotak #content #kanan {
background-color: #CCCCCC;
min-height: 300px;
width: 680px;
float: left;
margin-left: 10px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
border-radius: 5px;
}
#kotak #footer {
background-color: #666666;
height: 10px;
width: 980px;
margin-top: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
border-radius: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
}
#kotak #content #kiri {
background-color: #CCCCCC;
width: 250px;
padding-right: 10px;
padding-left: 10px;
min-height: 200px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
border-radius: 5px;
float: left;
}
#kotak #menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background-color: #666666;
height: 30px;
width: 980px;
}
#kotak #menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#kotak #menu ul li a {
text-decoration: none;
float: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFFFFF;
display: block;
padding: 8px;
color: #FFFFFF;
}
#kotak #menu ul li a:hover {
background-color: #CCCCCC;
color: #000000;
}
Index.html
<body>
<div class="menu">Menu Top</div>
<div class="slider"></div>
<div class="container960">
<div class="produk1">Produk1</div>
<div class="produk2">Produk2</div>
<div class="produk3">Produk3</div>
<div class="introweb">Content</div>
<div class="news">Sidebar</div>
</div>
<div class="menufooter">Footer Menu</div>
<div class="footer">Footer</div>
</body>
</html>
Style.css
* {
margin: 0px;
padding: 0px;
}
.menu {
color: #FFF;
height: 70px;
width: 100%;
background-color: #306;
}
.menufooter {
clear: both;
height: 70px;
width: 100%;
background-color: #609;
}
.container960 {
background-color: #036;
width: 960px;
margin: auto;
}
.slider{
width:100%;
height:440px;
background:#9C0;
color:#fff;
}
.cont_produk {
width: 960px;
}
.produk1 {
background-color: #00F;
float: left;
height: 400px;
width: 320px;
}
.produk2 {
background-color: #06F;
float: left;
height: 400px;
width: 320px;
}
.produk3 {
background-color: #0CF;
float: left;
height: 400px;
width: 320px;
}
.introweb {
background-color: #900;
float: left;
height: 300px;
width: 640px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.news {
background-color: #CC3;
float: left;
height: 300px;
width: 320px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.footer {
clear: both;
height: 70px;
width: 100%;
background-color: #C60;
}
Tidak ada komentar:
Posting Komentar