nature-theme
<!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>Nature Theme</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* { margin:0; padding:0; }
body, div, span, p, a, img, ul, ol, li, table, th, tr, td, form, fieldset, legend, dl, dt, dd, blockquote, applet, object { border:0; }
body {
padding: 0;
background: #fff url("nature-theme-img/bg.jpg") repeat-x;
font: 0.8em/1.5 "arial",sans-serif;
color: #354146;
text-align: center;
}
/* obecne odkazy --------------------------------------------------------------- */
a {color:#1666a3;}
a:link {color:#1666a3;}
a:hover {color:#0b4775;}
/* nadpisy --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin:15px 0 10px 0; }
h1 { font-size:200%; font-family: Georgia;}
h1#logo a{color: #ced1d2; text-decoration: none; display: block;padding: 18px 0 17px; font-weight: normal;}
h1#logo a:hover{color: #fff;}
h2 { font-size:130%; color: #354146;font-weight: bold; padding: 0;margin:0; }
h3 { font-size:120%; }
h4 { font-size:120%; }
h5 { font-size:100%; }
/* layout ---------------------------------------------------------------------- */
#layout {
text-align:left;
}
#container {
clear: both;
}
#intro{
background: #e6e8e9;height: auto;
}
#intro-in{
width:891px;
margin:0 auto;
padding: 20px 0;
}
/* hlavicka ------------------------------------------------------------------ */
#header {width:891px;
margin:0 auto; }
/* horizontalni navigace --------------------------------------------------- */
#nav {width:891px;
margin:0 auto; }
#nav ul {margin:0; padding:0; list-style:none;height: 35px;}
#nav ul li {float:left; display:block; margin:0; padding:0;}
#nav ul li a {
display: block;
float: left;
font-size: 85%;
color: #fff;
text-decoration: none;
padding: 12px 20px 10px;
text-align: center;
}
#nav ul li a:hover {
color: #ced1d2;
text-decoration: underline;
}
#nav ul li#active a {
color: #101517;
border: 1px solid #fff;border-bottom:1px solid #e6e8e9;
background:#e6e8e9; text-decoration:none;}
.content {
padding: 0 0 0 0;
z-index: 10;
width:891px;
margin:0 auto;
}
.content .in{
padding: 20px 0 30px;
}
p.intro{
background: url("nature-theme-img/line.jpg");
line-height: 23px;
margin:0 0 0;
}
.shadow{
border-top: 1px solid #dddddd;
padding: 10px 0;
background: url("nature-theme-img/shadow.jpg") no-repeat;
}
img.thumb{padding: 3px; background: #fff; border: 1px solid #d1d1d1;}
.columns {list-style: none;margin:10px 0 0 0;padding:0; font-size: 90%;}
.columns li{float: left; width: 32%;}
.columns li.col2{border-left: 1px solid #d7d7d7;border-right: 1px solid #d7d7d7;}
.columns li h3{padding: 0 10px;color: #2e4650; margin: 0 0 5px;}
.columns li.col2 h3{padding-left: 20px;}
.columns li.col3 h3{padding-left: 20px;}
.columns li p{line-height: 22px;padding: 0 20px 0 10px; margin: 0; color: #3f4345;}
.columns li.col2 p{padding: 0 20px 0 20px;}
.columns li.col3 p{padding: 0 10px 0 20px;}
.columns li a.more{display: block;color: #1666a3;padding: 5px 0;}
.columns li a.more:hover{color: #0b4775; text-decoration: none;}
/* paticka ----------------------------------------------------------------- */
#footer {
width:891px;
margin:0 auto;
clear:both;
font-size: 85%;
padding-bottom: 70px;
color: #898989;
}
#footer a{color: #898989;}
#footer a:hover{color: #666666; text-decoration: none;}
#footer .f-left, #footer .f-right { padding: 0 10px; }
/* odstavce -------------------------------------------------------------------- */
p { margin:15px 0; }
/* tabulky --------------------------------------------------------------------- */
table { margin:15px 0; border-collapse:collapse; border-spacing:0; font-size:100%; }
th { text-align:center; font-weight:bold; }
th, td { padding:3px 5px; }
/* seznamy --------------------------------------------------------------------- */
ul, ol { display:block; margin:15px 0 15px 40px; }
ul ul, ul ul ul, ol ol, ol ol ol { margin:0; margin-left:20px; }
ol { list-style-type:decimal; }
ol ol { list-style-type:upper-alpha; }
ol ol ol {list-style-type:lower-alpha; }
li { display:list-item; }
ul li a { text-decoration:underline; }
/* definice -------------------------------------------------------------------- */
dl { margin:15px 0; }
dt { font-weight:bold; }
dd { margin-left:30px; }
/* ostatni --------------------------------------------------------------------- */
fieldset { margin:15px 0; padding:10px; border:1px solid #CCC; }
legend { margin-left:10px; font-size:100%; font-weight:bold; color:#000; }
abbr, acronym, .help { border-bottom:1px dotted #CCC; cursor:help; }
blockquote { margin:15px 20px; font-style:italic; }
del, .del { text-decoration:line-through; }
strong, .strong { font-weight:bold; }
cite, em, q, var { font-style:italic; }
code, kbd, samp {font-family:monospace; font-size:110%; }
hr { display:block; height:1px; margin:10px 0; padding:0; border:0 solid #CCC; background:#CCC; color:#CCC;}
.f-left {float:left;}
.f-right {float:right;}
.a-left, tr.a-left td {text-align:left;}
.a-center, tr.a-center td {text-align:center;}
.a-right, tr.a-right td {text-align:right;}
.a-justify {text-align:justify;}
.va-top {vertical-align:top;}
.va-middle {vertical-align:middle;}
.va-bottom {vertical-align:bottom;}
.clear { clear:both; }
.box { min-height:1px; }
.box:after { display:block; visibility:hidden; clear:both; line-height:0; font-size:0; content:"."; }
.noscreen { display:none; }
.mleft10 { margin-left: 10px; }
.mright10 { margin-right: 10px; }
.mtop10 { margin-top: 10px; }
.mbottom10 { margin-bottom: 10px; }
/* univerzalni prvky ------------------------------------------------------------ */
input.small{
width: 50px;
}
input.normal{
width: 146px;
}
.bigger {font-size:115%;}
.smaller {font-size:85%;}
.high {color:#00F;}
.nonhigh {color:#777;}
.foto{ display: block; border: 3px solid #ddd;}
</style>
<link rel="stylesheet" media="print" type="text/css" href="css/print.css" />
</head>
<body>
<div id="layout">
<div id="header">
<h1 id="logo"><a href="http://www.free-css.com/">Nature Theme</a></h1>
<hr class="noscreen" />
<p class="noscreen noprint"> <em>Jump to: <a href="#obsah">content</a>, <a href="#nav">navigation</a>.</em> </p>
</div>
<hr class="noscreen" />
<div id="nav" class="box">
<ul>
<li id="active"><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About us</a></li>
<li><a href="http://www.free-css.com/">Products</a></li>
<li><a href="http://www.free-css.com/">Links</a></li>
<li><a href="http://www.free-css.com/">Photos</a></li>
<li><a href="http://www.free-css.com/">Contacts</a></li>
</ul>
<hr class="noscreen" />
</div>
<div id="container" class="box">
<div id="intro">
<div id="intro-in">
<h2>Welcome to our site</h2>
<p class="intro"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. </p>
</div>
</div>
<div id="obsah" class="content box">
<div class="in">
<div class="shadow"> <img src="nature-theme-img/image.jpg" alt="" class="thumb" /> </div>
<ul class="columns">
<li class="col1">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo <a href="http://www.free-css.com/" class="more">Find out more</a> </p>
</li>
<li class="col2">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo <a href="http://www.free-css.com/" class="more">Find out more</a> </p>
</li>
<li class="col3">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo <a href="http://www.free-css.com/" class="more">Find out more</a> </p>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
<div id="footer" class="shadow">
<div class="f-left">Copyright © 2008 <a href="http://www.free-css.com/">Your Name</a></div>
<div class="f-right">Designed by <a href="http://www.davidkohout.cz">David Kohout</a> | Our tip: <a href="http://www.spodnipradlo.org/">Spodni pradlo</a></div>
</div>
</div>
</body>
</html>
Related examples in the same category