artdesign : Art « Templates « HTML / CSS

artdesign
    

?<!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>Art Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
@charset "utf-8";
/* @group Reset */
html,body {
background:#fff;
margin:0;
padding:0;
}

* {
  margin:0;
  padding:0;
  color: #9FA11D;
  border-bottom-style: none;
}

body {
font-family:"trebuchet ms", "Lucida Sans Unicode", "LucidaGrande", Verdana, Sans-serif;
font-size:98%;
color:#333;
text-align:left;
background-image: url(artdesign-images/bg_header.jpg);
background-repeat: no-repeat;
background-position: center top;
}

a img {
border:none;
}

#extra h2 {
color:#46525E;
font-size:1.1em;
font-family:"Lucida Sans Unicode", "LucidaGrande", Verdana, Sans-serif;
padding:6px 0 5px 21px;
}

#content p,#extra p,#body2 p {
color:#444;
font-size:0.8em;
line-height:1.8;
padding:0 25px 10px 21px;
}

#extra p {
padding:5px 25px 15px 21px;
}

#extra {
  float:right;
  width:315px;
}

#body2 {
width:890px;
color:#444;
background:#fff;
margin:0 auto;
}

#content h1,#body2 h1,#body2 h2 {
color:#46525E;
background:transparent;
font-size:1.1em;
font-family:"Lucida Sans Unicode", "LucidaGrande", Verdana, Sans-serif;
padding:6px 0 14px 21px;
}

#content .img {
border:1px solid #ddd;
margin:0 8px 5px 21px;
padding:3px;
}

#content .leftimg,#body2 .leftimg {
float:left;
background-color:#E5E5E5;
margin:0 8px 0 21px;
padding:4px;
}

#content a:hover .leftimg,#body2 a:hover .leftimg {
float:left;
background-color:#FF9900;
margin:0 8px 0 21px;
padding:4px;
}

#extra .rightimg {
  float:left;
  background-color:#FFF;
  margin:0 8px 0 0;
  padding:4px;
  border: 1px solid #DDDCE1;
}

#extra a:hover .rightimg {
float:left;
background-color:#DDD;
margin:0 8px 0 0;
padding:4px;
}

#extra .blocimg {
background-color:#E5E5E5;
margin:0 8px 0 0;
padding:4px;
}

#body ul li {
line-height:1.5em;
font-size:.8em;
color:#444;
margin:0 25px 0 60px;
padding:0;
}
#content ul li {
line-height:1.5em;
font-size:0.8em;
color:#444;
margin:0 25px 10px 30px;
}

h1 {
letter-spacing:-1px;
font-size:30px;
}

h2 {
font-size:24px;
color:#B94244;
}

h3 {
font-size:13px;
color:#292929;
}

a {
text-decoration:none;
background-color:#FFF;
color:red;
}

a:link {
color:#8BA11D;
}

a:visited {
color:red;
background-color:#FFF;
}

a:hover {
color:#333;
background-color:transparent;
text-decoration:none;
}

p,ul,ol {
  margin-bottom:2em;
  text-align:justify;
  line-height:200%;
}

img {
border:none;
}

.tn img {
border:8px solid #F5F5F5;
}

hr {
display:none;
}

/* Logo */
#logo {
width:890px;
height:147px;
margin:0 auto;
}

#logo h1 {
float:left;
height:54px;
font-size:38px;
font-weight:400;
letter-spacing:-2px;
padding:0 37px 0 0;
}

#logo h2 {
  float:left;
  text-transform:lowercase;
  font-weight:400;
  font-size:16px;
  color:#333;
  height:135px;
  width:460px;
  padding:10px 0 0;
}

#logo a {
text-decoration:none;
color:#333;
}

/* Menu */
#menu {
width:919px;
height:60px;
margin:0 auto;
}

#menu ul {
list-style:none;
line-height:normal;
margin:0;
padding:10px 0 0;
}

#menu li {
display:inline;
}

#menu a {
  display:block;
  float:left;
  height:35px;
  text-transform:none;
  text-decoration:none;
  font-size:1em;
  font-weight:400;
  color:#666666;
  margin:0 10px;
  padding:5px 20px 0;
  background-color: #F5F5F5;
}

#menu ul li a:hover {
  color:#FFFFFF;
  background-color: #FFCFCE;
}

#menu .active a {
  background-color: #FFCFCE;
}

/* Page */
#page {
width:918px;
margin:0 auto;
}

/* Content */
#content {
float:left;
width:550px;
padding:0 0 0 24px;
}

/*------------ end header --------------- 

/*------------------------------------------------footer--------------------*/
#footer {
  width: 960px;
  height: 83px;
  margin: 0 auto;
  border-top-width: thin;
  border-top-style: dotted;
  border-top-color: #E5E5E5;
}

#footer p {
  padding-top: 20px;
  text-align: center;
  font-size: .8em;
  font-weight: bold;
}
a.link,
a:visited.link {
  background: white;
  border-bottom: 1px dotted #6e99bf;
  color: #02689b;
  line-height: 1.6em;
  outline: none;
  padding: 1px;
  text-decoration: none;
}
a:hover.link,
a:focus.link {
  background: #eaf3f8;
  color: black;
  text-decoration: none;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #E30078;
}

