Green_dream
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- metatagy -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="Description" content="Description" />
<meta name="Keywords" content="keywords" />
<meta name="robots" content="all, follow"/>
<meta name="author" content="baryman" />
<!-- titulek strnky -->
<title>Green dream - free template</title>
<!-- styly css a cesty k nim -->
<style type='text/css'>
/* CSS Document */
/* formA?tovA?nA odkazLZ */
a {text-decoration: none}
a:link {color: white}
a:visited {color: white}
a:active {color: black}
a:hover {color: red}
body {
padding: 20px 0;
*padding: 13px 0;
font: 80%/170% verdana, sans-serif;
text-align: center; /* vycentrovA?no pro Internet Explorer */
background-color: #274383;
background-image: url(pozadi1.png);
background-repeat: repeat-x;
}
#main {
width: 800px; /* celkovA? L?ALka */
border-left: 5px solid #ccc;
border-right: 5px solid #ccc;
border-bottom: 5px solid #ccc;
margin-left: auto;
margin-right: auto;
text-align: left;
background-color: #272727;
}
#hlavicka-null {
width: 100%;
padding: 0;
border: 0;
}
#hlavicka {
padding: 10px;
height: 120px;
width: 790px;
margin-left: auto;
margin-right: auto;
text-align: left;
border-bottom: 5px solid #7ae12f;
}
#menu-null {
width: 100%;
padding: 0;
border: 0;
}
#menu {
padding: 5px;
border-bottom: 5px solid #3071a2;
border-left: 5px solid #3071a2;
border-right: 5px solid #3071a2;
background: #368ed2;
width: 790px;
margin-left: auto;
margin-right: auto;
text-align: right;
color: #ffffff;
}
#vpravo-null {
width: 600px;
float: right;
padding: 0;
border: 0;
}
#vpravo {
padding: 10px;
border-left: 5px solid #ccc;
background-color: #ffffff;
}
#vlevo-null {
width: 200px;
float: left;
padding: 0;
border: 0;
background: #272727;
}
#vlevo {
padding: 0px;
background-color: #272727;
}
#paticka-null {
clear: both;
width: 100%;
padding: 0;
border: 0;
}
#paticka {
padding: 5px;
border-top: 5px solid #ccc;
background: #272727;
text-align: right;
padding-right: 20px;
color: #ffffff;
font-size: 90%;
}
.noscreen {
display: none
}
/* KONKRATNA STYLY */
#hlavicka h1 {
margin-top: 50px;
margin-left: 50px;
font-size: 250%;
color: #fff;
}
#hlavicka h3 {
margin-left: 50px;
font-size: 100%;
color: #fff;
}
a.menu-hl {
display: block;
background-color: #272727;
padding: 4px;
border-bottom: 1px #ababab solid;
color: #ffffff;
padding: 4px;
padding-left: 25px;
background: url('sipky.gif') 0 50% no-repeat;
}
a.menu-hl:hover {
display: block;
background-color: #3d3d3d;
border-bottom: 1px #ababab solid;
color: #ffffff;
}
.nadpis {
display: block;
background-color: #368ed2;
padding: 0px;
border-bottom: 5px #3071a2 solid;
border-top: 5px #3071a2 solid;
color: #ffffff;
font-weight: bold;
padding-left: 10px;
}
.novinky-datum {
color: #818181;
padding: 10px;
font-size: 90%;
}
#novinky1 {
color: #c0c0c0;
padding: 6px;
border-bottom: 1px dashed #a8a8a8;
font-size: 90%;
line-height: normal;
}
#novinky2 {
color: #c0c0c0;
padding: 6px;
border-bottom: 1px dashed #a8a8a8;
font-size: 90%;
line-height: normal;
}
#novinky3 {
color: #c0c0c0;
padding: 6px;
border-bottom: 1px dashed #a8a8a8;
font-size: 90%;
line-height: normal;
}
a.menu-odkaz {
color: #ffffff;
}
a.menu-odkaz:hover {
color: #272727;
}
.clanek {
color: #272727;
border-bottom: 1px dashed #272727;
}
.clanek-text {
color: #272727;
}
.clanek-nadpis {
color: #3071a2;
font-size: 150%;
}
.clanek-info {
color: #8d8d8d;
font-size: 80%;
text-align: right;
}
</style>
</head>
<body>
<div id="hlavicka-null">
<div id="hlavicka">
<h1><a href="#">Green dream</a></h1>
<h3>free template</h3>
</div>
</div>
<div id="menu-null">
<div id="menu">
|
<a href="#" class="menu-odkaz">Homepage</a> |
<a href="#" class="menu-odkaz">News</a> |
<a href="#" class="menu-odkaz">Forum</a> |
</div>
</div>
<div id="main">
<hr class="noscreen" />
<div id="vpravo-null">
<!-- OBSAH -->
<div id="vpravo">
<!-- TADY ZACINA CLANEK -->
<div class="clanek">
<div class="clanek-nadpis">Your title</div>
<p class="clanek-text">
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
</p>
<p class="clanek-info">20.7.2009 | wrote : admin | </p>
</div>
<p></p>
<!-- TADY KONCI CLANEK -->
<!-- TADY ZACINA CLANEK -->
<div class="clanek">
<div class="clanek-nadpis">Your title</div>
<p class="clanek-text">
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
</p>
<ul>
<li>quis nostrum</li>
<li>corporis</li>
<li>nisi ut aliquid</li>
<li>aut odit aut</li>
</ul>
<p>
Nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit.
</p>
<p class="clanek-info">20.7.2009 | wrote : admin | </p>
</div>
<p></p>
<!-- TADY KONCI CLANEK -->
<!-- TADY ZACINA CLANEK -->
<div class="clanek">
<div class="clanek-nadpis">Your title</div>
<p class="clanek-text">
Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam
</p>
<p class="clanek-info">20.7.2009 | wrote : admin | </p>
</div>
<p></p>
<!-- TADY KONCI CLANEK -->
</div>
</div>
<hr class="noscreen" />
<div id="vlevo-null">
<div id="vlevo">
<!-- ZDE ZACINA HLAVN MENU -->
<a href="#" class="menu-hl">Homepage</a>
<a href="#" class="menu-hl">News</a>
<a href="#" class="menu-hl">Calendar</a>
<a href="#" class="menu-hl">Forum</a>
<a href="#" class="menu-hl">Guestbook</a>
<!-- ZDE ZACINA MENU A-TYM -->
<div class="nadpis">
Colors
</div>
<a href="#" class="menu-hl">Green</a>
<a href="#" class="menu-hl">Blue</a>
<a href="#" class="menu-hl">Red</a>
<a href="#" class="menu-hl">Orange</a>
<a href="#" class="menu-hl">Yellow</a>
<!-- ZDE ZACINAJI NOVINKY -->
<div class="nadpis">
News
</div>
<!-- prvn novinka -->
<div id="novinky1">
<span class="novinky-datum">
18.7.2009
</span>
<p>Consequuntur magni dolores eos, qui ratione voluptatem.</p>
</div>
<!-- druh novinka -->
<div id="novinky2">
<span class="novinky-datum">
18.7.2009
</span>
<p>Neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit.</p>
</div>
<!-- tret novinka -->
<div id="novinky3">
<span class="novinky-datum">
15.7.2009
</span>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit.</p>
</div>
<!-- ZDE ZACINAJI OSTATNI -->
<div class="nadpis">
Other
</div>
<a href="http://validator.w3.org/check?uri=referer" class="menu-hl">XHTML Valid</a>
<a href="http://jigsaw.w3.org/css-validator/" class="menu-hl">CSS Valid</a>
</div>
</div>
<hr class="noscreen" />
<div id="paticka-null">
<div id="paticka">
Copyright 2009 | Design by baryman | <a href="http://www.grily-krby.cz/" title="Grily Weber">Grily</a>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category