bunu ayırabilirmisiniz acil

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

* {
   margin: 0;
   padding: 0;
}

body {
   background: #000000 url(http://img.webme.com/pic/r/rapalemi21/img1.jpg) no-repeat center top;
   font: normal 13px Georgia, "Times New Roman", Times, serif;
   color: #4E515B;
}

h1, h2, h3 {
   color: #CDCDE2;
}

h2 {
}

h3 {
}

p, blockquote, ul, ol {
   text-align: justify;
}

p {
}

blockquote {
   margin-left: 3em;
}

ul {
   margin-left: 3em;
}

ul li {
}

.list1 {
   margin: 0;
   padding: 0;
   list-style: none;
}

.list1 li {
   padding: 8px 0;
   background: url(images/img5.gif) repeat-x left top;
}

.list1 .first li {
   background: none;
}

ol {
   margin-left: 3em;
}

ol li {
}

a {
   text-decoration: none;
   color: #CDCDE2;
}

a:hover {
   text-decoration: underline;
   color: #FFFFFF;
}

img {
   border: none;
}

img.left {
   float: left;
   margin: 5px 15px 0 0;
}

img.right {
   float: right;
   margin: 5px 0 0 15px;
}

/* Boxed Style */

.boxed {
   margin-bottom: 20px;
}

.boxed .title {
   padding: 5px 0;
   background: url(images/img5.gif) repeat-x left bottom;
}

.boxed .title h2 {
   background: url(http://img.webme.com/pic/r/rapalemi21/img2.gif) no-repeat right center;
   text-transform: uppercase;
   font-size: 100%;
}

.boxed .content {
   padding: 20px 20px 40px 20px;
}

/* Post */

.post {
}

.post .title {
   padding: 5px 0;
   background: url(images/img5.gif) repeat-x left bottom;
}

.post .title h2 {
   background: url(images/img2.gif) no-repeat right center;
   text-transform: uppercase;
   font-size: 100%;
}

.post .date {
   float: left;
   width: 100px;
   height: 25px;
   padding-top: 15px;
   background: url(images/img5.gif) repeat-y right top;
   text-align: center;
   font-size: 9px;
}

.post .date .month {
}

.post .date .day {
}

.post .date .year {
}

.post .meta {
   float: left;
   width: 300px;
   height: 32px;
   padding: 8px 0 0 20px;
   font-size: 9px;
}

.post .meta p {
}

.post .story {
   clear: both;
   padding: 20px;
   background: url(images/img5.gif) repeat-x;
}

.post .story p, .post .story blockquote, .post .story ul, .post .story ol {
   margin-bottom: 1.5em;
   line-height: 180%;
}

/* Logo */

#logo {
   width: 700px;
   height: 220px;
   margin: 0 auto;
}

#logo h1 {
   margin: 0;
   padding: 60px 0 0 325px;
   text-transform: uppercase;
   letter-spacing: -5px;
   font-size: 72px;
   font-weight: normal;
}

#logo h2 {
   margin: -10px 0 0 0;
   padding: 0 0 0 325px;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-size: 18px;
   font-weight: normal;
}

#logo a {
   text-decoration: none;
   color: #000000;
}

/* Page */

#page {
   width: 700px;
   margin: 0 auto;
}

#extra {
}

/* Content */

#content {
   float: right;
   width: 420px;
   padding: 0 20px;
   background: url(http://img.webme.com/pic/r/rapalemi21/img4.gif) no-repeat;
}

/* Sidebar */

#sidebar {
   float: left;
   width: 200px;
   padding: 0 20px;
   background: url(http://img.webme.com/pic/r/rapalemi21/img3.gif) no-repeat right top;
}

/* Content > Sidebar > Login */

#login {
}

#login form {
}

#login fieldset {
   border: none;
}

#login legend {
   display: none;
}

#login label {
   font-size: x-small;
   font-weight: bold;
}

#login input {
   margin-bottom: 5px;
   padding: 2px 5px;
   border: none;
   font-family: Georgia, "Times New Roman", Times, serif;
}

#inputtext1, #inputtext2 {
   width: 150px;
}

#inputsubmit1 {
   width: 100px;
   background: transparent url(images/img2.gif) no-repeat left top;
   color: #CDCDE2;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-size: 10px;
   font-weight: bold;
}

/* Content > Sidebar > Menu */

#menu {
   width: 700px;
   height: 95px;
   margin: 0 auto;
}

#menu ul {
   margin: 0;
   padding-left: 20px;
   list-style: none;
}

#menu li {
   display: inline;
}

#menu a {
   display: block;
   float: left;
   height: 34px;
   padding: 16px 30px 0 40px;
   text-decoration: none;
   text-transform: uppercase;
   font-size: 16px;
   color: #4E515B;
}

#menu a:hover {
   background: #000000 url(images/img2.gif) no-repeat 15px 50%;
   color: #CDCDE2;
}

#menu .first a {
   border: none;
}

#menu .active a {
   color: #FFFFFF;
}

/* Footer */

