grotesqueart
<!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">
<head>
<title>Grotesque Art</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* CSS Document by Dieter Schneider | www.csstemplateheaven.com */
* {margin: 0;
padding: 0;}
body {
background-color: #FFFFFF;
font-family: Georgia, "Times New Roman", Times, serif;
background-image: url(grotesqueart-images/body_bg.jpg);
background-repeat: repeat;
text-align:center;
background-attachment: fixed;
}
#container {
width: 800px;
margin:0px auto;
background-color: #FFFFFF;
font-size: 0.8em;
border: 1px solid #75778E;
text-align:left;
padding: 0px 20px 1px;
background-image: url(grotesqueart-images/container_tile.gif);
background-repeat: repeat-y;
}
#header {
text-align: right;
background-image: url(grotesqueart-images/header_bg.jpg);
background-repeat: no-repeat;
height: 162px;
padding: 7px;
color: #FFFFFF;
border: 1px solid white;
}
#subheader {
background-image: url(grotesqueart-images/subheader_bg.jpg);
background-repeat: repeat-x;
height: 29px;
border-left: 1px solid white;
border-right: 1px solid white;
}
#important_box {
margin-bottom: 15px;
padding: 10px;
border: 1px dotted #999999;
}
#right {
float: right;
width: 220px;
clear: both;
margin-right: 8px;
}
.rightboxes {
border: 1px solid #CCCCCC;
margin-bottom: 15px;
padding: 5px;
background-color: #FFFFFF;
overflow: hidden;
}
#content {
padding: 20px;
padding-top: 0px;
margin-right: 245px;
margin-left: 8px;
background-color: #FFFFFF;
margin-top: 20px;
}
.pubdate {
font-size: 0.8em;
color: #999999;
padding: 3px;
}
#footer {
clear: both;
background-color: #474C52;
color: #FFFFFF;
text-align: center;
font-size: 0.9em;
padding: 2px;
margin-top: 20px;
margin-right: 1px;
margin-left: 1px;
background-image: url(grotesqueart-images/linkbar_bg.jpg);
background-repeat: repeat-x;
background-position: center;
}
p {
margin-top: 15px;
margin-bottom: 15px;
padding: 5px;
}
img {
border: none;
}
.pressingress {
color: #CC0000;
}
h1 {
font-size: 1.8em;
color: #FFFFFF;
clear: left;
margin-top: 135px;
margin-right: 5px;
font-family: "Times New Roman", Times, serif;
font-style: italic;
text-align: right;
}
h2 {
margin-top: 15px;
margin-bottom: 15px;
font-size: 1em;
padding: 5px;
color: #990000;
border: 1px dotted #CCCCCC;
background-color: #F3F3F3;
clear: left;
}
h3 {
font-size: 1.5em;
color: #798196;
clear: left;
font-style: italic;
}
h4{
font-size: 1em;
font-weight: bold;
background-color: #F3F3F3;
padding: 5px;
margin-bottom: 15px;
color: #798196;
border: 1px dotted #646675;
}
.floatleft {
float: left;
margin-right: 10px;
margin-bottom: 5px;
}
a:link {
color: #676D79;
text-decoration: none;
}
a:visited {
color: #676D79;
text-decoration: none;
}
a:hover {
color: #820606;
text-decoration: underline;
}
a:active {
color: #890000;
text-decoration: none;
}
/********** Top navigation *************/
#navlist
{
height: 2.6em!important;
height: 2.7em;
margin-top: 0px;
padding: 1.7em 0em 0.3em 0.4em;
background-repeat: repeat-x;
background-color: #FFFFFF;
margin-bottom: 1px;
background-image: url(grotesqueart-images/linkbar_bg.jpg);
border-left: 1px solid white;
border-right: 1px solid white;
}
#navlist a, #navlist a:link, #navlist a:visited
{
padding: 1.2em;
padding-left: 0.7em;
padding-right: 0.7em;
color: #CCCCCC;
text-decoration: none;
}
#navlist a:hover, #navlist a:active, #navlist a:focus
{
padding: 1.1em;
padding-left: 0.7em;
padding-right: 0.7em;
text-decoration: none;
color: #FFFFFF;
}
#navlist li
{
padding-right: 1px;
display: inline;
font-size: 1em;
}
#navlist #active a {
background-color: #CDCDB3;
color: #000000;
font-size: 1em;
font-weight: bold;
}
/* =-=-=-=-=-=-=-[Menu right side]-=-=-=-=-=-=-=- */
#menu {
border: 1px solid #D3D4D6;
}
#menu li a {
height: 2em;
voice-family: "\"}\"";
voice-family: inherit;
text-decoration: none;
border-bottom: 1px solid #FFFFFF
}
#menu li a:link, #menu li a:visited {
color: #FFFFFF;
display: block;
background: #474C52 url(grotesqueart-images/linkbar_bg.jpg) repeat-x center;
padding: 5px 0 3px 10px;
}
#menu li a:hover {
color: #000000;
background: #f4e1be;
padding: 5px 0 3px 10px;
}
#menu li a:active {
color: #fff;
background: #646675;
padding: 5px 0 3px 10px;
}
#nolistbullet {list-style-type: none;}
/**************************************** Contact form ****************************/
form.contact_us {
width: 180px;
margin-top: 0px;
margin-left: 9px;
padding: 0px;
}
input.fields_contact_us {display: block;
width: 180px;
background: url(grotesqueart-images/input_bg.png);
border-top: 1px solid #C4D2E2;
border-left: 1px solid #C4D2E2;
border-bottom: 1px solid #E3E4E9;
border-right: 1px solid #E3E4E9;
margin-top: 3px;
margin-bottom: 3px;}
textarea {width: 180px;
background: url(grotesqueart-images/input_bg.png);
border-top: 1px solid #C4D2E2;
border-left: 1px solid #C4D2E2;
border-bottom: 1px solid #E3E4E9;
border-right: 1px solid #E3E4E9;
display: block;
margin-top: 3px;}
.submit_button_contact {
margin-top: 15px;
margin-left: 128px;
padding: 2px;
background-color: #F2F3F7;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Grotesque Art</h1>
</div>
<ul id="navlist">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Community</a></li>
<li><a href="http://www.free-css.com/">Webshop</a></li>
<li><a href="http://www.free-css.com/">Classic art</a></li>
<li><a href="http://www.free-css.com/">Sitemap</a></li>
</ul>
<div id="subheader"></div>
<div id="right">
<div class="rightboxes">
<div id="menu">
<ul id="nolistbullet">
<li><a href="#1" title="Contact">More links</a></li>
<li><a href="#2" title="About">About</a></li>
<li><a href="#3" title="Services">Services</a></li>
<li><a href="#4" title="Portfolio">Portfolio</a></li>
</ul>
</div>
</div>
<div class="rightboxes">
<h4>Contact us</h4>
<form id="form1" method="post" class="contact_us" action="#">
<p>
<label>Name
<input type="text" class="fields_contact_us" name="textfield" />
</label>
<label>E-mail
<input type="text" class="fields_contact_us" name="textfield1" />
</label>
<label> Your question:
<textarea name="textarea" cols="" rows=""></textarea>
</label>
<label>
<input type="submit" class="submit_button_contact" name="Submit1" value="Submit" />
</label>
</p>
</form>
</div>
<div class="rightboxes">
<h4>Another h4 heading</h4>
<p> <img src="grotesqueart-images/demo_image.jpg" alt="Demo image" width="84" height="93" class="floatleft" />Quisque nisl elit, pretium ut, feugiat a, dapibus dignissim, sapien. Aenean cursus molestie leo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras mollis, enim in scelerisque accumsan, diam massa consequat nibh, ut interdum augue ipsum vel ipsum. Quisque eu ligula. Integer justo. Aliquam erat volutpat. Aliquam eget orci eget lectus malesuada porta. Pellentesque a metus. In dapibus mollis nisl. Morbi vitae turpis in est commodo hendrerit. Phasellus id dolor. Maecenas bibendum nisl at felis. Donec eleifend aliquet leo. Aliquam tincidunt varius massa. Vivamus vel ante vel dui sollicitudin faucibus. </p>
</div>
</div>
<div id="content">
<h2>About this template <span class="pubdate">01.23.2007</span></h2>
<p><img src="grotesqueart-images/demo_image.jpg" alt="Demo image" width="84" height="93" class="floatleft" />This template is tested in the latest versions of IE, FF and Opera. I kindly ask you to not remove the footer link if you have the free version of this template.</p>
<p> ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lacus odio, ullamcorper sed, eleifend at, venenatis id, lacus. Nullam iaculis metus vitae sem sodales nonummy. Cras risus lorem, accumsan eu, condimentum a, imperdiet a, nisi. Nam lorem. Pellentesque justo ligula, tincidunt sed, volutpat vel, consectetuer quis, erat. Integer commodo lectus sed nisi. Sed interdum quam ut nisl. Maecenas dignissim velit nec metus. Duis ipsum nibh, pharetra ut, viverra a,Lorem ips </p>
<div id="important_box">
<h3><img src="grotesqueart-images/exclamation_mark.gif" alt="Important!" width="30" height="22" />Important info </h3>
<p class="pressingress">Quisque nisl elit, pretium ut, feugiat a, dapibus dignissim, sapien. Aenean cursus molestie leo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras mollis, enim in scelerisque accumsan, diam massa consequat nibh, ut interdum augue ipsum vel ipsum. Quisque eu ligula. Integer justo. Aliquam erat volutpat.</p>
<img src="grotesqueart-images/article_bullet.png" alt="Pressemelding" width="12" height="12" /> <a href="http://www.free-css.com/">Download document</a> </div>
<h2>Another heading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id ipsum. Quisque a neque. Morbi eleifend, sem eget nonummy facilisis, lectus tellus consectetuer lectus, ac facilisis nisi ante eget mi. Mauris pede mi, ultricies et, condimentum a, interdum id, risus. Nullam tincidunt nisl et metus. Vestibulum dignissim justo sagittis libero. Nam aliquet mattis pede. Vivamus arcu. Nulla urna. Mauris justo est, luctus a, aliquam lobortis, dignissim a, mi. Duis id nisl vitae purus blandit molestie. Aenean aliquet pellentesque elit. Nam lacinia, dolor sed tristique ornare, erat sapien convallis massa, vitae interdum nunc mi ut mi. Ut nibh. Mauris nonummy. In posuere. Integer iaculis facilisis nulla. Donec interdum erat non neque.</p>
<h2>The third heading</h2>
<p> Quisque nisl elit, pretium ut, feugiat a, dapibus dignissim, sapien. Aenean cursus molestie leo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras mollis, enim in scelerisque accumsan, diam massa consequat nibh, ut interdum augue ipsum vel ipsum. Quisque eu ligula. Integer justo. Aliquam erat volutpat. Aliquam eget orci eget lectus malesuada porta. Pellentesque a metus. In dapibus mollis nisl. Morbi vitae turpis in est commodo hendrerit. Phasellus id dolor. Maecenas bibendum nisl at felis. Donec eleifend aliquet leo. Aliquam tincidunt varius massa. Vivamus vel ante vel dui sollicitudin faucibus. </p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Phasellus magna. Etiam suscipit odio eu nisi. In hac habitasse platea dictumst. Aliquam ac ipsum ut metus fermentum molestie. Fusce id arcu. Vivamus sem. Suspendisse ut nibh eu sem gravida volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla lorem risus, scelerisque quis, adipiscing at, pharetra ut, mi. Fusce quis turpis non velit vehicula bibendum. Fusce purus lorem, nonummy nec, vestibulum a, mattis sit amet, nulla. Ut vitae massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<p>Quisque nec neque. Duis facilisis. Aliquam et felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse leo pede, gravida vel, gravida vel, ornare id, lectus. Nam lorem eros, ultrices eget, luctus sed, viverra eget, odio. Cras eu mauris. Vivamus facilisis ante at est. Suspendisse magna. Aenean eu sapien eget est faucibus commodo. Sed vulputate condimentum lacus. Aliquam nunc nisi, condimentum sed, sodales scelerisque, molestie faucibus, nibh. </p>
</div>
<div id="footer">
<p>Created by Dieter Schneider 2007 | <a href="http://www.csstemplateheaven.com">CssTemplateHeaven</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category