Site hosted by Angelfire.com: Build your free website today!

Something terrible happened here...

I was working on this layout before life swallowed me whole. It's different from what I usually do - the textures and the blending (or the attempt at blending). A lot of stock images where used together to create this, though I make some parts from scratch.

I tried to make it look as clean as possible, but with textures like these... it proved difficult. On the other hand, it feels like I'm rebelling, using textures in a time where everyone wants clean and simple.

You don't need to keep the calender on the left side, it's coded so that if you choose not to, you can place additional links or text there instead.

How to Use & Extras

  1. Unzip the .zip file.
  2. Upload it's contents as is to your own server.
  3. Edit the index.html for the content and links in the navigation.
  4. Please leave the style.css as it is.

Example of a form:



A blockquote

This is a blockquote.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam pelleuntesque eros a lorem. In nulla. Aenean at nisl sit amet quam porta egestas. Fusce libero est, luctus sodales, aliquam id, scelerisque vitae, libero.

Free buttons:

Credits/Disclaimer

You can remove the credits above if you have properly credited elsewhere on your site.

If you have any questions, concerns, complaints, errors to report etc, don't hesitate to contact me. Enjoy =)

* { padding: 0; margin: 0; } body { background: #262e2d url(images/page_bg.jpg) repeat; font: 70%/150% 'lucida sans unicode', verdana, arial, sans-serif; color: #242A2A; text-align: center; } a { cursor: default; text-decoration: none; } /*-- Skeleton --*/ #whole { margin: 0 auto; } #top_bg { background: url(images/top_bg.jpg) top repeat-x; width: 100%; } #layout { background: url(images/lay_bg.jpg) repeat-y; margin: 0 auto; width: 770px ; text-align: left; } #header { background: url(images/image_01.jpg) top no-repeat; width: 770px; height: 148px; } #site_title { padding: 102px 100px 0 290px; text-align: center; color: #2F1812; } #container { background: url(images/image_02.jpg) top no-repeat; width: 770px; float: left; } #container_bg { background: url(images/image_03.jpg) bottom no-repeat; float: left; } #content { width: 427px; float: right; margin: 350px 85px 0 0; font-family: 'lucida sans unicode', verdana, arial, sans-serif; } #navigation { width: 230px; float: left; color: #817664; } #nav_text{ padding: 0 35px 0 20px; } #footer { background: url(images/image_04.jpg) top no-repeat; height: 120px; clear: both; position: relative; color: #0E1712; } #copyright { clear: both; float: left; padding: 44px 0 0 260px; width: 430px; text-align: center; } /*-- Headers --*/ h1 { font: 320% 'times new roman', serif; } #site_title a, #site_title a:hover { text-decoration: none; color: #2F3F3F; } h2 { font-weight: bold; font-family: arial,sans-serif; } #navigation h2 { font-size: 110%; margin: 10px 0 10px -8px; text-align: center; background: url(images/underline.gif) bottom center no-repeat; padding-bottom: 2px; } #content h2 { font-size: 120%; background: url(images/h2.jpg) bottom no-repeat; padding: 0 0 30px 0; margin: 10px 0 -15px 0; color: #1C1F1F; } h3 { font-size: 100%; color: #333F3F; border-bottom: 1px solid #766A5E; margin: 10px 0; } /*-- Menu Links --*/ #menu_links ul { text-align: right; margin: 13px 0 60px 0; list-style-type: none; } #menu_links li { margin: 10px 0; text-transform: uppercase; font: bold 12px arial, sans-serif ; background: url(images/underline.gif) 12px 1px no-repeat; padding: 2px 10px 2px 2px; display: block; } #menu_links li:hover { background: url(images/underline.gif) 12px -19px no-repeat; } #navigation #menu_links li a { color: #A59681; } #navigation #menu_links li a:hover { color: #BFAE95; } /*-- Mini Nav Box --*/ .minibox { background: url(images/minibox_02.jpg) repeat-y; width: 210px; color: #222828; margin: 0 20px 0 -20px; } .minibox_header { background: url(images/minibox_01.jpg) top left no-repeat; height: 60px; } .minibox_content { background: url(images/minibox_02.jpg) top left no-repeat; padding: 0 30px 0 28px; float: left; } .minibox_footer { background: url(images/minibox_03.jpg) top left no-repeat; height: 48px; clear: both; } /*-- Lists and Links --*/ ul, ol { margin: 10px 0 10px 20px; } ol { margin-left: 40px; } #content ul { margin-left: 35px; } #navigation ul { list-style-type: none; } #navigation #nav_text ul li { background: url(images/bullet.gif) no-repeat 0 5px; padding-left: 20px; } #navigation li a { color: #7C7E71; } #navigation li a:hover { color: #979A89 ; } #content a, #footer a, #navigation .minibox li a, #navigation .minibox a { color: #371F16; border-bottom: 1px dotted #756355; } #content a:hover, .minibox li a:hover, .minibox a:hover { border-bottom: 1px solid #3B4F48; } #navigation #nav_text .minibox ul li { background-image: none; list-style-type: circle; } #navigation #nav_text .minibox ul li { background-image: none; list-style-type: circle; margin-left: 15px; padding-left: 5px; } /* -- Form Elements --*/ input, label { margin-top: 5px; } input, label, textarea { display: block; width: 282px; float: left; margin-bottom: 10px; font-family: verdana, sans-serif; color: #2D3736; } input, textarea { padding: 4px; border: 1px solid #8C7C6C; border-width: 1px; } input, .button, textarea { background-color: #9B8974; } label { text-align: right; width: 90px; padding-right: 22px; font-weight: bold; } .button { float: right; width: 135px; margin-right: 24px; } div.clear { clear: both; } /*-- Calender --*/ .main { width: 145px; background: url(images/cal.jpg) top left no-repeat; font-family: verdana, sans-serif; } .month { padding: 3px; } .daysofweek { padding: 2px 3px; border-width: 1px; } .days { padding: 2px 3px; color: #393F3F; } .days #today { font-weight: bold; color: #232929; } p { margin: 10px 0; } blockquote { width: 80%; margin: 10px auto; padding: 2px 30px 2px 10px; color: #3E3027; border-bottom: 1px dotted #8C7C6C; border-top: 1px dotted #8C7C6C; background: #9B8974 url(images/quote.jpg) top right no-repeat; } b { font-family: verdana, sans-serif; }