</style>


<style type="text/css" media="all">
@import "style.css";
</style>
</head>
<body>
<div id="logo">
  <h1><a href="http://www.free-css.com/"></a></h1>
  <h2 class="leftimg"><a href="http://www.free-css.com/"><img src="artdesign-images/logo.gif" alt="" width="249" height="93" class="leftimg" /></a></h2>
</div>
<div id="menu">
  <ul>
    <li class="active"><a href="http://www.free-css.com/" accesskey="1">Home</a></li>
    <li><a href="http://www.free-css.com/" accesskey="2">Portfolio</a></li>
    <li><a href="http://www.free-css.com/" accesskey="3">Services</a></li>
    <li><a href="http://www.free-css.com/" accesskey="4">About Us</a></li>
    <li><a href="http://www.free-css.com/" accesskey="5">Contact Us</a></li>
  </ul>
</div>
<div id="bg">
  <div id="page">
    <!-- end #content -->
    <div id="body">
      <div id="content">
        <h1>&nbsp;</h1>
        <h1><a href="http://www.free-css.com/">About Art Design</a></h1>
        <a href="http://www.free-css.com/"><img src="artdesign-images/grafic1.gif" alt="" width="174" height="65" class="leftimg" /></a>
        <p><strong>Art Design</strong> is a free, W3C-compliant, CSS-based website   template by <strong>xy-media.de</strong>. This work is   distributed under the Creative Commons Attribution 2.5 License, which means that you   are free to use and modify it for any purpose. All I ask is that you include a   link back to my website in your   credits.This template has been tested and proven compatible with all major browser   environments and operating systems. For more free designs, you can visit my   website to see my other works.</p>
        <p class="important"><a href="http://www.free-css.com/"><strong>Nunc euismod, felis et adipiscing volutpat</strong></a></p>
        <p><a href="http://www.free-css.com/">Nulla sit amet enim</a>. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla.</p>
        <h1><span class="title">Fusce ultrices fringilla</span></h1>
        <p><a href="http://www.free-css.com/"><img src="artdesign-images/grafic6.gif" alt="" width="174" height="65" class="leftimg" /></a><a href="http://www.free-css.com/">Nulla sit amet enim</a>. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla.</p>
        <h1>&nbsp;</h1>
      </div>
      <div id="extra">
        <h2>&nbsp;</h2>
        <h2><span class="title"><a href="http://www.free-css.com/" class="link">Fusce ultrices fringilla</a></span></h2>
        <p><a href="http://www.free-css.com/"><img src="artdesign-images/grafic2.gif" alt="" class="rightimg" height="80" width="80" /></a><a href="http://www.free-css.com/">Nulla sit amet enim</a>. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. da visita.</p>
        <p><a href="http://www.free-css.com/"><img src="artdesign-images/grafic4.gif" alt="" class="rightimg" height="80" width="80" /></a><a href="http://www.free-css.com/">Nulla sit amet enim</a>. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. da visita.</p>
        <p><a href="http://www.free-css.com/"><img src="artdesign-images/grafic3.gif" alt="" class="rightimg" height="80" width="80" /></a><a href="http://www.free-css.com/">Nulla sit amet enim</a>. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. da visita.</p>
        <p><a href="http://www.free-css.com/"><img src="artdesign-images/grafic.gif" alt="" class="rightimg" height="80" width="80" /></a><a href="http://www.free-css.com/">Nulla sit amet enim</a>. Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus, ac accumsan pede lacus sed nulla. da visita.</p>
        <p>&nbsp;</p>
      </div>
      <!--end extra-->
    </div>
    <!-- end #sidebar -->
    <div style="clear: both; height: 20px;">&nbsp;</div>
  </div>
  <!-- end #page -->
</div>
<!-- end #bg -->
<div id="footer">
  <p>&copy;2007 Art Design All Rights Reserved. &nbsp;&bull;&nbsp; Design by <a href="http://www.xy-media.de" class="link">xy-media.de</a> &nbsp;&bull;&nbsp; Valid <span class="link"><a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer" class="link">CSS</a> </span>| <span class="link"><a target="_blank" href="http://validator.w3.org/check?uri=referer" class="link">XHTML Strict</a></span></p>
</div>
</body>
</html>
Related examples in the same category

1.	metamorph_artgallery
2.	metamorph_burninghouse
3.	metamorph_burningshore
4.	metamorph_dreamclouds
5.	metamorph_dreamingirl
6.	metamorph_ball
7.	metamorph_ballway
8.	metamorph_abstractred
9.	metamorph_bubles
10.	adornment
11.	airwaves
12.	metamorph_movie
13.	art-gallery
14.	artclass
15.	ArtDesign1
16.	ArtDesign2
17.	ArtDesign3
18.	ArtDesign4
19.	artist
20.	artistic
21.	studio-980
22.	studio
23.	Studio5
24.	studio_art