godetia
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Godetia</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
font: 78.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
word-spacing:2px;
color:#444;
margin:20px;
background:#fff;
}
* {
margin:0;
padding:0;
}
a {
color:#098BF7;
}
a:hover {
text-decoration:none;
}
#wrapper {
background:#fff;
max-width:900px;
width:expression(this.width > 320 ? "320px" : this.width);
min-width:760px;
margin:0 auto;
}
* html #wrapper
{
w\idth: expression(document.documentElement.clientWidth > 900 ? "900px" : "auto");
}
#header {
padding:0 10px 40px 10px;
border-left:2px solid #eee;
margin:0 0 30px 0;
}
#header h1 {
color:#F90069;
font:230% Arial;
letter-spacing:-1px;
text-transform:uppercase;
}
#header h1 a {
color:#f90069;
text-decoration:none;
}
#header h2 {
color:#aaa;
font:140% Arial;
text-transform:uppercase;
}
#header form {
float:right;
}
#header form input {
padding:2px;
font:110% Verdana;
color:#777;
border:1px solid #ccc;
}
.clear {
clear:both;
}
.menu {
background:url(godetia-images/menu.jpg) top right repeat-x #F90069;
height:50px;
}
ul#nav {
}
ul#nav li {
list-style:none;
float:left;
height:50px;
}
.clear {
clear:both;
}
ul#nav li a {
height:40px;
background:url(godetia-images/nav_a.jpg) top repeat-x #F90069;
display:block;
width:120px;
padding:5px;
border-right:1px solid #fff;
color:#fff;
text-transform:uppercase;
text-decoration:none;
font:90% Verdana;
}
ul#nav li a:hover {
background:url(godetia-images/nav_a_hover.jpg) bottom repeat-x #F90069;
}
ul#nav li a em {
font-style:normal;
text-decoration:underline;
}
#sidebar {
width:330px;
float:right;
margin:5px 12px 0 0!important;
margin:5px 6px 0 0;
background:url(godetia-images/sidebar.jpg) bottom repeat-x #EEEEEE;
}
#sidebar h1 {
background:#F80069;
color:#fff;
font:150% Arial;
padding:10px;
border-bottom:5px solid #fff;
}
#sidebar p {
padding:10px 20px;
margin:0 0 10px 0;
font-size:90%;
}
#sidebar p.first {
padding:20px;
font-size:110%;
}
#sidebar h2 {
font:150% Arial;
color:#098BF7;
border-bottom:1px solid #ccc;
margin:10px;
}
#sidebar h3 {
font:90% Verdana;
text-transform:uppercase;
margin:0 10px;
color:#333;
letter-spacing:1px;
font-weight:bold;
}
#sidebar ul,ol {
margin:0 0 0 30px;
padding:5px;
}
#sidebar ul li {
padding:3px;
}
#content {
margin:5px 348px 0 0 !important;
}
#content .first {
background:url(godetia-images/nav_a_hover) bottom repeat-x #f90069;
padding:20px;
}
#content .first h2 {
color:#fff;
background:none;
padding:0;
}
#content .first p {
color:#fff;
}
#content .first p a {
color:#fff;
font-weight:bold;
border-bottom:1px solid #FF8ABC;
text-decoration:none;
}
#content p {
line-height:27px;
margin:10px 15px;
padding:5px;
}
#content h2 {
font:160% Arial;
color:#333;
margin:2px 0 5px 0;
padding:15px;
text-transform:uppercase;
background:url(godetia-images/h2.jpg) top repeat-x;
}
#content h2 a {
color:#333;
text-decoration:none;
}
#content p img {
float:left;
margin:0 10px 0 0;
padding:1px;
background:#ccc;
border:4px solid #eee;
}
#content h3 {
font:140% Trebuchet MS;
color:#444;
margin:15px 15px;
}
blockquote {
margin:0 0 0 20px;
border-left:2px solid #ccc;
}
#content ul {
margin:0 0 0 40px;
}
#content form {
padding:10px;
margin:20px;
border:1px solid #ccc;
}
#content form label {
font-weight:bold;
color:#444;
display:block;
}
#content form input {
width:96%;
border:1px solid #ddd;
padding:4px;
margin:5px 0 10px 0;
font:90% Verdana;
}
#content form textarea {
width:96%;
border:1px solid #ddd;
padding:4px;
margin:5px 0 10px 0;
font:90% Verdana;
}
#footer {
margin:30px 0;
border-top:2px solid #eee;
padding:20px;
font:90% Verdana;
color:#999;
}
#footer a {
color:#666;
font-weight:bold;
text-decoration:none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<form action="http://www.free-css.com/">
<input value="Search" />
</form>
<h1><a href="http://www.free-css.com/">Godetia</a></h1>
<h2>A pink template by Six Shooter Media</h2>
</div>
<div class="menu">
<ul id="nav">
<li><a href="http://www.free-css.com/" accesskey="i"><em>H</em>ome</a></li>
<li><a href="http://www.free-css.com/" accesskey="a"><em>A</em>bout</a></li>
<li><a href="http://www.free-css.com/" accesskey="e"><em>E</em>xamples</a></li>
<li><a href="http://www.free-css.com/" accesskey="c"><em>C</em>ontact</a></li>
</ul>
<br class="clear" />
</div>
<div id="sidebar">
<h1>The Sidebar!</h1>
<p class="first">Welcome to the sidebar. Here, of course you can house any information that takes your fancy! A latest news section, some links to other web sites, latest comments, etc etc etc!</p>
<h2>Latest News</h2>
<h3>Godetia Template Released</h3>
<p>Here it is, my latest template!! Godetia is a simple 2 column layout with a primarily pink colour scheme. This is of course easily changed via the CSS and via the modification of a couple of images!</p>
<h3>More Templates!</h3>
<p>You can see all of my templates on my personal site! Or by following this link to the free templates page!</p>
<h2>Some Links</h2>
<ul>
<li><a href="http://www.free-css.com/">Six Shooter Media</a></li>
<li><a href="http://www.free-css.com/">free templates</a></li>
<li><a href="http://www.free-css.com/">Buy a Button</a></li>
<li><a href="http://www.free-css.com/">Transfer Speculation</a></li>
</ul>
</div>
<div id="content">
<div class="first">
<h2 id="intro">Introduction</h2>
<p>Hey there! Welcome to Godetia. A css / xhtml template created by Six Shooter Media. Anyone who knows me will know that I am quite fond of the colour pink! And so it was about time that I created a pink themed template, thusly, here is Godetia!</p>
</div>
<h2 id="about"><a href="http://www.free-css.com/">About the Author</a></h2>
<p>Hi! My names Jay and I'm a 20 year old web designer from England. My main projects are conducted through my website Six Shooter Media, but I (obviously) also enjoy creating Open Source web templates for general use! You can keep a check on my free templates here which is probably a link worth bookmarking as my templates appear there a couple of weeks before OWD/OSWD due to the design queues. </p>
<p> Another site of mine that you might find interesting if you're setting up a site with a free template like Buy a Button.net. There, for a great price you can purchase a link to your site in the form of a button. This link will obviously provide you site with some additional traffic which is always nice! </p>
<p> If you want more of my free templates, they can be found here! </p>
<h2 id="examples"><a href="http://www.free-css.com/">Some Examples</a></h2>
<p> OK, here I'll just put some example html elements that you will most probably be using in your blog. </p>
<h3>Blockquote Example</h3>
<blockquote>
<p> Here's your blockquote text jfds jkndskf ndsknf sldnfjk sdnf jdsbf hdsbf jbsdjfk bdskj bdsjfb dsk bds bfsdj bfsjk bfsjdbf sbjd fjsbdk fsdbf sdb fksbd sb </p>
</blockquote>
<h3>List Example</h3>
<ul>
<li><span>Here</span></li>
<li><span>Is our friend</span></li>
<li><span>The list!</span></li>
</ul>
<h2 id="contact"><a href="http://www.free-css.com/">Contact</a></h2>
<p> If you decide to use this template please drop me a line to let me know! Don't hesitiate to get in touch if your interested in a custom template or just in any of my services in general. I look forward to hearing from you! </p>
<h3>Example Contact Form</h3>
<form action="http://www.free-css.com/">
<label>Name</label>
<input value="Your Name" />
<label>Email</label>
<input value="Your Email" />
<label>You Comments</label>
<textarea rows="5" cols="5"></textarea>
<input type="submit" />
</form>
</div>
<div id="footer">
<p>Template design by <a href="http://www.sixshootermedia.com">Six Shooter Media</a>.<br />
All your copyright information here.</p>
</div>
</div>
</body>
</html>
Related examples in the same category