Thursday 3 March 2011

Tugas Praktikum 4 - CSS Web Layout Design

3/03/2011 10:50:00 am  Ignored Zone  No comments

Tugas Praktikum 4 - CSS Web Layout Design
Eko Fahrudi Silviawan
100533406929
S1 PTI


CSS type: Embedded

Download source code

Source Code

<!DOCTYPE html>
<html lang="id">
<head>
<title>Tugas Praktikum 4 - css web layout design</title>
<style type="text/css">
<!--
body{
    font-family:Arial;
    font-size:11px;
    background-color:#94A9D6;
    color:#333;
    padding:0;
    text-align:left;
    overflow-y:scroll;
}
.stContainer{
    width:950px;
    margin:0 auto 0 auto
}
.stHeader{
    width:950px;
    height:150px;
    background-image:url(images/wrapper-bg.png)
}
.header-link {
    margin-right:5px;
    font-family: Arial;
    font-size:12px;
}
.header-search {
    margin-top:30px;
    padding-left:45px;
    font-family: Arial;
    font-size:12px;
}
.input-search {
    border:0px solid #000000;
    width:135px;
}
.stNav{
    width:950px;
    height:35px;
    background-image:url(images/bgnav.png)
}
.stNavSidebar{
    width:210px;
    background-color: #7692CB;
    height: 450px;
    float: left;
}
.stCenterSection{
    clear:both;
    width:950px;
    height:450px;
}
.stSectionBody{
    width:730px;
    float: right;
    padding-top: 5px;
    padding-left: 5px;
}
.stFooter{
    clear:both;
    text-align:center;
    padding-top:5px;
    width:950px;
    height:25px;
    background-color: #7692CB;
    font-family: Arial;
    font-weight: bold;
    color: #FFFFFF;
    letter-spacing: 1px;
}
.stTxt{
    width:160px;
    height:24px;
    border:1px solid #6483C4;
}
.stPostTitle{
    font-family:Arial;
    font-size:19px;
    font-weight:bold;
    text-decoration: none;
}
.stPostDate{
    font-style:italic;
    color:#666666;
}
.stPostContent{
    font-size:12px;
}
.stRMore{
    text-decoration:none;
}
#Nav a{
    font: 12px Arial;
    color:#FFFFFF;
    text-decoration: none;
    text-align:center;
    font-weight:bold;
    width:100px;
    height:15px;
    display:block;
    float:left;
    background-image:url(images/bgnav.png);
    padding-top: 10px;
    padding-right: 5px;
    padding-bottom: 10px;
    padding-left: 5px;
}
#Nav a:hover{
    font: 12px Arial;
    color:#000000;
    text-decoration: none;
    text-align:center;
    font-weight:bold;
    width:100px;
    height:13px;
    display:block;
    float:left;
    padding:10px 5px 10px 5px;
    background-image:url(images/bgnavHover.png)
}
#NavSidebar a{
    font: 12px Arial;
    color:#FFFFFF;
    text-decoration: none;
    text-align:left;
    font-weight:bold;
    width:168px;
    height:15px;
    display:block;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    border: #456BBA solid 1px;
}
#NavSidebar a:hover{
    font: 12px Arial;
    color:#000000;
    text-decoration: none;
    text-align:right;
    font-weight:bold;
    width:168px;
    height:15px;
    display:block;
    background-color:#4A6FBB;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}
-->
</style>
</head>


<body>
<div class="stContainer">
<div class="stHeader">
<div style="width:250px; float:right; padding-top:25px; padding-right:15px">
<div class="header-link">
<a href="#">Home</a> |
<a href="#">About The Blog</a> |
<a href="#">About Me</a></div>
<div class="header-search">Search
<input class="stTxt" type="text" />
</div>
</div>
</div>
<div class="stNav">
<div id="Nav">
<a href="#">Music</a>
<a href="#">Software</a>
<a href="#">Movies</a>
<a href="#">About The Blog</a>
<a href="#">About Me</a>
</div>
</div>
<div class="stCenterSection">
<div class="stNavSidebar">
<div id="NavSidebar">
<a href=#>:: Music</a>
<a href=#>:: Software</a>
<a href=#>:: Movies</a>
<a href=#>:: About The Blog</a>
<a href=#>:: About Me</a>
</div>
</div>
<div class="stSectionBody">
<img src="images/img1.jpg" width="730"/>
<div style="width:490px; float:left; padding:5px; text-align:left;">
  <p><a class="stPostTitle" href="#">Music : Linkin Park [2010] - A Thousand Suns</a><br />
      <span class="stPostDate">03 Maret 2011 - 01:03 AM</span><br />
    </p>
  <p class="stPostContent">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="stRMore" href="#">[Read Mode]</a></p>
</div>
<div style="width:216px; float:left; margin-top:15px; padding:5px; border:black solid 2px;">
<p><span class="stPostTitle">Popular</span></p>
<ul>
<li>Linkin Park [2010] - A Thousand Suns</li>
<li>Linkin Park [2007] - Minutes to Midnight</li>
<li>Linkin Park [2003] - Meteora</li>
<li>Linkin Park [2000] - Hybrid Theory</li>
</ul>
</div>
</div>
</div>
<div class="stFooter">Tugas Praktikum 4 - css web layout design &copy; 2011 - Eko Fahrudi Silviawan</div>
</div>
</body>
</html>

Posted in:

0 comments:

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More