nautica05dark
<!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" xml:lang="en" lang="en">
<head>
<title>Nautica 05 Dark Contact Layout</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type='text/css'>
/**************************************************************
Visit studio7designs.com for more layouts and downloads for this template!
**************************************************************/
/**************************************************************
All page content except for footer
**************************************************************/
#content {
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
}
/**************************************************************
Topbar with newsletter form and theme change buttons
**************************************************************/
#topbar {
float: left;
width: 100%;
padding: 0.6em 0;
font-size: 0.9em;
text-transform: uppercase;
color: #CFD9DB;
background: #FFF url(nautica05dark-images/bg/topbar.gif) repeat-x bottom left;
}
/**************************************************************
Top menu and logo
**************************************************************/
#header {
clear: both;
position: relative;
height: 5em;
margin: 0 auto;
background: #48525B url(nautica05dark-images/bg/header.gif) repeat-x bottom left;
border-bottom: 2px solid #48525B;
background-color: #48525B;
}
#header img {
position: absolute;
top: 5%;
left: 10px;
}
#header ul {
margin: 3.5em 1em 0 0 !important;
margin: 3.5em 0.5em 0 0;
padding: 0;
float: right;
}
#header ul li {
display: inline;
list-style: none;
}
#header ul li a {
float: left;
padding: 0 1em;
font: 400 1.1em arial, sans-serif;
letter-spacing: 0.1em;
line-height: 0.8em !important;
line-height: 1em;
color: #cccccc;
border-right: 1px solid #4D5760;
}
#header ul li a.last {
padding-right: 0;
border-right: 0;
}
#header ul li a:hover {
color: #F26A92;
}
/**************************************************************
Header Image/Flash Movie
**************************************************************/
#headerImg {
margin: 0 auto;
height: 143px;
background: url(nautica05dark-images/bg/header_image.jpg) no-repeat top left;
}
/**************************************************************
Top Block Menu
**************************************************************/
#menu {
margin: 0 auto;
}
#menu ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
text-align: left;
background: #000 url(nautica05dark-images/bg/menu.gif) repeat-x top left;
}
#menu ul li {
display: inline;
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li a {
float: left;
width: 25%;
height: 4.5em;
font: 400 1.2em arial, sans-serif;
letter-spacing: 0.1em;
color: #fff;
border-top: 7px solid #000;
border-bottom: 15px solid #FFF;
}
#menu ul li a span {
display: block;
padding: 2px 7px;
}
#menu ul li a span.desc {
font-size: 0.8em;
color: #8C8D94;
}
#menu ul li a:hover,
#menu ul li a.here {
background: #000;
border-top: 7px solid #F06890;
}
#menu ul li a:hover span.desc,
#menu ul li a.here span.desc {
color: #FFF;
}
/* Top menu icons */
#menu ul li a span.speaker {
padding-left: 22px;
background: url(nautica05dark-images/icons/speaker.gif) no-repeat 5px 50%;
}
#menu ul li a:hover span.speaker {
background: url(nautica05dark-images/icons/speaker_on.gif) no-repeat 5px 50%;
}
#menu ul li a span.bubble {
padding-left: 24px;
background: url(nautica05dark-images/icons/bubble.gif) no-repeat 4px 4px;
}
#menu ul li a:hover span.bubble {
background: url(nautica05dark-images/icons/bubble_on.gif) no-repeat 4px 4px;
}
#menu ul li a span.heart {
padding-left: 20px;
background: url(nautica05dark-images/icons/heart.gif) no-repeat 3px 50%;
}
#menu ul li a:hover span.heart {
background: url(nautica05dark-images/icons/heart_on.gif) no-repeat 3px 50%;
}
#menu ul li a span.dollar {
padding-left: 20px;
background: url(nautica05dark-images/icons/dollar.gif) no-repeat 4px 50%;
}
#menu ul li a:hover span.dollar {
background: url(nautica05dark-images/icons/dollar_on.gif) no-repeat 4px 50%;
}
/**************************************************************
Page Content
**************************************************************/
#page {
clear: both;
float: left;
width: 100%;
margin-bottom: 6em;
text-align: left;
}
#columns {
margin: 0 auto;
}
/* Column widths */
.width {
width: 776px;
}
.widthPad {
width: 746px;
}
.width25 {
width: 24%;
}
.width50 {
width: 48%;
}
.width73 {
width: 73%;
}
.width75 {
width: 75%;
}
.width100 {
width: 100%;
}
/**************************************************************
Footer
**************************************************************/
#footer {
clear: both;
float: left;
width: 100%;
height: 5em;
margin-top: -5em;
}
#footer #bg {
position: relative;
height: 5em;
margin: 0 auto;
background: #49525B url(nautica05dark-images/bg/header.gif) repeat-x bottom left;
}
#footer #bg ul {
float: right;
margin: 3em 1em 0 0 !important;
margin: 3em 0.5em 0 0;
padding: 0;
}
#footer #bg ul li {
display: inline;
list-style: none;
}
#footer #bg ul li a {
float: left;
padding: 0 1em;
font: 400 1em arial, sans-serif;
letter-spacing: 0.1em;
line-height: 0.8em !important;
line-height: 1em;
color: #ccc;
border-right: 1px solid #4D5760;
}
#footer #bg ul li a.last {
padding-right: 0;
border-right: 0;
}
#footer #bg ul li a:hover {
color: #F26A92;
}
#footer #bg img {
position: absolute;
top: 6%;
left: 10px;
}
/**************************************************************
Icons specific to the colour theme
**************************************************************/
a.lightTheme img,
a.darkTheme img,
a.submitButton img {
width: 20px;
height: 20px;
vertical-align: middle;
}
a.lightTheme img {
background: url(nautica05dark-images/icons/light_light_theme.gif) no-repeat center center;
}
a.darkTheme img {
background: url(nautica05dark-images/icons/light_dark_theme.gif) no-repeat center center;
}
a.submitButton img {
background: url(nautica05dark-images/icons/light_submit.gif) no-repeat center center;
}
/**************************************************************
Posts
**************************************************************/
.post {
float: left;
width: 100% !important;
width: 99%;
position: relative;
margin-bottom: 1.5em;
border-bottom: 1px solid #CCCCCC;
}
.post .date {
position: absolute;
top: 0;
left: 5px;
width: 2.3em;
text-align: right;
}
.post .date .month {
text-transform: uppercase;
font: 700 1.0em arial, sans-serif;
color: #888;
}
.post .date .day {
display: block;
margin-top: -5px;
font: 700 2.1em arial, sans-serif;
color: #888;
}
.post .title {
display: block;
padding: 0 0 5px 0;
font-size: 1.2em;
font-weight: bold;
color: #586B7A;
}
.post p {
margin: 0 0 0 3.5em;
padding: 0 0 1em 1.2em;
border-left: 1px solid #CCCCCC;
}
/**************************************************************
Thumbnail Lists
**************************************************************/
ul.thumbs,
ul.thumbs li {
margin: 0;
padding: 0;
}
ul.thumbs li {
margin: 0 0 15px 0 !important;
margin: 0;
padding: 0px;
list-style: none;
}
a.thumb img {
border: 5px solid #ccc;
}
a:hover.thumb img {
background: #8EB4C6;
border: 5px solid #000;
}
a:hover.thumb {
background: none;
}
a.thumb span {
display: block;
margin-top: -5px !important;
margin-top: -2px;
}
/**************************************************************
Submenu Styles
**************************************************************/
ul.submenu1,
ul.submenu2 {
margin: 0 0 20px 0;
padding: 0;
}
ul.submenu1 li,
ul.submenu2 li{
margin: 0;
padding: 0;
list-style: none;
list-style-image: url(foo.gif); /* because IE is balls */
}
ul.submenu1 li a,
ul.submenu2 li a {
display: block;
height: auto !important;
/* Start hide from IE Mac \*/
height: 1%;
/* End hide from IE Mac */
padding: 1px 5px 1px 20px;
}
ul.submenu1 li a {
background: url(nautica05dark-images/bg/submenu1.gif) no-repeat 5px 50%;
}
ul.submenu1 a:hover {
color: #888;
background: #B3C6C4 url(nautica05dark-images/bg/submenu1.gif) no-repeat 5px 50%;
}
ul.submenu2 li a {
color: #426F85;
background: url(nautica05dark-images/bg/submenu2.gif) no-repeat 3px 50%;
}
ul.submenu2 a:hover {
color: #888;
background: #B3C6C4 url(nautica05dark-images/bg/submenu2.gif) no-repeat 3px 50%;
}
/**************************************************************
Generic Display
**************************************************************/
.block {
display: block;
}
.clear {
clear: both;
}
.marginRight {
margin-right: 15px;
}
.paddingLeft {
padding-left: 5px;
}
.paddingRight {
padding-right: 5px;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
.alignLeft {
text-align: left;
}
.alignRight {
text-align: right;
}
.alignTop {
vertical-align: top;
}
.alignMiddle {
vertical-align: middle;
}
.alignBottom {
vertical-align: bottom;
}
.lightBlueBg {
background-color: #E9EAEB;
}
.dark {
color: #353E47;
}
</style>
<link rel="stylesheet" type="text/css" href="css/html.css" media="screen, projection, tv " />
<!-- CSS specific to current theme -->
<link rel="stylesheet" type="text/css" href="css/light.css" title="light" media="screen, projection, tv " />
<link rel="alternate stylesheet" type="text/css" href="css/dark.css" title="dark" media="screen, projection, tv " />
</head>
<body>
<!-- #content: holds all except site footer - causes footer to stick to bottom -->
<div id="content">
<!-- #header: holds the logo and top links -->
<div id="header" class="width"> <img src="nautica05dark-images/logo.gif" alt="Your logo goes here"/>
<ul>
<li><a href="http://www.free-css.com/">Back to Main page</a></li>
<li><a href="http://www.free-css.com/">About us</a></li>
<li><a href="http://www.free-css.com/">Streaming Video</a></li>
<li><a href="http://www.free-css.com/" class="last">RSS Feeds</a></li>
</ul>
</div>
<!-- #header end -->
<!-- #headerImg: holds the main header image or flash -->
<div id="headerImg" class="width"></div>
<!-- #menu: the main large box site menu -->
<div id="menu" class="width">
<ul>
<li><a href="onecol.html"> <span class="title">One Column Layout</span> <span class="desc">View the included layout</span></a></li>
<li><a href="twocol_a.html" class="forum"> <span class="title">Two Column Layout A</span> <span class="desc style3">View the included layout</span></a></li>
<li><a href="twocol_b.html"> <span class="title">Two Column Layout B</span> <span class="desc">View the included layout</span></a></li>
<li><a href="contact.html"> <span class="title">Contact Us Layout</span> <span class="desc">View the included layout</span></a></li>
</ul>
</div>
<!-- #menu end -->
<!-- #page: holds the page content -->
<div id="page">
<!-- #columns: holds the columns of the page -->
<div id="columns" class="widthPad">
<!-- Left column -->
<div class="floatLeft width25 lightBlueBg horzPad">
<h2>Details</h2>
<p> Please make sure your info is correct, otherwise we can't get back to you. </p>
<ul>
<li>613.555.5555</li>
<li><a href="http://www.free-css.com/">info@yourname.com</a></li>
</ul>
<p> Nulla commodo. In nunc justo, mollis sed, gravida at, aliquam sit amet, urna. Nulla commodo. In pharetra justo eget turpis. Nulla commodo. </p>
</div>
<!-- Left column end -->
<!-- Right column -->
<div class="floatRight width73">
<h1>Contact <span class="dark">Us</span></h1>
<p> Nulla commodo. In nunc justo, mollis sed, gravida at, aliquam sit amet, urna. Nulla commodo. In pharetra justo eget turpis. Nulla commodo. In pharetra justo eget turpis. In nunc justo, mollis sed, gravida at, <a href="http://www.free-css.com/">aliquam sit</a> amet, urna. </p>
<form id="contact" action="http://www.free-css.com/" method="post" onsubmit="return configForm(this);" style="position: relative; z-index: 1;">
<p>
<input type="text" name="name" value="Name" class="width75" onfocus="clearValue(this, 'Name');" onblur="fillValue(this, 'Name');"/>
</p>
<p>
<input type="text" name="email" value="E-mail" class="width75" onfocus="clearValue(this, 'E-mail');" onblur="fillValue(this, 'E-mail');"/>
</p>
<p>
<input type="text" name="subject" value="Subject" class="width75" onfocus="clearValue(this, 'Subject');" onblur="fillValue(this, 'Subject');"/>
</p>
<p>
<textarea name="message" rows="5" cols="80" onfocus="clearValue(this, 'Message');" onblur="fillValue(this, 'Message');">Message</textarea>
</p>
<p>
<input type="submit" value="SEND" class="button" />
<input type="reset" value="RESET" class="button" />
</p>
<p> </p>
<h1>Example Form <span class="dark">Elements</span></h1>
<p>
<label>Input Heading</label>
<input type="text" name="input1" class="width50"/>
</p>
<p>
<label>Input Heading</label>
<input type="text" name="input2" class="width50"/>
</p>
<p>
<label>Textarea Heading</label>
<textarea name="textarea" rows="5" cols="60"></textarea>
</p>
<p>
<label>Select Heading</label>
<select name="select">
<option value="1">Value One</option>
<option value="2">Value Two</option>
</select>
</p>
<p>
<label>Radio Button Group</label>
<input type="radio" name="radioGroup" value="1" class="radio"/>
One
<input type="radio" name="radioGroup" value="2" class="radio"/>
Two
<input type="radio" name="radioGroup" value="3" class="radio"/>
Three
<input type="radio" name="radioGroup" value="4" class="radio"/>
Four </p>
<p>
<label>Checkbox Group</label>
<input type="checkbox" name="checkGroup" value="1" class="radio"/>
One
<input type="checkbox" name="checkGroup" value="2" class="radio"/>
Two
<input type="checkbox" name="checkGroup" value="3" class="radio"/>
Three
<input type="checkbox" name="checkGroup" value="4" class="radio"/>
Four </p>
<div class="lightBlueBg">
<h2>Different Style Checkbox Group</h2>
<p>
<input type="checkbox" name="checkGroup" value="1" class="radio"/>
A Choice<br/>
<input type="checkbox" name="checkGroup" value="2" class="radio"/>
Another Choice<br/>
<input type="checkbox" name="checkGroup" value="3" class="radio"/>
Maybe this is a better choice<br/>
<input type="checkbox" name="checkGroup" value="4" class="radio"/>
Other
<input type="text" name="other" class="width33"/>
</p>
</div>
</form>
</div>
<!-- Right column end -->
</div>
<!-- #columns end -->
</div>
<!-- #page end -->
</div>
<!-- #content end -->
<!-- #footer: holds the site footer (logo and links) -->
<div id="footer">
<!-- #bg: applies the site width and footer background -->
<div id="bg" class="width"> <img src="nautica05dark-images/logo.gif" alt="Your logo goes here"/>
<ul>
<li><a href="http://www.free-css.com/">Sitemap</a></li>
<li><a href="http://www.free-css.com/">Register</a></li>
<li><a href="http://www.free-css.com/">Design inspired by</a></li>
<li><a href="http://www.studio7designs.com" class="last">studio7designs.com</a></li>
</ul>
</div>
<!-- #bg end -->
</div>
<!-- #footer end -->
</body>
</html>
Related examples in the same category