wildcity
<!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>Wild City - Tony Pires</title>
<style type='text/css'>
* {
margin: 0;
padding: 0;
}
body {
font: 13px Georgia, "Times New Roman", Times, serif;
background: url(wildcity-images/header.jpg) top center no-repeat #870010;
text-align: center;
color: #FFF;
}
/**** GENERAL STYLES ****/
a {
color: #F47D1F;
text-decoration: none;
}
a:hover {
color: #FFCFB3;
}
p {
line-height: 1.4em;
text-align: justify;
padding: 10px 0 0 0;
}
#mainContent ul,
#mainContent ol {
margin-left: 40px;
line-height: 1.8em;
padding: 10px 0 0 0;
}
#mainContent ul {
list-style: url(wildcity-images/bullet_o.gif);
}
blockquote {
border-left: 4px solid #B21;
color: #FFCFB3;
margin: 10px 40px 0 40px;
line-height: 1.8em;
padding: 0 10px 10px 10px;
}
blockquote:first-line {
font-size: 20px;
font-style: italic;
line-height: 1.4em;
}
code {
border-bottom: 1px dotted #B21;
color: #FFCFB3;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
font-variant: small-caps;
line-height: 1.5em;
}
h1 {
font-size: 26px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 12px;
}
/**** GENERAL LAYOUT ****/
#container {
width: 868px;
margin: 0 auto;
text-align: left;
}
#header {
height: 520px;
padding: 0 10px 0 20px;
}
#mainContent {
background: url(wildcity-images/footer.jpg) bottom center no-repeat;
}
/**** HEADER STYLES ****/
#header h1 {
float: left;
font-size: 72px;
font-weight: normal;
font-variant: normal;
line-height: 1.2em;
padding-top: 10px;
}
#header h1 a {
color: #FFF;
}
#header h1 a:hover {
color: #FFCFB3;
}
#header h2 {
float: left;
font-size: 16px;
font-weight: normal;
font-style: italic;
font-variant: normal;
line-height: 1.2em;
padding: 35px 0 0 10px;
}
/**** MAIN MENU LAYOUT and STYLES ****/
#mainMenu {
color: #FFCFB3;
float: right;
font-size: 30px;
line-height: 1.5em;
list-style: none;
margin-left: -35px;
position: relative;
}
#mainMenu a {
color: #FFF;
}
#mainMenu a:hover {
background: #FFCFB3;
color: #870010;
}
#mainMenu a,
#mainMenu span {
padding: 0 5px;
}
/**** BLOG LAYOUT and STYLES ****/
.blog {
padding-bottom: 40px;
}
.blog h2.blogTitle {
font-size: 28px;
font-weight: normal;
font-variant: normal;
line-height: 18px;
position: relative;
z-index: 1;
}
.blog h3.meta {
background: url(wildcity-images/blog_meta.jpg) no-repeat;
color: #FFCFB3;
font-size: 13px;
font-weight: normal;
font-variant: normal;
height: 36px;
line-height: 36px;
padding: 0 10px 0 15px;
position: relative;
z-index: 0;
}
* html .blog h3.meta {
padding-top: 10px;
}
.blog h2.blogTitle a {
color: #FFF;
}
.blog h2.blogTitle a:hover {
color: #FFCFB3;
}
.blog h3.meta a {
color: #FFCFB3;
}
.blog h3.meta a:hover {
color: #FFF;
}
img.bullet {
padding: 0 4px;
}
/**** ROUNDED CORNER BOX STYLES ****/
.c1 {
background: url(wildcity-images/c1.gif) top left no-repeat #EC691F;
margin: 0 0 40px 0;
}
.c2 {
background: url(wildcity-images/c2.gif) top right no-repeat;
}
.c3 {
background: url(wildcity-images/c3.gif) bottom left no-repeat;
}
.c4 {
background: url(wildcity-images/c4.gif) bottom right no-repeat;
}
#mainContent .c4 p,
#mainContent .c4 ul {
padding: 0 20px;
line-height: 36px;
margin-left: 0;
}
/**** ROUNDED CORNER BOTTOM BOX STYLES ****/
.c4 li {
display: inline;
background: url(wildcity-images/bullet_w.gif) center right no-repeat;
}
.c4 li a {
color: #FFCFB3;
margin-right: 11px;
white-space: nowrap;
}
.c4 li a:hover {
color: #FFF;
}
.boxDesc {
font-size: 28px;
font-weight: normal;
font-variant: normal;
}
/**** ROUNDED CORNER BOX - INPUT STYLES ****/
li.formList .c1,
li.formList .c2,
li.formList .c3,
li.formList .c4 {
width: 125px;
}
#postComment .c1,
#postComment .c2,
#postComment .c3,
#postComment .c4 {
height: 40px;
line-height: 40px;
width: 300px;
}
.c4 input.searchBox,
#postComment input,
.postCommentTA textarea {
background: transparent;
border: none;
color: #870010;
font: 12px Georgia, "Times New Roman", Times, serif;
position: relative;
left: 4px;
width: 80px;
}
#mainContent .c1 {
margin-bottom: 15px;
}
#postComment input {
float: left;
position: relative;
top: 12px;
width: 200px;
}
#postComment .postCommentTA .c1,
#postComment .postCommentTA .c2,
#postComment .postCommentTA .c3,
#postComment .postCommentTA .c4 {
height: auto;
width: 500px;
}
#mainContent #postComment .postCommentTA .c1 {
margin-bottom: 30px;
}
.postCommentTA textarea {
margin: 10px;
overflow: auto;
width: 470px;
}
#postComment label {
color: #FFCFB3;
float: right;
padding-right: 10px;
}
#mainMenu li.formList {
line-height: .6em;
}
/**** BUTTON STYLES ****/
.goButton {
background: url(wildcity-images/button.gif) center center no-repeat;
border: none;
color: #FFCFB3;
height: 28px;
width: 38px;
}
.goButton span {
position: relative;
top: -1px;
}
.postButtonCluster {
position: relative;
top: -20px;
}
.postButtonCluster button {
background: none;
border: none;
color: #FFCFB3;
font: 16px Georgia, "Times New Roman", Times, serif;
margin-right: 20px;
}
/**** COMMENT LIST STYLES ****/
#commentList {
list-style-position: outside;
position: relative;
left: -40px;
margin-right: -40px;
width: 868px;
}
#commentList li {
background: url(wildcity-images/blog_meta.jpg) no-repeat;
color: #FFCFB3;
font-size: 13px;
font-weight: normal;
font-variant: normal;
padding: 0 10px 0 15px;
}
.commentMeta {
clear: both;
height: 36px;
}
.cml {
float: left;
}
.cmr {
float: right;
font-size: 10px;
}
.commentContent {
color: #FFF;
position: relative;
top: -20px;
}
/**** FOOTER STYLES ****/
#footer p {
color: #FFCFB3;
font-size: 11px;
padding: 10px 0;
text-align: center;
}
/**** IMAGE FLOATING, IMAGE CENTERING ****/
.floatImgR,
.floatImgL,
.imageCenter {
border: 1px solid #B21;
padding: 2px;
}
.floatImgR {
float: right;
margin: 10px 0 5px 10px;
}
.floatImgL {
float: left;
margin: 10px 10px 5px 0;
}
.imageCenter {
display: block;
margin: 10px auto;
}
/**** CLEARING ****/
br.clear {
clear: both;
}
</style>
<!--[if IE]>
<style type="text/css">
.c4 input.searchBox { top: -5px; }
.goButton { margin-left: 4px; }
.c4 li { margin-right: 10px; }
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="#">wild city</a></h1>
<h2>insert your witty slogan here</h2>
<ul id="mainMenu">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">links</a></li>
<li><a href="#">stuff</a></li>
<li><a href="#">activism</a></li>
<li><a href="#">contact</a></li>
<li><span>search:</span></li>
<li class="formList"><form action="cgi-bin/void.cgi">
<div class="c1"><div class="c2"><div class="c3"><div class="c4">
<input type="text" name="search" size="10" class="searchBox" />
<button type="submit" class="goButton"><span>go</span></button>
</div></div></div></div>
</form></li>
</ul>
</div><!-- end #header -->
<div id="mainContent">
<div class="blog">
<h2 class="blogTitle"><a href="single.html">Click here to view an article page with comments</a></h2>
<h3 class="meta">posted by <a href="#">johnnyboy</a> on monday, june 1, 2008 <img src="wildcity-images/bullet_w.gif" alt="" class="bullet" /> <a href="#">26 comments</a> <img src="wildcity-images/bullet_w.gif" alt="" class="bullet" /> tagged in <a href="#">Funny</a>, <a href="#">City Life</a>, <a href="#">Technology</a> <img src="wildcity-images/bullet_w.gif" alt="" class="bullet" /> <a href="#">full article</a></h3>
<img class="floatImgL" src="wildcity-images/night_trip.jpg" alt="Night Trip" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<p>Vestibulum urna velit, lobortis eget, ultricies at, pellentesque eget, arcu. Donec pellentesque nunc eu risus. Integer auctor justo et lectus. Integer tincidunt magna sed ipsum. Donec scelerisque dignissim nunc. Proin pellentesque urna vel magna. Aliquam pharetra cursus augue. Praesent bibendum nunc eget lacus. Curabitur congue lacus quis tellus. Curabitur blandit erat sed est hendrerit bibendum. Nullam facilisis mauris eu lectus. Nam risus. Maecenas volutpat metus eget ante. Praesent bibendum nunc eget lacus. Curabitur congue lacus quis tellus. Curabitur blandit erat sed est hendrerit bibendum. Nullam facilisis mauris eu lectus. Nam risus. Maecenas volutpat metus eget ante.</p>
<p>Fusce turpis lectus, hendrerit nec, commodo ac, mattis mattis, mauris. Morbi mollis. Vestibulum pretium auctor lorem. Phasellus condimentum est nec mi. Etiam odio tellus, euismod vitae, suscipit nec, aliquam et, sapien. Cras elit leo, iaculis et, varius at, consectetuer eget, tellus. Phasellus euismod eleifend sem. Quisque justo metus, volutpat vitae, imperdiet a, cursus at, nibh. Sed interdum pulvinar nisi. Aliquam magna. <a href="single.html">Continue...</a></p>
</div><!-- end .blog -->
<div class="blog">
<h2 class="blogTitle"><a href="#">A sampling of styled elements for this template</a></h2>
<h3 class="meta">posted by <a href="#">johnnyboy</a> on monday, june 1, 2008 <img src="wildcity-images/bullet_w.gif" alt="" class="bullet" /> <a href="#">26 comments</a> <img src="wildcity-images/bullet_w.gif" alt="" class="bullet" /> tagged in <a href="#">Funny</a>, <a href="#">City Life</a>, <a href="#">Technology</a> <img src="wildcity-images/bullet_w.gif" alt="" class="bullet" /> <a href="#">full article</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h1>Sample Header 1 (H1)</h1>
<h2>Sample Header 2 (H2)</h2>
<h3>Sample Header 3 (H3)</h3>
<h4>Sample Header 4 (H4)</h4>
<h5>Sample Header 5 (H5)</h5>
<h6>Sample Header 6 (H6)</h6>
<blockquote><p>Blockquote. Vestibulum urna velit, lobortis eget, ultricies at, pellentesque eget, arcu. Donec pellentesque nunc eu risus. Integer auctor justo et lectus. Integer tincidunt magna sed ipsum. Donec scelerisque dignissim nunc. Proin pellentesque urna vel magna. Aliquam pharetra cursus augue.</p></blockquote>
<p>Fusce turpis lectus, hendrerit nec, commodo ac, mattis mattis, mauris. Morbi mollis. Vestibulum pretium auctor lorem. Phasellus condimentum est nec mi. Etiam odio tellus, euismod vitae, suscipit nec, aliquam et, sapien. Cras elit leo, iaculis et, varius at, consectetuer eget, tellus. Phasellus euismod eleifend sem. Quisque justo metus, volutpat vitae, imperdiet a, cursus at, nibh. Sed interdum pulvinar nisi. Aliquam magna.</p>
<ul>
<li>Safari 3.1</li>
<li>Firefox 2 & 3</li>
<li>Internet Explorer 6 & 7</li>
<li>Opera 9</li>
</ul>
<p>Fusce turpis lectus, hendrerit nec, commodo ac, mattis mattis, mauris. Morbi mollis. Vestibulum pretium auctor lorem. Phasellus condimentum est nec mi. Etiam odio tellus, euismod vitae, suscipit nec, aliquam et, sapien. <code>Sample code: sudo rm -rfd ~/Documents/*</code>. Cras elit leo, iaculis et, varius at, consectetuer eget, tellus. Phasellus euismod eleifend sem. Quisque justo metus, volutpat vitae, imperdiet a, cursus at, nibh. Sed interdum pulvinar nisi. Aliquam magna.</p>
</div><!-- end .blog -->
<h2 class="boxDesc">archives:</h2>
<div class="c1"><div class="c2"><div class="c3"><div class="c4">
<ul>
<li><a href="#">Jun 2008</a></li>
<li><a href="#">May 2008</a></li>
<li><a href="#">Apr 2008</a></li>
<li><a href="#">Mar 2008</a></li>
<li><a href="#">Feb 2008</a></li>
<li><a href="#">Jan 2008</a></li>
<li><a href="#">Dec 2007</a></li>
<li><a href="#">Nov 2007</a></li>
<li><a href="#">Oct 2007</a></li>
<li><a href="#">Sep 2007</a></li>
<li><a href="#">Aug 2007</a></li>
<li><a href="#">Jul 2007</a></li>
<li><a href="#">Jun 2007</a></li>
<li><a href="#">May 2007</a></li>
<li><a href="#">Apr 2007</a></li>
<li><a href="#">Mar 2007</a></li>
<li><a href="#">Feb 2007</a></li>
<li><a href="#">Jan 2007</a></li>
</ul>
</div></div></div></div>
<h2 class="boxDesc">categories:</h2>
<div class="c1"><div class="c2"><div class="c3"><div class="c4">
<ul><!-- If the background overlaps over the text in these list items, you may have to add a space after the name. -->
<!-- This typically hapens at the end of lines. -->
<li><a href="#">Vestibulum</a></li>
<li><a href="#">Urna velit</a></li>
<li><a href="#">Lobortis eget</a></li>
<li><a href="#">Pellentesque eget</a></li>
<li><a href="#">Donec pellentesque</a></li>
<li><a href="#">Nunc risus</a></li>
<li><a href="#">Integer auctor</a></li>
<li><a href="#">Justo lectus</a></li>
<li><a href="#">Tincidunt </a></li>
<li><a href="#">Magna sed</a></li>
<li><a href="#">Scelerisque</a></li>
<li><a href="#">Dignissim</a></li>
<li><a href="#">Pellentesque</a></li>
<li><a href="#">Aliquam</a></li>
<li><a href="#">Pharetra</a></li>
<li><a href="#">Praesent</a></li>
<li><a href="#">Vestibulum</a></li>
<li><a href="#">Urna velit</a></li>
<li><a href="#">Lobortis eget </a></li>
<li><a href="#">Pellentesque eget</a></li>
<li><a href="#">Donec pellentesque</a></li>
<li><a href="#">Nunc risus</a></li>
<li><a href="#">Integer auctor</a></li>
<li><a href="#">Justo lectus</a></li>
<li><a href="#">Integer tincidunt</a></li>
<li><a href="#">Magna sed</a></li>
<li><a href="#">Scelerisque</a></li>
<li><a href="#">Dignissim </a></li>
<li><a href="#">Pellentesque</a></li>
<li><a href="#">Aliquam</a></li>
<li><a href="#">Pharetra</a></li>
<li><a href="#">Praesent</a></li>
</ul>
</div></div></div></div>
<br class="clear" />
</div><!-- end #mainContent -->
<div id="footer">
<p>Copyright © 2008, your.site.com <img src="wildcity-images/bullet_w.gif" alt="" class="bullet" /> Design by <a href="http://20pirates.com">Tony Pires</a> <img src="wildcity-images/bullet_w.gif" alt="" class="bullet" /> <a href="#">Terms & Conditions</a></p>
<div style="display:none;"><a href="http://csstemplatesfree.net">free css templates for download</a></div>
</div><!-- end #footer -->
</div><!-- end #container -->
</body>
</html>
Related examples in the same category