Uzman CSS

Rock Castle

Resmi Büyültmek İçin Üstüne Tıklayın

Tasarımın Üstü:

<!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



Name       : Rock CastleDescription: A two-column, fixed-width design with dark color scheme.

Version    : 1.0

Released   : 20111127



-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<FCK:meta name="keywords" content=""  />
<FCK:meta name="description" content=""  />
<FCK:meta http-equiv="content-type" content="text/html; charset=utf-8"  />
<title>Rock Castleby Free CSS Templates</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="http://fonts.googleapis.com/css?family=Arvo" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header" class="container">
<div id="logo">
<h1><a href="#" _fcksavedurl="#">Rock Castle</a></h1>
</div>
<div id="menu">
<ul>
<li class="current_page_item"><a href="#" _fcksavedurl="#">Homepage</a></li>
<li><a href="#" _fcksavedurl="#">Blog</a></li>
<li><a href="#" _fcksavedurl="#">Photos</a></li>
<li><a href="#" _fcksavedurl="#">About</a></li>
<li><a href="#" _fcksavedurl="#">Contact</a></li>
</ul>
</div>
</div>
<div id="splash-wrapper">
<div id="splash">
<h2>Nullam pretium nibh ut turpis</h2>
<p>Lorem ipsum daolor sit amet, consectetur adipiscing elit. Nulla quis orci ut erat iaculis posuere in consequat nulla. Cras vel nisl ipsum, nec tincidunt nunc. Sed egestas lorem nisl, sed dignissim quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce tristique dui sit amet mauris.</p>
</div>
</div>
<!-- end #header -->
<div id="wrapper">
<div id="wrapper2">
<div id="wrapper-bgtop">
<div id="page">
<div id="content">
<div class="post">
<h2 class="title"><a href="#" _fcksavedurl="#">Welcome to Rock Castle</a></h2>
<p class="meta"><span class="date">December 12, 2011</span><span class="posted">Posted by <a href="#" _fcksavedurl="#">Someone</a></span></p>
<div style="clear: both;"> </div>
<div class="entry">
<p>This is <strong>Rock Castle</strong>, a free, fully standards-compliant CSS template designed by FreeCssTemplates<a href="http://www.nodethirtythree.com/" _fcksavedurl="http://www.nodethirtythree.com/"></a> for <a href="http://www.freecsstemplates.org/" _fcksavedurl="http://www.freecsstemplates.org/">Free CSS Templates</a>.  This free template is released under a <a href="http://creativecommons.org/licenses/by/3.0/" _fcksavedurl="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a> license, so you’re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it <img src="//theme.webme.com/smiles/smiley.gif" border="0" width="15" height="15" alt="" /></p>
<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut . In id eros. Suspendisse  turpis, cursus egestas at sem.</p>
<p class="links"><a href="#" _fcksavedurl="#" class="more">Read More</a><a href="#" _fcksavedurl="#" title="b0x" class="comments">Comments</a></p>
</div>
</div>
<div class="post">
<h2 class="title"><a href="#" _fcksavedurl="#">Lorem ipsum sed aliquam</a></h2>
<p class="meta"><span class="date">December 11, 2011</span><span class="posted">Posted by <a href="#" _fcksavedurl="#">Someone</a></span></p>
<div style="clear: both;"> </div>
<div class="entry">
<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#" _fcksavedurl="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.  Mauris quam enim, molestie in, rhoncus. Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. </p>
<p class="links"><a href="#" _fcksavedurl="#" class="more">Read More</a><a href="#" _fcksavedurl="#" title="b0x" class="comments">Comments</a></p>
</div>
</div>
<div class="post">
<h2 class="title"><a href="#" _fcksavedurl="#">Consecteteur hendrerit </a></h2>
<p class="meta"><span class="date">December 10, 2011</span><span class="posted">Posted by <a href="#" _fcksavedurl="#">Someone</a></span></p>
<div style="clear: both;"> </div>
<div class="entry">
<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#" _fcksavedurl="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.  Mauris quam enim, molestie in, rhoncus. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.  Mauris quam enim, molestie in, rhoncus. Mauris vitae nisl nec metus placerat consectetuer.</p>
<p class="links"><a href="#" _fcksavedurl="#" class="more">Read More</a><a href="#" _fcksavedurl="#" title="b0x" class="comments">Comments</a></p>
</div>
</div>
<div style="clear: both;"> </div>

Tasarımın Altı:

