soniatemplate
<!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="en" lang="en">
<head>
<title>Sonia Template</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type='text/css'>
/* Sonia Template */
body {
margin: 0 auto;
padding: 0;
font: 9pt Arial, Verdana, Sans-Serif;
background: #fff;
}
a {
text-decoration: none;
color: #2489DB;
}
a:hover {
color: #808080;
}
a img {
border: 0;
}
h3 {
font-size: 1.3em;
margin: 0 0 5px 0;
padding: 2px 0px 0px 0px;
}
#bg {
width: 760px;
margin: 0 auto;
padding: 5px 10px 10px 10px;
background: url(bg.gif) top left no-repeat;
}
#sadrzaj {
padding-top: 9px;
color: #303030;
width: 736px;
padding-left: 2px;
}
#toplinks {
height: 20px;
background: #2489DB;
text-align: right;
padding-right: 10px;
padding-top: 5px;
}
#toplinks a {
font-size: 8pt;
display: inline;
padding-left: 8px;
padding-right: 5px;
background: url(strelica.gif) left no-repeat;
padding-bottom: 3px;
margin-right: 5px;
color: #fff;
}
#toplinks a:hover {
border-bottom: 2px solid #fff;
}
#zaglavlje {
clear: both;
margin: 0px 0 5px 0;
height: 70px;
background: url(header.gif) repeat-x;
}
#title {
float: left;
font-size: 14pt;
font-weight: bold;
padding-top: 25px;
padding-left: 5px;
}
#title_info {
float: right;
height: auto;
padding: 8px;
width: 310px;
margin: 10px 5px 0 0;
border: 2px solid #fff;
background: #FFF5D9;
color: #808080;
}
#title_info p {
margin: 0;
}
#navigacija {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}
#navigacija ul {
list-style: none;
width: 150px;
margin: 0 0 3px 0;
padding: 0;
font-size: 1.1em;
}
#navigacija li {
margin-bottom: 4px;
}
#navigacija li a, #navigacija li a:visited {
text-align: right;
height: 20px;
text-decoration: none;
color: #fff;
display: block;
padding: 6px 8px 0 10px;
background: #2489DB;
}
#navigacija li a:hover {
background: #A9CAEB;
color: #286ea0;
}
.lijevo {
margin: 2px 0 10px 0;
padding: 3px 10px 5px 10px;
width: 130px;
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
color: #6B6B6B;
background: #eee url(lijevo.gif) repeat-x;
}
.lijevo a, .lijevo a:visited {
text-decoration: underline;
}
#desna_rubrika {
float: right;
width: 223px;
margin: 0 0 10px 0;
padding: 5px 13px 20px 10px;
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
background: #eee url(lijevo.gif) repeat-x;
color: #5D5D5D;
line-height: 1.5em;
}
#desna_rubrika p {
margin: 0px;
font-size: 90%;
}
#desna_rubrika h3 {
font-size: 9pt;
}
#desna_rubrika a {
display: block;
height: 12px;
padding-bottom: 4px;
margin-bottom: 2px;
border-bottom: 1px solid #ccc;
}
#podaci {
margin: 15px 0 0 0;
border: 2px solid #fff;
background: #E5EFF9 url(plavo.gif);
padding: 3px 3px 3px 6px;
color: #70C256;
}
#podaci a, #podaci a:visited {
display: inline;
border: none;
}
#clanci {
margin: 0 0 5px 155px;
padding: 0 10px 5px 6px;
line-height: 1.4em;
background: url(clanak.gif) repeat-x bottom left;
}
#clanci h2 {
margin: 0px;
padding: 4px 0 4px 0;
font-size: 12pt;
}
#clanci p {
margin: 0;
}
.datum {
padding-top: 2px;
height: 30px;
margin: 5px 0 6px 0;
border-top: 1px solid #eee;
font-size: 80%;
text-transform: uppercase;
color: #808080;
}
#lijeva_rubrika {
margin: 0 250px 20px 155px;
border-top: 1px solid #AFCEED;
border-bottom: 1px solid #AFCEED;
background: #E5EFF9 url(plavo.gif) repeat-x;
padding: 5px 6px 5px 6px;
line-height: 1.6em;
text-align: left;
color: #5D5D5D;
}
#lijeva_rubrika a, #lijeva_rubrika a:visited {
text-decoration: underline;
}
#lijeva_rubrika h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
color: #808080;
padding-top: 3px;
}
#lijeva_rubrika p {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="bg">
<div id="sadrzaj">
<div id="toplinks"> <a href="http://www.free-css.com/">Home</a> <a href="http://www.free-css.com/">Blog</a> <a href="http://www.free-css.com/">Forum</a> <a href="http://www.free-css.com/">Search</a> <a href="http://www.free-css.com/">Submit URL</a> <a href="http://www.free-css.com/">Login</a> </div>
<div id="zaglavlje">
<div id="title"> <a href="http://www.free-css.com/">Sonia Template</a> </div>
<div id="title_info">
<p><i>Artice of the week:</i></p>
<p><b><a href="http://www.free-css.com/">Integrating designs into Content Management Systems</a></b> </p>
</div>
</div>
<div id="navigacija">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Blog</a></li>
<li><a href="http://www.free-css.com/">Partners</a></li>
<li><a href="http://www.free-css.com/">Forum</a></li>
<li><a href="http://www.free-css.com/">Design gallery</a></li>
<li><a href="http://www.free-css.com/">Technology</a></li>
</ul>
<div class="lijevo">
<p><b>Lorem ipsum</b></p>
<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. Duis autem vel eum iriure dolor in hendrerit in vulputate.</p>
</div>
</div>
<div id="clanci">
<h2><a href="http://www.free-css.com/">About Sonia Template</a></h2>
<p> This design is a variation of the one on Solucija, a Croatian Website. It has nicely designed boxes to store various information and it's all packed up in soft colors. It has a small header box for the important links as well as the main navigation buttons. Remebmer that any CSS template could be easily implemented in sNews, a completly free PHP and MySQL driven news publishing tool. However, you are free to use this template in any way you want. No copyright notice or link back required! </p>
<p class='datum'>June, 4th 2005 <img src='soniatemplate-images/strelica2.gif' width='3px' height='5px' alt='' /> <a href='#'>READ MORE</a></p>
<h2><a href="http://www.free-css.com/">Just some text filler</a></h2>
<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. vel eum iriure dolor in hendrerit in vulputate.</p>
<p class='datum'>June, 4th 2005 <img src='soniatemplate-images/strelica2.gif' width='3px' height='5px' alt='' /> <a href='#'>READ MORE</a></p>
</div>
<div id="desna_rubrika">
<h3>Recent articles</h3>
<p> <a href="http://www.free-css.com/"><img src="soniatemplate-images/strelica2.gif" width="3px" height="5px" alt="" /> CSS retrospective</a> <a href="http://www.free-css.com/"><img src="soniatemplate-images/strelica2.gif" width="3px" height="5px" alt="" /> Open Source Web Design</a> <a href="http://www.free-css.com/"><img src="soniatemplate-images/strelica2.gif" width="3px" height="5px" alt="" /> Designing a business site</a> <a href="http://www.free-css.com/"><img src="soniatemplate-images/strelica2.gif" width="3px" height="5px" alt="" /> Creating table shaddows</a> <a href="http://www.free-css.com/"><img src="soniatemplate-images/strelica2.gif" width="3px" height="5px" alt="" /> CSS coding techniques</a> <a href="http://www.free-css.com/"><img src="soniatemplate-images/strelica2.gif" width="3px" height="5px" alt="" /> Tabless design?</a> <a href="http://www.free-css.com/"><img src="soniatemplate-images/strelica2.gif" width="3px" height="5px" alt="" /> Talking about CM systems</a> </p>
<div id="podaci">
<p>Validate> <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://validator.w3.org/check?uri=referer">XHTML 1.0 Strict!</a></p>
<p>© <a href="http://www.free-css.com/">Yoursite.com</a>> Designed by <a href="http://www.solucija.com">Luka Cvrk</a> </p>
</div>
</div>
<div id="lijeva_rubrika">
<p><b>Lorem Ipsum</b><br />
Lorem ipsum dolor sit amet, <a href="http://www.free-css.com/">consectetuer adipiscing elit</a>, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna <a href="http://www.free-css.com/">aliquam erat volutpat.</a> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna <a href="http://www.free-css.com/">aliquam erat volutpat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category