Subtle, Clean, Flexible.

About This Design

This design was born out of a general idea, and the colors selected from ones that are my mother's favorites. She's always had a love for pink and gray, and she adores pearls, so that was the inspiration for this design. She also hates clutter in websites, so I was careful to try to keep white space as much as possible.

Specs

The main area of the page fills 80% of the window, the header and footer areas fill 100%. The main page has a three column look, with the second column actually containing two separate columns as well. The layout is ideal for screens with a 1024 resolution width and higher, but works fine for smaller screens as well.

I have used a shocking (for me at least) 21 images in this design. The total file size of those images comes to 18.2k all together. However, with the exception of the image placeholder box used in different places, all of the images are background images and the site looks perfectly fine without them. The vast majority of the icons come from the popular free Silk Icons set.

As always, this website is XHTML 1.0 Strict, is completely tableless for layout, and has been tested in Firefox, IE 6 and IE 7 Beta 2, Opera, Konqueror, and Safari.

f you have problems with this template, or questions, you can post them on the original release page or contact me directly.

Learn More

The Included Styles

Alternate Layout

There is an alternate subpage layout that is a single column look. On the subpage you will find all of the included styles given as examples of use. On the subpage I have also added links in a little section at the bottom that might be good for webpage tagging and bookmarking.

View the Alternate Layout

Special Styles

For this design, I have also taken a more careful hand with the typography and extra styles so that I could convey the clean, elegant, look I was going for.

While I normally include a series of different styles that can be used, I went a little bit further this time and created more. I made many quick classes for general use, things like bold, italic, underline, strikethrough, and highlight.

You can see all of the included special styles shown on the subpage.

View the Included Styles

Usage

I am freeing this template according to the Creative Commons Attribution 2.5 License. That license gives you the right to use this template in any way (commercial or non-commercial), make changes to it, create things based on it, etc... so long as an attribution is made to the author. Per this, please leave the link at the bottom of the footer to my site, though you are free to change the text of that link (such as, 'Based on a design by', etc..) to suit your needs. You can also, alternatively, put a link in your 'About' page or other page as appropriate.

About Us

This is a good section to use to say a bit about your website, a quick summary of what it is all about. This is a good section to use to say a bit about your website, a quick summary of what it is all about. This is a good section to use to say a bit about your website, a quick summary of what it is all about.

Learn More

News

  • News Headline
    • This is a news item and has a link in it. This is a news item and has a link in it.
  • News Headline
    • This is a news item and has a link in it. This is a news item and has a link in it.
  • News Headline
    • This is a news item and has a link in it. This is a news item and has a link in it.
  • News Headline
    • This is a news item and has a link in it. This is a news item and has a link in it.
  • News Headline
    • This is a news item and has a link in it. This is a news item and has a link in it.
  • News Headline
    • This is a news item and has a link in it. This is a news item and has a link in it.

Advertisements

Placeholder.

A good place for your text ads, flicker feed, amazon wish list, widgets, or some sort of buttons to things you like.

Placeholder.

Read the comments in the HTML for this section.

Placeholder.Image with class=float:left. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum tincidunt libero ut urna. Mauris euismod mollis lacus. Suspendisse mollis felis nec erat mattis sagittis. Quisque eget pede eget risus viverra cursus. Praesent dui lectus, lacinia quis, posuere in, tempus ac, diam. Etiam congue nibh quis dolor. Aliquet vel, gravida nec, erat. Fusce posuere rutrum nunc. Suspendisse varius. Phasellus porttitor rhoncus augue.

Placeholder.Image with class=float:right. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum tincidunt libero ut urna. Mauris euismod mollis lacus. Suspendisse mollis felis nec erat mattis sagittis. Quisque eget pede eget risus viverra cursus. Praesent dui lectus, lacinia quis, posuere in, tempus ac, diam. Etiam congue nibh quis dolor. Nunc quis tellus. Vestibulum eget ante. Nulla at pede. Vivamus ac orci. Aliquam erat volutpat.