source HTML
<!DOCTYPE html>
<head>
<title>Tugas Layout Web Elektro</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header>
<div class="box-header">
<div class="rightfloat header-rtext">
<div class="header-link">
<a href=#>Home</a>|<a href=#>Our Offer</a>|<a href=#>Rulles and Policies</a>|<a href=#>Contact us</a></div>
<div class="header-search">Search Engine <input class="input-search" type="text"></div>
</div>
<img width="70" height="70" src="Web_clip_image002.gif" alt="UM Color">
<div class="logo-title">Teknik Informatika</div>
</div>
</header>
<nav>
<div class="box-nav">
<a href=#><div class="menu-nav"><div class="menu-text">Company</div></div></a>
<a href=#><div class="menu-nav"><div class="menu-text">Categories</div></div></a>
<a href=#><div class="menu-nav"><div class="menu-text">Tutorial</div></div></a>
<a href=#><div class="menu-nav"><div class="menu-text">Produces</div></div></a>
<a href=#><div class="menu-nav"><div class="menu-text">Downloads</div></div></a>
</div>
</nav>
<section>
<div class="box-sect"><img src="Web_clip_image002.jpg" alt="" width="298" height="79"><img src="Web_clip_image002_0000.jpg" alt="" width="298" height="79">
<div class="rightfloat box-rsect">
<div class="subtitle">Woro-Woro !</div>
<ul>
<a href=#>
<li class="rsect-list">Berita Terbaru</li>
</a>
<li class="rsect-list"><a href=#>Berita Terbaik</a></li>
<li class="rsect-list"><a href=#>Berita Terkocak</a></li>
<li class="rsect-list"><a href=#>Berita Terlalu</a></li>
<li class="rsect-list"><a href=#>Berita Terr...</a></li>
</ul>
</div>
<div class="subtitle">Hikmah</div>
<div class="datepost">02 maret 2011 - 10:30 PM</div>
<div class="content">
Jika kamu menghitung-hitung nikmat Allah, niscaya kamu tidak akan dapat menentukan jumlahnya. Sesungguhnya Allah benar-benar Maha Pengampun lagi Maha Penyayang". (QS. An-Nahl:18)
<a class="more" href="#">[Read Mode]</a> </div>
<div class="subtitle"> Pesan Penting</div>
<div class="datepost"> Untukmu Pewaris Peradaban Sejati</div>
<div class="content">
Padamu pewaris negeri , harapan selalu terpatri, azam tetap membahana hingga terwujudkan janji. padamu pewaris negeri teruslah melangkah beriringan untuk lantahkan kebatilan , bergerak keharmonian tegakkan keadilan. dalam hidup hanya Allah tujuan kita, Rosulullah tauladan kita, Alqur'an pedoman kita, Jihad adalah jalan juang kita dan mati dijalan Allah/syahid adalah cita-cita tertinggi kita.<a class="more" href="#">Read Mode]</a> </div>
</div>
</section>
<footer>
<div class="box-footer">
<div class="footer-text">css design layout web elektro © 2011 by <strong><a href="http://ulul-alabab-manesa.blogspot.com">Mohamad Nur Afandi</a></strong></div>
</div>
</footer>
</body>
</html>
source CMS
body {
margin:10px auto;
width:750px;
}
header,nav,section,footer {
display:block;
border:0px solid red;
background-color:yellow;
}
a{
cursor:pointer;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
header {
height:90px;
margin-top:-10px;
border:1px solid gray;
}
.box-header {
margin-top:10px;
margin-bottom:10px;
background-color:#00FF66;
height:70px;
}
.logo-pic {
margin-top:10px;
margin-left:5px;
}
.logo-title {
position: relative;
left:70px;
top: -55px;
font-family: Arial;
font-size:20px;
font-weight:bolder;
color:black;
height: auto;
width: 200px;
}
.header-rtext,.box-header a {
color:#003399;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.header-link {
margin-right:5px;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
}
.header-search {
margin-top:30px;
padding-left:45px;
font-family:"Courier New";
font-size:12px;
}
.input-search {
border:0px solid #000000;
width:135px;
}
nav {
float:left;
width:150px;
height:400px;
}
.box-nav {
margin-left:3px;
background-color:#0033FF;
height:inherit;
}
.menu-nav {
margin-left:-3px;
background-color: #0033CC;
height:30px;
border-width:3px;
border-style:solid;
border-color:#000099;
font-weight:lighter;
}
.menu-text {
font-family:"Verdana";
font-size:12px;
color:#FFFF33;
margin-top:5px;
margin-left:10px;
}
.menu-nav:hover {
cursor:pointer;
margin-left:0px;
background-color:#00CCFF;
height:30px;
border-width:3px;
border-style:solid;
border-color:#0033CC;
font-weight:bold;
}
section {
margin-left:150px;
width:auto;
height:400px;
}
.box-sect {
background-color:#66FFFF;
height:inherit;
margin-right:3px;
}
.subtitle {
margin-top:5px;
margin-left:10px;
font-family:"Verdana";
font-size:16px;
font-weight:bolder;
color:black;
height: auto;
width: 200px;
}
.datepost {
padding-left:10px;
color:blue;
font-family:"Courier New";
font-size:12px;
font-style:italic;
}
.content {
margin-top:5px;
margin-left:15px;
font-family: Verdana;
font-size:12px;
color:black;
}
.more {
position:fixed;
padding-left:10px;
color:blue;
font-family:"Courier New";
font-size:12px;
}
.more:hover {
font-weight:bold;
text-decoration:none;
}
.box-rsect {
width:200px;
height:auto;
margin-top:5px;
margin-right:10px;
padding-bottom:5px;
background-color:#CCFF00;
border-width:3px;
border-style:solid;
border-color:#000099;
}
.rsect-list ul, .rsect-list a{
list-style-type:square;
color:black;
font-family:"Courier New";
font-size:12px;
}
footer {
clear:both;
height:65px;
border:1px solid blue;
}
.box-footer {
margin-top:5px;
margin-bottom:10px;
background-color:#00CC33;
height:50px;
}
.footer-text {
padding-top:20px;
padding-left:200px;
}
.footer-text,.box-footer a {
color:gray;
font-family:"Courier New";
font-size:12px;
}
.rightfloat {
float:right;
}
Tidak ada komentar:
Posting Komentar