ifeellucky
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>i Feel Lucky | Free CSS Template by Rambling Soul</title>
<style type='text/css'>
@charset "utf-8";
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #FFFFFF;
background-image: url(ifeellucky-images/bg.png);
background-repeat: repeat-x;
color: #666666;
}
#wrap #contents #sidebar img {
padding: 5px;
border: 1px solid #f2f2f2;
background-color: #FFFFFF;
}
#wrap {
width: 950px;
margin: auto;
}
#wrap #header #logo {
display: block;
float: left;
margin-top: 30px;
}
#wrap #header {
height: 150px;
}
.clear {
clear: both;
}
#wrap #header #navigation {
background-image: url(ifeellucky-images/menubg.png);
background-repeat: no-repeat;
float: right;
width: 771px;
margin-top: 49px;
height: 100px;
background-position: bottom;
}
#wrap #header #navigation ul {
list-style-type: none;
text-align: center;
margin: 0px;
padding-top: 44px;
font-size: 11px;
padding-left: 75px;
}
#wrap #header #navigation li {
display: inline;
text-transform: uppercase;
}
#wrap #header #navigation a {
display: block;
background-image: url(ifeellucky-images/menu1.png);
background-repeat: no-repeat;
height: 22px;
width: 120px;
padding-top: 5px;
text-align: center;
float: left;
margin-right: 2px;
margin-left: 1px;
color: #666666;
text-decoration: none;
}
#wrap #header #navigation a:visited, active {
display: block;
background-image: url(ifeellucky-images/menu1.png);
background-repeat: no-repeat;
height: 22px;
width: 120px;
padding-top: 5px;
text-align: center;
float: left;
margin-right: 2px;
margin-left: 1px;
color: #666666;
text-decoration: none;
}
#wrap #header #navigation a:hover {
display: block;
background-image: url(ifeellucky-images/menu2.png);
background-repeat: no-repeat;
height: 22px;
width: 120px;
padding-top: 5px;
text-align: center;
float: left;
margin-right: 2px;
margin-left: 1px;
color: #FFFFFF;
text-decoration: none;
}
#footer #templateinfo {
margin-top: 10px;
margin-bottom: 10px;
font-size: 10px;
}
#footer a {
color: #CCCCCC;
}
#wrap #header #navigation .active a {
display: block;
background-image: url(ifeellucky-images/menu2.png);
background-repeat: no-repeat;
height: 22px;
width: 120px;
padding-top: 5px;
text-align: center;
float: left;
margin-right: 2px;
margin-left: 1px;
color: #FFFFFF;
text-decoration: none;
}
#wrap #header #navigation .active a:visited, active {
display: block;
background-image: url(ifeellucky-images/menu2.png);
background-repeat: no-repeat;
height: 22px;
width: 120px;
padding-top: 5px;
text-align: center;
float: left;
margin-right: 2px;
margin-left: 1px;
color: #FFFFFF;
text-decoration: none;
}
h2 {
font-family: "normal georgia", serif;
font-size: 18px;
font-variant: small-caps;
color: #6E9DCD;
}
h1 {
font-family: "normal georgia", serif;
font-size: 24px;
font-weight:normal;
color: #000000;
}
#wrap #contents {
float: left;
width: 550px;
padding-top: 25px;
}
#wrap #sidebar .sidebarcontent #previews a {
text-decoration: none;
}
#wrap #sidebar {
margin-top: 25px;
background-color: #000000;
width: 390px;
float: right;
color: #CCCCCC;
margin-bottom: 15px;
}
#wrap #sidebar .sidebarcontent {
padding: 10px;
}
#wrap #sidebar .sidebartop {
background-image: url(ifeellucky-images/sidebartop.png);
background-repeat: no-repeat;
display: block;
height: 11px;
}
#wrap #sidebar .sidebarbtm {
background-image: url(ifeellucky-images/sidebarbottom.png);
display: block;
height: 13px;
background-repeat: no-repeat;
}
#wrap #contents p {
line-height: 22px;
margin-top: 10px;
margin-bottom: 15px;
}
#wrap #header #sitename {
display: block;
float: left;
font-size: 25px;
padding-top: 50px;
text-transform: uppercase;
}
#wrap #sidebar .sidebarcontent h2 {
display: block;
margin-bottom: 10px;
}
#wrap #sidebar .sidebarcontent #latestposts {
padding: 5px;
list-style-type: none;
margin-bottom: 15px;
}
#wrap #sidebar .sidebarcontent #latestposts a {
color: #999999;
text-decoration: none;
display: block;
height: 20px;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #232323;
}
#wrap #sidebar .sidebarcontent #latestposts li {
display: block;
height: 25px;
}
#wrap #header #sitename .logosmall {
font-size: 12px;
text-align: center;
padding: 3px;
display: block;
}
#wrap #header #sitename .big {
display: block;
font-size: 65px;
font-family: Georgia, "Times New Roman", Times, serif;
padding-right: 10px;
padding-left: 10px;
width: 80px;
text-align: center;
color: #6E9DCD;
font-style: italic;
text-transform: lowercase;
background-image: url(ifeellucky-images/logo.png);
background-repeat: no-repeat;
}
a {
color: #5BBFF4;
}
#contents a {
display: inline;
padding: 3px;
height: 15px;
margin-right: 5px;
margin-left: 5px;
background-color: #FFFFCC;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#wrap #header #sitename .grey {
color: #CCCCCC;
}
#wrap #sidebar .sidebarcontent #previews {
margin-top: 10px;
margin-bottom: 10px;
}
#wrap #sidebar .sidebarcontent #previews img {
padding: 5px;
background-color: #333333;
border: 1px solid #454545;
float: left;
margin: 5px;
}
#wrap #sidebar .sidebarcontent #previews .clear2 {
clear: left;
width: 99%;
}
#wrap #sidebar .sidebarcontent #latestposts a:visited, active {
color: #999999;
text-decoration: none;
display: block;
height: 20px;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #232323;
}
#wrap #sidebar .sidebarcontent #latestposts a:hover {
color: #CCCCCC;
text-decoration: none;
display: block;
height: 20px;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #343434;
background-color: #131313;
}
#wrap #sidebar .sidebarcontent #previews a:visited, active {
text-decoration: none;
}
#wrap #sidebar .sidebarcontent #previews a:hover img {
text-decoration: none;
background-color: #666666;
border: 1px solid #CCCCCC;
}
a:visited {
color: #6E9DCD;
}
a:hover {
color: #000000;
text-decoration: none;
}
#wrap #contents blockquote {
display: block;
background-image: url(ifeellucky-images/quote.png);
background-repeat: no-repeat;
background-position: 5px 10px;
padding-top: 5px;
padding-left: 35px;
padding-right: 35px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
margin: 10px;
}
#wrap #contents img {
margin: 5px;
padding: 5px;
background-color: #F0F0F0;
border: 1px solid #999999;
}
#wrap #contents .left {
float: left;
}
#wrap #contents .right {
float: right;
}
#footer {
background-color: #000000;
border-top-width: 5px;
border-top-style: solid;
border-top-color: #333333;
padding: 25px;
}
#footer a:visited, active {
color: #CCCCCC;
}
#footer a:hover {
color: #FFFFFF;
}
#wrap #contents table {
width: 98%;
margin-top: 15px;
margin-bottom: 15px;
}
#wrap #contents caption {
font-size: 18px;
font-family: "Trebuchet MS", Arial, Verdana;
text-transform: uppercase;
background-color: #F6F6F6;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #CCCCCC;
}
#wrap #contents td {
padding: 8px;
border: 1px solid #CCCCCC;
}
#wrap #contents th {
padding: 8px;
background-color: #585555;
color: #FFFFFF;
}
#wrap #contents .postinfo {
font-size: 10px;
display: block;
padding: 3px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 25px;
margin-left: 0px;
background-color: #FFFFCC;
}
h3, h4, h5 {
color: #0099CC;
}
#wrap #contents ul {
list-style-type: none;
}
#wrap #contents li {
display: block;
}
#wrap #contents ul li {
background-image: url(ifeellucky-images/bullet.gif);
background-repeat: no-repeat;
background-position: 1px 2px;
padding-left: 20px;
margin-bottom: 5px;
}
#wrap #contents ol {
list-style-type: decimal;
padding-left: 35px;
}
form {margin:0; padding:0;}
.textfield {display: block; float:left; width:190px; background-color: #F3F4E8; margin:3px; border: 1px solid #D6D9AE;}
label { display: block; float: left; text-align:right; font-weight:bold; width: 150px; margin:3px; padding: 5px;}
.button {
display: block;
float:left;
padding:0px;
background-color:#E3E6C8;
margin:3px;
border: 2px solid #333333;
color:#000000;
}
.textfield:hover {background:#FBFCF8;}
.textfield:focus {background:#ffffff;}
.clear2 {clear:left; height:1px; font-size:1px; margin:0; padding:0; display:block;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1 id="sitename"><span class="big">I</span>
<span class="logosmall">Feel Lucky</span></h1>
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="tables.html">Tables</a></li>
<li class="active"><a href="blog.html">Blog Entries</a></li>
<li><a href="forms.html">Forms</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div id="contents">
<h1>Heading One <span class="seo">Short Description</span></h1>
<p>This template is my first attempt at making a simple, image-less design with most of the common design elements. As you can see that web 2.0 -ish header is also done purely in CSS <span class="highlight"> without any image</span>. I have included most of the common design elements like Tables, Menu, List, Tag Cloud, Forms, Codes, image alingment etc. The alignment of image is controlled by two css classes called . leftalign and .rightalign. I have also included a CSS for Print. Enjoy!</p>
<h2> Heading 2 Code Example <span class="seo">Example of Code</span> </h2>
<code >
h2 {font-weight:normal; font-size:16px; color:#666666}
</code>
<p>Cras vel odio. Vestibulum feugiat laoreet magna. Vivamus semper, ipsum sit amet bibendum lobortis, erat leo elementum est, vel ullamcorper tortor augue a tortor. Phasellus eget nibh at felis condimentum elementum. Vivamus quis sem id diam facilisis hendrerit. Phasellus placerat dapibus magna. Vivamus id nunc. Proin laoreet dapibus nibh.</p>
<h3>Unordered list example</h3>
<ul>
<li>Cras vel odio. Vestibulum feugiat laoreet magna.</li>
<li>Vivamus semper, ipsum sit amet bibendum lobortis, erat leo elementum est, vel ullamcorper tortor augue a tortor.</li>
<li>Phasellus eget nibh at felis condimentum elementum. Vivamus quis sem id diam facilisis hendrerit.</li>
<li>Phasellus placerat dapibus magna. Vivamus id nunc. Proin laoreet dapibus nibh.</li>
</ul>
<h3>Ordered list example</h3>
<ol>
<li>Cras vel odio. Vestibulum feugiat laoreet magna.</li>
<li>Vivamus semper, ipsum sit amet bibendum lobortis, erat leo elementum est, vel ullamcorper tortor augue a tortor.</li>
<li>Phasellus eget nibh at felis condimentum elementum. Vivamus quis sem id diam facilisis hendrerit.</li>
<li>Phasellus placerat dapibus magna. Vivamus id nunc. Proin laoreet dapibus nibh.</li>
</ol>
<h3>Heading 3 Blockquote Example <span class="seo">Example of Blockquote</span></h3>
<blockquote><p> Aliquam sed leo non urna accumsan pellentesque. Mauris placerat tortor et justo. Quisque eleifend feugiat tortor. Maecenas nec nunc. Aenean rhoncus velit id risus. Sed sagittis aliquet orci. Donec pharetra lacus id urna. Nullam sit amet augue tristique pede nonummy euismod.<cite>Lorem I. Dolor Sit.</cite></p>
</blockquote>
<p>Aliquam odio. Nullam a velit rutrum elit auctor ultricies. Etiam euismod turpis ut diam. Nulla ut velit mollis eros nonummy pellentesque. Pellentesque diam. Praesent neque. Donec sed magna. Curabitur nulla. Fusce dapibus tempus nibh. Nulla semper fermentum magna. Nunc pulvinar suscipit nisl. Praesent euismod mi eu tellus. Nam hendrerit viverra mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ultricies semper diam. Duis ut nulla vel libero pharetra laoreet. In hendrerit massa fermentum pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur non lorem. </p>
<p class="postinfo">Posted by yourname | Category | 101 Comments</p>
<h1>Some Gibberish <span class="seo">Some text here</span></h1>
<p>Vestibulum tincidunt. Sed vitae eros in lorem posuere ultricies. Morbi imperdiet cursus ante. Etiam augue metus, blandit id, consequat et, blandit ac, justo. Mauris pellentesque eleifend pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent ac justo ut leo convallis egestas. Donec ligula eros, malesuada sed, adipiscing non, venenatis facilisis, ipsum. Nullam non quam. Phasellus eget nisl. Donec odio magna, sagittis in, viverra a, sollicitudin ut, diam. </p>
<div class="clear"></div>
</div>
<div id="sidebar">
<span class="sidebartop"></span>
<div class="sidebarcontent">
<h2>Latest Posts</h2>
<ul id="latestposts">
<li><a href="#">A link to a post that is not really a post</a></li>
<li><a href="#">Hi there! Welcome</a></li>
<li><a href="#">Lorem Ipsum Dolor Sit</a></li>
<li><a href="#">Sit Ipsum Dolor Lorem</a></li>
</ul>
<h2>From the Gallery</h2>
<div id="previews">
<a href="#"><img src="ifeellucky-images/1.jpg" alt="Image 1" /></a>
<a href="#"><img src="ifeellucky-images/2.jpg" alt="Image 1" /></a>
<a href="#"><img src="ifeellucky-images/3.jpg" alt="Image 1" /></a>
<div class="clear2"> </div>
<a href="#"><img src="ifeellucky-images/2.jpg" alt="Image 1" /></a>
<a href="#"><img src="ifeellucky-images/3.jpg" alt="Image 1" /></a>
<a href="#"><img src="ifeellucky-images/1.jpg" alt="Image 1" /></a>
<div class="clear2"> </div>
</div>
</div>
<span class="sidebarbtm"></span></div>
<div class="clear"></div>
<div id="footer">Copyright © Yoursite.com | <a href="#">Lorem</a> | <a href="#">Ipsum</a> | <a href="#">Dolar</a> | <a href="#">etc</a>..
<div id="templateinfo">
<a href="http://www.ramblingsoul.com">CSS Template</a> by Rambling Soul<br /> Design downloaded from <a href="http://www.free-css-layouts.com" title="Free CSS Layouts">Free CSS Layouts</a></div>
</div>
</div>
</body>
</html>
Related examples in the same category