++++++++++++HTML+++++++++++++
<!DOCTYPE html>
<head>
<title>Tugas Layout Web Elektro</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
.style2 {font-size: 18px}
-->
</style>
</head>
<body>
<header>
<div class="box-header">
<div class="rightfloat header-rtext">
<div class="header-link">
<a href=#>Beranda</a> | <a href=#>SiteMap</a> | <a href=#>RSS</a> | <a href=#>Kontak</a> | <a href=#>Pembuat</a></div>
<div class="header-search">Pencarian: <input class="input-search" type="text"></div>
</div>
<img class="logo-pic" src="logo.png" width="75" height="72"> </div><div class="logo-title">Pendidikan Teknik Informatika</div>
</header>
<nav>
<div class="box-nav">
<a href=#><div class="menu-nav"><div class="menu-text">Beranda</div></div></a>
<a href=#><div class="menu-nav"><div class="menu-text">Berita & Trend</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">Tips & Trick</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="Banner.jpg" width="740">
<div class="rightfloat box-rsect">
<div class="subtitle">Dinding</div>
<ul>
<a href=#><li class="rsect-list">Nilai Siswa</li></a>
<li class="rsect-list"><a href=#>Jadwal Kuliah</a></li>
<li class="rsect-list"><a href=#>Jadwal Dosen</a></li>
<li class="rsect-list"><a href=#>Kegiatan Kampus</a></li>
</ul>
</div>
<div class="subtitle style2">Seminar Pendidikan</div>
<div class="datepost">1 Maret 2011 - 11:14 AM</div>
<div class="content">
<p>Evaluasi pendidikan mencakup dua sasaran pokok, yaitu : evaluasi makro (program) dan evaluasi mikro (kelas). Secara umum, evaluasi terbagi dalam tiga tahapan sesuai proses belajar mengajar yakni dimulai dari evaluasi input, evaluasi proses dan evaluasi output.
<a class="more" href="#">[Baca Selengkapnya]</a></p>
<p> </p>
</div>
<div class="subtitle style2">Packet Tracer</div>
<div class="datepost">2 Maret 2011 - 06:00 PM</div>
<div class="content">
Packet tracer adalah sebuah simulator protocol jaringan yang dikembangkan oleh Cisco
System. Paket Tracer dapat mensimulasikan berbagai macam protocol yg digunakan
pada jaringan baik secara realtime maupun dengan mode simulasi.
<a class="more" href="#">[Baca Selengkapnya]</a> </div>
</div>
</section>
<footer><div class="box-footer">
<div class="footer-text style1">Tugas css design layout web Pendidikan Teknik Informatika © 2011 M.Iqbal Arrikza </div>
</div>
</footer>
</body>
</html>
body {
margin:10px auto;
width:894px;
height:auto;
}
header,nav,section,footer {
display:block;
border:0px solid black;
background-color:#009900;
}
a{
cursor:pointer;
text-decoration:none;
color: #000000;
}
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:#333333;
height:70px;
}
.logo-pic {
margin-top:0px;
margin-left:5px;
}
.logo-title {
position: relative;
left:90px;
top: -55px;
font-family: Arial;
font-size:20px;
font-weight:bolder;
color:white;
height: auto;
width: 300px;
overflow: visible;
}
.header-rtext,.box-header a {
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.header-link {
margin-right:5px;
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
}
.header-search {
margin-top:30px;
padding-left:45px;
font-family:"Trebuchet MS";
font-size:12px;
}
.input-search {
border:1px solid #00FF00;
background-color:#FFFFFF;
width:130px;
}
nav {
float:left;
width:150px;
height:448px;
background-color:#009900;
}
.box-nav {
margin-left:3px;
background-color:#009900;
height:inherit;
border:1px solid #CCCCCC;
}
.menu-nav {
margin-left:-3px;
background-color: #333333;
height:30px;
border-width:1px;
border-style:solid;
border-color:#CCCCCC;
font-weight:lighter;
padding-top:4px;
}
.menu-text {
font-family:"Verdana";
font-size:12px;
color:#FFFFFF;
margin-top:5px;
margin-left:10px;
}
.menu-nav:hover {
cursor:pointer;
margin-left:0px;
background-color: #00FF00;
height:30px;
font-weight:bold;
border: 1px double #CCCCCC;
}
section {
margin-left:150px;
width:auto;
height:450px;
}
.box-sect {
background-color:#00FF00;
height:inherit;
margin-right:3px;
}
.subtitle {
margin-top:5px;
margin-left:10px;
font-family:"Verdana";
font-size:16px;
font-weight:bolder;
color:#FFFFFF;
height: auto;
width: 400px;
}
.datepost {
padding-left:10px;
color:#333333;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-style:italic;
}
.content {
margin-top:5px;
margin-left:15px;
font-family: "Courier New", Courier, monospace;
font-size:12px;
color:#000000;
width:65%;
}
.more {
position:static;
padding-left:16px;
color:#FFFFFF;
font-family:"Trebuchet MS";
font-size:10px;
}
.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:#009900;
border-width:1px;
border-style:solid;
border-color:#FFFFFF;
}
.rsect-list ul, .rsect-list a{
list-style-type:square;
color:#000000;
font-family:"Courier New", Courier, monospace;
font-size:12px;
font-weight:inherit;
}
footer {
clear:both;
height:65px;
border:1px solid #CCCCCC;
}
.box-footer {
margin-top:5px;
margin-bottom:10px;
background-color:#009900;
height:50px;
}
.footer-text {
padding-top:20px;
padding-left:200px;
}
.footer-text,.box-footer a {
color:#FFFFFF;
font-family:"Courier New", Courier, monospace;
font-size:12px;
color:#FFCC33;
}
.rightfloat {
float:right;
}
Tidak ada komentar:
Posting Komentar