winterplain tasarim kodu
CSS KOD
* {margin: 0; padding: 0;}
html {height: 100%; padding-bottom: 1px;}
body {background: #FCFCFC url('https://img.webme.com/pic/g/guckanwebtasarimlari/body.jpg') no-repeat center top fixed; font: normal 13px Verdana,sans-serif; color: #345;}
a {color: #06A;}
a:hover {color: #036;}
p {margin: 2px 0 8px;}
h1 {font: normal 1em Georgia,Tahoma,sans-serif;}
h2 {font: normal 1em Georgia,sans-serif;}
h3 {font: bold 1em Tahoma,sans-serif;}
h1,h2,h3 {margin: 2px 0;}
blockquote {
background: #F9F9F9 url('https://img.webme.com/pic/g/guckanwebtasarimlari/quote.gif') no-repeat;
border-bottom: 1px solid #EAEAEA;
border-top: 1px solid #EAEAEA;
color: #555;
display: block;
font: normal 1em sans-serif;
margin: 1em 0;
padding: 0.6em 1em 0.2em 40px;
}
code {
display: block;
white-space: pre;
background: #FFFFF6;
border: 1px solid #EED;
padding: 5px 10px;
overflow: auto;
margin: 1em 0;
}
ul,ol {margin: 0 0 1em 1.4em;}
fieldset {padding: 12px 10px; background: #EFE; color: #232; border: 1px solid #DED; margin-bottom: 1em;}
legend {font: bold 1em Verdana,sans-serif; padding: 0 6px; color: #363;}
img {border: none;}
img.bordered,.post img {background: #FFF; padding: 5px; border: 1px solid #DDD;}
img.left {margin-right: 1em;}
img.right {margin-left: 1em;}
small,.small {font-size: 0.8em;}
/* inputs */
input.submit {background: #E9E8E8 url('https://img.webme.com/pic/g/guckanwebtasarimlari/input_submit.gif') repeat-x; border: 3px double #CCC; border-color: #CCC #999 #999 #CCC; color: #456; font: bold 0.8em Verdana,sans-serif; padding: 3px 0;}
input.submit:hover {background: #FCFDFC; cursor: pointer;}
input#s {background: #FCFCFC; font: normal 1.1em sans-serif; border: 1px solid #CCC; padding: 3px 5px; width: 150px;}
input#s:hover {background: #FFF;}
textarea {width: 320px;}
/* main layout */
#container {width: 760px; margin: 0 auto; padding-bottom: 0.5em;}
#main {margin: 15px 0 0 8px;}
#main_left {width: 63%;}
#main_right {width: 35%;}
/* top part */
#top {margin: 1em 0; padding-left: 1em;}
#site_title {font: bold 2em Georgia,sans-serif; color: #567;}
#site_description {font: normal 1em Verdana,sans-serif; color: #999;}
/* navigation */
.path {margin-bottom: 1em; background: #F6F8FA; border-top: 1px solid #E0E5F0; padding: 8px 10px; color: #678;}
#nav {font-size: 1.1em;}
#nav a {color: #364E6D; text-decoration: none;}
#nav a:hover {text-decoration: underline;}
#nav ul {display: inline; margin: 0;}
#nav ul li {display: inline; list-style: none; margin: 0 8px;}
/* sidebar */
#main_right .content {padding: 2px 8px 4px; background: #F8F8F3; border-top: 1px solid #EAEAE2; margin-bottom: 14px;}
#main_right div.content {padding: 5px 8px;}
#sidebar ul {margin: 0;}
#sidebar li {list-style: none; padding: 3px 0;}
/* footer */
#footer {font-size: 0.9em; border-top: 1px solid #E6E6E6; background: #F6F6F6; padding: 8px 12px; color: #888;}
#footer .right a {color: #888; text-decoration: none;}
#footer .right a:hover {color: #000;}
/* first post highlight */
#splash {margin-bottom: 1em;}
#splash .post {padding: 12px 18px 0; background: url('https://img.webme.com/pic/g/guckanwebtasarimlari/splash.jpg') repeat-x left bottom;}
#splash .metadata {color: #ACA; border-top: 1px solid #DEE9E0; background: none; padding: 8px 0; margin: 0;}
#splash .metadata a {color: #474; text-decoration: none;}
#splash .metadata a:hover {color: #232; text-decoration: underline;}
#splash .date {font-size: 0.9em;}
/* special links */
a.scrolldown,a.scrollup {width: 16px; height: 16px;}
a.scrolldown {background: url(' https://img.webme.com/pic/g/guckanwebtasarimlari/arrow_down.gif') no-repeat left top; }
a.scrollup {background: url('https://img.webme.com/pic/g/guckanwebtasarimlari/arrow_up.gif') no-repeat left top;}
a.feed {background: url('https://img.webme.com/pic/g/guckanwebtasarimlari/feed.jpg') no-repeat left top; width: 28px; height: 28px; margin-top: 20px;}
a.button {display: block;}
a.button:hover {background-position: left bottom;}
/* misc */
.bold {font-weight: bold;}
.bordered {border: 1px solid #DDD; background: #FFF; padding: 5px;}
.clearer {clear: both; font-size: 0;}
.left {float: left;}
.light,.light a {color: #777;}
.odd {background: #F6F6F6;}
.right {float: right;}
.tright {text-align: right;}
/* post */
.post {margin-bottom: 1em;}
.post .date {color: #468; font-size: 0.9em; margin: 4px 0 6px;}
.post .body {margin-bottom: 12px; line-height: 1.4em;}
.post .metadata {background: #F6F6F6; border-top: 1px solid #E6E6E6; font: normal 0.9em sans-serif; padding: 6px; clear: both;}
.post .metadata a {color: #333; text-decoration: none;}
/* icons */
span.comment {background: url('https://img.webme.com/pic/g/guckanwebtasarimlari/icon_comment.gif') no-repeat left center; padding-left: 18px;}
span.tag {background: url(' https://img.webme.com/pic/g/guckanwebtasarimlari/icon_tag.gif') no-repeat left center; padding-left: 18px;}
/* comments */
.commentlist {margin: 1em 0 0; font-size: 0.9em;}
.commentlist li {list-style: none; padding: 8px 10px 1px;}
.commentlist .post .date {margin-bottom: 3px;}
HTML KOD
<div id="container">
<div id="top">
<div class="left">
<h1 id="site_title">Winterplain</h1>
<div id="site_description">Free Website Template</div>
</div>
<div class="clearer"> </div>
</div>
<div class="path" id="nav">
<ul>
<li><a href="index.html">Posts page</a></li>
<li><a href="sample_test_page.html">Sample test page</a></li>
<li><a href="empty_page.html">Empty page</a></li>
</ul>
<div class="clearer"> </div>
</div>
<div id="main">
<div class="left" id="main_left">
<div id="splash">
<div class="container">
<div class="post">
<h2><a href="#">Fresh highlight!</a></h2>
<div class="date">June 17th, 2007 in <a href="#">Maecenas</a></div>
<div class="body">
<p>Winterplain is also available as a <a href="http://templates.arcsin.se/winterplain-wordpress-theme/">Wordpress theme</a>.</p>
<img class="left" height="130" alt="Buraya Resim Ekle" width="130" src="img/sample_image.png" />
<p>Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.</p>
<p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus.</p>
</div>
<div class="metadata">
<div class="left"><span class="comment"><a href="#">4 Comments</a></span></div>
<div class="right"><span class="tag"><a href="#">porttitor</a>, <a href="#">arcu</a>, <a href="#">eget</a>, <a href="#">pretium</a></span></div>
<div class="clearer"> </div>
</div>
</div>
</div>
</div>
<div class="post">
<h1><a href="#">Porttitor posuere</a></h1>
<div class="date">Jun 13, 2006 by Vulputate</div>
<div class="body">
<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>
<blockquote>
<p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p>
</blockquote>
<h2>Sollicitudin</h2>
<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>
<p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.</p>
</div>
<div class="metadata">
<div class="left"><span class="comment"><a href="#">6 Comments</a></span></div>
<div class="right"><span class="tag"><a href="#">arcu</a>, <a href="#">eget</a>, <a href="#">pretium</a>, <a href="#">porttitor</a></span></div>
<div class="clearer"> </div>
</div>
</div>
<div class="post">
<h1><a href="#">Adipiscing</a></h1>
<div class="date">Jun 11, 2006 by Laoreet</div>
<div class="body">
<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi.</p>
<ul>
<li>Tristique</li>
<li>Aenean</li>
<li>Pretium</li>
</ul>
<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>
</div>
<div class="metadata">
<div class="left"><span class="comment"><a href="#">13 Comments</a></span></div>
<div class="right"><span class="tag"><a href="#">eget</a>, <a href="#">pretium</a>, <a href="#">porttitor</a>, <a href="#">arcu</a></span></div>
<div class="clearer"> </div>
</div>
</div>
<div class="post">
<h1><a href="#">Interdum</a></h1>
<div class="date">May 24, 2006 by Lectus</div>
<div class="body">
<p>Praesent nisi sem, bibendum in, ultrices sit amet, euismod sit amet, dui. Donec varius tincidunt nisi. Ut ut sapien. Integer porta. Fusce nibh. Curabitur pellentesque, lectus at <a href="index.html">volutpat interdum</a></p>
<h3>Sem justo</h3>
<p>Placerat elit, eget feugiat est leo tempor quam. Ut quis neque convallis magna consequat molestie. Nullam semper massa eget ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque a nibh quis nunc volutpat aliquam</p>
<code>margin-bottom: 12px; font: normal 1.1em "Lucida Sans Unicode",serif; background: url(img/quote.gif) no-repeat; padding-left: 28px; color: #555;</code>
<p>Eget feugiat est leo tempor quam. Ut quis neque convallis magna consequat molestie.</p>
</div>
<div class="metadata">
<div class="left"><span class="comment"><a href="#">9 Comments</a></span></div>
<div class="right"><span class="tag"><a href="#">eget</a>, <a href="#">pretium</a>, <a href="#">porttitor</a>, <a href="#">arcu</a></span></div>
<div class="clearer"> </div>
</div>
</div>
</div>
<div class="right" id="main_right">
<div id="sidebar">
<h2>Search</h2>
<div class="content">
<form id="searchform" action="" method="get">
<div><input id="s" name="s" type="text" /> <input class="submit" id="searchsubmit" type="submit" value="Search" /></div>
</form>
</div>
<h2>Archives</h2>
<ul class="content">
<li><a href="#">June 2007</a> (1)</li>
<li><a href="#">May 2007</a> (1)</li>
<li><a href="#">March 2007</a> (1)</li>
<li><a href="#">February 2007</a> (2)</li>
<li><a href="#">January 2007</a> (2)</li>
<li><a href="#">December 2006</a> (2)</li>
<li><a href="#">November 2006</a> (3)</li>
<li><a href="#">October 2006</a> (1)</li>
<li><a href="#">September 2006</a> (3)</li>
<li><a href="#">August 2006</a> (4)</li>
</ul>
<h2>Categories</h2>
<ul class="content">
<li><a href="#">Single Column</a> (5)</li>
<li><a href="#">Three Columns</a> (2)</li>
<li><a href="#">Two Columns</a> (13)</li>
</ul>
<h2>Tags</h2>
<div class="content"><a style="font-size: 10pt" href="#">quis</a> <a style="font-size: 11pt" href="#">montesa</a> <a style="font-size: 9pt" href="#">nascetur</a> <a style="font-size: 9pt" href="#">ridiculus</a> <a style="font-size: 8pt" href="#">semper</a> <a style="font-size: 12pt" href="#">clean</a> <a style="font-size: 8pt" href="#">convallis</a> <a style="font-size: 14pt" href="#">tempor</a> <a style="font-size: 8pt" href="#">sociis</a> <a style="font-size: 9pt" href="#">feugiat</a> <a style="font-size: 8pt" href="#">quam</a> <a style="font-size: 10pt" href="#">euismod</a> <a style="font-size: 9pt" href="#">ligula</a> <a style="font-size: 10pt" href="#">penatibus</a> <a style="font-size: 8pt" href="#">aliquam</a> <a style="font-size: 8pt" href="#">sapien</a> <a style="font-size: 8pt" href="#">volutpat</a> <a style="font-size: 11pt" href="#">natoque</a> <a style="font-size: 8pt" href="#">tincidunt</a> <a style="font-size: 8pt" href="#">varius</a> <a style="font-size: 8pt" href="#">summer</a> <a style="font-size: 8pt" href="#">pellentesque</a> <a style="font-size: 9pt" href="#">curabitur</a> <a style="font-size: 8pt" href="#">porta</a></div>
<h2>Links</h2>
<ul class="content">
<li><a href="#">Blogger Templates</a></li>
<li><a href="#">Joomla Templates</a></li>
<li><a href="#">Professional Templates</a></li>
<li><a href="#">Website Templates</a></li>
<li><a href="#">Wordpress Themes</a></li>
</ul>
</div>
</div>
<div class="clearer"> </div>
</div>
<div id="footer">
<div class="left">© 2007 <a href="#">Website.com</a> | <a href="#top">Go to top</a></div>
<div class="right"><a href="http://templates.arcsin.se/">Website template</a> by <a href="http://arcsin.se/">Arcsin</a></div>
<div class="clearer"> </div>
</div>