</div>
<!-- end #content -->
<div id="sidebar">
<div id="sidebar-bgtop">
<div id="sidebar-bgbtm">
<ul>
<li>
<div id="search" >
<form method="get" action="#">
<div>
<input type="text" name="s" id="search-text" value="" />
<input type="submit" id="search-submit" value="GO" />
</div>
</form>
</div>
<div style="clear: both;"> </div>
</li>
<li>
<h2>Aliquam tempus</h2>
<p>Mauris vitae nisl nec metus placerat perdiet est. Phasellus dapibus semper consectetuer hendrerit.</p>
</li>
<li>
<h2>Categories</h2>
<ul>
<li><a href="#" _fcksavedurl="#">Aliquam libero</a></li>
<li><a href="#" _fcksavedurl="#">Consectetuer adipiscing elit</a></li>
<li><a href="#" _fcksavedurl="#">Metus aliquam pellentesque</a></li>
<li><a href="#" _fcksavedurl="#">Suspendisse iaculis mauris</a></li>
<li><a href="#" _fcksavedurl="#">Urnanet non molestie semper</a></li>
<li><a href="#" _fcksavedurl="#">Proin gravida orci porttitor</a></li>
</ul>
</li>
<li>
<h2>Blogroll</h2>
<ul>
<li><a href="#" _fcksavedurl="#">Aliquam libero</a></li>
<li><a href="#" _fcksavedurl="#">Consectetuer adipiscing elit</a></li>
<li><a href="#" _fcksavedurl="#">Metus aliquam pellentesque</a></li>
<li><a href="#" _fcksavedurl="#">Suspendisse iaculis mauris</a></li>
<li><a href="#" _fcksavedurl="#">Urnanet non molestie semper</a></li>
<li><a href="#" _fcksavedurl="#">Proin gravida orci porttitor</a></li>
</ul>
</li>
<li>
<h2>Archives</h2>
<ul>
<li><a href="#" _fcksavedurl="#">Aliquam libero</a></li>
<li><a href="#" _fcksavedurl="#">Consectetuer adipiscing elit</a></li>
<li><a href="#" _fcksavedurl="#">Metus aliquam pellentesque</a></li>
<li><a href="#" _fcksavedurl="#">Suspendisse iaculis mauris</a></li>
<li><a href="#" _fcksavedurl="#">Urnanet non molestie semper</a></li>
<li><a href="#" _fcksavedurl="#">Proin gravida orci porttitor</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- end #sidebar -->
<div style="clear: both;"> </div>
</div>
<!-- end #page -->
</div>
</div>
</div>
<div id="footer">
<div class="content">
<p>Copyright (c) 2011 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/" _fcksavedurl="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</div>
<!-- end #footer -->
</body>
</html>

