openyourwindows
<!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>Open your windows!</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type='text/css'>
/*
author: Luka Cvrk (www.solucija.com)
project: Open Source Web Design contest, Theme: Fall (Autumn)
*/
/* {START CSS BARBECUE} */
body {
margin: 0px;
padding: 0px;
font-size: 70%;
font-family: "Arial", Tahoma, Sans-Serif;
background: #353F49;
color: #000;
}
/* LINKS */
a {
color: #768C00;
text-decoration: none;
background-color: inherit;
}
a:hover {
color: #000;
background-color: inherit;
}
/* HEADINGS */
h1 {
padding: 0px 0px 22px 0px;
font-size: 1.4em;
}
h2 {
font-size: 1.2em;
margin: 0px;
}
h3 {
width: 100%;
font-size: 1.5em;
color: #404240;
font-weight: bold;
letter-spacing: -1px;
line-height: 1.5em;
padding: 0px 0px 0px 30px;
background-color: inherit;
background-image: url("titlebg.gif");
background-repeat: no-repeat;
background-position: center left;
}
.red {
color: #8B1714;
background-color: inherit;
}
/* PARAGRAPH */
p {
font-size: 1em;
color: #353F49;
line-height:1.6em;
margin: 0px 0px 5px 0px;
padding: 0px;
background-color: inherit;
}
/*-------------------------
DIVS IN ORDER OF APPEARANCE
-------------------------*/
/* WRAP, HOLDS EVERYTHING TOGETHER */
#wrap {
margin: 0px auto;
padding: 0px;
width: 691px;
}
#container {
float: left;
margin: 0px;
padding: 0px;
width: 780px;
background: url("middle.gif") repeat-y top left;
}
#top {
width: 700px;
height: 25px;
margin: 0px;
padding: 0px;
background: url("top.gif") no-repeat top left;
}
#header {
margin: 0px;
padding: 55px 0 0 100px;
background-color: inherit;
background-image: url("header.gif");
background-repeat: no-repeat;
height: 70px;
color: #919FAE;
font-weight: bold;
font-size: 1.3em;
}
/* HORIZONTAL MENU */
#hmenu {
margin: 0 96px 0 15px;
padding: 10px 0 20px 0;
background: #ffffff url("hmenu.gif") repeat-x top left;
color: #808080;
}
#hmenu a {
color: #74879A;
margin: 0px 3px 0px 8px;
padding: 0 0px 0 9px;
background-color: transparent;
background-image: url("arrow.gif");
background-repeat: no-repeat;
background-position: center left;
}
#hmenu a:hover {
color: #F0F2F4;
background-color: transparent;
}
/* LEFT COLUMN */
#left_column {
float: left;
margin: 0px 0px 0px 18px;
width: 160px;
}
#left_column p {
color: #828482;
padding: 7px;
margin: 0px;
background-color: inherit;
}
/* MAIN MENU (LEFT) */
#menu {
}
#menu a {
display: block;
line-height: 20px;
padding: 0px 0px 0px 4px;
color: #353F49;
background: #FFFFFF;
}
#menu a:hover {
background: #353F49;
color: #FFF;
}
/* LINK TITLE - visible on hover */
.underline {
border-bottom: 1px dotted #74879A;
}
.white {
color: #FFF;
font-size: 0.8em;
background-color: inherit;
background: url("menudivider.gif");
background-repeat: no-repeat;
background-position: center left;
padding: 0px 0px 0px 8px;
}
#right_column {
float: left;
width: 505px;
margin: 0px 15px 0px 0px;
padding: 0px;
}
/* MAIN ARTICLES */
.main_article {
margin: 0px 0px 2px 0px;
padding: 0px 30px 8px 0px;
}
.main_article p {
padding: 3px 8px 0px 4px;
}
/* THE FOLLOWING SHORT ARTICLES */
.other {
margin: 0px 0px 0px 0px;
}
.other p {
padding: 5px;
color: #808080;
background-color: inherit;
}
/* LEFT SHORT ARTICLE */
.left {
width: 44%;
float: left;
background: #eee url("greybg.gif") repeat-x top left;
padding: 5px;
color: #808080;
}
/* RIGHT SHORT ARTICLE */
.right {
float: left;
width: 44%;
background: #FDF7DF url("yellowbg.gif") repeat-x top left;
border-left: 2px solid #FFF;
padding: 5px;
color: #808080;
}
/* FOOTER */
#footer {
float: left;
margin: 0px 0px 20px 0px;
padding: 15px 0px 0px 0px;
width: 691px;
background-color: inherit;
background-image: url("bottom.gif");
background-repeat: no-repeat;
text-align: center;
color: #919FAE;
}
#footer a {
color: #BDC6CE;
background-color: inherit;
border-bottom: 1px dotted #919FAE;
}
/* {END BARBECUE} */
</style>
</head>
<body>
<div id="wrap">
<div id="container">
<div id="header">
<p>Open your <span class="red">windows</span>!</p>
</div>
<div id="hmenu"> <a href="http://www.free-css.com/">Home</a> <a href="http://www.free-css.com/">Overview</a> <a href="http://www.free-css.com/">Choose season</a> <a href="http://www.free-css.com/">Gallery</a> <a href="http://www.free-css.com/">Partners</a> <a href="http://www.free-css.com/">About us</a> <a href="http://www.free-css.com/">Contact</a> </div>
<div id="left_column">
<div id="menu"> <a href="http://www.free-css.com/" accesskey="h" title="Accesskey: H"><span class="underline">H</span>OME<span class="white">Go to homepage</span></a> <a href="http://www.free-css.com/" accesskey="n" title="Accesskey: N"><span class="underline">N</span>EWSFLASH<span class="white">Fresh news</span></a> <a href="http://www.free-css.com/" accesskey="p" title="Accesskey: P"><span class="underline">P</span>ORTFOLIO<span class="white">Recent work</span></a> <a href="http://www.free-css.com/" accesskey="s" title="Accesskey: S"><span class="underline">S</span>EASONS<span class="white">Other seasons</span></a> <a href="http://www.free-css.com/" accesskey="a" title="Accesskey: A"><span class="underline">A</span>BOUT<span class="white">Who are we?</span></a> <a href="http://www.free-css.com/" accesskey="c" title="Accesskey: C"><span class="underline">C</span>ONTACT<span class="white">Get in touch!</span></a> </div>
<p>Every menu item has it's <b>accesskey</b> which is underlined and you can access it by pressing <b>ALT+character</b> (CTRL+character on Mac). </p>
<p>Hovering over the menu items reveals it's short description.</p>
<p><br />
<b>Important links:</b></p>
<p><a href="http://www.free-css.com/">My OSWD showcase</a><br />
<a href="http://www.free-css.com/">Andreas Viklund</a><br />
<a href="http://www.free-css.com/">Solucija</a><br />
<a href="http://www.free-css.com/">Try sNews live!</a></p>
</div>
<div id="right_column">
<div class="main_article">
<h3>Look, the trees are changing <span class="red">colors!</span></h3>
<p>This template is a project submitted to Open Source Web Design's contest, this time the theme is fall (Autumn). The image at the top simbolizes <b>open windows</b> and lets the nature touch you, just an exploration of how does a top image with slightly exceeded boundaries "opens" the whole page. Usually, I'm a big fan of <b>simplicity</b>, if I could, I would just put black letters on a white background :) However, this image-heavy template is a great practice though. Once again, you are free to use it and abuse it, wrap it up and give it as a gift :) If you grill this template on the <b>barbecue</b>, you can serve it to your guests as a main course :)</p>
<h3><span class="red">General</span> information</h3>
<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 <b>ullamcorper</b> suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui <b>blandit</b> praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div class="other">
<div class="left">
<h2>Just a text filler</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 <b>ullamcorper</b> suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui <b>blandit</b> praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div class="right">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, <b>consectetuer</b> 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. <b>Duis autem</b> vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
</div>
</div>
<div id="footer"> © 2005, <a href="http://www.free-css.com/">YourSeason.com</a>, Design: <a href="http://www.free-css.com/">Luka Cvrk</a>, <a href="http://www.solucija.com/">Solucija</a>, <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a> barbecue. </div>
</div>
</body>
</html>
Related examples in the same category