#footer {
   clear: both;
   width: 660px;
   margin: 0 auto;
   padding: 20px;
   background: url(http://img.webme.com/pic/r/rapalemi21/img5.gif) repeat-x;
}

#footer p {
   margin: 0;
   text-align: right;
   font-size: x-small;
}

/* Footer > Legal */

#legal {
}

/* Footer > Links */

#links {
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Title      : Eclipse
Version    : 1.0
Released   : 20070415
Description: A two-column fixed-width with dark eerie look and feel suitable for personal blogs and organization sites.

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Eclipse by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo">
   <h1><a href="#">Eclipse</a></h1>
   <h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
</div>
<div id="menu">
   <ul>
      <li class="active first"><a href="#" title="">Home</a></li>
      <li><a href="#" title="">Blogs</a></li>
      <li><a href="#" title="">Photos</a></li>
      <li><a href="#" title="">About</a></li>
      <li><a href="#" title="">Contact</a></li>
   </ul>
</div>
<!-- end #menu -->
<div id="page">
   <div id="content">
      <div id="welcome" class="post">
         <div class="title">
            <h2>Welcome to Eclipse!</h2>
         </div>
         <h3 class="date"><span class="month">Mar.</span> <span class="day">8</span><span class="year">, 2007</span></h3>
         <div class="meta">
            <p>Posted by Jane Anderson under <a href="#">Uncategorized</a>, <a href="#">Daily Journal</a><br />
               <a href="#">Trackback URI</a> | <a href="#">No Comments</a> | <a href="#">Permalink</a></p>
         </div>
         <div class="story"> <img src="images/img6.jpg" alt="" width="112" height="112" class="left" />
            <p><strong>Eclipse</strong> is a free template from <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photos are from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. <em>Enjoy :)</em></p>
         </div>
      </div>
      <div id="example" class="post">
         <div class="title">
            <h2>Examples of Common Tags</h2>
         </div>
         <h3 class="date"><span class="month">Feb.</span> <span class="day">24</span><span class="year">, 2007</span></h3>
         <div class="meta">
            <p>Posted by Jane Anderson under <a href="#">Samples</a><br />
               <a href="#">Trackback URI</a> | <a href="#">No Comments</a> | <a href="#">Permalink</a></p>
         </div>
         <div class="story">
            <p>This is an example of a paragraph followed by a blockquote. In posuere  eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula.  Pellentesque viverra vulputate enim. Aliquam erat volutpat lorem ipsum  dolorem.</p>
            <blockquote>
               <p>&ldquo;Pellentesque tristique ante ut  risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum  id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec  placerat odio.&rdquo;</p>
            </blockquote>
            <h3>Heading Level Three</h3>
            <p>This is another example of a paragraph followed by an unordered list. In posuere  eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula.  Pellentesque viverra vulputate enim. Aliquam erat volutpat lorem ipsum  dolorem.</p>
            <p>An ordered list example:</p>
            <ol>
               <li>List item number one</li>
               <li>List item number two</li>
               <li>List item number thre</li>
            </ol>
         </div>
      </div>
   </div>
   <!-- end #content -->
   <div id="sidebar">
      <div id="login" class="boxed">
         <div class="title">
            <h2>Client Account</h2>
         </div>
         <div class="content">
            <form id="form1" method="post" action="#">
               <fieldset>
               <legend>Sign-In</legend>
               <label for="inputtext1">Client ID:</label>
               <input id="inputtext1" type="text" name="inputtext1" value="" />
               <label for="inputtext2">Password:</label>
               <input id="inputtext2" type="password" name="inputtext2" value="" />
               <input id="inputsubmit1" type="submit" name="inputsubmit1" value="Sign In" />
               <p><a href="#">Forgot your password?</a></p>
               </fieldset>
            </form>
         </div>
      </div>
      <!-- end #login -->
      <div class="boxed">
         <div class="title">
            <h2>Lorem Ipsum Dolor</h2>
         </div>
         <div class="content">
            <ul class="list1">
               <li class="first"><a href="#">Maecenas luctus lectus</a></li>
               <li><a href="#">Etiam rhoncus volutpat</a></li>
               <li><a href="#">Donec dictum metus in</a></li>
               <li><a href="#">Integer gravida nibh quis</a></li>
               <li><a href="#">Etiam posuere augue sit</a></li>
               <li><a href="#">Mauris vulputate dolor</a></li>
               <li><a href="#">Nulla luctus eleifend</a></li>
               <li><a href="#">Praesent scelerisque erat</a></li>
               <li><a href="#">Ut nonummy rutrum sem</a></li>
               <li><a href="#">Tempus quam quis nulla</a></li>
               <li><a href="#">Fusce ultrices metus</a></li>
               <li><a href="#">Praesent mattis nisl </a></li>
            </ul>
         </div>
      </div>
   </div>
   <!-- end #sidebar -->
   <div id="extra" style="clear: both;">&nbsp;</div>
</div>
<!-- end #page -->
<div id="footer">
   <p id="legal">Copyright &copy; 2007 Eclipse. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
   <p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
</div>
</body>
</html>