artistic : Art « Templates « HTML / CSS






  1. HTML / CSS
  2. Templates
  3. Art

artistic

    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--

Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Title      : Artistic
Version    : 1.0
Released   : 20070802
Description: A two-column, fixed-width template with pastel color. Suitable for small websites and blogs.

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Artistic by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
  margin: 20px 0;
  padding: 0;
  background: #4C4C4C;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #6C7496;
}

h1, h2, h3 {
  margin-top: 0;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-weight: normal;
  color: #846CCB;
}

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

h2 {
  font-size: 1.8em;
}

h3 {
  font-size: 1.2em;
  font-weight: bold;
}

p, ul, ol {
  margin-bottom: 1.8em;
  line-height: 2em;
}

p {
}

blockquote {
  font-style: italic;
}

ul {
}

ol {
}

a {
  text-decoration: none;
  border-bottom: 1px solid #BFC6E3;
  color: #145BF9;
}

a:hover {
  border: none;
}

small {
}

hr {
  display: none;
}

img {
  border: none;
}

img.left {
  float: left;
  margin: 0 15px 0 0;
}

img.right {
  float: left;
  margin: 0 0 0 15px;
}

/* Header */

#header {
  width: 775px;
  height: 237px;
  margin: 0 auto;
  background: url(artistic-images/img01.jpg);
}

#header h1, #header h2 {
  float: left;
  margin: 0;
}

#header h1 {
  padding: 155px 0 0 20px;
  letter-spacing: 5px;
  font-size: 3em;
}

#header h2 {
  padding: 175px 0 0 5px;
  font-size: 1.4em;
}

#header a {
  border: none;
  color: #FFFFFF;
}

/* Page */

#page {
  width: 770px;
  margin: 0 auto;
  background: #FFFFFF url(artistic-images/img02.gif) repeat-x;
  border-right: 5px solid #414141;
}

/* Content */

#content {
  float: left;
  width: 460px;
  padding: 30px 20px;
}

/* Post */

.post {
  margin-bottom: 2em;
}

.post .title {
  margin: 0;
}

.post .title a {
  border: none;
  color: #846CCB;
}

.post .title a:hover {
  color: #145BF9;
}

.post .date {
  margin: 0 0 2em 0;
  font-size: .7em;
}

.post .entry {
}

.post .meta {
  padding: 5px 20px;
  background: #ABE0CC;
  color: #1451F4;
}

.post .meta a {
  color: #1451F4;
}

/* Sidebar */

#sidebar {
  float: right;
  width: 240px;
  padding: 40px 20px 0 0;
  color: #FFFFFF;
}

#sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#sidebar li {
  margin-bottom: 10px;
  background: #FF8DF0;
}

#sidebar li ul {
  padding: 15px;
}

#sidebar li li {
  margin: 0;
}

#sidebar li h2 {
  margin: 0;
  padding: 5px 15px;
  background: #FF5DDA;
  font-size: 1.4em;
  color: #FFFFFF;
}

#sidebar a {
  border: none;
  color: #FFFFFF;
}

#sidebar form {
  margin: 0;
  padding: 15px;
}

#sidebar fieldset {
  border: none;
}

#sidebar input {
  font: normal 1em Verdana, Arial, Helvetica, sans-serif;
}

#sidebar #s {
  width: 190px;
}

/* Footer */

#footer {
  width: 775px;
  margin: 0 auto;
  padding: 15px 0;
  background: url(artistic-images/img03.gif) no-repeat;
}

#footer p {
  margin: 0;
  line-height: normal;
  font-size: .8em;
  color: #999999;
}

#footer a {
  border: none;
  font-weight: bold;
  color: #999999;
}

#footer a:hover {
  color: #FFFFFF;
}

</style>


</head>
<body>
<div id="header">
  <h1><a href="http://www.free-css.com/">Artistic</a></h1>
  <h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
</div>
<div id="page">
  <div id="content">
    <div class="post">
      <h1 class="title"><a href="http://www.free-css.com/">Welcome to Our Website!</a></h1>
      <p class="date">August 2, 2007</p>
      <div class="entry">
        <p><strong>Artistic</strong> is a free template from <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. You're free to use it for both commercial or personal use. I only ask that you link back to <a href="http://www.freecsstemplates.org/">my site</a> in some way. <em>Enjoy :)</em></p>
      </div>
      <p class="meta">Filed under <a href="http://www.free-css.com/">Uncategorized</a> | <a href="http://www.free-css.com/">Comments (8)</a></p>
    </div>
    <div class="post">
      <h2 class="title"><a href="http://www.free-css.com/">Praesent Scelerisque</a></h2>
      <p class="date">July 27, 2007</p>
      <div class="entry">
        <blockquote>
          <p>&ldquo;Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh.&rdquo;</p>
        </blockquote>
        <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat:</p>
      </div>
      <p class="meta">Filed under <a href="http://www.free-css.com/">Uncategorized</a> | <a href="http://www.free-css.com/">Comments (8)</a></p>
    </div>
  </div>
  <!-- end content -->
  <div id="sidebar">
    <ul>
      <li>
        <h2>Search</h2>
        <form method="get" action="">
          <fieldset>
          <input type="text" id="s" name="s" value="" />
          <br />
          <input name="submit" type="submit" id="searchsubmit" value="Search" />
          </fieldset>
        </form>
      </li>
      <li>
        <h2>Archives</h2>
        <ul>
          <li><a href="http://www.free-css.com/">August 2007</a> (1)</li>
          <li><a href="http://www.free-css.com/">July 2007</a> (31)</li>
          <li><a href="http://www.free-css.com/">June 2007</a> (30)</li>
          <li><a href="http://www.free-css.com/">May 2007</a> (31)</li>
          <li><a href="http://www.free-css.com/">April 2007</a> (30)</li>
        </ul>
      </li>
      <li>
        <h2>Categories</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Ut semper vestibulum</a> (32)</li>
          <li><a href="http://www.free-css.com/">Vestibulum luctus</a> (19)</li>
          <li><a href="http://www.free-css.com/">Integer rutrum nisl</a> (33)</li>
          <li><a href="http://www.free-css.com/">Etiam malesuada</a> (12)</li>
          <li><a href="http://www.free-css.com/">Aenean elementum</a> (41)</li>
          <li><a href="http://www.free-css.com/">Ut tincidunt elit</a> (18)</li>
          <li><a href="http://www.free-css.com/">Sed quis odio</a> (30)</li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- end sidebar -->
  <div style="clear: both;">&nbsp;</div>
</div>
<!-- end page -->
<div id="footer">
  <p id="legal">&copy;2007 Artistic. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p>
  <p id="links"><a href="http://www.free-css.com/">Privacy</a> | <a href="http://www.free-css.com/">Terms</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></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.artdesign
16.ArtDesign1
17.ArtDesign2
18.ArtDesign3
19.ArtDesign4
20.artist
21.studio-980
22.studio
23.Studio5
24.studio_art