Exotic_Blue
<!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="cs" lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="cs" />
<meta name="author" lang="cs" content="David Kohout; http://www.davidkohout.cz" />
<meta name="copyright" lang="cs" content="David Kohout; http://www.davidkohout.cz" />
<meta name="description" content="..." />
<meta name="keywords" content="..." />
<meta name="robots" content="all,follow" />
<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 0 18px 0;
background: #fff url('Exotic_Blue-img/bg.jpg') repeat-x;
font: 0.8em/1.5 "arial",sans-serif;
color: #333;
text-align: center;
}
/* obecne odkazy --------------------------------------------------------------- */
a {color:#095799;}
a:link {color:#095799;}
a:hover {color:#095799; text-decoration: none;}
/* nadpisy --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin:15px 0 10px 0; }
h1 { font-size:200%; } h1#logo { font-size:280%; font-weight: normal;}
h2 { font-size:190%; font-weight: normal; line-height: 24px; }
h3 { font-size:100%; margin-top: 20px; border-bottom: 1px solid #dfdfdf; padding-bottom: 5px;;margin-right: 15px;} #panel-left h3 { margin-top: 15px; padding-bottom: 0; font-size: 160%; font-weight: normal; border: none;}
h4 { font-size:120%; }
h5 { font-size:100%; }
/* layout ---------------------------------------------------------------------- */
#layout {
width:800px;
margin:0 auto;
text-align:left;
}
#container {
background: #fff;
}
#obsah {
}
/* hlavicka ------------------------------------------------------------------ */
#header { position:relative; background: #2a9ac3 url('Exotic_Blue-img/header.jpg') no-repeat; }
#logo {
font-family: 'Trebuchet MS', 'Geneva CE', lucida, sans-serif;
position: relative;
overflow: hidden;
height: 132px;
font-size:260%;
margin: 0;
line-height: 120px;
text-align: left;
}
#logo a{
display: block;
color: #fff;
text-decoration: none;
}
#logo span {
display: block;
position: absolute;
left: 0; top: 0;
z-index: 1;
width: 250px; height: 120px;
background: url("Exotic_Blue-img/logo.jpg") 0 0 no-repeat;
cursor: pointer;
}
#slogan{
position: absolute;
left: 270px;
line-height: 120px;
display: block;
height: 120px;
top: 0;
}
/* horizontalni navigace --------------------------------------------------- */
#nav {position:relative; z-index:2; border-top: 0;}
#nav ul {margin:0; padding:0; list-style:none;}
#nav ul li {float:left; _float: none; display:inline; margin:0; padding:0; background: url('Exotic_Blue-img/nav.jpg') no-repeat;}
#nav ul li a {
font-family: 'Trebuchet MS', 'Geneva CE', lucida, sans-serif;
color: #fff;
font-size: 95%;
font-weight: bold;
display: block;
float: left; /*\*/ float:none;
padding: 16px 22px;
text-align: center;
}
#nav ul li a:hover {
text-decoration: none;
}
#first {
background: none !important;}
.content {
float: right;
padding: 0 0 0 0px; margin-top: 15px;
width:620px;
z-index: 10;
}
.content .in{
padding: 8px 18px 0 22px;border-left: 1px solid #e3e3e3;
}
/* Sloupce ----------------------------------------------------------------- */
#panel-left { float:left; width:170px;}
.panel .in { padding: 0px 5px 10px 20px; }
/* paticka ----------------------------------------------------------------- */
#footer {
clear:both;
height: 27px;
background: url('Exotic_Blue-img/footer.jpg') no-repeat;
padding: 17px 16px 13px 16px;
color: #676767;
margin-top: 10px;
}
#footer p { margin:0; padding-top:10px; }
/* odstavce -------------------------------------------------------------------- */
p { margin:15px 0; line-height: 25px; font-size: 12px;}
/* tabulky --------------------------------------------------------------------- */
table { margin:15px 0; border: 1px solid #cdcdcd; border-collapse:collapse; border-spacing:0; font-size:100%; width: 100%;}
th { text-align:center; font-weight:bold; border: 1px solid #cdcdcd;}
th, td { padding:4px 6px; border: 1px solid #cdcdcd;}
tr.table-top {background: #e5e5e5; font-weight: bold;}
/* 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; margin-bottom: 6px;}
ul li a { text-decoration:underline; }
#panel-left ul{
margin: 0 !important; padding: 0 !important;
list-style-type: none;
font-size: 95%;
}
#panel-left li{
list-style-type: none; background: url('Exotic_Blue-img/li.jpg') no-repeat 3px 6px; padding-left: 20px; margin-bottom: 6px;}
/* 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;}
.clear {clear: both;}
.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; }
.mtop0 { margin-top: 0;}
a img {
border: 1px solid #dadada;
}
a:hover img {
border: 1px solid #bbbbbb;
}
.thumbnail
{
float: left;
margin: 0 14px 5px 0;
}
/* 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>
<!--[if lte IE 6]>
<link href="css/msie.css" type="text/css" rel="stylesheet" media="screen,projection" />
<![endif]-->
<title>Blue Exotic – Free CSS Template</title>
</head>
<body>
<div id="layout">
<div id="header">
<h1 id="logo"><a href="./" title="Company">What a nice web<span></span></a></h1>
<hr class="noscreen" />
<div id="nav" class="box">
<ul>
<li id="first"><a href="#">HOME</a></li> <!-- Aktivn poloka -->
<li><a href="#">ABOUT US</a></li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">PHOTOS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<hr class="noscreen" />
</div>
</div>
<hr class="noscreen" />
<div id="container" class="box">
<div id="obsah" class="content box">
<div class="in">
<h2 class="mtop0">Lorem ipsum dolor</h2>
<p class="extra">Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing elit</a>, 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 <a href="#">pariatur</a>. Excepteur sint occaecat cupidatat non proident.</p>
<div class="sep"></div>
<h3>PHOTOS</h3>
<div class="thumbnail">
<a href="/"><img src="Exotic_Blue-img/sample.jpg" alt="" width="128" height="94" /></a><br />
</div>
<div class="thumbnail">
<a href="/"><img src="Exotic_Blue-img/sample.jpg" alt="" width="128" height="94" /></a><br />
</div>
<div class="thumbnail">
<a href="/"><img src="Exotic_Blue-img/sample.jpg" alt="" width="128" height="94" /></a><br />
</div>
<div class="thumbnail">
<a href="/"><img src="Exotic_Blue-img/sample.jpg" alt="" width="128" height="94" /></a><br />
</div>
<div class="sep clear"></div>
<h2>Dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, im veniam, quis n ullamco laboris nisi ut aliquip
im veniam, quis n ullamco laboris nisi ut aliquip sed do eiusmod tempor incididunt ut labore et dolore magna
aliquaim veniam, quis n ullamco laboris nisi ut aliquip .
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, im veniam, quis n ullamco laboris nisi ut aliquip
im veniam, quis n ullamco laboris nisi ut aliquip sed do eiusmod tempor incididunt ut labore et dolore magna
aliquaim veniam, quis n ullamco laboris nisi ut aliquip .
</p>
<table>
<tr class="table-top">
<td>Sample table</td>
<td>Sample table</td>
<td>Sample table</td>
<td>Sample table</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
</table>
</div>
</div>
<div id="panel-left" class="box panel">
<div class="in">
<h3>Menu</h3>
<ul>
<li><a href="/">Lorem ipsum</a></li>
<li><a href="/">Dolor sit amet</a></li>
<li><a href="/">Consectetur</a></li>
<li><a href="/">Adipisicing Elit</a></li>
<li><a href="/">Lorem ipsum</a></li>
<li><a href="/">Dolor sit amet</a></li>
</ul>
<h3>Links</h3>
<ul>
<li><a href="/">Lorem ipsum</a></li>
<li><a href="/">Dolor sit amet</a></li>
<li><a href="/">Consectetur</a></li>
<li><a href="/">Adipisicing Elit</a></li>
</ul>
<div class="sep"></div>
</div>
</div>
</div>
<div id="footer">
<span class="f-left">© 2008 <a href="/">Your Name</a> | design <a href="http://www.davidkohout.cz">David Kohout</a></span>
<span class="f-right">Our tip: <a href="http://www.photoextract.com/cs/digitalni-fotoaparaty/">Digitln fotoaparty Nikon</a></span>
</div>
</div>
</body>
</html>
Related examples in the same category