smallstudio
<!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>Small Studio</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type='text/css'>
/* Small Studio Template
I'm sorry for non-english variables,
but I think you'll manage */
body {
margin: 0 auto;
padding: 0;
font-family: Arial, Verdana, Sans-Serif;
font-size: 0.8em;
background: #E7E7E7;
}
a {
text-decoration: none;
color: #B60400;
}
a:hover {
color: #808080;
}
a img {
border: 0;
}
h3 {
font-size: 1.3em;
margin: 0 0 5px 0;
padding: 2px 0px 0px 0px;
border-bottom: 2px solid #eee;
}
.blue {
color: #286ea0;
}
#bg {
width: 760px;
margin: 0 auto;
height: 580px;
padding: 6px 10px 0px 10px;
background: url(bg.gif) no-repeat;
}
#sadrzaj {
padding: 9px 4px 0 2px;
color: #303030;
width: 736px;
}
#zaglavlje {
clear: both;
text-align: right;
padding: 20px 15px 0 0;
margin: 0px 0 3px 0;
height: 40px;
border-bottom: 2px solid #eee;
background: #FFF url(fade.gif) repeat-x;
color: #808080;
}
#title {
float: left;
font-size: 14pt;
font-weight: bold;
padding: 0 0 0 10px;
}
#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;
border-right: 2px solid #ccc;
}
#navigacija li {
margin-bottom: 4px;
padding: 0 5px 0 10px;
}
#navigacija li a {
font-size: 9pt;
font-weight: bold;
text-align: right;
height: 20px;
text-decoration: none;
color: #808080;
display: block;
padding: 6px 10px 0 10px;
background: #fff;
border-bottom: 1px dotted #ccc;
}
#navigacija li a:hover {
color: #286ea0;
}
.lijevo {
margin: 9px 0 10px 0;
padding: 3px 10px 5px 10px;
width: 130px;
color: #6B6B6B;
line-height: 1.6em;
}
.lijevo a {
text-decoration: underline;
}
.lijevo p {
margin: 0;
}
#infobox {
border: 1px solid #ccc;
background: #f4f4f4;
padding: 3px;
margin-top: 5px;
}
.desna_rubrika {
float: right;
width: 273px;
margin: 0 0 10px 0;
padding: 5px 13px 20px 10px;
border-left: 1px solid #DDD;
color: #5D5D5D;
line-height: 1.5em;
}
.desna_rubrika p {
margin: 0px;
font-size: 90%;
}
.desna_rubrika a {
display: block;
padding-bottom: 4px;
margin-bottom: 2px;
border-bottom: 1px dotted #ccc;
}
#pic {
margin: 0 0 5px 155px;
padding: 0px 10px 5px 6px;
line-height: 1.4em;
background: url(pic.jpg) repeat-x;
height: 146px;
}
#pic h2 {
margin: 0px;
padding: 15px 0 2px 5px;
font-size: 12pt;
color: #3A6794;
}
#pic p {
margin: 0;
padding: 0 0 0 5px;
color: #5488BC;
width: 260px;
}
.lijeva_rubrika {
margin: 0 300px 20px 150px;
padding: 5px 10px 5px 10px;
line-height: 1.6em;
text-align: left;
color: #5D5D5D;
border-left: 2px solid #eee;
}
.lijeva_rubrika a, #lijeva_rubrika a:visited {
text-decoration: underline;
}
.lijeva_rubrika p {
padding: 0;
margin: 0;
}
#downbox {
margin: 15px 10px 15px 10px;
border: 1px solid #819CD7;
background: #CDE1F9;
}
#downbox p {
padding: 6px;
margin: 0;
}
#footer {
clear: both;
color: #808080;
background: #FFF;
font-size: 0.8em;
text-align: right;
padding: 9px 10px 9px 0;
margin: 10px 5px 10px 5px;
border: 1px solid #ccc;
}
#footer a {
text-decoration: underline;
color: #3A6794;
}
#footer a:hover {
color: #000;
}
</style>
</head>
<body>
<div id="bg">
<div id="sadrzaj">
<div id="zaglavlje">
<div id="title"> <a href="http://www.free-css.com/">Small Studio</a> > <span class="blue">Web Design</span> </div>
<form action="search" />
Search our site:
<input name="query" type="text" size="15" />
<input type="submit" value="Go" name="search" class="button" />
</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/">catalog</a></li>
</ul>
<div class="lijevo">
<h3>Text filler</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoree. Lorem Ipsum strikes one again!</p>
<div id="infobox"> Just some small text describing the article </div>
</div>
</div>
<div id="pic">
<h2>About Small Studio</h2>
<p>Once again, you are free to use this template in any way you desire. If you like it, use it, sell it, make a fortune with it, I'll be happy. I did the picture on the right, so you can use that as well. </p>
</div>
<div class="desna_rubrika">
<h3>Recent articles</h3>
<p> <a href="http://www.free-css.com/"><img src="smallstudio-images/strelica2.gif" width="6px" height="5px" alt="" /> Tutorial on developing Content Management Systems</a> <a href="http://www.free-css.com/"><img src="smallstudio-images/strelica2.gif" width="6px" height="5px" alt="" /> What is Open Source Web Design?</a> <a href="http://www.free-css.com/"><img src="smallstudio-images/strelica2.gif" width="6px" height="5px" alt="" /> 10 Tips and Tricks on browser compatibility</a> <a href="http://www.free-css.com/"><img src="smallstudio-images/strelica2.gif" width="6px" height="5px" alt="" /> Where and when should the tables be used?</a> <a href="http://www.free-css.com/"><img src="smallstudio-images/strelica2.gif" width="6px" height="5px" alt="" /> CSS coding techniques and color usage hints</a> <a href="http://www.free-css.com/"><img src="smallstudio-images/strelica2.gif" width="6px" height="5px" alt="" /> Are you a Web Designer? Money isn't everything!</a> <a href="http://www.free-css.com/"><img src="smallstudio-images/strelica2.gif" width="6px" height="5px" alt="" /> Conducting a two-day CMS survey</a> </p>
</div>
<div class="lijeva_rubrika">
<h3>Another text filler</h3>
<p> 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. <a href="http://www.free-css.com/">aliquam erat volutpat</a>. Ut wisi enim ad minim veniam.</p>
</div>
<div id="downbox">
<p>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.</p>
</div>
<div id="footer"> Copyright © 2005 <a href="http://www.free-css.com/">YourCompany.com</a> > Designed by <a href="http://www.solucija.com">Solucija.com</a> | Validate > <a href="http://validator.w3.org/check?uri=referer">XHTML 1.0 Strict!</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> </div>
</div>
</div>
</body>
</html>
Related examples in the same category