nauticax
<!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">
<head>
<title>Nautica X</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* Design by STUDIO7DESIGNS.com
Company: Nautica X - Opensourcetemplates.org
File: main.css - This contains all the main styles for the website.
All the styles are separted into the following groups:
Global Browser Reset - they make sure that all browsers start with the same default settings
HTML, Body - for the html and body tags
Layout - any style that defines how the site is laid out (position and size of objects)
Nav - navigation bar
Headings - headings like h1, h2, etc
Text Styles - Styles for text
Lists - unordered and ordered lists
Forms - html forms
Links - links
Misc - anything that doesn't fit elsewhere
*/
/* @group Global Browser Reset */
* {
padding:0;
margin:0;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl, fieldset, address { margin:20px 0; }
li, dd, blockquote { margin-left: 40px; }
fieldset { padding:10px; }
img { border: 0px; }
/* @end */
/* @group HTML, Body */
body {
text-align: center;
font-size: 1em;
font-family: Verdana, sans-serif;
}
/* @end */
/* @group Layout */
div#outer-wrapper {
background: url(nauticax-images/body-bkg.gif) repeat-y top center;
}
div#inner-wrapper {
background: url(nauticax-images/header-bkg.gif) repeat-x;
}
div#content-wrapper {
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
div#logo {
background: url(nauticax-images/logo-box-bkg.gif) no-repeat;
width: 194px;
height: 225px;
margin-top: 4px;
text-align: center;
}
div#logo img {
margin-top: 85px;
}
div#sidebar {
float: left;
width: 210px;
display: inline;
}
div#content {
float: right;
width: 730px;
margin-right: 30px;
display: inline;
}
div#content-inner {
margin-top: 20px;
padding: 1px 0;
background: url(nauticax-images/leaf-watermark.gif) no-repeat bottom right;
}
div.content-left {
padding: 4px;
width: 218px;
background-color: #d7d7d7;
float: left;
display: inline;
}
div.content-left img {
border: 1px solid #fff;
}
div.content-left p {
background-color: #dc3409;
margin: 4px 0 0 0 !important;
color: #fff;
text-align: center;
font-family: "Times New Roman", serif;
padding: 2px;
font-size: 1.3em;
border: 1px solid #fff;
}
div.content-left p span {
font-size: .8em;
}
div.content-right {
float: left;
margin-left: 20px;
width: 484px;
display: inline;
}
div.content-full {
clear: both;
padding-top: 15px;
}
p.end-story-links {
border-bottom: 4px solid #d1b9b3;
margin-bottom: 15px !important;
font-size: .8em;
}
div#footer {
clear: both;
border-top: 1px solid #5e534f;
background-color: #e7e5d2;
padding: 10px;
}
img.content-img {
float: left;
border: 2px solid #ccc;
margin: 0 10px 10px 0;
}
/* @end */
/* @group Nav */
ul#nav {
margin: 0 0 20px 0;
height: 40px;
line-height: 45px;
font-size: 1.2em;
font-family: "Times New Roman", serif;
overflow: hidden;
}
ul#nav li {
display: inline;
list-style-type: none;
text-transform: uppercase;
margin: 0 20px 0 0;
}
ul#nav li a:link, ul#nav li a:visited {
color: #7d7257;
text-decoration: none;
}
ul#nav li a:hover {
color: #3f3e3a;
}
ul.side-nav {
margin: 10px 5px 10px 17px;
border-top: 1px solid #e9e7e7;
font-size: .7em;
color: #978f7c;
text-transform: uppercase;
}
ul.side-nav li {
margin: 0;
list-style-type: none;
padding: 1px 0;
}
ul.side-nav li a {
display: block;
border-bottom: 1px solid #e9e7e7;
margin: 0;
padding: 10px 0 10px 20px;
background: url(nauticax-images/side-nav-bullet.gif) no-repeat 5px 50%;
}
ul.side-nav li a:link, ul.side-nav li a:visited {
color: #978f7c;
text-decoration: none;
}
ul.side-nav li a:hover {
background: url(nauticax-images/side-nav-bullet-light.gif) no-repeat 5px 50% #f6f5f0;
color: #cac6ba;
}
ul#footer-nav {
font-family: "Times New Roman", serif;
font-size: .7em;
text-transform: uppercase;
margin: 0 0 10px 0;
}
ul#footer-nav li {
display: inline;
margin: 0;
padding: 0 10px 0 5px;
border-right: 1px solid #958d83;
}
ul#footer-nav li.last {
border-right: none;
}
ul#footer-nav li a:link, ul#footer-nav li a:visited {
color: #5e534f;
text-decoration: none;
}
ul#footer-nav li a:hover {
color: #453e3b;
}
/* @end */
/* @group Headings */
h1 { }
h2 {
margin: 0 0 0 0;
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 1.6em;
color: #464031;
}
h3.dateline {
font-size: .8em;
font-weight: lighter;
color: #dc3409;
margin: 0 0 10px 0;
}
h4 {
margin-left: 25px;
margin-right: 10px;
text-transform: uppercase;
font-weight: lighter;
margin-bottom: 10px;
font-family: "Times New Roman", serif;
color: #a1a09b;
}
h5 { }
h6 { }
/* @end */
/* @group Text Styles */
div#content-inner {
font-size: .75em;
color: #929291;
line-height: 1.7em;
}
div#content-inner p {
margin: 2px 0 30px 0;
}
p.intro:first-letter {
font-size: 1.4em;
letter-spacing: -1px;
}
p.copyright {
font-size: .65em;
font-family: "Times New Roman", serif;
color: #797069;
text-transform: uppercase;
margin: 10px 0;
}
/* @end */
/* @group Lists */
/* @end */
/* @group Forms */
form#search-form {
/*width: 150px;*/
float: right;
margin: 4px 0 0 0;
border-right: 1px solid #736749;
border-left: 1px solid #736749;
border-bottom: 1px solid #736749;
}
form#search-form input.txt {
width: 140px;
/*border: 1px solid #736749;*/
/*border-top: 4px solid #635534;*/
border: none;
margin: 0;
padding: 4px;
background-color: #dbd6c9;
color: #fff;
text-transform: uppercase;
}
/* @end */
/* @group Links - link visited hover active */
div#content-inner a:link, div#content-inner a:visited {
color: #8b7f73;
text-decoration: none;
border-bottom: 1px dotted #8b7f73;
}
div#content-inner a:hover {
color: #706153;
border-bottom: 1px dotted #706153;
}
p.end-story-links a:link, p.end-story-links a:visited {
color: #8b7f73;
text-decoration: none;
border-bottom: none !important;
}
p.copyright a:link, p.copyright a:visited {
color: #797069;
text-decoration: none;
}
p.copyright a:hover {
color: #453e3b;
}
/* @end */
/* @group Misc */
.clear {
clear: both;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* @end */
</style>
</head>
<body>
<div id="outer-wrapper">
<div id="inner-wrapper">
<div id="content-wrapper">
<div id="content">
<form name="search" action="http://www.free-css.com/" id="search-form">
<input type="text" class="txt" value="Search" />
</form>
<ul id="nav">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Newsletters</a></li>
<li><a href="http://www.free-css.com/">Blog</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
<div id="content-inner">
<div class="content-left"> <img src="nauticax-images/nyc-photo.jpg" alt="NYC Photo" />
<p>NEW YORK<br />
<span>Central Park in the fall 2006</span></p>
</div>
<div class="content-right">
<h2>Welcome to Nautica X</h2>
<h3 class="dateline">Saturday, February 18th, 2007</h3>
<p class="intro">A rainy day in new york's central park reveals a hint of color through the mist. This template has been on the back burner for some time now, and we are very happy to be releasing it to the open source template community. We will be turning this into a blogger theme very soon, and if anyone is interested in converting this to a wordpress theme then please feel free to contact us.</p>
<p>You may use this template anyway you like, however we would appreciate it if you could leave the link back to us in the footer to help us continue to be able to produce more designs in the future. We have to thank <a href="http://www.slicendiceit.com">slice n dice</a> for all the amazing coding on this template. This template is Valid CSS and XHTML and has been tested to work in IE6-7, Firefox, Opera, and Safari for OSX.</p>
<p class="end-story-links"><a href="http://www.free-css.com/">14 Comments</a> | <a href="http://www.free-css.com/">Read on...</a></p>
</div>
<div class="content-full">
<h2>Full page blog provides plenty of space</h2>
<h3 class="dateline">Saturday, February 18th, 2007</h3>
<p class="intro">We wanted to create a blog template that had an understated feel to it and that would really provide enough space to really blog a ton of content. When we build our blogger theme we will be providing the full page blog template and the image and 2/3rds content format for you to pick from. Keep your eyes out in late Feb for the blogger and wordpress releases at STUDIO7DESIGNS.</p>
<p>We are moving more and more towards the 1000 pixel wide designs these days. In most cases for blogs and such, it is so important to have enough space to have white space around your text. This will help your readers breath and take in your paragraphs more easily. Here is an example of a float left image with a 2 pixel #CCCCCC border around it.</p>
<img src="nauticax-images/bldg-pic.jpg" alt="" class="content-img" />
<p class="intro">The padding on the paragraphs leaves enough room so that the text and image have enough space to breath. In this template we are experimenting with text as a design aspect. It is imparative to chose your fonts well, and to chose different types and sizes and colors to really use the font as a design paintbrush.</p>
<p>For this template we are keeping it simple enough as to let the focus be on the content, not the design. You can hop into the style sheet and increase the font color if you find these colors are too light. We hope you enjoy our designs and drop us a line as we always like to see our designs in action!</p>
<p>Thank you from STUDIO7DESIGNS Victoria BC Canada.</p>
<p class="end-story-links"><a href="http://www.free-css.com/">37 Comments</a> | <a href="http://www.free-css.com/">Read on...</a></p>
</div>
</div>
</div>
<div id="sidebar">
<div id="logo"> <img src="nauticax-images/nautica-logo.gif" alt="Nautica X" /> </div>
<h4>Recent Posts</h4>
<ul class="side-nav">
<li><a href="http://www.free-css.com/">Studio7Designs</a></li>
<li><a href="http://www.free-css.com/">Arbutus Photography</a></li>
<li><a href="http://www.free-css.com/">Open Source Templates </a></li>
<li><a href="http://www.free-css.com/">Nautica series </a></li>
</ul>
<h4>Archives</h4>
<ul class="side-nav">
<li><a href="http://www.free-css.com/">January 2007</a></li>
<li><a href="http://www.free-css.com/">December 2006</a></li>
<li><a href="http://www.free-css.com/">November 2006</a></li>
</ul>
</div>
</div>
<div id="footer">
<ul id="footer-nav">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Your Blog</a></li>
<li><a href="http://www.free-css.com/">Your Services</a></li>
<li><a href="http://www.free-css.com/">Site Map</a></li>
<li><a href="http://www.free-css.com/">Links</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
<li><a href="http://www.free-css.com/">Newsletter</a></li>
<li><a href="http://www.free-css.com/">Top Listings</a></li>
<li><a href="http://www.free-css.com/">Magazine</a></li>
<li class="last"><a href="http://www.free-css.com/">Open Source</a></li>
</ul>
<p class="copyright">Copyright 2007 Your Name | <a href="http://www.studio7designs.com">Design by Studio7Designs</a> | <a href="http://www.slicendiceit.com">Coding by Slice 'n Dice</a> | <a href="http://www.free-css.com/">We Support OST.org</a></p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category