blueweb
<!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>
<title>Blue Web</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: 17px 0 0 0;
margin:0;
background: #0066cc url("blueweb-img/bg-top.jpg") repeat-x;
font: 0.8em/1.5 "arial",sans-serif;
color: #505050;
text-align: center;
}
/* obecne odkazy --------------------------------------------------------------- */
a {color:#083e50;}
a:link {color:#083e50;}
a:hover {color:#000;}
/* nadpisy --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin:15px 0 10px 0; color: #083e50;}
h1 { font-size:200%; }
h2 { font-size:140%; margin: 0; padding: 5px 20px; color: #165888; font-weight: normal; border-bottom: 1px solid #efefef; }
h3 { font-size:110%; padding: 0 5px; margin: 10px 0; text-transform: uppercase; color: #8e8787; }
h4 { font-size:120%; }
h5 { font-size:100%; }
#wrap {
width:100%;
background: url("blueweb-img/bg.jpg") repeat-x;
}
/* layout ---------------------------------------------------------------------- */
#layout {
width:746px;
margin:0 auto;
text-align:left;
}
#container {
background: url("blueweb-img/container.jpg") no-repeat top;
width: 100%;
height: auto;
}
/* hlavicka ------------------------------------------------------------------ */
#header { position: relative;width: 100%; height: 120px;}
#logo-left{width: 8px; height: 55px; background: url("blueweb-img/logo-left.jpg") no-repeat; float: left;}
#logo-right{width: 7px; height: 55px; background: url("blueweb-img/logo-right.jpg") no-repeat; float: left;}
#logo h1{margin:0;padding:0;float: left;}
#logo { position: absolute; left: 50px; top: 30px; font-size:90%; text-align: center; }
#logo a{
display: block;
float: left;
font-weight: bold;
width: 150px; /* set width for your web name */
height: 55px;line-height: 55px;
background: url("blueweb-img/logo-bg.jpg") repeat-x;
color: #1f425c;
text-decoration: none;
}
#logo a .light{color: #2489b3;}
#logo a #logo-arrow{display: block; position: relative;top: -15px; left:0;background: url("blueweb-img/logo-arrow.jpg") no-repeat;width: 32px; height: 30px; margin: 0 auto;}
#logo #shadow{display: block;position: relative;top: -13px; left:10px;background: url("blueweb-img/logo-shadow.jpg") no-repeat bottom center;width: 132px; height: 20px;}
/* horizontalni navigace --------------------------------------------------- */
#nav {float: right; position: relative;top: 40px; margin-right: 40px;}
#nav ul {margin:0; padding:0; list-style:none;text-align: center;}
#nav ul li {float:left; display:block; margin:0; padding:0 3px;}
#nav .nav-left{width: 5px; height: 35px; background: url("blueweb-img/nav-left.jpg") no-repeat; float: left;}
#nav .nav-right{width: 6px; height: 35px; background: url("blueweb-img/nav-right.jpg") no-repeat; float: left;}
#nav ul li a {
display: block;
float: left;
font-size: 12px;
margin: 0;
background: url("blueweb-img/nav-bg.jpg") repeat-x;
width: 80px;
height: 35px;
line-height: 35px;
text-transform: uppercase;
color: #b4e2ff;
font-weight: bold;
text-decoration: none;
text-align: center;
}
#nav ul li a:hover {
color: #fff;
}
#nav #active .nav-left{width: 5px; height: 35px; background: url("blueweb-img/nav-active-left.jpg") no-repeat; float: left;}
#nav #active .nav-right{width: 6px; height: 35px; background: url("blueweb-img/nav-active-right.jpg") no-repeat; float: left;}
#nav #active a {
text-decoration:none;color: #fff;
background: url("blueweb-img/nav-active-bg.jpg") repeat-x;}
#nav a .arrow{display: block; position: relative;top: -9px; left:0;background: url("blueweb-img/nav.jpg") no-repeat;width: 19px; height: 17px; margin: 0 auto;}
#nav #active a .arrow{background: url("blueweb-img/nav-hover.jpg") no-repeat;position: relative;top: -9px; left:0;}
#nav .shadow{display: block;background: url("blueweb-img/nav-shadow.jpg") no-repeat -5px -5px;width: 91px; height: 23px;}
.content {
float: left;
padding: 33px 0 0 0;
width:498px;
}
.content .in{
padding: 0 10px 10px 10px;
margin: 0;
position: relative; left:10px;
background: #fff url("blueweb-img/content-foot.jpg") no-repeat bottom left;
}
.content .in #position{position: relative; top:-16px; left:0;}
.content p{ padding: 0 5px;}
.gallery {padding: 0 0 0 5px; clear: both; margin-bottom: 10px; width: 100%;}
.gallery .center{margin: 0 15px;}
.article{padding: 0 0 10px 0; margin: 0 5px 10px 5px; border-bottom: 1px solid #f7f7f7;font-size: 95%;}
.article .title strong a{color: #195e90; text-decoration: none;}
.article .title strong a:hover{color: #000; text-decoration: none;}
.article .title a{color: #79797a; text-decoration: underline;}
.article .title a:hover{color: #000; text-decoration: none;}
.article .title {color: #79797a; text-decoration: none;}
.article p{margin: 0; padding: 10px 0 5px 0;text-align: justify;}
.article a{color: #2489b3;}
.article a:hover{color: #000;text-decoration: none;}
.article .article-detail{text-align: right;}
/* Sloupce ----------------------------------------------------------------- */
#panel-right { float:left; width:228px; margin: 42px 0 0 0; }
#panel-right #panel-bg{background: #efefef url("blueweb-img/panel-shadow.jpg") no-repeat top left;width:228px;position: relative; left:10px; }
.panel #panel-position{position: relative;top: -15px;}
.panel .in { padding: 4px 10px 10px 10px;background: url("blueweb-img/panel-foot.jpg") no-repeat bottom left; }
.panel h5{ color: #77797b;text-transform: uppercase; margin: 0; padding: 0 5px 5px; border-bottom: 1px solid #dadada;font-size: 95%;}
.panel ul{margin: 10px 0 20px 10px; list-style: none;}
.panel ul li a{color: #195e90; text-decoration: none; display: block; width: 90%; padding: 1px 0 0 20px; background: url("blueweb-img/panel-nav.jpg") no-repeat 0 -15px;}
.panel ul li a.panel-active{color: #000000; text-decoration: none; background: url("blueweb-img/panel-nav.jpg") no-repeat 0 5px;}
.panel ul li a:hover{color: #000000; text-decoration: none; background: url("blueweb-img/panel-nav.jpg") no-repeat 0 5px;}
.panel a#webdesign {font-weight: normal; text-decoration: none;padding-left:25px;color: #032b53;}
.panel a#webdesign:hover {font-weight: normal; text-decoration: none;color: #032b53;}
.panel a#ts {font-weight: bold; text-decoration: none;}
.panel a#ts:hover {color: #fff;text-decoration: undelrine;}
/* paticka ----------------------------------------------------------------- */
#footer {
clear:both;
overflow: hidden;
color: #fff;
width:498px;
position: relative; top:0px;
height: 59px;line-height: 52px;
padding: 0;
margin: 0 0 0 10px;
background: url("blueweb-img/footer.jpg") no-repeat;
}
#footer div{padding: 0 20px;font-size: 95%;}
#footer a{color: #fff; font-weight: bold;text-decoration: none;}
#footer a:hover{text-decoration: none; color: #d3f4ff;text-decoration: underline;}
/* odstavce -------------------------------------------------------------------- */
p { margin:15px 0; }
/* tabulky --------------------------------------------------------------------- */
table { margin:15px 0; border-collapse:collapse; border-spacing:0; font-size:100%; width: 100%; border:3px solid #ccc;}
th { text-align:left; font-weight:bold; background: #f7f7f7; padding: 7px 5px;}
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:30px 50px; border:3px solid #ccc; background: #f7f7f7; }
fieldset label{display: block; width: 100px; float: left; margin: 5px;}
fieldset input.text, fieldset textarea.text { display: block; float: left; margin: 5px; width: 410px; padding: 3px 5px;}
fieldset .button{padding: 5px 15px;float: left;margin: 5px;}
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;}
.sep{ height: 1px;line-height:1px; border-bottom: 1px solid #efefef; margin: 10px 0;}
.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]-->
<link rel="stylesheet" media="print" type="text/css" href="css/print.css" />
</head>
<body>
<div id="wrap">
<div id="layout">
<div id="header">
<div id="logo">
<div id="logo-left"></div>
<h1><a href="http://www.free-css.com/">Blue<span class="light">Web</span><span id="logo-arrow"> </span><span id="shadow"> </span></a></h1>
<div id="logo-right"></div>
</div>
<hr class="noscreen" />
<p class="noscreen noprint"> <em>Rychl?avigace: <a href="http://www.free-css.com/">obsah</a>, <a href="http://www.free-css.com/">navigace</a>.</em> </p>
<hr class="noscreen" />
<div id="nav" class="box">
<ul>
<li id="active">
<div class="nav-left"></div>
<a href="http://www.free-css.com/"> Homepage <span class="arrow"> </span> <span class="shadow"> </span> </a>
<div class="nav-right"></div>
</li>
<li>
<div class="nav-left"></div>
<a href="http://www.free-css.com/"> About me <span class="arrow"> </span> <span class="shadow"> </span> </a>
<div class="nav-right"></div>
</li>
<li>
<div class="nav-left"></div>
<a href="http://www.free-css.com/"> Portfolio <span class="arrow"> </span> <span class="shadow"> </span> </a>
<div class="nav-right"></div>
</li>
<li>
<div class="nav-left"></div>
<a href="http://www.free-css.com/"> Contact <span class="arrow"> </span> <span class="shadow"> </span> </a>
<div class="nav-right"></div>
</li>
</ul>
<hr class="noscreen" />
</div>
</div>
<div id="container" class="box">
<div id="obsah" class="content box">
<div class="in">
<div id="position">
<h2>Lorem Ipsum!</h2>
<p class="extra">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<div class="gallery"> <a href="http://www.free-css.com/" class="f-left"><img src="blueweb-img/noimage.jpg" alt="" /></a> <a href="http://www.free-css.com/" class="f-left center"><img src="blueweb-img/noimage.jpg" alt="" /></a> <a href="http://www.free-css.com/" class="f-left"><img src="blueweb-img/noimage.jpg" alt="" /></a>
<div class="clear"></div>
</div>
<div class="sep"></div>
<h3>New articles</h3>
<div class="article">
<div class="title"><strong><a href="http://www.free-css.com/">Lorem ipsum!</a></strong> - March 22, 2008 by <a href="http://www.free-css.com/">UserNick</a></div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<div class="article-detail">comments: <a href="http://www.free-css.com/">32x</a> | <a href="http://www.free-css.com/">View article</a></div>
</div>
<div class="article">
<div class="title"><strong><a href="http://www.free-css.com/">Lorem ipsum!</a></strong> - March 22, 2008 by <a href="http://www.free-css.com/">UserNick</a></div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<div class="article-detail">comments: <a href="http://www.free-css.com/">32x</a> | <a href="http://www.free-css.com/">View article</a></div>
</div>
</div>
</div>
</div>
<div id="panel-right" class="box panel">
<div id="panel-bg">
<div class="in">
<div id="panel-position">
<h5>Categories</h5>
<ul>
<li><a href="http://www.free-css.com/">Business</a></li>
<li><a href="http://www.free-css.com/">Art & Photography</a></li>
<li><a href="http://www.free-css.com/" class="panel-active">Communications</a></li>
<li><a href="http://www.free-css.com/">Fashion</a></li>
<li><a href="http://www.free-css.com/">Hosting</a></li>
<li><a href="http://www.free-css.com/">Interior & Furniture</a></li>
<li><a href="http://www.free-css.com/">Music</a></li>
<li><a href="http://www.free-css.com/">Real Estate</a></li>
<li><a href="http://www.free-css.com/">Sport</a></li>
<li><a href="http://www.free-css.com/">Travel</a></li>
<li><a href="http://www.free-css.com/">Web design</a></li>
</ul>
<h5>Entries by month</h5>
<ul>
<li><a href="http://www.free-css.com/">July 2008</a></li>
<li><a href="http://www.free-css.com/" class="panel-active">June 2008</a></li>
<li><a href="http://www.free-css.com/">May 2008</a></li>
<li><a href="http://www.free-css.com/">April 2008</a></li>
</ul>
</div>
</div>
</div>
<a href="http://www.tvorimestranky.cz" id="webdesign">Webdesign</a>: <a href="http://www.tvorimestranky.cz" id="ts">Tvor?Str?y.cz</a> </div>
</div>
<div id="footer">
<div class="f-left"> 2008 - <a href="http://www.free-css.com/">WebTemplate</a></div>
<div class="f-right">Sponsored by: <a href="http://www.about-tattoo.com/">Tattoo</a></div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category