Pada tugas praktikum keempat kita mengintegrasikan CSS dengan HTML script untuk membuat suatu desain web yang telah ditentukan pada modul 4. Adapun tampilan visual dari outputnya sebagai berikut :
Sedangkan CSS dan HTML scriptnya dapat dilihat lebih lengkap di bawah ini :
a. CSS style :
body {
margin:10px auto;
width:750px;
}
header,nav,section,footer {
display:block;
border:0px solid red;
background-color:#90BF01;/*edit warna latar disini*/
}
a{
cursor:pointer;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
header {
height:90px;
margin-top:-10px;
border:1px solid green;/*edit warna borderheader disini*/
}
.box-header {
margin-top:10px;
margin-bottom:10px;
background-color:#C0E058;/*edit warna header disini*/
height:70px;
}
.logo-pic {
margin-top:10px;
margin-left:5px;
}
.logo-title {
position: relative;
left:70px;
top: -40px;
font-family: Helvetica;
font-size:20px;
font-weight:bolder;
color:#000099;/*edit warna judul header disini*/
height: auto;
width: 200px;
}
.header-rtext,.box-header a {
color:black;/*edit warna teks kanan header disini*/
}
.header-link {
margin-right:5px;
font-family: "Tahoma";
font-size:12px;
}
.header-search {
margin-top:30px;
padding-left:45px;
font-family:"Tahoma";
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:#D8E8A0;/*edit warna latar navigasi disini*/
height:inherit;
}
.menu-nav {
margin-left:-3px;
background-color: #68A810;/*edit warna navigasi disini*/
height:30px;
border-width:3px;
border-style:solid;
border-color:#68A910 #90C000 #90C000 #68A910;/*#atas #kanan #bawah #kiri > edit warna border*/
font-weight:lighter;
}
.menu-text {
font-family:"Broadway";
font-size:12px;
color:#003300;/*edit warna font navigasi disini*/
margin-top:5px;
margin-left:10px;
}
.menu-nav:hover {
cursor:pointer;
margin-left:0px;/*edit jarak kiri navigasi saat disorot mouse disini*/
background-color: #5A930F;/*edit warna navigasi saat disorot mouse disini*/
height:30px;
border-width:3px;
border-style:solid;
border-color:#68A910 #90C000 #90C000 #68A910;/*#atas #kanan #bawah #kiri > edit warna border*/
}
section {
margin-left:150px;
width:auto;
height:400px;
}
.box-sect {
background-color:white;/*edit warna latar konten disini*/
height:inherit;
margin-right:3px;
}
.subtitle {
margin-top:5px;
margin-left:10px;
font-family:"Broadway";
font-size:16px;
font-weight:bolder;
color:black;
height: auto;
width: 200px;
}
.datepost {
padding-left:10px;
font-family:"Tahoma";
font-size:12px;
}
.content {
margin-top:5px;
margin-left:15px;
font-family: Verdana;
font-size:12px;
color:black;
}
.more {
position:fixed;
padding-left:10px;
color:gray;/*edit warna read more disini*/
font-family:"Tahoma";
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:#D8E8A0;/*edit warna event disini*/
border-width:3px;
border-style:solid;
border-color:#BCB172 #C1D98B #B9D171 #99AF4F;/*#atas #kanan #bawah #kiri > edit warna border*/
}
.rsect-list ul, .rsect-list a{
list-style-type:square;
color:black;
font-family:"Tahoma";
font-size:12px;
}
footer {
clear:both;
height:65px;
border:1px solid green;/*edit warna border footer disini*/
}
.box-footer {
margin-top:5px;
margin-bottom:10px;
background-color:#C0E058;/*edit warna footer disini*/
height:50px;
}
.footer-text {
padding-top:20px;
padding-left:200px;
}
.footer-text,.box-footer a {
color:green;/*edit warna font footer disini*/
font-family:"Tahoma";
font-size:12px;
}
.rightfloat {
float:right;
}
b. HTML script :
<!DOCTYPE html>
<head>
<title>Tugas Layout Web Elektro</title>
<link rel="shorcut icon" href="icon.jpg">
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<header>
<div class="box-header">
<div class="rightfloat header-rtext">
<div class="header-link">
<a href=#>Home</a>|<a href=#>SiteMap</a>|<a href=#>RSS</a>|<a href=#>Contanct</a>|<a href=#>AboutUs</a></div>
<div class="header-search">Search <input class="input-search" type="text"></div>
</div>
<img class="logo-pic" src="logo.jpg" width="50px" height="50px">
<div class="logo-title">TEKNIK ELEKTRO</div>
</div>
</header>
<nav>
<div class="box-nav">
<a href=#><div class="menu-nav"><div class="menu-text">Home</div></div></a>
<a href=#><div class="menu-nav"><div class="menu-text">News & Media</div></div></a>
<a href=#><div class="menu-nav"><div class="menu-text">Tutorials</div></div></a>
<a href=#><div class="menu-nav"><div class="menu-text">Tips & Tricks</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="photo.jpg" width="600px">
<div class="rightfloat box-rsect">
<div class="subtitle">Events</div>
<ul>
<li class="rsect-list"><a href=#>Battle Dance</a></li>
<li class="rsect-list"><a href=#>Motor Cross</a></li>
<li class="rsect-list"><a href=#>Lomba Karaoke</a></li>
<li class="rsect-list"><a href=#>Lomba Futsal</a></li>
</ul>
</div>
<div class="subtitle">Seminar Pra Skripsi</div>
<div class="datepost">20 Februari 2011 - 10:14 PM</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.
<a class="more" href="#">[Read More....]</a>
</div>
<div class="subtitle">Lomba Web Design</div>
<div class="datepost">23 Februari 2011 - 10:00 PM</div>
<div class="content">
Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.
<br>
<a class="more" href="#">[Read More....]</a>
</div>
</div>
</section>
<footer>
<div class="box-footer">
<div class="footer-text">Tugas Design Layout Web Elektro Menggunakan CSS & copy; 2011 by <strong>Lilik Nur Aini</strong></div>
</div>
</footer>
</body>
</html>
0 comments
Posting Komentar