strategicbusinessdesigns
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>StrategicBusinessDesigns</title>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1250">
<style type='text/css'>
body,h1,h2 {
background-color: #ffffff;
color:#666666;
font-family: arial, helvetica, sans-serif;
font-size: 8pt;
margin:0;
padding:0;
}
a:link,a:visited {color: #06c; text-decoration:none;}
a:hover {color: #f60; text-decoration:underline;}
h1,h2,h3 {font-weight:bold;}
p {margin: 0 0 10px 0; color:#666666;}
.more {
text-align: right;
margin-bottom: 20px;
text-transform: uppercase;
font-size: 10px;
}
.more a {
text-align: right;
}
input.text {
font-family:Arial,Helv,sans-serif;
font-size:11px;
color: #628BC4;
background: transparent;
border: 1px solid #ccc;
font-weight: bold;
}
input.submit {
font-family:Arial,Helv,sans-serif;
font-size:11px;
font-weight: bold;
color: #06C;
background: transparent;
border-width: 0px;
}
input.login {
font-family:Arial,Helv,sans-serif;
font-size:11px;
color: #628BC4;
background: transparent;
border: 1px solid #ccc;
font-weight: bold;
}
h2 {
margin-bottom: 7px;
font-size: 11pt;
height: 20px;
background: url(naslov.gif) no-repeat;
padding-top: 3px;
padding-left: 5px;
color: #f60;
}
h2 a, h2 a:visited {
color: #f60;
}
h2 a:hover {
color: #06c;
text-decoration: none;
}
h3 {
margin-top: 15px;
margin-bottom: 5px;
}
.tabs {
text-align: right;
padding-left: 13px;
padding-right: 30px;
font-weight: bold;
}
#container {
width: 750px;
margin: auto;
padding-left: 12px;
padding-right: 10px;
background: #FFF url(pozadina.gif) no-repeat;
color: #333;
line-height: 130%;
}
#top {
height: 50px;
background: url(logo.gif) no-repeat left bottom;
margin-bottom: 5px;
padding-top: 20px;
font-size: 15pt;
color: #06C;
}
.podnaslov {
font-size: 8pt;
padding-left: 11px;
color: #808080;
}
.poslovni {
color: #808080;
}
#left {
float: left;
width: 125px;
}
#left a, #left a:visited {
display: block;
text-decoration: none;
height: 17px;
padding-left: 3px;
padding-right: 13px;
/*border-bottom: 1px solid #ccc;*/
}
#left a:hover {
text-decoration: underline;
background: #06c;
color: #FFF;
}
#right {
padding-right: 10px;
float: right;
width: 213px;
border-bottom: 1px solid #cccccc;
text-align:justify;
}
#content {
padding-top: 6px;
margin-left: 135px;
margin-right: 230px;
padding-right: 10px;
max-width: 36em;
text-align:justify;
}
#footer {
margin-top: 8px;
margin-left: 135px;
margin-right: 240px;
padding-top:4px;
padding-bottom:4px;
color:#999999;
margin-bottom:10px;
text-align:right;
border-top: 2px solid #ccc;
}
</style>
</head>
<body>
<div id="container">
<div id="top"> <b>StrategicBusinessDesigns.com</b> <span class="podnaslov"><br>
CSS Designs & Software Development </span> </div>
<div id="left"> <a href="http://www.free-css.com/">Home</a> <a href="http://www.free-css.com/">Info</a> <a href="http://www.free-css.com/">Contact</a> <a href="http://www.free-css.com/">Support</a> <a href="http://www.free-css.com/">Our Affiliates</a> <a href="http://www.free-css.com/">Links</a> <a href="http://www.free-css.com/">About us</a> <br />
<p>This is a 3 column <b>CSS</b> design. It has two pictures, one for the central column titles, and one for the background. </p>
<a href="http://www.free-css.com/">Welcome to Our site!</a>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ultrices... </p>
<br>
<form name="#" action="a" method="get">
<p> Username: <br>
<input name="a" type="text" size="16">
<br>
Password: <br>
<input name="a" type="password" size="16">
<br>
<br>
<input name="a" type="submit" class="login" value="Login">
<input name="a" type="submit" class="login" value="Register">
</p>
</form>
<br>
<a href="http://www.free-css.com/">RSS Feed</a> <a href="http://www.free-css.com/">Submit URL</a> <a href="http://www.free-css.com/">Get Firefox!</a> </div>
<div id="right">
<form name="#" action="a" method="get">
<p> Search:
<input name="a" type="text" size="14">
<input name="a" type="submit" class="submit" value="Go">
</p>
</form>
<h3>Welcome to Our site!</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ultrices, tellus vitae accumsan sagittis, massa eros volutpat enim, a lobortis est velit a odio. Donec vel wisi. Cras sed enim sodales mi luctus semper. Aliquam hendrerit volutpat nunc. Aliquam lobortis risus vestibulum risus. Aliquam arcu tortor, pulvinar vel, aliquam quis, <b>vulputate</b> et, odio. Maecenas vel leo in nibh suscipit posuere. Sed leo tortor, semper et, accumsan eget, mattis in, sapien. Suspendisse nec nibh. Suspendisse potenti. Sed nec dui. Nam consequat porta ligula. Proin dui tellus, sodales eu, dignissim nec, semper et, dolor. Morbi bibendum faucibus leo. Etiam placerat libero vel odio. Nullam posuere dignissim mauris. Proin auctor tempus elit. </p>
<h3>Be sure to read this</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ultrices, tellus vitae accumsan sagittis, massa eros volutpat enim, a lobortis est velit a odio. Donec vel wisi. Cras sed enim sodales mi luctus semper. Aliquam hendrerit volutpat nunc. Aliquam lobortis risus vestibulum risus. Aliquam arcu tortor, pulvinar vel, aliquam quis, vulputate et, odio. Maecenas vel leo in nibh suscipit posuere. Sed leo tortor, semper et, accumsan eget, mattis in, sapien. <b>Suspendisse</b> nec nibh. Suspendisse potenti. Sed nec dui. Nam consequat porta ligula. Proin dui tellus, sodales eu, dignissim nec, semper et, dolor. Morbi bibendum faucibus leo. Etiam placerat libero vel odio. Nullam posuere dignissim mauris. Proin auctor tempus elit. </p>
</div>
<div id="content">
<p> <a class="tabs" href="http://www.free-css.com/">HOME</a> <a class="tabs" href="http://www.free-css.com/">NEWS</a> <a class="tabs" href="http://www.free-css.com/">REVIEWS</a> </p>
<h2><a href="http://www.free-css.com/">Welcome visitors!</a></h2>
<p> This is a design experiment with a 3 column layout, left column for the links, central column for the main content and the right column for the short news. The idea was to slightly emboss the page to catch the eye, and to emboss the central column as the main part of the site. I only spent a few hours designing this page, so it's expected to have it's flaws. If you wish, you can visit my site Solucija, but the page is not in English, it's in Croatian. If you like this design, you are free to use it in any way you want. </p>
<div class="more"> Posted on: 04.07.2005. | <a href="http://www.free-css.com/">Read more</a> | <a href="http://www.free-css.com/">Comment (4)</a> </div>
<h2><a href="http://www.free-css.com/">The Lorem Ipsum text strikes back!</a></h2>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ultrices, tellus vitae accumsan sagittis, massa eros volutpat enim, a lobortis est velit a odio. Donec vel wisi. Cras sed enim sodales mi luctus semper. Aliquam hendrerit volutpat nunc. Aliquam lobortis risus vestibulum risus. Aliquam arcu tortor, pulvinar vel, aliquam quis, vulputate et, odio. Maecenas vel leo in nibh suscipit posuere. Sed leo tortor, semper et, accumsan eget, mattis in, sapien. Suspendisse nec nibh. Suspendisse potenti. Sed nec dui. Nam consequat porta ligula. Proin dui tellus, sodales eu, dignissim nec, semper et, dolor. Morbi bibendum faucibus leo. Etiam placerat libero vel odio. Nullam posuere dignissim mauris. Proin auctor tempus elit. </p>
<div class="more"> Posted on: 26.06.2005. | <a href="http://www.free-css.com/">Read more</a> | <a href="http://www.free-css.com/">Comment (10)</a> </div>
<h2><a href="http://www.free-css.com/">Lorem Ipsum</a></h2>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ultrices, tellus vitae accumsan sagittis, massa eros volutpat enim, a lobortis est velit a odio. Donec vel wisi. Cras sed enim sodales mi luctus semper. Aliquam hendrerit volutpat nunc. Aliquam lobortis risus vestibulum risus. Aliquam arcu tortor, pulvinar vel, aliquam quis, vulputate et, odio. Maecenas vel leo in nibh suscipit posuere. Sed leo tortor, semper et, accumsan eget, mattis in, sapien. Suspendisse nec nibh. Suspendisse potenti. Sed nec dui. Nam consequat porta ligula. Proin dui tellus, sodales eu, dignissim nec, semper et, dolor. Morbi bibendum faucibus leo. Etiam placerat libero vel odio. Nullam posuere dignissim mauris. Proin auctor tempus elit. </p>
<div class="more"> Posted on: 20.06.2005. | <a href="http://www.free-css.com/">Read more</a> | <a href="http://www.free-css.com/">Comment (16)</a> </div>
</div>
<div id='footer'> © 2005. <a href="http://www.free-css.com/">Home</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer"> Validate CSS</a> | <a href="http://validator.w3.org/check?uri=referer">Valid HTML 4.01!</a> <br>
Designed by <a href="http://www.solucija.com/"><b>Luka Cvrk</b></a> | contact <a href="http://www.free-css.com/">Email</a>. </div>
</div>
</body>
</html>
Related examples in the same category