the-summer
<!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>The Summer</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('the-summer-img/bg.jpg') repeat-x;
font: 0.8em/1.5 "arial",sans-serif;
color: #303030;
text-align: center;
}
a {color:#d8165c;}
a:link {color:#d8165c;}
a:hover {color:#d8165c; text-decoration: none;}
h1, h2, h3, h4, h5, h6 { margin:15px 0 7px 0; }
h1 { font-size:200%; }
h2 { font-size:160%; font-weight: normal; color: #d8165c; }
h3 { font-size:105%; border-bottom: 1px solid #ddd; padding-bottom: 5px; margin-top: 25px; margin-bottom: 14px;}
h4 { font-size:120%; }
h5 { font-size:100%; }
#layout {
width:810px;
margin:0 auto;
text-align:left;
}
#header { padding:10px 0 0 0; position:relative; }
#logo {
position: relative;
overflow: hidden;
width: 250px; height: 108px;
font-size:250%;
margin: 0;
line-height: 108px;
text-align: center;
}
#logo a{
text-decoration: none;
color: #d8165c;
font-weight: normal;
padding: 0px 10px 7px 10px;
}
#logo span {
color: #f5a700;
}
#navigation{
position: absolute;
left: 270px;
line-height: 83px;
display: block;
height: 108px;
width: 530px;
top: 10px;
text-align: right;
font-size: 95%;
}
#navigation ul li{
display: inline;
}
#navigation li a {
font-size:120%;
color: #1b1b1b;
padding: 15px 12px;
text-decoration: none; border-left: 1px solid #eeebcd;
}
#first a {
border: none !important;
}
#navigation a:hover {
text-decoration: underline;
}
#main-box {
color: #fff;
font-size: 24px;
background: #d8165c url('the-summer-img/main-top.jpg') repeat-x;;
}
#quote {
padding: 15px;
background: url('the-summer-img/main-corner.jpg') no-repeat right bottom;
}
#main {
padding: 0 20px 0 37px
}
#content {
padding: 10px 12px;
}
#footer {
padding: 10px 0 10px 0px; margin-left: 15px;
color: #aaaaaa;
border-top: 1px solid #dadada;
}
#footer p {
margin-top: 0;
margin-bottom: 0;
}
#copyright {
float: left;
width: 300px;
}
#dont-delete-this{
margin: 0 0 0 323px;
text-align: right;
}
.thumbnail
{
float: left;
margin: 0 13px 20px 0px;
}
a img {
border: 1px solid #dadada;
}
a:hover img {
border: 1px solid #bbbbbb;
}
p { margin:10px 0 15px 0; line-height: 24px; font-size: 95%}
.content p {color: #fff; margin-top: 10px;}
table { margin:10px 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;}
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; }
dl { margin:15px 0; }
dt { font-weight:bold; }
dd { margin-left:30px; }
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;}
.light {padding: 4px 5px; background: #ac0001; text-decoration: none;} .light:hover {color: #fff;}
.noscreen { display:none; }
.clear {clear: both;}
</style>
</head>
<body>
<div id="layout">
<div id="header">
<h1 id="logo"><a href="http://www.free-css.com/"><span>The</span> Summer</a></h1>
<hr class="noscreen" />
<div id="navigation">
<ul>
<li id="first"><a href="http://www.free-css.com/">Everyone</a></li>
<li><a href="http://www.free-css.com/">Loves</a></li>
<li><a href="http://www.free-css.com/">Summer</a></li>
<li><a href="http://www.free-css.com/">Do you?</a></li>
</ul>
</div>
<hr class="noscreen" />
</div>
<div id="main">
<div id="main-box">
<div id="quote">Some people plant in the spring and leave in the summer. If you're signed up for a season, see it through. You don't have to stay for ever, but at least stay until you see it through</div>
</div>
<div id="content">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, <a href="http://www.free-css.com/">consectetur</a> adipisicing elit, sed do eiusmod tempor incidi dunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercita tion ullamco laboris nisi ut aliquip ex ea commodo. cidi dunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercita tion ullamco laboris nisi ut aliquip ex ea <a href="http://www.free-css.com/">commodo</a>. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidi dunt ut labore et dolore magna aliqua. </p>
<h3>LOREM IPSUM DOLOR SIT AMET</h3>
<div class="thumbnail"> <a href="http://www.free-css.com/"><img src="the-summer-img/sample.gif" alt="" width="130" height="95" /></a><br />
</div>
<div class="thumbnail"> <a href="http://www.free-css.com/"><img src="the-summer-img/sample.gif" alt="" width="130" height="95" /></a><br />
</div>
<div class="thumbnail"> <a href="http://www.free-css.com/"><img src="the-summer-img/sample.gif" alt="" width="130" height="95" /></a><br />
</div>
<div class="thumbnail"> <a href="http://www.free-css.com/"><img src="the-summer-img/sample.gif" alt="" width="130" height="95" /></a><br />
</div>
<div class="thumbnail"> <a href="http://www.free-css.com/"><img src="the-summer-img/sample.gif" alt="" width="130" height="95" /></a><br />
</div>
<hr class="noscreen clear" />
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, <a href="http://www.free-css.com/">consectetur</a> adipisicing elit, sed do eiusmod tempor incidi dunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercita tion ullamco laboris nisi ut aliquip ex ea commodo. cidi dunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercita tion ullamco laboris nisi ut aliquip ex ea <a href="http://www.free-css.com/">commodo</a>. </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>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidi dunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercita tion ullamco laboris nisi ut aliquip ex ea commodo. </p>
<p>Cidi dunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercita tion ullamco laboris nisi ut aliquip ex ea commodo. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidi dunt ut labore et dolore magna aliqua.</p>
</div>
<div id="footer">
<p id="copyright">© 2008 - <a href="http://www.free-css.com/">Your name</a></p>
<p id="dont-delete-this">Design by <a href="http://www.davidkohout.cz">David Kohout</a> | Our tip: <a href="http://www.junglegym.cz/uvodni-stranka.aspx" title="Detsk?ri?te Jungle Gym">Detsk?ri?te</a></p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category