eastern-tales
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Eastern Tales</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<style type='text/css'>
/********
Theme Name: Eastern Tale
Theme URI: http://Chilligavva.com
Details: This is a type based theme designed for Smashingmagazine.com contest
Version: 1.0
Author: Lakshmi Mareddy
Author URI: http://Chilligavva.com
Author e-mail: lak@mareddy.com
*******/
/* Body, block elements*/
body {
background: #444 url(eastern-tales-images/paper.jpg);
font: 100 12pt/18pt Helvetica, Arial,Verdana,Sans-Serif;
margin: 0;
padding: 0;
text-align: center;
}
h1, h2, h3, h4, h5 {
display: block;
font-family: Georgia,Times,Serif;
font-weight: 100;
line-height: 1em;
margin: 0 0 10px 0;
padding: 0;
}
h1 {
font-size: 80pt;
font-weight: 900;
margin: 0 0 100px 0;
}
h2 {font-size: 40pt;}
h3 {font-size: 32pt;}
h4 {font-size: 28pt;}
h5 {font-size: 18pt; font-weight: 900;}
a {color: #d06; text-decoration: none; }
a:hover{color: #f06; text-decoration: none; }
.clearpara {
clear: both;
height: 0;
margin:0;
padding:0;
}
.lhs { float: left; }
.rhs {float: right; }
blockquote {
margin:20px 0;
padding:10px 0;
font:100 italic 10pt/1.5em Georgia,Times,Serif;
border-top:2px dotted #000;
border-bottom:1px dotted #000;
}
p {margin:0 0 10px 0;padding:0;}
ul, ol {
margin:0 0 0 10px ;
padding:0 0 0 10px;
}
/* structure elements that contain content*/
.pagewrap {
margin: 0;
padding: 0;
}
.wrap, .ctr {
margin: 0 auto;
padding: 0;
width: 960px;
}
.content {
margin: 0;
padding: 0 0 0 50px;
text-align: left;
}
/* this defines the vertical column in the recent articles section */
.col {
float: left;
margin: 0 20px 20px 0;
padding: 0;
width: 190px;
}
.maincontent {
background: #fff;
margin: 0 0 10px 0;
padding: 20px;
}
/* topwrap on the top containing menu+search*/
.topwrap {
margin:0 0 10px 0;
padding:10px;
background: #494949;
}
/*menu syling*/
#menu {
float: left;
margin: 0;
padding: 0;
display:block;
}
#menu ul {
clear: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#menu li {
display: block;
float: left;
list-style: none;
margin: 0 10px 0 0;
padding: 0;
}
#menu li a {
color: #fff;
display: block;
font-size: 12pt;
letter-spacing: 0;
margin: 0;
padding: 5px 10px;
text-decoration: none;
text-transform: uppercase;
}
#menu li.on a,
#menu li.on a:hover ,
#menu li a:hover {
background: #d06;
color: #fff;
text-decoration: none;
}
#menu li a em {
font-style: normal;
text-decoration: underline;
}
a.rssicon, a.rssicon:hover {
background:url(eastern-tales-images/pinkrss.png) no-repeat center;
height:50px;width:50px;
display:block;text-indent:-99999px;
margin:0;
padding:0;
float:right;
}
/*the search box styling */
#search {
float: right;
margin: 5px 0 5px 0;
padding: 0;
}
#search form {
margin: 0;
padding: 0;
}
#search input {
display: block;
float: left;
font: 100 10pt/1em Helvetica,Arial,Sans-Serif;
margin: 0 5px 0 0;
padding: 5px;
}
#search input.ip {
background: #fff;
border: 1px solid #ccc;
color: #666;
}
#search button {
background: #222;
border: 0;
color: #fff;
cursor: pointer;
display: block;
float: left;
font: 100 10pt/1em Helvetica,Arial,Sans-Serif;
margin: 0 5px 0 0;
padding: 5px;
text-transform: uppercase;
}
/*== section heading such as latest project, recent articles etc.=*/
.section_header {
margin: 10px 0 10px -40px;
padding: 0;
}
.section_header h2 {
background: #d06;
color: white;
float: left;
font-size: 32pt;
letter-spacing: 3px;
margin: 0 0 0 0;
padding: 20px;
text-transform: uppercase;
}
/*== logo=*/
.logo {
margin: 0 0 10px 0;
padding: 40px 20px;
}
.logo h1 {
background: url(eastern-tales-images/ganesha.png) no-repeat left;
float: left;
font-size: 70pt;
font-style: normal;
font-weight: 900;
letter-spacing: -3px;
line-height: .8em;
line-height: 1em;
margin: 0;
min-height: 200px;
padding: 10px 0 0 180px;
text-align: left;
text-transform: uppercase;
}
.logo h1 em {
display: block;
font-family: Helvetica,Arial,Sans-Serif;
font-size: 18pt;
font-style: normal;
font-weight: 100;
letter-spacing:2px;
line-height: 1.5em;
margin: 0;
padding: 0;
text-align: left;
}
.logo h1 a {color:#444;}
.logo h1 a:hover {color:#f06;}
/*== post contains post title, date, postmeta and post entry styling=*/
.post {margin:10px 0;padding:0;}
.post-title {margin:0;padding:0;}
.post-title h2{
font-size: 28pt;
font-weight: 100;
letter-spacing: 2px;
line-height: 100%;
margin: 0 0 10px 0;
padding: 0;
text-transform: uppercase;
word-spacing: .1em;
}
.post-title h2 a { color: #444; }
.post-title h2 a:hover {color:#000;}
.date {
color: #444;
display: block;
font-family: Helvetica,Arial, Sans-Serif;
font-weight: 100;
margin: 20px 0 10px 0;
padding: 0;
}
.postentry, .postentry p { margin:0 0 10px 0; padding:0;}
.postmeta {
font-family:verdana,Arial,Sans-Serif;
margin:5px 0;
padding:0;
font-size:12pt;
}
.postmeta em {font-style:normal;}
/* the styles of images used in the template*/
img {
border: 0;
display: block;
height: auto;
margin: 20px 0;
max-width: 400px;
padding: 0;
}
img.alignleft {
float: left;
margin: 0 20px 5px 0;
padding: 0;
}
img.alignright {
float: right;
margin: 0 0 5px 20px;
padding: 0;
}
img.portfolio {
border: 0;
display: block;
height: auto;
margin: 20px 0;
max-width: 440px;
padding: 0;
}
/*=The styling for latest project ==*/
.latest-project {
background: #fff;
color: #666;
margin: 10px 0 20px 0;
padding: 20px 40px;
}
.latest-project .section_header {
margin: 10px 0 0 -60px;
}
.latest-project img {
border: 2px solid #fff;
height: auto;
max-width: 450px;
}
.latest-project .date {
color: #222;
font-size: 18pt;
}
.latest-project a.otherentries {
border-color: #222;
color: #222;
}
/*=The styling for vertical columns ==*/
.col {
font-size: 11pt;
line-height: 1.5em;
}
.col p {
margin: 0 0 10px 0;
padding: 0;
}
.col img.alignleft {
height: auto;
max-width: 180px;
}
.col .post-title h2 {
color: #000;
font-size: 12pt;
font-weight: 900;
letter-spacing: 0;
line-height: 130%;
margin:0 0 5px 0;
padding: 2px 0;
text-transform: uppercase;
word-spacing: .2em;
}
.col post-title h2 a {
color: #000;
}
.col .post-title h2 a:hover {
background: #ffffcc;
color: #000;
}
.col .date {
margin:10px 0 0 0;
font-size:11pt;
font-weight:900;
}
.col .postmeta {font-size:8pt;line-height:120%;margin:5px 0 0 0;padding:0;}
/* various link styling*/
a.readmore {
border-bottom: 1px dotted #000;
border-top: 1px dotted #000;
float: left;
font-size: 12pt;
font-weight: 900;
margin: 0;
padding: 1px 5px;
text-transform: uppercase;
}
a.readmore:hover { border-color: #f06; }
a.otherentries, a.continue {
border-bottom: 1px dotted #000;
border-top: 1px dotted #000;
color: #000;
float: left;
font-size: 8pt;
font-weight: 900;
letter-spacing: .3em;
line-height: 1em;
margin: 10px 0;
padding: 5px;
text-transform: uppercase;
}
a.continue { border-top: 0;}
a.otherentries:hover, a.continue:hover {color: #f06; }
/*== footer=*/
.footer {
font-size: 10pt;
margin: 0 0 0 0;
padding: 0;
}
/* styling for site designer link*/
.sitecredits {color:#a9a9a9;}
.sitecredits a {color:#a9a9a9;border-bottom:1px dotted #a9a9a9;}
.sitecredits a:hover {color:#595959;}
/*== categories styling at page bottom=*/
.categories {
background: #494949;
display: block;
margin: 10px 0;
padding: 10px 20px;
text-align: left;
}
.categories ul {
margin: 0;
padding: 0;
}
.categories li {
color: #fff;
display: inline;
font-size: 10pt;
list-style-type: none;
margin: 0 20px 0 0;
padding: 0;
}
.categories li a {
color: #fff;
font: 100 italic 11pt/1em Georgia,Serif;
}
.categories li a:hover {
color: #fcc;
}
/*== aboutsite styling at page bottom=*/
.aboutsite {
clear: both;
color: #ccc;
background:#222;
font: 100 normal 22pt/1.5em Georgia,Times,Serif;
margin:10px 0 0 0;
padding:20px ;
}
.aboutsite p {
margin: 0;
padding: 0;
}
.aboutsite em {
border-bottom: 1px dotted #eee;
color:#eee;
font-style: normal;
}
/*== block element that creates space in a page=*/
.spacer {
clear: both;
display: block;
height: 30px;
margin: 0;
padding: 0;
}
/*== styling for valid html, valid css buttons =*/
.validbuttons {
margin:0;
padding:0;
width:200px;
float:right;
}
.validbuttons a {float:right;margin:0 0 0 10px;padding:0;width:88px;}
/*== styling for twitter section =*/
.twitter_wrap {
margin:10px 25%;
padding:0;
}
ul#twitter_update_list {
font-size:8pt;
font-weight:100;
display:block;
margin:0 120px 0 0;
padding:0;
line-height:150%;
text-decoration:none;
color:#666;
border-top:1px dotted #000;
}
ul#twitter_update_list li {
margin:0 0 2px 0;
padding:5px 0;
list-style-type:none;
border-bottom:1px dotted #000;
font-family:verdana,Arial,Sans-Serif;
}
a.twittericon {
margin:0 10px 0 0;
float:right;
padding:0;
width:100px;
height:100px;
text-indent:-99999px;
display:block;
background:url(eastern-tales-images/twitter100.png) no-repeat;
}
/*== styling for rss feeds at page bottom =*/
.rssfeeds {
margin:0 0 5px 0;
padding:0;
}
.rssfeeds ul {margin:0;padding:0;}
.rssfeeds li {list-style-type:none;display:inline;margin:0 10px 0 0;padding:0;}
.rssfeeds li a {
color:#666;
padding-left:20px;
background:url(eastern-tales-images/smallrss.png) no-repeat top left;
}
.rssfeeds li a:hover {color:#000;}
</style>
</head>
<body id="pagetop" >
<div class="pagewrap">
<div class="wrap">
<div class="content">
<div class="topwrap">
<div id="search">
<form name="gs" method="get" action="#">
<input type="text" name="q" size="30" maxlength="2048" class="ip" value="Search Eastern Tales" >
<button>Search</button>
</form>
<div class="clearpara"></div>
</div>
<div id="menu">
<ul>
<li class="on" ><a href="#" accesskey="h" id="home"> <em>H</em>ome </a> </li>
<li class="off" ><a href="#" accesskey="r" id="archives"> A<em>r</em>chives</a> </li>
<li class="off" > <a href="#" accesskey="a" id="about"> <em>A</em>bout</a> </li>
<li class="off"><a href="#" accesskey="c" id="contact"> <em>C</em>ontact </a> </li>
</ul>
<p class="clearpara"></p>
<!--/menu-->
</div>
<p class="clearpara"></p>
<!--/topwrap-->
</div>
<a href="#" class="rssicon"> RSS</a>
<div class="logo">
<h1 class="title"><a href="#">Eastern Tales <em> an oriental approach to design</em></a></h1>
<p class="clearpara"></p>
<!--/logo-->
</div>
<div class="latest-project">
<div class="section_header">
<h2> Latest Project </h2>
<p class="clearpara"></p>
</div>
<div class="post"> <span class="date">20.JUN.2009</span>
<div class="post-title">
<h2><a href="#"> In hac habitasse platea dictumst. Phasellus ac urna nec felis placerat cursus a et leo. </a> </h2>
<!--/posttitle-->
</div>
<div class="postmeta">
<p>written by <a href="#">Kevin</a> and has <a href="#"><em>0</em></a> comments.</p>
<!--/postmeta-->
</div>
<p> <a href="#" > <img src="eastern-tales-images/latest-project.jpg" alt="" class="alignleft" > </a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id sagittis orci. Cras id purus vitae nulla rutrum cursus. In hac habitasse platea dictumst. Phasellus ac urna nec felis placerat cursus a et leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer quis dui sit amet nibh vehicula fringilla eu nec augue. <a href="#">Cras rhoncus arcu quis leo auctor vel pretium nunc vestibulum.</a>
<blockquote> Nullam ut quam orci. Nullam scelerisque, purus in malesuada aliquet, nulla ipsum consequat elit, non blandit dolor mauris sed lorem. </blockquote>
Duis ac nisi quis lorem placerat consequat vehicula a neque. Pellentesque mattis semper imperdiet. Vivamus id arcu sem, nec aliquet est.
</p>
<a href="#" class="readmore">continue...</a>
<p class="clearpara"></p>
<a href="#" class="otherentries">View other projects ...</a>
<p class="clearpara"></p>
<!--/post-->
</div>
<!--/latest-project-->
</div>
<div class="maincontent">
<div class="section_header">
<h2> Recent Articles </h2>
<p class="clearpara"></p>
</div>
<div class="col">
<div class="post"> <span class="date">20.JUN.2009</span>
<div class="post-title">
<h2><a href="#"> Proin id sagittis orci. Cras id purus vitae nulla rutrum cursus. </a> </h2>
<!--/post-title-->
</div>
<div class="postmeta">
<p>written by <a href="#">Kevin</a> and has <a href="#"><em>0</em></a> comments.</p>
<!--/postmeta-->
</div>
<div class="postentry">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id sagittis orci. Cras id purus vitae nulla rutrum cursus. In hac habitasse platea dictumst. Phasellus ac urna nec felis placerat cursus a et leo. Integer quis dui sit amet nibh vehicula fringilla eu nec augue. <a href="#">Cras rhoncus arcu quis leo auctor vel pretium nunc vestibulum.</a> </p>
<a href="#" class="continue">continue...</a>
<p class="clearpara"></p>
<!--/postentry-->
</div>
<!--/post-->
</div>
<!--/col-->
</div>
<div class="col">
<div class="post"> <span class="date">05.JUN.2009</span>
<div class="post-title">
<h2><a href="#"> Proin id sagittis orci. Cras id purus vitae nulla rutrum cursus. </a> </h2>
<!--/post-title-->
</div>
<div class="postmeta">
<p>written by <a href="#">Kevin</a> and has <a href="#"><em>0</em></a> comments.</p>
<!--/postmeta-->
</div>
<div class="postentry">
<p> <a href="#" > <img src="eastern-tales-images/cowthumbnail.gif" alt="" class="alignleft" > </a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id sagittis orci. Cras id purus vitae nulla rutrum cursus. In hac habitasse platea dictumst. Phasellus ac urna nec felis placerat cursus a et leo. Integer quis dui sit amet nibh vehicula fringilla eu nec augue. <a href="#">Cras rhoncus arcu quis leo auctor vel pretium nunc vestibulum.</a> </p>
<a href="#" class="continue">continue...</a>
<p class="clearpara"></p>
<!--/postentry-->
</div>
<!--/post-->
</div>
<!--/col-->
</div>
<div class="col">
<div class="post"> <span class="date">20.MAY.2009</span>
<div class="post-title">
<h2><a href="#"> Proin id sagittis orci. Cras id purus vitae nulla rutrum cursus. </a> </h2>
<!--/post-title-->
</div>
<div class="postmeta">
<p>written by <a href="#">Kevin</a> and has <a href="#"><em>0</em></a> comments.</p>
<!--/postmeta-->
</div>
<div class="postentry">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id sagittis orci. Cras id purus vitae nulla rutrum cursus. In hac habitasse platea dictumst. Phasellus ac urna nec felis placerat cursus a et leo. Integer quis dui sit amet nibh vehicula fringilla eu nec augue. <a href="#">Cras rhoncus arcu quis leo auctor vel pretium nunc vestibulum.</a> </p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id sagittis orci. Cras id </li>
<li>purus vitae nulla rutrum cursus. In hac habitasse platea dictumst. Phasellus ac urna</li>
<li>nec felis placerat cursus a et leo. Integer quis dui sit amet nibh vehicula fringilla eu nec augue.</li>
</ul>
<a href="#" class="continue">continue...</a>
<p class="clearpara"></p>
<!--/postentry-->
</div>
<!--/post-->
</div>
<!--/col-->
</div>
<div class="col">
<div class="post"> <span class="date">05.MAY.2009</span>
<div class="post-title">
<h2><a href="#"> Proin id sagittis orci. Cras id purus vitae nulla rutrum cursus. </a> </h2>
<!--/post-title-->
</div>
<div class="postmeta">
<p>written by <a href="#">Kevin</a> and has <a href="#"><em>0</em></a> comments.</p>
<!--/postmeta-->
</div>
<div class="postentry">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id sagittis orci. Cras id purus vitae nulla rutrum cursus. In hac habitasse platea dictumst. Phasellus ac urna nec felis placerat cursus a et leo. Integer quis dui sit amet nibh vehicula fringilla eu nec augue. <a href="#">Cras rhoncus arcu quis leo auctor vel pretium nunc vestibulum.</a> </p>
<a href="#" class="continue">continue...</a>
<p class="clearpara"></p>
<!--/postentry-->
</div>
<!--/post-->
</div>
<!--/col-->
</div>
<p class="clearpara"></p>
<a href="#" class="readmore">Read more articles in the archives ...</a>
<p class="spacer"></p>
<div class="twitter_wrap"> <a href="#" class="twittericon">follow me</a>
<ul id="twitter_update_list">
<li> <a href="#"> @Farrhad</a> Congrats Farrhad.. <a href="#">2 days ago</a></li>
<li> Netflix movie reccommendations are pretty good for me. But an even better algo.. WOW!! a cool $1Million to collect.. <a href="#">http://bit.ly/2kbQll 2 days ago</a></li>
<li>Very sad and still not sinking in about MJ... The sheer talent taht he had,.. He is the KING of POP!! <a href="#">4 days ago</a></li>
</ul>
<p class="clearpara"></p>
</div>
<!--/maincontent-->
</div>
<div class="aboutsite">
<p> Eastern Tales is an experiment in type based blog design, with a very minimal use of graphics. It heavily relies on type sizes, color and the ubiqutously available <em>Arial, Helvetica, Sans-Serif</em> and <em>Georgia, Times, Serif</em> font groups with an occassional interspersion of Verdana! To make the design usable by a vast group of users, there is no Javascript or fancy apps. :) </p>
<!--/aboutsite-->
</div>
<p class="clearpara"></p>
<div class="categories">
<ul>
<li><a href="#">Articles </a></li>
<li><a href="#">Asides</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Trends</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
<!--/categories-->
</div>
<div class="footer lhs"> © copyright 2009 <a href="#">Name Here</a>. All Rights Reserved | <span class="sitecredits">Site designed by <a href="http://chilligavva.com/">Lakshmi Mareddy.</a></span>
<p class="clearpara"></p>
<div class="rssfeeds">
<ul>
<li><a href="#">Article Feed</a></li>
<li><a href="#" >Comments Feed</a></li>
</ul>
</div>
<!-- /footer -->
</div>
<p class="clearpara"></p>
<p class="clearpara"></p>
<!--/content-->
</div>
<p class="clearpara"></p>
<!--/wrap-->
</div>
<p class="clearpara"></p>
<!--/pagewrap-->
</div>
</body>
</html>
Related examples in the same category