mint-idea
<!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>Mintidea</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 0;
background: #192d40 url('mint-idea-img/bg.jpg') repeat-x;
font-family: "arial",sans-serif;
font-size: 13px;
line-height:24px;
color: #e8eaeb;
text-align: center;
}
/* links --------------------------------------------------------------- */
a {color:#fff;}
a:link {color:#fff;}
a:hover {color:#fff; text-decoration: none;}
/* headings --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin:15px 0 10px 0; }
h1 { font-size:200%; }
h2 { font-size:160%; font-family: 'Trebuchet MS', 'Geneva CE', lucida, sans-serif; font-weight: normal; }
h3 { font-size:120%; margin-top: 25px; font-family: 'Trebuchet MS', 'Geneva CE', lucida, sans-serif;}
h4 { font-size:120%; }
h5 { font-size:100%; }
/* layout ---------------------------------------------------------------------- */
#layout {
width:790px;
margin:0 auto;
text-align:left;
}
#container {
padding-top: 12px;
}
/* header ------------------------------------------------------------------ */
#header { position:relative; padding-left: 7px;}
#logo {
font-family: Impact, 'Techno CE', sans-serif;
font-weight: normal;
color: #fff;
position: relative;
overflow: hidden;
height: 110px;
font-size:260%;
margin: 0;
line-height: 130px;
}
#logo a{
color: #fff;
text-decoration: none;
}
#logo .leaf {
position: absolute;
left: 0; top: 20px;
z-index: 1;
width: 120px; height: 80px;
background: url('mint-idea-img/leaf.gif') 45px 5px no-repeat;
cursor: pointer;
}
#logo .light {
color: #3f576e;
}
/* navigation --------------------------------------------------- */
#nav {position:relative; z-index:2; border: 1px solid #1a2735; border-right: none; border-left: none; padding: 7px 0;}
#nav ul {margin:0; padding:0; list-style:none;}
#nav ul li {float:left; display:inline; margin:0; padding:0;}
#nav ul li a {
font-size: 19px;
font-weight: bold;
display: block;
color: #fff;
text-decoration: none;
float: left; /*\*/ float:none;
padding: 7px 25px 7px 7px;
line-height: 18px;
}
#nav ul li a span {
font-size: 11px;
font-weight: normal;
color: #67707a;
}
#nav ul li a:hover {
background: #0a151f;
}
#nav ul li#active a {
}
.content {
float: right;
padding: 0 0 0 0;
width:570px;
z-index: 10;
}
.content .in{
padding: 0 0 0 10px;
}
/* columns ----------------------------------------------------------------- */
#panel-left { float:left; width:200px; }
.panel .in { padding: 10px; }
#panel-left span { color: #515f6a; }
#panel-left p { margin-top: 5px; }
/* footer ----------------------------------------------------------------- */
#footer {
clear:both;
height: 77px;
margin-top: 20px;
border-top: 1px solid #324455;
padding:10px 3px;
color: #a0a9b0;
font-size: 90%;
}
#footer a {
color: #a0a9b0;
}
#footer p { margin:0; padding-top:10px; }
/* paragraphs -------------------------------------------------------------------- */
p { margin:15px 0; }
/* tables --------------------------------------------------------------------- */
table { margin:15px 0; border: 1px solid #324455; border-collapse:collapse; border-spacing:0; font-size:100%; width: 100%;}
th { text-align:center; font-weight:bold; border: 1px solid #324455;}
th, td { padding:4px 6px; border: 1px solid #324455;}
tr.table-top {background: #425364; font-weight: bold;}
/* lists --------------------------------------------------------------------- */
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; }
/* definitions -------------------------------------------------------------------- */
dl { margin:15px 0; }
dt { font-weight:bold; }
dd { margin-left:30px; }
/* universal --------------------------------------------------------------------- */
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; }
.foto{ display: block;}
</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="layout">
<div id="header">
<h1 id="logo"><a href="http://www.free-css.com/">mint<span class="light">idea</span><span class="leaf"> </span></a></h1>
<hr class="noscreen" />
<p class="noscreen noprint"> <em>Skip to <a href="#obsah">content</a>, <a href="#nav">navigation</a>.</em> </p>
<hr class="noscreen" />
<div id="nav" class="box">
<ul>
<li><a href="http://www.free-css.com/">Home<br />
<span>Main page</span></a></li>
<li><a href="http://www.free-css.com/">Who<br />
<span>Our team</span></a></li>
<li><a href="http://www.free-css.com/">What<br />
<span>Our services</span></a></li>
<li><a href="http://www.free-css.com/">Portfolio<br />
<span>Our woks</span></a></li>
<li><a href="http://www.free-css.com/">Prices<br />
<span>How much it costs</span></a></li>
<li><a href="http://www.free-css.com/">Contact<br />
<span>Write us!</span></a></li>
</ul>
<hr class="noscreen" />
</div>
<div id="container" class="box">
<div id="obsah" class="content box">
<div class="in">
<h2>Lorem ipsum dolor!</h2>
<p>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>
<h3>Dolor sit amet:</h3>
<ul>
<li><a href="http://www.free-css.com/">Dolor in reprehenderit</a></li>
<li><a href="http://www.free-css.com/">In reprehenderit</a></li>
<li><a href="http://www.free-css.com/">Molot in reprehenderit in volupta</a></li>
<li><a href="http://www.free-css.com/">Rure dolor in reprehenderit in volupta</a></li>
</ul>
<h3>Lorem ipsum dolor</h3>
<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 </p>
<p> Quis n ullamco laboris nisi ut aliquip. Ut enim ad minim veniam, quis n ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p>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>
<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. </p>
</div>
</div>
<div id="panel-left" class="box panel">
<div class="in">
<p> <span>03/07/2008</span><br />
Duis aute irure dolor in repreh in voluptate velit esse cill dolore eu. </p>
<p> <span>03/07/2008</span><br />
Duis aute irure dolor in repreh in voluptate velit esse cill dolore eu. </p>
</div>
</div>
</div>
<div id="footer"> <span class="f-left">© 2008 <a href="http://www.free-css.com/">Your name</a></span> <span class="f-right">Design: <a href="http://www.davidkohout.cz">David Kohout</a> | Our tip <a href="http://www.efektim.com">Efektim Real Estate</a></span> </div>
</div>
</div>
</body>
</html>
Related examples in the same category