Css Kodu:

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
margin: 0;
padding: 0;
background: #E5E5E5 url(http://www.freecsstemplates.org/previews/rockcastle/images/img01.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #6E6E6E;
}
h1, h2, h3 {
margin: 0;
padding: 0;
font-family: 'Arvo', serif;
font-weight: normal;
color: #611F0D;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 2.8em;
}
h3 {
font-size: 1.6em;
}
p, ul, ol {
margin-top: 0;
line-height: 240%;
}
ul, ol {
}
a {
text-decoration: none;
color: #611F0D;
}
a:hover {
}
#wrapper {
background: #FEFEFE url(http://www.freecsstemplates.org/previews/rockcastle/images/img06.jpg) repeat-x left top;
}
#wrapper2 {
background: url(http://www.freecsstemplates.org/previews/rockcastle/images/img04.jpg) repeat-y center top;
}
#wrapper-bgtop {
background: url(http://www.freecsstemplates.org/previews/rockcastle/images/img03.jpg) no-repeat center top;
}
.container {
width: 1000px;
margin: 0px auto;
}
/* Header */
#header {
width: 940px;
height: 70px;
margin: 0 auto;
}
/* Logo */
#logo {
float: left;
width: 340px;
margin: 0;
padding: 0;
color: #FFFFFF;
}
#logo h1, #logo p {
}
#logo h1 {
padding: 0px 0px 0px 0px;
letter-spacing: -3px;
text-transform: lowercase;
font-size: 48px;
}
#logo h1 a {
color: #CE9B87;
}
/* Splash */
#splash-wrapper {
height: 289px;
background: url(http://www.freecsstemplates.org/previews/rockcastle/images/img02.jpg) no-repeat center top;
}
#splash {
width: 530px;
margin: 0px auto;
padding: 80px 380px 30px 50px;
}
#splash h2 {
margin: 0px;
padding: 0px 0px 20px 0px;
font-family: 'Cookie', cursive;
font-size: 44px;
color: #BC907A;
}
#splash p {
line-height: 180%;
color: #C9B0A6;
}
/* Search */
#search {
width: 280px;
height: 40px;
padding: 20px 0px 0px 0px;
}
#search form {
height: 41px;
margin: 0;
padding: 10px 0 0 20px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search-text {
width: 170px;
padding: 7px 5px 5px 5px;
border: 1px solid #DDDDDD;
background: #FFFFFF;
text-transform: lowercase;
font: normal 11px Arial, Helvetica, sans-serif;
color: #5D781D;
}
#search-submit {
width: 50px;
height: 25px;
border: none;
background: #B9B9B9;
color: #000000;
}
/* Menu */
#menu {
float: right;
width: 600px;
height: 70px;
margin: 0 auto;
padding: 0;
}
#menu ul {
float: right;
margin: 0px;
padding: 28px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
padding: 0px 0px 0px 40px;
}
#menu a {
display: block;
height: 20px;
letter-spacing: 1px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Arvo', serif;
font-size: 14px;
font-weight: normal;
color: #927160;
}
#menu a:hover, #menu .current_page_item a {
text-decoration: none;
color: #FFFFFF;
}
#menu .current_page_item a {
}
/* Page */
#page {
width: 940px;
margin: 0 auto;
}
/* Content */
#content {
float: left;
width: 620px;
padding: 70px 10px 0px 10px;
}
.post {
overflow: hidden;
margin-top: 20px;
padding: 30px 30px 0px 30px;
background: url(http://www.freecsstemplates.org/previews/rockcastle/images/img11.jpg) repeat-x left top;
border: 1px solid #E2E2E2;
}
.post .title {
margin: 0px;
padding: 7px 0px 0px 0px;
}
.post .title a {
border: none;
letter-spacing: -3px;
text-align: left;
text-shadow: 1px 1px 1px #B5B5B5;
font-size: 36px;
font-weight: normal;
color: #611F0D;
}
.post .meta {
margin-bottom: 30px;
padding: 0px;
letter-spacing: 1px;
text-align: left;
text-transform: uppercase;
font-size: 11px;
font-weight: normal;
}
.post .meta .date {
float: left;
}
.post .meta .posted {
float: right;
}
.post .meta a {
}
.post .entry {
padding: 0px 0px 30px 0px;
padding-bottom: 20px;
text-align: justify;
}
.links {
float: right;
margin: 20px 0px 30px 0px;
text-align: right;
text-transform: uppercase;
font-size: 12px;
font-weight: normal;
}
.more {
display: block;
float: left;
padding: 0px 0px 0px 0px;
margin-right: 30px;
}
.comments {
display: block;
float: left;
padding: 0px 0px 0px 0px;
}
/* Sidebar */
#sidebar {
float: right;
width: 280px;
background: url(http://www.freecsstemplates.org/previews/rockcastle/images/img08.jpg) repeat-y left top;
}
#sidebar-bgtop {
background: url(http://www.freecsstemplates.org/previews/rockcastle/images/img07.jpg) no-repeat left top;
}
#sidebar-bgbtm {
overflow: hidden;
padding: 80px 0px 0px 0px;
background: url(http://www.freecsstemplates.org/previews/rockcastle/images/img09.jpg) no-repeat left bottom;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 0;
}
#sidebar li ul {
margin: 0px 0px;
padding-bottom: 50px;
}
#sidebar li li {
line-height: 35px;
border-bottom: 1px dashed #927160;
margin: 0px 30px;
font-weight: normal;
}
#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-style: italic;
}
#sidebar li li a {
padding: 0px 0px 0px 0px;
color: #927160;
}
#sidebar h2 {
height: 40px;
margin: 0px 10px 20px 10px;
padding: 7px 0px 0px 20px;
background: url(http://www.freecsstemplates.org/previews/rockcastle/images/img10.jpg) no-repeat left top;
text-align: left;
text-transform: uppercase;
text-shadow: 1px 2px 2px #000000;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
}
#sidebar p {
margin: 0 0px;
padding: 0px 30px 20px 30px;
text-align: justify;
}
#sidebar a {
border: none;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Calendar */
#calendar {
}
#calendar_wrap {
padding: 20px;
}
#calendar table {
width: 100%;
}
#calendar tbody td {
text-align: center;
}
#calendar #next {
text-align: right;
}
/* Footer */
#footer {
height: 150px;
background: url(http://www.freecsstemplates.org/previews/rockcastle/images/img05.jpg) no-repeat center top;
padding: 0px 0 15px 0;
font-family: Arial, Helvetica, sans-serif;
}
#footer .content {
width: 880px;
margin: 0px auto;
padding: 60px 40px 0px 40px;
}
#footer p {
margin: 0;
padding-top: 30px;
line-height: normal;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
font-weight: normal;
}
#footer a {
}

Top 5 Css Tema;

Top 5 Video;

Rock Castle