css style :
@charset "utf-8";
body {
background-color: #000003;
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
background-repeat: no-repeat;
background-position: center top;
}
#semua {
width: 960px;
margin: auto;
background-color: #000003;
background-repeat: repeat;
background-position: center top;
}
#semua #header {
background-image: url(../images/templatemo_banner.jpg);
float: left;
height: 110px;
width: 960px;
}
#semua #header #sitejudul {
font-family: "Comic Sans MS", cursive;
font-size: 10px;
font-weight: bold;
color: #9CA50C;
float: left;
height: 50px;
width: 30%;
padding-top: 0px;
background-image: url(../images/Untitled-1.png);
background-repeat: no-repeat;
margin-left: 30px;
}
#semua #header #menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFF;
float: left;
height: 30px;
width: 60%;
margin-top: 20px;
margin-left: 30px;
text-decoration: none;
padding-right: 10px;
padding-left: 10px;
}
#semua #header #menu ul {
text-decoration: none;
text-align: center;
padding: 5px;
}
#semua #header #menu ul li {
display: inline;
text-decoration: none;
text-align: center;
margin: 5px;
}
#semua #header #menu ul li a {
text-align: center;
color: #000;
padding-left: 40px;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: bold;
text-decoration: none;
margin: 5px;
}
#semua #header #menu ul li a:hover {
color: #FFF;
text-align: center;
}
#semua #batasatas {
float: left;
height: 20px;
width: 960px;
background-color: #191718;
background-image: url(../images/templatemo_content_top.jpg);
}
#semua #konten {
float: left;
width: 970px;
background-image: url(../images/templatemo_container_bg.png);
margin-left: -5px;
}
#semua #konten #kiri {
float: left;
width: 30%;
}
#semua #konten #kiri .nav {
background-image: url(../images/nav.png);
float: left;
width: 250px;
height: 30px;
font-size: 18px;
font-style: normal;
font-weight: bold;
color: #000;
text-align: center;
margin-left: 30px;
margin-top: 10px;
padding-top: 10px;
}
#semua #konten #kiri .isi {
background-color: #000003;
float: left;
width: 230px;
margin-top: 0px;
color: #FFF;
margin-left: 30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
padding-right: 10px;
}
.news {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #FFF;
text-align: justify;
margin-bottom: 30px;
}
#semua #konten #kiri .button {
background-image: url(../images/templatemo_button_01.jpg);
float: left;
height: 30px;
width: 120px;
margin-top: 30px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000;
background-repeat: no-repeat;
text-align: center;
padding-top: 5px;
padding-left: 15px;
text-decoration: none;
display: block;
}
#semua #konten #kiri .isi .button a {
color: #000;
text-decoration: none;
display: block;
}
.isikonten {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #FFF;
text-align: justify;
font-style: normal;
font-weight: normal;
}
#semua #konten #kanan {
float: left;
width: 70%;
}
#semua #konten #kanan .nav {
background-image: url(../images/navkanan.png);
float: left;
height: 30px;
width: 600px;
margin-left: 40px;
margin-top: 10px;
font-size: 18px;
font-weight: bold;
color: #000;
text-align: center;
padding-top: 10px;
}
#semua #konten #kanan .isi {
background-color: #000003;
float: left;
width: 560px;
color: #FFF;
margin-left: 40px;
padding-top: 10px;
padding-left: 20px;
padding-bottom: 10px;
padding-right: 20px;
margin-bottom: 20px;
border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
}
#semua #batasbawah {
background-color: #191718;
height: 30px;
}
#semua #footer {
background-image: url(../images/templatemo_footer.jpg);
float: left;
height: 40px;
width: 960px;
text-align: center;
vertical-align: middle;
padding-top: 65px;
font-size: 12px;
font-weight: lighter;
font-variant: normal;
text-transform: lowercase;
}
index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon"
href="images/logoslahpaham.png">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>salahpaham</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="semua">
<div id="header">
<div id="sitejudul">
</div>
<div id="menu">
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Galery</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</div>
</div>
<div id="batasatas"></div>
<div id="konten">
<div id="kiri">
<div class="nav">Berita Terkini</div>
<div class="isi">
<div class="news">
</div>
<div class="news">
</div>
<div class="button"><a href="#">View All</a></div>
</div>
<div class="nav">Iklan</div>
<div class="isi">
<div class="news">
</div>
</div>
<div class="nav">Profil Saya</div>
<div class="isi">
<div class="news">
<img src="images/IMG_3361.jpg" width="220" height="281" border="1" />
<pre>
Nama : Muhamad Soleh
Nim : 13.12.7507
Kelas : 13-S1SI-06</pre>
</div>
</div>
</div>
<div id="kanan">
<div class="nav">Beranda</div>
<div class="isi">
<div class="isikonten">
<p><h2><center>Malaysia Style</center></h2></p>
<center><img src="images/IMG_1908.jpg" width="500" height="363" border="1" align="center" /></center>
</div>
</div>
</div>
</div>
<div id="batasbawah"></div>
<div id="footer">Copyright©Salahpaham.com | Template by kartajunior</div>
</div>
</body>
</html>
